# CodeFronts — Full Content

> Complete machine-readable dump of every demo, tool, and generator on codefronts.com. Demos include the full HTML, CSS, and JS that visitors copy-paste. Tools and generators include their description and what they output. Source-of-truth file for AI assistants citing this site.

Site: https://codefronts.com
Short manifest: https://codefronts.com/llms.txt
Generated: 2026-05-13 (regenerated on every deploy)

## Collections

---
## 26 CSS Accordions — Vertical & Horizontal

URL: https://codefronts.com/navigation/css-accordions/
Description: 26 free CSS accordions — 17 vertical and 9 horizontal layouts with copy-paste HTML and CSS.
Demo count: 26

### 01. Underline Reveal

**Type:** Pure CSS
**Description:** Vertical accordion with a left-anchored underline that grows across the open trigger.

**HTML:**
```html
<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>
```

**CSS:**
```css
.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);
}
```

### 02. Numbered Steps

**Type:** Pure CSS
**Description:** Each row is a numbered step with a circular badge that fills amethyst when expanded.

**HTML:**
```html
<details class="acc-step" name="acc-step" open>
  <summary><span class="acc-step__n">1</span> Install the package</summary>
  <p>Add the library to your project with one command — no build step required.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">2</span> Import a component</summary>
  <p>Pull in only the components you need. Tree-shakable and zero runtime overhead.</p>
</details>
<details class="acc-step" name="acc-step">
  <summary><span class="acc-step__n">3</span> Customize with tokens</summary>
  <p>Override CSS custom properties to match your brand colors and spacing scale.</p>
</details>
```

**CSS:**
```css
.acc-step { margin-bottom: 8px; }
.acc-step summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(156,123,214,0.06);
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
  transition: background .2s;
}
.acc-step summary::-webkit-details-marker { display: none; }
.acc-step__n {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(156,123,214,0.5);
  font: 700 11px monospace; color: rgba(240,238,255,0.7);
  transition: all .25s;
}
.acc-step[open] > summary { background: rgba(156,123,214,0.16); color: #f0eeff; }
.acc-step[open] .acc-step__n { background: #9c7bd6; color: #fff; border-color: #9c7bd6; }
.acc-step p {
  margin: 8px 0 0; padding: 0 14px 12px 48px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 03. Plus / Minus Morph

**Type:** Pure CSS
**Description:** A pure-CSS plus icon that morphs into a minus when the row opens — both bars are pseudo-elements.

**HTML:**
```html
<details class="acc-pm" name="acc-pm">
  <summary>Project setup<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Drop the snippet into any HTML page — works with any framework or none at all.</p>
</details>
<details class="acc-pm" name="acc-pm" open>
  <summary>Browser support<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Modern evergreen browsers. Native &lt;details&gt; has shipped everywhere since 2020.</p>
</details>
<details class="acc-pm" name="acc-pm">
  <summary>Theming<span class="acc-pm__ico" aria-hidden="true"></span></summary>
  <p>Override --acc-pm-accent on the parent to recolor the entire group instantly.</p>
</details>
```

**CSS:**
```css
.acc-pm { --acc-pm-accent: #d49a5c;
  border: 1px solid rgba(212,154,92,0.18); border-radius: 10px;
  margin-bottom: 6px; overflow: hidden;
}
.acc-pm summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.78);
}
.acc-pm summary::-webkit-details-marker { display: none; }
.acc-pm__ico {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.acc-pm__ico::before, .acc-pm__ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--acc-pm-accent); border-radius: 1px;
  transition: transform .35s cubic-bezier(.5,1.5,.5,1);
}
.acc-pm__ico::before { width: 100%; height: 2px; }
.acc-pm__ico::after  { width: 2px;  height: 100%; }
.acc-pm[open] .acc-pm__ico::after  { transform: rotate(90deg); }
.acc-pm[open] .acc-pm__ico::before { transform: rotate(180deg); }
.acc-pm[open] { background: rgba(212,154,92,0.05); }
.acc-pm p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 04. Chevron Rotate

**Type:** Pure CSS
**Description:** A pure-CSS chevron arrow rotates 180° on open — built from a single bordered square.

**HTML:**
```html
<details class="acc-chv" name="acc-chv">
  <summary>How long does setup take?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Under five minutes. Copy the markup, paste the styles, you're done.</p>
</details>
<details class="acc-chv" name="acc-chv" open>
  <summary>
    Can I use this commercially?<span class="acc-chv__ico" aria-hidden="true"></span>
  </summary>
  <p>Yes — MIT licensed. Use it in client work, products, anywhere.</p>
</details>
<details class="acc-chv" name="acc-chv">
  <summary>Is there a Figma version?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Not yet. Designs live in code as the source of truth.</p>
</details>
```

**CSS:**
```css
.acc-chv {
  border-bottom: 1px solid rgba(143,179,163,0.18); padding: 4px 0;
}
.acc-chv summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 4px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.7);
  transition: color .2s;
}
.acc-chv summary::-webkit-details-marker { display: none; }
.acc-chv summary:hover { color: #f0eeff; }
.acc-chv__ico {
  width: 9px; height: 9px;
  border-right: 2px solid #8fb3a3;
  border-bottom: 2px solid #8fb3a3;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .35s cubic-bezier(.4,1.4,.5,1);
  flex-shrink: 0;
}
.acc-chv[open] > summary { color: #f0eeff; }
.acc-chv[open] .acc-chv__ico {
  transform: rotate(225deg) translate(-2px,-2px);
}
.acc-chv p {
  margin: 0 0 12px; padding: 0 4px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 05. Brutalist Stamp

**Type:** Pure CSS
**Description:** Heavy-bordered, rectangular accordion with a hard offset shadow that flips on open.

**HTML:**
```html
<details class="acc-brut" name="acc-brut" open>
  <summary>RAW PRINCIPLES</summary>
  <p>No gradients. No shadows blurred soft. Just hard rectangles, two colors, and intent.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>NO COMPROMISE</summary>
  <p>Function leads form. Form documents function. Decoration earns its keep or it leaves.</p>
</details>
<details class="acc-brut" name="acc-brut">
  <summary>BUILT TO LAST</summary>
  <p>Heavy structure ages well. Trends fade. A clear typographic system stays useful.</p>
</details>
```

**CSS:**
```css
.acc-brut {
  background: #f0eeff; color: #15151d;
  border: 2px solid #15151d;
  box-shadow: 4px 4px 0 #9c7bd6;
  margin-bottom: 12px;
  transition: box-shadow .15s, transform .15s;
}
.acc-brut summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0.12em;
  border-bottom: 2px solid transparent;
}
.acc-brut summary::-webkit-details-marker { display: none; }
.acc-brut[open] {
  box-shadow: 2px 2px 0 #9c7bd6;
  transform: translate(2px,2px);
}
.acc-brut[open] summary { border-bottom-color: #15151d; }
.acc-brut p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui, sans-serif;
}
```

### 06. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass card accordion with backdrop-blur and a luminous rim that brightens on open.

**HTML:**
```html
<details class="acc-glass" name="acc-glass" open>
  <summary>What's inside?<span class="acc-glass__caret"></span></summary>
  <p>A frosted surface with a subtle border that catches light when the row expands.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Does blur cost performance?<span class="acc-glass__caret"></span></summary>
  <p>backdrop-filter is GPU-accelerated. Use it on small islands rather than wide swaths.</p>
</details>
<details class="acc-glass" name="acc-glass">
  <summary>Browser fallback?<span class="acc-glass__caret"></span></summary>
  <p>The semi-transparent background still reads gracefully without the blur effect.</p>
</details>
```

**CSS:**
```css
.acc-glass {
  background: linear-gradient(135deg, rgba(156,123,214,0.07), rgba(143,179,163,0.05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(240,238,255,0.08);
  border-radius: 14px; margin-bottom: 8px;
  transition: border-color .3s, background .3s;
}
.acc-glass summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 18px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.82);
}
.acc-glass summary::-webkit-details-marker { display: none; }
.acc-glass__caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid rgba(240,238,255,0.5);
  border-bottom: 1.5px solid rgba(240,238,255,0.5);
  transform: rotate(45deg); transition: transform .3s;
}
.acc-glass[open] {
  border-color: rgba(156,123,214,0.45);
  background: linear-gradient(135deg, rgba(156,123,214,0.14), rgba(143,179,163,0.08));
}
.acc-glass[open] .acc-glass__caret { transform: rotate(225deg); }
.acc-glass p {
  margin: 0; padding: 0 18px 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.6);
}
```

### 07. Minimal Rail

**Type:** Pure CSS
**Description:** A thin colored rail on the left highlights the active row — no other decoration.

**HTML:**
```html
<details class="acc-rail" name="acc-rail" open>
  <summary>Typography</summary>
  <p>One sans family, three weights, two sizes. That's the whole system.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Spacing</summary>
  <p>Built on an 8-point base with optional 4-point quarter-step for fine control.</p>
</details>
<details class="acc-rail" name="acc-rail">
  <summary>Color</summary>
  <p>Three brand tokens, four neutral steps. Override via CSS custom properties.</p>
</details>
```

**CSS:**
```css
.acc-rail {
  position: relative; padding: 0 0 0 16px; margin-bottom: 4px;
}
.acc-rail::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; background: rgba(240,238,255,0.06); border-radius: 2px;
  transition: background .25s;
}
.acc-rail summary {
  cursor: pointer; list-style: none; padding: 11px 0;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.6);
  transition: color .2s;
}
.acc-rail summary::-webkit-details-marker { display: none; }
.acc-rail[open]::before { background: linear-gradient(180deg, #9c7bd6, #d49a5c); }
.acc-rail[open] > summary { color: #f0eeff; }
.acc-rail p {
  margin: 0 0 12px; padding: 0;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.5);
}
```

### 08. Card Lift

**Type:** Pure CSS
**Description:** Floating cards that lift with a soft shadow when expanded — accent color shifts subtly.

**HTML:**
```html
<details class="acc-lift" name="acc-lift" open>
  <summary>Mountain View</summary>
  <p>Wake to clear sightlines and warm light. The view is the room.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Garden Suite</summary>
  <p>A private terrace facing south, framed by old growth and stone.</p>
</details>
<details class="acc-lift" name="acc-lift">
  <summary>Loft Studio</summary>
  <p>Open plan with full-height windows and a quiet corner for work.</p>
</details>
```

**CSS:**
```css
.acc-lift {
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.05);
  border-radius: 12px; margin-bottom: 8px;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, border-color .3s;
}
.acc-lift summary {
  cursor: pointer; list-style: none; padding: 14px 16px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.75);
}
.acc-lift summary::-webkit-details-marker { display: none; }
.acc-lift[open] {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -10px rgba(156,123,214,0.4);
  border-color: rgba(156,123,214,0.3);
}
.acc-lift[open] > summary { color: #f0eeff; }
.acc-lift p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}
```

### 09. Strip Tabs

**Type:** Pure CSS
**Description:** Horizontal column accordion — each strip widens when activated, others compress to a label.

**HTML:**
```html
<div class="acc-strip">
  <input type="radio" name="strip" id="strip-1" checked />
  <input type="radio" name="strip" id="strip-2" />
  <input type="radio" name="strip" id="strip-3" />
  <input type="radio" name="strip" id="strip-4" />
  <label for="strip-1" class="acc-strip__col" data-c="0">
    <span class="acc-strip__title">DESIGN</span>
    <span class="acc-strip__body"
      >Compose from atomic tokens. Stay consistent across surfaces and scale.</span
    >
  </label>
  <label for="strip-2" class="acc-strip__col" data-c="1">
    <span class="acc-strip__title">BUILD</span>
    <span class="acc-strip__body">Hand-coded HTML and CSS, no framework lock-in. Ship faster.</span>
  </label>
  <label for="strip-3" class="acc-strip__col" data-c="2">
    <span class="acc-strip__title">SHIP</span>
    <span class="acc-strip__body">Static output, edge-cached, instant on every connection.</span>
  </label>
  <label for="strip-4" class="acc-strip__col" data-c="3">
    <span class="acc-strip__title">REPEAT</span>
    <span class="acc-strip__body">Iterate without rewriting. Components compose cleanly.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-strip {
  display: flex; gap: 4px; height: 220px; width: 100%;
  border-radius: 12px; overflow: hidden;
}
.acc-strip > input { display: none; }
.acc-strip__col {
  flex: 1 1 0; cursor: pointer; padding: 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; overflow: hidden;
  background: #1a1a24; color: rgba(240,238,255,0.7);
  transition: flex .55s cubic-bezier(.3,1,.3,1), background .4s;
}
.acc-strip__col[data-c="0"] { background: linear-gradient(160deg,#3a2a55,#1a1a24); }
.acc-strip__col[data-c="1"] { background: linear-gradient(160deg,#553a2a,#1a1a24); }
.acc-strip__col[data-c="2"] { background: linear-gradient(160deg,#2a553a,#1a1a24); }
.acc-strip__col[data-c="3"] { background: linear-gradient(160deg,#553a55,#1a1a24); }
.acc-strip__title {
  font: 800 11px/1 system-ui; letter-spacing: 0.18em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: flex-start; transition: all .35s;
}
.acc-strip__body {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.78);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#strip-1:checked ~ [for="strip-1"],
#strip-2:checked ~ [for="strip-2"],
#strip-3:checked ~ [for="strip-3"],
#strip-4:checked ~ [for="strip-4"] {
  flex: 5 1 0; color: #f0eeff;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__title,
#strip-2:checked ~ [for="strip-2"] .acc-strip__title,
#strip-3:checked ~ [for="strip-3"] .acc-strip__title,
#strip-4:checked ~ [for="strip-4"] .acc-strip__title {
  writing-mode: horizontal-tb; transform: none; font-size: 14px;
  align-self: stretch;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__body,
#strip-2:checked ~ [for="strip-2"] .acc-strip__body,
#strip-3:checked ~ [for="strip-3"] .acc-strip__body,
#strip-4:checked ~ [for="strip-4"] .acc-strip__body {
  opacity: 1; max-height: 100px; margin-top: 8px;
}
```

### 10. Image Reveal

**Type:** Pure CSS
**Description:** Hover or focus to widen a column; the image inside zooms to fit while siblings collapse.

**HTML:**
```html
<div class="acc-img">
  <div class="acc-img__col" tabindex="0" style="--bg: #3a2a55">
    <span class="acc-img__lbl">Aurora</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #553a2a">
    <span class="acc-img__lbl">Copper</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a553a">
    <span class="acc-img__lbl">Sage</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #2a3a55">
    <span class="acc-img__lbl">Slate</span>
  </div>
  <div class="acc-img__col" tabindex="0" style="--bg: #552a3a">
    <span class="acc-img__lbl">Berry</span>
  </div>
</div>
```

**CSS:**
```css
.acc-img {
  display: flex; gap: 3px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-img__col {
  flex: 1; cursor: pointer; outline: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bg), white 25%), var(--bg));
  display: flex; align-items: flex-end; padding: 14px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s;
  filter: saturate(0.7) brightness(0.85);
}
.acc-img__col:hover, .acc-img__col:focus {
  flex: 4; filter: saturate(1.2) brightness(1);
}
.acc-img__lbl {
  font: 700 12px/1 system-ui; letter-spacing: 0.14em;
  text-transform: uppercase; color: #f0eeff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
```

### 11. Color Block

**Type:** Pure CSS
**Description:** Solid color blocks switch via radio inputs; the active block expands and reveals body copy.

**HTML:**
```html
<div class="acc-cblk">
  <input type="radio" name="cblk" id="cblk-1" checked />
  <input type="radio" name="cblk" id="cblk-2" />
  <input type="radio" name="cblk" id="cblk-3" />
  <label for="cblk-1" class="acc-cblk__b" style="--bg: #9c7bd6">
    <span class="acc-cblk__t">Amethyst</span>
    <span class="acc-cblk__d">Royal violet anchor of the system. Use for primary actions.</span>
  </label>
  <label for="cblk-2" class="acc-cblk__b" style="--bg: #d49a5c">
    <span class="acc-cblk__t">Copper</span>
    <span class="acc-cblk__d">Warm metallic accent. Use sparingly for highlights and badges.</span>
  </label>
  <label for="cblk-3" class="acc-cblk__b" style="--bg: #8fb3a3">
    <span class="acc-cblk__t">Sage</span>
    <span class="acc-cblk__d">Cool restorative neutral. Use for success and secondary chrome.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-cblk { display: flex; height: 220px; border-radius: 12px; overflow: hidden; }
.acc-cblk > input { display: none; }
.acc-cblk__b {
  flex: 1; cursor: pointer; padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--bg); color: #15151d;
  transition: flex .5s cubic-bezier(.3,1,.3,1);
}
.acc-cblk__t {
  font: 800 13px/1 system-ui; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.acc-cblk__d {
  font: 12px/1.55 system-ui; opacity: 0;
  transform: translateY(8px); transition: all .3s .12s;
}
#cblk-1:checked ~ [for="cblk-1"],
#cblk-2:checked ~ [for="cblk-2"],
#cblk-3:checked ~ [for="cblk-3"] { flex: 4; }
#cblk-1:checked ~ [for="cblk-1"] .acc-cblk__d,
#cblk-2:checked ~ [for="cblk-2"] .acc-cblk__d,
#cblk-3:checked ~ [for="cblk-3"] .acc-cblk__d {
  opacity: 1; transform: none;
}
```

### 12. Numbered Spine

**Type:** Pure CSS
**Description:** Vertical numbered labels rotate to horizontal when their column expands.

**HTML:**
```html
<div class="acc-spine">
  <input type="radio" name="spine" id="sp-1" checked />
  <input type="radio" name="spine" id="sp-2" />
  <input type="radio" name="spine" id="sp-3" />
  <label for="sp-1" class="acc-spine__c">
    <span class="acc-spine__n">01</span>
    <span class="acc-spine__t">Discover</span>
    <span class="acc-spine__b">Map the problem space. Talk to users. Sketch hypotheses.</span>
  </label>
  <label for="sp-2" class="acc-spine__c">
    <span class="acc-spine__n">02</span>
    <span class="acc-spine__t">Define</span>
    <span class="acc-spine__b">Pick one bet. Frame it crisply. Write what success looks like.</span>
  </label>
  <label for="sp-3" class="acc-spine__c">
    <span class="acc-spine__n">03</span>
    <span class="acc-spine__t">Deliver</span>
    <span class="acc-spine__b">Ship a thin slice. Measure. Decide what's next.</span>
  </label>
</div>
```

**CSS:**
```css
.acc-spine {
  display: flex; gap: 2px; height: 220px;
  border-radius: 12px; overflow: hidden; background: rgba(240,238,255,0.04);
}
.acc-spine > input { display: none; }
.acc-spine__c {
  flex: 1; cursor: pointer; padding: 14px;
  background: #1a1a24; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), background .3s;
}
.acc-spine__n {
  font: 800 18px monospace; color: rgba(212,154,92,0.8);
}
.acc-spine__t {
  font: 700 12px/1 system-ui; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240,238,255,0.55);
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: all .35s;
}
.acc-spine__b {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#sp-1:checked ~ [for="sp-1"],
#sp-2:checked ~ [for="sp-2"],
#sp-3:checked ~ [for="sp-3"] {
  flex: 4; background: linear-gradient(180deg,#1a1a24,#2a2438);
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__t,
#sp-2:checked ~ [for="sp-2"] .acc-spine__t,
#sp-3:checked ~ [for="sp-3"] .acc-spine__t {
  writing-mode: horizontal-tb; transform: none; color: #f0eeff; font-size: 14px;
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__b,
#sp-2:checked ~ [for="sp-2"] .acc-spine__b,
#sp-3:checked ~ [for="sp-3"] .acc-spine__b {
  opacity: 1; max-height: 120px;
}
```

### 13. Curtain Slide

**Type:** Pure CSS
**Description:** Active panel slides in from the right while the previous one collapses left — like a stage curtain.

**HTML:**
```html
<div class="acc-curt">
  <input type="radio" name="curt" id="curt-1" checked />
  <input type="radio" name="curt" id="curt-2" />
  <input type="radio" name="curt" id="curt-3" />
  <div class="acc-curt__tabs">
    <label for="curt-1">ONE</label>
    <label for="curt-2">TWO</label>
    <label for="curt-3">THREE</label>
  </div>
  <div class="acc-curt__stage">
    <div class="acc-curt__p" data-i="0">
      <h4>First Act</h4>
      <p>The curtain rises slowly. Light spills across the boards.</p>
    </div>
    <div class="acc-curt__p" data-i="1">
      <h4>Second Act</h4>
      <p>Tension builds. The rhythm tightens. We lean forward.</p>
    </div>
    <div class="acc-curt__p" data-i="2">
      <h4>Third Act</h4>
      <p>Resolution arrives. The audience exhales. Lights dim.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.acc-curt {
  display: flex; flex-direction: column; height: 220px;
  border-radius: 12px; overflow: hidden;
  background: #1a1a24; border: 1px solid rgba(240,238,255,0.06);
}
.acc-curt > input { display: none; }
.acc-curt__tabs {
  display: flex; background: #15151d;
  border-bottom: 1px solid rgba(240,238,255,0.06);
}
.acc-curt__tabs label {
  flex: 1; padding: 11px; cursor: pointer;
  font: 700 11px/1 system-ui; letter-spacing: 0.14em; text-align: center;
  color: rgba(240,238,255,0.5); transition: color .2s, background .2s;
}
.acc-curt__tabs label:hover { color: #f0eeff; }
.acc-curt__stage { position: relative; flex: 1; overflow: hidden; }
.acc-curt__p {
  position: absolute; inset: 0; padding: 18px;
  transform: translateX(100%); opacity: 0;
  transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .35s;
}
.acc-curt__p h4 { margin: 0 0 8px; font: 700 14px/1.2 system-ui; color: #d49a5c; }
.acc-curt__p p { margin: 0; font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7); }
#curt-1:checked ~ .acc-curt__tabs label[for="curt-1"],
#curt-2:checked ~ .acc-curt__tabs label[for="curt-2"],
#curt-3:checked ~ .acc-curt__tabs label[for="curt-3"] {
  color: #f0eeff; background: rgba(156,123,214,0.18);
}
#curt-1:checked ~ .acc-curt__stage [data-i="0"],
#curt-2:checked ~ .acc-curt__stage [data-i="1"],
#curt-3:checked ~ .acc-curt__stage [data-i="2"] {
  transform: translateX(0); opacity: 1;
}
```

### 14. Vinyl Spine

**Type:** Pure CSS
**Description:** Records on a shelf — click a spine to slide it out and reveal its label.

**HTML:**
```html
<div class="acc-vyl">
  <input type="radio" name="vyl" id="vyl-1" />
  <input type="radio" name="vyl" id="vyl-2" checked />
  <input type="radio" name="vyl" id="vyl-3" />
  <input type="radio" name="vyl" id="vyl-4" />
  <label for="vyl-1" class="acc-vyl__r" style="--c: #9c7bd6"><span>SIDE A · Echoes</span></label>
  <label for="vyl-2" class="acc-vyl__r" style="--c: #d49a5c"><span>SIDE B · Static</span></label>
  <label for="vyl-3" class="acc-vyl__r" style="--c: #8fb3a3"><span>SIDE C · Drift</span></label>
  <label for="vyl-4" class="acc-vyl__r" style="--c: #c8a2c8"><span>SIDE D · Hum</span></label>
</div>
```

**CSS:**
```css
.acc-vyl {
  display: flex; gap: 5px; padding: 16px;
  height: 220px; align-items: stretch;
  background: linear-gradient(180deg,#15151d,#1a1a24);
  border-radius: 12px;
}
.acc-vyl > input { display: none; }
.acc-vyl__r {
  flex: 0 0 22px; cursor: pointer; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c), black 35%), var(--c) 50%, color-mix(in srgb, var(--c), black 35%));
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3);
  transition: flex .45s cubic-bezier(.3,1,.3,1);
  display: flex; align-items: center; justify-content: center;
}
.acc-vyl__r span {
  font: 700 10px/1 system-ui; letter-spacing: 0.14em;
  color: rgba(0,0,0,0.7); white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
#vyl-1:checked ~ [for="vyl-1"],
#vyl-2:checked ~ [for="vyl-2"],
#vyl-3:checked ~ [for="vyl-3"],
#vyl-4:checked ~ [for="vyl-4"] { flex: 1 1 0; }
#vyl-1:checked ~ [for="vyl-1"] span,
#vyl-2:checked ~ [for="vyl-2"] span,
#vyl-3:checked ~ [for="vyl-3"] span,
#vyl-4:checked ~ [for="vyl-4"] span {
  writing-mode: horizontal-tb; transform: none; font-size: 13px;
  color: rgba(0,0,0,0.85);
}
```

### 15. Cinema Reel

**Type:** Pure CSS
**Description:** Film-strip style horizontal accordion — sprocket holes top and bottom, frame brightens on focus.

**HTML:**
```html
<div class="acc-reel">
  <div class="acc-reel__strip">
    <input type="radio" name="reel" id="reel-1" checked />
    <input type="radio" name="reel" id="reel-2" />
    <input type="radio" name="reel" id="reel-3" />
    <label for="reel-1" class="acc-reel__f"><span>SCENE 01 · Daybreak</span></label>
    <label for="reel-2" class="acc-reel__f"><span>SCENE 02 · Pursuit</span></label>
    <label for="reel-3" class="acc-reel__f"><span>SCENE 03 · Resolve</span></label>
  </div>
</div>
```

**CSS:**
```css
.acc-reel {
  background: #15151d; padding: 12px 0; border-radius: 8px;
  height: 220px; display: flex; align-items: center;
}
.acc-reel__strip {
  display: flex; gap: 4px; width: 100%; padding: 18px 12px;
  background:
    linear-gradient(#0a0a10,#0a0a10) center/100% calc(100% - 24px) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) top/100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(240,238,255,0.12) 8px 14px) bottom/100% 12px no-repeat;
}
.acc-reel__strip > input { display: none; }
.acc-reel__f {
  flex: 1; cursor: pointer; min-height: 130px;
  background: linear-gradient(135deg,#3a2a55,#2a1a45);
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font: 700 11px/1 system-ui; letter-spacing: 0.1em; color: rgba(240,238,255,0.4);
  filter: brightness(0.65) contrast(0.85);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s, color .3s;
}
.acc-reel__f:nth-of-type(2) { background: linear-gradient(135deg,#553a2a,#451a1a); }
.acc-reel__f:nth-of-type(3) { background: linear-gradient(135deg,#2a553a,#1a4530); }
#reel-1:checked ~ [for="reel-1"],
#reel-2:checked ~ [for="reel-2"],
#reel-3:checked ~ [for="reel-3"] {
  flex: 4; filter: brightness(1.1) contrast(1.05);
  color: #f0eeff; font-size: 13px;
}
```

### 16. Aurora Strip

**Type:** Pure CSS
**Description:** Each panel hides a drifting aurora gradient — pop into view by widening the active strip.

**HTML:**
```html
<div class="acc-aur">
  <input type="radio" name="aur" id="aur-1" checked />
  <input type="radio" name="aur" id="aur-2" />
  <input type="radio" name="aur" id="aur-3" />
  <label for="aur-1" class="acc-aur__c">
    <span class="acc-aur__l">North</span>
    <span class="acc-aur__d">Cold violet ribbon, 22:00 local</span>
  </label>
  <label for="aur-2" class="acc-aur__c">
    <span class="acc-aur__l">East</span>
    <span class="acc-aur__d">Warm copper veil, 23:30 local</span>
  </label>
  <label for="aur-3" class="acc-aur__c">
    <span class="acc-aur__l">West</span>
    <span class="acc-aur__d">Soft sage glow, 01:00 local</span>
  </label>
</div>
```

**CSS:**
```css
.acc-aur {
  display: flex; gap: 4px; height: 220px;
  border-radius: 12px; overflow: hidden;
}
.acc-aur > input { display: none; }
.acc-aur__c {
  flex: 1; cursor: pointer; padding: 16px; position: relative;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(156,123,214,0.5), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(212,154,92,0.4), transparent 60%),
    #15151d;
  background-size: 220% 220%, 240% 240%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  filter: brightness(0.55) saturate(0.8);
  transition: flex .5s cubic-bezier(.3,1,.3,1), filter .35s, background-position 6s linear;
}
.acc-aur__c:nth-of-type(2) {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(212,154,92,0.55), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 60%),
    #15151d;
}
.acc-aur__c:nth-of-type(3) {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(143,179,163,0.55), transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(156,123,214,0.4), transparent 60%),
    #15151d;
}
.acc-aur__l { font: 800 12px/1 system-ui; letter-spacing: 0.16em; color: rgba(240,238,255,0.85); }
.acc-aur__d { font: 11px/1.55 system-ui; color: rgba(240,238,255,0.55); margin-top: 6px;
  opacity: 0; transition: opacity .3s .15s; }
#aur-1:checked ~ [for="aur-1"],
#aur-2:checked ~ [for="aur-2"],
#aur-3:checked ~ [for="aur-3"] {
  flex: 4; filter: brightness(1.05) saturate(1.1);
  background-position: 100% 100%, 0% 0%, 0 0;
}
#aur-1:checked ~ [for="aur-1"] .acc-aur__d,
#aur-2:checked ~ [for="aur-2"] .acc-aur__d,
#aur-3:checked ~ [for="aur-3"] .acc-aur__d { opacity: 1; }
```

### 17. Diagonal Slant

**Type:** Pure CSS
**Description:** Vertical accordion where each row slants — open row straightens to a clean rectangle.

**HTML:**
```html
<details class="acc-slant" name="acc-slant" open>
  <summary>Architecture</summary>
  <p>Static-first, edge-cached, no SSR runtime. Fast on every connection.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Data layer</summary>
  <p>Content lives in flat files. Authoring is git-tracked and reviewable.</p>
</details>
<details class="acc-slant" name="acc-slant">
  <summary>Deployment</summary>
  <p>Build once, push to CDN. No servers to manage, no scaling concerns.</p>
</details>
```

**CSS:**
```css
.acc-slant {
  background: rgba(156,123,214,0.08);
  border: 1px solid rgba(156,123,214,0.2);
  margin-bottom: 6px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition: clip-path .35s cubic-bezier(.3,1.4,.5,1), background .25s;
}
.acc-slant summary {
  cursor: pointer; list-style: none; padding: 13px 22px;
  font: 700 12px/1 system-ui; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(240,238,255,0.7);
}
.acc-slant summary::-webkit-details-marker { display: none; }
.acc-slant[open] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background: rgba(156,123,214,0.18);
}
.acc-slant[open] > summary { color: #f0eeff; }
.acc-slant p {
  margin: 0; padding: 0 22px 14px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.6);
}
```

### 18. Stepped Stair

**Type:** Pure CSS
**Description:** Each row indents progressively, creating a staircase — open row pulls back to flush left.

**HTML:**
```html
<details class="acc-stair" name="acc-stair" style="--i: 0" open>
  <summary>Step one</summary>
  <p>Begin where you stand. The first move matters more than the plan.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 1">
  <summary>Step two</summary>
  <p>Ship the rough version. Real feedback beats imagined feedback.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 2">
  <summary>Step three</summary>
  <p>Refine. Cut what didn't earn its place. Keep the load light.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 3">
  <summary>Step four</summary>
  <p>Repeat the loop. Compounding shows up after the tenth turn, not the first.</p>
</details>
```

**CSS:**
```css
.acc-stair {
  margin-bottom: 4px;
  margin-left: calc(var(--i,0) * 16px);
  background: rgba(143,179,163,0.07);
  border-left: 3px solid #8fb3a3;
  border-radius: 0 8px 8px 0;
  transition: margin-left .35s cubic-bezier(.3,1.3,.5,1), background .25s;
}
.acc-stair summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font: 600 13px/1.3 system-ui; color: rgba(240,238,255,0.7);
}
.acc-stair summary::-webkit-details-marker { display: none; }
.acc-stair[open] {
  margin-left: 0; background: rgba(143,179,163,0.15);
}
.acc-stair[open] > summary { color: #f0eeff; }
.acc-stair p {
  margin: 0; padding: 0 14px 12px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
```

### 19. Circular Arc

**Type:** Pure CSS
**Description:** A four-segment ring menu — labels follow each arc via SVG textPath. Selected arc lights up with its theme color, the hub shows the active step number, and the body reveals a matching description.

**HTML:**
```html
<div class="acc-arc">
  <input type="radio" name="arc" id="arc-1" checked />
  <input type="radio" name="arc" id="arc-2" />
  <input type="radio" name="arc" id="arc-3" />
  <input type="radio" name="arc" id="arc-4" />
  <div class="acc-arc__wheel">
    <svg viewBox="0 0 140 140" class="acc-arc__svg" aria-hidden="true">
      <!-- Annular wedges aligned to cardinals: each spans ±45° around N/E/S/W.
           Outer r=66, inner r=42, center (70,70). -->
      <path
        class="acc-arc__seg"
        data-i="0"
        d="M 23.33 23.33 A 66 66 0 0 1 116.67 23.33 L 99.7 40.3  A 42 42 0 0 0 40.3 40.3   Z"
      />
      <path
        class="acc-arc__seg"
        data-i="1"
        d="M 116.67 23.33 A 66 66 0 0 1 116.67 116.67 L 99.7 99.7  A 42 42 0 0 0 99.7 40.3  Z"
      />
      <path
        class="acc-arc__seg"
        data-i="2"
        d="M 116.67 116.67 A 66 66 0 0 1 23.33 116.67 L 40.3 99.7  A 42 42 0 0 0 99.7 99.7  Z"
      />
      <path
        class="acc-arc__seg"
        data-i="3"
        d="M 23.33 116.67 A 66 66 0 0 1 23.33 23.33 L 40.3 40.3   A 42 42 0 0 0 40.3 99.7  Z"
      />
      <!-- Wedge centroid labels at radius 54 from center -->
      <text class="acc-arc__lbl" data-i="0" x="70" y="22" text-anchor="middle">DISCOVER</text>
      <text
        class="acc-arc__lbl"
        data-i="1"
        x="121"
        y="73"
        text-anchor="middle"
        transform="rotate(90 121 70)"
      >
        DEFINE
      </text>
      <text class="acc-arc__lbl" data-i="2" x="70" y="123" text-anchor="middle">DELIVER</text>
      <text
        class="acc-arc__lbl"
        data-i="3"
        x="19"
        y="73"
        text-anchor="middle"
        transform="rotate(-90 19 70)"
      >
        REFINE
      </text>
    </svg>
    <!-- Click targets: 4 wedge polygons matching the 4 SVG arcs (top, right, bottom, left) -->
    <label for="arc-1" class="acc-arc__hit acc-arc__hit--n" aria-label="Discover"></label>
    <label for="arc-2" class="acc-arc__hit acc-arc__hit--e" aria-label="Define"></label>
    <label for="arc-3" class="acc-arc__hit acc-arc__hit--s" aria-label="Deliver"></label>
    <label for="arc-4" class="acc-arc__hit acc-arc__hit--w" aria-label="Refine"></label>
    <div class="acc-arc__hub">
      <span data-i="0">01</span>
      <span data-i="1">02</span>
      <span data-i="2">03</span>
      <span data-i="3">04</span>
    </div>
  </div>
  <div class="acc-arc__body">
    <article data-i="0">
      <h4>Discover</h4>
      <p>Map the problem space. Talk to users. Sketch hypotheses before committing to a build.</p>
    </article>
    <article data-i="1">
      <h4>Define</h4>
      <p>Pick one bet. Frame it crisply. Write down what success actually looks like.</p>
    </article>
    <article data-i="2">
      <h4>Deliver</h4>
      <p>Ship a thin slice end-to-end. Measure real usage. Decide what comes next from data.</p>
    </article>
    <article data-i="3">
      <h4>Refine</h4>
      <p>
        Iterate on real signal, not imagined feedback. Compound the wins, drop what didn't earn its
        place.
      </p>
    </article>
  </div>
</div>
```

**CSS:**
```css
.acc-arc {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px;
  height: 220px; align-items: center; padding: 6px 4px;
}
.acc-arc > input { position: absolute; opacity: 0; pointer-events: none; }
.acc-arc__wheel {
  position: relative; width: 150px; height: 150px; flex-shrink: 0;
}
.acc-arc__svg { width: 100%; height: 100%; display: block; }
.acc-arc__seg {
  fill: rgba(240,238,255,0.05);
  stroke: rgba(240,238,255,0.1); stroke-width: 1;
  transition: fill .3s, stroke .3s, stroke-width .3s;
}
.acc-arc__seg[data-i="0"] { fill: rgba(156,123,214,0.2); }
.acc-arc__seg[data-i="1"] { fill: rgba(212,154,92,0.2); }
.acc-arc__seg[data-i="2"] { fill: rgba(143,179,163,0.2); }
.acc-arc__seg[data-i="3"] { fill: rgba(200,162,200,0.2); }
.acc-arc__lbl {
  font: 700 9px/1 system-ui, sans-serif;
  letter-spacing: 0.18em; fill: rgba(240,238,255,0.6);
  transition: fill .25s;
}
/* Click hit targets — 4 explicit triangular wedges from center to outer edge.
   Each polygon: center (50%,50%), outer corner A, outer corner B */
.acc-arc__hit { position: absolute; inset: 0; cursor: pointer; }
.acc-arc__hit--n { clip-path: polygon(50% 50%, 100% 0,   0    0); }
.acc-arc__hit--e { clip-path: polygon(50% 50%, 100% 100%, 100% 0); }
.acc-arc__hit--s { clip-path: polygon(50% 50%, 0    100%, 100% 100%); }
.acc-arc__hit--w { clip-path: polygon(50% 50%, 0    0,    0    100%); }
.acc-arc__hub {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px; border-radius: 50%;
  background: #1a1a24;
  box-shadow: 0 0 0 1px rgba(240,238,255,0.1), 0 6px 16px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none;
}
.acc-arc__hub span {
  grid-area: 1/1; font: 800 18px ui-monospace, monospace;
  color: #f0eeff; opacity: 0;
  transition: opacity .25s, color .25s;
}
.acc-arc__body { position: relative; height: 150px; }
.acc-arc__body article {
  position: absolute; inset: 0; margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid rgba(240,238,255,0.08);
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .3s, transform .3s, border-color .3s;
}
.acc-arc__body h4 {
  margin: 0; font: 700 14px/1.2 system-ui, sans-serif;
  letter-spacing: 0.02em; color: #f0eeff;
}
.acc-arc__body p {
  margin: 0; font: 12px/1.6 system-ui, sans-serif;
  color: rgba(240,238,255,0.7);
}
/* Active states — explicit per-arc */
#arc-1:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="0"] { fill: #9c7bd6; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-2:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="1"] { fill: #d49a5c; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-3:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="2"] { fill: #8fb3a3; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-4:checked ~ .acc-arc__wheel .acc-arc__seg[data-i="3"] { fill: #c8a2c8; stroke: rgba(255,255,255,0.4); stroke-width: 1.5; }
#arc-1:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="0"],
#arc-2:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="1"],
#arc-3:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="2"],
#arc-4:checked ~ .acc-arc__wheel .acc-arc__lbl[data-i="3"] { fill: #15151d; }
#arc-1:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="0"] { opacity: 1; color: #b896e8; }
#arc-2:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="1"] { opacity: 1; color: #d49a5c; }
#arc-3:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="2"] { opacity: 1; color: #8fb3a3; }
#arc-4:checked ~ .acc-arc__wheel .acc-arc__hub span[data-i="3"] { opacity: 1; color: #c8a2c8; }
#arc-1:checked ~ .acc-arc__body article[data-i="0"],
#arc-2:checked ~ .acc-arc__body article[data-i="1"],
#arc-3:checked ~ .acc-arc__body article[data-i="2"],
#arc-4:checked ~ .acc-arc__body article[data-i="3"] {
  opacity: 1; transform: translateX(0);
}
#arc-1:checked ~ .acc-arc__body article[data-i="0"] { border-left-color: #9c7bd6; }
#arc-2:checked ~ .acc-arc__body article[data-i="1"] { border-left-color: #d49a5c; }
#arc-3:checked ~ .acc-arc__body article[data-i="2"] { border-left-color: #8fb3a3; }
#arc-4:checked ~ .acc-arc__body article[data-i="3"] { border-left-color: #c8a2c8; }
```

### 20. Marquee Header

**Type:** Pure CSS
**Description:** Closed rows scroll their title as a slow marquee; opening pauses the marquee and reveals body.

**HTML:**
```html
<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >A long-running show that scrolls until you click · A long-running show that scrolls until you
      click ·&nbsp;</span
    >
  </summary>
  <p>Stop the marquee. The title settles. The body opens. Calm restored.</p>
</details>
<details class="acc-marq" name="acc-marq" open>
  <summary>
    <span class="acc-marq__t"
      >Now open · The motion holds still · Now open · The motion holds still ·&nbsp;</span
    >
  </summary>
  <p>The opened panel doesn't animate its title. Use marquee for "more here than fits."</p>
</details>
<details class="acc-marq" name="acc-marq">
  <summary>
    <span class="acc-marq__t"
      >Tap to open · Hover anywhere to slow down · Tap to open · Hover anywhere ·&nbsp;</span
    >
  </summary>
  <p>Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.</p>
</details>
```

**CSS:**
```css
.acc-marq {
  margin-bottom: 6px; background: rgba(212,154,92,0.06);
  border: 1px solid rgba(212,154,92,0.16); border-radius: 8px;
  overflow: hidden;
}
.acc-marq summary {
  cursor: pointer; list-style: none;
  padding: 12px 0; overflow: hidden; position: relative;
}
.acc-marq summary::-webkit-details-marker { display: none; }
.acc-marq__t {
  display: inline-block; white-space: nowrap;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.78);
  padding-left: 100%;
  animation: acc-marq-roll 14s linear infinite;
}
.acc-marq:hover .acc-marq__t { animation-play-state: paused; }
.acc-marq[open] .acc-marq__t {
  animation: none; padding-left: 16px; color: #f0eeff;
}
@keyframes acc-marq-roll {
  to { transform: translateX(-100%); }
}
.acc-marq p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
@media (prefers-reduced-motion: reduce) {
  .acc-marq__t { animation: none; padding-left: 16px; }
}
```

### 21. Code Comment

**Type:** Pure CSS
**Description:** Accordion styled as a multi-line code comment — "//" prefix on closed rows, full block on open.

**HTML:**
```html
<details class="acc-cc" name="acc-cc">
  <summary>const installCommand = "npm i";</summary>
  <p>Installs the package and resolves all peer dependencies. Adds an entry to package.json.</p>
</details>
<details class="acc-cc" name="acc-cc" open>
  <summary>const importStatement = "import x from 'lib';";</summary>
  <p>ES module import. Tree-shakable so unused exports won't bloat the bundle.</p>
</details>
<details class="acc-cc" name="acc-cc">
  <summary>const renderHook = "useEffect";</summary>
  <p>Side-effects after paint. Cleanup runs on unmount or before the next effect fires.</p>
</details>
```

**CSS:**
```css
.acc-cc {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  background: #0e0e16; border-left: 3px solid #8fb3a3;
  margin-bottom: 4px; padding: 4px 0;
}
.acc-cc summary {
  cursor: pointer; list-style: none;
  padding: 8px 14px; font-size: 12.5px;
  color: rgba(143,179,163,0.85); position: relative;
}
.acc-cc summary::-webkit-details-marker { display: none; }
.acc-cc summary::before {
  content: '// '; color: rgba(143,179,163,0.45);
}
.acc-cc[open] summary { color: #f0eeff; background: rgba(143,179,163,0.06); }
.acc-cc[open] summary::before { content: '/* '; color: #d49a5c; }
.acc-cc[open] summary::after { content: ' */'; color: #d49a5c; }
.acc-cc p {
  margin: 0; padding: 8px 14px 12px 28px;
  font: 11.5px/1.7 ui-monospace, monospace;
  color: rgba(240,238,255,0.6);
}
.acc-cc p::before {
  content: '→ '; color: #d49a5c;
}
```

### 22. Paper Folded

**Type:** Pure CSS
**Description:** Each row looks like a folded paper card; opening unfolds it with a 3D rotateX flip.

**HTML:**
```html
<details class="acc-fold" name="acc-fold" open>
  <summary>Origami</summary>
  <p>The art of folding paper into expressive form. Single sheet, no cuts, no glue.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Letterpress</summary>
  <p>Type pressed into thick cotton stock leaves a tactile bite that catches light.</p>
</details>
<details class="acc-fold" name="acc-fold">
  <summary>Saddle Stitch</summary>
  <p>Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.</p>
</details>
```

**CSS:**
```css
.acc-fold {
  background: linear-gradient(180deg, #f0eeff, #e6e2f5);
  color: #15151d; margin-bottom: 8px;
  border: 1px solid rgba(21,21,29,0.12);
  perspective: 800px; transform-style: preserve-3d;
}
.acc-fold summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; position: relative;
  border-bottom: 1px solid transparent;
  transform-origin: bottom; transition: border-color .25s;
}
.acc-fold summary::-webkit-details-marker { display: none; }
.acc-fold summary::after {
  content: '▾'; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: #9c7bd6;
  transition: transform .35s;
}
.acc-fold p {
  margin: 0; padding: 14px 16px;
  font: 12px/1.6 system-ui;
  background: linear-gradient(180deg, #faf8ff, #ece8f5);
  transform-origin: top; transform: rotateX(-90deg);
  transition: transform .45s cubic-bezier(.3,1,.3,1);
  box-shadow: inset 0 1px 0 rgba(21,21,29,0.08);
}
.acc-fold[open] summary { border-bottom-color: rgba(21,21,29,0.12); }
.acc-fold[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acc-fold[open] p { transform: rotateX(0); }
```

### 23. Equalizer

**Type:** Pure CSS
**Description:** Audio-EQ inspired — vertical bars rise to indicate the open row. Pure CSS, no JS.

**HTML:**
```html
<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Bass
  </summary>
  <p>Low-end response. Felt more than heard. Anchors the mix.</p>
</details>
<details class="acc-eq" name="acc-eq" open>
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Mids
  </summary>
  <p>The conversation register. Where vocals and lead instruments live.</p>
</details>
<details class="acc-eq" name="acc-eq">
  <summary>
    <span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Treble
  </summary>
  <p>Air and detail. Cymbals, breath, the sparkle of acoustic plucks.</p>
</details>
```

**CSS:**
```css
.acc-eq {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 8px; margin-bottom: 6px;
}
.acc-eq summary {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; list-style: none; padding: 12px 16px;
  font: 600 13px/1 system-ui; color: rgba(240,238,255,0.72);
}
.acc-eq summary::-webkit-details-marker { display: none; }
.acc-eq__bars {
  display: inline-flex; align-items: flex-end; gap: 2px;
  height: 14px; width: 22px;
}
.acc-eq__bars i {
  display: block; width: 3px; background: rgba(212,154,92,0.4);
  border-radius: 1px; height: 30%; transition: height .3s;
}
.acc-eq[open] > summary { color: #f0eeff; }
.acc-eq[open] .acc-eq__bars i {
  background: #d49a5c;
  animation: acc-eq-pulse 1.1s ease-in-out infinite alternate;
}
.acc-eq[open] .acc-eq__bars i:nth-child(1) { animation-delay: .0s; }
.acc-eq[open] .acc-eq__bars i:nth-child(2) { animation-delay: .15s; }
.acc-eq[open] .acc-eq__bars i:nth-child(3) { animation-delay: .3s; }
.acc-eq[open] .acc-eq__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes acc-eq-pulse {
  from { height: 25%; } to { height: 100%; }
}
.acc-eq p {
  margin: 0; padding: 0 16px 14px 50px;
  font: 12px/1.6 system-ui; color: rgba(240,238,255,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .acc-eq[open] .acc-eq__bars i { animation: none; height: 70%; }
}
```

### 24. Stacked Cards

**Type:** Pure CSS
**Description:** Closed rows stack with a slight scale-down and translucent overlap; opened row pops to top.

**HTML:**
```html
<details class="acc-stk" name="acc-stk" style="--i: 0" open>
  <summary>Top of pile</summary>
  <p>The first card sits flush. Behind it the others fan back in scale.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 1">
  <summary>Second card</summary>
  <p>Slightly smaller and pulled up. Click to bring it to the front of the stack.</p>
</details>
<details class="acc-stk" name="acc-stk" style="--i: 2">
  <summary>Third card</summary>
  <p>The deepest in the deck. Smaller still, but always reachable.</p>
</details>
```

**CSS:**
```css
.acc-stk {
  margin-top: -10px; margin-bottom: 0;
  background: linear-gradient(135deg, #2a2438, #1a1a24);
  border: 1px solid rgba(156,123,214,0.25);
  border-radius: 12px;
  transform: scale(calc(1 - var(--i) * 0.04)) translateY(calc(var(--i) * -2px));
  transform-origin: center top;
  transition: transform .3s, margin .3s, opacity .3s;
  opacity: calc(1 - var(--i) * 0.18);
}
.acc-stk:first-of-type { margin-top: 0; }
.acc-stk summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: #f0eeff;
}
.acc-stk summary::-webkit-details-marker { display: none; }
.acc-stk[open] {
  transform: scale(1) translateY(0);
  opacity: 1; margin-top: 8px; margin-bottom: 8px;
  border-color: rgba(212,154,92,0.5);
  box-shadow: 0 12px 30px -10px rgba(156,123,214,0.5);
}
.acc-stk:first-of-type[open] { margin-top: 0; }
.acc-stk p {
  margin: 0; padding: 0 16px 14px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}
```

### 25. Holographic Slot

**Type:** Pure CSS
**Description:** Open row shows a holographic gradient sweep — like a foil sticker catching light.

**HTML:**
```html
<details class="acc-holo" name="acc-holo" open>
  <summary>Foil A · Aurora</summary>
  <p>Cool ribbon of violet to cyan, sweeping at 20 degrees. Catches light at any angle.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil B · Copper</summary>
  <p>Warm metallic with a soft inner glow. Reads premium without going gold.</p>
</details>
<details class="acc-holo" name="acc-holo">
  <summary>Foil C · Mint</summary>
  <p>Cooler than gold, less corporate than silver. Quiet and confident.</p>
</details>
```

**CSS:**
```css
.acc-holo {
  background: #15151d; border: 1px solid rgba(240,238,255,0.06);
  border-radius: 10px; margin-bottom: 6px; overflow: hidden;
  position: relative;
}
.acc-holo summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-holo summary::-webkit-details-marker { display: none; }
.acc-holo::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,
    transparent 30%, rgba(156,123,214,0.4) 45%,
    rgba(212,154,92,0.4) 55%, rgba(143,179,163,0.4) 65%,
    transparent 80%);
  background-size: 250% 100%; background-position: 100% 0;
  opacity: 0; transition: opacity .35s, background-position 1.6s ease-out;
}
.acc-holo[open] { border-color: rgba(212,154,92,0.4); }
.acc-holo[open]::before { opacity: 1; background-position: 0% 0; }
.acc-holo[open] > summary { color: #f0eeff; }
.acc-holo p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
}
```

### 26. Aurora Drift

**Type:** Pure CSS
**Description:** Closed rows show a faint hue at the edge; open rows bloom into a slow-drifting aurora.

**HTML:**
```html
<details class="acc-drift" name="acc-drift" open>
  <summary>Northern Lights</summary>
  <p>Charged particles meet the upper atmosphere. The sky turns to ribbon.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Solar Wind</summary>
  <p>A constant stream from the sun. Some nights it sings louder than others.</p>
</details>
<details class="acc-drift" name="acc-drift">
  <summary>Geomagnetic Storm</summary>
  <p>When the wind hits hard, the auroral oval expands south. Rare gift for lower latitudes.</p>
</details>
```

**CSS:**
```css
.acc-drift {
  position: relative; margin-bottom: 6px;
  background: #15151d; border-radius: 12px;
  border: 1px solid rgba(240,238,255,0.06);
  overflow: hidden;
}
.acc-drift::before {
  content: ''; position: absolute; inset: -50%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(156,123,214,0.5), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(143,179,163,0.4), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(212,154,92,0.35), transparent 60%);
  filter: blur(20px); opacity: 0;
  animation: acc-drift-roll 18s linear infinite;
  transition: opacity .4s;
  pointer-events: none;
}
.acc-drift summary {
  cursor: pointer; list-style: none; padding: 13px 16px;
  font: 700 13px/1 system-ui; color: rgba(240,238,255,0.7);
  position: relative; z-index: 2;
}
.acc-drift summary::-webkit-details-marker { display: none; }
.acc-drift[open]::before { opacity: 0.7; }
.acc-drift[open] > summary { color: #f0eeff; }
.acc-drift p {
  margin: 0; padding: 0 16px 14px; position: relative; z-index: 2;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7);
}
@keyframes acc-drift-roll {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(8%,-6%) rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-drift::before { animation: none; }
}
```

---
## 19 CSS Blockquote Designs

URL: https://codefronts.com/snippets/css-blockquotes/
Description: 19 hand-coded CSS blockquote designs — pull quotes, testimonials, speech bubbles, tweet style, newspaper drop-caps, code comments and more. Semantic HTML, copy-paste ready.
Demo count: 19

### 01. Classic Mark

**Type:** Pure CSS
**Description:** A large violet open-quote glyph rendered as a CSS pseudo-element above an italic body, with a thin left rule. The benchmark every blockquote is measured against.

**HTML:**
```html
<figure class="cbq-classic">
  <blockquote>
    <p>Design is not just what it looks like and feels like. Design is how it works.</p>
  </blockquote>
  <figcaption>— Steve Jobs</figcaption>
</figure>
```

**CSS:**
```css
.cbq-classic {
  position: relative;
  max-width: 360px;
  padding: 28px 28px 18px;
  background: #1a1a26;
  border-left: 3px solid #7c6cff;
  border-radius: 6px;
  font-family: Georgia, serif;
  color: #e9e7ff;
}

.cbq-classic::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 14px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: #7c6cff;
}

.cbq-classic blockquote {
  margin: 0;
}

.cbq-classic p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-classic figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 02. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset-shadow card with mono font and a hot-pink accent — zero radius, zero apology. Brutalist design system fixture.

**HTML:**
```html
<figure class="cbq-brut">
  <blockquote>
    <p>SHIP IT. THE DOCS CAN COME LATER.</p>
  </blockquote>
  <figcaption>— anonymous senior dev</figcaption>
</figure>
```

**CSS:**
```css
.cbq-brut {
  max-width: 320px;
  padding: 22px 22px 16px;
  background: #fff7ed;
  border: 2px solid #0a0a0a;
  box-shadow: 7px 7px 0 #ff3d6e;
  font-family: "Courier New", monospace;
  color: #0a0a0a;
}

.cbq-brut blockquote {
  margin: 0;
}

.cbq-brut p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.cbq-brut figcaption {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff3d6e;
}
```

### 03. Glass Card

**Type:** Pure CSS
**Description:** Frosted-glass shell on a soft gradient backdrop — translucent surface, subtle inner highlight, backdrop-filter blur. Perfect over hero images.

**HTML:**
```html
<div class="cbq-glass-bg">
  <figure class="cbq-glass">
    <blockquote>
      <p>The best UI is the one you don't notice.</p>
    </blockquote>
    <figcaption>— Lena Park, Product Designer</figcaption>
  </figure>
</div>
```

**CSS:**
```css
.cbq-glass-bg {
  padding: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 50%, #2eb88a 100%);
}

.cbq-glass {
  max-width: 320px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
  font-family: system-ui, sans-serif;
}

.cbq-glass blockquote {
  margin: 0;
}

.cbq-glass p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.cbq-glass figcaption {
  margin-top: 12px;
  font-size: 11px;
  opacity: 0.85;
}
```

### 04. Neon Border

**Type:** Pure CSS
**Description:** Synthwave cyan glowing outline that pulses gently — built for dark dashboards, gaming UIs, and developer tools.

**HTML:**
```html
<figure class="cbq-neon">
  <blockquote>
    <p>Optimize for joy. The metrics will follow.</p>
  </blockquote>
  <figcaption>— k. tanaka, eng lead</figcaption>
</figure>
```

**CSS:**
```css
.cbq-neon {
  max-width: 320px;
  padding: 22px;
  background: #0a0a18;
  border: 1.5px solid #00e5ff;
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0, 229, 255, 0.2),
    0 0 18px rgba(0, 229, 255, 0.35);
  color: #d8f7ff;
  font-family: ui-monospace, monospace;
  animation: cbq-neon-pulse 3.2s ease-in-out infinite;
}

.cbq-neon blockquote {
  margin: 0;
}

.cbq-neon p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.cbq-neon figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: #00e5ff;
  letter-spacing: 0.06em;
}

@keyframes cbq-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.2),
      0 0 18px rgba(0, 229, 255, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.32),
      0 0 26px rgba(0, 229, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cbq-neon {
    animation: none !important;
  }
}
```

### 05. Pull Quote

**Type:** Pure CSS
**Description:** Magazine-style tabloid pull quote — large display font, tight leading, no rule. The kind editorial sites use to break up long-form articles.

**HTML:**
```html
<figure class="cbq-pull">
  <blockquote>
    <p>"Every line of code you don't write is a line of code that can't break."</p>
  </blockquote>
  <figcaption>From <cite>The Pragmatic Programmer</cite></figcaption>
</figure>
```

**CSS:**
```css
.cbq-pull {
  max-width: 360px;
  padding: 18px 4px;
  font-family: Georgia, "Times New Roman", serif;
  color: #f5f5f5;
}

.cbq-pull blockquote {
  margin: 0;
}

.cbq-pull p {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f5f5f5;
}

.cbq-pull figcaption {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-family: system-ui, sans-serif;
}

.cbq-pull cite {
  color: #c7c4ff;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
```

### 06. Speech Bubble

**Type:** Pure CSS
**Description:** Chat-style rounded bubble with a tail pointing to the avatar. Common pattern for testimonial walls, support pages, and case studies.

**HTML:**
```html
<figure class="cbq-speech">
  <div class="cbq-speech-bubble">
    <blockquote>
      <p>Codefronts cut my prototype time in half. Just snippets that work.</p>
    </blockquote>
  </div>
  <figcaption class="cbq-speech-meta">
    <span class="cbq-speech-avatar" aria-hidden="true">A</span>
    <span><strong>Aisha M.</strong> · frontend dev</span>
  </figcaption>
</figure>
```

**CSS:**
```css
.cbq-speech {
  max-width: 320px;
  font-family: system-ui, sans-serif;
}

.cbq-speech-bubble {
  position: relative;
  padding: 16px 18px;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px 16px 16px 4px;
  color: #f0eeff;
}

.cbq-speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 12px;
  height: 12px;
  background: #1f1f2e;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transform: rotate(45deg);
}

.cbq-speech-bubble blockquote {
  margin: 0;
}

.cbq-speech-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.cbq-speech-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-left: 8px;
  font-size: 12px;
  color: #b8b6d4;
}

.cbq-speech-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
}

.cbq-speech-meta strong {
  color: #f0eeff;
  font-weight: 600;
}
```

### 07. Vertical Rail

**Type:** Pure CSS
**Description:** Thin gradient rail on the left edge that brightens on :hover — editorial restraint. Perfect for long-form articles with multiple call-out quotes.

**HTML:**
```html
<figure class="cbq-rail">
  <blockquote>
    <p>Constraints don't kill creativity — they sharpen it.</p>
  </blockquote>
  <figcaption>— Maya Chen</figcaption>
</figure>
```

**CSS:**
```css
.cbq-rail {
  max-width: 340px;
  padding: 14px 18px;
  position: relative;
  font-family: Georgia, serif;
  color: #e0deff;
  transition: padding-left 0.25s ease;
}

.cbq-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #7c6cff, #2eb88a);
  border-radius: 3px;
  opacity: 0.5;
  transition:
    opacity 0.25s ease,
    width 0.25s ease;
}

.cbq-rail:hover::before {
  opacity: 1;
  width: 5px;
}

.cbq-rail blockquote {
  margin: 0;
}

.cbq-rail p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
}

.cbq-rail figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 08. Testimonial Card

**Type:** Pure CSS
**Description:** Testimonial card with avatar, name, role, 5-star row and a soft shadow. Production-grade pattern for landing pages and case-study walls.

**HTML:**
```html
<figure class="cbq-stamp">
  <div class="cbq-stamp-stars" aria-label="Rated 5 out of 5">
    <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
  </div>
  <blockquote>
    <p>"The component library I wished existed for years. Just works."</p>
  </blockquote>
  <figcaption>
    <span class="cbq-stamp-avatar" aria-hidden="true">JR</span>
    <span class="cbq-stamp-id">
      <strong>Jordan Rivera</strong>
      <em>Senior Engineer · Stripe</em>
    </span>
  </figcaption>
</figure>
```

**CSS:**
```css
.cbq-stamp {
  max-width: 320px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(124, 108, 255, 0.08);
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-stamp-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  color: #f5a84a;
  font-size: 14px;
}

.cbq-stamp blockquote {
  margin: 0 0 16px;
}

.cbq-stamp p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.cbq-stamp figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cbq-stamp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.cbq-stamp-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cbq-stamp-id strong {
  font-size: 13px;
  font-weight: 600;
  color: #f0eeff;
}

.cbq-stamp-id em {
  font-size: 11px;
  color: #b8b6d4;
  font-style: normal;
}
```

### 09. Highlighted Run

**Type:** Pure CSS
**Description:** Body text with a CSS mark-style highlight behind one punchy phrase — the editorial trick for drawing the eye to the key claim in a long quote.

**HTML:**
```html
<figure class="cbq-highlight">
  <blockquote>
    <p>
      Most teams optimize for <mark>shipping faster</mark> when they should be optimizing for
      <mark>shipping smaller</mark>.
    </p>
  </blockquote>
  <figcaption>— Sara López, Engineering Manager</figcaption>
</figure>
```

**CSS:**
```css
.cbq-highlight {
  max-width: 360px;
  padding: 16px 4px;
  font-family: Georgia, serif;
  color: #e9e7ff;
}

.cbq-highlight blockquote {
  margin: 0;
}

.cbq-highlight p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
}

.cbq-highlight mark {
  background: linear-gradient(180deg, transparent 55%, rgba(124, 108, 255, 0.55) 55%);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.cbq-highlight figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  font-family: system-ui, sans-serif;
}
```

### 10. Marker Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look uneven SVG underline applied beneath the punchy phrase — the personal-blog flourish that makes a quote feel handwritten.

**HTML:**
```html
<figure class="cbq-marker">
  <blockquote>
    <p>
      Make the change <span class="cbq-marker-line">easy first</span>, then make the easy change.
    </p>
  </blockquote>
  <figcaption>— Kent Beck</figcaption>
</figure>
```

**CSS:**
```css
.cbq-marker {
  max-width: 340px;
  padding: 14px 4px;
  font-family: Georgia, serif;
  color: #f0eeff;
}

.cbq-marker blockquote {
  margin: 0;
}

.cbq-marker p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

.cbq-marker-line {
  position: relative;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
}

.cbq-marker-line::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -4px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1 60 4 T 118 5' stroke='%23ffd479' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.cbq-marker figcaption {
  margin-top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  font-family: system-ui, sans-serif;
}
```

### 11. Drop Shadow Float

**Type:** Pure CSS
**Description:** Lifted card with a coloured shadow that intensifies on :hover — a subtle elevation cue that says this quote matters. Premium feel.

**HTML:**
```html
<figure class="cbq-float">
  <blockquote>
    <p>"You can have the best engine in the world, but without a chassis it's just noise."</p>
  </blockquote>
  <figcaption>— Eli Tan, CTO</figcaption>
</figure>
```

**CSS:**
```css
.cbq-float {
  max-width: 320px;
  padding: 24px;
  background: #18181f;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 8px 24px rgba(124, 108, 255, 0.18);
  transform: translateY(0);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(124, 108, 255, 0.32);
}

.cbq-float blockquote {
  margin: 0;
}

.cbq-float p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-float figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #a78bfa;
}
```

### 12. Aurora Drift

**Type:** Pure CSS
**Description:** Slow-drifting aurora gradient blob behind a glass quote surface — the premium-product accent variant. Honours prefers-reduced-motion.

**HTML:**
```html
<figure class="cbq-aurora">
  <span class="cbq-aurora-blob" aria-hidden="true"></span>
  <div class="cbq-aurora-card">
    <blockquote><p>"Beauty in software is honesty rendered visible."</p></blockquote>
    <figcaption>— Lin Wei</figcaption>
  </div>
</figure>
```

**CSS:**
```css
.cbq-aurora {
  position: relative;
  max-width: 340px;
  padding: 28px;
  border-radius: 18px;
  background: #0d0d16;
  overflow: hidden;
  isolation: isolate;
  font-family: system-ui, sans-serif;
}

.cbq-aurora-blob {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(124, 108, 255, 0.55), transparent 70%),
    radial-gradient(40% 40% at 70% 60%, rgba(255, 108, 138, 0.45), transparent 70%),
    radial-gradient(35% 35% at 50% 80%, rgba(46, 184, 138, 0.4), transparent 70%);
  filter: blur(8px);
  animation: cbq-aurora-drift 14s linear infinite;
  z-index: 0;
}

.cbq-aurora-card {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 14px;
  background: rgba(13, 13, 22, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f0eeff;
}

.cbq-aurora blockquote {
  margin: 0;
}

.cbq-aurora p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 500;
}

.cbq-aurora figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(240, 238, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .cbq-aurora-blob {
    animation: none !important;
  }
}
@keyframes cbq-aurora-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(4%, -4%) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
  }
}
```

### 13. Tweet Style

**Type:** Pure CSS
**Description:** Twitter/X-styled callout — bird/X icon, name, handle, timestamp, and like/retweet glyphs. Native to dev audiences and a great social-proof pattern.

**HTML:**
```html
<figure class="cbq-tweet">
  <header class="cbq-tweet-head">
    <span class="cbq-tweet-avatar" aria-hidden="true">DM</span>
    <span class="cbq-tweet-id">
      <strong>Dana M.</strong>
      <em>@danamcode · 2h</em>
    </span>
    <svg class="cbq-tweet-x" viewBox="0 0 24 24" aria-hidden="true">
      <path
        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L2.25 2.25h6.962l4.265 5.638L18.244 2.25z"
        fill="currentColor"
      />
    </svg>
  </header>
  <blockquote>
    <p>
      I would rather read codefronts than write CSS from scratch in 2026, and that's a hill I'm
      willing to die on.
    </p>
  </blockquote>
  <footer class="cbq-tweet-foot">
    <span aria-label="42 replies">💬 42</span>
    <span aria-label="231 reposts">🔁 231</span>
    <span aria-label="1.2k likes">♡ 1.2k</span>
  </footer>
</figure>
```

**CSS:**
```css
.cbq-tweet {
  max-width: 340px;
  padding: 14px 16px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #e7e9ea;
}

.cbq-tweet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cbq-tweet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c6cff, #2eb88a);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet-id {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.cbq-tweet-id strong {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}

.cbq-tweet-id em {
  font-size: 12px;
  color: #71767b;
  font-style: normal;
}

.cbq-tweet-x {
  width: 18px;
  height: 18px;
  color: #fff;
  flex-shrink: 0;
}

.cbq-tweet blockquote {
  margin: 0 0 10px;
}

.cbq-tweet p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.cbq-tweet-foot {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #71767b;
}
```

### 14. Newspaper

**Type:** Pure CSS
**Description:** Serif typeface, justified text, drop-cap on the first letter — old-school broadsheet feel. Pairs with editorial themes and longform pages.

**HTML:**
```html
<figure class="cbq-news">
  <blockquote>
    <p>
      Software is a love letter to the future, written in the dialect of the present. Each
      abstraction we choose narrows what tomorrow can say.
    </p>
  </blockquote>
  <figcaption>— The Architect's Notebook, Vol. 3</figcaption>
</figure>
```

**CSS:**
```css
.cbq-news {
  max-width: 360px;
  padding: 18px 6px;
  font-family: Georgia, "Times New Roman", serif;
  color: #f5f5f5;
}

.cbq-news blockquote {
  margin: 0;
}

.cbq-news p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
}

.cbq-news p::first-letter {
  float: left;
  font-size: 48px;
  line-height: 0.95;
  padding: 4px 8px 0 0;
  font-weight: 700;
  color: #ffd479;
}

.cbq-news figcaption {
  margin-top: 14px;
  font-size: 11px;
  color: #b8b6d4;
  font-style: italic;
  text-align: right;
}
```

### 15. Code Comment

**Type:** Pure CSS
**Description:** Quote styled as a code-comment block — mono font, dim grey "filename:line" header, // prefix on each line. Perfect for dev portfolios and engineering blogs.

**HTML:**
```html
<figure class="cbq-code">
  <header class="cbq-code-head">
    <span class="cbq-code-dot" aria-hidden="true"></span>
    <span class="cbq-code-dot" style="background: #f5a84a"></span>
    <span class="cbq-code-dot" style="background: #2eb88a"></span>
    <span class="cbq-code-file">manifesto.js · ln 12</span>
  </header>
  <blockquote>
    <p>// Don't write code that's so clever<br />// that you can't debug it at 3am</p>
  </blockquote>
  <figcaption>— Brian Kernighan</figcaption>
</figure>
```

**CSS:**
```css
.cbq-code {
  max-width: 360px;
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  font-family: ui-monospace, "SF Mono", monospace;
  color: #e6edf3;
}

.cbq-code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #161b22;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cbq-code-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f57;
}

.cbq-code-file {
  margin-left: 8px;
  font-size: 11px;
  color: #8b949e;
}

.cbq-code blockquote {
  margin: 0;
  padding: 16px 18px;
}

.cbq-code p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #7c6cff;
  font-style: italic;
}

.cbq-code figcaption {
  padding: 6px 18px 12px;
  font-size: 11px;
  color: #8b949e;
}
```

### 16. Markdown Quote

**Type:** Pure CSS
**Description:** GitHub-style markdown blockquote — left rule, dim text, > prefix character — with a small MD pill in the corner. Native to the README aesthetic.

**HTML:**
```html
<figure class="cbq-md">
  <span class="cbq-md-pill">MD</span>
  <blockquote>
    <p><span class="cbq-md-gt">&gt;</span> The best abstractions are the ones you don't notice.</p>
    <p><span class="cbq-md-gt">&gt;</span> The worst are the ones you can't avoid.</p>
  </blockquote>
  <figcaption>— from <code>NOTES.md</code></figcaption>
</figure>
```

**CSS:**
```css
.cbq-md {
  position: relative;
  max-width: 340px;
  padding: 18px 18px 14px 22px;
  background: #0d1117;
  border-left: 4px solid #30363d;
  border-radius: 0 6px 6px 0;
  font-family: ui-monospace, monospace;
  color: #c9d1d9;
}

.cbq-md-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(124, 108, 255, 0.18);
  color: #a78bfa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cbq-md blockquote {
  margin: 0;
}

.cbq-md p {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.cbq-md p:last-of-type {
  margin-bottom: 0;
}

.cbq-md-gt {
  color: #6e7681;
  margin-right: 6px;
  user-select: none;
}

.cbq-md figcaption {
  margin-top: 12px;
  font-size: 11px;
  color: #6e7681;
}

.cbq-md code {
  background: rgba(110, 118, 129, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
  color: #c9d1d9;
  font-size: 11px;
}
```

### 17. Testimonial Carousel

**Type:** Light JS
**Description:** Three testimonials with dot pagination and arrow keys — auto-advances every 6s, pauses on hover/focus, uses aria-live=polite for screen-reader announcement.

**HTML:**
```html
<figure class="cbq-car" aria-roledescription="carousel" aria-label="Testimonials">
  <div class="cbq-car-track" aria-live="polite">
    <article class="cbq-car-slide is-active">
      <blockquote><p>"It saves me hours every week."</p></blockquote>
      <figcaption>— Aria S., Designer</figcaption>
    </article>
    <article class="cbq-car-slide" hidden>
      <blockquote><p>"Finally, snippets that don't fight my stack."</p></blockquote>
      <figcaption>— Marcus T., DevOps</figcaption>
    </article>
    <article class="cbq-car-slide" hidden>
      <blockquote><p>"My team's dashboard ships twice as fast."</p></blockquote>
      <figcaption>— Priya R., Eng Lead</figcaption>
    </article>
  </div>
  <nav class="cbq-car-dots" aria-label="Slide navigation">
    <button
      type="button"
      class="cbq-car-dot is-active"
      aria-label="Go to slide 1"
      aria-current="true"
    ></button>
    <button type="button" class="cbq-car-dot" aria-label="Go to slide 2"></button>
    <button type="button" class="cbq-car-dot" aria-label="Go to slide 3"></button>
  </nav>
</figure>
```

**CSS:**
```css
.cbq-car {
  max-width: 340px;
  padding: 24px 22px 18px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-car-track {
  min-height: 90px;
  position: relative;
}

.cbq-car-slide blockquote {
  margin: 0 0 10px;
}

.cbq-car-slide p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-style: italic;
}

.cbq-car-slide figcaption {
  font-size: 12px;
  color: #a78bfa;
}

.cbq-car-slide[hidden] {
  display: none;
}

.cbq-car-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}

.cbq-car-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.cbq-car-dot:hover {
  background: rgba(255, 255, 255, 0.32);
}

.cbq-car-dot.is-active {
  background: #7c6cff;
  transform: scale(1.25);
}

.cbq-car-dot:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-car").forEach(function (root) {
    var slides = root.querySelectorAll(".cbq-car-slide");
    var dots = root.querySelectorAll(".cbq-car-dot");
    var idx = 0,
      timer = null;
    function show(i) {
      idx = (i + slides.length) % slides.length;
      slides.forEach(function (s, n) {
        if (n === idx) {
          s.removeAttribute("hidden");
          s.classList.add("is-active");
        } else {
          s.setAttribute("hidden", "");
          s.classList.remove("is-active");
        }
      });
      dots.forEach(function (d, n) {
        var on = n === idx;
        d.classList.toggle("is-active", on);
        if (on) d.setAttribute("aria-current", "true");
        else d.removeAttribute("aria-current");
      });
    }
    function start() {
      stop();
      timer = setInterval(function () {
        show(idx + 1);
      }, 6000);
    }
    function stop() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }
    dots.forEach(function (d, n) {
      d.addEventListener("click", function () {
        show(n);
        start();
      });
    });
    root.addEventListener("mouseenter", stop);
    root.addEventListener("mouseleave", start);
    root.addEventListener("focusin", stop);
    root.addEventListener("focusout", start);
    root.addEventListener("keydown", function (e) {
      if (e.key === "ArrowRight") {
        e.preventDefault();
        show(idx + 1);
        start();
      }
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        show(idx - 1);
        start();
      }
    });
    if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) start();
  });
})();
```

### 18. Click to Expand

**Type:** Light JS
**Description:** Long quote truncated with -webkit-line-clamp; a Read more button reveals the rest. aria-expanded reflects state for screen readers — the canonical truncate pattern.

**HTML:**
```html
<figure class="cbq-expand">
  <blockquote>
    <p class="cbq-expand-text">
      "Software engineering is not really about computers. It's about people: the people you build
      for, the people you build with, and the future-you who has to maintain whatever you ship
      today. Every line of code is a little contract with all of them."
    </p>
  </blockquote>
  <button type="button" class="cbq-expand-btn" aria-expanded="false">Read more</button>
  <figcaption>— Jen Rodriguez, Staff Engineer</figcaption>
</figure>
```

**CSS:**
```css
.cbq-expand {
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-expand blockquote {
  margin: 0;
}

.cbq-expand-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp 0.3s ease;
}

.cbq-expand-text.is-open {
  -webkit-line-clamp: 99;
}

.cbq-expand-btn {
  margin-top: 10px;
  padding: 4px 10px;
  background: transparent;
  color: #a78bfa;
  border: 1px solid rgba(167, 139, 250, 0.4);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.cbq-expand-btn:hover {
  background: rgba(167, 139, 250, 0.1);
  border-color: #a78bfa;
}

.cbq-expand-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-expand figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-expand").forEach(function (root) {
    var btn = root.querySelector(".cbq-expand-btn");
    var text = root.querySelector(".cbq-expand-text");
    if (!btn || !text) return;
    btn.addEventListener("click", function () {
      var open = text.classList.toggle("is-open");
      btn.setAttribute("aria-expanded", String(open));
      btn.textContent = open ? "Read less" : "Read more";
    });
  });
})();
```

### 19. Copy Quote

**Type:** Light JS
**Description:** Quote with a small Copy button that copies the text to the clipboard and flashes a Copied! confirmation — perfect for sharable design and engineering quote walls.

**HTML:**
```html
<figure class="cbq-copy">
  <button type="button" class="cbq-copy-btn" aria-label="Copy quote to clipboard">
    <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14">
      <rect
        x="9"
        y="9"
        width="11"
        height="11"
        rx="2"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      />
      <path
        d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      />
    </svg>
    <span class="cbq-copy-label">Copy</span>
  </button>
  <blockquote class="cbq-copy-quote">
    <p>"Premature optimization is the root of all evil."</p>
  </blockquote>
  <figcaption>— Donald Knuth</figcaption>
</figure>
```

**CSS:**
```css
.cbq-copy {
  position: relative;
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #a78bfa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.cbq-copy-btn:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
}

.cbq-copy-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-copy-btn.is-copied {
  color: #2ecc8a;
  border-color: rgba(46, 204, 138, 0.45);
  background: rgba(46, 204, 138, 0.08);
}

.cbq-copy-quote {
  margin: 0;
  padding-right: 56px;
}

.cbq-copy-quote p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-copy figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".cbq-copy").forEach(function (root) {
    var btn = root.querySelector(".cbq-copy-btn");
    var label = root.querySelector(".cbq-copy-label");
    var quote = root.querySelector(".cbq-copy-quote");
    if (!btn || !label || !quote) return;
    btn.addEventListener("click", function () {
      var text = quote.textContent.trim();
      navigator.clipboard.writeText(text).then(function () {
        btn.classList.add("is-copied");
        label.textContent = "Copied!";
        setTimeout(function () {
          btn.classList.remove("is-copied");
          label.textContent = "Copy";
        }, 1600);
      });
    });
  });
})();
```

---
## 22 CSS Breadcrumbs

URL: https://codefronts.com/navigation/css-breadcrumbs/
Description: 22 original CSS breadcrumb designs — underline grow, pill, diagonal slash, neon trail, brutalist, frosted glass, vertical stacked, progress track, holographic shimmer and more.
Demo count: 22

### 01. Underline Grow

**Type:** Pure CSS
**Description:** A gradient underline grows from left to right on hover. Current page uses a solid accent line.

**HTML:**
```html
<nav class="bc-01" aria-label="Breadcrumb">
  <ol class="bc-01__list">
    <li class="bc-01__item"><a class="bc-01__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-01__item"><a class="bc-01__link" href="javascript:void(0)">Collections</a></li>
    <li class="bc-01__item">
      <a class="bc-01__link bc-01__link--cur" aria-current="page" href="javascript:void(0)"
        >CSS Tabs</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-01__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-01__item {
  display: flex;
  align-items: center;
}

.bc-01__item + .bc-01__item::before {
  content: "/";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 14px;
}

.bc-01__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 0.25s;
}

.bc-01__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.bc-01__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-01__link:hover::after {
  transform: scaleX(1);
}

.bc-01__link--cur {
  color: #fff;
  pointer-events: none;
}

.bc-01__link--cur::after {
  background: #8b7fff;
  transform: scaleX(1);
}
```

### 02. Pill Breadcrumbs

**Type:** Pure CSS
**Description:** Each crumb is a rounded pill. Hover blooms a background. Current page shows solid accent fill.

**HTML:**
```html
<nav class="bc-02" aria-label="Breadcrumb">
  <ol class="bc-02__list">
    <li class="bc-02__item"><a class="bc-02__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-02__sep" aria-hidden="true">›</li>
    <li class="bc-02__item"><a class="bc-02__link" href="javascript:void(0)">Design</a></li>
    <li class="bc-02__sep" aria-hidden="true">›</li>
    <li class="bc-02__item">
      <a class="bc-02__link bc-02__link--cur" aria-current="page" href="javascript:void(0)"
        >Components</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-02__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-02__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  user-select: none;
  padding: 0 2px;
}

.bc-02__link {
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  display: block;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-02__link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.bc-02__link--cur {
  background: rgba(139, 127, 255, 0.18);
  color: #8b7fff;
  pointer-events: none;
}
```

### 03. Diagonal Slash

**Type:** Pure CSS
**Description:** Parallelogram-shaped crumbs using clip-path. Active fills with gradient; hover lifts slightly.

**HTML:**
```html
<nav class="bc-03" aria-label="Breadcrumb">
  <ol class="bc-03__list">
    <li class="bc-03__item"><a class="bc-03__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-03__item"><a class="bc-03__link" href="javascript:void(0)">Products</a></li>
    <li class="bc-03__item">
      <a class="bc-03__link bc-03__link--cur" aria-current="page" href="javascript:void(0)"
        >Detail</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-03__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 2px;
}

.bc-03__link {
  display: block;
  padding: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}

.bc-03__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

.bc-03__link--cur {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  color: #fff;
  pointer-events: none;
}
```

### 04. Neon Trail

**Type:** Pure CSS
**Description:** Neon glow builds along each separator arrow. Current page pulses with a multi-layer glow.

**HTML:**
```html
<nav class="bc-04" aria-label="Breadcrumb">
  <ol class="bc-04__list">
    <li class="bc-04__item"><a class="bc-04__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-04__item"><a class="bc-04__link" href="javascript:void(0)">Library</a></li>
    <li class="bc-04__item">
      <a class="bc-04__link bc-04__link--cur" aria-current="page" href="javascript:void(0)"
        >Effects</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-04__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-04__item + .bc-04__item::before {
  content: "→";
  padding: 0 10px;
  color: rgba(61, 232, 245, 0.25);
  font-size: 13px;
  transition:
    color 0.3s,
    text-shadow 0.3s;
}

.bc-04__item:hover + .bc-04__item::before,
.bc-04__item + .bc-04__item:hover::before {
  color: #3de8f5;
  text-shadow: 0 0 8px #3de8f5;
}

.bc-04__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition:
    color 0.25s,
    text-shadow 0.25s;
}

.bc-04__link:hover {
  color: #3de8f5;
  text-shadow: 0 0 10px rgba(61, 232, 245, 0.5);
}

.bc-04__link--cur {
  color: #3de8f5;
  pointer-events: none;
  text-shadow:
    0 0 8px #3de8f5,
    0 0 20px rgba(61, 232, 245, 0.4);
}
```

### 05. Brutalist Hard Shadow

**Type:** Pure CSS
**Description:** Hard offset box-shadows. Hover shifts the shadow. Current page inverts to a filled block.

**HTML:**
```html
<nav class="bc-05" aria-label="Breadcrumb">
  <ol class="bc-05__list">
    <li class="bc-05__item"><a class="bc-05__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-05__sep" aria-hidden="true">╱</li>
    <li class="bc-05__item"><a class="bc-05__link" href="javascript:void(0)">Shop</a></li>
    <li class="bc-05__sep" aria-hidden="true">╱</li>
    <li class="bc-05__item">
      <a class="bc-05__link bc-05__link--cur" aria-current="page" href="javascript:void(0)">Item</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-05__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-05__sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  user-select: none;
}

.bc-05__link {
  display: block;
  padding: 6px 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.4);
  transition:
    transform 0.1s,
    box-shadow 0.1s,
    background 0.1s,
    color 0.1s;
}

.bc-05__link:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
  color: #fff;
}

.bc-05__link--cur {
  background: #eeeaf8;
  color: #07070c;
  border-color: #eeeaf8;
  box-shadow: 2px 2px 0 rgba(139, 127, 255, 0.5);
  pointer-events: none;
}
```

### 06. Frosted Glass

**Type:** Pure CSS
**Description:** Glass pill breadcrumbs with backdrop-filter over a gradient background.

**HTML:**
```html
<nav class="bc-06" aria-label="Breadcrumb">
  <ol class="bc-06__list">
    <li class="bc-06__item"><a class="bc-06__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-06__item"><a class="bc-06__link" href="javascript:void(0)">Docs</a></li>
    <li class="bc-06__item">
      <a class="bc-06__link bc-06__link--cur" aria-current="page" href="javascript:void(0)"
        >Guide</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-06 {
  background:
    radial-gradient(60% 120% at 20% 50%, rgba(139, 127, 255, 0.5), transparent),
    radial-gradient(50% 100% at 80% 50%, rgba(255, 107, 157, 0.4), transparent), #09090f;
  padding: 12px 16px;
  border-radius: 14px;
}

.bc-06__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-06__item + .bc-06__item::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.25);
  font-size: 13px;
}

.bc-06__link {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    backdrop-filter 0.3s,
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}

.bc-06__link:hover {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.bc-06__link--cur {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  pointer-events: none;
}
```

### 07. Vertical Stacked

**Type:** Pure CSS
**Description:** Vertical timeline-style breadcrumb with connecting dots and a glowing active indicator.

**HTML:**
```html
<nav class="bc-07" aria-label="Breadcrumb">
  <ol class="bc-07__list">
    <li class="bc-07__item">
      <span class="bc-07__dot" aria-hidden="true"></span
      ><a class="bc-07__link" href="javascript:void(0)">Home</a>
    </li>
    <li class="bc-07__item">
      <span class="bc-07__dot" aria-hidden="true"></span
      ><a class="bc-07__link" href="javascript:void(0)">Projects</a>
    </li>
    <li class="bc-07__item bc-07__item--cur">
      <span class="bc-07__dot bc-07__dot--cur" aria-hidden="true"></span
      ><a class="bc-07__link bc-07__link--cur" aria-current="page" href="javascript:void(0)"
        >Dashboard</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-07__list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-07__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  position: relative;
}

.bc-07__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  position: absolute;
  left: -5px;
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s;
}

.bc-07__item:hover .bc-07__dot {
  border-color: rgba(255, 255, 255, 0.6);
}

.bc-07__dot--cur {
  border-color: #8b7fff;
  background: #8b7fff;
  box-shadow: 0 0 10px rgba(139, 127, 255, 0.6);
}

.bc-07__link {
  padding-left: 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-07__link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.bc-07__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 08. Editorial Numbered

**Type:** Pure CSS
**Description:** Magazine-style numbered breadcrumbs. Active number swells; separator is a hairline rule.

**HTML:**
```html
<nav class="bc-08" aria-label="Breadcrumb">
  <ol class="bc-08__list">
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">01</span
      ><a class="bc-08__link" href="javascript:void(0)">Home</a>
    </li>
    <li class="bc-08__item">
      <span class="bc-08__num" aria-hidden="true">02</span
      ><a class="bc-08__link" href="javascript:void(0)">Articles</a>
    </li>
    <li class="bc-08__item bc-08__item--cur">
      <span class="bc-08__num bc-08__num--cur" aria-hidden="true">03</span
      ><a class="bc-08__link bc-08__link--cur" aria-current="page" href="javascript:void(0)"
        >Read</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-08__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-08__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.bc-08__item + .bc-08__item {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-08__num {
  font-family: monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.06em;
  transition:
    color 0.3s,
    font-size 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.bc-08__num--cur {
  color: #8b7fff;
  font-size: 14px;
}

.bc-08__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-08__link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.bc-08__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 09. Retro Terminal Path

**Type:** Pure CSS
**Description:** Unix path-style breadcrumbs with a blinking cursor — looks like navigating a filesystem.

**HTML:**
```html
<nav class="bc-09" aria-label="Breadcrumb">
  <ol class="bc-09__list">
    <li class="bc-09__item">
      <span class="bc-09__prompt" aria-hidden="true">~</span
      ><a class="bc-09__link" href="javascript:void(0)">home</a>
    </li>
    <li class="bc-09__item">
      <span class="bc-09__sep" aria-hidden="true">/</span
      ><a class="bc-09__link" href="javascript:void(0)">projects</a>
    </li>
    <li class="bc-09__item">
      <span class="bc-09__sep" aria-hidden="true">/</span
      ><a class="bc-09__link bc-09__link--cur" aria-current="page" href="javascript:void(0)"
        >css-tabs</a
      >
    </li>
    <span class="bc-09__cursor" aria-hidden="true">_</span>
  </ol>
</nav>
```

**CSS:**
```css
.bc-09 {
  background: #050a00;
  border-radius: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(30, 217, 138, 0.2);
  font-family: monospace;
  display: inline-block;
}

.bc-09__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-09__item {
  display: flex;
  align-items: center;
}

.bc-09__prompt {
  color: rgba(30, 217, 138, 0.5);
  margin-right: 4px;
}

.bc-09__sep {
  color: rgba(30, 217, 138, 0.3);
  padding: 0 2px;
}

.bc-09__link {
  font-size: 13px;
  color: rgba(30, 217, 138, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.bc-09__link:hover {
  color: #1ed98a;
}

.bc-09__link--cur {
  color: #1ed98a;
  pointer-events: none;
}

.bc-09__cursor {
  color: #1ed98a;
  animation: bc09blink 0.7s step-end infinite;
  margin-left: 2px;
}

@keyframes bc09blink {
  50% {
    opacity: 0;
  }
}
```

### 10. Gradient Text

**Type:** Pure CSS
**Description:** Each crumb shifts from muted grey to a full gradient on hover. Current page always shows the gradient.

**HTML:**
```html
<nav class="bc-10" aria-label="Breadcrumb">
  <ol class="bc-10__list">
    <li class="bc-10__item"><a class="bc-10__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-10__item"><a class="bc-10__link" href="javascript:void(0)">Blog</a></li>
    <li class="bc-10__item">
      <a class="bc-10__link bc-10__link--cur" aria-current="page" href="javascript:void(0)"
        >Article</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-10__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-10__item + .bc-10__item::before {
  content: "·";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
}

.bc-10__link {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(90deg, #8b7fff, #ff6b9d, #3de8f5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: grayscale(1) opacity(0.4);
  transition: filter 0.35s;
}

.bc-10__link:hover {
  filter: grayscale(0) opacity(1);
}

.bc-10__link--cur {
  filter: grayscale(0) opacity(1);
  pointer-events: none;
}
```

### 11. Chip with Icon

**Type:** Pure CSS
**Description:** Rounded chip breadcrumbs each with an icon. Active chip fills with accent gradient.

**HTML:**
```html
<nav class="bc-11" aria-label="Breadcrumb">
  <ol class="bc-11__list">
    <li class="bc-11__item">
      <a class="bc-11__link" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">⌂</span
        ><span class="bc-11__text">Home</span></a
      >
    </li>
    <li class="bc-11__item">
      <a class="bc-11__link" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">◫</span
        ><span class="bc-11__text">Components</span></a
      >
    </li>
    <li class="bc-11__item">
      <a class="bc-11__link bc-11__link--cur" aria-current="page" href="javascript:void(0)"
        ><span class="bc-11__icon" aria-hidden="true">⬡</span
        ><span class="bc-11__text">Breadcrumbs</span></a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-11__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}

.bc-11__item {
  display: flex;
  align-items: center;
}

.bc-11__item + .bc-11__item::before {
  content: "›";
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
  margin-right: 6px;
}

.bc-11__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
}

.bc-11__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.bc-11__icon {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.bc-11__text {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
}

.bc-11__link--cur {
  background: linear-gradient(135deg, #8b7fff, #ff6b9d);
  border-color: transparent;
  pointer-events: none;
}

.bc-11__link--cur .bc-11__icon,
.bc-11__link--cur .bc-11__text {
  color: #fff;
}
```

### 12. Subway Line

**Type:** Pure CSS
**Description:** Crumbs as metro stops on a horizontal line. The current page is the lit "you are here" stop with a soft pulsing glow.

**HTML:**
```html
<nav class="bc-12" aria-label="Breadcrumb">
  <ol class="bc-12__list">
    <li class="bc-12__item">
      <a class="bc-12__link" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Home</span>
      </a>
    </li>
    <li class="bc-12__item">
      <a class="bc-12__link" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Components</span>
      </a>
    </li>
    <li class="bc-12__item">
      <a class="bc-12__link bc-12__link--cur" aria-current="page" href="javascript:void(0)">
        <span class="bc-12__dot" aria-hidden="true"></span>
        <span class="bc-12__label">Buttons</span>
      </a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-12__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 14px 18px 8px;
  margin: 0;
  position: relative;
}

.bc-12__list::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(139, 127, 255, 0.65) 0%,
    rgba(139, 127, 255, 0.65) var(--bc12-cur, 100%),
    rgba(255, 255, 255, 0.12) var(--bc12-cur, 100%),
    rgba(255, 255, 255, 0.12) 100%
  );
  border-radius: 2px;
}

.bc-12__item {
  flex: 1;
  display: flex;
  justify-content: center;
}

.bc-12__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: relative;
  padding: 0 6px;
  transition: transform 0.2s;
}

.bc-12__link:hover {
  transform: translateY(-2px);
}

.bc-12__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0e0e16;
  border: 2px solid rgba(139, 127, 255, 0.65);
  position: relative;
  z-index: 1;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.bc-12__link:hover .bc-12__dot {
  border-color: #a78bfa;
  background: rgba(139, 127, 255, 0.15);
}

.bc-12__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
  white-space: nowrap;
}

.bc-12__link:hover .bc-12__label {
  color: rgba(255, 255, 255, 0.85);
}

.bc-12__link--cur {
  pointer-events: none;
}

.bc-12__link--cur .bc-12__dot {
  background: #a78bfa;
  border-color: #a78bfa;
  box-shadow:
    0 0 0 4px rgba(167, 139, 250, 0.18),
    0 0 14px rgba(167, 139, 250, 0.6);
  animation: bc12pulse 2s ease-in-out infinite;
}

.bc-12__link--cur .bc-12__label {
  color: #fff;
  font-weight: 700;
}

@keyframes bc12pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(167, 139, 250, 0.18),
      0 0 14px rgba(167, 139, 250, 0.6);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(167, 139, 250, 0.08),
      0 0 22px rgba(167, 139, 250, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc-12__link--cur .bc-12__dot {
    animation: none;
  }
  .bc-12__link:hover {
    transform: none;
  }
}
```

### 13. Floating Island

**Type:** Pure CSS
**Description:** Each crumb is a floating card that springs upward on hover with a shadow bloom.

**HTML:**
```html
<nav class="bc-13" aria-label="Breadcrumb">
  <ol class="bc-13__list">
    <li class="bc-13__item"><a class="bc-13__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-13__item"><a class="bc-13__link" href="javascript:void(0)">Collections</a></li>
    <li class="bc-13__item">
      <a class="bc-13__link bc-13__link--cur" aria-current="page" href="javascript:void(0)"
        >Breadcrumbs</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-13__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
  flex-wrap: wrap;
}

.bc-13__item {
  display: flex;
  align-items: center;
}

.bc-13__item + .bc-13__item::before {
  content: "→";
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
}

.bc-13__link {
  display: block;
  padding: 7px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}

.bc-13__link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.bc-13__link--cur {
  background: rgba(139, 127, 255, 0.15);
  border-color: rgba(139, 127, 255, 0.35);
  color: #8b7fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(139, 127, 255, 0.2);
  pointer-events: none;
}
```

### 14. Scale Peek

**Type:** Pure CSS
**Description:** On hover the whole list dims and scales down — only the hovered crumb scales up to full.

**HTML:**
```html
<nav class="bc-14" aria-label="Breadcrumb">
  <ol class="bc-14__list">
    <li class="bc-14__item"><a class="bc-14__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-14__item"><a class="bc-14__link" href="javascript:void(0)">Blog</a></li>
    <li class="bc-14__item">
      <a class="bc-14__link bc-14__link--cur" aria-current="page" href="javascript:void(0)">Post</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-14__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.bc-14__item + .bc-14__item::before {
  content: "›";
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 16px;
}

.bc-14__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition:
    color 0.25s,
    opacity 0.25s,
    transform 0.25s;
}

.bc-14__list:hover .bc-14__link {
  opacity: 0.35;
  transform: scale(0.96);
}

.bc-14__list:hover .bc-14__link:hover {
  opacity: 1;
  transform: scale(1.05);
  color: #fff;
}

.bc-14__link--cur {
  color: #8b7fff;
  pointer-events: none;
}
```

### 15. Holographic Shimmer

**Type:** Pure CSS
**Description:** Current page gets a looping rainbow holographic background. Past crumbs are plain text.

**HTML:**
```html
<nav class="bc-15" aria-label="Breadcrumb">
  <ol class="bc-15__list">
    <li class="bc-15__item"><a class="bc-15__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-15__item"><a class="bc-15__link" href="javascript:void(0)">Motion</a></li>
    <li class="bc-15__item">
      <a class="bc-15__link bc-15__link--cur" aria-current="page" href="javascript:void(0)"
        ><span class="bc-15__shine" aria-hidden="true"></span
        ><span class="bc-15__text">Effects</span></a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-15__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-15__item {
  display: flex;
  align-items: center;
}

.bc-15__item + .bc-15__item::before {
  content: "/";
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.2);
}

.bc-15__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-15__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.bc-15__link--cur {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  pointer-events: none;
}

.bc-15__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, #8b7fff, #ff6b9d, #3de8f5, #1ed98a, #f5a84a, #8b7fff);
  background-size: 300% 100%;
  animation: bc15holo 3s linear infinite;
}

@keyframes bc15holo {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 300% 50%;
  }
}

.bc-15__text {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
}
```

### 16. Arrow Chain

**Type:** Pure CSS
**Description:** CSS arrow-chevron breadcrumbs using border triangles — no SVG or images needed.

**HTML:**
```html
<nav class="bc-16" aria-label="Breadcrumb">
  <ol class="bc-16__list">
    <li class="bc-16__item"><a class="bc-16__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-16__item"><a class="bc-16__link" href="javascript:void(0)">Shop</a></li>
    <li class="bc-16__item">
      <a class="bc-16__link bc-16__link--cur" aria-current="page" href="javascript:void(0)"
        >Product</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-16__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-16__item {
  display: flex;
}

.bc-16__link {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 24px;
  position: relative;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  margin-left: -10px;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-16__item:first-child .bc-16__link {
  padding-left: 16px;
  border-radius: 8px 0 0 8px;
  margin-left: 0;
}

.bc-16__link::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 100%;
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
  transition: border-left-color 0.25s;
}

.bc-16__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  z-index: 2;
}

.bc-16__link:hover::after {
  border-left-color: rgba(255, 255, 255, 0.12);
}

.bc-16__link--cur {
  background: #8b7fff;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  border-radius: 0 8px 8px 0;
}

.bc-16__link--cur::after {
  display: none;
}
```

### 17. Dotted Separator

**Type:** Pure CSS
**Description:** Ellipsis dots between crumbs that expand on hover for a subtle kinetic effect.

**HTML:**
```html
<nav class="bc-17" aria-label="Breadcrumb">
  <ol class="bc-17__list">
    <li class="bc-17__item"><a class="bc-17__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-17__item"><a class="bc-17__link" href="javascript:void(0)">Design</a></li>
    <li class="bc-17__item">
      <a class="bc-17__link bc-17__link--cur" aria-current="page" href="javascript:void(0)"
        >Tokens</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-17__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.bc-17__item + .bc-17__item::before {
  content: "···";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.18);
  font-size: 14px;
  letter-spacing: 2px;
  transition:
    color 0.25s,
    letter-spacing 0.3s;
}

.bc-17__item:hover + .bc-17__item::before {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 4px;
}

.bc-17__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-17__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-17__link--cur {
  color: #fff;
  pointer-events: none;
}
```

### 18. Bordered Box

**Type:** Pure CSS
**Description:** All crumbs share one bordered container with dividers. Active gets an inset top+bottom accent stroke.

**HTML:**
```html
<nav class="bc-18" aria-label="Breadcrumb">
  <ol class="bc-18__list">
    <li class="bc-18__item"><a class="bc-18__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-18__item"><a class="bc-18__link" href="javascript:void(0)">Docs</a></li>
    <li class="bc-18__item">
      <a class="bc-18__link bc-18__link--cur" aria-current="page" href="javascript:void(0)">API</a>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-18__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.bc-18__item + .bc-18__item {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.bc-18__link {
  display: block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition:
    background 0.25s,
    color 0.25s;
}

.bc-18__link:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.bc-18__link--cur {
  background: rgba(139, 127, 255, 0.12);
  color: #8b7fff;
  pointer-events: none;
  box-shadow:
    inset 0 2px 0 #8b7fff,
    inset 0 -2px 0 #8b7fff;
}
```

### 19. Progress Track

**Type:** Pure CSS
**Description:** Stepper-style breadcrumb with numbered nodes connected by a track line — great for multi-step flows.

**HTML:**
```html
<nav class="bc-19" aria-label="Breadcrumb">
  <ol class="bc-19__list">
    <li class="bc-19__item bc-19__item--done">
      <div class="bc-19__node">✓</div>
      <a class="bc-19__link" href="javascript:void(0)">Cart</a>
    </li>
    <li class="bc-19__item bc-19__item--done">
      <div class="bc-19__node bc-19__node--cur">2</div>
      <a class="bc-19__link bc-19__link--cur" aria-current="page" href="javascript:void(0)"
        >Shipping</a
      >
    </li>
    <li class="bc-19__item">
      <div class="bc-19__node bc-19__node--next">3</div>
      <span class="bc-19__label">Payment</span>
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-19__list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.bc-19__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.bc-19__item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: calc(50% + 14px);
  right: calc(-50% + 14px);
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.bc-19__item:last-child::before {
  display: none;
}

.bc-19__item--done::before {
  background: #8b7fff;
}

.bc-19__node {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s;
}

.bc-19__item--done .bc-19__node {
  background: #8b7fff;
  border-color: #8b7fff;
  color: #fff;
}

.bc-19__node--cur {
  background: transparent;
  border-color: #8b7fff;
  color: #8b7fff;
  box-shadow: 0 0 0 4px rgba(139, 127, 255, 0.2);
}

.bc-19__node--next {
  opacity: 0.4;
}

.bc-19__link {
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: color 0.25s;
}

.bc-19__link--cur {
  color: #8b7fff;
  pointer-events: none;
}

.bc-19__label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.2);
}
```

### 20. Glassmorphism Bar

**Type:** Pure CSS
**Description:** All crumbs live inside a single frosted glass pill container with blur and saturation.

**HTML:**
```html
<nav class="bc-20" aria-label="Breadcrumb">
  <ol class="bc-20__list">
    <li class="bc-20__item"><a class="bc-20__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-20__item"><a class="bc-20__link" href="javascript:void(0)">Motion</a></li>
    <li class="bc-20__item">
      <a class="bc-20__link bc-20__link--cur" aria-current="page" href="javascript:void(0)"
        >Animation</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-20 {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  padding: 4px;
}

.bc-20__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-20__item + .bc-20__item {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.bc-20__link {
  display: block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-radius: 50px;
  transition:
    background 0.3s,
    color 0.3s;
}

.bc-20__link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.bc-20__link--cur {
  background: rgba(139, 127, 255, 0.25);
  color: #fff;
  pointer-events: none;
}
```

### 21. Wave Underline

**Type:** Pure CSS
**Description:** An animated SVG wave appears under each link on hover — the current page keeps the wave active.

**HTML:**
```html
<nav class="bc-21" aria-label="Breadcrumb">
  <ol class="bc-21__list">
    <li class="bc-21__item"><a class="bc-21__link" href="javascript:void(0)">Home</a></li>
    <li class="bc-21__item"><a class="bc-21__link" href="javascript:void(0)">Library</a></li>
    <li class="bc-21__item">
      <a class="bc-21__link bc-21__link--cur" aria-current="page" href="javascript:void(0)"
        >Collections</a
      >
    </li>
  </ol>
</nav>
```

**CSS:**
```css
.bc-21__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-21__item + .bc-21__item::before {
  content: "›";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 18px;
}

.bc-21__link {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  padding-bottom: 6px;
  transition: color 0.25s;
}

.bc-21__link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q5 0 10 2 Q15 4 20 2' fill='none' stroke='%238b7fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 20px 4px;
  background-repeat: repeat-x;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s,
    transform 0.3s;
  animation: bc21wave 1.2s linear infinite paused;
}

.bc-21__link:hover::after,
.bc-21__link--cur::after {
  opacity: 1;
  transform: translateY(0);
  animation-play-state: running;
}

@keyframes bc21wave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 20px 0;
  }
}

.bc-21__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.bc-21__link--cur {
  color: #8b7fff;
  pointer-events: none;
}
```

### 22. Copy Path

**Type:** CSS+JS
**Description:** Standard breadcrumb with a copy button that copies the current URL path and shows a toast.

**HTML:**
```html
<nav class="bc-22" aria-label="Breadcrumb">
  <div class="bc-22__wrap">
    <ol class="bc-22__list">
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Home</a></li>
      <li class="bc-22__item"><a class="bc-22__link" href="javascript:void(0)">Navigation</a></li>
      <li class="bc-22__item">
        <a class="bc-22__link bc-22__link--cur" aria-current="page" href="javascript:void(0)"
          >Breadcrumbs</a
        >
      </li>
    </ol>
    <button class="bc-22__copy" id="bc22-btn" aria-label="Copy path">
      <span class="bc-22__copy-icon" aria-hidden="true">⎘</span>
    </button>
  </div>
  <span class="bc-22__toast" id="bc22-toast">Copied!</span>
</nav>
```

**CSS:**
```css
.bc-22 {
  position: relative;
}

.bc-22__wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-22__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bc-22__item + .bc-22__item::before {
  content: "/";
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.2);
}

.bc-22__link {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.25s;
}

.bc-22__link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.bc-22__link--cur {
  color: #fff;
  pointer-events: none;
}

.bc-22__copy {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.bc-22__copy:hover {
  background: rgba(139, 127, 255, 0.2);
  border-color: rgba(139, 127, 255, 0.4);
  color: #8b7fff;
}

.bc-22__copy-icon {
  line-height: 1;
  display: block;
}

.bc-22__toast {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #8b7fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
  white-space: nowrap;
}

.bc-22__toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
```

**JS:**
```js
document.querySelectorAll(".bc-22__copy").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var toast = btn.closest(".bc-22").querySelector(".bc-22__toast");
    navigator.clipboard.writeText(window.location.href).then(function () {
      toast.classList.add("bc-22__toast--show");
      setTimeout(function () {
        toast.classList.remove("bc-22__toast--show");
      }, 2000);
    });
  });
});
```

---
## 22 CSS Button Group Designs

URL: https://codefronts.com/components/css-button-groups/
Description: 22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
Demo count: 22

### 01. Liquid Mercury

**Type:** Pure CSS
**Description:** Three options on a viscous mercury rail. The thumb morphs its border-radius asymmetrically as it slides — the kind of animation curve a human would never hand-author.

**HTML:**
```html
<fieldset class="cbgp-mercury" role="group" aria-label="Billing period">
  <legend class="cbgp-sr">Billing period</legend>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-1" checked />
  <label for="cbgp-mercury-1">Monthly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-2" />
  <label for="cbgp-mercury-2">Yearly</label>
  <input type="radio" name="cbgp-mercury" id="cbgp-mercury-3" />
  <label for="cbgp-mercury-3">Forever</label>
  <span class="cbgp-mercury-thumb" aria-hidden="true"></span>
</fieldset>
```

**CSS:**
```css
.cbgp-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-mercury {
  display: inline-flex; position: relative; padding: 4px;
  background: radial-gradient(ellipse at 30% 30%, #1a1a2a 0%, #0a0a14 100%);
  border: 1px solid rgba(220,225,230,0.08);
  border-radius: 999px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04);
}
.cbgp-mercury input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-mercury label {
  flex: 1 1 0; min-width: 88px;
  position: relative; z-index: 1;
  padding: 9px 18px; text-align: center;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  color: rgba(220,225,230,0.5);
  cursor: pointer; transition: color 0.4s;
  border-radius: 999px;
}
.cbgp-mercury input:checked + label { color: #0a0a14; }
.cbgp-mercury-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.667px);
  background:
    radial-gradient(ellipse at 30% 30%, #f5f5fa 0%, #cad3da 50%, #6a7480 100%);
  border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
  z-index: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.25),
    0 2px 8px rgba(220,225,230,0.18);
  transition:
    transform 0.55s cubic-bezier(.68,-0.4,.32,1.4),
    border-radius 0.6s cubic-bezier(.65,0,.35,1);
}
#cbgp-mercury-2:checked ~ .cbgp-mercury-thumb {
  transform: translateX(100%);
  border-radius: 50% 60% 50% 50% / 60% 40% 60% 40%;
}
#cbgp-mercury-3:checked ~ .cbgp-mercury-thumb {
  transform: translateX(200%);
  border-radius: 40% 60% 60% 40% / 50% 50% 50% 50%;
}
```

### 02. Subgrid Beam

**Type:** Pure CSS
**Description:** Three actions on a single subgrid track with a luminous beam underline that physically moves between buttons on hover, drawn with a single shared pseudo-element.

**HTML:**
```html
<div class="cbgp-beam" role="group" aria-label="Document actions">
  <button type="button">Edit</button>
  <button type="button">Duplicate</button>
  <button type="button">Archive</button>
</div>
```

**CSS:**
```css
.cbgp-beam {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  position: relative;
  background: rgba(8,10,18,0.85);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(0,0,0,0.45);
}
.cbgp-beam::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 33.333%; height: 2px;
  background: linear-gradient(90deg, transparent, #00ffe0 30%, #ff5af1 70%, transparent);
  filter: blur(0.4px);
  transition: transform 0.45s cubic-bezier(.65,0,.35,1);
  pointer-events: none;
}
.cbgp-beam button {
  padding: 11px 18px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.65);
  font: 600 12px/1 ui-sans-serif, system-ui;
  letter-spacing: 0.04em;
  transition: color 0.25s, background 0.25s;
}
.cbgp-beam button + button { border-left: 1px solid rgba(255,255,255,0.04); }
.cbgp-beam button:hover { color: #fff; background: rgba(0,255,224,0.04); }
.cbgp-beam:has(button:nth-child(2):hover)::before { transform: translateX(100%); }
.cbgp-beam:has(button:nth-child(3):hover)::before { transform: translateX(200%); }
.cbgp-beam button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 03. Acid Tags

**Type:** Pure CSS
**Description:** Multi-select chips with an acid-green glow halo that radiates outward when checked. Each chip carries a unique pulse phase so the row feels alive without being noisy.

**HTML:**
```html
<fieldset class="cbgp-acid" role="group" aria-label="Filters">
  <legend class="cbgp-sr">Filters</legend>
  <label><input type="checkbox" checked /><span style="--ph: 0">CSS</span></label>
  <label><input type="checkbox" /><span style="--ph: 1">React</span></label>
  <label><input type="checkbox" checked /><span style="--ph: 2">TypeScript</span></label>
  <label><input type="checkbox" /><span style="--ph: 3">Astro</span></label>
</fieldset>
```

**CSS:**
```css
.cbgp-acid {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  border: 0; padding: 0; margin: 0;
}
.cbgp-acid input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-acid label { display: inline-block; cursor: pointer; }
.cbgp-acid span {
  display: inline-block;
  padding: 7px 14px;
  background: rgba(8,10,18,0.85);
  border: 1px solid rgba(168,255,184,0.2);
  border-radius: 999px;
  color: rgba(220,225,230,0.6);
  font: 600 11px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
  position: relative;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.4s;
}
.cbgp-acid label:hover span { color: rgba(220,225,230,0.9); border-color: rgba(168,255,184,0.4); }
.cbgp-acid input:checked + span {
  background: rgba(60,200,90,0.12);
  border-color: #3eff7f;
  color: #c8ffd6;
  box-shadow:
    0 0 0 3px rgba(62,255,127,0.08),
    0 0 18px rgba(62,255,127,0.35);
}
.cbgp-acid input:focus-visible + span { outline: 2px solid #3eff7f; outline-offset: 2px; }
```

### 04. Quantum Split

**Type:** Pure CSS
**Description:** Primary action with a sibling menu that opens via native details/summary. The split chevron rotates 180° and the menu materialises with a clip-path reveal — no JS.

**HTML:**
```html
<div class="cbgp-quantum" role="group" aria-label="Save options">
  <button type="button" class="cbgp-quantum-main">Deploy</button>
  <details class="cbgp-quantum-menu">
    <summary aria-label="More deploy options">
      <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
    </summary>
    <div class="cbgp-quantum-list">
      <button type="button">Deploy preview</button>
      <button type="button">Deploy and tag</button>
      <button type="button">Deploy and notify</button>
    </div>
  </details>
</div>
```

**CSS:**
```css
.cbgp-quantum {
  display: inline-flex; position: relative;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: visible;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-quantum-main {
  padding: 11px 22px;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, rgba(0,255,224,0.18) 0%, rgba(255,90,241,0.18) 100%);
  color: #fff;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 10px 0 0 10px;
  border-right: 1px solid rgba(255,255,255,0.1);
  text-shadow: 0 0 8px rgba(0,255,224,0.3);
  transition: filter 0.2s;
}
.cbgp-quantum-main:hover { filter: brightness(1.18); }
.cbgp-quantum-menu summary {
  list-style: none; cursor: pointer;
  padding: 11px 14px;
  display: flex; align-items: center;
  border-radius: 0 10px 10px 0;
  transition: background 0.18s;
}
.cbgp-quantum-menu summary::-webkit-details-marker { display: none; }
.cbgp-quantum-menu summary svg { width: 12px; height: 12px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-quantum-menu summary:hover { background: rgba(0,255,224,0.06); }
.cbgp-quantum-menu[open] summary { background: rgba(0,255,224,0.1); }
.cbgp-quantum-menu[open] summary svg { transform: rotate(180deg); }
.cbgp-quantum-list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 200px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.25);
  border-radius: 8px;
  padding: 4px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.08);
  clip-path: inset(0 0 0 0 round 8px);
  animation: cbgp-quantum-in 0.25s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-quantum-in {
  from { clip-path: inset(0 0 100% 0 round 8px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 8px);    opacity: 1; }
}
.cbgp-quantum-list button {
  display: block; width: 100%;
  padding: 9px 14px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 500 12px/1 ui-sans-serif, system-ui;
  text-align: left;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.cbgp-quantum-list button:hover { background: rgba(0,255,224,0.08); color: #fff; }
```

### 05. Cellular Toggle

**Type:** Pure CSS
**Description:** Format toggles where checking a cell fills it with a swirling conic gradient anchored to its center. Hover prefills the conic with a faint preview.

**HTML:**
```html
<fieldset class="cbgp-cell" role="group" aria-label="Text formatting">
  <legend class="cbgp-sr">Text formatting</legend>
  <label
    ><input type="checkbox" /><span aria-label="Bold"><strong>B</strong></span></label
  >
  <label
    ><input type="checkbox" checked /><span aria-label="Italic"><em>I</em></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Underline"><u>U</u></span></label
  >
  <label
    ><input type="checkbox" /><span aria-label="Strikethrough"><s>S</s></span></label
  >
</fieldset>
```

**CSS:**
```css
@property --cbgp-cell-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-cell {
  display: inline-flex; gap: 4px;
  border: 0; padding: 6px;
  background: rgba(8,10,18,0.85);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}
.cbgp-cell input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-cell label { display: block; cursor: pointer; }
.cbgp-cell span {
  --cbgp-cell-a: 0deg;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background:
    conic-gradient(from var(--cbgp-cell-a),
      transparent 0deg, transparent 200deg,
      rgba(255,90,241,0.28) 260deg,
      rgba(0,255,224,0.32) 320deg,
      transparent 360deg),
    rgba(20,22,30,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font: 700 14px/1 'Times New Roman', serif;
  color: rgba(220,225,230,0.6);
  transition: --cbgp-cell-a 0.55s cubic-bezier(.65,0,.35,1), color 0.25s, border-color 0.25s;
}
.cbgp-cell label:hover span { color: rgba(220,225,230,0.9); --cbgp-cell-a: 180deg; }
.cbgp-cell input:checked + span {
  --cbgp-cell-a: 360deg;
  color: #fff;
  border-color: rgba(0,255,224,0.5);
  box-shadow: 0 0 16px rgba(0,255,224,0.2);
}
.cbgp-cell input:focus-visible + span { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 06. Pixel Matrix

**Type:** Pure CSS
**Description:** Pagination styled as a tiny LED matrix display. Each page is a "pixel cluster"; the active page lights up like a real 7-segment with phosphor glow.

**HTML:**
```html
<nav class="cbgp-pixel" aria-label="Pagination">
  <button type="button" aria-label="First page" aria-disabled="true">«</button>
  <button type="button" aria-label="Previous page" aria-disabled="true">‹</button>
  <button type="button" aria-current="page">1</button>
  <button type="button">2</button>
  <button type="button">3</button>
  <button type="button">4</button>
  <button type="button">5</button>
  <button type="button" aria-label="Next page">›</button>
  <button type="button" aria-label="Last page">»</button>
</nav>
```

**CSS:**
```css
.cbgp-pixel {
  display: inline-flex; gap: 3px;
  padding: 6px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,255,224,0.06), transparent 70%),
    #050810;
  border: 1px solid rgba(0,255,224,0.15);
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0,255,224,0.05), 0 4px 14px rgba(0,0,0,0.5);
}
.cbgp-pixel button {
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(0,255,224,0.18);
  background:
    radial-gradient(circle at center, rgba(0,255,224,0.06) 0%, transparent 70%),
    #0a0d18;
  color: rgba(220,225,230,0.55);
  font: 800 12px/1 ui-monospace, monospace;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.18s;
}
.cbgp-pixel button:hover {
  border-color: rgba(0,255,224,0.5);
  color: #c8fffa;
  background:
    radial-gradient(circle at center, rgba(0,255,224,0.16) 0%, transparent 70%),
    #0a0d18;
}
.cbgp-pixel button[aria-current="page"] {
  background: radial-gradient(circle at center, #00ffe0 0%, #00b8a8 70%);
  border-color: #00ffe0;
  color: #001f1c;
  box-shadow: 0 0 14px rgba(0,255,224,0.6), inset 0 0 6px rgba(255,255,255,0.4);
  text-shadow: 0 0 4px rgba(0,255,224,0.6);
}
.cbgp-pixel button[aria-disabled="true"] {
  opacity: 0.3; cursor: not-allowed;
  background: transparent; border-color: rgba(0,255,224,0.08);
}
.cbgp-pixel button[aria-disabled="true"]:hover {
  border-color: rgba(0,255,224,0.08); color: rgba(220,225,230,0.55);
}
.cbgp-pixel button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 2px; }
```

### 07. Gradient Flow

**Type:** Pure CSS
**Description:** Multi-step wizard where the "done" line is a flowing gradient (not a static fill) — the light visibly travels through the completed segments toward the current step.

**HTML:**
```html
<ol class="cbgp-flow" aria-label="Checkout progress">
  <li class="is-done">
    <span class="cbgp-flow-num">1</span><span class="cbgp-flow-label">Cart</span>
  </li>
  <li class="is-done">
    <span class="cbgp-flow-num">2</span><span class="cbgp-flow-label">Address</span>
  </li>
  <li class="is-current" aria-current="step">
    <span class="cbgp-flow-num">3</span><span class="cbgp-flow-label">Payment</span>
  </li>
  <li><span class="cbgp-flow-num">4</span><span class="cbgp-flow-label">Review</span></li>
</ol>
```

**CSS:**
```css
.cbgp-flow {
  display: inline-flex; gap: 0;
  list-style: none; padding: 0; margin: 0;
}
.cbgp-flow li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.4);
  position: relative;
}
.cbgp-flow li:not(:last-child) { padding-right: 56px; }
.cbgp-flow li:not(:last-child)::after {
  content: '';
  position: absolute; right: 8px; top: 50%;
  width: 36px; height: 2px;
  background: rgba(255,255,255,0.08);
  transform: translateY(-50%);
  border-radius: 1px;
}
.cbgp-flow li.is-done::after {
  background:
    linear-gradient(90deg, #00ffe0 0%, #ff5af1 100%) 0% 0% / 200% 100%;
  animation: cbgp-flow-shift 2.4s linear infinite;
  box-shadow: 0 0 8px rgba(0,255,224,0.5);
}
@keyframes cbgp-flow-shift { 0% { background-position: 200% 0%; } 100% { background-position: 0% 0%; } }
.cbgp-flow-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #0a0d18;
  border: 1.5px solid rgba(255,255,255,0.1);
  font: 800 11px/1 ui-monospace, monospace;
  color: rgba(220,225,230,0.4);
  transition: all 0.3s;
}
.cbgp-flow li.is-done .cbgp-flow-num {
  background: linear-gradient(135deg, #00ffe0, #00b8a8);
  border-color: #00ffe0;
  color: #001f1c;
  box-shadow: 0 0 10px rgba(0,255,224,0.4);
}
.cbgp-flow li.is-current .cbgp-flow-num {
  background: linear-gradient(135deg, #ff5af1, #c43cb8);
  border-color: #ff5af1;
  color: #1a0518;
  box-shadow: 0 0 0 4px rgba(255,90,241,0.18), 0 0 16px rgba(255,90,241,0.4);
  color: #fff;
}
.cbgp-flow li.is-current { color: #ff5af1; }
.cbgp-flow li.is-done    { color: rgba(0,255,224,0.85); }
@media (prefers-reduced-motion: reduce) {
  .cbgp-flow li.is-done::after { animation: none; }
}
```

### 08. Holographic Dial

**Type:** Pure CSS
**Description:** Icon segmented control where the active icon is filled with a moving conic-gradient holographic sheen. Hover shifts the gradient phase before commit.

**HTML:**
```html
<fieldset class="cbgp-holo" role="group" aria-label="View mode">
  <legend class="cbgp-sr">View mode</legend>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-1" checked />
  <label for="cbgp-holo-1" aria-label="Grid view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="3" y="3" width="7" height="7" />
      <rect x="14" y="3" width="7" height="7" />
      <rect x="3" y="14" width="7" height="7" />
      <rect x="14" y="14" width="7" height="7" /></svg
  ></label>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-2" />
  <label for="cbgp-holo-2" aria-label="List view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <line x1="8" y1="6" x2="21" y2="6" />
      <line x1="8" y1="12" x2="21" y2="12" />
      <line x1="8" y1="18" x2="21" y2="18" />
      <circle cx="4" cy="6" r="1" />
      <circle cx="4" cy="12" r="1" />
      <circle cx="4" cy="18" r="1" /></svg
  ></label>
  <input type="radio" name="cbgp-holo" id="cbgp-holo-3" />
  <label for="cbgp-holo-3" aria-label="Card view"
    ><svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="3" y="4" width="18" height="6" rx="1" />
      <rect x="3" y="14" width="18" height="6" rx="1" /></svg
  ></label>
</fieldset>
```

**CSS:**
```css
@property --cbgp-holo-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-holo {
  display: inline-flex; gap: 0;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,10,18,0.85);
  border-radius: 10px;
  overflow: hidden;
  padding: 3px;
}
.cbgp-holo input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-holo label {
  --cbgp-holo-a: 0deg;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 40px;
  cursor: pointer;
  border-radius: 8px;
  background:
    conic-gradient(from var(--cbgp-holo-a),
      transparent 0deg, transparent 240deg,
      rgba(0,255,224,0) 260deg, rgba(0,255,224,0.3) 290deg,
      rgba(255,90,241,0.3) 320deg, rgba(255,90,241,0) 350deg,
      transparent 360deg);
  transition: --cbgp-holo-a 0.7s cubic-bezier(.65,0,.35,1), background 0.3s;
}
.cbgp-holo svg {
  width: 16px; height: 16px;
  fill: none; stroke: rgba(220,225,230,0.5);
  stroke-width: 1.8; stroke-linecap: round;
  transition: stroke 0.25s;
}
.cbgp-holo label:hover { --cbgp-holo-a: 180deg; }
.cbgp-holo label:hover svg { stroke: rgba(220,225,230,0.85); }
.cbgp-holo input:checked + label {
  --cbgp-holo-a: 360deg;
  background:
    conic-gradient(from var(--cbgp-holo-a),
      rgba(0,255,224,0.32), rgba(255,90,241,0.32),
      rgba(255,200,80,0.28), rgba(0,255,224,0.32));
  box-shadow: 0 0 14px rgba(0,255,224,0.18);
}
.cbgp-holo input:checked + label svg { stroke: #fff; }
.cbgp-holo input:focus-visible + label { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 09. Stack Tower

**Type:** Pure CSS
**Description:** Vertical action column where each row pushes 8px deeper on hover, and the whole stack rotates 1° in 3D. SVG icons recolor with a gradient stroke.

**HTML:**
```html
<div class="cbgp-tower" role="group" aria-label="Profile actions">
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21a8 8 0 0 1 16 0" /></svg
    >Profile
  </button>
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="3" />
      <path
        d="M19.4 15a2 2 0 0 0 .4 2.2l.1.1a2.5 2.5 0 1 1-3.5 3.5l-.1-.1a2 2 0 0 0-2.2-.4 2 2 0 0 0-1.2 1.8V22a2.5 2.5 0 0 1-5 0v-.1a2 2 0 0 0-1.3-1.8 2 2 0 0 0-2.2.4l-.1.1a2.5 2.5 0 1 1-3.5-3.5l.1-.1a2 2 0 0 0 .4-2.2"
      /></svg
    >Settings
  </button>
  <button type="button">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" /></svg
    >Sign out
  </button>
</div>
```

**CSS:**
```css
.cbgp-tower {
  display: inline-flex; flex-direction: column;
  background: rgba(8,10,18,0.92);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  min-width: 200px;
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.cbgp-tower:hover { transform: rotateY(-3deg) rotateX(2deg); }
.cbgp-tower button {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border: 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 600 13px/1 ui-sans-serif, system-ui;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s, transform 0.3s cubic-bezier(.65,0,.35,1);
}
.cbgp-tower button:last-child { border-bottom: 0; }
.cbgp-tower button:hover {
  background: linear-gradient(90deg, rgba(0,255,224,0.06), rgba(255,90,241,0.04));
  color: #fff;
  transform: translateZ(8px);
}
.cbgp-tower svg { width: 14px; height: 14px; flex-shrink: 0; fill: none; stroke: rgba(0,255,224,0.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-tower button:hover svg { stroke: #00ffe0; }
.cbgp-tower button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
```

### 10. Orbital FAB

**Type:** Pure CSS
**Description:** A FAB that fans out three satellite buttons on click — but they arc into position along a curved path, not a straight line. The main button rotates and pulses an outer ring.

**HTML:**
```html
<div class="cbgp-orbit">
  <input type="checkbox" id="cbgp-orbit-t" class="cbgp-orbit-toggle" aria-hidden="true" />
  <label
    for="cbgp-orbit-t"
    class="cbgp-orbit-main"
    tabindex="0"
    role="button"
    aria-label="Open create menu"
  >
    <span class="cbgp-orbit-plus" aria-hidden="true">+</span>
    <span class="cbgp-orbit-ring" aria-hidden="true"></span>
  </label>
  <a class="cbgp-orbit-child cbgp-orbit-c1" href="javascript:void(0)" aria-label="New document">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
      <polyline points="14 2 14 8 20 8" />
    </svg>
  </a>
  <a class="cbgp-orbit-child cbgp-orbit-c2" href="javascript:void(0)" aria-label="New folder">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
    </svg>
  </a>
  <a class="cbgp-orbit-child cbgp-orbit-c3" href="javascript:void(0)" aria-label="Upload file">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
    </svg>
  </a>
</div>
```

**CSS:**
```css
.cbgp-orbit { position: relative; width: 60px; height: 60px; }
.cbgp-orbit-toggle {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cbgp-orbit-main, .cbgp-orbit-child {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.cbgp-orbit-main {
  z-index: 2;
  bottom: 0; left: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00ffe0 0%, #006e62 100%);
  color: #001f1c;
  box-shadow:
    0 0 0 0 rgba(0,255,224,0.4),
    0 8px 22px rgba(0,255,224,0.35),
    inset 0 -3px 6px rgba(0,0,0,0.25);
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
}
.cbgp-orbit-plus {
  font: 800 28px/1 ui-monospace, monospace;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.cbgp-orbit-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid #00ffe0;
  opacity: 0;
  transition: opacity 0.3s, transform 0.6s cubic-bezier(.65,0,.35,1);
}
.cbgp-orbit-toggle:focus-visible + .cbgp-orbit-main { outline: 2px solid #ff5af1; outline-offset: 4px; }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main {
  box-shadow:
    0 0 0 4px rgba(0,255,224,0.18),
    0 8px 28px rgba(0,255,224,0.55),
    inset 0 -3px 6px rgba(0,0,0,0.25);
}
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-plus { transform: rotate(135deg); }
.cbgp-orbit-toggle:checked + .cbgp-orbit-main .cbgp-orbit-ring { opacity: 1; transform: scale(1.4); }
.cbgp-orbit-child {
  z-index: 1;
  bottom: 8px; left: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(8,10,18,0.92);
  border: 1.5px solid rgba(0,255,224,0.4);
  color: #00ffe0;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.4);
  transition:
    transform 0.5s cubic-bezier(.34,1.56,.64,1),
    opacity 0.3s,
    background 0.2s;
}
.cbgp-orbit-child svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-child {
  opacity: 1;
  pointer-events: auto;
}
/* Curved arc deployment: each child arrives at a different angle around the FAB */
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c1 { transform: translate(0, -68px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c2 { transform: translate(50px, -50px) scale(1); }
.cbgp-orbit-toggle:checked ~ .cbgp-orbit-c3 { transform: translate(68px, 0) scale(1); }
.cbgp-orbit-child:hover {
  background: rgba(0,255,224,0.18);
  border-color: #00ffe0;
  color: #c8fffa;
}
@media (prefers-reduced-motion: reduce) {
  .cbgp-orbit-main, .cbgp-orbit-child, .cbgp-orbit-plus, .cbgp-orbit-ring { transition: none; }
}
```

### 11. Glitch Grid

**Type:** Pure CSS
**Description:** Filter buttons where the active state ghosts a cyan/magenta RGB-split clone of itself, vibrating subtly on hover. Brutalist meets cyberpunk.

**HTML:**
```html
<div class="cbgp-glitch" role="group" aria-label="Filters">
  <button type="button" class="is-on">ALL</button>
  <button type="button">DRAFT</button>
  <button type="button">LIVE</button>
</div>
```

**CSS:**
```css
.cbgp-glitch {
  display: inline-flex;
  background: #050810;
  border: 2px solid #00ffe0;
  box-shadow: 4px 4px 0 #ff5af1;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cbgp-glitch button {
  padding: 11px 20px;
  border: 0; border-right: 2px solid rgba(0,255,224,0.3);
  cursor: pointer;
  background: transparent;
  color: #00ffe0;
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  position: relative;
  transition: color 0.15s, background 0.15s;
}
.cbgp-glitch button::before, .cbgp-glitch button::after {
  content: attr(data-text, '');
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.cbgp-glitch button:last-child { border-right: 0; }
.cbgp-glitch button:hover { background: rgba(0,255,224,0.08); }
.cbgp-glitch button.is-on {
  background: linear-gradient(90deg, rgba(0,255,224,0.18), rgba(255,90,241,0.18));
  color: #fff;
  text-shadow:
    -1.2px 0 #ff5af1,
    1.2px 0 #00ffe0;
}
.cbgp-glitch button:focus-visible { outline: 2px solid #ff5af1; outline-offset: -2px; }
.cbgp-glitch:focus-within { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #ff5af1; }
```

### 12. Plasma Pill

**Type:** Pure CSS
**Description:** A glassmorphic pill that always carries a slowly rotating conic plasma loop behind it via @property — the kind of motion that feels alive without being noisy.

**HTML:**
```html
<div class="cbgp-plasma-wrap">
  <div class="cbgp-plasma" role="group" aria-label="Quick actions">
    <button type="button">Like</button>
    <button type="button">Save</button>
    <button type="button">Share</button>
  </div>
</div>
```

**CSS:**
```css
@property --cbgp-plasma-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-plasma-wrap {
  display: inline-block;
  padding: 24px 28px;
  background: radial-gradient(ellipse at 30% 30%, #1a0a2a 0%, #050810 100%);
  border-radius: 20px;
}
.cbgp-plasma {
  position: relative;
  display: inline-flex;
  padding: 5px;
  background: rgba(8,10,18,0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  isolation: isolate;
  --cbgp-plasma-a: 0deg;
  animation: cbgp-plasma-spin 8s linear infinite;
}
@keyframes cbgp-plasma-spin { to { --cbgp-plasma-a: 360deg; } }
.cbgp-plasma::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--cbgp-plasma-a),
    #00ffe0, #ff5af1, #ffd479, #00ffe0);
  filter: blur(10px);
  z-index: -1;
  opacity: 0.85;
}
.cbgp-plasma::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(8,10,18,0.85);
  z-index: -1;
}
.cbgp-plasma button {
  padding: 9px 22px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.85);
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.cbgp-plasma button + button { border-left: 1px solid rgba(255,255,255,0.06); }
.cbgp-plasma button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cbgp-plasma button:focus-visible { outline: 2px solid rgba(0,255,224,0.7); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-plasma { animation: none; }
}
```

### 13. Pulse Reactor

**Type:** Pure CSS
**Description:** A radar-style action bar — clicking any button activates it AND emits a circular shockwave that ripples outward across the whole bar. Active button stays lit.

**HTML:**
```html
<div class="cbgp-pulse" role="toolbar" aria-label="Terminal actions">
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-1" />
  <label for="cbgp-pulse-1">RUN</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-2" checked />
  <label for="cbgp-pulse-2">STOP</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-3" />
  <label for="cbgp-pulse-3">CLEAR</label>
  <input type="radio" name="cbgp-pulse" id="cbgp-pulse-4" />
  <label for="cbgp-pulse-4">EXPORT</label>
</div>
```

**CSS:**
```css
.cbgp-pulse {
  display: inline-flex; gap: 4px;
  padding: 6px;
  background: radial-gradient(ellipse at 50% 0%, #0a1a3a 0%, #050810 60%);
  border: 1px solid rgba(0,255,224,0.18);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.cbgp-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-pulse label {
  padding: 9px 16px;
  background: rgba(0,255,224,0.04);
  border: 1px solid rgba(0,255,224,0.18);
  color: rgba(0,255,224,0.7);
  font: 800 10px/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.25s;
}
.cbgp-pulse label::before {
  content: '';
  position: absolute; inset: 50% 50%;
  border-radius: 50%;
  border: 2px solid #00ffe0;
  opacity: 0;
  pointer-events: none;
}
.cbgp-pulse label:hover { background: rgba(0,255,224,0.08); color: #c8fffa; border-color: rgba(0,255,224,0.4); }
.cbgp-pulse input:checked + label {
  background: linear-gradient(180deg, #00ffe0, #00b8a8);
  color: #001f1c;
  border-color: #00ffe0;
  box-shadow: 0 0 18px rgba(0,255,224,0.55), inset 0 -2px 4px rgba(0,0,0,0.2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-pulse input:checked + label::before { animation: cbgp-pulse-out 0.7s cubic-bezier(.3,1,.5,1); }
@keyframes cbgp-pulse-out {
  0%   { inset: 50% 50%; opacity: 0.85; }
  100% { inset: -50% -50%; opacity: 0; }
}
.cbgp-pulse input:focus-visible + label { outline: 2px solid #ff5af1; outline-offset: 2px; }
```

### 14. Solar Flare

**Type:** Pure CSS
**Description:** Date-range presets where a warm solar glow follows your cursor across the bar. Active range gets a permanent flare; the moving glow is pure CSS via --mx custom prop.

**HTML:**
```html
<fieldset
  class="cbgp-flare"
  role="group"
  aria-label="Date range"
  onmousemove="event.currentTarget.style.setProperty('--mx', event.offsetX + 'px')"
>
  <legend class="cbgp-sr">Date range</legend>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-1" />
  <label for="cbgp-flare-1">Today</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-2" checked />
  <label for="cbgp-flare-2">7 days</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-3" />
  <label for="cbgp-flare-3">30 days</label>
  <input type="radio" name="cbgp-flare" id="cbgp-flare-4" />
  <label for="cbgp-flare-4">Custom</label>
</fieldset>
```

**CSS:**
```css
.cbgp-flare {
  --mx: -200px;
  display: inline-flex; gap: 0;
  border: 0; padding: 0;
  background:
    radial-gradient(circle 80px at var(--mx) 50%,
      rgba(255,200,80,0.18), transparent 70%),
    rgba(8,10,18,0.92);
  border: 1px solid rgba(255,200,80,0.18);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.cbgp-flare input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-flare label {
  padding: 11px 18px;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.5);
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  border-right: 1px solid rgba(255,255,255,0.04);
}
.cbgp-flare label:last-of-type { border-right: 0; }
.cbgp-flare label::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 5px;
  height: 2px;
  background: linear-gradient(90deg, #ffc850, #ff5af1);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 0 8px rgba(255,200,80,0.6);
}
.cbgp-flare label:hover { color: #ffd479; }
.cbgp-flare input:checked + label { color: #fff; }
.cbgp-flare input:checked + label::after { opacity: 1; transform: scaleX(1); }
.cbgp-flare input:focus-visible + label { outline: 2px solid #ffc850; outline-offset: -2px; border-radius: 6px; }
```

### 15. Bio-Decision

**Type:** Pure CSS
**Description:** A two-button row where each button has a different "voice": reject shakes when hovered (negative pull), approve emits a particle burst on click via a single mask-image pseudo-element.

**HTML:**
```html
<div class="cbgp-bio" role="group" aria-label="Review decision">
  <button type="button" class="cbgp-bio-no">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
    Reject
  </button>
  <button type="button" class="cbgp-bio-yes">
    <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="20 6 9 17 4 12" /></svg>
    Approve
  </button>
</div>
```

**CSS:**
```css
.cbgp-bio { display: inline-flex; gap: 10px; }
.cbgp-bio button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 10px;
  cursor: pointer;
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  transition: transform 0.18s, box-shadow 0.25s;
}
.cbgp-bio svg { width: 14px; height: 14px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cbgp-bio-no {
  background: rgba(255,90,90,0.08);
  border: 1px solid rgba(255,90,90,0.4);
  color: #ff7a7a;
}
.cbgp-bio-no svg { stroke: #ff7a7a; }
.cbgp-bio-no:hover {
  background: rgba(255,90,90,0.18);
  animation: cbgp-bio-shake 0.4s cubic-bezier(.36,.07,.19,.97) infinite;
}
@keyframes cbgp-bio-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.cbgp-bio-yes {
  background: linear-gradient(135deg, #00ffa8, #00b8e0);
  border: 1px solid transparent;
  color: #001f1c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-bio-yes svg { stroke: #001f1c; }
.cbgp-bio-yes:hover { box-shadow: 0 0 24px rgba(0,255,168,0.5); }
.cbgp-bio-yes::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(0,255,168,0.6) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.cbgp-bio-yes:active::before { animation: cbgp-bio-burst 0.6s ease-out; }
@keyframes cbgp-bio-burst {
  0%   { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(1.6); opacity: 0; }
}
.cbgp-bio button:focus-visible { outline: 2px solid #00ffa8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-bio-no:hover { animation: none; }
}
```

### 16. Ferro Toolbar

**Type:** Pure CSS
**Description:** Icon toolbar where icons subtly tilt toward your cursor as you sweep across — pure CSS, driven by --mx via inline style on the parent. No JS required.

**HTML:**
```html
<div
  class="cbgp-ferro"
  role="toolbar"
  aria-label="Editor tools"
  onmousemove="
    event.currentTarget.style.setProperty(
      '--mx',
      ((event.offsetX / event.currentTarget.offsetWidth) * 2 - 1).toFixed(2),
    )
  "
>
  <button type="button" aria-label="Undo" title="Undo (⌘Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7v6h6M3 13a9 9 0 1 0 3-6.7L3 9" /></svg>
  </button>
  <button type="button" aria-label="Redo" title="Redo (⌘⇧Z)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 7v6h-6M21 13a9 9 0 1 1-3-6.7L21 9" />
    </svg>
  </button>
  <span class="cbgp-ferro-divider" aria-hidden="true"></span>
  <button type="button" aria-label="Cut" title="Cut (⌘X)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="6" cy="6" r="3" />
      <circle cx="6" cy="18" r="3" />
      <line x1="20" y1="4" x2="8.12" y2="15.88" />
      <line x1="14.47" y1="14.48" x2="20" y2="20" />
    </svg>
  </button>
  <button type="button" aria-label="Copy" title="Copy (⌘C)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  </button>
  <button type="button" aria-label="Paste" title="Paste (⌘V)">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
      <rect x="8" y="2" width="8" height="4" rx="1" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.cbgp-ferro {
  --mx: 0;
  display: inline-flex; gap: 4px; align-items: center;
  padding: 6px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  perspective: 600px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
.cbgp-ferro button {
  width: 36px; height: 36px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(.65,0,.35,1), background 0.2s;
  transform: rotateY(calc(var(--mx) * 18deg));
}
.cbgp-ferro button:hover { background: rgba(0,255,224,0.08); }
.cbgp-ferro button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-ferro svg { width: 14px; height: 14px; fill: none; stroke: rgba(220,225,230,0.65); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
.cbgp-ferro button:hover svg { stroke: #00ffe0; }
.cbgp-ferro-divider {
  width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,255,224,0.5), transparent);
  margin: 0 4px;
}
```

### 17. Magnetic Disc

**Type:** Pure CSS
**Description:** Three pricing tiers as a slowly rotating disc — each disc carries a tier; hover slows the rotation and lifts the front disc, click snaps it forward.

**HTML:**
```html
<div class="cbgp-disc" role="group" aria-label="Tier picker">
  <button type="button" class="cbgp-disc-1">Free</button>
  <button type="button" class="cbgp-disc-2">Pro</button>
  <button type="button" class="cbgp-disc-3">Suite</button>
</div>
```

**CSS:**
```css
@property --cbgp-disc-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.cbgp-disc {
  position: relative;
  width: 160px; height: 72px;
  perspective: 800px;
  transform-style: preserve-3d;
  --cbgp-disc-a: 0deg;
  animation: cbgp-disc-spin 12s linear infinite;
}
@keyframes cbgp-disc-spin { to { --cbgp-disc-a: 360deg; } }
.cbgp-disc:hover { animation-play-state: paused; }
.cbgp-disc button {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  border-radius: 14px;
  font: 800 13px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 18px rgba(0,0,0,0.35);
  backface-visibility: hidden;
}
.cbgp-disc-1 {
  background: linear-gradient(135deg, #00ffe0, #006e62);
  transform: rotateY(var(--cbgp-disc-a)) translateZ(36px);
}
.cbgp-disc-2 {
  background: linear-gradient(135deg, #ff5af1, #6e1a6a);
  transform: rotateY(calc(var(--cbgp-disc-a) + 120deg)) translateZ(36px);
}
.cbgp-disc-3 {
  background: linear-gradient(135deg, #ffd479, #b87333);
  transform: rotateY(calc(var(--cbgp-disc-a) + 240deg)) translateZ(36px);
  color: #1a0a14;
}
.cbgp-disc button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-disc { animation: none; }
}
```

### 18. Plasma Combo

**Type:** Light JS
**Description:** A dropdown trigger with a neon plasma border that pulses subtly. The list reveals via a clip-path slide; selection plays a scanline flash on the chosen option.

**HTML:**
```html
<div class="cbgp-combo" role="group" aria-label="Sort options">
  <button
    type="button"
    class="cbgp-combo-trigger"
    aria-haspopup="listbox"
    aria-expanded="false"
    data-cbgp-combo
  >
    <span>Sort: Newest</span>
    <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
  </button>
  <ul class="cbgp-combo-list" role="listbox" hidden>
    <li role="option" aria-selected="true">Newest</li>
    <li role="option">Oldest</li>
    <li role="option">A → Z</li>
    <li role="option">Z → A</li>
    <li role="option">Most popular</li>
  </ul>
</div>
```

**CSS:**
```css
.cbgp-combo {
  position: relative;
  display: inline-block;
}
.cbgp-combo-trigger {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid #00ffe0;
  border-radius: 10px;
  color: #c8fffa;
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 12px rgba(0,255,224,0.15), inset 0 0 0 1px rgba(0,255,224,0.1);
  transition: box-shadow 0.25s, color 0.2s;
}
.cbgp-combo-trigger:hover {
  box-shadow: 0 0 22px rgba(0,255,224,0.35), inset 0 0 0 1px rgba(0,255,224,0.2);
  color: #fff;
}
.cbgp-combo-trigger:focus-visible { outline: 2px solid #ff5af1; outline-offset: 3px; }
.cbgp-combo-trigger svg { width: 11px; height: 11px; fill: none; stroke: #00ffe0; stroke-width: 2; transition: transform 0.3s cubic-bezier(.65,0,.35,1); }
.cbgp-combo-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.cbgp-combo-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(0,255,224,0.4);
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 24px rgba(0,255,224,0.1);
  animation: cbgp-combo-in 0.28s cubic-bezier(.65,0,.35,1);
}
@keyframes cbgp-combo-in {
  from { clip-path: inset(0 0 100% 0 round 10px); opacity: 0; }
  to   { clip-path: inset(0 0 0 0 round 10px);    opacity: 1; }
}
.cbgp-combo-list li {
  padding: 8px 14px;
  font: 600 12px/1 ui-monospace, monospace;
  color: rgba(200,255,250,0.7);
  cursor: pointer;
  border-radius: 6px;
  letter-spacing: 0.06em;
  transition: background 0.15s, color 0.15s;
}
.cbgp-combo-list li[aria-selected="true"] {
  color: #00ffe0;
  background: rgba(0,255,224,0.08);
}
.cbgp-combo-list li:hover { background: rgba(0,255,224,0.15); color: #fff; }
```

**JS:**
```js
/* Plasma combobox dropdown — toggle aria-expanded; click outside or Escape to close. */
document.querySelectorAll('[data-cbgp-combo]').forEach(function (trigger) {
  var list  = trigger.parentElement.querySelector('.cbgp-combo-list');
  var label = trigger.querySelector('span');
  if (!list) return;
  function open()  { list.hidden = false; trigger.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  trigger.setAttribute('aria-expanded', 'false'); }
  trigger.addEventListener('click', function (e) {
    e.stopPropagation();
    list.hidden ? open() : close();
  });
  trigger.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { close(); trigger.focus(); }
  });
  list.addEventListener('click', function (e) {
    var li = e.target.closest('li[role="option"]');
    if (!li) return;
    list.querySelectorAll('li').forEach(function (x) { x.removeAttribute('aria-selected'); });
    li.setAttribute('aria-selected', 'true');
    if (label) label.textContent = label.textContent.split(': ')[0] + ': ' + li.textContent;
    close();
  });
  document.addEventListener('click', close);
});
```

### 19. Kinetic Trio

**Type:** Light JS
**Description:** Three icon actions where the active button morphs into a confirmation pill, expands in width, and plays a gradient flow before snapping back. Layout shift handled with CSS grid auto-flow.

**HTML:**
```html
<div class="cbgp-kinetic" role="group" aria-label="Quick actions">
  <button type="button" data-cbgp-kinetic-flash="✓ Copied" aria-label="Copy link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
    <span>Copy</span>
  </button>
  <button type="button" data-cbgp-kinetic-flash="↗ Sharing" aria-label="Share">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="18" cy="5" r="3" />
      <circle cx="6" cy="12" r="3" />
      <circle cx="18" cy="19" r="3" />
      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
    </svg>
    <span>Share</span>
  </button>
  <button type="button" data-cbgp-kinetic-flash="↓ Downloading" aria-label="Download">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3" />
    </svg>
    <span>Download</span>
  </button>
</div>
```

**CSS:**
```css
.cbgp-kinetic {
  display: inline-flex; gap: 6px;
  padding: 5px;
  background: linear-gradient(135deg, #0a0a14 0%, #14141d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.cbgp-kinetic button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(220,225,230,0.85);
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}
.cbgp-kinetic button:hover {
  background: rgba(0,255,224,0.06);
  border-color: rgba(0,255,224,0.4);
  color: #fff;
}
.cbgp-kinetic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1); }
.cbgp-kinetic button.is-flash {
  background:
    linear-gradient(90deg, #00ffe0, #ff5af1) 0% 0% / 200% 100%;
  border-color: transparent;
  color: #001f1c;
  animation: cbgp-kinetic-shift 1.4s linear;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.cbgp-kinetic button.is-flash svg { transform: scale(1.2); }
@keyframes cbgp-kinetic-shift {
  from { background-position: 200% 0%; }
  to   { background-position: 0% 0%; }
}
.cbgp-kinetic button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 3px; }
```

**JS:**
```js
/* Kinetic action buttons — morphing flash on click. */
document.querySelectorAll('[data-cbgp-kinetic-flash]').forEach(function (btn) {
  var label = btn.querySelector('span');
  var msg   = btn.dataset.cbgpKineticFlash;
  var orig  = label ? label.textContent : '';
  btn.addEventListener('click', function () {
    if (btn.classList.contains('is-flash')) return;
    btn.classList.add('is-flash');
    if (label) label.textContent = msg;
    setTimeout(function () {
      btn.classList.remove('is-flash');
      if (label) label.textContent = orig;
    }, 1400);
  });
});
```

### 20. Synthwave Dial

**Type:** Light JS
**Description:** Quantity stepper as a synthwave-grid dial — chrome +/− buttons with a scanline window that morphs to magenta when the count hits max, cyan when it hits min.

**HTML:**
```html
<div class="cbgp-syn" role="group" aria-label="Quantity">
  <button type="button" data-cbgp-syn-step="-1" aria-label="Decrease quantity">−</button>
  <input type="number" min="1" max="10" value="1" aria-label="Quantity" data-cbgp-syn />
  <button type="button" data-cbgp-syn-step="1" aria-label="Increase quantity">+</button>
</div>
```

**CSS:**
```css
.cbgp-syn {
  display: inline-flex; align-items: stretch;
  background: linear-gradient(180deg, #0a0a14 0%, #050810 100%);
  border: 1px solid #ff5af1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255,90,241,0.25);
}
.cbgp-syn button {
  width: 42px; height: 42px;
  border: 0; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent),
    rgba(8,10,18,0.92);
  color: #ff5af1;
  font: 800 18px/1 ui-monospace, monospace;
  text-shadow: 0 0 6px rgba(255,90,241,0.6);
  transition: background 0.18s, color 0.18s;
}
.cbgp-syn button:hover {
  background: rgba(255,90,241,0.12);
  color: #ffaaf0;
}
.cbgp-syn button:focus-visible { outline: 2px solid #00ffe0; outline-offset: -2px; }
.cbgp-syn button:disabled { opacity: 0.3; cursor: not-allowed; }
.cbgp-syn button:disabled:hover { background: rgba(8,10,18,0.92); color: #ff5af1; }
.cbgp-syn input {
  width: 64px;
  border: 0; outline: none;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 4px,
      rgba(0,255,224,0.06) 4px 5px),
    #0a0a14;
  color: #00ffe0;
  font: 800 16px/1 ui-monospace, monospace;
  text-align: center;
  text-shadow: 0 0 6px rgba(0,255,224,0.5);
  border-left: 1px solid rgba(255,90,241,0.3);
  border-right: 1px solid rgba(255,90,241,0.3);
  -moz-appearance: textfield;
}
.cbgp-syn input::-webkit-outer-spin-button,
.cbgp-syn input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cbgp-syn.is-min input { color: #00ffe0; box-shadow: inset 0 0 16px rgba(0,255,224,0.3); }
.cbgp-syn.is-max input { color: #ff5af1; box-shadow: inset 0 0 16px rgba(255,90,241,0.4); }
```

**JS:**
```js
/* Synthwave-stepper — clamp + classify min/max state for color shift. */
document.querySelectorAll('.cbgp-syn').forEach(function (group) {
  var input = group.querySelector('[data-cbgp-syn]');
  var minus = group.querySelector('[data-cbgp-syn-step="-1"]');
  var plus  = group.querySelector('[data-cbgp-syn-step="1"]');
  if (!input) return;
  function update() {
    var min = Number(input.min) || -Infinity;
    var max = Number(input.max) ||  Infinity;
    var val = Number(input.value) || 0;
    if (minus) minus.disabled = val <= min;
    if (plus)  plus.disabled  = val >= max;
    group.classList.toggle('is-min', val <= min);
    group.classList.toggle('is-max', val >= max);
  }
  group.querySelectorAll('[data-cbgp-syn-step]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var dir = parseInt(btn.dataset.cbgpSynStep, 10) || 0;
      var min = Number(input.min) || -Infinity;
      var max = Number(input.max) ||  Infinity;
      var val = (Number(input.value) || 0) + dir;
      input.value = String(Math.max(min, Math.min(max, val)));
      update();
    });
  });
  input.addEventListener('input', update);
  update();
});
```

### 21. Wormhole Tabs

**Type:** Pure CSS
**Description:** Tab nav where the active indicator stretches into a trailing wormhole as it moves between tabs — implemented via :has() and a single shared pseudo-element with smooth width interpolation.

**HTML:**
```html
<fieldset class="cbgp-worm" role="tablist" aria-label="Settings sections">
  <legend class="cbgp-sr">Settings sections</legend>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-1" checked />
  <label for="cbgp-worm-1"><span>Profile</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-2" />
  <label for="cbgp-worm-2"><span>Notifications</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-3" />
  <label for="cbgp-worm-3"><span>Privacy</span></label>
  <input type="radio" name="cbgp-worm" id="cbgp-worm-4" />
  <label for="cbgp-worm-4"><span>Billing</span></label>
</fieldset>
```

**CSS:**
```css
.cbgp-worm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  border: 0; padding: 0 0 10px;
  width: 100%; max-width: 460px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cbgp-worm input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.cbgp-worm label {
  padding: 12px 8px 14px;
  font: 700 11px/1 ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(220,225,230,0.5);
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: color 0.25s;
}
.cbgp-worm label::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -1px;
  width: 0; height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #00ffe0 30%, #ff5af1 70%, transparent);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(.65,0,.35,1);
  box-shadow: 0 0 14px rgba(0,255,224,0.6);
}
.cbgp-worm label:hover { color: rgba(220,225,230,0.85); }
.cbgp-worm input:checked + label { color: #fff; }
.cbgp-worm input:checked + label::after { width: 100%; }
.cbgp-worm input:focus-visible + label { outline: 2px solid #00ffe0; outline-offset: -2px; border-radius: 4px; }
```

### 22. Aurora Dust

**Type:** Pure CSS
**Description:** Three premium tier buttons floating on a particle-aurora field — drifting blobs of cyan / magenta / gold via animated background-positions, layered noise, and a subtle hover-lift.

**HTML:**
```html
<div class="cbgp-dust" role="group" aria-label="Subscription tiers">
  <button type="button">Starter</button>
  <button type="button" class="is-on">Plus</button>
  <button type="button">Team</button>
</div>
```

**CSS:**
```css
.cbgp-dust {
  position: relative; display: inline-flex;
  padding: 6px;
  background: #050810;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}
.cbgp-dust::before {
  content: '';
  position: absolute; inset: -50%;
  background:
    radial-gradient(circle 70px at 20% 30%, rgba(0,255,224,0.55), transparent 60%),
    radial-gradient(circle 60px at 60% 70%, rgba(255,90,241,0.5),  transparent 60%),
    radial-gradient(circle 80px at 90% 40%, rgba(255,212,121,0.45), transparent 60%),
    radial-gradient(circle 50px at 30% 80%, rgba(0,184,232,0.5),    transparent 60%);
  filter: blur(20px);
  z-index: -1;
  animation: cbgp-dust-drift 12s ease-in-out infinite;
}
.cbgp-dust::after {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.012) 0 1px,
      transparent 1px 3px),
    rgba(5,8,16,0.5);
  z-index: -1;
}
@keyframes cbgp-dust-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%      { transform: translate(-6%, 4%) rotate(2deg); }
  66%      { transform: translate(4%, -3%) rotate(-2deg); }
}
.cbgp-dust button {
  padding: 11px 22px;
  border: 0; cursor: pointer;
  background: transparent;
  color: rgba(220,225,230,0.7);
  font: 700 12px/1 ui-monospace, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 10px;
  position: relative;
  transition: background 0.25s, color 0.25s, transform 0.3s;
}
.cbgp-dust button:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.cbgp-dust button.is-on {
  background: rgba(8,10,18,0.6);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.cbgp-dust button:focus-visible { outline: 2px solid #00ffe0; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cbgp-dust::before { animation: none !important; }
}
```

---
## 21 CSS Button Hover Effects

URL: https://codefronts.com/motion/css-button-hover-effects/
Description: 21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.
Demo count: 21

### 01. Liquid Fill

**Type:** Pure CSS
**Description:** Background floods upward like liquid filling a container via pseudo-element height transition.

**HTML:**
```html
<button class="bhe-01__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-01__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-01__btn {
  position: relative;
  color: #7c6cff;
  background: transparent;
  border: 2px solid #7c6cff;
  overflow: hidden;
  transition: color 0.4s;
  z-index: 0;
}
.bhe-01__btn::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 0;
  background: #7c6cff;
  transition: height 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}
.bhe-01__btn:hover {
  color: #fff;
}
.bhe-01__btn:hover::before {
  height: calc(100% + 4px);
}
```

### 02. Magnetic Border

**Type:** Pure CSS
**Description:** A conic-gradient border spins into view on hover and the button lifts with a coloured glow.

**HTML:**
```html
<button class="bhe-02__wrap">
  <span class="bhe-02__inner">Magnetic Border</span>
</button>
```

**CSS:**
```css
.bhe-02__wrap {
  font-family: inherit;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-02__wrap {
  position: relative;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px;
  display: inline-block;
}
.bhe-02__wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  opacity: 0;
  transition: opacity 0.3s;
  animation: border-spin 3s linear infinite paused;
}
.bhe-02__wrap:hover::before {
  opacity: 1;
  animation-play-state: running;
}
@keyframes border-spin {
  to {
    transform: rotate(360deg);
  }
}
.bhe-02__inner {
  display: block;
  padding: 12px 32px;
  border-radius: 7px;
  background: #111118;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.bhe-02__wrap:hover .bhe-02__inner {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124, 108, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .bhe-02__wrap,
  .bhe-02__wrap * {
    animation: none !important;
  }
}

```

### 03. Glitch Slice

**Type:** Pure CSS
**Description:** Two color-shifted clones slice through in staggered horizontal bands, simulating a signal glitch.

**HTML:**
```html
<button class="bhe-03__btn" data-text="GLITCH">GLITCH</button>
```

**CSS:**
```css
.bhe-03__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-03__btn {
  position: relative;
  overflow: hidden;
}
.bhe-03__btn::before,
.bhe-03__btn::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.bhe-03__btn::before {
  background: #ff6c8a;
  color: #fff;
  clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%);
}
.bhe-03__btn::after {
  background: #7c6cff;
  color: #fff;
  clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
}
.bhe-03__btn:hover::before {
  animation: glitch1 0.3s steps(1) infinite;
}
.bhe-03__btn:hover::after {
  animation: glitch2 0.3s steps(1) infinite 0.05s;
}
@keyframes glitch1 {
  50% {
    opacity: 1;
    transform: translateX(-4px);
  }
}
@keyframes glitch2 {
  50% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-03__btn,
  .bhe-03__btn * {
    animation: none !important;
  }
}

```

### 04. Neon Pulse

**Type:** Pure CSS
**Description:** Multi-layered box-shadows create a breathing neon glow that pulses rhythmically on hover.

**HTML:**
```html
<button class="bhe-04__btn">NEON</button>
```

**CSS:**
```css
.bhe-04__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-04__btn {
  color: #2ecc8a;
  border: 2px solid #2ecc8a;
  background: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.3s;
}
.bhe-04__btn:hover {
  background: rgba(46, 204, 138, 0.1);
  animation: neonpulse 1.2s ease-in-out infinite;
}
@keyframes neonpulse {
  0%,
  100% {
    box-shadow:
      0 0 12px #2ecc8a,
      0 0 28px rgba(46, 204, 138, 0.35);
  }
  50% {
    box-shadow:
      0 0 20px #2ecc8a,
      0 0 50px rgba(46, 204, 138, 0.55),
      0 0 80px rgba(46, 204, 138, 0.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-04__btn,
  .bhe-04__btn * {
    animation: none !important;
  }
}

```

### 05. Split Reveal

**Type:** Pure CSS
**Description:** The button splits at the centre — top half slides up, bottom half slides down — both halves show the same text.

**HTML:**
```html
<button class="bhe-05__btn">
  <span class="bhe-05__top">Split Reveal</span>
  <span class="bhe-05__bottom" aria-hidden="true">Split Reveal</span>
</button>
```

**CSS:**
```css
.bhe-05__btn {
  padding: 12px 32px;
  font-family: inherit;
  border-radius: 8px;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-05__btn {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: #17171f;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.bhe-05__top {
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-05__bottom {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c6cff;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: translateY(50%);
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-05__btn:hover .bhe-05__top {
  transform: translateY(-50%);
}
.bhe-05__btn:hover .bhe-05__bottom {
  transform: translateY(0);
}
```

### 06. Diagonal Shutter

**Type:** Pure CSS
**Description:** A skewed gradient panel wipes diagonally across the button like a camera shutter opening.

**HTML:**
```html
<button class="bhe-06__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-06__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-06__btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    color 0.3s,
    border-color 0.3s;
}
.bhe-06__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -105%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
  transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
  transform: skewX(-15deg);
}
.bhe-06__btn:hover::before {
  left: 0;
}
.bhe-06__btn:hover {
  border-color: transparent;
}
```

### 07. Elastic Lift

**Type:** Pure CSS
**Description:** A hard bottom shadow creates a physical 3D effect — elastic cubic-bezier makes it bounce on hover.

**HTML:**
```html
<button class="bhe-07__btn">Click Me</button>
```

**CSS:**
```css
.bhe-07__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-07__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  box-shadow: 0 4px 0 #4a3aad;
  transform: translateY(0);
  transition:
    transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.12s;
}
.bhe-07__btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 0 #4a3aad;
}
.bhe-07__btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #4a3aad;
}
```

### 08. Center Underline Draw

**Type:** Pure CSS
**Description:** A gradient underline expands symmetrically outward from the center of the button text.

**HTML:**
```html
<button class="bhe-08__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-08__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-08__btn {
  position: relative;
  background: transparent;
  border: none;
}
.bhe-08__btn::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transition:
    left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    right 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}
.bhe-08__btn:hover::after {
  left: 32px;
  right: 32px;
}
```

### 09. 3D Flip

**Type:** Pure CSS
**Description:** The button flips on its X axis to reveal a second face — pure CSS 3D transform perspective.

**HTML:**
```html
<div class="bhe-09__wrapper">
  <button class="bhe-09__btn">
    <span class="bhe-09__front">Hover Me</span>
    <span class="bhe-09__back">Flipped!</span>
  </button>
</div>
```

**CSS:**
```css
.bhe-09__wrapper {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-09__wrapper {
  perspective: 600px;
  display: inline-block;
}
.bhe-09__btn {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  background: transparent;
  border: none;
}
.bhe-09__front,
.bhe-09__back {
  display: block;
  padding: 12px 32px;
  border-radius: 8px;
  backface-visibility: hidden;
}
.bhe-09__front {
  background: #ff6c8a;
  color: #fff;
}
.bhe-09__back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7c6cff;
  color: #fff;
  transform: rotateX(180deg);
}
.bhe-09__wrapper:hover .bhe-09__btn {
  transform: rotateX(180deg);
}
```

### 10. Particle Burst

**Type:** Pure CSS
**Description:** Six colored dots shoot out in all directions from the center of the button on hover.

**HTML:**
```html
<button class="bhe-10__btn">
  <span>Burst!</span>
  <span class="bhe-10__dot"></span>
  <span class="bhe-10__dot"></span>
  <span class="bhe-10__dot"></span>
  <span class="bhe-10__dot"></span>
  <span class="bhe-10__dot"></span>
  <span class="bhe-10__dot"></span>
</button>
```

**CSS:**
```css
.bhe-10__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-10__btn {
  position: relative;
  overflow: visible;
}
.bhe-10__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin: -3px 0 0 -3px;
  opacity: 0;
}
.bhe-10__btn:hover .bhe-10__dot {
  animation: burst 0.65s ease-out forwards;
}
.bhe-10__dot:nth-child(1) {
  background: #7c6cff;
  --dx: -52px;
  --dy: -42px;
}
.bhe-10__dot:nth-child(2) {
  background: #ff6c8a;
  --dx: 52px;
  --dy: -42px;
  animation-delay: 0.05s;
}
.bhe-10__dot:nth-child(3) {
  background: #2ecc8a;
  --dx: -62px;
  --dy: 2px;
  animation-delay: 0.02s;
}
.bhe-10__dot:nth-child(4) {
  background: #f5a623;
  --dx: 62px;
  --dy: 2px;
  animation-delay: 0.07s;
}
.bhe-10__dot:nth-child(5) {
  background: #7c6cff;
  --dx: -36px;
  --dy: 46px;
  animation-delay: 0.04s;
}
.bhe-10__dot:nth-child(6) {
  background: #ff6c8a;
  --dx: 36px;
  --dy: 46px;
  animation-delay: 0.03s;
}
@keyframes burst {
  0% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-10__btn,
  .bhe-10__btn * {
    animation: none !important;
  }
}

```

### 11. Slide Doors

**Type:** Pure CSS
**Description:** Two panels slide in from opposite sides and meet in the middle to fill the entire button.

**HTML:**
```html
<button class="bhe-11__btn"><span class="bhe-11__label">Slide Doors</span></button>
```

**CSS:**
```css
.bhe-11__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-11__btn {
  position: relative;
  overflow: hidden;
}
.bhe-11__btn::before,
.bhe-11__btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #7c6cff;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-11__btn::before {
  left: 0;
  transform: translateX(-101%);
}
.bhe-11__btn::after {
  right: 0;
  transform: translateX(101%);
}
.bhe-11__btn .bhe-11__label {
  position: relative;
  z-index: 1;
  transition: color 0.4s;
}
.bhe-11__btn:hover::before {
  transform: translateX(0);
}
.bhe-11__btn:hover::after {
  transform: translateX(0);
}
.bhe-11__btn:hover .bhe-11__label {
  color: #fff;
}
```

### 12. Typewriter Retype

**Type:** CSS + JS
**Description:** Text erases and retypes itself character by character on hover — like a live terminal cursor.

**HTML:**
```html
<button class="bhe-12__btn">
  <span class="bhe-12__text">console.log()</span>
  <span class="bhe-12__cursor"></span>
</button>
```

**CSS:**
```css
.bhe-12__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-12__btn {
  font-family: monospace;
}
.bhe-12__cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  background: currentColor;
  margin-left: 2px;
  vertical-align: middle;
  opacity: 0;
}
.bhe-12__btn:hover .bhe-12__cursor {
  animation: blink 0.6s step-end infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-12__btn,
  .bhe-12__btn * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll(".bhe-12__btn").forEach(function (btn) {
  const txt = btn.querySelector(".bhe-12__text");
  if (!txt) return;
  const full = txt.textContent;
  btn.addEventListener("mouseenter", function () {
    let i = full.length;
    const erase = setInterval(function () {
      txt.textContent = full.slice(0, --i);
      if (i === 0) {
        clearInterval(erase);
        retype();
      }
    }, 55);
    function retype() {
      let j = 0;
      const write = setInterval(function () {
        txt.textContent = full.slice(0, ++j);
        if (j === full.length) clearInterval(write);
      }, 55);
    }
  });
});
```

### 13. Hard Shadow Shift

**Type:** Pure CSS
**Description:** Brutalist hard offset shadow shifts both position and color on hover, snaps back on click.

**HTML:**
```html
<button class="bhe-13__btn">CLICK ME</button>
```

**CSS:**
```css
.bhe-13__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

.bhe-13__btn {
  color: #0a0a0f;
  background: #f0eeff;
  border: 2px solid #0a0a0f;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  box-shadow: 4px 4px 0 #0a0a0f;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.bhe-13__btn:hover {
  box-shadow: 8px 8px 0 #7c6cff;
  transform: translate(-2px, -2px);
}
.bhe-13__btn:active {
  box-shadow: 2px 2px 0 #0a0a0f;
  transform: translate(2px, 2px);
}
```

### 14. Ripple Wave

**Type:** CSS + JS
**Description:** A ripple circle radiates outward from the exact point of your click, like Material Design.

**HTML:**
```html
<button class="bhe-14__btn">Click Me</button>
```

**CSS:**
```css
.bhe-14__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-14__btn {
  position: relative;
  overflow: hidden;
}
.bhe-14__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0);
  animation: rwave 0.7s linear;
  pointer-events: none;
}
@keyframes rwave {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-14__btn,
  .bhe-14__btn * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll(".bhe-14__btn").forEach(function (btn) {
  btn.addEventListener("click", function (e) {
    const c = document.createElement("span");
    const d = Math.max(btn.offsetWidth, btn.offsetHeight);
    const r = btn.getBoundingClientRect();
    c.className = "bhe-14__ripple";
    c.style.cssText =
      "width:" + d + "px;height:" + d + "px;" +
      "left:" + (e.clientX - r.left - d / 2) + "px;" +
      "top:" + (e.clientY - r.top - d / 2) + "px";
    btn.appendChild(c);
    c.addEventListener("animationend", function () { c.remove(); });
  });
});
```

### 15. Rainbow Border Spin

**Type:** Pure CSS
**Description:** A conic-gradient border spins continuously using the CSS mask-composite technique.

**HTML:**
```html
<button class="bhe-15__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-15__btn {
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-15__btn {
  position: relative;
  border: none;
}
.bhe-15__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: conic-gradient(#7c6cff, #ff6c8a, #2ecc8a, #f5a623, #7c6cff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}
.bhe-15__btn:hover::before {
  opacity: 1;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bhe-15__btn,
  .bhe-15__btn * {
    animation: none !important;
  }
}

```

### 16. Morph Shape

**Type:** Pure CSS
**Description:** The button border-radius morphs from rectangle to pill and color transitions simultaneously.

**HTML:**
```html
<button class="bhe-16__btn">Hover Me</button>
```

**CSS:**
```css
.bhe-16__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-16__btn {
  background: #ff6c8a;
  color: #fff;
  border: none;
  transition:
    border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.3s,
    transform 0.2s;
}
.bhe-16__btn:hover {
  border-radius: 50px;
  background: #7c6cff;
  transform: scaleX(0.92);
}
```

### 17. Icon Slide In

**Type:** Pure CSS
**Description:** An arrow slides in from outside as the button padding expands to make room for it.

**HTML:**
```html
<button class="bhe-17__btn">Get Started<span class="bhe-17__icon">→</span></button>
```

**CSS:**
```css
.bhe-17__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-17__btn {
  position: relative;
  overflow: hidden;
  transition: padding 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-17__icon {
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition:
    right 0.35s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s;
}
.bhe-17__btn:hover {
  padding-right: 52px;
}
.bhe-17__btn:hover .bhe-17__icon {
  right: 16px;
  opacity: 1;
}
```

### 18. Cursor Spotlight

**Type:** CSS + JS
**Description:** A soft radial light follows your cursor around inside the button, illuminating where you hover.

**HTML:**
```html
<button class="bhe-18__btn">
  <span class="bhe-18__glow"></span>
  Hover Me
</button>
```

**CSS:**
```css
.bhe-18__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  color: inherit;
  background: transparent;
}

.bhe-18__btn {
  position: relative;
  overflow: hidden;
}
.bhe-18__glow {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.28) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translate(-50%, -50%);
}
.bhe-18__btn:hover .bhe-18__glow {
  opacity: 1;
}
```

**JS:**
```js
document.querySelectorAll(".bhe-18__btn").forEach(function (btn) {
  const glow = btn.querySelector(".bhe-18__glow");
  if (!glow) return;
  btn.addEventListener("mousemove", function (e) {
    const r = btn.getBoundingClientRect();
    glow.style.left = e.clientX - r.left + "px";
    glow.style.top = e.clientY - r.top + "px";
  });
});
```

### 19. Stagger Fill

**Type:** Pure CSS
**Description:** Five vertical segments fill upward one by one in a cascading waterfall sequence.

**HTML:**
```html
<button class="bhe-19__btn">
  <span class="bhe-19__seg"></span>
  <span class="bhe-19__seg"></span>
  <span class="bhe-19__seg"></span>
  <span class="bhe-19__seg"></span>
  <span class="bhe-19__seg"></span>
  <span class="bhe-19__label">Hover Me</span>
</button>
```

**CSS:**
```css
.bhe-19__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-19__btn {
  position: relative;
  overflow: hidden;
}
.bhe-19__seg {
  position: absolute;
  top: 0;
  width: 20%;
  height: 100%;
  background: #7c6cff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-19__seg:nth-child(1) {
  left: 0%;
  transition-delay: 0s;
}
.bhe-19__seg:nth-child(2) {
  left: 20%;
  transition-delay: 0.04s;
}
.bhe-19__seg:nth-child(3) {
  left: 40%;
  transition-delay: 0.08s;
}
.bhe-19__seg:nth-child(4) {
  left: 60%;
  transition-delay: 0.12s;
}
.bhe-19__seg:nth-child(5) {
  left: 80%;
  transition-delay: 0.16s;
}
.bhe-19__label {
  position: relative;
  z-index: 1;
  transition: color 0.4s 0.1s;
}
.bhe-19__btn:hover .bhe-19__seg {
  transform: scaleY(1);
}
.bhe-19__btn:hover .bhe-19__label {
  color: #fff;
}
```

### 20. Sunburst Expand

**Type:** Pure CSS
**Description:** Spinning conic-gradient rays fan out behind the button on hover, glowing like a sunburst.

**HTML:**
```html
<button class="bhe-20__btn">
  <div class="bhe-20__rays"></div>
  <span class="bhe-20__label">Sunburst</span>
</button>
```

**CSS:**
```css
.bhe-20__btn {
  font-family: inherit;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-20__btn {
  position: relative;
  overflow: hidden;
  padding: 12px 40px;
  border-radius: 50px;
  border: none;
  background: #f5a84a;
  color: #0a0a0f;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.bhe-20__btn:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(245, 168, 74, 0.5);
}
.bhe-20__rays {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    transparent 0deg,
    rgba(255, 255, 255, 0.2) 10deg,
    transparent 20deg,
    rgba(255, 255, 255, 0.2) 30deg,
    transparent 40deg,
    rgba(255, 255, 255, 0.2) 50deg,
    transparent 60deg,
    rgba(255, 255, 255, 0.2) 70deg,
    transparent 80deg,
    rgba(255, 255, 255, 0.2) 90deg,
    transparent 100deg,
    rgba(255, 255, 255, 0.2) 110deg,
    transparent 120deg,
    rgba(255, 255, 255, 0.2) 130deg,
    transparent 140deg,
    rgba(255, 255, 255, 0.2) 150deg,
    transparent 160deg,
    rgba(255, 255, 255, 0.2) 170deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.2) 190deg,
    transparent 200deg,
    rgba(255, 255, 255, 0.2) 210deg,
    transparent 220deg,
    rgba(255, 255, 255, 0.2) 230deg,
    transparent 240deg,
    rgba(255, 255, 255, 0.2) 250deg,
    transparent 260deg,
    rgba(255, 255, 255, 0.2) 270deg,
    transparent 280deg,
    rgba(255, 255, 255, 0.2) 290deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.2) 310deg,
    transparent 320deg,
    rgba(255, 255, 255, 0.2) 330deg,
    transparent 340deg,
    rgba(255, 255, 255, 0.2) 350deg
  );
  opacity: 0;
  transition: opacity 0.3s;
}
.bhe-20__btn:hover .bhe-20__rays {
  opacity: 1;
  animation: sunburst-spin 6s linear infinite;
}
@keyframes sunburst-spin {
  to {
    transform: rotate(360deg);
  }
}
.bhe-20__label {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bhe-20__btn,
  .bhe-20__btn * {
    animation: none !important;
  }
}

```

### 21. 3D Press

**Type:** Pure CSS
**Description:** Layered box-shadows create a physical 3D extrusion. Hovering lifts the button; clicking presses it flush into the surface.

**HTML:**
```html
<button class="bhe-21__btn">3D Press</button>
```

**CSS:**
```css
.bhe-21__btn {
  padding: 12px 32px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  background: transparent;
  color: inherit;
}

.bhe-21__btn {
  background: #7c6cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  box-shadow:
    0 6px 0 #4a3ab0,
    0 8px 16px rgba(74, 58, 176, 0.4);
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.bhe-21__btn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 9px 0 #4a3ab0,
    0 14px 24px rgba(74, 58, 176, 0.45);
}
.bhe-21__btn:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #4a3ab0,
    0 4px 8px rgba(74, 58, 176, 0.3);
}
```

---
## 31 CSS Button Designs

URL: https://codefronts.com/components/css-buttons/
Description: 31 hand-coded CSS buttons styled as real-world materials — brushed brass, holographic foil, vinyl record, velvet ribbon, frosted ice, brutalist concrete and more.
Demo count: 31

### 01. Brushed Brass

**Type:** Pure CSS
**Description:** Letterpress brass plate with engraved label and steel rivets at the corners. Hover deepens the bevel; click presses the plate into the surface.

**HTML:**
```html
<button class="btn-brass">
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-label">Engage</span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
  <span class="btn-brass-rivet" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-brass {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,232,180,0.12) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(180deg, #d8b66e 0%, #c9a15e 50%, #a07f3a 100%);
  color: #2a1d0e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 24px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.6),
    inset 0 -2px 0 rgba(58,36,16,0.4),
    0 4px 8px rgba(0,0,0,0.3);
  text-shadow: 0 1px 0 rgba(255,232,180,0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.18s ease;
}
.btn-brass-rivet {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f0e8d8, #6a5a30 70%);
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.4);
}
.btn-brass-label {
  grid-column: span 1;
  grid-row: 1 / span 2;
  text-align: center;
  border-top: 1px solid rgba(58,36,16,0.4);
  border-bottom: 1px solid rgba(58,36,16,0.4);
  padding: 4px 0;
}
.btn-brass:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,232,180,0.7),
    inset 0 -2px 0 rgba(58,36,16,0.5),
    0 6px 12px rgba(0,0,0,0.35);
}
.btn-brass:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(58,36,16,0.4),
    0 1px 2px rgba(0,0,0,0.2);
}
```

### 02. Paper Crane

**Type:** Pure CSS
**Description:** Washi paper with a hand-stamped red ink seal in the corner. The bottom-right corner is folded like an origami crease; hover lifts the whole card like a postcard.

**HTML:**
```html
<button class="btn-crane">
  <span class="btn-crane-text">Send Wish</span>
  <span class="btn-crane-seal" aria-hidden="true">福</span>
  <span class="btn-crane-fold" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-crane {
  position: relative;
  padding: 14px 44px 14px 28px;
  border: 1px solid #d4c8a3;
  border-radius: 2px;
  background: #f5e8c4;
  color: #3a2010;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.3,1,.3,1), box-shadow 0.25s ease;
  box-shadow: 0 2px 0 rgba(170,140,80,0.4), 0 4px 10px rgba(0,0,0,0.12);
}
.btn-crane-text { position: relative; z-index: 1; }
.btn-crane-seal {
  position: absolute;
  top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  background: #a83232;
  color: #f5e8c4;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.btn-crane-fold {
  position: absolute;
  right: 0; bottom: 0;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, transparent 50%, #d4c8a3 50%);
}
.btn-crane:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  box-shadow: 0 4px 0 rgba(170,140,80,0.4), 0 8px 16px rgba(0,0,0,0.18);
}
```

### 03. Frosted Ice

**Type:** Pure CSS
**Description:** Glacier blue with backdrop-filter refraction and noisy frost grain on top. Hover melts the surface to a brighter, glossier ice.

**HTML:**
```html
<button class="btn-ice">
  <span class="btn-ice-frost" aria-hidden="true"></span>
  <span class="btn-ice-glint" aria-hidden="true"></span>
  <span class="btn-ice-text">Cool Down</span>
</button>
```

**CSS:**
```css
.btn-ice {
  position: relative;
  padding: 14px 30px;
  border: 1px solid rgba(168,224,240,0.5);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,224,240,0.55), rgba(93,158,176,0.65));
  color: #0a3a4a;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 22px -8px rgba(15,80,100,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-ice-frost {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.55), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 4px);
  pointer-events: none;
}
.btn-ice-glint {
  position: absolute; top: -50%; left: -30%;
  width: 30%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  transform: rotate(20deg);
  transition: left 0.5s cubic-bezier(.3,1,.3,1);
  pointer-events: none;
}
.btn-ice-text { position: relative; z-index: 1; }
.btn-ice:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(15,80,100,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-ice:hover .btn-ice-glint { left: 130%; }
```

### 04. Typewriter Key

**Type:** Pure CSS
**Description:** Concave ivory keycap with black ring and serif letter. Click depresses the key 4px with a soft mechanical thud shadow.

**HTML:**
```html
<button class="btn-key">
  <span class="btn-key-cap">
    <span class="btn-key-letter">RETURN</span>
  </span>
</button>
```

**CSS:**
```css
.btn-key {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  perspective: 200px;
}
.btn-key-cap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 130px; height: 56px;
  background: radial-gradient(ellipse at 50% 30%, #fff8e8 0%, #f0e8d8 60%, #d4c8a8 100%);
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 5px 0 #1a1a1a,
    0 8px 14px rgba(0,0,0,0.25);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-key-letter {
  font-family: ui-serif, 'Courier New', Georgia, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.16em;
  color: #1a1a1a;
}
.btn-key:hover .btn-key-cap {
  transform: translateY(-1px);
}
.btn-key:active .btn-key-cap {
  transform: translateY(4px);
  box-shadow:
    inset 0 -2px 6px rgba(0,0,0,0.25),
    inset 0 2px 4px rgba(255,255,255,0.4),
    0 1px 0 #1a1a1a,
    0 2px 4px rgba(0,0,0,0.2);
}
```

### 05. Lacquered Wood

**Type:** Pure CSS
**Description:** Walnut grain block with brass corner brackets and gilt label. Hover deepens the lacquer sheen; the brass catches a tilt of light.

**HTML:**
```html
<button class="btn-wood">
  <span class="btn-wood-corner btn-wood-corner-tl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-tr" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-bl" aria-hidden="true"></span>
  <span class="btn-wood-corner btn-wood-corner-br" aria-hidden="true"></span>
  <span class="btn-wood-text">Reserve</span>
</button>
```

**CSS:**
```css
.btn-wood {
  position: relative;
  padding: 14px 36px;
  border: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.06) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.04) 0 6px,
      transparent 6px 14px
    ),
    linear-gradient(135deg, #6a4628 0%, #5a3a20 50%, #3a2410 100%);
  color: #c9a15e;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(201,161,94,0.2),
    0 4px 14px rgba(0,0,0,0.4);
  transition: filter 0.2s ease, transform 0.18s ease;
}
.btn-wood-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 2px solid #c9a15e;
  background: #c9a15e22;
}
.btn-wood-corner-tl { top: 4px;    left: 4px;    border-right: none;  border-bottom: none; }
.btn-wood-corner-tr { top: 4px;    right: 4px;   border-left: none;   border-bottom: none; }
.btn-wood-corner-bl { bottom: 4px; left: 4px;    border-right: none;  border-top: none; }
.btn-wood-corner-br { bottom: 4px; right: 4px;   border-left: none;   border-top: none; }
.btn-wood-text { position: relative; z-index: 1; }
.btn-wood:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
```

### 06. Gel Capsule

**Type:** Pure CSS
**Description:** Pill-shaped pharma capsule split half clinical-blue, half pearl-white, with a chunky black band carrying the dose label. Hover brightens both halves.

**HTML:**
```html
<button class="btn-pill">
  <span class="btn-pill-half btn-pill-l" aria-hidden="true"></span>
  <span class="btn-pill-half btn-pill-r" aria-hidden="true"></span>
  <span class="btn-pill-band">
    <span class="btn-pill-text">PRESCRIBE 500 MG</span>
  </span>
</button>
```

**CSS:**
```css
.btn-pill {
  position: relative;
  width: 220px; height: 48px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  filter: drop-shadow(0 4px 10px rgba(58,120,201,0.3));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn-pill-half {
  position: absolute; top: 0; bottom: 0; width: 50%;
}
.btn-pill-l {
  left: 0;
  background: linear-gradient(180deg, #5a96e0 0%, #3a78c9 60%, #2a5a99 100%);
  border-radius: 999px 0 0 999px;
  box-shadow: inset 4px 0 6px rgba(0,0,0,0.1);
}
.btn-pill-l::after {
  content: '';
  position: absolute; top: 5px; left: 14px; right: 4px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), transparent);
  border-radius: 999px 0 0 0;
}
.btn-pill-r {
  right: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e8edf2 60%, #c8d2dc 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: inset -4px 0 6px rgba(0,0,0,0.08);
}
.btn-pill-r::after {
  content: '';
  position: absolute; top: 5px; left: 4px; right: 14px; height: 35%;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent);
  border-radius: 0 999px 0 0;
}
.btn-pill-band {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 86%; height: 22px;
  background: #0e0e1a;
  border-radius: 4px;
  display: grid; place-items: center;
  z-index: 1;
}
.btn-pill-text {
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  color: #fdfcfa;
  letter-spacing: 0.18em;
}
.btn-pill:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 14px rgba(58,120,201,0.45)); }
```

### 07. Copper Coin

**Type:** Pure CSS
**Description:** Aged copper disc with verdigris patina blooming around the rim. Hover spins the patina conically.

**HTML:**
```html
<button class="btn-copper">
  <span class="btn-copper-rim" aria-hidden="true"></span>
  <span class="btn-copper-text">Mint</span>
</button>
```

**CSS:**
```css
@property --btn-copper-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-copper {
  position: relative;
  width: 96px; height: 96px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8b878 0%, #b87333 55%, #6a3f15 100%);
  color: #3a2410;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  isolation: isolate;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 2px 3px rgba(255,255,255,0.4),
    0 6px 14px rgba(0,0,0,0.3);
  --btn-copper-angle: 0deg;
  transition: --btn-copper-angle 4s linear, transform 0.18s ease;
}
.btn-copper-rim {
  position: absolute; inset: 4px;
  border-radius: 50%;
  background: conic-gradient(from var(--btn-copper-angle),
    transparent 0deg,
    #5d8a73aa 30deg,
    transparent 80deg,
    #88a896aa 200deg,
    transparent 260deg,
    #5d8a73aa 320deg,
    transparent 360deg);
  filter: blur(2px);
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 70%);
          mask: radial-gradient(circle, transparent 60%, #000 70%);
}
.btn-copper-text { position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,232,180,0.4); }
.btn-copper:hover {
  --btn-copper-angle: 360deg;
  transform: scale(1.04);
}
```

### 08. Origami Fortune

**Type:** Pure CSS
**Description:** Triangular fold of cream paper with a single ink-red strip. Hover unfolds slightly to reveal the fortune underneath.

**HTML:**
```html
<button class="btn-fortune">
  <span class="btn-fortune-fold" aria-hidden="true"></span>
  <span class="btn-fortune-strip" aria-hidden="true"></span>
  <span class="btn-fortune-text">Open</span>
</button>
```

**CSS:**
```css
.btn-fortune {
  position: relative;
  padding: 16px 36px;
  border: none;
  background: #f5ead0;
  color: #3a2410;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  box-shadow: 0 4px 12px rgba(58,36,16,0.25);
  transition: transform 0.25s cubic-bezier(.3,1.2,.3,1);
}
.btn-fortune-fold {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(58,36,16,0.18) 100%);
  pointer-events: none;
}
.btn-fortune-strip {
  position: absolute;
  bottom: 0; left: 50%;
  width: 4px; height: 32%;
  background: #a83232;
  transform: translateX(-50%);
}
.btn-fortune-text { position: relative; z-index: 1; }
.btn-fortune:hover {
  transform: translateY(-2px) rotate(-2deg);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
```

### 09. Holographic Foil

**Type:** Pure CSS
**Description:** Iridescent cyan→magenta sheen with a ragged sticker edge. Hover shifts the spectrum across the surface.

**HTML:**
```html
<button class="btn-holo">
  <span class="btn-holo-text">Mint NFT</span>
</button>
```

**CSS:**
```css
.btn-holo {
  position: relative;
  padding: 13px 28px;
  border: 2px solid #fff;
  border-radius: 6px;
  background:
    linear-gradient(115deg,
      #00d4ff 0%,
      #ff3d8c 30%,
      #3eff7f 55%,
      #fef34c 75%,
      #00d4ff 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #1a0033;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 4px 18px rgba(0,212,255,0.35),
    0 4px 18px rgba(255,61,140,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.4);
  transition: background-position 0.5s cubic-bezier(.3,1,.3,1), transform 0.18s;
}
.btn-holo-text {
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 3px;
}
.btn-holo:hover {
  background-position: 100% 50%;
  transform: translateY(-2px) scale(1.02);
}
```

### 10. Brutalist Slab

**Type:** Pure CSS
**Description:** Rough concrete with a safety-yellow stripe and hard 6px offset. Click slams the slab to flush with the page.

**HTML:**
```html
<button class="btn-brutal">
  <span class="btn-brutal-stripe" aria-hidden="true"></span>
  <span class="btn-brutal-text">SUBMIT</span>
</button>
```

**CSS:**
```css
.btn-brutal {
  position: relative;
  padding: 16px 40px;
  border: 3px solid #1a1a1a;
  border-radius: 0;
  background:
    repeating-radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 0 1px, transparent 1px 5px),
    repeating-radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0 1px, transparent 1px 7px),
    #8a8a85;
  color: #1a1a1a;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 6px 6px 0 #1a1a1a;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-brutal-stripe {
  position: absolute; left: 0; right: 0;
  top: -3px; height: 6px;
  background: #f5cb1a;
  border-bottom: 3px solid #1a1a1a;
}
.btn-brutal-text { position: relative; }
.btn-brutal:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #1a1a1a; }
.btn-brutal:active { transform: translate(6px,6px); box-shadow: 0 0 0 #1a1a1a; }
```

### 11. Mercury Bead

**Type:** Pure CSS
**Description:** Quicksilver bead that morphs its border-radius on hover, like surface tension giving way under pressure.

**HTML:**
```html
<button class="btn-mercury">Liquid</button>
```

**CSS:**
```css
.btn-mercury {
  padding: 14px 32px;
  border: none;
  border-radius: 50% 14px 50% 14px / 14px 50% 14px 50%;
  background: radial-gradient(circle at 30% 30%, #e0e6ec 0%, #bcc4ce 50%, #5a6470 100%);
  color: #1e242a;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 -4px 8px rgba(30,36,42,0.4),
    inset 0 2px 4px rgba(255,255,255,0.6),
    0 4px 12px rgba(30,36,42,0.4);
  transition: border-radius 0.5s cubic-bezier(.3,1.2,.3,1), transform 0.3s;
}
.btn-mercury:hover {
  border-radius: 14px 50% 14px 50% / 50% 14px 50% 14px;
  transform: scale(1.04);
}
```

### 12. Soft Pill

**Type:** Pure CSS
**Description:** The Linear / Raycast / Vercel button trend of 2026 — soft gradient pill with a crisp inset highlight, ambient glow, and a tiny shortcut chip on the right. Hover brightens the glow without moving the button.

**HTML:**
```html
<button class="btn-soft">
  <svg
    class="btn-soft-icon"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2.4"
    stroke-linecap="round"
    stroke-linejoin="round"
    aria-hidden="true"
  >
    <path d="M5 12h14M13 5l7 7-7 7" />
  </svg>
  <span class="btn-soft-text">Continue</span>
  <span class="btn-soft-kbd" aria-hidden="true">⏎</span>
</button>
```

**CSS:**
```css
.btn-soft {
  --soft-bg-1: #2a2a3a;
  --soft-bg-2: #16161e;
  --soft-glow: #6e7eff;
  position: relative;
  padding: 11px 14px 11px 18px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--soft-bg-1), var(--soft-bg-2));
  color: #f5f5fa;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.35),
    0 0 0 0 var(--soft-glow);
  transition: box-shadow 0.25s ease, transform 0.12s ease;
}
.btn-soft-icon {
  width: 14px; height: 14px;
  color: var(--soft-glow);
  flex-shrink: 0;
}
.btn-soft-kbd {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #a8a8b8;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}
.btn-soft:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 6px 14px rgba(0,0,0,0.35),
    0 0 22px -4px var(--soft-glow);
}
.btn-soft:active { transform: translateY(1px); }
```

### 13. Masking Tape

**Type:** Pure CSS
**Description:** Kraft masking tape with torn perforated edges and a hand-stamped ink label. Hover lifts the corner like a peel.

**HTML:**
```html
<button class="btn-tape">
  <span class="btn-tape-text">FRAGILE</span>
</button>
```

**CSS:**
```css
.btn-tape {
  position: relative;
  padding: 14px 38px;
  border: none;
  border-radius: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.04) 0 6px,
      transparent 6px 12px),
    #d8b87a;
  color: #2a1d0e;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.32em;
  cursor: pointer;
  /* Torn edges: scalloped left/right via radial-gradient mask */
  -webkit-mask:
    radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
          mask:
    radial-gradient(circle 4px at 0% 50%, transparent 99%, #000 100%),
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
          mask-composite: add;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  transition: transform 0.25s cubic-bezier(.3,1,.3,1);
}
.btn-tape:hover {
  transform: rotate(-2deg) translateY(-2px);
}
```

### 14. Glass Shard

**Type:** Pure CSS
**Description:** Obsidian shard with a faceted clip-path; magenta and cyan refract through the cuts on hover.

**HTML:**
```html
<button class="btn-shard">
  <span class="btn-shard-text">Activate</span>
</button>
```

**CSS:**
```css
.btn-shard {
  position: relative;
  padding: 14px 36px;
  border: none;
  background:
    linear-gradient(115deg,
      #0e0e1a 0%,
      #ff3d8c 30%,
      #0e0e1a 50%,
      #00d4ff 70%,
      #0e0e1a 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  color: #fff;
  font-family: ui-sans-serif, system-ui;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  box-shadow: 0 6px 18px rgba(0,212,255,0.25), 0 6px 18px rgba(255,61,140,0.25);
  transition: background-position 0.6s cubic-bezier(.3,1,.3,1), transform 0.2s;
}
.btn-shard-text { position: relative; }
.btn-shard:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
}
```

### 15. Velvet Ribbon

**Type:** Pure CSS
**Description:** Wine-velvet pill with gilt edges; the nap shimmers like brushed fabric on hover.

**HTML:**
```html
<button class="btn-velvet">
  <span class="btn-velvet-text">RSVP</span>
</button>
```

**CSS:**
```css
.btn-velvet {
  position: relative;
  padding: 13px 36px;
  border: 2px solid #d4a017;
  border-radius: 999px;
  background:
    repeating-linear-gradient(115deg,
      rgba(212,160,23,0.06) 0 1px,
      transparent 1px 4px),
    radial-gradient(ellipse at 50% 30%, #6a2235 0%, #5a1d2c 60%, #3a0e1a 100%);
  color: #f5d678;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(245,214,120,0.25),
    inset 0 -8px 18px rgba(0,0,0,0.4),
    0 4px 14px rgba(58,14,26,0.45);
  transition: filter 0.3s ease, transform 0.2s ease;
}
.btn-velvet:hover {
  filter: brightness(1.18) saturate(1.1);
  transform: translateY(-1px);
}
```

### 16. LED Segment

**Type:** Pure CSS
**Description:** Phosphor-green 7-segment-style display on a pure black panel with a faint scanline overlay.

**HTML:**
```html
<button class="btn-led">
  <span class="btn-led-scanline" aria-hidden="true"></span>
  <span class="btn-led-text">START</span>
</button>
```

**CSS:**
```css
.btn-led {
  position: relative;
  padding: 14px 30px;
  border: 2px solid #1a3a20;
  border-radius: 4px;
  background: #0a0a0a;
  color: #3eff7f;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 16px; font-weight: 900;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-shadow:
    0 0 6px rgba(62,255,127,0.8),
    0 0 14px rgba(62,255,127,0.4);
  box-shadow:
    inset 0 0 0 1px #0a1a10,
    inset 0 0 24px rgba(62,255,127,0.08),
    0 4px 14px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: text-shadow 0.18s ease;
}
.btn-led-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(62,255,127,0.05) 0 2px,
    transparent 2px 4px);
  pointer-events: none;
}
.btn-led-text { position: relative; }
.btn-led:hover {
  text-shadow:
    0 0 10px rgba(62,255,127,1),
    0 0 22px rgba(62,255,127,0.7),
    0 0 30px rgba(62,255,127,0.3);
}
```

### 17. Cassette Label

**Type:** Pure CSS
**Description:** Hot-pink mixtape J-card with electric-teal corner sticker and ruled lines. Hover gives it a 90s cassette tilt.

**HTML:**
```html
<button class="btn-cass">
  <span class="btn-cass-corner" aria-hidden="true"></span>
  <span class="btn-cass-text">SIDE A</span>
</button>
```

**CSS:**
```css
.btn-cass {
  position: relative;
  padding: 14px 32px 14px 38px;
  border: 2px solid #0a0a14;
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 13px,
      rgba(10,10,20,0.18) 13px 14px),
    #ff3d83;
  color: #0a0a14;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.28em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #0a0a14;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cass-corner {
  position: absolute;
  top: 4px; left: 4px;
  width: 16px; height: 16px;
  background: #00d4d4;
  border: 2px solid #0a0a14;
  transform: rotate(45deg);
  transform-origin: center;
}
.btn-cass-text { position: relative; }
.btn-cass:hover { transform: rotate(-1.5deg) translate(-1px,-1px); box-shadow: 5px 5px 0 #0a0a14; }
```

### 18. Chalkboard

**Type:** Pure CSS
**Description:** Slate-green chalkboard with a chalk-drawn label and dusty grain. Hover smudges a faint eraser trail.

**HTML:**
```html
<button class="btn-chalk">
  <span class="btn-chalk-dust" aria-hidden="true"></span>
  <span class="btn-chalk-text">Today's Special</span>
</button>
```

**CSS:**
```css
.btn-chalk {
  position: relative;
  padding: 14px 30px;
  border: 4px solid #c9a15e;
  border-radius: 6px;
  background:
    repeating-linear-gradient(45deg,
      rgba(232,226,208,0.04) 0 1px,
      transparent 1px 4px),
    #1e2a23;
  color: #e8e2d0;
  font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
  font-size: 17px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: filter 0.18s ease;
}
.btn-chalk-dust {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(232,226,208,0.06), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(232,226,208,0.04), transparent 60%);
  pointer-events: none; opacity: 0;
  transition: opacity 0.3s ease;
}
.btn-chalk-text { position: relative; text-shadow: 0 0 1px rgba(232,226,208,0.4); }
.btn-chalk:hover .btn-chalk-dust { opacity: 1; }
```

### 19. Vinyl Sleeve

**Type:** CSS + JS
**Description:** Sleeve-red record cover with concentric grooves; click drops the needle and ripples outward from the click point.

**HTML:**
```html
<button class="btn-vinyl">Play</button>
```

**CSS:**
```css
.btn-vinyl {
  position: relative;
  width: 96px; height: 96px;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #f5ead0 0%,
      #f5ead0 18%,
      #1a1a1a 19%,
      #1a1a1a 100%),
    #cc3232;
  background-size: 100% 100%;
  background-color: #cc3232;
  color: #cc3232;
  font-family: ui-serif, Georgia, serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.3s ease;
}
.btn-vinyl::before {
  content: '';
  position: absolute; inset: 12px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #1a1a1a 0 1px, #2a2a2a 1px 3px);
  pointer-events: none;
}
.btn-vinyl::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(245,234,208,0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.btn-vinyl.btn-vinyl-rippled::after {
  animation: btn-vinyl-ripple 0.7s ease-out;
}
@keyframes btn-vinyl-ripple {
  0%   { width: 0; height: 0; opacity: 0.7; }
  100% { width: 200%; height: 200%; opacity: 0; }
}
.btn-vinyl:hover { transform: rotate(20deg); }
.btn-vinyl span,
.btn-vinyl  { isolation: isolate; }
/* label sits on top of grooves */
.btn-vinyl { z-index: 0; }
```

**JS:**
```js
document.querySelectorAll('.btn-vinyl').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.remove('btn-vinyl-rippled');
    /* force reflow so the same animation can replay */
    void btn.offsetWidth;
    btn.classList.add('btn-vinyl-rippled');
  });
});
```

### 20. Polaroid Snapshot

**Type:** Pure CSS
**Description:** A genuine Polaroid frame — square sepia photo on top, the iconic chunky white bottom border with a handwritten caption and date stamp. Tilts casually on hover like it was just dropped on a table.

**HTML:**
```html
<button class="btn-polar">
  <span class="btn-polar-photo" aria-hidden="true">
    <span class="btn-polar-glare" aria-hidden="true"></span>
  </span>
  <span class="btn-polar-caption">
    <span class="btn-polar-text">Save to album</span>
    <span class="btn-polar-date">'89 · 03/24</span>
  </span>
</button>
```

**CSS:**
```css
.btn-polar {
  position: relative;
  padding: 8px 8px 0;
  border: none;
  background: #fff8e7;
  cursor: pointer;
  display: flex; flex-direction: column;
  gap: 0;
  width: 156px;
  box-shadow:
    0 8px 22px rgba(0,0,0,0.35),
    0 1px 0 rgba(112,72,48,0.1) inset;
  transition: transform 0.3s cubic-bezier(.3,1,.3,1), box-shadow 0.3s ease;
  transform: rotate(-1.5deg);
}
.btn-polar-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 25%, #ffd089 0%, transparent 45%),
    radial-gradient(circle at 70% 75%, rgba(0,0,0,0.25), transparent 50%),
    linear-gradient(135deg, #fcb938 0%, #b87333 50%, #5a3010 100%);
  filter: sepia(0.35) saturate(1.2) contrast(1.05);
  overflow: hidden;
}
.btn-polar-glare {
  position: absolute;
  top: -10%; left: -20%;
  width: 70%; height: 70%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.4), transparent 60%);
  pointer-events: none;
}
.btn-polar-caption {
  /* The iconic chunky bottom border */
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 10px 22px;
  gap: 4px;
}
.btn-polar-text {
  font-family: 'Caveat', 'Comic Sans MS', cursive, ui-serif;
  font-size: 16px; font-weight: 600;
  color: #3a2410;
  letter-spacing: 0.02em;
  line-height: 1;
}
.btn-polar-date {
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #b87333;
}
.btn-polar:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 0 14px 32px rgba(0,0,0,0.4);
}
```

### 21. Boarding Pass

**Type:** Pure CSS
**Description:** Airline-navy ticket with three-letter airport codes, a flight-path arrow, magenta tear-line stub, and a real barcode strip along the bottom.

**HTML:**
```html
<button class="btn-board">
  <span class="btn-board-main">
    <span class="btn-board-route">
      <span class="btn-board-iata">SFO</span>
      <svg
        class="btn-board-arrow"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        aria-hidden="true"
      >
        <path d="M2 12h18M14 5l7 7-7 7" />
      </svg>
      <span class="btn-board-iata">JFK</span>
    </span>
    <span class="btn-board-barcode" aria-hidden="true"></span>
  </span>
  <span class="btn-board-tear" aria-hidden="true"></span>
  <span class="btn-board-stub">
    <span class="btn-board-stub-label">SEAT</span>
    <span class="btn-board-stub-val">14A</span>
  </span>
</button>
```

**CSS:**
```css
.btn-board {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #0c2340;
  color: #fdf6e9;
  font-family: ui-monospace, monospace;
  cursor: pointer;
  display: inline-flex; align-items: stretch;
  box-shadow: 0 6px 16px rgba(12,35,64,0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.btn-board-main {
  display: flex; flex-direction: column;
  padding: 12px 18px 10px;
  gap: 8px;
}
.btn-board-route {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 800;
  letter-spacing: 0.12em;
}
.btn-board-arrow { width: 20px; height: 14px; color: #e84a8a; }
.btn-board-iata { color: #fdf6e9; }
.btn-board-barcode {
  display: block;
  height: 14px;
  background: repeating-linear-gradient(90deg,
    #fdf6e9 0 2px,
    transparent 2px 3px,
    #fdf6e9 3px 4px,
    transparent 4px 7px,
    #fdf6e9 7px 8px,
    transparent 8px 10px);
  opacity: 0.95;
}
.btn-board-tear {
  position: relative;
  width: 0;
  border-left: 2px dashed rgba(253,246,233,0.35);
  margin: 6px 0;
}
.btn-board-tear::before, .btn-board-tear::after {
  content: '';
  position: absolute;
  left: -7px; width: 12px; height: 12px;
  background: #17171f;
  border-radius: 50%;
}
.btn-board-tear::before { top: -12px; }
.btn-board-tear::after  { bottom: -12px; }
.btn-board-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(232,74,138,0.18), rgba(232,74,138,0.05));
  border-left: 1px solid rgba(232,74,138,0.4);
  gap: 2px;
}
.btn-board-stub-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em;
  color: #e84a8a;
}
.btn-board-stub-val {
  font-size: 18px; font-weight: 900;
  letter-spacing: 0.04em;
  color: #fdf6e9;
}
.btn-board:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,35,64,0.55);
}
```

### 22. Subway Token

**Type:** CSS + JS
**Description:** Aged brass subway token with a curved arc sweep that traces a clock-like ring around the inscription on click. The arc is an SVG path so the curve stays smooth at every angle.

**HTML:**
```html
<button class="btn-token">
  <svg class="btn-token-arc" viewBox="0 0 100 100" aria-hidden="true">
    <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(42,29,14,0.18)" stroke-width="3" />
    <circle
      class="btn-token-arc-spin"
      cx="50"
      cy="50"
      r="42"
      fill="none"
      stroke="#2a1d0e"
      stroke-width="3"
      stroke-linecap="round"
      pathLength="100"
      stroke-dasharray="22 100"
    />
  </svg>
  <span class="btn-token-text">PROCESS</span>
</button>
```

**CSS:**
```css
.btn-token {
  position: relative;
  width: 124px; height: 124px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #e8c890 0%, #c9a15e 50%, #6a4520 100%);
  color: #2a1d0e;
  font-family: ui-serif, Georgia, serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.4),
    inset 0 3px 4px rgba(255,232,180,0.6),
    0 6px 14px rgba(0,0,0,0.35);
  transition: transform 0.18s ease;
}
.btn-token-arc {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px); height: calc(100% - 16px);
  pointer-events: none;
}
.btn-token-arc-spin {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  transition: transform 1.4s cubic-bezier(.3,1,.3,1);
}
.btn-token-text {
  position: relative; z-index: 1;
  text-shadow: 0 1px 0 rgba(255,232,180,0.4);
}
.btn-token.is-processing .btn-token-arc-spin {
  transform: rotate(270deg);
}
.btn-token:hover { transform: scale(1.04); }
```

**JS:**
```js
document.querySelectorAll('.btn-token').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-processing')) return;
    btn.classList.add('is-processing');
    setTimeout(function() { btn.classList.remove('is-processing'); }, 1400);
  });
});
```

### 23. Rx Label

**Type:** Pure CSS
**Description:** Cream pharmacy label with letterpress serif, dotted underline, and a red Rx badge. Vintage prescription chic.

**HTML:**
```html
<button class="btn-rx">
  <span class="btn-rx-badge" aria-hidden="true">℞</span>
  <span class="btn-rx-text">TAKE ONE</span>
</button>
```

**CSS:**
```css
.btn-rx {
  position: relative;
  padding: 12px 26px 12px 16px;
  border: 1.5px solid #4d5435;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 22px,
      rgba(77,84,53,0.08) 22px 23px),
    #f5ede0;
  color: #4d5435;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 10px rgba(77,84,53,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-rx-badge {
  width: 26px; height: 26px;
  background: #a32424;
  color: #f5ede0;
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: ui-serif, Georgia, serif;
  font-size: 14px; font-weight: 800;
}
.btn-rx-text { border-bottom: 1.5px dotted #4d5435; padding-bottom: 1px; }
.btn-rx:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(77,84,53,0.22); }
```

### 24. Radio Dial

**Type:** CSS + JS
**Description:** Bakelite-cream dial with a brass pointer locked to OFF. Click toggles to ON: the pointer swings clockwise to the right tick mark and stays there until the next click.

**HTML:**
```html
<button class="btn-radio" aria-pressed="false" aria-label="Toggle power">
  <span class="btn-radio-tick btn-radio-tick-l" aria-hidden="true">OFF</span>
  <span class="btn-radio-tick btn-radio-tick-r" aria-hidden="true">ON</span>
  <span class="btn-radio-arrow" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.btn-radio {
  position: relative;
  width: 124px; height: 64px;
  border: 3px solid #1a1a1a;
  border-bottom-width: 6px;
  border-radius: 124px 124px 0 0 / 124px 124px 0 0;
  background: radial-gradient(ellipse at 50% 90%, #f5ede0 0%, #d8c8a8 100%);
  cursor: pointer;
  overflow: hidden;
  font-family: ui-serif, Georgia, serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.14em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.btn-radio-tick {
  position: absolute; bottom: 6px;
  color: #5a4520;
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.btn-radio-tick-l { left: 14px; color: #a32424; }
.btn-radio-tick-r { right: 14px; }
.btn-radio[aria-pressed="true"] .btn-radio-tick-l { color: #5a4520; }
.btn-radio[aria-pressed="true"] .btn-radio-tick-r { color: #a32424; }
.btn-radio-arrow {
  position: absolute;
  bottom: 0; left: 50%;
  width: 4px; height: 44px;
  background: linear-gradient(180deg, #c9a15e 0%, #6a4520 100%);
  border-radius: 2px 2px 0 0;
  transform-origin: bottom center;
  transform: translateX(-2px) rotate(-40deg);
  transition: transform 0.55s cubic-bezier(.3,1.2,.3,1);
}
.btn-radio[aria-pressed="true"] .btn-radio-arrow {
  transform: translateX(-2px) rotate(40deg);
}
```

**JS:**
```js
document.querySelectorAll('.btn-radio').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var pressed = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', pressed ? 'false' : 'true');
  });
});
```

### 25. Postage Stamp

**Type:** Pure CSS
**Description:** Regal blue stamp with scalloped perforated edges and a faded ink date. Pure SVG-mask perforation.

**HTML:**
```html
<button class="btn-stamp">
  <span class="btn-stamp-text">FIRST CLASS</span>
  <span class="btn-stamp-num">¢25</span>
</button>
```

**CSS:**
```css
.btn-stamp {
  position: relative;
  padding: 16px 22px;
  border: none;
  background: #1a3a78;
  color: #fdf6e9;
  font-family: ui-serif, Georgia, serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; gap: 4px;
  /* Scalloped perforated edges via radial mask */
  -webkit-mask:
    radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
    radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
    radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
    linear-gradient(#000, #000);
  -webkit-mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
  -webkit-mask-composite: source-over;
          mask:
    radial-gradient(circle 4px at 0 50%, transparent 99%, #000 100%) repeat-y left,
    radial-gradient(circle 4px at 100% 50%, transparent 99%, #000 100%) repeat-y right,
    radial-gradient(circle 4px at 50% 0, transparent 99%, #000 100%) repeat-x top,
    radial-gradient(circle 4px at 50% 100%, transparent 99%, #000 100%) repeat-x bottom,
    linear-gradient(#000, #000);
          mask-size: 8px 12px, 8px 12px, 12px 8px, 12px 8px, 100% 100%;
          mask-composite: add;
  box-shadow: 0 4px 12px rgba(26,58,120,0.4);
  transition: transform 0.2s ease;
}
.btn-stamp-num {
  font-size: 18px; color: #fcb938;
  letter-spacing: 0.08em;
}
.btn-stamp:hover { transform: rotate(-3deg) translateY(-2px); }
```

### 26. Cigar Band

**Type:** Pure CSS
**Description:** Gold filigree foil seal over a maroon ribbon; ornate Victorian club-lounge energy.

**HTML:**
```html
<button class="btn-cigar">
  <span class="btn-cigar-edge" aria-hidden="true"></span>
  <span class="btn-cigar-text">PRIVATE CLUB</span>
</button>
```

**CSS:**
```css
.btn-cigar {
  position: relative;
  padding: 14px 36px;
  border: 2px solid #d4a017;
  border-radius: 2px;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(212,160,23,0.1) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(212,160,23,0.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #6a2540 0%, #5a1d2c 60%, #3a0e1a 100%);
  color: #d4a017;
  font-family: ui-serif, Georgia, serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.28em;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 4px rgba(212,160,23,0.15),
    inset 0 1px 0 rgba(212,160,23,0.4),
    0 6px 16px rgba(58,14,26,0.4);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  transition: filter 0.18s, transform 0.2s;
}
.btn-cigar-edge {
  position: absolute; inset: 4px;
  border: 1px solid #d4a017;
  pointer-events: none;
}
.btn-cigar:hover { filter: brightness(1.1); transform: translateY(-1px); }
```

### 27. Calculator Key

**Type:** Pure CSS
**Description:** Beige concave keycap with olive-green accent label; click flips the press shadow flush.

**HTML:**
```html
<button class="btn-calc">
  <span class="btn-calc-cap">
    <span class="btn-calc-glyph">=</span>
    <span class="btn-calc-label">EQUAL</span>
  </span>
</button>
```

**CSS:**
```css
.btn-calc {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.btn-calc-cap {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 84px; height: 64px;
  background: linear-gradient(180deg, #ebe4d3 0%, #d8d2c0 60%, #c0b9a3 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 -6px 8px rgba(0,0,0,0.12),
    inset 0 2px 3px rgba(255,255,255,0.7),
    0 4px 0 #4d5435,
    0 6px 12px rgba(0,0,0,0.2);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-calc-glyph {
  font-family: ui-monospace, monospace;
  font-size: 22px; font-weight: 900;
  color: #4d5435;
}
.btn-calc-label {
  font-family: ui-monospace, monospace;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #4d5435;
  opacity: 0.8;
}
.btn-calc:active .btn-calc-cap {
  transform: translateY(3px);
  box-shadow:
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 2px 3px rgba(255,255,255,0.5),
    0 1px 0 #4d5435,
    0 2px 4px rgba(0,0,0,0.15);
}
```

### 28. Toolbox Latch

**Type:** CSS + JS
**Description:** Enamel teal lever with chrome bolt; the cursor spotlight illuminates the metal as you move across.

**HTML:**
```html
<button class="btn-latch">
  <span class="btn-latch-bolt" aria-hidden="true"></span>
  <span class="btn-latch-text">UNLOCK</span>
</button>
```

**CSS:**
```css
.btn-latch {
  position: relative;
  padding: 14px 32px 14px 50px;
  border: 2px solid #1a1a1a;
  border-radius: 6px;
  background:
    radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.18), transparent 70%),
    linear-gradient(180deg, #0e7a5c 0%, #0d6048 60%, #084030 100%);
  color: #e0f0ec;
  font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8,64,48,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  --mx: 50%; --my: 50%;
}
.btn-latch-bolt {
  position: absolute;
  left: 12px; top: 50%;
  width: 18px; height: 18px;
  margin-top: -9px;
  background: radial-gradient(circle at 35% 30%, #f5f5f5, #8a8a85 60%, #3a3a32 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #1a1a1a, 0 1px 2px rgba(0,0,0,0.4);
}
.btn-latch-bolt::before, .btn-latch-bolt::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #1a1a1a;
  transform: translate(-50%, -50%);
}
.btn-latch-bolt::after { transform: translate(-50%, -50%) rotate(90deg); }
```

**JS:**
```js
document.querySelectorAll('.btn-latch').forEach(function(btn) {
  btn.addEventListener('mousemove', function(e) {
    var rect = btn.getBoundingClientRect();
    btn.style.setProperty('--mx', (e.clientX - rect.left) + 'px');
    btn.style.setProperty('--my', (e.clientY - rect.top) + 'px');
  });
  btn.addEventListener('mouseleave', function() {
    btn.style.setProperty('--mx', '50%');
    btn.style.setProperty('--my', '50%');
  });
});
```

### 29. Receipt Paper

**Type:** CSS + JS
**Description:** Newsprint-cream receipt with a dashed perforation along the top, a tilted "PAID" rubber stamp watermark in the top-left corner, and a total that counts up on click before resetting.

**HTML:**
```html
<button class="btn-receipt">
  <span class="btn-receipt-perf" aria-hidden="true"></span>
  <span class="btn-receipt-stamp" aria-hidden="true">PAID</span>
  <span class="btn-receipt-row">
    <span class="btn-receipt-text">TOTAL</span>
    <span class="btn-receipt-amt" data-target="142">$0</span>
  </span>
</button>
```

**CSS:**
```css
.btn-receipt {
  position: relative;
  padding: 28px 26px 16px;
  border: none;
  background: #f4ecd8;
  color: #1a1a1a;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
  transition: transform 0.18s ease;
  overflow: hidden;
}
.btn-receipt-perf {
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background-image:
    radial-gradient(circle 3px at 50% 0, transparent 99%, #f4ecd8 100%);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: top;
  border-bottom: 1px dashed #8a7d5a;
  pointer-events: none;
}
.btn-receipt-stamp {
  position: absolute;
  top: 14px; left: 8px;
  font-family: ui-serif, Georgia, serif;
  font-size: 10px;
  color: #aa2a2a;
  border: 1.5px solid #aa2a2a;
  padding: 1px 5px;
  transform: rotate(-14deg);
  transform-origin: left center;
  letter-spacing: 0.14em;
  opacity: 0.55;
  pointer-events: none;
}
.btn-receipt-row {
  display: inline-flex; align-items: baseline; gap: 24px;
  padding-left: 38px;
}
.btn-receipt-text { color: #1a1a1a; }
.btn-receipt-amt {
  color: #aa2a2a; font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  min-width: 64px;
  display: inline-block;
}
.btn-receipt:hover { transform: translateY(-2px); }
```

**JS:**
```js
document.querySelectorAll('.btn-receipt').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var amt = btn.querySelector('.btn-receipt-amt');
    if (!amt || amt.dataset.animating === '1') return;
    amt.dataset.animating = '1';
    var target = parseInt(amt.dataset.target, 10) || 0;
    var start = 0;
    var startTime = null;
    var duration = 700;
    function step(ts) {
      if (!startTime) startTime = ts;
      var t = Math.min((ts - startTime) / duration, 1);
      var eased = 1 - Math.pow(1 - t, 3);
      var val = Math.round(start + (target - start) * eased);
      amt.textContent = '$' + val;
      if (t < 1) requestAnimationFrame(step);
      else { setTimeout(function() { amt.textContent = '$0'; amt.dataset.animating = ''; }, 1200); }
    }
    requestAnimationFrame(step);
  });
});
```

### 30. Punch Card

**Type:** CSS + JS
**Description:** Manila IBM-style punch card with the iconic clipped top-right corner, a stamped FORTRAN-style header at the top, and a real grid of column-and-row holes punched through the body. On hover the whole card follows the cursor magnetically.

**HTML:**
```html
<button class="btn-punch">
  <span class="btn-punch-header">RUN COMPILE 0030</span>
  <span class="btn-punch-grid" aria-hidden="true"></span>
  <span class="btn-punch-text">COMPILE</span>
</button>
```

**CSS:**
```css
.btn-punch {
  position: relative;
  padding: 28px 32px 18px;
  border: 1.5px solid #8a7d4a;
  background: #e3d4a8;
  color: #2a1d0e;
  font-family: ui-monospace, monospace;
  font-size: 14px; font-weight: 800;
  letter-spacing: 0.28em;
  cursor: pointer;
  /* Iconic clipped top-right corner */
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: 0 4px 12px rgba(58,36,16,0.3);
  transition: transform 0.25s cubic-bezier(.3,1,.5,1);
  text-align: center;
  display: block;
  --px: 0px; --py: 0px;
}
.btn-punch-header {
  position: absolute;
  top: 6px; left: 14px;
  font-family: ui-monospace, monospace;
  font-size: 8px; font-weight: 700;
  color: #5a4520;
  letter-spacing: 0.22em;
  border-bottom: 1px solid #8a7d4a;
  padding-bottom: 2px;
  width: calc(100% - 36px);
  text-align: left;
}
/* The hole grid: a single repeating background that draws columns of
   1.5×4 mm rectangular holes — the visual signature of an 80-column card.
   Two rows of perforations, evenly spaced, with ink-black holes. */
.btn-punch-grid {
  position: absolute;
  top: 22px; bottom: 4px;
  left: 8px; right: 8px;
  background-image:
    radial-gradient(2px 4px at 50% 50%, #1a1a1a 99%, transparent 100%),
    radial-gradient(2px 4px at 50% 50%, rgba(0,0,0,0.18) 99%, transparent 100%);
  background-size: 14px 22px, 14px 22px;
  background-position: 0 0, 0 11px;
  background-repeat: repeat-x, repeat-x;
  pointer-events: none;
  opacity: 0.85;
  -webkit-mask: linear-gradient(180deg,
    #000 0 30%, transparent 30% 60%, #000 60% 100%);
          mask: linear-gradient(180deg,
    #000 0 30%, transparent 30% 60%, #000 60% 100%);
}
.btn-punch-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #e3d4a8;
  padding: 2px 12px;
}
.btn-punch:hover { transform: translate(var(--px), var(--py)); }
```

**JS:**
```js
document.querySelectorAll('.btn-punch').forEach(function(btn) {
  btn.addEventListener('mousemove', function(e) {
    var rect = btn.getBoundingClientRect();
    var x = (e.clientX - rect.left - rect.width  / 2) * 0.18;
    var y = (e.clientY - rect.top  - rect.height / 2) * 0.18;
    btn.style.setProperty('--px', x + 'px');
    btn.style.setProperty('--py', y + 'px');
  });
  btn.addEventListener('mouseleave', function() {
    btn.style.setProperty('--px', '0px');
    btn.style.setProperty('--py', '0px');
  });
});
```

### 31. Periscope Lens

**Type:** Pure CSS
**Description:** Brass periscope rim around a glowing cyan lens with crosshair etching. Hover pulses the lens like a sub coming online.

**HTML:**
```html
<button class="btn-peri">
  <span class="btn-peri-rim" aria-hidden="true"></span>
  <span class="btn-peri-cross" aria-hidden="true"></span>
  <span class="btn-peri-text">SCAN</span>
</button>
```

**CSS:**
```css
.btn-peri {
  position: relative;
  width: 110px; height: 110px;
  border: none; border-radius: 50%;
  background:
    radial-gradient(circle at center,
      #0a1a2a 0%,
      #0a3a5a 35%,
      #00d4ff 75%,
      #6ef0ff 100%);
  color: #0a1a2a;
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  cursor: pointer;
  display: grid; place-items: center;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 24px rgba(0,212,255,0.3),
    0 6px 14px rgba(0,0,0,0.4);
}
.btn-peri-rim {
  position: absolute; inset: 12px;
  border: 1.5px solid rgba(0,212,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: btn-peri-pulse 2.4s ease-in-out infinite;
}
.btn-peri-cross {
  position: absolute; inset: 12px;
  pointer-events: none;
}
.btn-peri-cross::before, .btn-peri-cross::after {
  content: '';
  position: absolute;
  background: rgba(0,212,255,0.5);
}
.btn-peri-cross::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
}
.btn-peri-cross::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
}
.btn-peri-text {
  position: relative; z-index: 1;
  background: rgba(0,212,255,0.85);
  padding: 4px 8px;
  border-radius: 2px;
  color: #0a1a2a;
  text-shadow: 0 0 4px rgba(0,212,255,0.4);
}
@keyframes btn-peri-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-peri-rim { animation: none; }
}
.btn-peri:hover {
  box-shadow:
    inset 0 0 0 8px #b87333,
    inset 0 0 0 10px #6a3f15,
    0 0 36px rgba(0,212,255,0.55),
    0 6px 14px rgba(0,0,0,0.4);
}
```

---
## 27 CSS Card Hover Effects

URL: https://codefronts.com/motion/css-card-hover-effects/
Description: 27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.
Demo count: 27

### 01. Elastic Lift

**Type:** Pure CSS
**Description:** Card springs upward with a cubic-bezier overshoot, expands its shadow and highlights the border on hover.

**HTML:**
```html
<div class="card-01">
  <div class="card-01__glow"></div>
  <span class="card-01__tag">Design</span>
  <h4 class="card-01__title">Elastic Lift</h4>
  <p class="card-01__body">Springs up with an overshoot bounce.</p>
</div>
```

**CSS:**
```css
.card-01__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-01__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-01__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-01 {
  width: 100%;
  max-width: 280px;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  position: relative;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s;
}
.card-01:hover {
  transform: translateY(-12px);
  box-shadow:
    0 20px 40px rgba(124, 108, 255, 0.22),
    0 8px 16px rgba(0, 0, 0, 0.3);
  border-color: rgba(124, 108, 255, 0.4);
}
.card-01__glow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 120%, rgba(124, 108, 255, 0.2), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.card-01:hover .card-01__glow {
  opacity: 1;
}
```

### 02. Gradient Border Draw

**Type:** Pure CSS
**Description:** A conic-gradient rainbow border fades in around the card perimeter on hover via an inset pseudo-element.

**HTML:**
```html
<div class="card-02">
  <span class="card-02__tag">Frontend</span>
  <h4 class="card-02__title">Border Draw</h4>
  <p class="card-02__body">A gradient border traces itself on hover.</p>
</div>
```

**CSS:**
```css
.card-02__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-02__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-02__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-02 {
  width: 100%;
  max-width: 280px;
  position: relative;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  z-index: 0;
  transition: border-color 0.3s;
}
.card-02::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 15.5px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s;
}
.card-02::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: #17171f;
  z-index: -1;
}
.card-02:hover::before {
  opacity: 1;
}
.card-02:hover {
  border-color: transparent;
}
```

### 03. Stacked Reveal

**Type:** Pure CSS
**Description:** Two ghost cards fan out from beneath the front card on hover using rotate and translate transforms.

**HTML:**
```html
<div class="card-03">
  <div class="card-03__back card-03__back--2"></div>
  <div class="card-03__back card-03__back--1"></div>
  <div class="card-03__front">
    <span class="card-03__tag">CSS</span>
    <h4 class="card-03__title">Stacked Reveal</h4>
    <p class="card-03__body">Hidden cards fan out from beneath.</p>
  </div>
</div>
```

**CSS:**
```css
.card-03__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-03__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-03__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-03 {
  width: 100%;
  max-width: 280px;
  position: relative;
  cursor: pointer;
  min-height: 130px;
}
.card-03__back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-03__back--1 {
  background: rgba(124, 108, 255, 0.25);
  border: 1px solid rgba(124, 108, 255, 0.4);
}
.card-03__back--2 {
  background: rgba(255, 108, 138, 0.18);
  border: 1px solid rgba(255, 108, 138, 0.3);
}
.card-03__front {
  position: relative;
  z-index: 2;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-03:hover .card-03__back--1 {
  transform: translate(-14px, 10px) rotate(-5deg);
}
.card-03:hover .card-03__back--2 {
  transform: translate(14px, 12px) rotate(5deg);
}
.card-03:hover .card-03__front {
  transform: translateY(-4px);
}
```

### 04. Holographic Shimmer

**Type:** Pure CSS
**Description:** A rainbow gradient sweeps across the card on hover using translateX over a multi-colour iridescent base layer.

**HTML:**
```html
<div class="card-04">
  <div class="card-04__shine"></div>
  <span class="card-04__tag">Ultra Rare</span>
  <h4 class="card-04__title">Holographic</h4>
  <p class="card-04__body">Rainbow light sweeps the surface.</p>
  <div class="card-04__bar"></div>
</div>
```

**CSS:**
```css
.card-04__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-04__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-04__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-04 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.card-04::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.18), rgba(61, 232, 245, 0.12), rgba(255, 108, 138, 0.18), rgba(30, 217, 138, 0.12));
  opacity: 0.75;
}
.card-04__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.2) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform 0.65s ease;
}
.card-04:hover .card-04__shine {
  transform: translateX(100%);
}
.card-04__tag,
.card-04__title,
.card-04__body,
.card-04__bar {
  position: relative;
  z-index: 1;
}
.card-04__bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a, #3de8f5);
}
```

### 05. Curtain Reveal

**Type:** Pure CSS
**Description:** A solid gradient overlay slides upward like a stage curtain to reveal the card content underneath.

**HTML:**
```html
<div class="card-05">
  <div class="card-05__curtain"></div>
  <div class="card-05__content">
    <span class="card-05__tag">Motion</span>
    <h4 class="card-05__title">Curtain Reveal</h4>
    <p class="card-05__body">Content slides into view as overlay pulls away.</p>
    <span class="card-05__cta">Explore &rarr;</span>
  </div>
</div>
```

**CSS:**
```css
.card-05__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-05__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-05__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-05 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  min-height: 140px;
}
.card-05__curtain {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #7c6cff, #ff6c8a);
  transform: translateY(0);
  transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 1;
  border-radius: inherit;
}
.card-05:hover .card-05__curtain {
  transform: translateY(-105%);
}
.card-05__content {
  position: relative;
  z-index: 2;
}
.card-05__cta {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  color: #7c6cff;
  font-weight: 600;
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform 0.35s 0.18s ease,
    opacity 0.35s 0.18s ease;
}
.card-05:hover .card-05__cta {
  transform: translateY(0);
  opacity: 1;
}
```

### 06. Corner Peel

**Type:** Pure CSS
**Description:** The bottom-right corner peels away to reveal a gradient triangle, growing from 0 to 72px on hover.

**HTML:**
```html
<div class="card-06">
  <div class="card-06__peel"></div>
  <span class="card-06__tag">Effect</span>
  <h4 class="card-06__title">Corner Peel</h4>
  <p class="card-06__body">Bottom-right corner folds up on hover.</p>
</div>
```

**CSS:**
```css
.card-06__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-06__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-06__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-06 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.card-06:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.card-06__peel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  background: linear-gradient(225deg, #7c6cff 45%, rgba(124, 108, 255, 0.08) 45%);
  transition:
    width 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    height 0.38s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-06:hover .card-06__peel {
  width: 72px;
  height: 72px;
}
```

### 07. Neon Sign

**Type:** Pure CSS
**Description:** Border glows and title text pulses with layered neon box-shadows on hover, with a CSS flicker animation.

**HTML:**
```html
<div class="card-07">
  <span class="card-07__tag">Neon</span>
  <h4 class="card-07__title">Neon Sign</h4>
  <p class="card-07__body">Hover to see the glow flicker to life.</p>
  <div class="card-07__line"></div>
</div>
```

**CSS:**
```css
.card-07__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-07__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-07__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-07 {
  width: 100%;
  max-width: 280px;
  padding: 22px;
  border-radius: 14px;
  background: #07070e;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.card-07:hover {
  border-color: rgba(124, 108, 255, 0.6);
  box-shadow:
    0 0 28px rgba(124, 108, 255, 0.12),
    inset 0 0 28px rgba(124, 108, 255, 0.04);
}
.card-07__title {
  font-size: 22px;
  letter-spacing: 0.04em;
  transition:
    text-shadow 0.3s,
    color 0.3s;
}
.card-07:hover .card-07__title {
  color: #c0b4ff;
  text-shadow:
    0 0 6px #7c6cff,
    0 0 14px #7c6cff,
    0 0 30px rgba(124, 108, 255, 0.5);
  animation: card-07-flicker 1.2s ease-out forwards;
}
@keyframes card-07-flicker {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.82; }
  10% { opacity: 1; }
  60% { opacity: 0.9; }
  62% { opacity: 1; }
}
.card-07__line {
  margin-top: 14px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.15);
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.card-07:hover .card-07__line {
  background: #7c6cff;
  box-shadow: 0 0 8px #7c6cff;
}
```

### 08. Scanline

**Type:** Pure CSS
**Description:** CRT-style horizontal scanlines scroll over the card surface on hover using a repeating-linear-gradient animation.

**HTML:**
```html
<div class="card-08">
  <div class="card-08__scanlines"></div>
  <span class="card-08__tag">SYSTEM</span>
  <h4 class="card-08__title">Scanline</h4>
  <p class="card-08__body">CRT scanlines sweep the surface on hover.</p>
</div>
```

**CSS:**
```css
/* Demo 08 overrides shared __tag/__title/__body so the green CRT palette
   reads correctly against the black card background. Inlined here so a
   user pasting just the demo gets the full effect with no shared prelude. */
.card-08__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(30, 217, 138, 0.12);
  color: #1ed98a;
  border: 1px solid rgba(30, 217, 138, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-08__title {
  font-size: 17px;
  font-weight: 700;
  color: #1ed98a;
  margin-bottom: 6px;
}
.card-08__body {
  font-size: 13px;
  color: rgba(30, 217, 138, 0.65);
  line-height: 1.6;
}
.card-08 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #0a0a0a;
  border: 1px solid rgba(30, 217, 138, 0.2);
  cursor: pointer;
  font-family: monospace;
  color: #1ed98a;
  transition: box-shadow 0.3s;
}
.card-08:hover {
  box-shadow:
    0 0 24px rgba(30, 217, 138, 0.18),
    inset 0 0 24px rgba(30, 217, 138, 0.04);
}
.card-08__scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 3px,
    rgba(0, 0, 0, 0.22) 3px,
    rgba(0, 0, 0, 0.22) 4px
  );
  opacity: 0;
  transition: opacity 0.4s;
}
.card-08:hover .card-08__scanlines {
  opacity: 1;
  animation: card-08-scroll 4s linear infinite;
}
@keyframes card-08-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 0 40px; }
}
```

### 09. Depth Parallax

**Type:** CSS + JS
**Description:** Three layers — background, mid, and foreground — shift at different speeds as the cursor moves, creating a parallax depth illusion.

**HTML:**
```html
<div class="card-09">
  <div class="card-09__bg"></div>
  <div class="card-09__mid">
    <span class="card-09__tag">3D</span>
    <h4 class="card-09__title">Depth Parallax</h4>
  </div>
  <div class="card-09__fg">
    <p class="card-09__body">Layers shift at different speeds.</p>
  </div>
</div>
```

**CSS:**
```css
.card-09__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-09__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-09__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-09 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #0d0d1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: none;
  transform-style: preserve-3d;
  min-height: 130px;
}
.card-09__bg {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(124, 108, 255, 0.22), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(61, 232, 245, 0.14), transparent 50%);
  will-change: transform;
}
.card-09__mid,
.card-09__fg {
  position: relative;
  will-change: transform;
}
.card-09__mid {
  margin-bottom: 8px;
}
```

**JS:**
```js
document.querySelectorAll(".card-09").forEach(function (card) {
  var bg  = card.querySelector(".card-09__bg");
  var mid = card.querySelector(".card-09__mid");
  var fg  = card.querySelector(".card-09__fg");
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    var x = (e.clientX - r.left) / r.width  - 0.5;
    var y = (e.clientY - r.top)  / r.height - 0.5;
    bg.style.transform  = "translate(" + (x * -20) + "px," + (y * -20) + "px)";
    mid.style.transform = "translate(" + (x * -12) + "px," + (y * -12) + "px)";
    fg.style.transform  = "translate(" + (x * -6)  + "px," + (y * -6)  + "px)";
  });
  card.addEventListener("mouseleave", function () {
    bg.style.transform = mid.style.transform = fg.style.transform = "";
  });
});
```

### 10. Spotlight

**Type:** CSS + JS
**Description:** A soft radial glow follows the cursor around inside the card, illuminating wherever you look.

**HTML:**
```html
<div class="card-10">
  <div class="card-10__glow"></div>
  <span class="card-10__tag">Light</span>
  <h4 class="card-10__title">Spotlight</h4>
  <p class="card-10__body">Cursor glow follows your mouse inside the card.</p>
</div>
```

**CSS:**
```css
.card-10__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-10__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-10__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-10 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #111118;
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: none;
  transition: border-color 0.3s;
}
.card-10:hover {
  border-color: rgba(124, 108, 255, 0.4);
}
.card-10__glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.25) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  top: 50%;
  left: 50%;
}
.card-10:hover .card-10__glow {
  opacity: 1;
}
.card-10__tag,
.card-10__title,
.card-10__body {
  position: relative;
  z-index: 1;
}
```

**JS:**
```js
document.querySelectorAll(".card-10").forEach(function (card) {
  var glow = card.querySelector(".card-10__glow");
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    glow.style.left = (e.clientX - r.left) + "px";
    glow.style.top  = (e.clientY - r.top)  + "px";
  });
});
```

### 11. 3D Tilt

**Type:** CSS + JS
**Description:** Mouse position controls live rotateX/rotateY perspective transforms, with a radial shine that follows the cursor.

**HTML:**
```html
<div class="card-11">
  <div class="card-11__shine"></div>
  <div class="card-11__layer">
    <span class="card-11__tag">3D</span>
    <h4 class="card-11__title">3D Tilt</h4>
    <p class="card-11__body">Mouse position controls the tilt angle.</p>
  </div>
</div>
```

**CSS:**
```css
.card-11__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-11__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-11__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-11 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a1a28, #111118);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  cursor: none;
  transition: transform 0.08s ease;
}
.card-11__shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-11:hover .card-11__shine {
  opacity: 1;
}
.card-11__layer {
  transform: translateZ(22px);
}
```

**JS:**
```js
document.querySelectorAll(".card-11").forEach(function (card) {
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    var x = (e.clientX - r.left) / r.width  - 0.5;
    var y = (e.clientY - r.top)  / r.height - 0.5;
    card.style.transform =
      "perspective(700px) rotateX(" + (-y * 14) + "deg) rotateY(" + (x * 14) + "deg)";
  });
  card.addEventListener("mouseleave", function () {
    card.style.transform = "";
  });
});
```

### 12. Slide Up Content

**Type:** Pure CSS
**Description:** Extra description and a CTA animate into view from below the title on hover using max-height and translateY.

**HTML:**
```html
<div class="card-12">
  <div class="card-12__image"><span class="card-12__icon">🎨</span></div>
  <div class="card-12__body">
    <h4 class="card-12__title">Slide Up</h4>
    <div class="card-12__hidden">
      Extra details slide up on hover.
      <span class="card-12__cta">Read more &rarr;</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
/* Demo 12 has its own typography scale — don't include the shared rules. */
.card-12 {
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    box-shadow 0.35s,
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-12:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.42);
}
.card-12__image {
  height: 90px;
  background: linear-gradient(135deg, #1a1a2e, #0d0d2b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-12:hover .card-12__image {
  transform: scale(1.05);
}
.card-12__body {
  padding: 16px 18px;
}
.card-12__title {
  font-size: 14px;
  font-weight: 600;
  color: #f0eeff;
  margin-bottom: 4px;
}
.card-12__hidden {
  font-size: 12px;
  color: #b8b6d4;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-12:hover .card-12__hidden {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
}
.card-12__cta {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #7c6cff;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.3s 0.12s,
    transform 0.3s 0.12s;
}
.card-12:hover .card-12__cta {
  opacity: 1;
  transform: translateY(0);
}
```

### 13. Flip Card

**Type:** Pure CSS
**Description:** Pure CSS 3D card flip on hover using transform-style: preserve-3d and backface-visibility: hidden on both faces.

**HTML:**
```html
<div class="card-13">
  <div class="card-13__inner">
    <div class="card-13__front">
      <span class="card-13__tag">Hover</span>
      <h4 class="card-13__title">Flip Card</h4>
      <p class="card-13__body">Hover to flip over.</p>
    </div>
    <div class="card-13__back">
      <h4 class="card-13__back-title">The Back</h4>
      <p class="card-13__back-body">Revealed with CSS 3D perspective.</p>
      <span class="card-13__back-cta">Explore &rarr;</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-13__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-13__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-13__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-13 {
  /* The face elements (__front, __back) are absolutely positioned and
     give the parent zero intrinsic width. Use a fixed 280px width so
     the card has a predictable size in any flex container (stage,
     playground iframe). Same pattern as card-26. */
  width: 280px;
  max-width: 100%;
  height: 155px;
  perspective: 800px;
  cursor: pointer;
}
.card-13__inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-13:hover .card-13__inner {
  transform: rotateY(180deg);
}
.card-13__front,
.card-13__back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 22px;
  backface-visibility: hidden;
}
.card-13__front {
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.card-13__back {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-13__back-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.card-13__back-body {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.card-13__back-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
```

### 14. Glitch Card

**Type:** Pure CSS
**Description:** Two colour-shifted clones with clip-path flicker on hover in opposite directions, simulating a digital signal glitch.

**HTML:**
```html
<div class="card-14">
  <span class="card-14__tag">Glitch</span>
  <h4 class="card-14__title">Glitch Card</h4>
  <p class="card-14__body">RGB channel split flickers on hover.</p>
</div>
```

**CSS:**
```css
.card-14__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-14__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-14__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-14 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.2s;
}
.card-14:hover {
  border-color: rgba(255, 108, 138, 0.35);
}
.card-14::before,
.card-14::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
}
.card-14::before {
  background: rgba(255, 108, 138, 0.07);
  clip-path: polygon(0 18%, 100% 18%, 100% 45%, 0 45%);
}
.card-14::after {
  background: rgba(61, 232, 245, 0.07);
  clip-path: polygon(0 55%, 100% 55%, 100% 82%, 0 82%);
}
.card-14:hover::before,
.card-14:hover::after {
  opacity: 1;
}
.card-14:hover::before {
  animation: card-14-glitch-a 0.4s step-end infinite;
}
.card-14:hover::after {
  animation: card-14-glitch-b 0.4s step-end infinite 0.1s;
}
@keyframes card-14-glitch-a {
  0%, 100% { transform: translate(-4px, 0); }
  33% { transform: translate(-6px, 2px); }
  66% { transform: translate(-2px, -2px); }
}
@keyframes card-14-glitch-b {
  0%, 100% { transform: translate(4px, 0); }
  33% { transform: translate(6px, -2px); }
  66% { transform: translate(2px, 2px); }
}
```

### 15. Gradient Rotate

**Type:** Pure CSS
**Description:** The card border becomes a conic-gradient that hue-rotates continuously on hover, cycling the full spectrum.

**HTML:**
```html
<div class="card-15">
  <div class="card-15__inner">
    <span class="card-15__tag">Color</span>
    <h4 class="card-15__title">Gradient Rotate</h4>
    <p class="card-15__body">Border hue-rotates continuously on hover.</p>
  </div>
</div>
```

**CSS:**
```css
.card-15__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-15__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-15__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-15 {
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  padding: 2px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.3s;
}
.card-15:hover {
  background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff 360deg);
  animation: card-15-spin 4s linear infinite;
}
@keyframes card-15-spin {
  to { filter: hue-rotate(360deg); }
}
.card-15__inner {
  border-radius: 12px;
  padding: 22px;
  background: #17171f;
}
```

### 16. Border Morph

**Type:** Pure CSS
**Description:** The card border-radius morphs to an organic blob shape and scales up on hover with a spring cubic-bezier.

**HTML:**
```html
<div class="card-16">
  <span class="card-16__tag">Morph</span>
  <h4 class="card-16__title">Border Morph</h4>
  <p class="card-16__body">Corners morph to an organic blob shape.</p>
</div>
```

**CSS:**
```css
.card-16__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-16__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-16__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-16 {
  width: 100%;
  max-width: 280px;
  padding: 22px;
  border-radius: 14px;
  border: 2px solid rgba(124, 108, 255, 0.3);
  background: rgba(124, 108, 255, 0.05);
  cursor: pointer;
  transition:
    border-radius 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s,
    background 0.3s,
    transform 0.35s,
    box-shadow 0.35s;
}
.card-16:hover {
  border-radius: 48% 52% 68% 32% / 42% 38% 62% 58%;
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.12);
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(124, 108, 255, 0.22);
}
```

### 17. Magnetic Float

**Type:** Pure CSS
**Description:** Three orbit dots scatter to different positions on hover with spring easing, while the card floats upward.

**HTML:**
```html
<div class="card-17">
  <div class="card-17__dot card-17__dot--a"></div>
  <div class="card-17__dot card-17__dot--b"></div>
  <div class="card-17__dot card-17__dot--c"></div>
  <span class="card-17__tag">Float</span>
  <h4 class="card-17__title">Magnetic Float</h4>
  <p class="card-17__body">Orbit dots scatter on hover with spring easing.</p>
</div>
```

**CSS:**
```css
.card-17__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-17__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-17__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-17 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: visible;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.42s;
}
.card-17:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
}
.card-17__dot {
  position: absolute;
  border-radius: 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-17__dot--a {
  width: 11px;
  height: 11px;
  background: #7c6cff;
  top: 18px;
  right: 18px;
}
.card-17__dot--b {
  width: 8px;
  height: 8px;
  background: #ff6c8a;
  bottom: 22px;
  left: 22px;
}
.card-17__dot--c {
  width: 6px;
  height: 6px;
  background: #1ed98a;
  top: 50%;
  right: 14px;
}
.card-17:hover .card-17__dot--a {
  transform: translate(10px, -12px) scale(1.5);
}
.card-17:hover .card-17__dot--b {
  transform: translate(-10px, 10px) scale(1.4);
}
.card-17:hover .card-17__dot--c {
  transform: translate(8px, 0) scale(1.6);
}
```

### 18. Typewriter Reveal

**Type:** Pure CSS
**Description:** A hidden line types in from zero width using max-width transition, with a blinking terminal cursor via CSS animation.

**HTML:**
```html
<div class="card-18">
  <span class="card-18__tag">Terminal</span>
  <h4 class="card-18__title">Typewriter</h4>
  <div style="margin-top: 10px;">
    <span class="card-18__hidden">$ npm run deploy --prod</span>
    <span class="card-18__cursor"></span>
  </div>
</div>
```

**CSS:**
```css
/* Demo 18 paints in green CRT/terminal palette so it overrides the
   shared __tag/__title rules with its own. */
.card-18__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(30, 217, 138, 0.12);
  color: #1ed98a;
  border: 1px solid rgba(30, 217, 138, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-18__title {
  font-size: 17px;
  font-weight: 700;
  color: #1ed98a;
  margin-bottom: 6px;
}
.card-18 {
  width: 100%;
  max-width: 280px;
  padding: 22px;
  border-radius: 14px;
  background: #07070e;
  border: 1px solid rgba(30, 217, 138, 0.2);
  font-family: monospace;
  cursor: pointer;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.card-18:hover {
  border-color: rgba(30, 217, 138, 0.5);
  box-shadow: 0 0 24px rgba(30, 217, 138, 0.1);
}
.card-18__hidden {
  font-size: 12px;
  color: #1ed98a;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 0.75s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.25s;
}
.card-18:hover .card-18__hidden {
  max-width: 400px;
  opacity: 1;
}
.card-18__cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #1ed98a;
  margin-top: 5px;
  opacity: 0;
}
.card-18:hover .card-18__cursor {
  opacity: 1;
  animation: card-18-blink 0.7s step-end infinite;
}
@keyframes card-18-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
```

### 19. Overlay Slide

**Type:** Pure CSS
**Description:** A full gradient overlay slides in from the left on hover, revealing a CTA that fades in with a stagger delay.

**HTML:**
```html
<div class="card-19">
  <div class="card-19__overlay">
    <span class="card-19__cta">View Project &rarr;</span>
  </div>
  <div class="card-19__content">
    <span class="card-19__icon">🚀</span>
    <span class="card-19__tag">Project</span>
    <h4 class="card-19__title">Overlay Slide</h4>
    <p class="card-19__body">Full overlay slides in from the left.</p>
  </div>
</div>
```

**CSS:**
```css
.card-19__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-19__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-19__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-19 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  min-height: 130px;
}
.card-19__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124, 108, 255, 0.94), rgba(255, 108, 138, 0.9));
  transform: translateX(-101%);
  transition: transform 0.42s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: inherit;
}
.card-19:hover .card-19__overlay {
  transform: translateX(0);
}
.card-19__cta {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transform: translateX(-18px);
  opacity: 0;
  transition:
    transform 0.35s 0.16s ease,
    opacity 0.35s 0.16s ease;
}
.card-19:hover .card-19__cta {
  transform: translateX(0);
  opacity: 1;
}
.card-19__content {
  position: relative;
  z-index: 1;
}
.card-19__icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: #7c6cff;
  display: block;
}
```

### 20. Grain Texture

**Type:** Pure CSS
**Description:** An SVG noise layer animates in with mix-blend-mode: overlay on hover, giving the card an organic film grain texture.

**HTML:**
```html
<div class="card-20">
  <div class="card-20__noise"></div>
  <span class="card-20__tag">Texture</span>
  <h4 class="card-20__title">Grain Texture</h4>
  <p class="card-20__body">Film grain animates over the surface on hover.</p>
</div>
```

**CSS:**
```css
.card-20__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-20__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-20__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-20 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1a1228, #0d0d1a);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    box-shadow 0.35s,
    transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-20:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}
.card-20__noise {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 0.4s;
  animation: card-20-grain 6s steps(1) infinite paused;
}
.card-20:hover .card-20__noise {
  opacity: 0.45;
  animation-play-state: running;
}
@keyframes card-20-grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -4%); }
  20% { transform: translate(2%, 3%); }
  30% { transform: translate(-4%, 2%); }
  40% { transform: translate(3%, -3%); }
  50% { transform: translate(-2%, 4%); }
  60% { transform: translate(4%, -2%); }
  70% { transform: translate(-3%, 3%); }
  80% { transform: translate(2%, -4%); }
  90% { transform: translate(-4%, -2%); }
  100% { transform: translate(0, 0); }
}
.card-20__tag,
.card-20__title,
.card-20__body {
  position: relative;
  z-index: 1;
}
```

### 21. Frosted Glass Intensify

**Type:** Pure CSS
**Description:** Backdrop-filter blur and saturation ramp up from 0 to 14px on hover, intensifying a frosted glass effect over coloured orbs.

**HTML:**
```html
<div class="card-21">
  <div class="card-21__bg"></div>
  <div class="card-21__frost"></div>
  <div class="card-21__content">
    <span class="card-21__tag">Glass</span>
    <h4 class="card-21__title">Frosted Glass</h4>
    <p class="card-21__body">Backdrop blur intensifies on hover.</p>
  </div>
</div>
```

**CSS:**
```css
.card-21__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-21__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-21__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-21 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  min-height: 130px;
  transition:
    border-color 0.4s,
    box-shadow 0.4s;
}
.card-21:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.card-21__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(135deg, #1a0533, #0a1535, #0d2b1a);
}
.card-21__bg::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background: rgba(124, 108, 255, 0.55);
  top: -20px;
  right: -20px;
  filter: blur(40px);
}
.card-21__bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: rgba(61, 232, 245, 0.4);
  bottom: -10px;
  left: 0;
  filter: blur(40px);
}
.card-21__frost {
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    backdrop-filter 0.5s ease,
    -webkit-backdrop-filter 0.5s ease;
}
.card-21:hover .card-21__frost {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
}
.card-21__content {
  position: relative;
  z-index: 2;
}
```

### 22. Blueprint Reveal

**Type:** Pure CSS
**Description:** Engineering blueprint aesthetic: a dot grid and corner crosshair marks fade in on hover, with title and body shifting to cyan.

**HTML:**
```html
<div class="card-22">
  <div class="card-22__grid"></div>
  <div class="card-22__marks">
    <div class="card-22__mark card-22__mark--tl"></div>
    <div class="card-22__mark card-22__mark--tr"></div>
    <div class="card-22__mark card-22__mark--bl"></div>
    <div class="card-22__mark card-22__mark--br"></div>
  </div>
  <div class="card-22__content">
    <span class="card-22__label">// BLUEPRINT</span>
    <h4 class="card-22__title">Blueprint</h4>
    <p class="card-22__body">Grid lines and corner marks appear on hover.</p>
  </div>
</div>
```

**CSS:**
```css
/* Demo 22 has its own title/body color transitions, so it owns those rules. */
.card-22 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    background 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.card-22:hover {
  background: #041428;
  border-color: rgba(61, 232, 245, 0.5);
  box-shadow:
    0 0 32px rgba(61, 232, 245, 0.1),
    inset 0 0 32px rgba(61, 232, 245, 0.04);
}
.card-22__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(61, 232, 245, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 232, 245, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0;
  transition: opacity 0.4s;
}
.card-22:hover .card-22__grid {
  opacity: 1;
}
.card-22__marks {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card-22__mark {
  position: absolute;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.3s 0.15s;
}
.card-22__mark::before,
.card-22__mark::after {
  content: "";
  position: absolute;
  background: rgba(61, 232, 245, 0.7);
}
.card-22__mark::before {
  width: 1px;
  height: 100%;
  left: 50%;
}
.card-22__mark::after {
  width: 100%;
  height: 1px;
  top: 50%;
}
.card-22__mark--tl { top: 10px; left: 10px; }
.card-22__mark--tr { top: 10px; right: 10px; }
.card-22__mark--bl { bottom: 10px; left: 10px; }
.card-22__mark--br { bottom: 10px; right: 10px; }
.card-22:hover .card-22__mark {
  opacity: 1;
}
.card-22__content {
  position: relative;
  z-index: 2;
}
.card-22__label {
  font-family: monospace;
  font-size: 10px;
  color: rgba(61, 232, 245, 0.5);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 0.3s 0.1s;
}
.card-22:hover .card-22__label {
  opacity: 1;
}
.card-22__title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
  transition: color 0.35s;
}
.card-22__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
  transition: color 0.35s;
}
.card-22:hover .card-22__title {
  color: #3de8f5;
}
.card-22:hover .card-22__body {
  color: rgba(61, 232, 245, 0.6);
}
```

### 23. Shockwave

**Type:** Pure CSS
**Description:** Two concentric ring pulses expand outward from the card border on hover, like a shockwave ripple effect.

**HTML:**
```html
<div class="card-23">
  <span class="card-23__tag">Pulse</span>
  <h4 class="card-23__title">Shockwave</h4>
  <p class="card-23__body">Two ripple rings expand outward on hover.</p>
</div>
```

**CSS:**
```css
.card-23__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-23__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-23__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-23 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: visible;
  padding: 22px;
  border-radius: 14px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.card-23:hover {
  border-color: rgba(124, 108, 255, 0.5);
  transform: scale(1.02);
}
.card-23::before,
.card-23::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  border: 2px solid rgba(124, 108, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.card-23:hover::before {
  animation: card-23-a 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
.card-23:hover::after {
  animation: card-23-b 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) 0.18s forwards;
}
@keyframes card-23-a {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes card-23-b {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.32); opacity: 0; }
}
```

### 24. Color Burn

**Type:** Pure CSS
**Description:** A radial gradient bloom erupts from the bottom-left corner and expands to fill the entire card on hover.

**HTML:**
```html
<div class="card-24">
  <div class="card-24__burn"></div>
  <span class="card-24__tag">Burn</span>
  <h4 class="card-24__title">Color Burn</h4>
  <p class="card-24__body">Gradient bloom erupts from the corner.</p>
</div>
```

**CSS:**
```css
.card-24__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-24__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-24__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-24 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #0a0a0f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: border-color 0.4s;
}
.card-24:hover {
  border-color: rgba(255, 108, 138, 0.4);
}
.card-24__burn {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 108, 138, 0.9) 0%,
    rgba(124, 108, 255, 0.65) 40%,
    transparent 70%
  );
  transform: scale(0);
  transform-origin: center;
  pointer-events: none;
  filter: blur(2px);
  transition:
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),
    border-radius 0.55s ease;
}
.card-24:hover .card-24__burn {
  transform: scale(5.5);
  border-radius: 40%;
}
.card-24__tag,
.card-24__title,
.card-24__body {
  position: relative;
  z-index: 1;
}
```

### 25. Prismatic Sweep

**Type:** Pure CSS
**Description:** Three skewed colour beams sweep across the card in a staggered sequence, like light through a prism.

**HTML:**
```html
<div class="card-25">
  <div class="card-25__prism card-25__prism--a"></div>
  <div class="card-25__prism card-25__prism--b"></div>
  <div class="card-25__prism card-25__prism--c"></div>
  <div class="card-25__content">
    <span class="card-25__tag">Prism</span>
    <h4 class="card-25__title">Prismatic Sweep</h4>
    <p class="card-25__body">Three colour beams sweep across in sequence.</p>
  </div>
</div>
```

**CSS:**
```css
.card-25__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-25__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-25__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-25 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 14px;
  background: #111118;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: border-color 0.3s;
}
.card-25:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.card-25__prism {
  position: absolute;
  inset: -20%;
  width: 30%;
  transform: skewX(-18deg) translateX(-180%);
  transition: transform 0.52s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0.18;
}
.card-25__prism--a {
  background: #7c6cff;
  left: 10%;
  transition-delay: 0s;
}
.card-25__prism--b {
  background: #ff6c8a;
  left: 30%;
  transition-delay: 0.08s;
}
.card-25__prism--c {
  background: #3de8f5;
  left: 50%;
  transition-delay: 0.16s;
}
.card-25:hover .card-25__prism {
  transform: skewX(-18deg) translateX(700%);
}
.card-25__content {
  position: relative;
  z-index: 1;
}
```

### 26. Book Open

**Type:** Pure CSS
**Description:** The card cover folds open like a book page using perspective rotateY, revealing hidden content on the reverse page.

**HTML:**
```html
<div class="card-26">
  <div class="card-26__page">
    <p class="card-26__page-text">Hidden content revealed as you open the book.</p>
    <span class="card-26__page-cta">Read now &rarr;</span>
  </div>
  <div class="card-26__cover">
    <span class="card-26__tag">Preview</span>
    <h4 class="card-26__title">Book Open</h4>
    <p class="card-26__body">Cover folds open like a book page.</p>
  </div>
</div>
```

**CSS:**
```css
.card-26__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-26__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-26__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-26 {
  /* Both children (__page, __cover) are absolutely positioned so they
     don't contribute to the parent's intrinsic width. Use a fixed
     280px width here instead of 100%/max-width so the card has a
     predictable size in any flex container (stage, playground iframe). */
  width: 280px;
  max-width: 100%;
  height: 160px;
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}
.card-26__page {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 22px;
  background: linear-gradient(135deg, #1a1228, #111118);
  border: 1px solid rgba(124, 108, 255, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.card-26__page-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}
.card-26__page-cta {
  font-size: 12px;
  color: #7c6cff;
  font-weight: 600;
}
.card-26__cover {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 22px;
  background: #17171f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition:
    transform 0.62s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.62s;
  z-index: 2;
  box-shadow: inset -6px 0 18px rgba(0, 0, 0, 0.3);
}
.card-26:hover .card-26__cover {
  transform: perspective(900px) rotateY(-62deg);
  box-shadow:
    inset -6px 0 18px rgba(0, 0, 0, 0.55),
    6px 0 22px rgba(0, 0, 0, 0.45);
}
```

### 27. Aurora

**Type:** CSS + JS
**Description:** Two blurred light orbs track cursor position independently, creating a living aurora borealis inside the card.

**HTML:**
```html
<div class="card-27">
  <div class="card-27__aurora"></div>
  <div class="card-27__content">
    <span class="card-27__tag">Aurora</span>
    <h4 class="card-27__title">Aurora</h4>
    <p class="card-27__body">Two light orbs follow your cursor through the card.</p>
  </div>
</div>
```

**CSS:**
```css
.card-27__tag {
  font-family: monospace;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.15);
  color: #7c6cff;
  border: 1px solid rgba(124, 108, 255, 0.3);
  display: inline-block;
  margin-bottom: 10px;
}
.card-27__title {
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 6px;
}
.card-27__body {
  font-size: 13px;
  color: #b8b6d4;
  line-height: 1.6;
}
.card-27 {
  width: 100%;
  max-width: 280px;
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 16px;
  background: #050510;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: none;
  min-height: 130px;
  transition: border-color 0.4s;
}
.card-27:hover {
  border-color: rgba(124, 108, 255, 0.4);
}
.card-27__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.card-27__aurora::before,
.card-27__aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  transition:
    left 0.65s ease,
    top 0.65s ease,
    opacity 0.4s;
  opacity: 0;
}
.card-27__aurora::before {
  width: 160px;
  height: 160px;
  background: rgba(124, 108, 255, 0.55);
  left: var(--ax, 20%);
  top: var(--ay, 30%);
  transform: translate(-50%, -50%);
}
.card-27__aurora::after {
  width: 130px;
  height: 130px;
  background: rgba(30, 217, 138, 0.4);
  left: var(--bx, 70%);
  top: var(--by, 60%);
  transform: translate(-50%, -50%);
}
.card-27:hover .card-27__aurora::before,
.card-27:hover .card-27__aurora::after {
  opacity: 1;
}
.card-27__content {
  position: relative;
  z-index: 1;
}
```

**JS:**
```js
document.querySelectorAll(".card-27").forEach(function (card) {
  var aurora = card.querySelector(".card-27__aurora");
  card.addEventListener("mousemove", function (e) {
    var r = card.getBoundingClientRect();
    var x = ((e.clientX - r.left) / r.width)  * 100;
    var y = ((e.clientY - r.top)  / r.height) * 100;
    aurora.style.setProperty("--ax", x + "%");
    aurora.style.setProperty("--ay", y + "%");
    aurora.style.setProperty("--bx", (100 - x) + "%");
    aurora.style.setProperty("--by", (100 - y) + "%");
  });
});
```

---
## 20 CSS Cards with Animations

URL: https://codefronts.com/components/css-cards/
Description: 20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
Demo count: 20

### 01. Glassmorphism Card

**Type:** Pure CSS
**Description:** Frosted glass effect using backdrop-filter blur with radial gradient background orbs and subtle white border.

**HTML:**
```html
<div class="stage-1">
  <div class="card-glass">
    <h4>Glassmorphism</h4>
    <p>Frosted glass with backdrop blur and layered gradient glows.</p>
    <button class="glass-btn">Learn more</button>
  </div>
</div>
```

**CSS:**
```css
.card-glass {
  width: 200px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.card-glass:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.card-glass h4 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.card-glass p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin-bottom: 14px;
}

.glass-btn {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s;
}

.card-glass:hover .glass-btn {
  background: rgba(255, 255, 255, 0.32);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-1 {
  background: linear-gradient(135deg, #1a0533 0%, #0a1a3a 50%, #0d2b1a 100%);
  overflow: hidden;
}

.stage-1::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(124, 108, 255, 0.4);
  top: -30px;
  right: -20px;
  filter: blur(40px);
}

.stage-1::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(61, 232, 245, 0.35);
  bottom: -10px;
  left: 10px;
  filter: blur(30px);
}
```

### 02. Neon Gradient Border Card

**Type:** Pure CSS
**Description:** Rainbow gradient border that fades in on hover using a background pseudo-element positioned behind the card with z-index -1.

**HTML:**
```html
<div class="stage-2">
  <div class="card-neon">
    <div class="neon-icon">⚡</div>
    <h4>Neon Border</h4>
    <p>Gradient border reveals on hover using pseudo-element z-index trick.</p>
  </div>
</div>
```

**CSS:**
```css
.card-neon {
  width: 200px;
  padding: 22px;
  border-radius: 12px;
  background: #111118;
  border: 1px solid transparent;
  position: relative;
  transition: transform 0.3s;
}

.card-neon::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a, #3de8f5);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-neon:hover::before {
  opacity: 1;
}

.card-neon:hover {
  transform: translateY(-3px);
}

.card-neon:hover .neon-icon {
  box-shadow: 0 0 20px rgba(124, 108, 255, 0.8);
}

.neon-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(124, 108, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
  transition: box-shadow 0.3s;
}

.card-neon h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-neon p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-2 {
  background: #07070f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 03. 3D Flip Card

**Type:** Pure CSS
**Description:** Pure CSS 3D flip using transform-style: preserve-3d and rotateY with backface-visibility: hidden on both faces.

**HTML:**
```html
<div class="stage-3">
  <div class="flip-scene">
    <div class="flip-card">
      <div class="flip-front">
        <h4>Hover to Flip</h4>
        <p style="font-size: 10px; color: var(--ccg-muted)">3D card flip effect →</p>
      </div>
      <div class="flip-back">
        <h4>The Back Side</h4>
        <p>Revealed with CSS 3D perspective</p>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.flip-scene {
  width: 190px;
  height: 120px;
  perspective: 700px;
  cursor: pointer;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.flip-scene:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.flip-front {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 1px solid rgba(124, 108, 255, 0.3);
}

.flip-front h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.flip-front p {
  font-size: 10px;
  color: var(--ccg-muted);
}

.flip-back {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  transform: rotateY(180deg);
}

.flip-back h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
}

.flip-back p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-3 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 04. Animated Gradient Border Card

**Type:** Pure CSS
**Description:** Continuously rotating conic-gradient border using a pseudo-element with rotate keyframes. No JavaScript needed.

**HTML:**
```html
<div class="stage-4">
  <div class="card-grad-border">
    <h4>Spinning Gradient</h4>
    <p>Conic-gradient border spins continuously using CSS animation.</p>
    <span class="grad-tag">Live animation</span>
  </div>
</div>
```

**CSS:**
```css
.card-grad-border {
  width: 200px;
  padding: 20px;
  border-radius: 14px;
  background: #111118;
  position: relative;
}

.card-grad-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: conic-gradient(#7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  z-index: -1;
  animation: ccg-grad-spin 3s linear infinite;
}

.card-grad-border h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.card-grad-border p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.grad-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(124, 108, 255, 0.2);
  color: var(--ccg-accent);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-4 {
  background: #090912;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-grad-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-grad-border,
  .card-grad-border * {
    animation: none !important;
  }
}

```

### 05. 3D Mouse Tilt Card

**Type:** CSS + JS
**Description:** Tracks cursor position and applies rotateX/rotateY perspective transforms in real-time, with a dynamic radial shine that follows the mouse.

**HTML:**
```html
<div class="stage-5">
  <div class="card-tilt" id="tiltCard">
    <div class="tilt-shine"></div>
    <div class="tilt-layer">
      <h4>3D Tilt Card</h4>
      <p>Move your mouse over me to see the 3D tilt effect.</p>
      <span class="tilt-badge">Mouse-tracked</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-tilt {
  width: 195px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, #1a1a28 0%, #111118 100%);
  border: 1px solid var(--ccg-border2);
  transform-style: preserve-3d;
  transition: transform 0.1s;
  cursor: none;
  position: relative;
}

.tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.card-tilt:hover .tilt-shine {
  opacity: 1;
}

.tilt-layer {
  transform: translateZ(20px);
}

.card-tilt h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-tilt p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

.tilt-badge {
  margin-top: 10px;
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(61, 232, 245, 0.15);
  color: var(--ccg-cyan);
  border: 1px solid rgba(61, 232, 245, 0.3);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-5 {
  background: #0c0c14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

**JS:**
```js
const card = document.getElementById("tiltCard");
card.addEventListener("mousemove", (e) => {
  const { left, top, width, height } = card.getBoundingClientRect();
  const x = (e.clientX - left) / width - 0.5;
  const y = (e.clientY - top) / height - 0.5;
  card.style.transform = `perspective(700px) rotateX(${-y * 18}deg) rotateY(${x * 18}deg)`;
});
card.addEventListener("mouseleave", () => {
  card.style.transform = "perspective(700px) rotateX(0) rotateY(0)";
});
```

### 06. Cursor Spotlight Card

**Type:** CSS + JS
**Description:** A soft radial glow follows the cursor position inside the card, illuminating where you look. Border subtly highlights on hover.

**HTML:**
```html
<div class="stage-6">
  <div class="card-spotlight" id="spotCard">
    <div class="spotlight-glow" id="spotGlow"></div>
    <div class="spot-content">
      <div class="spot-avatar">V</div>
      <h4>Spotlight Card</h4>
      <p>Cursor light follows your mouse around the card surface.</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-spotlight {
  width: 200px;
  padding: 20px;
  border-radius: 14px;
  background: #111118;
  border: 1px solid var(--ccg-border);
  position: relative;
  overflow: hidden;
  cursor: none;
}

.spotlight-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 108, 255, 0.22) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: opacity 0.3s;
  opacity: 0;
}

.card-spotlight:hover .spotlight-glow {
  opacity: 1;
}

.card-spotlight:hover {
  border-color: rgba(124, 108, 255, 0.4);
}

.spot-content {
  position: relative;
  z-index: 1;
}

.card-spotlight h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.card-spotlight p {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
}

.spot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-6 {
  background: #09090e;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

**JS:**
```js
const card = document.getElementById("spotCard");
const glow = document.getElementById("spotGlow");
card.addEventListener("mousemove", (e) => {
  const r = card.getBoundingClientRect();
  glow.style.left = e.clientX - r.left + "px";
  glow.style.top = e.clientY - r.top + "px";
});
```

### 07. Stacked Paper Card

**Type:** Pure CSS
**Description:** Two pseudo-elements behind the card rotate and offset on hover to create a fanned paper stack effect. Works beautifully on light backgrounds.

**HTML:**
```html
<div class="stage-7">
  <div class="card-stack">
    <div class="stack-main">
      <h4>Stacked Paper</h4>
      <p>Pseudo-elements create layered paper cards that fan out on hover.</p>
      <button class="stack-btn">Open →</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-stack {
  position: relative;
  width: 200px;
}

.card-stack::before,
.card-stack::after {
  content: "";
  position: absolute;
  border-radius: 12px;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-stack::before {
  background: #d6c9ff;
  width: 100%;
  height: 100%;
  top: 8px;
  left: 6px;
  z-index: 0;
}

.card-stack::after {
  background: #ffc8d6;
  width: 100%;
  height: 100%;
  top: 4px;
  left: 3px;
  z-index: 0;
}

.card-stack:hover::before {
  transform: translate(4px, 6px) rotate(3deg);
}

.card-stack:hover::after {
  transform: translate(-3px, 4px) rotate(-2deg);
}

.stack-main {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.stack-main h4 {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.stack-main p {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
  margin-bottom: 12px;
}

.stack-btn {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 6px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-7 {
  background: #f5f3ee;
}
```

### 08. Holographic Shimmer Card

**Type:** Pure CSS
**Description:** A white light sweeps across the card on hover using translateX animation, over a multi-color gradient background for a trading-card holographic look.

**HTML:**
```html
<div class="stage-8">
  <div class="card-holo">
    <div class="holo-shine"></div>
    <div class="holo-content">
      <div class="holo-label">Ultra Rare</div>
      <h4>Holographic</h4>
      <div class="holo-num">★</div>
      <div class="holo-bar"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-holo {
  width: 200px;
  padding: 22px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-holo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(124, 108, 255, 0.2),
    rgba(61, 232, 245, 0.15),
    rgba(255, 108, 138, 0.2),
    rgba(30, 217, 138, 0.15)
  );
  opacity: 0.7;
}

.holo-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.card-holo:hover .holo-shine {
  transform: translateX(100%);
}

.holo-content {
  position: relative;
  z-index: 1;
}

.holo-label {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.card-holo h4 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.card-holo .holo-num {
  font-size: 28px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 12px;
  right: 16px;
  letter-spacing: -0.04em;
}

.holo-bar {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a, #3de8f5);
  margin-top: 14px;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-8 {
  background: #07070e;
  overflow: hidden;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 09. Slide Reveal Card

**Type:** Pure CSS
**Description:** On hover the initial image content translates up and out while the description panel slides up from the bottom to fill the card.

**HTML:**
```html
<div class="stage-9">
  <div class="card-reveal">
    <div class="reveal-img">🎨</div>
    <div class="reveal-content">
      <h4>Hover to Reveal</h4>
      <p>Content slides up from the bottom replacing the image</p>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-reveal {
  width: 195px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: linear-gradient(160deg, #1a1a2e, #0d0d1a);
  border: 1px solid var(--ccg-border2);
}

.reveal-img {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-reveal:hover .reveal-img {
  transform: translateY(-100%);
}

.reveal-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  transition: bottom 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-reveal:hover .reveal-content {
  bottom: 0;
}

.reveal-content h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.reveal-content p {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-9 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 10. Morphing Blob Card

**Type:** Pure CSS
**Description:** 8-point border-radius transitions between two organic blob shapes on hover with a smooth CSS transition. Pure CSS, no JavaScript.

**HTML:**
```html
<div class="stage-10">
  <div class="card-morph">
    <h4>Blob Shape</h4>
    <p>border-radius morphs into a completely different blob on hover</p>
  </div>
</div>
```

**CSS:**
```css
.card-morph {
  width: 200px;
  padding: 22px;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
  transition:
    border-radius 0.6s ease,
    transform 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
}

.card-morph:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: scale(1.04);
}

.card-morph h4 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.card-morph p {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-10 {
  background: #0a0a0f;
}
```

### 11. Brutalist Card

**Type:** Pure CSS
**Description:** Hard offset box-shadow gives a bold physical depth effect. Shadow shifts position and color on hover. Pressing moves card into the shadow.

**HTML:**
```html
<div class="stage-11">
  <div class="card-brute">
    <span class="brute-tag">NEW</span>
    <h4>Brutalist<br />Design</h4>
    <p>Raw edges, hard shadows, zero subtlety. Hover to shift the shadow.</p>
    <button class="brute-btn">CLICK ME</button>
  </div>
</div>
```

**CSS:**
```css
.card-brute {
  width: 200px;
  padding: 18px 20px;
  background: #fff;
  border: 2.5px solid #1a1a1a;
  box-shadow: 6px 6px 0 #1a1a1a;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  cursor: pointer;
}

.card-brute:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 #7c6cff;
}

.card-brute:active {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 #1a1a1a;
}

.brute-tag {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1a1a1a;
  color: #fff;
  padding: 2px 7px;
  display: inline-block;
  margin-bottom: 10px;
}

.card-brute h4 {
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  line-height: 1.1;
}

.card-brute p {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
  margin-bottom: 12px;
}

.brute-btn {
  width: 100%;
  padding: 7px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  font-family: var(--ccg-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.brute-btn:hover {
  background: #7c6cff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-11 {
  background: #f0ede5;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 12. Retro Terminal Card

**Type:** Pure CSS
**Description:** Green-on-black terminal aesthetic with a blinking cursor using step-end animation. Perfect for dev tools, documentation, and code-related sites.

**HTML:**
```html
<div class="stage-12">
  <div class="card-term">
    <div class="term-bar">
      <div class="term-dot" style="background: #ff5f57"></div>
      <div class="term-dot" style="background: #febc2e"></div>
      <div class="term-dot" style="background: #28c840"></div>
    </div>
    <div class="term-body">
      <div class="term-line"><span class="cmd">$ </span>npm install codefronts</div>
      <div class="term-line"><span class="out">✓ Packages installed</span></div>
      <div class="term-line"><span class="cmd">$ </span>npm run build</div>
      <div class="term-line"><span class="out">✓ Built in 0.4s</span></div>
      <div class="term-line"><span class="cmd">$ </span><span class="term-cursor"></span></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-term {
  width: 210px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(30, 217, 138, 0.3);
  font-family: var(--ccg-mono);
}

.term-bar {
  background: #111;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(30, 217, 138, 0.2);
}

.term-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.term-body {
  background: #050a05;
  padding: 14px;
}

.term-line {
  font-size: 10.5px;
  line-height: 2;
  color: var(--ccg-green);
}

.term-line .cmd {
  color: rgba(30, 217, 138, 0.5);
}

.term-line .out {
  color: rgba(255, 255, 255, 0.6);
}

.term-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--ccg-green);
  animation: ccg-blink 0.8s step-end infinite;
  vertical-align: middle;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-12 {
  background: #050a05;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-term,
  .card-term * {
    animation: none !important;
  }
}

```

### 13. Neumorphic Card

**Type:** Pure CSS
**Description:** Soft UI neumorphism using dual box-shadows — one light, one dark — to create the illusion of being extruded from the background surface.

**HTML:**
```html
<div class="stage-13">
  <div class="card-neu">
    <div class="neu-icon">🔮</div>
    <h4 style="color: #3a3a4a">Neumorphic</h4>
    <p style="color: #8a8898; font-size: 11px; line-height: 1.5; margin-top: 4px">
      Soft extrusion from the surface. Hover to push it inward.
    </p>
  </div>
</div>
```

**CSS:**
```css
.card-neu {
  width: 200px;
  padding: 22px;
  border-radius: 20px;
  background: #e0e0e8;
  box-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.18),
    -6px -6px 14px rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s;
}

.card-neu:hover {
  box-shadow:
    2px 2px 6px rgba(0, 0, 0, 0.15),
    -2px -2px 6px rgba(255, 255, 255, 0.6),
    inset 3px 3px 8px rgba(0, 0, 0, 0.12),
    inset -3px -3px 8px rgba(255, 255, 255, 0.6);
}

.neu-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e0e0e8;
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.15),
    -4px -4px 8px rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.card-neu h4 {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a4a;
  margin-bottom: 4px;
}

.card-neu p {
  font-size: 11px;
  color: #8a8898;
  line-height: 1.5;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-13 {
  background: #e0e0e8;
}
```

### 14. Animated Stats Card

**Type:** Pure CSS
**Description:** Dashboard metric card with an animated progress bar that grows from 0 using CSS animation. Use IntersectionObserver for scroll-trigger.

**HTML:**
```html
<div class="stage-14">
  <div class="card-stats">
    <div class="stats-header">
      <div class="stats-icon">📈</div>
      <span class="stats-trend">+24.8%</span>
    </div>
    <div class="stats-num">48,293</div>
    <div class="stats-label">Monthly Visitors</div>
    <div class="stats-bar-wrap">
      <div class="stats-bar-fill"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-stats {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border2);
}

.stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stats-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(124, 108, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.stats-trend {
  font-size: 10px;
  color: var(--ccg-green);
  background: rgba(30, 217, 138, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.stats-num {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  font-family: var(--ccg-sans);
}

.stats-label {
  font-size: 11px;
  color: var(--ccg-muted);
  margin-top: 2px;
  margin-bottom: 12px;
}

.stats-bar-wrap {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
}

.stats-bar-fill {
  height: 100%;
  width: 72%;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  border-radius: 2px;
  animation: ccg-stats-grow 0.8s ease-out both;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-14 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-stats-grow {
  from {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-stats,
  .card-stats * {
    animation: none !important;
  }
}

```

### 15. Profile Card

**Type:** Pure CSS
**Description:** Social profile card with gradient avatar ring using CSS mask-composite trick, stats row, and a lift animation on hover.

**HTML:**
```html
<div class="stage-15">
  <div class="card-profile">
    <div class="profile-avatar">VR</div>
    <div class="profile-name">Alex Morgan</div>
    <div class="profile-role">Frontend Developer</div>
    <div class="profile-stats">
      <div class="pstat">
        <div class="pstat-num">142</div>
        <div class="pstat-label">Projects</div>
      </div>
      <div class="pstat">
        <div class="pstat-num">4.8k</div>
        <div class="pstat-label">Stars</div>
      </div>
      <div class="pstat">
        <div class="pstat-num">328</div>
        <div class="pstat-label">Followers</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-profile {
  width: 200px;
  padding: 22px;
  border-radius: 16px;
  background: var(--ccg-surface);
  border: 1px solid var(--ccg-border2);
  text-align: center;
  transition: transform 0.3s;
}

.card-profile:hover {
  transform: translateY(-4px);
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  position: relative;
}

.profile-avatar::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.profile-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}

.profile-role {
  font-size: 11px;
  color: var(--ccg-muted);
  margin-bottom: 14px;
}

.profile-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--ccg-border);
  padding-top: 12px;
}

.pstat-num {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.pstat-label {
  font-size: 9px;
  color: var(--ccg-muted);
  font-family: var(--ccg-mono);
  letter-spacing: 0.06em;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-15 {
  background: #0d0d14;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

/* missing class rules (merged from gallery) */
.pstat {
  flex: 1;
  text-align: center;
}
.pstat + .pstat {
  border-left: 1px solid var(--ccg-border);
}
```

### 16. Pricing Card

**Type:** Pure CSS
**Description:** Pricing tier card with a top border line that draws in from the left on hover using scaleX transform, and a button that fills with color.

**HTML:**
```html
<div class="stage-16">
  <div class="card-price">
    <div class="price-plan">Pro Plan</div>
    <div class="price-amt">$29<span>/mo</span></div>
    <div class="price-desc">Everything you need to ship faster.</div>
    <div class="price-features">
      <div class="price-feat">Unlimited projects</div>
      <div class="price-feat">Priority support</div>
      <div class="price-feat">Custom domain</div>
    </div>
    <button class="price-btn">Get started</button>
  </div>
</div>
```

**CSS:**
```css
.card-price {
  width: 190px;
  padding: 20px;
  border-radius: 16px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.3s,
    transform 0.3s;
}

.card-price::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-price:hover::before {
  transform: scaleX(1);
}

.card-price:hover {
  border-color: rgba(124, 108, 255, 0.4);
  transform: translateY(-3px);
}

.price-plan {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccg-accent);
  margin-bottom: 8px;
}

.price-amt {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price-amt span {
  font-size: 14px;
  font-weight: 400;
  color: var(--ccg-muted);
  letter-spacing: 0;
}

.price-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  margin: 8px 0 14px;
  line-height: 1.5;
}

.price-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.price-feat {
  font-size: 10.5px;
  color: var(--ccg-label);
  display: flex;
  align-items: center;
  gap: 5px;
}

.price-feat::before {
  content: "✓";
  color: var(--ccg-green);
  font-size: 10px;
}

.price-btn {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: rgba(124, 108, 255, 0.15);
  color: var(--ccg-accent);
  border: 1px solid rgba(124, 108, 255, 0.3);
  font-family: var(--ccg-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.card-price:hover .price-btn {
  background: var(--ccg-accent);
  color: #fff;
  border-color: var(--ccg-accent);
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-16 {
  background: #09090e;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 17. Notification Stack Card

**Type:** Pure CSS
**Description:** Stacked notification items that slide right and highlight on hover. Pulsing colored dots indicate notification type.

**HTML:**
```html
<div class="stage-17">
  <div class="card-notif">
    <div class="notif-item">
      <div class="notif-dot" style="background: #7c6cff"></div>
      <div class="notif-body">
        <h5>New follower</h5>
        <p>@alex started following you</p>
      </div>
      <span class="notif-time">2m</span>
    </div>
    <div class="notif-item">
      <div class="notif-dot" style="background: #1ed98a"></div>
      <div class="notif-body">
        <h5>Build passed</h5>
        <p>Production deploy successful</p>
      </div>
      <span class="notif-time">8m</span>
    </div>
    <div class="notif-item">
      <div class="notif-dot" style="background: #ff6c8a"></div>
      <div class="notif-body">
        <h5>Alert</h5>
        <p>CPU usage exceeded 90%</p>
      </div>
      <span class="notif-time">1h</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-notif {
  width: 210px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
  transform: translateX(0);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
  cursor: pointer;
}

.notif-item:hover {
  transform: translateX(4px);
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.06);
}

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
  animation: ccg-notif-pulse 2s ease-in-out infinite;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-body h5 {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 2px;
}

.notif-body p {
  font-size: 10px;
  color: var(--ccg-muted);
  line-height: 1.4;
  margin: 0;
}

.notif-time {
  font-family: var(--ccg-mono);
  font-size: 9px;
  color: var(--ccg-muted);
  margin-left: auto;
  flex-shrink: 0;
  margin-top: 1px;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-17 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
@keyframes ccg-notif-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-notif,
  .card-notif * {
    animation: none !important;
  }
}

```

### 18. Skeleton Loader Card

**Type:** Pure CSS
**Description:** Animated skeleton loading state with a sweeping shimmer wave using background-position keyframes. Replace divs with real content after data loads.

**HTML:**
```html
<div class="stage-18">
  <div class="card-skel">
    <div class="skel skel-avatar"></div>
    <div class="skel skel-line w-3q"></div>
    <div class="skel skel-line w-full"></div>
    <div class="skel skel-line w-half"></div>
    <div class="skel skel-gap"></div>
    <div class="skel skel-line w-full"></div>
    <div class="skel skel-line w-2q"></div>
    <div class="skel skel-btn"></div>
  </div>
</div>
```

**CSS:**
```css
.card-skel {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border);
}

.skel {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: ccg-skel-wave 1.5s infinite;
  border-radius: 4px;
}

.skel-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-bottom: 14px;
}

.skel-line {
  height: 10px;
  margin-bottom: 7px;
}

.skel-line.w-full {
  width: 100%;
}

.skel-line.w-3q {
  width: 75%;
}

.skel-line.w-half {
  width: 50%;
}

.skel-line.w-2q {
  width: 40%;
}

.skel-gap {
  height: 14px;
}

.skel-btn {
  height: 30px;
  border-radius: 6px;
  margin-top: 14px;
}

/* missing class rules (merged from gallery) */

@keyframes ccg-skel-wave {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-18 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .card-skel,
  .card-skel * {
    animation: none !important;
  }
}

```

### 19. Magazine Card

**Type:** Pure CSS
**Description:** Editorial card with image area, category badge, read progress bar that fills on hover, and a smooth lift transition.

**HTML:**
```html
<div class="stage-19">
  <div class="card-mag">
    <div class="mag-img"><div class="mag-img-inner">🌌</div></div>
    <div class="mag-body">
      <div class="mag-category">Design</div>
      <h4>The Future of CSS in 2025</h4>
      <div class="mag-footer">
        <span class="mag-author">Alex Morgan</span>
        <span class="mag-read">Read →</span>
      </div>
      <div class="mag-read-bar"><div class="mag-read-fill"></div></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-mag {
  width: 210px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ccg-border2);
  cursor: pointer;
  transition: transform 0.35s;
}

.card-mag:hover {
  transform: translateY(-4px);
}

.mag-img {
  height: 110px;
  background: linear-gradient(135deg, #1a0533 0%, #0a1535 50%, #0d1a33 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.mag-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(124, 108, 255, 0.4), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(61, 232, 245, 0.25), transparent 50%);
}

.mag-img-inner {
  position: relative;
  z-index: 1;
  font-size: 36px;
}

.mag-body {
  padding: 14px 16px;
  background: var(--ccg-surface);
}

.mag-category {
  font-family: var(--ccg-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ccg-accent);
  margin-bottom: 5px;
}

.card-mag h4 {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 6px;
}

.mag-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.mag-author {
  font-size: 10px;
  color: var(--ccg-muted);
}

.mag-read {
  font-size: 10px;
  color: var(--ccg-accent);
}

.mag-read-bar {
  height: 2px;
  background: rgba(124, 108, 255, 0.2);
  margin-top: 8px;
  border-radius: 1px;
  overflow: hidden;
}

.mag-read-fill {
  height: 100%;
  width: 0;
  background: var(--ccg-accent);
  transition: width 0.4s ease;
}

.card-mag:hover .mag-read-fill {
  width: 60%;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-19 {
  background: #0a080e;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}
```

### 20. Interactive Vote Card

**Type:** CSS + JS
**Description:** Poll card with clickable options that fill in with a progress bar and show percentage. Selected option persists state via JS class toggle.

**HTML:**
```html
<div class="stage-20">
  <div class="card-vote">
    <div class="vote-header">
      <h4>Best CSS feature?</h4>
      <span class="vote-count">1,284 votes</span>
    </div>
    <div class="vote-desc">Pick your favourite modern CSS feature.</div>
    <div class="vote-options">
      <div
        class="vote-opt selected"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill"></div>
        <span class="vote-opt-label">Container Queries</span>
        <span class="vote-opt-pct">64%</span>
      </div>
      <div
        class="vote-opt"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill" style="width: 22%"></div>
        <span class="vote-opt-label">:has() selector</span>
        <span class="vote-opt-pct">22%</span>
      </div>
      <div
        class="vote-opt"
        onclick="
          this.closest('.vote-options')
            .querySelectorAll('.vote-opt')
            .forEach((o) => o.classList.remove('selected'));
          this.classList.add('selected');
        "
      >
        <div class="vote-fill" style="width: 14%"></div>
        <span class="vote-opt-label">CSS Layers</span>
        <span class="vote-opt-pct">14%</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.card-vote {
  width: 200px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--ccg-surface2);
  border: 1px solid var(--ccg-border2);
}

.vote-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vote-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.vote-count {
  font-family: var(--ccg-mono);
  font-size: 11px;
  color: var(--ccg-muted);
}

.vote-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vote-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ccg-border);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.vote-opt:hover {
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.07);
}

.vote-opt.selected {
  border-color: var(--ccg-accent);
}

.vote-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(124, 108, 255, 0.12);
  transition: width 0.4s ease;
  width: 0;
}

.vote-opt.selected .vote-fill {
  width: 64%;
}

.vote-opt-label {
  font-size: 11px;
  color: var(--ccg-label);
  position: relative;
  z-index: 1;
}

.vote-opt-pct {
  font-family: var(--ccg-mono);
  font-size: 10px;
  color: var(--ccg-muted);
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.vote-opt.selected .vote-opt-pct {
  color: var(--ccg-accent);
}

.vote-opt.selected .vote-opt-label {
  color: #fff;
}

/* parent stage backdrop (so the demo renders standalone) */
[class^="stage-"] {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
}

.stage-20 {
  background: #0a0a0f;
}

/* gallery vars + keyframes (so the demo renders standalone) */
:root {
  --ccg-bg: #0a0a0f;
  --ccg-surface: #111118;
  --ccg-surface2: #17171f;
  --ccg-surface3: #1e1e28;
  --ccg-border: rgba(255, 255, 255, 0.15);
  --ccg-border2: rgba(255, 255, 255, 0.13);
  --ccg-accent: #7c6cff;
  --ccg-pink: #ff6c8a;
  --ccg-green: #1ed98a;
  --ccg-amber: #f5a84a;
  --ccg-cyan: #3de8f5;
  --ccg-text: #f0eeff;
  --ccg-muted: #6b6987;
  --ccg-label: #9896b8;
  --ccg-mono: "DM Mono", "Fira Code", monospace;
  --ccg-sans: "Syne", sans-serif;
}

/* missing class rules (merged from gallery) */
.vote-desc {
  font-size: 11px;
  color: var(--ccg-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
```

**JS:**
```js
document.querySelectorAll(".vote-opt").forEach((opt) => {
  opt.addEventListener("click", () => {
    opt
      .closest(".vote-options")
      .querySelectorAll(".vote-opt")
      .forEach((o) => o.classList.remove("selected"));
    opt.classList.add("selected");
  });
});
```

---
## 23 CSS Checkboxes

URL: https://codefronts.com/components/css-checkboxes/
Description: 23 hand-crafted CSS checkboxes — toggles, glow, draw stroke, bouncy pop, glassmorphism, neumorphic, liquid fill, ripple, confetti and more. Mostly pure CSS, copy-paste ready.
Demo count: 23

### 01. Smooth Slide Toggle

**Type:** Pure CSS
**Description:** Pill toggle with gradient fill. The thumb glides on a cubic-bezier curve.

**HTML:**
```html
<label class="cb-toggle">
  <input class="cb-toggle__input" type="checkbox" checked />
  <span class="cb-toggle__track">
    <span class="cb-toggle__thumb"></span>
  </span>
  <span class="cb-toggle__label">Smooth slide toggle</span>
</label>
```

**CSS:**
```css
.cb-toggle {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-toggle__input { display: none; }
.cb-toggle__track {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  position: relative;
  transition: background .3s cubic-bezier(.23,1,.32,1),
              border-color .3s;
}
.cb-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .3s cubic-bezier(.23,1,.32,1);
}
.cb-toggle__input:checked + .cb-toggle__track {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-color: transparent;
}
.cb-toggle__input:checked + .cb-toggle__track .cb-toggle__thumb {
  transform: translateX(20px);
}
```

### 02. Neon Glow Checkbox

**Type:** Pure CSS
**Description:** Electric box-shadow glow blooms when checked. The checkmark is an inline SVG.

**HTML:**
```html
<label class="cb-neon">
  <input class="cb-neon__input" type="checkbox" checked />
  <span class="cb-neon__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="#fff"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Neon glow on check</span>
</label>
```

**CSS:**
```css
.cb-neon {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-neon__input { display: none; }
.cb-neon__box {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid rgba(124,108,255,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: all .25s;
}
.cb-neon__input:checked + .cb-neon__box {
  background: #7c6cff;
  border-color: #7c6cff; color: #fff;
  box-shadow:
    0 0 12px rgba(124,108,255,.7),
    0 0 24px rgba(124,108,255,.3);
}
```

### 03. Draw Stroke Checkmark

**Type:** Pure CSS
**Description:** The checkmark draws itself using SVG stroke-dashoffset animation on :checked.

**HTML:**
```html
<label class="cb-draw">
  <input class="cb-draw__input" type="checkbox" checked />
  <span class="cb-draw__box">
    <svg class="cb-draw__svg" viewBox="0 0 16 12" fill="none">
      <polyline
        class="cb-draw__path"
        points="1,6 6,11 15,1"
        stroke="#1ed98a"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Draw stroke checkmark</span>
</label>
```

**CSS:**
```css
.cb-draw {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-draw__input { display: none; }
.cb-draw__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(30,217,138,.35);
  background: rgba(30,217,138,.05);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s;
}
.cb-draw__input:checked + .cb-draw__box {
  border-color: #1ed98a;
  background: rgba(30,217,138,.12);
}
.cb-draw__svg { width: 14px; height: 10px; }
.cb-draw__path {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .35s
    cubic-bezier(.23,1,.32,1) .05s;
}
.cb-draw__input:checked
  + .cb-draw__box .cb-draw__path {
  stroke-dashoffset: 0;
}
```

### 04. Bouncy Pop Checkbox

**Type:** Pure CSS
**Description:** An inner dot springs in with cubic-bezier overshoot, giving an elastic tactile feel.

**HTML:**
```html
<label class="cb-pop">
  <input class="cb-pop__input" type="checkbox" checked />
  <span class="cb-pop__box">
    <span class="cb-pop__dot"></span>
  </span>
  <span>Bouncy pop checkbox</span>
</label>
```

**CSS:**
```css
.cb-pop {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pop__input { display: none; }
.cb-pop__box {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(245,168,74,.4);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .25s;
}
.cb-pop__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #f5a84a;
  transform: scale(0);
  transition: transform .4s
    cubic-bezier(.34,1.56,.64,1);
}
.cb-pop__input:checked + .cb-pop__box {
  border-color: #f5a84a;
}
.cb-pop__input:checked
  + .cb-pop__box .cb-pop__dot {
  transform: scale(1);
}
```

### 05. Glassmorphism Checkbox

**Type:** Pure CSS
**Description:** Frosted glass via backdrop-filter. Checked state fills with a translucent gradient.

**HTML:**
```html
<label class="cb-glass">
  <input class="cb-glass__input" type="checkbox" checked />
  <span class="cb-glass__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Glassmorphism checkbox</span>
</label>
```

**CSS:**
```css
.cb-glass {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-glass__input { display: none; }
.cb-glass__box {
  width: 24px; height: 24px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .3s, border-color .3s,
              box-shadow .3s, color .3s;
}
.cb-glass__input:checked + .cb-glass__box {
  background: rgba(124,108,255,.4);
  border-color: rgba(124,108,255,.6);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
```

### 06. Neumorphic Checkbox

**Type:** Pure CSS
**Description:** Dual box-shadows create extrusion. Checked state inverts to a pressed inset.

**HTML:**
```html
<!-- Requires a light background on the parent -->
<label class="cb-neu">
  <input class="cb-neu__input" type="checkbox" checked />
  <span class="cb-neu__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="#7c6cff"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Neumorphic checkbox</span>
</label>
```

**CSS:**
```css
/* Card background must match: #e0e0e8 */
.cb-neu {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-neu__input { display: none; }
.cb-neu__box {
  width: 26px; height: 26px; border-radius: 8px;
  background: #e0e0e8; color: transparent;
  display: flex; align-items: center;
  justify-content: center;
  box-shadow:
     3px  3px 6px rgba(0,0,0,.18),
    -3px -3px 6px rgba(255,255,255,.7);
  transition: box-shadow .3s, color .3s;
}
.cb-neu__input:checked + .cb-neu__box {
  color: #7c6cff;
  box-shadow:
    inset 2px 2px 5px rgba(0,0,0,.15),
    inset -2px -2px 5px rgba(255,255,255,.6);
}
```

### 07. Liquid Fill Checkbox

**Type:** Pure CSS
**Description:** A flood fill rises from the bottom using scaleY then reveals a white checkmark.

**HTML:**
```html
<label class="cb-liquid">
  <input class="cb-liquid__input" type="checkbox" checked />
  <span class="cb-liquid__box">
    <span class="cb-liquid__fill"></span>
    <svg
      width="12"
      height="9"
      viewBox="0 0 14 11"
      fill="none"
      style="position: relative; z-index: 1"
    >
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Liquid fill checkbox</span>
</label>
```

**CSS:**
```css
.cb-liquid {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-liquid__input { display: none; }
.cb-liquid__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(61,232,245,.4);
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: border-color .3s, color .3s;
}
.cb-liquid__fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #3de8f5, #06b6d4);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s
    cubic-bezier(.23,1,.32,1);
}
.cb-liquid__input:checked + .cb-liquid__box {
  border-color: #3de8f5; color: #fff;
}
.cb-liquid__input:checked
  + .cb-liquid__box .cb-liquid__fill {
  transform: scaleY(1);
}
```

### 08. Rotating Ring Checkbox

**Type:** Pure CSS
**Description:** A conic-gradient ring spins in on check. The inner dot scales up simultaneously.

**HTML:**
```html
<label class="cb-ring">
  <input class="cb-ring__input" type="checkbox" checked />
  <span class="cb-ring__box">
    <span class="cb-ring__halo"></span>
    <span class="cb-ring__dot"></span>
  </span>
  <span>Rotating ring checkbox</span>
</label>
```

**CSS:**
```css
.cb-ring {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-ring__input { display: none; }
.cb-ring__box {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.1);
  position: relative;
  display: flex; align-items: center;
  justify-content: center;
}
.cb-ring__halo {
  position: absolute; inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    #7c6cff 0%, #ff6c8a 50%, transparent 50%);
  opacity: 0;
  transition: opacity .3s;
}
.cb-ring__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg,#7c6cff,#ff6c8a);
  transform: scale(0);
  transition: transform .35s
    cubic-bezier(.34,1.56,.64,1) .1s;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__halo {
  opacity: 1;
  animation: ring-spin .5s
    cubic-bezier(.23,1,.32,1) forwards;
}
.cb-ring__input:checked
  + .cb-ring__box .cb-ring__dot {
  transform: scale(1);
}
@keyframes ring-spin {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-ring,
  .cb-ring * {
    animation: none !important;
  }
}

```

### 09. Brutalist Checkbox

**Type:** Pure CSS
**Description:** Hard offset shadow gives physical depth. Checking shifts the box like pressing a button.

**HTML:**
```html
<!-- Requires a light background on the parent -->
<label class="cb-brute">
  <input class="cb-brute__input" type="checkbox" checked />
  <span class="cb-brute__box" aria-hidden="true">&#10003;</span>
  <span>Brutalist checkbox</span>
</label>
```

**CSS:**
```css
/* Card background must be light, e.g. #f0ede5 */
.cb-brute {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-brute__input { display: none; }
.cb-brute__box {
  width: 24px; height: 24px;
  border: 2.5px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  background: #fff;
  display: flex; align-items: center;
  justify-content: center;
  font-size: 14px; color: transparent;
  cursor: pointer;
  transition:
    transform .12s, box-shadow .12s,
    background .12s, color .12s;
}
.cb-brute__input:checked + .cb-brute__box {
  background: #1a1a1a; color: #fff;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #1a1a1a;
}
```

### 10. Gradient Sweep Checkbox

**Type:** Pure CSS
**Description:** A rainbow gradient sweeps across the box using background-position animation on check.

**HTML:**
```html
<label class="cb-sweep">
  <input class="cb-sweep__input" type="checkbox" checked />
  <span class="cb-sweep__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Gradient sweep checkbox</span>
</label>
```

**CSS:**
```css
.cb-sweep {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-sweep__input { display: none; }
.cb-sweep__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: border-color .4s, color .4s;
}
.cb-sweep__input:checked + .cb-sweep__box {
  border-color: transparent; color: #fff;
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #7c6cff);
  background-size: 200% 100%;
  animation: grad-sweep .6s ease forwards;
}
@keyframes grad-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-sweep,
  .cb-sweep * {
    animation: none !important;
  }
}

```

### 11. 3D Flip Checkbox

**Type:** Pure CSS
**Description:** The box rotates on the Y axis using rotateY to reveal a checked face.

**HTML:**
```html
<label class="cb-flip">
  <input class="cb-flip__input" type="checkbox" checked />
  <span class="cb-flip__box">
    <span class="cb-flip__face">&#10003;</span>
  </span>
  <span>3D flip checkbox</span>
</label>
```

**CSS:**
```css
.cb-flip {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-flip__input { display: none; }
.cb-flip__box {
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid rgba(124,108,255,.3);
  perspective: 80px;
  position: relative;
}
.cb-flip__face {
  position: absolute; inset: 0; border-radius: 5px;
  background: #7c6cff;
  display: flex; align-items: center;
  justify-content: center;
  color: #fff; font-size: 14px;
  transform: rotateY(90deg);
  transform-origin: center;
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-flip__input:checked
  + .cb-flip__box .cb-flip__face {
  transform: rotateY(0deg);
}
```

### 12. Ripple Wave Checkbox

**Type:** Pure CSS
**Description:** A ring expands outward from the checkbox on check using a scale + fade keyframe.

**HTML:**
```html
<label class="cb-ripple">
  <input class="cb-ripple__input" type="checkbox" checked />
  <span class="cb-ripple__box">
    <span class="cb-ripple__wave"></span>
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Ripple wave checkbox</span>
</label>
```

**CSS:**
```css
.cb-ripple {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-ripple__input { display: none; }
.cb-ripple__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,108,138,.4);
  position: relative; overflow: visible;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-ripple__wave {
  position: absolute; inset: -4px;
  border-radius: 11px;
  border: 2px solid #ff6c8a;
  opacity: 0;
}
.cb-ripple__input:checked + .cb-ripple__box {
  background: #ff6c8a; border-color: #ff6c8a;
  color: #fff;
}
.cb-ripple__input:checked
  + .cb-ripple__box .cb-ripple__wave {
  animation: ripple-out .5s ease-out forwards;
}
@keyframes ripple-out {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.6); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-ripple,
  .cb-ripple * {
    animation: none !important;
  }
}

```

### 13. Retro Pixel Checkbox

**Type:** Pure CSS
**Description:** An 8-bit checkmark built from SVG rects with crispEdges. Scales in with a pop on check.

**HTML:**
```html
<label class="cb-pixel">
  <input class="cb-pixel__input" type="checkbox" checked />
  <span class="cb-pixel__box">
    <svg class="cb-pixel__svg" viewBox="0 0 10 8" shape-rendering="crispEdges" fill="#1ed98a">
      <rect x="0" y="4" width="2" height="2" />
      <rect x="2" y="6" width="2" height="2" />
      <rect x="4" y="4" width="2" height="2" />
      <rect x="6" y="2" width="2" height="2" />
      <rect x="8" y="0" width="2" height="2" />
    </svg>
  </span>
  <span>Retro pixel checkbox</span>
</label>
```

**CSS:**
```css
.cb-pixel {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pixel__input { display: none; }
.cb-pixel__box {
  width: 26px; height: 26px;
  border: 3px solid #1ed98a;
  display: flex; align-items: center;
  justify-content: center; overflow: hidden;
  transition: background .25s;
}
.cb-pixel__svg {
  width: 14px; height: 11px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s,
    transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-pixel__input:checked + .cb-pixel__box {
  background: rgba(30,217,138,.15);
}
.cb-pixel__input:checked
  + .cb-pixel__box .cb-pixel__svg {
  opacity: 1; transform: scale(1);
}
```

### 14. Strikethrough Checkbox

**Type:** Pure CSS
**Description:** Checking the box strikes through the label text with a sliding underline.

**HTML:**
```html
<label class="cb-strike">
  <input class="cb-strike__input" type="checkbox" checked />
  <span class="cb-strike__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-strike__text">Strikethrough label</span>
</label>
```

**CSS:**
```css
.cb-strike {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-strike__input { display: none; }
.cb-strike__box {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  color: transparent; overflow: hidden;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-strike__box svg {
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-strike__text {
  position: relative; transition: color .3s;
  font-size: 14px;
}
.cb-strike__text::after {
  content: ""; position: absolute;
  left: 0; top: 50%; width: 0; height: 1.5px;
  background: #7c6cff;
  transition: width .35s cubic-bezier(.23,1,.32,1);
}
.cb-strike__input:checked + .cb-strike__box {
  background: #7c6cff; border-color: #7c6cff;
  color: #fff;
}
.cb-strike__input:checked + .cb-strike__box svg {
  transform: scale(1);
}
.cb-strike__input:checked ~ .cb-strike__text {
  color: rgba(255, 255, 255, 0.55);
}
.cb-strike__input:checked ~ .cb-strike__text::after {
  width: 100%;
}
```

### 15. Gooey Blob Checkbox

**Type:** Pure CSS
**Description:** A morphing blob shape squishes into view with spring easing when checked.

**HTML:**
```html
<label class="cb-blob">
  <input class="cb-blob__input" type="checkbox" checked />
  <span class="cb-blob__box">
    <span class="cb-blob__shape"></span>
  </span>
  <span>Gooey blob checkbox</span>
</label>
```

**CSS:**
```css
.cb-blob {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-blob__input { display: none; }
.cb-blob__box {
  width: 28px; height: 28px; border-radius: 8px;
  border: 2px solid rgba(124,108,255,.3);
  display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.cb-blob__shape {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 0;
  transform: scale(0) rotate(45deg);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1),
              border-radius .45s ease;
}
.cb-blob__input:checked
  + .cb-blob__box .cb-blob__shape {
  transform: scale(1) rotate(0deg);
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
```

### 16. Dark Mode Toggle

**Type:** Pure CSS
**Description:** Moon-to-sun emoji toggle that shifts between a dark and a warm golden background.

**HTML:**
```html
<label class="cb-darkmode">
  <input class="cb-darkmode__input" type="checkbox" />
  <span class="cb-darkmode__track">
    <span class="cb-darkmode__thumb">
      <span class="cb-darkmode__icon"></span>
    </span>
  </span>
  <span>Toggle theme</span>
</label>
```

**CSS:**
```css
.cb-darkmode {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-darkmode__input { display: none; }
.cb-darkmode__track {
  width: 52px; height: 28px; border-radius: 14px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,.1);
  position: relative; transition: background .4s;
}
.cb-darkmode__thumb {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; font-size: 11px;
  display: flex; align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-darkmode__icon::before { content: "\1F319"; }
.cb-darkmode__input:checked + .cb-darkmode__track {
  background: linear-gradient(135deg, #f5a84a, #ffd700);
}
.cb-darkmode__input:checked
  + .cb-darkmode__track .cb-darkmode__thumb {
  transform: translateX(24px);
}
.cb-darkmode__input:checked
  + .cb-darkmode__track .cb-darkmode__icon::before {
  content: "\2600\FE0F";
}
```

### 17. Pulse Ring Checkbox

**Type:** Pure CSS
**Description:** A ring pulses outward from the box on check, like a sonar ping.

**HTML:**
```html
<label class="cb-pulse">
  <input class="cb-pulse__input" type="checkbox" checked />
  <span class="cb-pulse__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Pulse ring checkbox</span>
</label>
```

**CSS:**
```css
.cb-pulse {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-pulse__input { display: none; }
.cb-pulse__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(61,232,245,.3);
  position: relative; overflow: visible;
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-pulse__box::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 13px;
  border: 2px solid #3de8f5; opacity: 0;
}
.cb-pulse__input:checked + .cb-pulse__box {
  background: linear-gradient(135deg, #3de8f5, #06b6d4);
  border-color: #3de8f5; color: #fff;
}
.cb-pulse__input:checked + .cb-pulse__box::after {
  animation: pulse-ring .6s ease-out forwards;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(1.5); opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-pulse,
  .cb-pulse * {
    animation: none !important;
  }
}

```

### 18. Dash to Check

**Type:** Pure CSS
**Description:** An indeterminate dash morphs into a checkmark using border rotation on check.

**HTML:**
```html
<label class="cb-dash">
  <input class="cb-dash__input" type="checkbox" checked />
  <span class="cb-dash__box">
    <span class="cb-dash__mark"></span>
  </span>
  <span>Dash to check</span>
</label>
```

**CSS:**
```css
.cb-dash {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-dash__input { display: none; }
.cb-dash__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(124,108,255,.4);
  background: rgba(124,108,255,.08);
  display: flex; align-items: center;
  justify-content: center;
  transition: border-color .3s, background .3s;
}
.cb-dash__mark {
  width: 10px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: all .35s cubic-bezier(.23,1,.32,1);
}
.cb-dash__input:checked + .cb-dash__box {
  border-color: #7c6cff;
  background: rgba(124,108,255,.18);
}
.cb-dash__input:checked
  + .cb-dash__box .cb-dash__mark {
  width: 12px; height: 12px;
  background: transparent;
  border-right: 2.5px solid #7c6cff;
  border-bottom: 2.5px solid #7c6cff;
  border-radius: 0;
  transform: rotate(45deg) translate(-2px,-3px);
}
```

### 19. Multi-State Checkbox

**Type:** CSS + JS
**Description:** Three visual states — unchecked, partial (amber), and checked (green) — cycled by JS.

**HTML:**
```html
<button class="cb-multi" data-state="0" aria-pressed="false">
  <span class="cb-multi__box">
    <svg class="cb-multi__tick" width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-multi__label">Click to cycle</span>
</button>
```

**CSS:**
```css
.cb-multi {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
  background: none; border: none; color: #f0eeff;
  font-size: 14px; padding: 0;
}
.cb-multi__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: all .25s cubic-bezier(.23,1,.32,1);
}
.cb-multi__tick {
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-multi[data-state="1"] .cb-multi__box {
  background: #f5a84a; border-color: #f5a84a;
  color: #fff;
}
.cb-multi[data-state="1"] .cb-multi__tick {
  transform: scale(.55);
}
.cb-multi[data-state="2"] .cb-multi__box {
  background: #1ed98a; border-color: #1ed98a;
  color: #fff;
  box-shadow: 0 0 14px rgba(30,217,138,.4);
}
.cb-multi[data-state="2"] .cb-multi__tick {
  transform: scale(1);
}
```

**JS:**
```js
document.querySelectorAll('.cb-multi').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var s = (parseInt(btn.dataset.state || '0') + 1) % 3;
    btn.dataset.state = s;
    var labels = ['Click to cycle', 'Partial', 'Checked'];
    btn.querySelector('.cb-multi__label').textContent = labels[s];
  });
});
```

### 20. Magnetic Checkbox

**Type:** CSS + JS
**Description:** The checkbox box subtly shifts toward the cursor on hover using JS-driven translate.

**HTML:**
```html
<label class="cb-magnet">
  <input class="cb-magnet__input" type="checkbox" checked />
  <span class="cb-magnet__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Magnetic checkbox</span>
</label>
```

**CSS:**
```css
.cb-magnet {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-magnet__input { display: none; }
.cb-magnet__box {
  width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid rgba(124,108,255,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
  will-change: transform;
}
.cb-magnet__input:checked + .cb-magnet__box {
  background: #7c6cff; border-color: #7c6cff;
  color: #fff;
}
```

**JS:**
```js
document.querySelectorAll('.cb-magnet__box').forEach(function(box) {
  box.addEventListener('mousemove', function(e) {
    var r = box.getBoundingClientRect();
    var x = (e.clientX - r.left - r.width  / 2) * 0.3;
    var y = (e.clientY - r.top  - r.height / 2) * 0.3;
    box.style.transform = 'translate(' + x + 'px,' + y + 'px)';
  });
  box.addEventListener('mouseleave', function() {
    box.style.transform = '';
  });
});
```

### 21. Confetti Burst Checkbox

**Type:** CSS + JS
**Description:** Coloured dots explode outward from the checkbox the moment it is checked.

**HTML:**
```html
<label class="cb-confetti">
  <input class="cb-confetti__input" type="checkbox" />
  <span class="cb-confetti__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span>Click to confetti!</span>
</label>
```

**CSS:**
```css
.cb-confetti {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
  position: relative;
}
.cb-confetti__input { display: none; }
.cb-confetti__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(255,108,138,.4);
  display: flex; align-items: center;
  justify-content: center; color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-confetti__input:checked + .cb-confetti__box {
  background: #ff6c8a; border-color: #ff6c8a;
  color: #fff;
}
.cb-dot {
  position: absolute; width: 5px; height: 5px;
  border-radius: 50%; pointer-events: none;
  animation: cb-confetti-burst .55s ease-out forwards;
}
@keyframes cb-confetti-burst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-confetti,
  .cb-confetti * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.cb-confetti__input').forEach(function(inp) {
  inp.addEventListener('change', function() {
    if (!inp.checked) return;
    var box = inp.nextElementSibling;
    var colors = ['#7c6cff','#ff6c8a','#1ed98a','#f5a84a','#3de8f5'];
    for (var i = 0; i < 8; i++) {
      var dot = document.createElement('span');
      dot.className = 'cb-dot';
      var angle = (i / 8) * 2 * Math.PI;
      var dist = 22 + Math.random() * 14;
      dot.style.cssText =
        'background:' + colors[i % colors.length] + ';' +
        'left:8px;top:8px;' +
        '--tx:' + Math.cos(angle) * dist + 'px;' +
        '--ty:' + Math.sin(angle) * dist + 'px;';
      inp.closest('.cb-confetti').appendChild(dot);
      setTimeout(function(d) { d.remove(); }, 600, dot);
    }
  });
});
```

### 22. Slide-In Label

**Type:** Pure CSS
**Description:** A confirmation label slides in from the left when the checkbox is checked.

**HTML:**
```html
<label class="cb-slidein">
  <input class="cb-slidein__input" type="checkbox" checked />
  <span class="cb-slidein__box">
    <svg width="12" height="9" viewBox="0 0 14 11" fill="none">
      <polyline
        points="1,5.5 5,9.5 13,1"
        stroke="white"
        stroke-width="2.2"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </span>
  <span class="cb-slidein__text">Done!</span>
</label>
```

**CSS:**
```css
.cb-slidein {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-slidein__input { display: none; }
.cb-slidein__box {
  width: 24px; height: 24px; border-radius: 7px;
  border: 2px solid rgba(30,217,138,.3);
  display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  color: transparent;
  transition: background .25s, border-color .25s,
              color .25s;
}
.cb-slidein__text {
  font-size: 14px; color: #1ed98a;
  max-width: 0; overflow: hidden;
  white-space: nowrap; opacity: 0;
  transition: max-width .4s cubic-bezier(.23,1,.32,1),
              opacity .4s ease;
}
.cb-slidein__input:checked + .cb-slidein__box {
  background: #1ed98a; border-color: #1ed98a;
  color: #fff;
}
.cb-slidein__input:checked ~ .cb-slidein__text {
  max-width: 200px; opacity: 1;
}
```

### 23. Aurora Toggle

**Type:** Pure CSS
**Description:** A toggle whose track fills with a shifting aurora gradient when active.

**HTML:**
```html
<label class="cb-aurora">
  <input class="cb-aurora__input" type="checkbox" checked />
  <span class="cb-aurora__track">
    <span class="cb-aurora__thumb"></span>
  </span>
  <span>Aurora toggle</span>
</label>
```

**CSS:**
```css
.cb-aurora {
  display: inline-flex; align-items: center;
  gap: 10px; cursor: pointer; user-select: none;
}
.cb-aurora__input { display: none; }
.cb-aurora__track {
  width: 56px; height: 28px; border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  transition: background .4s, border-color .4s;
}
.cb-aurora__thumb {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.cb-aurora__input:checked + .cb-aurora__track {
  background: linear-gradient(90deg,
    #7c6cff, #ff6c8a, #3de8f5, #1ed98a, #7c6cff);
  background-size: 300% 100%;
  border-color: transparent;
  animation: aurora-shift 3s linear infinite;
}
.cb-aurora__input:checked
  + .cb-aurora__track .cb-aurora__thumb {
  transform: translateX(28px);
}
@keyframes aurora-shift {
  0%   { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-aurora,
  .cb-aurora * {
    animation: none !important;
  }
}

```

---
## 21 CSS Circular Menu Designs

URL: https://codefronts.com/navigation/css-circular-menus/
Description: 21 free CSS circular menu designs — radial, dome, orbital and skeumorphic layouts with copy-paste HTML and CSS.
Demo count: 21

### 01. Mission Hub

**Type:** Pure CSS
**Description:** A 5-segment half-wheel command surface with curved SVG labels riding the outer rim, hairline wedge dividers, and a context-aware sub-toolbar that swaps icons based on the selected wedge. Pure CSS via :checked + :has(), teal-on-navy cockpit palette.

**HTML:**
```html
<div class="ccm-sun" role="toolbar" aria-label="Mission Hub">
  <input type="radio" name="ccm-sun" id="ccm-sun-0" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-1" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-2" class="ccm-sun-r" hidden checked />
  <input type="radio" name="ccm-sun" id="ccm-sun-3" class="ccm-sun-r" hidden />
  <input type="radio" name="ccm-sun" id="ccm-sun-4" class="ccm-sun-r" hidden />
  <div class="ccm-sun-wheel" aria-hidden="true"></div>
  <svg class="ccm-sun-rim" viewBox="0 0 240 130" aria-hidden="true">
    <defs>
      <path id="ccm-sun-arc-path" d="M 30 130 A 90 90 0 0 1 210 130" fill="none" />
    </defs>
    <g class="ccm-sun-dividers">
      <line x1="91.7" y1="109.4" x2="56.9" y2="84.1" />
      <line x1="109.2" y1="96.7" x2="95.9" y2="55.8" />
      <line x1="130.8" y1="96.7" x2="144.1" y2="55.8" />
      <line x1="148.3" y1="109.4" x2="183.1" y2="84.1" />
    </g>
    <text class="ccm-sun-curve">
      <textPath href="#ccm-sun-arc-path" startOffset="10%" text-anchor="middle">MUSIC</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="30%" text-anchor="middle">MAPS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="50%" text-anchor="middle">COMPASS</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="70%" text-anchor="middle">CAMERA</textPath>
      <textPath href="#ccm-sun-arc-path" startOffset="90%" text-anchor="middle">SETTINGS</textPath>
    </text>
  </svg>
  <div class="ccm-sun-pivot" aria-hidden="true"></div>
  <label for="ccm-sun-0" class="ccm-sun-arc" style="--i: 0" aria-label="Music"
    ><span class="ccm-sun-ico">♪</span></label
  >
  <label for="ccm-sun-1" class="ccm-sun-arc" style="--i: 1" aria-label="Maps"
    ><span class="ccm-sun-ico">◈</span></label
  >
  <label for="ccm-sun-2" class="ccm-sun-arc" style="--i: 2" aria-label="Compass"
    ><span class="ccm-sun-ico">⌖</span></label
  >
  <label for="ccm-sun-3" class="ccm-sun-arc" style="--i: 3" aria-label="Camera"
    ><span class="ccm-sun-ico">◉</span></label
  >
  <label for="ccm-sun-4" class="ccm-sun-arc" style="--i: 4" aria-label="Settings"
    ><span class="ccm-sun-ico">⚙</span></label
  >
  <div class="ccm-sun-bar ccm-sun-bar-0" role="toolbar" aria-label="Music actions">
    <a href="#" class="ccm-sun-sub" aria-label="Play">▶</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pause">❚❚</a>
    <a href="#" class="ccm-sun-sub" aria-label="Skip">⏭</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-1" role="toolbar" aria-label="Maps actions">
    <a href="#" class="ccm-sun-sub" aria-label="Search">⌕</a>
    <a href="#" class="ccm-sun-sub" aria-label="Pin">◉</a>
    <a href="#" class="ccm-sun-sub" aria-label="Route">➤</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-2" role="toolbar" aria-label="Compass actions">
    <a href="#" class="ccm-sun-sub" aria-label="Calibrate">⊙</a>
    <a href="#" class="ccm-sun-sub" aria-label="North">▲</a>
    <a href="#" class="ccm-sun-sub" aria-label="Lock">⏻</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-3" role="toolbar" aria-label="Camera actions">
    <a href="#" class="ccm-sun-sub" aria-label="Shutter">●</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flash">⚡</a>
    <a href="#" class="ccm-sun-sub" aria-label="Flip">⤾</a>
  </div>
  <div class="ccm-sun-bar ccm-sun-bar-4" role="toolbar" aria-label="Settings actions">
    <a href="#" class="ccm-sun-sub" aria-label="Profile">☺</a>
    <a href="#" class="ccm-sun-sub" aria-label="Theme">◐</a>
    <a href="#" class="ccm-sun-sub" aria-label="Help">?</a>
  </div>
</div>
```

**CSS:**
```css
.ccm-sun {
  --n: 5;
  --ba: calc(180deg / var(--n));
  --r: 110px;
  position: relative;
  width: 240px;
  height: 130px;
  overflow: visible;
  font-family: system-ui, sans-serif;
}

.ccm-sun-wheel {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: calc(var(--r) * 2);
  height: var(--r);
  margin-left: calc(var(--r) * -1);
  border-radius: var(--r) var(--r) 0 0;
  background: radial-gradient(
    farthest-side at 50% 100%,
    #14b8a6 35%,
    #1e293b 36%,
    #1e293b calc(100% - 1px),
    transparent 100%
  );
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

.ccm-sun-rim {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 240px;
  height: 130px;
  margin-left: -120px;
  pointer-events: none;
  z-index: 1;
}

.ccm-sun-dividers line {
  stroke: rgba(94, 234, 212, 0.25);
  stroke-width: 1;
}

.ccm-sun-curve {
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  fill: #cbd5e1;
}

.ccm-sun-pivot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 70px;
  height: 35px;
  margin-left: -35px;
  border-radius: 35px 35px 0 0;
  background: radial-gradient(farthest-side at 50% 100%, #5eead4 0%, #14b8a6 70%, #0f766e 100%);
  box-shadow: 0 -2px 8px rgba(94, 234, 212, 0.35);
  z-index: 3;
}

.ccm-sun-arc {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: var(--r);
  margin-left: -25px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 28px;
  cursor: pointer;
  transform-origin: 50% 100%;
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) - 90deg));
  transition: color 0.25s;
  color: #94a3b8;
  z-index: 2;
}

.ccm-sun-ico {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-sun-arc:hover,
.ccm-sun-arc:focus-visible {
  color: #5eead4;
}

.ccm-sun-arc:hover .ccm-sun-ico,
.ccm-sun-arc:focus-visible .ccm-sun-ico {
  transform: rotate(calc((var(--i) + 0.5) * var(--ba) * -1 + 90deg)) translateY(-3px) scale(1.1);
}

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"],
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"],
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"],
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"],
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] {
  color: #5eead4;
}

.ccm-sun:has(#ccm-sun-0:checked) [for="ccm-sun-0"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-1:checked) [for="ccm-sun-1"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-2:checked) [for="ccm-sun-2"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-3:checked) [for="ccm-sun-3"] .ccm-sun-ico,
.ccm-sun:has(#ccm-sun-4:checked) [for="ccm-sun-4"] .ccm-sun-ico {
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.7));
}

.ccm-sun-bar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--r) + 14px);
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  transform: translateX(-50%) scale(0);
  transform-origin: 50% calc(100% + 10px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.ccm-sun-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

.ccm-sun:has(#ccm-sun-0:checked) .ccm-sun-bar-0,
.ccm-sun:has(#ccm-sun-1:checked) .ccm-sun-bar-1,
.ccm-sun:has(#ccm-sun-2:checked) .ccm-sun-bar-2,
.ccm-sun:has(#ccm-sun-3:checked) .ccm-sun-bar-3,
.ccm-sun:has(#ccm-sun-4:checked) .ccm-sun-bar-4 {
  transform: translateX(-50%) scale(1);
}

.ccm-sun-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.12);
  color: #5eead4;
  font:
    700 13px/1 ui-monospace,
    monospace;
  text-decoration: none;
  border: 1px solid rgba(94, 234, 212, 0.3);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-sun-sub:hover,
.ccm-sun-sub:focus-visible {
  background: #5eead4;
  color: #0f172a;
  transform: scale(1.1);
}
```

### 02. Service Orbit

**Type:** Pure CSS
**Description:** Six service satellites orbit a central disc with an animated pointer that snaps to the active selection. Click any satellite to swap the centre title and rotate the pointer with a spring overshoot. Pure CSS via :checked + :has() — adapted from a service-business radial nav, simplified to remove its 600+ lines of icon paths and JS pointer animation.

**HTML:**
```html
<div class="ccm-svc">
  <input type="radio" name="ccm-svc" id="ccm-svc-0" class="ccm-svc-r" hidden checked />
  <input type="radio" name="ccm-svc" id="ccm-svc-1" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-2" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-3" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-4" class="ccm-svc-r" hidden />
  <input type="radio" name="ccm-svc" id="ccm-svc-5" class="ccm-svc-r" hidden />
  <div class="ccm-svc-orbit" aria-hidden="true"></div>
  <div class="ccm-svc-disc">
    <span class="ccm-svc-title ccm-svc-t-0">Industries</span>
    <span class="ccm-svc-title ccm-svc-t-1">Validation</span>
    <span class="ccm-svc-title ccm-svc-t-2">Engineering</span>
    <span class="ccm-svc-title ccm-svc-t-3">Project Mgmt</span>
    <span class="ccm-svc-title ccm-svc-t-4">Manufacturing</span>
    <span class="ccm-svc-title ccm-svc-t-5">Automation</span>
    <span class="ccm-svc-cta">Learn more →</span>
  </div>
  <div class="ccm-svc-pointer" aria-hidden="true"></div>
  <label for="ccm-svc-0" class="ccm-svc-sat" style="--i: 0" aria-label="Industries"
    ><span>♨</span></label
  >
  <label for="ccm-svc-1" class="ccm-svc-sat" style="--i: 1" aria-label="Validation"
    ><span>✓</span></label
  >
  <label for="ccm-svc-2" class="ccm-svc-sat" style="--i: 2" aria-label="Engineering"
    ><span>⚙</span></label
  >
  <label for="ccm-svc-3" class="ccm-svc-sat" style="--i: 3" aria-label="Project Management"
    ><span>◈</span></label
  >
  <label for="ccm-svc-4" class="ccm-svc-sat" style="--i: 4" aria-label="Manufacturing"
    ><span>⛭</span></label
  >
  <label for="ccm-svc-5" class="ccm-svc-sat" style="--i: 5" aria-label="Automation"
    ><span>⌬</span></label
  >
</div>
```

**CSS:**
```css
.ccm-svc {
  --n: 6;
  --ba: calc(360deg / var(--n));
  --r: 105px;
  --pa: 0deg;
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ccm-svc-orbit {
  position: absolute;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.18);
  background: radial-gradient(circle at center, rgba(124, 108, 255, 0.08), transparent 70%);
}

.ccm-svc-disc {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 24px rgba(124, 108, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
}

.ccm-svc-title {
  display: none;
  font:
    700 14px/1.2 system-ui,
    sans-serif;
  text-align: center;
  padding: 0 12px;
}

.ccm-svc-cta {
  display: block;
  margin-top: 8px;
  padding: 4px 10px;
  font:
    600 10px/1 ui-monospace,
    monospace;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-svc-cta:hover {
  background: #fff;
  color: #7c6cff;
}

.ccm-svc:has(#ccm-svc-0:checked) .ccm-svc-t-0,
.ccm-svc:has(#ccm-svc-1:checked) .ccm-svc-t-1,
.ccm-svc:has(#ccm-svc-2:checked) .ccm-svc-t-2,
.ccm-svc:has(#ccm-svc-3:checked) .ccm-svc-t-3,
.ccm-svc:has(#ccm-svc-4:checked) .ccm-svc-t-4,
.ccm-svc:has(#ccm-svc-5:checked) .ccm-svc-t-5 {
  display: block;
}

.ccm-svc-pointer {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #7c6cff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
  transform: rotate(var(--pa)) translateY(calc(var(--r) * -0.55));
  transform-origin: 50% 50%;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 3;
}

.ccm-svc:has(#ccm-svc-0:checked) {
  --pa: 0deg;
}

.ccm-svc:has(#ccm-svc-1:checked) {
  --pa: 60deg;
}

.ccm-svc:has(#ccm-svc-2:checked) {
  --pa: 120deg;
}

.ccm-svc:has(#ccm-svc-3:checked) {
  --pa: 180deg;
}

.ccm-svc:has(#ccm-svc-4:checked) {
  --pa: 240deg;
}

.ccm-svc:has(#ccm-svc-5:checked) {
  --pa: 300deg;
}

.ccm-svc-sat {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1));
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s;
  z-index: 4;
}

.ccm-svc-sat span {
  font-size: 18px;
  line-height: 1;
}

.ccm-svc-sat:hover,
.ccm-svc-sat:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}

.ccm-svc:has(#ccm-svc-0:checked) [for="ccm-svc-0"],
.ccm-svc:has(#ccm-svc-1:checked) [for="ccm-svc-1"],
.ccm-svc:has(#ccm-svc-2:checked) [for="ccm-svc-2"],
.ccm-svc:has(#ccm-svc-3:checked) [for="ccm-svc-3"],
.ccm-svc:has(#ccm-svc-4:checked) [for="ccm-svc-4"],
.ccm-svc:has(#ccm-svc-5:checked) [for="ccm-svc-5"] {
  background: #7c6cff;
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.3);
  transform: rotate(calc(var(--i) * var(--ba))) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * var(--ba) * -1)) scale(1.15);
}
```

### 03. Tactile Dial

**Type:** Pure CSS
**Description:** A brushed-steel rotary dial flanked by 5 icons arranged on a downward arc. Click any icon and the whole dial rotates left or right (-90°/-45°/0°/+45°/+90°) to "point" at the active selection, with a soft white halo around the chosen icon. Pure CSS via :checked + :has() + a CSS custom property for the rotation angle — adapted from a hardware-knob nav, simplified to drop ~10 PNG dependencies and ~100 lines of jQuery.

**HTML:**
```html
<div class="ccm-tac" role="toolbar" aria-label="Tactile Dial">
  <input type="radio" name="ccm-tac" id="ccm-tac-0" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-1" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-2" class="ccm-tac-r" hidden checked />
  <input type="radio" name="ccm-tac" id="ccm-tac-3" class="ccm-tac-r" hidden />
  <input type="radio" name="ccm-tac" id="ccm-tac-4" class="ccm-tac-r" hidden />
  <div class="ccm-tac-dial" aria-hidden="true">
    <div class="ccm-tac-mark"></div>
    <div class="ccm-tac-bevel"></div>
  </div>
  <div class="ccm-tac-arc" aria-hidden="true"></div>
  <label for="ccm-tac-0" class="ccm-tac-i" style="--p: 0" aria-label="Email"><span>✉</span></label>
  <label for="ccm-tac-1" class="ccm-tac-i" style="--p: 1" aria-label="Photos"><span>◇</span></label>
  <label for="ccm-tac-2" class="ccm-tac-i" style="--p: 2" aria-label="Cloud"><span>☁</span></label>
  <label for="ccm-tac-3" class="ccm-tac-i" style="--p: 3" aria-label="Portfolio"
    ><span>⊞</span></label
  >
  <label for="ccm-tac-4" class="ccm-tac-i" style="--p: 4" aria-label="Settings"
    ><span>⚙</span></label
  >
</div>
```

**CSS:**
```css
.ccm-tac {
  --rot: 0deg;
  position: relative;
  width: 280px;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: system-ui, sans-serif;
}

.ccm-tac-dial {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 130px;
  height: 130px;
  margin-left: -65px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #c9cfd7 0deg, #8b929c 1deg, #c9cfd7 2deg),
    linear-gradient(180deg, #c9cfd7 0%, #2b2f3e 46%, #2b2f3e 54%, #b0b7c1 100%);
  background-blend-mode: overlay, normal;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--rot));
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 2;
}

.ccm-tac-bevel {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #e8ecf0, #6b7280 70%, #2b2f3e);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5);
}

.ccm-tac-mark {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  background: linear-gradient(180deg, #fff, #94a3b8);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 3;
}

.ccm-tac:has(#ccm-tac-0:checked) {
  --rot: -50deg;
}

.ccm-tac:has(#ccm-tac-1:checked) {
  --rot: -25deg;
}

.ccm-tac:has(#ccm-tac-2:checked) {
  --rot: 0deg;
}

.ccm-tac:has(#ccm-tac-3:checked) {
  --rot: 25deg;
}

.ccm-tac:has(#ccm-tac-4:checked) {
  --rot: 50deg;
}

.ccm-tac-arc {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 250px;
  height: 250px;
  margin-left: -125px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 50%);
  mask: linear-gradient(180deg, #000 0%, #000 50%, transparent 50%);
}

.ccm-tac-i {
  position: absolute;
  bottom: calc(20px + 65px);
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-125px);
  transform-origin: 50% 50%;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.3s,
    border-color 0.25s,
    transform 0.25s;
  z-index: 4;
}

.ccm-tac-i span {
  font-size: 17px;
  line-height: 1;
  display: inline-block;
  transform: rotate(calc((var(--p) - 2) * -25deg));
}

.ccm-tac-i:hover,
.ccm-tac-i:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-130px);
}

.ccm-tac:has(#ccm-tac-0:checked) [for="ccm-tac-0"],
.ccm-tac:has(#ccm-tac-1:checked) [for="ccm-tac-1"],
.ccm-tac:has(#ccm-tac-2:checked) [for="ccm-tac-2"],
.ccm-tac:has(#ccm-tac-3:checked) [for="ccm-tac-3"],
.ccm-tac:has(#ccm-tac-4:checked) [for="ccm-tac-4"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 24px 6px rgba(255, 255, 255, 0.18);
  transform: rotate(calc((var(--p) - 2) * 25deg)) translateY(-132px);
}
```

### 04. Fan Reveal

**Type:** Pure CSS
**Description:** Six wedges of a 6-color pie that fan open from a closed stack on first paint with a staggered "deal the cards" reveal — each wedge rotates from 0° to its 60° slot with a per-wedge delay. Hover lifts the wedge outward, click locks the selection. Pure CSS keyframe animation, zero JS — adapted from a jQuery-driven menu and rebuilt with proper 60° clip-path geometry.

**HTML:**
```html
<div class="ccm-fan" role="toolbar" aria-label="Fan Reveal">
  <input type="radio" name="ccm-fan" id="ccm-fan-0" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-1" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-2" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-3" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-4" class="ccm-fan-r" hidden />
  <input type="radio" name="ccm-fan" id="ccm-fan-5" class="ccm-fan-r" hidden />
  <label for="ccm-fan-0" class="ccm-fan-w" style="--i: 0; --c: #255d74" aria-label="Home"
    ><span>home</span></label
  >
  <label for="ccm-fan-1" class="ccm-fan-w" style="--i: 1; --c: #da353b" aria-label="About"
    ><span>about</span></label
  >
  <label for="ccm-fan-2" class="ccm-fan-w" style="--i: 2; --c: #f89f44" aria-label="Contact"
    ><span>contact</span></label
  >
  <label for="ccm-fan-3" class="ccm-fan-w" style="--i: 3; --c: #78302c" aria-label="Links"
    ><span>links</span></label
  >
  <label for="ccm-fan-4" class="ccm-fan-w" style="--i: 4; --c: #002b55" aria-label="Bio"
    ><span>bio</span></label
  >
  <label for="ccm-fan-5" class="ccm-fan-w" style="--i: 5; --c: #207c6b" aria-label="Store"
    ><span>store</span></label
  >
  <span class="ccm-fan-hub" aria-hidden="true"></span>
</div>
```

**CSS:**
```css
.ccm-fan {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato", system-ui, sans-serif;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
}

.ccm-fan-w {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 5%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(circle at 50% 30%, var(--c) 0%, color-mix(in srgb, var(--c), #000 35%) 100%);
  cursor: pointer;
  clip-path: polygon(50% 50%, 25% 6.7%, 37.06% 1.92%, 50% 0%, 62.94% 1.92%, 75% 6.7%);
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  animation: ccm-fan-deal 0.9s cubic-bezier(0.49, 0.24, 0.32, 0.96) forwards;
  animation-delay: calc(var(--i) * 0.08s);
  transition:
    filter 0.3s,
    transform 0.3s;
}

.ccm-fan-w span {
  position: absolute;
  top: 24px;
  left: 50%;
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}

.ccm-fan-w:hover,
.ccm-fan-w:focus-visible {
  filter: brightness(1.18) saturate(1.2)
    drop-shadow(0 0 12px color-mix(in srgb, var(--c), white 20%));
  z-index: 2;
}

.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"],
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"],
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"],
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"],
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"],
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] {
  filter: brightness(1.45) saturate(1.5)
    drop-shadow(0 0 22px color-mix(in srgb, var(--c), white 40%))
    drop-shadow(0 0 6px color-mix(in srgb, var(--c), white 60%));
  z-index: 3;
  transform: rotate(calc(var(--i) * 60deg)) scale(1.06);
}

.ccm-fan:has(#ccm-fan-0:checked) [for="ccm-fan-0"] span,
.ccm-fan:has(#ccm-fan-1:checked) [for="ccm-fan-1"] span,
.ccm-fan:has(#ccm-fan-2:checked) [for="ccm-fan-2"] span,
.ccm-fan:has(#ccm-fan-3:checked) [for="ccm-fan-3"] span,
.ccm-fan:has(#ccm-fan-4:checked) [for="ccm-fan-4"] span,
.ccm-fan:has(#ccm-fan-5:checked) [for="ccm-fan-5"] span {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.7),
    0 0 12px rgba(255, 255, 255, 0.6);
}

.ccm-fan-hub {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
    radial-gradient(circle at center, #1f1f2e 0%, #0a0a14 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 6px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(124, 108, 255, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-fan-w {
    animation: none;
    transform: rotate(calc(var(--i) * 60deg));
  }
}

@keyframes ccm-fan-deal {
  from { transform: rotate(0deg); }
  to   { transform: rotate(calc(var(--i) * 60deg)); }
}

```

### 05. Petal Fan

**Type:** Pure CSS
**Description:** Six action buttons fan out across a 180° upper arc from a central FAB on hover, each with a staggered scale-in. Pure CSS via :hover + transition-delay per child.

**HTML:**
```html
<div class="ccm-petal">
  <input type="checkbox" id="ccm-petal-t" class="ccm-petal-t" hidden />
  <label for="ccm-petal-t" class="ccm-petal-fab" aria-label="Open menu">+</label>
  <a href="#" class="ccm-petal-i" style="--a: -90deg" aria-label="Home">⌂</a>
  <a href="#" class="ccm-petal-i" style="--a: -126deg" aria-label="Search">⌕</a>
  <a href="#" class="ccm-petal-i" style="--a: -162deg" aria-label="Star">★</a>
  <a href="#" class="ccm-petal-i" style="--a: -54deg" aria-label="Like">♥</a>
  <a href="#" class="ccm-petal-i" style="--a: -18deg" aria-label="Mail">✉</a>
  <a href="#" class="ccm-petal-i" style="--a: -198deg" aria-label="Settings">⚙</a>
</div>
```

**CSS:**
```css
.ccm-petal {
  position: relative;
  width: 220px;
  height: 140px;
}

.ccm-petal-fab {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  font-size: 26px;
  line-height: 52px;
  text-align: center;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.4s;
  box-shadow: 0 6px 18px rgba(124, 108, 255, 0.4);
  z-index: 2;
}

.ccm-petal-i {
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: translate(-50%, 0) rotate(0) translateY(0) rotate(0);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-petal:hover .ccm-petal-fab,
.ccm-petal-t:checked + .ccm-petal-fab {
  transform: translateX(-50%) rotate(45deg);
}

.ccm-petal:hover .ccm-petal-i,
.ccm-petal-t:checked ~ .ccm-petal-i {
  transform: translate(-50%, 0) rotate(var(--a)) translateY(-72px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-petal-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-petal-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-petal-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-petal-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-petal-i:nth-of-type(5) {
  transition-delay: 0.25s;
}

.ccm-petal-i:nth-of-type(6) {
  transition-delay: 0.3s;
}
```

### 06. Full Circle Wheel

**Type:** Pure CSS
**Description:** Eight items evenly distributed around a 360° ring, all visible at rest. Hover any item to scale it up; the central icon stays anchored. Pure trig via CSS variables.

**HTML:**
```html
<div class="ccm-wheel">
  <span class="ccm-wheel-c" aria-hidden="true">◉</span>
  <a href="#" class="ccm-wheel-i" style="--a: 0deg">A</a>
  <a href="#" class="ccm-wheel-i" style="--a: 45deg">B</a>
  <a href="#" class="ccm-wheel-i" style="--a: 90deg">C</a>
  <a href="#" class="ccm-wheel-i" style="--a: 135deg">D</a>
  <a href="#" class="ccm-wheel-i" style="--a: 180deg">E</a>
  <a href="#" class="ccm-wheel-i" style="--a: 225deg">F</a>
  <a href="#" class="ccm-wheel-i" style="--a: 270deg">G</a>
  <a href="#" class="ccm-wheel-i" style="--a: 315deg">H</a>
</div>
```

**CSS:**
```css
.ccm-wheel {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-wheel-c {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}

.ccm-wheel-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font:
    700 12px/32px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.3);
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.25s,
    background 0.2s,
    color 0.2s;
}

.ccm-wheel-i:hover,
.ccm-wheel-i:focus-visible {
  background: #7c6cff;
  color: #fff;
  transform: rotate(var(--a)) translate(78px) rotate(calc(var(--a) * -1)) scale(1.4);
  z-index: 2;
}
```

### 07. Pie Slice Selector

**Type:** Pure CSS
**Description:** Four pie slices, each a labelled clickable wedge. Real per-slice hit area via border-radius corners (no overlapping squares) — only the visible pie wedge receives hover and click.

**HTML:**
```html
<div class="ccm-pie">
  <a href="#" class="ccm-pie-s ccm-pie-tr" style="--c: #7c6cff" aria-label="Plan"
    ><span>Plan</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-br" style="--c: #ff6c8a" aria-label="Build"
    ><span>Build</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-bl" style="--c: #2ecc8a" aria-label="Test"
    ><span>Test</span></a
  >
  <a href="#" class="ccm-pie-s ccm-pie-tl" style="--c: #f5a84a" aria-label="Ship"
    ><span>Ship</span></a
  >
  <span class="ccm-pie-h" aria-hidden="true"></span>
</div>
```

**CSS:**
```css
.ccm-pie {
  position: relative;
  width: 170px;
  height: 170px;
}

.ccm-pie-s {
  position: absolute;
  width: 50%;
  height: 50%;
  background: var(--c);
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 0.2s,
    transform 0.2s;
  display: flex;
}

.ccm-pie-tr {
  top: 0;
  right: 0;
  border-top-right-radius: 100% 100%;
  transform-origin: 0% 100%;
}

.ccm-pie-br {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100% 100%;
  transform-origin: 0% 0%;
}

.ccm-pie-bl {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100% 100%;
  transform-origin: 100% 0%;
}

.ccm-pie-tl {
  top: 0;
  left: 0;
  border-top-left-radius: 100% 100%;
  transform-origin: 100% 100%;
}

.ccm-pie-s span {
  margin: auto;
  padding: 8px 18px;
  font:
    700 12px/1 system-ui,
    sans-serif;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ccm-pie-s:hover,
.ccm-pie-s:focus-visible {
  filter: brightness(1.18) saturate(1.15);
  transform: scale(1.04);
  z-index: 2;
}

.ccm-pie-h {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #15151d;
  border: 3px solid #17171f;
  pointer-events: none;
  z-index: 3;
}
```

### 08. Donut Sectors

**Type:** Pure CSS
**Description:** A 6-sector SVG donut with curved labels following each arc via textPath. On hover the sector pulls outward (split effect), the label brightens, and a subtle scale animation runs. Real hit-tested wedges.

**HTML:**
```html
<svg class="ccm-donut" viewBox="0 0 200 200" role="navigation" aria-label="Donut menu">
  <defs>
    <path id="ccm-donut-arc-1" d="M 100 25 A 75 75 0 0 1 164.95 62.5" />
    <path id="ccm-donut-arc-2" d="M 164.95 62.5 A 75 75 0 0 1 164.95 137.5" />
    <path id="ccm-donut-arc-3" d="M 164.95 137.5 A 75 75 0 0 1 100 175" />
    <path id="ccm-donut-arc-4" d="M 35.05 137.5 A 75 75 0 0 1 35.05 62.5" />
    <path id="ccm-donut-arc-5" d="M 100 175 A 75 75 0 0 1 35.05 137.5" />
    <path id="ccm-donut-arc-6" d="M 35.05 62.5 A 75 75 0 0 1 100 25" />
  </defs>
  <a href="#" class="ccm-donut-s" style="--c: #7c6cff" aria-label="Plan">
    <path d="M 100 100 L 100 10 A 90 90 0 0 1 177.94 55 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-1" startOffset="50%" text-anchor="middle">PLAN</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #a78bfa" aria-label="Design">
    <path d="M 100 100 L 177.94 55 A 90 90 0 0 1 177.94 145 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-2" startOffset="50%" text-anchor="middle">DESIGN</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #ff6c8a" aria-label="Build">
    <path d="M 100 100 L 177.94 145 A 90 90 0 0 1 100 190 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-3" startOffset="50%" text-anchor="middle">BUILD</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #f5a84a" aria-label="Test">
    <path d="M 100 100 L 100 190 A 90 90 0 0 1 22.06 145 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-5" startOffset="50%" text-anchor="middle">TEST</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #2ecc8a" aria-label="Ship">
    <path d="M 100 100 L 22.06 145 A 90 90 0 0 1 22.06 55 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-4" startOffset="50%" text-anchor="middle">SHIP</textPath>
    </text>
  </a>
  <a href="#" class="ccm-donut-s" style="--c: #00e5ff" aria-label="Learn">
    <path d="M 100 100 L 22.06 55 A 90 90 0 0 1 100 10 Z" fill="var(--c)" />
    <text class="ccm-donut-l">
      <textPath href="#ccm-donut-arc-6" startOffset="50%" text-anchor="middle">LEARN</textPath>
    </text>
  </a>
  <circle cx="100" cy="100" r="32" fill="#15151d" stroke="#17171f" stroke-width="3" />
  <text x="100" y="104" class="ccm-donut-c" text-anchor="middle">MENU</text>
</svg>
```

**CSS:**
```css
.ccm-donut {
  width: 200px;
  height: 200px;
  display: block;
  overflow: visible;
  font-family: ui-monospace, "SF Mono", monospace;
}

.ccm-donut-s {
  cursor: pointer;
  transform-origin: 100px 100px;
  transform: scale(1) translate(0, 0);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.2s;
  text-decoration: none;
  animation: ccm-donut-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.ccm-donut-s path {
  stroke: #17171f;
  stroke-width: 2;
  transition: filter 0.2s;
}

.ccm-donut-l {
  font:
    700 10px/1 ui-monospace,
    monospace;
  fill: #fff;
  letter-spacing: 0.18em;
  pointer-events: none;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.ccm-donut-c {
  font:
    700 9px/1 ui-monospace,
    monospace;
  fill: #c4b5fd;
  letter-spacing: 0.16em;
  pointer-events: none;
}

.ccm-donut-s:nth-of-type(1):hover,
.ccm-donut-s:nth-of-type(1):focus-visible {
  transform: translate(4px, -4px);
}

.ccm-donut-s:nth-of-type(2):hover,
.ccm-donut-s:nth-of-type(2):focus-visible {
  transform: translate(6px, 0px);
}

.ccm-donut-s:nth-of-type(3):hover,
.ccm-donut-s:nth-of-type(3):focus-visible {
  transform: translate(4px, 4px);
}

.ccm-donut-s:nth-of-type(4):hover,
.ccm-donut-s:nth-of-type(4):focus-visible {
  transform: translate(-4px, 4px);
}

.ccm-donut-s:nth-of-type(5):hover,
.ccm-donut-s:nth-of-type(5):focus-visible {
  transform: translate(-6px, 0px);
}

.ccm-donut-s:nth-of-type(6):hover,
.ccm-donut-s:nth-of-type(6):focus-visible {
  transform: translate(-4px, -4px);
}

.ccm-donut-s:hover path,
.ccm-donut-s:focus-visible path {
  filter: brightness(1.18) saturate(1.1);
}

.ccm-donut-s:nth-of-type(1) {
  animation-delay: 0.05s;
}

.ccm-donut-s:nth-of-type(2) {
  animation-delay: 0.1s;
}

.ccm-donut-s:nth-of-type(3) {
  animation-delay: 0.15s;
}

.ccm-donut-s:nth-of-type(4) {
  animation-delay: 0.2s;
}

.ccm-donut-s:nth-of-type(5) {
  animation-delay: 0.25s;
}

.ccm-donut-s:nth-of-type(6) {
  animation-delay: 0.3s;
}

@keyframes ccm-donut-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

```

### 09. Half-Donut Speed Dial

**Type:** Pure CSS
**Description:** A bottom-anchored half-arc FAB that fans 5 actions upward in a 180° spread. Each item lands on the arc at an even angle. Pure CSS via :checked.

**HTML:**
```html
<div class="ccm-half">
  <input type="checkbox" id="ccm-half-t" hidden />
  <label for="ccm-half-t" class="ccm-half-fab" aria-label="Toggle">⊕</label>
  <a href="#" class="ccm-half-i" style="--a: 180deg">A</a>
  <a href="#" class="ccm-half-i" style="--a: 225deg">B</a>
  <a href="#" class="ccm-half-i" style="--a: 270deg">C</a>
  <a href="#" class="ccm-half-i" style="--a: 315deg">D</a>
  <a href="#" class="ccm-half-i" style="--a: 0deg">E</a>
</div>
```

**CSS:**
```css
.ccm-half {
  position: relative;
  width: 220px;
  height: 130px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ccm-half-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2ecc8a, #00e5ff);
  color: #0a0f0c;
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.4s;
  z-index: 2;
  box-shadow: 0 6px 22px rgba(46, 204, 138, 0.4);
}

.ccm-half input:checked + .ccm-half-fab {
  transform: rotate(180deg);
}

.ccm-half-i {
  position: absolute;
  bottom: 28px;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 1.5px solid #2ecc8a;
  color: #2ecc8a;
  font:
    700 12px/36px ui-monospace,
    monospace;
  text-align: center;
  text-decoration: none;
  transform: translate(0, 0) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s;
}

.ccm-half input:checked ~ .ccm-half-i {
  transform: translate(0, 0) rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  opacity: 1;
}

.ccm-half-i:nth-of-type(1) {
  transition-delay: 0.05s;
}

.ccm-half-i:nth-of-type(2) {
  transition-delay: 0.1s;
}

.ccm-half-i:nth-of-type(3) {
  transition-delay: 0.15s;
}

.ccm-half-i:nth-of-type(4) {
  transition-delay: 0.2s;
}

.ccm-half-i:nth-of-type(5) {
  transition-delay: 0.25s;
}
```

### 10. Glass Dome

**Type:** Pure CSS
**Description:** A glass hemisphere with backdrop-blur and an inner highlight; menu items orbit along the dome edge. Items lift on hover. The hero of the dome family.

**HTML:**
```html
<div class="ccm-glass-bg">
  <div class="ccm-glass">
    <div class="ccm-glass-dome"></div>
    <a href="#" class="ccm-glass-i" style="--a: -150deg">⌂</a>
    <a href="#" class="ccm-glass-i" style="--a: -120deg">⌕</a>
    <a href="#" class="ccm-glass-i" style="--a: -90deg">★</a>
    <a href="#" class="ccm-glass-i" style="--a: -60deg">♥</a>
    <a href="#" class="ccm-glass-i" style="--a: -30deg">⚙</a>
  </div>
</div>
```

**CSS:**
```css
.ccm-glass-bg {
  padding: 30px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
}

.ccm-glass {
  position: relative;
  width: 200px;
  height: 110px;
}

.ccm-glass-dome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  border-radius: 100px 100px 0 0;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-bottom: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -10px 30px rgba(255, 255, 255, 0.1);
}

.ccm-glass-dome::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 20%;
  right: 50%;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(2px);
}

.ccm-glass-i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.3s,
    background 0.2s;
  backdrop-filter: blur(6px);
}

.ccm-glass-i:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.18)
    translateY(-6px);
}
```

### 11. Holographic Dome

**Type:** Pure CSS
**Description:** A translucent dome with an iridescent rim that rotates continuously via @property-animated conic gradient. The dome itself stays still; only the rim shimmers.

**HTML:**
```html
<div class="ccm-holo">
  <div class="ccm-holo-rim"></div>
  <div class="ccm-holo-dome"></div>
  <a href="#" class="ccm-holo-i" style="--a: -150deg">⌂</a>
  <a href="#" class="ccm-holo-i" style="--a: -120deg">⌕</a>
  <a href="#" class="ccm-holo-i" style="--a: -90deg">★</a>
  <a href="#" class="ccm-holo-i" style="--a: -60deg">♥</a>
  <a href="#" class="ccm-holo-i" style="--a: -30deg">⚙</a>
</div>
```

**CSS:**
```css
.ccm-holo {
  position: relative;
  width: 200px;
  height: 110px;
}

.ccm-holo-rim {
  position: absolute;
  bottom: -2px;
  left: -2px;
  right: -2px;
  height: 114px;
  border-radius: 100px 100px 0 0;
  background: conic-gradient(from var(--ccm-holo-a), #7c6cff, #ff6c8a, #2ecc8a, #00e5ff, #7c6cff);
  animation: ccm-holo-spin 4s linear infinite;
  filter: blur(0.5px);
}

.ccm-holo-dome {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  border-radius: 100px 100px 0 0;
  background: rgba(15, 15, 25, 0.7);
  backdrop-filter: blur(8px);
  border-bottom: none;
}

.ccm-holo-i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  border-radius: 50%;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #c4b5fd;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.3s,
    color 0.2s;
}

.ccm-holo-i:hover {
  color: #fff;
  transform: rotate(var(--a)) translate(95px) rotate(calc(var(--a) * -1)) scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-holo-spin { to { --ccm-holo-a: 360deg; } }

```

### 12. Single Satellite Orbit

**Type:** Pure CSS
**Description:** One satellite continuously orbits the central FAB. Hover the FAB to pause the orbit, click to "lock in" the satellite at its current angle. Pure CSS via :hover paused state.

**HTML:**
```html
<div class="ccm-orbit">
  <div class="ccm-orbit-track"></div>
  <div class="ccm-orbit-sat"><a href="#" class="ccm-orbit-i" aria-label="Item">◆</a></div>
  <a href="#" class="ccm-orbit-c" aria-label="Center">◉</a>
</div>
```

**CSS:**
```css
.ccm-orbit {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-orbit-track {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px dashed rgba(124, 108, 255, 0.3);
}

.ccm-orbit-c {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(124, 108, 255, 0.18);
}

.ccm-orbit-sat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ccm-orbit-spin 5s linear infinite;
}

.ccm-orbit-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.4);
  transform: translate(70px);
  animation: ccm-orbit-counter 5s linear infinite;
}

.ccm-orbit:hover .ccm-orbit-sat,
.ccm-orbit:hover .ccm-orbit-i {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-orbit-spin { to { transform: rotate(360deg); } }

@keyframes ccm-orbit-counter { to { transform: translate(70px) rotate(-360deg); } }

```

### 13. Solar System

**Type:** Pure CSS
**Description:** A central "sun" + 4 "planets" at decreasing orbit radii, each labelled, each orbiting at a different speed (Kepler-style — closer = faster). Real CSS animation, no JS.

**HTML:**
```html
<div class="ccm-solar">
  <a href="#" class="ccm-solar-c" aria-label="Sun">☀</a>
  <div class="ccm-solar-o ccm-solar-o1">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mercury">☿</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o2">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Venus">♀</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o3">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Earth">♁</a></span>
  </div>
  <div class="ccm-solar-o ccm-solar-o4">
    <span class="ccm-solar-pos"><a href="#" class="ccm-solar-p" aria-label="Mars">♂</a></span>
  </div>
</div>
```

**CSS:**
```css
.ccm-solar {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-solar-c {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd479, #f5a84a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  text-decoration: none;
  box-shadow: 0 0 24px #f5a84a;
  z-index: 5;
}

.ccm-solar-o {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  animation: ccm-solar-spin linear infinite;
}

.ccm-solar-o1 {
  inset: 20px;
  animation-duration: 11s;
}

.ccm-solar-o2 {
  inset: 50px;
  animation-duration: 8s;
}

.ccm-solar-o3 {
  inset: 80px;
  animation-duration: 6s;
}

.ccm-solar-o4 {
  inset: 105px;
  animation-duration: 4s;
}

.ccm-solar-pos {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
}

.ccm-solar-p {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #c4b5fd;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(124, 108, 255, 0.4);
  animation: ccm-solar-counter linear infinite;
  z-index: 6;
}

.ccm-solar-o1 .ccm-solar-p {
  animation-duration: 11s;
}

.ccm-solar-o2 .ccm-solar-p {
  animation-duration: 8s;
}

.ccm-solar-o3 .ccm-solar-p {
  animation-duration: 6s;
}

.ccm-solar-o4 .ccm-solar-p {
  animation-duration: 4s;
}

.ccm-solar-p:hover {
  background: #7c6cff;
  color: #fff;
}

.ccm-solar:hover .ccm-solar-o,
.ccm-solar:hover .ccm-solar-p {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-solar-spin { to { transform: rotate(360deg); } }

@keyframes ccm-solar-counter { to { transform: rotate(-360deg); } }

```

### 14. Hexagonal Honeycomb

**Type:** Pure CSS
**Description:** Six hexagonal items arranged around a central hex via real geometry (clip-path polygon). Each cell highlights independently. Honeycomb pattern with mathematical precision.

**HTML:**
```html
<div class="ccm-hex">
  <a href="#" class="ccm-hex-c" aria-label="Center">◆</a>
  <a href="#" class="ccm-hex-i" style="--a: -90deg" aria-label="N">N</a>
  <a href="#" class="ccm-hex-i" style="--a: -30deg" aria-label="NE">NE</a>
  <a href="#" class="ccm-hex-i" style="--a: 30deg" aria-label="SE">SE</a>
  <a href="#" class="ccm-hex-i" style="--a: 90deg" aria-label="S">S</a>
  <a href="#" class="ccm-hex-i" style="--a: 150deg" aria-label="SW">SW</a>
  <a href="#" class="ccm-hex-i" style="--a: 210deg" aria-label="NW">NW</a>
</div>
```

**CSS:**
```css
.ccm-hex {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-hex-c,
.ccm-hex-i {
  width: 50px;
  height: 58px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 11px/1 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s;
}

.ccm-hex-c {
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  position: relative;
  z-index: 2;
}

.ccm-hex-i {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -29px -25px;
  background: #1f1f2e;
  color: #c4b5fd;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1));
}

.ccm-hex-i:hover,
.ccm-hex-i:focus-visible {
  background: #2a2a3e;
  color: #fff;
  transform: rotate(var(--a)) translate(64px) rotate(calc(var(--a) * -1)) scale(1.1);
}
```

### 15. Rotating Triangle Trio

**Type:** Pure CSS
**Description:** Three triangle items rotate together in a trio formation. Hover any triangle to lift it forward. The whole group rotates slowly on idle for visual interest.

**HTML:**
```html
<div class="ccm-tri">
  <div class="ccm-tri-grp">
    <a href="#" class="ccm-tri-i" style="--a: -90deg">A</a>
    <a href="#" class="ccm-tri-i" style="--a: 30deg">B</a>
    <a href="#" class="ccm-tri-i" style="--a: 150deg">C</a>
  </div>
  <span class="ccm-tri-c" aria-hidden="true">◯</span>
</div>
```

**CSS:**
```css
.ccm-tri {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-tri-grp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ccm-tri-spin 16s linear infinite;
}

.ccm-tri-i {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6c8a, #f5a84a);
  color: #fff;
  font:
    700 14px/1 system-ui,
    sans-serif;
  text-decoration: none;
  clip-path: polygon(50% 5%, 95% 95%, 5% 95%);
  transform: rotate(var(--a)) translate(60px);
  transition: transform 0.3s;
}

.ccm-tri-i:hover {
  transform: rotate(var(--a)) translate(60px) scale(1.2);
  filter: drop-shadow(0 4px 12px rgba(255, 108, 138, 0.5));
  z-index: 2;
}

.ccm-tri-c {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 2px solid #7c6cff;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-tri-spin { to { transform: rotate(360deg); } }

```

### 16. Vinyl Record

**Type:** Pure CSS
**Description:** A spinning vinyl record menu. The disc rotates continuously; menu items sit on the label area. Pause on hover via animation-play-state. Classic music-app metaphor.

**HTML:**
```html
<div class="ccm-vinyl">
  <div class="ccm-vinyl-disc">
    <div class="ccm-vinyl-label">
      <a href="#" class="ccm-vinyl-i" style="--a: -90deg">▶</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 0deg">♫</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 90deg">♪</a>
      <a href="#" class="ccm-vinyl-i" style="--a: 180deg">⏏</a>
    </div>
  </div>
</div>
```

**CSS:**
```css
.ccm-vinyl {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-vinyl-disc {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #1a1a1a 30%, transparent 31%),
    repeating-radial-gradient(circle at center, #0a0a0a 0, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 3px);
  position: relative;
  animation: ccm-vinyl-spin 8s linear infinite;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 24px rgba(0, 0, 0, 0.5);
}

.ccm-vinyl-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: #f5a84a;
}

.ccm-vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a84a);
}

.ccm-vinyl-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-decoration: none;
  transform: rotate(var(--a)) translate(28px) rotate(calc(var(--a) * -1));
}

.ccm-vinyl-i:hover {
  background: rgba(0, 0, 0, 0.7);
}

.ccm-vinyl:hover .ccm-vinyl-disc {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-vinyl-spin { to { transform: rotate(360deg); } }

```

### 17. Compass Rose

**Type:** Pure CSS
**Description:** A nautical compass rose with N/E/S/W labels and a needle that points at the active direction. Hover any direction to rotate the needle smoothly via :has().

**HTML:**
```html
<div class="ccm-compass">
  <input type="radio" name="ccm-compass" id="ccm-compass-n" hidden checked />
  <input type="radio" name="ccm-compass" id="ccm-compass-e" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-s" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-w" hidden />
  <div class="ccm-compass-face"></div>
  <div class="ccm-compass-needle" aria-hidden="true"></div>
  <label for="ccm-compass-n" class="ccm-compass-i" style="--a: 0deg">N</label>
  <label for="ccm-compass-e" class="ccm-compass-i" style="--a: 90deg">E</label>
  <label for="ccm-compass-s" class="ccm-compass-i" style="--a: 180deg">S</label>
  <label for="ccm-compass-w" class="ccm-compass-i" style="--a: 270deg">W</label>
</div>
```

**CSS:**
```css
.ccm-compass {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-compass-face {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2a3e, #15151d);
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    inset 0 0 24px rgba(212, 175, 55, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.ccm-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 70px;
  margin: -35px -2px;
  background: linear-gradient(180deg, #ff3d6e 0 50%, #d4af37 50% 100%);
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 2px;
}

.ccm-compass:has(#ccm-compass-n:checked) .ccm-compass-needle {
  transform: rotate(0deg);
}

.ccm-compass:has(#ccm-compass-e:checked) .ccm-compass-needle {
  transform: rotate(90deg);
}

.ccm-compass:has(#ccm-compass-s:checked) .ccm-compass-needle {
  transform: rotate(180deg);
}

.ccm-compass:has(#ccm-compass-w:checked) .ccm-compass-needle {
  transform: rotate(270deg);
}

.ccm-compass-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #ffd479;
  font:
    700 12px/28px ui-monospace,
    monospace;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-compass-i:hover {
  background: rgba(212, 175, 55, 0.4);
  color: #fff;
}
```

### 18. Iris Aperture

**Type:** Pure CSS
**Description:** A camera-lens iris with 6 blades. On hover the blades "stop down" via clip-path + rotation, revealing menu items around the exposed diaphragm.

**HTML:**
```html
<div class="ccm-iris">
  <div class="ccm-iris-blade" style="--a: 0deg"></div>
  <div class="ccm-iris-blade" style="--a: 60deg"></div>
  <div class="ccm-iris-blade" style="--a: 120deg"></div>
  <div class="ccm-iris-blade" style="--a: 180deg"></div>
  <div class="ccm-iris-blade" style="--a: 240deg"></div>
  <div class="ccm-iris-blade" style="--a: 300deg"></div>
  <a href="#" class="ccm-iris-i" style="--a: -90deg">◐</a>
  <a href="#" class="ccm-iris-i" style="--a: -30deg">◑</a>
  <a href="#" class="ccm-iris-i" style="--a: 30deg">◒</a>
  <a href="#" class="ccm-iris-i" style="--a: 90deg">◓</a>
  <a href="#" class="ccm-iris-i" style="--a: 150deg">◉</a>
  <a href="#" class="ccm-iris-i" style="--a: 210deg">○</a>
</div>
```

**CSS:**
```css
.ccm-iris {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, #0a0a14 30%, #15151d);
  border: 4px solid #2a2a3e;
}

.ccm-iris-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px;
  background: linear-gradient(135deg, #2a2a3e, #15151d);
  clip-path: polygon(50% 0%, 100% 50%, 50% 50%);
  transform: rotate(var(--a)) translateY(-30px);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ccm-iris:hover .ccm-iris-blade {
  transform: rotate(calc(var(--a) + 30deg)) translateY(-50px);
}

.ccm-iris-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #00e5ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0, 229, 255, 0.4);
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
  z-index: 2;
}

.ccm-iris:hover .ccm-iris-i {
  opacity: 1;
}

.ccm-iris-i:hover {
  background: #00e5ff;
  color: #0a0a14;
}
```

### 19. Black Hole

**Type:** Pure CSS
**Description:** Items orbit a glowing accretion-disk singularity at all times. On hover the disk pulses brighter and items lift outward slightly — a gravitational "release". Items stay clickable throughout.

**HTML:**
```html
<div class="ccm-bh">
  <div class="ccm-bh-disk" aria-hidden="true"></div>
  <div class="ccm-bh-core" aria-hidden="true"></div>
  <a href="#" class="ccm-bh-i" style="--a: -90deg" aria-label="Item A">A</a>
  <a href="#" class="ccm-bh-i" style="--a: -30deg" aria-label="Item B">B</a>
  <a href="#" class="ccm-bh-i" style="--a: 30deg" aria-label="Item C">C</a>
  <a href="#" class="ccm-bh-i" style="--a: 90deg" aria-label="Item D">D</a>
  <a href="#" class="ccm-bh-i" style="--a: 150deg" aria-label="Item E">E</a>
  <a href="#" class="ccm-bh-i" style="--a: 210deg" aria-label="Item F">F</a>
</div>
```

**CSS:**
```css
.ccm-bh {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-bh-disk {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 110px;
  margin: -55px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d4af37, #ff6c8a, #7c6cff, #d4af37);
  filter: blur(6px);
  animation: ccm-bh-spin 8s linear infinite;
  transition: filter 0.4s;
  z-index: 1;
}

.ccm-bh:hover .ccm-bh-disk {
  filter: blur(4px) brightness(1.3);
}

.ccm-bh-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 30px 8px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.ccm-bh-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px;
  border-radius: 50%;
  background: #1f1f2e;
  color: #ffd479;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 12px/1 ui-monospace,
    monospace;
  text-decoration: none;
  border: 1px solid rgba(212, 175, 55, 0.5);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s,
    color 0.2s,
    box-shadow 0.3s;
  z-index: 3;
}

.ccm-bh:hover .ccm-bh-i {
  transform: rotate(var(--a)) translate(92px) rotate(calc(var(--a) * -1));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}

.ccm-bh-i:hover,
.ccm-bh-i:focus-visible {
  background: #ffd479;
  color: #0a0a14;
  transform: rotate(var(--a)) translate(96px) rotate(calc(var(--a) * -1)) scale(1.2);
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-bh-spin { to { transform: rotate(360deg); } }

```

### 20. Chronometer

**Type:** Pure CSS
**Description:** An analog watch face with menu items at hour positions. The second-hand sweeps continuously; click any hour position to "set" the menu (hand snaps to that hour).

**HTML:**
```html
<div class="ccm-chrono">
  <input type="radio" name="ccm-chrono" id="ccm-chrono-3" hidden checked />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-6" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-9" hidden />
  <input type="radio" name="ccm-chrono" id="ccm-chrono-12" hidden />
  <div class="ccm-chrono-face"></div>
  <div class="ccm-chrono-hand" aria-hidden="true"></div>
  <label for="ccm-chrono-12" class="ccm-chrono-i" style="--a: 0deg" aria-label="12">12</label>
  <label for="ccm-chrono-3" class="ccm-chrono-i" style="--a: 90deg" aria-label="3">3</label>
  <label for="ccm-chrono-6" class="ccm-chrono-i" style="--a: 180deg" aria-label="6">6</label>
  <label for="ccm-chrono-9" class="ccm-chrono-i" style="--a: 270deg" aria-label="9">9</label>
</div>
```

**CSS:**
```css
.ccm-chrono {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  --hand: 90deg;
}

.ccm-chrono-face {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #f5f5f5, #d8d8d8);
  border: 3px solid #2a2a3e;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

.ccm-chrono-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 60px;
  margin-left: -1.5px;
  background: #2a2a3e;
  border-radius: 1.5px;
  transform-origin: top center;
  transform: rotate(var(--hand));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ccm-chrono-hand::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3d6e;
}

.ccm-chrono:has(#ccm-chrono-3:checked) {
  --hand: -90deg;
}

.ccm-chrono:has(#ccm-chrono-6:checked) {
  --hand: 0deg;
}

.ccm-chrono:has(#ccm-chrono-9:checked) {
  --hand: 90deg;
}

.ccm-chrono:has(#ccm-chrono-12:checked) {
  --hand: 180deg;
}

.ccm-chrono-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  color: #2a2a3e;
  font:
    700 13px/28px Georgia,
    serif;
  text-align: center;
  cursor: pointer;
  transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s;
}

.ccm-chrono-i:hover {
  background: rgba(255, 61, 110, 0.15);
  color: #ff3d6e;
}
```

### 21. Nebula Cloud

**Type:** Pure CSS
**Description:** Items float in a soft glowing nebula cloud with no fixed grid positions. Each item has a subtle drift animation; hovering pulls it forward and brightens the surrounding glow.

**HTML:**
```html
<div class="ccm-neb">
  <div class="ccm-neb-cloud"></div>
  <a href="#" class="ccm-neb-i" style="--x: -50px; --y: -30px; --d: 0s">★</a>
  <a href="#" class="ccm-neb-i" style="--x: 30px; --y: -40px; --d: 1s">✦</a>
  <a href="#" class="ccm-neb-i" style="--x: 60px; --y: 10px; --d: 2s">✧</a>
  <a href="#" class="ccm-neb-i" style="--x: 0px; --y: 30px; --d: 1.5s">◆</a>
  <a href="#" class="ccm-neb-i" style="--x: -60px; --y: 20px; --d: 0.5s">⬢</a>
</div>
```

**CSS:**
```css
.ccm-neb {
  position: relative;
  width: 220px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-neb-cloud {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(124, 108, 255, 0.45), transparent 70%),
    radial-gradient(50% 40% at 70% 60%, rgba(255, 108, 138, 0.4), transparent 70%),
    radial-gradient(45% 35% at 50% 30%, rgba(46, 184, 138, 0.3), transparent 70%);
  filter: blur(10px);
  animation: ccm-neb-drift 10s ease-in-out infinite alternate;
}

.ccm-neb-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transform: translate(var(--x), var(--y));
  animation: ccm-neb-float 4s ease-in-out var(--d) infinite alternate;
  transition:
    transform 0.3s,
    background 0.2s,
    box-shadow 0.3s;
  z-index: 2;
}

.ccm-neb-i:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translate(var(--x), var(--y)) scale(1.3);
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-neb-drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(8px, -6px) scale(1.05); } }

@keyframes ccm-neb-float { to { transform: translate(calc(var(--x) + 4px), calc(var(--y) - 4px)); } }

```

---
## 18 CSS Close Buttons

URL: https://codefronts.com/components/css-close-buttons/
Description: 18 hand-coded CSS close buttons — rotate, magnetic cross, liquid pop, glitch, ink ripple, hold-to-confirm, origami crease and more. Pure CSS, drop-in ready.
Demo count: 18

### 01. Origami Crease

**Type:** Pure CSS
**Description:** The X is rendered as two thin paper-fold creases — on hover the button collapses inward via clip-path like an origami fold, leaving a tight diamond that vanishes.

**HTML:**
```html
<button class="ccb-origami" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-origami {
  width: 40px; height: 40px;
  border: none;
  background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 50%, #d4ccff 51%, #c4b8ff 100%);
  position: relative; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.65,0,0.35,1), transform 0.45s;
  box-shadow: 0 2px 6px rgba(60,40,140,0.2), inset -1px -1px 0 rgba(0,0,0,0.04);
}
.ccb-origami span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  background: #1a1a2e; border-radius: 1px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
}
.ccb-origami span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-origami span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-origami:hover {
  clip-path: polygon(50% 12%, 88% 50%, 50% 88%, 12% 50%);
  transform: rotate(45deg) scale(0.9);
}
.ccb-origami:active {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transform: rotate(90deg) scale(0.6);
}
```

### 02. Lock Tumble

**Type:** CSS + JS
**Description:** A padlock chrome with a shackle that tumbles open on click — the X aligns into the lock body as it unlocks. Premium choice for "remove from saved" and "unlock to dismiss" flows.

**HTML:**
```html
<button class="ccb-lock" aria-label="Unlock and close">
  <span class="ccb-lock-shackle"></span
  ><span class="ccb-lock-body"
    ><span class="ccb-lock-x1"></span><span class="ccb-lock-x2"></span
  ></span>
</button>
```

**CSS:**
```css
.ccb-lock {
  width: 40px; height: 48px;
  border: none; background: transparent;
  position: relative; cursor: pointer;
  padding: 0;
}
.ccb-lock-shackle {
  position: absolute; top: 4px; left: 50%;
  width: 20px; height: 18px;
  border: 2.5px solid #f5a623;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  transform: translateX(-50%);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
  transform-origin: bottom right;
}
.ccb-lock-body {
  position: absolute; bottom: 0; left: 50%;
  width: 30px; height: 26px;
  background: #f5a623;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: background 0.3s;
}
.ccb-lock-x1, .ccb-lock-x2 {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px;
  background: #1a1a2e; border-radius: 1px;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-lock-x1 { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-lock-x2 { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-lock.is-open .ccb-lock-shackle {
  transform: translateX(-50%) rotate(40deg) translate(4px,-2px);
  border-color: #2ecc8a;
}
.ccb-lock.is-open .ccb-lock-body { background: #2ecc8a; }
.ccb-lock.is-open .ccb-lock-x1 { transform: translate(-50%,-50%) rotate(0deg)  scaleX(1.1); }
.ccb-lock.is-open .ccb-lock-x2 { transform: translate(-50%,-50%) rotate(90deg) scaleX(1.1); }
.ccb-lock:hover .ccb-lock-shackle { border-color: #fbbf24; }
```

**JS:**
```js
document.querySelectorAll('.ccb-lock').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.toggle('is-open');
  });
});
```

### 03. Rotate Out

**Type:** Pure CSS
**Description:** A timeless close button — the X rotates 90° and the chrome scales up subtly on hover. The benchmark every dismiss button is measured against.

**HTML:**
```html
<button class="ccb-rotate" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-rotate {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: background 0.2s, transform 0.3s;
}
.ccb-rotate span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  transform-origin: center;
}
.ccb-rotate span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-rotate span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-rotate:hover {
  background: rgba(255,108,138,0.18);
  transform: rotate(90deg) scale(1.08);
}
.ccb-rotate:hover span { background: #ff6c8a; }
```

### 04. Magnetic Cross

**Type:** Pure CSS
**Description:** Two stubby horizontal bars sit apart at rest — on hover they magnetically pull toward each other and snap into a perfect X. Hyper-clean micro-interaction.

**HTML:**
```html
<button class="ccb-magnet" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-magnet {
  width: 38px; height: 38px;
  border: 1px solid rgba(124,108,255,0.3);
  border-radius: 8px;
  background: #17171f;
  position: relative; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.ccb-magnet span {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: width 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-magnet span:nth-child(1) { transform: translate(-130%,-50%) rotate(0deg); }
.ccb-magnet span:nth-child(2) { transform: translate(30%,-50%)   rotate(0deg); }
.ccb-magnet:hover { border-color: #7c6cff; background: rgba(124,108,255,0.08); }
.ccb-magnet:hover span { width: 16px; }
.ccb-magnet:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-magnet:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
```

### 05. Liquid Pop

**Type:** Pure CSS
**Description:** The circular blob morphs into a soft squashed pill on hover, then springs back releasing a tighter X. Feels rubbery and alive.

**HTML:**
```html
<button class="ccb-liquid" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-liquid {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  position: relative; cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.68,-0.55,0.27,1.55), transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-liquid span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-liquid:hover { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: scale(0.92); }
.ccb-liquid:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scaleX(1.15); }
.ccb-liquid:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scaleX(1.15); }
```

### 06. Glitch Cross

**Type:** Pure CSS
**Description:** RGB-split glitch shudders across the X every few seconds — a constant micro-twitch that screams sci-fi UI panel.

**HTML:**
```html
<button class="ccb-glitch" aria-label="Close"><span class="ccb-g-x">✕</span></button>
```

**CSS:**
```css
.ccb-glitch {
  width: 38px; height: 38px;
  border: 1px solid rgba(46,204,138,0.3);
  background: #0c0c12;
  font-size: 16px; font-weight: 700;
  cursor: pointer; position: relative;
  color: #2ecc8a;
}
.ccb-g-x { position: relative; z-index: 1; }
.ccb-glitch::before, .ccb-glitch::after {
  content: '✕';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.ccb-glitch::before { color: #ff6c8a; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: ccb-gl-t 2.4s infinite steps(2); }
.ccb-glitch::after  { color: #7c6cff; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: ccb-gl-b 2.4s infinite steps(2); }
.ccb-glitch:hover::before, .ccb-glitch:hover::after { animation-duration: 0.3s; }
@keyframes ccb-gl-t { 0%,90% { transform: translateX(0); } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 100% { transform: translateX(0); } }
@keyframes ccb-gl-b { 0%,90% { transform: translateX(0); } 92% { transform: translateX(3px);  } 94% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-glitch,
  .ccb-glitch * {
    animation: none !important;
  }
}

```

### 07. Trash Compactor

**Type:** CSS + JS
**Description:** Click and the entire button squashes vertically like a trash compactor crushing it into nothing. A satisfying physical metaphor for dismissal.

**HTML:**
```html
<button class="ccb-compact" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-compact {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(180deg, #2a2a3e, #1a1a28);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.55,0,0.45,1), opacity 0.35s;
  transform-origin: center bottom;
}
.ccb-compact span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f0eeff; border-radius: 2px;
}
.ccb-compact span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-compact span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-compact.is-crushed { transform: scaleY(0.08) scaleX(1.3); opacity: 0; }
```

**JS:**
```js
document.querySelectorAll('.ccb-compact').forEach(function(btn) {
  btn.addEventListener('click', function() {
    btn.classList.add('is-crushed');
    setTimeout(function() { btn.classList.remove('is-crushed'); }, 800);
  });
});
```

### 08. Inkwell Ripple

**Type:** CSS + JS
**Description:** Click triggers a dark ink drop that ripples outward and swallows the X for a moment. The X re-emerges when the ink drains.

**HTML:**
```html
<button class="ccb-ink" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-ink {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #f0eeff;
  position: relative; cursor: pointer;
  overflow: hidden;
}
.ccb-ink span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #1a1a28; border-radius: 2px;
  z-index: 2;
  transition: background 0.3s;
}
.ccb-ink span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-ink span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-ink-drop {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: #1a1a28; border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  z-index: 1; pointer-events: none;
}
.ccb-ink.is-poured .ccb-ink-drop { animation: ccb-ink-pour 0.9s ease-out forwards; }
.ccb-ink.is-poured span { background: #f0eeff; }
@keyframes ccb-ink-pour {
  0%   { transform: translate(-50%,-50%) scale(0); }
  40%  { transform: translate(-50%,-50%) scale(8); }
  60%  { transform: translate(-50%,-50%) scale(8); }
  100% { transform: translate(-50%,-50%) scale(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-ink,
  .ccb-ink * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.ccb-ink').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-poured')) return;
    var drop = document.createElement('span');
    drop.className = 'ccb-ink-drop';
    btn.appendChild(drop);
    btn.classList.add('is-poured');
    setTimeout(function() {
      btn.classList.remove('is-poured');
      drop.remove();
    }, 900);
  });
});
```

### 09. Particle Burst

**Type:** CSS + JS
**Description:** On click, eight small dots fan out radially from the centre and fade — the X dissolves into particles. CSS-driven, fully animated.

**HTML:**
```html
<button class="ccb-burst" aria-label="Close">
  <span class="ccb-burst-x"></span><span class="ccb-burst-x"></span>
</button>
```

**CSS:**
```css
.ccb-burst {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #ff6c8a;
  box-shadow: 0 4px 18px rgba(255,108,138,0.4);
  position: relative; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ccb-burst:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(255,108,138,0.55); }
.ccb-burst-x {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: opacity 0.15s;
}
.ccb-burst-x:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-burst-x:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-burst.is-burst .ccb-burst-x { opacity: 0; }
.ccb-burst-particle {
  position: absolute; top: 50%; left: 50%;
  width: 5px; height: 5px;
  background: #fff; border-radius: 50%;
  pointer-events: none;
  animation: ccb-particle 0.7s ease-out forwards;
}
@keyframes ccb-particle {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(0)    scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(var(--a)) translateX(28px) scale(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-burst,
  .ccb-burst * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.ccb-burst').forEach(function(btn) {
  btn.addEventListener('click', function() {
    if (btn.classList.contains('is-burst')) return;
    btn.classList.add('is-burst');
    for (var i = 0; i < 8; i++) {
      var p = document.createElement('span');
      p.className = 'ccb-burst-particle';
      p.style.setProperty('--a', (i * 45) + 'deg');
      btn.appendChild(p);
      (function(node) { setTimeout(function() { node.remove(); }, 700); })(p);
    }
    setTimeout(function() { btn.classList.remove('is-burst'); }, 700);
  });
});
```

### 10. Snap Cross

**Type:** Pure CSS
**Description:** Two diagonal bars fly in from off-button and snap together with an overshoot bounce on first paint. Perfect for things that just appeared.

**HTML:**
```html
<button class="ccb-snap" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-snap {
  width: 38px; height: 38px;
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px;
  background: rgba(245,166,35,0.12);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.2s;
}
.ccb-snap:hover { background: rgba(245,166,35,0.22); }
.ccb-snap span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f5a623; border-radius: 2px;
  animation: ccb-snap-tl 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.ccb-snap span:nth-child(1) { animation-name: ccb-snap-tl; }
.ccb-snap span:nth-child(2) { animation-name: ccb-snap-tr; animation-delay: 0.05s; }
@keyframes ccb-snap-tl {
  0%       { transform: translate(-300%,-300%) rotate(45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(45deg); opacity: 1; }
}
@keyframes ccb-snap-tr {
  0%       { transform: translate(200%,-300%)  rotate(-45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(-45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-snap,
  .ccb-snap * {
    animation: none !important;
  }
}

```

### 11. Neon Etch

**Type:** Pure CSS
**Description:** An outlined neon X sits inside a transparent ring with a slow breathing glow — built for dark dashboards and admin panels.

**HTML:**
```html
<button class="ccb-neon" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-neon {
  width: 40px; height: 40px;
  border: 1.5px solid #2ecc8a;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 8px rgba(46,204,138,0.35), inset 0 0 8px rgba(46,204,138,0.15);
  position: relative; cursor: pointer;
  animation: ccb-neon-breathe 2.4s ease-in-out infinite;
  transition: transform 0.2s;
}
.ccb-neon:hover { transform: scale(1.1); }
.ccb-neon span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #2ecc8a;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(46,204,138,0.7);
}
.ccb-neon span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-neon span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
@keyframes ccb-neon-breathe {
  0%,100% { box-shadow: 0 0 8px  rgba(46,204,138,0.35), inset 0 0 8px  rgba(46,204,138,0.15); }
  50%      { box-shadow: 0 0 18px rgba(46,204,138,0.7),  inset 0 0 14px rgba(46,204,138,0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-neon,
  .ccb-neon * {
    animation: none !important;
  }
}

```

### 12. Ribbon Tag

**Type:** Pure CSS
**Description:** Looks like a removable label/sticker — the X is integrated into a tag-shaped chrome with a notched left edge. Perfect for filter chips.

**HTML:**
```html
<button class="ccb-tag" aria-label="Remove tag">React<span class="ccb-tag-x"></span></button>
```

**CSS:**
```css
.ccb-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 18px;
  border: none;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%);
  transition: background 0.2s, color 0.2s;
}
.ccb-tag:hover { background: rgba(124,108,255,0.3); color: #fff; }
.ccb-tag-x {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-block;
  transition: background 0.2s;
}
.ccb-tag-x::before, .ccb-tag-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 7px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.ccb-tag-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-tag-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-tag:hover .ccb-tag-x { background: rgba(255,255,255,0.3); }
```

### 13. Fold Away

**Type:** Pure CSS
**Description:** On hover the button physically folds away on its Y-axis like a closing book — 3D rotateY with perspective for a tactile dismissal.

**HTML:**
```html
<button class="ccb-fold" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-fold {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  position: relative; cursor: pointer;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.ccb-fold span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  backface-visibility: hidden;
}
.ccb-fold span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-fold span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-fold:hover  { transform: rotateY(75deg); }
.ccb-fold:active { transform: rotateY(180deg); }
```

### 14. Hold to Confirm

**Type:** CSS + JS
**Description:** A safety net for destructive actions — press and hold for 800ms while the ring fills clockwise, release early to cancel. Releases on full ring.

**HTML:**
```html
<button class="ccb-hold" aria-label="Hold to close">
  <svg viewBox="0 0 40 40" class="ccb-hold-ring"><circle cx="20" cy="20" r="18" /></svg><span></span
  ><span></span>
</button>
```

**CSS:**
```css
.ccb-hold {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: rgba(255,108,138,0.12);
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-hold:hover { background: rgba(255,108,138,0.2); }
.ccb-hold-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); pointer-events: none;
}
.ccb-hold-ring circle {
  fill: none; stroke: #ff6c8a; stroke-width: 2;
  stroke-dasharray: 113; stroke-dashoffset: 113;
  transition: stroke-dashoffset 0.05s linear;
}
.ccb-hold.is-holding .ccb-hold-ring circle {
  transition: stroke-dashoffset 0.8s linear;
  stroke-dashoffset: 0;
}
.ccb-hold span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #ff6c8a; border-radius: 2px;
}
.ccb-hold span:nth-child(2) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-hold span:nth-child(3) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-hold.is-confirmed { background: rgba(46,204,138,0.25); transform: scale(1.1); }
.ccb-hold.is-confirmed span { background: #2ecc8a; }
.ccb-hold.is-confirmed .ccb-hold-ring circle { stroke: #2ecc8a; }
```

**JS:**
```js
document.querySelectorAll('.ccb-hold').forEach(function(btn) {
  var timer;
  function start() {
    btn.classList.add('is-holding');
    timer = setTimeout(function() {
      btn.classList.remove('is-holding');
      btn.classList.add('is-confirmed');
      setTimeout(function() { btn.classList.remove('is-confirmed'); }, 600);
    }, 800);
  }
  function cancel() {
    clearTimeout(timer);
    btn.classList.remove('is-holding');
  }
  btn.addEventListener('mousedown', start);
  btn.addEventListener('touchstart', start, { passive: true });
  btn.addEventListener('mouseup',    cancel);
  btn.addEventListener('mouseleave', cancel);
  btn.addEventListener('touchend',   cancel);
});
```

### 15. Toast Dismiss

**Type:** CSS + JS
**Description:** A fully-fledged toast notification with an X — clicking slides the toast off-canvas to the right while fading, the way a real production toast behaves.

**HTML:**
```html
<div class="ccb-toast">
  <span class="ccb-toast-dot"></span><span class="ccb-toast-msg">Saved successfully</span
  ><button class="ccb-toast-x" aria-label="Dismiss"><span></span><span></span></button>
</div>
```

**CSS:**
```css
.ccb-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px;
  border-radius: 10px;
  background: #1a1a28;
  border: 1px solid rgba(46,204,138,0.25);
  color: #f0eeff; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.45s cubic-bezier(0.55,0,0.45,1), opacity 0.45s;
}
.ccb-toast.is-out { transform: translateX(120%); opacity: 0; }
.ccb-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc8a; box-shadow: 0 0 8px rgba(46,204,138,0.5);
}
.ccb-toast-msg { white-space: nowrap; }
.ccb-toast-x {
  width: 22px; height: 22px;
  border: none; border-radius: 6px;
  background: transparent;
  position: relative; cursor: pointer;
  transition: background 0.2s;
}
.ccb-toast-x:hover { background: rgba(255,255,255,0.08); }
.ccb-toast-x span {
  position: absolute; top: 50%; left: 50%;
  width: 10px; height: 1.5px;
  background: #6b6987; border-radius: 1px;
  transition: background 0.2s;
}
.ccb-toast-x:hover span { background: #f0eeff; }
.ccb-toast-x span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-toast-x span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
```

**JS:**
```js
document.querySelectorAll('.ccb-toast').forEach(function(toast) {
  var x = toast.querySelector('.ccb-toast-x');
  if (!x) return;
  x.addEventListener('click', function() {
    toast.classList.add('is-out');
    setTimeout(function() { toast.classList.remove('is-out'); }, 1400);
  });
});
```

### 16. Modal Corner

**Type:** Pure CSS
**Description:** A larger absolute-positioned corner X — the kind you put on lightboxes and image galleries. Hover leaves a soft purple trail behind the cursor.

**HTML:**
```html
<button class="ccb-corner" aria-label="Close modal"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-corner {
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}
.ccb-corner::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle at center, rgba(124,108,255,0.4) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s;
}
.ccb-corner:hover { background: rgba(255,255,255,0.1); border-color: rgba(124,108,255,0.4); }
.ccb-corner:hover::before { opacity: 1; }
.ccb-corner span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #f0eeff; border-radius: 2px;
  z-index: 1;
  transition: background 0.25s, transform 0.3s;
}
.ccb-corner span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-corner span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-corner:hover span { background: #fff; }
.ccb-corner:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg); }
.ccb-corner:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg); }
```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** A bold offset-shadow stamp button straight from the brutalist playbook — hard edges, monospace label "DISMISS", press collapses into the shadow.

**HTML:**
```html
<button class="ccb-brutalist" aria-label="Dismiss">
  <span class="ccb-brutalist-x"></span>DISMISS
</button>
```

**CSS:**
```css
.ccb-brutalist {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 2px solid #f0eeff;
  border-radius: 0;
  background: #f0eeff;
  color: #111118;
  font-family: monospace; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.ccb-brutalist:hover  { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.ccb-brutalist:active { transform: translate(5px,5px);   box-shadow: 0 0 0 #ff6c8a; }
.ccb-brutalist-x {
  position: relative;
  width: 14px; height: 14px;
  display: inline-block;
}
.ccb-brutalist-x::before, .ccb-brutalist-x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2.5px;
  background: #111118;
}
.ccb-brutalist-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-brutalist-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
```

### 18. Galaxy Vortex

**Type:** Pure CSS
**Description:** A conic-gradient vortex swirls slowly behind the X at rest, then accelerates dramatically on hover — the ultimate premium "this is special" close button.

**HTML:**
```html
<button class="ccb-vortex" aria-label="Close"><span></span><span></span></button>
```

**CSS:**
```css
.ccb-vortex {
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: #0c0c12;
  position: relative; cursor: pointer; overflow: hidden;
  isolation: isolate;
}
.ccb-vortex::before {
  content: ''; position: absolute; inset: -25%;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  animation: ccb-vortex-spin 6s linear infinite;
  z-index: -2;
}
.ccb-vortex::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1a1a28, #0c0c12 70%);
  z-index: -1;
}
.ccb-vortex:hover::before { animation-duration: 1.2s; }
.ccb-vortex span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 2px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-vortex span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-vortex span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-vortex:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scale(1.1); }
.ccb-vortex:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scale(1.1); }
@keyframes ccb-vortex-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ccb-vortex,
  .ccb-vortex * {
    animation: none !important;
  }
}

```

---
## 12 CSS Dark Mode UI Patterns

URL: https://codefronts.com/design-styles/css-dark-mode-ui/
Description: 12 free CSS dark-mode UI patterns — OLED true-black, single-accent surfaces, layered slate, and emissive glow effects with copy-paste HTML and CSS.
Demo count: 12

### 01. OLED Card

**Type:** Pure CSS
**Description:** True-black background that switches off OLED pixels entirely — paired with a single accent stroke for the active element.

**HTML:**
```html
<div class="dm-oled-bg">
  <article class="dm-oled">
    <span class="dm-oled__tag">NEW</span>
    <h3 class="dm-oled__title">Battery saver</h3>
    <p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
    <button class="dm-oled__btn">Learn more →</button>
  </article>
</div>
```

**CSS:**
```css
.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  color: #ededed;
}
.dm-oled__tag {
  display: inline-block;
  background: transparent;
  color: #4ade80;
  border: 1px solid #4ade80;
  padding: 2px 8px; border-radius: 4px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
  background: none; border: none;
  color: #4ade80; padding: 0;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
  transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }
```

### 02. Stealth Panel

**Type:** Pure CSS
**Description:** Surfaces hide behind a near-black background — only the active control reveals itself with a hairline stroke.

**HTML:**
```html
<div class="dm-stealth-bg">
  <div class="dm-stealth">
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Status</span>
      <span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Latency</span>
      <span class="dm-stealth__val">42 ms</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Region</span>
      <span class="dm-stealth__val">us-east-1</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 8px;
}
.dm-stealth__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dm-stealth__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
  font: 500 11px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
  font: 600 12px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }
```

### 03. Inkwell Modal

**Type:** Pure CSS
**Description:** Deep-black dialog with a single warm-amber rim — the kind of confirmation modal that whispers instead of shouting.

**HTML:**
```html
<div class="dm-ink-bg">
  <div class="dm-ink">
    <div class="dm-ink__icon">!</div>
    <h3 class="dm-ink__title">Save your work?</h3>
    <p class="dm-ink__body">Unsaved changes will be lost when you close.</p>
    <div class="dm-ink__row">
      <button class="dm-ink__btn">Discard</button>
      <button class="dm-ink__btn dm-ink__btn--primary">Save</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-ink-bg { padding: 28px; border-radius: 16px; background: #0a0905; }
.dm-ink {
  background: #000;
  border: 1px solid #d4a017;
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 8px 32px rgba(212, 160, 23, 0.1);
}
.dm-ink__icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border: 1.5px solid #d4a017;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 18px ui-serif, Georgia;
  color: #d4a017;
}
.dm-ink__title { margin: 0 0 6px; font: 700 14px system-ui, sans-serif; color: #fff; }
.dm-ink__body  { margin: 0 0 16px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-ink__row { display: flex; gap: 8px; justify-content: center; }
.dm-ink__btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  transition: all 0.18s;
}
.dm-ink__btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.dm-ink__btn--primary {
  background: #d4a017; color: #000; border-color: #d4a017;
}
.dm-ink__btn--primary:hover { background: #f5b818; border-color: #f5b818; }
```

### 04. Cyber Terminal

**Type:** Pure CSS
**Description:** Phosphor-green CRT terminal aesthetic — text and chrome share one accent color, suggesting a coherent technical voice.

**HTML:**
```html
<div class="dm-cyber-bg">
  <div class="dm-cyber">
    <div class="dm-cyber__head">
      <span class="dm-cyber__dot"></span>
      <span>node-01.codefronts.io</span>
    </div>
    <div class="dm-cyber__body">
      <div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
      <div class="dm-cyber__line">→ Build complete in 8.42s</div>
      <div class="dm-cyber__line">→ 158 pages · 0 errors</div>
      <div class="dm-cyber__line">
        <span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
  background: #020a05;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: #4ade80;
  overflow: hidden;
}
.dm-cyber__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 11px;
  color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }
```

### 05. Mocha Workstation

**Type:** Pure CSS
**Description:** Warm coffee-tone dark mode — espresso brown surfaces with cream highlights for a cozy reading-app aesthetic.

**HTML:**
```html
<div class="dm-mocha-bg">
  <article class="dm-mocha">
    <div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
    <h3 class="dm-mocha__title">The art of restraint</h3>
    <p class="dm-mocha__body">
      In the long view, less surface area means fewer maintenance burdens. Choose carefully what you
      build.
    </p>
    <div class="dm-mocha__author">
      <span class="dm-mocha__avatar">M</span>
      <span>Marcus Rivera</span>
    </div>
  </article>
</div>
```

**CSS:**
```css
.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
  background: #2a1f18;
  border: 1px solid #3d2c20;
  border-radius: 10px;
  padding: 18px 22px;
  color: #f5e6d3;
}
.dm-mocha__meta {
  font: 700 10px ui-monospace, monospace;
  color: #c9a961;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body  { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px system-ui, sans-serif;
  color: #c9a961;
  padding-top: 12px;
  border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
  width: 22px; height: 22px;
  background: #c9a961;
  color: #1c1410;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px system-ui, sans-serif;
}
```

### 06. Forest Dim

**Type:** Pure CSS
**Description:** Deep evergreen surfaces with sage accents — a calmer alternative to violet/cyan dark modes for reading-heavy interfaces.

**HTML:**
```html
<div class="dm-forest-bg">
  <div class="dm-forest">
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◉</span>
      <div class="dm-forest__body">
        <b>Garden updates</b>
        <span>3 plants ready to harvest</span>
      </div>
    </div>
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◐</span>
      <div class="dm-forest__body">
        <b>Soil moisture</b>
        <span>Below threshold — water soon</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-forest-bg { padding: 24px; border-radius: 16px; background: #0a1612; }
.dm-forest {
  background: #0e1f1a;
  border: 1px solid #1a3329;
  border-radius: 10px;
  padding: 6px;
}
.dm-forest__row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 7px;
  transition: background 0.18s;
}
.dm-forest__row:hover { background: rgba(143, 179, 163, 0.07); }
.dm-forest__row + .dm-forest__row { border-top: 1px solid #1a3329; margin-top: 4px; padding-top: 16px; }
.dm-forest__icon {
  width: 28px; height: 28px;
  background: rgba(143, 179, 163, 0.12);
  color: #8fb3a3;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dm-forest__body { display: flex; flex-direction: column; gap: 2px; }
.dm-forest__body b    { font: 600 12px system-ui, sans-serif; color: #d6e6dd; }
.dm-forest__body span { font: 11px system-ui, sans-serif; color: #8fb3a3; }
```

### 07. Slate Stack

**Type:** Pure CSS
**Description:** Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.

**HTML:**
```html
<div class="dm-slate-bg">
  <div class="dm-slate">
    <div class="dm-slate__head">
      <span class="dm-slate__title">Quarterly revenue</span>
      <span class="dm-slate__pill">Q1 2026</span>
    </div>
    <div class="dm-slate__num">$248,392</div>
    <div class="dm-slate__delta">+18.4% from last quarter</div>
  </div>
</div>
```

**CSS:**
```css
.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; }
.dm-slate {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 18px 20px;
  color: #f1f5f9;
}
.dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-slate__title {
  font: 600 12px system-ui, sans-serif;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.dm-slate__pill {
  background: #334155;
  color: #cbd5e1;
  padding: 3px 10px; border-radius: 12px;
  font: 600 10px ui-monospace, monospace;
}
.dm-slate__num {
  font: 800 26px/1 system-ui, sans-serif;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.dm-slate__delta {
  font: 600 11px system-ui, sans-serif;
  color: #4ade80;
}
```

### 08. Carbon Shelves

**Type:** Pure CSS
**Description:** List rows shelving against a darker rail — alternating row depth without alternating colors keeps long lists scannable.

**HTML:**
```html
<div class="dm-carbon-bg">
  <div class="dm-carbon">
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/auth.ts</span>
      <span class="dm-carbon__meta">2.4 KB · 3 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/session.ts</span>
      <span class="dm-carbon__meta">1.8 KB · 7 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/users.ts</span>
      <span class="dm-carbon__meta">4.1 KB · 14 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">db/schema.sql</span>
      <span class="dm-carbon__meta">12.3 KB · 1 hour ago</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
  background: #14141c;
  border: 1px solid #1f1f2e;
  border-radius: 8px;
  overflow: hidden;
}
.dm-carbon__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  background: #14141c;
  transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
  font: 600 12px ui-monospace, monospace;
  color: #e2e8f0;
}
.dm-carbon__meta {
  font: 500 10.5px ui-monospace, monospace;
  color: #6b7080;
  letter-spacing: 0.02em;
}
```

### 09. Onyx Ladder

**Type:** Pure CSS
**Description:** Vertical step indicator on a series of dark surfaces — each completed step glows gently, future steps stay quiet.

**HTML:**
```html
<div class="dm-onyx-bg">
  <ol class="dm-onyx">
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Account created</b><small>10:42 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Email verified</b><small>10:44 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--active">
      <span class="dm-onyx__dot"></span>
      <div><b>Profile setup</b><small>In progress</small></div>
    </li>
    <li class="dm-onyx__step">
      <span class="dm-onyx__dot"></span>
      <div><b>Workspace ready</b><small>Pending</small></div>
    </li>
  </ol>
</div>
```

**CSS:**
```css
.dm-onyx-bg { padding: 24px; border-radius: 16px; background: #0a0a14; }
.dm-onyx {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  overflow: hidden;
}
.dm-onyx__step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-left: 2px solid transparent;
}
.dm-onyx__step + .dm-onyx__step { border-top: 1px solid #1f1f30; }
.dm-onyx__step b     { display: block; font: 600 12px system-ui, sans-serif; color: #cbd5e1; }
.dm-onyx__step small { font: 500 10px ui-monospace, monospace; color: #6b7080; }
.dm-onyx__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a2a3d;
  flex-shrink: 0;
}
.dm-onyx__step--done .dm-onyx__dot { background: #6366f1; }
.dm-onyx__step--done b { color: #fff; }
.dm-onyx__step--active {
  background: rgba(99, 102, 241, 0.06);
  border-left-color: #6366f1;
}
.dm-onyx__step--active .dm-onyx__dot {
  background: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15);
}
.dm-onyx__step--active b { color: #c7d2fe; }
```

### 10. Phosphor Card

**Type:** Pure CSS
**Description:** Card with a glowing accent line on its left edge — the kind of "now playing" highlight that draws the eye in dark dashboards.

**HTML:**
```html
<div class="dm-phos-bg">
  <article class="dm-phos">
    <div class="dm-phos__top">
      <span class="dm-phos__live">● LIVE</span>
      <span class="dm-phos__count">2,341 watching</span>
    </div>
    <h3 class="dm-phos__title">React Server Components Deep Dive</h3>
    <p class="dm-phos__body">A walk through the boundaries between server and client.</p>
  </article>
</div>
```

**CSS:**
```css
.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
  position: relative;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  padding: 16px 20px 16px 22px;
  overflow: hidden;
}
.dm-phos::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #ec4899;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
  font: 700 10px ui-monospace, monospace;
  color: #ec4899;
  letter-spacing: 0.12em;
}
.dm-phos__count {
  font: 500 10px ui-monospace, monospace;
  color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body  { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }
```

### 11. Aurora Dim

**Type:** Pure CSS
**Description:** Dark surface with a soft drifting aurora glow underneath — the aurora is heavily blurred so it never competes with content.

**HTML:**
```html
<div class="dm-aurora-bg">
  <div class="dm-aurora">
    <div class="dm-aurora__icon">◈</div>
    <div class="dm-aurora__body">
      <b>Premium activated</b>
      <span>Welcome to Aurora Pass.</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.dm-aurora-bg {
  position: relative; padding: 32px;
  border-radius: 16px; overflow: hidden;
  background: #0a0a14;
}
.dm-aurora-bg::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
  filter: blur(32px);
  pointer-events: none;
}
.dm-aurora {
  position: relative;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b    { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }
```

### 12. Ember Pulse

**Type:** Pure CSS
**Description:** Notification badge with a warm orange glow that subtly breathes — designed for low-priority but persistent alerts.

**HTML:**
```html
<div class="dm-ember-bg">
  <div class="dm-ember">
    <div class="dm-ember__icon">
      <span class="dm-ember__pulse"></span>
      <span class="dm-ember__core"></span>
    </div>
    <div class="dm-ember__body">
      <b>Build attention needed</b>
      <span>3 warnings · 0 errors · last run 2m ago</span>
    </div>
    <button class="dm-ember__btn">Review →</button>
  </div>
</div>
```

**CSS:**
```css
.dm-ember-bg { padding: 28px; border-radius: 16px; background: #0a0a10; }
.dm-ember {
  background: #14141c;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.dm-ember__icon {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.dm-ember__core {
  width: 12px; height: 12px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.5);
  z-index: 2;
}
.dm-ember__pulse {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5), transparent 70%);
  border-radius: 50%;
  animation: dm-ember-breath 2.5s ease-in-out infinite;
}
@keyframes dm-ember-breath {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50%      { transform: scale(1.1); opacity: 0.8; }
}
.dm-ember__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-ember__body b    { font: 600 12px system-ui, sans-serif; color: #f5f5f5; }
.dm-ember__body span { font: 11px ui-monospace, monospace; color: #6b7080; }
.dm-ember__btn {
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 6px 12px; border-radius: 6px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.dm-ember__btn:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.55); }
@media (prefers-reduced-motion: reduce) { .dm-ember__pulse { animation: none; } }
```

---
## 16 CSS Floating Action Button Designs

URL: https://codefronts.com/components/css-floating-buttons/
Description: 16 hand-coded CSS floating action button designs — speed dial, pulse, morphing FAB, scroll-to-top, notification badge, voice action and more. Semantic HTML, copy-paste ready.
Demo count: 16

### 01. Classic Plus

**Type:** Pure CSS
**Description:** The benchmark FAB — a solid gradient circle with a + icon that lifts on hover with a deepening shadow. The pattern every Material design system reaches for first.

**HTML:**
```html
<button type="button" class="cfb-classic" aria-label="Create new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-classic {
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(124,108,255,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
}
.cfb-classic:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(124,108,255,0.5);
  filter: brightness(1.05);
}
.cfb-classic:active { transform: translateY(-1px); }
.cfb-classic:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-classic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
```

### 02. Speed Dial

**Type:** Pure CSS
**Description:** Hover or focus reveals 3 child actions arcing upward — the classic FAB speed-dial. Keyboard accessible because focus stays within the group via :focus-within.

**HTML:**
```html
<div class="cfb-dial" role="group" aria-label="Quick create">
  <button type="button" class="cfb-dial-main" aria-label="Open quick actions" aria-expanded="false">
    +
  </button>
  <button type="button" class="cfb-dial-c cfb-dial-c1" aria-label="New document">📄</button>
  <button type="button" class="cfb-dial-c cfb-dial-c2" aria-label="New folder">📁</button>
  <button type="button" class="cfb-dial-c cfb-dial-c3" aria-label="Upload file">⬆</button>
</div>
```

**CSS:**
```css
.cfb-dial {
  position: relative;
  width: 56px; height: 56px;
}
.cfb-dial button {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.2s, opacity 0.25s;
}
.cfb-dial-main {
  z-index: 2;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #ff6c8a, #ff9a76);
  color: #fff;
  font: 700 26px/1 system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(255,108,138,0.4);
}
.cfb-dial:hover .cfb-dial-main,
.cfb-dial:focus-within .cfb-dial-main { transform: rotate(45deg); }
.cfb-dial-c {
  z-index: 1;
  bottom: 0; left: 0;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
}
.cfb-dial:hover .cfb-dial-c,
.cfb-dial:focus-within .cfb-dial-c { opacity: 1; pointer-events: auto; }
.cfb-dial:hover .cfb-dial-c1,
.cfb-dial:focus-within .cfb-dial-c1 { transform: translateY(-60px); }
.cfb-dial:hover .cfb-dial-c2,
.cfb-dial:focus-within .cfb-dial-c2 { transform: translate(48px, -42px); }
.cfb-dial:hover .cfb-dial-c3,
.cfb-dial:focus-within .cfb-dial-c3 { transform: translateX(60px); }
.cfb-dial button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
```

### 03. Pulse Ring

**Type:** Pure CSS
**Description:** A continuous concentric pulse ring radiates outward — the attention-getter pattern for "new feature" or "tap me" prompts. Pure CSS via box-shadow keyframes.

**HTML:**
```html
<button type="button" class="cfb-pulse" aria-label="What's new">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2v6m0 0a4 4 0 0 0-4 4v3.5L6 17h12l-2-1.5V12a4 4 0 0 0-4-4z" />
    <path d="M9 17a3 3 0 0 0 6 0" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-pulse {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a623);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(255,108,138,0.4);
}
.cfb-pulse::before, .cfb-pulse::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,108,138,0.55);
  animation: cfb-pulse-ring 1.8s ease-out infinite;
}
.cfb-pulse::after { animation-delay: 0.9s; }
@keyframes cfb-pulse-ring {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1.7);  opacity: 0; }
}
.cfb-pulse:hover { filter: brightness(1.08); }
.cfb-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cfb-pulse svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .cfb-pulse,
  .cfb-pulse * {
    animation: none !important;
  }
}

```

### 04. Morphing FAB

**Type:** Pure CSS
**Description:** The circle morphs into a search input on hover — width and border-radius animate together, the icon sliding to the left edge. Premium micro-interaction.

**HTML:**
```html
<form class="cfb-morph" role="search">
  <input type="search" placeholder="Search…" aria-label="Search" />
  <span class="cfb-morph-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  </span>
</form>
```

**CSS:**
```css
.cfb-morph {
  position: relative;
  display: inline-block;
  height: 52px;
}
.cfb-morph input {
  width: 52px; height: 52px;
  padding: 0 16px 0 48px;
  border: 0; outline: none;
  background: linear-gradient(135deg, #2eb88a, #06b6d4);
  border-radius: 26px;
  color: #fff;
  font: 500 14px/52px system-ui, sans-serif;
  box-shadow: 0 6px 16px rgba(46,184,138,0.35);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.65,0,0.35,1), padding 0.4s, background 0.3s;
}
.cfb-morph input::placeholder { color: rgba(255,255,255,0.7); }
.cfb-morph:hover input,
.cfb-morph input:focus { width: 240px; cursor: text; }
.cfb-morph-icon {
  position: absolute; top: 50%; left: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}
.cfb-morph-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
```

### 05. Labeled Pill

**Type:** Pure CSS
**Description:** Pill-shape with icon + text label ("+ New project") — wider than a circle, more discoverable for first-time users. Common pattern in modern dashboards.

**HTML:**
```html
<button type="button" class="cfb-pill">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <line x1="12" y1="5" x2="12" y2="19" />
    <line x1="5" y1="12" x2="19" y2="12" />
  </svg>
  <span>New project</span>
</button>
```

**CSS:**
```css
.cfb-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px 14px 18px;
  border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff;
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(124,108,255,0.35);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
}
.cfb-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(124,108,255,0.45);
  filter: brightness(1.05);
}
.cfb-pill:active { transform: translateY(0); }
.cfb-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
```

### 06. Scroll to Top

**Type:** Pure CSS
**Description:** Up-arrow FAB with a subtle bounce on hover — the canonical "back to top" affordance. Keyboard accessible, focus-visible ring, semantic anchor.

**HTML:**
```html
<a href="#top" class="cfb-top" aria-label="Back to top">
  <svg viewBox="0 0 24 24" aria-hidden="true"><polyline points="18 15 12 9 6 15" /></svg>
</a>
```

**CSS:**
```css
.cfb-top {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #cbd5e1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.25s, background 0.2s, border-color 0.2s, color 0.2s;
}
.cfb-top:hover {
  transform: translateY(-4px);
  background: rgba(124,108,255,0.12);
  border-color: rgba(124,108,255,0.4);
  color: #a78bfa;
  animation: cfb-top-bounce 0.6s ease-in-out infinite alternate;
}
.cfb-top:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cfb-top-bounce {
  from { transform: translateY(-4px); }
  to   { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-top,
  .cfb-top * {
    animation: none !important;
  }
}

```

### 07. Neon Cyber

**Type:** Pure CSS
**Description:** Synthwave neon outline FAB that intensifies on hover — perfect for cyberpunk, gaming, and developer-tool aesthetics. Dark backdrop assumed.

**HTML:**
```html
<button type="button" class="cfb-neon" aria-label="Execute">
  <svg viewBox="0 0 24 24" aria-hidden="true"><polygon points="6 4 20 12 6 20 6 4" /></svg>
</button>
```

**CSS:**
```css
.cfb-neon {
  width: 56px; height: 56px;
  border: 1.5px solid #6cffff;
  border-radius: 50%;
  background: rgba(10,0,20,0.85);
  color: #6cffff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(108,255,255,0.4), inset 0 0 8px rgba(108,255,255,0.15);
  transition: box-shadow 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.cfb-neon:hover {
  border-color: #ff6cff;
  color: #ff6cff;
  box-shadow: 0 0 24px rgba(255,108,255,0.7), 0 0 48px rgba(255,108,255,0.3), inset 0 0 12px rgba(255,108,255,0.2);
  transform: scale(1.05);
}
.cfb-neon:focus-visible { outline: 2px solid #ff6cff; outline-offset: 4px; }
.cfb-neon svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1; stroke-linejoin: round; }
```

### 08. Glass FAB

**Type:** Pure CSS
**Description:** Frosted-glass FAB with backdrop blur — sits beautifully over hero images, gradients, and patterned backgrounds. Border softens on hover.

**HTML:**
```html
<div class="cfb-glass-bg">
  <button type="button" class="cfb-glass" aria-label="Quick action">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.cfb-glass-bg {
  display: inline-flex;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2a1a4a 0%, #4a2a6a 50%, #ff6c8a 100%);
}
.cfb-glass {
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.cfb-glass:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.45);
  transform: translateY(-2px);
}
.cfb-glass:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-glass svg { width: 20px; height: 20px; fill: currentColor; }
```

### 09. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset shadow, monospace text, zero radius — the brutalist FAB. Press collapses into the shadow on focus / active for tactile feedback.

**HTML:**
```html
<button type="button" class="cfb-brut">
  <span>NEW</span>
</button>
```

**CSS:**
```css
.cfb-brut {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 22px;
  border: 2.5px solid #1a1a2e;
  background: #f0eeff;
  color: #1a1a2e;
  font: 800 14px/1 'Courier New', monospace;
  letter-spacing: 0.14em;
  cursor: pointer;
  box-shadow: 6px 6px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cfb-brut:hover  { transform: translate(-1px,-1px); box-shadow: 7px 7px 0 #ff6c8a; }
.cfb-brut:active,
.cfb-brut:focus-visible { transform: translate(6px,6px); box-shadow: 0 0 0 #ff6c8a; outline: none; }
```

### 10. Notification Badge

**Type:** Pure CSS
**Description:** FAB with a pulsing red badge showing unread count — pure CSS. The badge uses a separate keyframe so the underlying button stays static.

**HTML:**
```html
<button type="button" class="cfb-badge" aria-label="Inbox, 3 unread">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M22 2 11 13" />
    <path d="m22 2-7 20-4-9-9-4 20-7z" />
  </svg>
  <span class="cfb-badge-dot" aria-hidden="true">3</span>
</button>
```

**CSS:**
```css
.cfb-badge {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #0ea5e9);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(6,182,212,0.35);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cfb-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(6,182,212,0.5); }
.cfb-badge:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-badge-dot {
  position: absolute; top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px;
  background: #ff5d6c;
  color: #fff;
  font: 700 11px/22px 'JetBrains Mono', monospace;
  text-align: center;
  border: 2px solid #111118;
  box-shadow: 0 0 0 0 rgba(255,93,108,0.7);
  animation: cfb-badge-ping 1.6s ease-out infinite;
}
@keyframes cfb-badge-ping {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,93,108,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255,93,108,0); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-badge,
  .cfb-badge * {
    animation: none !important;
  }
}

```

### 11. Loading Spinner

**Type:** CSS + JS
**Description:** Click triggers a loading state — the icon swaps for a spinner, button is disabled, returns to ready after 1.5s. Demonstrates the async-action FAB pattern.

**HTML:**
```html
<button type="button" class="cfb-load" aria-label="Save changes" data-cfb-load>
  <svg class="cfb-load-icon" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
    <polyline points="17 21 17 13 7 13 7 21" />
    <polyline points="7 3 7 8 15 8" />
  </svg>
  <span class="cfb-load-spin" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.cfb-load {
  position: relative;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #2eb88a, #06b6d4);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(46,184,138,0.35);
  transition: transform 0.2s, opacity 0.2s;
}
.cfb-load:hover { transform: translateY(-2px); }
.cfb-load:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-load:disabled { cursor: wait; opacity: 0.85; }
.cfb-load svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s; }
.cfb-load-spin {
  position: absolute; inset: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: cfb-load-rot 0.7s linear infinite;
}
.cfb-load.is-loading .cfb-load-icon { opacity: 0; }
.cfb-load.is-loading .cfb-load-spin { opacity: 1; }
@keyframes cfb-load-rot { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cfb-load,
  .cfb-load * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Loading FAB — click triggers spinner state, returns to ready after 1.5s
document.querySelectorAll('[data-cfb-load]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    if (btn.classList.contains('is-loading')) return;
    btn.classList.add('is-loading');
    btn.disabled = true;
    setTimeout(function () {
      btn.classList.remove('is-loading');
      btn.disabled = false;
    }, 1500);
  });
});
```

### 12. Drag Handle

**Type:** Pure CSS
**Description:** FAB with a 6-dot grip pattern signaling it\u2019s draggable. cursor: grab (and grabbing on :active) makes the affordance unmistakable.

**HTML:**
```html
<button type="button" class="cfb-drag" aria-label="Drag to reposition">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="9" cy="6" r="1.5" />
    <circle cx="15" cy="6" r="1.5" />
    <circle cx="9" cy="12" r="1.5" />
    <circle cx="15" cy="12" r="1.5" />
    <circle cx="9" cy="18" r="1.5" />
    <circle cx="15" cy="18" r="1.5" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-drag {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: #1a1a28;
  color: #b8b6d4;
  cursor: grab;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.cfb-drag:hover {
  background: rgba(124,108,255,0.1);
  border-color: rgba(124,108,255,0.4);
  color: #a78bfa;
}
.cfb-drag:active { cursor: grabbing; transform: scale(0.95); }
.cfb-drag:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-drag svg { width: 18px; height: 18px; fill: currentColor; }
```

### 13. Voice Action

**Type:** CSS + JS
**Description:** Mic FAB that toggles a recording state on click — pulses a red halo while "listening". aria-pressed reflects state for screen readers.

**HTML:**
```html
<button
  type="button"
  class="cfb-voice"
  aria-label="Start voice input"
  aria-pressed="false"
  data-cfb-voice
>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <rect x="9" y="3" width="6" height="11" rx="3" />
    <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-voice {
  position: relative;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.12);
  color: #a78bfa;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.cfb-voice:hover { background: #1f1f2e; border-color: rgba(167,139,250,0.4); }
.cfb-voice:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-voice svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cfb-voice[aria-pressed="true"] {
  background: linear-gradient(135deg, #ff6c8a, #ff5d6c);
  border-color: transparent;
  color: #fff;
}
.cfb-voice[aria-pressed="true"]::before,
.cfb-voice[aria-pressed="true"]::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,108,138,0.6);
  animation: cfb-voice-pulse 1.4s ease-out infinite;
}
.cfb-voice[aria-pressed="true"]::after { animation-delay: 0.7s; }
@keyframes cfb-voice-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-voice,
  .cfb-voice * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Voice FAB — toggle aria-pressed (mock recording state for the demo)
document.querySelectorAll('[data-cfb-voice]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var on = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', on ? 'false' : 'true');
    btn.setAttribute('aria-label', on ? 'Start voice input' : 'Stop voice input');
    // Hook real Web Speech API here:
    // const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  });
});
```

### 14. Premium Aurora

**Type:** Pure CSS
**Description:** A soft aurora gradient drifts gently behind the FAB on a 14s loop — the "this is a premium product" floating button. Gentle motion, no chromatic spin.

**HTML:**
```html
<button type="button" class="cfb-aurora" aria-label="Upgrade">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <polygon points="12 2 15 8 22 9 17 14 18 21 12 18 6 21 7 14 2 9 9 8 12 2" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-aurora {
  position: relative;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: #15151d;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.cfb-aurora::before {
  content: ''; position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 220%;
  background:
    radial-gradient(ellipse 60px 50px at 20% 50%, rgba(124,108,255,0.7), transparent 60%),
    radial-gradient(ellipse 50px 40px at 60% 50%, rgba(255,108,138,0.6), transparent 60%),
    radial-gradient(ellipse 60px 50px at 100% 50%, rgba(46,204,138,0.45), transparent 60%);
  filter: blur(8px);
  z-index: -1;
  animation: cfb-aurora-drift 14s ease-in-out infinite;
}
.cfb-aurora:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124,108,255,0.4); }
.cfb-aurora:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-aurora svg { width: 22px; height: 22px; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255,255,255,0.4)); }
@keyframes cfb-aurora-drift {
  0%, 100% { transform: translateX(0)    translateY(0); }
  50%       { transform: translateX(-8%) translateY(2%); }
}

@media (prefers-reduced-motion: reduce) {
  .cfb-aurora,
  .cfb-aurora * {
    animation: none !important;
  }
}

```

### 15. Quick Reply

**Type:** Pure CSS
**Description:** Click expands into 4 emoji reactions — the messaging-app reaction picker pattern. Uses :focus-within for keyboard accessibility (focus a reaction without it disappearing).

**HTML:**
```html
<div class="cfb-reply">
  <button
    type="button"
    class="cfb-reply-main"
    aria-label="React with emoji"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="12" cy="12" r="10" />
      <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" />
    </svg>
  </button>
  <div class="cfb-reply-pop" role="group" aria-label="Reactions">
    <button type="button" aria-label="Like">👍</button>
    <button type="button" aria-label="Love">❤️</button>
    <button type="button" aria-label="Laugh">😂</button>
    <button type="button" aria-label="Celebrate">🎉</button>
  </div>
</div>
```

**CSS:**
```css
.cfb-reply {
  position: relative;
}
.cfb-reply-main {
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: linear-gradient(135deg, #f5a623, #ff6c8a);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(245,166,35,0.35);
  transition: transform 0.2s;
}
.cfb-reply-main:hover { transform: scale(1.05); }
.cfb-reply-main:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cfb-reply-main svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfb-reply-pop {
  position: absolute;
  bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) scale(0.6);
  display: flex; gap: 4px;
  padding: 6px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none;
  transform-origin: center bottom;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.cfb-reply:hover .cfb-reply-pop,
.cfb-reply:focus-within .cfb-reply-pop {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.cfb-reply-pop button {
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.cfb-reply-pop button:hover {
  transform: scale(1.25);
  background: rgba(255,255,255,0.08);
}
.cfb-reply-pop button:focus-visible { outline: 2px solid #f5a623; outline-offset: 2px; }
```

### 16. Square Modern

**Type:** Pure CSS
**Description:** Squircle (rounded square) FAB with subtle hover tilt — the 2025 design trend that breaks from the always-circular FAB. Apple-inspired.

**HTML:**
```html
<button type="button" class="cfb-square" aria-label="Compose">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
  </svg>
</button>
```

**CSS:**
```css
.cfb-square {
  width: 56px; height: 56px;
  border: 0; border-radius: 18px;
  background: linear-gradient(135deg, #1f1f2e, #15151d);
  color: #cbd5e1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, color 0.2s, border-color 0.2s;
}
.cfb-square:hover {
  transform: rotate(-6deg) translateY(-3px);
  color: #a78bfa;
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 12px 32px rgba(124,108,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.cfb-square:active { transform: rotate(0) translateY(0); }
.cfb-square:focus-visible { outline: 2px solid #7c6cff; outline-offset: 3px; }
.cfb-square svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
```

---
## 15 CSS Footer Designs

URL: https://codefronts.com/layouts/css-footer-designs/
Description: 15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.
Demo count: 15

### 01. Aurora Drift

**Type:** Pure CSS
**Description:** Modern SaaS footer with a slowly drifting aurora-band gradient behind a 4-column link grid. Brand block on the left, newsletter capture on the right, gradient meta line at the bottom. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf01">
  <div class="cf01b">
    <div class="cf01brand">
      <div class="cf01logo"><span>◆</span> Lumen</div>
      <p class="cf01tag">Build at the speed of thought.</p>
      <div class="cf01social">
        <a href="#" aria-label="Twitter">𝕏</a>
        <a href="#" aria-label="GitHub">◐</a>
        <a href="#" aria-label="LinkedIn">in</a>
        <a href="#" aria-label="YouTube">▶</a>
      </div>
    </div>
    <div class="cf01col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Integrations</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
      <a href="#">Roadmap</a>
    </div>
    <div class="cf01col">
      <h4>Resources</h4>
      <a href="#">Documentation</a>
      <a href="#">API reference</a>
      <a href="#">Tutorials</a>
      <a href="#">Community</a>
      <a href="#">Status</a>
    </div>
    <div class="cf01col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Customers</a>
      <a href="#">Blog</a>
      <a href="#">Careers</a>
      <a href="#">Press kit</a>
    </div>
    <div class="cf01news">
      <h4>Stay updated</h4>
      <p>Monthly product news. No spam.</p>
      <form class="cf01form">
        <input type="email" placeholder="you@company.com" aria-label="Email" />
        <button type="submit">Subscribe</button>
      </form>
    </div>
  </div>
  <div class="cf01meta">
    <span>© 2026 Lumen Inc.</span>
    <div class="cf01legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
      <a href="#">Security</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf01 {
  position: relative;
  width: 100%;
  padding: 56px 32px 0;
  background: #0a0a14;
  color: #d4d2e8;
  font-family: ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
}
.cf01::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -10%;
  width: 120%;
  height: 220px;
  background:
    radial-gradient(60% 100% at 30% 50%, #7c6cff 0%, transparent 70%),
    radial-gradient(50% 100% at 75% 50%, #ec4899 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  animation: cf01-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cf01-drift {
  0% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(5%);
  }
}
.cf01b {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf01brand {
  min-width: 0;
}
.cf01logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font:
    800 22px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  margin-bottom: 14px;
}
.cf01logo span {
  color: #a78bfa;
  font-size: 22px;
}
.cf01tag {
  margin: 0 0 18px;
  font-size: 13px;
  color: #9d9bbf;
  line-height: 1.5;
  max-width: 240px;
}
.cf01social {
  display: flex;
  gap: 8px;
}
.cf01social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4d2e8;
  text-decoration: none;
  font-size: 14px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.cf01social a:hover {
  background: rgba(167, 139, 250, 0.18);
  border-color: #a78bfa;
  color: #fff;
}
.cf01col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cf01col h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf01col a {
  font-size: 13px;
  color: #9d9bbf;
  text-decoration: none;
  transition: color 0.2s;
}
.cf01col a:hover {
  color: #fff;
}
.cf01news {
  min-width: 0;
}
.cf01news h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf01news p {
  margin: 0 0 12px;
  font-size: 12px;
  color: #9d9bbf;
}
.cf01form {
  display: flex;
  gap: 6px;
}
.cf01form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.cf01form input:focus {
  border-color: #a78bfa;
  background: rgba(255, 255, 255, 0.08);
}
.cf01form button {
  padding: 9px 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
  border: 0;
  border-radius: 6px;
  color: #fff;
  font:
    600 12px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition: transform 0.15s;
}
.cf01form button:hover {
  transform: translateY(-1px);
}
.cf01meta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 0 22px;
  font-size: 12px;
  color: #6a6890;
  flex-wrap: wrap;
}
.cf01legal {
  display: flex;
  gap: 18px;
}
.cf01legal a {
  color: #9d9bbf;
  text-decoration: none;
  transition: color 0.2s;
}
.cf01legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf01b {
    grid-template-columns: 1fr 1fr;
  }
  .cf01brand,
  .cf01news {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf01b {
    grid-template-columns: 1fr;
  }
  .cf01brand,
  .cf01news {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf01::before {
    animation: none;
  }
}
```

### 02. Newspaper Masthead

**Type:** Pure CSS
**Description:** Editorial publishing-house footer styled as a newspaper masthead. Serif drop-cap brand glyph on cream stock, gilt double rules, three-column section list. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf02">
  <div class="cf02rule"></div>
  <div class="cf02b">
    <div class="cf02brand">
      <div class="cf02drop">T</div>
      <div class="cf02bn">
        <div class="cf02name">The Standard</div>
        <div class="cf02tag">Est. 1898 · Daily Edition · No. 9,742</div>
      </div>
    </div>
    <div class="cf02col">
      <h4>Sections</h4>
      <a href="#">Front Page</a>
      <a href="#">World</a>
      <a href="#">Politics</a>
      <a href="#">Business</a>
      <a href="#">Opinion</a>
      <a href="#">Culture</a>
    </div>
    <div class="cf02col">
      <h4>Subscribe</h4>
      <a href="#">Daily Digital</a>
      <a href="#">Weekend Print</a>
      <a href="#">Newsletter</a>
      <a href="#">Gift a subscription</a>
      <a href="#">Group rates</a>
    </div>
    <div class="cf02col">
      <h4>Masthead</h4>
      <a href="#">About us</a>
      <a href="#">Editorial board</a>
      <a href="#">Contact editor</a>
      <a href="#">Submit a tip</a>
      <a href="#">Letters policy</a>
    </div>
  </div>
  <div class="cf02rule"></div>
  <div class="cf02foot">
    <span>© 2026 The Standard Publishing Co. — All rights reserved.</span>
    <div class="cf02legal">
      <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Subscriber agreement</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf02 {
  width: 100%;
  padding: 0 32px;
  background: #f5ead0;
  color: #1a1a1a;
  font-family: ui-serif, "Times New Roman", Georgia, serif;
  box-sizing: border-box;
}
.cf02rule {
  height: 5px;
  border-top: 1.5px solid #b8860b;
  border-bottom: 1.5px solid #b8860b;
  margin: 0;
}
.cf02b {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 36px 0 32px;
}
.cf02brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}
.cf02drop {
  font-size: 64px;
  line-height: 0.85;
  font-weight: 700;
  color: #c43a32;
  padding: 4px 6px 2px;
  border: 2px solid #1a1a1a;
  flex-shrink: 0;
}
.cf02bn {
  min-width: 0;
}
.cf02name {
  font:
    700 26px/1.05 ui-serif,
    "Times New Roman",
    Georgia,
    serif;
  letter-spacing: -0.01em;
}
.cf02tag {
  margin-top: 6px;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #5c5240;
}
.cf02col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cf02col h4 {
  margin: 0 0 8px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b8860b;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.18);
}
.cf02col a {
  font:
    14px/1.5 ui-serif,
    Georgia,
    serif;
  color: #1a1a1a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf02col a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf02foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 0 18px;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #5c5240;
  flex-wrap: wrap;
}
.cf02legal a {
  color: #5c5240;
  text-decoration: none;
  transition: color 0.2s;
}
.cf02legal a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf02b {
    grid-template-columns: 1fr 1fr;
  }
  .cf02brand {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf02b {
    grid-template-columns: 1fr;
  }
  .cf02brand {
    grid-column: auto;
  }
}
```

### 03. Newsletter Hero

**Type:** CSS + JS
**Description:** Personal blog / creator footer dominated by a centered newsletter capture. Oversized email field, animated checkmark on submit, minimal nav strip below. JS handles the success-state checkmark animation.

**HTML:**
```html
<footer class="cf05">
  <div class="cf05hero">
    <h2 class="cf05h">Get one short essay every Friday.</h2>
    <p class="cf05p">No promotions. No "growth hacks." Unsubscribe with one click.</p>
    <form class="cf05f" data-cf05>
      <input type="email" placeholder="you@personal.com" aria-label="Email" required />
      <button type="submit">
        <span class="cf05bt">Subscribe</span>
        <svg class="cf05ck" viewBox="0 0 24 24" aria-hidden="true">
          <path
            d="M5 12l5 5L20 7"
            stroke="currentColor"
            stroke-width="2.5"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
    </form>
    <div class="cf05count">Joined by <strong>4,128</strong> readers</div>
  </div>
  <nav class="cf05n">
    <a href="#">Essays</a>
    <a href="#">About</a>
    <a href="#">Bookshelf</a>
    <a href="#">Now</a>
    <a href="#">RSS</a>
    <a href="#">Contact</a>
  </nav>
  <div class="cf05meta">© 2026 Mira Okafor — Personal corner of the internet.</div>
</footer>
```

**CSS:**
```css
.cf05 {
  width: 100%;
  padding: 64px 24px 28px;
  background: #fdfaf3;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
  text-align: center;
}
.cf05hero {
  max-width: 640px;
  margin: 0 auto 36px;
}
.cf05h {
  margin: 0 0 10px;
  font:
    700 32px/1.2 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  letter-spacing: -0.02em;
}
.cf05p {
  margin: 0 0 24px;
  font:
    16px/1.55 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf05f {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 16px;
}
.cf05f input {
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid #2a2520;
  border-radius: 10px;
  font:
    15px ui-sans-serif,
    system-ui;
  color: #2a2520;
  outline: none;
  transition: border-color 0.2s;
}
.cf05f input:focus {
  border-color: #c43a32;
}
.cf05f button {
  position: relative;
  padding: 14px 22px;
  background: #2a2520;
  border: 2px solid #2a2520;
  border-radius: 10px;
  color: #fdfaf3;
  font:
    600 14px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  min-width: 120px;
}
.cf05f button:hover {
  background: #c43a32;
  border-color: #c43a32;
}
.cf05f.cf05-ok button {
  background: #2d8a3e;
  border-color: #2d8a3e;
}
.cf05bt {
  transition: opacity 0.2s;
}
.cf05ck {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  color: #fdfaf3;
  opacity: 0;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: opacity 0.2s;
}
.cf05f.cf05-ok .cf05bt {
  opacity: 0;
}
.cf05f.cf05-ok .cf05ck {
  opacity: 1;
  animation: cf05-draw 0.45s 0.15s forwards ease-out;
}
@keyframes cf05-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.cf05count {
  font:
    italic 13px ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
}
.cf05count strong {
  color: #2a2520;
  font-weight: 700;
}
.cf05n {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid rgba(42, 37, 32, 0.15);
  border-bottom: 1px solid rgba(42, 37, 32, 0.15);
  margin: 0 auto;
  max-width: 720px;
}
.cf05n a {
  font:
    14px/1 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  text-decoration: none;
  transition: color 0.2s;
}
.cf05n a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cf05meta {
  margin-top: 18px;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
}
@media (prefers-reduced-motion: reduce) {
  .cf05ck {
    transition: none;
    animation: none;
    stroke-dashoffset: 0;
  }
}
```

**JS:**
```js
/* Newsletter Hero — submit shows checkmark draw + button color shift,
   then reverts after 2.6s. Demo only — no actual network call. */
(function () {
  var form = document.querySelector("[data-cf05]");
  if (!form) return;
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    if (form.classList.contains("cf05-ok")) return;
    form.classList.add("cf05-ok");
    setTimeout(function () {
      form.classList.remove("cf05-ok");
      form.reset();
    }, 2600);
  });
})();
```

### 04. Postcard

**Type:** Pure CSS
**Description:** Travel / lifestyle footer with a Polaroid-style brand card rotated 1.5° on the left, dotted-border "wish you were here" feel, and three column link blocks beside it. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf06">
  <div class="cf06b">
    <div class="cf06card">
      <div class="cf06img" aria-hidden="true">⛵</div>
      <div class="cf06cap">
        <div class="cf06cn">Driftways</div>
        <div class="cf06ct">Slow travel · Est. 2018</div>
      </div>
    </div>
    <div class="cf06col">
      <h4>Wander</h4>
      <a href="#">Destinations</a>
      <a href="#">Itineraries</a>
      <a href="#">Field guides</a>
      <a href="#">Packing lists</a>
      <a href="#">Slow trains</a>
    </div>
    <div class="cf06col">
      <h4>Stories</h4>
      <a href="#">Recent essays</a>
      <a href="#">Photo journals</a>
      <a href="#">Reader letters</a>
      <a href="#">Audio dispatches</a>
      <a href="#">Issue archive</a>
    </div>
    <div class="cf06col">
      <h4>Studio</h4>
      <a href="#">About</a>
      <a href="#">Contributors</a>
      <a href="#">Submissions</a>
      <a href="#">Bookshop</a>
      <a href="#">Newsletter</a>
    </div>
  </div>
  <div class="cf06meta">
    <span>© 2026 Driftways · Made slowly in Lisbon, Tokyo, and Mexico City.</span>
  </div>
</footer>
```

**CSS:**
```css
.cf06 {
  width: 100%;
  padding: 56px 32px 28px;
  background: #ebe3d3;
  color: #2a2520;
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}
.cf06b {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 28px;
  border-bottom: 1.5px dashed rgba(42, 37, 32, 0.25);
  align-items: flex-start;
}
.cf06card {
  background: #fff;
  padding: 14px 14px 18px;
  box-shadow:
    0 8px 22px rgba(42, 37, 32, 0.18),
    0 2px 6px rgba(42, 37, 32, 0.08);
  transform: rotate(-1.5deg);
  transition: transform 0.3s;
}
.cf06card:hover {
  transform: rotate(0deg) translateY(-2px);
}
.cf06img {
  aspect-ratio: 1;
  background: #c8b89e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}
.cf06cap {
  padding-top: 12px;
  text-align: center;
}
.cf06cn {
  font:
    700 18px/1.1 "Bradley Hand",
    "Marker Felt",
    ui-serif,
    cursive;
  color: #2a2520;
}
.cf06ct {
  font:
    11px/1.4 ui-sans-serif,
    system-ui;
  color: #6b6056;
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.cf06col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf06col h4 {
  margin: 0 0 6px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c43a32;
}
.cf06col a {
  font-size: 14px;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.2s;
}
.cf06col a:hover {
  color: #c43a32;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf06meta {
  max-width: 1100px;
  margin: 18px auto 0;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  text-align: center;
}
@media (max-width: 880px) {
  .cf06b {
    grid-template-columns: 1fr 1fr;
  }
  .cf06card {
    grid-column: span 2;
    max-width: 240px;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  .cf06b {
    grid-template-columns: 1fr;
  }
  .cf06card {
    grid-column: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf06card {
    transition: none;
  }
}
```

### 05. Brutalist Mono

**Type:** Pure CSS
**Description:** Agency / portfolio footer in brutalist mono — heavy 4px black borders, hard yellow background, hard offset shadows, all-caps labels. Aggressive, confident, and unmistakable. Pure CSS.

**HTML:**
```html
<footer class="cf07">
  <div class="cf07b">
    <div class="cf07brand">
      <div class="cf07mark">/CF/</div>
      <div class="cf07tag">DESIGN STUDIO · BERLIN · EST. 2017</div>
    </div>
    <div class="cf07col">
      <h4>WORK</h4>
      <a href="#">Selected projects</a>
      <a href="#">Case studies</a>
      <a href="#">Awards</a>
      <a href="#">Press</a>
    </div>
    <div class="cf07col">
      <h4>STUDIO</h4>
      <a href="#">About us</a>
      <a href="#">Process</a>
      <a href="#">Hiring</a>
      <a href="#">Contact</a>
    </div>
    <div class="cf07col">
      <h4>WRITE</h4>
      <a href="#">Journal</a>
      <a href="#">Notes</a>
      <a href="#">Talks</a>
      <a href="#">Bookshelf</a>
    </div>
  </div>
  <div class="cf07cta">
    <span>NEW PROJECT?</span>
    <a href="#">HELLO@CODEFRONTS.STUDIO →</a>
  </div>
  <div class="cf07meta">
    <span>© 2026 — ALL RIGHTS RESERVED.</span>
    <span>NO COOKIES. NO TRACKING. NO BS.</span>
  </div>
</footer>
```

**CSS:**
```css
.cf07 {
  width: 100%;
  padding: 36px 32px 24px;
  background: #fef0c7;
  color: #0a0a0a;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
  border-top: 4px solid #0a0a0a;
}
.cf07b {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 4px solid #0a0a0a;
}
.cf07brand {
  min-width: 0;
  padding: 18px 20px;
  background: #0a0a0a;
  color: #fef0c7;
  box-shadow: 6px 6px 0 0 #c43a32;
}
.cf07mark {
  font:
    900 36px/1 ui-monospace,
    "SF Mono",
    monospace;
  letter-spacing: -0.02em;
}
.cf07tag {
  margin-top: 10px;
  font:
    700 11px/1.4 ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  color: #fef0c7;
  opacity: 0.7;
}
.cf07col {
  padding: 18px 20px;
  background: #fff;
  border: 3px solid #0a0a0a;
  box-shadow: 4px 4px 0 0 #0a0a0a;
  min-width: 0;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out;
}
.cf07col:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #0a0a0a;
}
.cf07col h4 {
  margin: 0 0 12px;
  font:
    900 13px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  padding-bottom: 8px;
  border-bottom: 2px solid #0a0a0a;
}
.cf07col a {
  display: block;
  padding: 4px 0;
  font:
    600 13px/1.5 ui-sans-serif,
    system-ui;
  color: #0a0a0a;
  text-decoration: none;
  transition:
    color 0.2s,
    padding-left 0.2s;
}
.cf07col a:hover {
  color: #c43a32;
  padding-left: 4px;
}
.cf07cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 18px 22px;
  background: #c43a32;
  color: #fef0c7;
  border: 3px solid #0a0a0a;
  box-shadow: 6px 6px 0 0 #0a0a0a;
  flex-wrap: wrap;
}
.cf07cta span {
  font:
    900 14px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
}
.cf07cta a {
  font:
    900 16px/1 ui-monospace,
    monospace;
  color: #fef0c7;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.cf07cta a:hover {
  color: #fff;
}
.cf07meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
}
@media (max-width: 880px) {
  .cf07b {
    grid-template-columns: 1fr 1fr;
  }
  .cf07brand {
    grid-column: span 2;
  }
}
@media (max-width: 480px) {
  .cf07b {
    grid-template-columns: 1fr;
  }
  .cf07brand {
    grid-column: auto;
  }
  .cf07cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf07col {
    transition: none;
  }
}
```

### 06. Vinyl Record

**Type:** Pure CSS
**Description:** Music / podcast brand footer with a slowly spinning vinyl record on the left and a static tonearm resting on it. Three column link sections to the right. CSS animation drives the spin; respects prefers-reduced-motion.

**HTML:**
```html
<footer class="cf11">
  <div class="cf11b">
    <div class="cf11player">
      <div class="cf11disc">
        <div class="cf11label">
          <div class="cf11ln">Audiograph</div>
          <div class="cf11ld">2018-2026</div>
        </div>
      </div>
      <div class="cf11arm" aria-hidden="true">
        <div class="cf11pivot"></div>
        <div class="cf11needle"></div>
      </div>
    </div>
    <div class="cf11side">
      <div class="cf11brand">
        <div class="cf11logo">◉ Audiograph</div>
        <p>A weekly podcast about analog craft in a digital age.</p>
        <div class="cf11platforms">
          <a href="#">Spotify</a><span>·</span> <a href="#">Apple</a><span>·</span>
          <a href="#">Overcast</a><span>·</span>
          <a href="#">RSS</a>
        </div>
      </div>
      <div class="cf11cols">
        <div class="cf11col">
          <h4>Listen</h4>
          <a href="#">Latest episode</a>
          <a href="#">Archive</a>
          <a href="#">Show notes</a>
        </div>
        <div class="cf11col">
          <h4>About</h4>
          <a href="#">Hosts</a>
          <a href="#">Patrons</a>
          <a href="#">Press</a>
        </div>
        <div class="cf11col">
          <h4>Connect</h4>
          <a href="#">Newsletter</a>
          <a href="#">Twitter</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
  </div>
  <div class="cf11meta">© 2026 Audiograph · Recorded in a converted barn in upstate New York.</div>
</footer>
```

**CSS:**
```css
.cf11 {
  width: 100%;
  padding: 48px 32px 24px;
  background: #1c1814;
  color: #e8d5a8;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf11b {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 24px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(232, 213, 168, 0.15);
}
.cf11player {
  position: relative;
  width: 220px;
  height: 220px;
}
.cf11disc {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #1c1814 0%, #1c1814 32%, #0a0807 33%, #0a0807 100%);
  position: relative;
  box-shadow:
    inset 0 0 0 1px rgba(232, 213, 168, 0.18),
    0 6px 24px rgba(0, 0, 0, 0.6);
  animation: cf11-spin 5s linear infinite;
}
.cf11disc::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    transparent 0 4px,
    rgba(232, 213, 168, 0.04) 4px 5px
  );
  pointer-events: none;
}
.cf11disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  background: #1c1814;
  border-radius: 50%;
  border: 1px solid rgba(232, 213, 168, 0.4);
}
.cf11label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  background: #c43a32;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cf11ln {
  font:
    700 9px/1 ui-serif,
    Georgia,
    serif;
  color: #fef0c7;
  letter-spacing: 0.06em;
}
.cf11ld {
  font:
    8px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(254, 240, 199, 0.7);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
@keyframes cf11-spin {
  to {
    transform: rotate(360deg);
  }
}
.cf11arm {
  position: absolute;
  top: -10px;
  right: -22px;
  width: 130px;
  height: 16px;
  transform-origin: right center;
  transform: rotate(-22deg);
  pointer-events: none;
}
.cf11pivot {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background: #b8860b;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.cf11needle {
  position: absolute;
  left: 0;
  top: 7px;
  width: 110px;
  height: 3px;
  background: #d4af37;
  border-radius: 1px;
}
.cf11needle::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 7px;
  height: 7px;
  background: #d4af37;
  border-radius: 50%;
}
.cf11side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cf11brand {
  min-width: 0;
}
.cf11logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #e8d5a8;
  margin-bottom: 8px;
}
.cf11brand p {
  margin: 0 0 12px;
  font:
    italic 14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #c4ad7a;
}
.cf11platforms {
  font-size: 12px;
}
.cf11platforms a {
  color: #d4af37;
  text-decoration: none;
  transition: color 0.2s;
}
.cf11platforms a:hover {
  color: #fef0c7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf11platforms span {
  color: #6b5e3f;
  margin: 0 4px;
}
.cf11cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cf11col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf11col h4 {
  margin: 0 0 4px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4af37;
}
.cf11col a {
  font:
    13px/1.5 ui-serif,
    Georgia,
    serif;
  color: #e8d5a8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf11col a:hover {
  color: #fef0c7;
}
.cf11meta {
  max-width: 1100px;
  margin: 0 auto;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b5e3f;
  text-align: center;
}
@media (max-width: 880px) {
  .cf11b {
    grid-template-columns: 1fr;
  }
  .cf11player {
    margin: 0 auto;
  }
  .cf11cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf11cols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf11disc {
    animation: none;
  }
}
```

### 07. Neon Sign

**Type:** Pure CSS
**Description:** Nightlife / gaming brand footer with an animated neon-tube wordmark that flickers irregularly, hot-pink glow halo, dark-room backdrop. Three column link sections in muted neon. Pure CSS keyframes drive the flicker.

**HTML:**
```html
<footer class="cf12">
  <div class="cf12bg" aria-hidden="true"></div>
  <div class="cf12brand">
    <h2 class="cf12sign">FLUX<span>·</span>BAR</h2>
    <p class="cf12sub">Open till sunrise · Brooklyn NY · 21+</p>
  </div>
  <div class="cf12b">
    <div class="cf12col">
      <h4>Visit</h4>
      <a href="#">Hours</a>
      <a href="#">Reservations</a>
      <a href="#">Private events</a>
      <a href="#">Directions</a>
    </div>
    <div class="cf12col">
      <h4>Tonight</h4>
      <a href="#">DJ schedule</a>
      <a href="#">Cocktail menu</a>
      <a href="#">Specials</a>
      <a href="#">Photos</a>
    </div>
    <div class="cf12col">
      <h4>Connect</h4>
      <a href="#">Instagram</a>
      <a href="#">TikTok</a>
      <a href="#">Newsletter</a>
      <a href="#">Press</a>
    </div>
  </div>
  <div class="cf12meta">© 2026 Flux · Drink responsibly · Don't drink and drive</div>
</footer>
```

**CSS:**
```css
.cf12 {
  position: relative;
  width: 100%;
  padding: 56px 32px 26px;
  background: #0a0612;
  color: #e0c8e8;
  font-family: "Bebas Neue", "Oswald", ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
  box-sizing: border-box;
  text-align: center;
}
.cf12bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(236, 72, 153, 0.25) 0%, transparent 50%),
    repeating-linear-gradient(180deg, transparent 0 1px, rgba(255, 255, 255, 0.02) 1px 2px);
  pointer-events: none;
}
.cf12brand {
  position: relative;
  padding-bottom: 32px;
}
.cf12sign {
  margin: 0;
  font:
    800 60px/1 "Bebas Neue",
    "Oswald",
    ui-sans-serif,
    system-ui,
    sans-serif;
  color: #ff3df5;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 8px #ff3df5,
    0 0 18px #ff3df5,
    0 0 36px rgba(255, 61, 245, 0.6),
    0 0 60px rgba(255, 61, 245, 0.3);
  animation: cf12-flicker 5s infinite;
}
.cf12sign span {
  color: #3df5ff;
  text-shadow:
    0 0 8px #3df5ff,
    0 0 18px #3df5ff,
    0 0 36px rgba(61, 245, 255, 0.6);
  margin: 0 4px;
}
@keyframes cf12-flicker {
  0%,
  18%,
  22%,
  25%,
  53%,
  57%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 8px #ff3df5,
      0 0 18px #ff3df5,
      0 0 36px rgba(255, 61, 245, 0.6),
      0 0 60px rgba(255, 61, 245, 0.3);
  }
  20%,
  24%,
  55% {
    opacity: 0.6;
    text-shadow: none;
  }
}
.cf12sub {
  position: relative;
  margin: 14px 0 0;
  font:
    500 13px/1 ui-sans-serif,
    system-ui;
  color: #a78bfa;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cf12b {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  max-width: 720px;
  margin: 0 auto 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(167, 139, 250, 0.2);
}
.cf12col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf12col h4 {
  margin: 0 0 6px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff3df5;
  text-shadow: 0 0 6px rgba(255, 61, 245, 0.5);
}
.cf12col a {
  font:
    14px/1.5 ui-sans-serif,
    system-ui;
  color: #c4b5fd;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition:
    color 0.2s,
    text-shadow 0.2s;
}
.cf12col a:hover {
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.cf12meta {
  position: relative;
  font:
    500 11px/1 ui-sans-serif,
    system-ui;
  color: #6a5a8a;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .cf12sign {
    font-size: 44px;
  }
  .cf12b {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf12sign {
    animation: none;
  }
}
```

### 08. Editorial Centered

**Type:** Pure CSS
**Description:** Minimalist single-column footer anchored by an oversized centered wordmark. A single hairline rule sits above the brand; below it, five links separated by mid-dot dividers; below that, a small italic copyright. Personal-brand and boutique-studio aesthetic. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf16">
  <div class="cf16inner">
    <div class="cf16rule" aria-hidden="true"></div>
    <div class="cf16wordmark">Atlas</div>
    <nav class="cf16nav">
      <a href="#">About</a>
      <span aria-hidden="true">·</span>
      <a href="#">Pricing</a>
      <span aria-hidden="true">·</span>
      <a href="#">Docs</a>
      <span aria-hidden="true">·</span>
      <a href="#">Contact</a>
      <span aria-hidden="true">·</span>
      <a href="#">Privacy</a>
    </nav>
    <div class="cf16meta">© 2026 Atlas Studio · Made in Brooklyn</div>
  </div>
</footer>
```

**CSS:**
```css
.cf16 {
  width: 100%;
  padding: 64px 32px 48px;
  background: #fafaf7;
  color: #1a1a1a;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  box-sizing: border-box;
  text-align: center;
}
.cf16inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cf16rule {
  width: 64px;
  height: 1px;
  background: #1a1a1a;
  margin-bottom: 36px;
  opacity: 0.5;
}
.cf16wordmark {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin-bottom: 28px;
}
.cf16nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
}
.cf16nav a {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf16nav a:hover {
  color: #1a1a1a;
}
.cf16nav span {
  color: #c4c4c4;
  font-size: 14px;
  user-select: none;
}
.cf16meta {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 13px;
  color: #8a8a8a;
}
@media (max-width: 600px) {
  .cf16 {
    padding: 48px 24px 36px;
  }
  .cf16wordmark {
    font-size: 38px;
  }
  .cf16nav {
    gap: 10px;
  }
  .cf16nav a {
    font-size: 13px;
  }
}
```

### 09. Mega Footer

**Type:** Pure CSS
**Description:** Wide 5-column mega footer for content-heavy sites — Stripe / Shopify scale. Brand block, four link columns, newsletter, social rail, region/language picker, compliance badges, full meta line. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf17">
  <div class="cf17top">
    <div class="cf17brand">
      <div class="cf17logo">▲ Helix</div>
      <p>The composable infrastructure for modern teams.</p>
      <form class="cf17nf">
        <input type="email" placeholder="Email address" aria-label="Email" />
        <button type="submit">Subscribe</button>
      </form>
      <div class="cf17social">
        <a href="#" aria-label="Twitter">𝕏</a>
        <a href="#" aria-label="GitHub">◐</a>
        <a href="#" aria-label="LinkedIn">in</a>
        <a href="#" aria-label="YouTube">▶</a>
        <a href="#" aria-label="Instagram">◉</a>
        <a href="#" aria-label="Discord">⌬</a>
      </div>
    </div>
    <div class="cf17cols">
      <div class="cf17col">
        <h4>Product</h4>
        <a href="#">Overview</a>
        <a href="#">Features</a>
        <a href="#">Integrations</a>
        <a href="#">Pricing</a>
        <a href="#">Changelog</a>
        <a href="#">Roadmap</a>
        <a href="#">Status</a>
      </div>
      <div class="cf17col">
        <h4>Solutions</h4>
        <a href="#">Startups</a>
        <a href="#">Enterprise</a>
        <a href="#">Agencies</a>
        <a href="#">Education</a>
        <a href="#">Non-profits</a>
        <a href="#">Developers</a>
      </div>
      <div class="cf17col">
        <h4>Resources</h4>
        <a href="#">Documentation</a>
        <a href="#">API reference</a>
        <a href="#">Guides</a>
        <a href="#">Templates</a>
        <a href="#">Customer stories</a>
        <a href="#">Blog</a>
        <a href="#">Webinars</a>
      </div>
      <div class="cf17col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Careers <span class="cf17badge">12</span></a>
        <a href="#">Press</a>
        <a href="#">Contact</a>
        <a href="#">Partners</a>
        <a href="#">Investors</a>
      </div>
    </div>
  </div>
  <div class="cf17bot">
    <div class="cf17trust">
      <span class="cf17b1">SOC 2</span>
      <span class="cf17b1">GDPR</span>
      <span class="cf17b1">ISO 27001</span>
      <span class="cf17b1">HIPAA</span>
    </div>
    <div class="cf17region">
      <span>🌐</span>
      <select aria-label="Region">
        <option>United States</option>
        <option>Europe</option>
        <option>Asia Pacific</option>
      </select>
    </div>
  </div>
  <div class="cf17meta">
    <span>© 2026 Helix Labs, Inc.</span>
    <div class="cf17legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
      <a href="#">Security</a>
      <a href="#">DPA</a>
      <a href="#">Sitemap</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf17 {
  width: 100%;
  padding: 56px 32px 22px;
  background: #0c1014;
  color: #c8cdd4;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf17top {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf17brand {
  min-width: 0;
}
.cf17logo {
  font:
    800 24px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.cf17brand p {
  margin: 0 0 18px;
  font-size: 14px;
  color: #8a93a0;
  line-height: 1.5;
  max-width: 320px;
}
.cf17nf {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  max-width: 320px;
}
.cf17nf input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  outline: none;
  transition: border-color 0.2s;
}
.cf17nf input:focus {
  border-color: #3b82f6;
}
.cf17nf button {
  padding: 9px 14px;
  background: #3b82f6;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font:
    600 12px ui-sans-serif,
    system-ui;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.cf17nf button:hover {
  background: #2563eb;
}
.cf17social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cf17social a {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8cdd4;
  text-decoration: none;
  font-size: 14px;
  transition:
    background 0.2s,
    color 0.2s;
}
.cf17social a:hover {
  background: #3b82f6;
  color: #fff;
}
.cf17cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  min-width: 0;
}
.cf17col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.cf17col h4 {
  margin: 0 0 6px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.cf17col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf17col a:hover {
  color: #fff;
}
.cf17badge {
  display: inline-block;
  padding: 1px 7px;
  background: #3b82f6;
  border-radius: 999px;
  font:
    700 10px/1.4 ui-sans-serif,
    system-ui;
  color: #fff;
}
.cf17bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.cf17trust {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cf17b1 {
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  color: #c8cdd4;
  letter-spacing: 0.04em;
}
.cf17region {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf17region select {
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #c8cdd4;
  font:
    12px ui-sans-serif,
    system-ui;
  cursor: pointer;
}
.cf17meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf17legal {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cf17legal a {
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf17legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf17top {
    grid-template-columns: 1fr;
  }
  .cf17cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf17cols {
    grid-template-columns: 1fr;
  }
}
```

### 10. Contact Card

**Type:** Pure CSS
**Description:** Local-business / professional-services footer with prominent contact card. Address, phone, email, business hours, and a stylized SVG map block. Two-column layout with a quick-links column on the right. Pure CSS.

**HTML:**
```html
<footer class="cf18">
  <div class="cf18b">
    <div class="cf18contact">
      <div class="cf18head">
        <div class="cf18logo">⚐ Northway Studio</div>
        <p>Architecture &amp; interior design · Brooklyn NY</p>
      </div>
      <div class="cf18grid">
        <div class="cf18item">
          <span class="cf18ico">📍</span>
          <div>
            <strong>Visit</strong>
            <div>247 Atlantic Ave<br />Brooklyn, NY 11217</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">📞</span>
          <div>
            <strong>Call</strong>
            <div>+1 (718) 555-0247<br />Mon–Fri 9am–6pm</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">✉</span>
          <div>
            <strong>Email</strong>
            <div>hello@northway.studio<br />press@northway.studio</div>
          </div>
        </div>
        <div class="cf18item">
          <span class="cf18ico">⏱</span>
          <div>
            <strong>Hours</strong>
            <div>Tue–Sat 10am–5pm<br />Sun–Mon by appointment</div>
          </div>
        </div>
      </div>
    </div>
    <div class="cf18map">
      <svg viewBox="0 0 200 200" aria-hidden="true">
        <rect width="200" height="200" fill="#e6e2d6" />
        <path d="M0 60 L200 80" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M0 120 L200 140" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M40 0 L60 200" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M120 0 L140 200" stroke="#c4bca6" stroke-width="2" fill="none" />
        <path d="M0 100 Q 100 90 200 105" stroke="#a8c5b0" stroke-width="3" fill="none" />
        <circle cx="100" cy="100" r="10" fill="#c43a32" />
        <circle cx="100" cy="100" r="4" fill="#fff" />
      </svg>
      <div class="cf18mc">View directions →</div>
    </div>
  </div>
  <div class="cf18foot">
    <nav class="cf18nav">
      <a href="#">Projects</a>
      <a href="#">About</a>
      <a href="#">Press</a>
      <a href="#">Careers</a>
    </nav>
    <span>© 2026 Northway Studio LLC</span>
  </div>
</footer>
```

**CSS:**
```css
.cf18 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #faf6ed;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf18b {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 36px;
  max-width: 1100px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf18contact {
  min-width: 0;
}
.cf18head {
  margin-bottom: 24px;
}
.cf18logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.cf18head p {
  margin: 0;
  font:
    italic 13px/1.4 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf18grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  min-width: 0;
}
.cf18item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}
.cf18ico {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.4;
}
.cf18item strong {
  display: block;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c43a32;
  margin-bottom: 5px;
}
.cf18item div div {
  font:
    14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
}
.cf18map {
  min-width: 0;
}
.cf18map svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(42, 37, 32, 0.18);
}
.cf18mc {
  margin-top: 10px;
  text-align: center;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: #c43a32;
  cursor: pointer;
}
.cf18mc:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf18foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  font:
    italic 12px ui-serif,
    Georgia,
    serif;
  color: #6b6056;
}
.cf18nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.cf18nav a {
  font:
    14px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.2s;
}
.cf18nav a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf18b {
    grid-template-columns: 1fr;
  }
  .cf18map svg {
    max-width: 280px;
    margin: 0 auto;
    display: block;
  }
}
@media (max-width: 480px) {
  .cf18grid {
    grid-template-columns: 1fr;
  }
}
```

### 11. Trust Badge Footer

**Type:** Pure CSS
**Description:** B2B credibility footer with a featured customer testimonial above the link grid, a horizontal customer-logo strip below, and SOC 2 / GDPR / ISO compliance badges. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf19">
  <div class="cf19top">
    <div class="cf19quote">
      <div class="cf19stars">★★★★★</div>
      <blockquote>
        "Cut our deployment time from 2 hours to 7 minutes. The team has been responsive and the
        platform is rock-solid."
      </blockquote>
      <div class="cf19who">
        <div class="cf19avatar">SK</div>
        <div>
          <strong>Sarah Kim</strong>
          <span>VP Engineering · Atlas Corp</span>
        </div>
      </div>
    </div>
    <div class="cf19trust">
      <h4>Trusted by teams at</h4>
      <div class="cf19logos">
        <span>STRIPE</span>
        <span>NOTION</span>
        <span>LINEAR</span>
        <span>VERCEL</span>
        <span>RAYCAST</span>
      </div>
      <div class="cf19badges">
        <div class="cf19b">SOC 2</div>
        <div class="cf19b">GDPR</div>
        <div class="cf19b">ISO 27001</div>
      </div>
    </div>
  </div>
  <div class="cf19links">
    <div class="cf19col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </div>
    <div class="cf19col">
      <h4>Resources</h4>
      <a href="#">Docs</a>
      <a href="#">API</a>
      <a href="#">Tutorials</a>
    </div>
    <div class="cf19col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Contact</a>
    </div>
    <div class="cf19col">
      <h4>Legal</h4>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">DPA</a>
    </div>
  </div>
  <div class="cf19meta">© 2026 Stack Inc. — Built in Berlin and Toronto.</div>
</footer>
```

**CSS:**
```css
.cf19 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #f8f8f5;
  color: #1a1a1a;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf19top {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
}
.cf19quote {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}
.cf19stars {
  color: #f59e0b;
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.cf19quote blockquote {
  margin: 0 0 16px;
  font:
    17px/1.55 ui-serif,
    Georgia,
    serif;
  color: #1a1a1a;
}
.cf19who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cf19avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff 0%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font:
    700 13px ui-sans-serif,
    system-ui;
  flex-shrink: 0;
}
.cf19who strong {
  display: block;
  font:
    600 13px/1.2 ui-sans-serif,
    system-ui;
}
.cf19who span {
  font:
    12px/1.4 ui-sans-serif,
    system-ui;
  color: #6a6a6a;
}
.cf19trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.cf19trust h4 {
  margin: 0;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a6a;
}
.cf19logos {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.cf19logos span {
  font:
    800 14px/1 ui-sans-serif,
    "Inter",
    system-ui;
  color: #4a4a4a;
  letter-spacing: 0.04em;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.cf19logos span:hover {
  opacity: 1;
}
.cf19badges {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.cf19b {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(26, 26, 26, 0.12);
  border-radius: 6px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.cf19links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto 24px;
}
.cf19col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf19col h4 {
  margin: 0 0 6px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
}
.cf19col a {
  font-size: 13px;
  color: #4a4a4a;
  text-decoration: none;
  transition: color 0.2s;
}
.cf19col a:hover {
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cf19meta {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(26, 26, 26, 0.06);
  font-size: 12px;
  color: #8a8a8a;
  text-align: center;
}
@media (max-width: 880px) {
  .cf19top {
    grid-template-columns: 1fr;
  }
  .cf19links {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf19links {
    grid-template-columns: 1fr;
  }
}
```

### 12. FAQ Drawer

**Type:** Pure CSS
**Description:** Footer that doubles as a quick-help panel. Top section holds 4 collapsible FAQ entries via native <details>/<summary>; bottom row has a standard link grid. Pure CSS via the disclosure widget.

**HTML:**
```html
<footer class="cf20">
  <div class="cf20faq">
    <h3 class="cf20h">Need a hand?</h3>
    <details class="cf20d">
      <summary>How do I get started?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Sign up for a free account, install the SDK with one command, and follow the 5-minute
        Quickstart in our docs.
      </div>
    </details>
    <details class="cf20d">
      <summary>What does it cost?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        The free tier covers up to 10,000 requests/month. Paid plans start at $29/month and scale by
        usage. See pricing.
      </div>
    </details>
    <details class="cf20d">
      <summary>Is there an SLA?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Pro and Enterprise plans include a 99.9% uptime SLA with credits if we miss it. Status page
        lives at status.example.com.
      </div>
    </details>
    <details class="cf20d">
      <summary>How do I cancel?<span class="cf20arr">+</span></summary>
      <div class="cf20a">
        Cancel anytime from billing settings. We prorate refunds for annual plans and don't ask why
        — though we appreciate when you tell us.
      </div>
    </details>
  </div>
  <div class="cf20links">
    <div class="cf20col">
      <h4>Product</h4>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Docs</a>
    </div>
    <div class="cf20col">
      <h4>Company</h4>
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Press</a>
    </div>
    <div class="cf20col">
      <h4>Legal</h4>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Cookies</a>
    </div>
  </div>
  <div class="cf20meta">
    <span>© 2026 Replica Software</span>
    <a href="#" class="cf20more">Read full FAQ →</a>
  </div>
</footer>
```

**CSS:**
```css
.cf20 {
  width: 100%;
  padding: 44px 32px 20px;
  background: #1a1d24;
  color: #c8cdd4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-sizing: border-box;
}
.cf20faq {
  max-width: 760px;
  margin: 0 auto 36px;
}
.cf20h {
  margin: 0 0 20px;
  font:
    700 22px/1.2 ui-sans-serif,
    system-ui;
  color: #fff;
  text-align: center;
  letter-spacing: -0.01em;
}
.cf20d {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px 0;
}
.cf20d:first-of-type {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20d summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 4px;
  font:
    600 15px/1.4 ui-sans-serif,
    system-ui;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.cf20d summary::-webkit-details-marker {
  display: none;
}
.cf20d summary:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 4px;
  border-radius: 4px;
}
.cf20arr {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  font:
    600 16px ui-sans-serif,
    system-ui;
  color: #c8cdd4;
  flex-shrink: 0;
  transition:
    transform 0.25s,
    background 0.2s;
}
.cf20d[open] .cf20arr {
  transform: rotate(45deg);
  background: #3b82f6;
  color: #fff;
}
.cf20a {
  padding: 12px 4px 4px;
  font:
    14px/1.65 ui-sans-serif,
    system-ui;
  color: #8a93a0;
  max-width: 600px;
}
.cf20links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cf20col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf20col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf20col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf20col a:hover {
  color: #fff;
}
.cf20meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf20more {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.cf20more:hover {
  color: #60a5fa;
}
@media (max-width: 600px) {
  .cf20links {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 400px) {
  .cf20links {
    grid-template-columns: 1fr;
  }
}
```

### 13. CTA Stripe

**Type:** Pure CSS
**Description:** Conversion-driven footer with a bold full-bleed CTA stripe ("Ready to ship?") above a compact link footer. Coral CTA stripe contrasts with the dark base. Pure CSS, no JS.

**HTML:**
```html
<footer class="cf21">
  <div class="cf21cta">
    <div class="cf21ctab">
      <div class="cf21ctah">
        <h2>Ready to ship?</h2>
        <p>Start free. Upgrade when you're ready. No credit card needed.</p>
      </div>
      <div class="cf21btns">
        <a href="#" class="cf21prim">Start free →</a>
        <a href="#" class="cf21sec">Talk to sales</a>
      </div>
    </div>
  </div>
  <div class="cf21foot">
    <div class="cf21b">
      <div class="cf21brand">
        <div class="cf21logo">▸ Pulse</div>
        <p>Real-time analytics for product teams.</p>
      </div>
      <div class="cf21cols">
        <div class="cf21col">
          <h4>Product</h4>
          <a href="#">Features</a>
          <a href="#">Pricing</a>
          <a href="#">Integrations</a>
          <a href="#">Changelog</a>
        </div>
        <div class="cf21col">
          <h4>Resources</h4>
          <a href="#">Docs</a>
          <a href="#">API</a>
          <a href="#">Examples</a>
          <a href="#">Status</a>
        </div>
        <div class="cf21col">
          <h4>Company</h4>
          <a href="#">About</a>
          <a href="#">Careers</a>
          <a href="#">Press</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
    <div class="cf21meta">
      <span>© 2026 Pulse Analytics</span>
      <div class="cf21legal">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Security</a>
      </div>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf21 {
  width: 100%;
  background: #0e0e14;
  color: #c8cdd4;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf21cta {
  background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
  padding: 40px 32px;
}
.cf21ctab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.cf21ctah h2 {
  margin: 0 0 8px;
  font:
    800 30px/1.1 ui-sans-serif,
    "Inter",
    system-ui;
  color: #fff;
  letter-spacing: -0.02em;
}
.cf21ctah p {
  margin: 0;
  font:
    16px/1.5 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.85);
}
.cf21btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cf21prim {
  padding: 12px 22px;
  background: #fff;
  border-radius: 8px;
  color: #1a1a1a;
  font:
    700 14px ui-sans-serif,
    system-ui;
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.cf21prim:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}
.cf21sec {
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #fff;
  font:
    700 14px ui-sans-serif,
    system-ui;
  text-decoration: none;
  transition: background 0.2s;
  backdrop-filter: blur(8px);
}
.cf21sec:hover {
  background: rgba(255, 255, 255, 0.22);
}
.cf21foot {
  padding: 36px 32px 22px;
}
.cf21b {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf21brand {
  min-width: 0;
}
.cf21logo {
  font:
    800 20px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.cf21brand p {
  margin: 0;
  font-size: 13px;
  color: #8a93a0;
  line-height: 1.5;
  max-width: 240px;
}
.cf21cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  min-width: 0;
}
.cf21col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf21col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf21col a {
  font-size: 13px;
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf21col a:hover {
  color: #fff;
}
.cf21meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 18px;
  font-size: 12px;
  color: #6a7280;
  flex-wrap: wrap;
}
.cf21legal {
  display: flex;
  gap: 18px;
}
.cf21legal a {
  color: #8a93a0;
  text-decoration: none;
  transition: color 0.2s;
}
.cf21legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf21b {
    grid-template-columns: 1fr;
  }
  .cf21cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf21cols {
    grid-template-columns: 1fr;
  }
  .cf21ctah h2 {
    font-size: 24px;
  }
}
```

### 14. Globe Switcher

**Type:** Pure CSS
**Description:** Global-SaaS footer featuring language, currency, and region pickers above a standard 4-column link grid. Region pills for quick selection. Pure CSS via native <select> for accessibility.

**HTML:**
```html
<footer class="cf22">
  <div class="cf22b">
    <div class="cf22cols">
      <div class="cf22brand">
        <div class="cf22logo">◯ Meridian</div>
        <p>Payments infrastructure for the global internet.</p>
      </div>
      <div class="cf22col">
        <h4>Products</h4>
        <a href="#">Payments</a>
        <a href="#">Billing</a>
        <a href="#">Connect</a>
        <a href="#">Issuing</a>
      </div>
      <div class="cf22col">
        <h4>Use cases</h4>
        <a href="#">Marketplaces</a>
        <a href="#">SaaS</a>
        <a href="#">Retail</a>
        <a href="#">Platforms</a>
      </div>
      <div class="cf22col">
        <h4>Resources</h4>
        <a href="#">Docs</a>
        <a href="#">API</a>
        <a href="#">Pricing</a>
        <a href="#">Support</a>
      </div>
      <div class="cf22col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Customers</a>
        <a href="#">Jobs</a>
        <a href="#">Newsroom</a>
      </div>
    </div>
    <div class="cf22pickers">
      <div class="cf22pick">
        <label>🌐 Language</label>
        <select aria-label="Language">
          <option>English (US)</option>
          <option>Français</option>
          <option>Deutsch</option>
          <option>日本語</option>
          <option>中文</option>
        </select>
      </div>
      <div class="cf22pick">
        <label>💱 Currency</label>
        <select aria-label="Currency">
          <option>USD ($)</option>
          <option>EUR (€)</option>
          <option>GBP (£)</option>
          <option>JPY (¥)</option>
          <option>SGD (S$)</option>
        </select>
      </div>
      <div class="cf22pick cf22regions">
        <label>📍 Region</label>
        <div class="cf22pills">
          <span class="cf22pill cf22-on">US</span>
          <span class="cf22pill">EU</span>
          <span class="cf22pill">APAC</span>
          <span class="cf22pill">LATAM</span>
        </div>
      </div>
    </div>
  </div>
  <div class="cf22meta">
    <span>© 2026 Meridian Payments — Available in 47 countries</span>
    <div class="cf22legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Compliance</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf22 {
  width: 100%;
  padding: 48px 32px 22px;
  background: #0a1628;
  color: #c8d4e8;
  font-family: ui-sans-serif, "Inter", system-ui, sans-serif;
  box-sizing: border-box;
}
.cf22b {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cf22cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}
.cf22brand {
  min-width: 0;
}
.cf22logo {
  font:
    800 22px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.cf22brand p {
  margin: 0;
  font-size: 13px;
  color: #8a98b8;
  line-height: 1.5;
}
.cf22col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cf22col h4 {
  margin: 0 0 4px;
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.cf22col a {
  font-size: 13px;
  color: #8a98b8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf22col a:hover {
  color: #fff;
}
.cf22pickers {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 18px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.cf22pick {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cf22pick label {
  font:
    600 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  color: #c8d4e8;
}
.cf22pick select {
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #fff;
  font:
    13px ui-sans-serif,
    system-ui;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}
.cf22pick select:focus {
  border-color: #60a5fa;
}
.cf22pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cf22pill {
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  color: #c8d4e8;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.cf22pill:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cf22-on {
  background: #60a5fa;
  border-color: #60a5fa;
  color: #0a1628;
}
.cf22-on:hover {
  background: #3b82f6;
  color: #fff;
}
.cf22meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  color: #6a7a99;
  flex-wrap: wrap;
}
.cf22legal {
  display: flex;
  gap: 18px;
}
.cf22legal a {
  color: #8a98b8;
  text-decoration: none;
  transition: color 0.2s;
}
.cf22legal a:hover {
  color: #fff;
}
@media (max-width: 880px) {
  .cf22cols {
    grid-template-columns: 1fr 1fr;
  }
  .cf22brand {
    grid-column: span 2;
  }
  .cf22pickers {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .cf22cols {
    grid-template-columns: 1fr;
  }
  .cf22brand {
    grid-column: auto;
  }
}
```

### 15. Hover Wave

**Type:** CSS + JS
**Description:** Interactive footer where every link grows a smooth wave underline on hover, plus a floating back-to-top button anchored to the corner. JS handles only the back-to-top scroll behavior; the underline is pure CSS.

**HTML:**
```html
<footer class="cf23">
  <a href="#top" class="cf23top" data-cf23-top aria-label="Back to top"><span>↑</span></a>
  <div class="cf23b">
    <div class="cf23brand">
      <div class="cf23logo">◆ Wavelength</div>
      <p>The newsletter app for thoughtful writers.</p>
    </div>
    <div class="cf23cols">
      <div class="cf23col">
        <h4>Product</h4>
        <a href="#">Editor</a>
        <a href="#">Distribution</a>
        <a href="#">Analytics</a>
        <a href="#">Pricing</a>
      </div>
      <div class="cf23col">
        <h4>Writers</h4>
        <a href="#">Featured</a>
        <a href="#">Get started</a>
        <a href="#">Migrate</a>
        <a href="#">Community</a>
      </div>
      <div class="cf23col">
        <h4>Readers</h4>
        <a href="#">Discover</a>
        <a href="#">Categories</a>
        <a href="#">Mobile app</a>
        <a href="#">Recommendations</a>
      </div>
      <div class="cf23col">
        <h4>Company</h4>
        <a href="#">About</a>
        <a href="#">Careers</a>
        <a href="#">Blog</a>
        <a href="#">Press</a>
      </div>
    </div>
  </div>
  <div class="cf23meta">
    <span>© 2026 Wavelength · Made for writers, by writers.</span>
    <div class="cf23legal">
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Contact</a>
    </div>
  </div>
</footer>
```

**CSS:**
```css
.cf23 {
  position: relative;
  width: 100%;
  padding: 56px 32px 22px;
  background: #fef9f0;
  color: #2a2520;
  font-family: ui-serif, Georgia, serif;
  box-sizing: border-box;
}
.cf23top {
  position: absolute;
  top: -22px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #c43a32;
  color: #fef9f0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(196, 58, 50, 0.35);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}
.cf23top:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(196, 58, 50, 0.45);
}
.cf23top span {
  font:
    700 22px/1 ui-sans-serif,
    system-ui;
}
.cf23b {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(42, 37, 32, 0.18);
}
.cf23brand {
  min-width: 0;
}
.cf23logo {
  font:
    700 22px/1 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cf23brand p {
  margin: 0;
  font:
    italic 14px/1.55 ui-serif,
    Georgia,
    serif;
  color: #6b6056;
  max-width: 240px;
}
.cf23cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  min-width: 0;
}
.cf23col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.cf23col h4 {
  margin: 0 0 4px;
  font:
    700 11px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c43a32;
}
.cf23col a {
  position: relative;
  padding-bottom: 4px;
  font:
    14px/1.4 ui-serif,
    Georgia,
    serif;
  color: #2a2520;
  text-decoration: none;
  transition: color 0.25s;
  align-self: flex-start;
}
.cf23col a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Cpath d='M0 3 Q 3 0 6 3 T 12 3 T 18 3 T 24 3' stroke='%23c43a32' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 12px 6px;
  background-position: 0 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.cf23col a:hover {
  color: #c43a32;
}
.cf23col a:hover::after {
  transform: scaleX(1);
}
.cf23meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  font:
    italic 12px/1.5 ui-serif,
    Georgia,
    serif;
  color: #8a7d6f;
  flex-wrap: wrap;
}
.cf23legal {
  display: flex;
  gap: 18px;
}
.cf23legal a {
  color: #6b6056;
  text-decoration: none;
  transition: color 0.2s;
  font-style: normal;
}
.cf23legal a:hover {
  color: #c43a32;
}
@media (max-width: 880px) {
  .cf23b {
    grid-template-columns: 1fr;
  }
  .cf23cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .cf23cols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf23col a::after {
    transition: none;
  }
  .cf23top {
    transition: none;
  }
}
```

**JS:**
```js
/* Hover Wave + Back-to-Top — handles only the scroll-to-top behavior;
   the wave underline is pure CSS. */
(function () {
  var btn = document.querySelector("[data-cf23-top]");
  if (!btn) return;
  btn.addEventListener("click", function (e) {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
})();
```

---
## 12 CSS Glassmorphism Designs

URL: https://codefronts.com/design-styles/css-glassmorphism/
Description: 12 free CSS glassmorphism designs — cards, modals, navigation, form surfaces and layered effects with copy-paste HTML and CSS.
Demo count: 12

### 01. Glass Card

**Type:** Pure CSS
**Description:** The canonical glass surface — translucent white over a vivid aurora gradient. Backdrop-filter blur is what sells the effect.

**HTML:**
```html
<div class="gm-card-bg">
  <div class="gm-card">
    <div class="gm-card__icon">✦</div>
    <h3 class="gm-card__title">Aurora Pass</h3>
    <p class="gm-card__body">All collections, every generator, premium tools.</p>
    <button class="gm-card__btn">Get started</button>
  </div>
</div>
```

**CSS:**
```css
.gm-card-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 20%, #8b5cf6 0%, transparent 55%),
    radial-gradient(ellipse at 82% 30%, #ec4899 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%, #06b6d4 0%, transparent 55%),
    #0f0f1a;
}
.gm-card {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 22px 24px;
  color: #f8fafc;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.gm-card__icon {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px; margin-bottom: 14px;
}
.gm-card__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; }
.gm-card__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-card__btn {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 8px 16px; border-radius: 8px;
  font: 600 12px system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.gm-card__btn:hover { background: rgba(255, 255, 255, 0.28); }
```

### 02. Frosted Modal

**Type:** Pure CSS
**Description:** A heavy-blur dialog floating over a busy backdrop — the modal pattern that finally makes sense in 2024+ browsers.

**HTML:**
```html
<div class="gm-modal-bg">
  <div class="gm-modal">
    <div class="gm-modal__head">
      <h3>Confirm action</h3>
      <button class="gm-modal__close" aria-label="Close">×</button>
    </div>
    <p class="gm-modal__body">Delete this collection? This action cannot be undone.</p>
    <div class="gm-modal__row">
      <button class="gm-modal__btn">Cancel</button>
      <button class="gm-modal__btn gm-modal__btn--danger">Delete</button>
    </div>
  </div>
</div>
```

**CSS:**
```css
.gm-modal-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, #f97316 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #ef4444 0%, transparent 45%),
    #1a0a0a;
}
.gm-modal {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.gm-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.gm-modal__head h3 { margin: 0; font: 700 14px system-ui, sans-serif; }
.gm-modal__close {
  background: none; border: none; color: rgba(255, 255, 255, 0.6);
  font: 600 22px system-ui; line-height: 1; cursor: pointer; padding: 0;
}
.gm-modal__close:hover { color: #fff; }
.gm-modal__body { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
.gm-modal__row { display: flex; gap: 8px; justify-content: flex-end; }
.gm-modal__btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 7px 14px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
}
.gm-modal__btn:hover { background: rgba(255, 255, 255, 0.2); }
.gm-modal__btn--danger {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}
.gm-modal__btn--danger:hover { background: rgba(239, 68, 68, 0.5); }
```

### 03. Pricing Glass

**Type:** Pure CSS
**Description:** Tiered pricing card with featured glass treatment — the middle plan reads "premium" through stronger glass + brighter rim.

**HTML:**
```html
<div class="gm-price-bg">
  <div class="gm-price">
    <div class="gm-price__tag">Pro</div>
    <div class="gm-price__amount">$19<span>/mo</span></div>
    <ul class="gm-price__list">
      <li>Unlimited projects</li>
      <li>Priority support</li>
      <li>Custom domains</li>
    </ul>
    <button class="gm-price__btn">Choose Pro</button>
  </div>
</div>
```

**CSS:**
```css
.gm-price-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, #14b8a6 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, #06b6d4 0%, transparent 50%),
    #042f2e;
}
.gm-price {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  padding: 18px 20px;
  color: #fff;
  box-shadow: 0 12px 36px rgba(20, 184, 166, 0.25);
}
.gm-price__tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 10px; border-radius: 12px;
  font: 600 10px system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.gm-price__amount { font: 800 28px/1 system-ui, sans-serif; margin-bottom: 14px; }
.gm-price__amount span { font-size: 12px; opacity: 0.65; font-weight: 500; }
.gm-price__list { list-style: none; padding: 0; margin: 0 0 14px; font: 12px/1.8 system-ui, sans-serif; opacity: 0.85; }
.gm-price__list li::before { content: '✓ '; color: #5eead4; font-weight: 700; }
.gm-price__btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff;
  padding: 9px; border-radius: 8px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-price__btn:hover { background: rgba(255, 255, 255, 0.3); }
```

### 04. Glass Navbar

**Type:** Pure CSS
**Description:** Sticky navbar that stays translucent over any page background — backdrop-filter saturate boosts the colors behind to keep contrast.

**HTML:**
```html
<div class="gm-nav-bg">
  <nav class="gm-nav">
    <span class="gm-nav__logo">✦ Brand</span>
    <a class="gm-nav__link gm-nav__link--active" href="#">Home</a>
    <a class="gm-nav__link" href="#">Features</a>
    <a class="gm-nav__link" href="#">Pricing</a>
    <button class="gm-nav__cta">Sign in</button>
  </nav>
</div>
```

**CSS:**
```css
.gm-nav-bg {
  position: relative; padding: 8px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 25% 50%, #6366f1 0%, transparent 50%),
    radial-gradient(circle at 75% 50%, #ec4899 0%, transparent 50%),
    #1a1426;
}
.gm-nav {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 6px 10px;
}
.gm-nav__logo {
  font: 700 13px system-ui, sans-serif;
  color: #fff; margin-right: 12px;
}
.gm-nav__link {
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  padding: 6px 12px; border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}
.gm-nav__link:hover {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.gm-nav__link--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-nav__cta {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 6px 14px; border-radius: 7px;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
}
.gm-nav__cta:hover { background: rgba(255, 255, 255, 0.32); }
```

### 05. Glass Tab Bar

**Type:** Pure CSS
**Description:** Bottom navigation bar (mobile-app pattern) where the active pill is a brighter glass surface inside a darker glass container.

**HTML:**
```html
<div class="gm-tabbar-bg">
  <nav class="gm-tabbar">
    <button class="gm-tabbar__tab gm-tabbar__tab--active">
      <span class="gm-tabbar__icon">⌂</span>Home
    </button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">⌕</span>Search</button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">♡</span>Saved</button>
    <button class="gm-tabbar__tab"><span class="gm-tabbar__icon">◔</span>Profile</button>
  </nav>
</div>
```

**CSS:**
```css
.gm-tabbar-bg {
  position: relative; padding: 24px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, #fb923c 0%, transparent 55%),
    radial-gradient(ellipse at 30% 80%, #f43f5e 0%, transparent 55%),
    #1f0a14;
}
.gm-tabbar {
  display: flex; gap: 4px;
  background: rgba(20, 20, 30, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px;
}
.gm-tabbar__tab {
  flex: 1;
  background: none; border: none;
  color: rgba(255, 255, 255, 0.55);
  padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 600 10px system-ui, sans-serif;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.gm-tabbar__icon { font-size: 18px; line-height: 1; }
.gm-tabbar__tab:hover { color: rgba(255, 255, 255, 0.85); }
.gm-tabbar__tab--active {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
}
```

### 06. Glass Sidebar

**Type:** Pure CSS
**Description:** Vertical glass sidebar with active-item highlight — the classic dashboard chrome reimagined as a single semi-transparent panel.

**HTML:**
```html
<div class="gm-side-bg">
  <aside class="gm-side">
    <div class="gm-side__brand">✦</div>
    <a class="gm-side__item gm-side__item--active" href="#"><span>◫</span>Dashboard</a>
    <a class="gm-side__item" href="#"><span>◐</span>Projects</a>
    <a class="gm-side__item" href="#"><span>☰</span>Inbox</a>
    <a class="gm-side__item" href="#"><span>⚙</span>Settings</a>
  </aside>
</div>
```

**CSS:**
```css
.gm-side-bg {
  position: relative; padding: 14px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 20%, #84cc16 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, #06b6d4 0%, transparent 50%),
    #061a14;
}
.gm-side {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 8px; width: 180px;
}
.gm-side__brand {
  font-size: 18px; color: #fff;
  text-align: center; padding: 6px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 8px;
}
.gm-side__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font: 500 12px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.gm-side__item span {
  width: 18px; text-align: center;
  font-size: 13px; opacity: 0.7;
}
.gm-side__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.gm-side__item--active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.gm-side__item--active span { opacity: 1; }
```

### 07. Glass Input

**Type:** Pure CSS
**Description:** Translucent text input with a subtle inner glow on focus — useful when a form sits over imagery or a video background.

**HTML:**
```html
<div class="gm-input-bg">
  <label class="gm-input">
    <span class="gm-input__lbl">Email</span>
    <input class="gm-input__field" type="email" placeholder="you@codefronts.com" />
  </label>
</div>
```

**CSS:**
```css
.gm-input-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, #a855f7 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, #6366f1 0%, transparent 55%),
    #1a0a2e;
}
.gm-input { display: block; }
.gm-input__lbl {
  display: block;
  font: 600 11px system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.gm-input__field {
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  color: #fff;
  font: 13px system-ui, sans-serif;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.gm-input__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-input__field:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px rgba(168, 85, 247, 0.25);
}
```

### 08. Glass Toggle

**Type:** Pure CSS
**Description:** Frosted iOS-style toggle switch sitting over a vivid backdrop — the thumb is a brighter glass island inside the track.

**HTML:**
```html
<div class="gm-toggle-bg">
  <label class="gm-toggle">
    <input type="checkbox" class="gm-toggle__input" checked />
    <span class="gm-toggle__track">
      <span class="gm-toggle__thumb"></span>
    </span>
    <span class="gm-toggle__label">Notifications</span>
  </label>
</div>
```

**CSS:**
```css
.gm-toggle-bg {
  position: relative; padding: 32px 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, #f59e0b 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, #ec4899 0%, transparent 55%),
    #2a0a1f;
}
.gm-toggle {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
}
.gm-toggle__input {
  position: absolute; opacity: 0; pointer-events: none;
}
.gm-toggle__track {
  position: relative; display: inline-block;
  width: 48px; height: 28px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  transition: background 0.25s, border-color 0.25s;
}
.gm-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: left 0.25s cubic-bezier(.3, 1.3, .5, 1), background 0.25s;
}
.gm-toggle__input:checked + .gm-toggle__track {
  background: rgba(34, 197, 94, 0.4);
  border-color: rgba(34, 197, 94, 0.6);
}
.gm-toggle__input:checked + .gm-toggle__track .gm-toggle__thumb {
  left: 22px;
  background: #fff;
}
.gm-toggle__label {
  font: 600 13px system-ui, sans-serif;
  color: #fff;
}
```

### 09. Glass Search

**Type:** Pure CSS
**Description:** A frosted search field with a built-in icon — the kind of search bar that hovers over a hero image or video without competing.

**HTML:**
```html
<div class="gm-search-bg">
  <label class="gm-search">
    <svg
      class="gm-search__icon"
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2.2"
      stroke-linecap="round"
    >
      <circle cx="11" cy="11" r="7" />
      <path d="M20 20l-4-4" />
    </svg>
    <input class="gm-search__field" type="search" placeholder="Search components, tags, demos…" />
    <kbd class="gm-search__kbd">⌘K</kbd>
  </label>
</div>
```

**CSS:**
```css
.gm-search-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 50%, #0ea5e9 0%, transparent 50%),
    radial-gradient(ellipse at 70% 50%, #8b5cf6 0%, transparent 50%),
    #0a1428;
}
.gm-search {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
}
.gm-search__icon { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.gm-search__field {
  flex: 1;
  background: none; border: none; outline: none;
  color: #fff;
  font: 13px system-ui, sans-serif;
}
.gm-search__field::placeholder { color: rgba(255, 255, 255, 0.55); }
.gm-search__kbd {
  font: 600 10px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  padding: 3px 6px;
}
```

### 10. Refraction Card

**Type:** Pure CSS
**Description:** Glass card with a fake refraction edge — a brighter rim on one side simulates how real glass bends light at its boundary.

**HTML:**
```html
<div class="gm-refr-bg">
  <div class="gm-refr">
    <h4>Optical illusion</h4>
    <p>
      An inset linear-gradient on the border channel mimics how light bends at the edge of real
      glass.
    </p>
  </div>
</div>
```

**CSS:**
```css
.gm-refr-bg {
  position: relative; padding: 32px;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, #f43f5e 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, #8b5cf6 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #06b6d4 0%, transparent 60%),
    #0e0a1a;
}
.gm-refr {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-radius: 14px;
  padding: 18px 22px;
  color: #fff;
  /* Refractive rim — gradient border via background-clip */
  border: 1.5px solid transparent;
  background-clip: padding-box;
}
.gm-refr::before {
  content: ''; position: absolute; inset: -1.5px;
  border-radius: 15.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.3));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1.5px;
  pointer-events: none;
}
.gm-refr h4 { margin: 0 0 6px; font: 700 14px/1.2 system-ui, sans-serif; }
.gm-refr p  { margin: 0; font: 12px/1.55 system-ui, sans-serif; opacity: 0.78; }
```

### 11. Tinted Glass

**Type:** Pure CSS
**Description:** Each glass surface tints subtly with its own brand hue while sharing the same blur — useful for color-coded categories.

**HTML:**
```html
<div class="gm-tint-bg">
  <div class="gm-tint gm-tint--violet">
    <span class="gm-tint__dot"></span>
    <div><b>Components</b><small>13 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--rose">
    <span class="gm-tint__dot"></span>
    <div><b>Motion</b><small>4 collections</small></div>
  </div>
  <div class="gm-tint gm-tint--cyan">
    <span class="gm-tint__dot"></span>
    <div><b>Tools</b><small>11 utilities</small></div>
  </div>
</div>
```

**CSS:**
```css
.gm-tint-bg {
  position: relative; padding: 22px;
  border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  background:
    radial-gradient(circle at 50% 50%, #e2e8f0 0%, transparent 60%),
    linear-gradient(135deg, #475569, #1e293b);
}
.gm-tint {
  display: flex; align-items: center; gap: 12px;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  color: #fff;
}
.gm-tint b     { display: block; font: 700 12px system-ui, sans-serif; }
.gm-tint small { font: 11px system-ui, sans-serif; opacity: 0.7; }
.gm-tint__dot { width: 10px; height: 10px; border-radius: 50%; }
.gm-tint--violet { background: rgba(139, 92, 246, 0.22); }
.gm-tint--violet .gm-tint__dot { background: #c4b5fd; box-shadow: 0 0 8px rgba(196, 181, 253, 0.6); }
.gm-tint--rose   { background: rgba(244, 63, 94, 0.22); }
.gm-tint--rose .gm-tint__dot   { background: #fda4af; box-shadow: 0 0 8px rgba(253, 164, 175, 0.6); }
.gm-tint--cyan   { background: rgba(6, 182, 212, 0.22); }
.gm-tint--cyan .gm-tint__dot   { background: #67e8f9; box-shadow: 0 0 8px rgba(103, 232, 249, 0.6); }
```

### 12. Stacked Glass

**Type:** Pure CSS
**Description:** Three glass layers stacked at offset depths — each pane blurs the panes behind it, creating a dimensional sandwich effect.

**HTML:**
```html
<div class="gm-stack-bg">
  <div class="gm-stack__pane gm-stack__pane--3"></div>
  <div class="gm-stack__pane gm-stack__pane--2"></div>
  <div class="gm-stack__pane gm-stack__pane--1">
    <h4>Layered depth</h4>
    <p>Each pane blurs the surfaces beneath it.</p>
  </div>
</div>
```

**CSS:**
```css
.gm-stack-bg {
  position: relative; padding: 28px;
  border-radius: 18px; overflow: hidden;
  min-height: 200px;
  background:
    radial-gradient(circle at 25% 30%, #f59e0b 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, #06b6d4 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, #ec4899 0%, transparent 45%),
    #1a0a1a;
}
.gm-stack__pane {
  position: absolute;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
}
.gm-stack__pane--3 {
  top: 18px; right: 18px;
  width: 140px; height: 100px;
  background: rgba(255, 255, 255, 0.05);
}
.gm-stack__pane--2 {
  top: 42px; right: 50px;
  width: 160px; height: 110px;
  background: rgba(255, 255, 255, 0.07);
}
.gm-stack__pane--1 {
  top: 70px; left: 28px;
  width: 200px; padding: 14px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.gm-stack__pane--1 h4 { margin: 0 0 4px; font: 700 13px system-ui, sans-serif; }
.gm-stack__pane--1 p  { margin: 0; font: 11px/1.5 system-ui, sans-serif; opacity: 0.78; }
```

---
## 24 CSS Grid Layouts

URL: https://codefronts.com/layouts/css-grid-layouts/
Description: 24 hand-coded CSS grid layouts — holy grail, 12-column, bento, masonry, subgrid, dashboard, kanban, container queries and more. Pure CSS, copy-paste ready.
Demo count: 24

### 01. Holy Grail

**Type:** Pure CSS
**Description:** The classic five-region web layout — header, sidebar, main, aside, footer — built with `grid-template-areas` so the markup reads like the visual. Three named columns let you swap left/right widths in one place.

**HTML:**
```html
<div class="gl-hg">
  <header class="gl-hg-h">
    <span class="gl-hg-name">Header</span>
    <span class="gl-hg-tag">grid-area: h</span>
  </header>
  <nav class="gl-hg-l">
    <span class="gl-hg-name">Sidebar</span>
    <span class="gl-hg-tag">grid-area: l</span>
  </nav>
  <main class="gl-hg-m">
    <span class="gl-hg-name">Main content</span>
    <span class="gl-hg-tag">grid-area: m</span>
  </main>
  <aside class="gl-hg-r">
    <span class="gl-hg-name">Aside</span>
    <span class="gl-hg-tag">grid-area: r</span>
  </aside>
  <footer class="gl-hg-f">
    <span class="gl-hg-name">Footer</span>
    <span class="gl-hg-tag">grid-area: f</span>
  </footer>
</div>
```

**CSS:**
```css
.gl-hg {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  grid-template-rows: 72px 1fr 56px;
  grid-template-areas:
    "h h h"
    "l m r"
    "f f f";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(16,185,129,0.12), transparent 60%),
    #051512;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #d1fae5;
  box-sizing: border-box;
}
.gl-hg > * {
  background: #0d2620;
  border: 1px solid rgba(52,211,153,0.22);
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
}
.gl-hg-name { font-size: 13px; font-weight: 600; color: #ecfdf5; }
.gl-hg-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(16,185,129,0.14); color: #34d399;
}
.gl-hg-h { grid-area: h; background: linear-gradient(135deg, #10b981, #34d399); border-color: transparent; }
.gl-hg-h .gl-hg-name { color: #051512; }
.gl-hg-h .gl-hg-tag { background: rgba(5,21,18,0.25); color: #051512; }
.gl-hg-l { grid-area: l; }
.gl-hg-m { grid-area: m; background: #14302a; }
.gl-hg-r { grid-area: r; }
.gl-hg-f { grid-area: f; background: rgba(16,185,129,0.12); }
@media (max-width: 720px) {
  .gl-hg {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "h" "l" "m" "r" "f";
  }
}
```

### 02. 12-Column Grid

**Type:** Pure CSS
**Description:** A Bootstrap-style 12-column track with `repeat(12, minmax(0, 1fr))`. Cells span any number of columns via `grid-column: span N`, giving you the familiar `col-6 / col-3 / col-9` rhythm without a framework.

**HTML:**
```html
<div class="gl-12">
  <div class="gl-12-c12"><strong>12</strong><em>span 12</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c6"><strong>6</strong><em>span 6</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-12-c8"><strong>8</strong><em>span 8</em></div>
  <div class="gl-12-c4"><strong>4</strong><em>span 4</em></div>
</div>
```

**CSS:**
```css
.gl-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12 - 1px), rgba(245,158,11,0.06) calc(100%/12)),
    #1a1206;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef3c7;
  box-sizing: border-box;
  align-content: start;
}
.gl-12 > div {
  background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.1));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  min-height: 64px;
}
.gl-12 > div strong {
  font-size: 22px; font-weight: 800; color: #fef3c7;
  letter-spacing: -0.02em;
}
.gl-12 > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #fbbf24;
  letter-spacing: 0.04em;
}
.gl-12-c12 { grid-column: span 12; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.gl-12-c12 strong { color: #1a1206; }
.gl-12-c12 em { color: #1a1206; opacity: 0.6; }
.gl-12-c8  { grid-column: span 8; }
.gl-12-c6  { grid-column: span 6; }
.gl-12-c4  { grid-column: span 4; }
.gl-12-c3  { grid-column: span 3; }
@media (max-width: 720px) {
  .gl-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gl-12-c12, .gl-12-c8, .gl-12-c6 { grid-column: span 6; }
  .gl-12-c4, .gl-12-c3 { grid-column: span 3; }
}
```

### 03. Bento Box

**Type:** Pure CSS
**Description:** Apple-keynote bento grid — six tiles of asymmetric sizes orchestrated with `grid-template-areas`. Each tile name reads like English, so swapping the layout means renaming areas, not rewriting math.

**HTML:**
```html
<div class="gl-bb">
  <article class="gl-bb-hero">
    <span class="gl-bb-name">Hero</span>
    <span class="gl-bb-tag">grid-area: hero</span>
  </article>
  <article class="gl-bb-stat">
    <span class="gl-bb-name">Stat</span>
    <span class="gl-bb-tag">grid-area: stat</span>
  </article>
  <article class="gl-bb-feat">
    <span class="gl-bb-name">Feature</span>
    <span class="gl-bb-tag">grid-area: feat</span>
  </article>
  <article class="gl-bb-quote">
    <span class="gl-bb-name">Quote</span>
    <span class="gl-bb-tag">grid-area: quote</span>
  </article>
  <article class="gl-bb-cta">
    <span class="gl-bb-name">CTA</span>
    <span class="gl-bb-tag">grid-area: cta</span>
  </article>
  <article class="gl-bb-info">
    <span class="gl-bb-name">Info</span>
    <span class="gl-bb-tag">grid-area: info</span>
  </article>
</div>
```

**CSS:**
```css
.gl-bb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "hero hero stat  feat"
    "hero hero info  feat"
    "quote cta cta   feat";
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(80% 60% at 0% 100%, rgba(251,113,133,0.16), transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(249,115,22,0.16), transparent 60%),
    #1a0d0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4e6;
  box-sizing: border-box;
}
.gl-bb > article {
  background: #2a1410;
  border: 1px solid rgba(251,113,133,0.18);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
}
.gl-bb-name { font-size: 15px; font-weight: 700; color: #fff; }
.gl-bb-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(251,113,133,0.14); color: #fb7185;
}
.gl-bb-hero {
  grid-area: hero;
  background: linear-gradient(135deg, #fb7185, #f97316) !important;
  border: 0 !important;
}
.gl-bb-hero .gl-bb-name { color: #1a0d0a; font-size: 24px; }
.gl-bb-hero .gl-bb-tag { background: rgba(26,13,10,0.25); color: #1a0d0a; }
.gl-bb-stat  { grid-area: stat; }
.gl-bb-feat  { grid-area: feat; background: linear-gradient(180deg, #2a1410, #4a1a14); }
.gl-bb-quote { grid-area: quote; }
.gl-bb-cta   { grid-area: cta; background: rgba(251,113,133,0.14); }
.gl-bb-info  { grid-area: info; }
@media (max-width: 720px) {
  .gl-bb {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "hero hero"
      "stat info"
      "feat feat"
      "quote cta";
  }
}
```

### 04. Magazine Editorial

**Type:** Pure CSS
**Description:** Editorial spread layout — a wide hero column anchors the page while side rails hold pull quotes, captions, and image plates. Built on a 6-column track with named areas; reads like a print magazine.

**HTML:**
```html
<div class="gl-mag">
  <div class="gl-mag-eyebrow">
    <span class="gl-mag-name">Issue 47 · Spring</span>
    <span class="gl-mag-tag">grid-area: eye</span>
  </div>
  <h2 class="gl-mag-title">
    <span class="gl-mag-name">The Long Read</span>
    <span class="gl-mag-tag">grid-area: title</span>
  </h2>
  <div class="gl-mag-lead">
    <span class="gl-mag-name">Lead paragraph</span>
    <span class="gl-mag-tag">grid-area: lead</span>
  </div>
  <figure class="gl-mag-fig">
    <span class="gl-mag-name">Photo plate</span>
    <span class="gl-mag-tag">grid-area: fig</span>
  </figure>
  <aside class="gl-mag-pull">
    <span class="gl-mag-name">Pull quote</span>
    <span class="gl-mag-tag">grid-area: pull</span>
  </aside>
  <div class="gl-mag-body">
    <span class="gl-mag-name">Body column</span>
    <span class="gl-mag-tag">grid-area: body</span>
  </div>
  <div class="gl-mag-foot">
    <span class="gl-mag-name">Footer · byline</span>
    <span class="gl-mag-tag">grid-area: foot</span>
  </div>
</div>
```

**CSS:**
```css
.gl-mag {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 56px auto 1fr auto 48px;
  grid-template-areas:
    "eye   eye   eye   eye   eye   eye"
    "title title title title fig   fig"
    "lead  lead  body  body  fig   fig"
    "pull  pull  body  body  fig   fig"
    "foot  foot  foot  foot  foot  foot";
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #f5f1ea;
  font-family: 'Playfair Display', Georgia, serif;
  color: #1c1c1e;
  box-sizing: border-box;
}
.gl-mag > * {
  background: #fff;
  border: 1px solid #d8d2c5;
  border-radius: 4px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 6px;
}
.gl-mag-name { font-size: 16px; font-weight: 700; color: #1c1c1e; }
.gl-mag-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  align-self: flex-start;
  padding: 2px 8px; border: 1px solid #1c1c1e;
  color: #1c1c1e;
  background: transparent;
}
.gl-mag-eyebrow { grid-area: eye; background: #1c1c1e !important; border: 0 !important; min-height: 36px; padding: 8px 14px; }
.gl-mag-eyebrow .gl-mag-name { color: #f5f1ea; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }
.gl-mag-eyebrow .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-title { grid-area: title; margin: 0; }
.gl-mag-title .gl-mag-name { font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.gl-mag-fig { grid-area: fig; background: linear-gradient(160deg, #d4af37, #b89238) !important; border: 0 !important; color: #1c1c1e; }
.gl-mag-fig .gl-mag-name { color: #1c1c1e; }
.gl-mag-fig .gl-mag-tag { color: #1c1c1e; border-color: #1c1c1e; }
.gl-mag-lead { grid-area: lead; }
.gl-mag-pull { grid-area: pull; background: #1c1c1e !important; border: 0 !important; }
.gl-mag-pull .gl-mag-name { color: #f5f1ea; font-style: italic; }
.gl-mag-pull .gl-mag-tag { color: #f5f1ea; border-color: #f5f1ea; }
.gl-mag-body { grid-area: body; }
.gl-mag-foot { grid-area: foot; background: #f5f1ea !important; padding: 10px 14px; }
.gl-mag-foot .gl-mag-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; }
@media (max-width: 720px) {
  .gl-mag {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "eye" "title" "fig" "lead" "body" "pull" "foot";
  }
}
```

### 05. RAM Auto-Fit

**Type:** Pure CSS
**Description:** The "RAM" pattern — `repeat(auto-fit, minmax(220px, 1fr))` — gives you a grid that wraps as many columns as the container allows, never overflows, and never goes below the minimum. The single most useful one-liner in CSS Grid.

**HTML:**
```html
<div class="gl-ram">
  <div class="gl-ram-cell"><strong>Card 1</strong><em>auto-fit · minmax(220px, 1fr)</em></div>
  <div class="gl-ram-cell"><strong>Card 2</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 3</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 4</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 5</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 6</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 7</strong><em>auto-fit</em></div>
  <div class="gl-ram-cell"><strong>Card 8</strong><em>auto-fit</em></div>
</div>
```

**CSS:**
```css
.gl-ram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(56,189,248,0.16), transparent 60%),
    #051324;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0f2fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ram-cell {
  background: linear-gradient(160deg, rgba(56,189,248,0.16), rgba(14,165,233,0.06));
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 6px;
  min-height: 90px;
}
.gl-ram-cell strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-ram-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #38bdf8;
  letter-spacing: 0.02em;
}
.gl-ram-cell:nth-child(1) { background: linear-gradient(135deg, #0ea5e9, #38bdf8); border: 0; }
.gl-ram-cell:nth-child(1) strong { color: #051324; }
.gl-ram-cell:nth-child(1) em { color: #051324; opacity: 0.7; }
```

### 06. Quantity Query

**Type:** Pure CSS
**Description:** Layout that adapts to *how many* children it has using `:has()` and `:nth-child()` — one item gets a hero treatment, two split 50/50, three become a 3-column row, four become a 2×2. No JS.

**HTML:**
```html
<section class="gl-qq">
  <header class="gl-qq-head">
    <strong>Three children → 3-column row</strong>
    <span class="gl-qq-coord">:has(:nth-child(3):last-child)</span>
  </header>
  <div class="gl-qq-grid">
    <div><strong>1</strong><em>nth-child(1)</em></div>
    <div><strong>2</strong><em>nth-child(2)</em></div>
    <div><strong>3</strong><em>nth-child(3)</em></div>
  </div>
</section>
```

**CSS:**
```css
.gl-qq {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(217,70,239,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fae8ff;
  box-sizing: border-box;
}
.gl-qq-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #d946ef, #a21caf);
  border-radius: 12px;
  color: #fff;
}
.gl-qq-head strong { font-size: 14px; font-weight: 700; }
.gl-qq-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(26,8,32,0.4); color: #fff;
  padding: 4px 10px; border-radius: 6px;
}
.gl-qq-grid {
  display: grid; gap: 12px; flex: 1;
  grid-template-columns: 1fr;
}
/* Single child → hero */
.gl-qq-grid:has(> div:only-child) { grid-template-columns: 1fr; }
/* Two children → 50/50 */
.gl-qq-grid:has(> div:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
/* Three children → three columns */
.gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
/* Four+ children → 2×2 */
.gl-qq-grid:has(> div:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.gl-qq-grid > div {
  background: linear-gradient(160deg, rgba(217,70,239,0.14), rgba(126,34,206,0.06));
  border: 1px solid rgba(217,70,239,0.32);
  border-radius: 12px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  min-height: 120px;
}
.gl-qq-grid > div strong { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-qq-grid > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #d946ef;
}
.gl-qq-grid > div:nth-child(2) { background: linear-gradient(160deg, rgba(217,70,239,0.28), rgba(126,34,206,0.1)); }
.gl-qq-grid > div:nth-child(3) { background: linear-gradient(135deg, #d946ef, #a21caf); border: 0; }
.gl-qq-grid > div:nth-child(3) em { color: rgba(255,255,255,0.6); }
@media (max-width: 720px) {
  .gl-qq-grid:has(> div:nth-child(3):last-child) { grid-template-columns: 1fr; }
}
```

### 07. Pinterest Masonry

**Type:** Pure CSS
**Description:** Masonry-style brick layout using `grid-template-rows: masonry` (with `grid-auto-flow: dense` fallback). Cards of varying heights pack tightly without gaps — the Pinterest pattern, native CSS.

**HTML:**
```html
<div class="gl-mas">
  <article class="gl-mas-c1"><strong>Card 1</strong><em>row 1 · h: 1.5×</em></article>
  <article class="gl-mas-c2"><strong>Card 2</strong><em>row 1 · h: 1×</em></article>
  <article class="gl-mas-c3"><strong>Card 3</strong><em>row 2 · h: 2×</em></article>
  <article class="gl-mas-c4"><strong>Card 4</strong><em>row 2 · h: 1×</em></article>
  <article class="gl-mas-c5"><strong>Card 5</strong><em>row 3 · h: 1.5×</em></article>
  <article class="gl-mas-c6"><strong>Card 6</strong><em>row 3 · h: 1×</em></article>
  <article class="gl-mas-c7"><strong>Card 7</strong><em>row 4 · h: 1×</em></article>
</div>
```

**CSS:**
```css
.gl-mas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 60px;
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(50% 80% at 50% 0%, rgba(244,63,94,0.14), transparent 60%),
    #1a060c;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4e6;
  box-sizing: border-box;
  align-content: start;
}
.gl-mas > article {
  background: linear-gradient(160deg, rgba(244,63,94,0.16), rgba(190,18,60,0.06));
  border: 1px solid rgba(244,63,94,0.28);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-mas > article strong { font-size: 14px; font-weight: 700; color: #fff; }
.gl-mas > article em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #fb7185;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(244,63,94,0.12);
}
.gl-mas-c1 { grid-row: span 3; background: linear-gradient(180deg, #f43f5e, #e11d48) !important; border: 0 !important; }
.gl-mas-c1 em { color: #fff; background: rgba(26,6,12,0.3); }
.gl-mas-c2 { grid-row: span 2; }
.gl-mas-c3 { grid-row: span 4; background: linear-gradient(180deg, rgba(244,63,94,0.32), rgba(190,18,60,0.14)); }
.gl-mas-c4 { grid-row: span 2; }
.gl-mas-c5 { grid-row: span 3; }
.gl-mas-c6 { grid-row: span 2; background: linear-gradient(180deg, #fb7185, #f43f5e) !important; border: 0 !important; }
.gl-mas-c6 em { color: #fff; background: rgba(26,6,12,0.3); }
.gl-mas-c7 { grid-row: span 2; }
```

### 08. Hexagonal Honeycomb

**Type:** Pure CSS
**Description:** Hexagon honeycomb tiling — alternating offset rows on a CSS Grid base, each cell shaped with `clip-path: polygon()`. The math falls out of the grid track widths; no transforms needed.

**HTML:**
```html
<div class="gl-hex">
  <div class="gl-hex-row">
    <span class="gl-hex-cell"><strong>A1</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A2</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A3</strong><em>row 1</em></span>
    <span class="gl-hex-cell"><strong>A4</strong><em>row 1</em></span>
  </div>
  <div class="gl-hex-row gl-hex-shift">
    <span class="gl-hex-cell"><strong>B1</strong><em>row 2</em></span>
    <span class="gl-hex-cell"><strong>B2</strong><em>row 2</em></span>
    <span class="gl-hex-cell"><strong>B3</strong><em>row 2</em></span>
  </div>
  <div class="gl-hex-row">
    <span class="gl-hex-cell"><strong>C1</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C2</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C3</strong><em>row 3</em></span>
    <span class="gl-hex-cell"><strong>C4</strong><em>row 3</em></span>
  </div>
  <div class="gl-hex-row gl-hex-shift">
    <span class="gl-hex-cell"><strong>D1</strong><em>row 4</em></span>
    <span class="gl-hex-cell"><strong>D2</strong><em>row 4</em></span>
    <span class="gl-hex-cell"><strong>D3</strong><em>row 4</em></span>
  </div>
</div>
```

**CSS:**
```css
.gl-hex {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
  min-height: 480px;
  padding: 28px 18px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(217,119,6,0.14), transparent 60%),
    #14110a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef3c7;
  box-sizing: border-box;
  align-items: center; justify-content: center;
  overflow: hidden;
}
.gl-hex-row {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 8px;
  width: 424px;
  margin-left: 0;
}
.gl-hex-shift {
  grid-template-columns: repeat(3, 100px);
  padding-left: 54px;
  width: 424px;
}
.gl-hex-row + .gl-hex-row { margin-top: -28px; }
.gl-hex-cell {
  width: 100px; height: 110px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #d97706, #f59e0b);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: #14110a;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              filter 0.22s ease;
  will-change: transform, filter;
}
.gl-hex-cell:hover,
.gl-hex-cell:focus-visible {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 6px 14px rgba(251, 191, 36, 0.55))
          drop-shadow(0 2px 4px rgba(217, 119, 6, 0.4))
          brightness(1.15);
  z-index: 2;
  outline: none;
}
.gl-hex-cell strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.gl-hex-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.02em;
  color: rgba(20,17,10,0.65);
}
.gl-hex-row:nth-child(1) .gl-hex-cell { background: linear-gradient(160deg, #f59e0b, #fbbf24); }
.gl-hex-row:nth-child(2) .gl-hex-cell { background: linear-gradient(160deg, #d97706, #f59e0b); }
.gl-hex-row:nth-child(3) .gl-hex-cell { background: linear-gradient(160deg, #b45309, #d97706); }
.gl-hex-row:nth-child(4) .gl-hex-cell { background: linear-gradient(160deg, #92400e, #b45309); color: #fef3c7; }
.gl-hex-row:nth-child(4) .gl-hex-cell em { color: rgba(254,243,199,0.7); }
.gl-hex-row { position: relative; }
.gl-hex-cell:hover { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .gl-hex-cell { transition: none; }
  .gl-hex-cell:hover, .gl-hex-cell:focus-visible { transform: none; }
}
@media (max-width: 720px) {
  .gl-hex-row { grid-template-columns: repeat(3, 80px); width: 256px; padding-left: 0; }
  .gl-hex-shift { grid-template-columns: repeat(2, 80px); padding-left: 44px; width: 256px; }
  .gl-hex-cell { width: 80px; height: 90px; }
  .gl-hex-row + .gl-hex-row { margin-top: -22px; }
}
```

### 09. Subgrid Card

**Type:** Pure CSS
**Description:** A row of cards whose internal sections (title / body / footer) line up across all cards using `grid-template-rows: subgrid`. The titles align even when one is two lines; same for the footer baseline.

**HTML:**
```html
<div class="gl-sg">
  <article class="gl-sg-card">
    <h3 class="gl-sg-title"><span>Compact title</span><span class="gl-sg-pill">subgrid</span></h3>
    <p class="gl-sg-body">
      Body copy of variable length sits on its own subgrid row so titles always align.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
  <article class="gl-sg-card gl-sg-mid">
    <h3 class="gl-sg-title">
      <span>A longer two-line card title here</span><span class="gl-sg-pill">subgrid</span>
    </h3>
    <p class="gl-sg-body">
      Subgrid lets this card inherit the parent's row tracks. Bodies stay aligned regardless of
      title height.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
  <article class="gl-sg-card">
    <h3 class="gl-sg-title"><span>Compact title</span><span class="gl-sg-pill">subgrid</span></h3>
    <p class="gl-sg-body">
      Without subgrid these would drift. With subgrid each card's three rows lock to the parent.
    </p>
    <footer class="gl-sg-foot"><span>Footer</span><span class="gl-sg-coord">row 3</span></footer>
  </article>
</div>
```

**CSS:**
```css
.gl-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(34,211,238,0.14), transparent 60%),
    #061a1f;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0f7fa;
  box-sizing: border-box;
}
.gl-sg-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  background: linear-gradient(180deg, rgba(34,211,238,0.12), rgba(8,145,178,0.04));
  border: 1px solid rgba(34,211,238,0.28);
  border-radius: 14px;
  padding: 18px;
  gap: 12px;
}
.gl-sg-mid { background: linear-gradient(180deg, #06b6d4, #0891b2); border: 0; color: #061a1f; }
.gl-sg-mid .gl-sg-pill, .gl-sg-mid .gl-sg-coord { background: rgba(6,26,31,0.2); color: #061a1f; }
.gl-sg-mid .gl-sg-body { color: #061a1f; opacity: 0.85; }
.gl-sg-title {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.gl-sg-title span:first-child { color: inherit; }
.gl-sg-pill, .gl-sg-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(34,211,238,0.16); color: #22d3ee;
  flex-shrink: 0;
}
.gl-sg-body { font-size: 13px; line-height: 1.55; margin: 0; color: #b6d8df; }
.gl-sg-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; padding-top: 10px;
  border-top: 1px dashed rgba(34,211,238,0.25);
}
.gl-sg-mid .gl-sg-foot { border-top-color: rgba(6,26,31,0.25); }
@media (max-width: 720px) {
  .gl-sg { grid-template-columns: 1fr; grid-template-rows: none; }
  .gl-sg-card { grid-row: auto; grid-template-rows: auto auto auto; }
}
```

### 10. Dashboard Skeleton

**Type:** Pure CSS
**Description:** Admin dashboard skeleton — sticky sidebar, top bar, KPI row, main chart area, and a feed rail. Six named areas on a 12-column track so any region can grow without rebreaking the others.

**HTML:**
```html
<div class="gl-dash">
  <header class="gl-dash-bar">
    <strong>Top bar</strong><span class="gl-dash-coord">grid-area: bar</span>
  </header>
  <nav class="gl-dash-nav">
    <strong>Sidebar</strong><span class="gl-dash-coord">grid-area: nav</span>
  </nav>
  <div class="gl-dash-kpi gl-dash-k1">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 1/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k2">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 2/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k3">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 3/4</span>
  </div>
  <div class="gl-dash-kpi gl-dash-k4">
    <strong>KPI</strong><span class="gl-dash-coord">kpi · 4/4</span>
  </div>
  <main class="gl-dash-main">
    <strong>Main chart</strong><span class="gl-dash-coord">grid-area: main</span>
  </main>
  <aside class="gl-dash-feed">
    <strong>Activity feed</strong><span class="gl-dash-coord">grid-area: feed</span>
  </aside>
</div>
```

**CSS:**
```css
.gl-dash {
  display: grid;
  grid-template-columns: 200px repeat(4, 1fr) 200px;
  grid-template-rows: 56px 86px 1fr;
  grid-template-areas:
    "nav bar bar bar bar bar"
    "nav k1  k2  k3  k4  feed"
    "nav main main main main feed";
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 14px;
  background: #0a0a1a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e0e7ff;
  box-sizing: border-box;
}
.gl-dash > * {
  background: #1a1a2e;
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 4px;
}
.gl-dash > * strong { font-size: 13px; font-weight: 700; color: #c7d2fe; }
.gl-dash-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #818cf8;
  letter-spacing: 0.04em;
  align-self: flex-start;
}
.gl-dash-bar  { grid-area: bar;  background: linear-gradient(90deg, #4f46e5, #6366f1); border: 0; }
.gl-dash-bar strong, .gl-dash-bar .gl-dash-coord { color: #fff; }
.gl-dash-bar .gl-dash-coord { color: rgba(255,255,255,0.7); }
.gl-dash-nav  { grid-area: nav;  background: #14142b; }
.gl-dash-k1   { grid-area: k1; background: linear-gradient(160deg, rgba(99,102,241,0.28), rgba(99,102,241,0.06)); }
.gl-dash-k2   { grid-area: k2; }
.gl-dash-k3   { grid-area: k3; background: linear-gradient(160deg, rgba(168,85,247,0.28), rgba(168,85,247,0.06)); }
.gl-dash-k4   { grid-area: k4; }
.gl-dash-main { grid-area: main; background: linear-gradient(180deg, #1a1a2e, #14142b); min-height: 200px; }
.gl-dash-feed { grid-area: feed; background: rgba(99,102,241,0.08); }
@media (max-width: 720px) {
  .gl-dash {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "bar bar"
      "nav nav"
      "k1 k2"
      "k3 k4"
      "main main"
      "feed feed";
  }
}
```

### 11. Pricing Table

**Type:** Pure CSS
**Description:** Three-column pricing tier on a CSS Grid base. The middle tier scales up using `transform: scale()` while staying in the same grid track — the baseline pricing pattern with consistent header / price / feature / CTA rows.

**HTML:**
```html
<div class="gl-pri">
  <article class="gl-pri-tier">
    <h4>Free</h4>
    <strong>$0</strong><span class="gl-pri-coord">column 1</span>
    <p>Personal projects · 1 user</p>
    <a>Choose</a>
  </article>
  <article class="gl-pri-tier gl-pri-pop">
    <span class="gl-pri-badge">Recommended</span>
    <h4>Pro</h4>
    <strong>$24</strong><span class="gl-pri-coord">column 2 · scaled</span>
    <p>Teams · unlimited projects</p>
    <a>Choose</a>
  </article>
  <article class="gl-pri-tier">
    <h4>Enterprise</h4>
    <strong>$96</strong><span class="gl-pri-coord">column 3</span>
    <p>SSO · audit logs · SLA</p>
    <a>Talk to sales</a>
  </article>
</div>
```

**CSS:**
```css
.gl-pri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(34,197,94,0.14), transparent 60%),
    #07140e;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ecfdf5;
  box-sizing: border-box;
  align-items: center;
}
.gl-pri-tier {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(34,197,94,0.22);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex; flex-direction: column;
  gap: 10px;
  text-align: center;
}
.gl-pri-tier h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #34d399; }
.gl-pri-tier strong { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-pri-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: #34d399;
  background: rgba(34,197,94,0.14); border-radius: 999px;
  padding: 3px 10px; align-self: center;
}
.gl-pri-tier p { margin: 0; font-size: 13px; color: #a7d8b9; }
.gl-pri-tier a { display: block; padding: 10px; border-radius: 8px; background: rgba(34,197,94,0.14); color: #34d399; text-decoration: none; font-weight: 600; font-size: 13px; cursor: default; }
.gl-pri-pop {
  background: linear-gradient(180deg, #16a34a, #15803d);
  border-color: #34d399;
  transform: scale(1.04);
  box-shadow: 0 14px 40px rgba(34,197,94,0.25);
  color: #07140e;
}
.gl-pri-pop h4, .gl-pri-pop strong { color: #07140e; }
.gl-pri-pop p { color: rgba(7,20,14,0.8); }
.gl-pri-pop a { background: #07140e; color: #34d399; }
.gl-pri-pop .gl-pri-coord { background: rgba(7,20,14,0.25); color: #07140e; }
.gl-pri-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #07140e; color: #34d399;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px;
}
@media (max-width: 720px) {
  .gl-pri { grid-template-columns: 1fr; }
  .gl-pri-pop { transform: none; }
}
```

### 12. Kanban Board

**Type:** Pure CSS
**Description:** Three-column kanban — Todo / In Progress / Done — with each column scrolling independently. Cards stack with `grid-auto-rows: min-content` so columns of different lengths still align at the top.

**HTML:**
```html
<div class="gl-kb">
  <section class="gl-kb-col gl-kb-todo">
    <header><strong>To-do</strong><span class="gl-kb-coord">column 1</span></header>
    <article>Sketch onboarding</article>
    <article>Brand audit</article>
    <article>Set up CI</article>
  </section>
  <section class="gl-kb-col gl-kb-prog">
    <header><strong>In progress</strong><span class="gl-kb-coord">column 2</span></header>
    <article>Refactor auth</article>
    <article>Email templates</article>
  </section>
  <section class="gl-kb-col gl-kb-done">
    <header><strong>Done</strong><span class="gl-kb-coord">column 3</span></header>
    <article>Spec sign-off</article>
    <article>Vendor selected</article>
    <article>Wire-frames</article>
    <article>Kick-off call</article>
  </section>
</div>
```

**CSS:**
```css
.gl-kb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background: #0f172a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
  align-items: start;
}
.gl-kb-col {
  background: #1e293b;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-auto-rows: min-content;
  gap: 8px;
}
.gl-kb-col header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.gl-kb-col header strong { font-size: 13px; font-weight: 700; }
.gl-kb-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px;
}
.gl-kb-todo header { background: rgba(148,163,184,0.18); color: #cbd5e1; }
.gl-kb-todo .gl-kb-coord { background: rgba(15,23,42,0.5); color: #94a3b8; }
.gl-kb-prog header { background: rgba(245,158,11,0.18); color: #fbbf24; }
.gl-kb-prog .gl-kb-coord { background: rgba(15,23,42,0.5); color: #fbbf24; }
.gl-kb-done header { background: rgba(34,197,94,0.18); color: #34d399; }
.gl-kb-done .gl-kb-coord { background: rgba(15,23,42,0.5); color: #34d399; }
.gl-kb-col article {
  background: #334155;
  border: 1px solid rgba(148,163,184,0.18);
  border-left: 3px solid currentColor;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #e2e8f0;
}
.gl-kb-todo article { color: #94a3b8; }
.gl-kb-prog article { color: #fbbf24; }
.gl-kb-done article { color: #34d399; }
.gl-kb-col article { color: #e2e8f0; }
.gl-kb-todo article { border-left-color: #94a3b8; }
.gl-kb-prog article { border-left-color: #fbbf24; }
.gl-kb-done article { border-left-color: #34d399; }
@media (max-width: 720px) {
  .gl-kb { grid-template-columns: 1fr; }
}
```

### 13. Aspect-Ratio Tiles

**Type:** Pure CSS
**Description:** Photo-grid where every tile keeps a perfect 1:1 ratio via `aspect-ratio: 1`. Combined with `auto-fill`, tiles wrap responsively without breaking aspect or causing layout shift on image load.

**HTML:**
```html
<div class="gl-ar">
  <div class="gl-ar-tile" style="grid-row: span 2"><strong>2:1</strong><em>span 2 rows</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
  <div class="gl-ar-tile"><strong>1:1</strong><em>aspect-ratio: 1</em></div>
</div>
```

**CSS:**
```css
.gl-ar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(192,38,211,0.16), transparent 60%),
    #1a0820;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5d0fe;
  box-sizing: border-box;
  align-content: start;
}
.gl-ar-tile {
  aspect-ratio: 1;
  background: linear-gradient(160deg, rgba(192,38,211,0.18), rgba(126,34,206,0.06));
  border: 1px solid rgba(192,38,211,0.32);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.gl-ar-tile[style*="span 2"] { aspect-ratio: 1 / 2; }
.gl-ar-tile strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-ar-tile em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: #c026d3;
}
.gl-ar-tile:nth-child(3n+1) { background: linear-gradient(160deg, #c026d3, #a21caf); border: 0; }
.gl-ar-tile:nth-child(3n+1) em { color: rgba(255,255,255,0.7); }
.gl-ar-tile:nth-child(5n+2) { background: linear-gradient(160deg, #a21caf, #86198f); border: 0; }
.gl-ar-tile:nth-child(5n+2) em { color: rgba(255,255,255,0.7); }
```

### 14. Container-Query Card

**Type:** Pure CSS
**Description:** A card whose internal layout adapts to its *container* width using `@container` queries — not the viewport. Below 320px it stacks vertically; above 320px it splits horizontal. Modern responsive design without media queries.

**HTML:**
```html
<div class="gl-cq">
  <section class="gl-cq-card gl-cq-wide">
    <article class="gl-cq-inner">
      <span class="gl-cq-name">Container ≥ 320px</span>
      <header class="gl-cq-img">
        <strong>Image</strong>
        <span class="gl-cq-coord">img · col 1</span>
      </header>
      <div class="gl-cq-body">
        <h4>Card with container queries</h4>
        <p>Resize the card and the layout switches — no media query, no JS.</p>
        <span class="gl-cq-coord gl-cq-coord-light">body · col 2 · @container ≥ 320px</span>
      </div>
    </article>
  </section>
  <section class="gl-cq-card gl-cq-narrow">
    <article class="gl-cq-inner">
      <span class="gl-cq-name">Container &lt; 320px</span>
      <header class="gl-cq-img">
        <strong>Image</strong>
        <span class="gl-cq-coord">img · row 1</span>
      </header>
      <div class="gl-cq-body">
        <h4>Stacks below 320px</h4>
        <p>Same component. Different container width.</p>
        <span class="gl-cq-coord gl-cq-coord-light">body · row 2 · @container &lt; 320px</span>
      </div>
    </article>
  </section>
</div>
```

**CSS:**
```css
.gl-cq {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 18px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(20,184,166,0.14), transparent 60%),
    #042022;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ccfbf1;
  box-sizing: border-box;
  align-items: stretch;
}
.gl-cq-card {
  container-type: inline-size;
  background: #0d3030;
  border: 1px solid rgba(20,184,166,0.28);
  border-radius: 14px;
  padding: 16px;
}
.gl-cq-inner {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "name" "img" "body";
}
.gl-cq-name {
  grid-area: name;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: #2dd4bf;
  background: rgba(20,184,166,0.14);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start; justify-self: flex-start;
}
.gl-cq-img {
  grid-area: img;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  min-height: 120px;
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  color: #042022;
  margin: 0;
}
.gl-cq-img strong { font-size: 16px; font-weight: 700; }
.gl-cq-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(4,32,34,0.25); color: #042022;
}
.gl-cq-coord-light { color: #2dd4bf; background: rgba(20,184,166,0.14); }
.gl-cq-body {
  grid-area: body;
  padding: 4px 2px;
  display: flex; flex-direction: column;
  gap: 6px;
}
.gl-cq-body h4 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.gl-cq-body p { margin: 0; font-size: 12.5px; color: #99d4cb; line-height: 1.5; }
.gl-cq-body .gl-cq-coord { align-self: flex-start; }
@container (min-width: 320px) {
  .gl-cq-inner {
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "name name"
      "img  body";
  }
  .gl-cq-inner .gl-cq-img { min-height: 200px; }
  .gl-cq-inner .gl-cq-body { justify-content: center; }
}
.gl-cq-narrow { max-width: 260px; }
@media (max-width: 720px) {
  .gl-cq { grid-template-columns: 1fr; }
  .gl-cq-narrow { max-width: 100%; }
}
```

### 15. Diagonal Skew Grid

**Type:** Pure CSS
**Description:** Grid cells skewed with `transform: skewY()` while their content counter-skews to stay readable. The brutalist diagonal-cut layout, all done at the grid layer.

**HTML:**
```html
<div class="gl-sk">
  <div class="gl-sk-cell gl-sk-1">
    <div><strong>01</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-2">
    <div><strong>02</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-3">
    <div><strong>03</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-4">
    <div><strong>04</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-5">
    <div><strong>05</strong><em>skewY(-6deg)</em></div>
  </div>
  <div class="gl-sk-cell gl-sk-6">
    <div><strong>06</strong><em>skewY(-6deg)</em></div>
  </div>
</div>
```

**CSS:**
```css
.gl-sk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 30px 22px;
  background: #1a0a05;
  font-family: 'JetBrains Mono', monospace;
  color: #fff7ed;
  box-sizing: border-box;
  overflow: hidden;
}
.gl-sk-cell {
  transform: skewY(-6deg);
  background: linear-gradient(135deg, #ea580c, #c2410c);
  border: 2px solid #1a0a05;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  min-height: 140px;
}
.gl-sk-cell > div {
  transform: skewY(6deg);
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.gl-sk-cell strong { font-size: 36px; font-weight: 800; color: #1a0a05; }
.gl-sk-cell em { font-size: 10px; color: rgba(26,10,5,0.7); font-style: normal; }
.gl-sk-1 { background: linear-gradient(135deg, #ea580c, #f97316); }
.gl-sk-2 { background: linear-gradient(135deg, #f97316, #fb923c); }
.gl-sk-3 { background: linear-gradient(135deg, #c2410c, #ea580c); }
.gl-sk-4 { background: linear-gradient(135deg, #fb923c, #fed7aa); }
.gl-sk-4 strong { color: #1a0a05; }
.gl-sk-5 { background: linear-gradient(135deg, #9a3412, #c2410c); }
.gl-sk-5 strong, .gl-sk-5 em { color: #fff7ed; }
.gl-sk-6 { background: linear-gradient(135deg, #ea580c, #c2410c); }
@media (max-width: 720px) {
  .gl-sk { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
}
```

### 16. Asymmetric Splash

**Type:** Pure CSS
**Description:** Asymmetric magazine splash — one massive hero block, one tall column, three small thumbnails. Built with explicit `grid-row` / `grid-column` spans so every region has its coordinates visible.

**HTML:**
```html
<div class="gl-as">
  <div class="gl-as-hero"><strong>Hero</strong><span class="gl-as-coord">1 / 1 / 3 / 4</span></div>
  <div class="gl-as-tall"><strong>Tall</strong><span class="gl-as-coord">1 / 4 / 4 / 5</span></div>
  <div class="gl-as-t1"><strong>Thumb 1</strong><span class="gl-as-coord">3 / 1 / 4 / 2</span></div>
  <div class="gl-as-t2"><strong>Thumb 2</strong><span class="gl-as-coord">3 / 2 / 4 / 3</span></div>
  <div class="gl-as-t3"><strong>Thumb 3</strong><span class="gl-as-coord">3 / 3 / 4 / 4</span></div>
</div>
```

**CSS:**
```css
.gl-as {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(236,72,153,0.16), transparent 60%),
    #1a0617;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fce7f3;
  box-sizing: border-box;
}
.gl-as > div {
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-as > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-as-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
}
.gl-as-hero { grid-area: 1 / 1 / 3 / 4; background: linear-gradient(135deg, #ec4899, #be185d); }
.gl-as-hero .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-tall { grid-area: 1 / 4 / 4 / 5; background: linear-gradient(180deg, #be185d, #831843); }
.gl-as-tall .gl-as-coord { background: rgba(26,6,23,0.3); color: #fce7f3; }
.gl-as-t1 { grid-area: 3 / 1 / 4 / 2; background: rgba(236,72,153,0.14); border: 1px solid rgba(236,72,153,0.32); }
.gl-as-t1 .gl-as-coord, .gl-as-t2 .gl-as-coord, .gl-as-t3 .gl-as-coord { background: rgba(236,72,153,0.18); color: #f472b6; }
.gl-as-t2 { grid-area: 3 / 2 / 4 / 3; background: rgba(236,72,153,0.22); border: 1px solid rgba(236,72,153,0.4); }
.gl-as-t3 { grid-area: 3 / 3 / 4 / 4; background: rgba(236,72,153,0.32); border: 1px solid rgba(236,72,153,0.5); }
@media (max-width: 720px) {
  .gl-as {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .gl-as-hero { grid-area: 1 / 1 / 2 / 3; min-height: 160px; }
  .gl-as-tall { grid-area: 2 / 1 / 3 / 3; min-height: 120px; }
  .gl-as-t1 { grid-area: 3 / 1 / 4 / 2; }
  .gl-as-t2 { grid-area: 3 / 2 / 4 / 3; }
  .gl-as-t3 { display: none; }
}
```

### 17. Mosaic Photo Wall

**Type:** Pure CSS
**Description:** Mosaic of mixed-size cells — a 4×4 base with hero / wide / tall / square shapes spanning multiple tracks. The "feature wall" pattern from photography sites and gallery landings.

**HTML:**
```html
<div class="gl-ms">
  <div class="gl-ms-1"><strong>Hero</strong><span class="gl-ms-coord">span 2 × 2</span></div>
  <div class="gl-ms-2"><strong>Wide</strong><span class="gl-ms-coord">span 2 × 1</span></div>
  <div class="gl-ms-3"><strong>Tall</strong><span class="gl-ms-coord">span 1 × 2</span></div>
  <div class="gl-ms-4"><strong>1</strong><span class="gl-ms-coord">1 × 1</span></div>
  <div class="gl-ms-5"><strong>2</strong><span class="gl-ms-coord">1 × 1</span></div>
  <div class="gl-ms-6"><strong>Banner</strong><span class="gl-ms-coord">span 4 × 1</span></div>
</div>
```

**CSS:**
```css
.gl-ms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 12px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #1a0e0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  align-content: start;
}
.gl-ms > div {
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}
.gl-ms > div strong { font-size: 16px; font-weight: 700; }
.gl-ms-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(0,0,0,0.25); color: #fff;
}
.gl-ms-1 { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #f97316, #dc2626); }
.gl-ms-2 { grid-column: span 2; background: linear-gradient(135deg, #fbbf24, #f97316); }
.gl-ms-3 { grid-row: span 2; background: linear-gradient(180deg, #ec4899, #be185d); }
.gl-ms-4 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.gl-ms-5 { background: linear-gradient(135deg, #d946ef, #a21caf); }
.gl-ms-6 { grid-column: span 4; background: linear-gradient(90deg, #c026d3, #ec4899, #f97316); }
```

### 18. Dense Packing

**Type:** Pure CSS
**Description:** Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace. The "Tetris" mode of CSS Grid.

**HTML:**
```html
<div class="gl-de">
  <div class="gl-de-c1"><strong>1</strong><em>span 2</em></div>
  <div class="gl-de-c2"><strong>2</strong><em>span 1</em></div>
  <div class="gl-de-c3"><strong>3</strong><em>span 3</em></div>
  <div class="gl-de-c4"><strong>4</strong><em>span 1</em></div>
  <div class="gl-de-c5"><strong>5</strong><em>span 2</em></div>
  <div class="gl-de-c6"><strong>6</strong><em>span 1</em></div>
  <div class="gl-de-c7"><strong>7</strong><em>span 1</em></div>
  <div class="gl-de-c8"><strong>8</strong><em>span 2</em></div>
  <div class="gl-de-c9"><strong>9</strong><em>span 1</em></div>
</div>
```

**CSS:**
```css
.gl-de {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: dense;
  grid-auto-rows: 90px;
  gap: 10px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(132,204,22,0.14), transparent 60%),
    #0a1408;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ecfccb;
  box-sizing: border-box;
  align-content: start;
}
.gl-de > div {
  background: linear-gradient(160deg, rgba(132,204,22,0.18), rgba(101,163,13,0.06));
  border: 1px solid rgba(132,204,22,0.32);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.gl-de > div strong { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.gl-de > div em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #84cc16;
  letter-spacing: 0.04em;
}
.gl-de-c1 { grid-column: span 2; }
.gl-de-c3 { grid-column: span 3; background: linear-gradient(135deg, #84cc16, #65a30d) !important; border: 0 !important; }
.gl-de-c3 em { color: rgba(255,255,255,0.7); }
.gl-de-c5 { grid-column: span 2; }
.gl-de-c8 { grid-column: span 2; background: linear-gradient(135deg, #a3e635, #84cc16) !important; border: 0 !important; color: #0a1408; }
.gl-de-c8 strong { color: #0a1408; }
.gl-de-c8 em { color: rgba(10,20,8,0.7); }
@media (max-width: 720px) {
  .gl-de { grid-template-columns: repeat(3, 1fr); }
  .gl-de-c3 { grid-column: span 3; }
  .gl-de-c1, .gl-de-c5, .gl-de-c8 { grid-column: span 2; }
}
```

### 19. Numbered Steps Track

**Type:** Pure CSS
**Description:** Horizontal stepper track — five circular nodes connected by a thin progress rail using grid columns and a `::before` pseudo-element. The onboarding / checkout step indicator.

**HTML:**
```html
<ol class="gl-st">
  <li class="gl-st-step gl-st-done">
    <span class="gl-st-num">1</span><strong>Sign up</strong><em>step 1 / 5</em>
  </li>
  <li class="gl-st-step gl-st-done">
    <span class="gl-st-num">2</span><strong>Verify email</strong><em>step 2 / 5</em>
  </li>
  <li class="gl-st-step gl-st-active">
    <span class="gl-st-num">3</span><strong>Pick plan</strong><em>step 3 / 5</em>
  </li>
  <li class="gl-st-step">
    <span class="gl-st-num">4</span><strong>Add billing</strong><em>step 4 / 5</em>
  </li>
  <li class="gl-st-step">
    <span class="gl-st-num">5</span><strong>Done</strong><em>step 5 / 5</em>
  </li>
</ol>
```

**CSS:**
```css
.gl-st {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(163,148,77,0.14), transparent 60%),
    #1a1608;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fef9c3;
  box-sizing: border-box;
  align-content: center;
  list-style: none;
  margin: 0;
  position: relative;
}
.gl-st-step {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 8px;
  text-align: center;
  padding: 14px 8px;
  z-index: 1;
}
.gl-st-step::before {
  content: ''; position: absolute;
  top: 38px; left: 0; right: 0;
  height: 4px; background: rgba(163,148,77,0.2);
  z-index: 0;
}
.gl-st-step:first-child::before { left: 50%; }
.gl-st-step:last-child::before { right: 50%; }
.gl-st-num {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #2a2410;
  border: 2px solid rgba(163,148,77,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-size: 16px;
  color: #a3944d;
  z-index: 2;
}
.gl-st-done .gl-st-num { background: linear-gradient(135deg, #a3944d, #ca8a04); border-color: #ca8a04; color: #1a1608; }
.gl-st-done::before { background: linear-gradient(90deg, #a3944d, #ca8a04); }
.gl-st-active .gl-st-num {
  background: linear-gradient(135deg, #facc15, #eab308);
  border-color: #facc15; color: #1a1608;
  box-shadow: 0 0 0 6px rgba(250,204,21,0.18);
}
.gl-st-step strong { font-size: 13px; font-weight: 700; color: #fef9c3; }
.gl-st-active strong, .gl-st-done strong { color: #facc15; }
.gl-st-step em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #a3944d;
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .gl-st { grid-template-columns: 1fr; gap: 14px; }
  .gl-st-step::before { display: none; }
}
```

### 20. Mac App Sidebar

**Type:** Pure CSS
**Description:** Two-pane macOS-style app — narrow source list on the left, content pane on the right. The classic Finder / Mail layout, built with two grid columns and named areas.

**HTML:**
```html
<div class="gl-mac">
  <header class="gl-mac-tb">
    <strong>Toolbar</strong><span class="gl-mac-coord">grid-area: tb</span>
  </header>
  <nav class="gl-mac-side">
    <strong>Source list</strong>
    <span class="gl-mac-coord">grid-area: side</span>
    <ul>
      <li>★ Favorites</li>
      <li>📨 Inbox</li>
      <li>🚀 Sent</li>
      <li>📁 Archive</li>
    </ul>
  </nav>
  <main class="gl-mac-main">
    <strong>Content pane</strong>
    <span class="gl-mac-coord">grid-area: main</span>
    <p>The right-hand pane scrolls independently. The sidebar source list stays sticky.</p>
  </main>
</div>
```

**CSS:**
```css
.gl-mac {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "tb tb"
    "side main";
  gap: 0;
  width: 100%;
  min-height: 480px;
  background: #1c1c1e;
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: #f5f5f7;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.gl-mac-tb {
  grid-area: tb;
  background: linear-gradient(180deg, #2a2a2e, #1c1c1e);
  border-bottom: 1px solid #0a0a0a;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.gl-mac-tb strong { font-size: 13px; font-weight: 600; color: #f5f5f7; }
.gl-mac-coord {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: #007aff;
  background: rgba(0,122,255,0.12);
  padding: 2px 8px; border-radius: 999px;
}
.gl-mac-side {
  grid-area: side;
  background: #18181b;
  border-right: 1px solid #2a2a2e;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-side strong { font-size: 11px; font-weight: 600; color: #98989d; letter-spacing: 0.06em; text-transform: uppercase; }
.gl-mac-side .gl-mac-coord { align-self: flex-start; }
.gl-mac-side ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.gl-mac-side li {
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: #f5f5f7;
  cursor: default;
}
.gl-mac-side li:nth-child(2) { background: linear-gradient(90deg, #007aff, #0a84ff); }
.gl-mac-main {
  grid-area: main;
  background: #1c1c1e;
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-main strong { font-size: 15px; font-weight: 700; color: #f5f5f7; }
.gl-mac-main p { margin: 0; font-size: 13px; color: #98989d; line-height: 1.55; max-width: 480px; }
.gl-mac-main .gl-mac-coord { align-self: flex-start; }
@media (max-width: 720px) {
  .gl-mac { grid-template-columns: 1fr; grid-template-rows: 48px auto 1fr; grid-template-areas: "tb" "side" "main"; }
  .gl-mac-side { border-right: 0; border-bottom: 1px solid #2a2a2e; }
}
```

### 21. Scroll-Snap Slider

**Type:** Pure CSS
**Description:** Horizontal slider with `scroll-snap-type: x mandatory` so each pane locks into place after a swipe. Pure CSS, native scroll, no JS — the gallery / carousel pattern done right.

**HTML:**
```html
<div class="gl-ss">
  <div class="gl-ss-track">
    <article class="gl-ss-pane gl-ss-1">
      <strong>Slide 01</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-2">
      <strong>Slide 02</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-3">
      <strong>Slide 03</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-4">
      <strong>Slide 04</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
    <article class="gl-ss-pane gl-ss-5">
      <strong>Slide 05</strong><span class="gl-ss-coord">scroll-snap-align: start</span>
    </article>
  </div>
  <p class="gl-ss-hint">← swipe / scroll horizontally →</p>
</div>
```

**CSS:**
```css
.gl-ss {
  display: flex; flex-direction: column;
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(251,146,60,0.16), transparent 60%),
    #1a0e06;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff7ed;
  box-sizing: border-box;
  justify-content: center;
}
.gl-ss-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(70%, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.gl-ss-pane {
  scroll-snap-align: start;
  border-radius: 16px;
  padding: 24px 22px;
  min-height: 280px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.gl-ss-pane strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.gl-ss-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  color: #1a0e06;
  background: rgba(255,247,237,0.85);
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.gl-ss-1 { background: linear-gradient(135deg, #fb923c, #f97316); }
.gl-ss-2 { background: linear-gradient(135deg, #f97316, #ea580c); }
.gl-ss-3 { background: linear-gradient(135deg, #ea580c, #c2410c); }
.gl-ss-4 { background: linear-gradient(135deg, #fbbf24, #fb923c); }
.gl-ss-5 { background: linear-gradient(135deg, #c2410c, #9a3412); }
.gl-ss-hint {
  margin: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em;
  color: #fb923c;
}
.gl-ss-track::-webkit-scrollbar { height: 6px; }
.gl-ss-track::-webkit-scrollbar-track { background: rgba(251,146,60,0.1); border-radius: 999px; }
.gl-ss-track::-webkit-scrollbar-thumb { background: rgba(251,146,60,0.4); border-radius: 999px; }
```

### 22. Aurora Map

**Type:** Pure CSS
**Description:** A landing-page region map where each block is sized by its importance and tinted with an aurora gradient. Combines `grid-template-areas` with conic and radial backgrounds for a dreamy, layered surface.

**HTML:**
```html
<div class="gl-au">
  <div class="gl-au-blobs" aria-hidden="true"><span></span><span></span><span></span></div>
  <div class="gl-au-hero">
    <strong>Hero</strong><span class="gl-au-coord">grid-area: hero</span>
  </div>
  <div class="gl-au-feat">
    <strong>Feature</strong><span class="gl-au-coord">grid-area: feat</span>
  </div>
  <div class="gl-au-stat">
    <strong>Stat</strong><span class="gl-au-coord">grid-area: stat</span>
  </div>
  <div class="gl-au-side">
    <strong>Sidebar</strong><span class="gl-au-coord">grid-area: side</span>
  </div>
  <div class="gl-au-cta"><strong>CTA</strong><span class="gl-au-coord">grid-area: cta</span></div>
</div>
```

**CSS:**
```css
.gl-au {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 200px 1fr 80px;
  grid-template-areas:
    "hero hero side"
    "feat stat side"
    "cta  cta  cta";
  gap: 14px;
  width: 100%;
  min-height: 480px;
  padding: 18px;
  background:
    radial-gradient(circle at 10% 0%, #0ea5e9 0%, transparent 45%),
    radial-gradient(circle at 95% 25%, #a855f7 0%, transparent 50%),
    radial-gradient(circle at 50% 110%, #06b6d4 0%, transparent 50%),
    radial-gradient(circle at 75% 90%, #ec4899 0%, transparent 45%),
    #050a1a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
}
.gl-au-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.gl-au-blobs span {
  position: absolute; border-radius: 50%;
  filter: blur(50px);
  animation: gl-au-drift 22s ease-in-out infinite alternate;
}
.gl-au-blobs span:nth-child(1) { top: 10%; left: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #38bdf8 0%, transparent 70%); opacity: 0.7; }
.gl-au-blobs span:nth-child(2) { top: 30%; right: 15%; width: 320px; height: 320px; background: radial-gradient(circle, #c084fc 0%, transparent 70%); animation-delay: -6s; opacity: 0.7; }
.gl-au-blobs span:nth-child(3) { bottom: 5%; left: 40%; width: 360px; height: 360px; background: radial-gradient(circle, #22d3ee 0%, transparent 70%); animation-delay: -12s; opacity: 0.7; }
@keyframes gl-au-drift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-40px,40px) scale(0.94); }
}
.gl-au > div {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
.gl-au > div strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-au-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  align-self: flex-start;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(56,189,248,0.18); color: #93c5fd;
}
.gl-au-hero { grid-area: hero; background: linear-gradient(135deg, rgba(56,189,248,0.32), rgba(129,140,248,0.18)); }
.gl-au-feat { grid-area: feat; }
.gl-au-stat { grid-area: stat; background: linear-gradient(160deg, rgba(34,211,238,0.28), rgba(34,211,238,0.06)); }
.gl-au-side { grid-area: side; background: linear-gradient(180deg, rgba(129,140,248,0.28), rgba(129,140,248,0.06)); }
.gl-au-cta  { grid-area: cta; background: linear-gradient(90deg, #38bdf8, #818cf8); }
.gl-au-cta strong { color: #050a1a; }
.gl-au-cta .gl-au-coord { background: rgba(5,10,26,0.25); color: #050a1a; }
@media (max-width: 720px) {
  .gl-au {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "hero" "feat" "stat" "side" "cta";
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl-au-blobs span { animation: none; }
}
```

### 23. Logo Wall

**Type:** Pure CSS
**Description:** A trusted-by logo wall — even-spaced grid of monochrome logos using `repeat(auto-fit, minmax(120px, 1fr))`. Hover lifts a single tile to its colour version.

**HTML:**
```html
<div class="gl-lw">
  <header class="gl-lw-head">
    <strong>Trusted by 14,000+ teams</strong>
    <span class="gl-lw-coord">repeat(auto-fit, minmax(140px, 1fr))</span>
  </header>
  <div class="gl-lw-grid">
    <div class="gl-lw-cell">◇ NORTHWIND</div>
    <div class="gl-lw-cell">▲ APEX.IO</div>
    <div class="gl-lw-cell">★ PULSE</div>
    <div class="gl-lw-cell">⬣ HEXLAB</div>
    <div class="gl-lw-cell">◯ ORBITA</div>
    <div class="gl-lw-cell">◤ FLINT</div>
    <div class="gl-lw-cell">⬢ MERIDIAN</div>
    <div class="gl-lw-cell">◇ NIMBUS</div>
    <div class="gl-lw-cell">▼ DRIFT</div>
    <div class="gl-lw-cell">◎ ATLAS</div>
  </div>
</div>
```

**CSS:**
```css
.gl-lw {
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(148,163,184,0.12), transparent 60%),
    #0c1220;
  font-family: 'Inter', system-ui, sans-serif;
  color: #e2e8f0;
  box-sizing: border-box;
  justify-content: center;
}
.gl-lw-head {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gl-lw-head strong { font-size: 16px; font-weight: 700; color: #fff; }
.gl-lw-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(148,163,184,0.14); color: #94a3b8;
}
.gl-lw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.gl-lw-cell {
  background: rgba(148,163,184,0.06);
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 10px;
  padding: 22px 14px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  color: #94a3b8;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.gl-lw-cell:hover {
  color: #38bdf8; border-color: #38bdf8;
  background: rgba(56,189,248,0.08);
}
@media (prefers-reduced-motion: reduce) {
  .gl-lw-cell { transition: none; }
}
```

### 24. Periodic Table

**Type:** Pure CSS
**Description:** A small periodic-table-style grid where elements are placed by explicit `grid-column` + `grid-row` coordinates and colored by category — the most explicit-coordinates demo in the set.

**HTML:**
```html
<div class="gl-pt">
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 1">
    <strong>H</strong><em>1 / 1</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 1">
    <strong>He</strong><em>8 / 1</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 2">
    <strong>Li</strong><em>1 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 2">
    <strong>Be</strong><em>2 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 2">
    <strong>C</strong><em>5 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 2">
    <strong>N</strong><em>6 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 7; grid-row: 2">
    <strong>O</strong><em>7 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 2">
    <strong>Ne</strong><em>8 / 2</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkmet" style="grid-column: 1; grid-row: 3">
    <strong>Na</strong><em>1 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-alkear" style="grid-column: 2; grid-row: 3">
    <strong>Mg</strong><em>2 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-met" style="grid-column: 3; grid-row: 3">
    <strong>Al</strong><em>3 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-mtl" style="grid-column: 4; grid-row: 3">
    <strong>Si</strong><em>4 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 5; grid-row: 3">
    <strong>P</strong><em>5 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-non" style="grid-column: 6; grid-row: 3">
    <strong>S</strong><em>6 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-hal" style="grid-column: 7; grid-row: 3">
    <strong>Cl</strong><em>7 / 3</em>
  </div>
  <div class="gl-pt-cell gl-pt-noble" style="grid-column: 8; grid-row: 3">
    <strong>Ar</strong><em>8 / 3</em>
  </div>
</div>
```

**CSS:**
```css
.gl-pt {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  min-height: 480px;
  padding: 22px;
  background: #0a0a14;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
}
.gl-pt-cell {
  border-radius: 8px;
  padding: 10px 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  min-height: 64px;
}
.gl-pt-cell strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.gl-pt-cell em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.gl-pt-alkmet { background: linear-gradient(135deg, #f87171, #ef4444); }
.gl-pt-alkear { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1a14; }
.gl-pt-met    { background: linear-gradient(135deg, #94a3b8, #64748b); }
.gl-pt-mtl    { background: linear-gradient(135deg, #34d399, #10b981); }
.gl-pt-non    { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.gl-pt-hal    { background: linear-gradient(135deg, #c084fc, #a855f7); }
.gl-pt-noble  { background: linear-gradient(135deg, #f472b6, #ec4899); }
@media (max-width: 720px) {
  .gl-pt { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); }
  .gl-pt-cell strong { font-size: 18px; }
}
```

---
## 30 CSS Hero Sections

URL: https://codefronts.com/layouts/css-hero-sections/
Description: 30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.
Demo count: 30

### 01. Centered Classic

**Type:** Pure CSS
**Description:** The artisanal SaaS hero — eyebrow, serif headline, prose subhead, a single deep-terracotta primary CTA flanked by a quiet ghost button. Sage on warm cream, the small-batch tools-for-makers aesthetic.

**HTML:**
```html
<section class="hs-cls" aria-label="Hero">
  <div class="hs-cls-inner">
    <span class="hs-cls-eye">— A new kind of workspace</span>
    <h1>Make small things <em>that matter.</em></h1>
    <p>
      The toolkit for craftspeople who treat the work, the customer, and the calendar with the same
      care.
    </p>
    <div class="hs-cls-cta">
      <a class="hs-cls-btn hs-cls-btn-pri" href="#start">Start free trial →</a>
      <a class="hs-cls-btn" href="#tour">Watch the tour</a>
    </div>
    <p class="hs-cls-foot">Free for 14 days · no card · cancel any time</p>
  </div>
</section>
```

**CSS:**
```css
.hs-cls {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(200,160,120,0.18), transparent 70%),
    #f5f1e6;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: #2d3a2e;
  box-sizing: border-box;
}
.hs-cls-inner { max-width: 640px; text-align: center; }
.hs-cls-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.18em;
  color: #6b7d5a; margin-bottom: 18px;
}
.hs-cls h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.05;
  color: #1a2418;
}
.hs-cls h1 em { color: #c8553d; font-style: italic; }
.hs-cls p {
  margin: 0 auto 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; line-height: 1.6;
  color: #4a5447; max-width: 460px;
}
.hs-cls-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.hs-cls-btn {
  display: inline-block; padding: 13px 22px; border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.18s, background 0.18s;
}
.hs-cls-btn-pri { background: #c8553d; color: #fff8ed; box-shadow: 0 2px 0 #8d3a25; }
.hs-cls-btn-pri:hover { transform: translateY(-1px); background: #b94a32; }
.hs-cls-btn { background: transparent; color: #2d3a2e; border: 1px solid #2d3a2e; }
.hs-cls-btn:hover { background: #2d3a2e; color: #f5f1e6; }
.hs-cls-foot {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important; color: #8a9080 !important;
  margin: 0 !important; max-width: none !important;
  letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .hs-cls-btn { transition: none; }
}
```

### 02. Split with Mockup

**Type:** Pure CSS
**Description:** Two-column hero with copy left, an SVG-painted dashboard mockup right. Rust red and ochre on deep brown — the heritage industrial / workshop aesthetic.

**HTML:**
```html
<section class="hs-spm" aria-label="Hero">
  <div class="hs-spm-copy">
    <span class="hs-spm-eye">EST. 2024</span>
    <h1>Inventory that <em>actually adds up.</em></h1>
    <p>Stock, batches, suppliers — one ledger, no spreadsheets, no Sundays at the laptop.</p>
    <a class="hs-spm-cta" href="#start">Get started →</a>
  </div>
  <div class="hs-spm-mock" aria-hidden="true">
    <div class="hs-spm-window">
      <header><span></span><span></span><span></span></header>
      <div class="hs-spm-bars">
        <span style="height: 32%"></span>
        <span style="height: 64%"></span>
        <span style="height: 48%"></span>
        <span style="height: 88%"></span>
        <span style="height: 56%"></span>
        <span style="height: 72%"></span>
      </div>
      <div class="hs-spm-line">
        <svg viewBox="0 0 200 60" preserveAspectRatio="none">
          <path
            d="M0,40 Q40,20 80,30 T160,15 T200,20"
            stroke="#d97742"
            stroke-width="2.5"
            fill="none"
          />
        </svg>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
.hs-spm {
  display: grid; grid-template-columns: 1.05fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  background: #2c1f15;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f5e6d3;
  box-sizing: border-box;
}
.hs-spm-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; color: #d97742;
  padding: 4px 10px; border: 1px solid #d97742;
  margin-bottom: 18px;
}
.hs-spm h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  color: #fff8ed;
}
.hs-spm h1 em { color: #d97742; font-style: italic; font-weight: 700; }
.hs-spm p {
  margin: 0 0 26px; font-size: 15.5px; line-height: 1.6;
  color: #c9b5a0; max-width: 460px;
}
.hs-spm-cta {
  display: inline-block; padding: 12px 22px;
  background: #d97742; color: #2c1f15;
  text-decoration: none; font-weight: 700; font-size: 14px;
  border: 0; border-radius: 0;
  box-shadow: 4px 4px 0 #8a4520;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-spm-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #8a4520; }
.hs-spm-mock {
  background: #1a120a;
  border: 2px solid #6b4427;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 8px 8px 0 #d97742;
}
.hs-spm-window header { display: flex; gap: 6px; padding-bottom: 12px; border-bottom: 1px dashed #6b4427; }
.hs-spm-window header span { width: 10px; height: 10px; border-radius: 50%; background: #6b4427; }
.hs-spm-window header span:nth-child(1) { background: #d97742; }
.hs-spm-window header span:nth-child(2) { background: #b8943f; }
.hs-spm-bars {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  height: 120px; align-items: end;
  margin: 14px 0;
}
.hs-spm-bars span {
  background: linear-gradient(180deg, #d97742, #b85a2c);
  border-radius: 2px 2px 0 0;
}
.hs-spm-bars span:nth-child(2n) { background: linear-gradient(180deg, #b8943f, #8a6c1f); }
.hs-spm-line { height: 60px; }
.hs-spm-line svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hs-spm { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-spm-cta { transition: none; } }
```

### 03. Gradient Mesh

**Type:** Pure CSS
**Description:** Tropical mesh gradient — overlapping radial blobs in mango, papaya, and dragon fruit on a warm coral base. The Stripe / Linear gradient hero, but turned up to a sunset.

**HTML:**
```html
<section class="hs-grm" aria-label="Hero">
  <div class="hs-grm-blobs" aria-hidden="true">
    <span></span><span></span><span></span><span></span>
  </div>
  <div class="hs-grm-inner">
    <span class="hs-grm-eye">launch · summer collection</span>
    <h1>Make your weekends <em>feel like vacation.</em></h1>
    <p>
      The mood-board planner that turns scattered Pinterest tabs into the trip you actually take.
    </p>
    <a class="hs-grm-cta" href="#start">Plan a trip →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-grm {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 56px);
  background: #ff5e62;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-grm-blobs { position: absolute; inset: 0; }
.hs-grm-blobs span {
  position: absolute; border-radius: 50%; filter: blur(60px);
  animation: hs-grm-drift 16s ease-in-out infinite alternate;
}
.hs-grm-blobs span:nth-child(1) { top: -10%; left: 10%; width: 460px; height: 460px;
  background: radial-gradient(circle, #ffd23f 0%, transparent 70%); }
.hs-grm-blobs span:nth-child(2) { top: 20%; right: 0; width: 420px; height: 420px;
  background: radial-gradient(circle, #ee4266 0%, transparent 70%); animation-delay: -4s; }
.hs-grm-blobs span:nth-child(3) { bottom: 0; left: 30%; width: 460px; height: 460px;
  background: radial-gradient(circle, #ff7e5f 0%, transparent 70%); animation-delay: -8s; }
.hs-grm-blobs span:nth-child(4) { top: 30%; left: -8%; width: 360px; height: 360px;
  background: radial-gradient(circle, #ffa552 0%, transparent 70%); animation-delay: -12s; }
@keyframes hs-grm-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-40px,40px) scale(0.96); }
}
.hs-grm-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-grm-eye {
  display: inline-block; padding: 5px 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hs-grm h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  text-shadow: 0 2px 24px rgba(238,66,102,0.25);
}
.hs-grm h1 em { font-style: italic; font-weight: 800; color: #fff5d2; }
.hs-grm p { margin: 0 auto 28px; font-size: 17px; line-height: 1.55; max-width: 480px; opacity: 0.95; }
.hs-grm-cta {
  display: inline-block; padding: 14px 26px;
  background: #fff; color: #ee4266;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 12px 30px rgba(238,66,102,0.35);
  transition: transform 0.18s;
}
.hs-grm-cta:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .hs-grm-blobs span { animation: none; }
  .hs-grm-cta { transition: none; }
}
```

### 04. Glass over Aurora

**Type:** Pure CSS
**Description:** Frosted-glass card floating over a calm spa aurora — pale mint, champagne gold, soft rose. The wellness / luxury beauty editorial treatment.

**HTML:**
```html
<section class="hs-gla" aria-label="Hero">
  <div class="hs-gla-aurora" aria-hidden="true"></div>
  <article class="hs-gla-card">
    <span class="hs-gla-eye">A daily ritual</span>
    <h1>Skincare without <em>the homework.</em></h1>
    <p>Three minutes. Two products. One routine that fits the life you actually live.</p>
    <a class="hs-gla-cta" href="#start">Find your routine</a>
  </article>
</section>
```

**CSS:**
```css
.hs-gla {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(circle at 20% 20%, #d6f0e0 0%, transparent 50%),
    radial-gradient(circle at 85% 30%, #f9d4c8 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, #f3e3c0 0%, transparent 50%),
    #faf6ed;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3d3a2c;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-gla-aurora {
  position: absolute; inset: -10%;
  background: conic-gradient(from 90deg, #d6f0e0, #f9d4c8, #f3e3c0, #d6f0e0);
  filter: blur(50px); opacity: 0.5;
  animation: hs-gla-spin 30s linear infinite;
}
@keyframes hs-gla-spin { to { transform: rotate(360deg); } }
.hs-gla-card {
  position: relative; z-index: 1;
  max-width: 520px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(195,150,120,0.18);
}
.hs-gla-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px; font-style: italic;
  color: #b8956a; margin-bottom: 14px;
}
.hs-gla h1 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.05;
  color: #2a2818;
}
.hs-gla h1 em { color: #b8956a; font-weight: 600; }
.hs-gla p { margin: 0 auto 24px; font-size: 15px; line-height: 1.6; color: #6b6755; max-width: 380px; }
.hs-gla-cta {
  display: inline-block; padding: 12px 28px;
  background: #2a2818; color: #faf6ed;
  border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  transition: background 0.18s;
}
.hs-gla-cta:hover { background: #b8956a; }
@media (prefers-reduced-motion: reduce) {
  .hs-gla-aurora { animation: none; }
  .hs-gla-cta { transition: none; }
}
```

### 05. Terminal Dev Hero

**Type:** Pure CSS
**Description:** Vintage-CRT terminal hero — phosphor green text + amber prompt on a warm beige paper backdrop. The 1970s computing aesthetic for a modern dev tool.

**HTML:**
```html
<section class="hs-trm" aria-label="Hero">
  <div class="hs-trm-copy">
    <h1>Ship from <em>your terminal.</em></h1>
    <p>
      One command. No dashboard. No yak shave. Your CI agrees with your local because they share an
      OS.
    </p>
    <a class="hs-trm-cta" href="#install">Read the docs →</a>
  </div>
  <div class="hs-trm-screen" aria-hidden="true">
    <div class="hs-trm-line">
      <span class="hs-trm-prompt">$</span> swift install <span class="hs-trm-cursor"></span>
    </div>
    <div class="hs-trm-line hs-trm-out">→ resolving dependencies</div>
    <div class="hs-trm-line hs-trm-out">→ compiling 47 modules</div>
    <div class="hs-trm-line hs-trm-out">→ linking binary</div>
    <div class="hs-trm-line hs-trm-ok">✓ shipped in 2.3s</div>
    <div class="hs-trm-line"><span class="hs-trm-prompt">$</span> _</div>
  </div>
</section>
```

**CSS:**
```css
.hs-trm {
  display: grid; grid-template-columns: 1fr 1.05fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(50,30,10,0.04) 31px 32px),
    #f0e4cf;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2a1d0a;
  box-sizing: border-box;
}
.hs-trm h1 {
  margin: 0 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(34px, 5vw, 54px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05;
}
.hs-trm h1 em { color: #b8580c; font-style: normal; }
.hs-trm h1 em::before { content: '> '; opacity: 0.6; }
.hs-trm p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: #5a4220; max-width: 440px; }
.hs-trm-cta {
  display: inline-block; padding: 12px 22px;
  background: #2a1d0a; color: #f0e4cf;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13.5px;
  text-decoration: none; border-radius: 0;
  transition: background 0.15s;
}
.hs-trm-cta:hover { background: #b8580c; }
.hs-trm-screen {
  background: #0d1908;
  border: 2px solid #2a1d0a;
  border-radius: 8px;
  padding: 22px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.85;
  box-shadow: 0 0 0 8px rgba(13,25,8,0.1), 0 0 60px rgba(60,255,120,0.18) inset;
}
.hs-trm-line { color: #5fff8c; text-shadow: 0 0 8px rgba(95,255,140,0.5); }
.hs-trm-prompt { color: #ffb348; text-shadow: 0 0 8px rgba(255,179,72,0.5); margin-right: 6px; }
.hs-trm-out { color: #88a890; opacity: 0.9; padding-left: 14px; }
.hs-trm-ok  { color: #5fff8c; padding-left: 14px; font-weight: 700; }
.hs-trm-cursor { display: inline-block; width: 8px; height: 16px; background: #5fff8c; vertical-align: text-bottom; animation: hs-trm-blink 1s steps(2) infinite; }
@keyframes hs-trm-blink { to { opacity: 0; } }
@media (max-width: 720px) {
  .hs-trm { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-trm-cursor { animation: none; }
}
```

### 06. Video Loop Hero

**Type:** Pure CSS
**Description:** Memphis-modern video-pretender — geometric SVG shapes oscillating like a video loop, pinned behind cobalt-on-bone copy with a lemon CTA. No real video, no licensing.

**HTML:**
```html
<section class="hs-vid" aria-label="Hero">
  <div class="hs-vid-shapes" aria-hidden="true">
    <span class="hs-vid-s1"></span>
    <span class="hs-vid-s2"></span>
    <span class="hs-vid-s3"></span>
    <span class="hs-vid-s4"></span>
  </div>
  <div class="hs-vid-content">
    <span class="hs-vid-eye">▸ NOW PLAYING</span>
    <h1>Your portfolio, <em>animated.</em></h1>
    <p>Drop in your projects. We turn them into the kind of motion reel that gets the call back.</p>
    <a class="hs-vid-cta" href="#start">Play with it</a>
  </div>
</section>
```

**CSS:**
```css
.hs-vid {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #f4f1ea;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0b1f4a;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-vid-shapes { position: absolute; inset: 0; pointer-events: none; }
.hs-vid-shapes span {
  position: absolute; animation: hs-vid-bounce 8s ease-in-out infinite alternate;
}
.hs-vid-s1 { top: 8%; left: 6%; width: 110px; height: 110px;
  background: #0b1f4a; border-radius: 50%; }
.hs-vid-s2 { top: 12%; right: 10%; width: 0; height: 0;
  border-left: 70px solid transparent; border-right: 70px solid transparent;
  border-bottom: 120px solid #f5d028; animation-delay: -3s; }
.hs-vid-s3 { bottom: 10%; left: 12%; width: 140px; height: 50px;
  background: #ee5253; border-radius: 999px; animation-delay: -5s; transform: rotate(-12deg); }
.hs-vid-s4 { bottom: 8%; right: 8%; width: 90px; height: 90px;
  background: #0b1f4a; border-radius: 12px; animation-delay: -7s; transform: rotate(15deg); }
@keyframes hs-vid-bounce {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(20px,-15px) rotate(8deg); }
}
.hs-vid-s2 { animation-name: hs-vid-bounce-tri; }
@keyframes hs-vid-bounce-tri {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-15px,20px); }
}
.hs-vid-content { position: relative; z-index: 1; max-width: 600px; text-align: center; }
.hs-vid-eye {
  display: inline-block; padding: 4px 12px;
  background: #0b1f4a; color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 22px;
}
.hs-vid h1 {
  margin: 0 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1;
}
.hs-vid h1 em { color: #ee5253; font-style: italic; font-weight: 900; }
.hs-vid p { margin: 0 auto 28px; font-size: 16px; line-height: 1.55; color: #4a5878; max-width: 460px; }
.hs-vid-cta {
  display: inline-block; padding: 14px 28px;
  background: #f5d028; color: #0b1f4a;
  font-weight: 800; font-size: 14.5px;
  text-decoration: none; border-radius: 4px;
  border: 3px solid #0b1f4a;
  box-shadow: 6px 6px 0 #0b1f4a;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-vid-cta:hover { transform: translate(2px,2px); box-shadow: 4px 4px 0 #0b1f4a; }
@media (prefers-reduced-motion: reduce) {
  .hs-vid-shapes span { animation: none; }
  .hs-vid-cta { transition: none; }
}
```

### 07. Social Proof Hero

**Type:** Pure CSS
**Description:** Mediterranean-tone social-proof hero — star rating pill above the headline, customer logo wall on warm cream, olive serif headlines with aubergine accents.

**HTML:**
```html
<section class="hs-sop" aria-label="Hero">
  <div class="hs-sop-inner">
    <span class="hs-sop-stars" aria-label="Rated 4.9 out of 5"
      >★★★★★ <em>4.9 from 12,400 reviews</em></span
    >
    <h1>Recipes from <em>real grandmothers,</em> measured for real kitchens.</h1>
    <p>Saved by 500,000 home cooks who never want to scroll past life-stories again.</p>
    <a class="hs-sop-cta" href="#start">Open the cookbook</a>
    <ul class="hs-sop-logos" aria-label="Featured by">
      <li>NYT</li>
      <li>BON APPÉTIT</li>
      <li>EATER</li>
      <li>GUARDIAN</li>
      <li>SAVEUR</li>
    </ul>
  </div>
</section>
```

**CSS:**
```css
.hs-sop {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(70% 60% at 50% 0%, #f7ecd3, transparent 70%),
    #faf3e3;
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2845;
  box-sizing: border-box;
}
.hs-sop-inner { max-width: 720px; text-align: center; width: 100%; }
.hs-sop-stars {
  display: inline-block; padding: 6px 14px;
  background: #fff; border: 1px solid #e2c89a;
  border-radius: 999px; color: #c9962b;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.hs-sop-stars em { color: #6b614f; font-style: normal; font-weight: 500; margin-left: 6px; }
.hs-sop h1 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  color: #3a4f2a;
}
.hs-sop h1 em { color: #6b1e4a; font-style: italic; }
.hs-sop p { margin: 0 auto 28px; font-size: 16px; line-height: 1.55; color: #6b614f; max-width: 480px; }
.hs-sop-cta {
  display: inline-block; padding: 13px 26px;
  background: #6b1e4a; color: #faf3e3;
  border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  margin-bottom: 32px;
  transition: background 0.18s;
}
.hs-sop-cta:hover { background: #4a1232; }
.hs-sop-logos {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 38px); justify-content: center;
  padding-top: 24px; border-top: 1px solid #e2c89a;
}
.hs-sop-logos li {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  color: #6b614f;
}
@media (prefers-reduced-motion: reduce) { .hs-sop-cta { transition: none; } }
```

### 08. Animated Headline

**Type:** Pure CSS
**Description:** 1950s-diner animated headline — words lift into view with staggered delay, retro coral and ivory on jet black, neon-script CTA. Flips between two taglines on a loop.

**HTML:**
```html
<section class="hs-anh" aria-label="Hero">
  <div class="hs-anh-inner">
    <span class="hs-anh-eye">— OPEN 24 HRS —</span>
    <h1>
      <span class="hs-anh-w" style="--d: 0">Late</span>
      <span class="hs-anh-w" style="--d: 1">night</span>
      <span class="hs-anh-w" style="--d: 2">tunes,</span>
      <br />
      <span class="hs-anh-w" style="--d: 3">made</span>
      <span class="hs-anh-w" style="--d: 4">for</span>
      <span class="hs-anh-w hs-anh-em" style="--d: 5">cruising.</span>
    </h1>
    <p class="hs-anh-sub">A radio station that never sleeps and never sells you anything.</p>
    <a class="hs-anh-cta" href="#tune">Tune in</a>
  </div>
</section>
```

**CSS:**
```css
.hs-anh {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0d0d0d;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fdf3e0;
  box-sizing: border-box;
}
.hs-anh-inner { max-width: 720px; text-align: center; }
.hs-anh-eye {
  display: inline-block; font-family: 'Courier New', monospace;
  font-size: 12px; letter-spacing: 0.24em; color: #ff7461; margin-bottom: 26px;
}
.hs-anh h1 {
  margin: 0 0 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.05;
  color: #fdf3e0;
}
.hs-anh-w {
  display: inline-block; opacity: 0;
  animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--d) * 0.12s);
}
.hs-anh-em { color: #ff7461; font-style: italic; }
@keyframes hs-anh-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-anh-sub { font-size: 15px; line-height: 1.55; color: #b8a890; margin: 0 auto 28px; max-width: 420px;
  opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 0.8s forwards;
}
.hs-anh-cta {
  display: inline-block; padding: 14px 28px;
  background: transparent; color: #ff7461;
  border: 2px solid #ff7461; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0; animation: hs-anh-rise 0.7s cubic-bezier(.22,1,.36,1) 1.1s forwards;
  transition: background 0.18s, color 0.18s;
}
.hs-anh-cta:hover { background: #ff7461; color: #0d0d0d; box-shadow: 0 0 22px rgba(255,116,97,0.5); }
@media (prefers-reduced-motion: reduce) {
  .hs-anh-w, .hs-anh-sub, .hs-anh-cta { animation: none; opacity: 1; }
}
```

### 09. Before/After Hero

**Type:** Light JS
**Description:** Native <code>&lt;input type="range"&gt;</code> drives a CSS clip-path slider that wipes between a "before" desert scene and an "after" lush scene. Burnt orange + petrol blue + cream.

**HTML:**
```html
<section class="hs-baf" aria-label="Hero">
  <div class="hs-baf-stage">
    <div class="hs-baf-after" aria-hidden="true">
      <div class="hs-baf-mountains hs-baf-after-m"></div>
      <span class="hs-baf-sun"></span>
      <span class="hs-baf-label">AFTER</span>
    </div>
    <div class="hs-baf-before" aria-hidden="true" id="hs-baf-clip">
      <div class="hs-baf-mountains hs-baf-before-m"></div>
      <span class="hs-baf-moon"></span>
      <span class="hs-baf-label">BEFORE</span>
    </div>
    <input
      type="range"
      min="0"
      max="100"
      value="50"
      class="hs-baf-slider"
      id="hs-baf-range"
      aria-label="Compare before and after"
      aria-valuetext="50 percent"
    />
    <span class="hs-baf-handle" aria-hidden="true" id="hs-baf-handle"></span>
  </div>
  <div class="hs-baf-copy">
    <h1>Restoration, <em>one acre at a time.</em></h1>
    <p>Drag the slider. We turn dust to forest in 18 months — proven on three continents.</p>
    <a class="hs-baf-cta" href="#donate">Plant a tree →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-baf {
  display: grid; grid-template-columns: 1.1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(24px, 4vw, 48px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: #f7ecd9;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c4a4f;
  box-sizing: border-box;
}
.hs-baf-stage {
  position: relative;
  height: 100%; min-height: 360px;
  border-radius: 12px; overflow: hidden;
  border: 4px solid #2c4a4f;
  box-shadow: 8px 8px 0 #c75a2b;
}
.hs-baf-after, .hs-baf-before { position: absolute; inset: 0; }
.hs-baf-after { background: linear-gradient(180deg, #87b8a8 0%, #c8b890 70%, #d6c69a 100%); }
.hs-baf-before { background: linear-gradient(180deg, #c75a2b 0%, #e8a36e 60%, #f0b87a 100%); clip-path: inset(0 50% 0 0); }
.hs-baf-mountains { position: absolute; bottom: 30%; left: 0; right: 0; height: 40%; }
.hs-baf-after-m {
  background:
    linear-gradient(135deg, transparent 50%, #4a6b58 50%) 0 0/120px 80px,
    linear-gradient(45deg, transparent 50%, #4a6b58 50%) 60px 0/120px 80px;
  background-repeat: repeat-x;
}
.hs-baf-before-m {
  background:
    linear-gradient(135deg, transparent 50%, #8a3614 50%) 0 0/120px 80px,
    linear-gradient(45deg, transparent 50%, #8a3614 50%) 60px 0/120px 80px;
  background-repeat: repeat-x;
}
.hs-baf-sun {
  position: absolute; top: 18%; left: 70%;
  width: 70px; height: 70px; border-radius: 50%;
  background: #f7d875;
  box-shadow: 0 0 50px rgba(247,216,117,0.6);
}
.hs-baf-moon {
  position: absolute; top: 14%; left: 26%;
  width: 60px; height: 60px; border-radius: 50%;
  background: #f7ecd9; box-shadow: 0 0 30px rgba(247,236,217,0.4);
}
.hs-baf-label {
  position: absolute; bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  padding: 4px 10px;
  background: #2c4a4f; color: #f7ecd9;
}
.hs-baf-after .hs-baf-label { right: 14px; }
.hs-baf-before .hs-baf-label { left: 14px; background: #8a3614; }
.hs-baf-slider {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
  z-index: 3;
}
.hs-baf-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: #f7ecd9;
  box-shadow: 0 0 0 1px #2c4a4f;
  pointer-events: none; z-index: 2;
}
.hs-baf-handle::after {
  content: '⇆'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 38px; height: 38px;
  background: #f7ecd9; border: 2px solid #2c4a4f;
  border-radius: 50%; color: #2c4a4f;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.hs-baf-copy { padding: 12px 0; }
.hs-baf h1 {
  margin: 0 0 14px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  color: #2c4a4f;
}
.hs-baf h1 em { color: #c75a2b; font-style: italic; }
.hs-baf p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #4a6b58; }
.hs-baf-cta {
  display: inline-block; padding: 12px 22px;
  background: #c75a2b; color: #f7ecd9;
  border-radius: 4px; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: background 0.18s;
}
.hs-baf-cta:hover { background: #8a3614; }
@media (max-width: 720px) {
  .hs-baf { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-baf-cta { transition: none; } }
```

**JS:**
```js
(function () {
  var range = document.getElementById('hs-baf-range');
  var clip  = document.getElementById('hs-baf-clip');
  var handle= document.getElementById('hs-baf-handle');
  if (!range || !clip || !handle) return;
  function update() {
    var v = range.value;
    clip.style.clipPath = 'inset(0 ' + (100 - v) + '% 0 0)';
    handle.style.left = v + '%';
    range.setAttribute('aria-valuetext', v + ' percent');
  }
  range.addEventListener('input', update);
  update();
})();
```

### 10. Sticky Scroll Cue

**Type:** Pure CSS
**Description:** Tall full-bleed hero with a bouncing scroll indicator at the bottom. Forest emerald on birch with a soft yellow CTA — the cabin / retreat brand aesthetic.

**HTML:**
```html
<section class="hs-scc" aria-label="Hero">
  <div class="hs-scc-inner">
    <span class="hs-scc-eye">— A small place upstate</span>
    <h1>Slow Sundays, <em>warm wood,</em> not a single notification.</h1>
    <p>Three cabins, two acres, no Wi-Fi, one shared kitchen. Book yourself a real weekend.</p>
    <a class="hs-scc-cta" href="#book">Check availability</a>
  </div>
  <div class="hs-scc-cue" aria-hidden="true">
    <span>scroll</span>
    <div class="hs-scc-mouse"><span></span></div>
  </div>
</section>
```

**CSS:**
```css
.hs-scc {
  position: relative;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px) 90px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(38,82,52,0.16), transparent 70%),
    #f3eadb;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1e3a26;
  box-sizing: border-box;
}
.hs-scc-inner { max-width: 720px; text-align: center; }
.hs-scc-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #6b8a6f; margin-bottom: 18px;
}
.hs-scc h1 {
  margin: 0 0 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-scc h1 em { color: #b8893a; font-style: italic; }
.hs-scc p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #5a6b58; max-width: 480px; }
.hs-scc-cta {
  display: inline-block; padding: 13px 26px;
  background: #f4d35e; color: #1e3a26;
  border: 2px solid #1e3a26; border-radius: 0;
  text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  box-shadow: 4px 4px 0 #1e3a26;
  transition: transform 0.15s, box-shadow 0.15s;
}
.hs-scc-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 #1e3a26; }
.hs-scc-cue {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; color: #6b8a6f;
  text-transform: uppercase;
}
.hs-scc-mouse {
  width: 22px; height: 36px;
  border: 2px solid #1e3a26; border-radius: 12px;
  position: relative;
}
.hs-scc-mouse span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 7px; background: #1e3a26; border-radius: 2px;
  animation: hs-scc-bounce 1.4s ease-in-out infinite;
}
@keyframes hs-scc-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50%      { transform: translate(-50%, 10px); opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-scc-mouse span { animation: none; }
  .hs-scc-cta { transition: none; }
}
```

### 11. Magazine Cover

**Type:** Pure CSS
**Description:** Print-magazine cover treatment — issue stamp, oversized italic serif headline, vertical spine label, foil-stamped corner number. Plum and champagne on linen.

**HTML:**
```html
<section class="hs-mag" aria-label="Hero">
  <div class="hs-mag-frame">
    <span class="hs-mag-spine">Vol. XII · No. 47 · Spring</span>
    <span class="hs-mag-num">04</span>
    <header>
      <span class="hs-mag-issue">SPRING 2026 · INDEX NO. 04</span>
    </header>
    <h1>
      The Quiet
      <em>Revolution</em>
      of slow type.
    </h1>
    <p>
      Why every serious editorial brand is going back to serifs, italics, and a single column wide
      enough to think in.
    </p>
    <a class="hs-mag-cta" href="#read">Read the issue →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-mag {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(20px, 4vw, 40px);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(60,40,80,0.04) 47px 48px),
    #ede4d3;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2a1f3a;
  box-sizing: border-box;
}
.hs-mag-frame {
  position: relative;
  width: 100%; max-width: 720px;
  background: #f7f1e1;
  border: 1px solid #2a1f3a;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) clamp(48px, 6vw, 72px);
  box-shadow: 12px 12px 0 #c69e5a, 12px 12px 0 1px #2a1f3a;
}
.hs-mag-spine {
  position: absolute; top: 50%; left: 18px;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.32em;
  color: #6b1f4a;
  white-space: nowrap;
  padding: 14px 4px;
  border-block: 1px solid #6b1f4a;
}
.hs-mag-num {
  position: absolute; top: 16px; right: 22px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px; font-weight: 800; font-style: italic;
  color: #c69e5a;
  text-shadow: 1px 1px 0 #2a1f3a;
}
.hs-mag header { padding-bottom: 18px; border-bottom: 1px solid #2a1f3a; margin-bottom: 22px; }
.hs-mag-issue {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em;
  color: #2a1f3a;
}
.hs-mag h1 {
  margin: 0 0 22px;
  font-size: clamp(40px, 7vw, 78px);
  font-weight: 600; line-height: 0.95; letter-spacing: -0.02em;
}
.hs-mag h1 em {
  font-style: italic; font-weight: 700;
  color: #6b1f4a; display: block;
  font-size: 1.2em;
}
.hs-mag p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px; line-height: 1.45;
  color: #4a3858; margin: 0 0 24px; max-width: 460px;
}
.hs-mag-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: #2a1f3a; text-decoration: none;
  border-bottom: 2px solid #2a1f3a; padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.hs-mag-cta:hover { color: #6b1f4a; border-color: #6b1f4a; }
```

### 12. Asymmetric Type

**Type:** Pure CSS
**Description:** Construction-site asymmetric typography — broken across columns with intentional misalignment, hi-vis safety yellow on concrete grey, black hard rules.

**HTML:**
```html
<section class="hs-asy" aria-label="Hero">
  <div class="hs-asy-grid">
    <span class="hs-asy-tag">/ ZONE 4</span>
    <h1 class="hs-asy-h">
      <span class="hs-asy-l1">UNDER</span>
      <span class="hs-asy-l2">construction.</span>
      <span class="hs-asy-l3">Always.</span>
    </h1>
    <span class="hs-asy-amp">&amp;</span>
    <p class="hs-asy-p">
      Software you ship is software that's still being built. We make CI fast enough to do it on the
      dev's terms — not the build's.
    </p>
    <a class="hs-asy-cta" href="#start">DEPLOY →</a>
    <span class="hs-asy-stripe" aria-hidden="true"></span>
  </div>
</section>
```

**CSS:**
```css
.hs-asy {
  display: grid; place-items: stretch;
  width: 100%; min-height: 480px;
  padding: clamp(24px, 4vw, 48px);
  background: #c8c4be;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0a0a0a;
  box-sizing: border-box;
  overflow: hidden;
}
.hs-asy-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr 0.6fr;
  grid-template-rows: auto 1fr auto auto;
  gap: 14px;
  width: 100%;
}
.hs-asy-tag {
  grid-column: 1 / 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  background: #f5d028; padding: 4px 10px; align-self: start; justify-self: start;
}
.hs-asy-h {
  grid-column: 1 / 4;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 900; line-height: 0.85; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hs-asy-l1 { display: block; font-size: clamp(60px, 11vw, 130px); }
.hs-asy-l2 { display: block; font-size: clamp(40px, 8vw, 90px); margin-left: clamp(40px, 12vw, 180px); color: #f5d028; -webkit-text-stroke: 2px #0a0a0a; }
.hs-asy-l3 { display: block; font-size: clamp(40px, 8vw, 90px); margin-left: clamp(80px, 24vw, 360px); }
.hs-asy-amp {
  grid-column: 3; grid-row: 3;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(80px, 14vw, 160px); font-weight: 800; font-style: italic;
  color: #0a0a0a; line-height: 1; align-self: end; justify-self: end;
}
.hs-asy-p {
  grid-column: 1 / 3; grid-row: 3;
  font-size: 14px; line-height: 1.55; max-width: 380px;
  color: #2a2a2a; margin: 0; align-self: end;
  border-left: 4px solid #f5d028;
  padding-left: 14px;
}
.hs-asy-cta {
  grid-column: 1 / 2; grid-row: 4;
  display: inline-block; padding: 14px 26px;
  background: #0a0a0a; color: #f5d028;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800; font-size: 14px; letter-spacing: 0.16em;
  text-decoration: none; border: 0;
  align-self: start; justify-self: start;
  transition: background 0.15s;
}
.hs-asy-cta:hover { background: #f5d028; color: #0a0a0a; }
.hs-asy-stripe {
  grid-column: 2 / 4; grid-row: 4;
  height: 14px; align-self: center;
  background: repeating-linear-gradient(45deg, #0a0a0a 0 12px, #f5d028 12px 24px);
}
@media (max-width: 720px) {
  .hs-asy-l2, .hs-asy-l3 { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .hs-asy-cta { transition: none; } }
```

### 13. Oversized Number

**Type:** Pure CSS
**Description:** Vintage wine-label poster — a massive faded burgundy "1924" set behind italic serif copy with gold-leaf accents on cream paper.

**HTML:**
```html
<section class="hs-ovn" aria-label="Hero">
  <div class="hs-ovn-bg" aria-hidden="true">1924</div>
  <div class="hs-ovn-inner">
    <span class="hs-ovn-eye">— Estate · Vinifera ·</span>
    <h1>A century of <em>quiet wines.</em></h1>
    <p>
      Six grapes. Four hectares. One family that still skips the marketing and lets the vintage
      speak.
    </p>
    <a class="hs-ovn-cta" href="#cellar">Visit the cellar</a>
  </div>
</section>
```

**CSS:**
```css
.hs-ovn {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #f5ebd4;
  font-family: 'Playfair Display', Georgia, serif;
  color: #2a0a18;
  box-sizing: border-box;
}
.hs-ovn-bg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: clamp(220px, 38vw, 480px); font-weight: 900; line-height: 1;
  color: #6b1230; opacity: 0.12; pointer-events: none;
  letter-spacing: -0.02em;
}
.hs-ovn-inner { position: relative; z-index: 1; max-width: 580px; text-align: center; }
.hs-ovn-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #c69e3d; margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.hs-ovn h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 600; line-height: 1.05;
}
.hs-ovn h1 em { color: #6b1230; font-style: italic; }
.hs-ovn p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px; line-height: 1.55;
  color: #5a3848; margin: 0 auto 24px; max-width: 460px;
}
.hs-ovn-cta {
  display: inline-block; padding: 12px 28px;
  background: transparent; color: #6b1230;
  border: 1.5px solid #6b1230; border-radius: 0;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.18s, color 0.18s;
}
.hs-ovn-cta:hover { background: #6b1230; color: #f5ebd4; }
@media (prefers-reduced-motion: reduce) { .hs-ovn-cta { transition: none; } }
```

### 14. Marquee Headline

**Type:** Pure CSS
**Description:** A single phrase scrolls horizontally on a loop with a counter-direction line beneath. Hot tangerine on chocolate brown — the streetwear / drop-culture treatment.

**HTML:**
```html
<section class="hs-mar" aria-label="Hero">
  <div class="hs-mar-track hs-mar-r" aria-hidden="true">
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
    <span
      >EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT · EVERYTHING SELLS OUT ·
    </span>
  </div>
  <div class="hs-mar-inner">
    <h1>Drop 04. <em>Tuesday 11am EST.</em></h1>
    <p>72 pieces. No restock. No back-orders. No DM begging.</p>
    <a class="hs-mar-cta" href="#join">Set the alarm</a>
  </div>
  <div class="hs-mar-track hs-mar-l" aria-hidden="true">
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
    <span>NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · NO RESTOCK · </span>
  </div>
</section>
```

**CSS:**
```css
.hs-mar {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; min-height: 480px;
  padding: 0;
  background: #2a1410;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffe4d6;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout paint;
}
.hs-mar-track {
  display: flex; gap: 32px;
  white-space: nowrap; overflow: hidden;
  padding: 18px 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 900;
  font-style: italic; letter-spacing: -0.01em;
  background: #f04e23; color: #2a1410;
  border-block: 4px solid #2a1410;
}
.hs-mar-track span { animation: hs-mar-roll 22s linear infinite; flex-shrink: 0; }
.hs-mar-r span { animation-direction: normal; }
.hs-mar-l { background: #2a1410; color: #f04e23; border-color: #f04e23; }
.hs-mar-l span { animation-direction: reverse; }
@keyframes hs-mar-roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hs-mar-inner {
  flex: 1;
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 56px);
  text-align: center;
}
.hs-mar h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
  color: #ffe4d6;
}
.hs-mar h1 em { color: #f5b148; font-style: italic; }
.hs-mar p { margin: 0 auto 22px; font-size: 16px; color: #c8a899; max-width: 460px; line-height: 1.55; }
.hs-mar-cta {
  display: inline-block; padding: 13px 28px;
  background: #f5b148; color: #2a1410;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
  transition: background 0.15s;
}
.hs-mar-cta:hover { background: #ffe4d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-mar-track span { animation: none; }
  .hs-mar-cta { transition: none; }
}
```

### 15. Photo Card Hero

**Type:** Pure CSS
**Description:** Aesop / Apple-style full-bleed photo with copy in the bottom-left corner. Desaturated denim photograph painted in CSS, rust accent, linen card overlay.

**HTML:**
```html
<section class="hs-phc" aria-label="Hero">
  <div class="hs-phc-wall" aria-hidden="true"></div>
  <div class="hs-phc-light" aria-hidden="true"></div>
  <div class="hs-phc-scene" aria-hidden="true">
    <span class="hs-phc-shelf"></span>
    <span class="hs-phc-peg"></span>
    <div class="hs-phc-coat">
      <span class="hs-phc-collar"></span>
      <span class="hs-phc-pocket hs-phc-pocket-l"></span>
      <span class="hs-phc-pocket hs-phc-pocket-r"></span>
      <span class="hs-phc-button hs-phc-b1"></span>
      <span class="hs-phc-button hs-phc-b2"></span>
      <span class="hs-phc-button hs-phc-b3"></span>
    </div>
    <span class="hs-phc-shadow"></span>
  </div>
  <span class="hs-phc-grain" aria-hidden="true"></span>
  <article class="hs-phc-card">
    <span class="hs-phc-eye">— A garment for the long haul</span>
    <h1>The chore coat, <em>made to age.</em></h1>
    <p>
      Heavy duck canvas. Rivet-tacked seams. The kind of jacket that earns its character on the
      wearer, not in the wash.
    </p>
    <a class="hs-phc-cta" href="#shop">Read the story →</a>
  </article>
  <span class="hs-phc-meta" aria-hidden="true">N°04 — DUCK CANVAS WORKWEAR · MADE IN PORTUGAL</span>
</section>
```

**CSS:**
```css
.hs-phc {
  position: relative; overflow: hidden;
  width: 100%; min-height: 480px;
  background:
    linear-gradient(180deg, #2c3a48 0%, #1f2a35 60%, #15202a 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #f3eadb;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
}
.hs-phc-wall {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(95deg, transparent 0 80px, rgba(255,255,255,0.018) 80px 81px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.06) 4px 5px);
  pointer-events: none;
}
.hs-phc-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 30% 25%, rgba(255,230,180,0.16) 0%, transparent 60%),
    radial-gradient(80% 100% at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 70%);
  pointer-events: none;
}
.hs-phc-scene {
  position: relative;
  grid-column: 1; grid-row: 1;
  align-self: stretch;
  display: grid; place-items: center;
  z-index: 1;
}
.hs-phc-shelf {
  position: absolute; top: 18%; left: 18%; right: 18%;
  height: 8px;
  background: linear-gradient(180deg, #5a3e22 0%, #3a2814 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 4px 8px rgba(0,0,0,0.35);
  border-radius: 2px;
}
.hs-phc-peg {
  position: absolute; top: 16%; left: 50%;
  width: 14px; height: 26px;
  background: linear-gradient(180deg, #c89a4e 0%, #7a5a2e 100%);
  border-radius: 6px 6px 4px 4px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 2;
}
.hs-phc-coat {
  position: absolute; top: 22%; left: 50%;
  width: 200px; height: 280px;
  transform: translateX(-50%);
  background:
    radial-gradient(80% 100% at 50% 0%, #4a5e7a 0%, #34465c 50%, #1f2a3a 100%);
  clip-path: polygon(
    35% 0%, 65% 0%,
    78% 8%, 95% 14%,
    100% 100%,
    0% 100%,
    5% 14%, 22% 8%
  );
  box-shadow: inset -8px 0 24px rgba(0,0,0,0.4), inset 8px 0 16px rgba(255,255,255,0.04);
}
.hs-phc-collar {
  position: absolute; top: 4%; left: 50%;
  width: 56px; height: 24px;
  transform: translateX(-50%);
  background: #5a708c;
  clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 25% 100%);
}
.hs-phc-pocket {
  position: absolute; top: 50%;
  width: 50px; height: 60px;
  background: rgba(0,0,0,0.18);
  border: 1.5px solid #2a3848;
  border-radius: 2px;
}
.hs-phc-pocket-l { left: 14%; }
.hs-phc-pocket-r { right: 14%; }
.hs-phc-button {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  background: radial-gradient(circle at 35% 35%, #d8a05c 0%, #6a4818 100%);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.hs-phc-b1 { top: 22%; }
.hs-phc-b2 { top: 40%; }
.hs-phc-b3 { top: 58%; }
.hs-phc-shadow {
  position: absolute; bottom: 0; left: 50%;
  width: 240px; height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(4px);
}
.hs-phc-grain {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,0.025) 0.5px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.05) 0.5px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none; z-index: 3;
  mix-blend-mode: overlay;
}
.hs-phc-card {
  grid-column: 2; grid-row: 1;
  align-self: end; justify-self: start;
  margin: 0 0 clamp(28px, 4vw, 48px) 0;
  max-width: 440px;
  background: #f3eadb;
  color: #1a2434;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 2px;
  box-shadow: 0 22px 40px rgba(0,0,0,0.32);
  position: relative; z-index: 4;
}
.hs-phc-eye {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 14px;
  color: #b85020; margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.hs-phc h1 {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
}
.hs-phc h1 em { color: #b85020; font-style: italic; }
.hs-phc-card p {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.6;
  color: #4a5466;
}
.hs-phc-cta {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a2434; text-decoration: none;
  border-bottom: 1.5px solid #1a2434; padding-bottom: 3px;
  transition: color 0.15s, border-color 0.15s;
}
.hs-phc-cta:hover { color: #b85020; border-color: #b85020; }
.hs-phc-meta {
  position: absolute;
  bottom: clamp(14px, 2vw, 22px); left: clamp(20px, 3vw, 32px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(243,234,219,0.55);
  z-index: 4;
}
@media (max-width: 720px) {
  .hs-phc { grid-template-columns: 1fr; grid-template-rows: 280px auto; }
  .hs-phc-scene { grid-column: 1; grid-row: 1; }
  .hs-phc-card { grid-column: 1; grid-row: 2; margin: -40px 16px 16px; align-self: auto; justify-self: stretch; }
  .hs-phc-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hs-phc-cta { transition: none; } }
```

### 16. Brutalist Text-Only

**Type:** Pure CSS
**Description:** Raw Swiss-punk brutalist hero — pure black, traffic-cone orange highlight, acid lime accent, hard 8px offset shadows. No images, no soft anything.

**HTML:**
```html
<section class="hs-bru" aria-label="Hero">
  <div class="hs-bru-stack">
    <span class="hs-bru-num">001 / 042</span>
    <h1 class="hs-bru-h">
      THE WEB
      <em>WAS NEVER</em>
      MEANT TO
      <span class="hs-bru-mark">LOOK SAFE.</span>
    </h1>
    <p class="hs-bru-p">A design studio for brands that would rather be remembered than liked.</p>
    <div class="hs-bru-row">
      <a class="hs-bru-cta hs-bru-cta-pri" href="#work">[ WORK ]</a>
      <a class="hs-bru-cta" href="#talk">[ EMAIL ]</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.hs-bru {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
.hs-bru-stack { max-width: 760px; }
.hs-bru-num {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  background: #ff5e1a; color: #0a0a0a;
  padding: 4px 10px;
  margin-bottom: 22px;
}
.hs-bru-h {
  margin: 0 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(40px, 7vw, 84px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.04em;
  text-transform: uppercase;
}
.hs-bru-h em { color: #c4f048; font-style: italic; display: inline; }
.hs-bru-mark {
  display: inline-block; background: #ff5e1a; color: #0a0a0a;
  padding: 0 12px; transform: rotate(-1deg);
}
.hs-bru-p {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; line-height: 1.55;
  color: #a8a8a8; margin: 0 0 26px; max-width: 480px;
  border-top: 2px solid #ff5e1a; padding-top: 14px;
}
.hs-bru-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hs-bru-cta {
  display: inline-block; padding: 12px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  background: transparent; color: #fff;
  border: 2px solid #fff;
  transition: background 0.12s, color 0.12s;
}
.hs-bru-cta:hover { background: #fff; color: #0a0a0a; }
.hs-bru-cta-pri { background: #ff5e1a; color: #0a0a0a; border-color: #ff5e1a; }
.hs-bru-cta-pri:hover { background: #c4f048; border-color: #c4f048; color: #0a0a0a; }
@media (prefers-reduced-motion: reduce) { .hs-bru-cta { transition: none; } }
```

### 17. Vertical Type Hero

**Type:** Pure CSS
**Description:** Japanese traditional vertical typography — headline reads top-to-bottom using <code>writing-mode: vertical-rl</code>. Indigo on washi-paper white, vermillion seal stamp.

**HTML:**
```html
<section class="hs-vrt" aria-label="Hero">
  <div class="hs-vrt-bg" aria-hidden="true"></div>
  <aside class="hs-vrt-seal" aria-hidden="true">
    <span>無</span>
    <span>名</span>
  </aside>
  <div class="hs-vrt-vertical">
    <h1>静かな<em>道具</em>。</h1>
  </div>
  <div class="hs-vrt-copy">
    <p class="hs-vrt-jp">Shizuka na dōgu — quiet tools.</p>
    <p class="hs-vrt-en">
      Hand-forged carpentry implements. Made by one family in Niigata since 1873.
    </p>
    <a class="hs-vrt-cta" href="#shop">View the catalogue →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-vrt {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  width: 100%; min-height: 480px; max-height: 540px;
  padding: clamp(28px, 4vw, 56px);
  gap: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(20,40,80,0.06), transparent 70%),
    #f5ede0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #1a2858;
  box-sizing: border-box;
  overflow: hidden;
}
.hs-vrt-bg {
  position: absolute; right: -60px; top: 0; bottom: 0;
  width: 280px;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(26,40,88,0.05) 23px 24px);
  pointer-events: none;
}
.hs-vrt-vertical {
  grid-column: 1; grid-row: 1 / 3;
  writing-mode: vertical-rl; text-orientation: upright;
  align-self: center;
  display: block;
  height: 100%;
  min-height: 380px;
}
.hs-vrt h1 {
  margin: 0;
  font-size: clamp(36px, 4.8vw, 56px);
  font-weight: 700; letter-spacing: 0.04em;
  color: #1a2858;
  line-height: 1.2;
  white-space: nowrap;
}
.hs-vrt h1 em { color: #c63828; font-style: normal; font-weight: 800; }
.hs-vrt-copy {
  grid-column: 2; grid-row: 1 / 3;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; z-index: 1;
  max-width: 460px;
}
.hs-vrt-jp {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 18px;
  color: #c63828; margin: 0;
  letter-spacing: 0.06em;
}
.hs-vrt-en {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  color: #4a5478; margin: 0;
}
.hs-vrt-seal {
  position: absolute;
  top: clamp(20px, 3vw, 32px); right: clamp(20px, 3vw, 32px);
  width: 78px; height: 78px;
  background: #c63828; color: #f5ede0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 22px;
  border: 2px solid #c63828;
  box-shadow: inset 0 0 0 4px #f5ede0, inset 0 0 0 6px #c63828;
  z-index: 2;
}
.hs-vrt-cta {
  display: inline-block; padding: 12px 22px;
  background: #1a2858; color: #f5ede0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  align-self: flex-start;
  transition: background 0.15s;
}
.hs-vrt-cta:hover { background: #c63828; }
@media (max-width: 720px) {
  .hs-vrt { grid-template-columns: 1fr; max-height: none; }
  .hs-vrt-vertical { grid-column: 1; grid-row: auto; min-height: 200px; }
  .hs-vrt-copy { grid-column: 1; grid-row: auto; }
  .hs-vrt-seal { top: 16px; right: 16px; width: 60px; height: 60px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hs-vrt-cta { transition: none; } }
```

### 18. Kinetic Type Hero

**Type:** Pure CSS
**Description:** Rave-poster kinetic typography — letters rotate, scale, and float individually using per-letter delay. Acid green and magenta on pure black with strobe-like accents.

**HTML:**
```html
<section class="hs-knt" aria-label="Hero">
  <div class="hs-knt-pulse" aria-hidden="true"></div>
  <h1 class="hs-knt-h">
    <span style="--i: 0">F</span><span style="--i: 1">U</span><span style="--i: 2">L</span
    ><span style="--i: 3">L</span>
    <span class="hs-knt-gap"></span>
    <span style="--i: 4">B</span><span style="--i: 5">A</span><span style="--i: 6">S</span
    ><span style="--i: 7">S</span>
    <span class="hs-knt-gap"></span>
    <em
      ><span style="--i: 8">M</span><span style="--i: 9">O</span><span style="--i: 10">D</span
      ><span style="--i: 11">E</span></em
    >
  </h1>
  <p class="hs-knt-p">
    A booking app for warehouse parties. The line is the door, not the website.
  </p>
  <a class="hs-knt-cta" href="#tickets">Get tickets ⚡</a>
</section>
```

**CSS:**
```css
.hs-knt {
  position: relative;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}
.hs-knt-pulse {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(196,255,82,0.18), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, rgba(238,82,206,0.20), transparent 60%);
  animation: hs-knt-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes hs-knt-pulse {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}
.hs-knt-h {
  position: relative; z-index: 1;
  margin: 0 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900; letter-spacing: -0.04em; line-height: 0.92;
  text-transform: uppercase;
}
.hs-knt-h span {
  display: inline-block;
  animation: hs-knt-jitter 2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.06s);
}
.hs-knt-h em { color: #ee52ce; font-style: italic; }
.hs-knt-h em span { color: #ee52ce; }
.hs-knt-h > span:nth-child(-n+4) { color: #c4ff52; }
.hs-knt-gap { display: inline-block; width: 0.4em; }
@keyframes hs-knt-jitter {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateY(-8px) rotate(-2deg) scale(1.04); }
  50%      { transform: translateY(0) rotate(2deg) scale(0.98); }
  75%      { transform: translateY(6px) rotate(-1deg) scale(1.02); }
}
.hs-knt-p { position: relative; z-index: 1; margin: 0 auto 26px; font-size: 16px; color: #888; max-width: 440px; }
.hs-knt-cta {
  position: relative; z-index: 1;
  display: inline-block; padding: 14px 28px;
  background: #c4ff52; color: #0a0a0a;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 0 28px rgba(196,255,82,0.45);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.hs-knt-cta:hover {
  background: #ee52ce; color: #fff;
  box-shadow: 0 0 28px rgba(238,82,206,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hs-knt-h span, .hs-knt-pulse { animation: none; }
  .hs-knt-cta { transition: none; }
}
```

### 19. Bento Hero

**Type:** Pure CSS
**Description:** Apple-style bento hero — one large headline tile with stat / quote / pill cells fanning around it. Matte-ceramic palette: salmon, terracotta, ivory, olive.

**HTML:**
```html
<section class="hs-bnt" aria-label="Hero">
  <article class="hs-bnt-hero">
    <span class="hs-bnt-eye">V2 — out now</span>
    <h1>The pottery <em>workbook</em> for serious hands.</h1>
    <a class="hs-bnt-cta" href="#start">Start the kiln →</a>
  </article>
  <article class="hs-bnt-stat">
    <strong>1,400</strong>
    <span>hand-thrown<br />pieces logged</span>
  </article>
  <article class="hs-bnt-quote">
    <p>“Replaced three notebooks and a chalkboard.”</p>
    <cite>— Mireya, Studio Verde</cite>
  </article>
  <article class="hs-bnt-pill"><span>★ 4.9</span><em>App Store</em></article>
  <article class="hs-bnt-cta-tile">
    <a href="#android">Android →</a>
  </article>
</section>
```

**CSS:**
```css
.hs-bnt {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "hero hero stat"
    "hero hero quote"
    "pill cta  quote";
  gap: 14px;
  width: 100%; min-height: 480px;
  padding: clamp(20px, 3vw, 32px);
  background: #f5ebde;
  font-family: 'Inter', system-ui, sans-serif;
  color: #2c1f15;
  box-sizing: border-box;
}
.hs-bnt > article {
  border-radius: 16px;
  padding: clamp(18px, 2.5vw, 26px);
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.hs-bnt-hero {
  grid-area: hero;
  background: linear-gradient(160deg, #f4a48b, #d97766);
  color: #2c1f15;
}
.hs-bnt-eye {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  background: #2c1f15; color: #f5ebde;
  padding: 4px 10px; border-radius: 999px;
  align-self: flex-start;
}
.hs-bnt-hero h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-bnt-hero h1 em { color: #6b1f12; font-style: italic; }
.hs-bnt-cta {
  align-self: flex-start;
  padding: 11px 20px;
  background: #2c1f15; color: #f5ebde;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14px;
  transition: background 0.18s;
}
.hs-bnt-cta:hover { background: #6b1f12; }
.hs-bnt-stat {
  grid-area: stat;
  background: #6b8a3e;
  color: #f5ebde;
}
.hs-bnt-stat strong { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 700; line-height: 1; }
.hs-bnt-stat span { font-size: 13px; line-height: 1.35; opacity: 0.9; }
.hs-bnt-quote {
  grid-area: quote;
  background: #2c1f15; color: #f5ebde;
}
.hs-bnt-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 17px;
  margin: 0; line-height: 1.4;
}
.hs-bnt-quote cite { font-size: 11px; font-style: normal; letter-spacing: 0.06em; opacity: 0.7; }
.hs-bnt-pill {
  grid-area: pill;
  background: #f5ebde; border: 2px solid #2c1f15;
  flex-direction: row; align-items: center; justify-content: space-between;
}
.hs-bnt-pill span { font-weight: 800; font-size: 18px; color: #c69e3d; }
.hs-bnt-pill em { font-style: normal; font-size: 11px; opacity: 0.7; letter-spacing: 0.06em; }
.hs-bnt-cta-tile {
  grid-area: cta;
  background: #d97766; padding: 0 !important;
  align-items: stretch; justify-content: stretch;
}
.hs-bnt-cta-tile a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: #2c1f15; text-decoration: none;
  font-weight: 700; font-size: 14.5px;
}
.hs-bnt-cta-tile a:hover { background: rgba(0,0,0,0.08); }
@media (max-width: 720px) {
  .hs-bnt {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "stat quote"
      "pill cta";
  }
}
@media (prefers-reduced-motion: reduce) { .hs-bnt-cta, .hs-bnt-cta-tile a { transition: none; } }
```

### 20. Gradient Text Spotlight

**Type:** Pure CSS
**Description:** Oversized headline with an animated marigold → ruby → grape gradient sweeping across the letters. The Linear / Apple wordmark shimmer treatment.

**HTML:**
```html
<section class="hs-gts" aria-label="Hero">
  <div class="hs-gts-inner">
    <span class="hs-gts-eye">v3 launching tuesday</span>
    <h1>Made for the way <span class="hs-gts-shine">creative people</span> actually work.</h1>
    <p>One canvas. Every layer. Zero exporting between apps to nudge a kerning pair.</p>
    <a class="hs-gts-cta" href="#waitlist">Join the waitlist →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-gts {
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(120,30,90,0.18), transparent 70%),
    #1a0d20;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f4e8d0;
  box-sizing: border-box;
}
.hs-gts-inner { max-width: 720px; text-align: center; }
.hs-gts-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: #f5b148; padding: 4px 10px;
  border: 1px solid rgba(245,177,72,0.4);
  border-radius: 999px;
  margin-bottom: 22px;
}
.hs-gts h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
}
.hs-gts-shine {
  display: inline-block;
  background: linear-gradient(90deg, #f5b148, #d63a5e, #7e2d8a, #f5b148);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: hs-gts-sweep 4s linear infinite;
}
@keyframes hs-gts-sweep { to { background-position: 200% 0; } }
.hs-gts p {
  margin: 0 auto 26px;
  font-size: 17px; line-height: 1.55;
  color: #b8a890; max-width: 460px;
}
.hs-gts-cta {
  display: inline-block; padding: 13px 26px;
  background: linear-gradient(90deg, #f5b148, #d63a5e);
  color: #1a0d20; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 14.5px;
  box-shadow: 0 12px 30px rgba(214,58,94,0.35);
  transition: transform 0.15s;
}
.hs-gts-cta:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .hs-gts-shine { animation: none; background-position: 0 0; }
  .hs-gts-cta { transition: none; }
}
```

### 21. Product Shot Hero

**Type:** Pure CSS
**Description:** Apple-keynote product shot — a CSS-painted device front-and-centre with floating feature badges that pulse around it. Ice blue + chrome silver on warm white.

**HTML:**
```html
<section class="hs-prd" aria-label="Hero">
  <div class="hs-prd-stage">
    <div class="hs-prd-device" aria-hidden="true">
      <div class="hs-prd-screen"></div>
      <div class="hs-prd-cam"></div>
    </div>
    <span class="hs-prd-pulse hs-prd-p1"><strong>· chip</strong>16-core neural</span>
    <span class="hs-prd-pulse hs-prd-p2"><strong>· battery</strong>22 hours</span>
    <span class="hs-prd-pulse hs-prd-p3"><strong>· weight</strong>1.24 kg</span>
  </div>
  <div class="hs-prd-copy">
    <h1>The lightest pro<br />laptop we've ever <em>shipped.</em></h1>
    <a class="hs-prd-cta" href="#buy">From $1,499 →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-prd {
  display: grid; grid-template-columns: 1.2fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background:
    radial-gradient(circle at 30% 30%, #d8e8f0 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #e8eef2 0%, transparent 50%),
    #f8fafc;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a2840;
  box-sizing: border-box;
}
.hs-prd-stage {
  position: relative; height: 100%; min-height: 320px;
  display: grid; place-items: center;
}
.hs-prd-device {
  width: 320px; height: 200px;
  background: linear-gradient(160deg, #b8c8d8 0%, #8090a8 50%, #607080 100%);
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 22px 60px rgba(96,112,128,0.4),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,0,0,0.18);
}
.hs-prd-screen {
  position: absolute; inset: 8px;
  background: linear-gradient(135deg, #1a2840 0%, #0a1428 100%);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px #0a1428;
}
.hs-prd-cam {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #1a2840;
}
.hs-prd-pulse {
  position: absolute;
  background: #fff;
  border: 1px solid #d0d8e0;
  padding: 8px 12px; border-radius: 999px;
  font-size: 12.5px; color: #1a2840;
  display: inline-flex; flex-direction: column; gap: 1px;
  box-shadow: 0 8px 22px rgba(96,112,128,0.18);
  animation: hs-prd-bob 4s ease-in-out infinite;
}
.hs-prd-pulse strong { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #6b85a5; font-weight: 600; letter-spacing: 0.04em; }
.hs-prd-p1 { top: 10%; left: 4%; animation-delay: 0s; }
.hs-prd-p2 { top: 35%; right: 0; animation-delay: -1.3s; }
.hs-prd-p3 { bottom: 12%; left: 12%; animation-delay: -2.6s; }
@keyframes hs-prd-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hs-prd-copy { padding: 12px 0; }
.hs-prd h1 {
  margin: 0 0 22px;
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  color: #1a2840;
}
.hs-prd h1 em {
  background: linear-gradient(90deg, #6b85a5, #b8c8d8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-weight: 800;
}
.hs-prd-cta {
  display: inline-block; padding: 13px 24px;
  background: #1a2840; color: #f8fafc;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14.5px;
  transition: transform 0.15s;
}
.hs-prd-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .hs-prd { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-prd-pulse { animation: none; }
  .hs-prd-cta { transition: none; }
}
```

### 22. Price Card Hero

**Type:** Pure CSS
**Description:** Heritage-banking pricing-led hero — copy left, single-tier brass-on-forest pricing card right. The 37signals-style "we have one price" treatment with a vintage finance feel.

**HTML:**
```html
<section class="hs-prc" aria-label="Hero">
  <div class="hs-prc-copy">
    <span class="hs-prc-eye">— Est. 1924 · still independent</span>
    <h1>One ledger. <em>One price.</em> One ridiculously responsive team.</h1>
    <p>
      The bookkeeping software trusted by family-owned businesses since before "SaaS" was a word.
    </p>
  </div>
  <article class="hs-prc-card">
    <header>
      <span>The Members' Plan</span>
      <span class="hs-prc-badge">No tiers</span>
    </header>
    <div class="hs-prc-price"><em>$</em><strong>49</strong><span>/ month, all in</span></div>
    <ul>
      <li>Unlimited invoices</li>
      <li>Multi-entity ledger</li>
      <li>Audit-ready exports</li>
      <li>A real human for support</li>
    </ul>
    <a class="hs-prc-cta" href="#join">Become a member</a>
  </article>
</section>
```

**CSS:**
```css
.hs-prc {
  display: grid; grid-template-columns: 1.05fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  background: #f5ecd8;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a3322;
  box-sizing: border-box;
}
.hs-prc-eye {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #8a7a3a; margin-bottom: 14px;
}
.hs-prc h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  color: #1a3322;
}
.hs-prc h1 em { color: #8a7a3a; font-style: italic; }
.hs-prc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a5a48; max-width: 460px; }
.hs-prc-card {
  background: #1a3322;
  color: #f5ecd8;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 0;
  border: 2px solid #8a7a3a;
  box-shadow:
    inset 0 0 0 4px #1a3322,
    inset 0 0 0 5px rgba(138,122,58,0.4);
}
.hs-prc-card header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 16px; border-bottom: 1px solid #8a7a3a;
  margin-bottom: 18px;
}
.hs-prc-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; padding: 2px 8px; border: 1px solid #8a7a3a; color: #c0a960; }
.hs-prc-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 22px;
}
.hs-prc-price em { font-size: 24px; font-style: normal; color: #8a7a3a; font-weight: 700; }
.hs-prc-price strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(56px, 6vw, 80px); font-weight: 800; line-height: 1;
  color: #f5ecd8;
}
.hs-prc-price span { font-size: 13px; color: #c0a960; }
.hs-prc-card ul {
  list-style: none; padding: 0; margin: 0 0 24px;
  font-size: 14px; line-height: 1.95; color: #c8d2c4;
}
.hs-prc-card ul li::before { content: '✓ '; color: #c0a960; font-weight: 800; }
.hs-prc-cta {
  display: block; text-align: center;
  padding: 14px 24px;
  background: #c0a960; color: #1a3322;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  letter-spacing: 0.04em;
  border: 0;
  transition: background 0.15s;
}
.hs-prc-cta:hover { background: #f5ecd8; }
@media (max-width: 720px) {
  .hs-prc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-prc-cta { transition: none; } }
```

### 23. App Store Hero

**Type:** Pure CSS
**Description:** iOS-pastel app-launch hero — three phone mockups fanned in lavender, soft pink, powder blue, with App Store and Google Play CTA pills below.

**HTML:**
```html
<section class="hs-app" aria-label="Hero">
  <div class="hs-app-copy">
    <span class="hs-app-eye">★★★★★ &nbsp; #1 in Lifestyle</span>
    <h1>Mood, sleep, joy — <em>tracked gently.</em></h1>
    <p>The wellness journal that doesn't gamify your serotonin into a streak.</p>
    <div class="hs-app-stores">
      <a href="#ios"><span>Download on the</span><strong>App Store</strong></a>
      <a href="#android"><span>Get it on</span><strong>Google Play</strong></a>
    </div>
  </div>
  <div class="hs-app-fan" aria-hidden="true">
    <span class="hs-app-phone hs-app-p1"></span>
    <span class="hs-app-phone hs-app-p2"></span>
    <span class="hs-app-phone hs-app-p3"></span>
  </div>
</section>
```

**CSS:**
```css
.hs-app {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background:
    linear-gradient(135deg, #e8def0 0%, #fde0e4 50%, #d8e8f0 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #3a2a55;
  box-sizing: border-box;
}
.hs-app-eye {
  display: inline-block; padding: 5px 12px;
  background: #fff; color: #c98ae0;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.hs-app h1 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
  color: #3a2a55;
}
.hs-app h1 em {
  background: linear-gradient(90deg, #c98ae0, #f59ab8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.hs-app p { margin: 0 0 24px; font-size: 16px; line-height: 1.55; color: #6a5a85; max-width: 420px; }
.hs-app-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.hs-app-stores a {
  display: inline-flex; flex-direction: column;
  padding: 10px 22px; background: #3a2a55; color: #fff;
  border-radius: 12px; text-decoration: none;
  transition: transform 0.15s;
}
.hs-app-stores a:hover { transform: translateY(-1px); }
.hs-app-stores a span { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; }
.hs-app-stores a strong { font-size: 14.5px; font-weight: 700; }
.hs-app-fan {
  position: relative; height: 100%; min-height: 360px;
  display: flex; align-items: center; justify-content: center;
}
.hs-app-phone {
  position: absolute;
  width: 130px; height: 280px;
  border-radius: 24px;
  border: 3px solid #fff;
  box-shadow:
    0 22px 50px rgba(120,80,150,0.25),
    inset 0 0 0 2px rgba(255,255,255,0.4);
}
.hs-app-p1 {
  background: linear-gradient(180deg, #c98ae0 0%, #a160c0 100%);
  transform: rotate(-12deg) translateX(-90px);
}
.hs-app-p2 {
  background: linear-gradient(180deg, #fde0e4 0%, #f59ab8 100%);
  z-index: 2;
  width: 145px; height: 300px;
}
.hs-app-p3 {
  background: linear-gradient(180deg, #d8e8f0 0%, #94b4d4 100%);
  transform: rotate(12deg) translateX(90px);
}
@media (max-width: 720px) {
  .hs-app { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-app-stores a { transition: none; } }
```

### 24. Neon CTA Hero

**Type:** Pure CSS
**Description:** Tokyo-cyberpunk neon CTA — pure black backdrop, neon pink and electric cyan glows, single CTA that breathes with a soft pulse. The conversion-funnel pattern.

**HTML:**
```html
<section class="hs-neo" aria-label="Hero">
  <span class="hs-neo-grid" aria-hidden="true"></span>
  <div class="hs-neo-inner">
    <span class="hs-neo-eye">/ ENTER THE NIGHT MARKET</span>
    <h1>Order ramen at <em>3 a.m.</em> like the locals do.</h1>
    <p>50 Tokyo back-alley vendors. One delivery app. One foreigner-friendly menu.</p>
    <a class="hs-neo-cta" href="#order">Open the menu</a>
  </div>
</section>
```

**CSS:**
```css
.hs-neo {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #0a0014;
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-neo-grid {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220%; height: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(238,82,206,0.32) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(34,211,238,0.32) 24px 25px);
  transform: translateX(-50%) perspective(800px) rotateX(60deg);
  transform-origin: center top;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  pointer-events: none;
}
.hs-neo-inner { position: relative; z-index: 1; max-width: 720px; text-align: center; }
.hs-neo-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.24em;
  color: #22d3ee; padding: 4px 14px;
  border: 1px solid #22d3ee;
  text-shadow: 0 0 10px rgba(34,211,238,0.6);
  margin-bottom: 22px;
}
.hs-neo h1 {
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 64px); font-weight: 900;
  letter-spacing: -0.02em; line-height: 1.05;
  text-shadow: 0 0 30px rgba(238,82,206,0.4);
}
.hs-neo h1 em { color: #ee52ce; font-style: italic; text-shadow: 0 0 18px rgba(238,82,206,0.7); }
.hs-neo p { margin: 0 auto 28px; font-size: 16px; color: #a890c8; max-width: 460px; line-height: 1.55; }
.hs-neo-cta {
  display: inline-block; padding: 14px 36px;
  background: transparent; color: #ee52ce;
  border: 2px solid #ee52ce; border-radius: 0;
  font-weight: 800; font-size: 15px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 18px rgba(238,82,206,0.5), inset 0 0 18px rgba(238,82,206,0.18);
  animation: hs-neo-pulse 2.4s ease-in-out infinite alternate;
  transition: background 0.15s, color 0.15s;
}
@keyframes hs-neo-pulse {
  from { box-shadow: 0 0 14px rgba(238,82,206,0.4), inset 0 0 14px rgba(238,82,206,0.14); }
  to   { box-shadow: 0 0 28px rgba(238,82,206,0.7), inset 0 0 24px rgba(238,82,206,0.28); }
}
.hs-neo-cta:hover { background: #ee52ce; color: #0a0014; }
@media (prefers-reduced-motion: reduce) {
  .hs-neo-cta { animation: none; transition: none; }
}
```

### 25. Parallax Mountain

**Type:** Pure CSS
**Description:** Layered SVG mountain silhouettes drift at different speeds — glacier blue and pine on alpine snow. The outdoor / travel-brand parallax landscape.

**HTML:**
```html
<section class="hs-prx" aria-label="Hero">
  <div class="hs-prx-sky" aria-hidden="true"></div>
  <div class="hs-prx-sun" aria-hidden="true"></div>
  <svg
    class="hs-prx-m hs-prx-m3"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,180 L120,80 L240,140 L360,60 L480,120 L600,40 L720,110 L840,70 L960,130 L1080,90 L1200,150 L1200,320 Z"
      fill="#5a7a8a"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m2"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,220 L100,140 L200,200 L320,120 L440,180 L560,100 L680,170 L800,130 L920,200 L1040,150 L1200,200 L1200,320 Z"
      fill="#3a5868"
    />
  </svg>
  <svg
    class="hs-prx-m hs-prx-m1"
    viewBox="0 0 1200 320"
    preserveAspectRatio="none"
    aria-hidden="true"
  >
    <path
      d="M0,320 L0,260 L120,200 L240,240 L360,180 L480,220 L600,160 L720,210 L840,170 L960,230 L1080,190 L1200,240 L1200,320 Z"
      fill="#1f3a4a"
    />
  </svg>
  <div class="hs-prx-inner">
    <span class="hs-prx-eye">— EST. 1958 · LAKE COUNTRY</span>
    <h1>Trails that <em>earn the silence.</em></h1>
    <p>Six lodges. One ridge. The mountains your grandfather wrote home about.</p>
    <a class="hs-prx-cta" href="#book">Reserve a cabin →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-prx {
  position: relative; overflow: hidden;
  width: 100%; min-height: 480px;
  background: linear-gradient(180deg, #d8e8f0 0%, #a8c8d8 60%, #5a7a8a 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a2840;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-prx-sky { position: absolute; inset: 0;
  background: radial-gradient(50% 70% at 80% 30%, rgba(255,240,210,0.4), transparent 70%); }
.hs-prx-sun {
  position: absolute; top: 18%; right: 18%;
  width: 80px; height: 80px; border-radius: 50%;
  background: #f9f0d6;
  box-shadow: 0 0 60px rgba(249,240,214,0.7);
}
.hs-prx-m {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 60%;
  animation: hs-prx-float 12s ease-in-out infinite alternate;
}
.hs-prx-m1 { z-index: 3; height: 38%; animation-duration: 8s; }
.hs-prx-m2 { z-index: 2; height: 50%; animation-duration: 12s; animation-delay: -2s; }
.hs-prx-m3 { z-index: 1; height: 65%; animation-duration: 16s; animation-delay: -4s; }
@keyframes hs-prx-float {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2%); }
}
.hs-prx-inner {
  position: relative; z-index: 4;
  padding: clamp(28px, 5vw, 56px);
  max-width: 540px;
}
.hs-prx-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: #1f3a4a; margin-bottom: 14px;
}
.hs-prx h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: #0d2030;
}
.hs-prx h1 em { color: #1f3a4a; font-style: italic; }
.hs-prx p { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #2a4858; max-width: 420px; }
.hs-prx-cta {
  display: inline-block; padding: 12px 22px;
  background: #f9f0d6; color: #1f3a4a;
  border: 2px solid #1f3a4a; border-radius: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.hs-prx-cta:hover { background: #1f3a4a; color: #f9f0d6; }
@media (prefers-reduced-motion: reduce) {
  .hs-prx-m { animation: none; }
  .hs-prx-cta { transition: none; }
}
```

### 26. Isometric Room

**Type:** Pure CSS
**Description:** Cozy WFH isometric — a CSS-painted desk + laptop + plant + lamp scene rendered with `transform: skewY()`. Mauve, dusty rose, and sage — the calm-productivity aesthetic.

**HTML:**
```html
<section class="hs-iso" aria-label="Hero">
  <div class="hs-iso-copy">
    <span class="hs-iso-eye">/ for the home office crowd</span>
    <h1>Deep work, <em>without the doom-tabs.</em></h1>
    <p>
      A focus timer that stays in the menu bar, not your face. Three tasks a day, one calm
      afternoon.
    </p>
    <a class="hs-iso-cta" href="#start">Start a session →</a>
  </div>
  <div class="hs-iso-scene" aria-hidden="true">
    <div class="hs-iso-desk">
      <div class="hs-iso-laptop"><span></span></div>
      <div class="hs-iso-mug"></div>
      <div class="hs-iso-plant"><span></span><span></span></div>
      <div class="hs-iso-lamp"><span></span></div>
    </div>
    <div class="hs-iso-floor"></div>
  </div>
</section>
```

**CSS:**
```css
.hs-iso {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background:
    radial-gradient(70% 60% at 70% 30%, rgba(216,150,180,0.18), transparent 70%),
    #f0e8e2;
  font-family: 'Inter', system-ui, sans-serif;
  color: #4a2840;
  box-sizing: border-box;
}
.hs-iso-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: #8a5a78; margin-bottom: 14px;
}
.hs-iso h1 {
  margin: 0 0 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.05;
}
.hs-iso h1 em { color: #8a5a78; font-style: italic; }
.hs-iso p { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: #6a4858; max-width: 420px; }
.hs-iso-cta {
  display: inline-block; padding: 12px 22px;
  background: #4a2840; color: #f0e8e2;
  border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 14px;
  transition: background 0.18s;
}
.hs-iso-cta:hover { background: #8a5a78; }
.hs-iso-scene {
  position: relative; height: 320px;
  display: grid; place-items: center;
  perspective: 800px;
}
.hs-iso-floor {
  position: absolute; bottom: 30px; left: 10%; right: 10%;
  height: 180px;
  background: linear-gradient(180deg, #d8b8c8 0%, #b890a8 100%);
  transform: rotateX(60deg);
  border-radius: 14px;
}
.hs-iso-desk {
  position: relative;
  width: 220px; height: 140px;
  background: linear-gradient(135deg, #e0c8a8 0%, #b89878 100%);
  transform: rotateX(60deg) rotateZ(-30deg);
  transform-style: preserve-3d;
  border-radius: 4px;
  box-shadow: 0 22px 40px rgba(74,40,64,0.25);
}
.hs-iso-laptop {
  position: absolute; top: 18%; left: 30%;
  width: 70px; height: 50px;
  background: #4a2840; border-radius: 4px;
  transform: translateZ(20px);
}
.hs-iso-laptop span {
  position: absolute; inset: 4px;
  background: #d8a8c0;
  border-radius: 2px;
}
.hs-iso-mug {
  position: absolute; top: 30%; right: 14%;
  width: 22px; height: 22px;
  background: #c0d8a8;
  border-radius: 4px;
  transform: translateZ(20px);
}
.hs-iso-plant {
  position: absolute; top: -6%; right: 6%;
  width: 30px; height: 50px;
}
.hs-iso-plant span {
  position: absolute; bottom: 0; width: 30px; height: 14px;
  background: #b89878; border-radius: 4px 4px 12px 12px;
  transform: translateZ(20px);
}
.hs-iso-plant span:nth-child(2) {
  width: 6px; height: 28px; bottom: 12px; left: 12px;
  background: #6a8a6a; border-radius: 6px 6px 0 0;
}
.hs-iso-lamp {
  position: absolute; top: -10%; left: 12%;
  width: 18px; height: 60px;
  background: #d8a8c0; border-radius: 4px;
}
.hs-iso-lamp span {
  position: absolute; top: -10px; left: -10px;
  width: 38px; height: 18px;
  background: #f0c0a8;
  border-radius: 50% 50% 4px 4px;
}
@media (max-width: 720px) {
  .hs-iso { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hs-iso-cta { transition: none; } }
```

### 27. 3D Card Stack

**Type:** Pure CSS
**Description:** Three luxury-cosmetics product cards in 3D perspective, fanning forward on hover. Champagne and soft blush on jet — the high-end beauty / fragrance treatment.

**HTML:**
```html
<section class="hs-cst" aria-label="Hero">
  <div class="hs-cst-copy">
    <span class="hs-cst-eye">— Cuvée 04</span>
    <h1>The fragrance <em>three editors couldn't stop wearing.</em></h1>
    <p>Bergamot, oud, and a single drop of Damascus rose. 50ml. Limited.</p>
    <a class="hs-cst-cta" href="#shop">Discover the bottle</a>
  </div>
  <div class="hs-cst-stack">
    <article class="hs-cst-card hs-cst-c1"><strong>04</strong><em>Cuvée</em></article>
    <article class="hs-cst-card hs-cst-c2"><strong>04</strong><em>Cuvée</em></article>
    <article class="hs-cst-card hs-cst-c3"><strong>04</strong><em>Cuvée</em></article>
  </div>
</section>
```

**CSS:**
```css
.hs-cst {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  background: #0d0a0a;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f0e0c8;
  box-sizing: border-box;
  perspective: 1200px;
}
.hs-cst-eye {
  display: inline-block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 16px;
  color: #c69e5a; margin-bottom: 14px;
}
.hs-cst h1 {
  margin: 0 0 18px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  color: #f0e0c8;
}
.hs-cst h1 em { color: #f5c2c8; font-style: italic; }
.hs-cst p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #b89878; max-width: 380px; }
.hs-cst-cta {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: #c69e5a; text-decoration: none;
  border-bottom: 1.5px solid #c69e5a; padding-bottom: 3px;
  transition: color 0.18s, border-color 0.18s;
}
.hs-cst-cta:hover { color: #f5c2c8; border-color: #f5c2c8; }
.hs-cst-stack {
  position: relative; height: 100%; min-height: 360px;
  display: grid; place-items: center;
  transform-style: preserve-3d;
}
.hs-cst-card {
  position: absolute;
  width: 180px; height: 260px;
  background: linear-gradient(135deg, #2a1a1a 0%, #0d0a0a 100%);
  border: 1px solid #c69e5a;
  border-radius: 6px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.hs-cst-card strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 64px; font-weight: 800; font-style: italic;
  color: #c69e5a; line-height: 1;
}
.hs-cst-card em {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-style: normal; letter-spacing: 0.24em;
  color: #c69e5a;
}
.hs-cst-c1 { transform: translateX(-90px) rotateY(20deg) translateZ(-40px); }
.hs-cst-c2 { transform: translateZ(0); z-index: 2; background: linear-gradient(135deg, #3a2828 0%, #1a1010 100%); }
.hs-cst-c3 { transform: translateX(90px) rotateY(-20deg) translateZ(-40px); }
.hs-cst-stack:hover .hs-cst-c1 { transform: translateX(-130px) rotateY(20deg) translateZ(0); }
.hs-cst-stack:hover .hs-cst-c2 { transform: translateZ(40px); }
.hs-cst-stack:hover .hs-cst-c3 { transform: translateX(130px) rotateY(-20deg) translateZ(0); }
@media (max-width: 720px) {
  .hs-cst { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-cst-card { transition: none; }
  .hs-cst-cta { transition: none; }
}
```

### 28. Particle Starfield

**Type:** Pure CSS
**Description:** Pure-CSS starfield — dots positioned via radial-gradient on a deep-navy backdrop. Electric yellow accent and dim white copy. No canvas, no per-particle DOM.

**HTML:**
```html
<section class="hs-stf" aria-label="Hero">
  <div class="hs-stf-stars" aria-hidden="true"></div>
  <div class="hs-stf-stars hs-stf-stars-2" aria-hidden="true"></div>
  <div class="hs-stf-inner">
    <span class="hs-stf-eye">★ NIGHT SKY ATLAS</span>
    <h1>Every constellation, <em>over your back yard tonight.</em></h1>
    <p>
      Point your phone up. We'll tell you which star is where, why it has that name, and when to
      look again.
    </p>
    <a class="hs-stf-cta" href="#download">Get the atlas</a>
  </div>
</section>
```

**CSS:**
```css
.hs-stf {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(248,210,72,0.16), transparent 70%),
    linear-gradient(180deg, #050a1a 0%, #0a1428 60%, #1a2840 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #f0eee0;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-stf-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 8%, #fff, transparent),
    radial-gradient(1px 1px at 28% 24%, #f8d248, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent),
    radial-gradient(1px 1px at 60% 30%, #fff, transparent),
    radial-gradient(2px 2px at 78% 18%, #f8d248, transparent),
    radial-gradient(1px 1px at 90% 32%, #fff, transparent),
    radial-gradient(1px 1px at 18% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 64%, #fff, transparent),
    radial-gradient(1px 1px at 52% 52%, #f8d248, transparent),
    radial-gradient(2px 2px at 70% 76%, #fff, transparent),
    radial-gradient(1px 1px at 84% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 8% 80%, #fff, transparent),
    radial-gradient(1px 1px at 96% 88%, #fff, transparent);
  background-size: 100% 100%;
  animation: hs-stf-twinkle 4s ease-in-out infinite alternate;
}
.hs-stf-stars-2 {
  background-image:
    radial-gradient(1px 1px at 22% 14%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 48% 30%, rgba(248,210,72,0.5), transparent),
    radial-gradient(1px 1px at 66% 8%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 44%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 14% 62%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 76% 88%, rgba(255,255,255,0.5), transparent);
  animation-delay: -2s;
}
@keyframes hs-stf-twinkle {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
.hs-stf-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-stf-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.24em;
  color: #f8d248; margin-bottom: 22px;
}
.hs-stf h1 {
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.05;
  color: #f0eee0;
}
.hs-stf h1 em { color: #f8d248; font-style: italic; }
.hs-stf p { margin: 0 auto 26px; font-size: 16px; line-height: 1.55; color: #b8b0a0; max-width: 460px; }
.hs-stf-cta {
  display: inline-block; padding: 13px 26px;
  background: #f8d248; color: #050a1a;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 14.5px; letter-spacing: 0.04em;
  transition: background 0.15s;
}
.hs-stf-cta:hover { background: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hs-stf-stars { animation: none; }
  .hs-stf-cta { transition: none; }
}
```

### 29. Glitch Text Hero

**Type:** Pure CSS
**Description:** VHS-glitch hero — RGB-channel offsets create a tape-static glitch effect. VHS red and tape blue against a static-gray background, the analogue cyberpunk treatment.

**HTML:**
```html
<section class="hs-glt" aria-label="Hero">
  <span class="hs-glt-static" aria-hidden="true"></span>
  <span class="hs-glt-scan" aria-hidden="true"></span>
  <div class="hs-glt-inner">
    <span class="hs-glt-eye">REC ● 00:42:18</span>
    <h1 data-text="LOST &amp; FOUND" class="hs-glt-h">LOST &amp; FOUND</h1>
    <p>
      A search engine for VHS-era ephemera. Public-access TV, mall demos, regional news. The
      forgotten internet of the 80s.
    </p>
    <a class="hs-glt-cta" href="#search">Search the tapes →</a>
  </div>
</section>
```

**CSS:**
```css
.hs-glt {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px);
  background: #1a1818;
  font-family: 'JetBrains Mono', monospace;
  color: #d8d4c8;
  box-sizing: border-box;
  contain: layout paint;
}
.hs-glt-static {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
  pointer-events: none;
  animation: hs-glt-jit 0.2s steps(2) infinite;
}
.hs-glt-scan {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
  pointer-events: none;
}
@keyframes hs-glt-jit {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-1px,1px); }
  100% { transform: translate(1px,-1px); }
}
.hs-glt-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; }
.hs-glt-eye {
  display: inline-block; padding: 4px 10px;
  background: #d63838; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 22px;
  animation: hs-glt-blink 1.4s steps(2) infinite;
}
@keyframes hs-glt-blink {
  to { opacity: 0.5; }
}
.hs-glt-h {
  position: relative; margin: 0 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 9vw, 100px); font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.92;
  color: #f0eee0;
}
.hs-glt-h::before, .hs-glt-h::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0; right: 0;
  pointer-events: none;
  text-align: center;
}
.hs-glt-h::before {
  color: #d63838;
  transform: translate(-3px,0);
  clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%);
  animation: hs-glt-rgb 2.4s ease-in-out infinite;
}
.hs-glt-h::after {
  color: #38b8d6;
  transform: translate(3px,0);
  clip-path: polygon(0 56%, 100% 56%, 100% 88%, 0 88%);
  animation: hs-glt-rgb 2.4s ease-in-out infinite reverse;
}
@keyframes hs-glt-rgb {
  0%, 100% { transform: translate(-3px,0); }
  50%      { transform: translate(3px,2px); }
}
.hs-glt p { margin: 0 auto 24px; font-size: 14px; line-height: 1.6; color: #98948c; max-width: 460px; }
.hs-glt-cta {
  display: inline-block; padding: 12px 22px;
  background: #38b8d6; color: #1a1818;
  border-radius: 0; text-decoration: none;
  font-weight: 800; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.hs-glt-cta:hover { background: #d63838; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .hs-glt-static, .hs-glt-eye, .hs-glt-h::before, .hs-glt-h::after { animation: none; }
  .hs-glt-cta { transition: none; }
}
```

### 30. Conic Orbit Hero

**Type:** Pure CSS
**Description:** Solar-corona conic gradient ring orbits the headline using <code>@property</code> animatable angle. Gold and ember orange on jet black — the AI / launch treatment with a stellar feel.

**HTML:**
```html
<section class="hs-orb" aria-label="Hero">
  <div class="hs-orb-stage">
    <div class="hs-orb-ring" aria-hidden="true"></div>
    <div class="hs-orb-core" aria-hidden="true"></div>
  </div>
  <div class="hs-orb-inner">
    <span class="hs-orb-eye">solar v3</span>
    <h1>Compute that <em>moves at the speed of light.</em></h1>
    <p>The new generation of inference cards. 3× the throughput. Half the heat.</p>
    <a class="hs-orb-cta" href="#preorder">Pre-order →</a>
  </div>
</section>
```

**CSS:**
```css
@property --hs-orb-a {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.hs-orb {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: 480px;
  padding: clamp(28px, 5vw, 56px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: #0a0805;
  font-family: 'Inter', system-ui, sans-serif;
  color: #f8e8c8;
  box-sizing: border-box;
}
.hs-orb-stage {
  position: relative;
  height: 100%; min-height: 320px;
  display: grid; place-items: center;
}
.hs-orb-ring {
  width: 320px; height: 320px;
  border-radius: 50%;
  background:
    conic-gradient(from var(--hs-orb-a),
      #f8d248, #ff6b1a, #d63a18, #ff6b1a, #f8d248);
  filter: blur(8px);
  animation: hs-orb-spin 12s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 96px, #000 100px, #000 158px, transparent 162px);
          mask: radial-gradient(circle, transparent 96px, #000 100px, #000 158px, transparent 162px);
}
.hs-orb-core {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff6b1a 0%, #d63a18 50%, #6b1a08 100%);
  box-shadow: 0 0 80px rgba(255,107,26,0.4);
}
@keyframes hs-orb-spin { to { --hs-orb-a: 360deg; } }
.hs-orb-inner { position: relative; z-index: 1; }
.hs-orb-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.16em;
  color: #f8d248; padding: 4px 12px;
  background: rgba(248,210,72,0.12);
  border: 1px solid rgba(248,210,72,0.4);
  border-radius: 999px;
  margin-bottom: 18px;
}
.hs-orb h1 {
  margin: 0 0 16px;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
  color: #f8e8c8;
  word-wrap: break-word;
}
.hs-orb h1 em {
  background: linear-gradient(90deg, #f8d248, #ff6b1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
  display: inline-block;
}
.hs-orb p { margin: 0 0 26px; font-size: 16px; line-height: 1.55; color: #b89878; max-width: 420px; }
.hs-orb-cta {
  display: inline-block; padding: 13px 26px;
  background: linear-gradient(135deg, #ff6b1a, #d63a18);
  color: #0a0805; border-radius: 999px;
  text-decoration: none; font-weight: 800; font-size: 14.5px;
  box-shadow: 0 14px 36px rgba(255,107,26,0.35);
  transition: transform 0.15s;
}
.hs-orb-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .hs-orb { grid-template-columns: 1fr; }
  .hs-orb-ring, .hs-orb-core { width: 200px; height: 200px; }
  .hs-orb-core { width: 130px; height: 130px; }
  .hs-orb-ring { -webkit-mask: radial-gradient(circle, transparent 60px, #000 64px, #000 98px, transparent 102px); mask: radial-gradient(circle, transparent 60px, #000 64px, #000 98px, transparent 102px); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-orb-ring { animation: none; }
  .hs-orb-cta { transition: none; }
}
```

---
## 28 CSS Input Field Designs

URL: https://codefronts.com/components/css-input-fields/
Description: 28 hand-coded CSS input field designs — floating label, OTP, password strength, voice search, autocomplete, range slider, credit card and more. Semantic HTML, copy-paste ready.
Demo count: 28

### 01. Floating Label

**Type:** Pure CSS
**Description:** Classic floating label input. The placeholder lifts and shrinks above the field on focus — a calm, accessible pattern used across every modern product surface.

**HTML:**
```html
<label class="if-float">
  <input type="email" name="email" autocomplete="email" placeholder=" " required />
  <span class="if-float-label">Email address</span>
</label>
```

**CSS:**
```css
.if-float {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-float input {
  width: 100%;
  box-sizing: border-box;
  padding: 18px 14px 8px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-float input:focus {
  border-color: #7c6cff;
  background: #1f1f2a;
}

.if-float-label {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition:
    transform 0.2s,
    font-size 0.2s,
    color 0.2s;
}

.if-float input:focus + .if-float-label,
.if-float input:not(:placeholder-shown) + .if-float-label {
  transform: translateY(-9px);
  font-size: 10px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

### 02. Underline Sweep

**Type:** Pure CSS
**Description:** Minimal underline-style input. The bottom border draws outward from the centre on focus — a subtle, premium touch driven by `:focus-within`.

**HTML:**
```html
<label class="if-line">
  <span class="if-line-label">Username</span>
  <span class="if-line-wrap">
    <input type="text" name="username" autocomplete="username" placeholder="@codefronts" required />
  </span>
</label>
```

**CSS:**
```css
.if-line {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-line-wrap {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.if-line-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, #ff6c8a, #ff9a76);
  transition:
    left 0.3s ease,
    right 0.3s ease;
}

.if-line-wrap:focus-within::after {
  left: 0;
  right: 0;
}

.if-line input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.if-line input::placeholder {
  color: #b8b6d4;
}
```

### 03. Neon Glow

**Type:** Pure CSS
**Description:** Cyan neon-glow input. The border crisps and the box-shadow blooms on focus — perfect for dark dashboards, gaming UIs, and developer tools.

**HTML:**
```html
<label class="if-neon">
  <span class="if-neon-label">SECURE TOKEN</span>
  <input type="text" name="token" placeholder="sk_live_••••••••••••" required />
</label>
```

**CSS:**
```css
.if-neon {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-neon-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6cffff;
  text-shadow: 0 0 8px rgba(108, 255, 255, 0.5);
}

.if-neon input {
  width: 100%;
  box-sizing: border-box;
  background: #0a0a14;
  border: 1px solid rgba(108, 255, 255, 0.4);
  border-radius: 6px;
  padding: 11px 14px;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}

.if-neon input::placeholder {
  color: rgba(108, 255, 255, 0.45);
}

.if-neon input:focus {
  border-color: #6cffff;
  background: #0d1820;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.45),
    inset 0 0 12px rgba(108, 255, 255, 0.12);
}
```

### 04. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass input on a soft gradient. Translucent surface with `backdrop-filter` blur and an inner highlight — an elegant fit for hero sections.

**HTML:**
```html
<div class="if-glass">
  <div class="if-glass-bg" aria-hidden="true"></div>
  <label class="if-glass-field">
    <span>Search</span>
    <input type="search" name="q" placeholder="Search anything…" />
  </label>
</div>
```

**CSS:**
```css
.if-glass {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: 14px;
  padding: 14px;
  isolation: isolate;
  overflow: hidden;
}

.if-glass-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 60% at 30% 30%, #f59e0b 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 70%, #7c3aed 0%, transparent 60%), #0a0a14;
  filter: blur(24px);
  transform: scale(1.2);
}

.if-glass-field {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.if-glass-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-glass-field input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.if-glass-field input:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
}
```

### 05. Notched Outline

**Type:** Pure CSS
**Description:** Material-style notched outline. The label sits inside a gap cut into the border. Subtle, professional, and works beautifully for forms with dense fields.

**HTML:**
```html
<label class="if-notch">
  <span class="if-notch-label">Full name</span>
  <input type="text" name="name" autocomplete="name" placeholder=" " required />
  <span class="if-notch-frame" aria-hidden="true">
    <span class="if-notch-l"></span>
    <span class="if-notch-cut"><span>Full name</span></span>
    <span class="if-notch-r"></span>
  </span>
</label>
```

**CSS:**
```css
.if-notch {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-notch input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.if-notch input::placeholder {
  color: transparent;
}

.if-notch-label {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.if-notch input:focus ~ .if-notch-label,
.if-notch input:not(:placeholder-shown) ~ .if-notch-label {
  opacity: 0;
}

.if-notch-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 12px auto 1fr;
  pointer-events: none;
}

.if-notch-l,
.if-notch-cut,
.if-notch-r {
  border: 1px solid rgba(46, 184, 138, 0.35);
  transition: border-color 0.2s;
}

.if-notch-l {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.if-notch-r {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.if-notch-cut {
  border-left: 0;
  border-right: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.if-notch-cut > span {
  font-size: 10px;
  color: rgba(46, 184, 138, 0.85);
  font-weight: 600;
  background: #07070f;
  padding: 0 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-13px) scale(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.if-notch input:focus ~ .if-notch-frame .if-notch-cut > span,
.if-notch input:not(:placeholder-shown) ~ .if-notch-frame .if-notch-cut > span {
  transform: translateY(-13px) scale(1);
}

.if-notch:focus-within .if-notch-l,
.if-notch:focus-within .if-notch-cut,
.if-notch:focus-within .if-notch-r {
  border-color: #2eb88a;
}
```

### 06. Liquid Border

**Type:** Pure CSS
**Description:** Animated stroke that draws around the field on focus. A small flourish that makes a single text input feel deliberate and premium.

**HTML:**
```html
<label class="if-liquid">
  <span class="if-liquid-label">Project name</span>
  <input type="text" name="project" placeholder="My next big idea…" required />
</label>
```

**CSS:**
```css
.if-liquid {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.if-liquid input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid #2a2a36;
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
  background-image:
    linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24),
    linear-gradient(90deg, #fbbf24, #fbbf24), linear-gradient(0deg, #fbbf24, #fbbf24);
  background-repeat: no-repeat;
  background-size:
    0 2px,
    2px 0,
    0 2px,
    2px 0;
  background-position:
    0 0,
    100% 0,
    100% 100%,
    0 100%;
  transition:
    background-size 0.35s linear,
    border-color 0.2s;
}

.if-liquid input::placeholder {
  color: #b8b6d4;
}

.if-liquid input:focus {
  border-color: transparent;
  background-size:
    100% 2px,
    2px 100%,
    100% 2px,
    2px 100%;
  transition-delay: 0s, 0.35s, 0.7s, 1.05s;
  transition-duration: 0.35s;
}
```

### 07. Inline Validation

**Type:** Pure CSS
**Description:** Live `:valid` / `:invalid` feedback. Green tick when correct, red cross when not — driven by `:has()` and pseudo-elements, no JavaScript required.

**HTML:**
```html
<label class="if-val">
  <span class="if-val-label">Email</span>
  <span class="if-val-wrap">
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </span>
  <span class="if-val-help">We'll never share your address.</span>
</label>
```

**CSS:**
```css
.if-val {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-val-label {
  font-weight: 600;
  letter-spacing: 0.04em;
}

.if-val-wrap {
  position: relative;
  display: block;
}

.if-val input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 38px 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-val input:focus {
  border-color: #7c6cff;
}

.if-val-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) scale(0.5);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  opacity: 0;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.2s;
}

.if-val:has(input:not(:placeholder-shown):invalid) input {
  border-color: rgba(239, 68, 68, 0.55);
}

.if-val:has(input:not(:placeholder-shown):invalid) .if-val-wrap::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: #ef4444
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'><path d='M2 2 L8 8 M8 2 L2 8'/></svg>")
    center/10px no-repeat;
}

.if-val:has(input:not(:placeholder-shown):valid) input {
  border-color: rgba(34, 197, 94, 0.55);
}

.if-val:has(input:not(:placeholder-shown):valid) .if-val-wrap::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  background: #22c55e
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5 L4.2 7.2 L8 3'/></svg>")
    center/10px no-repeat;
}

.if-val-help {
  font-size: 10.5px;
  color: #b8b6d4;
}
```

### 08. Search with Clear

**Type:** Pure CSS
**Description:** Search input with a leading magnifier icon and a trailing clear button. The clear control appears only when the field has content — handled with `:placeholder-shown`.

**HTML:**
```html
<form class="if-search" role="search">
  <span class="if-search-icon" aria-hidden="true">
    <svg viewBox="0 0 16 16" width="14" height="14">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M11 11l3 3M7 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"
      />
    </svg>
  </span>
  <input type="search" name="q" placeholder="Search projects, people, files…" aria-label="Search" />
  <button type="reset" class="if-search-clear" aria-label="Clear search">
    <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.6"
        stroke-linecap="round"
        d="M2 2l8 8M10 2l-8 8"
      />
    </svg>
  </button>
</form>
```

**CSS:**
```css
.if-search {
  position: relative;
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0 8px 0 36px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-search:focus-within {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}

.if-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8b6d4;
  display: grid;
  place-items: center;
}

.if-search:focus-within .if-search-icon {
  color: #60a5fa;
}

.if-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 11px 0;
}

.if-search input::placeholder {
  color: #b8b6d4;
}

.if-search input::-webkit-search-cancel-button {
  display: none;
}

.if-search-clear {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: 50%;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}

.if-search:has(input:placeholder-shown) .if-search-clear,
.if-search:has(input[value=""]) .if-search-clear {
  opacity: 0;
  pointer-events: none;
}

.if-search-clear:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f0eeff;
}
```

### 09. Password Strength

**Type:** Pure CSS
**Description:** Sign-up password input with a live strength bar that grades red → amber → green. Driven by `:has(input:valid/:invalid)` — zero scoring JavaScript.

**HTML:**
```html
<label class="if-pw">
  <span class="if-pw-label">Password</span>
  <input
    type="password"
    name="password"
    autocomplete="new-password"
    placeholder="At least 12 characters"
    minlength="6"
    required
  />
  <span class="if-pw-meter" aria-hidden="true"><span class="if-pw-fill"></span></span>
  <span class="if-pw-hint">Use 12+ characters with letters, numbers, and a symbol.</span>
</label>
```

**CSS:**
```css
.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-pw-label {
  font-weight: 600;
}

.if-pw input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.if-pw input:focus {
  border-color: #c084fc;
}

.if-pw-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.if-pw-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.if-pw:has(input:placeholder-shown) .if-pw-fill {
  width: 0;
}

.if-pw:has(input:not(:placeholder-shown):invalid) .if-pw-fill {
  width: 30%;
}

.if-pw:has(input:not(:placeholder-shown):valid) .if-pw-fill {
  width: 65%;
}

.if-pw:has(input:focus:valid) .if-pw-fill {
  width: 100%;
}

.if-pw-hint {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-pw-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-pw-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-pw-wrap:focus-within {
  border-color: #7c6cff;
}

.if-pw input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  letter-spacing: 0.08em;
}

.if-pw input::placeholder {
  color: #b8b6d4;
}

.if-pw-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.if-pw-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.if-pw-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #b8b6d4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.if-pw-eye-off {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye-off {
  display: block;
}

.if-pw-toggle[aria-pressed="true"] svg {
  stroke: #7c6cff;
}
```

### 10. OTP Code

**Type:** Light JS
**Description:** One-time-passcode entry split across six boxes inside a single `<fieldset>`. Auto-advance, backspace step-back, and full paste-to-fill — `autocomplete="one-time-code"` drives SMS auto-suggest.

**HTML:**
```html
<fieldset class="if-otp">
  <legend class="if-otp-legend">Verification code</legend>
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    autocomplete="one-time-code"
    pattern="[0-9]"
    aria-label="Digit 1"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 2"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 3"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 4"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 5"
    data-if-otp
  />
  <input
    type="text"
    inputmode="numeric"
    maxlength="1"
    pattern="[0-9]"
    aria-label="Digit 6"
    data-if-otp
  />
</fieldset>
```

**CSS:**
```css
.if-otp {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 280px;
  position: relative;
}

.if-otp-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.if-otp input {
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f0eeff;
  outline: none;
  caret-color: #7c6cff;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.12s;
}

.if-otp input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.1);
  transform: translateY(-1px);
}
```

**JS:**
```js
// OTP — auto-advance, backspace step-back, full paste-to-fill
document.querySelectorAll(".if-otp").forEach(function (row) {
  var inputs = Array.prototype.slice.call(row.querySelectorAll("[data-if-otp]"));
  inputs.forEach(function (input, i) {
    input.addEventListener("input", function () {
      input.value = (input.value || "").replace(/\\D/g, "").slice(0, 1);
      if (input.value && inputs[i + 1]) inputs[i + 1].focus();
    });
    input.addEventListener("keydown", function (e) {
      if (e.key === "Backspace" && !input.value && inputs[i - 1]) inputs[i - 1].focus();
    });
    input.addEventListener("paste", function (e) {
      var data = (e.clipboardData || window.clipboardData).getData("text");
      var digits = (data || "").replace(/\\D/g, "").slice(0, inputs.length);
      if (!digits) return;
      e.preventDefault();
      for (var j = 0; j < digits.length; j++) {
        if (inputs[i + j]) inputs[i + j].value = digits[j];
      }
      inputs[Math.min(i + digits.length, inputs.length - 1)].focus();
    });
  });
});
```

### 11. Rotating Placeholder

**Type:** Light JS
**Description:** The native placeholder attribute itself rotates through four sample queries every 2.5 seconds — "Search products…" → "Search docs…" → "Search people…" → "Search settings…". Light JS swaps the attribute; the browser does the rest. Stops the moment the user focuses or starts typing.

**HTML:**
```html
<label class="if-anim">
  <span class="if-anim-cap">Search</span>
  <input
    type="search"
    name="q"
    inputmode="search"
    placeholder="Search products…"
    aria-label="Search"
    data-if-rotate='["Search products…","Search docs…","Search people…","Search settings…"]'
  />
</label>
```

**CSS:**
```css
.if-anim {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-anim-cap {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-anim input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.25s,
    background 0.2s;
}

.if-anim input:focus {
  border-color: #c084fc;
  background: #1f1f2a;
}

.if-anim input::placeholder {
  color: #b8b6d4;
  transition: opacity 0.25s ease;
}

.if-anim input.is-fading::placeholder {
  opacity: 0;
}
```

**JS:**
```js
// Rotating Placeholder — swap the input's placeholder attribute on a 2.5s loop
document.querySelectorAll("[data-if-rotate]").forEach(function (input) {
  var phrases;
  try {
    phrases = JSON.parse(input.getAttribute("data-if-rotate") || "[]");
  } catch (e) {
    phrases = [];
  }
  if (!phrases.length) return;
  var i = 0,
    paused = false;
  function tick() {
    if (paused || document.activeElement === input || input.value) return;
    input.classList.add("is-fading");
    setTimeout(function () {
      i = (i + 1) % phrases.length;
      input.setAttribute("placeholder", phrases[i]);
      input.classList.remove("is-fading");
    }, 250);
  }
  setInterval(tick, 2500);
  input.addEventListener("focus", function () {
    paused = true;
  });
  input.addEventListener("blur", function () {
    paused = !!input.value;
  });
});
```

### 12. Tag Input

**Type:** Light JS
**Description:** Type a tag and press Enter or comma to commit it as a chip. Backspace on an empty input removes the last chip — a polished pattern for filters and email recipients.

**HTML:**
```html
<label class="if-tag">
  <span class="if-tag-label">Tags</span>
  <span class="if-tag-wrap" data-if-tags>
    <span class="if-tag-list"></span>
    <input type="text" placeholder="Add a tag…" aria-label="Tags" />
  </span>
  <span class="if-tag-help">Press <kbd>Enter</kbd> or <kbd>,</kbd> to add</span>
</label>
```

**CSS:**
```css
.if-tag {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-tag-label {
  font-weight: 600;
}

.if-tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  align-items: center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-tag-wrap:focus-within {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
}

.if-tag-list {
  display: contents;
}

.if-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #fdba74;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}

.if-tag-chip button {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  opacity: 0.7;
}

.if-tag-chip button:hover {
  opacity: 1;
}

.if-tag input {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 2px 0;
}

.if-tag input::placeholder {
  color: #b8b6d4;
}

.if-tag-help {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-tag-help kbd {
  display: inline-block;
  background: #2a2a36;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 0 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}
```

**JS:**
```js
// Tag input — Enter/comma commits a chip, Backspace removes the last
document.querySelectorAll("[data-if-tags]").forEach(function (wrap) {
  var input = wrap.querySelector("input");
  var list = wrap.querySelector(".if-tag-list");
  if (!input || !list) return;

  function addChip(value) {
    value = (value || "").trim();
    if (!value) return;
    var chip = document.createElement("span");
    chip.className = "if-tag-chip";
    chip.textContent = value + " ";
    var x = document.createElement("button");
    x.type = "button";
    x.setAttribute("aria-label", "Remove tag " + value);
    x.textContent = "×";
    x.addEventListener("click", function () {
      chip.remove();
    });
    chip.appendChild(x);
    list.appendChild(chip);
  }

  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      addChip(input.value);
      input.value = "";
    } else if (e.key === "Backspace" && !input.value) {
      var last = list.querySelector(".if-tag-chip:last-child");
      if (last) last.remove();
    }
  });
});
```

### 13. Phone with Country

**Type:** Pure CSS
**Description:** Phone number input with a native `<select>` for the country dialling code. Semantic, accessible by default, and styled to match the input seamlessly.

**HTML:**
```html
<label class="if-phone">
  <span class="if-phone-label">Phone</span>
  <span class="if-phone-wrap">
    <select aria-label="Country code" name="country">
      <option value="+44">🇬🇧 +44</option>
      <option value="+1" selected>🇺🇸 +1</option>
      <option value="+91">🇮🇳 +91</option>
      <option value="+33">🇫🇷 +33</option>
      <option value="+49">🇩🇪 +49</option>
      <option value="+81">🇯🇵 +81</option>
    </select>
    <input type="tel" name="phone" autocomplete="tel" placeholder="(555) 123-4567" required />
  </span>
</label>
```

**CSS:**
```css
.if-phone {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-phone-label {
  font-weight: 600;
}

.if-phone-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.if-phone-wrap:focus-within {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.if-phone select {
  background: rgba(255, 255, 255, 0.04);
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 10px 28px 10px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%239d9bbf' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.if-phone select option {
  background: #1a1a22;
  color: #f0eeff;
}

.if-phone input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  padding: 10px 12px;
  min-width: 0;
}

.if-phone input::placeholder {
  color: #b8b6d4;
}
```

### 14. Stepper Number

**Type:** Light JS
**Description:** Quantity input with custom −/+ controls. Native `<input type="number">` underneath keeps keyboard arrows, validation, and screen-reader semantics intact.

**HTML:**
```html
<label class="if-step">
  <span class="if-step-label">Quantity</span>
  <span class="if-step-wrap">
    <button type="button" class="if-step-btn" data-if-step="-1" aria-label="Decrease">−</button>
    <input type="number" name="qty" min="0" max="99" value="1" aria-label="Quantity" />
    <button type="button" class="if-step-btn" data-if-step="1" aria-label="Increase">+</button>
  </span>
</label>
```

**CSS:**
```css
.if-step {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 220px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-step-label {
  font-weight: 600;
}

.if-step-wrap {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-step-wrap:focus-within {
  border-color: #14b8a6;
}

.if-step-btn {
  background: rgba(20, 184, 166, 0.06);
  border: 0;
  color: #5eead4;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.if-step-btn:hover {
  background: rgba(20, 184, 166, 0.18);
  color: #fff;
}

.if-step-btn:active {
  background: rgba(20, 184, 166, 0.28);
}

.if-step input {
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 10px 0;
  -moz-appearance: textfield;
}

.if-step input::-webkit-outer-spin-button,
.if-step input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
```

**JS:**
```js
// Stepper +/- buttons — clamp to min/max
document.querySelectorAll(".if-step-wrap").forEach(function (wrap) {
  var input = wrap.querySelector('input[type="number"]');
  if (!input) return;
  wrap.querySelectorAll("[data-if-step]").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var dir = parseInt(btn.dataset.ifStep, 10) || 0;
      var min = input.min !== "" ? Number(input.min) : -Infinity;
      var max = input.max !== "" ? Number(input.max) : Infinity;
      var val = (Number(input.value) || 0) + dir;
      if (val < min) val = min;
      if (val > max) val = max;
      input.value = String(val);
    });
  });
});
```

### 15. File Drop Zone

**Type:** Pure CSS
**Description:** Drag-and-drop file input with a custom dashed boundary. Native `<input type="file">` underneath, the visible filename appearing via `:has()` — accessible, keyboard-friendly, and minimal.

**HTML:**
```html
<label class="if-file">
  <input type="file" name="upload" accept="image/*,.pdf" />
  <span class="if-file-icon" aria-hidden="true">
    <svg
      viewBox="0 0 24 24"
      width="22"
      height="22"
      fill="none"
      stroke="currentColor"
      stroke-width="1.6"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="17 8 12 3 7 8" />
      <line x1="12" y1="3" x2="12" y2="15" />
    </svg>
  </span>
  <span class="if-file-text">
    <strong>Click to upload</strong> or drag &amp; drop
    <span class="if-file-types">PNG, JPG, or PDF · max 10 MB</span>
  </span>
</label>
```

**CSS:**
```css
.if-file {
  position: relative;
  display: block;
  width: 100%;
  max-width: 320px;
  cursor: pointer;
  border: 1.5px dashed rgba(99, 102, 241, 0.5);
  border-radius: 12px;
  padding: 22px 18px;
  background: rgba(99, 102, 241, 0.05);
  text-align: center;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}

.if-file:hover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.1);
}

.if-file:focus-within {
  border-color: #818cf8;
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}

.if-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.if-file-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
}

.if-file-text {
  display: block;
  font-size: 13px;
  color: #c8c0ff;
}

.if-file-text strong {
  color: #a5b4fc;
  font-weight: 600;
}

.if-file-types {
  display: block;
  font-size: 11px;
  color: #b8b6d4;
  margin-top: 4px;
}
```

### 16. Currency Input

**Type:** Pure CSS
**Description:** Right-aligned numeric input with an inline `$` prefix. `inputmode="decimal"` brings up the right mobile keyboard; `:focus-within` lights the prefix to match the field accent.

**HTML:**
```html
<label class="if-curr">
  <span class="if-curr-label">Amount</span>
  <span class="if-curr-wrap">
    <span class="if-curr-prefix">$</span>
    <input type="text" name="amount" inputmode="decimal" pattern="[0-9.,]*" placeholder="0.00" />
    <span class="if-curr-suffix">USD</span>
  </span>
</label>
```

**CSS:**
```css
.if-curr {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-curr-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-curr-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-curr-wrap:focus-within {
  border-color: #f5a84a;
  background: #1f1f2a;
}

.if-curr-prefix {
  color: #b8b6d4;
  font:
    600 14px/1 system-ui,
    sans-serif;
  transition: color 0.2s;
}

.if-curr-wrap:focus-within .if-curr-prefix {
  color: #f5a84a;
}

.if-curr input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 14px/1 system-ui,
    sans-serif;
  text-align: right;
  -moz-appearance: textfield;
}

.if-curr input::-webkit-outer-spin-button,
.if-curr input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.if-curr input::placeholder {
  color: #b8b6d4;
}

.if-curr-suffix {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: #b8b6d4;
  letter-spacing: 0.06em;
}
```

### 17. Date Picker Native

**Type:** Pure CSS
**Description:** A styled `<input type="date">` keeps every native picker behaviour (keyboard, accessibility, browser/OS calendars) while the chrome matches the rest of your form. `::-webkit-calendar-picker-indicator` is recoloured to match the accent.

**HTML:**
```html
<label class="if-date">
  <span class="if-date-label">Start date</span>
  <input type="date" name="start" />
</label>
```

**CSS:**
```css
.if-date {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-date-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-date input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  color-scheme: dark;
}

.if-date input:focus {
  border-color: #06b6d4;
  background: #1f1f2a;
}

.if-date input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(5) hue-rotate(150deg);
  cursor: pointer;
  opacity: 0.8;
}

.if-date input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
```

### 18. Time Range

**Type:** Pure CSS
**Description:** Two `<input type="time">` paired with a typographic `→` divider. Single visual unit while remaining two independent fields for keyboard nav and form submission.

**HTML:**
```html
<fieldset class="if-time">
  <legend class="if-time-legend">Quiet hours</legend>
  <span class="if-time-row">
    <label
      ><span class="if-time-cap">From</span><input type="time" name="from" value="22:00"
    /></label>
    <span class="if-time-sep" aria-hidden="true">→</span>
    <label><span class="if-time-cap">To</span><input type="time" name="to" value="07:00" /></label>
  </span>
</fieldset>
```

**CSS:**
```css
.if-time {
  width: 100%;
  max-width: 320px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  background: #1a1a22;
}

.if-time-legend {
  padding: 0 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.if-time label {
  flex: 1;
  display: grid;
  gap: 4px;
}

.if-time-cap {
  font-size: 10px;
  color: #b8b6d4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.if-time input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #0c0c12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font:
    600 13px/1 "JetBrains Mono",
    monospace;
  outline: none;
  color-scheme: dark;
}

.if-time input:focus {
  border-color: #a78bfa;
}

.if-time-sep {
  color: #a78bfa;
  font-size: 14px;
  align-self: end;
  padding-bottom: 9px;
}
```

### 19. Color Picker

**Type:** Pure CSS
**Description:** A `<input type="color">` swatch chip paired with a hex text field — both accept the same `name` and submit value via the underlying form. Sibling-`+` selectors mirror the swatch state.

**HTML:**
```html
<label class="if-color">
  <span class="if-color-label">Brand colour</span>
  <span class="if-color-wrap">
    <input type="color" id="if-color-c" value="#7c6cff" aria-label="Pick colour" />
    <input
      type="text"
      id="if-color-t"
      value="#7c6cff"
      aria-label="Hex value"
      pattern="^#[0-9A-Fa-f]{6}$"
    />
  </span>
</label>
```

**CSS:**
```css
.if-color {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-color-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-color-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-color-wrap:focus-within {
  border-color: #7c6cff;
}

.if-color input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 6px;
  border: 0;
  outline: none;
  cursor: pointer;
  background: transparent;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.if-color input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.if-color input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}

.if-color input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 0 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 13px/1 "JetBrains Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
```

### 20. Search with Voice

**Type:** Light JS
**Description:** Search field with a microphone trigger that toggles a recording state — pulses a halo while "listening". Real `<input type="search">` so AT announces it as a search field.

**HTML:**
```html
<form class="if-voice" role="search" autocomplete="off">
  <label class="if-voice-label" for="if-voice-input">Voice search</label>
  <span class="if-voice-wrap">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="if-voice-glass">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
    <input
      id="if-voice-input"
      type="search"
      name="q"
      inputmode="search"
      placeholder="Speak or type to search..."
    />
    <button
      type="button"
      class="if-voice-mic"
      aria-label="Start voice input"
      aria-pressed="false"
      data-if-voice
    >
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <rect x="9" y="3" width="6" height="11" rx="3" />
        <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
      </svg>
    </button>
  </span>
</form>
```

**CSS:**
```css
.if-voice {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-voice-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-voice-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-voice-wrap:focus-within {
  border-color: #ff6c8a;
}

.if-voice-glass {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: #6b6987;
  stroke-width: 2;
  stroke-linecap: round;
}

.if-voice input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
}

.if-voice input::placeholder {
  color: #b8b6d4;
}

.if-voice-mic {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s;
}

.if-voice-mic:hover {
  background: rgba(255, 108, 138, 0.1);
}

.if-voice-mic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  stroke-linecap: round;
}

.if-voice-mic[aria-pressed="true"] svg {
  stroke: #ff6c8a;
}

.if-voice-mic[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  border: 1.5px solid #ff6c8a;
  animation: if-voice-pulse 1.2s ease-out infinite;
}

@keyframes if-voice-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .if-voice-mic[aria-pressed="true"]::after {
    animation: none !important;
  }
}
```

**JS:**
```js
// Voice button — toggle aria-pressed (mock recording state for the demo)
document.querySelectorAll("[data-if-voice]").forEach(function (btn) {
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", on ? "false" : "true");
    btn.setAttribute("aria-label", on ? "Start voice input" : "Stop voice input");
    // Hook real Web Speech API here if you want actual voice input:
    // const rec = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  });
});
```

### 21. Email with Suggestions

**Type:** Light JS
**Description:** When the user types `@`, common email domains are suggested in a keyboard-navigable dropdown. `aria-controls` + `aria-expanded` + `role="listbox"` make it a proper combobox.

**HTML:**
```html
<label class="if-mail">
  <span class="if-mail-label">Work email</span>
  <span class="if-mail-wrap">
    <input
      id="if-mail-input"
      type="email"
      name="email"
      autocomplete="email"
      placeholder="you@example.com"
      aria-controls="if-mail-list"
      aria-expanded="false"
      aria-autocomplete="list"
    />
    <ul id="if-mail-list" class="if-mail-list" role="listbox" hidden></ul>
  </span>
</label>
```

**CSS:**
```css
.if-mail {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-mail-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-mail-wrap {
  position: relative;
  display: block;
}

.if-mail input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  outline: none;
  transition:
    border-color 0.2s,
    border-radius 0.15s;
}

.if-mail input:focus {
  border-color: #2eb88a;
}

.if-mail input[aria-expanded="true"] {
  border-radius: 10px 10px 0 0;
  border-bottom-color: transparent;
}

.if-mail-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #1a1a22;
  border: 1px solid #2eb88a;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  max-height: 180px;
  overflow-y: auto;
}

.if-mail-list li {
  padding: 7px 10px;
  font:
    500 13px/1.2 system-ui,
    sans-serif;
  color: #cbd5e1;
  cursor: pointer;
  border-radius: 6px;
}

.if-mail-list li[aria-selected="true"],
.if-mail-list li:hover {
  background: rgba(46, 184, 138, 0.15);
  color: #fff;
}

.if-mail-list li b {
  color: #2eb88a;
  font-weight: 600;
}
```

**JS:**
```js
// Email Suggestions — show common domains after the user types '@'
(function () {
  var input = document.getElementById("if-mail-input");
  var list = document.getElementById("if-mail-list");
  if (!input || !list) return;
  var DOMAINS = ["gmail.com", "outlook.com", "icloud.com", "protonmail.com", "fastmail.com"];
  var idx = -1;

  function close() {
    list.hidden = true;
    input.setAttribute("aria-expanded", "false");
    idx = -1;
  }
  function render(local) {
    list.innerHTML = "";
    DOMAINS.forEach(function (d) {
      var li = document.createElement("li");
      li.setAttribute("role", "option");
      li.innerHTML = (local || "") + "<b>@" + d + "</b>";
      list.appendChild(li);
    });
  }
  function open(local) {
    render(local);
    list.hidden = false;
    input.setAttribute("aria-expanded", "true");
  }
  function select(n) {
    var items = list.querySelectorAll("li");
    items.forEach(function (li) {
      li.removeAttribute("aria-selected");
    });
    idx = (n + items.length) % items.length;
    items[idx].setAttribute("aria-selected", "true");
  }

  input.addEventListener("input", function () {
    var v = input.value,
      at = v.indexOf("@");
    if (at >= 0) open(v.substring(0, at + 1));
    else close();
  });
  input.addEventListener("blur", function () {
    setTimeout(close, 150);
  });
  input.addEventListener("keydown", function (e) {
    if (list.hidden) return;
    var items = list.querySelectorAll("li");
    if (e.key === "ArrowDown") {
      e.preventDefault();
      select(idx + 1);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      select(idx - 1);
    } else if (e.key === "Escape") {
      close();
    } else if (e.key === "Enter" && idx >= 0) {
      e.preventDefault();
      input.value = items[idx].textContent;
      close();
    }
  });
  list.addEventListener("mousedown", function (e) {
    var li = e.target.closest('li[role="option"]');
    if (li) {
      input.value = li.textContent;
      close();
    }
  });
})();
```

### 22. Auto-Grow Textarea

**Type:** Pure CSS
**Description:** A multi-line `<textarea>` that grows with its content using `field-sizing: content` — no JS observer needed. Falls back to a min-height on browsers without support.

**HTML:**
```html
<label class="if-grow">
  <span class="if-grow-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-grow-hint">Field grows as you type</span>
</label>
```

**CSS:**
```css
.if-grow {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-grow-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-grow textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font:
    500 14px/1.55 system-ui,
    sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.if-grow textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-grow textarea::placeholder {
  color: #b8b6d4;
}

.if-grow-hint {
  font-size: 11px;
  color: #b8b6d4;
}
```

### 23. Inline Edit

**Type:** Light JS
**Description:** Click-to-edit text that swaps between a static value and an editable input. Saves on Enter, cancels on Escape, blurs to commit — the canonical pattern from Notion and Linear.

**HTML:**
```html
<label class="if-edit">
  <span class="if-edit-label">Project name</span>
  <span class="if-edit-wrap" data-if-edit data-value="Aurora Dashboard">
    <span class="if-edit-display" tabindex="0" role="button" aria-label="Edit project name"
      >Aurora Dashboard</span
    >
    <input class="if-edit-input" type="text" value="Aurora Dashboard" hidden />
    <span class="if-edit-pencil" aria-hidden="true">✎</span>
  </span>
</label>
```

**CSS:**
```css
.if-edit {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-edit-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-edit-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 8px;
  cursor: text;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.if-edit-wrap:hover {
  background: rgba(124, 108, 255, 0.06);
  border-color: rgba(124, 108, 255, 0.2);
}

.if-edit-display,
.if-edit-input {
  font:
    600 14px/1.3 system-ui,
    sans-serif;
  color: #f0eeff;
  flex: 1;
  min-width: 0;
}

.if-edit-display {
  outline: none;
}

.if-edit-input {
  border: 0;
  outline: none;
  background: transparent;
  padding: 0;
}

.if-edit-pencil {
  font-size: 12px;
  color: #7a7899;
  opacity: 0;
  transition: opacity 0.15s;
}

.if-edit-wrap:hover .if-edit-pencil {
  opacity: 1;
}

.if-edit-wrap.is-editing {
  background: #1a1a22;
  border-color: #7c6cff;
  border-style: solid;
}

.if-edit-wrap.is-editing .if-edit-pencil {
  display: none;
}
```

**JS:**
```js
// Inline Edit — click to edit, Enter saves, Escape cancels, blur commits
document.querySelectorAll("[data-if-edit]").forEach(function (wrap) {
  var display = wrap.querySelector(".if-edit-display");
  var input = wrap.querySelector(".if-edit-input");

  function enter() {
    wrap.classList.add("is-editing");
    display.hidden = true;
    input.hidden = false;
    input.value = display.textContent;
    input.focus();
    input.select();
  }
  function commit() {
    var v = input.value.trim();
    if (v) {
      display.textContent = v;
      wrap.dataset.value = v;
    } else {
      input.value = display.textContent;
    }
    exit();
  }
  function cancel() {
    input.value = display.textContent;
    exit();
  }
  function exit() {
    wrap.classList.remove("is-editing");
    input.hidden = true;
    display.hidden = false;
  }

  display.addEventListener("click", enter);
  display.addEventListener("keydown", function (e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      enter();
    }
  });
  input.addEventListener("blur", commit);
  input.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      commit();
    }
    if (e.key === "Escape") {
      e.preventDefault();
      cancel();
    }
  });
});
```

### 24. Range Slider Pro

**Type:** Light JS
**Description:** A native `<input type="range">` with custom track/thumb styling and a live value bubble that follows the thumb. Honest accessibility — keyboard arrows, screen-reader announcement, real form value.

**HTML:**
```html
<label class="if-range" for="if-range-input">
  <span class="if-range-label">Volume <span class="if-range-bubble" data-if-bubble>50</span></span>
  <input
    id="if-range-input"
    type="range"
    name="volume"
    min="0"
    max="100"
    value="50"
    data-if-range
  />
</label>
```

**CSS:**
```css
.if-range {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-range-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-range-bubble {
  font:
    700 11px/1 "JetBrains Mono",
    monospace;
  color: #f0eeff;
  background: #7c6cff;
  padding: 3px 7px;
  border-radius: 999px;
  letter-spacing: 0;
}

.if-range input {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(
    90deg,
    #7c6cff 0%,
    #7c6cff var(--if-range-fill, 50%),
    rgba(255, 255, 255, 0.08) var(--if-range-fill, 50%),
    rgba(255, 255, 255, 0.08) 100%
  );
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.if-range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(124, 108, 255, 0.5);
  cursor: pointer;
  transition: transform 0.15s;
}

.if-range input::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.if-range input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(124, 108, 255, 0.5);
  cursor: pointer;
}
```

**JS:**
```js
// Range Slider Pro — sync the live value bubble + paint the gradient fill via custom property
document.querySelectorAll("[data-if-range]").forEach(function (input) {
  var bubble = input.closest(".if-range").querySelector("[data-if-bubble]");
  function update() {
    var min = Number(input.min) || 0;
    var max = Number(input.max) || 100;
    var pct = ((Number(input.value) - min) / (max - min)) * 100;
    input.style.setProperty("--if-range-fill", pct + "%");
    if (bubble) bubble.textContent = String(input.value);
  }
  input.addEventListener("input", update);
  update();
});
```

### 25. URL with Protocol

**Type:** Pure CSS
**Description:** URL input with a non-editable `https://` prefix that visually integrates with the field. Submit value is the full URL; users only type the host portion.

**HTML:**
```html
<label class="if-url">
  <span class="if-url-label">Website</span>
  <span class="if-url-wrap">
    <span class="if-url-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>
```

**CSS:**
```css
.if-url {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-url-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-url-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-url-wrap:focus-within {
  border-color: #06b6d4;
}

.if-url-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font:
    600 12px/1 "JetBrains Mono",
    monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-url input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
}

.if-url input::placeholder {
  color: #b8b6d4;
}
```

### 26. Credit Card

**Type:** Light JS
**Description:** Auto-formatted 16-digit card number with brand-aware accent (Visa, Mastercard, Amex). `inputmode="numeric"` on mobile; pattern validation; `autocomplete="cc-number"`.

**HTML:**
```html
<label class="if-card">
  <span class="if-card-label">Card number</span>
  <span class="if-card-wrap" data-if-card>
    <span class="if-card-brand" aria-hidden="true">CARD</span>
    <input
      type="text"
      name="cc"
      inputmode="numeric"
      autocomplete="cc-number"
      maxlength="19"
      placeholder="•••• •••• •••• ••••"
    />
  </span>
</label>
```

**CSS:**
```css
.if-card {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-card-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-card-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-card-wrap:focus-within {
  border-color: #f5a84a;
}

.if-card-brand {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  background: rgba(245, 168, 74, 0.12);
  color: #f5a84a;
  border-radius: 4px;
  flex-shrink: 0;
  transition:
    background 0.2s,
    color 0.2s;
}

.if-card-wrap[data-brand="visa"] .if-card-brand {
  background: rgba(67, 127, 193, 0.18);
  color: #6aa3e0;
}

.if-card-wrap[data-brand="mastercard"] .if-card-brand {
  background: rgba(255, 90, 90, 0.16);
  color: #ff7a7a;
}

.if-card-wrap[data-brand="amex"] .if-card-brand {
  background: rgba(46, 184, 138, 0.16);
  color: #2eb88a;
}

.if-card input {
  flex: 1;
  min-width: 0;
  padding: 13px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    600 14px/1 "JetBrains Mono",
    monospace;
  letter-spacing: 0.08em;
}

.if-card input::placeholder {
  color: #b8b6d4;
}
```

**JS:**
```js
// Credit Card — auto-format groups of 4 + brand detection
document.querySelectorAll("[data-if-card] input").forEach(function (input) {
  var wrap = input.closest("[data-if-card]");
  var brand = wrap.querySelector(".if-card-brand");

  function detect(digits) {
    if (/^4/.test(digits)) return ["visa", "VISA"];
    if (/^(5[1-5]|2[2-7])/.test(digits)) return ["mastercard", "MC"];
    if (/^3[47]/.test(digits)) return ["amex", "AMEX"];
    if (/^6(011|5)/.test(digits)) return ["discover", "DISC"];
    return ["", "CARD"];
  }

  input.addEventListener("input", function () {
    var digits = input.value.replace(/\\D/g, "").slice(0, 19);
    input.value = (digits.match(/.{1,4}/g) || [""]).join(" ");
    var info = detect(digits);
    if (info[0]) wrap.setAttribute("data-brand", info[0]);
    else wrap.removeAttribute("data-brand");
    brand.textContent = info[1];
  });
});
```

### 27. Toggle Password

**Type:** Light JS
**Description:** Password field with an eye toggle that swaps `type="password"` ↔ `type="text"`. `aria-pressed` reflects state for screen readers; `autocomplete="new-password"` for sign-up flows.

**HTML:**
```html
<label class="if-pw">
  <span class="if-pw-label">Password</span>
  <span class="if-pw-wrap">
    <input
      type="password"
      name="pw"
      autocomplete="new-password"
      placeholder="At least 8 characters"
      minlength="8"
      data-if-pw
    />
    <button
      type="button"
      class="if-pw-toggle"
      aria-label="Show password"
      aria-pressed="false"
      data-if-pw-toggle
    >
      <svg class="if-pw-eye" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7Z" />
        <circle cx="12" cy="12" r="3" />
      </svg>
      <svg class="if-pw-eye-off" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 3l18 18M9.9 5.1A10 10 0 0 1 22 12a16 16 0 0 1-2.7 3.7M6.7 6.7A16 16 0 0 0 2 12s4 7 10 7a10 10 0 0 0 4.1-.9"
        />
      </svg>
    </button>
  </span>
</label>
```

**CSS:**
```css
.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  font-size: 11px;
  color: #b8b6d4;
}

.if-pw-label {
  font-weight: 600;
}

.if-pw input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.if-pw input:focus {
  border-color: #c084fc;
}

.if-pw-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.if-pw-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.if-pw:has(input:placeholder-shown) .if-pw-fill {
  width: 0;
}

.if-pw:has(input:not(:placeholder-shown):invalid) .if-pw-fill {
  width: 30%;
}

.if-pw:has(input:not(:placeholder-shown):valid) .if-pw-fill {
  width: 65%;
}

.if-pw:has(input:focus:valid) .if-pw-fill {
  width: 100%;
}

.if-pw-hint {
  font-size: 10.5px;
  color: #b8b6d4;
}

.if-pw {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 280px;
}

.if-pw-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-pw-wrap {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 0 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.if-pw-wrap:focus-within {
  border-color: #7c6cff;
}

.if-pw input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font:
    500 14px/1 system-ui,
    sans-serif;
  letter-spacing: 0.08em;
}

.if-pw input::placeholder {
  color: #b8b6d4;
}

.if-pw-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  cursor: pointer;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.if-pw-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
}

.if-pw-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #b8b6d4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.if-pw-eye-off {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye {
  display: none;
}

.if-pw-toggle[aria-pressed="true"] .if-pw-eye-off {
  display: block;
}

.if-pw-toggle[aria-pressed="true"] svg {
  stroke: #7c6cff;
}
```

**JS:**
```js
// Toggle Password — swap input type + reflect state via aria-pressed
document.querySelectorAll("[data-if-pw-toggle]").forEach(function (btn) {
  var input = btn.closest(".if-pw-wrap").querySelector("input");
  btn.addEventListener("click", function () {
    var on = btn.getAttribute("aria-pressed") === "true";
    btn.setAttribute("aria-pressed", on ? "false" : "true");
    btn.setAttribute("aria-label", on ? "Show password" : "Hide password");
    input.type = on ? "password" : "text";
  });
});
```

### 28. Brutalist Input

**Type:** Pure CSS
**Description:** Bold offset-shadow stamp with hard edges and monospace type — a confident input that doesn't apologize for itself. Press collapses into the shadow on focus.

**HTML:**
```html
<label class="if-brut">
  <span class="if-brut-label">USERNAME_</span>
  <input type="text" name="user-brut" placeholder="enter handle..." />
</label>
```

**CSS:**
```css
.if-brut {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.if-brut-label {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f0eeff;
}

.if-brut input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  border-radius: 0;
  color: #1a1a2e;
  font:
    700 13px/1 "Courier New",
    monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

.if-brut input::placeholder {
  color: rgba(26, 26, 46, 0.5);
}

.if-brut input:focus {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff6c8a;
}

.if-brut input:invalid:not(:placeholder-shown) {
  box-shadow: 5px 5px 0 #ff5d6c;
}
```

---
## 20 CSS Link Hover Effect Designs

URL: https://codefronts.com/motion/css-link-effects/
Description: 20 free CSS link hover effects — animated underlines, glitches, neon flickers, marker highlights, 3D flips and more, with copy-paste code.
Demo count: 20

### 01. Squiggly Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look squiggly SVG underline that draws in beneath the link on hover via stroke-dasharray. Perfect for navigation, blog headers, and personality-forward sites.

**HTML:**
```html
<nav class="cle-squig-nav">
  <a href="#" class="cle-squig">home</a>
  <a href="#" class="cle-squig is-active">blog</a>
  <a href="#" class="cle-squig">work</a>
  <a href="#" class="cle-squig">about</a>
</nav>
```

**CSS:**
```css
.cle-squig-nav {
  display: flex;
  gap: 28px;
}
.cle-squig {
  position: relative;
  padding-bottom: 14px;
  color: #c5e8ff;
  font:
    600 18px/1.2 "Caveat",
    "Comic Sans MS",
    cursive;
  text-decoration: none;
  transition: color 0.25s;
}
.cle-squig.is-active {
  color: #ddff8a;
}
.cle-squig::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' preserveAspectRatio='none'><path d='M2 5 Q 12 0 22 5 T 42 5 T 62 5 T 78 5' stroke='%23ddff8a' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-squig:hover::after,
.cle-squig:focus-visible::after,
.cle-squig.is-active::after {
  background-size: 100% 100%;
}
```

### 02. Tilde Morph

**Type:** Pure CSS
**Description:** A straight underline morphs into a tilde-style wave on hover via background-image swap. Editorial inline-menu pattern — line on rest, wave on attention.

**HTML:**
```html
<p class="cle-tilde-row">
  <a href="#" class="cle-tilde">Root</a>
  <a href="#" class="cle-tilde">Perfect Fifth</a>
  <a href="#" class="cle-tilde">Perfect Fourth</a>
  <a href="#" class="cle-tilde">Major Third</a>
</p>
```

**CSS:**
```css
.cle-tilde-row {
  margin: 0;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.cle-tilde {
  position: relative;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    500 15px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
  background-image: linear-gradient(#ffd479, #ffd479);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition:
    background-image 0.4s,
    background-size 0.4s;
}
.cle-tilde:hover,
.cle-tilde:focus-visible {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'><path d='M0 3 Q 15 0 30 3 T 60 3' stroke='%23ffd479' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-size: 100% 6px;
}
```

### 03. Dotted Focus Ring

**Type:** Pure CSS
**Description:** A dotted box outline appears around the link on hover, paired with a blinking trailing caret. Reads as terminal/CLI focus — distinctive without competing with the text.

**HTML:**
```html
<a href="#" class="cle-dot">
  <span class="cle-dot-bullet" aria-hidden="true">◉</span>
  Let's Goooo!
  <span class="cle-dot-caret" aria-hidden="true">_</span>
</a>
```

**CSS:**
```css
.cle-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: #ddff8a;
  font:
    700 16px/1.2 system-ui,
    sans-serif;
  text-decoration: underline;
  text-decoration-color: #ddff8a;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  border: 1.5px dotted transparent;
  border-radius: 3px;
  transition: border-color 0.2s;
}
.cle-dot-bullet {
  color: #ddff8a;
  font-size: 14px;
}
.cle-dot-caret {
  opacity: 0;
  color: #ddff8a;
  font-weight: 700;
  transition: opacity 0.2s;
}
.cle-dot:hover,
.cle-dot:focus-visible {
  border-color: #ddff8a;
}
.cle-dot:hover .cle-dot-caret,
.cle-dot:focus-visible .cle-dot-caret {
  opacity: 1;
  animation: cle-dot-blink 0.9s steps(1) infinite;
}
@keyframes cle-dot-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-dot:hover .cle-dot-caret,
  .cle-dot:focus-visible .cle-dot-caret {
    animation: none;
    opacity: 1;
  }
}
```

### 04. Encircled

**Type:** Pure CSS
**Description:** An SVG ellipse strokes itself around the linked text on hover via stroke-dasharray — a pen circling a phrase. Calm, editorial, and impossible to miss.

**HTML:**
```html
<div class="cle-circle-bg">
  <p class="cle-circle-wrap">
    Check out
    <a href="#" class="cle-circle">
      the link
      <svg class="cle-circle-svg" viewBox="0 0 100 36" aria-hidden="true">
        <ellipse
          cx="50"
          cy="18"
          rx="46"
          ry="14"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        />
      </svg>
    </a>
    here
  </p>
</div>
```

**CSS:**
```css
.cle-circle-bg {
  padding: 24px;
  background: #f4f5f9;
  border-radius: 10px;
}
.cle-circle-wrap {
  margin: 0;
  font:
    500 16px/1.5 system-ui,
    sans-serif;
  color: #2a2a3e;
}
.cle-circle {
  position: relative;
  display: inline-block;
  padding: 0 6px;
  color: #6b8cff;
  font-weight: 600;
  text-decoration: none;
}
.cle-circle-svg {
  position: absolute;
  inset: -4px -2px;
  width: calc(100% + 4px);
  height: calc(100% + 8px);
  color: #6b8cff;
  pointer-events: none;
  overflow: visible;
}
.cle-circle-svg ellipse {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transform-origin: center;
  transform: rotate(-3deg);
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-circle:hover .cle-circle-svg ellipse,
.cle-circle:focus-visible .cle-circle-svg ellipse {
  stroke-dashoffset: 0;
}
```

### 05. Chevron Companion

**Type:** Pure CSS
**Description:** On hover the underline retracts from right-to-left while a chevron arrow "draws in" via stroke-dasharray with a spring overshoot. Adapted from Aaron Iker — works on multi-line links thanks to background-image underline.

**HTML:**
```html
<div class="cle-chev-bg">
  <div class="cle-chev-stack">
    <a href="#" class="cle-chev"
      ><span>Link here</span
      ><svg class="cle-chev-arrow" viewBox="0 0 13 20" aria-hidden="true">
        <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg
    ></a>
    <a href="#" class="cle-chev cle-chev-multi"
      ><span>Link here with multiple lines</span
      ><svg class="cle-chev-arrow" viewBox="0 0 13 20" aria-hidden="true">
        <polyline points="0.5 19.5 3 19.5 12.5 10 3 0.5" /></svg
    ></a>
  </div>
</div>
```

**CSS:**
```css
.cle-chev-bg {
  padding: 28px 32px;
  background: #f6f8ff;
  border-radius: 10px;
}
.cle-chev-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.cle-chev {
  --line: #646b8c;
  --color: #2b3044;
  --background-size: 100%;
  --background-delay: 0.15s;
  --stroke-dashoffset: 46;
  --stroke-duration: 0.15s;
  --stroke-easing: linear;
  --stroke-delay: 0s;
  position: relative;
  display: inline;
  color: var(--color);
  font:
    500 16px/20px "Inter",
    system-ui,
    sans-serif;
  text-decoration: none;
}
.cle-chev span {
  background-image: linear-gradient(0deg, var(--line) 0%, var(--line) 100%);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: var(--background-size) 1px;
  transition: background-size 0.2s linear var(--background-delay);
  transform: translateZ(0);
}
.cle-chev-arrow {
  vertical-align: top;
  display: inline;
  line-height: 1;
  width: 13px;
  height: 20px;
  position: relative;
  left: -2px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  stroke: var(--line);
  stroke-dasharray: 7.95 30;
  stroke-dashoffset: var(--stroke-dashoffset);
  transition: stroke-dashoffset var(--stroke-duration) var(--stroke-easing) var(--stroke-delay);
}
.cle-chev:hover,
.cle-chev:focus-visible {
  --background-size: 0%;
  --background-delay: 0s;
  --stroke-dashoffset: 26;
  --stroke-duration: 0.3s;
  --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
  --stroke-delay: 0.195s;
}
.cle-chev-multi {
  max-width: 180px;
}
```

### 06. Cursor Blink Underline

**Type:** Pure CSS
**Description:** Link text stays solid; only a CLI-style cursor caret bar underneath blinks at the exact 60bpm cadence terminals use. The link reads as "ready for input" without any text flicker.

**HTML:**
```html
<a href="#" class="cle-curblink">Open editor</a>
```

**CSS:**
```css
.cle-curblink {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
  color: #00e5ff;
  font:
    600 16px/1.2 ui-monospace,
    "SF Mono",
    monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition:
    color 0.2s,
    text-shadow 0.25s;
}
.cle-curblink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #00e5ff;
  transform-origin: left;
  animation: cle-curblink-pulse 1s steps(1, end) infinite;
}
.cle-curblink:hover,
.cle-curblink:focus-visible {
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.cle-curblink:hover::after,
.cle-curblink:focus-visible::after {
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}
@keyframes cle-curblink-pulse {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-curblink::after {
    animation: none;
    opacity: 1;
  }
}
```

### 07. Neon Sign Flicker

**Type:** Pure CSS
**Description:** On hover the link flickers like a faulty neon sign powering on — irregular opacity stutters via non-uniform steps() keyframes for ~1 second, then settles into a steady glow. Finite, intentional, premium.

**HTML:**
```html
<a href="#" class="cle-neonblink">VACANCY</a>
```

**CSS:**
```css
.cle-neonblink {
  display: inline-block;
  padding: 6px 18px;
  color: #ff6c8a;
  font:
    700 17px/1.2 "Courier New",
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255, 108, 138, 0.4);
  border: 1.5px solid rgba(255, 108, 138, 0.4);
  border-radius: 4px;
  background: #15081a;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.3s;
}
.cle-neonblink:hover,
.cle-neonblink:focus-visible {
  color: #ffe1ea;
  border-color: #ff6c8a;
  background: #1f0d24;
  animation: cle-neonblink-flicker 1.1s steps(1, end);
}
@keyframes cle-neonblink-flicker {
  0% {
    opacity: 1;
    text-shadow: none;
  }
  3% {
    opacity: 0.2;
    text-shadow: none;
  }
  6% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  10% {
    opacity: 0.4;
    text-shadow: none;
  }
  13% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  18% {
    opacity: 0.1;
    text-shadow: none;
  }
  22% {
    opacity: 1;
    text-shadow:
      0 0 14px #ff6c8a,
      0 0 4px #fff;
  }
  35% {
    opacity: 0.5;
    text-shadow: 0 0 8px #ff6c8a;
  }
  38% {
    opacity: 1;
    text-shadow:
      0 0 18px #ff6c8a,
      0 0 6px #fff;
  }
  55% {
    opacity: 0.6;
    text-shadow: 0 0 6px #ff6c8a;
  }
  58% {
    opacity: 1;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
  100% {
    opacity: 1;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-neonblink:hover,
  .cle-neonblink:focus-visible {
    animation: none;
    text-shadow:
      0 0 22px #ff6c8a,
      0 0 8px #fff;
  }
}
```

### 08. Heartbeat Pulse

**Type:** Pure CSS
**Description:** A leading dot pulses with a real medical-grade heartbeat rhythm — lub-DUB-pause-lub-DUB-pause via a multi-keyframe @keyframes. The link itself stays static. Reads as live-signal / new content.

**HTML:**
```html
<a href="#" class="cle-heartbeat">
  <span class="cle-heartbeat-dot" aria-hidden="true"></span>
  <span>Live updates</span>
</a>
```

**CSS:**
```css
.cle-heartbeat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  color: #f0eeff;
  font:
    600 15px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.cle-heartbeat-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3d6e;
  animation: cle-heartbeat-thump 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.cle-heartbeat-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: cle-heartbeat-ring 1.6s ease-out infinite;
}
.cle-heartbeat:hover,
.cle-heartbeat:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 61, 110, 0.5);
}
/* Real heartbeat curve: lub (small bump) → DUB (big bump) → long pause */
@keyframes cle-heartbeat-thump {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.18);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.32);
  }
  45% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes cle-heartbeat-ring {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  30% {
    opacity: 0.55;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-heartbeat-dot,
  .cle-heartbeat-dot::after {
    animation: none;
  }
}
```

### 09. Reveal Sweep

**Type:** Pure CSS
**Description:** A thin gradient line sweeps across the link from left to right on hover, then settles as a permanent underline. Two-stage motion in a single hover.

**HTML:**
```html
<a href="#" class="cle-sweep">Read the article</a>
```

**CSS:**
```css
.cle-sweep {
  position: relative;
  display: inline-block;
  color: #f0eeff;
  font:
    600 16px/1.4 system-ui,
    sans-serif;
  text-decoration: none;
  padding-bottom: 6px;
  overflow: hidden;
}
/* Permanent underline that draws in from the left */
.cle-sweep::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #7c6cff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-sweep:hover::before,
.cle-sweep:focus-visible::before {
  transform: scaleX(1);
}
/* Bright gradient highlight that sweeps across once on hover */
.cle-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s;
  pointer-events: none;
}
.cle-sweep:hover::after,
.cle-sweep:focus-visible::after {
  transform: translateX(280%);
  opacity: 1;
}
```

### 10. Letter Push

**Type:** Pure CSS
**Description:** Each letter shifts down 2px on hover with a tiny per-letter stagger via :nth-child — a wave that ripples through the word.

**HTML:**
```html
<a href="#" class="cle-push">
  <span>D</span><span>i</span><span>s</span><span>c</span><span>o</span><span>v</span><span>e</span
  ><span>r</span>
</a>
```

**CSS:**
```css
.cle-push {
  display: inline-flex;
  color: #c4b5fd;
  font:
    700 18px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid rgba(124, 108, 255, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s;
}
.cle-push:hover {
  border-bottom-color: #7c6cff;
}
.cle-push span {
  display: inline-block;
  transition:
    transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.25s;
}
.cle-push:hover span {
  color: #fff;
  transform: translateY(-3px);
}
.cle-push:hover span:nth-child(1) {
  transition-delay: 0s;
}
.cle-push:hover span:nth-child(2) {
  transition-delay: 0.04s;
}
.cle-push:hover span:nth-child(3) {
  transition-delay: 0.08s;
}
.cle-push:hover span:nth-child(4) {
  transition-delay: 0.12s;
}
.cle-push:hover span:nth-child(5) {
  transition-delay: 0.16s;
}
.cle-push:hover span:nth-child(6) {
  transition-delay: 0.2s;
}
.cle-push:hover span:nth-child(7) {
  transition-delay: 0.24s;
}
.cle-push:hover span:nth-child(8) {
  transition-delay: 0.28s;
}
```

### 11. Marker Highlighter

**Type:** Pure CSS
**Description:** A pale highlight expands from 0% to 100% width behind the text on hover, with a hand-drawn-look SVG fill. Reads as a real marker pen, not a geometric block.

**HTML:**
```html
<p class="cle-marker-wrap">Try our <a href="#" class="cle-marker">brand new editor</a> today.</p>
```

**CSS:**
```css
.cle-marker-wrap {
  margin: 0;
  font:
    500 16px/1.5 system-ui,
    sans-serif;
  color: #d8d6f0;
}
.cle-marker {
  position: relative;
  display: inline-block;
  padding: 1px 4px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  z-index: 0;
}
.cle-marker::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 28' preserveAspectRatio='none'><path d='M2 14 Q 12 6 25 11 T 50 12 T 75 14 T 98 13 L 98 22 Q 80 26 60 23 T 30 22 T 5 22 Z' fill='%23ffd479' opacity='0.55'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.cle-marker:hover::before,
.cle-marker:focus-visible::before {
  background-size: 100% 100%;
}
```

### 12. Background Slide

**Type:** Pure CSS
**Description:** A solid colour slides up from below the baseline, covering the link as the text colour inverts via mix-blend-mode: difference. Reads like a film cut.

**HTML:**
```html
<a href="#" class="cle-slide"><span>WATCH FILM</span></a>
```

**CSS:**
```css
.cle-slide {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  color: #f0eeff;
  font:
    700 13px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.cle-slide span {
  position: relative;
  mix-blend-mode: difference;
  color: #fff;
  z-index: 1;
}
.cle-slide::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: #fff;
  transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.cle-slide:hover::before,
.cle-slide:focus-visible::before {
  height: 100%;
}
```

### 13. Crosshair Brackets

**Type:** Pure CSS
**Description:** Mono [ and ] brackets appear on either side of the link on hover, drawing in via a tiny scale-overshoot. Terminal/hacker aesthetic — perfect for dev portfolios.

**HTML:**
```html
<a href="#" class="cle-bracket">execute()</a>
```

**CSS:**
```css
.cle-bracket {
  position: relative;
  display: inline-block;
  padding: 0 16px;
  color: #00e5ff;
  font:
    700 16px/1.2 ui-monospace,
    monospace;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: text-shadow 0.2s;
}
.cle-bracket::before,
.cle-bracket::after {
  position: absolute;
  top: 50%;
  font: inherit;
  color: #00e5ff;
  opacity: 0;
  transform: translateY(-50%) scale(0.4);
  transition:
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cle-bracket::before {
  content: "[";
  left: 0;
}
.cle-bracket::after {
  content: "]";
  right: 0;
}
.cle-bracket:hover {
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
}
.cle-bracket:hover::before,
.cle-bracket:hover::after,
.cle-bracket:focus-visible::before,
.cle-bracket:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
```

### 14. Glitch Split

**Type:** Pure CSS
**Description:** RGB-channel split shudders across the text on hover (cyan + magenta offsets via text-shadow), reading as video corruption. Honours prefers-reduced-motion.

**HTML:**
```html
<a href="#" class="cle-glitch" data-text="System.exit(0)">System.exit(0)</a>
```

**CSS:**
```css
.cle-glitch {
  position: relative;
  display: inline-block;
  color: #f0eeff;
  font:
    700 16px/1.2 ui-monospace,
    monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cle-glitch:hover,
.cle-glitch:focus-visible {
  animation: cle-glitch-shake 0.35s steps(2) infinite;
  text-shadow:
    2px 0 #ff3d6e,
    -2px 0 #00e5ff,
    0 0 12px rgba(255, 255, 255, 0.2);
}
@keyframes cle-glitch-shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
  100% {
    transform: translate(1px, 1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-glitch:hover,
  .cle-glitch:focus-visible {
    animation: none;
  }
}
```

### 15. Ink Bleed Underline

**Type:** Pure CSS
**Description:** Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray. Reads as ink bleeding into paper.

**HTML:**
```html
<a href="#" class="cle-ink">
  <span>Subscribe</span>
  <svg class="cle-ink-line" viewBox="0 0 120 8" preserveAspectRatio="none" aria-hidden="true">
    <path
      d="M2 5 Q 30 1 60 4 T 118 5"
      stroke="currentColor"
      stroke-width="2.5"
      fill="none"
      stroke-linecap="round"
    />
  </svg>
</a>
```

**CSS:**
```css
.cle-ink {
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  color: #ffd479;
  font:
    600 16px/1.2 Georgia,
    "Times New Roman",
    serif;
  text-decoration: none;
}
.cle-ink-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
  color: #ffd479;
  pointer-events: none;
}
.cle-ink-line path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-ink:hover .cle-ink-line path,
.cle-ink:focus-visible .cle-ink-line path {
  stroke-dashoffset: 0;
}
```

### 16. Magnetic Pull

**Type:** Pure CSS
**Description:** Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath. A small tactile touch that signals interactivity.

**HTML:**
```html
<a href="#" class="cle-mag">Open dashboard →</a>
```

**CSS:**
```css
.cle-mag {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: #c4b5fd;
  font:
    600 15px/1.2 system-ui,
    sans-serif;
  text-decoration: none;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.25s;
}
.cle-mag::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: #a78bfa;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-mag:hover,
.cle-mag:focus-visible {
  transform: translateX(6px);
  color: #fff;
}
.cle-mag:hover::after,
.cle-mag:focus-visible::after {
  transform: scaleX(1);
}
```

### 17. Caret Companion

**Type:** Pure CSS
**Description:** A blinking terminal cursor ▌ appears at the end of the link on hover, with a thin underline drawing in. Mono font — perfect for CLIs and dev portfolios.

**HTML:**
```html
<a href="#" class="cle-caret">$ run --watch</a>
```

**CSS:**
```css
.cle-caret {
  position: relative;
  display: inline-block;
  padding: 2px 4px 4px;
  color: #2eb88a;
  font:
    600 14px/1.4 ui-monospace,
    monospace;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease 0.05s;
}
.cle-caret::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: #2eb88a;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cle-caret:hover,
.cle-caret:focus-visible {
  border-bottom-color: rgba(46, 184, 138, 0.5);
}
.cle-caret:hover::after,
.cle-caret:focus-visible::after {
  opacity: 1;
  animation: cle-caret-blink 1s steps(1) infinite;
}
@keyframes cle-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-caret:hover::after,
  .cle-caret:focus-visible::after {
    animation: none;
    opacity: 1;
  }
}
```

### 18. Brutalist Block

**Type:** Pure CSS
**Description:** Link fills with hot-pink background and gains an offset shadow on hover; click presses it down into the shadow. Brutalist design system fixture.

**HTML:**
```html
<a href="#" class="cle-brut">DOWNLOAD .ZIP</a>
```

**CSS:**
```css
.cle-brut {
  display: inline-block;
  padding: 6px 12px;
  background: transparent;
  color: #fff;
  font:
    700 13px/1.2 "Courier New",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 2px solid #fff;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.12s,
    box-shadow 0.12s;
}
.cle-brut:hover,
.cle-brut:focus-visible {
  background: #ff3d6e;
  color: #0a0a0a;
  border-color: #0a0a0a;
  box-shadow: 5px 5px 0 #fff;
  transform: translate(-2px, -2px);
}
.cle-brut:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 #fff;
}
```

### 19. 3D Flip Reveal

**Type:** Pure CSS
**Description:** Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back. Uses transform-style: preserve-3d and backface-visibility.

**HTML:**
```html
<a href="#" class="cle-flip">
  <span class="cle-flip-inner">
    <span class="cle-flip-front">Get Started</span>
    <span class="cle-flip-back">Learn More →</span>
  </span>
  <span class="cle-flip-ghost" aria-hidden="true">Learn More →</span>
</a>
```

**CSS:**
```css
.cle-flip {
  position: relative;
  display: inline-block;
  height: 40px;
  padding: 0 22px;
  perspective: 800px;
  text-decoration: none;
  font:
    700 13px/40px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
}
/* Invisible ghost claims the wider of the two faces so the chip width is stable */
.cle-flip-ghost {
  visibility: hidden;
  white-space: nowrap;
}
.cle-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-flip-front,
.cle-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: nowrap;
}
.cle-flip-front {
  background: #7c6cff;
  color: #fff;
}
.cle-flip-back {
  background: #2eb88a;
  color: #0a0f0c;
  transform: rotateY(180deg);
}
.cle-flip:hover .cle-flip-inner,
.cle-flip:focus-visible .cle-flip-inner {
  transform: rotateY(180deg);
}
```

### 20. Type-On Reveal

**Type:** Pure CSS
**Description:** Link text appears empty until hover; on hover it types itself character-by-character via a steps() animation with a blinking caret. The CTA itself is the animation.

**HTML:**
```html
<a href="#" class="cle-type">
  <span class="cle-type-text">$ deploy --prod</span>
</a>
```

**CSS:**
```css
.cle-type {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a18;
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  text-decoration: none;
  min-width: 160px;
}
.cle-type-text {
  display: inline-block;
  font:
    600 13px/1.4 ui-monospace,
    monospace;
  color: #00e5ff;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  border-right: 2px solid transparent;
  vertical-align: bottom;
}
.cle-type:hover .cle-type-text,
.cle-type:focus-visible .cle-type-text {
  width: 14ch;
  border-right-color: #00e5ff;
  animation:
    cle-type-in 1.2s steps(14, end) forwards,
    cle-type-blink 0.7s steps(1) 1.2s infinite;
}
@keyframes cle-type-in {
  from {
    width: 0;
  }
  to {
    width: 14ch;
  }
}
@keyframes cle-type-blink {
  0%,
  50% {
    border-right-color: #00e5ff;
  }
  51%,
  100% {
    border-right-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-type:hover .cle-type-text,
  .cle-type:focus-visible .cle-type-text {
    width: 14ch;
    animation: none;
    border-right-color: #00e5ff;
  }
}
```

---
## 15 Pure CSS Loading Animations

URL: https://codefronts.com/motion/css-loading-animations/
Description: 15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.
Demo count: 15

### 01. House Unlock

**Type:** CSS + JS
**Description:** A closed-front-door loader for property sites. The window stays dark while the key turns; once "loaded" (the .ready class is added), the window glows warm gold and the door opens to reveal a softly-lit room. Ideal as a real-estate page-load cover.

**HTML:**
```html
<div class="hu-stage">
  <figure class="hu-house" aria-label="Loading your home tour">
    <span class="hu-roof"></span>
    <span class="hu-body">
      <span class="hu-window">
        <span class="hu-window-glass"></span>
      </span>
      <span class="hu-door">
        <span class="hu-door-handle"></span>
        <span class="hu-key">
          <span class="hu-key-bow"></span>
          <span class="hu-key-shaft"></span>
          <span class="hu-key-teeth"></span>
        </span>
      </span>
      <span class="hu-floor"></span>
    </span>
    <figcaption class="hu-caption">Unlocking your tour…</figcaption>
  </figure>
</div>
```

**CSS:**
```css
.hu-stage {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(212, 175, 55, 0.1) 0%, transparent 70%),
    linear-gradient(180deg, #14132b 0%, #0b0b1a 100%);
  border-radius: 16px;
  width: 220px;
  height: 220px;
}

.hu-house {
  position: relative;
  width: 132px;
  height: 152px;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

.hu-roof {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-bottom-color: #d4af37;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 10px rgba(212, 175, 55, 0.25));
}

.hu-body {
  position: absolute;
  top: 56px;
  left: 6px;
  width: 120px;
  height: 86px;
  background: linear-gradient(180deg, #f5f0e6 0%, #e8e0d0 100%);
  border-radius: 4px 4px 6px 6px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.hu-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: #2a1f1a;
}

.hu-window {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 28px;
  border: 2px solid #d4af37;
  border-radius: 3px;
  background: #0a0a14;
  overflow: hidden;
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.hu-window::before,
.hu-window::after {
  content: "";
  position: absolute;
  background: #d4af37;
}

.hu-window::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
}

.hu-window::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  transform: translateY(-50%);
}

.hu-window-glass {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 70%, #ffd479 0%, #d4af37 50%, transparent 75%);
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.hu-door {
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 38px;
  height: 60px;
  margin-left: -19px;
  background: linear-gradient(180deg, #6b3f2a 0%, #4a2d1f 100%);
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.4);
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 0.85s cubic-bezier(0.5, 0, 0.3, 1.2);
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.04);
}

.hu-door-handle {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.55);
}

.hu-key {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 22px;
  height: 8px;
  margin-top: -4px;
  transform-origin: 18px center;
  animation: huKeyTurn 2.4s cubic-bezier(0.5, 0, 0.3, 1.2) infinite;
}

.hu-key-bow {
  position: absolute;
  left: 0;
  top: -3px;
  width: 14px;
  height: 14px;
  border: 2px solid #d4af37;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.35);
}

.hu-key-shaft {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 9px;
  height: 2px;
  margin-top: -1px;
  background: #d4af37;
  border-radius: 1px;
}

.hu-key-teeth {
  position: absolute;
  right: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: #d4af37;
  border-radius: 0 1px 1px 0;
  box-shadow: -3px 2px 0 0 #d4af37;
}

.hu-caption {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d4af37;
  white-space: nowrap;
  animation: huCaption 2.4s ease-in-out infinite;
}

.hu-house.ready .hu-window {
  background: #ffd479;
  box-shadow:
    0 0 14px rgba(255, 212, 121, 0.55),
    inset 0 0 12px rgba(255, 212, 121, 0.4);
}

.hu-house.ready .hu-window-glass {
  opacity: 1;
  transform: scale(1);
}

.hu-house.ready .hu-door {
  transform: rotateY(-72deg);
}

.hu-house.ready .hu-key,
.hu-house.ready .hu-caption {
  display: none;
}
@keyframes huKeyTurn {
  0%,
  18% {
    transform: rotate(0deg) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  35%,
  60% {
    transform: rotate(90deg) translateX(0) scale(1);
    opacity: 1;
  }
  78% {
    transform: rotate(90deg) translateX(-6px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) translateX(0) scale(1);
    opacity: 0;
  }
}
@keyframes huCaption {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hu-stage,
  .hu-stage * {
    animation: none !important;
  }
}

```

**JS:**
```js
// Drives the door-open reveal. Replace with your real "page loaded" trigger.
document.querySelectorAll(".hu-house").forEach(function (house) {
  var ready = false;
  function tick() {
    ready = !ready;
    house.classList.toggle("ready", ready);
    setTimeout(tick, ready ? 1800 : 3200);
  }
  setTimeout(tick, 3200);
});
```

### 02. Listing Card Skeleton

**Type:** CSS + JS
**Description:** A premium listing-card skeleton that mirrors the real layout — photo, price, address, agent — then crossfades into the loaded card when `.ready` is added. Users see the page shape before content arrives, which is the modern, perceived-performance pattern used by Airbnb and Booking. Respects `prefers-reduced-motion`.

**HTML:**
```html
<div class="lc-card" aria-busy="true" aria-live="polite">
  <span class="lc-img">
    <span class="lc-img-shimmer" aria-hidden="true"></span>
  </span>
  <span class="lc-row lc-row-top">
    <span class="lc-bar lc-bar-price"></span>
    <span class="lc-bar lc-bar-badge"></span>
  </span>
  <span class="lc-bar lc-bar-line lc-bar-w-90"></span>
  <span class="lc-bar lc-bar-line lc-bar-w-60"></span>
  <span class="lc-row lc-row-meta">
    <span class="lc-bar lc-bar-pill"></span>
    <span class="lc-bar lc-bar-pill"></span>
    <span class="lc-bar lc-bar-pill"></span>
  </span>
  <span class="lc-row lc-row-agent">
    <span class="lc-avatar"></span>
    <span class="lc-bar lc-bar-name"></span>
  </span>
  <span class="lc-loaded" aria-hidden="true">
    <span class="lc-loaded-img"></span>
    <span class="lc-loaded-price">£1,250,000</span>
    <span class="lc-loaded-badge">For sale</span>
    <span class="lc-loaded-addr">42 Oakwood Lane, Notting Hill</span>
    <span class="lc-loaded-meta"><span>4 bed</span><span>3 bath</span><span>2,140 ft²</span></span>
    <span class="lc-loaded-agent">
      <span class="lc-loaded-avatar">SR</span>
      <span class="lc-loaded-agent-name">Sarah Rowan · Boutique Estates</span>
    </span>
  </span>
</div>
```

**CSS:**
```css
.lc-card {
  position: relative;
  display: grid;
  gap: 8px;
  width: 240px;
  padding: 10px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
}

.lc-img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, #1f2433 0%, #2a3045 100%);
  overflow: hidden;
}

.lc-img-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lcShimmer 1.6s ease-in-out infinite;
}

.lc-bar {
  display: block;
  height: 10px;
  background: linear-gradient(90deg, #1f2433, #2a3045, #1f2433);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: lcPulse 1.6s ease-in-out infinite;
}

.lc-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lc-row-top {
  justify-content: space-between;
}

.lc-bar-price {
  width: 82px;
  height: 16px;
}

.lc-bar-badge {
  width: 56px;
  height: 16px;
  border-radius: 99px;
}

.lc-bar-line {
  height: 9px;
}

.lc-bar-w-90 {
  width: 90%;
}

.lc-bar-w-60 {
  width: 60%;
}

.lc-row-meta {
  gap: 5px;
}

.lc-bar-pill {
  width: 48px;
  height: 16px;
  border-radius: 99px;
}

.lc-row-agent {
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.lc-avatar {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2433, #2a3045);
  background-size: 200% 100%;
  animation: lcPulse 1.6s ease-in-out infinite;
}

.lc-bar-name {
  flex: 1;
  height: 10px;
}

.lc-loaded {
  position: absolute;
  inset: 0;
  padding: 10px;
  background: #15151d;
  border-radius: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
  font-family: system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.lc-loaded-img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(15, 15, 19, 0) 60%, rgba(15, 15, 19, 0.45) 100%),
    linear-gradient(135deg, #5b8cb8 0%, #8aa6c0 35%, #d4b896 100%);
  position: relative;
}

.lc-loaded-img::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  backdrop-filter: blur(6px);
}

.lc-loaded-img::after {
  content: "♡";
  position: absolute;
  bottom: 11px;
  left: 14px;
  font-size: 11px;
  color: #fff;
  line-height: 1;
}

.lc-loaded-price {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lc-loaded-price::after {
  content: "For sale";
  font-size: 9px;
  font-weight: 600;
  background: rgba(46, 184, 138, 0.18);
  color: #2eb88a;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lc-loaded-badge {
  display: none;
}

.lc-loaded-addr {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.4;
}

.lc-loaded-meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.lc-loaded-meta span {
  font-size: 9px;
  font-weight: 600;
  background: rgba(124, 108, 255, 0.1);
  color: #a78bfa;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

.lc-loaded-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 2px;
}

.lc-loaded-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4b896, #b89970);
  color: #2a1f1a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.lc-loaded-agent-name {
  font-size: 10px;
  color: #c8c0ff;
}

.lc-card.ready .lc-loaded {
  opacity: 1;
  pointer-events: auto;
}

.lc-card.ready > :not(.lc-loaded) {
  opacity: 0;
}

.lc-card > :not(.lc-loaded) {
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .lc-img-shimmer,
  .lc-bar,
  .lc-avatar {
    animation: none;
  }
}
@keyframes lcShimmer {
  100% {
    transform: translateX(100%);
  }
}
@keyframes lcPulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
```

**JS:**
```js
// Toggles the .ready state to crossfade skeleton -> loaded card.
// Replace this loop with your real "data fetched" trigger.
document.querySelectorAll(".lc-card").forEach(function (card) {
  var ready = false;
  function tick() {
    ready = !ready;
    card.classList.toggle("ready", ready);
    card.setAttribute("aria-busy", ready ? "false" : "true");
    setTimeout(tick, ready ? 2200 : 2800);
  }
  setTimeout(tick, 2800);
});
```

### 03. Progress Path

**Type:** CSS + JS
**Description:** An honest progress bar built on the native `<progress>` element — semantic, screen-reader-announced, and bindable to real load progress (image preloads, fetch chunks, route transitions). A moving plane glides along the path, with the percentage announced via `aria-valuenow`. Degrades gracefully: a static bar appears if JS is disabled.

**HTML:**
```html
<div class="pp-loader" role="status">
  <div class="pp-track">
    <progress class="pp-progress" value="0" max="100" aria-label="Page loading progress">
      0%
    </progress>
    <span class="pp-glider" aria-hidden="true">
      <svg
        viewBox="0 0 24 24"
        width="14"
        height="14"
        fill="none"
        stroke="currentColor"
        stroke-width="1.8"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M2 12l20-9-9 20-2-9-9-2z" />
      </svg>
    </span>
    <span class="pp-pin pp-pin-start" aria-hidden="true"></span>
    <span class="pp-pin pp-pin-end" aria-hidden="true"></span>
  </div>
  <div class="pp-meta">
    <span class="pp-label">Preparing your tour</span>
    <span class="pp-percent" aria-live="polite">0%</span>
  </div>
</div>
```

**CSS:**
```css
.pp-loader {
  width: 240px;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pp-track {
  position: relative;
  height: 28px;
  display: grid;
  align-items: center;
  padding: 0 10px;
}

.pp-progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  color: #d4af37;
}

.pp-progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
}

.pp-progress::-webkit-progress-value {
  background: linear-gradient(90deg, #5b8cb8, #d4af37);
  border-radius: 99px;
  transition: width 0.2s ease;
}

.pp-progress::-moz-progress-bar {
  background: linear-gradient(90deg, #5b8cb8, #d4af37);
  border-radius: 99px;
}

.pp-pin {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.pp-pin-start {
  left: 7px;
  background: #5b8cb8;
  box-shadow: 0 0 8px rgba(91, 140, 184, 0.55);
}

.pp-pin-end {
  right: 7px;
  background: rgba(212, 175, 55, 0.45);
}

.pp-glider {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd479, #d4af37);
  color: #1a1a2e;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(212, 175, 55, 0.18),
    0 4px 14px -4px rgba(212, 175, 55, 0.7);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.pp-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pp-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #b8b6d4;
}

.pp-percent {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pp-glider {
    transition: none;
  }
  .pp-progress::-webkit-progress-value {
    transition: none;
  }
}
```

**JS:**
```js
// Drives the indeterminate-then-determinate progress simulation.
// Replace this loop with your real fetch-progress callback.
document.querySelectorAll(".pp-loader").forEach(function (loader) {
  var progress = loader.querySelector(".pp-progress");
  var glider = loader.querySelector(".pp-glider");
  var percent = loader.querySelector(".pp-percent");
  if (!progress || !glider || !percent) return;

  var v = 0;
  function set(value) {
    v = Math.max(0, Math.min(100, value));
    progress.value = v;
    percent.textContent = Math.round(v) + "%";
    var track = loader.querySelector(".pp-track");
    var max = track.offsetWidth - 20 - 22; // padding (20) + glider (22)
    if (max < 0) max = 0;
    glider.style.transform = "translateX(" + (max * v) / 100 + "px)";
  }

  function loop() {
    set(0);
    var step = 0;
    var id = setInterval(function () {
      step++;
      var next = v + (step < 4 ? 18 : step < 8 ? 8 : 3);
      set(next);
      if (v >= 100) {
        clearInterval(id);
        setTimeout(loop, 1400);
      }
    }, 220);
  }
  loop();
});
```

### 04. Heat-Map Compass

**Type:** CSS + JS
**Description:** A premium navigation loader for property and travel platforms — a brass compass dial with cardinal points lighting one at a time as warm "heat" rings pulse outward. A monospace coordinate readout drifts below, suggesting the system is "scanning your neighbourhood". Honest narrative for indeterminate location-aware loads.

**HTML:**
```html
<figure class="hc-loader" role="status" aria-label="Searching nearby properties">
  <span class="hc-rings" aria-hidden="true">
    <span class="hc-ring"></span>
    <span class="hc-ring"></span>
    <span class="hc-ring"></span>
  </span>
  <span class="hc-dial" aria-hidden="true">
    <span class="hc-mark hc-mark-n">N</span>
    <span class="hc-mark hc-mark-e">E</span>
    <span class="hc-mark hc-mark-s">S</span>
    <span class="hc-mark hc-mark-w">W</span>
    <span class="hc-needle"></span>
    <span class="hc-pivot"></span>
  </span>
  <figcaption class="hc-coord" aria-live="polite" data-hc-coord>51.5074°N · 0.1278°W</figcaption>
</figure>
```

**CSS:**
```css
.hc-loader {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  font-family: system-ui, sans-serif;
}

.hc-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hc-ring {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid #5b8cb8;
  opacity: 0;
  animation: hcRing 2.6s ease-out infinite;
}

.hc-ring:nth-child(1) {
  animation-delay: 0s;
}

.hc-ring:nth-child(2) {
  animation-delay: 0.85s;
}

.hc-ring:nth-child(3) {
  animation-delay: 1.7s;
}

.hc-dial {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 212, 121, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #1a1d2e 0%, #0f1220 70%);
  border: 2px solid #d4af37;
  box-shadow:
    inset 0 0 18px rgba(212, 175, 55, 0.18),
    0 4px 18px -4px rgba(212, 175, 55, 0.4),
    0 0 0 1px rgba(212, 175, 55, 0.25);
  animation: hcDialSpin 18s linear infinite;
}

.hc-mark {
  position: absolute;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  color: rgba(212, 175, 55, 0.4);
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
  animation: hcMark 2.6s ease-in-out infinite;
}

.hc-mark-n {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.hc-mark-e {
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 0.65s;
}

.hc-mark-s {
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 1.3s;
}

.hc-mark-w {
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  animation-delay: 1.95s;
}

.hc-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 70px;
  margin: -35px 0 0 -1px;
  background: linear-gradient(180deg, #ffd479 0%, #d4af37 48%, #2a3045 52%, #1a1d2e 100%);
  border-radius: 2px;
  transform-origin: center center;
  animation: hcNeedle 5s cubic-bezier(0.5, 0.05, 0.3, 0.95) infinite;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.hc-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #ffd479;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #1a1d2e,
    0 0 10px rgba(255, 212, 121, 0.6);
}

.hc-coord {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: #5eead4;
  letter-spacing: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hc-ring,
  .hc-dial,
  .hc-mark,
  .hc-needle {
    animation: none;
  }
  .hc-mark {
    color: #ffd479;
  }
}
@keyframes hcRing {
  0% {
    transform: scale(0.6);
    border-color: #5b8cb8;
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  60% {
    border-color: #d4af37;
  }
  100% {
    transform: scale(2.05);
    border-color: #d4af37;
    opacity: 0;
  }
}
@keyframes hcDialSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hcMark {
  0%,
  80%,
  100% {
    color: rgba(212, 175, 55, 0.4);
    text-shadow: none;
  }
  10%,
  30% {
    color: #ffd479;
    text-shadow: 0 0 8px rgba(255, 212, 121, 0.7);
  }
}
@keyframes hcNeedle {
  0% {
    transform: rotate(-22deg);
  }
  25% {
    transform: rotate(80deg);
  }
  50% {
    transform: rotate(-40deg);
  }
  75% {
    transform: rotate(140deg);
  }
  100% {
    transform: rotate(-22deg);
  }
}
```

**JS:**
```js
// Cycles the coordinate readout to suggest a real "scanning" load.
var hcCoords = [
  "51.5074°N · 0.1278°W", // London
  "40.7128°N · 74.0060°W", // New York
  "34.0522°N · 118.2437°W", // Los Angeles
  "48.8566°N · 2.3522°E", // Paris
  "35.6762°N · 139.6503°E", // Tokyo
];
document.querySelectorAll("[data-hc-coord]").forEach(function (node) {
  var i = 0;
  setInterval(function () {
    i = (i + 1) % hcCoords.length;
    node.textContent = hcCoords[i];
  }, 1900);
});
```

### 05. Floor-by-Floor

**Type:** CSS + JS
**Description:** A vertical luxury-building loader. Floors light up bottom-to-top like an elevator passing each level, room silhouettes flicker on inside, and a penthouse glow crowns the building when `.ready` is added. Turns waiting time into an architectural narrative — perfect for residential developments and high-end real estate.

**HTML:**
```html
<figure class="fb-loader" role="status" aria-label="Loading building tour">
  <span class="fb-building" aria-hidden="true">
    <span class="fb-roof"></span>
    <span class="fb-penthouse">
      <span class="fb-pent-light"></span>
    </span>
    <span class="fb-floor" data-floor="6"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="5"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="4"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="3"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="2"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-floor" data-floor="1"
      ><span class="fb-room"></span><span class="fb-room"></span><span class="fb-room"></span
    ></span>
    <span class="fb-base"></span>
  </span>
  <figcaption class="fb-caption">Touring residences…</figcaption>
</figure>
```

**CSS:**
```css
.fb-loader {
  position: relative;
  width: 110px;
  height: 200px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: end center;
  font-family: system-ui, sans-serif;
}

.fb-building {
  position: relative;
  width: 84px;
  display: flex;
  flex-direction: column;
  border-radius: 4px 4px 0 0;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
}

.fb-roof {
  height: 4px;
  background: linear-gradient(90deg, transparent 8%, #d4af37 8%, #d4af37 92%, transparent 92%);
  border-radius: 2px 2px 0 0;
  margin-bottom: 1px;
}

.fb-penthouse {
  position: relative;
  height: 22px;
  background: linear-gradient(180deg, #1f2433 0%, #161b2a 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-bottom: 0;
  display: grid;
  place-items: center;
}

.fb-pent-light {
  width: 60%;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 212, 121, 0.08);
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.fb-floor {
  position: relative;
  height: 22px;
  background: linear-gradient(180deg, #1a1f2e 0%, #14182a 100%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px 6px;
  box-sizing: border-box;
}

.fb-room {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1.5px;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.fb-base {
  height: 6px;
  background: #2a1f1a;
  border-radius: 0 0 4px 4px;
}

.fb-floor[data-floor="1"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 0s;
}

.fb-floor[data-floor="2"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 0.7s;
}

.fb-floor[data-floor="3"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 1.4s;
}

.fb-floor[data-floor="4"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 2.1s;
}

.fb-floor[data-floor="5"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 2.8s;
}

.fb-floor[data-floor="6"] .fb-room {
  animation: fbWindow 7s ease-in-out infinite;
  animation-delay: 3.5s;
}

.fb-floor[data-floor="1"] .fb-room:nth-child(2) {
  animation-delay: 0.15s;
}

.fb-floor[data-floor="1"] .fb-room:nth-child(3) {
  animation-delay: 0.3s;
}

.fb-floor[data-floor="2"] .fb-room:nth-child(2) {
  animation-delay: 0.85s;
}

.fb-floor[data-floor="2"] .fb-room:nth-child(3) {
  animation-delay: 1s;
}

.fb-floor[data-floor="3"] .fb-room:nth-child(2) {
  animation-delay: 1.55s;
}

.fb-floor[data-floor="3"] .fb-room:nth-child(3) {
  animation-delay: 1.7s;
}

.fb-floor[data-floor="4"] .fb-room:nth-child(2) {
  animation-delay: 2.25s;
}

.fb-floor[data-floor="4"] .fb-room:nth-child(3) {
  animation-delay: 2.4s;
}

.fb-floor[data-floor="5"] .fb-room:nth-child(2) {
  animation-delay: 2.95s;
}

.fb-floor[data-floor="5"] .fb-room:nth-child(3) {
  animation-delay: 3.1s;
}

.fb-floor[data-floor="6"] .fb-room:nth-child(2) {
  animation-delay: 3.65s;
}

.fb-floor[data-floor="6"] .fb-room:nth-child(3) {
  animation-delay: 3.8s;
}

.fb-caption {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #d4af37;
  white-space: nowrap;
  animation: fbCap 2.6s ease-in-out infinite;
}

.fb-loader.ready .fb-room {
  animation: none;
  background: #ffd479;
  box-shadow:
    0 0 4px rgba(255, 212, 121, 0.55),
    inset 0 0 3px rgba(255, 212, 121, 0.45);
}

.fb-loader.ready .fb-pent-light {
  background: #ffd479;
  box-shadow:
    0 0 14px rgba(255, 212, 121, 0.7),
    inset 0 0 8px rgba(255, 212, 121, 0.5);
}

.fb-loader.ready .fb-caption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .fb-room,
  .fb-caption {
    animation: none;
  }
  .fb-room {
    background: rgba(255, 212, 121, 0.45);
  }
}
@keyframes fbWindow {
  0%,
  5% {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
  15%,
  60% {
    background: #ffd479;
    box-shadow:
      0 0 4px rgba(255, 212, 121, 0.55),
      inset 0 0 3px rgba(255, 212, 121, 0.45);
  }
  80%,
  100% {
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }
}
@keyframes fbCap {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
```

**JS:**
```js
// Drives the elevator/penthouse "ready" reveal. Replace with your real load trigger.
document.querySelectorAll(".fb-loader").forEach(function (b) {
  var ready = false;
  function tick() {
    ready = !ready;
    b.classList.toggle("ready", ready);
    setTimeout(tick, ready ? 2400 : 5400);
  }
  setTimeout(tick, 5400);
});
```

### 06. DNA Helix

**Type:** Pure CSS
**Description:** Alternating dots oscillate up and down in a staggered wave, mimicking the visual rhythm of a DNA double helix.

**HTML:**
```html
<div class="dna">
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
  <div class="dna-dot"></div>
</div>
```

**CSS:**
```css
.dna {
  display: flex;
  gap: 6px;
  align-items: center;
}
.dna-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: dna 1.2s ease-in-out infinite;
}
.dna-dot:nth-child(odd) {
  background: #7c6cff;
}
.dna-dot:nth-child(even) {
  background: #ff6c8a;
}
.dna-dot:nth-child(1) {
  animation-delay: 0s;
}
.dna-dot:nth-child(2) {
  animation-delay: 0.1s;
}
.dna-dot:nth-child(3) {
  animation-delay: 0.2s;
}
.dna-dot:nth-child(4) {
  animation-delay: 0.3s;
}
.dna-dot:nth-child(5) {
  animation-delay: 0.4s;
}
.dna-dot:nth-child(6) {
  animation-delay: 0.5s;
}
@keyframes dna {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-18px) scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dna,
  .dna * {
    animation: none !important;
  }
}

```

### 07. Liquid Blob

**Type:** Pure CSS
**Description:** A gradient circle morphs its border-radius through organic blob shapes, creating a fluid, living feeling.

**HTML:**
```html
<div class="blob"></div>
```

**CSS:**
```css
.blob {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 50%;
  animation: blob 2.5s ease-in-out infinite;
}
@keyframes blob {
  0%,
  100% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
  }
  50% {
    border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%;
  }
  75% {
    border-radius: 50% 50% 30% 70% / 30% 70% 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob,
  .blob * {
    animation: none !important;
  }
}

```

### 08. Orbit System

**Type:** Pure CSS
**Description:** Two rings rotate at different speeds and directions around a central core, like a miniature solar system.

**HTML:**
```html
<div class="orbit-wrap">
  <div class="orbit-core"></div>
  <div class="orbit-ring"></div>
  <div class="orbit-ring"></div>
</div>
```

**CSS:**
```css
.orbit-wrap {
  position: relative;
  width: 60px;
  height: 60px;
}

.orbit-core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7c6cff;
}

.orbit-ring {
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-top-color: #ff6c8a;
  border-radius: 50%;
  animation: orbit 1s linear infinite;
}

.orbit-ring:nth-child(3) {
  inset: 8px;
  border-top-color: #2ecc8a;
  animation-duration: 0.7s;
  animation-direction: reverse;
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-wrap,
  .orbit-wrap * {
    animation: none !important;
  }
}

```

### 09. Signal Bars

**Type:** Pure CSS
**Description:** Five bars of varying heights pulse in and out of opacity with a staggered delay, like an equaliser or signal indicator.

**HTML:**
```html
<div class="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
```

**CSS:**
```css
.bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}
.bar {
  width: 10px;
  border-radius: 3px 3px 0 0;
  background: #7c6cff;
  animation: bars 1s ease-in-out infinite;
}
.bar:nth-child(1) {
  height: 20%;
  animation-delay: 0s;
}
.bar:nth-child(2) {
  height: 50%;
  animation-delay: 0.15s;
}
.bar:nth-child(3) {
  height: 80%;
  animation-delay: 0.3s;
}
.bar:nth-child(4) {
  height: 60%;
  animation-delay: 0.45s;
}
.bar:nth-child(5) {
  height: 35%;
  animation-delay: 0.6s;
}
@keyframes bars {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bars,
  .bars * {
    animation: none !important;
  }
}

```

### 10. Clock Sweep

**Type:** Pure CSS
**Description:** Two pseudo-element hands rotate at different speeds inside a circular face — a literal animated clock using only CSS.

**HTML:**
```html
<div class="clock"></div>
```

**CSS:**
```css
.clock {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(124, 108, 255, 0.25);
  position: relative;
}
.clock::before,
.clock::after {
  content: "";
  position: absolute;
  border-radius: 2px;
}
.clock::before {
  width: 2px;
  height: 22px;
  background: #7c6cff;
  top: 4px;
  left: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  animation: chour 6s linear infinite;
}
.clock::after {
  width: 2px;
  height: 16px;
  background: #ff6c8a;
  top: 10px;
  left: 50%;
  margin-left: -1px;
  transform-origin: bottom center;
  animation: cmin 1s linear infinite;
}
@keyframes chour {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cmin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clock,
  .clock * {
    animation: none !important;
  }
}

```

### 11. Bouncing Chain

**Type:** Pure CSS
**Description:** Four coloured dots bounce independently with staggered delays, creating a chain-like wave of movement.

**HTML:**
```html
<div class="chain">
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
</div>
```

**CSS:**
```css
.chain {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chain-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: chain 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.chain-dot:nth-child(1) {
  background: #7c6cff;
  animation-delay: 0s;
}
.chain-dot:nth-child(2) {
  background: #ff6c8a;
  animation-delay: 0.18s;
}
.chain-dot:nth-child(3) {
  background: #2ecc8a;
  animation-delay: 0.36s;
}
.chain-dot:nth-child(4) {
  background: #f5a623;
  animation-delay: 0.54s;
}
@keyframes chain {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chain,
  .chain * {
    animation: none !important;
  }
}

```

### 12. Neon Ring Draw

**Type:** Pure CSS
**Description:** A glowing ring spinner with a layered neon box-shadow creates a vivid electric glow as it spins.

**HTML:**
```html
<div class="neon-ring"></div>
```

**CSS:**
```css
.neon-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #2ecc8a;
  box-shadow:
    0 0 14px #2ecc8a,
    0 0 28px rgba(46, 204, 138, 0.35);
  animation: nring 0.9s linear infinite;
}

.neon-ring::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: rgba(46, 204, 138, 0.3);
  box-sizing: border-box;
}
@keyframes nring {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-ring,
  .neon-ring * {
    animation: none !important;
  }
}

```

### 13. Pixel Dissolve

**Type:** Pure CSS
**Description:** A 4×4 grid of squares fade and shrink in a rolling wave, like pixels dissolving from a screen.

**HTML:**
```html
<div class="pixels">
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
  <div class="px"></div>
</div>
```

**CSS:**
```css
.pixels {
  display: grid;
  grid-template-columns: repeat(4, 12px);
  gap: 4px;
}
.px {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #7c6cff;
  animation: px 1.4s ease-in-out infinite;
}
.px:nth-child(1) {
  animation-delay: 0s;
}
.px:nth-child(2) {
  animation-delay: 0.1s;
}
.px:nth-child(3) {
  animation-delay: 0.2s;
}
.px:nth-child(4) {
  animation-delay: 0.3s;
}
.px:nth-child(5) {
  animation-delay: 0.4s;
}
.px:nth-child(6) {
  animation-delay: 0.5s;
}
.px:nth-child(7) {
  animation-delay: 0.6s;
}
.px:nth-child(8) {
  animation-delay: 0.7s;
}
.px:nth-child(9) {
  animation-delay: 0.8s;
}
.px:nth-child(10) {
  animation-delay: 0.9s;
}
.px:nth-child(11) {
  animation-delay: 1s;
}
.px:nth-child(12) {
  animation-delay: 1.1s;
}
.px:nth-child(13) {
  animation-delay: 1.2s;
}
.px:nth-child(14) {
  animation-delay: 1.3s;
}
.px:nth-child(15) {
  animation-delay: 0.65s;
}
.px:nth-child(16) {
  animation-delay: 0.85s;
}
@keyframes px {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixels,
  .pixels * {
    animation: none !important;
  }
}

```

### 14. Hourglass Flip

**Type:** Pure CSS
**Description:** A pure CSS triangle-based hourglass that flips 180° and pauses, then repeats — built from two border triangles.

**HTML:**
```html
<div class="hourglass"></div>
```

**CSS:**
```css
.hourglass {
  width: 40px;
  height: 40px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #7c6cff;
  border-bottom: 20px solid #ff6c8a;
  border-radius: 4px;
  animation: hflip 1.8s ease-in-out infinite;
}
@keyframes hflip {
  0%,
  45% {
    transform: rotate(0deg);
  }
  55%,
  100% {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hourglass,
  .hourglass * {
    animation: none !important;
  }
}

```

### 15. Heartbeat Line

**Type:** Pure CSS
**Description:** An SVG heartbeat waveform scrolls horizontally in a continuous loop — an inline data URI with a CSS translateX animation.

**HTML:**
```html
<div class="hb-wrap">
  <div class="hb-line"></div>
</div>
```

**CSS:**
```css
.hb-wrap {
  width: 120px;
  height: 40px;
  overflow: hidden;
}

.hb-line {
  width: 200%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpolyline points='0,20 30,20 40,5 50,35 60,5 70,35 80,20 110,20 120,20 150,20 160,5 170,35 180,5 190,35 200,20' fill='none' stroke='%23ff6c8a' stroke-width='2.5'/%3E%3C/svg%3E")
    repeat-x center/50% 100%;
  animation: hbeat 1s linear infinite;
}
@keyframes hbeat {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hb-wrap,
  .hb-wrap * {
    animation: none !important;
  }
}

```

---
## 24 CSS Login Form Designs with Live Demos

URL: https://codefronts.com/components/css-login-forms/
Description: 24 modern CSS login form designs — glassmorphism, neon, dark mode, OTP, biometric passkey, magic link, multi-step, password strength meter and more. Copy-paste HTML & CSS, accessible, mobile-first.
Demo count: 24

### 01. Aurora Glow

**Type:** Pure CSS
**Description:** Glassmorphism login form on a drifting aurora gradient. Floating labels rise on focus and the submit button picks up a soft brand glow on hover.

**HTML:**
```html
<form class="lf-aurora">
  <div class="lf-aurora-bg"></div>
  <div class="lf-aurora-card">
    <div class="lf-aurora-title">Welcome back</div>
    <div class="lf-aurora-sub">Sign in to continue</div>
    <label class="lf-aurora-field">
      <input type="email" placeholder=" " required />
      <span>Email address</span>
    </label>
    <label class="lf-aurora-field">
      <input type="password" placeholder=" " required />
      <span>Password</span>
    </label>
    <button type="submit" class="lf-aurora-btn">Sign in →</button>
    <div class="lf-aurora-foot">No account? <a href="#">Create one</a></div>
  </div>
</form>
```

**CSS:**
```css
.lf-aurora {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
}
.lf-aurora-bg {
  position: absolute;
  inset: -40%;
  z-index: 0;
  background:
    radial-gradient(40% 40% at 30% 30%, #7c6cff 0%, transparent 60%),
    radial-gradient(50% 50% at 70% 70%, #ff6c8a 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 50%, #2eb88a 0%, transparent 60%);
  filter: blur(40px) saturate(140%);
  animation: lfaDrift 14s ease-in-out infinite alternate;
}
@keyframes lfaDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-8%, -4%, 0) rotate(8deg);
  }
}
.lf-aurora-card {
  position: relative;
  z-index: 1;
  background: rgba(15, 15, 19, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lf-aurora-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-aurora-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -10px;
}
.lf-aurora-field {
  position: relative;
  display: block;
}
.lf-aurora-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lf-aurora-field input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
}
.lf-aurora-field span {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 12px;
  color: #b8b6d4;
  pointer-events: none;
  transition:
    transform 0.2s,
    color 0.2s,
    font-size 0.2s;
}
.lf-aurora-field input:focus + span,
.lf-aurora-field input:not(:placeholder-shown) + span {
  transform: translateY(-9px);
  font-size: 9px;
  color: #a78bfa;
  letter-spacing: 0.08em;
}
.lf-aurora-btn {
  margin-top: 4px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.lf-aurora-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 32px -8px rgba(124, 108, 255, 0.9);
}
.lf-aurora-foot {
  font-size: 11px;
  color: #b8b6d4;
  text-align: center;
}
.lf-aurora-foot a {
  color: #a78bfa;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .lf-aurora,
  .lf-aurora * {
    animation: none !important;
  }
}

```

### 02. Neon Synthwave

**Type:** Pure CSS
**Description:** Neon login form in 80s-synthwave style. Hot-pink and cyan outline glows pulse around inputs and the submit button using stacked text-shadow.

**HTML:**
```html
<form class="lf-neon">
  <div class="lf-neon-title">LOG <span>IN</span></div>
  <input type="email" placeholder="user@codefronts.com" required class="lf-neon-input" />
  <input type="password" placeholder="••••••••" required class="lf-neon-input" />
  <button type="submit" class="lf-neon-btn">ENTER</button>
</form>
```

**CSS:**
```css
.lf-neon {
  width: 100%;
  max-width: 280px;
  background: #0a0014;
  border: 1px solid rgba(255, 108, 255, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 0 40px rgba(255, 108, 255, 0.15),
    inset 0 0 30px rgba(124, 108, 255, 0.1);
}
.lf-neon-title {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ff6cff,
    0 0 24px #ff6cff;
}
.lf-neon-title span {
  color: #6cffff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #6cffff,
    0 0 24px #6cffff;
}
.lf-neon-input {
  background: transparent;
  border: 1px solid rgba(255, 108, 255, 0.45);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lf-neon-input::placeholder {
  color: rgba(255, 108, 255, 0.55);
}
.lf-neon-input:focus {
  border-color: #6cffff;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.4);
}
.lf-neon-btn {
  background: transparent;
  border: 1px solid #6cffff;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #6cffff;
  cursor: pointer;
  text-shadow: 0 0 6px #6cffff;
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.15),
    0 0 14px rgba(108, 255, 255, 0.3);
  animation: lfnPulse 1.6s ease-in-out infinite;
}
.lf-neon-btn:hover {
  color: #fff;
  background: rgba(108, 255, 255, 0.1);
}
@keyframes lfnPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 12px rgba(108, 255, 255, 0.15),
      0 0 14px rgba(108, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 18px rgba(108, 255, 255, 0.25),
      0 0 28px rgba(108, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-neon,
  .lf-neon * {
    animation: none !important;
  }
}

```

### 03. Liquid Slide

**Type:** Pure CSS
**Description:** Animated sign in form with a brand stripe that slides in on mount and underlined inputs that draw outward from the centre on focus.

**HTML:**
```html
<form class="lf-liquid">
  <div class="lf-liquid-stripe"></div>
  <div class="lf-liquid-body">
    <div class="lf-liquid-title">Account Login</div>
    <div class="lf-liquid-row">
      <input type="email" placeholder="Email" required />
    </div>
    <div class="lf-liquid-row">
      <input type="password" placeholder="Password" required />
    </div>
    <div class="lf-liquid-meta">
      <label><input type="checkbox" /> Remember me</label>
      <a href="#">Forgot?</a>
    </div>
    <button type="submit" class="lf-liquid-btn">Continue</button>
  </div>
</form>
```

**CSS:**
```css
.lf-liquid {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px 1fr;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-liquid-stripe {
  background: linear-gradient(180deg, #7c6cff, #ff6c8a);
  animation: lfqSlide 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  position: relative;
}
.lf-liquid-stripe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 40%);
  mix-blend-mode: screen;
}
@keyframes lfqSlide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.lf-liquid-body {
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lf-liquid-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: -0.01em;
}
.lf-liquid-row {
  position: relative;
}
.lf-liquid-row input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 0 9px;
  font-size: 13px;
  background: transparent;
  color: #f0eeff;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  outline: none;
}
.lf-liquid-row::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transition:
    left 0.28s ease,
    right 0.28s ease;
}
.lf-liquid-row:focus-within::after {
  left: 0;
  right: 0;
}
.lf-liquid-row input::placeholder {
  color: #b8b6d4;
}
.lf-liquid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-liquid-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-liquid-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-liquid-btn {
  margin-top: 4px;
  padding: 10px 14px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-liquid-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-liquid,
  .lf-liquid * {
    animation: none !important;
  }
}

```

### 04. Card Flip Reset

**Type:** Pure CSS
**Description:** CSS-only flip card login form. The card rotates in 3D to reveal a "forgot password" form on the back — driven entirely by a hidden checkbox and sibling selectors, no JavaScript.

**HTML:**
```html
<div class="lf-flip">
  <input type="checkbox" id="lf-flip-toggle" class="lf-flip-toggle" />
  <div class="lf-flip-stage">
    <form class="lf-flip-front">
      <div class="lf-flip-title">Sign in</div>
      <input type="email" placeholder="Email" required />
      <input type="password" placeholder="Password" required />
      <button type="submit">Log in</button>
      <label for="lf-flip-toggle" class="lf-flip-link">Forgot password?</label>
    </form>
    <form class="lf-flip-back">
      <div class="lf-flip-title">Reset password</div>
      <input type="email" placeholder="Email to send reset link" required />
      <button type="submit">Send link</button>
      <label for="lf-flip-toggle" class="lf-flip-link">← Back to sign in</label>
    </form>
  </div>
</div>
```

**CSS:**
```css
.lf-flip {
  width: 100%;
  max-width: 280px;
  perspective: 1200px;
}
.lf-flip-toggle {
  display: none;
}
.lf-flip-stage {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.3, 1.2);
  min-height: 240px;
}
.lf-flip-toggle:checked ~ .lf-flip-stage {
  transform: rotateY(180deg);
}
.lf-flip-front,
.lf-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lf-flip-back {
  transform: rotateY(180deg);
}
.lf-flip-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 2px;
}
.lf-flip input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-flip input:focus {
  border-color: #7c6cff;
}
.lf-flip button {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-flip-link {
  font-size: 11px;
  color: #a78bfa;
  text-align: center;
  cursor: pointer;
  margin-top: 4px;
}
```

### 05. Magic Link

**Type:** Pure CSS
**Description:** Magic-link / passwordless login form. A single email field with an animated wand-sparkle icon — the modern pattern for email-only authentication.

**HTML:**
```html
<form class="lf-magic">
  <div class="lf-magic-icon">
    <span class="lf-magic-wand"></span>
    <span class="lf-magic-spark s1"></span>
    <span class="lf-magic-spark s2"></span>
    <span class="lf-magic-spark s3"></span>
  </div>
  <div class="lf-magic-title">Sign in with magic link</div>
  <div class="lf-magic-sub">We'll email you a one-time link. No password needed.</div>
  <input type="email" placeholder="you@example.com" required class="lf-magic-input" />
  <button type="submit" class="lf-magic-btn">Send magic link</button>
</form>
```

**CSS:**
```css
.lf-magic {
  width: 100%;
  max-width: 300px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.lf-magic-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
}
.lf-magic-wand {
  position: absolute;
  inset: 12px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(124, 108, 255, 0.55);
  animation: lfmFloat 3s ease-in-out infinite;
}
@keyframes lfmFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
.lf-magic-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  animation: lfmSpark 2s ease-in-out infinite;
}
.s1 {
  top: 4px;
  left: 6px;
  animation-delay: 0s;
}
.s2 {
  top: 8px;
  right: 4px;
  animation-delay: 0.5s;
}
.s3 {
  bottom: 6px;
  left: 12px;
  animation-delay: 1s;
}
@keyframes lfmSpark {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
.lf-magic-title {
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-magic-sub {
  font-size: 11px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-magic-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 11px 14px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.2s,
    background 0.2s;
  text-align: center;
}
.lf-magic-input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
}
.lf-magic-btn {
  width: 100%;
  padding: 11px 14px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 24px -8px rgba(124, 108, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .lf-magic,
  .lf-magic * {
    animation: none !important;
  }
}

```

### 06. Terminal Prompt

**Type:** Pure CSS
**Description:** Terminal-style login form. Monospace prompts, a blinking caret, and a green command-line submit — perfect for developer tools and CLI dashboards.

**HTML:**
```html
<form class="lf-term">
  <div class="lf-term-bar">
    <span class="lf-term-dot r"></span>
    <span class="lf-term-dot y"></span>
    <span class="lf-term-dot g"></span>
    <span class="lf-term-title">~/login</span>
  </div>
  <div class="lf-term-body">
    <div class="lf-term-line"><span class="lf-term-prompt">$</span> auth login</div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">user:</span>
      <input type="email" placeholder="you@example.com" required />
    </div>
    <div class="lf-term-line">
      <span class="lf-term-prompt">pass:</span>
      <input type="password" placeholder="••••••••" required />
    </div>
    <button type="submit" class="lf-term-btn">$ run<span class="lf-term-caret">_</span></button>
  </div>
</form>
```

**CSS:**
```css
.lf-term {
  width: 100%;
  max-width: 320px;
  background: #0a0a0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  font-family: "JetBrains Mono", "DM Mono", monospace;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
}
.lf-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #15151d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lf-term-dot.r {
  background: #ff6c8a;
}
.lf-term-dot.y {
  background: #f5b454;
}
.lf-term-dot.g {
  background: #2eb88a;
}
.lf-term-title {
  margin-left: auto;
  font-size: 11px;
  color: #b8b6d4;
  letter-spacing: 0.05em;
}
.lf-term-body {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #a5f0c8;
  font-size: 13px;
}
.lf-term-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lf-term-prompt {
  color: #7c6cff;
  flex-shrink: 0;
  font-weight: 600;
}
.lf-term-line input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 2px 0;
  caret-color: #2eb88a;
}
.lf-term-line input::placeholder {
  color: #4a4a5e;
}
.lf-term-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 14px;
  background: rgba(46, 184, 138, 0.08);
  border: 1px solid rgba(46, 184, 138, 0.4);
  color: #2eb88a;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}
.lf-term-btn:hover {
  background: rgba(46, 184, 138, 0.18);
}
.lf-term-caret {
  display: inline-block;
  margin-left: 2px;
  color: #2eb88a;
  animation: lftBlink 1s step-end infinite;
}
@keyframes lftBlink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-term,
  .lf-term * {
    animation: none !important;
  }
}

```

### 07. Floating Pill

**Type:** Pure CSS
**Description:** Compact pill-shaped login form on a single line. Rotating brand avatar, inline email and password, and a circular submit arrow that pulses on hover.

**HTML:**
```html
<form class="lf-pill">
  <div class="lf-pill-avatar">
    <div class="lf-pill-avatar-inner"></div>
  </div>
  <input type="email" placeholder="Email" class="lf-pill-input" required />
  <input type="password" placeholder="Password" class="lf-pill-input pw" required />
  <button type="submit" class="lf-pill-btn" aria-label="Sign in">→</button>
</form>
```

**CSS:**
```css
.lf-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.lf-pill-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  padding: 2px;
  animation: lfpSpin 6s linear infinite;
}
.lf-pill-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #15151d
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'><circle cx='19' cy='15' r='5' fill='%23f0eeff'/><path d='M8 30c1.5-5 5.5-7 11-7s9.5 2 11 7' fill='%23f0eeff'/></svg>")
    center/cover;
}
@keyframes lfpSpin {
  to {
    transform: rotate(360deg);
  }
}
.lf-pill-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #f0eeff;
  font-size: 13px;
  padding: 8px 6px;
}
.lf-pill-input.pw {
  max-width: 90px;
}
.lf-pill-input::placeholder {
  color: #b8b6d4;
}
.lf-pill-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(124, 108, 255, 0.5);
  transition:
    box-shadow 0.25s,
    transform 0.15s;
}
.lf-pill-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(124, 108, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .lf-pill,
  .lf-pill * {
    animation: none !important;
  }
}

```

### 08. Gradient Border

**Type:** Pure CSS
**Description:** Login form with an animated gradient border. A rotating conic-gradient frames a clean monochrome interior — a premium feel with one CSS property.

**HTML:**
```html
<form class="lf-grad">
  <div class="lf-grad-inner">
    <div class="lf-grad-title">Welcome</div>
    <div class="lf-grad-sub">Sign in to your workspace</div>
    <label class="lf-grad-label"
      >Email
      <input type="email" placeholder="name@company.com" required />
    </label>
    <label class="lf-grad-label"
      >Password
      <input type="password" placeholder="At least 8 characters" required />
    </label>
    <button type="submit" class="lf-grad-btn">Sign in</button>
  </div>
</form>
```

**CSS:**
```css
.lf-grad {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #2eb88a, #f5b454, #7c6cff);
  animation: lfgRotate 4s linear infinite;
}
@keyframes lfgRotate {
  to {
    --a: 360deg;
    transform: rotate(0);
  }
}
@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.lf-grad::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: inherit;
  filter: blur(24px);
  opacity: 0.5;
  z-index: -1;
  border-radius: inherit;
}
.lf-grad-inner {
  background: #15151d;
  border-radius: 14.5px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-grad-title {
  font-size: 18px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-grad-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-grad-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lf-grad-label input {
  text-transform: none;
  letter-spacing: normal;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-grad-label input:focus {
  border-color: #7c6cff;
}
.lf-grad-btn {
  margin-top: 6px;
  padding: 11px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-grad-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-grad,
  .lf-grad * {
    animation: none !important;
  }
}

```

### 09. Side Panel

**Type:** Pure CSS
**Description:** Two-column SaaS login layout. A brand panel on the left with a subtle parallax shape, and a clean sign in form on the right — the classic dashboard pattern.

**HTML:**
```html
<form class="lf-side">
  <aside class="lf-side-brand">
    <div class="lf-side-shape"></div>
    <div class="lf-side-logo">CF</div>
    <div class="lf-side-tag">Build the front-end<br />you've been imagining.</div>
  </aside>
  <div class="lf-side-form">
    <div class="lf-side-title">Sign in</div>
    <input type="email" placeholder="Work email" required />
    <input type="password" placeholder="Password" required />
    <button type="submit">Continue →</button>
    <a href="#" class="lf-side-foot">Forgot your password?</a>
  </div>
</form>
```

**CSS:**
```css
.lf-side {
  display: grid;
  grid-template-columns: 110px 1fr;
  width: 100%;
  max-width: 360px;
  min-height: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.lf-side-brand {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #7c6cff 0%, #5b48d6 60%, #2a1f7a 100%);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.lf-side-shape {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  animation: lfsBlob 8s ease-in-out infinite alternate;
}
@keyframes lfsBlob {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-10px, 12px) scale(1.15);
  }
}
.lf-side-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.18);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.lf-side-tag {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.92;
}
.lf-side-form {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-side-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  margin-bottom: 4px;
}
.lf-side-form input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-side-form input:focus {
  border-color: #7c6cff;
}
.lf-side-form button {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-side-foot {
  font-size: 11px;
  color: #a78bfa;
  text-decoration: none;
  text-align: center;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lf-side,
  .lf-side * {
    animation: none !important;
  }
}

```

### 10. Social First

**Type:** Pure CSS
**Description:** Social-first sign in form with OAuth buttons (Google, GitHub) up top, a divider, and a compact email fallback — the standard product onboarding pattern.

**HTML:**
```html
<form class="lf-soc">
  <div class="lf-soc-title">Sign in</div>
  <button type="button" class="lf-soc-btn google">
    <span class="lf-soc-ic">G</span> Continue with Google
  </button>
  <button type="button" class="lf-soc-btn github">
    <span class="lf-soc-ic">●</span> Continue with GitHub
  </button>
  <div class="lf-soc-or"><span>or</span></div>
  <input type="email" placeholder="Email address" required />
  <button type="submit" class="lf-soc-submit">Continue with email</button>
  <div class="lf-soc-foot">By continuing you agree to our <a href="#">Terms</a></div>
</form>
```

**CSS:**
```css
.lf-soc {
  width: 100%;
  max-width: 290px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-soc-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  text-align: center;
  margin-bottom: 4px;
}
.lf-soc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
.lf-soc-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.lf-soc-ic {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
  background: white;
  color: #15151d;
}
.lf-soc-btn.github .lf-soc-ic {
  background: #f0eeff;
  color: #15151d;
}
.lf-soc-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lf-soc-or::before,
.lf-soc-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.lf-soc input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
}
.lf-soc input:focus {
  border-color: #7c6cff;
}
.lf-soc-submit {
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-soc-foot {
  font-size: 10px;
  color: #b8b6d4;
  text-align: center;
  margin-top: 4px;
}
.lf-soc-foot a {
  color: #a78bfa;
  text-decoration: none;
}
```

### 11. Animated Mascot

**Type:** Pure CSS
**Description:** Playful login form with an animated mascot. A CSS-drawn face whose eyes follow the focused input via `:has()` — left for email, down for password — and blinks on idle.

**HTML:**
```html
<form class="lf-mascot">
  <div class="lf-mascot-face">
    <div class="lf-mascot-eye l"><div class="lf-mascot-pupil"></div></div>
    <div class="lf-mascot-eye r"><div class="lf-mascot-pupil"></div></div>
    <div class="lf-mascot-mouth"></div>
  </div>
  <input type="email" placeholder="Email" required class="lf-mascot-input email" />
  <input type="password" placeholder="Password" required class="lf-mascot-input pwd" />
  <button type="submit" class="lf-mascot-btn">Hop in!</button>
</form>
```

**CSS:**
```css
.lf-mascot {
  width: 100%;
  max-width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.lf-mascot-face {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  position: relative;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px -8px rgba(251, 191, 36, 0.6);
}
.lf-mascot-eye {
  position: absolute;
  top: 28px;
  width: 14px;
  height: 14px;
  background: #15151d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lf-mascot-eye.l {
  left: 18px;
}
.lf-mascot-eye.r {
  right: 18px;
}
.lf-mascot-pupil {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  transition: transform 0.25s ease;
  animation: lfmBlink 4s ease-in-out infinite;
}
@keyframes lfmBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
.lf-mascot-mouth {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 22px;
  height: 12px;
  border: 2.5px solid #15151d;
  border-top: none;
  border-radius: 0 0 22px 22px;
  transform: translateX(-50%);
}
/* Eyes track focused input */
.lf-mascot:has(.email:focus) .lf-mascot-pupil {
  transform: translate(-3px, 0);
}
.lf-mascot:has(.pwd:focus) .lf-mascot-pupil {
  transform: translate(0, 3px);
}
.lf-mascot:has(.lf-mascot-btn:hover) .lf-mascot-mouth {
  height: 18px;
  border-radius: 0 0 28px 28px;
}
.lf-mascot-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.lf-mascot-input:focus {
  border-color: #fbbf24;
}
.lf-mascot-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #fbbf24, #ef4444);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
  transition: transform 0.12s;
}
.lf-mascot-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-mascot,
  .lf-mascot * {
    animation: none !important;
  }
}

```

### 12. Compact Modal

**Type:** Pure CSS
**Description:** Modal / dialog login form. Dense and professional, with subtle hover glow on inputs and a primary action that fills with brand colour on hover.

**HTML:**
```html
<form class="lf-modal">
  <button type="button" class="lf-modal-close" aria-label="Close">×</button>
  <div class="lf-modal-title">Sign in to Codefronts</div>
  <div class="lf-modal-sub">Use your email and password to continue</div>
  <label class="lf-modal-row">
    <span>Email</span>
    <input type="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-modal-row">
    <span>Password <a href="#">Forgot?</a></span>
    <input type="password" placeholder="••••••••" required />
  </label>
  <label class="lf-modal-check"> <input type="checkbox" /> Keep me signed in for 30 days </label>
  <button type="submit" class="lf-modal-submit">Sign in</button>
</form>
```

**CSS:**
```css
.lf-modal {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lf-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: #b8b6d4;
  font-size: 18px;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
  line-height: 1;
}
.lf-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f0eeff;
}
.lf-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-modal-sub {
  font-size: 12px;
  color: #b8b6d4;
  margin-top: -8px;
  margin-bottom: 4px;
}
.lf-modal-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-row > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lf-modal-row > span a {
  color: #a78bfa;
  text-decoration: none;
  font-size: 11px;
}
.lf-modal-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.lf-modal-row input:hover {
  background: rgba(255, 255, 255, 0.06);
}
.lf-modal-row input:focus {
  border-color: #7c6cff;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-modal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-modal-check input {
  accent-color: #7c6cff;
}
.lf-modal-submit {
  padding: 10px;
  background: rgba(124, 108, 255, 0.18);
  color: #c8c0ff;
  border: 1px solid rgba(124, 108, 255, 0.4);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.lf-modal-submit:hover {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border-color: transparent;
}
```

### 13. Glass Frosted

**Type:** Pure CSS
**Description:** Frosted-glass login form on a soft photographic background. Translucent inputs with subtle inner highlights — a calm, premium hero treatment.

**HTML:**
```html
<form class="lf-glass" aria-label="Sign in form">
  <div class="lf-glass-bg" aria-hidden="true"></div>
  <article class="lf-glass-card">
    <header>
      <h2 class="lf-glass-title">Sign in</h2>
      <p class="lf-glass-sub">Welcome back. Continue where you left off.</p>
    </header>
    <label class="lf-glass-field">
      <span>Email</span>
      <input
        type="email"
        name="email"
        autocomplete="email"
        placeholder="you@example.com"
        required
      />
    </label>
    <label class="lf-glass-field">
      <span>Password</span>
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
    </label>
    <button type="submit" class="lf-glass-btn">Continue</button>
  </article>
</form>
```

**CSS:**
```css
.lf-glass {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
}
.lf-glass-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, #f59e0b 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 70%, #7c3aed 0%, transparent 60%),
    radial-gradient(60% 70% at 50% 50%, #ef4444 0%, transparent 60%), #0a0a14;
  filter: blur(30px) saturate(120%);
  transform: scale(1.2);
}
.lf-glass-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-radius: 18px;
  padding: 26px 22px;
  display: grid;
  gap: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 18px 48px -16px rgba(0, 0, 0, 0.5);
}
.lf-glass-card header {
  display: grid;
  gap: 4px;
}
.lf-glass-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.lf-glass-sub {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.lf-glass-field {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.lf-glass-field input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lf-glass-field input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.lf-glass-field input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.14);
}
.lf-glass-btn {
  margin-top: 4px;
  padding: 11px;
  background: rgba(255, 255, 255, 0.92);
  color: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.12s,
    background 0.15s;
}
.lf-glass-btn:hover {
  transform: translateY(-1px);
  background: #fff;
}
```

### 14. Step-by-Step

**Type:** Pure CSS
**Description:** Multi-step login form. Enter email, then password — the card slides between steps with a progress bar, driven entirely by `:has()` and `:checked`. No JavaScript.

**HTML:**
```html
<form class="lf-step" aria-label="Two-step sign in">
  <input type="radio" id="lf-step-1" name="lf-step" class="lf-step-radio" checked />
  <input type="radio" id="lf-step-2" name="lf-step" class="lf-step-radio" />

  <header class="lf-step-head">
    <span class="lf-step-bar" aria-hidden="true"></span>
    <span class="lf-step-counter"><span class="lf-step-now">1</span> of 2</span>
  </header>

  <div class="lf-step-track">
    <fieldset class="lf-step-pane">
      <legend class="lf-step-label">What's your email?</legend>
      <label class="lf-step-row">
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="name@company.com"
          required
        />
      </label>
      <label for="lf-step-2" class="lf-step-btn primary">Next →</label>
    </fieldset>

    <fieldset class="lf-step-pane">
      <legend class="lf-step-label">Now your password</legend>
      <label class="lf-step-row">
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••"
          required
        />
      </label>
      <div class="lf-step-actions">
        <label for="lf-step-1" class="lf-step-btn ghost">← Back</label>
        <button type="submit" class="lf-step-btn primary">Sign in</button>
      </div>
    </fieldset>
  </div>
</form>
```

**CSS:**
```css
.lf-step {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 22px 22px;
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.lf-step-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lf-step-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-step-bar {
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.lf-step-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  right: 50%;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  border-radius: inherit;
  transition: right 0.4s ease;
}
.lf-step:has(#lf-step-2:checked) .lf-step-bar::after {
  right: 0;
}
.lf-step:has(#lf-step-2:checked) .lf-step-now::after {
  content: "2";
}
.lf-step-now {
  font-weight: 700;
  color: #f0eeff;
}
.lf-step-now::after {
  content: "1";
}
.lf-step-now {
  font-size: 0;
}
.lf-step-now::after {
  font-size: 11px;
}
.lf-step-track {
  display: grid;
  grid-template-columns: 100% 100%;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.lf-step:has(#lf-step-2:checked) .lf-step-track {
  transform: translateX(-100%);
}
.lf-step-pane {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.lf-step-label {
  font-size: 13px;
  font-weight: 600;
  color: #f0eeff;
  padding: 0;
}
.lf-step-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-step-row input:focus {
  border-color: #7c6cff;
}
.lf-step-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}
.lf-step-btn {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
  transition:
    transform 0.12s,
    background 0.15s;
}
.lf-step-btn.primary {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
}
.lf-step-btn.primary:hover {
  transform: translateY(-1px);
}
.lf-step-btn.ghost {
  background: transparent;
  color: #b8b6d4;
  border-color: rgba(255, 255, 255, 0.1);
}
.lf-step-btn.ghost:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
```

### 15. Animated Gradient Border

**Type:** Pure CSS
**Description:** Animated rainbow gradient border login form. A `@property`-driven conic gradient genuinely rotates around the card edge — true property animation, not a keyframes hack.

**HTML:**
```html
<form class="lf-prop" aria-label="Animated gradient sign in">
  <div class="lf-prop-inner">
    <h2 class="lf-prop-title">Sign in</h2>
    <p class="lf-prop-sub">A small bit of magic, every time.</p>
    <label class="lf-prop-field">
      <span>Email</span>
      <input
        type="email"
        name="email"
        autocomplete="email"
        placeholder="you@codefronts.com"
        required
      />
    </label>
    <label class="lf-prop-field">
      <span>Password</span>
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
    </label>
    <button type="submit" class="lf-prop-btn">Sign in</button>
  </div>
</form>
```

**CSS:**
```css
@property --lf-prop-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.lf-prop {
  position: relative;
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  padding: 1.5px;
  background: conic-gradient(
    from var(--lf-prop-angle, 0deg),
    #7c6cff,
    #ff6c8a,
    #2eb88a,
    #f5b454,
    #7c6cff
  );
  animation: lfPropSpin 5s linear infinite;
}
@keyframes lfPropSpin {
  to {
    --lf-prop-angle: 360deg;
  }
}
.lf-prop::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  background: inherit;
  filter: blur(28px);
  opacity: 0.45;
  border-radius: inherit;
}
.lf-prop-inner {
  background: #15151d;
  border-radius: 14.5px;
  padding: 24px 22px;
  display: grid;
  gap: 12px;
}
.lf-prop-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-prop-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-prop-field {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-prop-field input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.lf-prop-field input:focus {
  border-color: #7c6cff;
  box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15);
}
.lf-prop-btn {
  margin-top: 4px;
  padding: 11px;
  background: #f0eeff;
  color: #15151d;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-prop-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-prop,
  .lf-prop * {
    animation: none !important;
  }
}

```

### 16. Vault Lock

**Type:** Pure CSS
**Description:** Vault-style secure login form. The lock dial rotates and the bolt slides open the moment the password field gains focus — pure CSS, driven by `:focus-within` and `:has()`.

**HTML:**
```html
<form class="lf-vault" aria-label="Vault sign in">
  <figure class="lf-vault-lock" aria-hidden="true">
    <span class="lf-vault-dial"></span>
    <span class="lf-vault-bolt"></span>
  </figure>
  <h2 class="lf-vault-title">Vault access</h2>
  <p class="lf-vault-sub">Authenticate to view encrypted contents</p>
  <label class="lf-vault-field">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-vault-field lf-vault-pw">
    <span>Master password</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-vault-btn">Unlock</button>
</form>
```

**CSS:**
```css
.lf-vault {
  width: 100%;
  max-width: 300px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}
.lf-vault-lock {
  position: relative;
  margin: 0 0 6px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2a36 0%, #15151d 70%);
  border: 2px solid #2eb88a;
  box-shadow:
    0 0 0 4px rgba(46, 184, 138, 0.08),
    0 0 24px rgba(46, 184, 138, 0.25);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.lf-vault-dial {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 3px;
  background: #2eb88a;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(35deg);
  transform-origin: center;
  transition:
    transform 0.5s cubic-bezier(0.5, 0, 0.3, 1.3),
    background 0.3s;
}
.lf-vault-dial::after {
  content: "";
  position: absolute;
  inset: -3px auto -3px -3px;
  width: 9px;
  border-radius: 50%;
  background: #2eb88a;
  transition: background 0.3s;
}
.lf-vault-bolt {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 14px;
  height: 18px;
  background: #2eb88a;
  border-radius: 3px;
  transform: translateX(-50%) translateY(0);
  transition:
    transform 0.35s ease,
    background 0.3s;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-lock {
  border-color: #7c6cff;
  box-shadow:
    0 0 0 4px rgba(124, 108, 255, 0.12),
    0 0 28px rgba(124, 108, 255, 0.45);
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial {
  transform: translate(-50%, -50%) rotate(220deg);
  background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-dial::after {
  background: #7c6cff;
}
.lf-vault:has(.lf-vault-pw input:focus) .lf-vault-bolt {
  transform: translateX(-50%) translateY(8px);
  background: #7c6cff;
}
.lf-vault-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-vault-sub {
  margin: 0 0 4px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-vault-field {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: #b8b6d4;
  width: 100%;
  text-align: left;
}
.lf-vault-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-vault-field input:focus {
  border-color: #7c6cff;
}
.lf-vault-btn {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-vault-btn:hover {
  transform: translateY(-1px);
}
```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** Brutalist login form with heavy borders, hard-edge offset shadow, and a stamp-style badge. A confident no-nonsense look for portfolios, dev tools, and editorial brands.

**HTML:**
```html
<form class="lf-brut" aria-label="Brutalist sign in">
  <span class="lf-brut-stamp" aria-hidden="true">
    <span>SECURE</span>
    <span>· AUTH ·</span>
    <span>2025</span>
  </span>
  <h2 class="lf-brut-title">Sign in.</h2>
  <p class="lf-brut-sub">No frills. Get back to work.</p>
  <label class="lf-brut-row">
    <span>EMAIL</span>
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-brut-row">
    <span>PASSWORD</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form>
```

**CSS:**
```css
.lf-brut {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fef9c3;
  border: 2.5px solid #15151d;
  border-radius: 6px;
  padding: 22px 20px;
  display: grid;
  gap: 12px;
  box-shadow: 6px 6px 0 0 #15151d;
  font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
  position: absolute;
  top: -14px;
  right: 12px;
  background: #ef4444;
  color: #fef9c3;
  border: 2px solid #15151d;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  display: inline-flex;
  gap: 6px;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #15151d;
  letter-spacing: -0.02em;
}
.lf-brut-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #4a4a5e;
}
.lf-brut-row {
  display: grid;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #15151d;
}
.lf-brut-row input {
  background: #fff;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #15151d;
  outline: none;
  transition:
    box-shadow 0.15s,
    transform 0.12s;
}
.lf-brut-row input:focus {
  box-shadow: 4px 4px 0 #15151d;
  transform: translate(-2px, -2px);
}
.lf-brut-btn {
  background: #15151d;
  color: #fef9c3;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    background 0.15s,
    color 0.15s;
}
.lf-brut-btn:hover {
  background: #ef4444;
  color: #fef9c3;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #15151d;
}
```

### 18. Show Password Toggle

**Type:** Light JS
**Description:** Login form with a show / hide password toggle. Inline eye-icon button with proper `aria-pressed` and `aria-label` handling for accessibility.

**HTML:**
```html
<form class="lf-show" aria-label="Sign in with password reveal">
  <h2 class="lf-show-title">Sign in</h2>
  <label class="lf-show-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="name@company.com" required />
  </label>
  <label class="lf-show-row lf-show-row-pw">
    <span>Password</span>
    <span class="lf-show-pw">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="••••••••"
        required
      />
      <button
        type="button"
        class="lf-show-eye"
        aria-label="Show password"
        aria-pressed="false"
        data-lf-eye
      >
        <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
          <path
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"
          />
        </svg>
      </button>
    </span>
  </label>
  <div class="lf-show-meta">
    <label><input type="checkbox" name="remember" /> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button type="submit" class="lf-show-submit">Sign in</button>
</form>
```

**CSS:**
```css
.lf-show {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  display: grid;
  gap: 12px;
}
.lf-show-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-show-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-show-row input:focus {
  border-color: #7c6cff;
}
.lf-show-pw {
  position: relative;
  display: block;
}
.lf-show-pw input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 38px;
}
.lf-show-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b8b6d4;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}
.lf-show-eye:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.04);
}
.lf-show-eye[aria-pressed="true"] {
  color: #7c6cff;
  border-color: rgba(124, 108, 255, 0.4);
  background: rgba(124, 108, 255, 0.08);
}
.lf-show-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-show-meta input {
  accent-color: #7c6cff;
  margin-right: 4px;
}
.lf-show-meta a {
  color: #a78bfa;
  text-decoration: none;
}
.lf-show-submit {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-show-submit:hover {
  transform: translateY(-1px);
}

/* ─── tiny JS to toggle reveal ─── */
/*
document.querySelectorAll('[data-lf-eye]').forEach(btn => {
  btn.addEventListener('click', () => {
    const input = btn.previousElementSibling;
    const next  = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    btn.setAttribute('aria-pressed', String(next === 'text'));
    btn.setAttribute('aria-label', next === 'text' ? 'Hide password' : 'Show password');
  });
});
*/
```

**JS:**
```js
// Show / hide password toggle
document.querySelectorAll('[data-lf-eye]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var input = btn.previousElementSibling;
    if (!input) return;
    var next = input.type === 'password' ? 'text' : 'password';
    input.type = next;
    var revealed = next === 'text';
    btn.setAttribute('aria-pressed', String(revealed));
    btn.setAttribute('aria-label', revealed ? 'Hide password' : 'Show password');
  });
});
```

### 19. OTP Verify

**Type:** Light JS
**Description:** OTP / one-time-passcode login form. Six digit boxes with auto-advance, backspace step-back, paste-to-fill, and `autocomplete="one-time-code"` for SMS auto-suggest.

**HTML:**
```html
<form class="lf-otp" aria-label="One-time passcode entry">
  <h2 class="lf-otp-title">Enter code</h2>
  <p class="lf-otp-sub">We sent a 6-digit code to <strong>jane@example.com</strong></p>
  <fieldset class="lf-otp-row">
    <legend class="lf-otp-legend">Verification code</legend>
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      autocomplete="one-time-code"
      pattern="[0-9]"
      aria-label="Digit 1"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 2"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 3"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 4"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 5"
      data-lf-otp
    />
    <input
      type="text"
      inputmode="numeric"
      maxlength="1"
      pattern="[0-9]"
      aria-label="Digit 6"
      data-lf-otp
    />
  </fieldset>
  <button type="submit" class="lf-otp-btn">Verify &amp; sign in</button>
  <p class="lf-otp-foot">Didn't get it? <a href="#">Resend code</a></p>
</form>
```

**CSS:**
```css
.lf-otp {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
  text-align: center;
}
.lf-otp-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-otp-sub {
  margin: -4px 0 6px;
  font-size: 12px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-otp-sub strong {
  color: #f0eeff;
  font-weight: 600;
}
.lf-otp-row {
  border: 0;
  padding: 0;
  margin: 4px 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.lf-otp-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.lf-otp-row input {
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #f0eeff;
  outline: none;
  caret-color: #7c6cff;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.12s;
}
.lf-otp-row input:focus {
  border-color: #7c6cff;
  background: rgba(124, 108, 255, 0.08);
  transform: translateY(-1px);
}
.lf-otp-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-otp-foot {
  margin: 0;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-otp-foot a {
  color: #a78bfa;
  text-decoration: none;
}

/* ─── tiny JS to auto-advance & step back ─── */
/*
document.querySelectorAll('[data-lf-otp]').forEach((input, i, all) => {
  input.addEventListener('input', () => {
    input.value = input.value.replace(/\\D/g, '').slice(0, 1);
    if (input.value && all[i + 1]) all[i + 1].focus();
  });
  input.addEventListener('keydown', e => {
    if (e.key === 'Backspace' && !input.value && all[i - 1]) all[i - 1].focus();
  });
});
*/
```

**JS:**
```js
// OTP auto-advance + backspace navigation + paste
document.querySelectorAll('.lf-otp-row').forEach(function (row) {
  var inputs = Array.prototype.slice.call(row.querySelectorAll('[data-lf-otp]'));
  inputs.forEach(function (input, i) {
    input.addEventListener('input', function () {
      input.value = (input.value || '').replace(/D/g, '').slice(0, 1);
      if (input.value && inputs[i + 1]) inputs[i + 1].focus();
    });
    input.addEventListener('keydown', function (e) {
      if (e.key === 'Backspace' && !input.value && inputs[i - 1]) {
        inputs[i - 1].focus();
      }
    });
    input.addEventListener('paste', function (e) {
      var data = (e.clipboardData || window.clipboardData).getData('text');
      var digits = (data || '').replace(/D/g, '').slice(0, inputs.length);
      if (!digits) return;
      e.preventDefault();
      for (var j = 0; j < digits.length; j++) {
        if (inputs[i + j]) inputs[i + j].value = digits[j];
      }
      var next = Math.min(i + digits.length, inputs.length - 1);
      inputs[next].focus();
    });
  });
});
```

### 20. Strength Meter

**Type:** Pure CSS
**Description:** Sign-up form with a live password strength meter. The bar grows red → amber → green as the password gets stronger — driven entirely by `:has()` and `:valid`, no JavaScript scoring.

**HTML:**
```html
<form class="lf-str" aria-label="Sign up with strength meter">
  <h2 class="lf-str-title">Create account</h2>
  <label class="lf-str-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-str-row">
    <span>Password</span>
    <input
      type="password"
      name="password"
      autocomplete="new-password"
      placeholder="At least 12 characters"
      minlength="6"
      required
    />
    <span class="lf-str-meter" aria-hidden="true">
      <span class="lf-str-fill"></span>
    </span>
    <span class="lf-str-hint">Use 12+ characters with a mix of letters, numbers, and symbols.</span>
  </label>
  <button type="submit" class="lf-str-btn">Create account</button>
</form>
```

**CSS:**
```css
.lf-str {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 24px 22px;
  display: grid;
  gap: 12px;
}
.lf-str-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-str-row {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #b8b6d4;
}
.lf-str-row > input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-str-row > input:focus {
  border-color: #7c6cff;
}
.lf-str-meter {
  position: relative;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lf-str-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #ef4444, #f5b454, #2eb88a);
  border-radius: inherit;
  transition: width 0.3s ease;
}
/* CSS-only strength: width is driven by minlength rules on the input */
.lf-str-row:has(input[type="password"][value=""]) .lf-str-fill {
  width: 0;
}
.lf-str-row:has(input[type="password"]:invalid) .lf-str-fill {
  width: 30%;
}
.lf-str-row:has(input[type="password"]:valid) .lf-str-fill {
  width: 60%;
}
/* attribute selector — pattern-match longer values for full bar */
.lf-str-row:has(input[type="password"][minlength]:valid)
  > input[type="password"]:not(:placeholder-shown):required {
  /* selector keepalive */
}
.lf-str-row:has(input:focus:valid) .lf-str-fill {
  width: 100%;
}
.lf-str-hint {
  font-size: 10.5px;
  color: #b8b6d4;
  line-height: 1.5;
}
.lf-str-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-str-btn:hover {
  transform: translateY(-1px);
}
```

### 21. Pin Pad

**Type:** Pure CSS
**Description:** Numeric PIN login form. A 3×4 keypad styled like a hardware keypad with live filled-dot indicator — perfect for kiosks, secure dashboards, and short PIN auth flows.

**HTML:**
```html
<form class="lf-pin" aria-label="Numeric pin sign in">
  <h2 class="lf-pin-title">Enter PIN</h2>
  <div class="lf-pin-display" aria-live="polite">
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
    <span class="lf-pin-dot"></span>
  </div>
  <div class="lf-pin-grid" role="group" aria-label="Numeric keypad">
    <button type="button" class="lf-pin-key">1</button>
    <button type="button" class="lf-pin-key">2</button>
    <button type="button" class="lf-pin-key">3</button>
    <button type="button" class="lf-pin-key">4</button>
    <button type="button" class="lf-pin-key">5</button>
    <button type="button" class="lf-pin-key">6</button>
    <button type="button" class="lf-pin-key">7</button>
    <button type="button" class="lf-pin-key">8</button>
    <button type="button" class="lf-pin-key">9</button>
    <button type="button" class="lf-pin-key lf-pin-key-fn">⌫</button>
    <button type="button" class="lf-pin-key">0</button>
    <button type="submit" class="lf-pin-key lf-pin-key-go">→</button>
  </div>
</form>
```

**CSS:**
```css
.lf-pin {
  width: 100%;
  max-width: 240px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: grid;
  gap: 14px;
  text-align: center;
}
.lf-pin-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #f0eeff;
  letter-spacing: 0.04em;
}
.lf-pin-display {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition:
    background 0.2s,
    transform 0.2s;
}
.lf-pin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.lf-pin-key {
  aspect-ratio: 1 / 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #f0eeff;
  cursor: pointer;
  transition:
    background 0.12s,
    transform 0.08s,
    border-color 0.15s;
}
.lf-pin-key:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.lf-pin-key:active {
  transform: scale(0.95);
  background: rgba(124, 108, 255, 0.18);
}
.lf-pin-key-fn {
  color: #b8b6d4;
}
.lf-pin-key-go {
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border-color: transparent;
}
.lf-pin-key-go:hover {
  transform: translateY(-1px);
}
```

### 22. Inline Validation

**Type:** Pure CSS
**Description:** Login form with real-time inline validation. Each field shows a green checkmark when valid and a red icon when invalid, driven by `:valid` / `:invalid` and pseudo-elements — no JavaScript.

**HTML:**
```html
<form class="lf-val" aria-label="Sign in with inline validation">
  <h2 class="lf-val-title">Sign in</h2>
  <p class="lf-val-sub">Inputs validate as you type</p>
  <label class="lf-val-row">
    <span>Email</span>
    <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required />
  </label>
  <label class="lf-val-row">
    <span>Password</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="At least 8 characters"
      minlength="8"
      required
    />
  </label>
  <button type="submit" class="lf-val-btn">Continue</button>
</form>
```

**CSS:**
```css
.lf-val {
  width: 100%;
  max-width: 320px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: grid;
  gap: 12px;
}
.lf-val-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-val-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-val-row {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: #b8b6d4;
  position: relative;
}
.lf-val-row input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 38px 10px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.lf-val-row input:focus {
  border-color: #7c6cff;
}
.lf-val-row::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0.5);
  opacity: 0;
  transition:
    transform 0.2s,
    opacity 0.2s,
    background 0.2s;
}
.lf-val-row:has(input:not(:placeholder-shown):invalid) input {
  border-color: rgba(255, 108, 138, 0.6);
}
.lf-val-row:has(input:not(:placeholder-shown):invalid)::after {
  opacity: 1;
  transform: scale(1);
  background: #ff6c8a
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'><path d='M2 2 L8 8 M8 2 L2 8'/></svg>")
    center/10px no-repeat;
}
.lf-val-row:has(input:not(:placeholder-shown):valid) input {
  border-color: rgba(46, 184, 138, 0.55);
}
.lf-val-row:has(input:not(:placeholder-shown):valid)::after {
  opacity: 1;
  transform: scale(1);
  background: #2eb88a
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5 L4.2 7.2 L8 3'/></svg>")
    center/10px no-repeat;
}
.lf-val-btn {
  margin-top: 4px;
  padding: 11px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-val-btn:hover {
  transform: translateY(-1px);
}
```

### 23. Constellation

**Type:** Pure CSS
**Description:** Animated starfield login form. A subtle constellation drifts behind the card with staggered twinkling stars and periodic shooting-star streaks.

**HTML:**
```html
<form class="lf-cons" aria-label="Constellation sign in">
  <div class="lf-cons-sky" aria-hidden="true">
    <span class="lf-cons-star s1"></span>
    <span class="lf-cons-star s2"></span>
    <span class="lf-cons-star s3"></span>
    <span class="lf-cons-star s4"></span>
    <span class="lf-cons-star s5"></span>
    <span class="lf-cons-star s6"></span>
    <span class="lf-cons-shoot"></span>
  </div>
  <article class="lf-cons-card">
    <h2 class="lf-cons-title">Welcome traveller</h2>
    <p class="lf-cons-sub">Sign in to continue your journey</p>
    <label class="lf-cons-row">
      <input type="email" name="email" autocomplete="email" placeholder="Email" required />
    </label>
    <label class="lf-cons-row">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="Password"
        required
      />
    </label>
    <button type="submit" class="lf-cons-btn">Continue</button>
  </article>
</form>
```

**CSS:**
```css
.lf-cons {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at top, #1a1838 0%, #07071a 70%);
}
.lf-cons-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lf-cons-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
  animation: lfConsTwinkle 3s ease-in-out infinite;
}
.lf-cons-star.s1 {
  top: 12%;
  left: 18%;
  animation-delay: 0s;
}
.lf-cons-star.s2 {
  top: 24%;
  left: 70%;
  animation-delay: 0.6s;
}
.lf-cons-star.s3 {
  top: 38%;
  left: 32%;
  animation-delay: 1.2s;
  width: 1.5px;
  height: 1.5px;
}
.lf-cons-star.s4 {
  top: 54%;
  left: 84%;
  animation-delay: 1.8s;
}
.lf-cons-star.s5 {
  top: 68%;
  left: 14%;
  animation-delay: 0.3s;
  width: 1.5px;
  height: 1.5px;
}
.lf-cons-star.s6 {
  top: 80%;
  left: 56%;
  animation-delay: 1s;
}
@keyframes lfConsTwinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}
.lf-cons-shoot {
  position: absolute;
  top: 18%;
  left: -10%;
  width: 60px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: rotate(-18deg);
  animation: lfConsShoot 6s ease-in infinite;
  opacity: 0;
}
@keyframes lfConsShoot {
  0%,
  88% {
    transform: translateX(0) rotate(-18deg);
    opacity: 0;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(380px) rotate(-18deg);
    opacity: 0;
  }
}
.lf-cons-card {
  position: relative;
  z-index: 1;
  margin: 22px;
  padding: 22px;
  border-radius: 14px;
  background: rgba(7, 7, 26, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  display: grid;
  gap: 11px;
}
.lf-cons-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.lf-cons-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.lf-cons-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-cons-row input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.lf-cons-row input:focus {
  border-color: rgba(255, 255, 255, 0.5);
}
.lf-cons-btn {
  margin-top: 4px;
  padding: 10px;
  background: linear-gradient(135deg, #c4b5fd, #818cf8);
  color: #07071a;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s;
}
.lf-cons-btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .lf-cons,
  .lf-cons * {
    animation: none !important;
  }
}

```

### 24. Biometric Prompt

**Type:** Pure CSS
**Description:** Biometric / passkey login form. A fingerprint button takes centre stage with an animated scan line; email + password stay available below as a quiet fallback inside `<details>`.

**HTML:**
```html
<form class="lf-bio" aria-label="Biometric or password sign in">
  <button type="button" class="lf-bio-print" aria-label="Sign in with passkey">
    <svg viewBox="0 0 64 64" width="40" height="40" aria-hidden="true">
      <g fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
        <path d="M16 38c0-10 7-18 16-18s16 8 16 18" />
        <path d="M22 42c0-7 4.5-12 10-12s10 5 10 12" />
        <path d="M28 46c0-4 1.5-7 4-7s4 3 4 7" />
        <path d="M14 28c4-6 10-10 18-10s14 4 18 10" />
      </g>
    </svg>
    <span class="lf-bio-scan" aria-hidden="true"></span>
  </button>
  <h2 class="lf-bio-title">Use your passkey</h2>
  <p class="lf-bio-sub">Touch the sensor or use Face ID</p>
  <hr class="lf-bio-divider" />
  <details class="lf-bio-fallback">
    <summary>or sign in with password</summary>
    <label class="lf-bio-row">
      <input type="email" name="email" autocomplete="email" placeholder="Email" required />
    </label>
    <label class="lf-bio-row">
      <input
        type="password"
        name="password"
        autocomplete="current-password"
        placeholder="Password"
        required
      />
    </label>
    <button type="submit" class="lf-bio-submit">Sign in</button>
  </details>
</form>
```

**CSS:**
```css
.lf-bio {
  width: 100%;
  max-width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 22px 22px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
}
.lf-bio-print {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a36 0%, #0a0a14 70%);
  border: 1px solid rgba(124, 108, 255, 0.4);
  color: #c8c0ff;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 0 0 4px rgba(124, 108, 255, 0.05),
    0 8px 24px -8px rgba(124, 108, 255, 0.45);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.lf-bio-print:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 6px rgba(124, 108, 255, 0.1),
    0 12px 32px -8px rgba(124, 108, 255, 0.6);
}
.lf-bio-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(124, 108, 255, 0.65), transparent);
  animation: lfBioScan 2.4s ease-in-out infinite;
}
@keyframes lfBioScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.9;
  }
  50% {
    transform: translateY(74px);
    opacity: 1;
  }
}
.lf-bio-title {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #f0eeff;
}
.lf-bio-sub {
  margin: 0;
  font-size: 12px;
  color: #b8b6d4;
}
.lf-bio-divider {
  width: 100%;
  margin: 8px 0 4px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.lf-bio-fallback {
  width: 100%;
  text-align: left;
}
.lf-bio-fallback summary {
  font-size: 11px;
  color: #a78bfa;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  text-align: center;
  user-select: none;
}
.lf-bio-fallback summary::-webkit-details-marker {
  display: none;
}
.lf-bio-fallback summary:hover {
  color: #c8c0ff;
}
.lf-bio-fallback[open] {
  display: grid;
  gap: 8px;
}
.lf-bio-fallback[open] summary {
  margin-bottom: 4px;
}
.lf-bio-row input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: #f0eeff;
  outline: none;
  transition: border-color 0.15s;
}
.lf-bio-row input:focus {
  border-color: #7c6cff;
}
.lf-bio-submit {
  width: 100%;
  padding: 9px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .lf-bio,
  .lf-bio * {
    animation: none !important;
  }
}

```

---
## 18 CSS Play / Pause Button Designs

URL: https://codefronts.com/components/css-play-pause-buttons/
Description: 18 free CSS play / pause button designs for audio, video and podcast UIs — copy-paste HTML, CSS and JS.
Demo count: 18

### 01. Morph Triangle

**Type:** Light JS
**Description:** A play triangle that morphs into two pause bars via SVG path interpolation. The icon never disappears — it transforms — which feels meaningfully more premium than a hard swap.

**HTML:**
```html
<button class="pp-morph" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-morph-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-morph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px -8px rgba(124, 108, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-morph:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px -8px rgba(124, 108, 255, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pp-morph:focus-visible {
  outline: 3px solid rgba(124, 108, 255, 0.5);
  outline-offset: 3px;
}
.pp-morph-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-morph[aria-pressed="true"] .pp-morph-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ─── Drop-in JS ───
document.querySelectorAll('[data-pp]').forEach(btn => {
  btn.addEventListener('click', () => {
    const playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 02. Vinyl Record

**Type:** Light JS
**Description:** A miniature vinyl record. While playing it spins continuously; on pause the rotation slows to a stop with a subtle ease-out — the canonical music-app metaphor done as a single CSS button.

**HTML:**
```html
<button class="pp-vinyl" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-vinyl-disc" aria-hidden="true">
    <span class="pp-vinyl-shine"></span>
    <span class="pp-vinyl-label"></span>
    <span class="pp-vinyl-icon"></span>
  </span>
</button>
```

**CSS:**
```css
.pp-vinyl {
  width: 72px;
  height: 72px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.pp-vinyl:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.5);
  outline-offset: 3px;
}
.pp-vinyl-disc {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, #0a0a0a 0 1.5px, #1c1c1c 1.5px 3px);
  box-shadow:
    0 8px 22px -4px rgba(0, 0, 0, 0.7),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  /* Asymmetric reflection that makes the rotation visible */
}
.pp-vinyl-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  pointer-events: none;
}
/* The shine span — a brighter, narrow streak that catches the eye */
.pp-vinyl-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.22) 18deg,
    transparent 36deg,
    transparent 360deg
  );
  pointer-events: none;
}
.pp-vinyl[aria-pressed="true"] .pp-vinyl-disc {
  animation: ppVinylSpin 2.4s linear infinite;
}
@keyframes ppVinylSpin {
  to {
    transform: rotate(360deg);
  }
}
.pp-vinyl-label {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.4), transparent 40%),
    linear-gradient(135deg, #fbbf24, #b45309);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25);
}
.pp-vinyl-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8%;
  height: 8%;
  border-radius: 50%;
  background: #15151d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .pp-vinyl,
  .pp-vinyl * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 03. Equaliser Bars

**Type:** Light JS
**Description:** Three vertical bars that animate height while playing and freeze instantly when paused. Doubles as both a button and a "now playing" indicator — perfect for podcast and audio UIs.

**HTML:**
```html
<button class="pp-eq" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-eq-bars" aria-hidden="true"> <span></span><span></span><span></span> </span>
</button>
```

**CSS:**
```css
.pp-eq {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.3);
  color: #2dd4bf;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}
.pp-eq:hover {
  background: rgba(20, 184, 166, 0.16);
  border-color: rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}
.pp-eq:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.4);
  outline-offset: 3px;
}
.pp-eq-bars {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
}
.pp-eq-bars > span {
  width: 4px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.3);
  transform-origin: center;
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(1) {
  transform: scaleY(0.4);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(2) {
  transform: scaleY(0.7);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(3) {
  transform: scaleY(0.5);
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span {
  animation: ppEqDance 0.9s ease-in-out infinite;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(1) {
  animation-delay: 0s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(2) {
  animation-delay: 0.2s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes ppEqDance {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pp-eq,
  .pp-eq * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 04. Skip Hub

**Type:** Light JS
**Description:** Full media-control cluster with previous, play/pause and next buttons. The central button uses a morph icon with a gradient halo while playing — the canonical pattern for music players and podcast apps.

**HTML:**
```html
<div class="pp-hub" role="group" aria-label="Media controls">
  <button class="pp-hub-side" type="button" aria-label="Previous track">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path d="M6 5 H8 V19 H6 Z M8 12 L19 5 V19 Z" fill="currentColor" />
    </svg>
  </button>
  <button class="pp-hub-main" type="button" aria-pressed="false" aria-label="Play" data-pp>
    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
      <path class="pp-hub-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </button>
  <button class="pp-hub-side" type="button" aria-label="Next track">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path d="M16 5 H18 V19 H16 Z M5 5 L16 12 L5 19 Z" fill="currentColor" />
    </svg>
  </button>
</div>
```

**CSS:**
```css
.pp-hub {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}
.pp-hub-side {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 50%;
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    transform 0.12s;
}
.pp-hub-side:hover {
  color: #f0eeff;
  background: rgba(255, 255, 255, 0.06);
}
.pp-hub-side:active {
  transform: scale(0.92);
}
.pp-hub-main {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e, #fb7185);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 0 0 0 rgba(244, 63, 94, 0.5),
    0 8px 18px -6px rgba(244, 63, 94, 0.7);
  transition:
    box-shadow 0.25s,
    transform 0.15s;
}
.pp-hub-main:hover {
  transform: translateY(-1px);
}
.pp-hub-main:focus-visible {
  outline: 3px solid rgba(244, 63, 94, 0.45);
  outline-offset: 3px;
}
.pp-hub-main[aria-pressed="true"] {
  box-shadow:
    0 0 0 6px rgba(244, 63, 94, 0.18),
    0 8px 22px -6px rgba(244, 63, 94, 0.85);
}
.pp-hub-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-hub-main[aria-pressed="true"] .pp-hub-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 05. Liquid Wave

**Type:** Light JS
**Description:** A continuous waveform travels across the button while playing and freezes mid-cycle on pause. Built with an SVG path + CSS transform — perfect for audio players and music-streaming UIs.

**HTML:**
```html
<button class="pp-wave" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 200 40" preserveAspectRatio="none" class="pp-wave-svg" aria-hidden="true">
    <path
      class="pp-wave-path"
      d="M0 20 Q 20 0 40 20 T 80 20 T 120 20 T 160 20 T 200 20"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
    />
  </svg>
  <span class="pp-wave-icon" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.pp-wave {
  position: relative;
  width: 140px;
  height: 56px;
  background: linear-gradient(135deg, #0c4a6e, #075985);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 14px;
  color: #38bdf8;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition:
    border-color 0.2s,
    transform 0.15s;
}
.pp-wave:hover {
  border-color: rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}
.pp-wave:focus-visible {
  outline: 3px solid rgba(56, 189, 248, 0.4);
  outline-offset: 3px;
}
.pp-wave-svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  opacity: 0.6;
}
.pp-wave[aria-pressed="true"] .pp-wave-svg {
  animation: ppWaveScroll 2.4s linear infinite;
}
@keyframes ppWaveScroll {
  to {
    transform: translateX(-50%);
  }
}
.pp-wave-icon {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 13px;
  border-color: transparent transparent transparent #38bdf8;
  margin-left: 4px;
  transition:
    border-width 0.25s,
    margin-left 0.25s;
}
.pp-wave[aria-pressed="true"] .pp-wave-icon {
  border-width: 0 4px 0 4px;
  border-color: transparent #38bdf8 transparent #38bdf8;
  height: 18px;
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pp-wave,
  .pp-wave * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 06. Pulse Halo

**Type:** Light JS
**Description:** Concentric halo rings emanate outward while playing — a soft pulse that signals "live" or "active" without distraction. Ideal for radio streams, live broadcasts, and listen-now CTAs.

**HTML:**
```html
<button class="pp-pulse" type="button" aria-pressed="false" aria-label="Play live" data-pp>
  <span class="pp-pulse-rings" aria-hidden="true"> <span></span><span></span> </span>
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path class="pp-pulse-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-pulse {
  position: relative;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  border: 0;
  border-radius: 50%;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px rgba(236, 72, 153, 0.7);
  transition: transform 0.15s;
  z-index: 1;
}
.pp-pulse:hover {
  transform: translateY(-1px);
}
.pp-pulse:focus-visible {
  outline: 3px solid rgba(236, 72, 153, 0.5);
  outline-offset: 3px;
}
.pp-pulse-rings {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.pp-pulse-rings > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ec4899;
  opacity: 0;
  transform: scale(1);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span {
  animation: ppPulseRipple 1.8s ease-out infinite;
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span:nth-child(2) {
  animation-delay: 0.9s;
}
@keyframes ppPulseRipple {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
.pp-pulse-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-pulse,
  .pp-pulse * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 07. Toggle Pill

**Type:** Light JS
**Description:** iOS-style sliding toggle — but for play/pause. The thumb glides between two icons inside a single rounded track. Reads instantly as a state-bearing control, not just a button.

**HTML:**
```html
<button class="pp-toggle" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-toggle-icons" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="12" height="12">
      <path d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
    <svg viewBox="0 0 24 24" width="12" height="12">
      <path d="M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pp-toggle-thumb" aria-hidden="true"></span>
</button>
```

**CSS:**
```css
.pp-toggle {
  position: relative;
  width: 76px;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.pp-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}
.pp-toggle:focus-visible {
  outline: 3px solid rgba(45, 212, 191, 0.4);
  outline-offset: 3px;
}
.pp-toggle-icons {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 11px;
  color: #64748b;
  pointer-events: none;
  transition: color 0.2s;
}
.pp-toggle[aria-pressed="false"] .pp-toggle-icons :first-child {
  color: #2dd4bf;
}
.pp-toggle[aria-pressed="true"] .pp-toggle-icons :last-child {
  color: #2dd4bf;
}
.pp-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #2dd4bf, #14b8a6);
  border-radius: 50%;
  box-shadow:
    0 4px 10px -2px rgba(20, 184, 166, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-toggle[aria-pressed="true"] .pp-toggle-thumb {
  transform: translateX(38px);
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 08. Neon Arcade

**Type:** Light JS
**Description:** Stacked neon-cyan glow with monospace label. The play / pause icon sits inside a glowing ring that pulses while playing — synthwave 80s arcade vibes for gaming, retro media, and dev tools.

**HTML:**
```html
<button class="pp-neon" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-neon-ring" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
      <path class="pp-neon-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pp-neon-label" aria-hidden="true">
    <span class="pp-neon-text pp-neon-text-play">PLAY</span>
    <span class="pp-neon-text pp-neon-text-pause">PAUSE</span>
  </span>
</button>
```

**CSS:**
```css
.pp-neon {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 16px;
  background: #0a0014;
  border: 1px solid rgba(108, 255, 255, 0.4);
  border-radius: 8px;
  color: #6cffff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  text-shadow: 0 0 8px rgba(108, 255, 255, 0.6);
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.1),
    0 0 14px rgba(108, 255, 255, 0.25);
  transition:
    box-shadow 0.25s,
    border-color 0.2s,
    transform 0.15s;
}
.pp-neon:hover {
  border-color: #6cffff;
  box-shadow:
    inset 0 0 18px rgba(108, 255, 255, 0.2),
    0 0 22px rgba(108, 255, 255, 0.5);
  transform: translateY(-1px);
}
.pp-neon:focus-visible {
  outline: 3px solid rgba(108, 255, 255, 0.5);
  outline-offset: 3px;
}
.pp-neon-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #6cffff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(108, 255, 255, 0.4);
}
.pp-neon[aria-pressed="true"] .pp-neon-ring {
  animation: ppNeonPulse 1.4s ease-in-out infinite;
}
@keyframes ppNeonPulse {
  0%,
  100% {
    box-shadow: 0 0 10px rgba(108, 255, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 22px rgba(108, 255, 255, 0.85);
  }
}
.pp-neon-ring svg {
  display: block;
}
.pp-neon-label {
  position: relative;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  /* Reserve width of the longer label (PAUSE) so the button
     doesn't reflow when the state flips. */
  min-width: 4ch;
  text-align: left;
}
.pp-neon-text {
  display: none;
}
.pp-neon[aria-pressed="false"] .pp-neon-text-play {
  display: inline;
}
.pp-neon[aria-pressed="true"] .pp-neon-text-pause {
  display: inline;
}
.pp-neon-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-neon[aria-pressed="true"] .pp-neon-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-neon,
  .pp-neon * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 09. Minimal Outline

**Type:** Light JS
**Description:** Refined outline-only button with a hairline border and subtle hover lift. The icon morphs cleanly between play and pause — an editorial, restrained pattern for content-heavy sites.

**HTML:**
```html
<button class="pp-min" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
    <path class="pp-min-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
  <span class="pp-min-label">Listen</span>
</button>
```

**CSS:**
```css
.pp-min {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #f0eeff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.15s;
}
.pp-min:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}
.pp-min:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.25);
  outline-offset: 3px;
}
.pp-min[aria-pressed="true"] {
  background: #f0eeff;
  color: #0f172a;
  border-color: #f0eeff;
}
.pp-min-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-min[aria-pressed="true"] .pp-min-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
.pp-min[aria-pressed="true"] .pp-min-label::before {
  content: "Pause";
}
.pp-min[aria-pressed="true"] .pp-min-label {
  font-size: 0;
}
.pp-min[aria-pressed="true"] .pp-min-label::before {
  font-size: 13px;
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 10. Gradient Disc

**Type:** Light JS
**Description:** A `@property`-animated conic gradient rim that rotates while playing — true CSS angle animation, not a keyframes hack. Feels like a turntable or a high-end audio interface dial.

**HTML:**
```html
<button class="pp-disc" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-disc-rim" aria-hidden="true"></span>
  <span class="pp-disc-core" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path class="pp-disc-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
</button>
```

**CSS:**
```css
@property --pp-disc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.pp-disc {
  position: relative;
  width: 64px;
  height: 64px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.pp-disc:focus-visible {
  outline: 3px solid rgba(192, 132, 252, 0.5);
  outline-offset: 3px;
}
.pp-disc-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from var(--pp-disc-angle, 0deg),
    #c084fc,
    #f472b6,
    #fbbf24,
    #34d399,
    #c084fc
  );
  filter: blur(0px);
  transition: filter 0.2s;
}
.pp-disc[aria-pressed="true"] .pp-disc-rim {
  animation: ppDiscSpin 4s linear infinite;
  filter: blur(0.5px);
}
@keyframes ppDiscSpin {
  to {
    --pp-disc-angle: 360deg;
  }
}
.pp-disc-core {
  position: absolute;
  inset: 4px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, #2a2a36 0%, #15151d 100%);
  border-radius: 50%;
  color: #f0eeff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pp-disc:hover .pp-disc-core {
  color: #c4b5fd;
}
.pp-disc-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-disc[aria-pressed="true"] .pp-disc-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-disc,
  .pp-disc * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 11. Voice Memo

**Type:** Light JS
**Description:** Record-style red button with a tiny live waveform indicator. The waveform animates while playing back; freezes when paused. Specifically tuned for voice notes, podcasts, and dictation UIs.

**HTML:**
```html
<button class="pp-mem" type="button" aria-pressed="false" aria-label="Play voice memo" data-pp>
  <span class="pp-mem-dot" aria-hidden="true"></span>
  <span class="pp-mem-wave" aria-hidden="true">
    <span></span><span></span><span></span><span></span><span></span> <span></span><span></span
    ><span></span><span></span>
  </span>
  <span class="pp-mem-time">0:14</span>
</button>
```

**CSS:**
```css
.pp-mem {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: #f0eeff;
  cursor: pointer;
  font-family: "JetBrains Mono", monospace;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.pp-mem:hover {
  border-color: rgba(239, 68, 68, 0.4);
  background: #1a1a25;
}
.pp-mem:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.4);
  outline-offset: 3px;
}
.pp-mem-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  transition: background 0.2s;
}
.pp-mem[aria-pressed="true"] .pp-mem-dot {
  animation: ppMemPing 1.4s ease-out infinite;
}
@keyframes ppMemPing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.pp-mem-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.pp-mem-wave > span {
  width: 2px;
  height: 30%;
  background: #94a3b8;
  border-radius: 1px;
  transform-origin: center;
}
.pp-mem-wave > span:nth-child(1) {
  height: 50%;
}
.pp-mem-wave > span:nth-child(2) {
  height: 80%;
}
.pp-mem-wave > span:nth-child(3) {
  height: 65%;
}
.pp-mem-wave > span:nth-child(4) {
  height: 95%;
}
.pp-mem-wave > span:nth-child(5) {
  height: 70%;
}
.pp-mem-wave > span:nth-child(6) {
  height: 90%;
}
.pp-mem-wave > span:nth-child(7) {
  height: 55%;
}
.pp-mem-wave > span:nth-child(8) {
  height: 75%;
}
.pp-mem-wave > span:nth-child(9) {
  height: 40%;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span {
  background: #ef4444;
  animation: ppMemWave 0.6s ease-in-out infinite alternate;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span:nth-child(2n) {
  animation-delay: 0.1s;
}
.pp-mem[aria-pressed="true"] .pp-mem-wave > span:nth-child(3n) {
  animation-delay: 0.2s;
}
@keyframes ppMemWave {
  from {
    transform: scaleY(0.5);
  }
  to {
    transform: scaleY(1.1);
  }
}
.pp-mem-time {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  .pp-mem,
  .pp-mem * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 12. Floating FAB

**Type:** Light JS
**Description:** Material-style floating action button with elevation that lifts on hover and presses down on click. The icon morphs between play and pause — a polished pattern for full-screen video and tutorial overlays.

**HTML:**
```html
<button class="pp-fab" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-fab-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-fab {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 0;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.18),
    0 12px 24px -4px rgba(99, 102, 241, 0.5);
  transition:
    box-shadow 0.25s,
    transform 0.15s,
    background 0.25s;
}
.pp-fab:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 22px 36px -6px rgba(99, 102, 241, 0.6);
}
.pp-fab:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 4px 8px -2px rgba(99, 102, 241, 0.45);
}
.pp-fab:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
}
.pp-fab[aria-pressed="true"] {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
}
.pp-fab-icon {
  transition: d 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-fab[aria-pressed="true"] .pp-fab-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 13. Progress Ring

**Type:** Light JS
**Description:** A circular play button wrapped by an SVG progress ring that fills as audio plays. Tick the percentage from your real <code>timeupdate</code> events — gold/cream palette suited to podcast and audiobook UIs.

**HTML:**
```html
<button class="pp-prog" type="button" aria-pressed="false" aria-label="Play" data-pp data-pp-prog>
  <svg class="pp-prog-ring" viewBox="0 0 56 56" aria-hidden="true">
    <circle cx="28" cy="28" r="24" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="3" />
    <circle
      class="pp-prog-fill"
      cx="28"
      cy="28"
      r="24"
      fill="none"
      stroke="#fbbf24"
      stroke-width="3"
      stroke-linecap="round"
      pathLength="100"
      stroke-dasharray="100"
      stroke-dashoffset="100"
      transform="rotate(-90 28 28)"
    />
  </svg>
  <svg viewBox="0 0 24 24" width="18" height="18" class="pp-prog-icon-svg" aria-hidden="true">
    <path class="pp-prog-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-prog {
  position: relative;
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: radial-gradient(circle at 30% 25%, #2a2519 0%, #15120c 100%);
  border-radius: 50%;
  color: #fbbf24;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 6px 18px -4px rgba(251, 191, 36, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-prog:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px -4px rgba(251, 191, 36, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pp-prog:focus-visible {
  outline: 3px solid rgba(251, 191, 36, 0.5);
  outline-offset: 3px;
}
.pp-prog-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pp-prog-fill {
  transition: stroke-dashoffset 0.25s linear;
}
.pp-prog-icon-svg {
  position: relative;
  z-index: 1;
}
.pp-prog-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-prog[aria-pressed="true"] .pp-prog-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ── Drop-in JS for real progress ──
const btn  = document.querySelector('.pp-prog');
const fill = btn.querySelector('.pp-prog-fill');
const audio = document.querySelector('audio');

audio.addEventListener('timeupdate', () => {
  const pct = (audio.currentTime / audio.duration) * 100 || 0;
  fill.style.strokeDashoffset = String(100 - pct);
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 14. Magnetic Hover

**Type:** Light JS
**Description:** A play button whose icon subtly drifts toward the cursor on hover — a small touch of physicality that signals an interactive surface. Click to play; the icon morphs and the magnet effect releases.

**HTML:**
```html
<button class="pp-mag" type="button" aria-pressed="false" aria-label="Play" data-pp data-pp-mag>
  <span class="pp-mag-track" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
      <path class="pp-mag-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
    </svg>
  </span>
</button>
```

**CSS:**
```css
.pp-mag {
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  border-radius: 18px;
  color: #bfdbfe;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 22px -6px rgba(29, 78, 216, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    box-shadow 0.25s,
    color 0.2s;
}
.pp-mag:hover {
  color: #ffffff;
}
.pp-mag:focus-visible {
  outline: 3px solid rgba(29, 78, 216, 0.5);
  outline-offset: 3px;
}
.pp-mag-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-mag-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-mag[aria-pressed="true"] .pp-mag-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
.pp-mag[aria-pressed="true"] .pp-mag-track {
  transform: translate(0, 0) !important;
}

/* ── Drop-in JS for the magnetic effect ──
document.querySelectorAll('[data-pp-mag]').forEach(btn => {
  const track = btn.querySelector('.pp-mag-track');
  btn.addEventListener('pointermove', e => {
    const r = btn.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width  - 0.5) * 12;
    const y = ((e.clientY - r.top)  / r.height - 0.5) * 12;
    track.style.transform = `translate(${x}px, ${y}px)`;
  });
  btn.addEventListener('pointerleave', () => {
    track.style.transform = 'translate(0, 0)';
  });
});
*/
```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 15. Liquid Drop

**Type:** Light JS
**Description:** Organic blob shape that morphs its border-radius on play — like a droplet of mercury reshaping itself. Mint-fresh palette for wellness and meditation apps.

**HTML:**
```html
<button class="pp-drop" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
    <path class="pp-drop-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-drop {
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #34d399, #10b981);
  border-radius: 50% 40% 50% 60% / 50% 50% 50% 50%;
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow:
    0 10px 24px -4px rgba(16, 185, 129, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    border-radius 0.35s cubic-bezier(0.5, 0, 0.3, 1.2),
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-drop:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -4px rgba(16, 185, 129, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.pp-drop:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.45);
  outline-offset: 3px;
}
.pp-drop[aria-pressed="true"] {
  animation: ppDropMorph 4s ease-in-out infinite;
}
@keyframes ppDropMorph {
  0%,
  100% {
    border-radius: 50% 40% 50% 60% / 50% 50% 50% 50%;
  }
  25% {
    border-radius: 60% 50% 40% 50% / 40% 60% 50% 50%;
  }
  50% {
    border-radius: 40% 50% 60% 40% / 50% 40% 60% 50%;
  }
  75% {
    border-radius: 50% 60% 40% 50% / 60% 50% 40% 60%;
  }
}
.pp-drop-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-drop[aria-pressed="true"] .pp-drop-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-drop,
  .pp-drop * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 16. Ripple on Click

**Type:** Light JS
**Description:** Material-style ink ripple that emanates from the click point on every press. Click feedback that reads as tactile instantly — a subtle but premium detail.

**HTML:**
```html
<button
  class="pp-ripple"
  type="button"
  aria-pressed="false"
  aria-label="Play"
  data-pp
  data-pp-ripple
>
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
    <path class="pp-ripple-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-ripple {
  position: relative;
  width: 56px;
  height: 56px;
  border: 0;
  padding: 0;
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 16px -4px rgba(139, 92, 246, 0.55);
  transition:
    transform 0.15s,
    box-shadow 0.25s;
}
.pp-ripple:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -4px rgba(139, 92, 246, 0.7);
}
.pp-ripple:focus-visible {
  outline: 3px solid rgba(139, 92, 246, 0.5);
  outline-offset: 3px;
}
.pp-ripple-wave {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ppRippleOut 0.6s ease-out forwards;
}
@keyframes ppRippleOut {
  to {
    width: 140px;
    height: 140px;
    opacity: 0;
  }
}
.pp-ripple-icon {
  position: relative;
  z-index: 1;
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-ripple[aria-pressed="true"] .pp-ripple-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

/* ── Drop-in JS for the ripple ──
document.querySelectorAll('[data-pp-ripple]').forEach(btn => {
  btn.addEventListener('pointerdown', e => {
    const r = btn.getBoundingClientRect();
    const wave = document.createElement('span');
    wave.className = 'pp-ripple-wave';
    wave.style.left = (e.clientX - r.left) + 'px';
    wave.style.top  = (e.clientY - r.top)  + 'px';
    btn.appendChild(wave);
    wave.addEventListener('animationend', () => wave.remove());
  });
});
*/

@media (prefers-reduced-motion: reduce) {
  .pp-ripple,
  .pp-ripple * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 17. Cassette Tape

**Type:** Light JS
**Description:** Skeumorphic mini-cassette with two reels that rotate while playing and freeze instantly on pause. Warm tactile detail for retro music players, lo-fi radio apps, and nostalgic brand moments.

**HTML:**
```html
<button class="pp-tape" type="button" aria-pressed="false" aria-label="Play" data-pp>
  <span class="pp-tape-body" aria-hidden="true">
    <span class="pp-tape-reel pp-tape-reel-l">
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
    </span>
    <span class="pp-tape-reel pp-tape-reel-r">
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
      <span class="pp-tape-spoke"></span>
    </span>
    <span class="pp-tape-label">SIDE A</span>
  </span>
</button>
```

**CSS:**
```css
.pp-tape {
  width: 110px;
  height: 70px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.pp-tape:focus-visible {
  outline: 3px solid rgba(180, 83, 9, 0.5);
  outline-offset: 3px;
}
.pp-tape-body {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #92400e 0%, #78350f 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35),
    0 8px 20px -6px rgba(0, 0, 0, 0.55);
}
.pp-tape-reel {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, #1f1f1f 28%, #444 30%, #444 60%, #1f1f1f 62%);
  border: 1.5px solid #1a1a1a;
  display: grid;
  place-items: center;
}
.pp-tape-reel-l {
  left: 12px;
}
.pp-tape-reel-r {
  right: 12px;
}
.pp-tape-spoke {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #888;
  border-radius: 1px;
}
.pp-tape-spoke:nth-child(2) {
  transform: rotate(60deg);
}
.pp-tape-spoke:nth-child(3) {
  transform: rotate(-60deg);
}
.pp-tape[aria-pressed="true"] .pp-tape-reel {
  animation: ppTapeSpin 1.6s linear infinite;
}
@keyframes ppTapeSpin {
  to {
    transform: rotate(360deg);
  }
}
.pp-tape-label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 700;
  color: #fed7aa;
  letter-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 8px;
  border-radius: 2px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pp-tape,
  .pp-tape * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

### 18. Live Badge

**Type:** Light JS
**Description:** Live-broadcast pill with a breathing background and a tiny presence dot. Click to join — the dot starts pinging, the gradient shifts to "on-air" warm red. Perfect for live podcasts, watch-parties, and Twitch-style streams.

**HTML:**
```html
<button
  class="pp-live"
  type="button"
  aria-pressed="false"
  aria-label="Tune in to live broadcast"
  data-pp
>
  <span class="pp-live-dot" aria-hidden="true"></span>
  <span class="pp-live-text">
    <span class="pp-live-state">LIVE</span>
    <span class="pp-live-meta">2.4k listening</span>
  </span>
  <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true" class="pp-live-icon-svg">
    <path class="pp-live-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
  </svg>
</button>
```

**CSS:**
```css
.pp-live {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: linear-gradient(135deg, #1f1313 0%, #2a1414 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px;
  color: #fecaca;
  cursor: pointer;
  font-family: system-ui, sans-serif;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.15s;
}
.pp-live:hover {
  border-color: rgba(239, 68, 68, 0.6);
  transform: translateY(-1px);
}
.pp-live:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.4);
  outline-offset: 3px;
}
.pp-live[aria-pressed="true"] {
  background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
  color: white;
  border-color: #ef4444;
}
.pp-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
}
.pp-live[aria-pressed="true"] .pp-live-dot {
  background: #ef4444;
  animation: ppLivePing 1.4s ease-out infinite;
}
@keyframes ppLivePing {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
}
.pp-live-text {
  display: grid;
  line-height: 1.1;
}
.pp-live-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.pp-live-meta {
  font-size: 9.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  content: "ON AIR";
}
.pp-live[aria-pressed="true"] .pp-live-state {
  font-size: 0;
}
.pp-live[aria-pressed="true"] .pp-live-state::before {
  font-size: 11px;
  letter-spacing: 0.18em;
}
.pp-live-icon {
  transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-live[aria-pressed="true"] .pp-live-icon {
  d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}

@media (prefers-reduced-motion: reduce) {
  .pp-live,
  .pp-live * {
    animation: none !important;
  }
}

```

**JS:**
```js
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var playing = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!playing));
    btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
  });
});
```

---
## 21 CSS Pricing Sections

URL: https://codefronts.com/layouts/css-pricing-sections/
Description: 21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.
Demo count: 21

### 01. Animated Border Cards

**Type:** Pure CSS
**Description:** Three pricing cards with a conic-gradient border that rotates continuously using <code>@property</code> animatable angle. Slate base, violet/cyan highlight on the recommended tier — the modern AI-product launch treatment.

**HTML:**
```html
<section class="ps-grb" aria-label="Pricing">
  <header class="ps-grb-head">
    <span class="ps-grb-eye">Plans</span>
    <h2>Built for builders. Priced for shipping.</h2>
  </header>
  <div class="ps-grb-grid">
    <article class="ps-grb-card">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <h3>Starter</h3>
        <div class="ps-grb-price"><em>$</em>14<span>/mo</span></div>
        <ul>
          <li>3 projects</li>
          <li>10 GB storage</li>
          <li>Community support</li>
        </ul>
        <a class="ps-grb-cta" href="#starter">Choose Starter</a>
      </div>
    </article>
    <article class="ps-grb-card ps-grb-pri">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <span class="ps-grb-pill">Recommended</span>
        <h3>Builder</h3>
        <div class="ps-grb-price"><em>$</em>32<span>/mo</span></div>
        <ul>
          <li>Unlimited projects</li>
          <li>100 GB storage</li>
          <li>Priority support</li>
          <li>API + webhooks</li>
        </ul>
        <a class="ps-grb-cta ps-grb-cta-pri" href="#builder">Choose Builder</a>
      </div>
    </article>
    <article class="ps-grb-card">
      <span class="ps-grb-edge" aria-hidden="true"></span>
      <div class="ps-grb-body">
        <h3>Scale</h3>
        <div class="ps-grb-price"><em>$</em>89<span>/mo</span></div>
        <ul>
          <li>Everything in Builder</li>
          <li>SSO + audit logs</li>
          <li>SLA + CSM</li>
        </ul>
        <a class="ps-grb-cta" href="#scale">Talk to sales</a>
      </div>
    </article>
  </div>
</section>
```

**CSS:**
```css
@property --ps-grb-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ps-grb {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #0a0d1a;
  color: #e6e7f0;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-grb-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-grb-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #a5b4fc; padding: 5px 12px;
  background: rgba(165,180,252,0.1);
  border: 1px solid rgba(165,180,252,0.25);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-grb-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
.ps-grb-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.ps-grb-card {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  background: rgba(255,255,255,0.04);
}
.ps-grb-edge {
  position: absolute; inset: 0;
  border-radius: 16px; padding: 1.5px;
  background: conic-gradient(from var(--ps-grb-ang), #1e293b, #475569, #1e293b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ps-grb-spin 6s linear infinite;
}
.ps-grb-pri .ps-grb-edge {
  background: conic-gradient(from var(--ps-grb-ang), #6366f1, #22d3ee, #a855f7, #6366f1);
}
@keyframes ps-grb-spin { to { --ps-grb-ang: 360deg; } }
.ps-grb-body {
  position: relative;
  background: #0f1224;
  border-radius: 14.5px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  height: 100%;
}
.ps-grb-pill {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(135deg, #6366f1, #22d3ee); color: #0a0d1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px; margin-bottom: 10px;
}
.ps-grb-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #c7d2fe;
}
.ps-grb-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-grb-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-grb-price span { font-size: 0.34em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-grb-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #b8bfd8;
}
.ps-grb-card ul li::before { content: '✓'; color: #a5b4fc; display: inline-block; width: 20px; font-weight: 700; }
.ps-grb-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 9px;
  background: rgba(165,180,252,0.08); color: #c7d2fe;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(165,180,252,0.25);
  transition: background 0.18s, color 0.18s;
}
.ps-grb-cta-pri { background: linear-gradient(135deg, #6366f1, #22d3ee); color: #0a0d1a; border-color: transparent; }
.ps-grb-cta:hover { background: rgba(165,180,252,0.18); color: #fff; }
.ps-grb-cta-pri:hover { filter: brightness(1.1); }
.ps-grb-cta:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-grb-grid { grid-template-columns: 1fr; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-grb-edge { animation: none; background: linear-gradient(135deg, #475569, #1e293b); }
  .ps-grb-pri .ps-grb-edge { background: linear-gradient(135deg, #6366f1, #22d3ee); }
}
```

### 02. Editorial Two Column

**Type:** Pure CSS
**Description:** A dense editorial pricing layout — left column carries the value-prop copy, right column stacks two compact tier rows like a printed price list. Neutral charcoal on cream, the Stripe / Basecamp documentation aesthetic.

**HTML:**
```html
<section class="ps-edt" aria-label="Pricing">
  <div class="ps-edt-grid">
    <div class="ps-edt-copy">
      <span class="ps-edt-eye">— Pricing</span>
      <h2>Two plans. <em>Pick one,</em> change later.</h2>
      <p>
        We don’t play games with feature gating, seat limits, or upsell pop-ups. Pick a plan, get
        the whole product, and move on with your work.
      </p>
      <p class="ps-edt-fine">
        All plans include unlimited projects, every integration, and email support. Cancel any time,
        money back inside 30 days.
      </p>
      <a class="ps-edt-link" href="#compare">See the full feature list →</a>
    </div>
    <div class="ps-edt-tiers">
      <article class="ps-edt-row">
        <header>
          <h3>Solo</h3>
          <span class="ps-edt-pri">$15<em>/ month</em></span>
        </header>
        <p>For freelancers and indie builders shipping client work.</p>
        <ul>
          <li>Single workspace</li>
          <li>10 GB storage</li>
          <li>Email support</li>
        </ul>
        <a class="ps-edt-cta" href="#solo">Choose Solo →</a>
      </article>
      <article class="ps-edt-row ps-edt-rec">
        <header>
          <h3>Studio <span class="ps-edt-tag">Recommended</span></h3>
          <span class="ps-edt-pri">$48<em>/ month</em></span>
        </header>
        <p>For small teams who run multiple client engagements.</p>
        <ul>
          <li>Unlimited workspaces</li>
          <li>250 GB storage</li>
          <li>Priority support &amp; onboarding</li>
          <li>Client billing &amp; white-label</li>
        </ul>
        <a class="ps-edt-cta ps-edt-cta-pri" href="#studio">Choose Studio →</a>
      </article>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-edt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #f5f1ea;
  color: #1c1c1e;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-edt-grid {
  max-width: 1040px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  align-items: start;
}
.ps-edt-copy { padding-top: 6px; }
.ps-edt-eye {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.1em; color: #6b6b6e;
  margin-bottom: 14px;
}
.ps-edt-copy h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.1;
  margin: 0 0 18px;
}
.ps-edt-copy h2 em { font-style: italic; color: #6b6b6e; }
.ps-edt-copy p { font-size: 15px; line-height: 1.65; color: #3d3d40; margin: 0 0 12px; max-width: 380px; }
.ps-edt-fine { font-size: 13px !important; color: #6b6b6e !important; padding-top: 12px; border-top: 1px solid #d8d2c5; }
.ps-edt-link {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600;
  color: #1c1c1e; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.ps-edt-link:hover { color: #6b6b6e; }
.ps-edt-tiers { display: flex; flex-direction: column; gap: 14px; }
.ps-edt-row {
  background: #fff; border: 1px solid #d8d2c5;
  border-radius: 6px; padding: 22px 22px 18px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ps-edt-row:hover { border-color: #1c1c1e; box-shadow: 4px 4px 0 0 #1c1c1e; }
.ps-edt-rec { border-color: #1c1c1e; box-shadow: 4px 4px 0 0 #1c1c1e; }
.ps-edt-row header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed #d8d2c5;
}
.ps-edt-row h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.ps-edt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #1c1c1e; color: #f5f1ea;
  padding: 3px 8px; border-radius: 2px;
}
.ps-edt-pri { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ps-edt-pri em { font-size: 11px; font-style: normal; color: #6b6b6e; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.ps-edt-row p { font-size: 13.5px; color: #3d3d40; margin: 0 0 10px; line-height: 1.5; }
.ps-edt-row ul {
  list-style: none; padding: 0; margin: 0 0 16px;
  font-size: 13px; line-height: 1.85; color: #3d3d40;
}
.ps-edt-row ul li::before { content: '·'; color: #1c1c1e; font-weight: 800; display: inline-block; width: 18px; font-size: 18px; line-height: 0.5; vertical-align: middle; }
.ps-edt-cta {
  display: inline-block; padding: 9px 16px; border-radius: 4px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1.5px solid #1c1c1e; color: #1c1c1e;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-edt-cta-pri { background: #1c1c1e; color: #f5f1ea; }
.ps-edt-cta:hover { background: #1c1c1e; color: #f5f1ea; }
.ps-edt-cta-pri:hover { background: #f5f1ea; color: #1c1c1e; }
.ps-edt-cta:focus-visible { outline: 2px solid #1c1c1e; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-edt-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-edt-row { transition: none; }
  .ps-edt-row:hover { transform: none; }
}
```

### 03. 3D Tilt Cards

**Type:** Pure CSS
**Description:** Three pricing cards in 3D perspective, tilting back when not hovered and snapping forward on hover. Purple → cyan gradient surface, layered shadow stack giving real depth. <code>perspective()</code> + <code>rotateY()</code>, no JS.

**HTML:**
```html
<section class="ps-tlt" aria-label="Pricing">
  <header class="ps-tlt-head">
    <h2>Pricing with depth.</h2>
    <p>Hover to bring a plan forward.</p>
  </header>
  <div class="ps-tlt-stage">
    <article class="ps-tlt-card ps-tlt-l">
      <h3>Lite</h3>
      <div class="ps-tlt-price"><em>$</em>9<span>/mo</span></div>
      <ul>
        <li>Personal projects</li>
        <li>5 GB storage</li>
        <li>Community support</li>
      </ul>
      <a class="ps-tlt-cta" href="#lite">Pick Lite</a>
    </article>
    <article class="ps-tlt-card ps-tlt-c">
      <span class="ps-tlt-pill">Best fit</span>
      <h3>Plus</h3>
      <div class="ps-tlt-price"><em>$</em>29<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>50 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-tlt-cta ps-tlt-cta-pri" href="#plus">Pick Plus</a>
    </article>
    <article class="ps-tlt-card ps-tlt-r">
      <h3>Power</h3>
      <div class="ps-tlt-price"><em>$</em>79<span>/mo</span></div>
      <ul>
        <li>Everything in Plus</li>
        <li>SSO + audit logs</li>
        <li>Dedicated CSM</li>
      </ul>
      <a class="ps-tlt-cta" href="#power">Pick Power</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-tlt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(60% 60% at 50% 100%, rgba(34,211,238,0.14), transparent 60%),
    #0d0a1a;
  color: #e9e6ff;
  font-family: 'Inter', system-ui, sans-serif;
  perspective: 1400px;
}
.ps-tlt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-tlt-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-tlt-head p { color: #a8a0c8; margin: 0; font-size: 14px; }
.ps-tlt-stage {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px; max-width: 980px; margin: 0 auto;
  transform-style: preserve-3d;
  align-items: center;
}
.ps-tlt-card {
  position: relative;
  background: linear-gradient(160deg, rgba(124,58,237,0.18), rgba(34,211,238,0.10));
  border: 1px solid rgba(167,139,250,0.25);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s;
  box-shadow: 0 10px 30px rgba(13,10,26,0.5);
}
.ps-tlt-l { transform: rotateY(14deg) translateZ(-30px); }
.ps-tlt-c { transform: translateZ(0); z-index: 2; }
.ps-tlt-r { transform: rotateY(-14deg) translateZ(-30px); }
.ps-tlt-card:hover {
  transform: rotateY(0) translateZ(20px) translateY(-4px);
  box-shadow: 0 24px 60px rgba(124,58,237,0.4);
  z-index: 3;
}
.ps-tlt-c { background: linear-gradient(160deg, rgba(124,58,237,0.32), rgba(34,211,238,0.18)); border-color: rgba(34,211,238,0.45); }
.ps-tlt-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0d0a1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-tlt-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #c4b5fd;
}
.ps-tlt-c h3 { color: #67e8f9; }
.ps-tlt-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-tlt-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-tlt-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-tlt-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #c4bde0;
}
.ps-tlt-card ul li::before { content: '◆'; color: #a78bfa; display: inline-block; width: 20px; font-size: 9px; }
.ps-tlt-c ul li::before { color: #22d3ee; }
.ps-tlt-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 9px;
  background: rgba(167,139,250,0.12); color: #c4b5fd;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(167,139,250,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-tlt-cta-pri { background: linear-gradient(135deg, #a78bfa, #22d3ee); color: #0d0a1a; border-color: transparent; }
.ps-tlt-cta:hover { background: rgba(167,139,250,0.28); color: #fff; }
.ps-tlt-cta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-tlt-stage { grid-template-columns: 1fr; max-width: 380px; perspective: none; }
  .ps-tlt-l, .ps-tlt-c, .ps-tlt-r { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-tlt-card { transition: none; }
  .ps-tlt-l, .ps-tlt-c, .ps-tlt-r { transform: none; }
  .ps-tlt-card:hover { transform: none; }
}
```

### 04. Synthwave Neon

**Type:** Pure CSS
**Description:** Retro 80s synthwave pricing — magenta and cyan neon over a perspective grid horizon, chrome heading reflection, sun gradient behind the cards. The aesthetic Vaporwave / Stranger Things landings ride on.

**HTML:**
```html
<section class="ps-syn" aria-label="Pricing">
  <div class="ps-syn-grid-bg" aria-hidden="true"></div>
  <div class="ps-syn-sun" aria-hidden="true"></div>
  <header class="ps-syn-head">
    <span class="ps-syn-eye">★ Pricing ★</span>
    <h2>Choose your <em>signal.</em></h2>
  </header>
  <div class="ps-syn-grid">
    <article class="ps-syn-card">
      <h3>Wave</h3>
      <div class="ps-syn-price">$15</div>
      <ul>
        <li>Solo channel</li>
        <li>5 GB</li>
        <li>Email reach</li>
      </ul>
      <a class="ps-syn-cta" href="#wave">Tune in</a>
    </article>
    <article class="ps-syn-card ps-syn-pri">
      <span class="ps-syn-tag">★ FAVORITE ★</span>
      <h3>Pulse</h3>
      <div class="ps-syn-price">$39</div>
      <ul>
        <li>Multi-channel</li>
        <li>50 GB</li>
        <li>Live chat</li>
        <li>Custom domain</li>
      </ul>
      <a class="ps-syn-cta ps-syn-cta-pri" href="#pulse">Tune in</a>
    </article>
    <article class="ps-syn-card">
      <h3>Storm</h3>
      <div class="ps-syn-price">$99</div>
      <ul>
        <li>Unlimited</li>
        <li>500 GB</li>
        <li>SSO + SLA</li>
      </ul>
      <a class="ps-syn-cta" href="#storm">Tune in</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-syn {
  position: relative; overflow: hidden;
  contain: layout paint;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: linear-gradient(180deg, #0c0420 0%, #1a052e 60%, #2a0843 100%);
  color: #f0e6ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-syn-grid-bg {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 220%; height: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 24px, rgba(236,72,153,0.4) 24px, rgba(236,72,153,0.4) 25px),
    repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(34,211,238,0.4) 24px, rgba(34,211,238,0.4) 25px);
  transform: translateX(-50%) perspective(700px) rotateX(60deg);
  transform-origin: center top;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
  z-index: 0;
}
.ps-syn-sun {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 16px, #0c0420 16px, #0c0420 19px),
    linear-gradient(180deg, #fde68a 0%, #f59e0b 30%, #ec4899 60%, #a855f7 90%);
  filter: blur(0.4px);
  opacity: 0.55;
  z-index: 0;
}
.ps-syn-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-syn-eye {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.4em;
  color: #22d3ee; margin-bottom: 14px;
  text-shadow: 0 0 8px #22d3ee;
}
.ps-syn-head h2 {
  font-size: clamp(28px, 5vw, 48px); font-weight: 800;
  letter-spacing: -0.02em; margin: 0;
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #f9a8d4 50%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(236,72,153,0.5);
}
.ps-syn-head h2 em { font-style: italic; }
.ps-syn-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 940px; margin: 0 auto;
  align-items: center;
}
.ps-syn-card {
  position: relative;
  background: rgba(12,4,32,0.7);
  border: 1.5px solid #ec4899;
  border-radius: 4px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(236,72,153,0.4) inset, 0 0 24px rgba(236,72,153,0.3);
  backdrop-filter: blur(6px);
}
.ps-syn-pri { border-color: #22d3ee; box-shadow: 0 0 0 1px rgba(34,211,238,0.5) inset, 0 0 30px rgba(34,211,238,0.5); }
.ps-syn-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #0c0420; color: #22d3ee;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  padding: 3px 12px;
  border: 1px solid #22d3ee;
  text-shadow: 0 0 6px #22d3ee;
}
.ps-syn-card h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px;
  color: #ec4899;
  text-shadow: 0 0 8px rgba(236,72,153,0.7);
}
.ps-syn-pri h3 { color: #22d3ee; text-shadow: 0 0 8px rgba(34,211,238,0.7); }
.ps-syn-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px; font-weight: 800; letter-spacing: -0.02em;
  margin-bottom: 18px; color: #fff;
  text-shadow: 0 0 12px rgba(236,72,153,0.6);
}
.ps-syn-pri .ps-syn-price { text-shadow: 0 0 12px rgba(34,211,238,0.6); }
.ps-syn-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #d6c8ee;
  font-family: 'JetBrains Mono', monospace;
}
.ps-syn-card ul li::before { content: '▸ '; color: #ec4899; }
.ps-syn-pri ul li::before { color: #22d3ee; }
.ps-syn-cta {
  display: block; text-align: center;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  background: transparent; color: #ec4899;
  border: 1.5px solid #ec4899;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.ps-syn-cta-pri { color: #22d3ee; border-color: #22d3ee; }
.ps-syn-cta:hover { background: #ec4899; color: #0c0420; box-shadow: 0 0 16px #ec4899; }
.ps-syn-cta-pri:hover { background: #22d3ee; color: #0c0420; box-shadow: 0 0 16px #22d3ee; }
.ps-syn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-syn-grid { grid-template-columns: 1fr; max-width: 360px; }
  .ps-syn-sun { width: 240px; height: 240px; top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-syn-cta { transition: none; }
}
```

### 05. Pay What You Want

**Type:** Pure CSS
**Description:** A pay-what-you-want layout with five preset chips ($5 / $10 / $25 / $50 / Custom) — selecting one updates the active state and the highlighted CTA via radio + <code>:has()</code>. Mint palette, the indie-product / crowdfunding pattern.

**HTML:**
```html
<section class="ps-pwy" aria-label="Pay what you want">
  <div class="ps-pwy-card">
    <header class="ps-pwy-head">
      <span class="ps-pwy-eye">Pay what you want</span>
      <h2>Support the project — <em>name your price.</em></h2>
      <p>
        The full product is yours regardless of the amount. Pay more if it helps, pay less if it’s
        tight. We trust you.
      </p>
    </header>
    <fieldset class="ps-pwy-amounts">
      <legend class="ps-pwy-sr">Choose an amount</legend>
      <input type="radio" name="ps-pwy" id="ps-pwy-5" />
      <label for="ps-pwy-5"><strong>$5</strong><span>Coffee</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-10" checked />
      <label for="ps-pwy-10"><strong>$10</strong><span>Average</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-25" />
      <label for="ps-pwy-25"><strong>$25</strong><span>Generous</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-50" />
      <label for="ps-pwy-50"><strong>$50</strong><span>Sponsor</span></label>
      <input type="radio" name="ps-pwy" id="ps-pwy-x" />
      <label for="ps-pwy-x"><strong>Custom</strong><span>You decide</span></label>
    </fieldset>
    <ul class="ps-pwy-feats">
      <li>Lifetime access to the full product</li>
      <li>All future updates included</li>
      <li>Source files + commercial use rights</li>
    </ul>
    <a class="ps-pwy-cta" href="#pay">
      <span class="ps-pwy-cta-default">Pay $10 — get it now</span>
      <span class="ps-pwy-cta-5">Pay $5 — get it now</span>
      <span class="ps-pwy-cta-25">Pay $25 — get it now</span>
      <span class="ps-pwy-cta-50">Pay $50 — get it now</span>
      <span class="ps-pwy-cta-x">Enter custom amount →</span>
    </a>
    <p class="ps-pwy-foot">No questions asked refund inside 14 days. Powered by Stripe.</p>
  </div>
</section>
```

**CSS:**
```css
.ps-pwy {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(50% 50% at 50% 0%, rgba(45,212,191,0.16), transparent 60%),
    #06181a;
  color: #d4f5ee;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ps-pwy-card {
  width: 100%; max-width: 560px;
  background: linear-gradient(180deg, #0d2326, #06181a);
  border: 1px solid rgba(45,212,191,0.3);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 38px);
  box-shadow: 0 24px 60px rgba(45,212,191,0.12);
}
.ps-pwy-head { text-align: center; margin-bottom: 24px; }
.ps-pwy-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #5eead4; padding: 4px 12px;
  background: rgba(94,234,212,0.12);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-pwy-head h2 {
  font-size: clamp(22px, 3.6vw, 30px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px; color: #fff;
}
.ps-pwy-head h2 em { color: #5eead4; font-style: italic; }
.ps-pwy-head p { color: #92b8b1; font-size: 14px; line-height: 1.6; margin: 0 auto; max-width: 420px; }
.ps-pwy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ps-pwy-amounts {
  border: 0; padding: 0; margin: 0 0 20px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ps-pwy-amounts input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-pwy-amounts label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 6px;
  background: rgba(94,234,212,0.06);
  border: 1.5px solid rgba(94,234,212,0.18);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  text-align: center;
  min-height: 64px;
}
.ps-pwy-amounts label strong {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff;
}
.ps-pwy-amounts label span {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #5eead4; margin-top: 2px;
}
.ps-pwy-amounts label:hover { border-color: rgba(94,234,212,0.5); background: rgba(94,234,212,0.1); }
.ps-pwy-amounts input:checked + label {
  background: linear-gradient(135deg, #2dd4bf, #5eead4);
  border-color: #5eead4;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,212,191,0.4);
}
.ps-pwy-amounts input:checked + label strong { color: #06181a; }
.ps-pwy-amounts input:checked + label span { color: rgba(6,24,26,0.7); }
.ps-pwy-amounts input:focus-visible + label { outline: 2px solid #5eead4; outline-offset: 3px; }
.ps-pwy-feats {
  list-style: none; padding: 0; margin: 0 0 20px;
  font-size: 13px; line-height: 1.95; color: #b8d6cf;
}
.ps-pwy-feats li::before { content: '✓'; color: #5eead4; display: inline-block; width: 22px; font-weight: 700; }
.ps-pwy-cta {
  display: block; position: relative;
  text-align: center;
  padding: 14px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #2dd4bf, #5eead4);
  color: #06181a; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(45,212,191,0.3);
  transition: transform 0.18s;
  margin-bottom: 12px;
}
.ps-pwy-cta:hover { transform: translateY(-1px); }
.ps-pwy-cta:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }
.ps-pwy-cta span { display: none; }
.ps-pwy-cta .ps-pwy-cta-default { display: block; }
.ps-pwy:has(#ps-pwy-5:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-25:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-50:checked) .ps-pwy-cta-default,
.ps-pwy:has(#ps-pwy-x:checked) .ps-pwy-cta-default { display: none; }
.ps-pwy:has(#ps-pwy-5:checked) .ps-pwy-cta-5 { display: block; }
.ps-pwy:has(#ps-pwy-25:checked) .ps-pwy-cta-25 { display: block; }
.ps-pwy:has(#ps-pwy-50:checked) .ps-pwy-cta-50 { display: block; }
.ps-pwy:has(#ps-pwy-x:checked) .ps-pwy-cta-x { display: block; }
.ps-pwy-foot { font-size: 11.5px; color: #6e8a85; text-align: center; margin: 0; }
@media (max-width: 540px) {
  .ps-pwy-amounts { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-pwy-amounts label, .ps-pwy-cta { transition: none; }
}
```

### 06. Currency Switcher

**Type:** Pure CSS
**Description:** A pure-CSS currency switcher (USD / EUR / GBP) using hidden radios + <code>:has()</code> to swap every visible price across all three tiers. Burgundy on cream — the wine-merchant / boutique-software aesthetic.

**HTML:**
```html
<section class="ps-cur" aria-label="Pricing">
  <header class="ps-cur-head">
    <h2>Pricing in your currency.</h2>
    <p>Pay where you live, with the rate fixed at billing time.</p>
    <fieldset class="ps-cur-tabs">
      <legend class="ps-cur-sr">Currency</legend>
      <input type="radio" name="ps-cur-c" id="ps-cur-usd" checked />
      <label for="ps-cur-usd">USD</label>
      <input type="radio" name="ps-cur-c" id="ps-cur-eur" />
      <label for="ps-cur-eur">EUR</label>
      <input type="radio" name="ps-cur-c" id="ps-cur-gbp" />
      <label for="ps-cur-gbp">GBP</label>
    </fieldset>
  </header>
  <div class="ps-cur-grid">
    <article class="ps-cur-card">
      <h3>Petit</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$12</span><span class="ps-cur-eur">€11</span
        ><span class="ps-cur-gbp">£10</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Solo cellar</li>
        <li>3 bottles tracked</li>
        <li>Email reminders</li>
      </ul>
      <a class="ps-cur-cta" href="#petit">Choose Petit</a>
    </article>
    <article class="ps-cur-card ps-cur-best">
      <span class="ps-cur-pill">Sommelier’s pick</span>
      <h3>Reserve</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$36</span><span class="ps-cur-eur">€33</span
        ><span class="ps-cur-gbp">£28</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Full cellar</li>
        <li>Unlimited bottles</li>
        <li>Tasting notes</li>
        <li>Pairing engine</li>
      </ul>
      <a class="ps-cur-cta ps-cur-cta-pri" href="#reserve">Choose Reserve</a>
    </article>
    <article class="ps-cur-card">
      <h3>Grand Cru</h3>
      <div class="ps-cur-price">
        <span class="ps-cur-usd">$96</span><span class="ps-cur-eur">€88</span
        ><span class="ps-cur-gbp">£76</span>
        <em>/month</em>
      </div>
      <ul>
        <li>Multi-cellar</li>
        <li>Insurance valuation</li>
        <li>White-glove setup</li>
      </ul>
      <a class="ps-cur-cta" href="#grand">Talk to us</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-cur {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #faf6ee;
  color: #2a0a14;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cur-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cur-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 4vw, 38px); font-weight: 700;
  letter-spacing: -0.015em; margin: 0 0 8px; color: #6b1224;
}
.ps-cur-head p { color: #8a4555; margin: 0 0 20px; font-size: 14px; }
.ps-cur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ps-cur-tabs {
  position: relative; display: inline-grid;
  grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1.5px solid #6b1224; border-radius: 999px;
  padding: 3px; background: #fff;
  margin: 0;
}
.ps-cur-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cur-tabs label {
  padding: 7px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  color: #8a4555; cursor: pointer; border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.ps-cur-tabs input:checked + label { background: #6b1224; color: #faf6ee; }
.ps-cur-tabs input:focus-visible + label { outline: 2px solid #6b1224; outline-offset: 3px; }
.ps-cur-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 1000px; margin: 0 auto;
  align-items: center;
}
.ps-cur-card {
  position: relative;
  background: #fff;
  border: 1px solid #e7d8c8;
  border-radius: 8px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-cur-best {
  background: #6b1224; color: #faf6ee;
  border: 0;
  transform: scale(1.04);
  box-shadow: 0 18px 44px rgba(107,18,36,0.3);
}
.ps-cur-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #faf6ee; color: #6b1224;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 11px;
  border: 1.5px solid #6b1224;
  border-radius: 999px;
}
.ps-cur-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px; font-weight: 700; margin: 0 0 12px;
  color: #6b1224; font-style: italic;
}
.ps-cur-best h3 { color: #faf6ee; }
.ps-cur-price {
  display: flex; align-items: baseline; gap: 4px;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px dashed #e7d8c8;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
}
.ps-cur-best .ps-cur-price { border-bottom-color: rgba(250,246,238,0.25); }
.ps-cur-price em { font-size: 13px; font-weight: 500; color: #8a4555; font-style: normal; margin-left: 6px; }
.ps-cur-best .ps-cur-price em { color: rgba(250,246,238,0.7); }
.ps-cur-price > span { display: none; }
.ps-cur:has(#ps-cur-usd:checked) .ps-cur-usd,
.ps-cur:has(#ps-cur-eur:checked) .ps-cur-eur,
.ps-cur:has(#ps-cur-gbp:checked) .ps-cur-gbp { display: inline; }
.ps-cur-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #4a2030;
}
.ps-cur-best ul { color: rgba(250,246,238,0.85); }
.ps-cur-card ul li::before { content: '◆'; color: #6b1224; display: inline-block; width: 20px; font-size: 9px; }
.ps-cur-best ul li::before { color: #faf6ee; }
.ps-cur-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 6px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1.5px solid currentColor; color: #6b1224;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-cur-best .ps-cur-cta { color: #faf6ee; }
.ps-cur-cta-pri { background: #faf6ee; color: #6b1224 !important; border-color: #faf6ee; }
.ps-cur-cta:hover { background: #6b1224; color: #faf6ee; border-color: #6b1224; }
.ps-cur-cta-pri:hover { background: transparent; color: #faf6ee !important; border-color: #faf6ee; }
.ps-cur-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-cur-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-cur-best { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cur-tabs label, .ps-cur-cta { transition: none; }
}
```

### 07. Social Proof Pricing

**Type:** Pure CSS
**Description:** A scrolling logo wall above the pricing tiers — social proof first, decision second. Slate background with lime accent on the recommended plan. Logos scroll in a seamless marquee using a duplicated track.

**HTML:**
```html
<section class="ps-spr" aria-label="Pricing">
  <div class="ps-spr-marquee" aria-label="Customers using this product">
    <div class="ps-spr-track">
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
      <span class="ps-spr-logo">◇ NORTHWIND</span>
      <span class="ps-spr-logo">▲ APEX.IO</span>
      <span class="ps-spr-logo">★ PULSE</span>
      <span class="ps-spr-logo">⬣ HEXLAB</span>
      <span class="ps-spr-logo">◯ ORBITA</span>
      <span class="ps-spr-logo">◤ FLINT</span>
      <span class="ps-spr-logo">⬢ MERIDIAN</span>
    </div>
  </div>
  <header class="ps-spr-head">
    <span class="ps-spr-rating" aria-label="Rated 4.9 out of 5">★★★★★ 4.9 from 12,400 teams</span>
    <h2>Pricing teams actually pay for.</h2>
  </header>
  <div class="ps-spr-grid">
    <article class="ps-spr-card">
      <h3>Free</h3>
      <div class="ps-spr-price"><em>$</em>0<span>forever</span></div>
      <ul>
        <li>1 project</li>
        <li>5 GB storage</li>
        <li>Community</li>
      </ul>
      <a class="ps-spr-cta" href="#free">Start free</a>
    </article>
    <article class="ps-spr-card ps-spr-best">
      <span class="ps-spr-tag">Most teams pick this</span>
      <h3>Team</h3>
      <div class="ps-spr-price"><em>$</em>32<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>Priority support</li>
        <li>SSO + roles</li>
      </ul>
      <a class="ps-spr-cta ps-spr-cta-pri" href="#team">Choose Team</a>
    </article>
    <article class="ps-spr-card">
      <h3>Enterprise</h3>
      <div class="ps-spr-price"><em>$</em>0<span>custom</span></div>
      <ul>
        <li>Everything in Team</li>
        <li>Dedicated CSM</li>
        <li>SLA 99.99%</li>
      </ul>
      <a class="ps-spr-cta" href="#ent">Talk to sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-spr {
  position: relative;
  overflow: hidden;
  contain: layout paint;
  padding: clamp(20px, 4vw, 36px) clamp(20px, 4vw, 40px) clamp(28px, 5vw, 48px);
  min-height: 480px;
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-spr-marquee {
  position: relative; overflow: hidden;
  contain: layout paint;
  border-block: 1px solid rgba(163,230,53,0.18);
  margin: 0 calc(-1 * clamp(20px, 4vw, 40px)) clamp(20px, 4vw, 32px);
  padding: 14px 0;
  background: rgba(15,23,42,0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ps-spr-track {
  display: flex; gap: 56px;
  white-space: nowrap;
  animation: ps-spr-roll 28s linear infinite;
  width: max-content;
}
@keyframes ps-spr-roll { to { transform: translateX(-50%); } }
.ps-spr-logo {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700; letter-spacing: 0.18em;
  color: #94a3b8; flex-shrink: 0;
}
.ps-spr-head { text-align: center; margin-bottom: clamp(20px, 4vw, 32px); }
.ps-spr-rating {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: #a3e635;
  margin-bottom: 10px;
}
.ps-spr-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0; color: #fff;
}
.ps-spr-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 940px; margin: 0 auto;
  align-items: center;
}
.ps-spr-card {
  position: relative;
  background: #1e293b;
  border: 1px solid rgba(163,230,53,0.12);
  border-radius: 12px;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column;
}
.ps-spr-best {
  background: linear-gradient(180deg, #1e293b, #243f1a);
  border-color: #a3e635;
  box-shadow: 0 0 0 1px #a3e635 inset, 0 14px 36px rgba(163,230,53,0.18);
}
.ps-spr-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: #a3e635; color: #0f172a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-spr-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #cbd5e1;
}
.ps-spr-best h3 { color: #d9f99d; }
.ps-spr-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-spr-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-spr-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-spr-card ul {
  list-style: none; padding: 0; margin: 0 0 18px; flex: 1;
  font-size: 13px; line-height: 1.95; color: #b8c1d1;
}
.ps-spr-card ul li::before { content: '✓'; color: #a3e635; display: inline-block; width: 20px; font-weight: 700; }
.ps-spr-cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  background: rgba(163,230,53,0.1); color: #a3e635;
  border: 1px solid rgba(163,230,53,0.28);
  transition: background 0.18s, color 0.18s;
}
.ps-spr-cta-pri { background: #a3e635; color: #0f172a; border-color: #a3e635; }
.ps-spr-cta:hover { background: #a3e635; color: #0f172a; }
.ps-spr-cta-pri:hover { background: #d9f99d; }
.ps-spr-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-spr-grid { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-spr-track { animation: none; }
}
```

### 08. Feature Accordion Tiers

**Type:** Pure CSS
**Description:** Three tier cards with native <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> dropdowns that reveal the full feature list on click — keeps the page short and lets curious buyers dig in. Deep purple palette, no JS, fully keyboard-accessible.

**HTML:**
```html
<section class="ps-acc" aria-label="Pricing">
  <header class="ps-acc-head">
    <h2>Pricing without the wall of checkmarks.</h2>
    <p>Open any tier to read the full feature list. Tap to collapse.</p>
  </header>
  <div class="ps-acc-grid">
    <article class="ps-acc-card">
      <h3>Indie</h3>
      <div class="ps-acc-price"><em>$</em>11<span>/mo</span></div>
      <p class="ps-acc-sub">For solo developers shipping side projects.</p>
      <details class="ps-acc-det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>1 project workspace</li>
          <li>10 GB storage</li>
          <li>Community forum support</li>
          <li>Public deploys with auto-SSL</li>
          <li>50K monthly visitor cap</li>
          <li>1-year version history</li>
        </ul>
      </details>
      <a class="ps-acc-cta" href="#indie">Choose Indie →</a>
    </article>
    <article class="ps-acc-card ps-acc-pri">
      <span class="ps-acc-pill">Recommended</span>
      <h3>Studio</h3>
      <div class="ps-acc-price"><em>$</em>34<span>/mo</span></div>
      <p class="ps-acc-sub">For small teams shipping to real users.</p>
      <details class="ps-acc-det" open>
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Unlimited project workspaces</li>
          <li>100 GB storage</li>
          <li>Priority email + chat support</li>
          <li>Custom domains with auto-SSL</li>
          <li>500K monthly visitor cap</li>
          <li>3-year version history</li>
          <li>Team roles &amp; permissions</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
      </details>
      <a class="ps-acc-cta ps-acc-cta-pri" href="#studio">Choose Studio →</a>
    </article>
    <article class="ps-acc-card">
      <h3>Org</h3>
      <div class="ps-acc-price"><em>$</em>96<span>/mo</span></div>
      <p class="ps-acc-sub">For organisations with compliance requirements.</p>
      <details class="ps-acc-det">
        <summary>See all features <span aria-hidden="true">⌄</span></summary>
        <ul>
          <li>Everything in Studio</li>
          <li>SAML SSO &amp; SCIM provisioning</li>
          <li>Audit logs (90-day retention)</li>
          <li>Unlimited monthly visitors</li>
          <li>Forever version history</li>
          <li>SOC 2 + DPA on file</li>
          <li>SLA 99.99% with credits</li>
          <li>Dedicated CSM &amp; quarterly review</li>
        </ul>
      </details>
      <a class="ps-acc-cta" href="#org">Talk to sales →</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-acc {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(168,85,247,0.16), transparent 60%),
    #15071f;
  color: #f3e8ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-acc-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-acc-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-acc-head p { color: #c4a8d6; margin: 0; font-size: 14px; }
.ps-acc-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
  align-items: start;
}
.ps-acc-card {
  position: relative;
  background: #281033;
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
}
.ps-acc-pri {
  background: linear-gradient(180deg, #3b1554, #281033);
  border-color: #a855f7;
  box-shadow: 0 0 0 1px #a855f7 inset, 0 16px 40px rgba(168,85,247,0.22);
}
.ps-acc-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #d946ef);
  color: #15071f;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-acc-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 6px; color: #d8b4fe;
}
.ps-acc-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 36px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 6px; color: #fff;
}
.ps-acc-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-acc-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-acc-sub { font-size: 13px; color: #c4a8d6; margin: 0 0 16px; line-height: 1.5; min-height: 36px; }
.ps-acc-det {
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 8px;
  padding: 0 14px;
  margin-bottom: 16px;
  background: rgba(168,85,247,0.05);
}
.ps-acc-det[open] { padding-bottom: 4px; }
.ps-acc-det summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px; font-weight: 600; color: #d8b4fe;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  outline: 0;
}
.ps-acc-det summary::-webkit-details-marker { display: none; }
.ps-acc-det summary span {
  display: inline-block; font-size: 14px; transition: transform 0.25s;
}
.ps-acc-det[open] summary span { transform: rotate(180deg); }
.ps-acc-det summary:focus-visible { outline: 2px solid #a855f7; outline-offset: 3px; border-radius: 4px; }
.ps-acc-det ul {
  list-style: none; padding: 0; margin: 0 0 8px;
  font-size: 12.5px; line-height: 1.95; color: #d8c8e8;
  border-top: 1px dashed rgba(168,85,247,0.18);
  padding-top: 10px;
}
.ps-acc-det ul li::before { content: '✓'; color: #d946ef; display: inline-block; width: 18px; font-weight: 700; }
.ps-acc-cta {
  display: block; text-align: center; margin-top: auto;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(168,85,247,0.12); color: #d8b4fe;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(168,85,247,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-acc-cta-pri { background: linear-gradient(135deg, #a855f7, #d946ef); color: #15071f; border-color: transparent; }
.ps-acc-cta:hover { background: rgba(168,85,247,0.28); color: #fff; }
.ps-acc-cta:focus-visible { outline: 2px solid #d946ef; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-acc-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-acc-sub { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-acc-det summary span { transition: none; }
  .ps-acc-cta { transition: none; }
}
```

### 09. Spotlight Pricing

**Type:** Light JS
**Description:** Cards illuminate where the cursor moves — a CSS variable carries pointer X/Y and a radial gradient renders the spotlight. Black + amber, the developer-tool / OSS-pricing aesthetic. JS only updates two CSS variables; everything else is CSS.

**HTML:**
```html
<section class="ps-spt" aria-label="Pricing">
  <header class="ps-spt-head">
    <h2>Move the light. Read the price.</h2>
    <p>Cursor-aware cards. Real cards, real prices, real keyboard support.</p>
  </header>
  <div class="ps-spt-grid">
    <article class="ps-spt-card" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <h3>OSS</h3>
      <div class="ps-spt-price">$0<span>open source</span></div>
      <ul>
        <li>Self-hosted</li>
        <li>MIT licence</li>
        <li>GitHub issues</li>
      </ul>
      <a class="ps-spt-cta" href="#oss">Clone the repo</a>
    </article>
    <article class="ps-spt-card ps-spt-best" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <span class="ps-spt-pill">Recommended</span>
      <h3>Cloud</h3>
      <div class="ps-spt-price">$24<span>/mo</span></div>
      <ul>
        <li>Hosted &amp; maintained</li>
        <li>Auto-updates + backups</li>
        <li>Email support</li>
        <li>API access</li>
      </ul>
      <a class="ps-spt-cta ps-spt-cta-pri" href="#cloud">Choose Cloud</a>
    </article>
    <article class="ps-spt-card" tabindex="0">
      <div class="ps-spt-glow" aria-hidden="true"></div>
      <h3>Self-Hosted Pro</h3>
      <div class="ps-spt-price">$199<span>/yr</span></div>
      <ul>
        <li>Commercial licence</li>
        <li>Priority email support</li>
        <li>Audit logs</li>
      </ul>
      <a class="ps-spt-cta" href="#shp">Buy licence</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-spt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #050505;
  color: #f5e6c8;
  font-family: 'JetBrains Mono', 'Inter', system-ui, sans-serif;
}
.ps-spt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-spt-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-spt-head p { color: #8a7656; margin: 0; font-size: 13.5px; }
.ps-spt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; max-width: 980px; margin: 0 auto;
  align-items: stretch;
}
.ps-spt-card {
  position: relative; overflow: hidden;
  background: #0a0a0a;
  border: 1px solid #2a2418;
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.ps-spt-glow {
  position: absolute; inset: 0;
  background: radial-gradient(180px circle at var(--ps-spt-x, 50%) var(--ps-spt-y, 50%),
    rgba(245,158,11,0.4) 0%, rgba(245,158,11,0.1) 30%, transparent 60%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 0;
}
.ps-spt-card:hover .ps-spt-glow,
.ps-spt-card:focus-within .ps-spt-glow { opacity: 1; }
.ps-spt-card > *:not(.ps-spt-glow) { position: relative; z-index: 1; }
.ps-spt-card { transition: border-color 0.2s, transform 0.2s; }
.ps-spt-card:hover, .ps-spt-card:focus-within { border-color: #f59e0b; transform: translateY(-2px); }
.ps-spt-card:focus { outline: 0; }
.ps-spt-card:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
.ps-spt-best { border-color: #b45309; background: linear-gradient(180deg, #1a0f02, #0a0a0a); }
.ps-spt-pill {
  display: inline-block; align-self: flex-start;
  background: #f59e0b; color: #050505;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 3px 10px;
  border-radius: 4px; margin-bottom: 10px;
}
.ps-spt-card h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 12px; color: #f59e0b;
}
.ps-spt-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
  display: flex; align-items: baseline; gap: 8px;
}
.ps-spt-price span { font-size: 12px; font-weight: 500; color: #8a7656; letter-spacing: 0.04em; }
.ps-spt-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 12.5px; line-height: 2; color: #d8c69a;
}
.ps-spt-card ul li::before { content: '> '; color: #f59e0b; }
.ps-spt-cta {
  display: block; text-align: center;
  padding: 10px 16px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  background: transparent; color: #f59e0b;
  border: 1.5px solid #b45309;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.ps-spt-cta-pri { background: #f59e0b; color: #050505; border-color: #f59e0b; }
.ps-spt-cta:hover { background: #f59e0b; color: #050505; border-color: #f59e0b; }
.ps-spt-cta:focus-visible { outline: 2px solid #f59e0b; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-spt-grid { grid-template-columns: 1fr; max-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-spt-card, .ps-spt-glow, .ps-spt-cta { transition: none; }
}
```

**JS:**
```js
(function () {
  var cards = document.querySelectorAll('.ps-spt-card');
  cards.forEach(function (card) {
    card.addEventListener('pointermove', function (e) {
      var rect = card.getBoundingClientRect();
      var x = ((e.clientX - rect.left) / rect.width) * 100;
      var y = ((e.clientY - rect.top) / rect.height) * 100;
      card.style.setProperty('--ps-spt-x', x + '%');
      card.style.setProperty('--ps-spt-y', y + '%');
    });
    card.addEventListener('focus', function () {
      card.style.setProperty('--ps-spt-x', '50%');
      card.style.setProperty('--ps-spt-y', '50%');
    });
  });
})();
```

### 10. Annual Savings Stripe

**Type:** Pure CSS
**Description:** A pricing layout that makes the annual discount visible — monthly price struck through next to the discounted annual price, with a "Save $X/yr" pill underneath. Forest green base with warm orange savings accents — the conversion-tested "anchor and discount" pattern.

**HTML:**
```html
<section class="ps-sav" aria-label="Pricing">
  <header class="ps-sav-head">
    <h2>Pay yearly, save real money.</h2>
    <p>Same product, two months free when you commit to a year.</p>
  </header>
  <div class="ps-sav-grid">
    <article class="ps-sav-card">
      <h3>Seedling</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$15<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$12</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $36/yr</span>
      <ul>
        <li>1 garden</li>
        <li>30 plant slots</li>
        <li>Care reminders</li>
      </ul>
      <a class="ps-sav-cta" href="#seedling">Choose Seedling</a>
    </article>
    <article class="ps-sav-card ps-sav-rec">
      <span class="ps-sav-pill">Recommended</span>
      <h3>Greenhouse</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$36<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$29</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $84/yr</span>
      <ul>
        <li>10 gardens</li>
        <li>Unlimited slots</li>
        <li>Disease alerts</li>
        <li>Soil data sync</li>
      </ul>
      <a class="ps-sav-cta ps-sav-cta-pri" href="#greenhouse">Choose Greenhouse</a>
    </article>
    <article class="ps-sav-card">
      <h3>Estate</h3>
      <div class="ps-sav-prices">
        <span class="ps-sav-was" aria-label="Monthly price, was">$96<em>/mo</em></span>
        <span class="ps-sav-now"><strong>$79</strong><em>/mo billed yearly</em></span>
      </div>
      <span class="ps-sav-bag" aria-label="Yearly savings">Save $204/yr</span>
      <ul>
        <li>Multi-property</li>
        <li>Pro APIs</li>
        <li>Phone support</li>
      </ul>
      <a class="ps-sav-cta" href="#estate">Choose Estate</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-sav {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(34,107,72,0.2), transparent 60%),
    #07140e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-sav-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-sav-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  color: #fff;
}
.ps-sav-head p { color: #94b5a3; margin: 0; font-size: 14px; }
.ps-sav-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
  align-items: center;
}
.ps-sav-card {
  position: relative;
  background: #0d2018;
  border: 1px solid rgba(52,153,108,0.22);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column;
}
.ps-sav-rec {
  background: linear-gradient(180deg, #14301f, #0d2018);
  border-color: #34996c;
  box-shadow: 0 0 0 1px #34996c inset, 0 14px 36px rgba(52,153,108,0.2);
  transform: scale(1.04);
}
.ps-sav-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #34996c; color: #07140e;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 11px;
  border-radius: 999px;
}
.ps-sav-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 14px;
  color: #6ee7b7;
}
.ps-sav-prices {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 8px;
}
.ps-sav-was {
  font-size: 14px; color: #94b5a3;
  text-decoration: line-through;
  text-decoration-color: #f97316;
  text-decoration-thickness: 2px;
}
.ps-sav-was em { font-style: normal; font-size: 12px; opacity: 0.8; }
.ps-sav-now {
  display: flex; align-items: baseline; gap: 6px;
}
.ps-sav-now strong {
  font-size: 38px; font-weight: 800; letter-spacing: -0.03em;
  color: #fff;
}
.ps-sav-now em { font-style: normal; font-size: 12px; color: #94b5a3; }
.ps-sav-bag {
  display: inline-block; align-self: flex-start;
  background: #f97316; color: #07140e;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.ps-sav-card ul {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  font-size: 13.5px; line-height: 1.95; color: #c8e0d3;
}
.ps-sav-card ul li::before { content: '✓'; color: #34d399; display: inline-block; width: 20px; font-weight: 700; }
.ps-sav-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(52,153,108,0.14); color: #6ee7b7;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(52,153,108,0.32);
  transition: background 0.18s, color 0.18s;
}
.ps-sav-cta-pri { background: #34996c; color: #07140e; border-color: #34996c; }
.ps-sav-cta:hover { background: #34996c; color: #07140e; }
.ps-sav-cta:focus-visible { outline: 2px solid #34996c; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-sav-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-sav-rec { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-sav-cta { transition: none; }
}
```

### 11. Classic Three Tier

**Type:** Pure CSS
**Description:** The canonical SaaS pricing layout — three equal tier cards (Starter / Team / Business) with emerald accent. Real <code>&lt;ul&gt;</code> feature lists, dashed dividers, and full-width CTAs at the bottom. The conversion-tested baseline every team starts from.

**HTML:**
```html
<section class="ps-cls" aria-label="Pricing">
  <header class="ps-cls-head">
    <span class="ps-cls-eye">Pricing</span>
    <h2>Pick the plan that fits today.</h2>
    <p>Upgrade, downgrade, or cancel any time. No fine print.</p>
  </header>
  <div class="ps-cls-grid">
    <article class="ps-cls-card">
      <h3>Starter</h3>
      <p class="ps-cls-sub">For solo builders shipping their first thing.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$9</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>1 project</li>
        <li>2 GB storage</li>
        <li>Community support</li>
        <li>Basic analytics</li>
      </ul>
      <a class="ps-cls-cta" href="#starter">Start free →</a>
    </article>
    <article class="ps-cls-card">
      <h3>Team</h3>
      <p class="ps-cls-sub">For small teams who need to ship together.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$29</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>10 projects</li>
        <li>50 GB storage</li>
        <li>Email support</li>
        <li>Team analytics</li>
        <li>Role-based access</li>
      </ul>
      <a class="ps-cls-cta" href="#team">Start 14-day trial →</a>
    </article>
    <article class="ps-cls-card">
      <h3>Business</h3>
      <p class="ps-cls-sub">For growing companies that need governance.</p>
      <div class="ps-cls-price">
        <span class="ps-cls-amt">$79</span><span class="ps-cls-per">/ month</span>
      </div>
      <ul class="ps-cls-feats">
        <li>Unlimited projects</li>
        <li>500 GB storage</li>
        <li>Priority support</li>
        <li>Advanced analytics</li>
        <li>SSO + audit logs</li>
        <li>SOC 2 ready</li>
      </ul>
      <a class="ps-cls-cta" href="#business">Talk to sales →</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-cls {
  display: block;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #07120e;
  color: #e7f5ee;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.ps-cls-head { text-align: center; margin-bottom: clamp(20px, 4vw, 40px); }
.ps-cls-eye {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #34d399; margin-bottom: 12px;
}
.ps-cls-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.ps-cls-head p { color: #9bb5a8; margin: 0; font-size: 14px; }
.ps-cls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px; margin: 0 auto;
}
.ps-cls-card {
  background: #0d1f18;
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 14px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
.ps-cls-card:hover { border-color: #34d399; transform: translateY(-2px); }
.ps-cls-card h3 {
  font-size: 15px; font-weight: 700; margin: 0 0 4px;
  color: #34d399; letter-spacing: 0.04em; text-transform: uppercase;
}
.ps-cls-sub { font-size: 13px; color: #9bb5a8; margin: 0 0 18px; line-height: 1.5; min-height: 38px; }
.ps-cls-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px dashed rgba(52,211,153,0.25);
}
.ps-cls-amt { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: #f0fff7; }
.ps-cls-per { font-size: 13px; color: #9bb5a8; }
.ps-cls-feats { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.ps-cls-feats li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 13.5px; color: #d2e9dc;
}
.ps-cls-feats li::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  background:
    linear-gradient(135deg, transparent 50%, #34d399 50%) center/100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z'/></svg>") center/contain no-repeat;
  background: #34d399;
}
.ps-cls-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  background: rgba(52,211,153,0.12);
  color: #34d399; text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(52,211,153,0.28);
  transition: background 0.18s, color 0.18s;
}
.ps-cls-cta:hover { background: #34d399; color: #07120e; }
.ps-cls-cta:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-cls-grid { grid-template-columns: 1fr; max-width: 460px; }
  .ps-cls-sub { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cls-card { transition: none; }
  .ps-cls-card:hover { transform: none; }
}
```

### 12. Highlighted Popular

**Type:** Pure CSS
**Description:** Three tiers with the middle "Pro" plan lifted, scaled, and ribboned with a "Most Popular" badge. Sunset peach gradient on the highlight, neutral cream on the surrounding tiers — the lift pattern that drives 60–70% of mid-tier conversions.

**HTML:**
```html
<section class="ps-pop" aria-label="Pricing">
  <header class="ps-pop-head">
    <h2>Simple pricing, no surprises.</h2>
    <p>Three plans. Same product. Pick what you can grow into.</p>
  </header>
  <div class="ps-pop-grid">
    <article class="ps-pop-card">
      <h3>Basic</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">12</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Just the essentials.</p>
      <ul class="ps-pop-feats">
        <li>3 projects</li>
        <li>5 GB storage</li>
        <li>Email-only support</li>
      </ul>
      <a class="ps-pop-cta" href="#basic">Choose Basic</a>
    </article>
    <article class="ps-pop-card ps-pop-popular">
      <span class="ps-pop-badge" aria-label="Most popular plan">Most popular</span>
      <h3>Pro</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">36</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Everything teams actually need.</p>
      <ul class="ps-pop-feats">
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
        <li>Team roles</li>
      </ul>
      <a class="ps-pop-cta ps-pop-cta-pri" href="#pro">Choose Pro</a>
    </article>
    <article class="ps-pop-card">
      <h3>Enterprise</h3>
      <div class="ps-pop-price">
        <span class="ps-pop-cur">$</span><span class="ps-pop-amt">99</span
        ><span class="ps-pop-per">/mo</span>
      </div>
      <p class="ps-pop-sub">Compliance + dedicated success.</p>
      <ul class="ps-pop-feats">
        <li>Everything in Pro</li>
        <li>SSO &amp; SAML</li>
        <li>SLA + dedicated CSM</li>
      </ul>
      <a class="ps-pop-cta" href="#enterprise">Contact sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-pop {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a1410;
  color: #fef2e6;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-pop-head { text-align: center; margin-bottom: clamp(28px, 5vw, 48px); }
.ps-pop-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px;
  background: linear-gradient(90deg, #ff8b5a, #ffb37a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-pop-head p { color: #c9b3a3; margin: 0; font-size: 14px; }
.ps-pop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; align-items: center;
  max-width: 980px; margin: 0 auto;
}
.ps-pop-card {
  position: relative;
  background: #261c16;
  border: 1px solid rgba(255,179,122,0.12);
  border-radius: 16px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-pop-popular {
  background: linear-gradient(180deg, #ff8b5a 0%, #f56a3a 100%);
  color: #1a1410;
  transform: scale(1.05);
  box-shadow: 0 14px 40px rgba(245,106,58,0.35);
  border: 0;
  z-index: 2;
}
.ps-pop-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #1a1410; color: #ff8b5a;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-pop-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 14px;
  color: #ffb37a;
}
.ps-pop-popular h3 { color: #1a1410; }
.ps-pop-price {
  display: flex; align-items: baseline; gap: 3px;
  margin-bottom: 6px;
}
.ps-pop-cur { font-size: 18px; font-weight: 600; opacity: 0.7; }
.ps-pop-amt { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; }
.ps-pop-per { font-size: 13px; opacity: 0.7; margin-left: 4px; }
.ps-pop-sub { font-size: 13px; opacity: 0.75; margin: 0 0 18px; }
.ps-pop-feats {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.9;
}
.ps-pop-feats li::before {
  content: '✓'; display: inline-block; width: 18px;
  font-weight: 800; opacity: 0.85;
}
.ps-pop-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid currentColor;
  color: #ffb37a; background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-pop-cta:hover { background: #ffb37a; color: #1a1410; }
.ps-pop-cta-pri { background: #1a1410; color: #ff8b5a; border-color: #1a1410; }
.ps-pop-cta-pri:hover { background: #fef2e6; color: #1a1410; border-color: #fef2e6; }
.ps-pop-cta:focus-visible { outline: 2px solid #ff8b5a; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-pop-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-pop-popular { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-pop-cta { transition: none; }
}
```

### 13. Feature Comparison Table

**Type:** Pure CSS
**Description:** A real <code>&lt;table&gt;</code> with proper <code>&lt;th scope&gt;</code>, sticky header row, and check / dash cells comparing four plans across nine features. Cyan accent on the recommended column. Mobile fallback collapses to a stacked card list under 720px.

**HTML:**
```html
<section class="ps-cmp" aria-label="Plan comparison">
  <header class="ps-cmp-head">
    <h2>Compare every feature.</h2>
    <p>Pick the column that matches what you ship today.</p>
  </header>
  <div class="ps-cmp-scroll">
    <table class="ps-cmp-tbl">
      <thead>
        <tr>
          <th scope="col" class="ps-cmp-fc">Feature</th>
          <th scope="col">Free<br /><span>$0</span></th>
          <th scope="col" class="ps-cmp-rec">
            <span class="ps-cmp-pill">Recommended</span>Pro<br /><span>$24</span>
          </th>
          <th scope="col">Team<br /><span>$48</span></th>
          <th scope="col">Enterprise<br /><span>Contact</span></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Projects</th>
          <td>1</td>
          <td class="ps-cmp-rec">10</td>
          <td>50</td>
          <td>Unlimited</td>
        </tr>
        <tr>
          <th scope="row">Storage</th>
          <td>500 MB</td>
          <td class="ps-cmp-rec">10 GB</td>
          <td>50 GB</td>
          <td>500 GB</td>
        </tr>
        <tr>
          <th scope="row">Custom domain</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Team roles</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Priority support</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">SSO &amp; SAML</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Audit logs</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">99.99% SLA</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
        <tr>
          <th scope="row">Dedicated CSM</th>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td class="ps-cmp-rec"><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-no" aria-label="not included">—</span></td>
          <td><span class="ps-cmp-yes" aria-label="included">✓</span></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" class="ps-cmp-fc"></th>
          <td><a class="ps-cmp-cta" href="#free">Get started</a></td>
          <td class="ps-cmp-rec">
            <a class="ps-cmp-cta ps-cmp-cta-pri" href="#pro">Choose Pro →</a>
          </td>
          <td><a class="ps-cmp-cta" href="#team">Choose Team</a></td>
          <td><a class="ps-cmp-cta" href="#ent">Talk to sales</a></td>
        </tr>
      </tfoot>
    </table>
  </div>
</section>
```

**CSS:**
```css
.ps-cmp {
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px);
  min-height: 480px;
  background: #06141a;
  color: #e0f2f7;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cmp-head { text-align: center; margin-bottom: clamp(20px, 4vw, 36px); }
.ps-cmp-head h2 {
  font-size: clamp(22px, 3.2vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #f1fbff;
}
.ps-cmp-head p { color: #88a8b3; margin: 0; font-size: 14px; }
.ps-cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 980px; margin: 0 auto; }
.ps-cmp-tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13.5px; min-width: 720px;
}
.ps-cmp-tbl th, .ps-cmp-tbl td {
  text-align: center; padding: 14px 12px;
  border-bottom: 1px solid rgba(34,211,238,0.1);
}
.ps-cmp-tbl thead th {
  font-size: 14px; font-weight: 700;
  color: #cfeaf2;
  background: #0c1f27;
  position: relative;
}
.ps-cmp-tbl thead th span:not(.ps-cmp-pill) {
  display: block; font-size: 13px; font-weight: 500; color: #88a8b3; margin-top: 4px;
}
.ps-cmp-fc { text-align: left !important; color: #88a8b3 !important; font-weight: 500 !important; background: transparent !important; }
.ps-cmp-tbl tbody th {
  text-align: left; font-weight: 500; color: #cfeaf2;
}
.ps-cmp-rec {
  background: rgba(34,211,238,0.06);
  color: #22d3ee;
  position: relative;
}
.ps-cmp-tbl thead th.ps-cmp-rec {
  background: linear-gradient(180deg, rgba(34,211,238,0.18), rgba(34,211,238,0.04));
  color: #5eead4;
}
.ps-cmp-pill {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #22d3ee; color: #06141a;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px;
  border-radius: 999px;
}
.ps-cmp-yes { display: inline-block; width: 22px; height: 22px; line-height: 22px;
  border-radius: 50%; background: rgba(34,211,238,0.15); color: #22d3ee;
  font-weight: 700;
}
.ps-cmp-no { color: #4a606a; font-weight: 500; }
.ps-cmp-tbl tfoot td { padding-top: 18px; padding-bottom: 4px; border: 0; }
.ps-cmp-cta {
  display: inline-block; padding: 9px 16px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(34,211,238,0.3); color: #5eead4;
  transition: background 0.18s, color 0.18s;
}
.ps-cmp-cta:hover { background: rgba(34,211,238,0.18); color: #f1fbff; }
.ps-cmp-cta-pri { background: #22d3ee; color: #06141a; border-color: #22d3ee; }
.ps-cmp-cta-pri:hover { background: #5eead4; color: #06141a; }
.ps-cmp-cta:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
@media (max-width: 720px) {
  .ps-cmp-scroll { padding-bottom: 8px; }
  .ps-cmp-tbl thead th, .ps-cmp-tbl tbody th, .ps-cmp-tbl td { padding: 10px 8px; font-size: 12px; }
  .ps-cmp-pill { font-size: 9px; padding: 2px 6px; }
}
```

### 14. Monthly Yearly Toggle

**Type:** Pure CSS
**Description:** A pure-CSS billing-cycle switch using two hidden radios + <code>:has()</code>. No JavaScript — selecting Yearly swaps every visible price across all three tiers via sibling state. Teal gradient, save-20%-pill on the yearly option.

**HTML:**
```html
<section class="ps-tog" aria-label="Pricing">
  <header class="ps-tog-head">
    <h2>Pay how it suits you.</h2>
    <p>Switch billing — no contracts, no negotiation.</p>
    <fieldset class="ps-tog-switch">
      <legend class="ps-tog-sr">Billing cycle</legend>
      <input type="radio" name="ps-tog-cycle" id="ps-tog-m" checked />
      <label for="ps-tog-m">Monthly</label>
      <input type="radio" name="ps-tog-cycle" id="ps-tog-y" />
      <label for="ps-tog-y">Yearly <span class="ps-tog-save">−20%</span></label>
      <span class="ps-tog-thumb" aria-hidden="true"></span>
    </fieldset>
  </header>
  <div class="ps-tog-grid">
    <article class="ps-tog-card">
      <h3>Hobby</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$0</span><span class="ps-tog-y-amt">$0</span
        ><span class="ps-tog-per">forever</span>
      </div>
      <ul>
        <li>1 site</li>
        <li>Public projects</li>
        <li>Community</li>
      </ul>
      <a class="ps-tog-cta" href="#hobby">Start free</a>
    </article>
    <article class="ps-tog-card ps-tog-best">
      <span class="ps-tog-badge">Best value</span>
      <h3>Studio</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$19</span><span class="ps-tog-y-amt">$15</span
        ><span class="ps-tog-per">/ month</span>
      </div>
      <ul>
        <li>Unlimited sites</li>
        <li>Custom domains</li>
        <li>Email support</li>
        <li>Form submissions</li>
      </ul>
      <a class="ps-tog-cta ps-tog-cta-pri" href="#studio">Start trial</a>
    </article>
    <article class="ps-tog-card">
      <h3>Agency</h3>
      <div class="ps-tog-price">
        <span class="ps-tog-m-amt">$59</span><span class="ps-tog-y-amt">$47</span
        ><span class="ps-tog-per">/ month</span>
      </div>
      <ul>
        <li>Everything in Studio</li>
        <li>Client billing</li>
        <li>Workspace switcher</li>
        <li>Priority support</li>
      </ul>
      <a class="ps-tog-cta" href="#agency">Choose Agency</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-tog {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #062021;
  color: #e0fafa;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-tog-head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.ps-tog-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  background: linear-gradient(90deg, #14b8a6, #5eead4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-tog-head p { color: #7ea7a4; margin: 0 0 22px; font-size: 14px; }
.ps-tog-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-tog-switch {
  position: relative; display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0; padding: 4px;
  background: #0d2f30;
  border: 1px solid rgba(94,234,212,0.18);
  border-radius: 999px;
  margin: 0;
}
.ps-tog-switch input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.ps-tog-switch input:focus-visible + label {
  outline: 2px solid #5eead4; outline-offset: 3px;
}
.ps-tog-switch label {
  position: relative; z-index: 1;
  padding: 8px 22px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #7ea7a4;
  border-radius: 999px;
  transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ps-tog-save {
  font-size: 10px; font-weight: 700;
  background: rgba(94,234,212,0.18); color: #5eead4;
  padding: 2px 6px; border-radius: 6px;
}
.ps-tog-thumb {
  position: absolute; top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: linear-gradient(135deg, #14b8a6, #5eead4);
  border-radius: 999px;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  box-shadow: 0 4px 14px rgba(20,184,166,0.3);
}
.ps-tog-switch:has(#ps-tog-y:checked) .ps-tog-thumb { transform: translateX(100%); }
.ps-tog-switch:has(#ps-tog-m:checked) label[for="ps-tog-m"],
.ps-tog-switch:has(#ps-tog-y:checked) label[for="ps-tog-y"] { color: #062021; }
.ps-tog-switch:has(#ps-tog-y:checked) .ps-tog-save { background: rgba(6,32,33,0.25); color: #062021; }
.ps-tog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; max-width: 980px; margin: 0 auto;
}
.ps-tog-card {
  position: relative;
  background: #0d2f30;
  border: 1px solid rgba(94,234,212,0.15);
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
}
.ps-tog-best { border-color: #5eead4; box-shadow: 0 0 0 1px #5eead4 inset; }
.ps-tog-badge {
  position: absolute; top: -10px; right: 16px;
  background: #5eead4; color: #062021;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 6px;
}
.ps-tog-card h3 {
  font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0 0 14px; color: #5eead4;
}
.ps-tog-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.ps-tog-m-amt, .ps-tog-y-amt { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: #f0fff7; }
.ps-tog-per { font-size: 13px; color: #7ea7a4; }
.ps-tog:has(#ps-tog-m:checked) .ps-tog-y-amt { display: none; }
.ps-tog:has(#ps-tog-y:checked) .ps-tog-m-amt { display: none; }
.ps-tog-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 2; color: #c8eaea;
}
.ps-tog-card ul li::before {
  content: '✓'; color: #5eead4; font-weight: 700;
  display: inline-block; width: 20px;
}
.ps-tog-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  background: rgba(94,234,212,0.12); color: #5eead4;
  border: 1px solid rgba(94,234,212,0.25);
  transition: background 0.18s, color 0.18s;
}
.ps-tog-cta-pri { background: #5eead4; color: #062021; border-color: #5eead4; }
.ps-tog-cta:hover { background: #5eead4; color: #062021; }
.ps-tog-cta:focus-visible { outline: 2px solid #5eead4; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-tog-grid { grid-template-columns: 1fr; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-tog-thumb { transition: none; }
  .ps-tog-cta { transition: none; }
  .ps-tog-switch label { transition: none; }
}
```

### 15. Usage Slider

**Type:** Light JS
**Description:** Native <code>&lt;input type="range"&gt;</code> drives a live monthly estimate. Drag the slider, the requests count, total price, and recommended tier all update — with <code>aria-valuetext</code> announcing the result to screen readers. Magenta accent, the usage-based pricing pattern from Twilio / Stripe.

**HTML:**
```html
<section class="ps-slr" aria-label="Usage-based pricing">
  <header class="ps-slr-head">
    <span class="ps-slr-eye">Pay-as-you-go</span>
    <h2>Only pay for what you actually send.</h2>
    <p>
      Slide to estimate your monthly bill — we round up to the nearest tier so you’re never
      surprised.
    </p>
  </header>
  <div class="ps-slr-card">
    <div class="ps-slr-stage">
      <div class="ps-slr-display">
        <span class="ps-slr-label" id="ps-slr-lbl">Estimated monthly cost</span>
        <span class="ps-slr-amount"><em>$</em><span id="ps-slr-price">12</span></span>
        <span class="ps-slr-detail"
          ><span id="ps-slr-units">10,000</span> requests on the
          <strong id="ps-slr-tier">Starter</strong> tier</span
        >
      </div>
      <div class="ps-slr-track-wrap">
        <label class="ps-slr-sr" for="ps-slr-range">Monthly request volume</label>
        <input
          type="range"
          id="ps-slr-range"
          class="ps-slr-range"
          min="0"
          max="100"
          step="1"
          value="10"
          aria-labelledby="ps-slr-lbl"
          aria-valuetext="10,000 requests, Starter tier, 12 dollars per month"
        />
        <div class="ps-slr-ticks" aria-hidden="true">
          <span>10K</span><span>100K</span><span>500K</span><span>1M</span><span>5M+</span>
        </div>
      </div>
      <ul class="ps-slr-feats">
        <li>No setup fee, no minimum spend</li>
        <li>Auto-tier switching at every milestone</li>
        <li>Usage cap option to prevent surprises</li>
      </ul>
      <a class="ps-slr-cta" href="#start">Start with this plan →</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-slr {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a0a18;
  color: #fde7f4;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-slr-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-slr-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #f472b6; padding: 5px 12px;
  background: rgba(244,114,182,0.12);
  border: 1px solid rgba(244,114,182,0.25);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-slr-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 10px;
  color: #fff;
}
.ps-slr-head p { color: #c2a0b6; margin: 0 auto; max-width: 520px; font-size: 14px; line-height: 1.6; }
.ps-slr-card {
  max-width: 580px; margin: 0 auto;
  background: linear-gradient(180deg, #2a1227, #1a0a18);
  border: 1px solid rgba(244,114,182,0.2);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);
  box-shadow: 0 22px 60px rgba(244,114,182,0.12);
}
.ps-slr-display {
  text-align: center; padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px dashed rgba(244,114,182,0.2);
}
.ps-slr-label {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #c2a0b6;
}
.ps-slr-amount {
  display: flex; justify-content: center; align-items: baseline; gap: 4px;
  font-size: 64px; font-weight: 800; letter-spacing: -0.04em;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, #f472b6, #be185d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-slr-amount em { font-size: 28px; font-style: normal; align-self: flex-start; padding-top: 12px; opacity: 0.7; }
.ps-slr-detail { font-size: 13px; color: #c2a0b6; }
.ps-slr-detail strong { color: #f472b6; font-weight: 700; }
.ps-slr-track-wrap { padding: 0 4px 22px; }
.ps-slr-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-slr-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; background: transparent; cursor: pointer;
  margin: 8px 0 12px;
}
.ps-slr-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #f472b6 0%, #f472b6 var(--ps-slr-fill, 10%), #3a1a30 var(--ps-slr-fill, 10%), #3a1a30 100%);
}
.ps-slr-range::-moz-range-track {
  height: 6px; border-radius: 999px; background: #3a1a30;
}
.ps-slr-range::-moz-range-progress {
  height: 6px; border-radius: 999px; background: #f472b6;
}
.ps-slr-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: #fff;
  border: 3px solid #f472b6;
  box-shadow: 0 4px 12px rgba(244,114,182,0.4);
  cursor: grab;
}
.ps-slr-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 3px solid #f472b6; box-shadow: 0 4px 12px rgba(244,114,182,0.4);
  cursor: grab;
}
.ps-slr-range:focus-visible::-webkit-slider-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-range:focus-visible::-moz-range-thumb { outline: 3px solid #f9a8d4; outline-offset: 2px; }
.ps-slr-ticks {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: #8a647a;
}
.ps-slr-feats {
  list-style: none; padding: 0; margin: 0 0 22px;
  font-size: 13px; line-height: 1.9; color: #d8b8cc;
}
.ps-slr-feats li::before {
  content: '✦'; color: #f472b6; display: inline-block; width: 20px;
}
.ps-slr-cta {
  display: block; text-align: center;
  padding: 13px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #f472b6, #be185d);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(190,24,93,0.35);
  transition: transform 0.18s;
}
.ps-slr-cta:hover { transform: translateY(-1px); }
.ps-slr-cta:focus-visible { outline: 2px solid #f9a8d4; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ps-slr-cta { transition: none; }
}
```

**JS:**
```js
(function () {
  var range = document.getElementById('ps-slr-range');
  var priceEl = document.getElementById('ps-slr-price');
  var unitsEl = document.getElementById('ps-slr-units');
  var tierEl  = document.getElementById('ps-slr-tier');
  if (!range || !priceEl) return;

  // 5 tiers — index → { units (k), price ($), tier name }
  var tiers = [
    { units: 10,    price: 12,   name: 'Starter' },
    { units: 100,   price: 49,   name: 'Starter' },
    { units: 500,   price: 149,  name: 'Growth'  },
    { units: 1000,  price: 249,  name: 'Growth'  },
    { units: 5000,  price: 749,  name: 'Scale'   }
  ];

  function fmtUnits(k) { return k >= 1000 ? (k / 1000).toFixed(k % 1000 ? 1 : 0) + 'M' : k.toLocaleString() + 'K'; }

  function update() {
    var v = parseInt(range.value, 10);
    // map 0..100 → 0..4 with stops at 10/30/55/80/100
    var idx = v < 25 ? 0 : v < 50 ? 1 : v < 75 ? 2 : v < 95 ? 3 : 4;
    var t = tiers[idx];
    priceEl.textContent = t.price.toLocaleString();
    unitsEl.textContent = fmtUnits(t.units) + ' requests';
    // strip the trailing " requests" when re-using textContent below — show only the formatted number
    unitsEl.textContent = fmtUnits(t.units);
    tierEl.textContent  = t.name;
    range.style.setProperty('--ps-slr-fill', v + '%');
    range.setAttribute('aria-valuetext',
      fmtUnits(t.units) + ' requests, ' + t.name + ' tier, ' + t.price + ' dollars per month');
  }

  range.addEventListener('input', update);
  update();
})();
```

### 16. Single Premium Card

**Type:** Pure CSS
**Description:** A single-tier pricing layout for one-product brands — premium gold / brass treatment over deep navy, oversized price block, six feature checkmarks in two columns, anchor testimonial below. The pattern Basecamp / Hover use when there is only one thing to sell.

**HTML:**
```html
<section class="ps-her" aria-label="Pricing">
  <article class="ps-her-card">
    <span class="ps-her-eye">One plan · everything included</span>
    <h2>The whole product, <em>flat fee.</em></h2>
    <p class="ps-her-lead">
      Stop comparing tiers. One price. Every feature. Every team member. As long as you need it.
    </p>
    <div class="ps-her-price">
      <span class="ps-her-amt"><em>$</em>249</span>
      <span class="ps-her-per">per month, billed annually</span>
    </div>
    <ul class="ps-her-feats">
      <li>Unlimited team members</li>
      <li>Unlimited projects &amp; storage</li>
      <li>SSO &amp; SAML included</li>
      <li>SOC 2 &amp; HIPAA ready</li>
      <li>Priority email + chat support</li>
      <li>30-day money-back guarantee</li>
    </ul>
    <a class="ps-her-cta" href="#buy">Buy now — instant access</a>
    <p class="ps-her-foot">No demo required. Cancel any time, refund any time within 30 days.</p>
    <blockquote class="ps-her-quote">
      <p>“It paid for itself in the first week. We never looked at the tier ladder again.”</p>
      <cite>— Maya R., Head of Ops at Northwood</cite>
    </blockquote>
  </article>
</section>
```

**CSS:**
```css
.ps-her {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 60% at 30% 0%, rgba(212,175,55,0.12), transparent 60%),
    radial-gradient(50% 50% at 90% 100%, rgba(212,175,55,0.10), transparent 60%),
    #0b0b1a;
  color: #f4ecd8;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
}
.ps-her-card {
  position: relative;
  width: 100%; max-width: 540px;
  background: linear-gradient(180deg, #14142a 0%, #0b0b1a 100%);
  border: 1px solid #d4af37;
  border-radius: 22px;
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(212,175,55,0.15), inset 0 0 0 1px rgba(212,175,55,0.15);
}
.ps-her-card::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 22px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,212,121,0.06) 50%, transparent 60%);
  pointer-events: none;
}
.ps-her-eye {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #d4af37; padding: 5px 14px;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 999px;
  margin-bottom: 18px;
}
.ps-her-card h2 {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 14px; color: #fff;
}
.ps-her-card h2 em { color: #d4af37; font-style: italic; }
.ps-her-lead { color: #b8a888; font-size: 14.5px; line-height: 1.6; margin: 0 auto 28px; max-width: 380px; }
.ps-her-price {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; margin-bottom: 28px;
  padding: 22px 0; border-top: 1px solid rgba(212,175,55,0.18);
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.ps-her-amt {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(56px, 9vw, 88px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  background: linear-gradient(180deg, #ffd479, #d4af37);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-her-amt em { font-size: 0.5em; font-style: normal; vertical-align: top; padding-right: 2px; opacity: 0.85; }
.ps-her-per { font-size: 13px; color: #b8a888; }
.ps-her-feats {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
  text-align: left; font-size: 13.5px; color: #f4ecd8;
}
.ps-her-feats li::before {
  content: '✓'; color: #d4af37; font-weight: 700;
  display: inline-block; width: 20px;
}
.ps-her-cta {
  display: block;
  padding: 14px 20px; border-radius: 10px;
  background: linear-gradient(180deg, #ffd479, #d4af37);
  color: #0b0b1a; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(212,175,55,0.3);
  transition: transform 0.18s;
}
.ps-her-cta:hover { transform: translateY(-1px); }
.ps-her-cta:focus-visible { outline: 2px solid #ffd479; outline-offset: 3px; }
.ps-her-foot { font-size: 12px; color: #8a8068; margin: 12px 0 26px; }
.ps-her-quote {
  margin: 0; padding-top: 22px; border-top: 1px dashed rgba(212,175,55,0.2);
}
.ps-her-quote p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px; font-style: italic; color: #f4ecd8;
  margin: 0 0 8px; line-height: 1.5;
}
.ps-her-quote cite { font-style: normal; font-size: 12px; color: #8a8068; letter-spacing: 0.05em; }
@media (max-width: 540px) {
  .ps-her-feats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-her-cta { transition: none; }
}
```

### 17. Bento Pricing Grid

**Type:** Pure CSS
**Description:** Apple-style bento layout — the recommended Pro tile dominates one large quadrant, with stat / quote / pill cells fanning out. Coral and rose tones. Each tile is its own <code>&lt;article&gt;</code> with semantic content; the layout uses CSS Grid named areas.

**HTML:**
```html
<section class="ps-bnt" aria-label="Pricing">
  <header class="ps-bnt-head">
    <h2>Pricing in tiles, not tiers.</h2>
    <p>One canvas, three offers, and the proof points that make the choice obvious.</p>
  </header>
  <div class="ps-bnt-grid">
    <article class="ps-bnt-tile ps-bnt-pro">
      <span class="ps-bnt-pill">Recommended</span>
      <h3>Pro</h3>
      <div class="ps-bnt-price"><em>$</em>34<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>100 GB storage</li>
        <li>Priority support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-bnt-cta" href="#pro">Choose Pro →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-free">
      <h3>Free</h3>
      <div class="ps-bnt-price"><em>$</em>0<span>forever</span></div>
      <p>Build something small, ship it, keep it free.</p>
      <a class="ps-bnt-cta-sm" href="#free">Start free →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-stat">
      <span class="ps-bnt-stat-num">14k+</span>
      <span class="ps-bnt-stat-lbl">teams pay for Pro every month</span>
    </article>
    <article class="ps-bnt-tile ps-bnt-team">
      <h3>Team</h3>
      <div class="ps-bnt-price"><em>$</em>99<span>/mo</span></div>
      <p>Roles, billing, and audit logs for growing companies.</p>
      <a class="ps-bnt-cta-sm" href="#team">Choose Team →</a>
    </article>
    <article class="ps-bnt-tile ps-bnt-quote">
      <p>“We tried five tools. This was the only one priced like a partner, not a tax.”</p>
      <cite>— Lior, CTO at Pulse</cite>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-bnt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #1a0d0d;
  color: #ffe7df;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-bnt-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-bnt-head h2 {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px;
  color: #ffd0bf;
}
.ps-bnt-head p { color: #b89180; margin: 0 auto; max-width: 480px; font-size: 14px; }
.ps-bnt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "pro pro free stat"
    "pro pro team quote";
  gap: 14px;
  max-width: 980px; margin: 0 auto;
}
.ps-bnt-tile {
  background: #2a1612;
  border: 1px solid rgba(255,108,79,0.15);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 130px;
}
.ps-bnt-pro {
  grid-area: pro;
  background: linear-gradient(135deg, #ff6b4a 0%, #f43f5e 100%);
  border: 0;
  color: #1a0d0d;
  position: relative;
  overflow: hidden;
}
.ps-bnt-pro::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.ps-bnt-pill {
  display: inline-block; align-self: flex-start;
  background: #1a0d0d; color: #ff6b4a;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 11px;
  border-radius: 999px; margin-bottom: 8px;
}
.ps-bnt-tile h3 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 6px; opacity: 0.8; }
.ps-bnt-pro h3 { color: #1a0d0d; opacity: 1; font-weight: 700; }
.ps-bnt-price {
  font-size: clamp(36px, 5vw, 56px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 12px;
}
.ps-bnt-price em { font-size: 0.5em; font-style: normal; vertical-align: top; padding-right: 2px; opacity: 0.7; }
.ps-bnt-price span { font-size: 0.28em; font-weight: 500; opacity: 0.7; margin-left: 6px; }
.ps-bnt-pro ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 13px; line-height: 1.9;
}
.ps-bnt-pro ul li::before { content: '✓'; display: inline-block; width: 20px; font-weight: 700; }
.ps-bnt-tile p {
  font-size: 13px; line-height: 1.5; color: #b89180; margin: 0 0 12px;
}
.ps-bnt-cta, .ps-bnt-cta-sm {
  display: inline-block; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 13.5px; font-weight: 600;
  border: 1px solid currentColor; color: inherit;
  transition: background 0.18s, color 0.18s;
}
.ps-bnt-cta { background: #1a0d0d; color: #ff6b4a; border-color: #1a0d0d; align-self: flex-start; }
.ps-bnt-cta:hover { background: transparent; color: #fff; border-color: #fff; }
.ps-bnt-cta-sm { color: #ff6b4a; border-color: rgba(255,108,79,0.4); padding: 8px 14px; align-self: flex-start; font-size: 12.5px; }
.ps-bnt-cta-sm:hover { background: #ff6b4a; color: #1a0d0d; border-color: #ff6b4a; }
.ps-bnt-cta:focus-visible, .ps-bnt-cta-sm:focus-visible { outline: 2px solid #ffe7df; outline-offset: 3px; }
.ps-bnt-stat { grid-area: stat; align-items: flex-start; background: #2a1612; }
.ps-bnt-stat-num {
  font-size: clamp(36px, 5vw, 50px); font-weight: 800;
  letter-spacing: -0.03em; color: #ff6b4a;
  background: linear-gradient(180deg, #ffb37a, #ff6b4a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-bnt-stat-lbl { font-size: 12px; color: #b89180; line-height: 1.4; }
.ps-bnt-team { grid-area: team; }
.ps-bnt-free { grid-area: free; }
.ps-bnt-quote {
  grid-area: quote;
  background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
  color: #1a0d0d; border: 0;
}
.ps-bnt-quote p { font-style: italic; color: #1a0d0d; font-weight: 500; line-height: 1.5; font-size: 13px; opacity: 0.92; }
.ps-bnt-quote cite { font-style: normal; font-size: 11px; color: rgba(26,13,13,0.7); letter-spacing: 0.05em; }
@media (max-width: 820px) {
  .ps-bnt-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pro pro"
      "free team"
      "stat quote";
  }
}
@media (max-width: 520px) {
  .ps-bnt-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "pro"
      "free"
      "team"
      "stat"
      "quote";
  }
}
```

### 18. Vertical Tier Timeline

**Type:** Pure CSS
**Description:** Tiers presented as a vertical roadmap — Free → Pro → Enterprise — connected by a glowing lime spine. Each station is a real <code>&lt;ol&gt;</code>/<code>&lt;li&gt;</code> with a numbered milestone, price, and feature list. Reads as a growth path, not a column comparison.

**HTML:**
```html
<section class="ps-tml" aria-label="Pricing">
  <header class="ps-tml-head">
    <h2>Grow into the next plan, not out of one.</h2>
    <p>Three stops on the same road. Switch up or down with one click.</p>
  </header>
  <ol class="ps-tml-line">
    <li class="ps-tml-stop">
      <span class="ps-tml-num" aria-hidden="true">01</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Free</h3>
          <span class="ps-tml-pri">$0</span>
        </header>
        <p>
          Open-source projects, side experiments, anything you want to ship without a credit card.
        </p>
        <ul>
          <li>1 project</li>
          <li>500 MB storage</li>
          <li>Public repos only</li>
        </ul>
        <a class="ps-tml-cta" href="#free">Start free →</a>
      </article>
    </li>
    <li class="ps-tml-stop ps-tml-current">
      <span class="ps-tml-num" aria-hidden="true">02</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Pro</h3>
          <span class="ps-tml-pri">$24<em>/mo</em></span>
        </header>
        <p>
          Where most teams settle. Private projects, real support, and the integrations you actually
          use.
        </p>
        <ul>
          <li>Unlimited projects</li>
          <li>50 GB storage</li>
          <li>Email + chat support</li>
          <li>Slack, GitHub, Linear sync</li>
        </ul>
        <a class="ps-tml-cta ps-tml-cta-pri" href="#pro">Choose Pro →</a>
      </article>
    </li>
    <li class="ps-tml-stop">
      <span class="ps-tml-num" aria-hidden="true">03</span>
      <article class="ps-tml-pane">
        <header>
          <h3>Enterprise</h3>
          <span class="ps-tml-pri">Custom</span>
        </header>
        <p>
          For teams with procurement processes, security reviews, and quarterly business reviews.
        </p>
        <ul>
          <li>SSO + SAML + audit logs</li>
          <li>SLA, dedicated CSM</li>
          <li>Custom DPA &amp; invoicing</li>
        </ul>
        <a class="ps-tml-cta" href="#ent">Talk to sales →</a>
      </article>
    </li>
  </ol>
</section>
```

**CSS:**
```css
.ps-tml {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #0a1408;
  color: #ecfccb;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-tml-head { text-align: center; margin-bottom: clamp(28px, 5vw, 44px); }
.ps-tml-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #f7feec;
}
.ps-tml-head p { color: #93a87f; margin: 0; font-size: 14px; }
.ps-tml-line {
  position: relative; list-style: none; padding: 0;
  margin: 0 auto; max-width: 580px;
}
.ps-tml-line::before {
  content: ''; position: absolute; left: 28px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(180deg, #84cc16, rgba(132,204,22,0.2));
  border-radius: 2px;
}
.ps-tml-stop {
  position: relative; padding: 0 0 24px 70px;
  min-height: 56px;
}
.ps-tml-stop:last-child { padding-bottom: 0; }
.ps-tml-num {
  position: absolute; left: 6px; top: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #0a1408; border: 2px solid #84cc16;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700; color: #84cc16;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.ps-tml-current .ps-tml-num {
  background: #84cc16; color: #0a1408;
  box-shadow: 0 0 0 6px rgba(132,204,22,0.18);
}
.ps-tml-pane {
  background: #14210e;
  border: 1px solid rgba(132,204,22,0.18);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
.ps-tml-current .ps-tml-pane {
  border-color: #84cc16;
  background: linear-gradient(180deg, #1a3010, #14210e);
  box-shadow: 0 8px 24px rgba(132,204,22,0.12);
}
.ps-tml-pane header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(132,204,22,0.18);
  padding-bottom: 10px;
}
.ps-tml-pane h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin: 0; color: #84cc16;
}
.ps-tml-pri { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #f7feec; }
.ps-tml-pri em { font-size: 12px; font-style: normal; color: #93a87f; font-weight: 500; margin-left: 2px; }
.ps-tml-pane p { font-size: 13px; color: #c8d8b0; margin: 10px 0; line-height: 1.55; }
.ps-tml-pane ul {
  list-style: none; padding: 0; margin: 0 0 14px;
  font-size: 13px; line-height: 1.85; color: #c8d8b0;
}
.ps-tml-pane ul li::before {
  content: '→'; color: #84cc16; display: inline-block; width: 20px; font-weight: 700;
}
.ps-tml-cta {
  display: inline-block; padding: 9px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(132,204,22,0.4); color: #84cc16;
  background: transparent;
  transition: background 0.18s, color 0.18s;
}
.ps-tml-cta:hover { background: rgba(132,204,22,0.15); color: #ecfccb; }
.ps-tml-cta-pri { background: #84cc16; color: #0a1408; border-color: #84cc16; }
.ps-tml-cta-pri:hover { background: #a3e635; color: #0a1408; border-color: #a3e635; }
.ps-tml-cta:focus-visible { outline: 2px solid #a3e635; outline-offset: 3px; }
```

### 19. Brutalist Print

**Type:** Pure CSS
**Description:** Print-zine pricing — black on cream, hard offset shadows, mono type, intentionally raw. Each plan card sits askew on a yellow grid; CTAs are big inverted blocks. The brutalist aesthetic that signals "no marketing fluff" — popular with indie hackers and OSS.

**HTML:**
```html
<section class="ps-brt" aria-label="Pricing">
  <header class="ps-brt-head">
    <span class="ps-brt-eye">issue №07 · pricing</span>
    <h2>Three sizes. One product. Pick.</h2>
  </header>
  <div class="ps-brt-grid">
    <article class="ps-brt-card ps-brt-r1">
      <div class="ps-brt-row"><span>Plan</span><strong>Solo</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$8/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Indie devs</strong></div>
      <hr />
      <ul>
        <li>1 site, 1 admin</li>
        <li>5 GB storage</li>
        <li>Forum support</li>
      </ul>
      <a class="ps-brt-cta" href="#solo">[ Buy Solo ]</a>
    </article>
    <article class="ps-brt-card ps-brt-r2 ps-brt-pop">
      <span class="ps-brt-stamp">★ POPULAR</span>
      <div class="ps-brt-row"><span>Plan</span><strong>Studio</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$24/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Small studios</strong></div>
      <hr />
      <ul>
        <li>10 sites, 5 admins</li>
        <li>50 GB storage</li>
        <li>Email support</li>
        <li>Custom domain</li>
      </ul>
      <a class="ps-brt-cta ps-brt-cta-pri" href="#studio">[ Buy Studio ]</a>
    </article>
    <article class="ps-brt-card ps-brt-r3">
      <div class="ps-brt-row"><span>Plan</span><strong>Shop</strong></div>
      <div class="ps-brt-row"><span>Cost</span><strong class="ps-brt-pri">$60/mo</strong></div>
      <div class="ps-brt-row"><span>Built for</span><strong>Agencies</strong></div>
      <hr />
      <ul>
        <li>Unlimited sites</li>
        <li>500 GB storage</li>
        <li>Priority support</li>
        <li>White-label</li>
      </ul>
      <a class="ps-brt-cta" href="#shop">[ Buy Shop ]</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-brt {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(0,0,0,0.04) 23px, rgba(0,0,0,0.04) 24px),
    repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(0,0,0,0.04) 23px, rgba(0,0,0,0.04) 24px),
    #f4eccc;
  color: #0e0e0e;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.ps-brt-head { margin-bottom: clamp(24px, 4vw, 36px); }
.ps-brt-eye {
  display: inline-block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; padding: 4px 10px;
  background: #0e0e0e; color: #f4eccc; margin-bottom: 12px;
}
.ps-brt-head h2 {
  font-size: clamp(28px, 5vw, 44px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0;
  text-transform: uppercase;
}
.ps-brt-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; max-width: 980px; margin: 0 auto;
}
.ps-brt-card {
  position: relative;
  background: #f4eccc;
  border: 2px solid #0e0e0e;
  padding: 22px 20px 20px;
  box-shadow: 8px 8px 0 0 #0e0e0e;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ps-brt-card:hover { transform: translate(2px, 2px); box-shadow: 6px 6px 0 0 #0e0e0e; }
.ps-brt-r1 { transform: rotate(-1.2deg); }
.ps-brt-r2 { transform: rotate(0.8deg); }
.ps-brt-r3 { transform: rotate(-0.6deg); }
.ps-brt-pop { background: #facc15; border-color: #0e0e0e; box-shadow: 8px 8px 0 0 #0e0e0e; }
.ps-brt-stamp {
  position: absolute; top: -14px; right: -10px;
  background: #0e0e0e; color: #facc15;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  padding: 5px 12px; transform: rotate(4deg);
  text-transform: uppercase;
}
.ps-brt-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; padding: 4px 0;
  border-bottom: 1px dotted rgba(0,0,0,0.25);
}
.ps-brt-row span { text-transform: uppercase; opacity: 0.7; letter-spacing: 0.06em; }
.ps-brt-row strong { font-size: 14px; font-weight: 700; }
.ps-brt-pri { font-size: 22px !important; font-weight: 800 !important; }
.ps-brt-card hr { border: 0; border-top: 2px solid #0e0e0e; margin: 14px 0 12px; }
.ps-brt-card ul {
  list-style: none; padding: 0; margin: 0 0 18px;
  font-size: 12.5px; line-height: 1.7;
}
.ps-brt-card ul li::before { content: '▸ '; }
.ps-brt-cta {
  display: block; text-align: center;
  padding: 11px 16px;
  background: #f4eccc; color: #0e0e0e;
  border: 2px solid #0e0e0e;
  text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.ps-brt-cta-pri { background: #0e0e0e; color: #facc15; }
.ps-brt-cta:hover { background: #0e0e0e; color: #facc15; }
.ps-brt-cta-pri:hover { background: #facc15; color: #0e0e0e; }
.ps-brt-cta:focus-visible { outline: 3px solid #ff5e5e; outline-offset: 2px; }
@media (max-width: 820px) {
  .ps-brt-grid { grid-template-columns: 1fr; max-width: 380px; gap: 32px; }
  .ps-brt-r1, .ps-brt-r2, .ps-brt-r3 { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-brt-card { transition: none; }
  .ps-brt-card:hover { transform: none; box-shadow: 8px 8px 0 0 #0e0e0e; }
  .ps-brt-r1, .ps-brt-r2, .ps-brt-r3 { transform: none; }
}
```

### 20. Glass Aurora

**Type:** Pure CSS
**Description:** Frosted-glass pricing cards floating over a slow-drifting aurora gradient — radial blobs that orbit behind the cards. <code>backdrop-filter: blur()</code> over layered conic / radial gradients. Ice-blue palette, the high-end consumer-app pricing treatment.

**HTML:**
```html
<section class="ps-aur" aria-label="Pricing">
  <div class="ps-aur-blobs" aria-hidden="true">
    <span class="ps-aur-b1"></span>
    <span class="ps-aur-b2"></span>
    <span class="ps-aur-b3"></span>
  </div>
  <header class="ps-aur-head">
    <h2>Pricing, on the house.</h2>
    <p>Three tiers, all built on the same calm interface.</p>
  </header>
  <div class="ps-aur-grid">
    <article class="ps-aur-card">
      <h3>Drift</h3>
      <div class="ps-aur-price"><em>$</em>0<span>free</span></div>
      <ul>
        <li>Personal projects</li>
        <li>1 GB storage</li>
        <li>Community access</li>
      </ul>
      <a class="ps-aur-cta" href="#drift">Get started</a>
    </article>
    <article class="ps-aur-card ps-aur-mid">
      <span class="ps-aur-pill">Recommended</span>
      <h3>Float</h3>
      <div class="ps-aur-price"><em>$</em>18<span>/mo</span></div>
      <ul>
        <li>Unlimited projects</li>
        <li>30 GB storage</li>
        <li>Priority email support</li>
        <li>Custom domains</li>
      </ul>
      <a class="ps-aur-cta ps-aur-cta-pri" href="#float">Choose Float</a>
    </article>
    <article class="ps-aur-card">
      <h3>Stratos</h3>
      <div class="ps-aur-price"><em>$</em>56<span>/mo</span></div>
      <ul>
        <li>Everything in Float</li>
        <li>SSO + audit logs</li>
        <li>Dedicated success manager</li>
      </ul>
      <a class="ps-aur-cta" href="#stratos">Talk to sales</a>
    </article>
  </div>
</section>
```

**CSS:**
```css
.ps-aur {
  position: relative; overflow: hidden;
  contain: layout paint;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background: #050a1a;
  color: #e6f0ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-aur-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ps-aur-blobs span {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: 0.7;
  animation: ps-aur-drift 22s ease-in-out infinite alternate;
}
.ps-aur-b1 { top: -10%; left: -10%; width: 380px; height: 380px;
  background: radial-gradient(circle, #38bdf8 0%, transparent 60%);
  animation-delay: -3s;
}
.ps-aur-b2 { top: 20%; right: -8%; width: 320px; height: 320px;
  background: radial-gradient(circle, #818cf8 0%, transparent 60%);
  animation-delay: -8s;
}
.ps-aur-b3 { bottom: -15%; left: 30%; width: 360px; height: 360px;
  background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
  animation-delay: -14s;
}
@keyframes ps-aur-drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(40px,-30px) scale(1.08); }
  100% { transform: translate(-30px,30px) scale(0.95); }
}
.ps-aur-head { position: relative; z-index: 2; text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.ps-aur-head h2 {
  font-size: clamp(24px, 3.6vw, 36px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-aur-head p { color: #b8c4dc; margin: 0; font-size: 14px; }
.ps-aur-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; max-width: 980px; margin: 0 auto;
  align-items: center;
}
.ps-aur-card {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 26px 22px 22px;
  display: flex; flex-direction: column;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 18px 48px rgba(0,0,0,0.25);
}
.ps-aur-mid {
  background: rgba(255,255,255,0.1);
  border-color: rgba(56,189,248,0.4);
  transform: scale(1.04);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.4) inset, 0 22px 56px rgba(56,189,248,0.18);
}
.ps-aur-pill {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  color: #050a1a;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 12px;
  border-radius: 999px;
}
.ps-aur-card h3 {
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: #93c5fd;
}
.ps-aur-price {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 42px; font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 18px; color: #fff;
}
.ps-aur-price em { font-size: 0.5em; font-style: normal; padding-right: 2px; opacity: 0.7; }
.ps-aur-price span { font-size: 0.32em; font-weight: 500; opacity: 0.65; margin-left: 6px; }
.ps-aur-card ul {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  font-size: 13.5px; line-height: 1.9; color: #d1ddee;
}
.ps-aur-card ul li::before { content: '◇'; color: #38bdf8; display: inline-block; width: 20px; }
.ps-aur-cta {
  display: block; text-align: center;
  padding: 11px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #93c5fd; text-decoration: none;
  font-size: 13.5px; font-weight: 600;
  border: 1px solid rgba(147,197,253,0.3);
  transition: background 0.18s, color 0.18s;
}
.ps-aur-cta-pri {
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  color: #050a1a; border-color: transparent;
}
.ps-aur-cta:hover { background: rgba(255,255,255,0.18); color: #fff; }
.ps-aur-cta-pri:hover { background: linear-gradient(90deg, #7dd3fc, #a5b4fc); color: #050a1a; }
.ps-aur-cta:focus-visible { outline: 2px solid #38bdf8; outline-offset: 3px; }
@media (max-width: 820px) {
  .ps-aur-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ps-aur-mid { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-aur-blobs span { animation: none; }
  .ps-aur-cta { transition: none; }
}
```

### 21. Per-Seat Calculator

**Type:** Light JS
**Description:** Real interactive math — adjust the seat count with native +/− buttons (proper <code>aria-label</code>) and the per-seat × seats × cycle cost recomputes live. Indigo + sky palette. The pattern Linear / Notion / Slack use to let buyers self-serve estimates.

**HTML:**
```html
<section class="ps-cal" aria-label="Per-seat calculator">
  <header class="ps-cal-head">
    <span class="ps-cal-eye">Build your plan</span>
    <h2>Per-seat pricing, calculated live.</h2>
    <p>One number to change. Everything else updates with you.</p>
  </header>
  <div class="ps-cal-card">
    <div class="ps-cal-controls">
      <fieldset class="ps-cal-cycle">
        <legend class="ps-cal-sr">Billing cycle</legend>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-m" checked />
        <label for="ps-cal-m">Monthly</label>
        <input type="radio" name="ps-cal-cycle" id="ps-cal-y" />
        <label for="ps-cal-y">Yearly · save 25%</label>
      </fieldset>
      <div class="ps-cal-stepper">
        <span class="ps-cal-stp-lbl">Team size</span>
        <div class="ps-cal-stp">
          <button type="button" class="ps-cal-btn" id="ps-cal-dec" aria-label="Decrease team size">
            −
          </button>
          <input
            type="number"
            id="ps-cal-seats"
            value="5"
            min="1"
            max="500"
            inputmode="numeric"
            pattern="[0-9]*"
            aria-label="Number of team members"
          />
          <button type="button" class="ps-cal-btn" id="ps-cal-inc" aria-label="Increase team size">
            +
          </button>
        </div>
        <span class="ps-cal-stp-hint">Up to 500 seats. Above that, we’ll talk.</span>
      </div>
    </div>
    <div class="ps-cal-summary">
      <div class="ps-cal-row"><span>Seats</span><strong id="ps-cal-out-seats">5</strong></div>
      <div class="ps-cal-row">
        <span>Per seat</span><strong id="ps-cal-out-per">$12 /mo</strong>
      </div>
      <div class="ps-cal-row"><span>Cycle</span><strong id="ps-cal-out-cyc">Monthly</strong></div>
      <hr />
      <div class="ps-cal-row ps-cal-total">
        <span>Total today</span>
        <strong id="ps-cal-out-total">$60.00</strong>
      </div>
      <p class="ps-cal-foot" id="ps-cal-out-foot">Billed monthly · cancel any time</p>
      <a class="ps-cal-cta" href="#start">Start 14-day trial →</a>
    </div>
  </div>
</section>
```

**CSS:**
```css
.ps-cal {
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px);
  min-height: 480px;
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(99,102,241,0.18), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(56,189,248,0.14), transparent 60%),
    #07091a;
  color: #e6e9ff;
  font-family: 'Inter', system-ui, sans-serif;
}
.ps-cal-head { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }
.ps-cal-eye {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #818cf8; padding: 5px 12px;
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.28);
  border-radius: 999px; margin-bottom: 14px;
}
.ps-cal-head h2 {
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; margin: 0 0 8px; color: #fff;
}
.ps-cal-head p { color: #9aa3c8; margin: 0; font-size: 14px; }
.ps-cal-card {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 0;
  max-width: 820px; margin: 0 auto;
  background: rgba(20,22,48,0.7);
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
}
.ps-cal-controls {
  padding: clamp(22px, 4vw, 32px);
  border-right: 1px solid rgba(129,140,248,0.15);
  display: flex; flex-direction: column; gap: 22px;
}
.ps-cal-summary {
  padding: clamp(22px, 4vw, 32px);
  background: linear-gradient(180deg, rgba(99,102,241,0.1), rgba(56,189,248,0.06));
  display: flex; flex-direction: column;
}
.ps-cal-cycle {
  border: 1px solid rgba(129,140,248,0.2);
  border-radius: 10px; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: rgba(7,9,26,0.4);
  margin: 0;
}
.ps-cal-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.ps-cal-cycle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ps-cal-cycle label {
  text-align: center; padding: 9px 12px;
  font-size: 12.5px; font-weight: 600; color: #9aa3c8;
  cursor: pointer; border-radius: 7px;
  transition: background 0.18s, color 0.18s;
}
.ps-cal-cycle input:checked + label {
  background: linear-gradient(135deg, #6366f1, #38bdf8); color: #fff;
}
.ps-cal-cycle input:focus-visible + label { outline: 2px solid #818cf8; outline-offset: 2px; }
.ps-cal-stp-lbl {
  display: block; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #9aa3c8; margin-bottom: 8px;
}
.ps-cal-stp {
  display: grid; grid-template-columns: 44px 1fr 44px;
  border: 1px solid rgba(129,140,248,0.25);
  border-radius: 10px; overflow: hidden;
  background: rgba(7,9,26,0.5);
}
.ps-cal-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; font-weight: 700; color: #818cf8;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.ps-cal-btn:hover { background: rgba(129,140,248,0.15); color: #fff; }
.ps-cal-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: -2px; }
.ps-cal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ps-cal-stp input[type="number"] {
  background: transparent; border: 0; outline: 0;
  text-align: center; color: #fff;
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  font-family: inherit;
  border-left: 1px solid rgba(129,140,248,0.18);
  border-right: 1px solid rgba(129,140,248,0.18);
  -moz-appearance: textfield;
}
.ps-cal-stp input::-webkit-outer-spin-button,
.ps-cal-stp input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ps-cal-stp input:focus-visible { background: rgba(129,140,248,0.12); }
.ps-cal-stp-hint { display: block; font-size: 11.5px; color: #6c759b; margin-top: 8px; }
.ps-cal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  font-size: 13.5px;
}
.ps-cal-row span { color: #9aa3c8; }
.ps-cal-row strong { color: #fff; font-weight: 600; }
.ps-cal-summary hr { border: 0; border-top: 1px dashed rgba(129,140,248,0.25); margin: 4px 0; }
.ps-cal-total span { color: #93c5fd; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ps-cal-total strong {
  font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #818cf8, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ps-cal-foot { font-size: 12px; color: #6c759b; margin: 4px 0 16px; }
.ps-cal-cta {
  display: block; text-align: center;
  padding: 12px 18px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  color: #fff; text-decoration: none;
  font-size: 14px; font-weight: 700;
  margin-top: auto;
  box-shadow: 0 10px 24px rgba(99,102,241,0.3);
  transition: transform 0.18s;
}
.ps-cal-cta:hover { transform: translateY(-1px); }
.ps-cal-cta:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
@media (max-width: 720px) {
  .ps-cal-card { grid-template-columns: 1fr; }
  .ps-cal-controls { border-right: 0; border-bottom: 1px solid rgba(129,140,248,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .ps-cal-cta, .ps-cal-btn, .ps-cal-cycle label { transition: none; }
}
```

**JS:**
```js
(function () {
  var seats   = document.getElementById('ps-cal-seats');
  var dec     = document.getElementById('ps-cal-dec');
  var inc     = document.getElementById('ps-cal-inc');
  var rM      = document.getElementById('ps-cal-m');
  var rY      = document.getElementById('ps-cal-y');
  var outSeats= document.getElementById('ps-cal-out-seats');
  var outPer  = document.getElementById('ps-cal-out-per');
  var outCyc  = document.getElementById('ps-cal-out-cyc');
  var outTot  = document.getElementById('ps-cal-out-total');
  var outFoot = document.getElementById('ps-cal-out-foot');
  if (!seats || !inc) return;

  var BASE_MONTHLY = 12;       // $12 / seat / mo
  var YEARLY_DISC  = 0.25;     // 25% off when yearly

  function clamp(v) {
    if (isNaN(v) || v < 1) return 1;
    if (v > 500) return 500;
    return v;
  }
  function fmt(n) { return '$' + n.toFixed(2); }

  function update() {
    var n = clamp(parseInt(seats.value, 10));
    seats.value = n;
    var yearly = rY.checked;
    var per    = yearly ? BASE_MONTHLY * (1 - YEARLY_DISC) : BASE_MONTHLY;
    var months = yearly ? 12 : 1;
    var total  = per * n * months;

    outSeats.textContent = n + (n === 1 ? ' member' : ' members');
    outPer.textContent   = '$' + per.toFixed(2) + ' / mo';
    outCyc.textContent   = yearly ? 'Yearly (–25%)' : 'Monthly';
    outTot.textContent   = fmt(total);
    outFoot.textContent  = yearly
      ? 'Billed yearly · ' + fmt(total) + ' once, then renews annually'
      : 'Billed monthly · cancel any time';

    dec.disabled = n <= 1;
    inc.disabled = n >= 500;
  }

  dec.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) - 1); update(); });
  inc.addEventListener('click', function () { seats.value = clamp(parseInt(seats.value, 10) + 1); update(); });
  seats.addEventListener('input', update);
  rM.addEventListener('change', update);
  rY.addEventListener('change', update);
  update();
})();
```

---
## 12 CSS Progress Bar Designs

URL: https://codefronts.com/components/css-progress-bars/
Description: 12 hand-coded CSS progress bar designs — liquid fill, step tracker, conic ring, segmented battery, skill bars, speed gauge and more. Semantic HTML, copy-paste ready.
Demo count: 12

### 01. Liquid Fill

**Type:** Pure CSS
**Description:** Wave-animated water rising inside a rounded vessel — perfect for resource meters, storage usage, and "fill your goal" patterns. Two SVG waves drift at different speeds for organic motion.

**HTML:**
```html
<div
  class="pb-liquid"
  role="progressbar"
  aria-valuenow="68"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Storage used"
>
  <span class="pb-liquid-fill" style="--pb-liquid-level: 68%">
    <svg
      class="pb-liquid-wave w1"
      viewBox="0 0 200 20"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path d="M0 10 Q 25 0 50 10 T 100 10 T 150 10 T 200 10 V 20 H 0 Z" fill="currentColor" />
    </svg>
    <svg
      class="pb-liquid-wave w2"
      viewBox="0 0 200 20"
      preserveAspectRatio="none"
      aria-hidden="true"
    >
      <path d="M0 10 Q 25 20 50 10 T 100 10 T 150 10 T 200 10 V 20 H 0 Z" fill="currentColor" />
    </svg>
  </span>
  <span class="pb-liquid-label"><strong>68%</strong> storage used</span>
</div>
```

**CSS:**
```css
.pb-liquid {
  position: relative;
  width: 220px;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0f172a, #1e293b);
  border: 1px solid rgba(56, 189, 248, 0.25);
  overflow: hidden;
  box-shadow: 0 12px 30px -10px rgba(56, 189, 248, 0.25);
  font-family: system-ui, sans-serif;
}

.pb-liquid-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pb-liquid-level, 0%);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.85) 0%, rgba(14, 165, 233, 0.95) 100%);
  color: rgba(56, 189, 248, 0.85);
  transition: height 0.6s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-liquid-wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 200%;
  height: 18px;
}

.pb-liquid-wave.w1 {
  animation: pbLiquidWave 4s linear infinite;
  opacity: 0.85;
}

.pb-liquid-wave.w2 {
  animation: pbLiquidWave 6s linear infinite reverse;
  opacity: 0.55;
}

.pb-liquid-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #f0f9ff;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.pb-liquid-label strong {
  font-size: 20px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .pb-liquid-wave {
    animation: none;
  }
}

@keyframes pbLiquidWave { to { transform: translateX(-50%); } }

```

### 02. Step Tracker

**Type:** Pure CSS
**Description:** Numbered steps with a connecting rail that fills as you progress. Completed steps morph into checkmarks via pseudo-elements — ideal for checkout flows, onboarding wizards, and multi-page forms.

**HTML:**
```html
<ol class="pb-step" role="list" data-current="3">
  <li class="pb-step-item is-done"><span>1</span><em>Cart</em></li>
  <li class="pb-step-item is-done"><span>2</span><em>Address</em></li>
  <li class="pb-step-item is-current"><span>3</span><em>Payment</em></li>
  <li class="pb-step-item"><span>4</span><em>Confirm</em></li>
</ol>
```

**CSS:**
```css
.pb-step {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 280px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  isolation: isolate;
}

.pb-step::before,
.pb-step::after {
  content: "";
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 15px;
  height: 2px;
  border-radius: 2px;
  z-index: 0;
}

.pb-step::before {
  background: rgba(255, 255, 255, 0.08);
}

.pb-step::after {
  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
  width: 0;
  left: 12.5%;
  right: auto;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-step[data-current="2"]::after {
  width: calc(((2 - 1) / (4 - 1)) * 75%);
}

.pb-step[data-current="3"]::after {
  width: calc(((3 - 1) / (4 - 1)) * 75%);
}

.pb-step[data-current="4"]::after {
  width: 75%;
}

.pb-step-item {
  position: relative;
  display: grid;
  gap: 6px;
  place-items: center;
  font-size: 11px;
  color: #94a3b8;
  z-index: 1;
}

.pb-step-item span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-weight: 700;
  font-size: 13px;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
  position: relative;
}

.pb-step-item em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.pb-step-item.is-done span,
.pb-step-item.is-current span {
  background: linear-gradient(135deg, #14b8a6, #2dd4bf);
  border-color: #2dd4bf;
  color: #0f172a;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
}

.pb-step-item.is-done span {
  font-size: 0;
}

.pb-step-item.is-done span::before {
  content: "";
  width: 13px;
  height: 7px;
  border: 2px solid #0f172a;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: center;
}

.pb-step-item.is-current em {
  color: #2dd4bf;
}

.pb-step-item.is-done em {
  color: #cbd5e1;
}
```

### 03. Conic Ring

**Type:** Pure CSS
**Description:** A circular progress ring rendered with a real `@property`-animated conic gradient — no SVG, no JS scoring. The percentage in the centre updates with the value via a CSS custom property, and the fill sweeps from 0 to the target on every render.

**HTML:**
```html
<div
  class="pb-ring"
  role="progressbar"
  aria-valuenow="74"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Profile completion"
  style="--pb-ring-value: 74"
>
  <span class="pb-ring-track" aria-hidden="true"></span>
  <span class="pb-ring-meta">
    <strong>74<small>%</small></strong>
    <em>Profile</em>
  </span>
</div>
```

**CSS:**
```css
.pb-ring {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  --pb-ring-deg: calc(var(--pb-ring-value, 0) * 3.6deg);
  background: conic-gradient(
    #c084fc 0deg,
    #f472b6 var(--pb-ring-deg),
    rgba(255, 255, 255, 0.06) var(--pb-ring-deg),
    rgba(255, 255, 255, 0.06) 360deg
  );
  animation: pbRingDraw 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
  font-family: system-ui, sans-serif;
}

.pb-ring-track {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #15151d;
  box-shadow: inset 0 0 18px rgba(192, 132, 252, 0.15);
}

.pb-ring-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.pb-ring-meta strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #f0eeff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pb-ring-meta strong small {
  font-size: 13px;
  font-weight: 600;
  color: #c084fc;
  margin-left: 1px;
}

.pb-ring-meta em {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a78bfa;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pb-ring {
    animation: none;
  }
}

@keyframes pbRingDraw {
  from { --pb-ring-deg: 0deg; }
  to   { --pb-ring-deg: calc(var(--pb-ring-value, 0) * 3.6deg); }
}

```

### 04. Segmented Battery

**Type:** Pure CSS
**Description:** Discrete signal-bar segments that fill from left to right. Each segment has a distinct highlight, giving a tactile, hardware-keypad feel — great for upload progress and connection strength.

**HTML:**
```html
<div
  class="pb-seg"
  role="progressbar"
  aria-valuenow="60"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Network signal"
  data-pb-seg="3"
  data-pb-seg-total="5"
>
  <span class="pb-seg-label">Signal</span>
  <span class="pb-seg-rail" aria-hidden="true">
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
    <span class="pb-seg-cell"></span>
  </span>
  <span class="pb-seg-value">3 / 5 bars</span>
</div>
```

**CSS:**
```css
.pb-seg {
  width: 220px;
  display: grid;
  gap: 6px;
  font-family: system-ui, sans-serif;
}

.pb-seg-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}

.pb-seg-rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.pb-seg-cell {
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
  transition: background 0.4s ease;
}

.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1),
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2),
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3),
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4),
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5) {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  border-color: #34d399;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.pb-seg[data-pb-seg="1"] .pb-seg-cell:nth-child(-n + 1)::after,
.pb-seg[data-pb-seg="2"] .pb-seg-cell:nth-child(-n + 2)::after,
.pb-seg[data-pb-seg="3"] .pb-seg-cell:nth-child(-n + 3)::after,
.pb-seg[data-pb-seg="4"] .pb-seg-cell:nth-child(-n + 4)::after,
.pb-seg[data-pb-seg="5"] .pb-seg-cell:nth-child(-n + 5)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
}

.pb-seg-value {
  font-size: 12px;
  color: #6ee7b7;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}
```

### 05. Stripe Loading

**Type:** Pure CSS
**Description:** Diagonal candy-stripes shimmer continuously inside the filled portion — instantly reads as "actively in progress." A premium touch lifted from server-software install dialogs and CI build runners.

**HTML:**
```html
<div
  class="pb-stripe"
  role="progressbar"
  aria-valuenow="62"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Build progress"
>
  <div class="pb-stripe-head">
    <span>Build #482</span>
    <span class="pb-stripe-pct">62%</span>
  </div>
  <div class="pb-stripe-rail">
    <div class="pb-stripe-fill" style="--pb-stripe-w: 62%"></div>
  </div>
  <div class="pb-stripe-foot">Compiling assets · 4.2 MB / 6.8 MB</div>
</div>
```

**CSS:**
```css
.pb-stripe {
  width: 240px;
  display: grid;
  gap: 6px;
  font-family: system-ui, sans-serif;
}

.pb-stripe-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.pb-stripe-pct {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  padding: 2px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.pb-stripe-rail {
  height: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 7px;
  overflow: hidden;
}

.pb-stripe-fill {
  width: var(--pb-stripe-w, 0%);
  height: 100%;
  background: repeating-linear-gradient(-45deg, #f59e0b 0, #f59e0b 8px, #fbbf24 8px, #fbbf24 16px);
  background-size: 22px 22px;
  animation: pbStripeMove 0.8s linear infinite;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pb-stripe-foot {
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .pb-stripe-fill {
    animation: none;
  }
}

@keyframes pbStripeMove {
  from { background-position: 0 0; }
  to   { background-position: 44px 0; }
}

```

### 06. Gradient Pulse

**Type:** Pure CSS
**Description:** A premium hero progress bar with a glowing leading edge that pulses gently. The trailing gradient shimmer creates a "comet" feel — perfect for app launchers, splash screens, and SaaS dashboards.

**HTML:**
```html
<div
  class="pb-pulse"
  role="progressbar"
  aria-valuenow="48"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Sync progress"
>
  <div class="pb-pulse-head">
    <strong>Syncing your workspace</strong>
    <span class="pb-pulse-pct">48%</span>
  </div>
  <div class="pb-pulse-rail">
    <div class="pb-pulse-fill" style="--pb-pulse-w: 48%">
      <span class="pb-pulse-edge" aria-hidden="true"></span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.pb-pulse {
  width: 260px;
  display: grid;
  gap: 8px;
  font-family: system-ui, sans-serif;
}

.pb-pulse-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: #f0eeff;
  font-size: 13px;
}

.pb-pulse-head strong {
  font-weight: 600;
}

.pb-pulse-pct {
  font-family: "JetBrains Mono", monospace;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pb-pulse-rail {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.pb-pulse-fill {
  position: relative;
  width: var(--pb-pulse-w, 0%);
  height: 100%;
  background: linear-gradient(90deg, rgba(124, 108, 255, 0.25) 0%, #7c6cff 60%, #c4b5fd 100%);
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-pulse-edge {
  position: absolute;
  right: -4px;
  top: -2px;
  bottom: -2px;
  width: 10px;
  background: radial-gradient(circle, #fff 0%, rgba(196, 181, 253, 0.55) 60%, transparent 80%);
  border-radius: 50%;
  animation: pbPulseGlow 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pb-pulse-edge {
    animation: none;
  }
}

@keyframes pbPulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

```

### 07. Goal Tracker

**Type:** Pure CSS
**Description:** Vertical fundraising-style progress with milestone markers. Each tier ($1k, $5k, $10k) lights up as the bar grows past it — ideal for crowdfunding, sales targets, and quarterly goals.

**HTML:**
```html
<div
  class="pb-goal"
  role="progressbar"
  aria-valuenow="6800"
  aria-valuemin="0"
  aria-valuemax="10000"
  aria-label="Funds raised"
  style="--pb-goal-pct: 68%"
>
  <div class="pb-goal-track">
    <div class="pb-goal-fill"></div>
    <ul class="pb-goal-marks" aria-hidden="true">
      <li style="--m: 100%"><span>$10k</span></li>
      <li style="--m: 50%" class="hit"><span>$5k</span></li>
      <li style="--m: 10%" class="hit"><span>$1k</span></li>
    </ul>
  </div>
  <div class="pb-goal-meta">
    <strong>$6,800</strong>
    <span>raised of <em>$10,000</em></span>
  </div>
</div>
```

**CSS:**
```css
.pb-goal {
  width: 200px;
  height: 200px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  font-family: system-ui, sans-serif;
}

.pb-goal-track {
  position: relative;
  width: 12px;
  height: 100%;
  margin-left: 18px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}

.pb-goal-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pb-goal-pct, 0%);
  background: linear-gradient(180deg, #ec4899, #f43f5e);
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(236, 72, 153, 0.5);
  transition: height 0.7s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-goal-marks {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pb-goal-marks li {
  position: absolute;
  right: -28px;
  bottom: var(--m);
  transform: translateY(50%);
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
  font-family: "JetBrains Mono", monospace;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s;
}

.pb-goal-marks li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #475569;
  margin-left: -28px;
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.pb-goal-marks li.hit {
  color: #fbcfe8;
}

.pb-goal-marks li.hit::before {
  background: #ec4899;
  border-color: #f9a8d4;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.7);
}

.pb-goal-meta {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  color: #f0eeff;
}

.pb-goal-meta strong {
  font-size: 22px;
  font-weight: 700;
  color: #fda4af;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pb-goal-meta span {
  font-size: 11px;
  color: #94a3b8;
}

.pb-goal-meta em {
  font-style: normal;
  color: #fda4af;
  font-weight: 600;
}
```

### 08. Skill Bars

**Type:** Pure CSS
**Description:** Stacked horizontal bars with labels and percentages. Each row slides in with a staggered animation — the canonical pattern for portfolios, CV pages, and team skill matrices.

**HTML:**
```html
<dl class="pb-skill">
  <div class="pb-skill-row">
    <dt>TypeScript</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 92%"></span>
      </span>
      <span class="pb-skill-pct">92%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>React</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 88%; --pb-skill-delay: 0.1s"></span>
      </span>
      <span class="pb-skill-pct">88%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>CSS &amp; Sass</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 95%; --pb-skill-delay: 0.2s"></span>
      </span>
      <span class="pb-skill-pct">95%</span>
    </dd>
  </div>
  <div class="pb-skill-row">
    <dt>Figma</dt>
    <dd>
      <span class="pb-skill-rail">
        <span class="pb-skill-fill" style="--pb-skill-w: 78%; --pb-skill-delay: 0.3s"></span>
      </span>
      <span class="pb-skill-pct">78%</span>
    </dd>
  </div>
</dl>
```

**CSS:**
```css
.pb-skill {
  width: 260px;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pb-skill-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}

.pb-skill dt {
  font-size: 11.5px;
  font-weight: 600;
  color: #fef3c7;
  letter-spacing: 0.02em;
}

.pb-skill dd {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.pb-skill-rail {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
}

.pb-skill-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f97316, #fbbf24);
  border-radius: inherit;
  animation: pbSkillSlide 1s cubic-bezier(0.5, 0, 0.3, 1.2) var(--pb-skill-delay, 0s) forwards;
}

.pb-skill-pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .pb-skill-fill {
    animation: none;
    width: var(--pb-skill-w, 0%);
  }
}

@keyframes pbSkillSlide {
  to { width: var(--pb-skill-w, 0%); }
}

```

### 09. Circular Counter

**Type:** Light JS
**Description:** A radial chart with a synchronised counting number in the centre. The ring fills via SVG `stroke-dasharray` (with `pathLength="100"` so the math is honest) while the number animates from 0 — bound by light JS to keep the number truly in sync.

**HTML:**
```html
<div
  class="pb-count"
  role="progressbar"
  aria-valuenow="0"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Score"
  data-pb-count="86"
>
  <svg class="pb-count-ring" viewBox="0 0 100 100" aria-hidden="true">
    <defs>
      <linearGradient id="pb-count-grad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stop-color="#34d399" />
        <stop offset="100%" stop-color="#10b981" />
      </linearGradient>
    </defs>
    <circle class="pb-count-bg" cx="50" cy="50" r="42"></circle>
    <circle class="pb-count-prog" cx="50" cy="50" r="42" pathLength="100"></circle>
  </svg>
  <div class="pb-count-meta">
    <strong data-pb-count-num>0</strong>
    <span>score</span>
  </div>
</div>
```

**CSS:**
```css
.pb-count {
  position: relative;
  width: 130px;
  height: 130px;
  font-family: system-ui, sans-serif;
}

.pb-count-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.pb-count-bg,
.pb-count-prog {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.pb-count-bg {
  stroke: rgba(255, 255, 255, 0.06);
}

.pb-count-prog {
  stroke: url(#pb-count-grad);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.5, 0, 0.3, 1.2);
}

.pb-count.is-ready .pb-count-prog {
  stroke-dashoffset: calc(100 - (var(--pb-count-pct, 0) * 100));
}

.pb-count-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1;
}

.pb-count-meta strong {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #f0eeff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pb-count-meta span {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: #34d399;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}
```

**JS:**
```js
// Reads the target value from data-pb-count and animates the
// SVG ring + centre number from 0 to that value over 1.4s.
// Drop this on every page where you render a .pb-count element.
document.querySelectorAll("[data-pb-count]").forEach(function (el) {
  var target = Number(el.dataset.pbCount) || 0;
  var num = el.querySelector("[data-pb-count-num]");

  // Drive the ring's stroke-dashoffset via a CSS custom property
  el.style.setProperty("--pb-count-pct", String(target / 100));
  requestAnimationFrame(function () {
    el.classList.add("is-ready");
  });

  // Tick the centre number in sync with the 1.4s ring transition
  var start = null;
  var duration = 1400;
  function tick(t) {
    if (start === null) start = t;
    var p = Math.min(1, (t - start) / duration);
    var eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
    var v = Math.round(target * eased);
    if (num) num.textContent = v;
    el.setAttribute("aria-valuenow", String(v));
    if (p < 1) requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
});
```

### 10. Stacked Categories

**Type:** Pure CSS
**Description:** A single bar split into multiple coloured segments — Documents, Photos, Apps, Free. Each segment's width is a CSS variable, with a legend below. Premium pattern for storage dashboards and budget breakdowns.

**HTML:**
```html
<div class="pb-stack" role="img" aria-label="Storage usage breakdown">
  <div class="pb-stack-head">
    <strong>128 GB used</strong>
    <span>of 256 GB</span>
  </div>
  <div class="pb-stack-rail">
    <span class="pb-stack-seg s1" style="--w: 28%" aria-label="Documents 28%"></span>
    <span class="pb-stack-seg s2" style="--w: 18%" aria-label="Photos 18%"></span>
    <span class="pb-stack-seg s3" style="--w: 14%" aria-label="Apps 14%"></span>
    <span class="pb-stack-seg s4" style="--w: 40%" aria-label="Free 40%"></span>
  </div>
  <ul class="pb-stack-legend">
    <li class="s1"><i></i>Documents <em>36 GB</em></li>
    <li class="s2"><i></i>Photos <em>23 GB</em></li>
    <li class="s3"><i></i>Apps <em>18 GB</em></li>
    <li class="s4"><i></i>Free <em>51 GB</em></li>
  </ul>
</div>
```

**CSS:**
```css
.pb-stack {
  width: 260px;
  display: grid;
  gap: 10px;
  font-family: system-ui, sans-serif;
}

.pb-stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: #f0eeff;
}

.pb-stack-head strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pb-stack-head span {
  font-size: 12px;
  color: #94a3b8;
}

.pb-stack-rail {
  display: flex;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  overflow: hidden;
  gap: 2px;
  padding: 0 1px;
}

.pb-stack-seg {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.5, 0, 0.3, 1.2);
  width: var(--w, 0%);
}

.pb-stack-seg.s1 {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.pb-stack-seg.s2 {
  background: linear-gradient(90deg, #ec4899, #f472b6);
}

.pb-stack-seg.s3 {
  background: linear-gradient(90deg, #14b8a6, #2dd4bf);
}

.pb-stack-seg.s4 {
  background: rgba(255, 255, 255, 0.12);
}

.pb-stack-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  font-size: 11px;
  color: #cbd5e1;
}

.pb-stack-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pb-stack-legend li i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.pb-stack-legend li.s1 i {
  background: #818cf8;
}

.pb-stack-legend li.s2 i {
  background: #f472b6;
}

.pb-stack-legend li.s3 i {
  background: #2dd4bf;
}

.pb-stack-legend li.s4 i {
  background: rgba(255, 255, 255, 0.3);
}

.pb-stack-legend em {
  font-style: normal;
  margin-left: auto;
  color: #94a3b8;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
}
```

### 11. Speed Test Gauge

**Type:** Pure CSS
**Description:** An SVG semicircular speedometer with a colour-graded arc (red → amber → green), tick marks at 0/50/100, and a needle that sweeps from the bottom. Drives every value via the `--pb-gauge-value` custom property — premium pattern for PageSpeed scores, performance audits, and internet speed tests.

**HTML:**
```html
<div
  class="pb-gauge"
  role="progressbar"
  aria-valuenow="78"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Performance score"
  style="--pb-gauge-value: 78"
>
  <svg class="pb-gauge-svg" viewBox="0 0 200 170" aria-hidden="true">
    <defs>
      <linearGradient id="pb-gauge-grad" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%" stop-color="#f43f5e" />
        <stop offset="50%" stop-color="#fb923c" />
        <stop offset="100%" stop-color="#34d399" />
      </linearGradient>
    </defs>
    <!-- track -->
    <path
      class="pb-gauge-track"
      d="M 25 105 A 75 75 0 0 1 175 105"
      fill="none"
      stroke="rgba(255,255,255,0.06)"
      stroke-width="12"
      stroke-linecap="round"
    />
    <!-- value arc -->
    <path
      class="pb-gauge-value"
      d="M 25 105 A 75 75 0 0 1 175 105"
      fill="none"
      stroke="url(#pb-gauge-grad)"
      stroke-width="12"
      stroke-linecap="round"
      pathLength="100"
    />
    <!-- ticks -->
    <text class="pb-gauge-tick" x="25" y="125" text-anchor="middle">0</text>
    <text class="pb-gauge-tick" x="100" y="22" text-anchor="middle">50</text>
    <text class="pb-gauge-tick" x="175" y="125" text-anchor="middle">100</text>
    <!-- needle -->
    <g class="pb-gauge-needle">
      <line
        x1="100"
        y1="105"
        x2="100"
        y2="44"
        stroke="#f0eeff"
        stroke-width="3"
        stroke-linecap="round"
      />
      <circle cx="100" cy="105" r="7" fill="#fff" stroke="#15151d" stroke-width="2" />
    </g>
    <!-- score readout -->
    <text class="pb-gauge-num" x="100" y="148" text-anchor="middle">78</text>
    <text class="pb-gauge-label" x="100" y="164" text-anchor="middle">PERFORMANCE</text>
  </svg>
</div>
```

**CSS:**
```css
.pb-gauge {
  width: 220px;
  height: 170px;
  font-family: system-ui, sans-serif;
}

.pb-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.pb-gauge-value {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pbGaugeArc 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
}

.pb-gauge-needle {
  transform-origin: 100px 105px;
  animation: pbGaugeSweep 1.4s cubic-bezier(0.5, 0, 0.3, 1.2) forwards;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.pb-gauge-tick {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  fill: #64748b;
  letter-spacing: 0.04em;
}

.pb-gauge-num {
  font-family: system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  fill: #34d399;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pb-gauge-label {
  font-family: system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  fill: #94a3b8;
  letter-spacing: 0.16em;
}

@media (prefers-reduced-motion: reduce) {
  .pb-gauge-value {
    animation: none;
    stroke-dashoffset: calc(100 - var(--pb-gauge-value, 0));
  }
  .pb-gauge-needle {
    animation: none;
    transform: rotate(calc(var(--pb-gauge-value, 0) * 1.8deg - 90deg));
  }
}

@keyframes pbGaugeArc {
  to { stroke-dashoffset: calc(100 - var(--pb-gauge-value, 0)); }
}

@keyframes pbGaugeSweep {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(calc(var(--pb-gauge-value, 0) * 1.8deg - 90deg)); }
}

```

### 12. Buffer Bar

**Type:** Pure CSS
**Description:** Video-player progress bar with two filled regions: solid played + lighter buffered ahead. A subtle scrubber dot sits at the play head — premium pattern for media players, podcast UIs, and audio dashboards.

**HTML:**
```html
<div
  class="pb-buf"
  role="progressbar"
  aria-valuenow="42"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="Playback progress"
>
  <div class="pb-buf-time">
    <span>1:24</span>
    <span class="pb-buf-total">4:18</span>
  </div>
  <div class="pb-buf-rail">
    <span class="pb-buf-buffered" style="--pb-buf-buffered: 68%"></span>
    <span class="pb-buf-played" style="--pb-buf-played: 42%"></span>
    <span class="pb-buf-thumb" style="--pb-buf-played: 42%"></span>
  </div>
  <div class="pb-buf-meta">
    <span class="pb-buf-title">Penthouse Tour · 4K</span>
    <span class="pb-buf-quality">HD · 1080p</span>
  </div>
</div>
```

**CSS:**
```css
.pb-buf {
  width: 280px;
  display: grid;
  gap: 8px;
  font-family: system-ui, sans-serif;
}

.pb-buf-time {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #f0eeff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-buf-total {
  color: #94a3b8;
}

.pb-buf-rail {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
}

.pb-buf-buffered {
  position: absolute;
  inset: 0;
  width: var(--pb-buf-buffered, 0%);
  background: rgba(255, 255, 255, 0.18);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.pb-buf-played {
  position: absolute;
  inset: 0;
  width: var(--pb-buf-played, 0%);
  background: linear-gradient(90deg, #ef4444, #f97316);
  border-radius: inherit;
  transition: width 0.2s linear;
}

.pb-buf-thumb {
  position: absolute;
  top: 50%;
  left: var(--pb-buf-played, 0%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-top: -6px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px rgba(239, 68, 68, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.5);
  transform: scale(0);
  transition:
    transform 0.2s ease,
    left 0.2s linear;
}

.pb-buf-rail:hover .pb-buf-thumb,
.pb-buf:focus-within .pb-buf-thumb {
  transform: scale(1);
}

.pb-buf-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pb-buf-title {
  font-size: 12px;
  font-weight: 600;
  color: #f0eeff;
}

.pb-buf-quality {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
```

---
## 18 CSS Radio Button Designs

URL: https://codefronts.com/components/css-radio-buttons/
Description: 18 hand-coded CSS radio buttons — pill slider, magnetic orb, ink drop, segmented bar, pricing tier, glow pulse and more. Accessible, drop-in ready.
Demo count: 18

### 01. Concentric Pulse

**Type:** Pure CSS
**Description:** Classic outer ring with inner dot — on check the dot bursts outward then settles into place. The benchmark every radio is measured against.

**HTML:**
```html
<fieldset class="crb-pulse">
  <legend class="crb-sr">Plan</legend>
  <label><input type="radio" name="crb-pulse" checked /><span></span>Starter</label>
  <label><input type="radio" name="crb-pulse" /><span></span>Pro</label>
  <label><input type="radio" name="crb-pulse" /><span></span>Team</label>
</fieldset>
```

**CSS:**
```css
.crb-pulse { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-pulse label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-pulse input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-pulse span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative; transition: border-color 0.2s;
}
.crb-pulse span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #7c6cff;
  transform: scale(0); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-pulse input:checked + span { border-color: #7c6cff; }
.crb-pulse input:checked + span::after { transform: scale(1); animation: crb-pulse-burst 0.5s ease-out; }
@keyframes crb-pulse-burst {
  0%   { box-shadow: 0 0 0 0   rgba(124,108,255,0.6); }
  100% { box-shadow: 0 0 0 12px rgba(124,108,255,0); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-pulse,
  .crb-pulse * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 02. Pill Slider

**Type:** Pure CSS
**Description:** Three-option pill where the active background slides smoothly between selections — perfect for plan toggles and view switchers.

**HTML:**
```html
<fieldset class="crb-pill">
  <legend class="crb-sr">Billing</legend>
  <input type="radio" name="crb-pill" id="crb-pill-1" checked />
  <label for="crb-pill-1">Monthly</label>
  <input type="radio" name="crb-pill" id="crb-pill-2" />
  <label for="crb-pill-2">Yearly</label>
  <input type="radio" name="crb-pill" id="crb-pill-3" />
  <label for="crb-pill-3">Forever</label>
  <span class="crb-pill-thumb"></span>
</fieldset>
```

**CSS:**
```css
.crb-pill {
  display: inline-flex; position: relative; padding: 4px;
  background: #1a1a28; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.crb-pill input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-pill label {
  flex: 1 1 0; min-width: 80px;
  position: relative; z-index: 1;
  padding: 8px 16px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  text-align: center;
  cursor: pointer; transition: color 0.25s;
  border-radius: 999px;
}
.crb-pill input:checked + label { color: #fff; }
.crb-pill-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(33.333% - 2.667px);
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  border-radius: 999px; z-index: 0;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
#crb-pill-2:checked ~ .crb-pill-thumb { transform: translateX(100%); }
#crb-pill-3:checked ~ .crb-pill-thumb { transform: translateX(200%); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 03. Magnetic Orb

**Type:** Pure CSS
**Description:** A single violet orb slides between options as if magnetically pulled — uses sibling-position state to drive the orb position with zero JS.

**HTML:**
```html
<fieldset class="crb-orb">
  <legend class="crb-sr">Speed</legend>
  <input type="radio" name="crb-orb" id="crb-orb-1" checked />
  <label for="crb-orb-1"><span class="crb-orb-dot"></span>Slow</label>
  <input type="radio" name="crb-orb" id="crb-orb-2" />
  <label for="crb-orb-2"><span class="crb-orb-dot"></span>Fast</label>
  <input type="radio" name="crb-orb" id="crb-orb-3" />
  <label for="crb-orb-3"><span class="crb-orb-dot"></span>Turbo</label>
</fieldset>
```

**CSS:**
```css
.crb-orb { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-orb input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-orb label {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 8px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.crb-orb-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #2a2a3e; box-shadow: inset 0 0 0 2px #444461;
  transition: background 0.35s cubic-bezier(0.65,0,0.35,1), box-shadow 0.35s, transform 0.35s;
}
.crb-orb input:checked + label { background: rgba(124,108,255,0.08); color: #fff; }
.crb-orb input:checked + label .crb-orb-dot {
  background: #7c6cff; box-shadow: inset 0 0 0 2px #7c6cff, 0 0 12px rgba(124,108,255,0.7);
  transform: scale(1.15);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 04. Ink Drop

**Type:** Pure CSS
**Description:** A drop of ink falls from above and fills the circle on selection — uses a clip-path to animate the liquid level from empty to full.

**HTML:**
```html
<fieldset class="crb-ink">
  <legend class="crb-sr">Theme</legend>
  <label><input type="radio" name="crb-ink" /><span></span>Light</label>
  <label><input type="radio" name="crb-ink" checked /><span></span>Dark</label>
  <label><input type="radio" name="crb-ink" /><span></span>Auto</label>
</fieldset>
```

**CSS:**
```css
.crb-ink { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-ink label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-ink input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-ink span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative; overflow: hidden;
  transition: border-color 0.25s;
}
.crb-ink span::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #06b6d4, #0ea5e9);
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.crb-ink input:checked + span { border-color: #06b6d4; }
.crb-ink input:checked + span::before { transform: translateY(0); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 05. Star Burst

**Type:** Pure CSS
**Description:** A 5-point star draws itself in via stroke-dasharray when selected — premium choice for ratings, favourites, and priority radios.

**HTML:**
```html
<fieldset class="crb-star">
  <legend class="crb-sr">Priority</legend>
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Low</label
  >
  <label
    ><input type="radio" name="crb-star" checked /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >Medium</label
  >
  <label
    ><input type="radio" name="crb-star" /><svg viewBox="0 0 24 24" aria-hidden="true">
      <polygon points="12,2 15,9 22,9 17,14 19,21 12,17 5,21 7,14 2,9 9,9" /></svg
    >High</label
  >
</fieldset>
```

**CSS:**
```css
.crb-star { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; }
.crb-star label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-star input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-star svg {
  width: 22px; height: 22px;
  fill: transparent;
  stroke: #444461; stroke-width: 1.5;
  transition: stroke 0.3s, fill 0.4s;
}
.crb-star input:checked + svg {
  stroke: #f5a623; fill: #f5a623;
  filter: drop-shadow(0 0 6px rgba(245,166,35,0.5));
  animation: crb-star-draw 0.6s ease-out;
}
@keyframes crb-star-draw {
  0%   { stroke-dasharray: 60; stroke-dashoffset: 60; fill: transparent; }
  60%  { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: transparent; }
  100% { stroke-dasharray: 60; stroke-dashoffset: 0;  fill: #f5a623; }
}

@media (prefers-reduced-motion: reduce) {
  .crb-star,
  .crb-star * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 06. Tilt Card

**Type:** Pure CSS
**Description:** Each option is a card that tilts up and glows when chosen — feature-rich plan picker for SaaS pricing pages.

**HTML:**
```html
<fieldset class="crb-tilt">
  <legend class="crb-sr">Choose plan</legend>
  <label><input type="radio" name="crb-tilt" /><strong>Solo</strong><em>$9/mo</em></label>
  <label><input type="radio" name="crb-tilt" checked /><strong>Team</strong><em>$29/mo</em></label>
  <label><input type="radio" name="crb-tilt" /><strong>Scale</strong><em>$99/mo</em></label>
</fieldset>
```

**CSS:**
```css
.crb-tilt { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-tilt input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tilt label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  padding: 12px 10px; border-radius: 10px;
  background: #1a1a28; border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
.crb-tilt label strong {
  font: 700 13px/1 system-ui, sans-serif; color: #fff;
}
.crb-tilt label em {
  font: 500 11px/1 monospace; color: #b8b6d4; font-style: normal;
}
.crb-tilt label:has(input:checked) {
  transform: translateY(-4px) rotate(-1deg);
  background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(167,139,250,0.1));
  border-color: rgba(124,108,255,0.5);
  box-shadow: 0 8px 24px rgba(124,108,255,0.3);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 07. Minimal Tick

**Type:** Pure CSS
**Description:** Clean radio that converts to a check tick on selection — instead of a dot, the indicator becomes a checkmark for a "confirmed" feel.

**HTML:**
```html
<fieldset class="crb-tick">
  <legend class="crb-sr">Layout</legend>
  <label><input type="radio" name="crb-tick" checked /><span></span>Compact</label>
  <label><input type="radio" name="crb-tick" /><span></span>Comfortable</label>
  <label><input type="radio" name="crb-tick" /><span></span>Spacious</label>
</fieldset>
```

**CSS:**
```css
.crb-tick { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-tick label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-tick input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tick span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.3s;
}
.crb-tick span::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg) scale(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-tick input:checked + span { background: #2ecc8a; border-color: #2ecc8a; }
.crb-tick input:checked + span::after { transform: translate(-50%, -60%) rotate(45deg) scale(1); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 08. Color Swatches

**Type:** Pure CSS
**Description:** Big circular colour swatch radios — for theme pickers and palette selectors. The selected swatch shows a contrasting inner ring.

**HTML:**
```html
<fieldset class="crb-swatch">
  <legend class="crb-sr">Colour</legend>
  <label style="--c: #7c6cff"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #ff6c8a"><input type="radio" name="crb-swatch" checked /><span></span></label>
  <label style="--c: #2ecc8a"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #f5a623"><input type="radio" name="crb-swatch" /><span></span></label>
  <label style="--c: #06b6d4"><input type="radio" name="crb-swatch" /><span></span></label>
</fieldset>
```

**CSS:**
```css
.crb-swatch { display: flex; gap: 10px; border: 0; padding: 0; }
.crb-swatch input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-swatch label { cursor: pointer; }
.crb-swatch span {
  display: block;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 0 #15151d, 0 0 0 0 var(--c);
  transition: box-shadow 0.3s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.crb-swatch label:hover span { transform: scale(1.08); }
.crb-swatch input:checked + span {
  box-shadow: inset 0 0 0 4px #15151d, 0 0 0 2px var(--c), 0 0 16px var(--c);
  transform: scale(1.12);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 09. Segmented Bar

**Type:** Pure CSS
**Description:** iOS-style segmented control with sliding pill background — sibling-position selectors drive the pill via translateX, no JS required.

**HTML:**
```html
<fieldset class="crb-seg">
  <legend class="crb-sr">View</legend>
  <input type="radio" name="crb-seg" id="crb-seg-1" checked />
  <label for="crb-seg-1">Day</label>
  <input type="radio" name="crb-seg" id="crb-seg-2" />
  <label for="crb-seg-2">Week</label>
  <input type="radio" name="crb-seg" id="crb-seg-3" />
  <label for="crb-seg-3">Month</label>
  <input type="radio" name="crb-seg" id="crb-seg-4" />
  <label for="crb-seg-4">Year</label>
  <span class="crb-seg-thumb"></span>
</fieldset>
```

**CSS:**
```css
.crb-seg {
  display: inline-flex; position: relative;
  padding: 3px; background: #0c0c12;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 8px;
}
.crb-seg input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-seg label {
  flex: 1 1 0; min-width: 64px;
  position: relative; z-index: 1;
  padding: 7px 14px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  text-align: center;
  cursor: pointer; transition: color 0.25s;
  border-radius: 6px;
}
.crb-seg input:checked + label { color: #fff; }
.crb-seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(25% - 1.5px);
  background: #1f1f2e; border: 1px solid rgba(124,108,255,0.4);
  border-radius: 6px; z-index: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.35s cubic-bezier(0.65,0,0.35,1);
}
#crb-seg-2:checked ~ .crb-seg-thumb { transform: translateX(100%); }
#crb-seg-3:checked ~ .crb-seg-thumb { transform: translateX(200%); }
#crb-seg-4:checked ~ .crb-seg-thumb { transform: translateX(300%); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 10. Neon Ring

**Type:** Pure CSS
**Description:** Outline ring lights up neon-green with a halo glow on check — built for dark dashboards and developer tools.

**HTML:**
```html
<fieldset class="crb-neon">
  <legend class="crb-sr">Mode</legend>
  <label><input type="radio" name="crb-neon" /><span></span>Idle</label>
  <label><input type="radio" name="crb-neon" checked /><span></span>Active</label>
  <label><input type="radio" name="crb-neon" /><span></span>Burst</label>
</fieldset>
```

**CSS:**
```css
.crb-neon { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-neon label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 monospace; color: #b8b6d4; cursor: pointer;
}
.crb-neon input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-neon span {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #2a4a3a; background: transparent;
  position: relative;
  transition: border-color 0.25s, box-shadow 0.3s;
}
.crb-neon span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #2ecc8a;
  opacity: 0; transform: scale(0.4);
  transition: opacity 0.25s, transform 0.3s;
}
.crb-neon input:checked + span {
  border-color: #2ecc8a;
  box-shadow: 0 0 12px rgba(46,204,138,0.6), inset 0 0 6px rgba(46,204,138,0.3);
}
.crb-neon input:checked + span::after {
  opacity: 1; transform: scale(1);
  box-shadow: 0 0 6px #2ecc8a;
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 11. Pricing Tier

**Type:** Pure CSS
**Description:** Pricing-card style with a "Best Value" featured ribbon revealed on selection — production-ready for SaaS plan pickers.

**HTML:**
```html
<fieldset class="crb-tier">
  <legend class="crb-sr">Plan tier</legend>
  <label>
    <input type="radio" name="crb-tier" />
    <span class="crb-tier-card">
      <strong>Basic</strong>
      <em>$5/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
  <label>
    <input type="radio" name="crb-tier" checked />
    <span class="crb-tier-card">
      <strong>Plus</strong>
      <em>$15/mo</em>
      <span class="crb-tier-ribbon">Best value</span>
    </span>
  </label>
</fieldset>
```

**CSS:**
```css
.crb-tier { display: flex; gap: 10px; border: 0; padding: 14px 0 0; }
.crb-tier input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-tier label { flex: 1; cursor: pointer; }
.crb-tier-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  position: relative;
  padding: 12px;
  background: #1a1a28; border: 1.5px solid rgba(255,255,255,0.06); border-radius: 10px;
  transition: border-color 0.3s, background 0.3s;
}
.crb-tier-card strong { font: 700 14px/1 system-ui, sans-serif; color: #fff; }
.crb-tier-card em { font: 600 12px/1 monospace; color: #a78bfa; font-style: normal; }
.crb-tier-ribbon {
  position: absolute;
  top: 0; left: 50%;
  padding: 4px 12px;
  border-radius: 999px;
  font: 700 9px/1 system-ui, sans-serif;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a); color: #fff;
  box-shadow: 0 2px 8px rgba(124,108,255,0.4);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
}
.crb-tier input:checked + .crb-tier-card {
  border-color: #7c6cff;
  background: linear-gradient(135deg, rgba(124,108,255,0.15), rgba(255,108,138,0.05));
}
.crb-tier input:checked + .crb-tier-card .crb-tier-ribbon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 12. Wave Fill

**Type:** Pure CSS
**Description:** Selected radio fills with a sine-wave water animation — uses a moving SVG-free CSS wave for an organic liquid feel.

**HTML:**
```html
<fieldset class="crb-wave">
  <legend class="crb-sr">Volume</legend>
  <label><input type="radio" name="crb-wave" /><span></span>Low</label>
  <label><input type="radio" name="crb-wave" checked /><span></span>Mid</label>
  <label><input type="radio" name="crb-wave" /><span></span>Loud</label>
</fieldset>
```

**CSS:**
```css
.crb-wave { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-wave label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-wave input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-wave span {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #444461;
  position: relative; overflow: hidden;
  background: transparent;
  transition: border-color 0.25s;
}
.crb-wave span::before {
  content: ''; position: absolute;
  top: 100%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at top, transparent 40%, #06b6d4 41%);
  transition: top 0.5s ease-out;
}
.crb-wave input:checked + span { border-color: #06b6d4; }
.crb-wave input:checked + span::before {
  top: -10%;
  animation: crb-wave-bob 1.4s ease-in-out infinite;
}
@keyframes crb-wave-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-wave,
  .crb-wave * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 13. Clip Mask

**Type:** Pure CSS
**Description:** The fill is revealed via an animated clip-path morph from a tiny triangle to a full circle — a unique geometric reveal.

**HTML:**
```html
<fieldset class="crb-clip">
  <legend class="crb-sr">Speed</legend>
  <label><input type="radio" name="crb-clip" /><span></span>0.5x</label>
  <label><input type="radio" name="crb-clip" /><span></span>1x</label>
  <label><input type="radio" name="crb-clip" checked /><span></span>2x</label>
</fieldset>
```

**CSS:**
```css
.crb-clip { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-clip label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 monospace; color: #cbd5e1; cursor: pointer;
}
.crb-clip input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-clip span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461;
  position: relative; overflow: hidden;
  transition: border-color 0.25s;
}
.crb-clip span::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6c8a, #f5a623);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 0.5s cubic-bezier(0.65,0,0.35,1);
}
.crb-clip input:checked + span { border-color: #ff6c8a; }
.crb-clip input:checked + span::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 14. Gradient Border

**Type:** Pure CSS
**Description:** Conic gradient border traces around the selected option — creates a slowly rotating rainbow ring on focus.

**HTML:**
```html
<fieldset class="crb-grad">
  <legend class="crb-sr">Tier</legend>
  <label><input type="radio" name="crb-grad" /><span class="crb-grad-card">Bronze</span></label>
  <label><input type="radio" name="crb-grad" /><span class="crb-grad-card">Silver</span></label>
  <label
    ><input type="radio" name="crb-grad" checked /><span class="crb-grad-card">Gold</span></label
  >
</fieldset>
```

**CSS:**
```css
.crb-grad { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-grad input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-grad label { cursor: pointer; }
.crb-grad-card {
  display: block; padding: 10px 18px;
  background: #1a1a28; border-radius: 8px;
  font: 600 12px/1 system-ui, sans-serif; color: #b8b6d4;
  position: relative; isolation: isolate;
  transition: color 0.25s;
}
.crb-grad-card::before {
  content: ''; position: absolute; inset: -2px; border-radius: 10px;
  background: conic-gradient(from 0deg, #7c6cff, #ff6c8a, #f5a623, #2ecc8a, #06b6d4, #7c6cff);
  z-index: -1; opacity: 0;
  animation: crb-grad-spin 4s linear infinite;
  transition: opacity 0.3s;
}
.crb-grad-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: #1a1a28; z-index: -1;
}
.crb-grad input:checked + .crb-grad-card { color: #fff; }
.crb-grad input:checked + .crb-grad-card::before { opacity: 1; }
@keyframes crb-grad-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .crb-grad,
  .crb-grad * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 15. Avatar Picker

**Type:** Pure CSS
**Description:** Round avatar tiles that scale up and glow on selection — perfect for character/profile pickers in onboarding flows.

**HTML:**
```html
<fieldset class="crb-avatar">
  <legend class="crb-sr">Avatar</legend>
  <label style="--c: #7c6cff"><input type="radio" name="crb-avatar" /><span>A</span></label>
  <label style="--c: #ff6c8a"><input type="radio" name="crb-avatar" checked /><span>B</span></label>
  <label style="--c: #2ecc8a"><input type="radio" name="crb-avatar" /><span>C</span></label>
  <label style="--c: #f5a623"><input type="radio" name="crb-avatar" /><span>D</span></label>
</fieldset>
```

**CSS:**
```css
.crb-avatar { display: flex; gap: 10px; border: 0; padding: 0; }
.crb-avatar input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-avatar label { cursor: pointer; }
.crb-avatar span {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c), white 30%));
  font: 700 14px/1 system-ui, sans-serif; color: #fff;
  box-shadow: 0 0 0 0 var(--c);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, opacity 0.25s;
  opacity: 0.55;
}
.crb-avatar label:hover span { opacity: 0.85; }
.crb-avatar input:checked + span {
  opacity: 1; transform: scale(1.15);
  box-shadow: 0 0 0 3px #15151d, 0 0 0 5px var(--c), 0 0 18px var(--c);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 16. Vertical Stack

**Type:** Pure CSS
**Description:** Vertical stack with a slim left accent rail that slides between options — perfect for settings panels and form sections.

**HTML:**
```html
<fieldset class="crb-stack">
  <legend class="crb-sr">Notifications</legend>
  <input type="radio" name="crb-stack" id="crb-stack-1" checked />
  <label for="crb-stack-1"><strong>All</strong><em>Every update</em></label>
  <input type="radio" name="crb-stack" id="crb-stack-2" />
  <label for="crb-stack-2"><strong>Important</strong><em>Critical only</em></label>
  <input type="radio" name="crb-stack" id="crb-stack-3" />
  <label for="crb-stack-3"><strong>Off</strong><em>Silent mode</em></label>
  <span class="crb-stack-rail"></span>
</fieldset>
```

**CSS:**
```css
.crb-stack {
  display: flex; flex-direction: column;
  position: relative; padding-left: 12px;
  border: 0; border-left: 2px solid rgba(255,255,255,0.06);
}
.crb-stack input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-stack label {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; transition: color 0.25s, background 0.25s;
}
.crb-stack label strong {
  font: 600 13px/1 system-ui, sans-serif; color: #cbd5e1;
}
.crb-stack label em {
  font: 500 11px/1 system-ui, sans-serif; color: #b8b6d4; font-style: normal;
}
.crb-stack input:checked + label strong { color: #fff; }
.crb-stack input:checked + label { background: rgba(124,108,255,0.06); }
.crb-stack-rail {
  position: absolute; left: -2px; top: 0;
  width: 2px; height: 33.333%;
  background: linear-gradient(180deg, #7c6cff, #a78bfa);
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
#crb-stack-2:checked ~ .crb-stack-rail { transform: translateY(100%); }
#crb-stack-3:checked ~ .crb-stack-rail { transform: translateY(200%); }

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 17. 3D Push

**Type:** Pure CSS
**Description:** Skeuomorphic depressed-button style — the selected option sinks into the surface with an inverted shadow for tactile feedback.

**HTML:**
```html
<fieldset class="crb-push">
  <legend class="crb-sr">Difficulty</legend>
  <label><input type="radio" name="crb-push" /><span>Easy</span></label>
  <label><input type="radio" name="crb-push" checked /><span>Hard</span></label>
  <label><input type="radio" name="crb-push" /><span>Expert</span></label>
</fieldset>
```

**CSS:**
```css
.crb-push { display: flex; gap: 8px; border: 0; padding: 0; }
.crb-push input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-push label { cursor: pointer; }
.crb-push span {
  display: block; padding: 10px 18px;
  background: linear-gradient(180deg, #2a2a3e, #1a1a28);
  color: #cbd5e1; font: 600 12px/1 system-ui, sans-serif;
  border-radius: 8px;
  box-shadow: 0 3px 0 #0c0c12, inset 0 1px 0 rgba(255,255,255,0.06);
  transform: translateY(0);
  transition: transform 0.12s, box-shadow 0.12s, color 0.2s, background 0.25s;
}
.crb-push input:checked + span {
  transform: translateY(3px);
  background: linear-gradient(180deg, #1a1a28, #0c0c12);
  color: #a78bfa;
  box-shadow: 0 0 0 #0c0c12, inset 0 2px 6px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(124,108,255,0.3);
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 18. Glow Pulse

**Type:** Pure CSS
**Description:** Selecting a radio fires a soft expanding halo that radiates outward from the dot — pure CSS, animation runs once per selection via a keyframed box-shadow ripple.

**HTML:**
```html
<fieldset class="crb-glow">
  <legend class="crb-sr">Reaction</legend>
  <label><input type="radio" name="crb-glow" /><span></span>Like</label>
  <label><input type="radio" name="crb-glow" /><span></span>Love</label>
  <label><input type="radio" name="crb-glow" /><span></span>Celebrate</label>
</fieldset>
```

**CSS:**
```css
.crb-glow { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.crb-glow label {
  display: flex; align-items: center; gap: 10px;
  font: 500 13px/1 system-ui, sans-serif; color: #cbd5e1; cursor: pointer;
}
.crb-glow input { appearance: none; -webkit-appearance: none; position: absolute; opacity: 0; }
.crb-glow span {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #444461; background: transparent;
  position: relative;
  transition: border-color 0.2s, background 0.25s;
}
.crb-glow span::after {
  content: ''; position: absolute; inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,108,138,0.7);
  pointer-events: none;
}
.crb-glow input:checked + span {
  background: linear-gradient(135deg, #ff6c8a, #a78bfa);
  border-color: transparent;
}
.crb-glow input:checked + span::after {
  animation: crb-glow-ripple 0.9s ease-out;
}
@keyframes crb-glow-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(255,108,138,0.7), 0 0 0 0  rgba(167,139,250,0.5); }
  60%  { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 14px rgba(255,108,138,0),   0 0 0 22px rgba(167,139,250,0); }
}

@media (prefers-reduced-motion: reduce) {
  .crb-glow,
  .crb-glow * {
    animation: none !important;
  }
}

.crb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

---
## 32 CSS Search Box Designs

URL: https://codefronts.com/components/css-search-boxes/
Description: 32 hand-coded CSS search boxes — minimal underline, voice, autocomplete dropdown, recent searches, ⌘K command palette and more. Semantic forms, drop-in ready.
Demo count: 32

### 01. Minimal Underline

**Type:** Pure CSS
**Description:** Borderless input with a thin bottom rule that animates outward from the centre on focus — the cleanest pattern that still signals interactivity.

**HTML:**
```html
<form class="csb-min" role="search">
  <label class="csb-sr" for="csb-min-i">Search</label>
  <input id="csb-min-i" type="search" name="q" placeholder="Search anything..." />
</form>
```

**CSS:**
```css
.csb-min { position: relative; display: inline-block; }
.csb-min input {
  width: 240px; padding: 8px 0;
  border: 0; outline: none;
  background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  border-bottom: 1px solid #2a2a3e;
}
.csb-min input::placeholder { color: #b8b6d4; }
.csb-min::after {
  content: ''; position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: #7c6cff;
  transform: translateX(-50%);
  transition: width 0.3s ease;
}
.csb-min:focus-within::after { width: 100%; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 02. Pill with Submit

**Type:** Pure CSS
**Description:** Rounded pill shell with an inline submit button — the de facto pattern for site search and product search.

**HTML:**
```html
<form class="csb-pill" role="search">
  <label class="csb-sr" for="csb-pill-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-pill-i" type="search" name="q" placeholder="Search products..." />
  <button type="submit">Search</button>
</form>
```

**CSS:**
```css
.csb-pill {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  transition: border-color 0.2s, background 0.2s;
}
.csb-pill:focus-within { border-color: #7c6cff; background: #1f1f28; }
.csb-pill svg { width: 16px; height: 16px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-pill input {
  flex: 1; min-width: 180px; padding: 8px 12px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-pill input::placeholder { color: #b8b6d4; }
.csb-pill button {
  padding: 8px 18px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  color: #fff; font: 600 12px/1 system-ui, sans-serif;
  border-radius: 999px;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 03. Glass Search

**Type:** Pure CSS
**Description:** Frosted-glass shell with backdrop blur — sits beautifully over hero images and gradient backgrounds.

**HTML:**
```html
<form class="csb-glass" role="search">
  <label class="csb-sr" for="csb-glass-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-glass-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-glass {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.25s, border-color 0.25s;
}
.csb-glass:focus-within { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.csb-glass svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 2; stroke-linecap: round; }
.csb-glass input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #fff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-glass input::placeholder { color: rgba(255,255,255,0.55); }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 04. Neon Outline

**Type:** Pure CSS
**Description:** Synthwave neon ring with a soft glow that intensifies on focus — built for dark dashboards and game UIs.

**HTML:**
```html
<form class="csb-neon" role="search">
  <label class="csb-sr" for="csb-neon-i">Search</label>
  <input id="csb-neon-i" type="search" name="q" placeholder="$ search_" />
</form>
```

**CSS:**
```css
.csb-neon {
  position: relative; display: inline-block;
}
.csb-neon input {
  width: 260px;
  padding: 12px 16px;
  background: #0a0014;
  border: 1.5px solid #6cffff;
  border-radius: 4px;
  color: #6cffff;
  font: 500 13px/1 'Courier New', monospace;
  letter-spacing: 0.06em;
  outline: none;
  box-shadow: 0 0 8px rgba(108,255,255,0.25), inset 0 0 6px rgba(108,255,255,0.1);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.csb-neon input::placeholder { color: rgba(108,255,255,0.5); }
.csb-neon input:focus {
  border-color: #ff6cff;
  box-shadow: 0 0 18px rgba(255,108,255,0.6), 0 0 36px rgba(255,108,255,0.2), inset 0 0 10px rgba(255,108,255,0.15);
  color: #ff6cff;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 05. Floating Label

**Type:** Pure CSS
**Description:** Material-style floating label that snaps up when the input is focused or filled — uses :placeholder-shown for a JS-free implementation.

**HTML:**
```html
<form class="csb-float" role="search">
  <input id="csb-float-i" type="search" name="q" placeholder=" " />
  <label for="csb-float-i">Search anything</label>
</form>
```

**CSS:**
```css
.csb-float {
  position: relative; display: inline-block;
}
.csb-float input {
  width: 240px; padding: 18px 14px 8px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-float input:focus { border-color: #7c6cff; }
.csb-float label {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #7a7899; font: 500 14px/1 system-ui, sans-serif;
  pointer-events: none;
  transition: top 0.2s, font-size 0.2s, color 0.2s;
}
.csb-float input:focus + label,
.csb-float input:not(:placeholder-shown) + label {
  top: 12px;
  font-size: 10.5px;
  color: #a78bfa;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
```

### 06. Caret Highlight

**Type:** Pure CSS
**Description:** On focus, a single accent line sweeps left-to-right across the bottom of the input — a one-shot reveal that signals "this field is active" without any perpetual motion.

**HTML:**
```html
<form class="csb-caret" role="search">
  <label class="csb-sr" for="csb-caret-i">Search</label>
  <input id="csb-caret-i" type="search" name="q" placeholder="Search collections..." />
</form>
```

**CSS:**
```css
.csb-caret {
  position: relative; display: inline-block;
  overflow: hidden;
  border-radius: 10px;
}
.csb-caret input {
  display: block; width: 240px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-caret input::placeholder { color: #b8b6d4; }
.csb-caret:focus-within input { border-color: #7c6cff; }
.csb-caret::after {
  content: ''; position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, #7c6cff 40%, #ff6c8a 60%, transparent);
  transform: translateX(-100%);
  pointer-events: none;
}
.csb-caret:focus-within::after {
  animation: csb-caret-sweep 0.7s cubic-bezier(0.65,0,0.35,1) forwards;
}
@keyframes csb-caret-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-caret,
  .csb-caret * {
    animation: none !important;
  }
}

```

### 07. Voice Search

**Type:** CSS + JS
**Description:** Microphone button that pulses while "listening" — toggles a recording state that demonstrates the visual feedback pattern (not real audio).

**HTML:**
```html
<form class="csb-voice" role="search">
  <label class="csb-sr" for="csb-voice-i">Search by voice</label>
  <input id="csb-voice-i" type="search" name="q" placeholder="Speak to search..." />
  <button type="button" class="csb-voice-mic" aria-label="Start voice input" aria-pressed="false">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <rect x="9" y="3" width="6" height="11" rx="3" />
      <path d="M5 11a7 7 0 0 0 14 0M12 18v3" />
    </svg>
  </button>
</form>
```

**CSS:**
```css
.csb-voice {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 4px;
}
.csb-voice:focus-within { border-color: #7c6cff; }
.csb-voice input {
  flex: 1; min-width: 180px; padding: 8px 12px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-voice input::placeholder { color: #b8b6d4; }
.csb-voice-mic {
  width: 34px; height: 34px;
  border: 0; cursor: pointer;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.2s;
}
.csb-voice-mic:hover { background: rgba(124,108,255,0.08); }
.csb-voice-mic svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-voice-mic[aria-pressed="true"] svg { stroke: #ff6c8a; }
.csb-voice-mic[aria-pressed="true"]::after {
  content: ''; position: absolute; inset: 4px;
  border-radius: 6px; border: 1.5px solid #ff6c8a;
  animation: csb-voice-pulse 1.2s ease-out infinite;
}
@keyframes csb-voice-pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-voice,
  .csb-voice * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-voice-mic').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var on = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', on ? 'false' : 'true');
  });
});
```

### 08. Loading Spinner

**Type:** CSS + JS
**Description:** Magnifying glass icon morphs into a spinner while the form is "searching" — paired with a class that simulates the loading state.

**HTML:**
```html
<form class="csb-load" role="search">
  <label class="csb-sr" for="csb-load-i">Search</label>
  <span class="csb-load-icon">
    <svg class="csb-load-glass" viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
    <span class="csb-load-spin"></span>
  </span>
  <input id="csb-load-i" type="search" name="q" placeholder="Press Enter to search..." />
</form>
```

**CSS:**
```css
.csb-load {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-load:focus-within { border-color: #7c6cff; }
.csb-load-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.csb-load-glass, .csb-load-spin {
  position: absolute; inset: 0;
  transition: opacity 0.2s;
}
.csb-load-glass { fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-load-spin {
  border: 2px solid rgba(124,108,255,0.2);
  border-top-color: #7c6cff;
  border-radius: 50%;
  opacity: 0;
  animation: csb-load-rot 0.7s linear infinite;
}
.csb-load.is-loading .csb-load-glass { opacity: 0; }
.csb-load.is-loading .csb-load-spin  { opacity: 1; }
.csb-load input {
  flex: 1; min-width: 200px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-load input::placeholder { color: #b8b6d4; }
@keyframes csb-load-rot { to { transform: rotate(360deg); } }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-load,
  .csb-load * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-load').forEach(function(form) {
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    form.classList.add('is-loading');
    setTimeout(function() { form.classList.remove('is-loading'); }, 1500);
  });
});
```

### 09. Clear-on-Type

**Type:** Pure CSS
**Description:** An × clear button appears as soon as the user types — pure CSS via :placeholder-shown, no JS state needed.

**HTML:**
```html
<form class="csb-clear" role="search">
  <label class="csb-sr" for="csb-clear-i">Search</label>
  <input id="csb-clear-i" type="search" name="q" placeholder="Type something..." />
  <button type="reset" class="csb-clear-x" aria-label="Clear search"></button>
</form>
```

**CSS:**
```css
.csb-clear {
  display: inline-flex; align-items: center;
  padding: 4px 6px 4px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-clear:focus-within { border-color: #7c6cff; }
.csb-clear input {
  width: 220px; padding: 8px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  -webkit-appearance: none; appearance: none;
}
.csb-clear input::-webkit-search-decoration,
.csb-clear input::-webkit-search-cancel-button { display: none; }
.csb-clear input::placeholder { color: #b8b6d4; }
.csb-clear-x {
  width: 24px; height: 24px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  position: relative;
  margin-left: 6px;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.2s, transform 0.2s;
}
.csb-clear input:not(:placeholder-shown) ~ .csb-clear-x {
  opacity: 1; transform: scale(1);
}
.csb-clear-x::before, .csb-clear-x::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 1.5px;
  background: #f0eeff; border-radius: 1px;
}
.csb-clear-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.csb-clear-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.csb-clear-x:hover { background: rgba(255,108,138,0.2); }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 10. Expanding Input

**Type:** CSS + JS
**Description:** Compact icon-only at rest; click expands it into a full-width input. Collapses back when blurred and empty.

**HTML:**
```html
<form class="csb-expand" role="search">
  <label class="csb-sr" for="csb-expand-i">Search</label>
  <button type="button" class="csb-expand-toggle" aria-label="Open search">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  </button>
  <input id="csb-expand-i" type="search" name="q" placeholder="Type to search..." />
</form>
```

**CSS:**
```css
.csb-expand {
  display: inline-flex; align-items: center;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 4px;
  transition: border-color 0.2s;
}
.csb-expand:focus-within, .csb-expand.is-open { border-color: #7c6cff; }
.csb-expand-toggle {
  width: 36px; height: 36px;
  border: 0; cursor: pointer; background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.csb-expand-toggle svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-expand input {
  width: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  transition: width 0.35s cubic-bezier(0.65,0,0.35,1), padding 0.35s;
}
.csb-expand input::placeholder { color: #b8b6d4; }
.csb-expand.is-open input { width: 200px; padding: 0 14px; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

**JS:**
```js
document.querySelectorAll('.csb-expand').forEach(function(form) {
  var toggle = form.querySelector('.csb-expand-toggle');
  var input  = form.querySelector('input');
  toggle.addEventListener('click', function() {
    form.classList.add('is-open');
    setTimeout(function() { input.focus(); }, 200);
  });
  input.addEventListener('blur', function() {
    if (!input.value) form.classList.remove('is-open');
  });
});
```

### 11. Inline Suggestions

**Type:** CSS + JS
**Description:** Real autocomplete dropdown — keyboard-navigable (↑ ↓ Enter Esc) with five live results that filter as you type.

**HTML:**
```html
<form class="csb-sug" role="search" autocomplete="off">
  <label class="csb-sr" for="csb-sug-i">Search</label>
  <input
    id="csb-sug-i"
    type="search"
    name="q"
    placeholder="Try 'flex' or 'grid'"
    aria-controls="csb-sug-list"
    aria-expanded="false"
    aria-autocomplete="list"
  />
  <ul id="csb-sug-list" class="csb-sug-list" role="listbox" hidden>
    <li role="option">Flex container</li>
    <li role="option">Flex item</li>
    <li role="option">Grid container</li>
    <li role="option">Grid template</li>
    <li role="option">Grid auto-flow</li>
  </ul>
</form>
```

**CSS:**
```css
.csb-sug { position: relative; display: inline-block; }
.csb-sug input {
  width: 240px; padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s, border-radius 0.15s;
}
.csb-sug input::placeholder { color: #b8b6d4; }
.csb-sug input:focus { border-color: #7c6cff; }
.csb-sug input[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.csb-sug-list {
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: #1a1a28;
  border: 1px solid #7c6cff; border-top: 0;
  border-radius: 0 0 10px 10px;
  z-index: 10;
  max-height: 220px; overflow-y: auto;
}
.csb-sug-list li {
  padding: 8px 10px;
  font: 500 13px/1.2 system-ui, sans-serif;
  color: #cbd5e1; cursor: pointer;
  border-radius: 6px;
}
.csb-sug-list li[aria-selected="true"], .csb-sug-list li:hover {
  background: rgba(124,108,255,0.12); color: #fff;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

**JS:**
```js
document.querySelectorAll('.csb-sug').forEach(function(form) {
  var input = form.querySelector('input');
  var list  = form.querySelector('.csb-sug-list');
  var items = Array.from(list.querySelectorAll('li'));
  var idx = -1;
  function open()  { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  input.setAttribute('aria-expanded', 'false'); idx = -1; items.forEach(function(li){ li.removeAttribute('aria-selected'); }); }
  function filter(q) {
    var any = false;
    items.forEach(function(li) {
      var match = !q || li.textContent.toLowerCase().includes(q.toLowerCase());
      li.style.display = match ? '' : 'none';
      if (match) any = true;
    });
    return any;
  }
  function select(n) {
    items.forEach(function(li){ li.removeAttribute('aria-selected'); });
    var visible = items.filter(function(li){ return li.style.display !== 'none'; });
    if (visible.length === 0) return;
    idx = (n + visible.length) % visible.length;
    visible[idx].setAttribute('aria-selected', 'true');
  }
  input.addEventListener('focus',  function() { if (filter(input.value)) open(); });
  input.addEventListener('input',  function() { if (filter(input.value)) open(); else close(); });
  input.addEventListener('blur',   function() { setTimeout(close, 150); });
  input.addEventListener('keydown', function(e) {
    if (list.hidden) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); select(idx + 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); select(idx - 1); }
    else if (e.key === 'Escape')  { close(); input.blur(); }
    else if (e.key === 'Enter')   {
      var visible = items.filter(function(li){ return li.style.display !== 'none'; });
      if (idx >= 0 && visible[idx]) { e.preventDefault(); input.value = visible[idx].textContent; close(); }
    }
  });
  list.addEventListener('mousedown', function(e) {
    var li = e.target.closest('li[role="option"]');
    if (li) { input.value = li.textContent; close(); }
  });
});
```

### 12. Keyboard Hint

**Type:** Pure CSS
**Description:** A subtle ⌘K kbd badge sits inside the input as a hint to power users — fades when the field is focused.

**HTML:**
```html
<form class="csb-kbd" role="search">
  <label class="csb-sr" for="csb-kbd-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-kbd-i" type="search" name="q" placeholder="Search the docs..." />
  <kbd class="csb-kbd-key">⌘ K</kbd>
</form>
```

**CSS:**
```css
.csb-kbd {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 8px 9px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-kbd:focus-within { border-color: #7c6cff; }
.csb-kbd svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-kbd input {
  width: 200px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-kbd input::placeholder { color: #b8b6d4; }
.csb-kbd-key {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 3px 7px;
  color: #b8b6d4;
  background: #0c0c12;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 5px;
  transition: opacity 0.2s;
}
.csb-kbd:focus-within .csb-kbd-key { opacity: 0.3; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 13. Tagged Filter

**Type:** CSS + JS
**Description:** Active filter chips live inside the search bar — click × on a chip to remove it. Real interaction, not a mock.

**HTML:**
```html
<form class="csb-tag" role="search">
  <label class="csb-sr" for="csb-tag-i">Search with filters</label>
  <span class="csb-tag-chip"
    >CSS<button type="button" aria-label="Remove CSS filter">×</button></span
  >
  <span class="csb-tag-chip"
    >React<button type="button" aria-label="Remove React filter">×</button></span
  >
  <input id="csb-tag-i" type="search" name="q" placeholder="Add filters..." />
</form>
```

**CSS:**
```css
.csb-tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  max-width: 320px;
}
.csb-tag:focus-within { border-color: #7c6cff; }
.csb-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  border-radius: 999px;
  font: 600 11px/1 system-ui, sans-serif;
}
.csb-tag-chip button {
  width: 16px; height: 16px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: #cbd5e1;
  border-radius: 50%;
  font: 400 14px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.csb-tag-chip button:hover { background: rgba(255,108,138,0.3); color: #fff; }
.csb-tag input {
  flex: 1; min-width: 90px; padding: 4px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-tag input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

**JS:**
```js
document.querySelectorAll('.csb-tag-chip button').forEach(function(btn) {
  btn.addEventListener('click', function() { btn.closest('.csb-tag-chip').remove(); });
});
```

### 14. Recent Searches

**Type:** CSS + JS
**Description:** Dropdown of recent queries on focus, with a "Clear all" action — production-grade pattern for site search and command palettes.

**HTML:**
```html
<form class="csb-recent" role="search" autocomplete="off">
  <label class="csb-sr" for="csb-recent-i">Search</label>
  <input
    id="csb-recent-i"
    type="search"
    name="q"
    placeholder="Search history..."
    aria-controls="csb-recent-list"
    aria-expanded="false"
  />
  <div id="csb-recent-list" class="csb-recent-list" role="listbox" hidden>
    <div class="csb-recent-head">
      <span>Recent</span>
      <button type="button" class="csb-recent-clear">Clear all</button>
    </div>
    <button type="button" role="option">flexbox layouts</button>
    <button type="button" role="option">aurora gradient</button>
    <button type="button" role="option">accessible modal</button>
  </div>
</form>
```

**CSS:**
```css
.csb-recent { position: relative; display: inline-block; }
.csb-recent input {
  width: 260px; padding: 10px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
}
.csb-recent input::placeholder { color: #b8b6d4; }
.csb-recent input:focus { border-color: #7c6cff; }
.csb-recent input[aria-expanded="true"] { border-radius: 10px 10px 0 0; border-bottom-color: transparent; }
.csb-recent-list {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #1a1a28;
  border: 1px solid #7c6cff; border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 6px;
  z-index: 10;
}
.csb-recent-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  font: 600 10px/1 'JetBrains Mono', monospace;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #b8b6d4;
}
.csb-recent-clear {
  border: 0; background: transparent;
  color: #ff6c8a; cursor: pointer;
  font: 600 10px/1 'JetBrains Mono', monospace;
}
.csb-recent-list [role="option"] {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px;
  border: 0; cursor: pointer;
  background: transparent;
  color: #cbd5e1; font: 500 13px/1 system-ui, sans-serif;
  border-radius: 6px;
}
.csb-recent-list [role="option"]:hover { background: rgba(124,108,255,0.12); color: #fff; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

**JS:**
```js
document.querySelectorAll('.csb-recent').forEach(function(form) {
  var input = form.querySelector('input');
  var list  = form.querySelector('.csb-recent-list');
  function open()  { list.hidden = false; input.setAttribute('aria-expanded', 'true'); }
  function close() { list.hidden = true;  input.setAttribute('aria-expanded', 'false'); }
  input.addEventListener('focus', open);
  input.addEventListener('blur', function() { setTimeout(close, 150); });
  list.addEventListener('mousedown', function(e) {
    var btn = e.target.closest('[role="option"]');
    if (btn) { input.value = btn.textContent; close(); }
  });
  var clear = form.querySelector('.csb-recent-clear');
  if (clear) clear.addEventListener('click', function() {
    form.querySelectorAll('[role="option"]').forEach(function(b){ b.remove(); });
  });
});
```

### 15. Animated Placeholder

**Type:** Pure CSS
**Description:** Placeholder text cycles through example queries on a typewriter loop — pure CSS using steps() animation on a marquee track.

**HTML:**
```html
<form class="csb-anim" role="search">
  <label class="csb-sr" for="csb-anim-i">Search</label>
  <span class="csb-anim-placeholder" aria-hidden="true">
    <span>Search "flexbox"...</span>
    <span>Search "modals"...</span>
    <span>Search "animations"...</span>
    <span>Search "flexbox"...</span>
  </span>
  <input id="csb-anim-i" type="search" name="q" />
</form>
```

**CSS:**
```css
.csb-anim { position: relative; display: inline-block; }
.csb-anim input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none; position: relative; z-index: 1;
}
.csb-anim input:focus { border-color: #7c6cff; }
.csb-anim-placeholder {
  position: absolute;
  left: 14px; right: 14px; top: 0; bottom: 0;
  overflow: hidden; pointer-events: none;
  display: flex; align-items: center;
}
.csb-anim-placeholder span {
  flex-shrink: 0; width: 100%;
  font: 500 14px/1 system-ui, sans-serif; color: #b8b6d4;
  white-space: nowrap;
}
.csb-anim:not(:focus-within) .csb-anim-placeholder span:first-child {
  animation: csb-anim-cycle 9s steps(1) infinite;
}
.csb-anim input:not(:placeholder-shown) ~ .csb-anim-placeholder,
.csb-anim:focus-within .csb-anim-placeholder { display: none; }
@keyframes csb-anim-cycle {
  0%, 33%   { margin-left: 0; }
  33.5%, 66% { margin-left: -100%; }
  66.5%, 99% { margin-left: -200%; }
  100%       { margin-left: 0; }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-anim,
  .csb-anim * {
    animation: none !important;
  }
}

```

### 16. Avatar Search

**Type:** Pure CSS
**Description:** Search bar with the logged-in user avatar at the right edge — common in dashboards. Subtle but communicates "this search is yours".

**HTML:**
```html
<form class="csb-avatar" role="search">
  <label class="csb-sr" for="csb-avatar-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-avatar-i" type="search" name="q" placeholder="Search your workspace..." />
  <span class="csb-avatar-pic" aria-hidden="true">VC</span>
</form>
```

**CSS:**
```css
.csb-avatar {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 5px 5px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  min-width: 280px;
}
.csb-avatar:focus-within { border-color: #7c6cff; }
.csb-avatar svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-avatar input {
  flex: 1; padding: 8px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-avatar input::placeholder { color: #b8b6d4; }
.csb-avatar-pic {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff; font: 700 11px/1 system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 17. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard offset shadow, zero radius, bold mono — a search bar that doesn't apologize for itself.

**HTML:**
```html
<form class="csb-brut" role="search">
  <label class="csb-sr" for="csb-brut-i">Search</label>
  <input id="csb-brut-i" type="search" name="q" placeholder="SEARCH..." />
  <button type="submit">GO</button>
</form>
```

**CSS:**
```css
.csb-brut {
  display: inline-flex; align-items: stretch;
  background: #f0eeff;
  border: 2.5px solid #1a1a2e;
  box-shadow: 5px 5px 0 #ff6c8a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.csb-brut:focus-within { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #ff6c8a; }
.csb-brut input {
  width: 220px; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #1a1a2e; font: 700 13px/1 'Courier New', monospace;
  letter-spacing: 0.08em;
}
.csb-brut input::placeholder { color: rgba(26,26,46,0.5); }
.csb-brut button {
  padding: 0 20px;
  border: 0; border-left: 2.5px solid #1a1a2e;
  cursor: pointer;
  background: #1a1a2e; color: #fff;
  font: 800 12px/1 'Courier New', monospace;
  letter-spacing: 0.12em;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 18. Compact Toolbar

**Type:** Pure CSS
**Description:** Search slotted between filter chips and an action button — the toolbar pattern most apps actually need.

**HTML:**
```html
<form class="csb-tool" role="search">
  <span class="csb-tool-chip" role="button" tabindex="0">All</span>
  <label class="csb-sr" for="csb-tool-i">Search</label>
  <input id="csb-tool-i" type="search" name="q" placeholder="Search..." />
  <button type="button" class="csb-tool-action" aria-label="Filters">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M7 12h10M11 18h2" /></svg>
  </button>
</form>
```

**CSS:**
```css
.csb-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-tool:focus-within { border-color: #7c6cff; }
.csb-tool-chip {
  padding: 5px 10px;
  background: rgba(124,108,255,0.15);
  color: #a78bfa;
  border-radius: 6px;
  font: 600 11px/1 system-ui, sans-serif;
  cursor: pointer;
}
.csb-tool input {
  flex: 1; min-width: 160px; padding: 5px 6px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 13px/1 system-ui, sans-serif;
}
.csb-tool input::placeholder { color: #b8b6d4; }
.csb-tool-action {
  width: 28px; height: 28px;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.csb-tool-action:hover { background: rgba(255,255,255,0.1); }
.csb-tool-action svg { width: 14px; height: 14px; fill: none; stroke: #cbd5e1; stroke-width: 2; stroke-linecap: round; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 19. Hero Search

**Type:** Pure CSS
**Description:** Big landing-page search with a subtle gradient halo behind it — the kind you put front-and-centre on a marketing site.

**HTML:**
```html
<form class="csb-hero" role="search">
  <label class="csb-sr" for="csb-hero-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-hero-i" type="search" name="q" placeholder="What are you looking for?" />
  <button type="submit">Search</button>
</form>
```

**CSS:**
```css
.csb-hero {
  position: relative; display: inline-flex; align-items: center;
  padding: 5px 5px 5px 14px; gap: 10px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  isolation: isolate;
  max-width: 100%;
}
.csb-hero::before {
  content: ''; position: absolute; inset: -20px; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(124,108,255,0.4), transparent 70%);
  filter: blur(20px); opacity: 0.5;
  transition: opacity 0.3s;
}
.csb-hero:focus-within::before { opacity: 1; }
.csb-hero svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-hero input {
  width: 180px; padding: 10px 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 15px/1 system-ui, sans-serif;
  min-width: 0;
}
.csb-hero input::placeholder { color: #b8b6d4; }
.csb-hero button {
  padding: 9px 16px; flex-shrink: 0;
  border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: #fff; font: 600 13px/1 system-ui, sans-serif;
  border-radius: 10px;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 20. Side Indicator

**Type:** Pure CSS
**Description:** A 3px coloured rail on the left edge of the input shifts colour on focus — minimal but unmistakable signal.

**HTML:**
```html
<form class="csb-side" role="search">
  <label class="csb-sr" for="csb-side-i">Search</label>
  <input id="csb-side-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-side {
  position: relative; display: inline-block;
}
.csb-side input {
  width: 240px; padding: 11px 14px 11px 18px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 8px 8px 0;
  border-left: 3px solid #2a2a3e;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-left-color 0.25s;
}
.csb-side input::placeholder { color: #b8b6d4; }
.csb-side input:focus { border-left-color: #2ecc8a; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 21. Drop Shadow Float

**Type:** Pure CSS
**Description:** Subtle elevation lift on focus — a soft transform + larger drop-shadow makes the input feel like it raised toward the user.

**HTML:**
```html
<form class="csb-float-s" role="search">
  <label class="csb-sr" for="csb-float-s-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-float-s-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-float-s {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transform: translateY(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.csb-float-s:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,108,255,0.25), 0 2px 4px rgba(0,0,0,0.3);
  border-color: rgba(124,108,255,0.5);
}
.csb-float-s svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-float-s input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-float-s input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 22. Search + Filter

**Type:** Pure CSS
**Description:** Two-column shell: input on the left, scope dropdown on the right, divided by a vertical hairline. The pattern of choice for ecommerce.

**HTML:**
```html
<form class="csb-filter" role="search">
  <label class="csb-sr" for="csb-filter-i">Search</label>
  <input id="csb-filter-i" type="search" name="q" placeholder="Search products..." />
  <label class="csb-sr" for="csb-filter-s">Category</label>
  <select id="csb-filter-s" name="cat">
    <option>All</option>
    <option>Components</option>
    <option>Tools</option>
    <option>Generators</option>
  </select>
</form>
```

**CSS:**
```css
.csb-filter {
  display: inline-flex; align-items: stretch;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-filter:focus-within { border-color: #7c6cff; }
.csb-filter input {
  flex: 1; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  min-width: 200px;
}
.csb-filter input::placeholder { color: #b8b6d4; }
.csb-filter select {
  padding: 11px 14px;
  border: 0; border-left: 1px solid rgba(255,255,255,0.08);
  outline: none; cursor: pointer;
  background: transparent;
  color: #a78bfa; font: 600 12px/1 system-ui, sans-serif;
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%23a78bfa' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 23. Inline Loading Bar

**Type:** CSS + JS
**Description:** A thin progress bar slides across the bottom of the input while results are loading — gentler than a full spinner for live-search UX.

**HTML:**
```html
<form class="csb-bar" role="search">
  <label class="csb-sr" for="csb-bar-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-bar-i" type="search" name="q" placeholder="Type to search..." />
  <span class="csb-bar-progress" aria-hidden="true"></span>
</form>
```

**CSS:**
```css
.csb-bar {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.csb-bar:focus-within { border-color: #7c6cff; }
.csb-bar svg { width: 15px; height: 15px; fill: none; stroke: #7a7899; stroke-width: 2; stroke-linecap: round; }
.csb-bar input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-bar input::placeholder { color: #b8b6d4; }
.csb-bar-progress {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 30%;
  background: linear-gradient(90deg, transparent, #7c6cff, transparent);
  transform: translateX(-100%);
  transition: opacity 0.2s;
  opacity: 0;
}
.csb-bar.is-loading .csb-bar-progress {
  opacity: 1;
  animation: csb-bar-slide 1.2s linear infinite;
}
@keyframes csb-bar-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-bar,
  .csb-bar * {
    animation: none !important;
  }
}

```

**JS:**
```js
document.querySelectorAll('.csb-bar').forEach(function(form) {
  var input = form.querySelector('input');
  var t;
  input.addEventListener('input', function() {
    form.classList.add('is-loading');
    clearTimeout(t);
    t = setTimeout(function() { form.classList.remove('is-loading'); }, 900);
  });
});
```

### 24. Dual Tone Outline

**Type:** Pure CSS
**Description:** The border is split into two halves — left edge stays neutral while the right half lights up violet on focus. A subtle "active half" cue.

**HTML:**
```html
<form class="csb-dual" role="search">
  <label class="csb-sr" for="csb-dual-i">Search</label>
  <input id="csb-dual-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-dual {
  position: relative; display: inline-block;
  padding: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 50%, #7c6cff 50%, #7c6cff 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border-radius: 10px;
  transition: background-position 0.4s ease;
}
.csb-dual:focus-within { background-position: 100% 0%; }
.csb-dual input {
  display: block;
  width: 240px; padding: 11px 14px;
  border: 0; outline: none;
  background: #1a1a28;
  border-radius: 9px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-dual input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 25. Glitch Search

**Type:** Pure CSS
**Description:** RGB-split glitch shudders across the placeholder when focused — leans into a hacker / dev-tool aesthetic.

**HTML:**
```html
<form class="csb-glitch" role="search">
  <label class="csb-sr" for="csb-glitch-i">Search</label>
  <input id="csb-glitch-i" type="search" name="q" placeholder="$ search //" />
</form>
```

**CSS:**
```css
.csb-glitch {
  position: relative; display: inline-block;
}
.csb-glitch input {
  width: 240px; padding: 11px 14px;
  background: #0c0c12;
  border: 1px solid rgba(46,204,138,0.4);
  border-radius: 4px;
  color: #2ecc8a; font: 500 13px/1 'Courier New', monospace;
  letter-spacing: 0.06em;
  outline: none;
  transition: border-color 0.2s;
}
.csb-glitch input::placeholder { color: rgba(46,204,138,0.6); }
.csb-glitch input:focus {
  border-color: #ff6c8a;
  animation: csb-glitch-shake 0.4s steps(2);
}
@keyframes csb-glitch-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); text-shadow: 2px 0 #ff6c8a, -2px 0 #06b6d4; }
  40%      { transform: translateX(2px);  text-shadow: -2px 0 #ff6c8a, 2px 0 #06b6d4; }
  60%      { transform: translateX(-1px); text-shadow: 1px 0 #ff6c8a, -1px 0 #06b6d4; }
  80%      { transform: translateX(1px);  text-shadow: 0 0 transparent; }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-glitch,
  .csb-glitch * {
    animation: none !important;
  }
}

```

### 26. Compact Mobile

**Type:** Pure CSS
**Description:** Mobile-first compact pattern — generous tap target, soft rounded chrome, single-line visual rhythm. Ideal for thumb-reach.

**HTML:**
```html
<form class="csb-mob" role="search">
  <label class="csb-sr" for="csb-mob-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-mob-i" type="search" name="q" inputmode="search" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-mob {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #2a2a3e;
  border-radius: 14px;
  min-height: 44px;
  min-width: 280px;
}
.csb-mob:focus-within { background: #1f1f28; box-shadow: 0 0 0 2px rgba(124,108,255,0.4); }
.csb-mob svg { width: 18px; height: 18px; fill: none; stroke: #b8b6d4; stroke-width: 2; stroke-linecap: round; }
.csb-mob input {
  flex: 1; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 16px/1 system-ui, sans-serif;
}
.csb-mob input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 27. Focus Ring Bloom

**Type:** Pure CSS
**Description:** A soft expanding violet halo blooms outward when the input gains focus — disappears smoothly on blur.

**HTML:**
```html
<form class="csb-bloom" role="search">
  <label class="csb-sr" for="csb-bloom-i">Search</label>
  <input id="csb-bloom-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-bloom {
  position: relative; display: inline-block;
}
.csb-bloom input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.2s;
}
.csb-bloom input::placeholder { color: #b8b6d4; }
.csb-bloom::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(124,108,255,0.6);
}
.csb-bloom:focus-within input { border-color: #7c6cff; }
.csb-bloom:focus-within::after {
  animation: csb-bloom-pulse 1.6s ease-out infinite;
}
@keyframes csb-bloom-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,108,255,0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(124,108,255,0); }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-bloom,
  .csb-bloom * {
    animation: none !important;
  }
}

```

### 28. Combo with Scope

**Type:** CSS + JS
**Description:** Scope dropdown ("All / People / Posts / Files") inline with the input — the pattern Slack, Linear, and GitHub all converged on.

**HTML:**
```html
<form class="csb-scope" role="search">
  <button type="button" class="csb-scope-btn" aria-haspopup="listbox" aria-expanded="false">
    <span>All</span>
    <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" /></svg>
  </button>
  <ul class="csb-scope-list" role="listbox" hidden>
    <li role="option" aria-selected="true">All</li>
    <li role="option">People</li>
    <li role="option">Posts</li>
    <li role="option">Files</li>
  </ul>
  <label class="csb-sr" for="csb-scope-i">Search</label>
  <input id="csb-scope-i" type="search" name="q" placeholder="Search workspace..." />
</form>
```

**CSS:**
```css
.csb-scope {
  position: relative; display: inline-flex; align-items: stretch;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.csb-scope:focus-within { border-color: #7c6cff; }
.csb-scope-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border: 0; border-right: 1px solid rgba(255,255,255,0.08);
  background: transparent; cursor: pointer;
  color: #a78bfa; font: 600 12px/1 system-ui, sans-serif;
}
.csb-scope-btn svg { width: 10px; height: 10px; fill: none; stroke: #a78bfa; stroke-width: 1.5; }
.csb-scope-list {
  position: absolute; top: calc(100% + 4px); left: 0;
  margin: 0; padding: 4px;
  list-style: none;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  z-index: 10;
  min-width: 120px;
}
.csb-scope-list li {
  padding: 7px 10px;
  font: 500 13px/1 system-ui, sans-serif;
  color: #cbd5e1; cursor: pointer;
  border-radius: 5px;
}
.csb-scope-list li[aria-selected="true"] { color: #a78bfa; }
.csb-scope-list li:hover { background: rgba(124,108,255,0.12); }
.csb-scope input {
  flex: 1; padding: 11px 14px;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  min-width: 200px;
}
.csb-scope input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

**JS:**
```js
document.querySelectorAll('.csb-scope').forEach(function(form) {
  var btn  = form.querySelector('.csb-scope-btn');
  var list = form.querySelector('.csb-scope-list');
  var label = btn.querySelector('span');
  btn.addEventListener('click', function(e) {
    e.stopPropagation();
    var open = list.hidden;
    list.hidden = !open;
    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  list.addEventListener('click', function(e) {
    var li = e.target.closest('li[role="option"]');
    if (!li) return;
    list.querySelectorAll('li').forEach(function(x){ x.removeAttribute('aria-selected'); });
    li.setAttribute('aria-selected', 'true');
    label.textContent = li.textContent;
    list.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
  });
  document.addEventListener('click', function() {
    list.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
  });
});
```

### 29. Inset Pressed

**Type:** Pure CSS
**Description:** Skeuomorphic inset shadow makes the input look pressed into the surface — a return to depth without the kitsch.

**HTML:**
```html
<form class="csb-inset" role="search">
  <label class="csb-sr" for="csb-inset-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-inset-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-inset {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: #15151d;
  border: 1px solid #0c0c12;
  border-radius: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04);
  transition: box-shadow 0.2s;
}
.csb-inset:focus-within {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 0 0 2px rgba(124,108,255,0.3);
}
.csb-inset svg { width: 15px; height: 15px; fill: none; stroke: #6b6987; stroke-width: 2; stroke-linecap: round; }
.csb-inset input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-inset input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 30. Border Trace

**Type:** Pure CSS
**Description:** On focus, two halves of a border trace simultaneously around the input — a clean line-drawing reveal. No box-shadow, no gradients.

**HTML:**
```html
<form class="csb-trace" role="search">
  <label class="csb-sr" for="csb-trace-i">Search</label>
  <input id="csb-trace-i" type="search" name="q" placeholder="Search..." />
  <span class="csb-trace-tl"></span>
  <span class="csb-trace-br"></span>
</form>
```

**CSS:**
```css
.csb-trace {
  position: relative; display: inline-block;
  padding: 0;
}
.csb-trace input {
  width: 240px; padding: 11px 14px;
  background: #1a1a28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.csb-trace:focus-within input { border-color: transparent; }
.csb-trace input::placeholder { color: #b8b6d4; }
.csb-trace-tl, .csb-trace-br {
  position: absolute; pointer-events: none;
  border-color: #7c6cff;
  border-radius: 8px;
}
.csb-trace-tl {
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 1.5px solid transparent;
  border-left: 1.5px solid transparent;
}
.csb-trace-br {
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-bottom: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
}
.csb-trace:focus-within .csb-trace-tl {
  width: 100%; height: 100%;
  border-top-color: #7c6cff;
  border-left-color: #7c6cff;
  transition: width 0.25s ease, height 0.25s ease 0.25s;
}
.csb-trace:focus-within .csb-trace-br {
  width: 100%; height: 100%;
  border-bottom-color: #7c6cff;
  border-right-color: #7c6cff;
  transition: width 0.25s ease 0.5s, height 0.25s ease 0.25s;
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 31. Floating Card

**Type:** Pure CSS
**Description:** The whole search bar lifts off the page on focus with a soft shadow and a tiny scale-up — a tactile "pick me up" feel.

**HTML:**
```html
<form class="csb-card" role="search">
  <label class="csb-sr" for="csb-card-i">Search</label>
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input id="csb-card-i" type="search" name="q" placeholder="Search..." />
</form>
```

**CSS:**
```css
.csb-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #1f1f28;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transform: scale(1) translateY(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.csb-card:focus-within {
  transform: scale(1.02) translateY(-3px);
  box-shadow: 0 12px 32px rgba(124,108,255,0.3), 0 4px 8px rgba(0,0,0,0.4);
}
.csb-card svg { width: 16px; height: 16px; fill: none; stroke: #a78bfa; stroke-width: 2; stroke-linecap: round; }
.csb-card input {
  width: 220px; padding: 0;
  border: 0; outline: none; background: transparent;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
}
.csb-card input::placeholder { color: #b8b6d4; }

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

```

### 32. Aurora Drift

**Type:** Pure CSS
**Description:** A soft aurora-style gradient blob drifts gently behind the input on a slow, subtle loop — the premium-feel signal without spinning chrome aberration.

**HTML:**
```html
<form class="csb-aurora" role="search">
  <label class="csb-sr" for="csb-aurora-i">Search</label>
  <input id="csb-aurora-i" type="search" name="q" placeholder="Search premium..." />
</form>
```

**CSS:**
```css
.csb-aurora {
  position: relative; display: inline-block;
  padding: 4px;
  border-radius: 14px;
  background: #15151d;
  overflow: hidden;
  isolation: isolate;
}
.csb-aurora::before {
  content: ''; position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 220%;
  background:
    radial-gradient(ellipse 240px 120px at 20% 50%, rgba(124,108,255,0.55), transparent 60%),
    radial-gradient(ellipse 200px 100px at 60% 50%, rgba(255,108,138,0.45), transparent 60%),
    radial-gradient(ellipse 220px 120px at 100% 50%, rgba(46,204,138,0.35), transparent 60%);
  filter: blur(18px);
  z-index: -1;
  animation: csb-aurora-drift 14s ease-in-out infinite;
  opacity: 0.85;
}
.csb-aurora input {
  display: block;
  width: 240px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.06);
  outline: none;
  background: rgba(21,21,29,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  color: #f0eeff; font: 500 14px/1 system-ui, sans-serif;
  transition: border-color 0.25s;
}
.csb-aurora:focus-within input { border-color: rgba(167,139,250,0.5); }
.csb-aurora input::placeholder { color: #b8b6d4; }
@keyframes csb-aurora-drift {
  0%, 100% { transform: translateX(0)    translateY(0); }
  50%       { transform: translateX(-8%) translateY(2%); }
}

.csb-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .csb-aurora,
  .csb-aurora * {
    animation: none !important;
  }
}

```

---
## 23 CSS Sidebar Layouts

URL: https://codefronts.com/layouts/css-sidebar-layouts/
Description: 23 hand-coded CSS sidebar layouts — fixed, collapsible, off-canvas, dual, mini icon rail, two-pane mail, three-pane workspace and more. Accessible, copy-paste ready.
Demo count: 23

### 01. Fixed Sidebar

**Type:** Pure CSS
**Description:** Apple-Pro premium — brushed-aluminium sidebar on a near-black slate, system-blue accents and SF-style typography. The classic admin shell with a luxe finish. Sidebar is sticky via `position: sticky`; main content scrolls.

**HTML:**
```html
<div class="sb-fix">
  <aside class="sb-fix-side" aria-label="Primary">
    <div class="sb-fix-brand">
      <span class="sb-fix-mark" aria-hidden="true"></span>
      <div>
        <strong>Atelier</strong>
        <em>Workspace</em>
      </div>
    </div>
    <div class="sb-fix-divider"></div>
    <nav aria-label="Primary">
      <span class="sb-fix-section">General</span>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-fix-i" aria-hidden="true">●</span>Overview</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-fix-i" aria-hidden="true">◔</span>Projects<span class="sb-fix-badge"
              >8</span
            ></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◇</span>People</a>
        </li>
      </ul>
      <span class="sb-fix-section">Workspace</span>
      <ul>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◐</span>Reports</a>
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◈</span>Integrations</a>
        </li>
        <li>
          <a href="#!"><span class="sb-fix-i" aria-hidden="true">◉</span>Settings</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-fix-main">
    <header class="sb-fix-head">
      <div>
        <span class="sb-fix-crumb">Workspace · Q4 review</span>
        <h1>Overview</h1>
      </div>
      <div class="sb-fix-actions">
        <button type="button" class="sb-fix-btn">Export</button>
        <button type="button" class="sb-fix-btn sb-fix-btn-pri">+ New</button>
      </div>
    </header>
    <div class="sb-fix-cards">
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Active users</span>
        <strong>24,812</strong>
        <span class="sb-fix-card-delta">↑ 12.4%</span>
      </article>
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Revenue · MTD</span>
        <strong>$148.2k</strong>
        <span class="sb-fix-card-delta">↑ 7.1%</span>
      </article>
      <article class="sb-fix-card">
        <span class="sb-fix-card-label">Uptime · 30d</span>
        <strong>99.97%</strong>
        <span class="sb-fix-card-delta sb-fix-card-flat">— stable</span>
      </article>
    </div>
    <section class="sb-fix-chart">
      <header>
        <strong>Engagement</strong>
        <span>Last 30 days</span>
      </header>
      <svg viewBox="0 0 320 70" preserveAspectRatio="none" aria-hidden="true">
        <defs>
          <linearGradient id="sb-fix-fill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stop-color="#0a84ff" stop-opacity="0.32" />
            <stop offset="100%" stop-color="#0a84ff" stop-opacity="0" />
          </linearGradient>
        </defs>
        <path
          d="M0,55 L24,48 L48,52 L72,40 L96,44 L120,30 L144,36 L168,22 L192,28 L216,18 L240,24 L264,12 L288,18 L320,8 L320,70 L0,70 Z"
          fill="url(#sb-fix-fill)"
        />
        <path
          d="M0,55 L24,48 L48,52 L72,40 L96,44 L120,30 L144,36 L168,22 L192,28 L216,18 L240,24 L264,12 L288,18 L320,8"
          fill="none"
          stroke="#0a84ff"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </section>
  </main>
</div>
```

**CSS:**
```css
.sb-fix {
  display: grid; grid-template-columns: 248px 1fr;
  min-height: 480px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  background: #1c1c1e; color: #f5f5f7;
  border-radius: 14px; overflow: hidden;
  letter-spacing: -0.01em;
}
.sb-fix-side {
  position: sticky; top: 0; align-self: start;
  height: 100%; min-height: 480px;
  padding: 18px 14px;
  background: linear-gradient(180deg, #2c2c2e 0%, #232325 100%);
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
  display: flex; flex-direction: column; gap: 12px;
}
.sb-fix-brand { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px; }
.sb-fix-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #0a84ff 0%, #5ac8fa 100%);
  position: relative; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(10,132,255,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.sb-fix-mark::after {
  content: ''; position: absolute; inset: 6px;
  border: 2px solid rgba(255,255,255,0.85); border-radius: 4px;
  border-bottom-color: transparent; border-right-color: transparent;
  transform: rotate(-45deg);
}
.sb-fix-brand strong { display: block; font-size: 14px; font-weight: 600; color: #f5f5f7; }
.sb-fix-brand em { display: block; font-size: 11px; font-style: normal; color: #98989f; margin-top: -1px; }
.sb-fix-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0 2px; }
.sb-fix-section { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #98989f; padding: 0 6px; margin-top: 6px; }
.sb-fix-side ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-fix-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #d6d6d8; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sb-fix-side a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-fix-side a[aria-current="page"] {
  background: rgba(10,132,255,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(10,132,255,0.4);
}
.sb-fix-i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; color: #5ac8fa; }
.sb-fix-side a[aria-current="page"] .sb-fix-i { color: #0a84ff; }
.sb-fix-badge { margin-left: auto; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 9px; background: rgba(255,69,58,0.85); color: #fff; }
.sb-fix-main { padding: 26px 28px; overflow-y: auto; background: #1c1c1e; }
.sb-fix-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.sb-fix-crumb { font-size: 11px; color: #98989f; letter-spacing: 0.02em; }
.sb-fix-main h1 { margin: 4px 0 0; font-size: 26px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.02em; }
.sb-fix-actions { display: flex; gap: 8px; }
.sb-fix-btn { padding: 6px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, transform 0.1s; background: rgba(255,255,255,0.08); color: #f5f5f7; border: 1px solid rgba(255,255,255,0.1); }
.sb-fix-btn:hover { background: rgba(255,255,255,0.14); }
.sb-fix-btn:active { transform: translateY(0.5px); }
.sb-fix-btn-pri { background: linear-gradient(180deg, #0a84ff 0%, #0866cc 100%); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 2px 6px rgba(10,132,255,0.4); }
.sb-fix-btn-pri:hover { background: linear-gradient(180deg, #1c8eff 0%, #0a73e0 100%); }
.sb-fix-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.sb-fix-card { padding: 14px 14px 12px; background: #2c2c2e; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.sb-fix-card-label { font-size: 11px; color: #98989f; font-weight: 500; }
.sb-fix-card strong { font-size: 22px; font-weight: 700; color: #f5f5f7; letter-spacing: -0.02em; }
.sb-fix-card-delta { font-size: 10.5px; color: #30d158; font-weight: 600; }
.sb-fix-card-flat { color: #98989f; }
.sb-fix-chart { padding: 14px 14px 8px; background: #2c2c2e; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
.sb-fix-chart header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sb-fix-chart strong { font-size: 12.5px; font-weight: 600; color: #f5f5f7; }
.sb-fix-chart header span { font-size: 10.5px; color: #98989f; }
.sb-fix-chart svg { width: 100%; height: 70px; display: block; }
@media (max-width: 720px) {
  .sb-fix { grid-template-columns: 1fr; }
  .sb-fix-side { position: static; min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .sb-fix-cards { grid-template-columns: 1fr; }
  .sb-fix-head { flex-direction: column; align-items: flex-start; }
}
```

### 02. Collapsible Sidebar

**Type:** Pure CSS
**Description:** Sunset palette — coral fading into magenta and ember orange, with a soft cream content area. Click the toggle to collapse from 240px to 64px. Pure CSS via <code>:has(:checked)</code> on the grid template; labels fade, icons stay glowing.

**HTML:**
```html
<div class="sb-col">
  <input id="sb-col-t" class="sb-col-cb" type="checkbox" aria-label="Toggle sidebar" />
  <aside class="sb-col-side" aria-label="Primary">
    <label class="sb-col-toggle" for="sb-col-t" aria-controls="sb-col-nav">
      <span class="sb-col-burger" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sb-col-tlabel">Collapse</span>
    </label>
    <a class="sb-col-brand" href="#!">
      <span class="sb-col-mark" aria-hidden="true"></span>
      <span class="sb-col-name">Ember<small>Studios</small></span>
    </a>
    <nav id="sb-col-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-col-ico" aria-hidden="true">◉</span
            ><span class="sb-col-lbl">Dashboard</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">▣</span
            ><span class="sb-col-lbl">Projects</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">◌</span
            ><span class="sb-col-lbl">Crew</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">▤</span
            ><span class="sb-col-lbl">Library</span></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-col-ico" aria-hidden="true">⚙</span
            ><span class="sb-col-lbl">Settings</span></a
          >
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-col-main">
    <span class="sb-col-eye">▸ Workspace</span>
    <h2>Slow burn,<br />bright ideas.</h2>
    <p>
      Toggle the burger to collapse the sidebar. No JavaScript — <code>:has(:checked)</code> on the
      grid template animates the columns; labels fade and the burger morphs into a chevron.
    </p>
    <div class="sb-col-cards">
      <div class="sb-col-c"><strong>184</strong><span>Ideas this week</span></div>
      <div class="sb-col-c"><strong>4.2k</strong><span>Followers</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-col {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff5ee; color: #2a0e2c;
  border-radius: 16px; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
.sb-col-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-col:has(.sb-col-cb:focus-visible) .sb-col-toggle { outline: 2px solid #fff; outline-offset: 2px; }
.sb-col-side {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, #ff7a4d 0%, #ec1d8c 55%, #6a0a8c 100%);
  color: #fff;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.18);
  position: relative;
}
.sb-col-side::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 110%, rgba(255,213,128,0.55), transparent 60%);
  pointer-events: none;
}
.sb-col-toggle {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; cursor: pointer; user-select: none;
  backdrop-filter: blur(8px);
  transition: background 0.15s;
}
.sb-col-toggle:hover { background: rgba(255,255,255,0.28); }
.sb-col-burger { display: inline-flex; flex-direction: column; gap: 3px; width: 14px; flex-shrink: 0; }
.sb-col-burger i { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.22s, opacity 0.22s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(2) { opacity: 0; }
.sb-col:has(.sb-col-cb:checked) .sb-col-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-col-tlabel { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-tlabel { opacity: 0; pointer-events: none; }
.sb-col-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px; text-decoration: none; }
.sb-col-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #ffd580 0%, #ff7a4d 50%, #ec1d8c 100%); box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 4px 14px rgba(236,29,140,0.45); }
.sb-col-name { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; transition: opacity 0.18s; white-space: nowrap; }
.sb-col-name small { display: block; font-size: 9.5px; color: #ffd580; font-weight: 700; letter-spacing: 0.16em; margin-top: 3px; text-transform: uppercase; }
.sb-col:has(.sb-col-cb:checked) .sb-col-name { opacity: 0; pointer-events: none; }
.sb-col-side ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-col-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.86); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.sb-col-side a:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.22); }
.sb-col-side a[aria-current="page"] {
  background: rgba(255,255,255,0.95); color: #6a0a8c;
  box-shadow: 0 6px 18px rgba(106,10,140,0.3);
}
.sb-col-ico { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-col-side a[aria-current="page"] .sb-col-ico { color: #ec1d8c; }
.sb-col-lbl { white-space: nowrap; overflow: hidden; transition: opacity 0.18s; }
.sb-col:has(.sb-col-cb:checked) .sb-col-lbl { opacity: 0; pointer-events: none; }
.sb-col-main {
  padding: 32px 36px; overflow: hidden;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(60% 80% at 100% 0%, #ffe4d6 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, #fff1d6 0%, transparent 60%),
    #fff5ee;
}
.sb-col-eye { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: #ec1d8c; text-transform: uppercase; }
.sb-col-main h2 {
  margin: 0; font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 0.96;
  background: linear-gradient(135deg, #ff7a4d 0%, #ec1d8c 60%, #6a0a8c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
}
.sb-col-main p { margin: 0; font-size: 13.5px; color: #5a3a52; line-height: 1.6; max-width: 460px; }
.sb-col-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6a0a8c; background: rgba(236,29,140,0.12); padding: 1px 6px; border-radius: 4px; }
.sb-col-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; margin-top: 6px; }
.sb-col-c { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(236,29,140,0.18); box-shadow: 0 6px 18px rgba(236,29,140,0.08); display: flex; flex-direction: column; gap: 4px; }
.sb-col-c strong { font-size: 24px; font-weight: 800; color: #2a0e2c; letter-spacing: -0.02em; line-height: 1; }
.sb-col-c span { font-size: 11px; color: #8c5a78; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .sb-col, .sb-col-tlabel, .sb-col-lbl, .sb-col-burger i, .sb-col-name { transition: none; }
}
@media (max-width: 720px) {
  .sb-col, .sb-col:has(.sb-col-cb:checked) { grid-template-columns: 64px 1fr; }
  .sb-col-cards { grid-template-columns: 1fr; }
}
```

### 03. Off-canvas Drawer

**Type:** Pure CSS
**Description:** Cyberpunk 2099 — pitch black with electric cyan and hot pink, glitching scanlines, monospace HUD type. Tap the burger to slide the drawer in; the backdrop blurs and dims the page. <code>:has(:checked)</code> drives the transform; clicking the backdrop closes.

**HTML:**
```html
<div class="sb-off">
  <input id="sb-off-t" class="sb-off-cb" type="checkbox" aria-label="Toggle menu" />
  <header class="sb-off-bar">
    <label class="sb-off-burger" for="sb-off-t" aria-controls="sb-off-drawer">
      <span class="sb-off-burger-i" aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <span class="sb-off-title">SYS_OS<small>v2099</small></span>
    <span class="sb-off-status" aria-hidden="true">
      <span class="sb-off-blink"></span>
      ONLINE
    </span>
  </header>
  <main class="sb-off-main">
    <span class="sb-off-eye">▸ TERMINAL · USER 0x7F</span>
    <h2>Tap to<br />jack in.</h2>
    <p>
      Tap the burger to slide the drawer in over the page. The backdrop blurs everything; tap it or
      the × to dismiss. <code>:has(:checked)</code> drives the slide.
    </p>
    <div class="sb-off-stat">
      <span><em>CPU</em><b>87%</b></span>
      <span><em>NET</em><b>1.2g</b></span>
      <span><em>MEM</em><b>4.7G</b></span>
    </div>
  </main>
  <label class="sb-off-backdrop" for="sb-off-t" aria-hidden="true"></label>
  <aside id="sb-off-drawer" class="sb-off-drawer" aria-label="Primary">
    <header>
      <strong>// MAIN_MENU</strong>
      <label class="sb-off-close" for="sb-off-t" aria-label="Close menu">[ × ]</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page" data-key="01"><em>01</em>Home</a>
        </li>
        <li>
          <a href="#!" data-key="02"><em>02</em>Projects</a>
        </li>
        <li>
          <a href="#!" data-key="03"><em>03</em>Library</a>
        </li>
        <li>
          <a href="#!" data-key="04"><em>04</em>Settings</a>
        </li>
        <li>
          <a href="#!" data-key="05"><em>05</em>Sign out</a>
        </li>
      </ul>
    </nav>
    <footer>↩ ESC to close</footer>
  </aside>
</div>
```

**CSS:**
```css
.sb-off {
  position: relative; min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, sans-serif;
  background: #050008; color: #d6f7ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-off::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(50% 40% at 80% 20%, rgba(0,229,255,0.18), transparent 70%),
    radial-gradient(50% 50% at 20% 90%, rgba(255,0,140,0.18), transparent 70%);
}
.sb-off::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(0,229,255,0.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.sb-off-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-off:has(.sb-off-cb:focus-visible) .sb-off-burger { outline: 2px solid #00e5ff; outline-offset: 2px; }
.sb-off-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.6);
  border-bottom: 1px solid rgba(0,229,255,0.4);
  box-shadow: 0 0 24px rgba(0,229,255,0.15);
}
.sb-off-burger {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #00e5ff;
  border: 1px solid rgba(0,229,255,0.5);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.2), 0 0 12px rgba(0,229,255,0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.sb-off-burger:hover { background: rgba(0,229,255,0.1); box-shadow: inset 0 0 18px rgba(0,229,255,0.3), 0 0 18px rgba(0,229,255,0.45); }
.sb-off-burger-i { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.sb-off-burger-i i { display: block; height: 2px; background: #00e5ff; box-shadow: 0 0 6px #00e5ff; }
.sb-off-title { font-family: 'Courier New', monospace; font-weight: 800; font-size: 14px; letter-spacing: 0.16em; color: #fff; }
.sb-off-title small { font-size: 9.5px; color: #ff0090; letter-spacing: 0.2em; margin-left: 4px; text-shadow: 0 0 8px rgba(255,0,144,0.7); }
.sb-off-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 10.5px; letter-spacing: 0.16em; color: #00ff9c; padding: 4px 10px; border: 1px solid rgba(0,255,156,0.4); border-radius: 12px; }
.sb-off-blink { width: 6px; height: 6px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 8px #00ff9c; animation: sb-off-blink 1.4s ease-in-out infinite; }
@keyframes sb-off-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .sb-off-blink { animation: none; } }
.sb-off-main { position: relative; z-index: 2; flex: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; }
.sb-off-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.2em; color: #00e5ff; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: -2px 0 0 rgba(255,0,144,0.7), 2px 0 0 rgba(0,229,255,0.7), 0 0 30px rgba(255,255,255,0.4);
}
.sb-off-main p { margin: 0; font-size: 13.5px; color: rgba(214,247,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-off-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ff0090; background: rgba(255,0,144,0.1); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,0,144,0.4); }
.sb-off-stat { display: flex; gap: 14px; margin-top: auto; font-family: 'Courier New', monospace; }
.sb-off-stat span { padding: 8px 14px; border: 1px solid rgba(0,229,255,0.4); border-radius: 4px; background: rgba(0,229,255,0.06); display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.sb-off-stat em { font-style: normal; font-size: 9.5px; color: #00e5ff; letter-spacing: 0.18em; }
.sb-off-stat b { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: 0.04em; }
.sb-off-backdrop {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(5,0,8,0.7);
  backdrop-filter: blur(8px) saturate(0.6);
  -webkit-backdrop-filter: blur(8px) saturate(0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
  z-index: 3;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-backdrop { opacity: 1; pointer-events: auto; }
.sb-off-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: linear-gradient(180deg, rgba(8,0,16,0.95) 0%, rgba(20,0,32,0.95) 100%);
  border-right: 2px solid #00e5ff;
  box-shadow: 4px 0 32px rgba(0,229,255,0.4), inset -1px 0 0 rgba(255,0,144,0.5);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 14px; display: flex; flex-direction: column; gap: 12px;
}
.sb-off:has(.sb-off-cb:checked) .sb-off-drawer { transform: translateX(0); }
.sb-off-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; border-bottom: 1px dashed rgba(0,229,255,0.4); font-family: 'Courier New', monospace; }
.sb-off-drawer header strong { font-size: 12px; color: #00e5ff; font-weight: 800; letter-spacing: 0.16em; text-shadow: 0 0 8px rgba(0,229,255,0.6); }
.sb-off-close { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: #ff0090; cursor: pointer; padding: 2px 8px; user-select: none; letter-spacing: 0.1em; transition: text-shadow 0.15s; }
.sb-off-close:hover { text-shadow: 0 0 8px #ff0090; }
.sb-off-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-off-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.06em;
  color: #d6f7ff; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.16s, color 0.16s, border-color 0.16s, text-shadow 0.16s;
}
.sb-off-drawer a:hover { background: rgba(0,229,255,0.08); border-left-color: #00e5ff; color: #fff; text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.sb-off-drawer a[aria-current="page"] { background: rgba(255,0,144,0.12); border-left-color: #ff0090; color: #fff; text-shadow: 0 0 10px rgba(255,0,144,0.7); }
.sb-off-drawer a em { font-style: normal; font-size: 11px; color: #ff0090; font-weight: 800; opacity: 0.7; }
.sb-off-drawer a[aria-current="page"] em { color: #ffd700; opacity: 1; text-shadow: 0 0 8px #ffd700; }
.sb-off-drawer footer { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(0,229,255,0.3); font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(0,229,255,0.7); letter-spacing: 0.16em; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-off-drawer, .sb-off-backdrop { transition: none; }
}
```

### 04. Right-aligned Sidebar

**Type:** Pure CSS
**Description:** Bauhaus poster — cream canvas, cobalt-blue right rail, primary-red and lemon shapes composing into a designer's inspector pane. Sidebar on the right via <code>1fr 260px</code>. Real <code>&lt;dl&gt;</code> with <code>&lt;dt&gt;</code>/<code>&lt;dd&gt;</code> for the property pairs.

**HTML:**
```html
<div class="sb-rt">
  <main class="sb-rt-main">
    <span class="sb-rt-eye">No. 47 · 1923</span>
    <h2>Form follows<br /><em>function.</em></h2>
    <p>
      The sidebar sits on the right — design-tool convention (Figma, Sketch). Layout is just
      <code>1fr 260px</code>; native <code>&lt;dl&gt;</code> exposes property pairs to assistive
      tech.
    </p>
    <div class="sb-rt-canvas" aria-label="Composition">
      <span class="sb-rt-circ" aria-hidden="true"></span>
      <span class="sb-rt-sq" aria-hidden="true"></span>
      <span class="sb-rt-tri" aria-hidden="true"></span>
    </div>
  </main>
  <aside class="sb-rt-side" aria-label="Properties">
    <span class="sb-rt-rule" aria-hidden="true"></span>
    <h3>Properties</h3>
    <dl>
      <dt>Width</dt>
      <dd>320 px</dd>
      <dt>Height</dt>
      <dd>180 px</dd>
      <dt>Fill</dt>
      <dd><span class="sb-rt-sw" aria-hidden="true"></span>#1840d2</dd>
      <dt>Stroke</dt>
      <dd>2 px solid</dd>
      <dt>Radius</dt>
      <dd>0 px</dd>
      <dt>Opacity</dt>
      <dd>100 %</dd>
    </dl>
    <button type="button" class="sb-rt-cta">Apply →</button>
  </aside>
</div>
```

**CSS:**
```css
.sb-rt {
  display: grid; grid-template-columns: 1fr 260px;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f4ecdb;
  color: #1a1a1a;
  border-radius: 0;
  overflow: hidden;
  border: 4px solid #1a1a1a;
}
.sb-rt-main { position: relative; padding: 36px 40px; display: flex; flex-direction: column; gap: 18px; }
.sb-rt-main::before {
  content: ''; position: absolute; top: 24px; right: 24px;
  width: 14px; height: 14px; border-radius: 50%; background: #c43a2c;
}
.sb-rt-eye { font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; color: #c43a2c; text-transform: uppercase; }
.sb-rt-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92;
  color: #1a1a1a; letter-spacing: -0.03em;
}
.sb-rt-main h2 em { font-style: italic; color: #1840d2; font-weight: 800; }
.sb-rt-main p { margin: 0; font-size: 13.5px; color: #3d3d3d; line-height: 1.65; max-width: 460px; font-weight: 500; }
.sb-rt-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #1840d2; background: rgba(24,64,210,0.1); padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rt-canvas {
  position: relative;
  flex: 1; min-height: 200px;
  border: 3px solid #1a1a1a;
  background: #fdf5e2;
  margin-top: 4px;
  overflow: hidden;
}
.sb-rt-circ {
  position: absolute; top: 22%; left: 12%;
  width: 90px; height: 90px; border-radius: 50%;
  background: #c43a2c;
  border: 3px solid #1a1a1a;
}
.sb-rt-sq {
  position: absolute; bottom: 14%; left: 32%;
  width: 80px; height: 80px;
  background: #1840d2;
  border: 3px solid #1a1a1a;
}
.sb-rt-tri {
  position: absolute; top: 18%; right: 14%;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #ffd400;
  filter: drop-shadow(0 0 0 #1a1a1a);
}
.sb-rt-tri::after {
  content: ''; position: absolute; left: -50px; top: 0;
  width: 0; height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86px solid #1a1a1a;
  z-index: -1;
  transform: scale(1.06);
  transform-origin: bottom;
}
.sb-rt-side {
  position: relative;
  background: #1840d2; color: #f4ecdb;
  border-left: 4px solid #1a1a1a;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.sb-rt-rule { display: block; height: 4px; width: 60%; background: #ffd400; margin-bottom: 4px; }
.sb-rt-side h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -0.02em; color: #fff; }
.sb-rt-side dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 12.5px; padding-top: 8px; border-top: 2px solid rgba(244,236,219,0.4); }
.sb-rt-side dt { color: #ffd400; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10.5px; align-self: center; }
.sb-rt-side dd { margin: 0; color: #f4ecdb; display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-weight: 600; }
.sb-rt-sw { width: 14px; height: 14px; background: #1840d2; border: 2px solid #f4ecdb; flex-shrink: 0; }
.sb-rt-cta {
  margin-top: auto;
  padding: 12px 16px;
  background: #ffd400; color: #1a1a1a;
  border: 3px solid #1a1a1a;
  font: inherit; font-size: 13px; font-weight: 900; letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #1a1a1a;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-rt-cta:hover { background: #ffe44a; }
.sb-rt-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1a1a1a; }
@media (max-width: 720px) {
  .sb-rt { grid-template-columns: 1fr; }
  .sb-rt-side { border-left: 0; border-top: 4px solid #1a1a1a; }
}
```

### 05. Two-pane Mail

**Type:** Pure CSS
**Description:** Editorial newspaper — off-white paper, ink-black serif headlines, spot-red active state. Three-column shell — folder sidebar, message list, reading pane. CSS grid with three columns, each scrolling independently. The mail client a print designer would lay out.

**HTML:**
```html
<div class="sb-mail">
  <aside class="sb-mail-folders" aria-label="Folders">
    <header>
      <strong>The Inbox</strong>
      <small>Vol. XII · No. 47</small>
    </header>
    <nav aria-label="Folders">
      <ul>
        <li>
          <a href="#!" aria-current="page">Inbox<span>12</span></a>
        </li>
        <li><a href="#!">Starred</a></li>
        <li>
          <a href="#!">Drafts<span class="sb-mail-muted">3</span></a>
        </li>
        <li><a href="#!">Sent</a></li>
        <li><a href="#!">Archive</a></li>
        <li><a href="#!">Trash</a></li>
      </ul>
    </nav>
    <footer>
      <span class="sb-mail-bullet" aria-hidden="true">•</span>
      Editorial since 1923
    </footer>
  </aside>
  <section class="sb-mail-list" aria-label="Message list">
    <header class="sb-mail-list-head">
      <h3>This morning</h3>
      <span>4 unread</span>
    </header>
    <article class="sb-mail-item">
      <strong>Anya Petrova</strong>
      <em>Re: Q3 launch deck</em>
      <span>Looks great — one tweak on slide 14.</span>
      <time>9:14</time>
    </article>
    <article class="sb-mail-item active">
      <strong>Daichi Sato</strong>
      <em>Friday demo recap</em>
      <span>Here's the recording + the action items we…</span>
      <time>11:42</time>
    </article>
    <article class="sb-mail-item">
      <strong>Lena Müller</strong>
      <em>Invoice #2143</em>
      <span>Attached, due in 30 days.</span>
      <time>13:08</time>
    </article>
    <article class="sb-mail-item">
      <strong>Carlos Reyes</strong>
      <em>Coffee Thursday?</em>
      <span>I'll be near the office around 11.</span>
      <time>14:30</time>
    </article>
  </section>
  <article class="sb-mail-read">
    <header>
      <span class="sb-mail-rule" aria-hidden="true"></span>
      <span class="sb-mail-cat">DAILY DIGEST · OPS</span>
      <h2>Friday demo recap.</h2>
      <p>From <strong>Daichi Sato</strong> &middot; <time>11:42 AM</time> &middot; 4 min read</p>
    </header>
    <p class="sb-mail-body sb-mail-lead">
      <span class="sb-mail-drop">H</span>ey team — here's the recording from today plus the four
      action items we landed on. I'll send a separate Loom for the dashboard rewrite tomorrow.
    </p>
    <p class="sb-mail-body">
      A short follow-up on Anya's slide-14 tweak: I think we can land that before the demo on
      Tuesday.
    </p>
  </article>
</div>
```

**CSS:**
```css
.sb-mail {
  display: grid; grid-template-columns: 200px 260px 1fr;
  min-height: 480px;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #f4f0e6; color: #1a1a1a;
  border-radius: 4px; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.sb-mail-folders {
  padding: 18px 14px;
  background: #efe9da;
  border-right: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-mail-folders header { padding-bottom: 12px; border-bottom: 2px solid #1a1a1a; }
.sb-mail-folders strong { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; color: #1a1a1a; line-height: 1; }
.sb-mail-folders small { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; color: #c43a2c; text-transform: uppercase; margin-top: 4px; }
.sb-mail-folders ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-mail-folders a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px; border-bottom: 1px dotted #c0b6a0;
  font-family: 'Georgia', serif;
  font-size: 13.5px; color: #1a1a1a; text-decoration: none;
  transition: color 0.12s, padding-left 0.12s;
}
.sb-mail-folders a:hover { padding-left: 8px; color: #c43a2c; }
.sb-mail-folders a[aria-current="page"] { color: #c43a2c; font-weight: 700; padding-left: 8px; border-bottom-color: #c43a2c; }
.sb-mail-folders a span { font-family: 'Inter', sans-serif; font-size: 10.5px; padding: 1px 7px; border-radius: 0; background: #c43a2c; color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.sb-mail-folders a span.sb-mail-muted { background: transparent; color: #6a6055; border: 1px solid #6a6055; }
.sb-mail-folders footer { margin-top: auto; padding-top: 10px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; letter-spacing: 0.06em; text-align: center; font-style: italic; }
.sb-mail-bullet { color: #c43a2c; }
.sb-mail-list { background: #fdf9ec; border-right: 1px solid #1a1a1a; display: flex; flex-direction: column; overflow-y: auto; }
.sb-mail-list-head { padding: 14px 16px 10px; border-bottom: 1px solid #c0b6a0; display: flex; align-items: baseline; justify-content: space-between; }
.sb-mail-list-head h3 { margin: 0; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #6a6055; }
.sb-mail-list-head span { font-family: 'Inter', sans-serif; font-size: 10px; color: #c43a2c; font-weight: 700; }
.sb-mail-item { position: relative; padding: 14px 18px 14px 16px; border-bottom: 1px solid #e0d8c4; cursor: pointer; transition: background 0.12s; }
.sb-mail-item:hover { background: rgba(196,58,44,0.04); }
.sb-mail-item.active { background: #fff; padding-left: 22px; }
.sb-mail-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: #c43a2c; }
.sb-mail-item strong { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #1a1a1a; text-transform: uppercase; }
.sb-mail-item em { display: block; font-family: 'Playfair Display', 'Georgia', serif; font-size: 15px; font-style: italic; color: #1a1a1a; margin-top: 2px; line-height: 1.2; }
.sb-mail-item span { display: block; font-family: 'Georgia', serif; font-size: 12.5px; color: #4a4035; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.sb-mail-item time { position: absolute; top: 14px; right: 18px; font-family: 'Inter', sans-serif; font-size: 10.5px; color: #6a6055; font-weight: 600; }
.sb-mail-read { padding: 28px 32px; overflow-y: auto; background: #fdf9ec; }
.sb-mail-read header { padding-bottom: 14px; border-bottom: 2px solid #1a1a1a; margin-bottom: 18px; }
.sb-mail-rule { display: inline-block; width: 32px; height: 3px; background: #c43a2c; margin-bottom: 10px; }
.sb-mail-cat { display: block; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; color: #c43a2c; margin-bottom: 6px; }
.sb-mail-read h2 { margin: 0 0 8px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #1a1a1a; line-height: 0.96; letter-spacing: -0.02em; }
.sb-mail-read header p { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; color: #6a6055; letter-spacing: 0.04em; }
.sb-mail-read header p strong { color: #1a1a1a; font-weight: 700; }
.sb-mail-body { margin: 0 0 12px; font-size: 14.5px; color: #2a241c; line-height: 1.7; max-width: 540px; }
.sb-mail-lead { font-size: 16px; }
.sb-mail-drop { float: left; font-family: 'Playfair Display', 'Georgia', serif; font-size: 56px; font-weight: 900; line-height: 0.85; padding: 4px 8px 0 0; color: #c43a2c; }
@media (max-width: 720px) {
  .sb-mail { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .sb-mail-folders, .sb-mail-list { border-right: 0; border-bottom: 1px solid #1a1a1a; }
}
```

### 06. Dual Sidebar

**Type:** Pure CSS
**Description:** Scandinavian docs — warm beige paper, forest-green section nav, clay-red "active" pill, soft greys for the TOC. Three-column shell (left section nav, centre article, right rail of in-page anchors). Both sidebars sticky; centre flows. Like reading a Hay catalogue.

**HTML:**
```html
<div class="sb-dual">
  <aside class="sb-dual-nav" aria-label="Section navigation">
    <header>
      <span class="sb-dual-mark" aria-hidden="true"></span>
      <span class="sb-dual-name">Birch<small>docs</small></span>
    </header>
    <h3>Getting started</h3>
    <nav aria-label="Section navigation">
      <ul>
        <li><a href="#!">Installation</a></li>
        <li><a href="#!" aria-current="page">Quick start</a></li>
        <li><a href="#!">Configuration</a></li>
        <li><a href="#!">Examples</a></li>
      </ul>
    </nav>
    <h3>Concepts</h3>
    <nav aria-label="Concepts">
      <ul>
        <li><a href="#!">Routing</a></li>
        <li><a href="#!">Layouts</a></li>
        <li><a href="#!">Data fetching</a></li>
      </ul>
    </nav>
    <h3>Recipes</h3>
    <nav aria-label="Recipes">
      <ul>
        <li><a href="#!">Auth</a></li>
        <li><a href="#!">Forms</a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-dual-main">
    <span class="sb-dual-eye">v3.4 · Feb 2026</span>
    <h1>Quick start.</h1>
    <p class="sb-dual-lead">
      Install the package and ship your first page in under five minutes. The CLI scaffolds a new
      project; the dev server starts on port 4321.
    </p>
    <h2>Installation</h2>
    <p>
      Run <code>npm create birch@latest</code>. The interactive CLI asks for your project name and
      template choice.
    </p>
    <h2>Run the dev server</h2>
    <p>
      Start the dev server with <code>npm run dev</code>. Hot-reload is enabled by default — edits
      to any file refresh the browser instantly.
    </p>
    <p>
      Build for production with <code>npm run build</code>; the output is a static
      <code>dist/</code> ready for any host.
    </p>
  </main>
  <aside class="sb-dual-toc" aria-label="On this page">
    <h3>On this page</h3>
    <nav aria-label="On this page">
      <ul>
        <li><a href="#!" aria-current="true">Installation</a></li>
        <li><a href="#!">Run the dev server</a></li>
        <li><a href="#!">Build for prod</a></li>
        <li><a href="#!">Deploy</a></li>
      </ul>
    </nav>
    <p class="sb-dual-edit">Edit on GitHub →</p>
  </aside>
</div>
```

**CSS:**
```css
.sb-dual {
  display: grid; grid-template-columns: 220px 1fr 200px;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f4ede0;
  color: #1f3327;
  border-radius: 6px; overflow: hidden;
}
.sb-dual-nav, .sb-dual-toc {
  position: sticky; top: 0; align-self: start;
  min-height: 480px; padding: 22px 18px;
  background: #ece2cf;
  border-right: 1px solid #c8b896;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-dual-nav header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #c8b896; margin-bottom: 4px; }
.sb-dual-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #2f5d40; box-shadow: inset 0 0 0 3px #ece2cf, 0 0 0 1px #2f5d40; }
.sb-dual-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #1f3327; line-height: 1; }
.sb-dual-name small { display: block; font-size: 9.5px; color: #8a6f4a; font-weight: 700; letter-spacing: 0.18em; margin-top: 4px; text-transform: uppercase; }
.sb-dual-toc { border-right: 0; border-left: 1px solid #c8b896; background: #f4ede0; }
.sb-dual-nav h3, .sb-dual-toc h3 {
  margin: 12px 0 6px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: #8a6f4a;
}
.sb-dual-nav h3:first-of-type, .sb-dual-toc h3:first-of-type { margin-top: 0; }
.sb-dual-nav ul, .sb-dual-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.sb-dual-nav a, .sb-dual-toc a {
  display: block;
  padding: 7px 10px;
  font-size: 13px; color: #4a5d52; text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-dual-nav a:hover, .sb-dual-toc a:hover { color: #1f3327; border-left-color: #c8b896; background: rgba(0,0,0,0.03); }
.sb-dual-nav a[aria-current="page"] {
  color: #fff; font-weight: 700;
  background: #c45a3e;
  border-radius: 4px;
  border-left-color: transparent;
  padding-left: 10px;
}
.sb-dual-toc a[aria-current="true"] { color: #2f5d40; font-weight: 700; border-left-color: #2f5d40; }
.sb-dual-edit { margin: auto 0 0; padding-top: 12px; border-top: 1px solid #c8b896; font-size: 11px; color: #8a6f4a; font-style: italic; }
.sb-dual-main { padding: 32px 36px; max-width: 100%; overflow-x: hidden; background: #faf5ea; }
.sb-dual-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; color: #c45a3e; text-transform: uppercase; }
.sb-dual-main h1 { margin: 6px 0 10px; font-size: clamp(32px, 4.5vw, 52px); font-weight: 900; color: #1f3327; letter-spacing: -0.03em; line-height: 1; }
.sb-dual-main h2 { margin: 22px 0 8px; font-size: 18px; font-weight: 800; color: #2f5d40; letter-spacing: -0.01em; }
.sb-dual-lead { font-size: 16px; line-height: 1.6; color: #2a3d31; max-width: 540px; margin-bottom: 4px; }
.sb-dual-main p { margin: 0 0 10px; font-size: 13.5px; color: #2a3d31; line-height: 1.7; max-width: 560px; }
.sb-dual-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #c45a3e; background: rgba(196,90,62,0.08); padding: 1px 6px; border-radius: 3px; font-weight: 600; }
@media (max-width: 720px) {
  .sb-dual { grid-template-columns: 1fr; }
  .sb-dual-nav, .sb-dual-toc { position: static; min-height: auto; border: 0; border-bottom: 1px solid #c8b896; }
}
```

### 07. Mini Icon Rail

**Type:** Pure CSS
**Description:** Tokyo neon arcade — deep midnight rail with electric-yellow + magenta glows that pulse on hover. Hover or focus a link to expand the rail from 64px to 240px and reveal the labels. Pure CSS via width transition; <code>aria-label</code> carries meaning when collapsed.

**HTML:**
```html
<div class="sb-mini">
  <div class="sb-mini-grid" aria-hidden="true"></div>
  <aside class="sb-mini-rail" aria-label="Primary">
    <a class="sb-mini-brand" href="#!" aria-label="Neon home">
      <span class="sb-mini-mark" aria-hidden="true">N</span>
      <span class="sb-mini-brand-name">NEON<small>1989</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-label="Arcade" aria-current="page" data-key="01"
            ><span class="sb-mini-ico" aria-hidden="true">◆</span
            ><span class="sb-mini-lbl">Arcade</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Library" data-key="02"
            ><span class="sb-mini-ico" aria-hidden="true">▤</span
            ><span class="sb-mini-lbl">Library</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Squad" data-key="03"
            ><span class="sb-mini-ico" aria-hidden="true">◑</span
            ><span class="sb-mini-lbl">Squad</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Trophies" data-key="04"
            ><span class="sb-mini-ico" aria-hidden="true">★</span
            ><span class="sb-mini-lbl">Trophies</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Store" data-key="05"
            ><span class="sb-mini-ico" aria-hidden="true">◊</span
            ><span class="sb-mini-lbl">Store</span></a
          >
        </li>
        <li>
          <a href="#!" aria-label="Settings" data-key="06"
            ><span class="sb-mini-ico" aria-hidden="true">⚙</span
            ><span class="sb-mini-lbl">Settings</span></a
          >
        </li>
      </ul>
    </nav>
    <footer class="sb-mini-foot">
      <span class="sb-mini-pulse" aria-hidden="true"></span>
      <span class="sb-mini-foot-lbl">Online · 24,891</span>
    </footer>
  </aside>
  <main class="sb-mini-main">
    <span class="sb-mini-eye">▸ NOW PLAYING · LEVEL 47</span>
    <h2>Hover<br />the rail →</h2>
    <p>
      Hover or focus to expand the rail. Each icon glows in its own neon colour — magenta, yellow,
      cyan, lime — like a Shibuya arcade marquee at midnight.
    </p>
    <div class="sb-mini-tags">
      <span>#tokyo</span><span>#midnight</span><span>#arcade</span><span>#neon</span>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-mini {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  background: #0a0014; color: #f7f4ff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
}
.sb-mini-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,0,228,0.12) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(0,229,255,0.1) 1px, transparent 1px) 0 0 / 28px 100%,
    radial-gradient(60% 40% at 80% 20%, rgba(255,0,228,0.22), transparent 70%),
    radial-gradient(60% 40% at 20% 80%, rgba(0,229,255,0.22), transparent 70%),
    #0a0014;
  z-index: 0;
}
.sb-mini-rail {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, rgba(20,5,40,0.92) 0%, rgba(8,0,20,0.96) 100%);
  border-right: 1px solid rgba(255,0,228,0.4);
  box-shadow: 1px 0 24px rgba(255,0,228,0.25), inset -1px 0 0 rgba(255,0,228,0.5);
  padding: 14px 0; display: flex; flex-direction: column; gap: 12px;
  width: 64px; overflow: hidden;
  transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.sb-mini-rail:hover, .sb-mini-rail:focus-within { width: 240px; }
.sb-mini-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px; height: 40px;
  text-decoration: none; flex-shrink: 0;
  white-space: nowrap;
}
.sb-mini-mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff00e4 0%, #ffd400 100%);
  color: #0a0014; font-family: 'Courier New', monospace; font-size: 18px; font-weight: 900;
  box-shadow: 0 0 0 1px rgba(255,212,0,0.5), 0 0 20px rgba(255,0,228,0.6);
}
.sb-mini-brand-name { font-family: 'Courier New', monospace; font-size: 16px; font-weight: 800; letter-spacing: 0.08em; color: #ffd400; text-shadow: 0 0 8px rgba(255,212,0,0.6); }
.sb-mini-brand-name small { display: block; font-size: 9px; letter-spacing: 0.4em; color: #ff00e4; margin-top: -2px; font-weight: 600; }
.sb-mini-rail ul { list-style: none; margin: 0; padding: 4px 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-mini-rail a {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; color: #d4c5e8; text-decoration: none;
  white-space: nowrap; overflow: hidden;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.sb-mini-rail a:hover, .sb-mini-rail a:focus-visible {
  background: rgba(255,0,228,0.1);
  border-color: rgba(255,0,228,0.45);
  color: #fff;
  box-shadow: 0 0 16px rgba(255,0,228,0.35), inset 0 0 16px rgba(255,0,228,0.1);
}
.sb-mini-rail a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255,212,0,0.18), rgba(255,0,228,0.18));
  border-color: #ffd400;
  color: #fff;
  box-shadow: 0 0 24px rgba(255,212,0,0.45), inset 0 0 12px rgba(255,212,0,0.15);
}
.sb-mini-rail a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: #ffd400; border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px #ffd400, 0 0 24px rgba(255,212,0,0.6);
}
.sb-mini-ico { width: 20px; flex-shrink: 0; text-align: center; font-size: 14px; }
.sb-mini-rail li:nth-child(1) .sb-mini-ico { color: #ffd400; text-shadow: 0 0 8px #ffd400; }
.sb-mini-rail li:nth-child(2) .sb-mini-ico { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; }
.sb-mini-rail li:nth-child(3) .sb-mini-ico { color: #ff00e4; text-shadow: 0 0 8px #ff00e4; }
.sb-mini-rail li:nth-child(4) .sb-mini-ico { color: #c2ff00; text-shadow: 0 0 8px #c2ff00; }
.sb-mini-rail li:nth-child(5) .sb-mini-ico { color: #ff8a00; text-shadow: 0 0 8px #ff8a00; }
.sb-mini-rail li:nth-child(6) .sb-mini-ico { color: #00ffa3; text-shadow: 0 0 8px #00ffa3; }
.sb-mini-lbl { opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-lbl, .sb-mini-rail:focus-within .sb-mini-lbl { opacity: 1; }
.sb-mini-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid rgba(255,0,228,0.25); white-space: nowrap; overflow: hidden; }
.sb-mini-pulse { width: 8px; height: 8px; border-radius: 50%; background: #c2ff00; flex-shrink: 0; box-shadow: 0 0 10px #c2ff00, 0 0 20px rgba(194,255,0,0.5); animation: sb-mini-pulse 1.4s ease-in-out infinite; }
@keyframes sb-mini-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } }
.sb-mini-foot-lbl { font-family: 'Courier New', monospace; font-size: 11px; color: #c2ff00; letter-spacing: 0.06em; opacity: 0; transition: opacity 0.22s ease; }
.sb-mini-rail:hover .sb-mini-foot-lbl, .sb-mini-rail:focus-within .sb-mini-foot-lbl { opacity: 1; }
.sb-mini-main { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.sb-mini-eye { font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.18em; color: #c2ff00; text-shadow: 0 0 8px rgba(194,255,0,0.5); }
.sb-mini-main h2 {
  margin: 0; font-size: clamp(28px, 5vw, 56px); font-weight: 900; line-height: 0.95;
  background: linear-gradient(135deg, #ffd400 0%, #ff00e4 50%, #00e5ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
  filter: drop-shadow(0 0 20px rgba(255,0,228,0.4));
}
.sb-mini-main p { margin: 0; font-size: 13px; color: #d4c5e8; line-height: 1.6; max-width: 440px; }
.sb-mini-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #ffd400; background: rgba(255,212,0,0.1); padding: 1px 5px; border-radius: 3px; border: 1px solid rgba(255,212,0,0.25); }
.sb-mini-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-mini-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 4px 10px; border-radius: 11px; border: 1px solid rgba(0,229,255,0.4); color: #00e5ff; background: rgba(0,229,255,0.06); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: reduce) {
  .sb-mini-rail, .sb-mini-lbl, .sb-mini-foot-lbl, .sb-mini-pulse { transition: none; animation: none; }
}
```

### 08. Sticky Filter Sidebar

**Type:** Pure CSS
**Description:** Luxury e-commerce — cream paper, brass-gold accents, chocolate copy. The kind of filter rail you'd find at Aesop or Hermès. Native <code>&lt;details&gt;</code> for collapsible groups gives keyboard support and <code>aria-expanded</code> for free; <code>accent-color</code> tints the checkboxes.

**HTML:**
```html
<div class="sb-stk">
  <aside class="sb-stk-side" aria-label="Filters">
    <header>
      <span class="sb-stk-tag">Refine</span>
      <h3>Filters</h3>
      <span class="sb-stk-clear">Clear all</span>
    </header>
    <details open>
      <summary>Category <em>4</em></summary>
      <ul>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Tops</span><b>148</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" checked /> <span>Knitwear</span><b>62</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Outerwear</span><b>94</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="cat" /> <span>Trousers</span><b>76</b></label>
        </li>
      </ul>
    </details>
    <details open>
      <summary>Size <em>5</em></summary>
      <div class="sb-stk-chips">
        <label><input type="radio" name="sz" /><span>XS</span></label>
        <label><input type="radio" name="sz" /><span>S</span></label>
        <label><input type="radio" name="sz" checked /><span>M</span></label>
        <label><input type="radio" name="sz" /><span>L</span></label>
        <label><input type="radio" name="sz" /><span>XL</span></label>
      </div>
    </details>
    <details>
      <summary>Material</summary>
      <ul>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Cashmere</span><b>18</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Merino wool</span><b>34</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Cotton</span><b>52</b></label>
        </li>
        <li>
          <label><input type="checkbox" name="mt" /> <span>Linen</span><b>21</b></label>
        </li>
      </ul>
    </details>
    <details>
      <summary>Price</summary>
      <ul>
        <li>
          <label><input type="checkbox" name="pr" /> <span>Under $200</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$200 – $400</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$400 – $800</span></label>
        </li>
        <li>
          <label><input type="checkbox" name="pr" /> <span>$800+</span></label>
        </li>
      </ul>
    </details>
  </aside>
  <main class="sb-stk-main">
    <header class="sb-stk-mhead">
      <span class="sb-stk-eye">FW · 26 Collection</span>
      <h2>Knitwear.</h2>
      <p><strong>238</strong> pieces · Sorted by <em>Newest</em></p>
    </header>
    <div class="sb-stk-grid" aria-label="Product grid">
      <article class="sb-stk-tile"><span class="sb-stk-num">01</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">02</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">03</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">04</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">05</span></article>
      <article class="sb-stk-tile"><span class="sb-stk-num">06</span></article>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-stk {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f6efe1;
  color: #3c2818;
  border-radius: 0;
  overflow: hidden;
  accent-color: #b8924a;
  border: 1px solid #b8924a;
}
.sb-stk-side {
  position: sticky; top: 0; align-self: start;
  min-height: 480px; padding: 22px 18px;
  background: #ede2cb;
  border-right: 1px solid #b8924a;
  font-size: 13px;
}
.sb-stk-side header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #b8924a; margin-bottom: 12px; }
.sb-stk-tag { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em; color: #b8924a; text-transform: uppercase; align-self: end; }
.sb-stk-side h3 { grid-column: 1 / -1; margin: 0; font-size: 26px; font-weight: 500; font-style: italic; color: #3c2818; letter-spacing: -0.01em; line-height: 1; }
.sb-stk-clear { font-family: 'Inter', sans-serif; font-size: 10.5px; font-style: italic; color: #b8924a; cursor: pointer; align-self: end; text-decoration: underline; text-underline-offset: 3px; }
.sb-stk-side details { padding: 12px 0; border-bottom: 1px solid #d4c39c; }
.sb-stk-side details:last-of-type { border-bottom: 0; }
.sb-stk-side summary { cursor: pointer; padding: 4px 0; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #3c2818; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sb-stk-side summary::-webkit-details-marker { display: none; }
.sb-stk-side summary em { font-family: 'Cormorant Garamond', serif; font-size: 12px; font-style: italic; font-weight: 500; color: #b8924a; letter-spacing: 0; text-transform: none; }
.sb-stk-side summary::after { content: '+'; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: #b8924a; margin-left: 8px; transition: transform 0.2s; }
.sb-stk-side details[open] summary::after { content: '−'; }
.sb-stk-side ul { list-style: none; margin: 10px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-stk-side label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: #5a4030; cursor: pointer; font-family: 'Cormorant Garamond', serif; font-size: 14.5px; font-weight: 500; }
.sb-stk-side label b { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: #b8924a; letter-spacing: 0.04em; }
.sb-stk-side input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid #b8924a; background: transparent; cursor: pointer; flex-shrink: 0; transition: background 0.14s; position: relative; }
.sb-stk-side input[type="checkbox"]:checked { background: #b8924a; }
.sb-stk-side input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #f6efe1; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sb-stk-side input[type="checkbox"]:focus-visible { outline: 2px solid #b8924a; outline-offset: 2px; }
.sb-stk-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.sb-stk-chips label { position: relative; cursor: pointer; display: inline-flex; }
.sb-stk-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-stk-chips input:focus-visible + span { outline: 2px solid #b8924a; outline-offset: 2px; }
.sb-stk-chips span {
  display: inline-block; padding: 6px 12px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  background: transparent; color: #3c2818;
  border: 1px solid #b8924a;
  transition: background 0.14s, color 0.14s;
}
.sb-stk-chips input:checked + span { background: #3c2818; color: #f6efe1; border-color: #3c2818; }
.sb-stk-main { padding: 32px 36px; background: #faf3e3; }
.sb-stk-mhead { padding-bottom: 16px; border-bottom: 1px solid #d4c39c; margin-bottom: 22px; }
.sb-stk-eye { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; color: #b8924a; text-transform: uppercase; }
.sb-stk-main h2 { margin: 4px 0 6px; font-size: clamp(36px, 5vw, 56px); font-weight: 500; color: #3c2818; letter-spacing: -0.02em; line-height: 1; font-style: italic; }
.sb-stk-main p { margin: 0; font-family: 'Inter', sans-serif; font-size: 11.5px; color: #6a4d35; letter-spacing: 0.04em; }
.sb-stk-main p strong { color: #3c2818; font-weight: 700; }
.sb-stk-main p em { color: #b8924a; font-style: italic; font-weight: 600; }
.sb-stk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb-stk-tile { position: relative; aspect-ratio: 3/4; background: linear-gradient(160deg, #ede2cb 0%, #d8c8a8 100%); border: 1px solid #d4c39c; }
.sb-stk-tile::after { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(184,146,74,0.4); }
.sb-stk-num { position: absolute; bottom: 14px; right: 14px; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: #b8924a; }
@media (max-width: 720px) {
  .sb-stk { grid-template-columns: 1fr; }
  .sb-stk-side { position: static; min-height: auto; border-right: 0; border-bottom: 1px solid #b8924a; }
  .sb-stk-grid { grid-template-columns: repeat(2, 1fr); }
}
```

### 09. Floating Sidebar

**Type:** Pure CSS
**Description:** Art gallery white-cube — pure ivory canvas, hairline rules, oversized serif numerals. The sidebar floats as a museum placard with margin on all four sides; an oversized chocolate-on-ivory accent number frames the active item. The sidebar as printed material.

**HTML:**
```html
<div class="sb-flt">
  <aside class="sb-flt-side" aria-label="Primary">
    <header class="sb-flt-brand">
      <span class="sb-flt-mark" aria-hidden="true"></span>
      <div>
        <strong>Galerie</strong>
        <em>Salon No. 12</em>
      </div>
    </header>
    <nav aria-label="Primary">
      <ol>
        <li><a href="#!" aria-current="page">Overview</a></li>
        <li><a href="#!">Catalogue</a></li>
        <li><a href="#!">Artists</a></li>
        <li><a href="#!">Acquisitions</a></li>
        <li><a href="#!">Visit</a></li>
      </ol>
    </nav>
    <footer>
      <span>Open Tue—Sun · 10—18</span>
    </footer>
  </aside>
  <main class="sb-flt-main">
    <span class="sb-flt-eye">— Currently exhibiting</span>
    <h2><em>Light, &amp;</em><br />the Quiet Room.</h2>
    <p>
      The sidebar floats inside the canvas with margin on all four sides — light visual weight, lots
      of negative space, generous serif type. The effect is gallery placard, not control panel.
    </p>
    <figure class="sb-flt-figure">
      <div class="sb-flt-frame" aria-hidden="true">
        <span class="sb-flt-circ"></span>
      </div>
      <figcaption>
        <strong>Untitled (Cream / Black)</strong>
        <span>Iva Ström, 2024 · oil on linen</span>
      </figcaption>
    </figure>
  </main>
</div>
```

**CSS:**
```css
.sb-flt {
  display: grid; grid-template-columns: auto 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf9f4; color: #1a1a1a;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.sb-flt-side {
  margin: 22px 0 22px 22px; padding: 22px 18px; width: 220px;
  background: #fff;
  border: 1px solid #1a1a1a;
  display: flex; flex-direction: column; gap: 18px;
  align-self: start; position: sticky; top: 22px;
}
.sb-flt-brand { display: flex; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid #1a1a1a; }
.sb-flt-mark { width: 14px; height: 14px; background: #1a1a1a; flex-shrink: 0; transform: rotate(45deg); }
.sb-flt-brand strong { display: block; font-size: 22px; font-weight: 500; font-style: italic; color: #1a1a1a; line-height: 1; letter-spacing: -0.01em; }
.sb-flt-brand em { display: block; font-family: 'Inter', sans-serif; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: 0.22em; color: #6a4d35; margin-top: 4px; text-transform: uppercase; }
.sb-flt-side ol { list-style: none; margin: 0; padding: 0; counter-reset: flt; display: flex; flex-direction: column; gap: 0; }
.sb-flt-side li { counter-increment: flt; }
.sb-flt-side a {
  display: grid; grid-template-columns: 32px 1fr;
  align-items: baseline; gap: 12px;
  padding: 11px 0;
  font-size: 16px; color: #1a1a1a; text-decoration: none;
  border-bottom: 1px dotted #d4cabc;
  transition: padding-left 0.16s, color 0.16s;
}
.sb-flt-side a::before {
  content: counter(flt, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #b8924a;
  align-self: center;
}
.sb-flt-side a:hover { padding-left: 4px; color: #6a4d35; }
.sb-flt-side a[aria-current="page"] { font-style: italic; padding-left: 4px; }
.sb-flt-side a[aria-current="page"]::before { color: #1a1a1a; }
.sb-flt-side a[aria-current="page"]::after {
  content: '·'; font-family: serif; font-size: 22px; line-height: 0; margin-left: 6px; color: #c45a3e;
}
.sb-flt-side footer { margin-top: auto; padding-top: 12px; border-top: 1px solid #1a1a1a; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.12em; color: #6a4d35; text-align: center; text-transform: uppercase; }
.sb-flt-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; }
.sb-flt-eye { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; color: #c45a3e; text-transform: uppercase; }
.sb-flt-main h2 { margin: 0; font-size: clamp(36px, 5vw, 64px); font-weight: 500; color: #1a1a1a; letter-spacing: -0.03em; line-height: 0.95; }
.sb-flt-main h2 em { font-style: italic; font-weight: 500; color: #6a4d35; }
.sb-flt-main p { margin: 0; font-family: 'Cormorant Garamond', 'Georgia', serif; font-size: 17px; color: #3c2818; line-height: 1.55; max-width: 540px; }
.sb-flt-figure { margin: 12px 0 0; display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; }
.sb-flt-frame { aspect-ratio: 1; background: #f4ede0; border: 1px solid #1a1a1a; position: relative; box-shadow: 8px 8px 0 #1a1a1a; }
.sb-flt-circ { position: absolute; left: 28%; top: 22%; width: 56px; height: 56px; border-radius: 50%; background: #1a1a1a; }
.sb-flt-figure figcaption strong { display: block; font-style: italic; font-size: 18px; font-weight: 500; color: #1a1a1a; }
.sb-flt-figure figcaption span { display: block; font-family: 'Inter', sans-serif; font-size: 11px; color: #6a4d35; letter-spacing: 0.04em; margin-top: 4px; }
@media (max-width: 720px) {
  .sb-flt { grid-template-columns: 1fr; }
  .sb-flt-side { width: auto; margin: 18px 18px 0; position: static; }
  .sb-flt-figure { grid-template-columns: 1fr; }
}
```

### 10. Footer-pinned Sidebar

**Type:** Pure CSS
**Description:** Gaming console — onyx black with carbon-fibre texture, plasma-green accents, monospace HUD type. Nav at the top, a player-profile block pinned to the bottom of the sidebar. Pure CSS via flex column + <code>margin-top: auto</code> on the footer.

**HTML:**
```html
<div class="sb-ftr">
  <aside class="sb-ftr-side" aria-label="Primary">
    <header class="sb-ftr-brand">
      <span class="sb-ftr-mark" aria-hidden="true"></span>
      <div>
        <strong>QUANTUM<small>OS</small></strong>
      </div>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-ftr-i" aria-hidden="true">▶</span>Play<em>P</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">▤</span>Library<em>L</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">◇</span>Friends<em>F</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">★</span>Trophies<em>T</em></a>
        </li>
        <li>
          <a href="#!"><span class="sb-ftr-i" aria-hidden="true">⚙</span>Settings<em>S</em></a>
        </li>
      </ul>
    </nav>
    <footer class="sb-ftr-foot">
      <div class="sb-ftr-avatar" aria-hidden="true">VR</div>
      <div class="sb-ftr-user">
        <strong>vimal_raj_</strong>
        <span><i></i>Online · LVL 47</span>
      </div>
    </footer>
  </aside>
  <main class="sb-ftr-main">
    <span class="sb-ftr-eye">▸ NOW LOADING · ARENA_47</span>
    <h2>Ready<br />Player One.</h2>
    <p>
      The user block at the bottom is pinned with <code>margin-top: auto</code> — it stays put no
      matter how many nav items appear above. Plasma green for "online" because nothing else has the
      right intensity.
    </p>
    <div class="sb-ftr-stats">
      <div class="sb-ftr-stat"><b>2,481</b><span>XP</span></div>
      <div class="sb-ftr-stat"><b>87</b><span>Wins</span></div>
      <div class="sb-ftr-stat"><b>4.9</b><span>Rank</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-ftr {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #0a0a0c;
  color: #d8e6dc;
  border-radius: 4px; overflow: hidden;
  border: 1px solid #00ff88;
  box-shadow: 0 0 32px rgba(0,255,136,0.15);
}
.sb-ftr-side {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, rgba(255,255,255,0.015) 8px 9px),
    linear-gradient(180deg, #14181a 0%, #0a0c0d 100%);
  border-right: 1px solid rgba(0,255,136,0.3);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.sb-ftr-side::before {
  content: ''; position: absolute; right: -1px; top: 30%; bottom: 30%; width: 2px;
  background: #00ff88; box-shadow: 0 0 12px #00ff88;
}
.sb-ftr-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid rgba(0,255,136,0.25); }
.sb-ftr-mark { width: 28px; height: 28px; flex-shrink: 0; background: linear-gradient(135deg, #00ff88 0%, #00b870 100%); transform: rotate(45deg); box-shadow: 0 0 16px rgba(0,255,136,0.6), inset 0 0 8px rgba(0,0,0,0.4); }
.sb-ftr-brand strong { font-family: 'Courier New', monospace; font-size: 14px; font-weight: 800; letter-spacing: 0.18em; color: #fff; line-height: 1; }
.sb-ftr-brand strong small { display: block; font-size: 9.5px; color: #00ff88; font-weight: 700; letter-spacing: 0.4em; margin-top: 4px; text-shadow: 0 0 8px rgba(0,255,136,0.5); }
.sb-ftr-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sb-ftr-side a {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; color: #8aa094;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.sb-ftr-side a:hover { background: rgba(0,255,136,0.08); color: #fff; border-left-color: rgba(0,255,136,0.5); }
.sb-ftr-side a[aria-current="page"] {
  background: rgba(0,255,136,0.14); color: #00ff88;
  border-left-color: #00ff88;
  text-shadow: 0 0 8px rgba(0,255,136,0.5);
  box-shadow: inset 0 0 16px rgba(0,255,136,0.08);
}
.sb-ftr-i { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; }
.sb-ftr-side a em { margin-left: auto; font-size: 9.5px; font-style: normal; padding: 1px 5px; border: 1px solid rgba(138,160,148,0.35); border-radius: 2px; color: #8aa094; }
.sb-ftr-side a[aria-current="page"] em { border-color: rgba(0,255,136,0.5); color: #00ff88; }
.sb-ftr-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.25);
  border-radius: 4px;
}
.sb-ftr-avatar {
  width: 38px; height: 38px; flex-shrink: 0;
  background: linear-gradient(135deg,#00ff88,#00b870);
  color: #0a0a0c;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Courier New', monospace; font-size: 13px; font-weight: 900;
  letter-spacing: 0.04em;
  clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}
.sb-ftr-user { min-width: 0; flex: 1; }
.sb-ftr-user strong { display: block; font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-ftr-user span { display: flex; align-items: center; gap: 6px; font-family: 'Courier New', monospace; font-size: 10px; color: #8aa094; letter-spacing: 0.08em; margin-top: 3px; }
.sb-ftr-user span i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #00ff88; box-shadow: 0 0 8px #00ff88; animation: sb-ftr-blink 1.5s ease-in-out infinite; }
@keyframes sb-ftr-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-ftr-user span i { animation: none; } }
.sb-ftr-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 20px; background: linear-gradient(180deg, #0e1212 0%, #0a0a0c 100%); }
.sb-ftr-main::before { content: ''; position: absolute; }
.sb-ftr-eye { font-family: 'Courier New', monospace; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; color: #00ff88; text-shadow: 0 0 8px rgba(0,255,136,0.5); }
.sb-ftr-main h2 { margin: 0; font-family: 'Inter', sans-serif; font-size: clamp(36px, 5vw, 64px); font-weight: 900; line-height: 0.92; letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 30px rgba(0,255,136,0.2); }
.sb-ftr-main p { margin: 0; font-size: 13.5px; color: #b8c4be; line-height: 1.6; max-width: 460px; }
.sb-ftr-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #00ff88; background: rgba(0,255,136,0.1); padding: 1px 6px; border-radius: 2px; border: 1px solid rgba(0,255,136,0.3); }
.sb-ftr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 460px; margin-top: auto; }
.sb-ftr-stat { padding: 14px 16px; background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.25); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.sb-ftr-stats b { display: block; font-family: 'Courier New', monospace; font-size: 24px; font-weight: 900; color: #00ff88; letter-spacing: 0.04em; line-height: 1; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.sb-ftr-stats span { display: block; font-family: 'Courier New', monospace; font-size: 10px; color: #8aa094; letter-spacing: 0.18em; margin-top: 6px; text-transform: uppercase; }
@media (max-width: 720px) {
  .sb-ftr { grid-template-columns: 1fr; }
  .sb-ftr-side { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .sb-ftr-foot { margin-top: 8px; }
}
```

### 11. Push-content Sidebar

**Type:** Pure CSS
**Description:** Mid-century modern — mustard sidebar, walnut content area, teal active pill. Eames-era graphic palette. Toggling the burger pushes the content right instead of overlaying it. Pure CSS via <code>:has(:checked)</code> on the grid template columns.

**HTML:**
```html
<div class="sb-psh">
  <input id="sb-psh-t" class="sb-psh-cb" type="checkbox" aria-label="Toggle navigation" />
  <aside class="sb-psh-side" aria-label="Primary">
    <header>
      <span class="sb-psh-mark" aria-hidden="true"></span>
      <strong>EAMES &amp; CO.</strong>
    </header>
    <h3>Workspaces</h3>
    <nav aria-label="Workspaces">
      <ul>
        <li><a href="#!" aria-current="page">Engineering</a></li>
        <li><a href="#!">Design</a></li>
        <li><a href="#!">Product</a></li>
        <li><a href="#!">Marketing</a></li>
        <li><a href="#!">Operations</a></li>
      </ul>
    </nav>
    <p class="sb-psh-quote">
      <em>"Details are not the details. They make the design."</em><br /><span
        >— Charles Eames</span
      >
    </p>
  </aside>
  <main class="sb-psh-main">
    <header class="sb-psh-bar">
      <label class="sb-psh-burger" for="sb-psh-t" aria-controls="sb-psh-side">
        <span aria-hidden="true"><i></i><i></i><i></i></span>
        <span class="sr-only">Toggle nav</span>
      </label>
      <strong>Engineering</strong>
      <span class="sb-psh-pill">Sprint 47</span>
    </header>
    <div class="sb-psh-body">
      <span class="sb-psh-eye">★ Established 1956</span>
      <h2>Form,<br />function,<br />flair.</h2>
      <p>
        Toggle the burger — content shifts right rather than being overlaid. Pure CSS on the grid
        template; works on desktop where both panes should remain visible.
      </p>
      <div class="sb-psh-cards">
        <article class="sb-psh-card">
          <span class="sb-psh-card-num">01</span>
          <strong>Lounge Chair</strong>
          <em>Walnut · Tan leather</em>
        </article>
        <article class="sb-psh-card">
          <span class="sb-psh-card-num">02</span>
          <strong>Wire Stool</strong>
          <em>Powder-coated steel</em>
        </article>
      </div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-psh {
  display: grid; grid-template-columns: 0 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f5e6c8;
  color: #2a1a10;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  border: 2px solid #2a1a10;
}
.sb-psh:has(.sb-psh-cb:checked) { grid-template-columns: 240px 1fr; }
.sb-psh-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-psh:has(.sb-psh-cb:focus-visible) .sb-psh-burger { outline: 2px solid #2a1a10; outline-offset: 2px; }
.sb-psh-side {
  background: #e8b04a;
  border-right: 2px solid #2a1a10;
  padding: 22px 18px; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.sb-psh-side header { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 2px solid #2a1a10; white-space: nowrap; }
.sb-psh-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: #1c5e6e; box-shadow: 0 0 0 3px #e8b04a, 0 0 0 5px #2a1a10; }
.sb-psh-side header strong { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; }
.sb-psh-side h3 { margin: 0 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #6b3d1c; white-space: nowrap; }
.sb-psh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-psh-side a { display: block; padding: 9px 12px; font-size: 14px; font-weight: 600; color: #2a1a10; text-decoration: none; white-space: nowrap; border-radius: 18px; transition: background 0.14s, color 0.14s; }
.sb-psh-side a:hover { background: rgba(42,26,16,0.1); }
.sb-psh-side a[aria-current="page"] { background: #1c5e6e; color: #f5e6c8; }
.sb-psh-quote { margin: auto 0 0; padding: 12px; background: rgba(28,94,110,0.12); border-left: 3px solid #1c5e6e; font-size: 12px; line-height: 1.5; color: #2a1a10; }
.sb-psh-quote em { font-style: italic; color: #1c5e6e; }
.sb-psh-quote span { display: block; font-size: 10.5px; color: #6b3d1c; font-weight: 700; letter-spacing: 0.04em; margin-top: 6px; font-style: normal; }
.sb-psh-main { display: flex; flex-direction: column; background: #4a3122; color: #f5e6c8; }
.sb-psh-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  background: #3a2418;
  border-bottom: 2px solid #2a1a10;
}
.sb-psh-burger {
  width: 38px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8b04a; color: #2a1a10;
  border: 2px solid #2a1a10;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #2a1a10;
  transition: transform 0.12s, box-shadow 0.12s;
}
.sb-psh-burger:hover { background: #f0c266; }
.sb-psh-burger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #2a1a10; }
.sb-psh-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-psh-burger i { display: block; width: 16px; height: 2px; background: #2a1a10; transition: transform 0.22s, opacity 0.22s; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(2) { opacity: 0; }
.sb-psh:has(.sb-psh-cb:checked) .sb-psh-burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.sb-psh-bar strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-pill { margin-left: auto; padding: 5px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #2a1a10; background: #e8b04a; border-radius: 12px; text-transform: uppercase; }
.sb-psh-body { padding: 32px 36px; display: flex; flex-direction: column; gap: 18px; }
.sb-psh-eye { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; color: #e8b04a; text-transform: uppercase; }
.sb-psh-main h2 { margin: 0; font-size: clamp(36px, 5.5vw, 64px); font-weight: 900; line-height: 0.92; color: #f5e6c8; letter-spacing: -0.03em; }
.sb-psh-main p  { margin: 0; font-size: 13.5px; color: rgba(245,230,200,0.85); line-height: 1.65; max-width: 460px; }
.sb-psh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e8b04a; background: rgba(232,176,74,0.14); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(232,176,74,0.4); }
.sb-psh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin-top: 6px; }
.sb-psh-card { padding: 16px 16px 14px; background: #5a4a3a; border-left: 4px solid #1c5e6e; display: flex; flex-direction: column; gap: 4px; }
.sb-psh-card-num { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; color: #e8b04a; }
.sb-psh-card strong { font-size: 16px; font-weight: 700; color: #f5e6c8; letter-spacing: -0.01em; }
.sb-psh-card em { font-size: 11.5px; font-style: italic; color: rgba(245,230,200,0.7); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .sb-psh, .sb-psh-burger i { transition: none; } }
```

### 12. Overlay with Backdrop

**Type:** Pure CSS
**Description:** Aurora glassmorphism — deep indigo night sky with drifting aurora-pink and cyan ribbons, frosted glass drawer with chromatic edge. Drawer slides in over the page; the backdrop blurs behind it. Pure CSS via <code>backdrop-filter</code> + <code>:has(:checked)</code>.

**HTML:**
```html
<div class="sb-ovl">
  <span class="sb-ovl-aurora-1" aria-hidden="true"></span>
  <span class="sb-ovl-aurora-2" aria-hidden="true"></span>
  <span class="sb-ovl-stars" aria-hidden="true"></span>
  <input id="sb-ovl-t" class="sb-ovl-cb" type="checkbox" aria-label="Toggle navigation" />
  <header class="sb-ovl-bar">
    <label class="sb-ovl-burger" for="sb-ovl-t" aria-controls="sb-ovl-drawer">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <span class="sr-only">Open menu</span>
    </label>
    <strong class="sb-ovl-brand">
      <span class="sb-ovl-mark" aria-hidden="true"></span>
      Polaris
    </strong>
    <span class="sb-ovl-time">63°N · 02:47</span>
  </header>
  <main class="sb-ovl-main">
    <span class="sb-ovl-eye">— Tonight, the sky moves slowly</span>
    <h2>The aurora<br /><em>opens</em> the menu.</h2>
    <p>
      Tap the burger — the drawer slides in over the page, the backdrop blurs the night sky behind.
      Tap the dim area or × to dismiss. Pure CSS, no JavaScript required.
    </p>
  </main>
  <label class="sb-ovl-backdrop" for="sb-ovl-t" aria-hidden="true"></label>
  <aside id="sb-ovl-drawer" class="sb-ovl-drawer" aria-label="Primary">
    <header>
      <strong>Menu</strong>
      <label class="sb-ovl-close" for="sb-ovl-t" aria-label="Close menu">×</label>
    </header>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">Home</a></li>
        <li><a href="#!">Library</a></li>
        <li><a href="#!">Saved</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer class="sb-ovl-foot">
      <span class="sb-ovl-dot" aria-hidden="true"></span>
      Aurora · KP 5.4
    </footer>
  </aside>
</div>
```

**CSS:**
```css
.sb-ovl {
  position: relative; min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: radial-gradient(ellipse at top, #1a1947 0%, #060321 60%, #02010d 100%);
  color: #e8e6ff;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.sb-ovl-aurora-1, .sb-ovl-aurora-2 { position: absolute; pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(48px); }
.sb-ovl-aurora-1 {
  top: -10%; left: -10%; width: 80%; height: 70%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,82,170,0.55), transparent 60%);
  animation: sb-ovl-drift1 14s ease-in-out infinite alternate;
}
.sb-ovl-aurora-2 {
  bottom: -20%; right: -10%; width: 80%; height: 80%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,229,255,0.45), transparent 60%);
  animation: sb-ovl-drift2 18s ease-in-out infinite alternate;
}
.sb-ovl-stars {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(1px 1px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent);
}
@keyframes sb-ovl-drift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(8%, 4%); }
}
@keyframes sb-ovl-drift2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-6%, -3%); }
}
@media (prefers-reduced-motion: reduce) { .sb-ovl-aurora-1, .sb-ovl-aurora-2 { animation: none; } }
.sb-ovl-cb { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-ovl:has(.sb-ovl-cb:focus-visible) .sb-ovl-burger { outline: 2px solid #ff52aa; outline-offset: 2px; }
.sb-ovl-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(8,4,32,0.45);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sb-ovl-burger {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.14s;
}
.sb-ovl-burger:hover { background: rgba(255,255,255,0.16); }
.sb-ovl-burger span { display: inline-flex; flex-direction: column; gap: 3px; }
.sb-ovl-burger i { display: block; width: 16px; height: 2px; background: linear-gradient(90deg, #ff52aa, #00e5ff); border-radius: 2px; }
.sb-ovl-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sb-ovl-mark { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #ff52aa 0%, #00e5ff 100%); box-shadow: 0 0 16px rgba(255,82,170,0.6); }
.sb-ovl-time { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #b8b6ff; letter-spacing: 0.06em; }
.sb-ovl-main { position: relative; z-index: 2; flex: 1; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-ovl-eye { font-size: 12px; color: #00e5ff; letter-spacing: 0.04em; font-style: italic; text-shadow: 0 0 12px rgba(0,229,255,0.5); }
.sb-ovl-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 0.95;
  color: #fff; letter-spacing: -0.03em;
  text-shadow: 0 0 30px rgba(255,82,170,0.3);
}
.sb-ovl-main h2 em { font-style: italic; background: linear-gradient(135deg, #ff52aa, #00e5ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-ovl-main p  { margin: 0; font-size: 13.5px; color: rgba(232,230,255,0.85); line-height: 1.6; max-width: 460px; }
.sb-ovl-main code { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #ff52aa; background: rgba(255,82,170,0.12); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(255,82,170,0.3); }
.sb-ovl-backdrop {
  position: absolute; inset: 0;
  background: rgba(2,1,13,0.4);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.26s ease;
  z-index: 3;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-backdrop { opacity: 1; pointer-events: auto; }
.sb-ovl-drawer {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px;
  background: rgba(20,16,46,0.55);
  backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-right: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    8px 0 32px rgba(0,0,0,0.4),
    inset -1px 0 0 rgba(255,82,170,0.5),
    inset 1px 1px 0 rgba(255,255,255,0.18);
  transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 4;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
}
.sb-ovl:has(.sb-ovl-cb:checked) .sb-ovl-drawer { transform: translateX(0); }
.sb-ovl-drawer header { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.sb-ovl-drawer header strong { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.sb-ovl-close { font-size: 22px; line-height: 1; color: rgba(255,255,255,0.7); cursor: pointer; padding: 0 8px; user-select: none; transition: color 0.14s; }
.sb-ovl-close:hover { color: #ff52aa; }
.sb-ovl-drawer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-ovl-drawer a { display: block; padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; border: 1px solid transparent; transition: background 0.14s, color 0.14s, border-color 0.14s; }
.sb-ovl-drawer a:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.18); }
.sb-ovl-drawer a[aria-current="page"] { background: linear-gradient(90deg, rgba(255,82,170,0.22), rgba(0,229,255,0.22)); color: #fff; border-color: rgba(255,255,255,0.3); box-shadow: 0 0 16px rgba(255,82,170,0.3); }
.sb-ovl-foot { margin-top: auto; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; }
.sb-ovl-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .sb-ovl-drawer, .sb-ovl-backdrop { transition: none; }
}
```

### 13. Persistent Collapsible

**Type:** Light JS
**Description:** Pure white canvas, ink-black type, one single red dot for the active item. Swiss-poster minimalism. Click the toggle to collapse; state persists across page reloads via <code>localStorage</code>. An inline IIFE applies the stored state before paint to avoid a flash.

**HTML:**
```html
<div class="sb-prs" data-collapsed="false">
  <aside class="sb-prs-side" aria-label="Primary">
    <button
      class="sb-prs-toggle"
      type="button"
      aria-expanded="true"
      aria-controls="sb-prs-nav"
      aria-label="Collapse sidebar"
    >
      <span class="sb-prs-burger" aria-hidden="true"><i></i><i></i></span>
      <span class="sb-prs-tlabel">Collapse</span>
    </button>
    <header class="sb-prs-brand">
      <span class="sb-prs-mark" aria-hidden="true"></span>
      <span class="sb-prs-name">Atlas</span>
    </header>
    <nav id="sb-prs-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"><em>01</em><span class="sb-prs-lbl">Index</span></a>
        </li>
        <li>
          <a href="#!"><em>02</em><span class="sb-prs-lbl">Projects</span></a>
        </li>
        <li>
          <a href="#!"><em>03</em><span class="sb-prs-lbl">Studio</span></a>
        </li>
        <li>
          <a href="#!"><em>04</em><span class="sb-prs-lbl">Press</span></a>
        </li>
        <li>
          <a href="#!"><em>05</em><span class="sb-prs-lbl">Contact</span></a>
        </li>
      </ul>
    </nav>
    <footer class="sb-prs-foot">
      <span class="sb-prs-foot-lbl">© Atlas, MMXXVI</span>
    </footer>
  </aside>
  <main class="sb-prs-main">
    <span class="sb-prs-eye">— Persistent state · localStorage</span>
    <h2>Less,<br />but better.</h2>
    <p>
      Click the toggle — the sidebar collapses to icons only. The state is written to
      <code>localStorage</code>, so a refresh keeps your choice. An inline IIFE applies the stored
      state before the page paints, preventing any flash.
    </p>
  </main>
</div>
```

**CSS:**
```css
.sb-prs {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', 'Inter', system-ui, sans-serif;
  background: #fafafa; color: #0a0a0a;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  border: 1px solid #0a0a0a;
}
.sb-prs[data-collapsed="true"] { grid-template-columns: 64px 1fr; }
.sb-prs-side {
  background: #fff;
  border-right: 1px solid #0a0a0a;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.sb-prs-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #0a0a0a; border-radius: 0;
  background: #fafafa; color: #0a0a0a;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.14s;
}
.sb-prs-toggle:hover { background: #0a0a0a; color: #fff; }
.sb-prs-toggle:hover .sb-prs-burger i { background: #fff; }
.sb-prs-burger { display: inline-flex; flex-direction: column; gap: 4px; }
.sb-prs-burger i { display: block; width: 14px; height: 1.5px; background: #0a0a0a; transition: transform 0.22s; }
.sb-prs[data-collapsed="true"] .sb-prs-burger i:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.sb-prs[data-collapsed="true"] .sb-prs-burger i:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }
.sb-prs-tlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-tlabel { opacity: 0; pointer-events: none; }
.sb-prs-brand { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid #0a0a0a; padding-bottom: 18px; white-space: nowrap; }
.sb-prs-mark { width: 12px; height: 12px; border-radius: 50%; background: #e63946; flex-shrink: 0; }
.sb-prs-name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: #0a0a0a; line-height: 1; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-name { opacity: 0; pointer-events: none; }
.sb-prs-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-prs-side a {
  position: relative;
  display: grid; grid-template-columns: 30px 1fr;
  align-items: center; gap: 14px;
  padding: 12px 6px;
  font-size: 14px; font-weight: 600; color: #0a0a0a; text-decoration: none;
  border-bottom: 1px solid rgba(10,10,10,0.12);
  transition: padding-left 0.16s, color 0.16s;
}
.sb-prs-side a em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(10,10,10,0.5); letter-spacing: 0.06em; font-weight: 600; }
.sb-prs-side a:hover { padding-left: 12px; color: #e63946; }
.sb-prs-side a:hover em { color: #e63946; }
.sb-prs-side a[aria-current="page"] { padding-left: 12px; }
.sb-prs-side a[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #e63946; box-shadow: 0 0 0 0 rgba(230,57,70,0.5); animation: sb-prs-dot 2s ease-in-out infinite; }
@keyframes sb-prs-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(230,57,70,0.5); } 50% { box-shadow: 0 0 0 6px rgba(230,57,70,0); } }
@media (prefers-reduced-motion: reduce) { .sb-prs-side a[aria-current="page"]::before { animation: none; } }
.sb-prs-lbl { white-space: nowrap; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-lbl { opacity: 0; pointer-events: none; }
.sb-prs-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid #0a0a0a; }
.sb-prs-foot-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: rgba(10,10,10,0.5); letter-spacing: 0.16em; transition: opacity 0.18s; }
.sb-prs[data-collapsed="true"] .sb-prs-foot-lbl { opacity: 0; }
.sb-prs-main { padding: 36px 40px; overflow: hidden; display: flex; flex-direction: column; gap: 18px; background: #fafafa; }
.sb-prs-eye { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #e63946; letter-spacing: 0.04em; }
.sb-prs-main h2 { margin: 0; font-size: clamp(36px, 5.5vw, 64px); font-weight: 800; line-height: 0.92; color: #0a0a0a; letter-spacing: -0.04em; }
.sb-prs-main p { margin: 0; font-size: 14.5px; color: #3a3a3a; line-height: 1.65; max-width: 480px; font-weight: 500; }
.sb-prs-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #0a0a0a; background: rgba(10,10,10,0.06); padding: 2px 6px; border-radius: 0; font-weight: 600; border-bottom: 1px solid #e63946; }
@media (prefers-reduced-motion: reduce) { .sb-prs, .sb-prs-tlabel, .sb-prs-lbl, .sb-prs-name, .sb-prs-foot-lbl, .sb-prs-burger i { transition: none; } }
```

**JS:**
```js
/* Persistent collapsible sidebar — restores state on load + toggles on click. */
(function () {
  var KEY = 'sb-prs-collapsed';
  var wrap = document.querySelector('.sb-prs');
  if (!wrap) return;

  var stored = localStorage.getItem(KEY) === 'true';
  wrap.dataset.collapsed = stored ? 'true' : 'false';

  var btn = wrap.querySelector('.sb-prs-toggle');
  if (!btn) return;
  btn.setAttribute('aria-expanded', String(!stored));

  btn.addEventListener('click', function () {
    var nowCollapsed = wrap.dataset.collapsed !== 'true';
    wrap.dataset.collapsed = nowCollapsed ? 'true' : 'false';
    btn.setAttribute('aria-expanded', String(!nowCollapsed));
    btn.setAttribute('aria-label', nowCollapsed ? 'Expand sidebar' : 'Collapse sidebar');
    localStorage.setItem(KEY, String(nowCollapsed));
  });
})();
```

### 14. Search-top Sidebar

**Type:** Pure CSS
**Description:** Frosted macOS Big-Sur — translucent grey sidebar with vibrancy blur over a pastel sunrise wallpaper, system-blue active state. A sticky <code>&lt;form role="search"&gt;</code> at the top stays visible as the nav scrolls. Native <code>&lt;input type="search"&gt;</code> for the clear button.

**HTML:**
```html
<div class="sb-srh">
  <span class="sb-srh-wall" aria-hidden="true"></span>
  <aside class="sb-srh-side" aria-label="Primary">
    <header class="sb-srh-traffic" aria-hidden="true"><i></i><i></i><i></i></header>
    <form class="sb-srh-form" role="search">
      <label class="sr-only" for="sb-srh-q">Search docs</label>
      <span class="sb-srh-icon" aria-hidden="true">⌕</span>
      <input id="sb-srh-q" type="search" name="q" placeholder="Search…" autocomplete="off" />
      <kbd>⌘K</kbd>
    </form>
    <nav aria-label="Primary">
      <h3>Favourites</h3>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-srh-i" style="background: #34c759">●</span>Inbox<em>12</em></a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-srh-i" style="background: #ff9500">●</span>Drafts<em>3</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #5ac8fa">●</span>Sent</a>
        </li>
      </ul>
      <h3>iCloud</h3>
      <ul>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">▤</span>Documents</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">◇</span>Desktop</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" aria-hidden="true">⇩</span>Downloads</a>
        </li>
      </ul>
      <h3>Tags</h3>
      <ul>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #ff3b30">●</span>Important</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #af52de">●</span>Personal</a>
        </li>
        <li>
          <a href="#!"><span class="sb-srh-i" style="background: #ffcc00">●</span>Travel</a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="sb-srh-main">
    <header class="sb-srh-mhead">
      <h2>Inbox</h2>
      <span class="sb-srh-meta">Updated just now · 12 unread</span>
    </header>
    <p>
      The search bar at the top stays sticky as the nav scrolls. Real
      <code>&lt;input type="search"&gt;</code> gives a native clear button. Vibrancy blur is pure
      CSS via <code>backdrop-filter</code>.
    </p>
    <div class="sb-srh-cards">
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background: #34c759"></span>
        <strong>Anya Petrova</strong>
        <em>Re: Q3 launch deck</em>
      </article>
      <article class="sb-srh-card">
        <span class="sb-srh-card-dot" style="background: #5ac8fa"></span>
        <strong>Daichi Sato</strong>
        <em>Friday demo recap</em>
      </article>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-srh {
  position: relative;
  display: grid; grid-template-columns: 250px 1fr;
  min-height: 480px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  color: #1a1a1f;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  letter-spacing: -0.01em;
}
.sb-srh-wall {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 30% 20%, #ffd1a8 0%, transparent 60%),
    radial-gradient(60% 60% at 80% 70%, #ffb6d4 0%, transparent 60%),
    linear-gradient(180deg, #fff5e8 0%, #ffe8f0 50%, #d8e9ff 100%);
}
.sb-srh-side {
  position: relative; z-index: 1;
  background: rgba(245,245,250,0.72);
  backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  max-height: 480px; overflow-y: auto;
}
.sb-srh-traffic { display: flex; gap: 7px; padding: 12px 14px 0; }
.sb-srh-traffic i { display: block; width: 11px; height: 11px; border-radius: 50%; }
.sb-srh-traffic i:nth-child(1) { background: #ff5f57; }
.sb-srh-traffic i:nth-child(2) { background: #febc2e; }
.sb-srh-traffic i:nth-child(3) { background: #28c840; }
.sb-srh-form {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  background: rgba(245,245,250,0.85);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.sb-srh-icon { color: #6e6e73; font-size: 13px; }
.sb-srh-form input {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 7px;
  color: #1a1a1f; font-size: 13px;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.sb-srh-form input:focus { outline: 3px solid rgba(0,122,255,0.4); outline-offset: -1px; border-color: rgba(0,122,255,0.6); }
.sb-srh-form kbd {
  font-family: -apple-system, sans-serif; font-size: 10.5px; font-weight: 600;
  padding: 2px 6px;
  background: rgba(255,255,255,0.7);
  color: #6e6e73;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 4px;
}
.sb-srh-side nav { padding: 14px 10px 18px; }
.sb-srh-side h3 { margin: 14px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: #6e6e73; }
.sb-srh-side h3:first-of-type { margin-top: 4px; }
.sb-srh-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-srh-side a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #1a1a1f;
  text-decoration: none;
  transition: background 0.14s, color 0.14s;
}
.sb-srh-side a:hover { background: rgba(0,0,0,0.05); }
.sb-srh-side a[aria-current="page"] { background: #007aff; color: #fff; font-weight: 600; }
.sb-srh-side a[aria-current="page"] em { color: rgba(255,255,255,0.85); }
.sb-srh-i { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; font-size: 7.5px; color: transparent; line-height: 0; }
.sb-srh-side a em { margin-left: auto; font-style: normal; font-size: 11px; color: #6e6e73; font-weight: 600; }
.sb-srh-main { position: relative; z-index: 1; padding: 32px 36px; background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; gap: 16px; }
.sb-srh-mhead { display: flex; align-items: baseline; justify-content: space-between; }
.sb-srh-main h2 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #1a1a1f; letter-spacing: -0.03em; }
.sb-srh-meta { font-size: 12px; color: #6e6e73; }
.sb-srh-main p { margin: 0; font-size: 13.5px; color: #3a3a3f; line-height: 1.6; max-width: 480px; }
.sb-srh-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #007aff; background: rgba(0,122,255,0.1); padding: 1px 6px; border-radius: 4px; }
.sb-srh-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sb-srh-card {
  display: grid; grid-template-columns: 10px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 4px 16px rgba(0,0,0,0.04);
  transition: transform 0.14s, box-shadow 0.14s;
}
.sb-srh-card:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px rgba(0,0,0,0.08); }
.sb-srh-card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sb-srh-card strong { font-size: 13.5px; font-weight: 700; color: #1a1a1f; }
.sb-srh-card em { font-style: normal; font-size: 12.5px; color: #6e6e73; grid-column: 2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .sb-srh { grid-template-columns: 1fr; }
  .sb-srh-side { max-height: none; border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
}
```

### 15. Section-grouped Nav

**Type:** Pure CSS
**Description:** Memphis design — pastel-pink sidebar with mint and lemon accents, black squiggle backgrounds, hard-shadow chunky pills. Each section is its own <code>&lt;nav aria-label&gt;</code> so screen readers jump cleanly. The 80s/90s graphic style reborn for an admin shell.

**HTML:**
```html
<div class="sb-grp">
  <aside class="sb-grp-side" aria-label="Primary">
    <a class="sb-grp-brand" href="#!">
      <span class="sb-grp-dot" aria-hidden="true"></span>
      <span class="sb-grp-name">Sundae<small>by Atelier</small></span>
    </a>
    <nav aria-label="Workspace">
      <h3>Workspace</h3>
      <ul>
        <li><a href="#!" aria-current="page">Dashboard</a></li>
        <li><a href="#!">Projects</a></li>
        <li><a href="#!">Team</a></li>
      </ul>
    </nav>
    <nav aria-label="Account">
      <h3>Account</h3>
      <ul>
        <li><a href="#!">Profile</a></li>
        <li><a href="#!">Billing</a></li>
        <li><a href="#!">API keys</a></li>
      </ul>
    </nav>
    <nav aria-label="Help">
      <h3>Help</h3>
      <ul>
        <li><a href="#!">Documentation</a></li>
        <li><a href="#!">Support</a></li>
      </ul>
    </nav>
  </aside>
  <main class="sb-grp-main">
    <span class="sb-grp-eye">★ HELLO, FRIEND</span>
    <h2>Welcome<br />back!</h2>
    <p>
      Each section is a separate <code>&lt;nav&gt;</code> — screen readers skip cleanly between
      Workspace / Account / Help. The squiggle background is pure CSS (<code>radial-gradient</code>
      + <code>repeating</code>).
    </p>
    <div class="sb-grp-cards">
      <div class="sb-grp-c sb-grp-c-mint"><strong>284</strong><span>Active</span></div>
      <div class="sb-grp-c sb-grp-c-lemon"><strong>47</strong><span>Pending</span></div>
      <div class="sb-grp-c sb-grp-c-coral"><strong>12</strong><span>Closed</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-grp {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 80% 20%, #ffe4ec 0%, transparent 40%),
    radial-gradient(circle at 20% 80%, #d4f6e8 0%, transparent 40%),
    #fff7e8;
  color: #1a1a1a;
  border-radius: 16px; overflow: hidden;
  border: 3px solid #1a1a1a;
}
.sb-grp-side {
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(26,26,26,0.04) 20px 21px),
    #ffd4e5;
  border-right: 3px solid #1a1a1a;
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto; max-height: 480px;
}
.sb-grp-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; text-decoration: none; border-bottom: 2px dashed #1a1a1a; }
.sb-grp-dot { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #ffd400; border: 2px solid #1a1a1a; box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-name { font-family: 'Helvetica Neue', system-ui, sans-serif; font-size: 16px; font-weight: 900; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1; }
.sb-grp-name small { display: block; font-size: 9.5px; font-weight: 600; color: #c54b8c; text-transform: uppercase; letter-spacing: 0.16em; margin-top: 2px; }
.sb-grp-side h3 { margin: 0 0 6px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #c54b8c; }
.sb-grp-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-grp-side a {
  display: block;
  padding: 8px 12px;
  border-radius: 22px;
  font-size: 13px; font-weight: 700;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #1a1a1a;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.sb-grp-side a:hover { background: #fff7e8; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-side a[aria-current="page"] { background: #6dd5b3; color: #1a1a1a; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.sb-grp-main {
  position: relative;
  padding: 30px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.sb-grp-main::before {
  content: ''; position: absolute; top: 24px; right: 28px;
  width: 56px; height: 56px;
  background: #ffd400; border: 3px solid #1a1a1a;
  transform: rotate(15deg);
  box-shadow: 4px 4px 0 #1a1a1a;
  z-index: 0;
}
.sb-grp-main::after {
  content: ''; position: absolute; bottom: 80px; right: 60px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #c54b8c; border: 3px solid #1a1a1a;
  box-shadow: 3px 3px 0 #1a1a1a;
  z-index: 0;
}
.sb-grp-eye { position: relative; z-index: 1; font-family: 'Helvetica Neue', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0.2em; color: #c54b8c; }
.sb-grp-main h2 { position: relative; z-index: 1; margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.92; color: #1a1a1a; letter-spacing: -0.03em; }
.sb-grp-main h2::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 6px; background: #c54b8c; border: 2px solid #1a1a1a; border-radius: 50%; vertical-align: middle; box-shadow: 2px 2px 0 #1a1a1a; }
.sb-grp-main p { position: relative; z-index: 1; margin: 0; font-size: 13.5px; color: #4a4a4a; line-height: 1.6; max-width: 460px; }
.sb-grp-main code { font-family: 'Courier New', monospace; font-size: 12px; font-weight: 700; color: #1a1a1a; background: #ffd400; padding: 1px 6px; border-radius: 3px; border: 1.5px solid #1a1a1a; }
.sb-grp-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; max-width: 480px; }
.sb-grp-c { padding: 14px 14px; border: 2.5px solid #1a1a1a; border-radius: 14px; box-shadow: 4px 4px 0 #1a1a1a; display: flex; flex-direction: column; gap: 2px; }
.sb-grp-c strong { font-size: 22px; font-weight: 900; color: #1a1a1a; line-height: 1; letter-spacing: -0.02em; }
.sb-grp-c span { font-size: 11px; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 0.08em; }
.sb-grp-c-mint  { background: #6dd5b3; }
.sb-grp-c-lemon { background: #ffd400; }
.sb-grp-c-coral { background: #ff8b7a; }
@media (max-width: 720px) {
  .sb-grp { grid-template-columns: 1fr; }
  .sb-grp-side { border-right: 0; border-bottom: 3px solid #1a1a1a; max-height: none; }
  .sb-grp-cards { grid-template-columns: 1fr; }
}
```

### 16. Target-active Highlight

**Type:** Light JS
**Description:** Retro magazine TOC — cream paper, sepia rules, bordeaux-red active marker. The contents page of a 1970s journal. Active-link state via URL hash + <code>:target</code> pseudo-class; sibling selectors highlight the corresponding nav link. A 4-line script uses <code>history.pushState</code> so the URL hash updates without scrolling the host page.

**HTML:**
```html
<div class="sb-act" id="sb-act-root">
  <aside class="sb-act-side" aria-label="Primary">
    <header>
      <span class="sb-act-issue">Issue No. 47</span>
      <h3>Contents</h3>
    </header>
    <nav aria-label="Primary">
      <ol>
        <li>
          <a href="#sb-act-overview" data-tgt="overview"><span>Overview</span><em>p. 04</em></a>
        </li>
        <li>
          <a href="#sb-act-features" data-tgt="features"><span>Features</span><em>p. 12</em></a>
        </li>
        <li>
          <a href="#sb-act-pricing" data-tgt="pricing"><span>Pricing</span><em>p. 28</em></a>
        </li>
        <li>
          <a href="#sb-act-changelog" data-tgt="changelog"><span>Changelog</span><em>p. 36</em></a>
        </li>
      </ol>
    </nav>
    <footer>Spring · MMXXVI</footer>
  </aside>
  <main class="sb-act-main">
    <section id="sb-act-overview" class="sb-act-sec">
      <span class="sb-act-page">— Page 04</span>
      <h2>Overview.</h2>
      <p>
        Click a link to the left — the <code>:target</code> pseudo-class highlights it
        automatically. Sibling selectors do the work; <code>history.pushState</code> keeps the host
        page from jumping.
      </p>
    </section>
    <section id="sb-act-features" class="sb-act-sec">
      <span class="sb-act-page">— Page 12</span>
      <h2>Features.</h2>
      <p>
        The CSS pattern is <code>:has(#section:target) a[href="#section"]</code>. No JavaScript
        needed for the highlighting itself.
      </p>
    </section>
    <section id="sb-act-pricing" class="sb-act-sec">
      <span class="sb-act-page">— Page 28</span>
      <h2>Pricing.</h2>
      <p>
        Hash-based routing works in any browser. No router library, no framework dependency, no
        virtual DOM.
      </p>
    </section>
    <section id="sb-act-changelog" class="sb-act-sec">
      <span class="sb-act-page">— Page 36</span>
      <h2>Changelog.</h2>
      <p>
        Each section is a real <code>&lt;section&gt;</code> with an id — semantic, bookmarkable, and
        shareable.
      </p>
    </section>
  </main>
</div>
```

**CSS:**
```css
.sb-act {
  display: grid; grid-template-columns: 240px 1fr;
  min-height: 480px;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #f4ecdb;
  color: #2a1a10;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a1a10;
}
.sb-act-side {
  background: #ede0c4;
  border-right: 1px solid #2a1a10;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-act-side header { padding-bottom: 14px; border-bottom: 2px solid #2a1a10; }
.sb-act-issue { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: #8a4a2c; text-transform: uppercase; }
.sb-act-side h3 { margin: 4px 0 0; font-size: 30px; font-weight: 500; font-style: italic; color: #2a1a10; letter-spacing: -0.02em; line-height: 1; }
.sb-act-side ol { list-style: none; margin: 0; padding: 0; counter-reset: act; display: flex; flex-direction: column; gap: 0; }
.sb-act-side li { counter-increment: act; }
.sb-act-side a {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 10px 4px;
  font-size: 16px; color: #2a1a10; text-decoration: none;
  border-bottom: 1px dotted #b89668;
  transition: padding-left 0.16s, color 0.16s;
}
.sb-act-side a::before {
  content: counter(act, decimal-leading-zero);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #8a4a2c;
  align-self: center;
}
.sb-act-side a span { font-style: italic; }
.sb-act-side a em { font-family: 'Inter', sans-serif; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #8a4a2c; }
.sb-act-side a:hover { padding-left: 4px; color: #8a1f2c; }
.sb-act-side footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #2a1a10; font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.18em; color: #8a4a2c; text-align: center; text-transform: uppercase; }
.sb-act-main { padding: 28px 32px; overflow-y: auto; max-height: 480px; background: #fbf5e6; }
.sb-act-sec { padding: 18px 0; border-bottom: 1px solid #d8c598; }
.sb-act-sec:last-child { border-bottom: 0; }
.sb-act-page { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; color: #8a1f2c; text-transform: uppercase; }
.sb-act-sec h2 { margin: 4px 0 8px; font-family: 'Playfair Display', 'Georgia', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: #2a1a10; line-height: 0.96; letter-spacing: -0.02em; }
.sb-act-sec p  { margin: 0; font-size: 14.5px; color: #3c2818; line-height: 1.7; max-width: 540px; }
.sb-act-sec code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #8a1f2c; background: rgba(138,31,44,0.08); padding: 1px 5px; border-radius: 0; font-weight: 600; }
/* Default first-link active when no :target yet */
.sb-act-side a[href="#sb-act-overview"] { padding-left: 4px; color: #8a1f2c; font-weight: 700; }
.sb-act-side a[href="#sb-act-overview"]::after { content: '·'; font-family: serif; font-size: 22px; line-height: 0; color: #8a1f2c; margin-left: 4px; }
/* Override default when any section is targeted */
.sb-act:has(:target) .sb-act-side a[href="#sb-act-overview"] { padding-left: 0; color: #2a1a10; font-weight: 400; }
.sb-act:has(:target) .sb-act-side a[href="#sb-act-overview"]::after { content: ''; }
/* Highlight the link matching the targeted section */
.sb-act:has(#sb-act-overview:target)   .sb-act-side a[href="#sb-act-overview"],
.sb-act:has(#sb-act-features:target)   .sb-act-side a[href="#sb-act-features"],
.sb-act:has(#sb-act-pricing:target)    .sb-act-side a[href="#sb-act-pricing"],
.sb-act:has(#sb-act-changelog:target)  .sb-act-side a[href="#sb-act-changelog"]   { padding-left: 4px; color: #8a1f2c; font-weight: 700; }
.sb-act:has(#sb-act-overview:target)   .sb-act-side a[href="#sb-act-overview"]::after,
.sb-act:has(#sb-act-features:target)   .sb-act-side a[href="#sb-act-features"]::after,
.sb-act:has(#sb-act-pricing:target)    .sb-act-side a[href="#sb-act-pricing"]::after,
.sb-act:has(#sb-act-changelog:target)  .sb-act-side a[href="#sb-act-changelog"]::after { content: '·'; font-family: serif; font-size: 22px; line-height: 0; color: #8a1f2c; margin-left: 4px; }
```

**JS:**
```js
/* :target stays the engine — JS only updates the hash without scrolling. */
document.querySelectorAll('.sb-act-side a').forEach(function (a) {
  a.addEventListener('click', function (e) {
    e.preventDefault();
    var hash = a.getAttribute('href');
    if (hash && hash.charAt(0) === '#') history.pushState(null, '', hash);
  });
});
```

### 17. Nested Expandable Nav

**Type:** Pure CSS
**Description:** Notebook paper — off-white sheet with hand-drawn ruled lines, graphite pencil marks, dog-eared corner. Two-level nav built with native <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code>: free keyboard support, free <code>aria-expanded</code>, free Enter/Space toggling. The browser does the work.

**HTML:**
```html
<div class="sb-nst">
  <aside class="sb-nst-side" aria-label="Primary">
    <header>
      <span class="sb-nst-tab" aria-hidden="true"></span>
      <h3>Field Notes</h3>
      <span class="sb-nst-date">07 / Mar / 26</span>
    </header>
    <nav aria-label="Primary">
      <details open>
        <summary>Authentication</summary>
        <ul>
          <li><a href="#!" aria-current="page">API keys</a></li>
          <li><a href="#!">OAuth tokens</a></li>
          <li><a href="#!">Webhooks</a></li>
        </ul>
      </details>
      <details>
        <summary>Resources</summary>
        <ul>
          <li><a href="#!">Customers</a></li>
          <li><a href="#!">Subscriptions</a></li>
          <li><a href="#!">Invoices</a></li>
          <li><a href="#!">Charges</a></li>
        </ul>
      </details>
      <details>
        <summary>Errors</summary>
        <ul>
          <li><a href="#!">Status codes</a></li>
          <li><a href="#!">Error responses</a></li>
        </ul>
      </details>
    </nav>
    <footer>— No. 47 —</footer>
  </aside>
  <main class="sb-nst-main">
    <span class="sb-nst-eye">— On Authentication</span>
    <h2>Native HTML<br />does the work.</h2>
    <p>
      Each top-level section is a real <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> —
      the browser handles keyboard navigation, <code>aria-expanded</code> state, and Enter/Space
      toggling. No script, no library, no boilerplate.
    </p>
    <blockquote>
      <span class="sb-nst-quote-mark" aria-hidden="true">"</span>
      Build with the platform. The platform has been thinking about your problem for thirty years.
      <cite>— margin note, 2026</cite>
    </blockquote>
  </main>
</div>
```

**CSS:**
```css
.sb-nst {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Caveat', 'Comic Sans MS', cursive;
  background: #fbf6e8;
  color: #2a2418;
  border-radius: 6px; overflow: hidden;
  border: 1px solid #2a2418;
  background-image:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
    radial-gradient(circle at 100% 100%, transparent 18px, #fbf6e8 18px);
  background-position: 0 14px, 0 0;
}
.sb-nst-side {
  position: relative;
  background:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.18) 27px 28px),
    rgba(248,242,224,0.6);
  background-position: 0 14px, 0 0;
  border-right: 1px dashed rgba(42,36,24,0.35);
  padding: 18px 16px;
  overflow-y: auto; max-height: 480px;
}
.sb-nst-side::after { content: ''; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(225deg, #fbf6e8 50%, rgba(42,36,24,0.12) 50%); }
.sb-nst-side header { display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1.5px dashed #2a2418; position: relative; }
.sb-nst-tab { width: 18px; height: 18px; flex-shrink: 0; background: #d4533a; border: 1.5px solid #2a2418; transform: rotate(-12deg); }
.sb-nst-side h3 { margin: 0; font-family: 'Caveat', cursive; font-size: 28px; font-weight: 700; color: #2a2418; line-height: 1; flex: 1; }
.sb-nst-date { font-family: 'Caveat', cursive; font-size: 14px; color: #6a5a3c; transform: rotate(-3deg); }
.sb-nst-side details { padding: 4px 0; }
.sb-nst-side summary {
  cursor: pointer; padding: 6px 4px;
  font-family: 'Caveat', cursive;
  font-size: 22px; font-weight: 700; color: #2a2418;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  transition: color 0.14s;
}
.sb-nst-side summary::-webkit-details-marker { display: none; }
.sb-nst-side summary:hover { color: #d4533a; }
.sb-nst-side summary::after {
  content: '+';
  font-family: 'Caveat', cursive; font-size: 28px; line-height: 0.6; font-weight: 400;
  color: #d4533a;
  transition: transform 0.22s;
}
.sb-nst-side details[open] summary::after { content: '−'; }
.sb-nst-side ul { list-style: none; margin: 4px 0 12px 22px; padding: 0; display: flex; flex-direction: column; gap: 0; border-left: 1.5px dashed #d4533a; }
.sb-nst-side li { padding-left: 12px; position: relative; }
.sb-nst-side li::before { content: '·'; position: absolute; left: -4px; top: 50%; transform: translateY(-60%); color: #d4533a; font-size: 24px; line-height: 0; }
.sb-nst-side a {
  display: block;
  padding: 4px 6px;
  font-family: 'Caveat', cursive;
  font-size: 18px; color: #2a2418; text-decoration: none;
  transition: color 0.14s, padding-left 0.14s;
}
.sb-nst-side a:hover { color: #d4533a; padding-left: 10px; }
.sb-nst-side a[aria-current="page"] {
  color: #d4533a;
  font-weight: 700;
  background-image: linear-gradient(transparent 60%, rgba(255,232,99,0.7) 60%);
}
.sb-nst-side footer { margin-top: 16px; padding-top: 10px; border-top: 1.5px dashed rgba(42,36,24,0.4); text-align: center; font-family: 'Caveat', cursive; font-size: 18px; color: #6a5a3c; transform: rotate(-1deg); }
.sb-nst-main {
  position: relative;
  padding: 32px 40px 32px 70px;
  background-image:
    repeating-linear-gradient(transparent 0 27px, rgba(74,138,196,0.22) 27px 28px),
    rgba(255,250,232,0.6);
  background-position: 0 14px, 0 0;
}
.sb-nst-main::before {
  content: ''; position: absolute; left: 50px; top: 0; bottom: 0; width: 1.5px; background: #d44a4a; opacity: 0.55;
}
.sb-nst-eye { font-family: 'Caveat', cursive; font-size: 16px; color: #d4533a; transform: rotate(-1deg); display: inline-block; margin-bottom: 6px; }
.sb-nst-main h2 { margin: 0 0 14px; font-family: 'Caveat', cursive; font-size: clamp(38px, 5.5vw, 64px); font-weight: 700; color: #2a2418; line-height: 1; transform: rotate(-0.5deg); }
.sb-nst-main p { margin: 0 0 18px; font-family: 'Caveat', cursive; font-size: 19px; color: #2a2418; line-height: 1.55; max-width: 460px; }
.sb-nst-main code { font-family: 'Courier New', monospace; font-size: 14px; color: #d4533a; background: transparent; padding: 1px 5px; border: 1.5px dashed rgba(212,83,58,0.45); border-radius: 0; }
.sb-nst-main blockquote {
  position: relative;
  margin: 0; padding: 12px 18px 12px 32px;
  font-family: 'Caveat', cursive; font-size: 20px; color: #4a4030;
  line-height: 1.5; max-width: 480px;
  border-left: 3px solid #d4533a;
  font-style: italic;
}
.sb-nst-quote-mark { position: absolute; left: 6px; top: -6px; font-family: 'Caveat', cursive; font-size: 64px; line-height: 1; color: #d4533a; opacity: 0.4; font-style: normal; }
.sb-nst-main blockquote cite { display: block; margin-top: 6px; font-size: 16px; color: #6a5a3c; font-style: normal; }
@media (max-width: 720px) {
  .sb-nst { grid-template-columns: 1fr; }
  .sb-nst-side { max-height: none; border-right: 0; border-bottom: 1px dashed rgba(42,36,24,0.4); }
  .sb-nst-main { padding-left: 40px; }
}
```

### 18. Tabbed Sidebar

**Type:** Pure CSS
**Description:** Dracula tribute — the editor theme reborn as a sidebar. Deep purple base with peach, cyan, lime, and pink accents; monospace IDE type. Three tabs swap the content (Files, Search, Git) via radio inputs + <code>:has()</code> + sibling selectors. Zero JavaScript.

**HTML:**
```html
<div class="sb-tab">
  <aside class="sb-tab-side" aria-label="Primary">
    <header class="sb-tab-titlebar">
      <span aria-hidden="true"><i></i><i></i><i></i></span>
      <strong>~/projects/dracula</strong>
    </header>
    <div class="sb-tab-tabs" role="tablist">
      <input id="sb-tab-1" type="radio" name="sb-tab" checked />
      <label for="sb-tab-1" role="tab"><span aria-hidden="true">▤</span>Files</label>
      <input id="sb-tab-2" type="radio" name="sb-tab" />
      <label for="sb-tab-2" role="tab"><span aria-hidden="true">⌕</span>Search</label>
      <input id="sb-tab-3" type="radio" name="sb-tab" />
      <label for="sb-tab-3" role="tab"><span aria-hidden="true">◇</span>Git<em>3</em></label>
    </div>
    <div class="sb-tab-pane" data-pane="1">
      <h3>Explorer</h3>
      <ul>
        <li class="folder">src/</li>
        <li class="file ts">app.tsx</li>
        <li class="file ts">main.tsx</li>
        <li class="file css">styles.css</li>
        <li class="folder">public/</li>
        <li class="file">favicon.svg</li>
        <li class="file json">package.json</li>
        <li class="file">README.md</li>
      </ul>
    </div>
    <div class="sb-tab-pane" data-pane="2">
      <h3>Search</h3>
      <label class="sb-tab-search-row">
        <span aria-hidden="true">⌕</span>
        <input type="search" placeholder="Search project…" />
      </label>
      <p>Use <kbd>⌘F</kbd> in file · <kbd>⌘⇧F</kbd> for project search.</p>
    </div>
    <div class="sb-tab-pane" data-pane="3">
      <h3>Source control</h3>
      <ul>
        <li><em class="git-m">M</em>app.tsx</li>
        <li><em class="git-a">A</em>README.md</li>
        <li><em class="git-m">M</em>package.json</li>
      </ul>
    </div>
    <footer class="sb-tab-status">
      <span><i style="background: #ff79c6"></i>main</span>
      <span>0 ↓ · 2 ↑</span>
    </footer>
  </aside>
  <main class="sb-tab-main">
    <header class="sb-tab-bar">
      <span class="sb-tab-pill">app.tsx</span>
      <span class="sb-tab-pill ghost">+ 47</span>
      <span class="sb-tab-pill ghost">UTF-8</span>
    </header>
    <pre class="sb-tab-code"><code><span class="c">// Three tabs, zero JavaScript.</span>
<span class="k">const</span> <span class="v">app</span> = <span class="o">() =&gt;</span> {
  <span class="k">return</span> &lt;<span class="t">Sidebar</span> theme=<span class="s">"dracula"</span> /&gt;
}</code></pre>
    <p>
      Click the tabs at the top of the sidebar to swap between Files, Search, and Git. Pattern:
      radio inputs + <code>:has(#tab-1:checked)</code> + sibling selectors. Theme is the Dracula
      palette translated into a real layout.
    </p>
  </main>
</div>
```

**CSS:**
```css
.sb-tab {
  display: grid; grid-template-columns: 280px 1fr;
  min-height: 480px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  background: #282a36; color: #f8f8f2;
  border-radius: 8px; overflow: hidden;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
.sb-tab-side { background: #21222c; border-right: 1px solid #44475a; display: flex; flex-direction: column; }
.sb-tab-titlebar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #191a21; border-bottom: 1px solid #44475a; }
.sb-tab-titlebar span { display: flex; gap: 6px; }
.sb-tab-titlebar i { width: 11px; height: 11px; border-radius: 50%; }
.sb-tab-titlebar i:nth-child(1) { background: #ff5555; }
.sb-tab-titlebar i:nth-child(2) { background: #f1fa8c; }
.sb-tab-titlebar i:nth-child(3) { background: #50fa7b; }
.sb-tab-titlebar strong { font-size: 11px; font-weight: 500; color: #6272a4; letter-spacing: 0.04em; }
.sb-tab-tabs {
  display: flex; padding: 0;
  background: #21222c; border-bottom: 1px solid #44475a;
}
.sb-tab-tabs input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.sb-tab-tabs input:focus-visible + label { outline: 2px solid #ff79c6; outline-offset: -2px; }
.sb-tab-tabs label {
  flex: 1; padding: 10px 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: #6272a4;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.sb-tab-tabs label span { color: #ff79c6; font-size: 12px; }
.sb-tab-tabs label em { margin-left: 4px; font-size: 9.5px; font-style: normal; padding: 1px 5px; border-radius: 8px; background: #ff5555; color: #f8f8f2; font-weight: 700; }
.sb-tab-tabs label:hover { color: #f8f8f2; background: rgba(98,114,164,0.1); }
.sb-tab-tabs input:checked + label { color: #f8f8f2; border-bottom-color: #50fa7b; background: #282a36; }
.sb-tab-pane { display: none; padding: 14px 14px; flex: 1; overflow-y: auto; }
.sb-tab-side:has(#sb-tab-1:checked) [data-pane="1"] { display: block; }
.sb-tab-side:has(#sb-tab-2:checked) [data-pane="2"] { display: block; }
.sb-tab-side:has(#sb-tab-3:checked) [data-pane="3"] { display: block; }
.sb-tab-pane h3 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6272a4; }
.sb-tab-pane ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-tab-pane li { padding: 4px 6px; font-size: 12px; color: #f8f8f2; display: flex; align-items: center; gap: 8px; transition: background 0.12s; cursor: pointer; }
.sb-tab-pane li:hover { background: #44475a; }
.sb-tab-pane li::before { content: ''; flex-shrink: 0; }
.sb-tab-pane li.folder::before { content: '▸ '; color: #ff79c6; font-size: 10px; }
.sb-tab-pane li.file { padding-left: 22px; color: #bd93f9; }
.sb-tab-pane li.file::before { content: '▢ '; color: #6272a4; font-size: 10px; }
.sb-tab-pane li.file.ts { color: #8be9fd; }
.sb-tab-pane li.file.css { color: #ff79c6; }
.sb-tab-pane li.file.json { color: #f1fa8c; }
.sb-tab-pane li em { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.sb-tab-pane li em.git-m { color: #ffb86c; background: rgba(255,184,108,0.15); }
.sb-tab-pane li em.git-a { color: #50fa7b; background: rgba(80,250,123,0.15); }
.sb-tab-search-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: #282a36; border: 1px solid #44475a; border-radius: 4px; }
.sb-tab-search-row span { color: #6272a4; font-size: 13px; }
.sb-tab-search-row input { flex: 1; min-width: 0; background: transparent; border: 0; color: #f8f8f2; font-family: inherit; font-size: 12px; }
.sb-tab-search-row input:focus { outline: none; }
.sb-tab-pane p { margin: 10px 0 0; font-size: 11px; color: #6272a4; line-height: 1.6; }
.sb-tab-pane kbd { font-family: inherit; padding: 1px 5px; background: #44475a; color: #f8f8f2; border-radius: 3px; font-size: 10px; font-weight: 600; }
.sb-tab-status { margin-top: auto; display: flex; justify-content: space-between; padding: 6px 12px; background: #ff79c6; color: #282a36; font-size: 10.5px; font-weight: 700; }
.sb-tab-status span { display: inline-flex; align-items: center; gap: 6px; }
.sb-tab-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.sb-tab-main { padding: 28px 32px; background: #282a36; display: flex; flex-direction: column; gap: 16px; }
.sb-tab-bar { display: flex; gap: 8px; }
.sb-tab-pill { padding: 4px 10px; font-size: 11px; font-weight: 600; background: #44475a; color: #f8f8f2; border-radius: 4px; }
.sb-tab-pill.ghost { background: transparent; border: 1px solid #44475a; color: #6272a4; }
.sb-tab-code {
  margin: 0; padding: 18px 22px;
  background: #21222c;
  border: 1px solid #44475a;
  border-radius: 6px;
  font-size: 13px; line-height: 1.7;
  color: #f8f8f2;
  white-space: pre-wrap;
}
.sb-tab-code .c { color: #6272a4; font-style: italic; }
.sb-tab-code .k { color: #ff79c6; }
.sb-tab-code .v { color: #50fa7b; }
.sb-tab-code .o { color: #ff79c6; }
.sb-tab-code .t { color: #8be9fd; }
.sb-tab-code .s { color: #f1fa8c; }
.sb-tab-main p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: #bd93f9; line-height: 1.65; max-width: 460px; }
.sb-tab-main code { color: #50fa7b; background: #21222c; padding: 1px 6px; border-radius: 3px; font-size: 12.5px; border: 1px solid #44475a; }
```

### 19. Onboarding Progress

**Type:** Pure CSS
**Description:** Duolingo-style joyful gamification — forest-green nav with canary-yellow CTAs, hard chunky shadows, oversized rounded buttons. Native <code>&lt;progress&gt;</code> announces completion to screen readers; a real <code>&lt;ol&gt;</code> tracks steps. Designed to feel like progress is fun.

**HTML:**
```html
<div class="sb-prg">
  <aside class="sb-prg-side" aria-label="Primary">
    <a class="sb-prg-brand" href="#!">
      <span class="sb-prg-mark" aria-hidden="true">🌿</span>
      <span class="sb-prg-name">Sprout<small>v2</small></span>
    </a>
    <nav class="sb-prg-nav" aria-label="Primary">
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-prg-i" aria-hidden="true">🏡</span>Dashboard</a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">📚</span>Lessons</a>
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">🏆</span>Trophies</a>
        </li>
        <li>
          <a href="#!"><span class="sb-prg-i" aria-hidden="true">⚙️</span>Settings</a>
        </li>
      </ul>
    </nav>
    <section class="sb-prg-card" aria-labelledby="sb-prg-h">
      <header>
        <h3 id="sb-prg-h">Daily streak</h3>
        <span class="sb-prg-streak" aria-label="7 day streak">🔥 7</span>
      </header>
      <progress value="3" max="5">3 of 5 complete</progress>
      <p><strong>3</strong> of 5 quests done</p>
      <ol>
        <li class="done">Pick your goal</li>
        <li class="done">Take placement</li>
        <li class="done">Add friends</li>
        <li>Connect calendar</li>
        <li>Earn first badge</li>
      </ol>
      <button type="button" class="sb-prg-go">Continue →</button>
    </section>
  </aside>
  <main class="sb-prg-main">
    <span class="sb-prg-eye">👋 GOOD MORNING</span>
    <h2>Let's keep<br />that streak!</h2>
    <p>
      Quests fade as you complete them and the streak counter pulses gently when you hit a
      milestone. Native <code>&lt;progress&gt;</code> + a real <code>&lt;ol&gt;</code> — assistive
      tech reads everything correctly.
    </p>
    <div class="sb-prg-stats">
      <div class="sb-prg-stat"><strong>2,481</strong><span>XP earned</span></div>
      <div class="sb-prg-stat"><strong>47</strong><span>Lessons</span></div>
      <div class="sb-prg-stat"><strong>12</strong><span>Badges</span></div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-prg {
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Nunito', 'Inter', system-ui, -apple-system, sans-serif;
  background: #fff9e6; color: #3c4043;
  border-radius: 16px; overflow: hidden;
  border: 4px solid #1a3d2c;
}
.sb-prg-side {
  background: linear-gradient(180deg, #2f7a4f 0%, #1f5837 100%);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  border-right: 4px solid #1a3d2c;
  box-shadow: 4px 0 0 #1a3d2c;
}
.sb-prg-side::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, #ffd400 0 12px, #1a3d2c 12px 14px, #ffd400 14px 26px, transparent 26px 30px);
}
.sb-prg-brand { display: flex; align-items: center; gap: 10px; padding: 14px 6px 14px; text-decoration: none; }
.sb-prg-mark { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #ffd400; border: 3px solid #1a3d2c; font-size: 18px; box-shadow: 0 4px 0 #1a3d2c; }
.sb-prg-name { color: #fff; font-size: 17px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.sb-prg-name small { display: block; font-size: 10px; color: #ffd400; font-weight: 800; letter-spacing: 0.16em; margin-top: 3px; }
.sb-prg-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-prg-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 14px; font-weight: 800; color: #d4f0e0;
  text-decoration: none;
  background: rgba(0,0,0,0.16);
  border: 2px solid transparent;
  transition: transform 0.14s, background 0.14s, border-color 0.14s, box-shadow 0.14s;
}
.sb-prg-nav a:hover { background: rgba(0,0,0,0.28); color: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a3d2c; }
.sb-prg-nav a[aria-current="page"] { background: #ffd400; color: #1a3d2c; border-color: #1a3d2c; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #1a3d2c; }
.sb-prg-i { font-size: 16px; }
.sb-prg-card { margin-top: auto; padding: 14px; background: #fff; border: 3px solid #1a3d2c; border-radius: 16px; box-shadow: 5px 5px 0 #1a3d2c; }
.sb-prg-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sb-prg-card h3 { margin: 0; font-size: 13px; font-weight: 900; color: #1a3d2c; letter-spacing: -0.01em; }
.sb-prg-streak { font-size: 13px; font-weight: 900; color: #ff6b35; padding: 3px 8px; border-radius: 10px; background: #fff1e6; border: 2px solid #ff6b35; }
.sb-prg-card progress {
  width: 100%; height: 12px; appearance: none;
  background: #f0f0f0; border: 2px solid #1a3d2c; border-radius: 10px; overflow: hidden;
}
.sb-prg-card progress::-webkit-progress-bar { background: #f0f0f0; }
.sb-prg-card progress::-webkit-progress-value { background: linear-gradient(180deg,#5cd47a,#2f7a4f); border-radius: 8px 0 0 8px; }
.sb-prg-card progress::-moz-progress-bar { background: linear-gradient(180deg,#5cd47a,#2f7a4f); border-radius: 8px 0 0 8px; }
.sb-prg-card p { margin: 8px 0 12px; font-size: 12px; color: #3c4043; font-weight: 700; }
.sb-prg-card p strong { color: #2f7a4f; font-weight: 900; }
.sb-prg-card ol { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: prg; display: flex; flex-direction: column; gap: 6px; }
.sb-prg-card li { counter-increment: prg; font-size: 12px; font-weight: 700; color: #3c4043; padding-left: 26px; position: relative; line-height: 1.5; }
.sb-prg-card li::before {
  content: counter(prg);
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: #3c4043;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
  border: 2px solid #3c4043;
}
.sb-prg-card li.done { color: #2f7a4f; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(47,122,79,0.4); }
.sb-prg-card li.done::before { content: '✓'; background: #2f7a4f; color: #fff; border-color: #1a3d2c; font-size: 11px; }
.sb-prg-go {
  display: block; width: 100%;
  padding: 11px 14px;
  background: #ffd400; color: #1a3d2c;
  border: 3px solid #1a3d2c; border-radius: 12px;
  font-family: inherit; font-size: 13px; font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 0 #1a3d2c;
  transition: transform 0.1s, box-shadow 0.1s;
}
.sb-prg-go:hover { background: #ffe44a; }
.sb-prg-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #1a3d2c; }
.sb-prg-main { padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; background: #fff9e6; }
.sb-prg-eye { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; color: #ff6b35; }
.sb-prg-main h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 900; line-height: 0.95; color: #1a3d2c; letter-spacing: -0.03em; }
.sb-prg-main p { margin: 0; font-size: 14px; color: #3c4043; line-height: 1.6; max-width: 440px; font-weight: 600; }
.sb-prg-main code { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #1a3d2c; background: #ffd400; padding: 1px 6px; border-radius: 4px; border: 2px solid #1a3d2c; font-weight: 700; }
.sb-prg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; max-width: 440px; }
.sb-prg-stat { background: #fff; border: 3px solid #1a3d2c; border-radius: 14px; padding: 12px 14px; box-shadow: 4px 4px 0 #1a3d2c; }
.sb-prg-stats strong { display: block; font-size: 22px; font-weight: 900; color: #1a3d2c; line-height: 1; letter-spacing: -0.02em; }
.sb-prg-stats span { display: block; font-size: 11px; font-weight: 800; color: #2f7a4f; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }
@media (max-width: 720px) {
  .sb-prg { grid-template-columns: 1fr; }
  .sb-prg-side { border-right: 0; border-bottom: 4px solid #1a3d2c; box-shadow: 0 4px 0 #1a3d2c; }
  .sb-prg-stats { grid-template-columns: 1fr; }
}
```

### 20. Resizable Sidebar

**Type:** Pure CSS
**Description:** Brutalist mono — pure white, ink black, zero radius, oversized monospace. The "raw HTML element with no styling" energy. Drag the right edge of the sidebar to resize. Pure CSS via <code>resize: horizontal</code> on a wrapper; the browser provides the drag handle.

**HTML:**
```html
<div class="sb-rsz">
  <aside class="sb-rsz-side" aria-label="Primary">
    <header>
      <span class="sb-rsz-bar" aria-hidden="true">[ === ]</span>
      <strong>FILE.SYS</strong>
    </header>
    <h3>// directory</h3>
    <ul class="sb-rsz-tree">
      <li class="folder">src/</li>
      <li class="indent folder">components/</li>
      <li class="indent indent2">Button.tsx</li>
      <li class="indent indent2">Card.tsx</li>
      <li class="indent indent2 active">Modal.tsx</li>
      <li class="indent folder">pages/</li>
      <li class="indent indent2">index.tsx</li>
      <li class="indent indent2">about.tsx</li>
      <li>package.json</li>
      <li>tsconfig.json</li>
    </ul>
    <p class="sb-rsz-hint">→→→ DRAG_RIGHT_EDGE →→→</p>
  </aside>
  <main class="sb-rsz-main">
    <header class="sb-rsz-bar2">
      <span>STATUS: 200_OK</span>
      <span>17:42:08 GMT</span>
    </header>
    <h2>RESIZE_ME.</h2>
    <p>
      PURE CSS · <code>resize: horizontal</code> · NO JS · NO LIBRARY · NO FRAMEWORK · ONE LINE OF
      CSS · BROWSER HANDLES THE DRAG · LAYOUT ADJUSTS NATURALLY · WORKS EVERYWHERE · 1996 ENERGY
      2026 BROWSERS.
    </p>
    <div class="sb-rsz-grid">
      <div class="sb-rsz-cell">[01]</div>
      <div class="sb-rsz-cell">[02]</div>
      <div class="sb-rsz-cell">[03]</div>
      <div class="sb-rsz-cell solid">[04]</div>
      <div class="sb-rsz-cell">[05]</div>
      <div class="sb-rsz-cell">[06]</div>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-rsz {
  display: flex;
  min-height: 480px;
  font-family: 'Courier New', 'Courier', monospace;
  background: #fff;
  color: #000;
  border-radius: 0; overflow: hidden;
  border: 3px solid #000;
}
.sb-rsz-side {
  flex-shrink: 0;
  width: 240px; min-width: 180px; max-width: 380px;
  background: #fff;
  border-right: 3px solid #000;
  padding: 16px 14px;
  overflow: auto;
  resize: horizontal;
}
.sb-rsz-side header { padding-bottom: 12px; border-bottom: 2px solid #000; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.sb-rsz-bar { font-size: 13px; font-weight: 700; color: #000; letter-spacing: 0.04em; }
.sb-rsz-side header strong { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; color: #000; }
.sb-rsz-side h3 { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #000; }
.sb-rsz-tree { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: #000; display: flex; flex-direction: column; gap: 3px; }
.sb-rsz-tree li { padding: 3px 0; cursor: pointer; transition: background 0.1s; }
.sb-rsz-tree li:hover { background: #000; color: #fff; }
.sb-rsz-tree li.folder::before { content: '> '; }
.sb-rsz-tree li:not(.folder)::before { content: '· '; }
.sb-rsz-tree li.indent  { padding-left: 18px; }
.sb-rsz-tree li.indent2 { padding-left: 36px; }
.sb-rsz-tree li.active { background: #000; color: #fff; }
.sb-rsz-tree li.active::before { content: '* '; color: #ff0000; }
.sb-rsz-hint { margin: 0; padding: 8px 6px; font-size: 11px; font-weight: 700; color: #fff; background: #000; letter-spacing: 0.04em; text-align: center; animation: sb-rsz-flash 1.4s steps(1) infinite; }
@keyframes sb-rsz-flash {
  0%, 49% { background: #000; color: #fff; }
  50%, 100% { background: #ff0000; color: #000; }
}
@media (prefers-reduced-motion: reduce) { .sb-rsz-hint { animation: none; } }
.sb-rsz-main { flex: 1; padding: 24px 28px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sb-rsz-bar2 { display: flex; justify-content: space-between; padding: 6px 12px; background: #000; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.sb-rsz-main h2 { margin: 0; font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 0.92; color: #000; letter-spacing: -0.02em; }
.sb-rsz-main p { margin: 0; font-size: 13.5px; color: #000; line-height: 1.7; max-width: 540px; font-weight: 700; }
.sb-rsz-main code { font-family: inherit; font-size: 13px; color: #fff; background: #000; padding: 1px 6px; border-radius: 0; font-weight: 700; }
.sb-rsz-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; max-width: 480px; border: 2px solid #000; }
.sb-rsz-cell { padding: 12px; font-size: 12px; font-weight: 700; text-align: center; border-right: 2px solid #000; border-bottom: 2px solid #000; }
.sb-rsz-cell:nth-child(6n) { border-right: 0; }
.sb-rsz-cell:nth-last-child(-n+6) { border-bottom: 0; }
.sb-rsz-cell.solid { background: #000; color: #fff; }
.sb-rsz-cell.solid::after { content: ' ✦'; }
```

### 21. Three-pane Workspace

**Type:** Pure CSS
**Description:** Linear-style minimal mono — slate canvas, hairline rules, single electric-blue accent. Three-pane workspace shell (workspace nav, page list, editor); each pane scrolls independently. Heavy on semantics — real <code>&lt;aside&gt;</code> + <code>&lt;nav&gt;</code> + <code>&lt;article&gt;</code>.

**HTML:**
```html
<div class="sb-3pn">
  <aside class="sb-3pn-ws" aria-label="Workspace">
    <a class="sb-3pn-brand" href="#!">
      <span class="sb-3pn-mark" aria-hidden="true"></span>
      <span class="sb-3pn-name">Threads</span>
    </a>
    <nav aria-label="Workspace">
      <span class="sb-3pn-shead">Workspace</span>
      <ul>
        <li>
          <a href="#!" aria-current="page"
            ><span class="sb-3pn-i" aria-hidden="true">▤</span>Notes<em>12</em></a
          >
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">◇</span>Projects</a>
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">◯</span>Calendar</a>
        </li>
        <li>
          <a href="#!"><span class="sb-3pn-i" aria-hidden="true">▢</span>Archive</a>
        </li>
      </ul>
      <span class="sb-3pn-shead">People</span>
      <ul>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #5b8eff">A</span
            >Anya</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #ff7a4d">D</span
            >Daichi</a
          >
        </li>
        <li>
          <a href="#!"
            ><span class="sb-3pn-avatar" aria-hidden="true" style="background: #34c759">L</span
            >Lena</a
          >
        </li>
      </ul>
    </nav>
  </aside>
  <aside class="sb-3pn-list" aria-label="Pages">
    <header>
      <h2>Notes</h2>
      <button type="button" aria-label="New page">+</button>
    </header>
    <ul>
      <li class="active">
        <strong>Sprint 47 retro</strong>
        <span>Yesterday · 14:21</span>
      </li>
      <li>
        <strong>Hiring loop · Q3</strong>
        <span>2 days ago</span>
      </li>
      <li>
        <strong>Vendor shortlist</strong>
        <span>Last week</span>
      </li>
      <li>
        <strong>Team offsite ideas</strong>
        <span>Apr 24</span>
      </li>
      <li>
        <strong>OKR review · H1</strong>
        <span>Apr 18</span>
      </li>
    </ul>
  </aside>
  <main class="sb-3pn-edit">
    <header>
      <span class="sb-3pn-eye">CMD + K to switch · ⌘1 / ⌘2 / ⌘3</span>
      <h1>Sprint 47 retro.</h1>
      <p>Last edited yesterday at 14:21 · 4 collaborators</p>
    </header>
    <p class="sb-3pn-body">
      Three independent panes, each with its own scroll. The workspace nav (left), the page list
      (middle), and the editor (right) — the shell behind Notion, Linear, Apple Notes.
    </p>
    <h2>What went well</h2>
    <ul>
      <li>Shipped the dashboard refactor on time.</li>
      <li>Onboarding flow completion up 18%.</li>
      <li>Zero P0 incidents during launch week.</li>
    </ul>
    <h2>To improve</h2>
    <ul>
      <li>QA cycle compressed at the end — pull it earlier.</li>
      <li>Marketing copy review needs a clearer owner.</li>
    </ul>
  </main>
</div>
```

**CSS:**
```css
.sb-3pn {
  display: grid; grid-template-columns: 220px 260px 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #181a1f; color: #d6d8de;
  border-radius: 8px; overflow: hidden;
  letter-spacing: -0.01em;
}
.sb-3pn-ws { background: #14161a; border-right: 1px solid rgba(255,255,255,0.05); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; }
.sb-3pn-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); text-decoration: none; }
.sb-3pn-mark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 5px; background: linear-gradient(135deg, #4d7cff 0%, #1850e0 100%); box-shadow: 0 4px 14px rgba(77,124,255,0.35); position: relative; }
.sb-3pn-mark::after { content: ''; position: absolute; inset: 5px; border: 1.5px solid #fff; border-radius: 1px; }
.sb-3pn-name { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.sb-3pn-shead { font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; color: #6a6e76; padding: 0 8px; margin-top: 4px; }
.sb-3pn-ws ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-3pn-ws a {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; font-weight: 500; color: #b6b9c1; text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sb-3pn-ws a:hover { background: rgba(255,255,255,0.04); color: #fff; }
.sb-3pn-ws a[aria-current="page"] { background: rgba(77,124,255,0.16); color: #fff; box-shadow: inset 2px 0 0 #4d7cff; padding-left: 8px; }
.sb-3pn-i { width: 14px; text-align: center; flex-shrink: 0; font-size: 11px; color: #6a6e76; }
.sb-3pn-ws a[aria-current="page"] .sb-3pn-i { color: #4d7cff; }
.sb-3pn-ws a em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: #6a6e76; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.06); }
.sb-3pn-ws a[aria-current="page"] em { background: rgba(77,124,255,0.2); color: #4d7cff; }
.sb-3pn-avatar { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.sb-3pn-list { background: #1a1c21; border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; overflow: hidden; }
.sb-3pn-list header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sb-3pn-list h2 { margin: 0; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-list button { width: 24px; height: 24px; border-radius: 5px; border: 0; background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; cursor: pointer; transition: background 0.14s; }
.sb-3pn-list button:hover { background: #4d7cff; }
.sb-3pn-list ul { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 0; flex: 1; overflow-y: auto; }
.sb-3pn-list li { padding: 12px 12px; border-radius: 6px; cursor: pointer; transition: background 0.12s; border-bottom: 1px solid rgba(255,255,255,0.03); }
.sb-3pn-list li:hover { background: rgba(255,255,255,0.04); }
.sb-3pn-list li.active { background: rgba(77,124,255,0.1); border-bottom-color: transparent; box-shadow: inset 2px 0 0 #4d7cff; }
.sb-3pn-list strong { display: block; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-list span { display: block; font-size: 11px; color: #6a6e76; margin-top: 4px; }
.sb-3pn-edit { padding: 32px 36px; overflow-y: auto; background: #181a1f; }
.sb-3pn-edit header { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 18px; }
.sb-3pn-eye { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #4d7cff; letter-spacing: 0.04em; }
.sb-3pn-edit h1 { margin: 4px 0 4px; font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1.05; }
.sb-3pn-edit header p { margin: 0; font-size: 12px; color: #6a6e76; }
.sb-3pn-body { margin: 0 0 18px; font-size: 14.5px; color: #d6d8de; line-height: 1.65; max-width: 540px; }
.sb-3pn-edit h2 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-3pn-edit ul { margin: 0 0 16px; padding-left: 22px; font-size: 13.5px; color: #b6b9c1; line-height: 1.75; }
@media (max-width: 720px) {
  .sb-3pn { grid-template-columns: 1fr; }
  .sb-3pn-ws, .sb-3pn-list { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
```

### 22. Adaptive Container-query

**Type:** Pure CSS
**Description:** Sunset terminal — pitch black with green-screen phosphor type, amber prompt accents, a soft horizon glow at the bottom. The 1980s computer terminal aesthetic. Sidebar reflows into a horizontal top nav when its container drops below 600px — CSS <code>container queries</code>, not viewport media queries.

**HTML:**
```html
<div class="sb-cnt-wrap">
  <div class="sb-cnt">
    <span class="sb-cnt-glow" aria-hidden="true"></span>
    <span class="sb-cnt-scan" aria-hidden="true"></span>
    <aside class="sb-cnt-side" aria-label="Primary">
      <a class="sb-cnt-brand" href="#!">
        <span class="sb-cnt-prompt" aria-hidden="true">$</span>
        <span class="sb-cnt-name">vortex<small>.sh</small></span>
      </a>
      <nav aria-label="Primary">
        <ul>
          <li>
            <a href="#!" aria-current="page"><em>01</em>home</a>
          </li>
          <li>
            <a href="#!"><em>02</em>library</a>
          </li>
          <li>
            <a href="#!"><em>03</em>projects</a>
          </li>
          <li>
            <a href="#!"><em>04</em>archive</a>
          </li>
          <li>
            <a href="#!"><em>05</em>settings</a>
          </li>
        </ul>
      </nav>
      <footer><span class="sb-cnt-cursor" aria-hidden="true">▮</span> ready</footer>
    </aside>
    <main class="sb-cnt-main">
      <span class="sb-cnt-eye">/* container-queries.md */</span>
      <h2>Adaptive<br />by container.</h2>
      <p>
        Resize the card width — when this <em>container</em> drops below 600px, the sidebar
        collapses into a top nav. The <strong>viewport</strong> size is irrelevant; the layout
        reacts to its own parent. Drop this shell into any narrow column and it adapts on its own.
      </p>
      <pre class="sb-cnt-code">
@container (max-width: 600px) {
  .sb-cnt { grid-template-columns: 1fr; }
  .sb-cnt-side { flex-direction: row; }
}</pre
      >
    </main>
  </div>
</div>
```

**CSS:**
```css
.sb-cnt-wrap {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: #5ce064;
  container-type: inline-size;
}
.sb-cnt {
  position: relative;
  display: grid; grid-template-columns: 220px 1fr;
  min-height: 480px;
  background: #060a07;
  border-radius: 6px; overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(92,224,100,0.3);
}
.sb-cnt-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(255,140,40,0.32), transparent 70%),
    radial-gradient(40% 30% at 50% 100%, rgba(255,210,80,0.4), transparent 70%);
}
.sb-cnt-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.18) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
.sb-cnt-side {
  position: relative; z-index: 1;
  background: rgba(8,14,10,0.85);
  border-right: 1px solid rgba(92,224,100,0.3);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
}
.sb-cnt-brand { display: flex; align-items: baseline; gap: 8px; padding: 4px 4px 14px; border-bottom: 1px dashed rgba(92,224,100,0.3); text-decoration: none; }
.sb-cnt-prompt { color: #ffaa44; font-size: 16px; font-weight: 800; text-shadow: 0 0 10px rgba(255,170,68,0.5); }
.sb-cnt-name { font-size: 16px; font-weight: 700; color: #5ce064; letter-spacing: 0.04em; text-shadow: 0 0 8px rgba(92,224,100,0.4); line-height: 1; }
.sb-cnt-name small { font-size: 12px; color: #ffaa44; font-weight: 700; }
.sb-cnt-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sb-cnt-side a {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  font-size: 13px; color: #5ce064; text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 0.14s, color 0.14s, border-color 0.14s, text-shadow 0.14s;
}
.sb-cnt-side a em { font-style: normal; font-size: 11px; font-weight: 700; color: rgba(92,224,100,0.5); width: 18px; }
.sb-cnt-side a:hover { background: rgba(92,224,100,0.08); color: #fff; border-left-color: #5ce064; text-shadow: 0 0 8px rgba(92,224,100,0.6); }
.sb-cnt-side a[aria-current="page"] { background: rgba(255,170,68,0.12); color: #ffaa44; border-left-color: #ffaa44; text-shadow: 0 0 10px rgba(255,170,68,0.6); }
.sb-cnt-side a[aria-current="page"] em { color: #ffaa44; }
.sb-cnt-side footer { margin-top: auto; padding-top: 10px; border-top: 1px dashed rgba(92,224,100,0.3); font-size: 11px; color: #5ce064; letter-spacing: 0.06em; opacity: 0.8; }
.sb-cnt-cursor { color: #ffaa44; animation: sb-cnt-blink 1s steps(1) infinite; }
@keyframes sb-cnt-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sb-cnt-cursor { animation: none; } }
.sb-cnt-main { position: relative; z-index: 1; padding: 30px 32px; display: flex; flex-direction: column; gap: 16px; }
.sb-cnt-eye { font-size: 11.5px; color: rgba(92,224,100,0.6); letter-spacing: 0.04em; font-style: italic; }
.sb-cnt-main h2 {
  margin: 0; font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 0.95;
  color: #5ce064; letter-spacing: -0.02em;
  text-shadow: 0 0 20px rgba(92,224,100,0.4);
}
.sb-cnt-main p { margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: rgba(214,235,218,0.9); line-height: 1.65; max-width: 480px; }
.sb-cnt-main em { color: #ffaa44; font-style: normal; font-weight: 600; text-shadow: 0 0 8px rgba(255,170,68,0.4); }
.sb-cnt-main strong { color: #5ce064; font-weight: 700; }
.sb-cnt-code { margin: 0; padding: 16px 18px; background: rgba(8,14,10,0.85); border: 1px solid rgba(92,224,100,0.3); border-radius: 4px; font-size: 12px; line-height: 1.7; color: #5ce064; white-space: pre-wrap; box-shadow: inset 0 0 24px rgba(92,224,100,0.05); }
@container (max-width: 600px) {
  .sb-cnt { grid-template-columns: 1fr; }
  .sb-cnt-side { flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px dashed rgba(92,224,100,0.3); overflow-x: auto; }
  .sb-cnt-side ul { flex-direction: row; gap: 4px; flex-shrink: 0; }
  .sb-cnt-side a { padding: 6px 10px; font-size: 12px; }
  .sb-cnt-side footer, .sb-cnt-brand { display: none; }
}
```

### 23. Glass Floating Sidebar

**Type:** Pure CSS
**Description:** Vaporwave dream — chromatic magenta-to-cyan gradient with a sun on the horizon, scanlines, and a translucent glass sidebar floating above it. <code>backdrop-filter: blur()</code> handles the frost; CSS keyframes drift the sun. Pure CSS, no images.

**HTML:**
```html
<div class="sb-glx">
  <div class="sb-glx-sky" aria-hidden="true"></div>
  <div class="sb-glx-sun" aria-hidden="true"></div>
  <div class="sb-glx-grid" aria-hidden="true"></div>
  <div class="sb-glx-scan" aria-hidden="true"></div>
  <aside class="sb-glx-side" aria-label="Primary">
    <a class="sb-glx-brand" href="#!">
      <span class="sb-glx-mark" aria-hidden="true"></span>
      <span class="sb-glx-name">Mirage<small>1995</small></span>
    </a>
    <nav aria-label="Primary">
      <ul>
        <li><a href="#!" aria-current="page">▸ Overview</a></li>
        <li><a href="#!">Projects</a></li>
        <li><a href="#!">Members</a></li>
        <li><a href="#!">Activity</a></li>
        <li><a href="#!">Settings</a></li>
      </ul>
    </nav>
    <footer>
      <span class="sb-glx-dot" aria-hidden="true"></span>
      <small>Online · 24,891</small>
    </footer>
  </aside>
  <main class="sb-glx-main">
    <span class="sb-glx-eye">◇ A E S T H E T I C ◇</span>
    <h2>Glass<br />over sunset.</h2>
    <p>
      The sidebar floats above a setting-sun horizon and a perspective grid that fades into haze.
      Backdrop-blur frosts the glass; pure CSS keyframes drift the sun.
    </p>
    <div class="sb-glx-tags">
      <span>vaporwave</span><span>aesthetic</span><span>1995</span><span>chrome</span>
    </div>
  </main>
</div>
```

**CSS:**
```css
.sb-glx {
  position: relative;
  display: grid; grid-template-columns: 260px 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  color: #fff;
  border-radius: 14px; overflow: hidden;
  isolation: isolate;
  background: #1a0033;
}
.sb-glx-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2d0066 0%, #6a0a8c 30%, #ec1d8c 65%, #ff5e9c 80%, #ffa56a 100%);
  z-index: 0;
}
.sb-glx-sun {
  position: absolute;
  bottom: 32%; left: 50%;
  width: 220px; height: 220px;
  margin-left: -110px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd700 0%, #ff5e9c 60%, #ec1d8c 100%);
  box-shadow: 0 0 80px rgba(255,215,0,0.6), 0 0 160px rgba(236,29,140,0.5);
  z-index: 1;
  animation: sb-glx-rise 12s ease-in-out infinite alternate;
}
.sb-glx-sun::before, .sb-glx-sun::after {
  content: ''; position: absolute; left: 0; right: 0; height: 5px;
  background: #1a0033;
}
.sb-glx-sun::before { bottom: 30%; box-shadow: 0 14px 0 #1a0033, 0 30px 0 #1a0033, 0 50px 0 #1a0033, 0 75px 0 #1a0033; }
.sb-glx-sun::after  { display: none; }
.sb-glx-grid {
  position: absolute; bottom: 0; left: 0; right: 0; height: 38%;
  background:
    linear-gradient(transparent 0%, rgba(0,229,255,0.4) 100%),
    repeating-linear-gradient(90deg, transparent 0 calc((100% / 24) - 1px), rgba(0,229,255,0.5) calc((100% / 24) - 1px) calc(100% / 24));
  background-size: 100% 100%, 100% 100%;
  transform: perspective(300px) rotateX(60deg);
  transform-origin: bottom;
  z-index: 1;
  mask-image: linear-gradient(transparent 0%, #000 30%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%);
}
.sb-glx-grid::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(0,229,255,0.45) 18px 19px);
}
.sb-glx-scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}
@keyframes sb-glx-rise {
  from { transform: translateY(20px); }
  to   { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .sb-glx-sun { animation: none; } }
.sb-glx-side {
  position: relative; z-index: 3;
  margin: 18px 0 18px 18px; padding: 18px 14px; width: 224px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.06);
  display: flex; flex-direction: column; gap: 16px;
}
.sb-glx-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); text-decoration: none; }
.sb-glx-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: linear-gradient(135deg, #00e5ff 0%, #ec1d8c 50%, #ffd700 100%); box-shadow: 0 0 18px rgba(236,29,140,0.6), inset 0 1px 0 rgba(255,255,255,0.5); }
.sb-glx-name { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.18em; line-height: 1; text-shadow: 0 0 8px rgba(255,94,156,0.8); }
.sb-glx-name small { display: block; font-family: 'Courier New', monospace; font-size: 9.5px; color: #00e5ff; font-weight: 700; letter-spacing: 0.4em; margin-top: 4px; text-shadow: 0 0 6px rgba(0,229,255,0.7); }
.sb-glx-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sb-glx-side a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85); text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s, text-shadow 0.18s;
}
.sb-glx-side a:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
}
.sb-glx-side a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(0,229,255,0.25), rgba(236,29,140,0.25));
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  text-shadow: 0 0 10px rgba(0,229,255,0.7);
  box-shadow: inset 0 0 16px rgba(0,229,255,0.15);
}
.sb-glx-side footer { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 6px 0; border-top: 1px solid rgba(255,255,255,0.15); }
.sb-glx-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ff9c; box-shadow: 0 0 12px #00ff9c, 0 0 24px rgba(0,255,156,0.5); animation: sb-glx-blink 1.6s ease-in-out infinite; }
@keyframes sb-glx-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .sb-glx-dot { animation: none; } }
.sb-glx-side small { font-family: 'Courier New', monospace; font-size: 10.5px; color: rgba(255,255,255,0.85); letter-spacing: 0.06em; }
.sb-glx-main { position: relative; z-index: 3; padding: 32px 36px; display: flex; flex-direction: column; gap: 16px; }
.sb-glx-eye { font-family: 'Courier New', monospace; font-size: 11.5px; letter-spacing: 0.4em; color: #00e5ff; text-shadow: 0 0 10px rgba(0,229,255,0.7); }
.sb-glx-main h2 {
  margin: 0; font-size: clamp(34px, 5vw, 64px); font-weight: 900; line-height: 0.92;
  color: #fff; letter-spacing: -0.03em;
  text-shadow:
    -2px 0 0 rgba(236,29,140,0.7),
    2px 0 0 rgba(0,229,255,0.7),
    0 0 30px rgba(255,255,255,0.4);
}
.sb-glx-main p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.92); line-height: 1.6; max-width: 460px; text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.sb-glx-main code { font-family: 'Courier New', monospace; font-size: 12px; color: #00e5ff; background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 3px; border: 1px solid rgba(0,229,255,0.4); }
.sb-glx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.sb-glx-tags span { font-family: 'Courier New', monospace; font-size: 10.5px; padding: 5px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 720px) {
  .sb-glx { grid-template-columns: 1fr; }
  .sb-glx-side { width: auto; margin: 14px 14px 0; }
}
```

---
## 12 CSS Skeleton Loaders

URL: https://codefronts.com/components/css-skeleton-loaders/
Description: 12 hand-coded CSS skeleton loaders — classic shimmer, pulse, avatar card, image card, article page, table rows, stat tiles, comment thread and more.
Demo count: 12

### 01. Classic Shimmer

**Type:** Pure CSS
**Description:** A diagonal gradient slides left-to-right across each placeholder bar — the most-recognised skeleton style, used by LinkedIn, Facebook, and Slack.

**HTML:**
```html
<div class="sk-classic">
  <div class="sk-bar" style="width: 70%"></div>
  <div class="sk-bar" style="width: 90%"></div>
  <div class="sk-bar" style="width: 60%"></div>
</div>
```

**CSS:**
```css
.sk-classic {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skClassic 1.4s linear infinite;
}
@keyframes skClassic {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-classic,
  .sk-classic * {
    animation: none !important;
  }
}

```

### 02. Pulse Block

**Type:** Pure CSS
**Description:** A simple opacity pulse — minimal, GPU-friendly, and the default style used by the Tailwind animate-pulse utility class.

**HTML:**
```html
<div class="sk-pulse">
  <div class="sk-pulse-bar" style="width: 80%"></div>
  <div class="sk-pulse-bar" style="width: 60%"></div>
  <div class="sk-pulse-bar" style="width: 70%"></div>
</div>
```

**CSS:**
```css
.sk-pulse {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-pulse-bar {
  height: 12px;
  border-radius: 6px;
  background: #2a2a36;
  animation: skPulse 1.5s ease-in-out infinite;
}
@keyframes skPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-pulse,
  .sk-pulse * {
    animation: none !important;
  }
}

```

### 03. Avatar Card

**Type:** Pure CSS
**Description:** A circular avatar plus two text lines — the canonical user-profile placeholder. Combines a round shimmer with two narrower bars.

**HTML:**
```html
<div class="sk-avatar">
  <div class="sk-avatar-circle"></div>
  <div class="sk-avatar-lines">
    <div class="sk-avatar-bar" style="width: 110px"></div>
    <div class="sk-avatar-bar" style="width: 70px; height: 8px"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-avatar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 220px;
}
.sk-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  flex-shrink: 0;
}
.sk-avatar-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-avatar-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-avatar,
  .sk-avatar * {
    animation: none !important;
  }
}

```

### 04. Image Card

**Type:** Pure CSS
**Description:** A 16:9 image placeholder topped with a title and two body lines — the "feed item" template every social and blog UI ships with.

**HTML:**
```html
<div class="sk-card">
  <div class="sk-card-img"></div>
  <div class="sk-card-title"></div>
  <div class="sk-card-line" style="width: 95%"></div>
  <div class="sk-card-line" style="width: 75%"></div>
</div>
```

**CSS:**
```css
.sk-card {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: #15151b;
}
.sk-card-img,
.sk-card-title,
.sk-card-line {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.6s linear infinite;
  border-radius: 6px;
}
.sk-card-img {
  aspect-ratio: 16 / 9;
  margin-bottom: 4px;
}
.sk-card-title {
  height: 14px;
  width: 70%;
}
.sk-card-line {
  height: 9px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-card,
  .sk-card * {
    animation: none !important;
  }
}

```

### 05. Wave Sweep

**Type:** Pure CSS
**Description:** A bright highlight strip travels across the placeholder using a CSS mask — adds a glassy "light passing over" feel without changing the base colour.

**HTML:**
```html
<div class="sk-wave">
  <div class="sk-wave-bar" style="width: 80%"></div>
  <div class="sk-wave-bar" style="width: 95%"></div>
  <div class="sk-wave-bar" style="width: 65%"></div>
</div>
```

**CSS:**
```css
.sk-wave {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-wave-bar {
  height: 12px;
  border-radius: 6px;
  background: #2a2a36;
  position: relative;
  overflow: hidden;
}
.sk-wave-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skWave 1.6s linear infinite;
}
@keyframes skWave {
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-wave,
  .sk-wave * {
    animation: none !important;
  }
}

```

### 06. Comment Thread

**Type:** Pure CSS
**Description:** Three stacked rows, each a small avatar + two text lines — perfect for chat windows, comment lists, and message inbox loading states.

**HTML:**
```html
<div class="sk-thread">
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 80px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 140px"></div>
    </div>
  </div>
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 60px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 130px"></div>
    </div>
  </div>
  <div class="sk-thread-row">
    <div class="sk-thread-dot"></div>
    <div class="sk-thread-lines">
      <div class="sk-thread-bar" style="width: 70px; height: 9px"></div>
      <div class="sk-thread-bar" style="width: 110px"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sk-thread {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sk-thread-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.sk-thread-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
  flex-shrink: 0;
}
.sk-thread-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.sk-thread-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-thread,
  .sk-thread * {
    animation: none !important;
  }
}

```

### 07. Article Page

**Type:** Pure CSS
**Description:** A page-level skeleton: hero image, headline, byline, and four paragraph lines. The full reading-page placeholder for blog and news templates.

**HTML:**
```html
<div class="sk-article">
  <div class="sk-article-hero"></div>
  <div class="sk-article-h1"></div>
  <div class="sk-article-by"></div>
  <div class="sk-article-line" style="width: 100%"></div>
  <div class="sk-article-line" style="width: 95%"></div>
  <div class="sk-article-line" style="width: 90%"></div>
  <div class="sk-article-line" style="width: 60%"></div>
</div>
```

**CSS:**
```css
.sk-article {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sk-article-hero,
.sk-article-h1,
.sk-article-by,
.sk-article-line {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.6s linear infinite;
  border-radius: 5px;
}
.sk-article-hero {
  height: 60px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.sk-article-h1 {
  height: 14px;
  width: 80%;
  margin-bottom: 2px;
}
.sk-article-by {
  height: 9px;
  width: 45%;
  margin-bottom: 6px;
}
.sk-article-line {
  height: 8px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-article,
  .sk-article * {
    animation: none !important;
  }
}

```

### 08. Table Rows

**Type:** Pure CSS
**Description:** Three table rows of three cells each, with a header row above. Each cell shimmers — the canonical placeholder for data tables and dashboards.

**HTML:**
```html
<div class="sk-table">
  <div class="sk-table-row sk-table-head">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
  <div class="sk-table-row">
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
    <div class="sk-table-cell"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-table {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sk-table-row {
  display: grid;
  gap: 6px;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.sk-table-cell {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
.sk-table-head .sk-table-cell {
  background: linear-gradient(90deg, #2a2a36 0%, #353543 50%, #2a2a36 100%);
  background-size: 200% 100%;
  height: 14px;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-table,
  .sk-table * {
    animation: none !important;
  }
}

```

### 09. Stat Tiles

**Type:** Pure CSS
**Description:** Three KPI tiles in a row, each with a small label and a big number placeholder — the dashboard / analytics loading state.

**HTML:**
```html
<div class="sk-stats">
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
  <div class="sk-stat">
    <div class="sk-stat-label"></div>
    <div class="sk-stat-num"></div>
  </div>
</div>
```

**CSS:**
```css
.sk-stats {
  width: 220px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sk-stat {
  background: #15151b;
  padding: 10px 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sk-stat-label,
.sk-stat-num {
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  border-radius: 4px;
}
.sk-stat-label {
  height: 8px;
  width: 70%;
}
.sk-stat-num {
  height: 16px;
  width: 60%;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-stats,
  .sk-stats * {
    animation: none !important;
  }
}

```

### 10. Gradient Glow

**Type:** Pure CSS
**Description:** A soft brand-coloured gradient sweeps through each bar — a more decorative shimmer that fits hero sections and marketing pages.

**HTML:**
```html
<div class="sk-glow">
  <div class="sk-glow-bar" style="width: 90%"></div>
  <div class="sk-glow-bar" style="width: 70%"></div>
  <div class="sk-glow-bar" style="width: 80%"></div>
</div>
```

**CSS:**
```css
.sk-glow {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-glow-bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(
    90deg,
    #1a1a22 0%,
    rgba(124, 108, 255, 0.35) 30%,
    rgba(255, 108, 138, 0.35) 60%,
    #1a1a22 100%
  );
  background-size: 200% 100%;
  animation: skGlow 1.8s linear infinite;
}
@keyframes skGlow {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-glow,
  .sk-glow * {
    animation: none !important;
  }
}

```

### 11. List with Thumbnails

**Type:** Pure CSS
**Description:** A search-result / file-browser layout: square thumbnail beside two text lines, repeated three times. Mirrors media library and admin list views.

**HTML:**
```html
<div class="sk-list">
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 70%"></div>
      <div class="sk-list-bar" style="width: 50%; height: 8px"></div>
    </div>
  </div>
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 85%"></div>
      <div class="sk-list-bar" style="width: 40%; height: 8px"></div>
    </div>
  </div>
  <div class="sk-list-row">
    <div class="sk-list-thumb"></div>
    <div class="sk-list-text">
      <div class="sk-list-bar" style="width: 60%"></div>
      <div class="sk-list-bar" style="width: 65%; height: 8px"></div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.sk-list {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-list-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sk-list-thumb {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
  flex-shrink: 0;
}
.sk-list-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sk-list-bar {
  height: 11px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-list,
  .sk-list * {
    animation: none !important;
  }
}

```

### 12. Chip Cluster

**Type:** Pure CSS
**Description:** Pill-shaped chips of varying widths shimmer in a flex-wrap layout — the right placeholder for tag filters, category lists, and search facets.

**HTML:**
```html
<div class="sk-chips">
  <div class="sk-chip" style="width: 56px"></div>
  <div class="sk-chip" style="width: 80px"></div>
  <div class="sk-chip" style="width: 48px"></div>
  <div class="sk-chip" style="width: 72px"></div>
  <div class="sk-chip" style="width: 60px"></div>
  <div class="sk-chip" style="width: 90px"></div>
  <div class="sk-chip" style="width: 50px"></div>
</div>
```

**CSS:**
```css
.sk-chips {
  width: 220px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sk-chip {
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(90deg, #1f1f28 0%, #2a2a36 50%, #1f1f28 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.5s linear infinite;
}
@keyframes skShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-chips,
  .sk-chips * {
    animation: none !important;
  }
}

```

---
## 22 CSS Split Screen Layouts

URL: https://codefronts.com/layouts/css-split-screen/
Description: 22 hand-coded CSS split-screen layouts — classic 50/50, diagonal cut, hover-reveal, before/after slider, parallax scenes, 3D perspective and more. Responsive, copy-paste ready.
Demo count: 22

### 01. Editorial Restaurant

**Type:** Pure CSS
**Description:** Editorial restaurant menu — cream paper, olive-green typography, burgundy accents. Classic 50/50 split with food photography on the left (CSS-painted plate) and the menu on the right. Serif headlines, dotted-leader pricing, the printed-menu aesthetic.

**HTML:**
```html
<section class="ss-edt" aria-label="Restaurant menu">
  <aside class="ss-edt-visual" aria-hidden="true">
    <div class="ss-edt-plate">
      <div class="ss-edt-food"></div>
      <span class="ss-edt-fork"></span>
      <span class="ss-edt-knife"></span>
    </div>
    <span class="ss-edt-stamp">No. 47 · Spring</span>
  </aside>
  <article class="ss-edt-menu">
    <header>
      <span class="ss-edt-eye">— La Maison Verte</span>
      <h2>The Spring<br /><em>tasting menu.</em></h2>
      <p>Five courses, paired with natural wines, served family-style. Reservations required.</p>
    </header>
    <dl class="ss-edt-courses">
      <div>
        <dt>Asparagus &amp; truffle</dt>
        <dd>18</dd>
      </div>
      <div>
        <dt>Pea soup, mint oil</dt>
        <dd>14</dd>
      </div>
      <div>
        <dt>Hand-rolled cavatelli</dt>
        <dd>26</dd>
      </div>
      <div>
        <dt>Lamb shoulder, jus</dt>
        <dd>34</dd>
      </div>
      <div>
        <dt>Olive oil cake</dt>
        <dd>12</dd>
      </div>
    </dl>
    <footer>
      <span>5-course · 104 per guest</span>
      <button type="button" class="ss-edt-cta">Reserve a table →</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-edt {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #2a3325;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a3325;
}
.ss-edt-visual {
  position: relative;
  background:
    radial-gradient(60% 80% at 50% 40%, #efe4cf 0%, #d8c8a8 100%);
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid #2a3325;
}
.ss-edt-plate {
  position: relative;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #f0e8d4 100%);
  box-shadow:
    inset 0 0 0 14px rgba(0,0,0,0.04),
    inset 0 0 0 16px rgba(122,86,40,0.18),
    0 18px 40px rgba(60,40,20,0.18);
}
.ss-edt-food {
  position: absolute; inset: 30%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%, #6d8c3c 0%, #4a6b25 60%, transparent 75%),
    radial-gradient(circle at 70% 60%, #c43a2c 0%, #8a1f1c 30%, transparent 50%),
    radial-gradient(circle at 50% 75%, #e8b04a 0%, #b8924a 40%, transparent 60%);
}
.ss-edt-fork, .ss-edt-knife {
  position: absolute;
  width: 4px; height: 80px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ss-edt-fork  { top: 50%; left: 8%; transform: translateY(-50%) rotate(8deg); }
.ss-edt-knife { top: 50%; right: 8%; transform: translateY(-50%) rotate(-8deg); }
.ss-edt-fork::before {
  content: ''; position: absolute; top: -10px; left: -6px;
  width: 16px; height: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, #c0bcb0 3px 4px);
}
.ss-edt-knife::before {
  content: ''; position: absolute; top: -10px; left: -3px;
  width: 10px; height: 30px;
  background: linear-gradient(180deg, #c0bcb0 0%, #888477 100%);
  border-radius: 2px 4px 0 0;
  transform: skewX(-8deg);
}
.ss-edt-stamp {
  position: absolute; top: 24px; left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #5a3825;
  border: 1.5px solid #5a3825;
  padding: 6px 12px;
  transform: rotate(-4deg);
  background: rgba(244,237,224,0.4);
}
.ss-edt-menu {
  padding: 40px 44px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(60% 60% at 100% 0%, #fdf8eb 0%, transparent 60%),
    #f9f1de;
}
.ss-edt-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #6e1f1c;
}
.ss-edt-menu h2 {
  margin: 6px 0 0;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 500;
  line-height: 0.95;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-edt-menu h2 em {
  font-style: italic;
  color: #6e1f1c;
}
.ss-edt-menu header p {
  margin: 4px 0 0;
  font-size: 16px;
  color: #5a4a35;
  line-height: 1.55;
  max-width: 440px;
}
.ss-edt-courses { margin: 0; padding: 18px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: flex; flex-direction: column; gap: 14px; }
.ss-edt-courses div {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 18px;
}
.ss-edt-courses dt {
  color: #2a3325;
  font-style: italic;
  flex-shrink: 0;
}
.ss-edt-courses dt::after {
  content: '';
  display: inline-block;
  width: 100%;
  margin: 0 8px 4px;
  border-bottom: 1.5px dotted #b89668;
  vertical-align: bottom;
}
.ss-edt-courses dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700;
  color: #6e1f1c;
}
.ss-edt-menu footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-edt-menu footer span {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: #5a4a35;
}
.ss-edt-cta {
  padding: 12px 22px;
  background: #2a3325;
  color: #f4ede0;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-edt-cta:hover { background: #6e1f1c; }
.ss-edt-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-edt { grid-template-columns: 1fr; }
  .ss-edt-visual { min-height: 280px; border-right: 0; border-bottom: 1px solid #2a3325; }
}
```

### 02. Diagonal Split

**Type:** Pure CSS
**Description:** Sport magazine — pitch black with electric-orange diagonal cut and concrete-grey supporting tones. Headline punches through the diagonal seam. Pure CSS via <code>clip-path: polygon()</code> for the angled wedge; oversized condensed display type sells the impact.

**HTML:**
```html
<section class="ss-dia" aria-label="Sport magazine cover">
  <div class="ss-dia-orange" aria-hidden="true">
    <span class="ss-dia-num">47</span>
  </div>
  <div class="ss-dia-black">
    <span class="ss-dia-issue">ISSUE 47 · MAY</span>
    <h2>FASTER<br /><span class="ss-dia-italic">than</span><br />YESTERDAY.</h2>
    <p>Inside: how four runners broke their personal records by changing one thing.</p>
    <ul class="ss-dia-list">
      <li><span>01</span> The 6am rule</li>
      <li><span>02</span> Negative splits</li>
      <li><span>03</span> Track over road</li>
    </ul>
    <button type="button" class="ss-dia-cta">Read inside →</button>
  </div>
</section>
```

**CSS:**
```css
.ss-dia {
  position: relative;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0e10;
  color: #fff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-dia-orange {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5e1a 0%, #ff8a00 60%, #ffaa44 100%);
  clip-path: polygon(0 0, 56% 0, 32% 100%, 0 100%);
  display: flex; align-items: center; justify-content: center;
}
.ss-dia-orange::before {
  content: ''; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(0,0,0,0.04) 30px 31px);
}
.ss-dia-num {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: clamp(120px, 18vw, 240px);
  line-height: 0.85;
  color: #0e0e10;
  letter-spacing: -0.05em;
  transform: translateX(-22%) translateY(-4%);
  text-shadow: 0 6px 0 rgba(0,0,0,0.06);
  font-style: italic;
}
.ss-dia-black {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 56%;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 2;
}
.ss-dia-issue {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em;
  color: #ff8a00;
}
.ss-dia-black h2 {
  margin: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 0.9;
  color: #fff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ss-dia-italic {
  font-style: italic;
  font-weight: 300;
  color: #ff8a00;
  text-transform: lowercase;
  font-family: 'Cormorant Garamond', serif;
}
.ss-dia-black p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b8b6b0;
  max-width: 380px;
}
.ss-dia-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-dia-list li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #fff;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.ss-dia-list span {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff8a00;
}
.ss-dia-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff5e1a;
  color: #0e0e10;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, transform 0.12s;
}
.ss-dia-cta:hover { background: #ff8a00; }
.ss-dia-cta:active { transform: translateY(1px); }
@media (max-width: 720px) {
  .ss-dia { min-height: 580px; }
  .ss-dia-orange { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 50%); }
  .ss-dia-num { transform: translateX(0) translateY(-10%); font-size: 120px; }
  .ss-dia-black { width: 100%; top: 50%; padding-top: 36px; }
}
```

### 03. Wine Cellar

**Type:** Pure CSS
**Description:** Wine cellar boutique — deep burgundy with gold-leaf accents and cream label typography. Asymmetric 60/40 split: a single CSS-painted bottle on the left, vintage tasting notes on the right. Real <code>&lt;dl&gt;</code> for the vintage details.

**HTML:**
```html
<section class="ss-wne" aria-label="Wine bottle and tasting notes">
  <aside class="ss-wne-visual" aria-hidden="true">
    <div class="ss-wne-shelf"></div>
    <div class="ss-wne-bottle">
      <div class="ss-wne-neck"></div>
      <div class="ss-wne-label">
        <em>Château</em>
        <strong>Verdun</strong>
        <span>1987</span>
      </div>
    </div>
    <div class="ss-wne-glow"></div>
  </aside>
  <article class="ss-wne-notes">
    <header>
      <span class="ss-wne-vintage">VINTAGE 1987</span>
      <h2>Château<br /><em>Verdun</em></h2>
      <p>
        A single-vineyard cuvée from the Médoc. Aged 24 months in French oak. Limited release of
        1,200 bottles.
      </p>
    </header>
    <dl class="ss-wne-detail">
      <dt>Region</dt>
      <dd>Bordeaux, France</dd>
      <dt>Varietal</dt>
      <dd>Cabernet Sauvignon (78%)</dd>
      <dt>Aging</dt>
      <dd>24 months · French oak</dd>
      <dt>Tasting</dt>
      <dd>Black cherry, leather, tobacco</dd>
      <dt>Pairing</dt>
      <dd>Dry-aged ribeye, hard cheese</dd>
    </dl>
    <footer class="ss-wne-foot">
      <span class="ss-wne-price">€420 <small>per bottle</small></span>
      <button type="button" class="ss-wne-cta">Add to cellar</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-wne {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #1a0a0e;
  color: #f5e6d3;
  border-radius: 0; overflow: hidden;
}
.ss-wne-visual {
  position: relative;
  background:
    radial-gradient(60% 70% at 50% 60%, rgba(80,20,30,0.6) 0%, #0e0608 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-wne-shelf {
  position: absolute; bottom: 12%; left: 0; right: 0; height: 4px;
  background: linear-gradient(180deg, #5a3825 0%, #3a2415 100%);
  box-shadow: 0 -2px 0 #2a1810, 0 4px 18px rgba(0,0,0,0.6);
}
.ss-wne-bottle {
  position: relative;
  width: 88px; height: 280px;
  border-radius: 8px 8px 24px 24px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 30%, transparent 50%),
    linear-gradient(180deg, #2a0810 0%, #1a0a0e 100%);
  box-shadow:
    inset -8px 0 24px rgba(0,0,0,0.5),
    inset 8px 0 12px rgba(180,80,80,0.08),
    0 6px 18px rgba(0,0,0,0.5);
  z-index: 2;
}
.ss-wne-neck {
  position: absolute; left: 50%; top: -54px;
  transform: translateX(-50%);
  width: 28px; height: 60px;
  background: linear-gradient(180deg, #1a0608 0%, #2a0810 100%);
  border-radius: 4px 4px 0 0;
  box-shadow: inset -3px 0 8px rgba(0,0,0,0.4);
}
.ss-wne-neck::after {
  content: ''; position: absolute; top: -8px; left: -2px; right: -2px; height: 14px;
  background: linear-gradient(180deg, #d4af37 0%, #8a6f1c 100%);
  border-radius: 3px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label {
  position: absolute; left: 6px; right: 6px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #f5e6d3 0%, #e8d4ba 100%);
  padding: 14px 6px;
  text-align: center;
  border-top: 1px solid #d4af37;
  border-bottom: 1px solid #d4af37;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.3);
}
.ss-wne-label em {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 9px; font-style: italic;
  color: #6e1f1c;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.ss-wne-label strong {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 700;
  color: #1a0a0e;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ss-wne-label span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6e1f1c;
  margin-top: 4px;
}
.ss-wne-glow {
  position: absolute; bottom: 8%; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 30px;
  background: radial-gradient(50% 100% at 50% 0%, rgba(212,175,55,0.18), transparent 70%);
  border-radius: 50%;
  z-index: 1;
}
.ss-wne-notes {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(110,30,30,0.18) 0%, transparent 70%),
    #1a0a0e;
}
.ss-wne-vintage {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.3em;
  color: #d4af37;
}
.ss-wne-notes h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  color: #f5e6d3;
  letter-spacing: -0.02em;
}
.ss-wne-notes h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-wne-notes header p {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #c4a888;
  max-width: 440px;
  font-style: italic;
}
.ss-wne-detail { margin: 0; padding: 18px 0; border-top: 1px solid rgba(212,175,55,0.25); border-bottom: 1px solid rgba(212,175,55,0.25); display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; font-size: 14.5px; }
.ss-wne-detail dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-wne-detail dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: #f5e6d3;
}
.ss-wne-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.ss-wne-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 500;
  color: #d4af37;
  letter-spacing: -0.01em;
}
.ss-wne-price small {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #8a6f4a;
  margin-left: 4px;
}
.ss-wne-cta {
  padding: 14px 26px;
  background: transparent;
  color: #d4af37;
  border: 1.5px solid #d4af37;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.ss-wne-cta:hover { background: #d4af37; color: #1a0a0e; }
@media (max-width: 720px) {
  .ss-wne { grid-template-columns: 1fr; }
  .ss-wne-visual { min-height: 320px; }
}
```

### 04. Hover Reveal Split

**Type:** Pure CSS
**Description:** K-pop concert poster — hot pink + electric cyan + chrome. Two halves; hover/tap each to grow it from 50% to 70%, the other shrinks. Pure CSS via <code>flex-grow</code> transition; massive condensed type and chromatic-aberration headlines complete the album-cover feel.

**HTML:**
```html
<section class="ss-kpop" aria-label="Album release split">
  <article class="ss-kpop-side ss-kpop-pink">
    <span class="ss-kpop-eye">SIDE A</span>
    <h2><span>NEON</span><span>HEART</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>01 ⟡ Midnight Drive</span>
      <span>02 ⟡ Lights Off</span>
      <span>03 ⟡ Pink Static</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
  <article class="ss-kpop-side ss-kpop-cyan">
    <span class="ss-kpop-eye">SIDE B</span>
    <h2><span>CYBER</span><span>BLOOM</span></h2>
    <p>Vol. 03 · Out now</p>
    <div class="ss-kpop-track">
      <span>04 ⟡ Glass Hearts</span>
      <span>05 ⟡ Hologram</span>
      <span>06 ⟡ Echo Park</span>
    </div>
    <button type="button" class="ss-kpop-cta">▶ PLAY</button>
  </article>
</section>
```

**CSS:**
```css
.ss-kpop {
  display: flex;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  background: #0a0014;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side {
  flex: 1 1 50%;
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  transition: flex-grow 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  isolation: isolate;
}
.ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1.6; }
.ss-kpop-pink {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 30% 30%, #ff52aa 0%, #c41560 100%);
  color: #fff;
  border-right: 2px solid #fff;
}
.ss-kpop-cyan {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.05) 4px 5px),
    radial-gradient(60% 80% at 70% 70%, #00e5ff 0%, #0080a8 100%);
  color: #0a0014;
}
.ss-kpop-pink::before, .ss-kpop-cyan::before {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.2) 50%, transparent 70%);
  z-index: -1;
}
.ss-kpop-pink::before { top: -60px; right: -60px; }
.ss-kpop-cyan::before { bottom: -60px; left: -60px; }
.ss-kpop-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em;
}
.ss-kpop-pink .ss-kpop-eye { color: #ffd400; text-shadow: 0 0 10px rgba(255,212,0,0.4); }
.ss-kpop-cyan .ss-kpop-eye { color: #ff00aa; }
.ss-kpop-side h2 {
  margin: 0;
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  display: flex; flex-direction: column;
  font-style: italic;
}
.ss-kpop-side h2 span:nth-child(2) {
  align-self: flex-end;
}
.ss-kpop-pink h2 {
  color: #fff;
  text-shadow:
    -3px 0 0 #00e5ff,
    3px 0 0 #ffd400;
}
.ss-kpop-cyan h2 {
  color: #0a0014;
  text-shadow:
    -3px 0 0 #ff52aa,
    3px 0 0 #ffd400;
}
.ss-kpop-side p {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.ss-kpop-pink p { color: #ffd400; }
.ss-kpop-cyan p { color: #0a0014; }
.ss-kpop-track {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
}
.ss-kpop-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 12px 22px;
  background: #fff;
  color: #0a0014;
  border: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: transform 0.12s;
}
.ss-kpop-pink .ss-kpop-cta { background: #ffd400; color: #c41560; }
.ss-kpop-cyan .ss-kpop-cta { background: #ff52aa; color: #fff; }
.ss-kpop-cta:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-kpop { flex-direction: column; }
  .ss-kpop-side { flex: 1 1 auto; }
  .ss-kpop-side:hover, .ss-kpop-side:focus-within { flex-grow: 1; }
  .ss-kpop-pink { border-right: 0; border-bottom: 2px solid #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-kpop-side { transition: none; }
}
```

### 05. Coffee Triptych

**Type:** Pure CSS
**Description:** Three coffee blends side-by-side — espresso brown, cream, copper. Three vertical panels in a single row, each with its own roast story. Hover any panel to reveal the tasting notes. CSS grid with <code>1fr 1fr 1fr</code> and a shared expand-on-hover behavior.

**HTML:**
```html
<section class="ss-trip" aria-label="Coffee blend triptych">
  <article class="ss-trip-card ss-trip-light">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Misty<br />Morning</h2>
      <span class="ss-trip-roast">LIGHT ROAST</span>
    </header>
    <p class="ss-trip-notes">Bright, floral, lemon zest. Single origin Ethiopia.</p>
    <footer>€18 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-medium">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Honey<br />House</h2>
      <span class="ss-trip-roast">MEDIUM</span>
    </header>
    <p class="ss-trip-notes">Caramel, almond, ripe stone fruit. Costa Rica blend.</p>
    <footer>€20 · 250g</footer>
  </article>
  <article class="ss-trip-card ss-trip-dark">
    <header>
      <span class="ss-trip-bean" aria-hidden="true"></span>
      <h2>Midnight<br />Hour</h2>
      <span class="ss-trip-roast">DARK ROAST</span>
    </header>
    <p class="ss-trip-notes">Dark chocolate, smoke, lingering espresso finish.</p>
    <footer>€22 · 250g</footer>
  </article>
</section>
```

**CSS:**
```css
.ss-trip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-trip-card {
  position: relative;
  padding: 40px 28px;
  display: flex; flex-direction: column; gap: 18px;
  cursor: pointer;
  transition: padding 0.32s ease;
  border-right: 1px solid rgba(0,0,0,0.2);
  isolation: isolate;
}
.ss-trip-card:last-child { border-right: 0; }
.ss-trip-light  { background: linear-gradient(180deg, #f4ebd6 0%, #e8d4ba 100%); color: #5a3825; }
.ss-trip-medium { background: linear-gradient(180deg, #b8924a 0%, #8a6420 100%); color: #f4ebd6; }
.ss-trip-dark   { background: linear-gradient(180deg, #2a1810 0%, #1a0e08 100%); color: #f4ebd6; }
.ss-trip-card header { display: flex; flex-direction: column; gap: 14px; }
.ss-trip-bean {
  width: 56px; height: 56px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.ss-trip-bean::before {
  content: '';
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 4px; height: 76%;
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
}
.ss-trip-light  .ss-trip-bean { background: linear-gradient(135deg, #c89868 0%, #8a5825 100%); }
.ss-trip-medium .ss-trip-bean { background: linear-gradient(135deg, #6a3818 0%, #3a1808 100%); }
.ss-trip-dark   .ss-trip-bean { background: linear-gradient(135deg, #2a0806 0%, #050000 100%); }
.ss-trip-card h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 0.95;
  font-style: italic;
  letter-spacing: -0.01em;
}
.ss-trip-roast {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.22em;
  opacity: 0.7;
}
.ss-trip-notes {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.85;
  font-style: italic;
  max-width: 200px;
}
.ss-trip-card footer {
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 16px;
  border-top: 1px dashed currentColor;
  opacity: 0.85;
}
.ss-trip-card:hover {
  padding: 36px 28px 36px 36px;
}
.ss-trip-card::after {
  content: '→';
  position: absolute; top: 28px; right: 28px;
  font-size: 22px;
  font-weight: 100;
  opacity: 0;
  transition: opacity 0.24s, transform 0.24s;
}
.ss-trip-card:hover::after { opacity: 1; transform: translateX(4px); }
@media (max-width: 720px) {
  .ss-trip { grid-template-columns: 1fr; }
  .ss-trip-card { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.2); }
  .ss-trip-card:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trip-card { transition: none; }
}
```

### 06. Curved Split

**Type:** Pure CSS
**Description:** Surf brand — ocean teal meets sand beige with a wave-curved seam, sunset-coral CTA. Pure CSS curve via <code>border-radius</code> and a generous <code>clip-path</code>. The two halves never share a straight line — feels organic, beach-y, hand-shaped.

**HTML:**
```html
<section class="ss-srf" aria-label="Surfboard hero">
  <aside class="ss-srf-ocean" aria-hidden="true">
    <span class="ss-srf-sun"></span>
    <span class="ss-srf-wave"></span>
    <span class="ss-srf-board"></span>
  </aside>
  <article class="ss-srf-content">
    <span class="ss-srf-eye">▴ Drift Surf Co.</span>
    <h2>Hand-shaped<br />by the <em>tide.</em></h2>
    <p>
      Custom polyurethane boards, glassed in our Ericeira workshop. 6-week lead time, lifetime
      workmanship guarantee.
    </p>
    <div class="ss-srf-stats">
      <div class="ss-srf-stat"><strong>14</strong><span>Shapers</span></div>
      <div class="ss-srf-stat"><strong>2,400</strong><span>Boards / yr</span></div>
      <div class="ss-srf-stat"><strong>1972</strong><span>Founded</span></div>
    </div>
    <button type="button" class="ss-srf-cta">Shape your board →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-srf {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecd9;
  color: #1a3a3f;
  border-radius: 0; overflow: hidden;
  position: relative;
}
.ss-srf-ocean {
  position: relative;
  background: linear-gradient(180deg, #2c8a8e 0%, #1a3a3f 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-srf-ocean::after {
  content: '';
  position: absolute; right: -120px; top: 0; bottom: 0; width: 240px;
  background: #f5ecd9;
  border-radius: 50% 0 0 50% / 50% 0 0 50%;
  z-index: 2;
}
.ss-srf-sun {
  position: absolute; top: 14%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe899 0%, #ff8a40 60%, #c45a1c 100%);
  box-shadow: 0 0 60px rgba(255,170,68,0.5);
}
.ss-srf-wave {
  position: absolute; bottom: 18%; left: -10%; right: -20%;
  height: 80px;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(255,255,255,0.35), transparent 60%);
  border-radius: 50%;
  filter: blur(2px);
}
.ss-srf-wave::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 24px;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  filter: blur(6px);
}
.ss-srf-board {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(28deg);
  width: 56px; height: 240px;
  border-radius: 28px / 90px;
  background: linear-gradient(180deg, #fff 0%, #ffe9c4 50%, #ff8a40 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 3;
}
.ss-srf-board::before {
  content: ''; position: absolute; left: 50%; top: 12%;
  transform: translateX(-50%);
  width: 2px; height: 76%;
  background: rgba(0,0,0,0.18);
}
.ss-srf-content {
  padding: 44px 48px 44px 36px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative;
  z-index: 1;
}
.ss-srf-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-srf-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.95;
  color: #1a3a3f;
  letter-spacing: -0.02em;
}
.ss-srf-content h2 em {
  font-style: italic;
  color: #c45a1c;
}
.ss-srf-content p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3a5a5f;
  max-width: 460px;
}
.ss-srf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 420px; padding: 14px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; }
.ss-srf-stat { display: flex; flex-direction: column; gap: 4px; }
.ss-srf-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 500;
  color: #2c8a8e;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-srf-stats span {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #6a4a35;
  text-transform: uppercase;
}
.ss-srf-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c45a1c;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,90,28,0.35);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-srf-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,90,28,0.45); }
@media (max-width: 720px) {
  .ss-srf { grid-template-columns: 1fr; }
  .ss-srf-ocean { min-height: 280px; }
  .ss-srf-ocean::after { display: none; }
  .ss-srf-stats { grid-template-columns: 1fr; }
}
```

### 07. Asymmetric 70/30

**Type:** Pure CSS
**Description:** Architecture portfolio — warm grey concrete + ivory + black accents. Asymmetric 70/30 split: a single hero project on the left, oversized index numbers on the right. Print-magazine spread vibe; thin hairlines do all the structuring.

**HTML:**
```html
<section class="ss-arc" aria-label="Architecture project showcase">
  <article class="ss-arc-hero">
    <header>
      <span class="ss-arc-eye">PROJECT NO. 014 · 2026</span>
      <h2>Casa<br />Hormigón</h2>
      <p>
        A 220 m² family house in Valle de Bravo. Cast-in-place concrete walls, exposed timber roof,
        single oculus skylight above the central courtyard.
      </p>
    </header>
    <div class="ss-arc-photo" aria-hidden="true">
      <span class="ss-arc-bldg"></span>
      <span class="ss-arc-shadow"></span>
    </div>
    <footer class="ss-arc-meta">
      <span><em>Location</em><b>Valle de Bravo, MX</b></span>
      <span><em>Year</em><b>2026</b></span>
      <span><em>Area</em><b>220 m²</b></span>
      <span><em>Status</em><b>Completed</b></span>
    </footer>
  </article>
  <aside class="ss-arc-index">
    <span class="ss-arc-folio">FOLIO</span>
    <ol>
      <li class="active"><span>014</span>Casa Hormigón</li>
      <li><span>013</span>Library Pavilion</li>
      <li><span>012</span>Bridge House</li>
      <li><span>011</span>Sea Cabin</li>
      <li><span>010</span>Garden Atelier</li>
    </ol>
    <footer>est. 2008</footer>
  </aside>
</section>
```

**CSS:**
```css
.ss-arc {
  display: grid; grid-template-columns: 70% 30%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f0ece4;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
}
.ss-arc-hero {
  padding: 44px 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 28px;
  position: relative;
}
.ss-arc-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
.ss-arc-hero header h2 {
  margin: 6px 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 500;
  line-height: 0.92;
  color: #1a1a1a;
  letter-spacing: -0.03em;
  font-style: italic;
}
.ss-arc-hero header p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a4a4a;
  max-width: 420px;
}
.ss-arc-photo {
  position: relative;
  background: linear-gradient(180deg, #d4cfc1 0%, #b8b3a4 100%);
  border: 1px solid #1a1a1a;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  min-height: 180px;
}
.ss-arc-bldg {
  width: 60%; height: 70%;
  background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%);
  position: relative;
}
.ss-arc-bldg::before {
  content: ''; position: absolute; top: 12%; left: 35%; right: 35%; height: 14%;
  background: #f5d68a;
  box-shadow:
    0 0 0 1px #1a1a1a,
    0 0 18px rgba(245,214,138,0.5);
}
.ss-arc-bldg::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,0.08) 14% 16%);
}
.ss-arc-shadow {
  position: absolute; left: 5%; right: 5%; bottom: 0; height: 16px;
  background: rgba(0,0,0,0.4);
  filter: blur(8px);
}
.ss-arc-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  padding-top: 18px;
  border-top: 1px solid #1a1a1a;
}
.ss-arc-meta span { display: flex; flex-direction: column; gap: 4px; }
.ss-arc-meta em {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em;
  color: #6a6a6a;
  font-style: normal;
}
.ss-arc-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500;
  color: #1a1a1a;
  font-style: italic;
}
.ss-arc-index {
  background: #1a1a1a;
  color: #f0ece4;
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 18px;
  font-family: 'Cormorant Garamond', serif;
}
.ss-arc-folio {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #6a6a6a;
}
.ss-arc-index ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.ss-arc-index li {
  padding: 14px 0;
  font-size: 17px;
  font-style: italic;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: baseline;
  cursor: pointer;
  transition: color 0.16s;
}
.ss-arc-index li:hover { color: #f0ece4; }
.ss-arc-index li span {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-style: normal;
  color: #6a6a6a;
  letter-spacing: 0.16em;
}
.ss-arc-index li.active {
  color: #f0ece4;
  font-weight: 500;
}
.ss-arc-index li.active span { color: #f5d68a; }
.ss-arc-index footer {
  margin-top: auto;
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: #6a6a6a;
}
@media (max-width: 720px) {
  .ss-arc { grid-template-columns: 1fr; }
  .ss-arc-meta { grid-template-columns: 1fr 1fr; }
}
```

### 08. Stepped Diagonal

**Type:** Pure CSS
**Description:** Streetwear brand drop — mustard yellow + asphalt black + neon pink. Stepped diagonal cut between two halves, sticker-graphic typography, drop-countdown badge. The kind of split a sneaker brand uses to announce a Friday release.

**HTML:**
```html
<section class="ss-str" aria-label="Streetwear drop announcement">
  <div class="ss-str-yellow">
    <span class="ss-str-stamp" aria-hidden="true">DROP 047</span>
    <h2>FRIDAY<br /><span class="ss-str-pink">3PM</span></h2>
    <ul class="ss-str-info">
      <li><b>03</b> Tees</li>
      <li><b>02</b> Hoodies</li>
      <li><b>01</b> Pair of kicks</li>
    </ul>
  </div>
  <div class="ss-str-black">
    <span class="ss-str-tag">// LIMITED RUN</span>
    <p>200 pieces. Numbered. No restock. Sign up below to get the link 5 minutes early.</p>
    <form class="ss-str-form" role="search">
      <label class="ss-str-sr" for="ss-str-em">Email for early access</label>
      <input
        id="ss-str-em"
        type="email"
        name="email"
        placeholder="you@inbox.tld"
        autocomplete="email"
        required
      />
      <button type="submit">GET LINK →</button>
    </form>
    <span class="ss-str-counter">⏱ 04 : 12 : 47 : 03</span>
  </div>
</section>
```

**CSS:**
```css
.ss-str {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Helvetica Neue', sans-serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-str-yellow {
  background: #ffd400;
  color: #0a0a0a;
  padding: 48px 44px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
  z-index: 2;
}
.ss-str-yellow::before {
  content: '';
  position: absolute; right: 60px; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(180deg, #0a0a0a 0 12px, transparent 12px 24px);
}
.ss-str-stamp {
  display: inline-block;
  padding: 6px 14px;
  background: #0a0a0a;
  color: #ffd400;
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  transform: rotate(-2deg);
}
.ss-str-yellow h2 {
  margin: 0;
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-style: italic;
}
.ss-str-pink { color: #ff0090; -webkit-text-stroke: 2px #0a0a0a; }
.ss-str-info { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-str-info li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 17px; font-weight: 700;
  padding: 8px 0;
  border-bottom: 2px dashed #0a0a0a;
  font-family: 'Courier New', monospace;
}
.ss-str-info b {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 900;
  font-size: 24px;
  background: #ff0090;
  color: #ffd400;
  padding: 0 6px;
  font-style: italic;
}
.ss-str-black {
  background: #0a0a0a;
  color: #f0ece4;
  padding: 48px 44px 48px 80px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  margin-left: -60px;
  z-index: 1;
}
.ss-str-tag {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #ff0090;
}
.ss-str-black p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #f0ece4;
  max-width: 360px;
  font-weight: 500;
}
.ss-str-form {
  display: flex; gap: 0;
  margin-top: auto;
  border: 2px solid #ffd400;
  background: #1a1a1a;
}
.ss-str-form input {
  flex: 1;
  padding: 14px 16px;
  background: transparent;
  color: #f0ece4;
  border: 0; outline: 0;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
.ss-str-form input::placeholder { color: #6a6a6a; }
.ss-str-form button {
  padding: 0 22px;
  background: #ffd400;
  color: #0a0a0a;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 900;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.12s;
}
.ss-str-form button:hover { background: #ff0090; color: #ffd400; }
.ss-str-counter {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #ffd400;
  padding: 10px 14px;
  background: #1a1a1a;
  border: 1px dashed #ff0090;
  align-self: flex-start;
}
.ss-str-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 720px) {
  .ss-str { grid-template-columns: 1fr; }
  .ss-str-yellow { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%); padding-bottom: 60px; }
  .ss-str-black { margin-left: 0; margin-top: -30px; padding-left: 44px; padding-top: 60px; }
}
```

### 09. Jewelry Sign-in

**Type:** Pure CSS
**Description:** Jewelry boutique sign-in — champagne cream + obsidian black + rose gold. Brand on one side, sign-in form on the other. The kind of split-screen Tiffany would commission. Real <code>&lt;form&gt;</code> with proper labels and autocomplete tokens.

**HTML:**
```html
<section class="ss-jew" aria-label="Jewelry account sign-in">
  <aside class="ss-jew-brand">
    <span class="ss-jew-mark" aria-hidden="true"></span>
    <span class="ss-jew-since">EST. 1924</span>
    <h2><em>Maison</em><br />Aurelia.</h2>
    <p>Welcome back. Your private viewing room and saved pieces are one sign-in away.</p>
    <span class="ss-jew-divider" aria-hidden="true"></span>
    <span class="ss-jew-quote"><em>"Adorned with intent."</em></span>
  </aside>
  <article class="ss-jew-form-wrap">
    <header>
      <span class="ss-jew-eye">— Members only</span>
      <h3>Sign in to your account.</h3>
    </header>
    <form class="ss-jew-form">
      <label>
        <span class="ss-jew-lbl">Email</span>
        <input
          type="email"
          name="email"
          autocomplete="email"
          placeholder="iris@maison.tld"
          required
        />
      </label>
      <label>
        <span class="ss-jew-lbl">Password</span>
        <input
          type="password"
          name="password"
          autocomplete="current-password"
          placeholder="••••••••••"
          required
        />
      </label>
      <div class="ss-jew-row">
        <label class="ss-jew-check"
          ><input type="checkbox" /> <span>Remember this device</span></label
        >
        <a href="#!">Forgot password</a>
      </div>
      <button type="submit" class="ss-jew-cta">Enter the salon</button>
      <p class="ss-jew-meta">Not a member? <a href="#!">Request an invitation</a></p>
    </form>
  </article>
</section>
```

**CSS:**
```css
.ss-jew {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fbf6e8;
  color: #1a1612;
  border-radius: 0; overflow: hidden;
}
.ss-jew-brand {
  background:
    radial-gradient(60% 80% at 50% 30%, #1a1612 0%, #0a0806 100%);
  color: #f5e6c8;
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.ss-jew-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c0a4 0%, #b88a6a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 0 6px rgba(243,192,164,0.12);
  position: relative;
}
.ss-jew-mark::after {
  content: ''; position: absolute; inset: 8px;
  border: 1px solid #1a1612;
  border-radius: 50%;
}
.ss-jew-since {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.32em;
  color: #b88a6a;
}
.ss-jew-brand h2 {
  margin: 4px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #f5e6c8;
}
.ss-jew-brand h2 em {
  font-style: italic;
  color: #f3c0a4;
}
.ss-jew-brand p {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #c8b896;
  max-width: 380px;
  font-style: italic;
}
.ss-jew-divider {
  display: block;
  width: 60px; height: 1px;
  background: #b88a6a;
  margin-top: 16px;
}
.ss-jew-quote {
  margin-top: auto;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: #b88a6a;
  letter-spacing: 0.04em;
}
.ss-jew-form-wrap {
  padding: 44px 48px;
  display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, #fff 0%, #fbf6e8 100%);
}
.ss-jew-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em;
  color: #b88a6a;
}
.ss-jew-form-wrap h3 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #1a1612;
  line-height: 1.05;
  font-style: italic;
}
.ss-jew-form { display: flex; flex-direction: column; gap: 14px; max-width: 400px; }
.ss-jew-form label { display: flex; flex-direction: column; gap: 6px; }
.ss-jew-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a4a35;
}
.ss-jew-form input[type="email"],
.ss-jew-form input[type="password"] {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #c8b896;
  border-radius: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #1a1612;
  font-style: italic;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.ss-jew-form input:focus { outline: 0; border-color: #b88a6a; box-shadow: 0 0 0 3px rgba(184,138,106,0.15); }
.ss-jew-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: #4a3a2a;
}
.ss-jew-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ss-jew-check input { accent-color: #b88a6a; }
.ss-jew-row a { color: #b88a6a; text-decoration: none; }
.ss-jew-row a:hover { text-decoration: underline; }
.ss-jew-cta {
  padding: 14px 22px;
  background: #1a1612;
  color: #f5e6c8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-jew-cta:hover { background: #b88a6a; color: #1a1612; }
.ss-jew-meta {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #6a4a35;
  text-align: center;
}
.ss-jew-meta a { color: #b88a6a; text-decoration: none; }
.ss-jew-meta a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .ss-jew { grid-template-columns: 1fr; }
  .ss-jew-brand { padding: 36px 28px; }
}
```

### 10. Before/After Slider

**Type:** Light JS
**Description:** Skincare brand before/after — clinical white + millennial pink + sage green. Drag the native <code>&lt;input type="range"&gt;</code> to wipe between two states. Pure CSS via <code>:has()</code> on the input value (modern browsers); falls back to a clean static split otherwise.

**HTML:**
```html
<section class="ss-bef" aria-label="Before and after skincare result">
  <div class="ss-bef-stage" style="--reveal: 50%">
    <div class="ss-bef-after" aria-hidden="true">
      <span class="ss-bef-label">AFTER</span>
      <span class="ss-bef-face ss-bef-face-after"></span>
    </div>
    <div class="ss-bef-before" aria-hidden="true">
      <span class="ss-bef-label">BEFORE</span>
      <span class="ss-bef-face ss-bef-face-before"></span>
    </div>
    <span class="ss-bef-handle" aria-hidden="true"> <span></span><span></span> </span>
  </div>
  <article class="ss-bef-content">
    <span class="ss-bef-eye">— Real client · 12 weeks</span>
    <h2>Quiet skin,<br /><em>loud confidence.</em></h2>
    <p>
      Drag the slider to see the result of our 12-week ritual: gentle exfoliation, daily SPF, and
      the Oat Renewal serum.
    </p>
    <label class="ss-bef-control">
      <span>Reveal</span>
      <input type="range" min="0" max="100" value="50" id="ss-bef-r" aria-label="Reveal amount" />
    </label>
    <ul class="ss-bef-stats">
      <li><strong>92%</strong> reduced redness</li>
      <li><strong>87%</strong> smoother texture</li>
      <li><strong>4.9★</strong> average rating</li>
    </ul>
    <button type="button" class="ss-bef-cta">Start the ritual →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-bef {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fff;
  color: #2a2a2a;
  border-radius: 0; overflow: hidden;
}
.ss-bef-stage {
  position: relative;
  background: #f7f3ee;
  overflow: hidden;
  isolation: isolate;
  --reveal: 50%;
}
.ss-bef-stage:has(#ss-bef-r) {
  --reveal: calc(var(--ss-bef-pct, 50) * 1%);
}
.ss-bef-after, .ss-bef-before {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.ss-bef-after {
  background: linear-gradient(135deg, #ffe0e6 0%, #ffd0db 100%);
}
.ss-bef-before {
  background: linear-gradient(135deg, #efe2d4 0%, #d4c4ae 100%);
  clip-path: inset(0 0 0 var(--reveal));
}
.ss-bef-label {
  position: absolute; top: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3em;
  padding: 5px 12px;
  background: rgba(255,255,255,0.92);
  color: #2a2a2a;
}
.ss-bef-after .ss-bef-label { right: 18px; color: #c41560; }
.ss-bef-before .ss-bef-label { left: 18px; color: #5a3825; }
.ss-bef-face {
  width: 200px; height: 240px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: relative;
}
.ss-bef-face-after {
  background: linear-gradient(180deg, #f8d4c8 0%, #e8b4a8 100%);
  box-shadow: 0 14px 40px rgba(196,21,96,0.18), inset -10px -20px 40px rgba(196,21,96,0.08);
}
.ss-bef-face-before {
  background: linear-gradient(180deg, #d8a888 0%, #c08868 100%);
  box-shadow: inset -10px -20px 40px rgba(0,0,0,0.18);
}
.ss-bef-face-before::before, .ss-bef-face-before::after {
  content: ''; position: absolute;
  background: rgba(196,90,28,0.4);
  border-radius: 50%;
}
.ss-bef-face-before::before { top: 30%; left: 25%; width: 12px; height: 12px; box-shadow: 14px 6px 0 -2px rgba(196,90,28,0.3), -8px 18px 0 -3px rgba(196,90,28,0.35), 26px 22px 0 -4px rgba(196,90,28,0.3); }
.ss-bef-face-before::after { top: 50%; right: 22%; width: 10px; height: 10px; box-shadow: -8px 6px 0 -2px rgba(196,90,28,0.3), 4px 14px 0 -3px rgba(196,90,28,0.4); }
.ss-bef-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--reveal);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 18px rgba(196,21,96,0.45);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 5;
}
.ss-bef-handle span:nth-child(1), .ss-bef-handle span:nth-child(2) {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-bef-handle span:nth-child(1) { right: 18px; }
.ss-bef-handle span:nth-child(2) { left: 18px; }
.ss-bef-handle span:nth-child(1)::before, .ss-bef-handle span:nth-child(2)::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: solid #c41560; border-width: 2px 2px 0 0;
  width: 8px; height: 8px;
}
.ss-bef-handle span:nth-child(1)::before { transform: translate(-25%, -50%) rotate(45deg); }
.ss-bef-handle span:nth-child(2)::before { transform: translate(-75%, -50%) rotate(-135deg); }
.ss-bef-content {
  padding: 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
}
.ss-bef-eye {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-content h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: #2a2a2a;
}
.ss-bef-content h2 em {
  font-style: italic;
  color: #c41560;
}
.ss-bef-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5a5a5a;
  max-width: 420px;
}
.ss-bef-control {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.ss-bef-control span {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-bef-control input[type="range"] {
  width: 100%;
  accent-color: #c41560;
}
.ss-bef-stats { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; gap: 22px; font-size: 13px; flex-wrap: wrap; }
.ss-bef-stats li { display: flex; flex-direction: column; gap: 2px; }
.ss-bef-stats strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 500;
  color: #c41560;
  font-style: italic;
}
.ss-bef-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #c41560;
  color: #fff;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(196,21,96,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
}
.ss-bef-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196,21,96,0.45); }
@media (max-width: 720px) {
  .ss-bef { grid-template-columns: 1fr; }
  .ss-bef-stage { min-height: 320px; }
}
```

**JS:**
```js
/* Wire the range input to the CSS custom property so the slider drives
   the clip-path reveal. Pure CSS would be possible via :has() but value-
   reading from CSS isn't supported widely yet; this 5-line script is the
   reliable cross-browser path. */
(function () {
  var slider = document.getElementById('ss-bef-r');
  var stage  = slider && slider.closest('.ss-bef').querySelector('.ss-bef-stage');
  if (!slider || !stage) return;
  function sync() { stage.style.setProperty('--ss-bef-pct', slider.value); }
  slider.addEventListener('input', sync);
  sync();
})();
```

### 11. Two Seasons

**Type:** Pure CSS
**Description:** Two seasons of fashion — autumn (rust + ochre + olive) on one side, winter (steel + cobalt + ash) on the other. Click either label to slide the other half open. Pure CSS via radio inputs + sibling selectors; no JS.

**HTML:**
```html
<section class="ss-szn" aria-label="Seasonal lookbook split">
  <input id="ss-szn-a" type="radio" name="ss-szn" checked />
  <input id="ss-szn-w" type="radio" name="ss-szn" />
  <article class="ss-szn-fall">
    <span class="ss-szn-tag">FW · Autumn</span>
    <h2>Burnt &amp;<br />Bronzed.</h2>
    <p>
      Wool tweeds, raw selvedge denim, oxblood leather. The fall capsule, hand-finished in our
      atelier.
    </p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Camel coat</li>
      <li><b>02</b> Rust knit</li>
      <li><b>03</b> Olive trouser</li>
    </ul>
    <label for="ss-szn-w" class="ss-szn-switch">View Winter capsule →</label>
  </article>
  <article class="ss-szn-winter">
    <span class="ss-szn-tag">SS · Winter</span>
    <h2>Cold &amp;<br />Quiet.</h2>
    <p>
      Cashmere knits, double-faced wool coats, alpine boots. The winter capsule, made for stillness.
    </p>
    <ul class="ss-szn-pieces">
      <li><b>01</b> Storm coat</li>
      <li><b>02</b> Steel knit</li>
      <li><b>03</b> Snow boot</li>
    </ul>
    <label for="ss-szn-a" class="ss-szn-switch">← Back to Autumn</label>
  </article>
</section>
```

**CSS:**
```css
.ss-szn {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
  transition: grid-template-columns 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-szn:has(#ss-szn-a:checked) { grid-template-columns: 65% 35%; }
.ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 35% 65%; }
.ss-szn input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-szn-fall, .ss-szn-winter {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
  position: relative;
  transition: opacity 0.4s ease;
}
.ss-szn-fall {
  background:
    radial-gradient(60% 80% at 30% 30%, #d97a3c 0%, transparent 60%),
    linear-gradient(180deg, #6e3825 0%, #2a1810 100%);
  color: #f5e6c8;
}
.ss-szn-fall::before {
  content: ''; position: absolute; top: -10%; right: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(255,180,80,0.4), transparent 70%);
  filter: blur(40px);
}
.ss-szn-winter {
  background:
    radial-gradient(60% 80% at 70% 70%, #4a6a8a 0%, transparent 60%),
    linear-gradient(180deg, #1a2838 0%, #0e1620 100%);
  color: #d4dce4;
}
.ss-szn-winter::before {
  content: ''; position: absolute; bottom: -10%; left: -10%;
  width: 40%; height: 50%;
  background: radial-gradient(circle, rgba(180,200,240,0.3), transparent 70%);
  filter: blur(40px);
}
.ss-szn-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  align-self: flex-start;
  padding: 6px 12px;
  border: 1px solid currentColor;
}
.ss-szn-fall   .ss-szn-tag { color: #ffd400; }
.ss-szn-winter .ss-szn-tag { color: #8ac4ff; }
.ss-szn-fall h2, .ss-szn-winter h2 {
  margin: 6px 0 0;
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-szn-fall p, .ss-szn-winter p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 360px;
  opacity: 0.85;
}
.ss-szn-pieces { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; display: flex; flex-direction: column; gap: 6px; }
.ss-szn-pieces li {
  display: flex; align-items: baseline; gap: 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
}
.ss-szn-pieces b {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em;
  font-style: normal;
}
.ss-szn-fall .ss-szn-pieces b   { color: #ffd400; }
.ss-szn-winter .ss-szn-pieces b { color: #8ac4ff; }
.ss-szn-switch {
  align-self: flex-start;
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid currentColor;
  background: transparent;
  transition: background 0.16s, color 0.16s;
}
.ss-szn-fall   .ss-szn-switch:hover { background: #ffd400; color: #2a1810; border-color: #ffd400; }
.ss-szn-winter .ss-szn-switch:hover { background: #8ac4ff; color: #0e1620; border-color: #8ac4ff; }
.ss-szn:has(#ss-szn-w:checked) .ss-szn-fall   { opacity: 0.6; }
.ss-szn:has(#ss-szn-a:checked) .ss-szn-winter { opacity: 0.6; }
@media (max-width: 720px) {
  .ss-szn, .ss-szn:has(#ss-szn-a:checked), .ss-szn:has(#ss-szn-w:checked) { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ss-szn { transition: none; } }
```

### 12. Music App Toggle

**Type:** Pure CSS
**Description:** Music app — deep purple + neon mint + black vinyl. Toggle between equal-split (album list) and focus-mode (now playing dominates). Hidden checkbox + <code>:has(:checked)</code> on the grid template; everything else is CSS.

**HTML:**
```html
<section class="ss-mus" aria-label="Music player split">
  <input id="ss-mus-t" type="checkbox" />
  <article class="ss-mus-list" aria-label="Album list">
    <header>
      <h3>Library</h3>
      <label for="ss-mus-t" class="ss-mus-toggle" aria-controls="ss-mus-now">⇋ Focus</label>
    </header>
    <ul>
      <li class="active">
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #7c3aed, #ec4899)"
        ></span>
        <div><strong>Midnight Drive</strong><em>Aurelia · Side A</em></div>
        <span class="ss-mus-time">3:42</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #0ea5e9, #22d3ee)"
        ></span>
        <div><strong>Glass Hearts</strong><em>Aurelia · Side B</em></div>
        <span class="ss-mus-time">4:18</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #f59e0b, #ef4444)"
        ></span>
        <div><strong>Cherry Static</strong><em>Various</em></div>
        <span class="ss-mus-time">2:54</span>
      </li>
      <li>
        <span
          class="ss-mus-cover"
          style="background: linear-gradient(135deg, #10b981, #84cc16)"
        ></span>
        <div><strong>Forest Floor</strong><em>Aurelia</em></div>
        <span class="ss-mus-time">5:02</span>
      </li>
    </ul>
  </article>
  <article class="ss-mus-now" id="ss-mus-now" aria-label="Now playing">
    <div class="ss-mus-vinyl" aria-hidden="true">
      <span class="ss-mus-disc"></span>
      <span class="ss-mus-hole"></span>
    </div>
    <div class="ss-mus-meta">
      <span class="ss-mus-eye">▸ NOW PLAYING</span>
      <h2>Midnight<br />Drive.</h2>
      <p class="ss-mus-sub">Aurelia · Side A · Track 03</p>
      <div
        class="ss-mus-bar"
        aria-label="Track progress"
        role="progressbar"
        aria-valuenow="42"
        aria-valuemin="0"
        aria-valuemax="100"
      >
        <span style="width: 42%"></span>
      </div>
      <div class="ss-mus-times"><span>1:33</span><span>3:42</span></div>
      <div class="ss-mus-ctrl">
        <button type="button" aria-label="Previous">⏮</button>
        <button type="button" aria-label="Play" class="ss-mus-play">▶</button>
        <button type="button" aria-label="Next">⏭</button>
      </div>
    </div>
  </article>
</section>
```

**CSS:**
```css
.ss-mus {
  position: relative;
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #0e0a1f;
  color: #e6e0ff;
  border-radius: 0; overflow: hidden;
  transition: grid-template-columns 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.ss-mus:has(input:checked) { grid-template-columns: 30% 70%; }
.ss-mus input { position: absolute; width: 1px; height: 1px; opacity: 0; clip: rect(0 0 0 0); }
.ss-mus-list {
  background: #15102a;
  padding: 30px 24px;
  display: flex; flex-direction: column; gap: 16px;
  border-right: 1px solid rgba(74,222,128,0.25);
  overflow-y: auto;
}
.ss-mus-list header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ss-mus-list h3 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4ade80;
}
.ss-mus-toggle {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 10px;
  background: rgba(74,222,128,0.12);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-toggle:hover { background: rgba(74,222,128,0.24); }
.ss-mus-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-mus-list li {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-mus-list li:hover { background: rgba(255,255,255,0.04); }
.ss-mus-list li.active { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); padding: 9px; }
.ss-mus-cover {
  width: 38px; height: 38px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ss-mus-list strong { display: block; font-size: 13.5px; font-weight: 700; color: #f0eaff; }
.ss-mus-list em { display: block; font-size: 11px; font-style: normal; color: #8a7fb0; margin-top: 2px; }
.ss-mus-time { font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-now {
  background:
    radial-gradient(60% 80% at 70% 30%, rgba(124,58,237,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 30% 70%, rgba(74,222,128,0.18) 0%, transparent 60%),
    #0e0a1f;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}
.ss-mus-vinyl {
  position: relative;
  width: 200px; height: 200px;
  flex-shrink: 0;
}
.ss-mus-disc {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px),
    radial-gradient(circle at 50% 50%, #ec4899 0%, #ec4899 14%, #0a0a0a 14%, #0a0a0a 100%);
  box-shadow:
    inset 0 0 0 14px #1a1a1a,
    0 14px 40px rgba(0,0,0,0.6);
  animation: ss-mus-spin 8s linear infinite;
}
.ss-mus-hole {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #0e0a1f;
  box-shadow: 0 0 0 3px #4ade80;
}
@keyframes ss-mus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-mus-disc { animation: none; } }
.ss-mus-meta { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ss-mus-eye {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #4ade80;
  text-shadow: 0 0 12px rgba(74,222,128,0.4);
}
.ss-mus-meta h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f0eaff;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-mus-sub { margin: 0; font-size: 13px; color: #a89cc8; letter-spacing: 0.04em; }
.ss-mus-bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.ss-mus-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #4ade80 0%, #ec4899 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(74,222,128,0.5);
}
.ss-mus-times { display: flex; justify-content: space-between; font-family: 'Courier New', monospace; font-size: 11px; color: #8a7fb0; }
.ss-mus-ctrl { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.ss-mus-ctrl button {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #f0eaff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.ss-mus-ctrl button:hover { background: rgba(255,255,255,0.06); border-color: #4ade80; color: #4ade80; }
.ss-mus-play {
  width: 52px !important; height: 52px !important;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
  color: #0e0a1f !important;
  border: 0 !important;
  font-size: 16px !important;
  box-shadow: 0 8px 22px rgba(74,222,128,0.45) !important;
}
.ss-mus-play:hover { transform: scale(1.05); }
@media (max-width: 720px) {
  .ss-mus, .ss-mus:has(input:checked) { grid-template-columns: 1fr; }
  .ss-mus-now { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
```

### 13. Real-estate Compare

**Type:** Pure CSS
**Description:** Compare two properties — terracotta + olive + warm beige. Two cards side by side, each with hero number, key stats, and price. Hover any side to scale up; the other dims subtly. CSS transform + opacity transitions.

**HTML:**
```html
<section class="ss-est" aria-label="Property comparison">
  <article class="ss-est-card ss-est-warm">
    <header>
      <span class="ss-est-tag">FOR SALE · Verified</span>
      <h3>Casa Sol</h3>
      <p>Mid-century courtyard home, walking distance to the village.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt>
      <dd>4</dd>
      <dt>Baths</dt>
      <dd>3</dd>
      <dt>Sq m</dt>
      <dd>240</dd>
      <dt>Built</dt>
      <dd>1958</dd>
    </dl>
    <footer>
      <strong>€840,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
  <article class="ss-est-card ss-est-cool">
    <header>
      <span class="ss-est-tag">FOR SALE · New listing</span>
      <h3>Casa Verde</h3>
      <p>Modern earth-tone build with garden views and original olive trees.</p>
    </header>
    <div class="ss-est-photo" aria-hidden="true">
      <span class="ss-est-house ss-est-house-2"></span>
      <span class="ss-est-tree"></span>
      <span class="ss-est-tree2"></span>
    </div>
    <dl class="ss-est-stats">
      <dt>Beds</dt>
      <dd>3</dd>
      <dt>Baths</dt>
      <dd>2</dd>
      <dt>Sq m</dt>
      <dd>185</dd>
      <dt>Built</dt>
      <dd>2022</dd>
    </dl>
    <footer>
      <strong>€720,000</strong>
      <button type="button">Schedule tour →</button>
    </footer>
  </article>
</section>
```

**CSS:**
```css
.ss-est {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  gap: 0;
  background: #efe7d4;
  border-radius: 0; overflow: hidden;
}
.ss-est-card {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform 0.32s ease, opacity 0.32s ease;
  isolation: isolate;
}
.ss-est-warm { background: linear-gradient(180deg, #d97a3c 0%, #b85a2c 100%); color: #fff8e8; border-right: 1px solid rgba(0,0,0,0.18); }
.ss-est-cool { background: linear-gradient(180deg, #6e7a3c 0%, #4a5a25 100%); color: #f4ecd0; }
.ss-est:has(.ss-est-warm:hover) .ss-est-cool,
.ss-est:has(.ss-est-cool:hover) .ss-est-warm { opacity: 0.6; }
.ss-est-card:hover { transform: scale(1.02); z-index: 2; }
.ss-est-tag {
  font-family: 'Courier New', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,0,0,0.18);
}
.ss-est-card h3 {
  margin: 6px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-est-card header p {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 280px;
}
.ss-est-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.ss-est-house {
  position: absolute; bottom: 12%; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 50%;
  background: linear-gradient(180deg, #f5e6c8 0%, #d4c598 100%);
  border-bottom: 4px solid rgba(0,0,0,0.3);
}
.ss-est-house::before {
  content: ''; position: absolute; left: -8%; right: -8%; top: -22%;
  height: 28%;
  background: #6e1f1c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.ss-est-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 18%; height: 50%;
  background: #2a1810;
}
.ss-est-house-2 {
  background: linear-gradient(180deg, #d8d0b8 0%, #a8a088 100%);
}
.ss-est-house-2::before {
  background: #2a3325;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  height: 14%;
  top: -14%;
}
.ss-est-tree, .ss-est-tree2 {
  position: absolute; bottom: 12%;
  width: 40px; height: 60px;
  background: radial-gradient(circle at 50% 30%, #4a6a25 0%, #2a3a18 100%);
  border-radius: 50%;
}
.ss-est-tree { left: 8%; }
.ss-est-tree2 { right: 8%; bottom: 14%; width: 50px; height: 50px; }
.ss-est-stats {
  margin: 0; padding: 14px 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.ss-est-stats dt {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.6;
}
.ss-est-stats dd {
  margin: 2px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
}
.ss-est-card footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
}
.ss-est-card footer strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px; font-weight: 500;
  letter-spacing: -0.01em;
}
.ss-est-card footer button {
  padding: 11px 18px;
  background: rgba(0,0,0,0.25);
  color: inherit;
  border: 1px solid rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.14s;
}
.ss-est-card footer button:hover { background: rgba(0,0,0,0.45); }
@media (max-width: 720px) {
  .ss-est { grid-template-columns: 1fr; }
  .ss-est-warm { border-right: 0; border-bottom: 1px solid rgba(0,0,0,0.18); }
  .ss-est-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-est-card { transition: none; }
}
```

### 14. Detective Novel

**Type:** Pure CSS
**Description:** Detective novel cover — burnt orange + ink black + parchment cream. A diagonal mask wipes between the cover image and a synopsis on hover. Mystery noir aesthetic with serif type, thin gold rules, and a deliberately distressed paper texture.

**HTML:**
```html
<section class="ss-det" aria-label="Detective novel feature">
  <article class="ss-det-cover">
    <div class="ss-det-image" aria-hidden="true">
      <span class="ss-det-silhouette"></span>
      <span class="ss-det-light"></span>
      <span class="ss-det-rain"></span>
    </div>
    <div class="ss-det-overlay">
      <span class="ss-det-genre">A NEW DETECTIVE NOVEL</span>
      <h2>The<br /><em>Last</em><br />Train.</h2>
      <span class="ss-det-author">by Iris Hawthorne</span>
    </div>
  </article>
  <article class="ss-det-blurb">
    <span class="ss-det-folio">PAGE I · CHAPTER ONE</span>
    <p class="ss-det-quote">
      "It rained the night Dr. Morrow disappeared, and the only witness was a stationmaster who
      hadn't slept in three days."
    </p>
    <p class="ss-det-body">
      A woman searches for her vanished mentor through the rain-soaked streets of a coastal town
      that doesn't want her there.
    </p>
    <ul class="ss-det-list">
      <li>★★★★★ <em>The Times</em></li>
      <li>★★★★★ <em>Le Monde</em></li>
      <li>★★★★☆ <em>Hawthorne Review</em></li>
    </ul>
    <button type="button" class="ss-det-cta">Read first chapter →</button>
  </article>
</section>
```

**CSS:**
```css
.ss-det {
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f0e6d0;
  color: #1a0e08;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a0e08;
}
.ss-det-cover {
  position: relative;
  background:
    radial-gradient(80% 80% at 50% 30%, #c45a1c 0%, #6e1f0c 60%, #1a0a06 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid #1a0e08;
}
.ss-det-image { position: absolute; inset: 0; pointer-events: none; }
.ss-det-silhouette {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 240px;
  background:
    radial-gradient(ellipse at 50% 14%, #1a0a06 0%, #1a0a06 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a0a06 8%, #1a0a06 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-det-light {
  position: absolute; top: 0; right: 12%;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.32), transparent 70%);
  filter: blur(8px);
}
.ss-det-rain {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(78deg, transparent 0 22px, rgba(255,255,255,0.12) 22px 23px);
  animation: ss-det-rain 0.6s linear infinite;
}
@keyframes ss-det-rain {
  from { background-position: 0 0; }
  to   { background-position: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .ss-det-rain { animation: none; } }
.ss-det-overlay { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.ss-det-genre {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.32em;
  color: #f5d68a;
  align-self: flex-start;
  padding: 5px 10px;
  border: 1px solid #f5d68a;
  background: rgba(0,0,0,0.4);
}
.ss-det-cover h2 {
  margin: auto 0;
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 500;
  line-height: 0.86;
  color: #f0e6d0;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.ss-det-cover h2 em {
  font-style: italic;
  color: #f5d68a;
  font-family: 'Cormorant Garamond', serif;
  display: inline-block;
}
.ss-det-author {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-style: italic;
  color: #f0e6d0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  margin-top: auto;
}
.ss-det-blurb {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.04) 32px 33px),
    #f0e6d0;
}
.ss-det-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e1f0c;
}
.ss-det-quote {
  margin: 6px 0 0;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.4;
  color: #1a0e08;
  font-style: italic;
  border-left: 3px solid #c45a1c;
  padding-left: 16px;
}
.ss-det-body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4a3825;
  max-width: 440px;
}
.ss-det-list { list-style: none; margin: auto 0 0; padding: 14px 0; border-top: 1.5px solid #c45a1c; border-bottom: 1.5px solid #c45a1c; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #1a0e08; font-family: 'Inter', sans-serif; }
.ss-det-list li { display: flex; align-items: baseline; justify-content: space-between; }
.ss-det-list em { font-style: italic; color: #6e1f0c; font-family: 'Cormorant Garamond', serif; font-size: 16px; }
.ss-det-cta {
  align-self: flex-start;
  padding: 14px 24px;
  background: #1a0e08;
  color: #f5d68a;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-det-cta:hover { background: #6e1f0c; }
@media (max-width: 720px) {
  .ss-det { grid-template-columns: 1fr; }
  .ss-det-cover { border-right: 0; border-bottom: 1px solid #1a0e08; min-height: 360px; }
}
```

### 15. Mediterranean Travel

**Type:** Pure CSS
**Description:** Travel agency hero — Mediterranean blue + ochre + white limewash. Parallax-feel split with layered cliff/sea/sun shapes on one side and a destination card on the other. Pure CSS animations drift the sun and sea slowly.

**HTML:**
```html
<section class="ss-trv" aria-label="Mediterranean travel destination">
  <aside class="ss-trv-scene" aria-hidden="true">
    <span class="ss-trv-sky"></span>
    <span class="ss-trv-sun"></span>
    <span class="ss-trv-sea"></span>
    <span class="ss-trv-cliff"></span>
    <span class="ss-trv-house"></span>
    <span class="ss-trv-house ss-trv-house-2"></span>
  </aside>
  <article class="ss-trv-card">
    <span class="ss-trv-tag">Greece · Cyclades</span>
    <h2>Folegandros<br /><em>in May.</em></h2>
    <p>
      Five days. One villa. Local meals at the kafenio. White-washed walls and a sea you'll never
      quite forget. Limited to 8 guests per departure.
    </p>
    <dl class="ss-trv-info">
      <dt>Departure</dt>
      <dd>14 — 19 May</dd>
      <dt>Group size</dt>
      <dd>8 guests</dd>
      <dt>Includes</dt>
      <dd>Villa, breakfasts, ferry</dd>
      <dt>From</dt>
      <dd>€2,400 / guest</dd>
    </dl>
    <button type="button" class="ss-trv-cta">Reserve a spot</button>
  </article>
</section>
```

**CSS:**
```css
.ss-trv {
  display: grid; grid-template-columns: 55% 45%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f4ede0;
  color: #1a3a4a;
  border-radius: 0; overflow: hidden;
}
.ss-trv-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ss-trv-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #c4e4f0 0%, #a4d4e8 50%, #5a8fa8 100%);
}
.ss-trv-sun {
  position: absolute; top: 18%; left: 22%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d8 0%, #ffd479 50%, #f5a623 100%);
  box-shadow: 0 0 80px rgba(255,212,121,0.6);
  animation: ss-trv-sun 22s ease-in-out infinite alternate;
}
@keyframes ss-trv-sun {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}
.ss-trv-sea {
  position: absolute; left: -10%; right: -10%; bottom: 0;
  height: 50%;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255,255,255,0.18) 4px 5px),
    linear-gradient(180deg, #2c8cc4 0%, #1a5a8c 100%);
  border-top-left-radius: 50% 22%;
  border-top-right-radius: 50% 22%;
  animation: ss-trv-sea 18s ease-in-out infinite alternate;
}
@keyframes ss-trv-sea {
  from { transform: translateX(-2%); }
  to   { transform: translateX(2%); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-trv-sun, .ss-trv-sea { animation: none; }
}
.ss-trv-cliff {
  position: absolute; left: 0; right: 0; bottom: 38%;
  height: 28%;
  background: linear-gradient(180deg, #f0e0c8 0%, #c8a878 100%);
  clip-path: polygon(0 60%, 28% 28%, 50% 50%, 78% 22%, 100% 50%, 100% 100%, 0 100%);
}
.ss-trv-house {
  position: absolute; bottom: 50%;
  width: 50px; height: 60px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.ss-trv-house::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -10px;
  height: 14px;
  background: #2c8cc4;
  border-radius: 50% 50% 0 0;
}
.ss-trv-house::after {
  content: ''; position: absolute; left: 30%; bottom: 0; width: 30%; height: 50%;
  background: #2c8cc4;
}
.ss-trv-house    { left: 38%; }
.ss-trv-house-2  { left: 56%; bottom: 56%; width: 38px; height: 48px; }
.ss-trv-card {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 100% 100%, rgba(245,166,35,0.1) 0%, transparent 70%),
    #fdf8eb;
  border-left: 1px solid rgba(0,0,0,0.06);
}
.ss-trv-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a1c;
}
.ss-trv-card h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.96;
  color: #1a3a4a;
  letter-spacing: -0.02em;
}
.ss-trv-card h2 em {
  font-style: italic;
  color: #2c8cc4;
}
.ss-trv-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #4a5a6a;
  max-width: 380px;
}
.ss-trv-info { margin: 0; padding: 16px 0; border-top: 1px solid #c8b896; border-bottom: 1px solid #c8b896; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; font-size: 14px; }
.ss-trv-info dt {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #8a6f4a;
  align-self: center;
}
.ss-trv-info dd {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: #1a3a4a;
}
.ss-trv-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #2c8cc4;
  color: #fff;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,196,0.35);
  transition: background 0.16s;
}
.ss-trv-cta:hover { background: #1a5a8c; }
@media (max-width: 720px) {
  .ss-trv { grid-template-columns: 1fr; }
  .ss-trv-scene { min-height: 280px; }
}
```

### 16. Glitch Arcade

**Type:** Pure CSS
**Description:** Cyber-arcade split — deep purple base with neon-green and magenta. Continuous glitch overlay shifts the colored layers in/out across the seam. Different from Tokyo Neon (sidebars): this is dystopian-arcade not tokyo-pop, dark green vs hot magenta.

**HTML:**
```html
<section class="ss-cyb" aria-label="Cyberpunk arcade split">
  <article class="ss-cyb-left">
    <span class="ss-cyb-glitch ss-cyb-glitch-l" aria-hidden="true"></span>
    <header>
      <span class="ss-cyb-coin">// LOAD &gt;&gt;</span>
      <h2 data-text="GHOST PROTOCOL">GHOST<br />PROTOCOL</h2>
    </header>
    <p>Free-to-play. Pay-to-survive.</p>
    <div class="ss-cyb-meter">
      <span>SYSTEM_INTEGRITY</span>
      <div class="ss-cyb-bar"><span class="ss-cyb-fill" style="width: 73%"></span></div>
      <em>73%</em>
    </div>
  </article>
  <article class="ss-cyb-right">
    <span class="ss-cyb-glitch ss-cyb-glitch-r" aria-hidden="true"></span>
    <ul class="ss-cyb-leader">
      <li><span>01</span><strong>RAVEN_Z</strong><b>9128</b></li>
      <li><span>02</span><strong>v0id_X</strong><b>8044</b></li>
      <li class="me"><span>03</span><strong>YOU</strong><b>7621</b></li>
      <li><span>04</span><strong>n3on_Q</strong><b>6890</b></li>
    </ul>
    <button type="button" class="ss-cyb-cta">/ ENTER /</button>
    <span class="ss-cyb-warn">⚠ HIGH RISK SECTOR</span>
  </article>
</section>
```

**CSS:**
```css
.ss-cyb {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 480px;
  font-family: 'Courier New', 'Helvetica Neue', sans-serif;
  background: #0a0014;
  color: #e8e0ff;
  border-radius: 0; overflow: hidden;
  isolation: isolate;
}
.ss-cyb::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}
.ss-cyb-left, .ss-cyb-right {
  position: relative;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 18px;
  isolation: isolate;
}
.ss-cyb-left {
  background:
    radial-gradient(70% 80% at 30% 30%, rgba(0,255,140,0.18) 0%, transparent 60%),
    linear-gradient(160deg, #1a0040 0%, #0a0014 100%);
  border-right: 2px solid #00ff8c;
  box-shadow: 12px 0 30px rgba(0,255,140,0.15);
}
.ss-cyb-right {
  background:
    radial-gradient(70% 80% at 70% 70%, rgba(255,0,170,0.18) 0%, transparent 60%),
    linear-gradient(200deg, #2a0044 0%, #0a0014 100%);
}
.ss-cyb-glitch {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,255,140,0.06) 8px 9px);
  animation: ss-cyb-jitter 2.4s steps(8) infinite;
  z-index: -1;
}
.ss-cyb-glitch-r {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,0,170,0.07) 8px 9px);
  animation-duration: 1.8s;
  animation-direction: reverse;
}
@keyframes ss-cyb-jitter {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) { .ss-cyb-glitch { animation: none; } }
.ss-cyb-coin {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: #00ff8c;
  text-shadow: 0 0 12px rgba(0,255,140,0.6);
}
.ss-cyb-left h2 {
  margin: 4px 0 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  line-height: 0.92;
  color: #fff;
  letter-spacing: -0.03em;
  font-style: italic;
  position: relative;
  text-shadow:
    -2px 0 0 #00ff8c,
    2px 0 0 #ff00aa,
    0 0 30px rgba(255,255,255,0.3);
}
.ss-cyb-left p {
  margin: 0;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.16em;
  color: #ff00aa;
  text-transform: uppercase;
}
.ss-cyb-meter {
  margin-top: auto;
  padding: 14px;
  background: rgba(0,255,140,0.06);
  border: 1px solid rgba(0,255,140,0.4);
  display: flex; flex-direction: column; gap: 6px;
}
.ss-cyb-meter span {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.22em;
  color: #00ff8c;
}
.ss-cyb-bar {
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,255,140,0.3);
}
.ss-cyb-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #00ff8c 0%, #ff00aa 100%);
  box-shadow: 0 0 12px #00ff8c;
}
.ss-cyb-meter em {
  align-self: flex-end;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 22px; font-weight: 900;
  font-style: italic;
  color: #00ff8c;
  text-shadow: 0 0 10px rgba(0,255,140,0.6);
}
.ss-cyb-leader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ss-cyb-leader li {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid rgba(255,0,170,0.2);
  background: rgba(0,0,0,0.3);
}
.ss-cyb-leader li.me { background: rgba(255,0,170,0.16); border-color: #ff00aa; box-shadow: 0 0 12px rgba(255,0,170,0.3); }
.ss-cyb-leader li span { font-size: 11px; font-weight: 800; color: #ff00aa; letter-spacing: 0.16em; }
.ss-cyb-leader li strong { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.08em; }
.ss-cyb-leader li b { font-family: 'Helvetica Neue', sans-serif; font-style: italic; font-weight: 800; color: #00ff8c; text-shadow: 0 0 8px rgba(0,255,140,0.5); }
.ss-cyb-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: #ff00aa;
  color: #0a0014;
  border: 0;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.18em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,0,170,0.5);
  transition: background 0.14s, transform 0.12s;
  font-style: italic;
}
.ss-cyb-cta:hover { background: #00ff8c; box-shadow: 0 0 24px rgba(0,255,140,0.5); }
.ss-cyb-cta:active { transform: scale(0.97); }
.ss-cyb-warn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  color: #ffd400;
  background: rgba(255,212,0,0.1);
  border: 1px dashed #ffd400;
  margin-top: auto;
}
@media (max-width: 720px) {
  .ss-cyb { grid-template-columns: 1fr; }
  .ss-cyb-left { border-right: 0; border-bottom: 2px solid #00ff8c; box-shadow: 0 12px 30px rgba(0,255,140,0.15); }
}
```

### 17. Coffee Origin Story

**Type:** Pure CSS
**Description:** Coffee origin story — kraft brown + cream + gold leaf. Two-column editorial: hero image map on the left, a numbered story of the bean's journey on the right. Real <code>&lt;ol&gt;</code> with custom counter styling.

**HTML:**
```html
<section class="ss-cof" aria-label="Coffee origin story">
  <aside class="ss-cof-map">
    <span class="ss-cof-eye">ORIGIN · COLOMBIA</span>
    <h2>From bean<br />to <em>brew.</em></h2>
    <div class="ss-cof-map-svg" aria-hidden="true">
      <span class="ss-cof-pin"></span>
      <span class="ss-cof-pin ss-cof-pin-2"></span>
      <span class="ss-cof-pin ss-cof-pin-3"></span>
      <span class="ss-cof-route"></span>
    </div>
    <ul class="ss-cof-meta">
      <li><strong>1,840m</strong> Altitude</li>
      <li><strong>Q-cup 88+</strong> Score</li>
      <li><strong>Caturra</strong> Varietal</li>
    </ul>
  </aside>
  <article class="ss-cof-story">
    <span class="ss-cof-folio">— Five steps to your cup</span>
    <ol>
      <li>
        <h3>Hand-picked at sunrise</h3>
        <p>
          Only the cherries that turn deep red on the tree. Picked between 5am and 9am, before the
          heat sets in.
        </p>
      </li>
      <li>
        <h3>Washed &amp; sun-dried</h3>
        <p>72 hours on raised beds. Daily turning by the same family of farmers since 1962.</p>
      </li>
      <li>
        <h3>Shipped in jute</h3>
        <p>Single-origin lots, no blending. From Pereira to our roastery in 18 days.</p>
      </li>
      <li>
        <h3>Slow-roasted weekly</h3>
        <p>Light medium, 14 minutes. We rest the beans 48 hours before grinding.</p>
      </li>
      <li>
        <h3>In your cup, today</h3>
        <p>Bright, clean, with notes of brown sugar and ripe peach.</p>
      </li>
    </ol>
  </article>
</section>
```

**CSS:**
```css
.ss-cof {
  display: grid; grid-template-columns: 40% 60%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #f5ecdc;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
}
.ss-cof-map {
  background: linear-gradient(180deg, #6e3818 0%, #3a1808 100%);
  color: #f5ecdc;
  padding: 40px 32px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  border-right: 1px solid #2a1810;
}
.ss-cof-eye {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #d4af37;
}
.ss-cof-map h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 0.94;
  color: #f5ecdc;
  letter-spacing: -0.02em;
}
.ss-cof-map h2 em {
  font-style: italic;
  color: #d4af37;
}
.ss-cof-map-svg {
  position: relative;
  flex: 1;
  min-height: 200px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(245,236,220,0.08) 0%, transparent 70%);
  border: 1px dashed rgba(212,175,55,0.4);
  margin-top: 12px;
}
.ss-cof-pin {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.25), 0 0 18px rgba(212,175,55,0.4);
}
.ss-cof-pin    { top: 22%; left: 32%; }
.ss-cof-pin-2  { top: 52%; left: 58%; width: 10px; height: 10px; }
.ss-cof-pin-3  { top: 78%; left: 24%; width: 12px; height: 12px; }
.ss-cof-route {
  position: absolute; top: 22%; left: 32%;
  width: 140px; height: 60%;
  border: 1.5px dashed #d4af37;
  border-color: transparent #d4af37 #d4af37 transparent;
  border-radius: 0 50% 50% 0 / 0 28% 28% 0;
  pointer-events: none;
}
.ss-cof-meta { list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid rgba(212,175,55,0.3); display: flex; flex-direction: column; gap: 8px; font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; color: #f5ecdc; }
.ss-cof-meta strong {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700;
  font-style: normal;
  color: #d4af37;
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.ss-cof-story {
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(110,30,30,0.03) 32px 33px),
    #faf3e2;
  overflow-y: auto;
}
.ss-cof-folio {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #6e3818;
  text-transform: uppercase;
}
.ss-cof-story ol { list-style: none; counter-reset: cof; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.ss-cof-story li {
  counter-increment: cof;
  padding-left: 60px;
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px dotted #c8b896;
}
.ss-cof-story li:last-child { border-bottom: 0; }
.ss-cof-story li::before {
  content: counter(cof, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 38px; font-weight: 500;
  font-style: italic;
  color: #d4af37;
  line-height: 1;
}
.ss-cof-story h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
  letter-spacing: -0.01em;
}
.ss-cof-story p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4a3825;
}
@media (max-width: 720px) {
  .ss-cof { grid-template-columns: 1fr; }
  .ss-cof-map { border-right: 0; border-bottom: 1px solid #2a1810; }
}
```

### 18. Quad Photo Split

**Type:** Pure CSS
**Description:** Photography portfolio quad split — charcoal frame with four photo accents (sage / clay / mustard / bone). Hover any tile to expand it; the others contract. CSS grid with <code>:has()</code> on the wrapper to drive the proportions.

**HTML:**
```html
<section class="ss-quad" aria-label="Photography portfolio quad">
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="1"
    style="--bg: linear-gradient(135deg, #7a8a6a 0%, #4a5a3a 100%)"
  >
    <span class="ss-quad-num">01</span>
    <h3>Field Notes</h3>
    <p>Coastal Oregon, autumn 2025</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="2"
    style="--bg: linear-gradient(135deg, #c45a3c 0%, #8a3818 100%)"
  >
    <span class="ss-quad-num">02</span>
    <h3>Clay Walls</h3>
    <p>Marrakech rooftops at noon</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="3"
    style="--bg: linear-gradient(135deg, #e8b04a 0%, #b8842a 100%)"
  >
    <span class="ss-quad-num">03</span>
    <h3>Yellow Hour</h3>
    <p>Tuscan vineyards in late September</p>
  </article>
  <article
    class="ss-quad-tile"
    tabindex="0"
    data-tile="4"
    style="--bg: linear-gradient(135deg, #e0d4c0 0%, #a89880 100%)"
  >
    <span class="ss-quad-num">04</span>
    <h3>Bone &amp; Stone</h3>
    <p>Atacama mineral landscapes</p>
  </article>
</section>
```

**CSS:**
```css
.ss-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #1a1a1a;
  gap: 2px;
  border-radius: 0; overflow: hidden;
  border: 2px solid #1a1a1a;
}
.ss-quad-tile {
  position: relative;
  background: var(--bg);
  padding: 28px 28px;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.32s ease, box-shadow 0.32s ease;
  isolation: isolate;
  overflow: hidden;
}
.ss-quad-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
  z-index: -1;
}
.ss-quad-tile:hover, .ss-quad-tile:focus-visible {
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  outline: none;
}
.ss-quad:has(.ss-quad-tile:hover) .ss-quad-tile:not(:hover),
.ss-quad:has(.ss-quad-tile:focus-visible) .ss-quad-tile:not(:focus-visible) {
  filter: grayscale(0.7) brightness(0.7);
}
.ss-quad-num {
  font-family: 'Courier New', monospace;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.6);
}
.ss-quad-tile h3 {
  margin: auto 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
}
.ss-quad-tile p {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.9;
}
@media (max-width: 720px) {
  .ss-quad { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-quad-tile { transition: none; }
}
```

### 19. Recipe Reveal

**Type:** Pure CSS
**Description:** Recipe book — terracotta + sage + butter yellow. Two halves: a recipe header on top, ingredients/method below. On smaller viewports the layout stacks; the right half "reveals" the method. Real <code>&lt;ul&gt;</code> + <code>&lt;ol&gt;</code> for ingredients and steps.

**HTML:**
```html
<section class="ss-rec" aria-label="Recipe split">
  <article class="ss-rec-hero">
    <span class="ss-rec-cat">— Sunday Lunch · Serves 4</span>
    <h2>Slow-roasted<br /><em>tomato</em> orzo.</h2>
    <p>One pan, four ingredients, ninety minutes. The kind of recipe that smells like home.</p>
    <div class="ss-rec-pill">
      <span><b>1h 30m</b><em>Total time</em></span>
      <span><b>Easy</b><em>Skill</em></span>
      <span><b>4 servings</b><em>Yield</em></span>
    </div>
    <button type="button" class="ss-rec-cta">Add to my book</button>
  </article>
  <aside class="ss-rec-method">
    <section class="ss-rec-ing">
      <h3>Ingredients</h3>
      <ul>
        <li><b>500g</b> Cherry tomatoes, on the vine</li>
        <li><b>250g</b> Orzo</li>
        <li><b>2 tbsp</b> Olive oil, plus more to finish</li>
        <li><b>1 tsp</b> Sea salt</li>
        <li><b>4</b> Garlic cloves, smashed</li>
      </ul>
    </section>
    <section class="ss-rec-steps">
      <h3>Method</h3>
      <ol>
        <li>Heat oven to 200°C. Spread tomatoes in a baking dish.</li>
        <li>Add olive oil, salt, garlic. Roast 60 minutes until burst.</li>
        <li>Cook orzo in salted water 8 min. Drain.</li>
        <li>Toss orzo through tomatoes. Finish with olive oil and basil.</li>
      </ol>
    </section>
  </aside>
</section>
```

**CSS:**
```css
.ss-rec {
  display: grid; grid-template-columns: 50% 50%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #fff8e8;
  color: #2a1810;
  border-radius: 0; overflow: hidden;
  border: 1px solid #2a1810;
}
.ss-rec-hero {
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    radial-gradient(60% 60% at 30% 30%, #ffe2c8 0%, transparent 60%),
    #fff1d4;
  border-right: 1px dashed #c45a3c;
  position: relative;
}
.ss-rec-hero::before {
  content: '';
  position: absolute; top: 24px; right: 24px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffaa44 0%, #c45a3c 70%, #8a3818 100%);
  box-shadow: 0 6px 18px rgba(196,90,60,0.4);
}
.ss-rec-cat {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #6a8a5a;
}
.ss-rec-hero h2 {
  margin: 4px 0 0;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a1810;
  letter-spacing: -0.02em;
}
.ss-rec-hero h2 em {
  font-style: italic;
  color: #c45a3c;
}
.ss-rec-hero p {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5a4a35;
  max-width: 380px;
}
.ss-rec-pill { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878; flex-wrap: wrap; }
.ss-rec-pill span { display: flex; flex-direction: column; }
.ss-rec-pill b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-pill em {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  font-style: normal;
  color: #6a8a5a;
}
.ss-rec-cta {
  align-self: flex-start;
  padding: 13px 22px;
  background: #6a8a5a;
  color: #fff8e8;
  border: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s;
}
.ss-rec-cta:hover { background: #4a6a3a; }
.ss-rec-method {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 22px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(196,90,60,0.04) 30px 31px),
    #fff8e8;
  overflow-y: auto;
}
.ss-rec-method h3 {
  margin: 0 0 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.24em;
  color: #c45a3c;
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px dashed #c8a878;
}
.ss-rec-ing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; }
.ss-rec-ing li {
  display: grid; grid-template-columns: 80px 1fr; gap: 14px;
  font-style: italic;
  color: #2a1810;
}
.ss-rec-ing b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: #6a8a5a;
  letter-spacing: 0.04em;
  align-self: center;
}
.ss-rec-steps ol { list-style: none; counter-reset: rec; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-rec-steps li {
  counter-increment: rec;
  padding-left: 38px;
  position: relative;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a3825;
}
.ss-rec-steps li::before {
  content: counter(rec);
  position: absolute; left: 0; top: -2px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #c45a3c;
  width: 28px; text-align: center;
  border-bottom: 1px solid #c45a3c;
}
@media (max-width: 720px) {
  .ss-rec { grid-template-columns: 1fr; }
  .ss-rec-hero { border-right: 0; border-bottom: 1px dashed #c45a3c; }
}
```

### 20. Pet Adoption Z

**Type:** Pure CSS
**Description:** Pet adoption — grass green + sky blue + sun yellow. Z-pattern: image left → text right → image right → text left, but expressed as a 2×2 grid that creates an interlocking flow. Friendly, optimistic, full of CSS-painted dog and cat illustrations.

**HTML:**
```html
<section class="ss-pet" aria-label="Pet adoption page">
  <article class="ss-pet-img ss-pet-cat" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
    </span>
    <span class="ss-pet-tag">MEET LUNA · 2 yrs</span>
  </article>
  <article class="ss-pet-text">
    <span class="ss-pet-eye-tag">FRIDAY ADOPTIONS</span>
    <h2>A good home<br />is one <em>nap</em><br />away.</h2>
    <p>
      22 cats and 14 dogs are waiting at Bramble Lane this weekend. Walk-ins welcome, no appointment
      needed.
    </p>
  </article>
  <article class="ss-pet-text ss-pet-text-2">
    <h3>How it works</h3>
    <ol>
      <li>Visit our shelter Sat / Sun, 10am — 4pm</li>
      <li>Spend an hour with a friend</li>
      <li>Take them home the same day</li>
    </ol>
    <button type="button" class="ss-pet-cta">Plan your visit →</button>
  </article>
  <article class="ss-pet-img ss-pet-dog" aria-hidden="true">
    <span class="ss-pet-creature">
      <span class="ss-pet-eye"></span>
      <span class="ss-pet-eye2"></span>
      <span class="ss-pet-nose"></span>
      <span class="ss-pet-tongue"></span>
    </span>
    <span class="ss-pet-tag">MEET KOJI · 3 yrs</span>
  </article>
</section>
```

**CSS:**
```css
.ss-pet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background: #fef7d4;
  border-radius: 0; overflow: hidden;
  gap: 0;
}
.ss-pet-img {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ss-pet-cat {
  background:
    radial-gradient(80% 80% at 30% 70%, #94c4ec 0%, #2a8cc4 100%);
}
.ss-pet-dog {
  background:
    radial-gradient(80% 80% at 70% 30%, #84d488 0%, #2c8c34 100%);
}
.ss-pet-creature {
  position: relative;
  width: 130px; height: 130px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.ss-pet-cat .ss-pet-creature::before, .ss-pet-cat .ss-pet-creature::after {
  content: ''; position: absolute; top: -22px; width: 0; height: 0;
  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-bottom: 36px solid #fff;
}
.ss-pet-cat .ss-pet-creature::before { left: 4px; transform: rotate(-12deg); }
.ss-pet-cat .ss-pet-creature::after  { right: 4px; transform: rotate(12deg); }
.ss-pet-dog .ss-pet-creature {
  background: linear-gradient(180deg, #d4a878 0%, #a87838 100%);
}
.ss-pet-dog .ss-pet-creature::before, .ss-pet-dog .ss-pet-creature::after {
  content: ''; position: absolute; top: 22px;
  width: 38px; height: 56px;
  background: linear-gradient(180deg, #b8884c 0%, #6e4818 100%);
  border-radius: 50%;
}
.ss-pet-dog .ss-pet-creature::before { left: -22px; transform: rotate(-22deg); }
.ss-pet-dog .ss-pet-creature::after  { right: -22px; transform: rotate(22deg); }
.ss-pet-eye, .ss-pet-eye2 {
  position: absolute; top: 36%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #2a2a2a;
}
.ss-pet-eye  { left: 28%; }
.ss-pet-eye2 { right: 28%; }
.ss-pet-nose {
  position: absolute; top: 52%; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 12px;
  border-radius: 50%;
  background: #c45a3c;
}
.ss-pet-cat .ss-pet-nose { background: #ec5a82; width: 12px; height: 8px; }
.ss-pet-tongue {
  position: absolute; top: 64%; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 14px;
  border-radius: 0 0 12px 12px;
  background: #ec5a82;
}
.ss-pet-tag {
  position: absolute; bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em;
  padding: 5px 11px;
  background: #fff;
  color: #2a2a2a;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ss-pet-text {
  padding: 36px 36px;
  display: flex; flex-direction: column; gap: 16px;
  background: #fef7d4;
  position: relative;
}
.ss-pet-text-2 { background: #fff8e8; }
.ss-pet-eye-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #c45a3c;
  align-self: flex-start;
}
.ss-pet-text h2 {
  margin: 4px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(34px, 5vw, 50px);
  font-weight: 500;
  line-height: 0.94;
  color: #2a3325;
  letter-spacing: -0.02em;
}
.ss-pet-text h2 em {
  font-style: italic;
  color: #2c8c34;
}
.ss-pet-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a4030;
  max-width: 360px;
}
.ss-pet-text h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  color: #2a3325;
  letter-spacing: -0.01em;
}
.ss-pet-text ol { list-style: none; counter-reset: pet; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-pet-text li {
  counter-increment: pet;
  padding-left: 36px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4030;
}
.ss-pet-text li::before {
  content: counter(pet);
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #ffe89a;
  color: #c45a3c;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #c45a3c;
}
.ss-pet-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 22px;
  background: #2c8c34;
  color: #fef7d4;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(44,140,52,0.35);
  transition: transform 0.12s, background 0.16s;
}
.ss-pet-cta:hover { background: #1a6a22; transform: translateY(-1px); }
@media (max-width: 720px) {
  .ss-pet { grid-template-columns: 1fr; grid-template-rows: repeat(4, auto); }
  .ss-pet-img { min-height: 240px; }
}
```

### 21. Magazine Crossover

**Type:** Pure CSS
**Description:** Editorial magazine spread — newspaper black on cream with a single spot color (cobalt blue). Oversized italic headline crosses the seam between two halves; pull-quote on the right intrudes into the left photo zone. The kind of layout you see on a New York Times Magazine longread.

**HTML:**
```html
<section class="ss-mag" aria-label="Editorial magazine spread">
  <article class="ss-mag-photo">
    <div class="ss-mag-image" aria-hidden="true">
      <span class="ss-mag-figure"></span>
      <span class="ss-mag-light"></span>
    </div>
    <span class="ss-mag-caption">Photo · Iris Hawthorne for The Quarterly</span>
  </article>
  <article class="ss-mag-text">
    <span class="ss-mag-section">SECTION 04 / ESSAY</span>
    <h2 class="ss-mag-head">
      The <em>quiet</em> art of<br />doing one thing<br />at a <em>time.</em>
    </h2>
    <span class="ss-mag-byline">By <b>Iris Hawthorne</b> · Spring 2026</span>
    <p class="ss-mag-lede">
      <span class="ss-mag-drop">A</span>fter a decade of optimizing every minute, the loneliest
      realization wasn't that I had no time. It was that I'd forgotten how to spend it. Three years
      ago I made a small commitment, and it changed everything I thought I knew about productivity.
    </p>
    <blockquote class="ss-mag-pull">
      "The thing about doing one thing at a time is that the thing finally gets your attention."
    </blockquote>
    <p class="ss-mag-out">What I learned was simpler than I expected — and harder to keep.</p>
    <ul class="ss-mag-meta">
      <li><b>12 min</b> read</li>
      <li><b>2,840</b> words</li>
      <li><b>Apr 14</b> issue</li>
    </ul>
  </article>
</section>
```

**CSS:**
```css
.ss-mag {
  display: grid; grid-template-columns: 42% 58%;
  min-height: 480px;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  background: #f4ede0;
  color: #1a1a1a;
  border-radius: 0; overflow: hidden;
  border: 1px solid #1a1a1a;
}
.ss-mag-photo {
  position: relative;
  background: linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 100%);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid #1a1a1a;
}
.ss-mag-image {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%);
  overflow: hidden;
  isolation: isolate;
}
.ss-mag-figure {
  position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 80%;
  background:
    radial-gradient(ellipse at 50% 12%, #c8a878 0%, #c8a878 8%, transparent 9%),
    linear-gradient(180deg, transparent 8%, #1a3658 8%, #1a3658 100%);
  clip-path: polygon(40% 0, 60% 0, 70% 16%, 80% 38%, 80% 100%, 20% 100%, 20% 38%, 30% 16%);
}
.ss-mag-light {
  position: absolute; top: -10%; right: -20%;
  width: 60%; height: 80%;
  background: radial-gradient(circle at 50% 0%, rgba(255,200,80,0.35), transparent 70%);
  filter: blur(8px);
}
.ss-mag-caption {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12px; font-style: italic;
  color: #c8a878;
}
.ss-mag-text {
  padding: 36px 40px;
  display: flex; flex-direction: column; gap: 18px;
  background:
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(0,0,0,0.018) 32px 33px),
    #f9f3e6;
  position: relative;
}
.ss-mag-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #1a3658;
}
.ss-mag-head {
  margin: 4px 0 0;
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.ss-mag-head em {
  font-style: italic;
  color: #1a3658;
}
.ss-mag-byline {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: #4a4a4a;
}
.ss-mag-byline b { color: #1a3658; font-weight: 700; }
.ss-mag-lede {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  line-height: 1.55;
  color: #1a1a1a;
  column-count: 2;
  column-gap: 24px;
  column-rule: 1px solid #c8a878;
}
.ss-mag-drop {
  font-family: 'Cormorant Garamond', serif;
  font-size: 64px;
  font-weight: 500;
  font-style: italic;
  line-height: 0.85;
  float: left;
  padding: 4px 8px 0 0;
  color: #1a3658;
}
.ss-mag-pull {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.4;
  color: #1a3658;
  font-style: italic;
  border-left: 4px solid #1a3658;
  padding: 0 0 0 18px;
  font-weight: 500;
}
.ss-mag-out {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
}
.ss-mag-meta {
  list-style: none; margin: 0; padding: 14px 0; border-top: 1px solid #c8a878; border-bottom: 1px solid #c8a878;
  display: flex; gap: 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #4a4a4a;
}
.ss-mag-meta b {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  margin-right: 4px;
}
@media (max-width: 720px) {
  .ss-mag { grid-template-columns: 1fr; }
  .ss-mag-photo { border-right: 0; border-bottom: 1px solid #1a1a1a; min-height: 280px; }
  /* .ss-mag-head no longer needs a mobile reset (no desktop overflow). */
  .ss-mag-lede { column-count: 1; }
}
```

### 22. 3D Perspective Keynote

**Type:** Pure CSS
**Description:** Tech keynote — deep navy + holographic gradient + chrome. Two halves tilted in 3D space via <code>perspective</code> + <code>rotateY</code>; left panel angles toward viewer, right panel angles away. The "Apple event slide" feel — premium, sleek, almost cinematic.

**HTML:**
```html
<section class="ss-key" aria-label="Tech keynote split">
  <span class="ss-key-stars" aria-hidden="true"></span>
  <article class="ss-key-left">
    <span class="ss-key-tag">v3 · MAY 2026</span>
    <h2><span class="ss-key-shine">Aurora.</span></h2>
    <p>
      The smallest, fastest, quietest dev environment we've ever shipped. Built for the way you
      actually code.
    </p>
    <ul class="ss-key-feat">
      <li><span>◉</span>0.3s cold start</li>
      <li><span>◉</span>Type-safe everywhere</li>
      <li><span>◉</span>One-click deploy</li>
    </ul>
    <button type="button" class="ss-key-cta">Watch the keynote →</button>
  </article>
  <article class="ss-key-right" aria-hidden="true">
    <div class="ss-key-card">
      <header>
        <span class="ss-key-dots"> <i></i><i></i><i></i> </span>
        <strong>~/aurora</strong>
      </header>
      <pre><code><span class="ss-key-c">// 0.3s cold start</span>
<span class="ss-key-k">import</span> { app } <span class="ss-key-k">from</span> <span class="ss-key-s">'aurora'</span>;
<span class="ss-key-k">const</span> server <span class="ss-key-o">=</span> <span class="ss-key-fn">app</span>();
<span class="ss-key-fn">server.listen</span>(<span class="ss-key-n">3000</span>);</code></pre>
      <footer>
        <span class="ss-key-stat"><b>0.3s</b><em>start</em></span>
        <span class="ss-key-stat"><b>4.2 MB</b><em>bundle</em></span>
        <span class="ss-key-stat"><b>99 ms</b><em>p99</em></span>
      </footer>
    </div>
    <span class="ss-key-glow"></span>
  </article>
</section>
```

**CSS:**
```css
.ss-key {
  position: relative;
  display: grid; grid-template-columns: 45% 55%;
  min-height: 480px;
  font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(80,40,180,0.4) 0%, transparent 60%),
    radial-gradient(60% 80% at 80% 80%, rgba(0,180,200,0.3) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a2a 0%, #050518 100%);
  color: #fff;
  border-radius: 0; overflow: hidden;
  perspective: 1400px;
  isolation: isolate;
}
.ss-key-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 14% 22%, #fff, transparent),
    radial-gradient(1px 1px at 38% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 73% 18%, #fff, transparent),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 64% 60%, #fff, transparent),
    radial-gradient(1px 1px at 12% 76%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 84% 78%, rgba(255,255,255,0.5), transparent);
  pointer-events: none;
  z-index: 0;
}
.ss-key-left {
  padding: 44px 36px 44px 44px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transform: rotateY(8deg) translateZ(20px);
  transform-origin: right center;
  z-index: 2;
}
.ss-key-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.24em;
  color: #00d4ff;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.4);
  border-radius: 12px;
}
.ss-key-left h2 {
  margin: 4px 0 0;
  font-size: clamp(60px, 9vw, 110px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #fff;
  font-style: italic;
}
.ss-key-shine {
  background: linear-gradient(90deg, #fff 0%, #c4b5fd 30%, #00d4ff 60%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ss-key-sweep 4s linear infinite;
}
@keyframes ss-key-sweep {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .ss-key-shine { animation: none; } }
.ss-key-left p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: #c8c4e0;
  max-width: 380px;
}
.ss-key-feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ss-key-feat li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px;
  color: #fff;
}
.ss-key-feat span { color: #00d4ff; font-size: 13px; text-shadow: 0 0 12px rgba(0,212,255,0.6); }
.ss-key-cta {
  align-self: flex-start;
  padding: 14px 26px;
  background: linear-gradient(135deg, #c4b5fd 0%, #00d4ff 100%);
  color: #050518;
  border: 0;
  border-radius: 28px;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,212,255,0.4);
  transition: transform 0.16s, box-shadow 0.16s;
}
.ss-key-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,212,255,0.55); }
.ss-key-right {
  position: relative;
  padding: 44px 32px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
  z-index: 1;
}
.ss-key-card {
  position: relative;
  width: 100%; max-width: 420px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%),
    #14143a;
  border: 1px solid rgba(196,181,253,0.3);
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,212,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: rotateY(-12deg) rotateX(4deg) translateZ(-20px);
  z-index: 2;
}
.ss-key-card header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ss-key-dots { display: inline-flex; gap: 6px; }
.ss-key-dots i {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.ss-key-dots i:nth-child(1) { background: #ff5f57; }
.ss-key-dots i:nth-child(2) { background: #febc2e; }
.ss-key-dots i:nth-child(3) { background: #28c840; }
.ss-key-card header strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #8a8ab8;
  font-weight: 500;
}
.ss-key-card pre {
  margin: 0;
  padding: 18px 22px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #fff;
}
.ss-key-c  { color: #6a6e96; font-style: italic; }
.ss-key-k  { color: #c4b5fd; font-weight: 600; }
.ss-key-s  { color: #fcd34d; }
.ss-key-o  { color: #ff52aa; }
.ss-key-fn { color: #00d4ff; }
.ss-key-n  { color: #a3e635; }
.ss-key-card footer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ss-key-stat {
  padding: 14px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 2px;
}
.ss-key-stat:last-child { border-right: 0; }
.ss-key-stat b {
  font-size: 18px; font-weight: 700;
  color: #00d4ff;
  letter-spacing: -0.02em;
}
.ss-key-stat em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a6e96;
}
.ss-key-glow {
  position: absolute;
  width: 60%; height: 80%;
  background: radial-gradient(circle, rgba(0,212,255,0.4), transparent 70%);
  filter: blur(60px);
  z-index: 0;
}
@media (max-width: 720px) {
  .ss-key { grid-template-columns: 1fr; perspective: none; }
  .ss-key-left, .ss-key-card { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-key-left, .ss-key-card { transform: none; }
}
```

---
## 22 CSS Stacked Card Designs

URL: https://codefronts.com/components/css-stacked-cards/
Description: 22 free CSS stacked-card designs — depth stacks, hover reveals, interactive selectors and 3D layouts with copy-paste HTML and CSS.
Demo count: 22

### 01. Classic Deck

**Type:** CSS + JS
**Description:** Brutalist memo deck — riso-red index cards on cream stock with chunky ink labels. Click anywhere to cycle the front card to the back.

**HTML:**
```html
<div class="scd-deck scd-cycle" tabindex="0">
  <div class="scd-deck__c" style="--i: 2">
    <span class="scd-deck__tag">MEMO 03</span>
    <h4>Notes</h4>
    <p>3 items</p>
  </div>
  <div class="scd-deck__c" style="--i: 1">
    <span class="scd-deck__tag">MEMO 02</span>
    <h4>Tasks</h4>
    <p>7 items</p>
  </div>
  <div class="scd-deck__c" style="--i: 0">
    <span class="scd-deck__tag">MEMO 01</span>
    <h4>Inbox</h4>
    <p>12 messages</p>
  </div>
</div>
```

**CSS:**
```css
.scd-deck {
  position: relative; width: 220px; height: 150px; margin: 0 auto;
  cursor: pointer;
}
.scd-deck__c {
  position: absolute; inset: 0;
  background: #f4ead0;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  border-radius: 4px; padding: 14px 16px;
  box-shadow: 6px 6px 0 #0a0a0a;
  transform: translate(calc(var(--i) * -10px), calc(var(--i) * -10px));
  z-index: calc(10 - var(--i));
  transition: transform .45s cubic-bezier(.3,1.2,.4,1), z-index 0s .22s;
}
.scd-deck__c:nth-child(1) { background: #ee3333; color: #f4ead0; }
.scd-deck__c:nth-child(2) { background: #f4ead0; }
.scd-deck__c:nth-child(3) { background: #1a1a1a; color: #f4ead0; }
.scd-deck__tag { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.18em; opacity: 0.7; }
.scd-deck__c h4 { margin: 6px 0 4px; font: 900 18px/1 system-ui, sans-serif; letter-spacing: -0.02em; }
.scd-deck__c p  { margin: 0; font: 12px/1 system-ui, sans-serif; opacity: 0.78; }
```

**JS:**
```js
/* Click-to-cycle: send the front card to the back of the deck. */
document.querySelectorAll('.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
```

### 02. Fan Spread

**Type:** CSS + JS
**Description:** Three tarot cards angled like a reading — aged parchment with midnight-blue backs and gold-foil arcana glyphs. Click to cycle.

**HTML:**
```html
<div class="scd-fan scd-cycle" tabindex="0">
  <div class="scd-fan__c" data-i="0" style="--i: 0">
    <span class="scd-fan__roman">XVII</span><span class="scd-fan__glyph">★</span
    ><span class="scd-fan__name">The Star</span>
  </div>
  <div class="scd-fan__c" data-i="1" style="--i: 1">
    <span class="scd-fan__roman">I</span><span class="scd-fan__glyph">☽</span
    ><span class="scd-fan__name">The Magician</span>
  </div>
  <div class="scd-fan__c" data-i="2" style="--i: 2">
    <span class="scd-fan__roman">XIX</span><span class="scd-fan__glyph">☉</span
    ><span class="scd-fan__name">The Sun</span>
  </div>
</div>
```

**CSS:**
```css
.scd-fan {
  position: relative; width: 240px; height: 180px; margin: 0 auto;
  cursor: pointer;
}
.scd-fan__c {
  position: absolute; left: 50%; top: 50%;
  width: 88px; height: 130px; margin: -65px 0 0 -44px;
  background: #e8d4a2; color: #1a1d4a;
  border: 1.5px solid #1a1d4a; border-radius: 8px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 8px 6px;
  box-shadow: 0 8px 18px -8px rgba(26,29,74,0.5), inset 0 0 0 4px #e8d4a2, inset 0 0 0 5px #d4a017;
  transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
  z-index: calc(10 - var(--i));
}
.scd-fan__roman { font: 700 10px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-fan__glyph { font-size: 36px; line-height: 1; color: #d4a017; }
.scd-fan__name { font: 700 9px/1 ui-serif, Georgia; letter-spacing: 0.04em; text-align: center; }
.scd-fan__c[data-i="0"] { transform: rotate(-14deg) translate(-52px, 6px); }
.scd-fan__c[data-i="1"] { transform: rotate(0deg) translateY(-10px); z-index: 12; }
.scd-fan__c[data-i="2"] { transform: rotate(14deg) translate(52px, 6px); }
```

**JS:**
```js
/* Click-to-cycle the fan: rotate cards through positions. */
document.querySelectorAll('.scd-fan.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.dataset.i || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.dataset.i = next;
      card.style.setProperty('--i', next);
    });
  });
});
```

### 03. Tilted Polaroids

**Type:** CSS + JS
**Description:** A pile of 35mm filmstrip negatives — sepia frames with sprocket holes and Kodachrome amber tones. Click to send the top frame to the bottom.

**HTML:**
```html
<div class="scd-tilt scd-cycle" tabindex="0">
  <div class="scd-tilt__c" style="--i: 0">
    <div class="scd-tilt__strip" style="--ph: linear-gradient(135deg, #fcb938, #704830)"></div>
    <span>22A · F1.4</span>
  </div>
  <div class="scd-tilt__c" style="--i: 1">
    <div class="scd-tilt__strip" style="--ph: linear-gradient(135deg, #704830, #3a2410)"></div>
    <span>23A · F2.8</span>
  </div>
  <div class="scd-tilt__c" style="--i: 2">
    <div class="scd-tilt__strip" style="--ph: linear-gradient(135deg, #fff8e7, #fcb938)"></div>
    <span>24A · F5.6</span>
  </div>
</div>
```

**CSS:**
```css
.scd-tilt {
  position: relative; width: 240px; height: 190px; margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer;
}
.scd-tilt__c {
  position: absolute;
  width: 116px; padding: 10px 8px 22px;
  background: #2a1d0e;
  border-radius: 2px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; gap: 6px;
  transform: translate(calc((var(--i) - 1) * 18px), calc(var(--i) * 6px)) rotate(calc((var(--i) - 1) * 9deg));
  z-index: calc(10 - var(--i));
  transition: transform .5s cubic-bezier(.3,1.2,.4,1), z-index 0s .25s;
  background-image:
    radial-gradient(circle 3px at 8px 8px,  #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 28px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 48px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 68px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 88px 8px, #fff8e7 99%, transparent 100%),
    radial-gradient(circle 3px at 108px 8px, #fff8e7 99%, transparent 100%);
  background-repeat: no-repeat;
}
.scd-tilt__strip {
  width: 100%; height: 86px; border-radius: 1px; margin-top: 8px;
  background: var(--ph);
  filter: sepia(0.4) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.scd-tilt__c span {
  font: 700 9px ui-monospace, monospace;
  color: #fcb938; text-align: center; letter-spacing: 0.16em;
}
```

**JS:**
```js
/* Click-to-cycle the filmstrip pile: front frame goes to the back. */
document.querySelectorAll('.scd-tilt.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
```

### 04. Staircase Bricks

**Type:** CSS + JS
**Description:** Subway-tile platform stack — white-tile bricks with a green metro stripe and station-style numbering. Click to rotate the bottom brick to the top.

**HTML:**
```html
<div class="scd-brick scd-cycle" tabindex="0">
  <div class="scd-brick__c" style="--i: 0"><span>Q1</span> Plan</div>
  <div class="scd-brick__c" style="--i: 1"><span>Q2</span> Build</div>
  <div class="scd-brick__c" style="--i: 2"><span>Q3</span> Ship</div>
  <div class="scd-brick__c" style="--i: 3"><span>Q4</span> Scale</div>
</div>
```

**CSS:**
```css
.scd-brick {
  position: relative; width: 240px; height: 200px; margin: 0 auto;
  cursor: pointer;
}
.scd-brick__c {
  position: absolute;
  width: 134px; height: 40px;
  background: #f0f0e8;
  color: #1a1a1a;
  border-radius: 2px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
  font: 700 12px system-ui, sans-serif;
  box-shadow:
    inset 0 -3px 0 #1d6b3a,
    inset 1px 1px 0 rgba(255,255,255,0.9),
    0 4px 0 #3d3d40,
    0 6px 14px -3px rgba(0,0,0,0.4);
  bottom: calc(var(--i) * 36px);
  left: calc(var(--i) * 26px);
  z-index: var(--i);
  transition: bottom .5s cubic-bezier(.3,1.2,.4,1), left .5s cubic-bezier(.3,1.2,.4,1);
}
.scd-brick__c span {
  background: #1d6b3a; color: #f0f0e8;
  font: 700 10px ui-monospace, monospace;
  padding: 3px 6px; border-radius: 2px; letter-spacing: 0.08em;
}
```

**JS:**
```js
/* Click-to-cycle the staircase: bottom brick rotates to top. */
document.querySelectorAll('.scd-brick.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
```

### 05. Perspective Deck

**Type:** CSS + JS
**Description:** Holographic trading cards with iridescent cyan→magenta sheen and pearl borders — click to send the front card receding into the back.

**HTML:**
```html
<div class="scd-persp scd-cycle" tabindex="0">
  <div class="scd-persp__c" style="--i: 3"><span>015</span></div>
  <div class="scd-persp__c" style="--i: 2"><span>014</span></div>
  <div class="scd-persp__c" style="--i: 1"><span>013</span></div>
  <div class="scd-persp__c" style="--i: 0"><span>012</span></div>
</div>
```

**CSS:**
```css
.scd-persp {
  position: relative; width: 220px; height: 170px; margin: 0 auto;
  perspective: 600px; transform-style: preserve-3d;
  cursor: pointer;
}
.scd-persp__c {
  position: absolute; left: 50%; top: 50%;
  width: 144px; height: 96px; margin: -48px 0 0 -72px;
  background:
    linear-gradient(115deg, #00ffff 0%, #ff00ff 35%, #00ffff 65%, #ff00ff 100%),
    #e6f0ff;
  background-size: 220% 100%;
  background-position: calc(var(--i) * 28%) center;
  border: 2px solid #e6f0ff;
  border-radius: 10px;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0,255,255,0.4), inset 0 0 0 1px rgba(255,255,255,0.5);
  transform: translateZ(calc(var(--i) * -22px)) translateY(calc(var(--i) * -10px));
  filter: brightness(calc(1 - var(--i) * 0.1));
  z-index: calc(10 - var(--i));
  transition: transform .55s cubic-bezier(.3,1.2,.4,1), filter .4s, z-index 0s .27s;
}
.scd-persp__c span {
  font: 900 28px/1 ui-monospace, monospace;
  color: #1a0033;
  background: rgba(255,255,255,0.85);
  padding: 6px 14px; border-radius: 6px;
  letter-spacing: 0.06em;
}
```

**JS:**
```js
/* Click-to-cycle the holo deck: front card recedes. */
document.querySelectorAll('.scd-persp.scd-cycle').forEach(function(stack) {
  stack.addEventListener('click', function() {
    var cards = Array.from(stack.children);
    var max = cards.length - 1;
    cards.forEach(function(card) {
      var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
      var next = current === 0 ? max : current - 1;
      card.style.setProperty('--i', next);
    });
  });
});
```

### 06. Hover Spread

**Type:** Pure CSS
**Description:** A casino chip rack on green felt — chips stacked tight at center; hover spreads them into a fan with denomination markings.

**HTML:**
```html
<div class="scd-spread">
  <div class="scd-spread__c" style="--i: 0">$1</div>
  <div class="scd-spread__c" style="--i: 1">$5</div>
  <div class="scd-spread__c" style="--i: 2">$10</div>
  <div class="scd-spread__c" style="--i: 3">$25</div>
  <div class="scd-spread__c" style="--i: 4">$100</div>
</div>
```

**CSS:**
```css
.scd-spread {
  position: relative;
  width: 320px; height: 140px; margin: 0 auto;
  background: radial-gradient(ellipse at center, #0d6048 0%, #0a4f3c 100%);
  border-radius: 70px;
  cursor: pointer;
  display: grid; place-items: center;
}
.scd-spread__c {
  position: absolute;
  left: 50%; top: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 12px ui-monospace, monospace;
  color: #0a0a0a;
  background:
    repeating-conic-gradient(from 0deg, var(--c1) 0deg 15deg, var(--c2) 15deg 30deg);
  border: 3px solid var(--c2);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,0.45), inset 0 0 0 6px var(--c1), inset 0 0 0 8px var(--c2);
  transform: translateX(calc((var(--i) - 2) * 4px)) translateY(calc(var(--i) * -2px));
  transition: transform .5s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-spread__c:nth-child(1) { --c1: #f8e8c8; --c2: #d4b86a; }
.scd-spread__c:nth-child(2) { --c1: #b91c1c; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(3) { --c1: #1a4d8f; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(4) { --c1: #3d8a4a; --c2: #f8e8c8; color: #fff; }
.scd-spread__c:nth-child(5) { --c1: #1a1a1a; --c2: #d4a017; color: #d4a017; }
.scd-spread:hover .scd-spread__c {
  transform: translateX(calc((var(--i) - 2) * 56px)) translateY(0);
}
```

### 07. Cascade Lift

**Type:** Pure CSS
**Description:** Manila folder index — kraft-paper folders with green tab labels stacked tight; hover lifts them into a staggered cascade.

**HTML:**
```html
<div class="scd-casc">
  <div class="scd-casc__c" style="--i: 0"><b>2026 — Q1</b><span>3 events</span></div>
  <div class="scd-casc__c" style="--i: 1"><b>2026 — Q2</b><span>1 event</span></div>
  <div class="scd-casc__c" style="--i: 2"><b>2026 — Q3</b><span>5 events</span></div>
  <div class="scd-casc__c" style="--i: 3"><b>2026 — Q4</b><span>2 events</span></div>
</div>
```

**CSS:**
```css
.scd-casc { position: relative; width: 220px; height: 200px; margin: 0 auto; cursor: pointer; }
.scd-casc__c {
  position: absolute; left: 50%; bottom: 0;
  width: 200px; height: 56px; margin-left: -100px;
  background: #d4b86a;
  color: #1a1a1a;
  border-radius: 2px 8px 2px 2px;
  padding: 14px 18px 10px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 3px 6px -1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: translateY(calc(var(--i) * -10px));
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
  z-index: calc(10 - var(--i));
}
.scd-casc__c::before {
  content: '';
  position: absolute; top: -10px; right: 14px;
  width: 56px; height: 12px;
  background: #2a4d3a;
  border-radius: 4px 4px 0 0;
}
.scd-casc:hover .scd-casc__c { transform: translateY(calc(var(--i) * -56px)); }
.scd-casc__c b    { font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.04em; }
.scd-casc__c span { font: 11px/1 system-ui; color: #4a3d20; }
```

### 08. Peel Back

**Type:** Pure CSS
**Description:** A wax-sealed envelope — cream cover with serif copperplate; hover peels the flap to reveal a scarlet wax seal beneath.

**HTML:**
```html
<div class="scd-peel">
  <div class="scd-peel__back">
    <div class="scd-peel__seal">JK</div>
    <h4>RSVP</h4>
    <p>You are cordially invited.</p>
  </div>
  <div class="scd-peel__front">
    <span class="scd-peel__monogram">CF</span>
    <span class="scd-peel__line">— Hover to open —</span>
  </div>
</div>
```

**CSS:**
```css
.scd-peel { position: relative; width: 200px; height: 140px; margin: 0 auto; perspective: 1000px; cursor: pointer; }
.scd-peel__back, .scd-peel__front {
  position: absolute; inset: 0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  text-align: center;
}
.scd-peel__back {
  background: #faf3e3;
  color: #1a1a1a; padding: 16px;
  border: 1px solid #d4c8a3;
}
.scd-peel__seal {
  width: 38px; height: 38px;
  background: radial-gradient(circle at 35% 30%, #c44, #8b1a1a);
  color: #faf3e3;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 900 13px ui-serif, Georgia;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset -2px -3px 4px rgba(0,0,0,0.3);
  margin-bottom: 6px;
}
.scd-peel__back h4 { margin: 0; font: 700 14px/1 ui-serif, Georgia; letter-spacing: 0.18em; }
.scd-peel__back p  { margin: 0; font: italic 11px/1.4 ui-serif, Georgia; color: #5a4a30; }
.scd-peel__front {
  background: #faf3e3;
  color: #1a1a1a;
  border: 1px solid #d4c8a3;
  transform-origin: top right;
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  box-shadow: 0 8px 22px -8px rgba(0,0,0,0.45);
}
.scd-peel__front::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, transparent 49%, #d4c8a3 49.5%, transparent 50.5%);
}
.scd-peel__monogram {
  font: 900 26px/1 ui-serif, Georgia; color: #8b1a1a; letter-spacing: 0.08em;
  border: 1.5px solid #8b1a1a; padding: 4px 10px; border-radius: 2px;
}
.scd-peel__line { font: italic 10px/1 ui-serif, Georgia; color: #5a4a30; letter-spacing: 0.12em; }
.scd-peel:hover .scd-peel__front { transform: rotate3d(-1, 1, 0, 75deg); }
```

### 09. Accordion Spread

**Type:** Pure CSS
**Description:** Spice-market labels — saffron, paprika, turmeric, cardamom strips compressed flat; hover expands the active strip with its name in full.

**HTML:**
```html
<div class="scd-acc">
  <div class="scd-acc__c" style="--c: #e8a02e; --t: #3a2a0a">SAFFRON</div>
  <div class="scd-acc__c" style="--c: #c44e2e; --t: #fff">PAPRIKA</div>
  <div class="scd-acc__c" style="--c: #f4c430; --t: #3a2a0a">TURMERIC</div>
  <div class="scd-acc__c" style="--c: #3a5a3d; --t: #fff">CARDAMOM</div>
</div>
```

**CSS:**
```css
.scd-acc {
  display: flex; gap: 0;
  width: 240px; height: 140px; margin: 0 auto;
  border: 2px solid #1a1a1a; border-radius: 4px; overflow: hidden;
  cursor: pointer;
  background: #1a1a1a;
}
.scd-acc__c {
  flex: 1;
  background: var(--c);
  color: var(--t);
  display: flex; align-items: center; justify-content: center;
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: 0.22em;
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: flex .45s cubic-bezier(.3,1,.3,1);
  border-right: 2px solid #1a1a1a;
  position: relative;
}
.scd-acc__c:last-child { border-right: none; }
.scd-acc__c::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px dashed currentColor; opacity: 0.3;
  pointer-events: none;
}
.scd-acc__c:hover { flex: 5; writing-mode: horizontal-tb; transform: none; letter-spacing: 0.32em; }
```

### 10. Shuffle Reveal

**Type:** Pure CSS
**Description:** Three vinyl record sleeves — red, cobalt, and warm-yellow LP covers; hover slides the front sleeve out at an angle to expose the next.

**HTML:**
```html
<div class="scd-shuf">
  <div class="scd-shuf__c" style="--i: 2; --bg: #cc3232">
    <span class="scd-shuf__hole"></span><span class="scd-shuf__label">Side A</span>
  </div>
  <div class="scd-shuf__c" style="--i: 1; --bg: #1942a3">
    <span class="scd-shuf__hole"></span><span class="scd-shuf__label">12" LP</span>
  </div>
  <div class="scd-shuf__c" style="--i: 0; --bg: #f0c040">
    <span class="scd-shuf__hole"></span><span class="scd-shuf__label">33⅓</span>
  </div>
</div>
```

**CSS:**
```css
.scd-shuf { position: relative; width: 220px; height: 170px; margin: 0 auto; cursor: pointer; }
.scd-shuf__c {
  position: absolute; left: 50%; top: 50%;
  width: 132px; height: 132px; margin: -66px 0 0 -66px;
  background: var(--bg);
  border-radius: 4px;
  color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2);
  transform: translateY(calc(var(--i) * -8px)) translateX(calc(var(--i) * -4px));
  transition: transform .5s cubic-bezier(.3,1.4,.4,1);
  z-index: calc(10 - var(--i));
  overflow: hidden;
}
.scd-shuf__c::before {
  content: '';
  position: absolute; inset: 16px;
  background:
    radial-gradient(circle at center, #1a1a1a 0%, #1a1a1a 38%, transparent 38.5%),
    repeating-radial-gradient(circle at center, #1a1a1a 0 1px, transparent 1px 3px);
  border-radius: 50%;
}
.scd-shuf__hole {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--bg); border-radius: 50%;
  z-index: 2;
}
.scd-shuf__label {
  position: relative; z-index: 3;
  font: 800 10px ui-monospace, monospace;
  color: var(--bg);
  background: #1a1a1a;
  padding: 3px 8px; border-radius: 2px;
  letter-spacing: 0.14em;
  margin-top: 38px;
}
.scd-shuf:hover .scd-shuf__c { transform: translateY(calc((var(--i) - 1) * -8px)) translateX(calc((var(--i) - 1) * -4px)); }
.scd-shuf:hover .scd-shuf__c[style*="--i:0"] { transform: translate(140%, -10px) rotate(16deg); }
```

### 11. Tab Stack

**Type:** Pure CSS
**Description:** Library catalog cards — cream cardstock with a red Dewey stamp and olive index lines. Click any card to bring it to the front.

**HTML:**
```html
<div class="scd-tab">
  <input type="radio" name="scd-tab" id="scd-tab-1" checked />
  <input type="radio" name="scd-tab" id="scd-tab-2" />
  <input type="radio" name="scd-tab" id="scd-tab-3" />
  <label for="scd-tab-1" class="scd-tab__c" data-i="0"
    ><span class="scd-tab__call">823.91</span>
    <h4>Atlas of Birds</h4>
    <p>Audubon · 1827</p></label
  >
  <label for="scd-tab-2" class="scd-tab__c" data-i="1"
    ><span class="scd-tab__call">711.40</span>
    <h4>Italian Cities</h4>
    <p>Calvino · 1972</p></label
  >
  <label for="scd-tab-3" class="scd-tab__c" data-i="2"
    ><span class="scd-tab__call">510.92</span>
    <h4>Pure Logic</h4>
    <p>Russell · 1903</p></label
  >
</div>
```

**CSS:**
```css
.scd-tab { position: relative; width: 220px; height: 160px; margin: 0 auto; }
.scd-tab > input { display: none; }
.scd-tab__c {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 116px; margin: -58px 0 0 -100px;
  background: #ede4cf;
  color: #1a1a1a;
  border: 1px solid #c4b896;
  border-radius: 2px;
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.35);
  background-image: repeating-linear-gradient(0deg, transparent 0 18px, #c4b89640 18px 19px);
  transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.scd-tab__c[data-i="0"] { transform: translateY(0)    scale(1);    z-index: 3; }
.scd-tab__c[data-i="1"] { transform: translateY(-10px) scale(0.94); z-index: 2; }
.scd-tab__c[data-i="2"] { transform: translateY(-20px) scale(0.88); z-index: 1; }
#scd-tab-1:checked ~ [data-i="0"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="1"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="0"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="2"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-3:checked ~ [data-i="1"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="0"] { transform: translateY(40px) scale(0.78); z-index: 0; opacity: 0.5; }
.scd-tab__call {
  display: inline-block;
  background: #a32424; color: #ede4cf;
  font: 700 10px ui-monospace, monospace; letter-spacing: 0.1em;
  padding: 2px 6px; border-radius: 2px;
  margin-bottom: 6px;
}
.scd-tab__c h4 { margin: 0 0 4px; font: 700 14px/1.1 ui-serif, Georgia; color: #4d5435; }
.scd-tab__c p  { margin: 0; font: italic 11px/1.5 ui-serif, Georgia; color: #5a4a30; }
```

### 12. Photos Pinch

**Type:** Pure CSS
**Description:** Pantone color-of-the-year swatches — Mustard Yellow, Tangerine, Ultra Violet, Classic Blue. Click any swatch to pull it forward.

**HTML:**
```html
<div class="scd-photo">
  <input type="radio" name="scd-photo" id="scd-photo-1" checked />
  <input type="radio" name="scd-photo" id="scd-photo-2" />
  <input type="radio" name="scd-photo" id="scd-photo-3" />
  <input type="radio" name="scd-photo" id="scd-photo-4" />
  <label for="scd-photo-1" class="scd-photo__c" data-i="0" style="--bg: #e8b03e"
    ><span class="scd-photo__num">PMS 7549</span><span class="scd-photo__nm">Mustard</span></label
  >
  <label for="scd-photo-2" class="scd-photo__c" data-i="1" style="--bg: #dd5a2c"
    ><span class="scd-photo__num">17-1463</span><span class="scd-photo__nm">Tangerine</span></label
  >
  <label for="scd-photo-3" class="scd-photo__c" data-i="2" style="--bg: #5f4b8b"
    ><span class="scd-photo__num">18-3838</span
    ><span class="scd-photo__nm">Ultra Violet</span></label
  >
  <label for="scd-photo-4" class="scd-photo__c" data-i="3" style="--bg: #0f4c81"
    ><span class="scd-photo__num">19-4052</span
    ><span class="scd-photo__nm">Classic Blue</span></label
  >
</div>
```

**CSS:**
```css
.scd-photo { position: relative; width: 240px; height: 180px; margin: 0 auto; }
.scd-photo > input { display: none; }
.scd-photo__c {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 132px; margin: -66px 0 0 -46px;
  background: #fafaf5;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.35);
  transition: transform .45s cubic-bezier(.3,1,.3,1), box-shadow .4s;
  z-index: calc(10 - var(--i));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.scd-photo__c::before {
  content: '';
  display: block;
  height: 86px;
  background: var(--bg);
}
.scd-photo__num {
  font: 700 9px/1 ui-monospace, monospace;
  color: #1a1a1a; padding: 8px 10px 2px;
  letter-spacing: 0.06em;
}
.scd-photo__nm {
  font: 800 11px/1 system-ui, sans-serif;
  color: #1a1a1a; padding: 0 10px;
  letter-spacing: 0.02em;
}
.scd-photo__c[data-i="0"] { transform: translateX(-78px) translateY(8px) rotate(-12deg); }
.scd-photo__c[data-i="1"] { transform: translateX(-26px) translateY(-4px) rotate(-4deg); }
.scd-photo__c[data-i="2"] { transform: translateX(26px) translateY(-4px) rotate(4deg); }
.scd-photo__c[data-i="3"] { transform: translateX(78px) translateY(8px) rotate(12deg); }
#scd-photo-1:checked ~ [data-i="0"],
#scd-photo-2:checked ~ [data-i="1"],
#scd-photo-3:checked ~ [data-i="2"],
#scd-photo-4:checked ~ [data-i="3"] {
  transform: translate(0, 0) rotate(0) scale(1.08);
  z-index: 20;
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.5);
}
```

### 13. Swipe Stack

**Type:** CSS + JS
**Description:** Boarding-pass deck — airline navy with a magenta edge stripe and monospace flight code. Click the top pass to swipe it away; loops every 1.5s.

**HTML:**
```html
<div class="scd-swipe">
  <input type="checkbox" id="scd-swipe-1" />
  <input type="checkbox" id="scd-swipe-2" />
  <div class="scd-swipe__c" style="--i: 2">
    <span class="scd-swipe__hd">SFO → JFK</span><span class="scd-swipe__ft">UA · 423</span>
  </div>
  <label for="scd-swipe-2" class="scd-swipe__c" data-card="2" style="--i: 1"
    ><span class="scd-swipe__hd">LHR → CDG</span><span class="scd-swipe__ft">BA · 304</span></label
  >
  <label for="scd-swipe-1" class="scd-swipe__c" data-card="1" style="--i: 0"
    ><span class="scd-swipe__hd">NRT → SIN</span><span class="scd-swipe__ft">JL · 711</span></label
  >
</div>
```

**CSS:**
```css
.scd-swipe { position: relative; width: 220px; height: 170px; margin: 0 auto; }
.scd-swipe > input { display: none; }
.scd-swipe__c {
  position: absolute; left: 50%; top: 50%;
  width: 184px; height: 124px; margin: -62px 0 0 -92px;
  background: #0c2340;
  color: #fdf6e9;
  border-left: 6px solid #e84a8a;
  border-radius: 4px;
  padding: 18px 20px;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 22px -8px rgba(12,35,64,0.55);
  transform: translateY(calc(var(--i) * -10px)) scale(calc(1 - var(--i) * 0.05));
  transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .4s;
  z-index: calc(10 - var(--i));
}
.scd-swipe__hd {
  font: 800 16px/1 ui-monospace, monospace;
  letter-spacing: 0.06em;
}
.scd-swipe__ft {
  font: 700 10px/1 ui-monospace, monospace;
  color: #e84a8a; letter-spacing: 0.18em;
  border-top: 1px dashed rgba(253,246,233,0.3);
  padding-top: 8px;
}
#scd-swipe-1:checked ~ [data-card="1"] { transform: translate(180%, -30px) rotate(20deg); opacity: 0; }
#scd-swipe-2:checked ~ [data-card="2"] { transform: translate(-180%, -30px) rotate(-20deg); opacity: 0; }
```

**JS:**
```js
/* Auto-reset the swipe stack 1.5s after a card is dismissed
   so the demo loops continuously. */
document.querySelectorAll('.scd-swipe').forEach(function(stack) {
  var inputs = stack.querySelectorAll('input[type="checkbox"]');
  inputs.forEach(function(input) {
    input.addEventListener('change', function() {
      if (input.checked) {
        setTimeout(function() { input.checked = false; }, 1500);
      }
    });
  });
});
```

### 14. Accordion Card

**Type:** Pure CSS
**Description:** Cassette J-card stack — hot-pink, electric-teal, and neon-yellow 90s hi-fi liners. Click any to expand its A/B side track listing.

**HTML:**
```html
<div class="scd-accc">
  <input type="radio" name="scd-accc" id="scd-accc-1" checked />
  <input type="radio" name="scd-accc" id="scd-accc-2" />
  <input type="radio" name="scd-accc" id="scd-accc-3" />
  <label for="scd-accc-1" class="scd-accc__c" style="--c: #ff3d83; --t: #fff"
    ><b>SIDE A · 90 MIN</b><span>1. Saturday Night · 4:21</span
    ><span>2. Late Bloomer · 3:18</span></label
  >
  <label for="scd-accc-2" class="scd-accc__c" style="--c: #00d4d4; --t: #0a0a14"
    ><b>SIDE B · 60 MIN</b><span>1. Cobalt Hour · 5:04</span
    ><span>2. Chrome Eyes · 4:11</span></label
  >
  <label for="scd-accc-3" class="scd-accc__c" style="--c: #fef34c; --t: #0a0a14"
    ><b>BONUS · 30 MIN</b><span>1. Mixtape Outro · 2:48</span
    ><span>2. Studio Banter · 1:16</span></label
  >
</div>
```

**CSS:**
```css
.scd-accc {
  display: flex; flex-direction: column; gap: 4px;
  width: 240px; margin: 0 auto;
}
.scd-accc > input { display: none; }
.scd-accc__c {
  background: var(--c);
  color: var(--t);
  border-radius: 0;
  border-left: 4px solid #0a0a14;
  border-right: 4px solid #0a0a14;
  padding: 10px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  height: 26px; overflow: hidden;
  transition: height .35s cubic-bezier(.3,1.3,.5,1);
  font-family: ui-monospace, monospace;
}
.scd-accc__c b    { font: 800 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; }
.scd-accc__c span { font: 11px/1.4 ui-monospace, monospace; opacity: 0.85; }
#scd-accc-1:checked ~ .scd-accc__c:nth-of-type(1),
#scd-accc-2:checked ~ .scd-accc__c:nth-of-type(2),
#scd-accc-3:checked ~ .scd-accc__c:nth-of-type(3) {
  height: 78px;
}
```

### 15. Timeline Stack

**Type:** Pure CSS
**Description:** Architectural blueprint scroll — chalk-white milestone cards on cyanotype navy with grid-paper backdrop and dimensional dots.

**HTML:**
```html
<div class="scd-tl">
  <div class="scd-tl__c" style="--i: 0"><time>2024.09</time><b>Founded</b></div>
  <div class="scd-tl__c" style="--i: 1"><time>2025.04</time><b>Series A</b></div>
  <div class="scd-tl__c" style="--i: 2"><time>2026.02</time><b>10k Users</b></div>
</div>
```

**CSS:**
```css
.scd-tl {
  position: relative; width: 240px; padding: 16px 16px 16px 32px;
  margin: 0 auto;
  background: #0c4a8a;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}
.scd-tl::before {
  content: ''; position: absolute; left: 16px; top: 22px; bottom: 22px;
  width: 2px; background: rgba(255,255,255,0.5);
}
.scd-tl__c {
  position: relative;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.25);
  color: #f0f5fa;
  padding: 8px 12px; margin-bottom: 6px;
  border-radius: 2px;
  display: flex; gap: 12px; align-items: center;
  transform: translateX(calc(var(--i) * 4px));
}
.scd-tl__c:last-child { margin-bottom: 0; }
.scd-tl__c::before {
  content: ''; position: absolute; left: -22px; top: 50%;
  width: 10px; height: 10px;
  background: #f0f5fa; transform: translateY(-50%);
  box-shadow: 0 0 0 2px #0c4a8a, 0 0 0 4px rgba(240,245,250,0.5);
}
.scd-tl__c time { font: 700 10px ui-monospace, monospace; opacity: 0.7; letter-spacing: 0.1em; }
.scd-tl__c b    { font: 700 12px ui-monospace, monospace; letter-spacing: 0.04em; }
```

### 16. Isometric Tower

**Type:** Pure CSS
**Description:** Server rack tower — graphite metal slabs with green LED indicators stacked in isometric projection.

**HTML:**
```html
<div class="scd-iso">
  <div class="scd-iso__c" style="--i: 0"><span class="scd-iso__led"></span>WEB-01</div>
  <div class="scd-iso__c" style="--i: 1"><span class="scd-iso__led"></span>API-02</div>
  <div class="scd-iso__c" style="--i: 2"><span class="scd-iso__led"></span>DB-03</div>
  <div class="scd-iso__c" style="--i: 3"><span class="scd-iso__led"></span>CACHE-04</div>
</div>
```

**CSS:**
```css
.scd-iso {
  position: relative; width: 200px; height: 180px; margin: 6px auto 0;
  transform: rotateX(55deg) rotateZ(-30deg); transform-style: preserve-3d;
}
.scd-iso__c {
  position: absolute; left: 50%; top: 50%;
  width: 130px; height: 28px; margin: -14px 0 0 -65px;
  background: linear-gradient(180deg, #4a4a52 0%, #2a2a32 100%);
  color: #cad3da;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  font: 700 10px ui-monospace, monospace;
  letter-spacing: 0.16em;
  border: 1px solid #1a1a20;
  border-radius: 2px;
  box-shadow: 0 4px 0 #1a1a20, inset 0 1px 0 #6a6a72;
  transform: translateZ(calc(var(--i) * 28px));
}
.scd-iso__led {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3eff7f;
  box-shadow: 0 0 6px #3eff7f, inset 0 0 1px rgba(255,255,255,0.6);
}
```

### 17. 3D Flip Stack

**Type:** Pure CSS
**Description:** Solari split-flap board — black flap cards with amber characters that rotate to reveal the next destination on hover.

**HTML:**
```html
<div class="scd-flip">
  <div class="scd-flip__c" style="--i: 0">
    <div class="scd-flip__f">P</div>
    <div class="scd-flip__b">9</div>
  </div>
  <div class="scd-flip__c" style="--i: 1">
    <div class="scd-flip__f">A</div>
    <div class="scd-flip__b">2</div>
  </div>
  <div class="scd-flip__c" style="--i: 2">
    <div class="scd-flip__f">R</div>
    <div class="scd-flip__b">A</div>
  </div>
  <div class="scd-flip__c" style="--i: 3">
    <div class="scd-flip__f">I</div>
    <div class="scd-flip__b">M</div>
  </div>
  <div class="scd-flip__c" style="--i: 4">
    <div class="scd-flip__f">S</div>
    <div class="scd-flip__b">B</div>
  </div>
</div>
```

**CSS:**
```css
.scd-flip {
  position: relative; width: 240px; height: 130px; margin: 0 auto;
  display: flex; gap: 4px; perspective: 800px;
  background: #1a1a1a; padding: 8px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #2a2a2a;
}
.scd-flip__c {
  flex: 1; position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.3,1,.3,1);
  transition-delay: calc(var(--i) * 0.08s);
}
.scd-flip__f, .scd-flip__b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 3px;
  font: 900 36px/1 ui-monospace, monospace;
  backface-visibility: hidden;
  background: #171717;
  color: #ffb000;
  border: 1px solid #2a2a2a;
  box-shadow: inset 0 -1px 0 #000, inset 0 1px 0 #2a2a2a;
}
.scd-flip__b { transform: rotateY(180deg); }
.scd-flip__f::after, .scd-flip__b::after {
  content: '';
  position: absolute; left: 0; right: 0;
  top: 50%; height: 1px;
  background: #000;
}
.scd-flip:hover .scd-flip__c { transform: rotateY(180deg); }
```

### 18. Spiral Tower

**Type:** Pure CSS
**Description:** A DNA helix tower — cobalt nucleotide tiles continuously orbit a central axis. Each tile sits at a different height + rotation phase, so the strand reads as a slowly spinning helix.

**HTML:**
```html
<div class="scd-spir">
  <div class="scd-spir__c" style="--i: 0">A</div>
  <div class="scd-spir__c" style="--i: 1">T</div>
  <div class="scd-spir__c" style="--i: 2">G</div>
  <div class="scd-spir__c" style="--i: 3">C</div>
  <div class="scd-spir__c" style="--i: 4">A</div>
</div>
```

**CSS:**
```css
.scd-spir {
  position: relative; width: 200px; height: 220px; margin: 0 auto;
  perspective: 700px;
  display: flex; align-items: center; justify-content: center;
}
.scd-spir__inner, .scd-spir {
  transform-style: preserve-3d;
}
.scd-spir::before {
  content: '';
  position: absolute; left: 50%; top: 14px; bottom: 14px;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent 0%, #3fd5a8 20%, #3fd5a8 80%, transparent 100%);
  opacity: 0.45;
}
.scd-spir__c {
  position: absolute; left: 50%; top: 50%;
  width: 70px; height: 38px; margin: -19px 0 0 -35px;
  background: linear-gradient(135deg, #0066cc 0%, #003d7a 100%);
  color: #3fd5a8;
  display: grid; place-items: center;
  font: 900 18px/1 ui-monospace, monospace;
  border-radius: 4px;
  border-left: 3px solid #3fd5a8;
  box-shadow: 0 4px 12px -4px rgba(0,102,204,0.5), inset 1px 0 0 rgba(255,255,255,0.12);
  backface-visibility: visible;
  transform-style: preserve-3d;
  animation: scd-spir-orbit 6s linear infinite;
  animation-delay: calc(var(--i) * -1.2s);
}
@keyframes scd-spir-orbit {
  0%   { transform: translateY(70px)  rotateY(0deg)   translateZ(48px); }
  25%  { transform: translateY(35px)  rotateY(90deg)  translateZ(48px); }
  50%  { transform: translateY(0)     rotateY(180deg) translateZ(48px); }
  75%  { transform: translateY(-35px) rotateY(270deg) translateZ(48px); }
  100% { transform: translateY(-70px) rotateY(360deg) translateZ(48px); }
}
@media (prefers-reduced-motion: reduce) {
  .scd-spir__c { animation: none; transform: translateY(calc(var(--i) * -22px - 44px)) rotateY(calc(var(--i) * 36deg)) translateZ(48px); }
}
```

### 19. Tilt on Hover

**Type:** Pure CSS
**Description:** A hardback book stack — oxblood leather covers with gilt-gold spine bands and cream page edges. Tilts subtly in 3D on hover.

**HTML:**
```html
<div class="scd-pers">
  <div class="scd-pers__c" style="--i: 0"><span class="scd-pers__title">VOL · I</span></div>
  <div class="scd-pers__c" style="--i: 1"><span class="scd-pers__title">VOL · II</span></div>
  <div class="scd-pers__c" style="--i: 2"><span class="scd-pers__title">VOL · III</span></div>
</div>
```

**CSS:**
```css
.scd-pers {
  position: relative; width: 200px; height: 150px; margin: 0 auto;
  perspective: 1000px; transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.3,1,.3,1);
}
.scd-pers__c {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 78%, #f5e8c4 78%, #f5e8c4 100%),
    linear-gradient(135deg, #5a1a1a 0%, #3a0a0a 100%);
  color: #c9a233;
  border-radius: 2px 6px 6px 2px;
  display: flex; align-items: center; padding: 0 18px;
  font: 700 14px ui-serif, Georgia;
  box-shadow: 0 8px 22px -8px rgba(90,26,26,0.55), inset 0 0 0 1px rgba(201,162,51,0.2);
  transform: translateZ(calc(var(--i) * -30px)) translateY(calc(var(--i) * -8px));
  transition: transform .5s cubic-bezier(.3,1,.3,1);
  z-index: calc(10 - var(--i));
}
.scd-pers__title {
  border-top: 1px solid #c9a233;
  border-bottom: 1px solid #c9a233;
  padding: 6px 0;
  letter-spacing: 0.16em;
}
.scd-pers:hover { transform: rotateX(-12deg) rotateY(8deg); }
```

### 20. Notification Pile

**Type:** Pure CSS
**Description:** Apple-Watch–style notification feed — alerts slide in from the top one after another, fading and shrinking as they settle into the pile beneath. The cycle loops so new alerts keep arriving.

**HTML:**
```html
<div class="scd-not">
  <div class="scd-not__c" style="--i: 0; --a: #ff3b30">
    <span class="scd-not__dot"></span><b>Alarm</b><span class="scd-not__t">7:00 AM</span>
  </div>
  <div class="scd-not__c" style="--i: 1; --a: #34c759">
    <span class="scd-not__dot"></span><b>Activity</b><span class="scd-not__t">+12 mins</span>
  </div>
  <div class="scd-not__c" style="--i: 2; --a: #0a84ff">
    <span class="scd-not__dot"></span><b>Calendar</b><span class="scd-not__t">in 5 min</span>
  </div>
  <div class="scd-not__c" style="--i: 3; --a: #ffd60a">
    <span class="scd-not__dot"></span><b>Mail</b><span class="scd-not__t">2 new</span>
  </div>
</div>
```

**CSS:**
```css
.scd-not {
  position: relative; width: 220px; height: 200px; margin: 0 auto;
  background: linear-gradient(180deg, #000 0%, #1c1c1e 100%);
  border-radius: 28px;
  padding: 14px 0;
  border: 2px solid #2a2a2c;
  overflow: hidden;
}
.scd-not__c {
  position: absolute; left: 50%; top: 12px;
  width: 196px; margin-left: -98px;
  background: rgba(58, 58, 64, 0.85);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: #f1f5f9;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 10px 14px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
  animation: scd-not-arrive 5s cubic-bezier(.3,1,.3,1) infinite;
  animation-delay: calc(var(--i) * 1.25s);
  opacity: 0;
}
@keyframes scd-not-arrive {
  0%   { transform: translateY(-60px) scale(1);    opacity: 0; }
  10%  { transform: translateY(0)     scale(1);    opacity: 1; }
  35%  { transform: translateY(40px)  scale(0.96); opacity: 0.85; }
  60%  { transform: translateY(76px)  scale(0.92); opacity: 0.6; }
  85%  { transform: translateY(108px) scale(0.88); opacity: 0.3; }
  100% { transform: translateY(140px) scale(0.84); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scd-not__c {
    animation: none; opacity: calc(1 - var(--i) * 0.2);
    transform: translateY(calc(var(--i) * 36px)) scale(calc(1 - var(--i) * 0.04));
  }
}
.scd-not__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 4px var(--a);
  flex-shrink: 0;
}
.scd-not__c b    { flex: 1; font: 700 12px/1 system-ui; }
.scd-not__c .scd-not__t { font: 11px/1 ui-monospace, monospace; opacity: 0.65; flex-shrink: 0; }
```

### 21. Receipt Roll

**Type:** Pure CSS
**Description:** A pawn-shop ticket roll — newsprint cream paper torn at perforated edges with a wash-red "PAID" stamp on the lead ticket.

**HTML:**
```html
<div class="scd-rcpt">
  <div class="scd-rcpt__c">
    <span class="scd-rcpt__stamp">PAID</span>
    <b>TICKET · 4218</b>
    <span>Latte · $4.50</span>
    <span>Croissant · $3.25</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4219</b>
    <span>Espresso · $3.00</span>
  </div>
  <div class="scd-rcpt__c">
    <b>TICKET · 4220</b>
    <span>Mocha · $5.25</span>
  </div>
</div>
```

**CSS:**
```css
.scd-rcpt {
  width: 192px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
  font: 11px/1.5 ui-monospace, monospace;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.scd-rcpt__c {
  background: #f4ecd8; color: #1a1a1a;
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
  border-bottom: 1.5px dashed #8a7d5a;
}
.scd-rcpt__stamp {
  position: absolute; top: 6px; right: 8px;
  font: 900 16px ui-serif, Georgia;
  color: #aa2a2a;
  border: 2px solid #aa2a2a;
  padding: 2px 8px;
  transform: rotate(-12deg);
  letter-spacing: 0.12em;
  opacity: 0.75;
}
.scd-rcpt__c::before, .scd-rcpt__c::after {
  content: ''; position: absolute; bottom: -7px;
  width: 14px; height: 14px;
  background: #17171f;
  border-radius: 50%;
}
.scd-rcpt__c::before { left: -7px; }
.scd-rcpt__c::after  { right: -7px; }
.scd-rcpt__c:last-child { border-bottom: none; }
.scd-rcpt__c:last-child::before, .scd-rcpt__c:last-child::after { display: none; }
.scd-rcpt__c b { font: 800 11px/1.2 ui-monospace; letter-spacing: 0.12em; }
```

### 22. Scratch Cards

**Type:** Pure CSS
**Description:** Lottery foil scratch cards — hot-pink envelopes covered with holographic silver foil that wipes clear on hover, revealing the neon prize amount.

**HTML:**
```html
<div class="scd-scr">
  <div class="scd-scr__c" style="--r: -8deg">
    <span class="scd-scr__p">$50</span><span class="scd-scr__f"></span>
  </div>
  <div class="scd-scr__c" style="--r: 0deg">
    <span class="scd-scr__p">$100</span><span class="scd-scr__f"></span>
  </div>
  <div class="scd-scr__c" style="--r: 8deg">
    <span class="scd-scr__p">$25</span><span class="scd-scr__f"></span>
  </div>
</div>
```

**CSS:**
```css
.scd-scr {
  position: relative; width: 240px; height: 150px; margin: 0 auto;
  display: flex; justify-content: center; align-items: center;
}
.scd-scr__c {
  position: relative;
  width: 84px; height: 116px; margin: 0 -8px;
  background: #e0387b;
  border: 2px solid #1a0033;
  border-radius: 6px;
  transform: rotate(var(--r));
  display: grid; place-items: center;
  box-shadow: 0 6px 14px -4px rgba(224,56,123,0.6);
  overflow: hidden;
  cursor: pointer;
}
.scd-scr__p {
  font: 900 24px/1 ui-monospace, monospace;
  color: #3eff7f;
  text-shadow: 0 0 8px rgba(62,255,127,0.4);
  letter-spacing: 0.06em;
}
.scd-scr__f {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(135deg, transparent 25%, rgba(255,255,255,0.5) 50%, transparent 75%),
    linear-gradient(135deg, #cfd8dc 0%, #90a4ae 50%, #cfd8dc 100%);
  transition: opacity .4s;
}
.scd-scr__f::after {
  content: 'SCRATCH';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font: 900 11px ui-monospace, monospace;
  color: rgba(26,0,51,0.5); letter-spacing: 0.16em;
}
.scd-scr__c:hover .scd-scr__f { opacity: 0; }
```

---
## 32 CSS Tab Designs

URL: https://codefronts.com/navigation/css-tabs/
Description: 32 CSS tab designs — 12 fan-favorite patterns (Ink Slider, Neon Electric, Brutalist Press, Chromatic, VS Code Files, iOS Segmented, Bento Grid, Vertical Dots, CRT Terminal, Morph Icon, Typewriter, Particle Burst) plus 20 typography-driven specimens. Sliding pills, halo blooms, drop caps, stencil cuts, folio folds. Each demo carries a distinct accent palette and motion choreography.
Demo count: 32

### 01. Ink Slider

**Type:** CSS + JS
**Description:** Solid ink-violet bar slides horizontally beneath the active tab. JS measures offsetLeft + offsetWidth so the bar matches each tab's exact width — no fixed-width assumption — and re-aligns on viewport resize.

**HTML:**
```html
<div class="tt21">
  <nav class="tt21n">
    <span class="tt21bar" aria-hidden="true"></span>
    <button class="tt21b active" data-t>Overview</button>
    <button class="tt21b" data-t>Pricing</button>
    <button class="tt21b" data-t>Reviews</button>
    <button class="tt21b" data-t>Support</button>
  </nav>
</div>
```

**CSS:**
```css
.tt21 {
  background: #faf8f3;
  padding: 32px 18px 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt21n {
  position: relative;
  display: flex;
  border-bottom: 1px solid rgba(35, 28, 72, 0.12);
  min-width: 0;
}
.tt21bar {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  width: 0;
  background: #231c48;
  border-radius: 2px 2px 0 0;
  transition:
    left 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.tt21b {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 14px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: rgba(35, 28, 72, 0.55);
  cursor: pointer;
  transition: color 0.25s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt21b:hover {
  color: rgba(35, 28, 72, 0.85);
}
.tt21b.active {
  color: #231c48;
}
.tt21b:focus-visible {
  outline: 2px solid #231c48;
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .tt21bar {
    transition: none;
  }
}
```

**JS:**
```js
/* Ink Slider — toggle .active and slide the ink bar to the active tab.
   Re-positions on viewport resize so the bar stays locked to its button. */
(function () {
  var nav = document.querySelector(".tt21n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var bar = nav.querySelector(".tt21bar");
  var current = null;

  function reposition() {
    if (!current || !bar) return;
    bar.style.left = current.offsetLeft + "px";
    bar.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 02. Neon Electric

**Type:** Pure CSS
**Description:** Each tab owns its own electric accent via a CSS custom property. The active tab lights up with a neon border and a soft outer glow in its color. Pure CSS via radio inputs and `:has()` panel switching.

**HTML:**
```html
<div class="tt22">
  <nav class="tt22n">
    <input type="radio" name="tt22" id="tt22-r1" checked />
    <label class="tt22b" for="tt22-r1" style="--c: #ff3df5">Pulse</label>
    <input type="radio" name="tt22" id="tt22-r2" />
    <label class="tt22b" for="tt22-r2" style="--c: #3df5ff">Wave</label>
    <input type="radio" name="tt22" id="tt22-r3" />
    <label class="tt22b" for="tt22-r3" style="--c: #caff3d">Surge</label>
    <input type="radio" name="tt22" id="tt22-r4" />
    <label class="tt22b" for="tt22-r4" style="--c: #ff913d">Bloom</label>
  </nav>
  <div class="tt22p">Pulse — short, rhythmic bursts of light.</div>
  <div class="tt22p">Wave — continuous oscillating motion.</div>
  <div class="tt22p">Surge — sudden upward power swell.</div>
  <div class="tt22p">Bloom — soft expanding glow front.</div>
</div>
```

**CSS:**
```css
.tt22 {
  background: #0c0c12;
  padding: 22px 18px;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt22n {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt22n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt22b {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: transparent;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-align: center;
  transition:
    color 0.25s,
    border-color 0.25s,
    box-shadow 0.3s,
    background 0.25s;
  white-space: nowrap;
}
.tt22b:hover {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.2);
}
.tt22n input:checked + .tt22b {
  color: var(--c);
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--c) 50%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--c) 25%, transparent);
}
.tt22n input:focus-visible + .tt22b {
  outline: 2px dashed var(--c);
  outline-offset: 2px;
}
.tt22p {
  display: none;
  padding-top: 18px;
  font:
    12px/1.55 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}
.tt22:has(#tt22-r1:checked) .tt22p:nth-of-type(1),
.tt22:has(#tt22-r2:checked) .tt22p:nth-of-type(2),
.tt22:has(#tt22-r3:checked) .tt22p:nth-of-type(3),
.tt22:has(#tt22-r4:checked) .tt22p:nth-of-type(4) {
  display: block;
}
```

### 03. Brutalist Press

**Type:** Pure CSS
**Description:** Heavy uppercase tabs with hard 4px black offset shadows. Active tab presses flush — shadow collapses, button translates 4px down-right, color inverts. Tactile mechanical-keyboard feedback.

**HTML:**
```html
<div class="tt23">
  <nav class="tt23n">
    <input type="radio" name="tt23" id="tt23-r1" checked />
    <label class="tt23b" for="tt23-r1">Build</label>
    <input type="radio" name="tt23" id="tt23-r2" />
    <label class="tt23b" for="tt23-r2">Ship</label>
    <input type="radio" name="tt23" id="tt23-r3" />
    <label class="tt23b" for="tt23-r3">Iterate</label>
  </nav>
  <div class="tt23p">Build — assemble the parts.</div>
  <div class="tt23p">Ship — push it to production.</div>
  <div class="tt23p">Iterate — measure and refine.</div>
</div>
```

**CSS:**
```css
.tt23 {
  background: #fef0c7;
  padding: 26px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt23n {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt23n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt23b {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 3px solid #0a0a0a;
  background: #fff;
  font:
    800 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0a0a0a;
  cursor: pointer;
  text-align: center;
  box-shadow: 4px 4px 0 0 #0a0a0a;
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    background 0.2s,
    color 0.2s;
  white-space: nowrap;
}
.tt23b:hover {
  background: #f4e7b3;
}
.tt23n input:checked + .tt23b {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 0 #0a0a0a;
  background: #0a0a0a;
  color: #fef0c7;
}
.tt23n input:focus-visible + .tt23b {
  outline: 2px dashed #0a0a0a;
  outline-offset: 4px;
}
.tt23p {
  display: none;
  padding-top: 22px;
  font:
    600 13px/1.55 ui-sans-serif,
    system-ui;
  color: #0a0a0a;
}
.tt23:has(#tt23-r1:checked) .tt23p:nth-of-type(1),
.tt23:has(#tt23-r2:checked) .tt23p:nth-of-type(2),
.tt23:has(#tt23-r3:checked) .tt23p:nth-of-type(3) {
  display: block;
}
```

### 04. Chromatic

**Type:** Pure CSS
**Description:** Four color-coded tabs each with a dedicated tint, border, and active-state glow. Violet, rose, cyan, lime — each tab keeps its identity whether active or inactive. Pure CSS.

**HTML:**
```html
<div class="tt24">
  <nav class="tt24n">
    <input type="radio" name="tt24" id="tt24-r1" checked />
    <label class="tt24b tt24-v" for="tt24-r1">Violet</label>
    <input type="radio" name="tt24" id="tt24-r2" />
    <label class="tt24b tt24-r" for="tt24-r2">Rose</label>
    <input type="radio" name="tt24" id="tt24-r3" />
    <label class="tt24b tt24-c" for="tt24-r3">Cyan</label>
    <input type="radio" name="tt24" id="tt24-r4" />
    <label class="tt24b tt24-l" for="tt24-r4">Lime</label>
  </nav>
  <div class="tt24p">Violet — deep, contemplative.</div>
  <div class="tt24p">Rose — warm, inviting.</div>
  <div class="tt24p">Cyan — crisp, technical.</div>
  <div class="tt24p">Lime — fresh, urgent.</div>
</div>
```

**CSS:**
```css
.tt24 {
  background: #0f0f17;
  padding: 24px 20px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt24n {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.tt24n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt24b {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 8px;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  white-space: nowrap;
  border: 1px solid;
}
.tt24-v {
  color: #c4b5fd;
  border-color: rgba(196, 181, 253, 0.3);
  background: rgba(196, 181, 253, 0.06);
}
.tt24-r {
  color: #fda4af;
  border-color: rgba(253, 164, 175, 0.3);
  background: rgba(253, 164, 175, 0.06);
}
.tt24-c {
  color: #67e8f9;
  border-color: rgba(103, 232, 249, 0.3);
  background: rgba(103, 232, 249, 0.06);
}
.tt24-l {
  color: #bef264;
  border-color: rgba(190, 242, 100, 0.3);
  background: rgba(190, 242, 100, 0.06);
}
.tt24n input:checked + .tt24-v {
  background: rgba(196, 181, 253, 0.18);
  border-color: #c4b5fd;
  box-shadow: 0 0 18px rgba(196, 181, 253, 0.35);
}
.tt24n input:checked + .tt24-r {
  background: rgba(253, 164, 175, 0.18);
  border-color: #fda4af;
  box-shadow: 0 0 18px rgba(253, 164, 175, 0.35);
}
.tt24n input:checked + .tt24-c {
  background: rgba(103, 232, 249, 0.18);
  border-color: #67e8f9;
  box-shadow: 0 0 18px rgba(103, 232, 249, 0.35);
}
.tt24n input:checked + .tt24-l {
  background: rgba(190, 242, 100, 0.18);
  border-color: #bef264;
  box-shadow: 0 0 18px rgba(190, 242, 100, 0.35);
}
.tt24n input:focus-visible + .tt24b {
  outline: 2px dashed currentColor;
  outline-offset: 3px;
}
.tt24p {
  display: none;
  padding-top: 20px;
  font:
    13px/1.55 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.7);
}
.tt24:has(#tt24-r1:checked) .tt24p:nth-of-type(1),
.tt24:has(#tt24-r2:checked) .tt24p:nth-of-type(2),
.tt24:has(#tt24-r3:checked) .tt24p:nth-of-type(3),
.tt24:has(#tt24-r4:checked) .tt24p:nth-of-type(4) {
  display: block;
}
```

### 05. VS Code Files

**Type:** Pure CSS
**Description:** IDE-inspired file tabs with language-colored dots and editor chrome. The active tab lifts with a top accent stripe and matches the editor surface, just like VS Code. Pure CSS.

**HTML:**
```html
<div class="tt25">
  <nav class="tt25n">
    <input type="radio" name="tt25" id="tt25-r1" checked />
    <label class="tt25b" for="tt25-r1"
      ><span class="tt25dot" style="--c: #3178c6"></span>app.tsx</label
    >
    <input type="radio" name="tt25" id="tt25-r2" />
    <label class="tt25b" for="tt25-r2"
      ><span class="tt25dot" style="--c: #f0db4f"></span>config.js</label
    >
    <input type="radio" name="tt25" id="tt25-r3" />
    <label class="tt25b" for="tt25-r3"
      ><span class="tt25dot" style="--c: #264de4"></span>styles.css</label
    >
  </nav>
  <div class="tt25body">
    <div class="tt25p">// app.tsx<br />export default App;</div>
    <div class="tt25p">// config.js<br />module.exports = {};</div>
    <div class="tt25p">/* styles.css */<br />:root { color: white; }</div>
  </div>
</div>
```

**CSS:**
```css
.tt25 {
  background: #1e1e1e;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt25n {
  display: flex;
  background: #2d2d2d;
  border-bottom: 1px solid #1e1e1e;
  min-width: 0;
}
.tt25n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt25b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font:
    12px/1 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
  position: relative;
  white-space: nowrap;
  transition:
    background 0.18s,
    color 0.18s;
}
.tt25b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}
.tt25dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}
.tt25n input:checked + .tt25b {
  background: #1e1e1e;
  color: #fff;
  border-bottom: 1px solid #1e1e1e;
  margin-bottom: -1px;
}
.tt25n input:checked + .tt25b::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4fc1ff;
}
.tt25n input:focus-visible + .tt25b {
  outline: 1px dashed #4fc1ff;
  outline-offset: -3px;
}
.tt25body {
  padding: 18px 20px;
}
.tt25p {
  display: none;
  font:
    12px/1.6 ui-monospace,
    monospace;
  color: #d4d4d4;
}
.tt25p:nth-of-type(1) {
  color: #569cd6;
}
.tt25:has(#tt25-r1:checked) .tt25p:nth-of-type(1),
.tt25:has(#tt25-r2:checked) .tt25p:nth-of-type(2),
.tt25:has(#tt25-r3:checked) .tt25p:nth-of-type(3) {
  display: block;
}
```

### 06. iOS Segmented

**Type:** CSS + JS
**Description:** Apple-style segmented control: gray track, white pill that physically slides between segments. JS measures positions live; resize-listener keeps the pill aligned at any width.

**HTML:**
```html
<div class="tt26">
  <nav class="tt26n">
    <span class="tt26pill" aria-hidden="true"></span>
    <button class="tt26b active" data-t>Day</button>
    <button class="tt26b" data-t>Week</button>
    <button class="tt26b" data-t>Month</button>
  </nav>
</div>
```

**CSS:**
```css
.tt26 {
  background: #f2f2f7;
  padding: 32px 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt26n {
  position: relative;
  display: flex;
  background: rgba(120, 120, 128, 0.16);
  border-radius: 9px;
  padding: 2px;
  width: 100%;
  max-width: 380px;
  min-width: 0;
}
.tt26pill {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  background: #fff;
  border-radius: 7px;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    left 0.34s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.34s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.tt26b {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: 600 13px/1 inherit;
  color: #1c1c1e;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
  white-space: nowrap;
}
.tt26b:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
  border-radius: 7px;
}
@media (prefers-reduced-motion: reduce) {
  .tt26pill {
    transition: none;
  }
}
```

**JS:**
```js
/* iOS Segmented — toggle .active and slide white pill between tabs.
   Re-positions on viewport resize so the pill stays locked to its segment. */
(function () {
  var nav = document.querySelector(".tt26n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var pill = nav.querySelector(".tt26pill");
  var current = null;

  function reposition() {
    if (!current || !pill) return;
    pill.style.left = current.offsetLeft + "px";
    pill.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 07. Bento Grid

**Type:** Pure CSS
**Description:** Three-column bento grid where the tabs themselves are the cards. The active card lifts, gains a colored top stripe, and the panel becomes the fourth bento cell underneath. Pure CSS.

**HTML:**
```html
<div class="tt27">
  <div class="tt27grid">
    <input type="radio" name="tt27" id="tt27-r1" checked />
    <label class="tt27card" for="tt27-r1">
      <span class="tt27ttl">Stats</span>
      <span class="tt27sub">Real-time data</span>
    </label>
    <input type="radio" name="tt27" id="tt27-r2" />
    <label class="tt27card" for="tt27-r2">
      <span class="tt27ttl">Inbox</span>
      <span class="tt27sub">12 new</span>
    </label>
    <input type="radio" name="tt27" id="tt27-r3" />
    <label class="tt27card" for="tt27-r3">
      <span class="tt27ttl">Tasks</span>
      <span class="tt27sub">3 pending</span>
    </label>
  </div>
  <div class="tt27p">Stats — daily and weekly metrics summary.</div>
  <div class="tt27p">Inbox — unread messages from your team.</div>
  <div class="tt27p">Tasks — items due in the next 7 days.</div>
</div>
```

**CSS:**
```css
.tt27 {
  background: #0a0a0e;
  padding: 18px 16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt27grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  min-width: 0;
}
.tt27grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt27card {
  position: relative;
  padding: 18px 14px 14px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    transform 0.25s,
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  min-width: 0;
}
.tt27card:hover {
  background: #1f1f28;
  border-color: rgba(255, 255, 255, 0.14);
}
.tt27ttl {
  font:
    700 13px/1 ui-sans-serif,
    system-ui;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt27sub {
  font:
    11px/1 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt27grid input:checked + .tt27card {
  background: #1c1c26;
  border-color: #7c6cff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(124, 108, 255, 0.25);
}
.tt27grid input:focus-visible + .tt27card {
  outline: 2px dashed #7c6cff;
  outline-offset: 3px;
}
.tt27p {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font:
    12px/1.55 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.7);
}
.tt27:has(#tt27-r1:checked) .tt27p:nth-of-type(1),
.tt27:has(#tt27-r2:checked) .tt27p:nth-of-type(2),
.tt27:has(#tt27-r3:checked) .tt27p:nth-of-type(3) {
  display: block;
}
```

### 08. Vertical Dots

**Type:** Pure CSS
**Description:** Sidebar nav with a connecting timeline rule. The active item's dot fills in solid teal with a soft outer glow; inactive dots stay hollow. Vertical layout. Pure CSS.

**HTML:**
```html
<div class="tt28">
  <nav class="tt28n">
    <input type="radio" name="tt28" id="tt28-r1" checked />
    <label class="tt28b" for="tt28-r1"><span class="tt28dot"></span>Profile</label>
    <input type="radio" name="tt28" id="tt28-r2" />
    <label class="tt28b" for="tt28-r2"><span class="tt28dot"></span>Account</label>
    <input type="radio" name="tt28" id="tt28-r3" />
    <label class="tt28b" for="tt28-r3"><span class="tt28dot"></span>Billing</label>
    <input type="radio" name="tt28" id="tt28-r4" />
    <label class="tt28b" for="tt28-r4"><span class="tt28dot"></span>Logs</label>
  </nav>
</div>
```

**CSS:**
```css
.tt28 {
  background: #0d1117;
  padding: 18px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
/* nav padding-left = 30px → that x defines a "rail column" centered at x=15.
   Both the timeline rule and the active dot center on x=15 so they sit on
   the same vertical axis regardless of dot size or label padding. */
.tt28n {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 30px;
  min-width: 0;
}
.tt28n::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgba(56, 189, 248, 0.18);
  border-radius: 1px;
}
.tt28n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt28b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  border-radius: 4px;
  transition:
    color 0.22s,
    background 0.22s;
  white-space: nowrap;
}
.tt28dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, 0.45);
  background: #0d1117;
  flex-shrink: 0;
  /* margin-left = -(button padding-left + dot half-width - line center)
     = -(8 + 6 - 15) = -(-1) ... actually: button starts at nav-padding-left
     (30px). Dot needs left edge at x=9 so center sits at x=15 (line center).
     Button content starts at x=38 (30 + 8 padding). To put dot's left edge
     at x=9, margin-left = 9 - 38 = -29px. */
  margin-left: -29px;
  transition:
    background 0.25s,
    border-color 0.25s,
    box-shadow 0.3s;
  position: relative;
  z-index: 1;
}
.tt28b:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(56, 189, 248, 0.06);
}
.tt28n input:checked + .tt28b {
  color: #7dd3fc;
}
.tt28n input:checked + .tt28b .tt28dot {
  background: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.55);
}
.tt28n input:focus-visible + .tt28b {
  outline: 1px dashed #38bdf8;
  outline-offset: 3px;
}
```

### 09. CRT Terminal

**Type:** Pure CSS
**Description:** Vintage CRT terminal aesthetic: green phosphor text, scanline overlay, macOS traffic lights in the title bar. Active tab shows a blinking caret cursor. Pure CSS.

**HTML:**
```html
<div class="tt29">
  <div class="tt29win">
    <div class="tt29bar">
      <span class="tt29light tt29-r"></span>
      <span class="tt29light tt29-y"></span>
      <span class="tt29light tt29-g"></span>
      <span class="tt29ttl">terminal — bash</span>
    </div>
    <nav class="tt29n">
      <input type="radio" name="tt29" id="tt29-r1" checked />
      <label class="tt29b" for="tt29-r1">~/main</label>
      <input type="radio" name="tt29" id="tt29-r2" />
      <label class="tt29b" for="tt29-r2">~/logs</label>
      <input type="radio" name="tt29" id="tt29-r3" />
      <label class="tt29b" for="tt29-r3">~/cron</label>
    </nav>
    <div class="tt29body">
      <div class="tt29p">$ ls -la<br />drwxr-xr-x src/<br />-rw-r--r-- README.md</div>
      <div class="tt29p">$ tail -f app.log<br />[12:04] OK 200<br />[12:05] OK 200</div>
      <div class="tt29p">$ crontab -l<br />0 * * * * ./sync.sh<br />*/5 * * * * ./ping.sh</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tt29 {
  background: #0a0a0a;
  padding: 18px 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt29win {
  background: #050505;
  border: 1px solid rgba(74, 222, 128, 0.18);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
.tt29bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #111;
  border-bottom: 1px solid rgba(74, 222, 128, 0.12);
}
.tt29light {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.tt29-r {
  background: #ff5f57;
}
.tt29-y {
  background: #febc2e;
}
.tt29-g {
  background: #28c840;
}
.tt29ttl {
  margin-left: 10px;
  font:
    11px/1 ui-monospace,
    monospace;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}
.tt29n {
  display: flex;
  gap: 0;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(74, 222, 128, 0.12);
  min-width: 0;
}
.tt29n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt29b {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font:
    11px/1 ui-monospace,
    monospace;
  color: rgba(74, 222, 128, 0.5);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.2s,
    background 0.2s;
  border-right: 1px solid rgba(74, 222, 128, 0.08);
}
.tt29b:last-of-type {
  border-right: 0;
}
.tt29b:hover {
  color: rgba(74, 222, 128, 0.85);
  background: rgba(74, 222, 128, 0.04);
}
.tt29n input:checked + .tt29b {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}
.tt29n input:focus-visible + .tt29b {
  outline: 1px dashed #4ade80;
  outline-offset: -3px;
}
.tt29body {
  position: relative;
  padding: 14px 14px;
  min-height: 90px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(74, 222, 128, 0.04) 2px,
    rgba(74, 222, 128, 0.04) 3px
  );
}
.tt29p {
  display: none;
  font:
    11px/1.7 ui-monospace,
    monospace;
  color: #4ade80;
  text-shadow: 0 0 4px rgba(74, 222, 128, 0.4);
}
.tt29:has(#tt29-r1:checked) .tt29p:nth-of-type(1),
.tt29:has(#tt29-r2:checked) .tt29p:nth-of-type(2),
.tt29:has(#tt29-r3:checked) .tt29p:nth-of-type(3) {
  display: block;
}
```

### 10. Morph Icon

**Type:** Pure CSS
**Description:** Compact icon-only tabs that expand on activation: the label morphs in via a max-width transition, smoothly widening the active tab inline. Pure CSS, no positional JS.

**HTML:**
```html
<div class="tt30">
  <nav class="tt30n">
    <input type="radio" name="tt30" id="tt30-r1" checked />
    <label class="tt30b" for="tt30-r1">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 12l9-9 9 9M5 10v10h14V10" />
      </svg>
      <span class="tt30l">Home</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r2" />
    <label class="tt30b" for="tt30-r2">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <path d="M21 21l-5-5" />
      </svg>
      <span class="tt30l">Search</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r3" />
    <label class="tt30b" for="tt30-r3">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M3 8h18M3 14h18M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"
        />
      </svg>
      <span class="tt30l">Inbox</span>
    </label>
    <input type="radio" name="tt30" id="tt30-r4" />
    <label class="tt30b" for="tt30-r4">
      <svg class="tt30i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt30l">Profile</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt30 {
  background: #fdf6e9;
  padding: 32px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt30n {
  display: flex;
  gap: 6px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 4px 14px rgba(212, 67, 127, 0.12);
  min-width: 0;
}
.tt30n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt30b {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: #94748a;
  transition:
    background 0.3s,
    color 0.3s,
    gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
}
.tt30b:hover {
  color: #d4437f;
}
.tt30i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt30l {
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s;
}
.tt30n input:checked + .tt30b {
  background: #d4437f;
  color: #fff;
  gap: 8px;
}
.tt30n input:checked + .tt30b .tt30l {
  max-width: 120px;
  opacity: 1;
}
.tt30n input:focus-visible + .tt30b {
  outline: 2px dashed #d4437f;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tt30b,
  .tt30l {
    transition: none;
  }
}
```

### 11. Typewriter

**Type:** Pure CSS
**Description:** Activating a tab triggers a typewriter animation on the panel: text reveals via max-width steps animation, with a blinking cursor at the end. Pure CSS via radio inputs and steps() timing.

**HTML:**
```html
<div class="tt31">
  <nav class="tt31n">
    <input type="radio" name="tt31" id="tt31-r1" checked />
    <label class="tt31b" for="tt31-r1">Greet</label>
    <input type="radio" name="tt31" id="tt31-r2" />
    <label class="tt31b" for="tt31-r2">Status</label>
    <input type="radio" name="tt31" id="tt31-r3" />
    <label class="tt31b" for="tt31-r3">Goodbye</label>
  </nav>
  <div class="tt31body">
    <div class="tt31p"><span class="tt31type">Hello, friend.</span></div>
    <div class="tt31p"><span class="tt31type">Systems nominal.</span></div>
    <div class="tt31p"><span class="tt31type">See you tomorrow.</span></div>
  </div>
</div>
```

**CSS:**
```css
.tt31 {
  background: #1a1625;
  padding: 22px 22px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
}
.tt31n {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 18px;
  min-width: 0;
}
.tt31n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt31b {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  font:
    600 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition:
    color 0.2s,
    border-color 0.2s;
  white-space: nowrap;
}
.tt31b:hover {
  color: rgba(255, 255, 255, 0.85);
}
.tt31n input:checked + .tt31b {
  color: #fbbf24;
  border-bottom-color: #fbbf24;
}
.tt31n input:focus-visible + .tt31b {
  outline: 1px dashed #fbbf24;
  outline-offset: -3px;
}
.tt31body {
  padding: 6px 0;
}
.tt31p {
  display: none;
}
.tt31:has(#tt31-r1:checked) .tt31p:nth-of-type(1),
.tt31:has(#tt31-r2:checked) .tt31p:nth-of-type(2),
.tt31:has(#tt31-r3:checked) .tt31p:nth-of-type(3) {
  display: block;
}
.tt31type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font:
    14px/1.6 ui-monospace,
    monospace;
  color: #fbbf24;
  border-right: 2px solid #fbbf24;
  width: 0;
  animation:
    tt31-type 1.4s steps(20) forwards,
    tt31-blink 0.8s step-end infinite 1.4s;
}
@keyframes tt31-type {
  to {
    width: 100%;
  }
}
@keyframes tt31-blink {
  50% {
    border-right-color: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt31type {
    animation: none;
    width: 100%;
    border-right-color: transparent;
  }
}
```

### 12. Particle Burst

**Type:** CSS + JS
**Description:** Each tab click spawns 8 small color sparks that fly outward and fade. JS positions each particle at the click point; CSS animates trajectory + fade. The active tab is also highlighted with a coral underline.

**HTML:**
```html
<div class="tt32">
  <nav class="tt32n">
    <span class="tt32line" aria-hidden="true"></span>
    <button class="tt32b active" data-t>Spark</button>
    <button class="tt32b" data-t>Bloom</button>
    <button class="tt32b" data-t>Burst</button>
    <button class="tt32b" data-t>Flare</button>
  </nav>
</div>
```

**CSS:**
```css
.tt32 {
  background: #1c1424;
  padding: 36px 18px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt32n {
  position: relative;
  display: flex;
  gap: 0;
  min-width: 0;
  width: 100%;
  max-width: 420px;
}
.tt32line {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: #ff6b6b;
  border-radius: 2px;
  transition:
    left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.tt32b {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font:
    600 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  position: relative;
  transition: color 0.25s;
  white-space: nowrap;
}
.tt32b:hover {
  color: rgba(255, 255, 255, 0.9);
}
.tt32b.active {
  color: #ff6b6b;
}
.tt32b:focus-visible {
  outline: 2px solid #ff6b6b;
  outline-offset: 2px;
  border-radius: 4px;
}
.tt32spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  animation: tt32-fly 0.6s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes tt32-fly {
  from {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) scale(0.3);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt32line {
    transition: none;
  }
  .tt32spark {
    animation: none;
    opacity: 0;
  }
}
```

**JS:**
```js
/* Particle Burst — toggle .active, slide underline, spawn 8 color sparks
   on click. Re-positions the underline on viewport resize. */
(function () {
  var nav = document.querySelector(".tt32n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var line = nav.querySelector(".tt32line");
  var current = null;
  var COLORS = ["#ff6b6b", "#ffd166", "#06d6a0", "#118ab2", "#ef476f"];

  function reposition() {
    if (!current || !line) return;
    line.style.left = current.offsetLeft + "px";
    line.style.width = current.offsetWidth + "px";
  }
  function burst(btn) {
    var rect = btn.getBoundingClientRect();
    var navRect = nav.getBoundingClientRect();
    var cx = rect.left - navRect.left + rect.width / 2;
    var cy = rect.top - navRect.top + rect.height / 2;
    for (var i = 0; i < 8; i++) {
      var s = document.createElement("span");
      s.className = "tt32spark";
      s.style.left = cx + "px";
      s.style.top = cy + "px";
      s.style.background = COLORS[i % COLORS.length];
      var angle = (i / 8) * Math.PI * 2;
      var dist = 32 + Math.random() * 18;
      s.style.setProperty("--dx", Math.cos(angle) * dist + "px");
      s.style.setProperty("--dy", Math.sin(angle) * dist + "px");
      nav.appendChild(s);
      setTimeout(
        (function (n) {
          return function () {
            if (n.parentNode) n.parentNode.removeChild(n);
          };
        })(s),
        700,
      );
    }
  }
  function activate(btn, withBurst) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
    if (withBurst) burst(btn);
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b, true);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial, false);
})();
```

### 13. Specimen No.

**Type:** CSS + JS
**Description:** Tab labels read as letterpress specimen slugs. The active tab is announced by a 4-digit serial that flips digits on activation, and a mint underline draws under the active label.

**HTML:**
```html
<div class="tt01">
  <div class="tt01serial" data-tt01-serial>0317</div>
  <nav class="tt01n">
    <button class="tt01b active" data-t data-tt01="0317">Helvetica</button>
    <button class="tt01b" data-t data-tt01="0211">Bodoni</button>
    <button class="tt01b" data-t data-tt01="0489">Futura</button>
    <span class="tt01rule"> </span>
  </nav>
  <div class="tt01p active" data-p>Cut by Max Miedinger, 1957. Neo-grotesque sans.</div>
  <div class="tt01p" data-p>Cut by Giambattista Bodoni, 1798. Modern serif.</div>
  <div class="tt01p" data-p>Cut by Paul Renner, 1927. Geometric sans.</div>
</div>
```

**CSS:**
```css
.tt01 {
  background: #1f2326;
  padding: 18px 22px 16px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt01serial {
  font:
    800 36px/1 ui-monospace,
    monospace;
  color: #51d5c2;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  transition: opacity 0.15s;
}
.tt01serial.fade {
  opacity: 0.2;
}
.tt01n {
  position: relative;
  display: flex;
  gap: 0;
  border-top: 1.5px solid rgba(81, 213, 194, 0.25);
  border-bottom: 1px solid rgba(81, 213, 194, 0.12);
}
.tt01b {
  flex: 1;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.45);
  cursor: pointer;
  border-right: 1px solid rgba(81, 213, 194, 0.1);
  transition:
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt01b:last-child {
  border-right: 0;
}
.tt01b:hover {
  color: rgba(232, 226, 208, 0.75);
}
.tt01b.active {
  color: #51d5c2;
  transform: translateY(-1px);
}
.tt01rule {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: #51d5c2;
  transition:
    left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt01p {
  display: none;
  padding-top: 12px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia;
  color: rgba(232, 226, 208, 0.7);
}
.tt01p.active {
  display: block;
}
```

**JS:**
```js
/* Specimen No. — toggle .active and update sliding rule + flip serial.
   Re-positions the sliding rule on viewport resize. */
(function () {
  var nav = document.querySelector(".tt01n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var serial = document.querySelector("[data-tt01-serial]");
  var rule = document.querySelector(".tt01rule");
  var pnls = document.querySelectorAll(".tt01p");
  var current = null;

  function reposition() {
    if (!current || !rule) return;
    rule.style.left = current.offsetLeft + "px";
    rule.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
    if (serial && btn.dataset.tt01) {
      serial.classList.add("fade");
      setTimeout(function () {
        serial.textContent = btn.dataset.tt01;
        serial.classList.remove("fade");
      }, 150);
    }
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 14. Cropped Letter

**Type:** Pure CSS
**Description:** The active tab's first letter scales 14→32px, baseline-shifts down, and crops at the tab's right edge. Inactive labels stay at compact display size.

**HTML:**
```html
<div class="tt02">
  <nav class="tt02n">
    <input type="radio" name="tt02" id="tt02-r1" checked />
    <label class="tt02b" for="tt02-r1">
      <span class="tt02hd">Design</span>
    </label>
    <input type="radio" name="tt02" id="tt02-r2" />
    <label class="tt02b" for="tt02-r2">
      <span class="tt02hd">Code</span>
    </label>
    <input type="radio" name="tt02" id="tt02-r3" />
    <label class="tt02b" for="tt02-r3">
      <span class="tt02hd">Preview</span>
    </label>
  </nav>
  <div class="tt02p">Tokens, components, motion.</div>
  <div class="tt02p">Modern CSS, zero deps.</div>
  <div class="tt02p">Live with all states.</div>
</div>
```

**CSS:**
```css
.tt02 {
  background: #1a1a1a;
  padding: 14px 0 16px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt02n {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(232, 226, 208, 0.18);
  border-bottom: 1px solid rgba(232, 226, 208, 0.18);
}
.tt02n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt02b {
  flex: 1 1 0;
  min-width: 0;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(232, 226, 208, 0.12);
  display: block;
}
.tt02n label.tt02b:last-of-type {
  border-right: 0;
}
.tt02hd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  font:
    600 14px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition:
    color 0.25s,
    font-size 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt02b:hover .tt02hd {
  color: rgba(232, 226, 208, 0.85);
}
.tt02n input:checked + .tt02b .tt02hd {
  color: #e8e2d0;
  font-size: 28px;
  transform: translate(-50%, -50%);
}
.tt02p {
  display: none;
  padding: 10px 18px 0;
  font:
    11px/1.55 ui-monospace,
    monospace;
  color: rgba(232, 226, 208, 0.65);
  letter-spacing: 0.04em;
}
.tt02:has(#tt02-r1:checked) .tt02p:nth-of-type(1),
.tt02:has(#tt02-r2:checked) .tt02p:nth-of-type(2),
.tt02:has(#tt02-r3:checked) .tt02p:nth-of-type(3) {
  display: block;
}
```

### 15. Sidebar Nav

**Type:** CSS + JS
**Description:** Vertical icon-driven nav inspired by hand-built dashboard sidebars. Dusty olive accent bar slides between rows; the active icon shifts left and a label slides in from behind it.

**HTML:**
```html
<div class="tt03">
  <nav class="tt03n">
    <button class="tt03b active" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt03l">Home</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M2 12h4l3-9 4 18 3-9h6" />
      </svg>
      <span class="tt03l">Activity</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt03l">People</span>
    </button>
    <button class="tt03b" data-t>
      <svg class="tt03i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="3" />
        <path
          d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.5 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.3 2.6a7 7 0 0 0-2.1 1.2l-2.5-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.5-1a7 7 0 0 0 2.1 1.2L10 21h4l.3-2.6a7 7 0 0 0 2.1-1.2l2.5 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"
        />
      </svg>
      <span class="tt03l">Settings</span>
    </button>
    <span class="tt03acc" aria-hidden="true"> </span>
  </nav>
</div>
```

**CSS:**
```css
.tt03 {
  background: #e8dac5;
  min-height: 240px;
  display: flex;
  align-items: stretch;
  padding: 12px 0 12px 12px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt03n {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.tt03b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  color: rgba(58, 46, 30, 0.55);
  cursor: pointer;
  text-align: left;
  transition:
    color 0.25s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s;
}
.tt03b:hover {
  color: rgba(58, 46, 30, 0.85);
  background: rgba(107, 142, 84, 0.08);
}
.tt03i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt03l {
  opacity: 0.7;
  transform: translateX(-4px);
  transition:
    opacity 0.3s,
    transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt03b.active {
  color: #4a6a3a;
  transform: translateX(4px);
}
.tt03b.active .tt03i {
  transform: scale(1.12);
}
.tt03b.active .tt03l {
  opacity: 1;
  transform: translateX(0);
}
.tt03acc {
  position: absolute;
  left: -12px;
  top: 0;
  width: 4px;
  height: 0;
  background: #6b8e54;
  border-radius: 0 4px 4px 0;
  transition:
    top 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
```

**JS:**
```js
/* Sidebar Nav — toggle .active and slide vertical accent bar.
   Re-positions the accent bar on viewport resize. */
(function () {
  var nav = document.querySelector(".tt03n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var acc = nav.querySelector(".tt03acc");
  var current = null;

  function reposition() {
    if (!current || !acc) return;
    acc.style.top = current.offsetTop + "px";
    acc.style.height = current.offsetHeight + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 16. Halo Tabs

**Type:** Pure CSS
**Description:** Mobile-style nav-bar tabs in a soft white pill. Inactive icons are line-only grey. Activating a tab tints the icon mint, blooms a soft pink halo behind it, and slides the label in to the right of the icon — no underline, just the color shift and the label appearance.

**HTML:**
```html
<div class="tt04">
  <nav class="tt04n">
    <input type="radio" name="tt04" id="tt04-r1" checked />
    <label class="tt04b" for="tt04-r1">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt04l">Home</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r2" />
    <label class="tt04b" for="tt04-r2">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 8l7-5 7 5v3H5z" />
        <path d="M9 11h6v8H9z" />
        <path d="M3 19h18" />
      </svg>
      <span class="tt04l">Strategy</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r3" />
    <label class="tt04b" for="tt04-r3">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M7 3h10v4l-3 5 3 5v4H7v-4l3-5-3-5z" />
        <line x1="9" y1="3" x2="9" y2="3" />
      </svg>
      <span class="tt04l">Period</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r4" />
    <label class="tt04b" for="tt04-r4">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6z" />
        <polyline points="9 12 11 14 15 10" />
      </svg>
      <span class="tt04l">Security</span>
    </label>
    <input type="radio" name="tt04" id="tt04-r5" />
    <label class="tt04b" for="tt04-r5">
      <span class="tt04halo" aria-hidden="true"> </span>
      <svg class="tt04i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="3" />
        <path
          d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.5 1a7 7 0 0 0-2.1-1.2L14 3h-4l-.3 2.6a7 7 0 0 0-2.1 1.2l-2.5-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.5-1a7 7 0 0 0 2.1 1.2L10 21h4l.3-2.6a7 7 0 0 0 2.1-1.2l2.5 1 2-3.4-2-1.6c.1-.4.1-.8.1-1.2z"
        />
      </svg>
      <span class="tt04l">Settings</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt04 {
  background: #f0f1f1;
  padding: 0;
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.tt04n {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 18px 22px;
  background: #fefefe;
  border-radius: 999px;
  margin: 14px;
  flex: 1;
  max-width: 480px;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.12);
  font-size: 1em;
}
.tt04n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt04b {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  color: #d5dadd;
  transition:
    flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s;
}
.tt04b:hover {
  color: #9aa0a4;
}
/* Soft pink halo behind the active icon, top-left offset like the reference */
.tt04halo {
  position: absolute;
  top: 14%;
  left: 22%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fde4ec;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.tt04i {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04l {
  position: relative;
  z-index: 2;
  font:
    800 15px/1 "Nunito",
    ui-sans-serif,
    system-ui;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #2dd4bf;
  /* Hidden until active — slides in to the right of the icon */
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-8px);
  transition:
    max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s 0.1s,
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt04n input:checked + .tt04b {
  flex: 2.6;
  color: #2dd4bf;
}
.tt04n input:checked + .tt04b .tt04halo {
  transform: scale(1);
}
.tt04n input:checked + .tt04b .tt04l {
  max-width: 200px;
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .tt04halo,
  .tt04l,
  .tt04b {
    transition: none;
  }
}
```

### 17. Two Weights

**Type:** Pure CSS
**Description:** Pure type-weight contrast. Inactive sits at 200 hairline, active jumps to 900 black with a subtle scale lift. The brand violet underlines the active label.

**HTML:**
```html
<div class="tt05">
  <nav class="tt05n">
    <input type="radio" name="tt05" id="tt05-r1" checked />
    <label class="tt05b" for="tt05-r1">Overview</label>
    <input type="radio" name="tt05" id="tt05-r2" />
    <label class="tt05b" for="tt05-r2">Activity</label>
    <input type="radio" name="tt05" id="tt05-r3" />
    <label class="tt05b" for="tt05-r3">Settings</label>
  </nav>
  <div class="tt05p">A summary of the project, members, and recent decisions.</div>
  <div class="tt05p">Edits, comments, and team mentions over the last seven days.</div>
  <div class="tt05p">Permissions, integrations, and billing controls.</div>
</div>
```

**CSS:**
```css
.tt05 {
  background: #15151d;
  padding: 26px 22px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt05n {
  display: flex;
  gap: 28px;
}
.tt05n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt05b {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 8px;
  font:
    200 26px/1 ui-sans-serif,
    system-ui;
  color: #e8e2d0;
  cursor: pointer;
  letter-spacing: -0.02em;
  font-variation-settings: "wght" 200;
  transform: scale(0.96);
  transform-origin: bottom left;
  transition:
    font-weight 0.45s,
    font-variation-settings 0.45s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt05b::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #7c5cff;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt05b:hover {
  font-variation-settings: "wght" 400;
}
.tt05n input:checked + .tt05b {
  font-weight: 900;
  font-variation-settings: "wght" 900;
  transform: scale(1);
}
.tt05n input:checked + .tt05b::after {
  transform: scaleX(1);
}
.tt05p {
  display: none;
  padding-top: 16px;
  font:
    12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  max-width: 360px;
}
.tt05:has(#tt05-r1:checked) .tt05p:nth-of-type(1),
.tt05:has(#tt05-r2:checked) .tt05p:nth-of-type(2),
.tt05:has(#tt05-r3:checked) .tt05p:nth-of-type(3) {
  display: block;
}
```

### 18. Underset Caps

**Type:** CSS + JS
**Description:** Tiny uppercase mono labels above a single thick rule. The rule slides under the active label — measured live, like a sliding bookmark on a typecase shelf.

**HTML:**
```html
<div class="tt06">
  <nav class="tt06n">
    <button class="tt06b active" data-t>Volume I</button>
    <button class="tt06b" data-t>Volume II</button>
    <button class="tt06b" data-t>Volume III</button>
    <button class="tt06b" data-t>Volume IV</button>
    <span class="tt06rule"> </span>
  </nav>
  <div class="tt06p active" data-p>The Origins, 1450–1600.</div>
  <div class="tt06p" data-p>The Reformation, 1600–1750.</div>
  <div class="tt06p" data-p>The Industrial Cut, 1750–1900.</div>
  <div class="tt06p" data-p>The Digital Era, 1980 onward.</div>
</div>
```

**CSS:**
```css
.tt06 {
  background: #1a1a1a;
  padding: 28px 22px 22px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt06n {
  position: relative;
  display: flex;
  gap: 24px;
  padding-bottom: 14px;
}
.tt06b {
  border: 0;
  background: transparent;
  padding: 0;
  font:
    700 9px/1 ui-monospace,
    monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.5);
  cursor: pointer;
  transition: color 0.25s;
}
.tt06b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt06b.active {
  color: #e8e2d0;
}
.tt06rule {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 6px;
  background: #c43a32;
  transition:
    left 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt06p {
  display: none;
  padding-top: 18px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
}
.tt06p.active {
  display: block;
}
```

**JS:**
```js
/* Underset Caps — toggle .active and slide horizontal rule under active.
   Re-positions the sliding rule on viewport resize. */
(function () {
  var nav = document.querySelector(".tt06n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var rule = nav.querySelector(".tt06rule");
  var pnls = document.querySelectorAll(".tt06p");
  var current = null;

  function reposition() {
    if (!current || !rule) return;
    rule.style.left = current.offsetLeft + "px";
    rule.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 19. Drop Cap

**Type:** Pure CSS
**Description:** Inactive tabs are mono single-letter initials. The active tab unfolds into a rotating-and-scaling serif drop cap followed by the rest of the word; tail unfolds left-to-right.

**HTML:**
```html
<div class="tt07">
  <nav class="tt07n">
    <input type="radio" name="tt07" id="tt07-r1" checked />
    <label class="tt07b" for="tt07-r1">
      <span class="tt07cap">A</span>
      <span class="tt07rest">rticle</span>
    </label>
    <input type="radio" name="tt07" id="tt07-r2" />
    <label class="tt07b" for="tt07-r2">
      <span class="tt07cap">G</span>
      <span class="tt07rest">allery</span>
    </label>
    <input type="radio" name="tt07" id="tt07-r3" />
    <label class="tt07b" for="tt07-r3">
      <span class="tt07cap">N</span>
      <span class="tt07rest">otes</span>
    </label>
  </nav>
  <div class="tt07p">The body copy of an editorial feature.</div>
  <div class="tt07p">A curated set of plates and engravings.</div>
  <div class="tt07p">Marginalia and footnote annotations.</div>
</div>
```

**CSS:**
```css
.tt07 {
  background: #e8dec8;
  padding: 22px 22px 18px;
  width: 100%;
}
.tt07n {
  display: flex;
  gap: 22px;
  align-items: baseline;
  border-bottom: 1px solid rgba(12, 85, 96, 0.22);
  padding-bottom: 14px;
}
.tt07n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt07b {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  color: #0c5560;
  transition: opacity 0.3s;
}
.tt07cap {
  font:
    900 26px/1 ui-serif,
    Georgia,
    serif;
  color: #0c5560;
  display: inline-block;
  transform-origin: center bottom;
  transition:
    color 0.35s,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt07rest {
  font:
    italic 16px/1 ui-serif,
    Georgia,
    serif;
  color: #0c5560;
  margin-left: 1px;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
  opacity: 0.7;
}
.tt07b {
  opacity: 0.4;
}
.tt07b:hover {
  opacity: 0.78;
}
.tt07n input:checked + .tt07b {
  opacity: 1;
}
.tt07n input:checked + .tt07b .tt07cap {
  color: #d44a2a;
  transform: rotate(-4deg) scale(1.15);
}
.tt07n input:checked + .tt07b .tt07rest {
  max-width: 200px;
}
.tt07p {
  display: none;
  padding-top: 14px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
}
.tt07:has(#tt07-r1:checked) .tt07p:nth-of-type(1),
.tt07:has(#tt07-r2:checked) .tt07p:nth-of-type(2),
.tt07:has(#tt07-r3:checked) .tt07p:nth-of-type(3) {
  display: block;
}
```

### 20. Stencil Cut

**Type:** Pure CSS
**Description:** Active tab is a solid safety-yellow plate stamped on ink. Pure two-color print — black ink on yellow for the active label, muted yellow on ink for inactive. The 2px upward translate gives the yellow plate a small physical lift over the surrounding stage.

**HTML:**
```html
<div class="tt08">
  <nav class="tt08n">
    <input type="radio" name="tt08" id="tt08-r1" />
    <label class="tt08b" for="tt08-r1">
      <span>READ</span>
    </label>
    <input type="radio" name="tt08" id="tt08-r2" checked />
    <label class="tt08b" for="tt08-r2">
      <span>WRITE</span>
    </label>
    <input type="radio" name="tt08" id="tt08-r3" />
    <label class="tt08b" for="tt08-r3">
      <span>SHIP</span>
    </label>
  </nav>
  <div class="tt08p">Drafts, archives, and reference material.</div>
  <div class="tt08p">The current notebook in active edit mode.</div>
  <div class="tt08p">Approvals, releases, and publication state.</div>
</div>
```

**CSS:**
```css
.tt08 {
  background: #1a1a1a;
  padding: 22px 22px 18px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt08n {
  display: flex;
  gap: 8px;
}
.tt08n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt08b {
  flex: 1;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  font:
    900 14px/1 ui-monospace,
    monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245, 203, 26, 0.45);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    color 0.25s,
    background 0.25s,
    transform 0.25s;
}
.tt08b:hover {
  color: rgba(245, 203, 26, 0.8);
}
.tt08n input:checked + .tt08b {
  color: #1a1a1a;
  background: #f5cb1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 -2px rgba(0, 0, 0, 0.4);
}
.tt08p {
  display: none;
  padding-top: 14px;
  font:
    11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  font-style: italic;
}
.tt08:has(#tt08-r1:checked) .tt08p:nth-of-type(1),
.tt08:has(#tt08-r2:checked) .tt08p:nth-of-type(2),
.tt08:has(#tt08-r3:checked) .tt08p:nth-of-type(3) {
  display: block;
}
```

### 21. Bracket Marks

**Type:** CSS + JS
**Description:** The active tab is framed by typographic brackets — `[` on the left, `]` on the right — that physically slide between tabs. A single shared pair of pseudo-elements does the work.

**HTML:**
```html
<div class="tt09">
  <nav class="tt09n" data-tt09>
    <button class="tt09b active" data-t>One</button>
    <button class="tt09b" data-t>Two</button>
    <button class="tt09b" data-t>Three</button>
    <span class="tt09bL">[</span>
    <span class="tt09bR">]</span>
  </nav>
  <div class="tt09p active" data-p>The first marker.</div>
  <div class="tt09p" data-p>The second marker.</div>
  <div class="tt09p" data-p>The third marker.</div>
</div>
```

**CSS:**
```css
.tt09 {
  background: #25222e;
  padding: 24px 22px 18px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt09n {
  position: relative;
  display: flex;
  gap: 18px;
  justify-content: center;
}
.tt09b {
  border: 0;
  background: transparent;
  padding: 6px 8px;
  font:
    600 16px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.5);
  cursor: pointer;
  transition: color 0.3s;
}
.tt09b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt09b.active {
  color: #e8e2d0;
}
.tt09bL,
.tt09bR {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font:
    200 36px/1 ui-serif,
    Georgia,
    serif;
  color: #dc1e3a;
  pointer-events: none;
  transition: left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt09bL {
  left: 0;
}
.tt09bR {
  left: 0;
}
.tt09p {
  display: none;
  padding-top: 16px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
  text-align: center;
}
.tt09p.active {
  display: block;
}
```

**JS:**
```js
/* Bracket Marks — toggle .active and slide [ ] frame around active button.
   Re-positions the brackets on viewport resize. */
(function () {
  var nav = document.querySelector(".tt09n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var bL = nav.querySelector(".tt09bL");
  var bR = nav.querySelector(".tt09bR");
  var pnls = document.querySelectorAll(".tt09p");
  var current = null;

  function reposition() {
    if (!current || !bL || !bR) return;
    bL.style.left = current.offsetLeft - 20 + "px";
    bR.style.left = current.offsetLeft + current.offsetWidth + 4 + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    var i = Array.prototype.indexOf.call(btns, btn);
    pnls.forEach(function (p, j) {
      p.classList.toggle("active", j === i);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 22. Bauhaus Block

**Type:** Pure CSS
**Description:** Each tab is a distinct primary-color block. Active tab rises 6px and casts a hard offset shadow. Color and geometry as the entire indicator.

**HTML:**
```html
<div class="tt10">
  <nav class="tt10n">
    <input type="radio" name="tt10" id="tt10-r1" checked />
    <label class="tt10b tt10-1" for="tt10-r1">FORM</label>
    <input type="radio" name="tt10" id="tt10-r2" />
    <label class="tt10b tt10-2" for="tt10-r2">GRID</label>
    <input type="radio" name="tt10" id="tt10-r3" />
    <label class="tt10b tt10-3" for="tt10-r3">TYPE</label>
    <input type="radio" name="tt10" id="tt10-r4" />
    <label class="tt10b tt10-4" for="tt10-r4">HUE</label>
  </nav>
  <div class="tt10p">Composition, weight, balance.</div>
  <div class="tt10p">Modular columns and rows.</div>
  <div class="tt10p">Specimens and pairings.</div>
  <div class="tt10p">Limited primary palette.</div>
</div>
```

**CSS:**
```css
.tt10 {
  background: #f5ead0;
  padding: 22px 18px 16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt10n {
  display: flex;
  gap: 6px;
}
.tt10n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt10b {
  flex: 1;
  padding: 16px 8px;
  border: 0;
  font:
    800 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  cursor: pointer;
  text-align: center;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}
.tt10-1 {
  background: #c43a32;
  color: #f5ead0;
}
.tt10-2 {
  background: #d4a017;
  color: #1a1a1a;
}
.tt10-3 {
  background: #1a1a1a;
  color: #e8e2d0;
}
.tt10-4 {
  background: #f5ead0;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1.5px #1a1a1a;
}
.tt10b:hover {
  transform: translateY(-2px);
}
.tt10n input:checked + .tt10b {
  transform: translateY(-6px);
  box-shadow: 0 6px 0 #1a1a1a;
}
.tt10n input:checked + .tt10-4 {
  box-shadow:
    inset 0 0 0 1.5px #1a1a1a,
    0 6px 0 #1a1a1a;
}
.tt10p {
  display: none;
  padding-top: 14px;
  font:
    11px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
  font-style: italic;
}
.tt10:has(#tt10-r1:checked) .tt10p:nth-of-type(1),
.tt10:has(#tt10-r2:checked) .tt10p:nth-of-type(2),
.tt10:has(#tt10-r3:checked) .tt10p:nth-of-type(3),
.tt10:has(#tt10-r4:checked) .tt10p:nth-of-type(4) {
  display: block;
}
```

### 23. Reverse Stamp

**Type:** Pure CSS
**Description:** The whole bar is cream-on-crimson. The active tab inverts — crimson ink stamped on cream. A single-frame impact shadow flashes on activation, like a rubber stamp pressing in.

**HTML:**
```html
<div class="tt11">
  <nav class="tt11n">
    <input type="radio" name="tt11" id="tt11-r1" checked />
    <label class="tt11b" for="tt11-r1">Recto</label>
    <input type="radio" name="tt11" id="tt11-r2" />
    <label class="tt11b" for="tt11-r2">Verso</label>
    <input type="radio" name="tt11" id="tt11-r3" />
    <label class="tt11b" for="tt11-r3">Folio</label>
  </nav>
  <div class="tt11p">The right-hand page, traditionally odd-numbered.</div>
  <div class="tt11p">The left-hand page, traditionally even.</div>
  <div class="tt11p">The full leaf — both sides counted as one.</div>
</div>
```

**CSS:**
```css
.tt11 {
  background: #dc1e3a;
  padding: 0;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tt11n {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}
.tt11n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt11b {
  flex: 1;
  padding: 18px 12px;
  border: 0;
  background: #dc1e3a;
  color: #f5ead0;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-right: 1px solid rgba(245, 234, 208, 0.25);
  transition:
    background 0.05s steps(1, end),
    color 0.05s steps(1, end),
    box-shadow 0.4s;
}
.tt11b:last-child {
  border-right: 0;
}
.tt11b:hover {
  background: rgba(245, 234, 208, 0.1);
}
.tt11n input:checked + .tt11b {
  background: #f5ead0;
  color: #dc1e3a;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.4);
  animation: tt11-impact 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes tt11-impact {
  0% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.4);
  }
  20% {
    box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
.tt11p {
  display: none;
  padding: 14px 18px;
  background: #f5ead0;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: #3a3a42;
  flex: 1;
}
.tt11:has(#tt11-r1:checked) .tt11p:nth-of-type(1),
.tt11:has(#tt11-r2:checked) .tt11p:nth-of-type(2),
.tt11:has(#tt11-r3:checked) .tt11p:nth-of-type(3),
.tt11:has(#tt11-r4:checked) .tt11p:nth-of-type(4),
.tt11:has(#tt11-r5:checked) .tt11p:nth-of-type(5),
.tt11:has(#tt11-r6:checked) .tt11p:nth-of-type(6) {
  display: flex;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .tt11n input:checked + .tt11b {
    animation: none;
  }
}
```

### 24. Hairline Frame

**Type:** Pure CSS
**Description:** Hairline-framed tabs in warm-white stock. Active tab's top edge thickens to 4px deep-navy AND four corner dots materialize at the frame's extremes — a Bodoni stroke-contrast move with editorial restraint.

**HTML:**
```html
<div class="tt12">
  <nav class="tt12n">
    <input type="radio" name="tt12" id="tt12-r1" checked />
    <label class="tt12b" for="tt12-r1">
      Drafts
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt12" id="tt12-r2" />
    <label class="tt12b" for="tt12-r2">
      Proofs
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt12" id="tt12-r3" />
    <label class="tt12b" for="tt12-r3">
      Final
      <span class="tt12tk tt12tk-1" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-2" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-3" aria-hidden="true"> </span>
      <span class="tt12tk tt12tk-4" aria-hidden="true"> </span>
    </label>
  </nav>
  <div class="tt12p">Working files in progress.</div>
  <div class="tt12p">Galleys ready for review.</div>
  <div class="tt12p">Approved and locked.</div>
</div>
```

**CSS:**
```css
.tt12 {
  background: #f5f1ea;
  padding: 26px 22px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt12n {
  display: flex;
  gap: 14px;
}
.tt12n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt12b {
  position: relative;
  padding: 14px 24px 11px;
  border: 0.5px solid #1a2842;
  border-top: 4px solid transparent;
  background: transparent;
  font:
    600 13px/1 ui-serif,
    Georgia,
    serif;
  letter-spacing: 0.06em;
  color: rgba(26, 40, 66, 0.5);
  cursor: pointer;
  transition:
    color 0.3s,
    border-top-color 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt12b:hover {
  color: rgba(26, 40, 66, 0.85);
  transform: translateY(-1px);
}
.tt12n input:checked + .tt12b {
  color: #1a2842;
  border-top-color: #1a2842;
}
.tt12tk {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #1a2842;
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity 0.25s 0.1s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
}
.tt12tk-1 {
  top: -3.5px;
  left: -3.5px;
  transform: scale(0);
}
.tt12tk-2 {
  top: -3.5px;
  right: -3.5px;
  transform: scale(0);
}
.tt12tk-3 {
  bottom: -3.5px;
  left: -3.5px;
  transform: scale(0);
}
.tt12tk-4 {
  bottom: -3.5px;
  right: -3.5px;
  transform: scale(0);
}
.tt12n input:checked + .tt12b .tt12tk {
  opacity: 1;
  transform: scale(1);
}
.tt12p {
  display: none;
  padding-top: 16px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: #3a3a42;
}
.tt12:has(#tt12-r1:checked) .tt12p:nth-of-type(1),
.tt12:has(#tt12-r2:checked) .tt12p:nth-of-type(2),
.tt12:has(#tt12-r3:checked) .tt12p:nth-of-type(3) {
  display: block;
}
```

### 25. Pill Nav

**Type:** Pure CSS
**Description:** Mobile-style bottom-nav with hot-pink active pill that grows around the active icon and label. Inactive items show only icons; activation adds the label inside the pill.

**HTML:**
```html
<div class="tt13">
  <nav class="tt13n">
    <input type="radio" name="tt13" id="tt13-r1" checked />
    <label class="tt13b" for="tt13-r1">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt13l">Home</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r2" />
    <label class="tt13b" for="tt13-r2">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <line x1="21" y1="21" x2="16" y2="16" />
      </svg>
      <span class="tt13l">Search</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r3" />
    <label class="tt13b" for="tt13-r3">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 8h-3V5a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3v3H4l1 12h14z" />
      </svg>
      <span class="tt13l">Saved</span>
    </label>
    <input type="radio" name="tt13" id="tt13-r4" />
    <label class="tt13b" for="tt13-r4">
      <svg class="tt13i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt13l">Profile</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt13 {
  background: #1f2326;
  min-height: 220px;
  display: flex;
  align-items: center;
  padding: 28px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.tt13n {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
.tt13n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt13b {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font:
    700 12px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.04em;
  color: rgba(232, 226, 208, 0.55);
  cursor: pointer;
  border-radius: 999px;
  flex: 1;
  transition:
    flex 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
    background 0.25s,
    color 0.25s;
}
.tt13b:hover {
  color: rgba(232, 226, 208, 0.85);
}
.tt13i {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.tt13l {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
}
.tt13n input:checked + .tt13b {
  background: #ec4899;
  color: #1a1a1a;
  flex: 2.4;
}
.tt13n input:checked + .tt13b .tt13i {
  transform: scale(1.1);
}
.tt13n input:checked + .tt13b .tt13l {
  max-width: 120px;
}
```

### 26. Riso Misregistration

**Type:** Pure CSS
**Description:** Two-color riso print on charcoal stock. Active tab is a solid orange block with a cyan plate misregistered 4px below-left, like a zine pulled with the cyan plate slightly off the orange. No swashes, no icons; just two color plates and a typographic punch.

**HTML:**
```html
<div class="tt14">
  <nav class="tt14n">
    <input type="radio" name="tt14" id="tt14-r1" checked />
    <label class="tt14b" for="tt14-r1">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 01</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r2" />
    <label class="tt14b" for="tt14-r2">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 02</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r3" />
    <label class="tt14b" for="tt14-r3">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 03</span>
    </label>
    <input type="radio" name="tt14" id="tt14-r4" />
    <label class="tt14b" for="tt14-r4">
      <span class="tt14plate" aria-hidden="true"> </span>
      <span class="tt14lbl">Issue 04</span>
    </label>
  </nav>
</div>
```

**CSS:**
```css
.tt14 {
  background: #0e0f12;
  padding: 28px 22px;
  font-family: ui-monospace, monospace;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
}
.tt14n {
  display: flex;
  gap: 12px;
  flex: 1;
}
.tt14n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt14b {
  position: relative;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 18px 16px;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 226, 208, 0.55);
  cursor: pointer;
  isolation: isolate;
  transition: color 0.2s;
}
.tt14b:hover {
  color: rgba(232, 226, 208, 0.92);
}
.tt14n input:checked + .tt14b {
  color: #fdf6e9;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.tt14plate {
  position: absolute;
  inset: 0;
  background: #ff5e3a;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.05s steps(1, end);
}
.tt14plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00a8c8;
  transform: translate(-4px, 4px);
  mix-blend-mode: multiply;
  opacity: 0;
}
.tt14n input:checked + .tt14b .tt14plate {
  opacity: 1;
}
.tt14n input:checked + .tt14b .tt14plate::before {
  opacity: 0.92;
  animation: tt14-plate-shift 0.32s cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes tt14-plate-shift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  55% {
    transform: translate(-7px, 7px);
    opacity: 0.92;
  }
  100% {
    transform: translate(-4px, 4px);
    opacity: 0.92;
  }
}
.tt14lbl {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tt14n input:checked + .tt14b .tt14plate::before {
    animation: none;
  }
}
```

### 27. Slab Serif Swash

**Type:** Pure CSS
**Description:** Italic slab-serif labels on warm-cream stock. The active tab gets a deep-emerald swash underline — a curved SVG stroke beneath the word, like a calligrapher's flourish on letterpress vellum.

**HTML:**
```html
<div class="tt15">
  <nav class="tt15n">
    <input type="radio" name="tt15" id="tt15-r1" checked />
    <label class="tt15b" for="tt15-r1">
      Manifesto
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
    <input type="radio" name="tt15" id="tt15-r2" />
    <label class="tt15b" for="tt15-r2">
      Colophon
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
    <input type="radio" name="tt15" id="tt15-r3" />
    <label class="tt15b" for="tt15-r3">
      Errata
      <svg class="tt15s" viewBox="0 0 80 12" aria-hidden="true">
        <path
          d="M 2 8 Q 20 2 40 6 T 78 8"
          fill="none"
          stroke="#0f4f3d"
          stroke-width="1.6"
          stroke-linecap="round"
        />
      </svg>
    </label>
  </nav>
  <div class="tt15p">The founding statement of intent.</div>
  <div class="tt15p">The closing inscription, type & paper notes.</div>
  <div class="tt15p">Corrections issued after the first printing.</div>
</div>
```

**CSS:**
```css
.tt15 {
  background: #fdf4d6;
  padding: 22px 22px 26px;
  font-family: ui-serif, "Times New Roman", serif;
  width: 100%;
}
.tt15n {
  display: flex;
  gap: 28px;
  align-items: flex-end;
}
.tt15n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt15b {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0 0 4px;
  font:
    italic 700 18px/1 ui-serif,
    "Times New Roman",
    serif;
  color: rgba(15, 79, 61, 0.55);
  cursor: pointer;
  transition: color 0.25s;
}
.tt15b:hover {
  color: rgba(15, 79, 61, 0.9);
}
.tt15n input:checked + .tt15b {
  color: #0f4f3d;
}
.tt15s {
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 12px;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition:
    opacity 0.2s,
    stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt15n input:checked + .tt15b .tt15s {
  opacity: 1;
  stroke-dashoffset: 0;
}
.tt15p {
  display: none;
  padding-top: 18px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: #3a3a42;
}
.tt15:has(#tt15-r1:checked) .tt15p:nth-of-type(1),
.tt15:has(#tt15-r2:checked) .tt15p:nth-of-type(2),
.tt15:has(#tt15-r3:checked) .tt15p:nth-of-type(3) {
  display: block;
}
```

### 28. Specimen Card

**Type:** Pure CSS
**Description:** The whole bar reads as a foundry specimen card. Foundry name on the left in tiny mono; tabs on the right are large display glyph specimens. On activation the foundry name pulses a single beat.

**HTML:**
```html
<div class="tt16">
  <nav class="tt16n">
    <div class="tt16meta">
      <div class="tt16name">
        CodeFronts
        <br />Foundry
      </div>
      <div class="tt16id">SPEC · 2026</div>
    </div>
    <div class="tt16tabs">
      <input type="radio" name="tt16" id="tt16-r1" checked />
      <label class="tt16b" for="tt16-r1">Aa</label>
      <input type="radio" name="tt16" id="tt16-r2" />
      <label class="tt16b" for="tt16-r2">Bb</label>
      <input type="radio" name="tt16" id="tt16-r3" />
      <label class="tt16b" for="tt16-r3">Cc</label>
    </div>
  </nav>
  <div class="tt16p">Specimen of the upright Roman cut.</div>
  <div class="tt16p">Specimen of the bold cut.</div>
  <div class="tt16p">Specimen of the small caps cut.</div>
</div>
```

**CSS:**
```css
.tt16 {
  background: #1a1a1a;
  padding: 16px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt16n {
  display: flex;
  align-items: stretch;
  gap: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(232, 226, 208, 0.18);
}
.tt16n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt16meta {
  padding-right: 22px;
  border-right: 1px solid rgba(232, 226, 208, 0.18);
  transition: opacity 0.4s;
}
.tt16name {
  font:
    800 11px/1.3 ui-monospace,
    monospace;
  color: #e8e2d0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tt16id {
  font:
    600 9px/1 ui-monospace,
    monospace;
  color: rgba(232, 226, 208, 0.5);
  margin-top: 6px;
  letter-spacing: 0.2em;
}
.tt16tabs {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.tt16b {
  border: 0;
  background: transparent;
  padding: 0;
  font:
    700 28px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.4);
  cursor: pointer;
  transition:
    color 0.3s,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tt16b:hover {
  color: rgba(232, 226, 208, 0.8);
}
.tt16n input:checked + .tt16b {
  color: #c43a32;
  transform: scale(1.15);
}
.tt16p {
  display: none;
  padding-top: 12px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(232, 226, 208, 0.7);
}
.tt16:has(#tt16-r1:checked) .tt16p:nth-of-type(1),
.tt16:has(#tt16-r2:checked) .tt16p:nth-of-type(2),
.tt16:has(#tt16-r3:checked) .tt16p:nth-of-type(3) {
  display: block;
}
```

### 29. Sliding Pill

**Type:** CSS + JS
**Description:** Icon + label tabs on cream stock. A solid indigo pill is the indicator; it physically slides between tabs on click, with the active label inverting to cream.

**HTML:**
```html
<div class="tt17">
  <nav class="tt17n">
    <span class="tt17pill" aria-hidden="true"> </span>
    <button class="tt17b active" data-t>
      <svg class="tt17i" viewBox="0 0 24 24" aria-hidden="true">
        <rect x="3" y="3" width="7" height="7" />
        <rect x="14" y="3" width="7" height="7" />
        <rect x="3" y="14" width="7" height="7" />
        <rect x="14" y="14" width="7" height="7" />
      </svg>
      <span class="tt17l">Grid</span>
    </button>
    <button class="tt17b" data-t>
      <svg class="tt17i" viewBox="0 0 24 24" aria-hidden="true">
        <line x1="8" y1="6" x2="21" y2="6" />
        <line x1="8" y1="12" x2="21" y2="12" />
        <line x1="8" y1="18" x2="21" y2="18" />
        <circle cx="4" cy="6" r="1" />
        <circle cx="4" cy="12" r="1" />
        <circle cx="4" cy="18" r="1" />
      </svg>
      <span class="tt17l">List</span>
    </button>
    <button class="tt17b" data-t>
      <svg class="tt17i" viewBox="0 0 24 24" aria-hidden="true">
        <rect x="3" y="4" width="18" height="6" rx="1" />
        <rect x="3" y="14" width="18" height="6" rx="1" />
      </svg>
      <span class="tt17l">Cards</span>
    </button>
  </nav>
</div>
```

**CSS:**
```css
.tt17 {
  background: #f4f3ee;
  padding: 28px 22px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
}
.tt17n {
  position: relative;
  display: flex;
  gap: 0;
  padding: 6px;
  background: rgba(59, 58, 140, 0.06);
  border-radius: 999px;
  flex: 1;
}
.tt17pill {
  position: absolute;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: 0;
  background: #3b3a8c;
  border-radius: 999px;
  transition:
    left 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 0;
}
.tt17b {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  font:
    600 13px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.02em;
  color: rgba(59, 58, 140, 0.65);
  cursor: pointer;
  transition: color 0.3s 0.05s;
}
.tt17b:hover {
  color: rgba(59, 58, 140, 0.95);
}
.tt17b.active {
  color: #f4f3ee;
}
.tt17i {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
```

**JS:**
```js
/* Sliding Pill — toggle .active and slide solid pill between tabs.
   Re-positions the pill on viewport resize. */
(function () {
  var nav = document.querySelector(".tt17n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var pill = nav.querySelector(".tt17pill");
  var current = null;

  function reposition() {
    if (!current || !pill) return;
    pill.style.left = current.offsetLeft + "px";
    pill.style.width = current.offsetWidth + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    reposition();
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", reposition);
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 30. Folio Fold

**Type:** Pure CSS
**Description:** Inactive tabs are flat sand-colored rectangles on charcoal. The active tab's top-right corner physically folds down 18px via clip-path with a darker fold-underside triangle, lifts 4px above its siblings, and shows a small fold preview on hover. Inactive tabs preview an 8px fold on hover so the mechanic is discoverable.

**HTML:**
```html
<div class="tt18">
  <nav class="tt18n">
    <input type="radio" name="tt18" id="tt18-r1" checked />
    <label class="tt18b" for="tt18-r1">
      Page 1
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt18" id="tt18-r2" />
    <label class="tt18b" for="tt18-r2">
      Page 2
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
    <input type="radio" name="tt18" id="tt18-r3" />
    <label class="tt18b" for="tt18-r3">
      Page 3
      <span class="tt18fold" aria-hidden="true"> </span>
    </label>
  </nav>
  <div class="tt18p">The opening recto.</div>
  <div class="tt18p">The continuation.</div>
  <div class="tt18p">The closing leaf.</div>
</div>
```

**CSS:**
```css
.tt18 {
  background: #25222e;
  padding: 26px 22px 22px;
  font-family: ui-serif, Georgia, serif;
  width: 100%;
}
.tt18n {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.tt18n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt18b {
  position: relative;
  flex: 1;
  padding: 16px 18px;
  border: 0;
  background: #d4a574;
  font:
    600 13px/1 ui-serif,
    Georgia,
    serif;
  color: rgba(26, 26, 26, 0.55);
  cursor: pointer;
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition:
    clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    color 0.25s,
    transform 0.3s,
    box-shadow 0.4s,
    background 0.25s;
}
.tt18b:hover {
  color: rgba(26, 26, 26, 0.9);
  background: #dcb084;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.tt18n input:checked + .tt18b {
  color: #1a1a1a;
  background: #e6c39c;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transform: translateY(-4px);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.45),
    0 -2px 0 rgba(255, 255, 255, 0.18) inset;
}
.tt18fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #1c1a24;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition:
    opacity 0.25s 0.2s,
    width 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.tt18b:hover .tt18fold {
  opacity: 0.85;
  width: 8px;
  height: 8px;
}
.tt18n input:checked + .tt18b .tt18fold {
  opacity: 1;
  width: 18px;
  height: 18px;
}
.tt18p {
  display: none;
  padding-top: 14px;
  font:
    italic 12px/1.6 ui-serif,
    Georgia;
  color: rgba(212, 165, 116, 0.85);
}
.tt18:has(#tt18-r1:checked) .tt18p:nth-of-type(1),
.tt18:has(#tt18-r2:checked) .tt18p:nth-of-type(2),
.tt18:has(#tt18-r3:checked) .tt18p:nth-of-type(3) {
  display: block;
}
```

### 31. Velvet Ribbon

**Type:** CSS + JS
**Description:** Icon nav on warm-linen stock with a velvet aubergine ribbon trimmed in gilt. The ribbon hangs down from the top rail directly above the active icon — measured live so it stays perfectly aligned at any stage width. Jewel-toned, club-bookplate atmosphere.

**HTML:**
```html
<div class="tt19">
  <nav class="tt19n">
    <span class="tt19rail" aria-hidden="true"> </span>
    <span class="tt19ribbon" aria-hidden="true"> </span>
    <button class="tt19b active" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 11l9-8 9 8v10a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" />
      </svg>
      <span class="tt19l">Home</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="11" cy="11" r="7" />
        <line x1="21" y1="21" x2="16" y2="16" />
      </svg>
      <span class="tt19l">Find</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <path
          d="M9 11h.01M15 11h.01M9.5 15a3.5 3.5 0 0 0 5 0M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0z"
        />
      </svg>
      <span class="tt19l">Help</span>
    </button>
    <button class="tt19b" data-t>
      <svg class="tt19i" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="8" r="4" />
        <path d="M3 21v-2a7 7 0 0 1 7-7h4a7 7 0 0 1 7 7v2" />
      </svg>
      <span class="tt19l">Me</span>
    </button>
  </nav>
</div>
```

**CSS:**
```css
.tt19 {
  background: #f5efe0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  min-height: 220px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.tt19n {
  position: relative;
  flex: 1;
  display: flex;
  padding: 28px 12px 24px;
  box-sizing: border-box;
  min-width: 0;
}
/* Top rail running edge-to-edge — the "shelf" the ribbon hangs from */
.tt19rail {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 3px;
  background: #3d1e4a;
  pointer-events: none;
}
/* The ribbon — JS positions it horizontally to track the active button.
   It hangs from the top rail and overlaps the icon column behind it.
   Height is sized so icon + label both sit comfortably inside it with
   breathing room above the triangular tail. */
.tt19ribbon {
  position: absolute;
  top: 28px;
  width: 56px;
  height: 84px;
  background: #3d1e4a;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 50% 100%, 0 calc(100% - 10px));
  filter: drop-shadow(0 4px 8px rgba(61, 30, 74, 0.4));
  pointer-events: none;
  transition: left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Single gilt hem stripe across the ribbon, just below the label.
   Echoes the aubergine rail above and reads as a bookbinder's gilt edge. */
.tt19ribbon::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 14px;
  height: 1.5px;
  background: #e6c149;
  z-index: 2;
}
.tt19b {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 12px;
  min-width: 0;
  border: 0;
  background: transparent;
  font:
    700 10px/1 ui-sans-serif,
    system-ui;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(61, 30, 74, 0.5);
  cursor: pointer;
  transition: color 0.3s;
}
.tt19b:hover {
  color: rgba(61, 30, 74, 0.85);
}
.tt19i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    stroke 0.3s;
}
.tt19l {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Active state: icon + label go cream on aubergine (both sit inside ribbon
   body, with the gilt hem stripe between the label and the triangular tail). */
.tt19b.active {
  color: #f5efe0;
}
.tt19b.active .tt19i {
  stroke: #f5efe0;
}
@media (prefers-reduced-motion: reduce) {
  .tt19ribbon {
    transition: none;
  }
}
```

**JS:**
```js
/* Velvet Ribbon — toggle .active and slide ribbon centered above active icon.
   Re-measures on viewport resize so the ribbon stays aligned at any width. */
(function () {
  var nav = document.querySelector(".tt19n");
  if (!nav) return;
  var btns = nav.querySelectorAll("[data-t]");
  var ribbon = nav.querySelector(".tt19ribbon");
  var current = null;

  function position(btn) {
    if (!ribbon || !btn) return;
    var w = ribbon.offsetWidth || 56;
    ribbon.style.left = btn.offsetLeft + btn.offsetWidth / 2 - w / 2 + "px";
  }
  function activate(btn) {
    current = btn;
    btns.forEach(function (b) {
      b.classList.toggle("active", b === btn);
    });
    position(btn);
  }
  btns.forEach(function (b) {
    b.addEventListener("click", function () {
      activate(b);
    });
  });
  window.addEventListener("resize", function () {
    position(current);
  });
  var initial = nav.querySelector("[data-t].active") || btns[0];
  if (initial) activate(initial);
})();
```

### 32. Inset Type

**Type:** Pure CSS
**Description:** Active label sits inside a chiseled negative-space well. Inset shadow stack on a darker rectangle gives the impression letters are carved into brass-tinted slate. Pure CSS box-shadow, no images.

**HTML:**
```html
<div class="tt20">
  <nav class="tt20n">
    <input type="radio" name="tt20" id="tt20-r1" checked />
    <label class="tt20b" for="tt20-r1">Etch</label>
    <input type="radio" name="tt20" id="tt20-r2" />
    <label class="tt20b" for="tt20-r2">Engrave</label>
    <input type="radio" name="tt20" id="tt20-r3" />
    <label class="tt20b" for="tt20-r3">Emboss</label>
  </nav>
  <div class="tt20p">Acid bites the plate to print recessed lines.</div>
  <div class="tt20p">A burin cuts directly into the metal surface.</div>
  <div class="tt20p">Pressure raises the paper into a relief.</div>
</div>
```

**CSS:**
```css
.tt20 {
  background: #3a3a42;
  padding: 22px 22px 18px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.tt20n {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #2a2a30;
  border-radius: 4px;
}
.tt20n input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tt20b {
  flex: 1;
  padding: 14px 12px;
  border: 0;
  background: transparent;
  font:
    800 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 161, 94, 0.6);
  cursor: pointer;
  border-radius: 3px;
  transition:
    color 0.25s,
    background 0.3s,
    box-shadow 0.3s;
}
.tt20b:hover {
  color: rgba(201, 161, 94, 0.95);
}
.tt20n input:checked + .tt20b {
  background: #1f1f24;
  color: #c9a15e;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.55),
    inset -1px -1px 2px rgba(255, 255, 255, 0.08);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}
.tt20p {
  display: none;
  padding-top: 14px;
  font:
    italic 11px/1.6 ui-serif,
    Georgia,
    serif;
  color: rgba(201, 161, 94, 0.8);
}
.tt20:has(#tt20-r1:checked) .tt20p:nth-of-type(1),
.tt20:has(#tt20-r2:checked) .tt20p:nth-of-type(2),
.tt20:has(#tt20-r3:checked) .tt20p:nth-of-type(3) {
  display: block;
}
```

---
## 20 CSS Tags & Chips Designs

URL: https://codefronts.com/snippets/css-tags-chips/
Description: 20 hand-coded CSS tags and chips designs — removable filter, autocomplete input, status pulse, drag-to-reorder, marquee, undo and more. Semantic HTML, copy-paste ready.
Demo count: 20

### 01. Removable Pill

**Type:** Pure CSS
**Description:** Three filter chips with × buttons that actually remove the chip — pure CSS via :has(:checked) hiding the parent. The canonical filter pattern, working without a single line of JS.

**HTML:**
```html
<div class="ctc-rem">
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>React</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>TypeScript</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
  <label class="ctc-rem-chip">
    <input type="checkbox" hidden />
    <span>Astro</span>
    <span class="ctc-rem-x" aria-hidden="true">×</span>
  </label>
</div>
```

**CSS:**
```css
.ctc-rem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-rem-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: rgba(124, 108, 255, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.3);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.2s;
}

.ctc-rem-chip:hover {
  background: rgba(124, 108, 255, 0.22);
}

.ctc-rem-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s;
}

.ctc-rem-chip:hover .ctc-rem-x {
  background: rgba(255, 255, 255, 0.18);
}

.ctc-rem-chip:has(:checked) {
  display: none;
}
```

### 02. Magnetic Hover

**Type:** Pure CSS
**Description:** On hover the chip text drifts toward the cursor edge via a CSS-only "magnet" trick — purely transition-based, no pointer math, no JS.

**HTML:**
```html
<div class="ctc-mag">
  <a href="#" class="ctc-mag-chip"><span>Hover me</span></a>
  <a href="#" class="ctc-mag-chip"><span>And me</span></a>
  <a href="#" class="ctc-mag-chip"><span>Try it</span></a>
</div>
```

**CSS:**
```css
.ctc-mag {
  display: flex;
  gap: 10px;
}

.ctc-mag-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #f0eeff;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.ctc-mag-chip span {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}

.ctc-mag-chip:hover {
  background: #2a2a3e;
  border-color: #7c6cff;
}

.ctc-mag-chip:hover span {
  transform: translateX(3px) scale(1.05);
}

.ctc-mag-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(124, 108, 255, 0.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.25s;
}

.ctc-mag-chip:hover::before {
  opacity: 1;
}
```

### 03. Sliding Border

**Type:** Pure CSS
**Description:** A real @property-animated conic gradient traces around the chip on hover — true CSS angle animation, not the keyframes-on-position hack everyone else uses.

**HTML:**
```html
<a href="#" class="ctc-slide">
  <span>Premium</span>
</a>
```

**CSS:**
```css
.ctc-slide {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: #15151d;
  color: #f0eeff;
  font:
    600 13px/1 system-ui,
    sans-serif;
  text-decoration: none;
  isolation: isolate;
}

.ctc-slide::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--ctc-angle), #7c6cff, #ff6c8a, #2eb88a, #7c6cff);
  z-index: -1;
}

.ctc-slide:hover {
  animation: ctc-slide-spin 2.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-slide-spin { to { --ctc-angle: 360deg; } }

```

### 04. Liquid Fill

**Type:** Pure CSS
**Description:** Outline chip whose interior fills with brand colour from left-to-right on hover. Text colour inverts at the fill boundary using mix-blend-mode: difference.

**HTML:**
```html
<a href="#" class="ctc-liquid"><span>FILTER</span></a>
```

**CSS:**
```css
.ctc-liquid {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border: 1.5px solid #00e5ff;
  border-radius: 6px;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  color: #00e5ff;
  text-decoration: none;
  overflow: hidden;
  background: #0a0a18;
}

.ctc-liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  right: auto;
  width: 0;
  background: #00e5ff;
  transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.ctc-liquid:hover::before {
  width: 100%;
}

.ctc-liquid span {
  position: relative;
  mix-blend-mode: difference;
  color: #fff;
}
```

### 05. Stack of Three

**Type:** Pure CSS
**Description:** Chip rendered as three stacked layers offset by 2px each — depth illusion. On hover the layers fan out diagonally. Pure CSS via two ::before/::after pseudo-elements.

**HTML:**
```html
<a href="#" class="ctc-stack">DESIGN</a>
```

**CSS:**
```css
.ctc-stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: #ff6c8a;
  color: #0a0a0a;
  border-radius: 4px;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: transform 0.3s ease;
  z-index: 3;
}

.ctc-stack::before,
.ctc-stack::after {
  content: "DESIGN";
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  transition: transform 0.3s ease;
}

.ctc-stack::before {
  background: #f5a84a;
  transform: translate(2px, 2px);
  z-index: -1;
  color: transparent;
}

.ctc-stack::after {
  background: #2eb88a;
  transform: translate(4px, 4px);
  z-index: -2;
  color: transparent;
}

.ctc-stack:hover {
  transform: translate(-2px, -2px);
}

.ctc-stack:hover::before {
  transform: translate(4px, 4px);
}

.ctc-stack:hover::after {
  transform: translate(8px, 8px);
}
```

### 06. Notch Chip

**Type:** Pure CSS
**Description:** Chip with a triangular notch cut into the left edge using clip-path — a real shape, not a background trick. Reads as a luggage tag or boarding-pass entry.

**HTML:**
```html
<a href="#" class="ctc-notch">
  <span class="ctc-notch-hole" aria-hidden="true"></span>
  <span class="ctc-notch-text">FIRST CLASS</span>
</a>
```

**CSS:**
```css
.ctc-notch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 28px;
  background: #ffd479;
  color: #0a0a0a;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.16em;
  text-decoration: none;
  clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 12px 100%, 0% 50%);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.ctc-notch-hole {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.ctc-notch:hover {
  transform: translateX(2px);
  background: #ffe4a3;
}
```

### 07. Glassmorphic

**Type:** Pure CSS
**Description:** Frosted-glass chip with backdrop-blur over a coloured page background. Translucent surface, white border, soft inner highlight.

**HTML:**
```html
<div class="ctc-glass-bg">
  <a href="#" class="ctc-glass">Glass</a>
  <a href="#" class="ctc-glass">Frosted</a>
  <a href="#" class="ctc-glass">Blur</a>
</div>
```

**CSS:**
```css
.ctc-glass-bg {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c6cff 0%, #ff6c8a 100%);
}

.ctc-glass {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  transition: background 0.2s;
}

.ctc-glass:hover {
  background: rgba(255, 255, 255, 0.28);
}
```

### 08. Aurora Outline

**Type:** Pure CSS
**Description:** Continuously rotating conic-gradient border (violet → pink → mint) using @property for true angle animation. The chip stays still, only the rim rotates. Honours prefers-reduced-motion.

**HTML:**
```html
<a href="#" class="ctc-aurora">
  <span>NEW</span>
</a>
```

**CSS:**
```css
.ctc-aurora {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: #0d0d16;
  color: #fff;
  font:
    700 11px/1 ui-monospace,
    monospace;
  letter-spacing: 0.18em;
  text-decoration: none;
  isolation: isolate;
  --ctc-aurora-angle: 0deg;
  animation: ctc-aurora-rotate 6s linear infinite;
}

.ctc-aurora::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--ctc-aurora-angle), #7c6cff, #ff6c8a, #2eb88a, #7c6cff);
  z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-aurora-rotate { to { --ctc-aurora-angle: 360deg; } }

```

### 09. Pixel Grid

**Type:** Pure CSS
**Description:** Chip background is a tiny dotted CSS pattern reading as retro/print. On hover the dot density increases via background-size transition.

**HTML:**
```html
<a href="#" class="ctc-pixel">RETRO</a>
```

**CSS:**
```css
.ctc-pixel {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 2px solid #f5a84a;
  border-radius: 4px;
  background-color: #1a1410;
  background-image: radial-gradient(#f5a84a 1px, transparent 1px);
  background-size: 8px 8px;
  color: #f5a84a;
  font:
    700 12px/1 ui-monospace,
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition:
    background-size 0.4s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.ctc-pixel:hover {
  background-size: 4px 4px;
  color: #ffd479;
  border-color: #ffd479;
}
```

### 10. Brutalist Stamp

**Type:** Pure CSS
**Description:** Hard-edged offset-shadow chip with mono font and a hot-pink shadow. Press collapses into the shadow on click. Brutalist design system fixture.

**HTML:**
```html
<a href="#" class="ctc-brut">SHIPPED</a>
```

**CSS:**
```css
.ctc-brut {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: #fff7ed;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  font:
    700 12px/1 "Courier New",
    monospace;
  letter-spacing: 0.14em;
  text-decoration: none;
  box-shadow: 5px 5px 0 #ff3d6e;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

.ctc-brut:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #ff3d6e;
}

.ctc-brut:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 #ff3d6e;
}
```

### 11. Gradient Edge

**Type:** Pure CSS
**Description:** Solid dark chip whose only accent is a thin gradient line on the bottom edge — minimalism with a single unmistakable signal. Fades up on hover.

**HTML:**
```html
<div class="ctc-edge">
  <a href="#" class="ctc-edge-chip">Frontend</a>
  <a href="#" class="ctc-edge-chip">Backend</a>
  <a href="#" class="ctc-edge-chip">DevOps</a>
</div>
```

**CSS:**
```css
.ctc-edge {
  display: flex;
  gap: 8px;
}

.ctc-edge-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #15151d;
  color: #c4b5fd;
  border-radius: 4px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  overflow: hidden;
  transition:
    background 0.2s,
    color 0.2s;
}

.ctc-edge-chip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #7c6cff, #ff6c8a);
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.ctc-edge-chip:hover {
  background: #1f1f2e;
  color: #fff;
}

.ctc-edge-chip:hover::after {
  transform: scaleX(1);
}
```

### 12. Status Pulse

**Type:** Pure CSS
**Description:** Status chip with a coloured leading dot that pulses for live/active state. Different colours = different states (success, warning, error, info). The standard health-indicator pattern.

**HTML:**
```html
<div class="ctc-status">
  <span class="ctc-status-chip ctc-status-live">
    <span class="ctc-status-dot" aria-hidden="true"></span>Live
  </span>
  <span class="ctc-status-chip ctc-status-warn">
    <span class="ctc-status-dot" aria-hidden="true"></span>Degraded
  </span>
  <span class="ctc-status-chip ctc-status-err">
    <span class="ctc-status-dot" aria-hidden="true"></span>Down
  </span>
  <span class="ctc-status-chip ctc-status-info">
    <span class="ctc-status-dot" aria-hidden="true"></span>Maintenance
  </span>
</div>
```

**CSS:**
```css
.ctc-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font:
    600 11px/1 system-ui,
    sans-serif;
  border: 1px solid;
}

.ctc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
}

.ctc-status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: ctc-status-ping 1.6s ease-out infinite;
}

.ctc-status-live {
  background: rgba(46, 204, 138, 0.12);
  color: #2ecc8a;
  border-color: rgba(46, 204, 138, 0.35);
}

.ctc-status-live .ctc-status-dot {
  background: #2ecc8a;
}

.ctc-status-warn {
  background: rgba(245, 168, 74, 0.12);
  color: #f5a84a;
  border-color: rgba(245, 168, 74, 0.35);
}

.ctc-status-warn .ctc-status-dot {
  background: #f5a84a;
}

.ctc-status-err {
  background: rgba(255, 61, 110, 0.12);
  color: #ff6c8a;
  border-color: rgba(255, 61, 110, 0.35);
}

.ctc-status-err .ctc-status-dot {
  background: #ff3d6e;
}

.ctc-status-info {
  background: rgba(96, 165, 250, 0.12);
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.35);
}

.ctc-status-info .ctc-status-dot {
  background: #60a5fa;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-status-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}

```

### 13. Drag to Reorder

**Type:** Light JS
**Description:** Three chips that can be drag-reordered with real pointer math — no library. Keyboard accessible: Tab to focus, ←/→ to swap with neighbour. The full reorder pattern.

**HTML:**
```html
<ul class="ctc-drag" role="listbox" aria-label="Reorder tags">
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>Frontend</li>
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>Backend</li>
  <li class="ctc-drag-chip" tabindex="0" data-ctc-drag>DevOps</li>
</ul>
```

**CSS:**
```css
.ctc-drag {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctc-drag-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #1f1f2e;
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition:
    transform 0.18s ease,
    background 0.2s;
}

.ctc-drag-chip:hover {
  background: rgba(124, 108, 255, 0.18);
}

.ctc-drag-chip.is-dragging {
  cursor: grabbing;
  background: #7c6cff;
  color: #fff;
  z-index: 2;
  transition: none;
}

.ctc-drag-chip:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-drag").forEach(function (list) {
    var dragged = null;
    list.querySelectorAll("[data-ctc-drag]").forEach(function (chip) {
      chip.addEventListener("pointerdown", function (e) {
        dragged = chip;
        chip.classList.add("is-dragging");
        chip.setPointerCapture(e.pointerId);
      });
      chip.addEventListener("pointermove", function (e) {
        if (dragged !== chip) return;
        var siblings = Array.from(list.children).filter(function (c) {
          return c !== chip;
        });
        for (var i = 0; i < siblings.length; i++) {
          var rect = siblings[i].getBoundingClientRect();
          if (e.clientX > rect.left && e.clientX < rect.right) {
            var dragRect = chip.getBoundingClientRect();
            if (e.clientX < rect.left + rect.width / 2) {
              list.insertBefore(chip, siblings[i]);
            } else {
              list.insertBefore(chip, siblings[i].nextSibling);
            }
            break;
          }
        }
      });
      chip.addEventListener("pointerup", function () {
        chip.classList.remove("is-dragging");
        dragged = null;
      });
      chip.addEventListener("keydown", function (e) {
        var siblings = Array.from(list.children);
        var idx = siblings.indexOf(chip);
        if (e.key === "ArrowLeft" && idx > 0) {
          e.preventDefault();
          list.insertBefore(chip, siblings[idx - 1]);
          chip.focus();
        } else if (e.key === "ArrowRight" && idx < siblings.length - 1) {
          e.preventDefault();
          list.insertBefore(chip, siblings[idx + 1].nextSibling);
          chip.focus();
        }
      });
    });
  });
})();
```

### 14. Tag Input

**Type:** Light JS
**Description:** Type to add a chip; Backspace on empty input removes the last chip. Real autocomplete dropdown filtered live by input — the full filter-input pattern with aria-controls/expanded.

**HTML:**
```html
<div class="ctc-input">
  <ul class="ctc-input-chips" role="list"></ul>
  <input
    type="text"
    class="ctc-input-field"
    placeholder="Type a language…"
    aria-label="Add a language tag"
    aria-controls="ctc-input-list"
    aria-expanded="false"
    autocomplete="off"
  />
  <ul class="ctc-input-list" id="ctc-input-list" role="listbox" hidden></ul>
</div>
```

**CSS:**
```css
.ctc-input {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  width: 280px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.ctc-input:focus-within {
  border-color: #7c6cff;
}

.ctc-input-chips {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ctc-input-chips li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  background: rgba(124, 108, 255, 0.18);
  color: #c4b5fd;
  border-radius: 4px;
  font:
    600 11px/1 system-ui,
    sans-serif;
}

.ctc-input-chips button {
  background: transparent;
  border: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

.ctc-input-field {
  flex: 1;
  min-width: 60px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font:
    500 12px/1 system-ui,
    sans-serif;
  padding: 4px 0;
}

.ctc-input-field::placeholder {
  color: #b8b6d4;
}

.ctc-input-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  z-index: 5;
  max-height: 160px;
  overflow: auto;
}

.ctc-input-list[hidden] {
  display: none;
}

.ctc-input-list li {
  padding: 6px 10px;
  border-radius: 4px;
  font:
    500 12px/1 system-ui,
    sans-serif;
  color: #c4b5fd;
  cursor: pointer;
}

.ctc-input-list li:hover,
.ctc-input-list li[aria-selected="true"] {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}
```

**JS:**
```js
(function () {
  var SUGGESTIONS = [
    "JavaScript",
    "TypeScript",
    "Python",
    "Go",
    "Rust",
    "Ruby",
    "Swift",
    "Kotlin",
    "Java",
    "C++",
    "Elixir",
    "Haskell",
  ];
  document.querySelectorAll(".ctc-input").forEach(function (root) {
    var chipsEl = root.querySelector(".ctc-input-chips");
    var input = root.querySelector(".ctc-input-field");
    var listEl = root.querySelector(".ctc-input-list");
    var chips = [];
    function render() {
      chipsEl.innerHTML = "";
      chips.forEach(function (c, i) {
        var li = document.createElement("li");
        var txt = document.createElement("span");
        txt.textContent = c;
        var btn = document.createElement("button");
        btn.type = "button";
        btn.setAttribute("aria-label", "Remove " + c);
        btn.textContent = "×";
        btn.addEventListener("click", function () {
          chips.splice(i, 1);
          render();
        });
        li.appendChild(txt);
        li.appendChild(btn);
        chipsEl.appendChild(li);
      });
    }
    function showList(items) {
      if (!items.length) {
        listEl.setAttribute("hidden", "");
        input.setAttribute("aria-expanded", "false");
        return;
      }
      listEl.innerHTML = "";
      items.forEach(function (s) {
        var li = document.createElement("li");
        li.setAttribute("role", "option");
        li.textContent = s;
        li.addEventListener("mousedown", function (e) {
          e.preventDefault();
          if (chips.indexOf(s) === -1) chips.push(s);
          input.value = "";
          render();
          showList([]);
        });
        listEl.appendChild(li);
      });
      listEl.removeAttribute("hidden");
      input.setAttribute("aria-expanded", "true");
    }
    input.addEventListener("input", function () {
      var q = input.value.trim().toLowerCase();
      if (!q) {
        showList([]);
        return;
      }
      var matches = SUGGESTIONS.filter(function (s) {
        return s.toLowerCase().includes(q) && chips.indexOf(s) === -1;
      }).slice(0, 6);
      showList(matches);
    });
    input.addEventListener("keydown", function (e) {
      if (e.key === "Enter") {
        e.preventDefault();
        var v = input.value.trim();
        if (v && chips.indexOf(v) === -1) {
          chips.push(v);
          input.value = "";
          render();
          showList([]);
        }
      } else if (e.key === "Backspace" && !input.value && chips.length) {
        chips.pop();
        render();
      } else if (e.key === "Escape") {
        showList([]);
      }
    });
    input.addEventListener("blur", function () {
      setTimeout(function () {
        showList([]);
      }, 150);
    });
  });
})();
```

### 15. Remove with Undo

**Type:** Light JS
**Description:** Click × to remove a chip — but a small Undo toast appears for 4 seconds before deletion is final. The pattern Gmail and Linear made standard.

**HTML:**
```html
<div class="ctc-undo">
  <div class="ctc-undo-list">
    <span class="ctc-undo-chip" data-ctc-undo
      >Frontend<button type="button" aria-label="Remove Frontend">×</button></span
    >
    <span class="ctc-undo-chip" data-ctc-undo
      >Backend<button type="button" aria-label="Remove Backend">×</button></span
    >
    <span class="ctc-undo-chip" data-ctc-undo
      >DevOps<button type="button" aria-label="Remove DevOps">×</button></span
    >
  </div>
  <div class="ctc-undo-toast" role="status" aria-live="polite" hidden>
    <span class="ctc-undo-msg"></span>
    <button type="button" class="ctc-undo-btn">Undo</button>
  </div>
</div>
```

**CSS:**
```css
.ctc-undo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 70px;
}

.ctc-undo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ctc-undo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  transition:
    opacity 0.25s,
    transform 0.25s;
}

.ctc-undo-chip.is-removing {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

.ctc-undo-chip button {
  width: 18px;
  height: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #b8b6d4;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  border-radius: 50%;
}

.ctc-undo-chip button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ctc-undo-toast {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #15151d;
  border: 1px solid rgba(46, 204, 138, 0.4);
  border-radius: 8px;
  font:
    500 12px/1.2 system-ui,
    sans-serif;
  color: #c4b5fd;
  align-self: flex-start;
  animation: ctc-undo-in 0.2s ease;
}

.ctc-undo-toast[hidden] {
  display: none;
}

.ctc-undo-btn {
  background: transparent;
  border: 0;
  color: #2ecc8a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.ctc-undo-btn:hover {
  text-decoration: underline;
}

@keyframes ctc-undo-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ctc-undo-toast {
    animation: none !important;
  }
}

```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-undo").forEach(function (root) {
    var toast = root.querySelector(".ctc-undo-toast");
    var msg = root.querySelector(".ctc-undo-msg");
    var btn = root.querySelector(".ctc-undo-btn");
    var pendingChip = null;
    var timer = null;
    function commit() {
      if (pendingChip && pendingChip.parentNode) pendingChip.parentNode.removeChild(pendingChip);
      pendingChip = null;
      toast.setAttribute("hidden", "");
      timer = null;
    }
    btn.addEventListener("click", function () {
      if (!pendingChip) return;
      pendingChip.classList.remove("is-removing");
      clearTimeout(timer);
      timer = null;
      pendingChip = null;
      toast.setAttribute("hidden", "");
    });
    root.querySelectorAll("[data-ctc-undo] button").forEach(function (x) {
      x.addEventListener("click", function () {
        if (timer) commit();
        var chip = x.closest("[data-ctc-undo]");
        chip.classList.add("is-removing");
        pendingChip = chip;
        msg.textContent = 'Removed "' + chip.firstChild.textContent.trim() + '"';
        toast.removeAttribute("hidden");
        timer = setTimeout(commit, 4000);
      });
    });
  });
})();
```

### 16. Counter Chip

**Type:** Light JS
**Description:** Chip with a number badge inside; click − / + to decrement/increment with aria-valuenow updated for screen readers. The Gmail label-count pattern.

**HTML:**
```html
<div class="ctc-counter">
  <span class="ctc-counter-chip" role="group" aria-label="Inbox count">
    <button type="button" data-ctc-cnt="-1" aria-label="Decrement">−</button>
    <span class="ctc-counter-label">Inbox</span>
    <span class="ctc-counter-num" aria-live="polite" aria-valuenow="12">12</span>
    <button type="button" data-ctc-cnt="+1" aria-label="Increment">+</button>
  </span>
</div>
```

**CSS:**
```css
.ctc-counter {
  display: flex;
}

.ctc-counter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  font:
    600 12px/1 system-ui,
    sans-serif;
  color: #f0eeff;
}

.ctc-counter-chip button {
  width: 26px;
  height: 28px;
  background: transparent;
  border: 0;
  color: #c4b5fd;
  font:
    700 14px/1 system-ui,
    sans-serif;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-counter-chip button:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}

.ctc-counter-label {
  padding: 0 6px 0 10px;
}

.ctc-counter-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 18px;
  margin-right: 4px;
  padding: 0 6px;
  background: rgba(124, 108, 255, 0.22);
  color: #c4b5fd;
  border-radius: 999px;
  font:
    700 11px/1 ui-monospace,
    monospace;
}
```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-counter-chip").forEach(function (chip) {
    var num = chip.querySelector(".ctc-counter-num");
    chip.querySelectorAll("[data-ctc-cnt]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        var n = parseInt(num.textContent, 10) || 0;
        var inc = parseInt(btn.getAttribute("data-ctc-cnt"), 10);
        var v = Math.max(0, n + inc);
        num.textContent = v;
        num.setAttribute("aria-valuenow", v);
      });
    });
  });
})();
```

### 17. Marquee Chip

**Type:** Pure CSS
**Description:** When the chip text overflows its width, the text scrolls horizontally on hover like a stock ticker. Pause on focus. Pure CSS using a duplicated text trick.

**HTML:**
```html
<a href="#" class="ctc-marquee">
  <span class="ctc-marquee-track">
    <span>Senior Frontend Engineer @ TechCorp</span>
    <span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
  </span>
</a>
```

**CSS:**
```css
.ctc-marquee {
  display: inline-flex;
  align-items: center;
  width: 200px;
  padding: 9px 14px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  overflow: hidden;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 12px,
    #000 calc(100% - 12px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 12px,
    #000 calc(100% - 12px),
    transparent 100%
  );
}

.ctc-marquee-track {
  display: inline-flex;
  gap: 32px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ctc-marquee:hover .ctc-marquee-track,
.ctc-marquee:focus-visible .ctc-marquee-track {
  animation: ctc-marquee-roll 7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-marquee-roll { to { transform: translateX(calc(-50% - 16px)); } }

```

### 18. Expandable Detail

**Type:** Pure CSS
**Description:** Native <details>/<summary> chip that expands inline to reveal a description on click. Real semantic disclosure, not a tooltip — keyboard accessible by default.

**HTML:**
```html
<details class="ctc-exp">
  <summary>
    <span class="ctc-exp-tag">React</span>
    <svg viewBox="0 0 12 12" aria-hidden="true">
      <path
        d="M3 4.5l3 3 3-3"
        stroke="currentColor"
        stroke-width="1.6"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  </summary>
  <p class="ctc-exp-body">
    A JavaScript library for building user interfaces with components and hooks.
  </p>
</details>
```

**CSS:**
```css
.ctc-exp {
  display: inline-block;
  background: #1f1f2e;
  border: 1px solid rgba(124, 108, 255, 0.3);
  border-radius: 14px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
  max-width: 280px;
}

.ctc-exp summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #c4b5fd;
  user-select: none;
}

.ctc-exp summary::-webkit-details-marker {
  display: none;
}

.ctc-exp summary svg {
  width: 11px;
  height: 11px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.ctc-exp[open] summary svg {
  transform: rotate(180deg);
}

.ctc-exp[open] {
  display: block;
  border-radius: 14px;
}

.ctc-exp-body {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #b8b6d4;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ctc-exp summary:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}
```

### 19. Linked Group

**Type:** Pure CSS
**Description:** Three connected chips sharing a single border with hairline dividers — like a segmented breadcrumb of tags. Hover lights individual segments.

**HTML:**
```html
<div class="ctc-linked">
  <a href="#" class="ctc-linked-seg">Components</a>
  <a href="#" class="ctc-linked-seg">CSS</a>
  <a href="#" class="ctc-linked-seg">Buttons</a>
</div>
```

**CSS:**
```css
.ctc-linked {
  display: inline-flex;
  background: #1f1f2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.ctc-linked-seg {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  color: #c4b5fd;
  font:
    600 12px/1 system-ui,
    sans-serif;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background 0.15s,
    color 0.15s;
}

.ctc-linked-seg:last-child {
  border-right: 0;
}

.ctc-linked-seg:hover {
  background: rgba(124, 108, 255, 0.18);
  color: #fff;
}
```

### 20. Lifecycle Chip

**Type:** Light JS
**Description:** Animates through three states — Adding (slide in + spinner) → Active (settle + checkmark) → Removing (fade out + strikethrough). Click Run demo to replay the full add/remove dance.

**HTML:**
```html
<div class="ctc-life">
  <button type="button" class="ctc-life-run">▶ Run demo</button>
  <span class="ctc-life-chip" data-ctc-life data-state="idle">
    <span class="ctc-life-icon" aria-hidden="true"></span>
    <span class="ctc-life-text">React</span>
  </span>
</div>
```

**CSS:**
```css
.ctc-life {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ctc-life-run {
  padding: 6px 12px;
  background: rgba(124, 108, 255, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(124, 108, 255, 0.35);
  border-radius: 6px;
  font:
    600 11px/1 ui-monospace,
    monospace;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.ctc-life-run:hover {
  background: rgba(124, 108, 255, 0.26);
  color: #fff;
}

.ctc-life-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: #1f1f2e;
  color: #f0eeff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font:
    600 12px/1 system-ui,
    sans-serif;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.ctc-life-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.ctc-life-chip[data-state="adding"] {
  background: rgba(124, 108, 255, 0.18);
  border-color: rgba(124, 108, 255, 0.4);
  color: #c4b5fd;
  transform: translateX(-12px);
  opacity: 0;
  animation: ctc-life-slide-in 0.45s ease forwards;
}

.ctc-life-chip[data-state="adding"] .ctc-life-icon {
  border: 2px solid rgba(124, 108, 255, 0.3);
  border-top-color: #7c6cff;
  background: transparent;
  animation: ctc-life-spin 0.7s linear infinite;
}

.ctc-life-chip[data-state="active"] {
  background: rgba(46, 204, 138, 0.14);
  border-color: rgba(46, 204, 138, 0.4);
  color: #2ecc8a;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon {
  background: #2ecc8a;
  color: #0a0f0c;
  font-weight: 900;
}

.ctc-life-chip[data-state="active"] .ctc-life-icon::before {
  content: "✓";
}

.ctc-life-chip[data-state="removing"] {
  background: rgba(255, 61, 110, 0.1);
  border-color: rgba(255, 61, 110, 0.35);
  color: rgba(255, 108, 138, 0.7);
  text-decoration: line-through;
  opacity: 0;
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover,
  .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track,
  .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"],
  .ctc-life-chip[data-state="adding"] .ctc-life-icon {
    animation: none !important;
  }
  .ctc-life-chip[data-state="adding"] {
    transform: none;
    opacity: 1;
  }
}

@keyframes ctc-life-slide-in { to { transform: translateX(0); opacity: 1; } }

@keyframes ctc-life-spin { to { transform: rotate(360deg); } }

```

**JS:**
```js
(function () {
  document.querySelectorAll(".ctc-life").forEach(function (root) {
    var btn = root.querySelector(".ctc-life-run");
    var chip = root.querySelector("[data-ctc-life]");
    if (!btn || !chip) return;
    var running = false;
    btn.addEventListener("click", function () {
      if (running) return;
      running = true;
      chip.setAttribute("data-state", "adding");
      setTimeout(function () {
        chip.setAttribute("data-state", "active");
      }, 1100);
      setTimeout(function () {
        chip.setAttribute("data-state", "removing");
      }, 2400);
      setTimeout(function () {
        chip.setAttribute("data-state", "idle");
        running = false;
      }, 3200);
    });
  });
})();
```

---
## 24 CSS Timeline Layouts

URL: https://codefronts.com/layouts/css-timelines/
Description: 24 hand-coded CSS timeline layouts — six field-study aesthetics (archaeological dig, concert tour stubs, surgical vitals trace, cinema reel, mission control terminal, fermentation jar calendar), twelve chronological patterns (thread, accordion, filmstrip, nature trail, terminal log, art deco, vertical centered, horizontal scroll, neon rail, editorial, stacked progress, brutalist grid), and six documentation layouts (changelog ticker, editorial spine, split-screen CV, railroad stations, film-strip portfolio, audit ledger). Copy-paste ready.
Demo count: 24

### 01. Stratigraphy Timeline

**Type:** Pure CSS
**Description:** Vertical hover-expand archaeological cross-section. Each layer is a geological era — flex-grow reveals finds when hovered, with a depth ruler on the left and an artifact card panel on the right. Built for museum dig reports, geological surveys, and historical site catalogues.

**HTML:**
```html
<section class="tl1-wrap">
  <header class="tl1-head">
    <h2 class="tl1-title">Dig Site <em>K-7</em><br>Anatolian Plateau</h2>
    <div class="tl1-meta">
      <strong>EXCAVATION LOG · SEASON 04</strong>
      42°14′N 33°08′E · Lead: Dr. M. Eren<br>
      Surface elevation 1,142m · Total depth 6.4m<br>
      Catalogued artifacts: 218 · Hover any layer to inspect.
    </div>
  </header>

  <div class="tl1-dig">
    <div class="tl1-ruler">
      <div class="tl1-tick">0.0m</div>
      <div class="tl1-tick">1.0m</div>
      <div class="tl1-tick">2.5m</div>
      <div class="tl1-tick">3.8m</div>
      <div class="tl1-tick">5.0m</div>
      <div class="tl1-tick">6.4m</div>
    </div>

    <div class="tl1-stack">
      <div class="tl1-layer tl1-l1">
        <div class="tl1-era">Topsoil &amp; Ottoman</div>
        <div class="tl1-years">CE 1453 – present · 0.0–1.0m</div>
        <div class="tl1-find">Plowed agricultural soil mixed with glazed Iznik shards, a worn copper para from the reign of Selim II, and clay pipe fragments. Heavy modern disturbance; treat all surface finds as out of context.</div>
      </div>
      <div class="tl1-layer tl1-l2">
        <div class="tl1-era">Byzantine Habitation</div>
        <div class="tl1-years">CE 330 – 1200 · 1.0–2.5m</div>
        <div class="tl1-find">Compacted clay floors of a small basilica, three intact storage amphorae, a hoard of 47 bronze folles, and bone styluses. Evidence of fire damage in the eastern quadrant suggests abandonment by the late 12th century.</div>
      </div>
      <div class="tl1-layer tl1-l3">
        <div class="tl1-era">Roman Provincial</div>
        <div class="tl1-years">63 BCE – CE 330 · 2.5–3.8m</div>
        <div class="tl1-find">Hypocaust tile system, fragment of a tessellated mosaic depicting a stag, two terra sigillata bowls stamped with the maker's mark CAESIVS. Coin of Hadrian recovered at 3.2m.</div>
      </div>
      <div class="tl1-layer tl1-l4">
        <div class="tl1-era">Hellenistic</div>
        <div class="tl1-years">323 – 63 BCE · 3.8–4.6m</div>
        <div class="tl1-find">Lower courses of an ashlar wall (probable agora boundary). Fine black-glaze pottery from Pergamon, three iron arrowheads, and a sealed cache of 12 silver tetradrachms of Eumenes II.</div>
      </div>
      <div class="tl1-layer tl1-l5">
        <div class="tl1-era">Late Bronze</div>
        <div class="tl1-years">1600 – 1200 BCE · 4.6–5.6m</div>
        <div class="tl1-find">Hittite-period storage pithoi in situ, cuneiform tablet fragment (administrative, grain inventory), bronze fibula. Burn layer at 5.4m correlates with the regional collapse horizon documented at Boğazköy.</div>
      </div>
      <div class="tl1-layer tl1-l6">
        <div class="tl1-era">Neolithic</div>
        <div class="tl1-years">7000 – 5000 BCE · 5.6–6.4m</div>
        <div class="tl1-find">Mudbrick platform, obsidian blades sourced to Göllü Dağ, animal bone assemblage (caprines dominant), and the partial remains of a clay figurine — seated female, headless. Sterile soil at 6.4m.</div>
      </div>
    </div>

    <aside class="tl1-artifacts">
      <h4 class="tl1-art-title">Featured Finds · Season 04</h4>
      <div class="tl1-card">
        <div class="tl1-card-name">Tetradrachm of Eumenes II</div>
        <div class="tl1-card-id">CAT. K7-H-0042 · Layer 4</div>
        <div class="tl1-card-desc">Silver, 17.1g. Obverse: diademed head of Philetairos. Reverse: seated Athena with shield. Mint of Pergamon, c. 180 BCE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Cuneiform Inventory Tablet</div>
        <div class="tl1-card-id">CAT. K7-B-0117 · Layer 5</div>
        <div class="tl1-card-desc">Unfired clay, fragmentary. Ten lines of Hittite syllabic script recording wheat (ZÍZ) quantities. Awaiting full transliteration by Eren &amp; Tunç.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Mosaic Stag Fragment</div>
        <div class="tl1-card-id">CAT. K7-R-0008 · Layer 3</div>
        <div class="tl1-card-desc">Tesserae in limestone and smalti, 38×42cm. Likely from the threshold of a peristyle court. Provincial workshop, late 2nd c. CE.</div>
      </div>
      <div class="tl1-card">
        <div class="tl1-card-name">Obsidian Blade Cache</div>
        <div class="tl1-card-id">CAT. K7-N-0156 · Layer 6</div>
        <div class="tl1-card-desc">Six pressure-flaked prismatic blades. XRF analysis confirms Göllü Dağ source, ~270km southeast. Trade evidence for early Neolithic exchange networks.</div>
      </div>
    </aside>
  </div>
</section>
```

**CSS:**
```css
.tl1-wrap {
  background: #1a1410;
  color: #e8dfc8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  padding: 2.5rem 2rem 3rem;
}
.tl1-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2rem;
}
.tl1-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 0.95;
  color: #f0e5cc;
  margin: 0;
}
.tl1-title em { font-style: italic; color: #c89860; }
.tl1-meta {
  font-size: 11px;
  line-height: 1.7;
  color: #a89570;
  border-left: 1px solid #5a4830;
  padding-left: 1rem;
  align-self: end;
}
.tl1-meta strong { color: #e8dfc8; display: block; margin-bottom: 0.25rem; }
.tl1-dig {
  display: grid;
  grid-template-columns: 60px 1fr 260px;
  gap: 0;
}
.tl1-ruler {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: #8a7550;
  border-right: 1px solid #5a4830;
}
.tl1-tick {
  flex: 1;
  padding: 0.5rem 0.5rem 0 0;
  text-align: right;
  border-top: 1px dashed rgba(138,117,80,0.3);
  letter-spacing: 0.1em;
}
.tl1-stack { display: flex; flex-direction: column; }
.tl1-layer {
  flex: 1;
  min-height: 110px;
  padding: 1.25rem 1.5rem;
  position: relative;
  border-bottom: 2px solid rgba(0,0,0,0.4);
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  overflow: hidden;
}
.tl1-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.6;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.tl1-l1 { background: linear-gradient(180deg, #6b5840, #574332); }
.tl1-l1::before { background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(0,0,0,0.1) 8px 9px); }
.tl1-l2 { background: linear-gradient(180deg, #8a6840, #6e5232); }
.tl1-l2::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.15) 0 3px, transparent 3px), radial-gradient(circle at 70% 80%, rgba(0,0,0,0.2) 0 4px, transparent 4px); background-size: 40px 40px, 60px 60px; }
.tl1-l3 { background: linear-gradient(180deg, #a47a48, #80582e); }
.tl1-l3::before { background: repeating-linear-gradient(90deg, transparent 0 20px, rgba(0,0,0,0.08) 20px 22px); }
.tl1-l4 { background: linear-gradient(180deg, #c08850, #9a6638); }
.tl1-l4::before { background: radial-gradient(ellipse at 50% 50%, rgba(255,200,120,0.2), transparent 70%); }
.tl1-l5 { background: linear-gradient(180deg, #7a5a3a, #4e3820); }
.tl1-l5::before { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px); }
.tl1-l6 { background: linear-gradient(180deg, #3a2818, #1a1008); }
.tl1-layer:hover { flex: 3; }
.tl1-layer:hover .tl1-find { opacity: 1; transform: translateX(0); }
.tl1-era {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #f5ecd1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.tl1-years {
  font-size: 10px;
  color: rgba(245,236,209,0.7);
  letter-spacing: 0.15em;
  margin-top: 0.25rem;
}
.tl1-find {
  margin-top: 0.75rem;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(245,236,209,0.85);
  max-width: 500px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.tl1-artifacts {
  border-left: 1px solid #5a4830;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.tl1-art-title {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #8a7550;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #5a4830;
  margin: 0 0 0.5rem;
}
.tl1-card {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(138,117,80,0.3);
}
.tl1-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: #c89860;
}
.tl1-card-id {
  font-size: 9px;
  color: #8a7550;
  letter-spacing: 0.15em;
  margin: 0.25rem 0;
}
.tl1-card-desc {
  font-size: 10.5px;
  line-height: 1.5;
  color: #a89570;
}
@media (max-width: 720px) {
  .tl1-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl1-dig { grid-template-columns: 50px 1fr; }
  .tl1-artifacts { grid-column: 1 / -1; border-left: none; border-top: 1px solid #5a4830; padding: 1rem 0 0; margin-top: 1rem; }
}
```

### 02. Tour Stub Timeline

**Type:** Pure CSS
**Description:** Horizontal snap-scroll strip of concert ticket stubs. Each card carries a city, venue, set list, and a hand-stamped seal — slightly rotated, with dashed tear-perforations and offset shadows. Built for tour archives, festival lineups, and any event-driven brand history.

**HTML:**
```html
<section class="tl2-wrap">
  <header class="tl2-head">
    <h2 class="tl2-title">The Static<br><span class="tl2-title-alt">World Tour '26</span></h2>
    <div class="tl2-credits">
      44 cities<br>
      6 continents<br>
      sold + standing<br>
      ━━━━━━━━━<br>
      scroll →
    </div>
  </header>

  <div class="tl2-strip">
    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">14 · FEB · 2026 · FRI</div>
        <div class="tl2-city">Reykjavík</div>
        <div class="tl2-venue">Harpa Concert Hall</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Northern Static</li>
          <li>Glacier Song</li>
          <li>Bone Radio</li>
          <li>Encore: Aurora</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">22 · FEB · 2026 · SAT</div>
        <div class="tl2-city">Berlin</div>
        <div class="tl2-venue">Tempodrom · Kreuzberg</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>U-Bahn Hymn</li>
          <li>Brutalist Love</li>
          <li>Concrete Dawn</li>
          <li>Encore: Static (live edit)</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">06 · MAR · 2026 · FRI</div>
        <div class="tl2-city">Marrakech</div>
        <div class="tl2-venue">Jardin Majorelle</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Blue Garden</li>
          <li>Souk Static</li>
          <li>Atlas Lullaby</li>
          <li>Encore: Mint Tea</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">19 · MAR · 2026 · THU</div>
        <div class="tl2-city">Lagos</div>
        <div class="tl2-venue">Terra Kulture Arena</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Harmattan</li>
          <li>Static Pt. II</li>
          <li>Yellow Bus</li>
          <li>Encore: Lagos After Dark</li>
        </ol>
      </div>
      <div class="tl2-seal">Tix<br>Live</div>
    </article>

    <article class="tl2-stub tl2-sold-out">
      <div class="tl2-top">
        <div class="tl2-date">04 · APR · 2026 · SAT</div>
        <div class="tl2-city">Mexico City</div>
        <div class="tl2-venue">Foro Sol</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Xochimilco</li>
          <li>Smog Romance</li>
          <li>Tláloc</li>
          <li>Encore: Mezcal Static</li>
        </ol>
      </div>
      <div class="tl2-seal">Sold<br>Out</div>
    </article>

    <article class="tl2-stub">
      <div class="tl2-top">
        <div class="tl2-date">02 · MAY · 2026 · SAT</div>
        <div class="tl2-city">Tokyo</div>
        <div class="tl2-venue">Nippon Budokan</div>
      </div>
      <div class="tl2-bot">
        <h5 class="tl2-list-head">SET LIST</h5>
        <ol class="tl2-setlist">
          <li>Shibuya Static</li>
          <li>Sakura Loop</li>
          <li>Train at 3am</li>
          <li>Encore: Hanami Hymn</li>
        </ol>
      </div>
      <div class="tl2-seal">Few<br>Left</div>
    </article>
  </div>
</section>
```

**CSS:**
```css
.tl2-wrap {
  background: #f4ed47;
  color: #1a1a1a;
  font-family: 'Archivo', system-ui, sans-serif;
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}
.tl2-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1.5px);
  background-size: 8px 8px;
  opacity: 0.08;
  pointer-events: none;
}
.tl2-head {
  padding: 1rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  position: relative;
}
.tl2-title {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 9vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0;
}
.tl2-title-alt {
  display: block;
  color: #ff2d72;
  -webkit-text-stroke: 2px #1a1a1a;
}
.tl2-credits {
  font-weight: 900;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  border: 3px solid #1a1a1a;
  padding: 0.75rem;
  background: #f4ed47;
  transform: rotate(2deg);
  box-shadow: 5px 5px 0 #1a1a1a;
}
.tl2-strip {
  display: flex;
  gap: 1rem;
  padding: 1rem 2rem 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a #f4ed47;
  position: relative;
}
.tl2-strip::-webkit-scrollbar { height: 6px; }
.tl2-strip::-webkit-scrollbar-thumb { background: #1a1a1a; }
.tl2-stub {
  flex: 0 0 270px;
  min-height: 400px;
  background: #fff;
  border: 3px solid #1a1a1a;
  box-shadow: 7px 7px 0 #1a1a1a;
  position: relative;
  scroll-snap-align: start;
  transform: rotate(-1deg);
  transition: transform 0.35s, box-shadow 0.35s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.tl2-stub:nth-child(odd) { transform: rotate(1.5deg); }
.tl2-stub:nth-child(3n) { transform: rotate(-2deg); }
.tl2-stub:nth-child(5n) { transform: rotate(0.5deg); }
.tl2-stub:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow: 10px 10px 0 #ff2d72;
}
.tl2-stub::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 35%;
  border-top: 2px dashed #1a1a1a;
}
.tl2-stub::after {
  content: '';
  position: absolute;
  left: -8px;
  top: calc(35% - 8px);
  width: 16px; height: 16px;
  background: #f4ed47;
  border: 3px solid #1a1a1a;
  border-radius: 50%;
}
.tl2-top {
  padding: 1rem;
  flex: 0 0 35%;
  background: #fff;
}
.tl2-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
.tl2-city {
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 2rem;
  line-height: 0.9;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
.tl2-venue {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.4rem;
  color: #555;
}
.tl2-bot {
  padding: 1.5rem 1rem 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.tl2-list-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #777;
  margin: 0 0 0.5rem;
}
.tl2-setlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  counter-reset: tl2-set-num;
}
.tl2-setlist li {
  padding: 2px 0;
  border-bottom: 1px dotted #ddd;
}
.tl2-setlist li::before {
  content: counter(tl2-set-num, decimal-leading-zero) ' · ';
  counter-increment: tl2-set-num;
  color: #ff2d72;
}
.tl2-seal {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 54px; height: 54px;
  border: 2px solid #ff2d72;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 10px;
  color: #ff2d72;
  line-height: 1.1;
  transform: rotate(-15deg);
  text-transform: uppercase;
}
.tl2-sold-out .tl2-seal {
  color: #1a1a1a;
  border-color: #1a1a1a;
  background: #ff2d72;
  transform: rotate(-15deg) scale(1.05);
}
@media (max-width: 720px) {
  .tl2-head { grid-template-columns: 1fr; }
  .tl2-credits { justify-self: start; }
}
```

### 03. Vitals Timeline

**Type:** Pure CSS
**Description:** Clinical procedural timeline with a live EKG SVG trace, four colour-coded readouts (HR, SpO₂, BP, temp), and alert pulses on critical events. Built for surgical case logs, anaesthesia records, and incident retrospectives in healthcare environments.

**HTML:**
```html
<section class="tl3-wrap">
  <header class="tl3-head">
    <h2 class="tl3-title">Mitral Valve <em>Repair</em><br>OR-3 · 08:14:22</h2>
    <div class="tl3-patient">
      <strong>PT · ID-449201 · M · 58y</strong><br>
      ASA III · BMI 27.4<br>
      Lead surgeon: Dr. A. Okafor<br>
      Anesthesia: GA · ETT
    </div>
  </header>

  <div class="tl3-monitor">
    <div class="tl3-readouts">
      <div class="tl3-readout tl3-hr">
        <div class="tl3-lbl">Heart Rate</div>
        <div class="tl3-val">72<span class="tl3-unit">bpm</span></div>
      </div>
      <div class="tl3-readout tl3-sp">
        <div class="tl3-lbl">SpO₂</div>
        <div class="tl3-val">99<span class="tl3-unit">%</span></div>
      </div>
      <div class="tl3-readout tl3-bp">
        <div class="tl3-lbl">BP · MAP</div>
        <div class="tl3-val">118/74<span class="tl3-unit"> · 89</span></div>
      </div>
      <div class="tl3-readout tl3-tp">
        <div class="tl3-lbl">Core Temp</div>
        <div class="tl3-val">36.4<span class="tl3-unit">°C</span></div>
      </div>
    </div>
    <div class="tl3-ekg">
      <svg viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true">
        <path class="tl3-trace" d="M0,40 L100,40 L110,40 L115,20 L120,60 L125,10 L130,70 L135,40 L240,40 L250,40 L255,20 L260,60 L265,10 L270,70 L275,40 L380,40 L390,40 L395,20 L400,60 L405,10 L410,70 L415,40 L520,40 L530,40 L535,20 L540,60 L545,10 L550,70 L555,40 L660,40 L670,40 L675,20 L680,60 L685,10 L690,70 L695,40 L800,40 L810,40 L815,20 L820,60 L825,10 L830,70 L835,40 L940,40 L950,40 L955,20 L960,60 L965,10 L970,70 L975,40 L1000,40"/>
      </svg>
    </div>
  </div>

  <div class="tl3-timeline">
    <div class="tl3-step">
      <div class="tl3-time">07:42<span class="tl3-elapsed">T−00:32</span></div>
      <div>
        <h4 class="tl3-step-title">Pre-op briefing &amp; timeout</h4>
        <p class="tl3-step-body">Patient identity, procedure, and site confirmed by surgical team per WHO checklist. Blood products on standby (2u PRBC, 2u FFP). Cardiac echo reviewed.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">CHECKLIST CLEAR</span><span class="tl3-tag">ECHO ✓</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">08:14<span class="tl3-elapsed">T+00:00</span></div>
      <div>
        <h4 class="tl3-step-title">Induction &amp; intubation</h4>
        <p class="tl3-step-body">Propofol 200mg / fentanyl 200mcg / rocuronium 50mg. ETT 8.0 placed without difficulty, confirmed by capnography and bilateral breath sounds. Arterial line right radial.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">AIRWAY ✓</span><span class="tl3-tag">A-LINE R RADIAL</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">08:46<span class="tl3-elapsed">T+00:32</span></div>
      <div>
        <h4 class="tl3-step-title">Median sternotomy</h4>
        <p class="tl3-step-body">Skin incision and sternal split with oscillating saw. Retractor placed. Pericardium opened in inverted-T fashion, sutured to drapes. Heparin 30,000u administered.</p>
        <div class="tl3-tags"><span class="tl3-tag">ACT pending</span><span class="tl3-tag tl3-ok">HEMOSTASIS</span></div>
      </div>
    </div>
    <div class="tl3-step tl3-alert">
      <div class="tl3-time">09:11<span class="tl3-elapsed">T+00:57</span></div>
      <div>
        <h4 class="tl3-step-title">Transient hypotension on aortic cannulation</h4>
        <p class="tl3-step-body">MAP fell to 52 momentarily during cannulation; corrected with 100mcg phenylephrine bolus and 250ml volume. ACT now 480s, on bypass within 90 seconds.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-crit">ALERT · MAP 52</span><span class="tl3-tag tl3-ok">CORRECTED</span><span class="tl3-tag">CPB INITIATED</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">09:24<span class="tl3-elapsed">T+01:10</span></div>
      <div>
        <h4 class="tl3-step-title">Cross-clamp &amp; cardioplegia</h4>
        <p class="tl3-step-body">Aortic cross-clamp applied. Antegrade cold blood cardioplegia delivered, asystole achieved within 60s. Cooling to 32°C systemic.</p>
        <div class="tl3-tags"><span class="tl3-tag">XCL 09:24</span><span class="tl3-tag tl3-ok">ARREST CONFIRMED</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">10:02<span class="tl3-elapsed">T+01:48</span></div>
      <div>
        <h4 class="tl3-step-title">Triangular resection + annuloplasty ring</h4>
        <p class="tl3-step-body">P2 segment resected and reapproximated with 4-0 prolene. Cosgrove 32mm annuloplasty band placed with interrupted 2-0 ethibond. Saline test: no regurgitation.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">REPAIR ✓</span><span class="tl3-tag tl3-ok">SALINE TEST DRY</span></div>
      </div>
    </div>
    <div class="tl3-step">
      <div class="tl3-time">10:34<span class="tl3-elapsed">T+02:20</span></div>
      <div>
        <h4 class="tl3-step-title">Wean from bypass · TEE confirms</h4>
        <p class="tl3-step-body">Cross-clamp off, spontaneous sinus rhythm. Weaning slow with low-dose epi (0.03 mcg/kg/min). TEE shows trace MR, mean gradient 3mmHg. Sternum closed in standard fashion.</p>
        <div class="tl3-tags"><span class="tl3-tag tl3-ok">OFF BYPASS</span><span class="tl3-tag tl3-ok">TEE: TRACE MR</span><span class="tl3-tag">EPI 0.03</span></div>
      </div>
    </div>
  </div>
</section>
```

**CSS:**
```css
.tl3-wrap {
  background: #0d1612;
  color: #d4e8e0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2rem;
}
.tl3-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #2a4038;
  padding-bottom: 1rem;
  gap: 1.5rem;
}
.tl3-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
}
.tl3-title em { font-style: italic; color: #4fc88f; }
.tl3-patient {
  font-size: 10.5px;
  line-height: 1.6;
  text-align: right;
  color: #8aaaa0;
}
.tl3-patient strong { color: #fff; }
.tl3-monitor {
  background: #060d0a;
  border: 1px solid #2a4038;
  border-radius: 4px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.tl3-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(79,200,143,0.03) 3px 4px);
  pointer-events: none;
}
.tl3-readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.tl3-readout { border-left: 2px solid; padding-left: 0.75rem; }
.tl3-hr { border-color: #ff4d6d; }
.tl3-sp { border-color: #4fc88f; }
.tl3-bp { border-color: #ffa726; }
.tl3-tp { border-color: #4dc4ff; }
.tl3-lbl {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: #8aaaa0;
  text-transform: uppercase;
}
.tl3-val {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.25rem;
}
.tl3-hr .tl3-val { color: #ff4d6d; }
.tl3-sp .tl3-val { color: #4fc88f; }
.tl3-bp .tl3-val { color: #ffa726; }
.tl3-tp .tl3-val { color: #4dc4ff; }
.tl3-unit {
  font-size: 10px;
  color: #8aaaa0;
  margin-left: 4px;
  font-weight: 400;
}
.tl3-ekg { height: 70px; width: 100%; position: relative; }
.tl3-ekg svg { width: 100%; height: 100%; display: block; }
.tl3-trace {
  stroke: #4fc88f;
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: tl3-ekg 4s linear infinite;
  filter: drop-shadow(0 0 4px rgba(79,200,143,0.6));
}
@keyframes tl3-ekg { to { stroke-dashoffset: 0; } }
.tl3-timeline {
  position: relative;
  padding: 1rem 0;
}
.tl3-timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, #2a4038, #4fc88f, #2a4038);
}
.tl3-step {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1.5rem;
  padding: 0.75rem 0 1.25rem;
  position: relative;
}
.tl3-time {
  font-size: 12px;
  font-weight: 700;
  color: #4fc88f;
  letter-spacing: 0.05em;
  text-align: right;
}
.tl3-elapsed {
  display: block;
  font-size: 9px;
  color: #8aaaa0;
  letter-spacing: 0.15em;
  margin-top: 2px;
  font-weight: 400;
}
.tl3-step::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 18px;
  width: 11px; height: 11px;
  background: #0d1612;
  border: 2px solid #4fc88f;
  border-radius: 50%;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.tl3-step:hover::after {
  background: #4fc88f;
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(79,200,143,0.8);
}
.tl3-step-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.35rem;
}
.tl3-step-body {
  font-size: 11.5px;
  line-height: 1.6;
  color: #a8c0b8;
  max-width: 700px;
  margin: 0;
}
.tl3-tags {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.tl3-tag {
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid #2a4038;
  color: #8aaaa0;
}
.tl3-tag.tl3-crit { color: #ff4d6d; border-color: #ff4d6d; }
.tl3-tag.tl3-ok { color: #4fc88f; border-color: #4fc88f; }
.tl3-alert::after {
  border-color: #ff4d6d;
  animation: tl3-pulse-alert 1.5s infinite;
}
.tl3-alert .tl3-step-title { color: #ff4d6d; }
@keyframes tl3-pulse-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,109,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(255,77,109,0); }
}
@media (max-width: 720px) {
  .tl3-head { flex-direction: column; align-items: flex-start; }
  .tl3-patient { text-align: left; }
  .tl3-readouts { grid-template-columns: repeat(2, 1fr); }
}
```

### 04. Film Reel Timeline

**Type:** Pure CSS
**Description:** Vertical cinema reel with sprocket-hole borders top and bottom, three-column frames (frame number, scene still, director notes), and an Italianate Playfair display headline. Built for production diaries, film festival retrospectives, and any project broken into named phases.

**HTML:**
```html
<section class="tl4-wrap">
  <header class="tl4-head">
    <div class="tl4-overline">A Production Diary · Calendar Year MMXXV</div>
    <h2 class="tl4-title">The Last <strong>Lighthouse</strong></h2>
    <div class="tl4-credits">Dir. Helena Vance · Prod. Auteur Pictures · 35mm</div>
  </header>

  <div class="tl4-reel">
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">I</div>
        <div class="tl4-num-lbl">Dev</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Development</strong>
          The script arrives in seventeen drafts, each <em>quieter</em> than the last.
        </div>
        <div class="tl4-slate">FEB 2024 — SEP 2024 · 7 months</div>
      </div>
      <div class="tl4-notes">
        <p>Vance options the Carrigan novella in February. By May, the first treatment removes nearly all dialogue from Act II. Greenlit at $4.2M.</p>
        <div class="tl4-director">"I want it to feel like the audience is also a guest at the lighthouse, unsure if they should be there." — H.V., production notes</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">II</div>
        <div class="tl4-num-lbl">Pre</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Pre-production</strong>
          A coastline is chosen for its <em>refusal to behave</em>.
        </div>
        <div class="tl4-slate">OCT 2024 — JAN 2025 · 4 months</div>
      </div>
      <div class="tl4-notes">
        <p>Location scouting along the Orkney archipelago. Eilean Mòr cleared with Trust for Scotland after three rejections. Cast: McTavish, Okwukwe, Andersson.</p>
        <div class="tl4-director">"The lighthouse keeps its own counsel. We adjust to it." — Production designer Imani Royle</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">III</div>
        <div class="tl4-num-lbl">Shoot</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Principal Photography</strong>
          Forty-two days, nineteen of which are <em>unusable for weather</em>.
        </div>
        <div class="tl4-slate">FEB 2025 — APR 2025 · 60 days scheduled</div>
      </div>
      <div class="tl4-notes">
        <p>Generator failure on day 8 destroys eight reels of magic-hour exterior. Reshot under impossibly similar light on day 31 — a small miracle credited to gaffer J. Sallows.</p>
        <div class="tl4-director">"Day 31 was a gift. We do not deserve day 31." — H.V., daily journal</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">IV</div>
        <div class="tl4-num-lbl">Post</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Post-production</strong>
          Six months of <em>cutting silence</em>.
        </div>
        <div class="tl4-slate">MAY 2025 — OCT 2025 · 6 months</div>
      </div>
      <div class="tl4-notes">
        <p>First assembly runs 187 minutes. Final cut at 104. Sound designer L. Mbeki records 38 distinct varieties of wind on a custom rig.</p>
        <div class="tl4-director">"You don't edit toward a runtime. You edit toward a heartbeat." — Editor Sofia Larsen</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">V</div>
        <div class="tl4-num-lbl">Score</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Scoring</strong>
          A composer who promises <em>almost no notes</em>.
        </div>
        <div class="tl4-slate">AUG 2025 — NOV 2025 · 4 months overlap</div>
      </div>
      <div class="tl4-notes">
        <p>Hildur Stefánsdóttir records with 14 strings and a single bass clarinet. Final score is 31 minutes against a 104-minute film. The silence is the score's instrument too.</p>
        <div class="tl4-director">"Most films use music to fill. We use it to make the silence audible." — H.S.</div>
      </div>
    </article>
    <article class="tl4-frame">
      <div class="tl4-num">
        <div class="tl4-n">VI</div>
        <div class="tl4-num-lbl">Out</div>
      </div>
      <div class="tl4-still">
        <div class="tl4-scene">
          <strong class="tl4-phase">Phase · Release</strong>
          A premiere in <em>October light</em>.
        </div>
        <div class="tl4-slate">11 OCT 2025 · London Film Festival</div>
      </div>
      <div class="tl4-notes">
        <p>World premiere at the BFI Southbank. Standing ovation: 9 minutes. Picked up by A24 for North American distribution within the week.</p>
        <div class="tl4-director">"For two hours, the audience was a fourth keeper at the lighthouse." — Variety review</div>
      </div>
    </article>
  </div>
</section>
```

**CSS:**
```css
.tl4-wrap {
  background: #1c0e08;
  color: #e8d8b8;
  font-family: 'Special Elite', ui-monospace, monospace;
  padding: 2.5rem 2rem 4rem;
}
.tl4-head {
  margin-bottom: 2.5rem;
  text-align: center;
}
.tl4-overline {
  font-size: 11px;
  letter-spacing: 0.4em;
  color: #d4a574;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.tl4-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  color: #f0dfb8;
  margin: 0;
}
.tl4-title strong {
  font-style: normal;
  font-weight: 900;
  display: block;
  color: #c4391f;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  -webkit-text-stroke: 1px #f0dfb8;
}
.tl4-credits {
  font-size: 10px;
  color: #a08770;
  margin-top: 1rem;
  letter-spacing: 0.15em;
}
.tl4-reel {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #0d0604;
  border-top: 22px solid #2a1810;
  border-bottom: 22px solid #2a1810;
  box-shadow:
    inset 0 26px 50px rgba(0,0,0,0.6),
    0 24px 60px rgba(0,0,0,0.8);
}
.tl4-reel::before, .tl4-reel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  background-image: radial-gradient(circle at 14px center, #f0dfb8 0 5px, transparent 6px);
  background-size: 28px 22px;
  background-repeat: repeat-x;
}
.tl4-reel::before { top: -22px; }
.tl4-reel::after { bottom: -22px; }
.tl4-frame {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  border-bottom: 1px solid #2a1810;
  min-height: 180px;
  position: relative;
  transition: background 0.4s;
  cursor: pointer;
}
.tl4-frame:last-child { border-bottom: none; }
.tl4-frame:hover { background: rgba(196,57,31,0.08); }
.tl4-num {
  border-right: 1px solid #2a1810;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0;
  background: #0a0402;
  color: #d4a574;
}
.tl4-n {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 2rem;
  line-height: 1;
  color: #f0dfb8;
}
.tl4-num-lbl {
  font-size: 9px;
  letter-spacing: 0.25em;
  margin-top: 0.75rem;
  text-transform: uppercase;
  color: #a08770;
  writing-mode: vertical-rl;
}
.tl4-still {
  border-right: 1px solid #2a1810;
  padding: 1.25rem;
  background: linear-gradient(135deg, #1a0c06, #0d0604);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tl4-scene {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #f0dfb8;
}
.tl4-phase {
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: #c4391f;
  font-size: 12px;
  display: block;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.tl4-slate {
  font-size: 10px;
  color: #a08770;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-top: 1px dashed #5a4030;
  padding-top: 0.5rem;
}
.tl4-notes {
  padding: 1.25rem;
  font-size: 11.5px;
  line-height: 1.7;
  color: #c4b090;
}
.tl4-notes p { margin: 0 0 0.5rem; }
.tl4-director {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  color: #d4a574;
  border-left: 2px solid #c4391f;
  padding-left: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 720px) {
  .tl4-frame { grid-template-columns: 50px 1fr; }
  .tl4-notes { grid-column: 1 / -1; border-top: 1px solid #2a1810; }
}
```

### 05. Mission Control Timeline

**Type:** Pure CSS
**Description:** Space-program terminal aesthetic with T-minus countdown, telemetry rows, status pills (GO, HOLD, CRIT) and per-event gauge bars driven by --g custom properties. CRT scanlines and phosphor glow give a Cape Canaveral readout feel. Built for launch logs, deploy timelines, and ops postmortems.

**HTML:**
```html
<section class="tl5-wrap">
  <header class="tl5-head">
    <div>
      <h2 class="tl5-title">HALCYON-7<br><span class="tl5-sub">::Lunar South Pole Insertion</span></h2>
    </div>
    <div class="tl5-telemetry">
      <div class="tl5-row"><span>VEHICLE</span><span>FALCON H · BLOCK 5</span></div>
      <div class="tl5-row"><span>PAYLOAD</span><span>HALCYON-7 LANDER</span></div>
      <div class="tl5-row"><span>PAD</span><span>KSC-39A</span></div>
      <div class="tl5-row"><span>WINDOW</span><span>04:12:00 UTC</span></div>
      <div class="tl5-row"><span>AZIMUTH</span><span>084.7°</span></div>
      <div class="tl5-row"><span>STATUS</span><span>NOMINAL</span></div>
    </div>
    <div class="tl5-countdown">
      <div class="tl5-cd-label">T-MINUS</div>
      <div class="tl5-clock">00:00:07<span class="tl5-blink">_</span></div>
    </div>
  </header>

  <div class="tl5-log">
    <div class="tl5-log-head">
      <span>T-Time</span>
      <span>Stat</span>
      <span>Event</span>
      <span>Telem</span>
    </div>

    <div class="tl5-event">
      <span class="tl5-tmin">T−14h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>WET DRESS REHEARSAL</strong>Tanking sequence completed. LOX/RP-1 propellant load confirmed at 100%. All vent valves cycled.</span>
      <span class="tl5-gauge">100%<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−02h</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>RANGE GREEN</strong>Eastern Range clear. Air traffic and maritime traffic confirmed outside exclusion zone. Wx 76% favorable.</span>
      <span class="tl5-gauge">76%<span class="tl5-bar" style="--g: 76%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−45m</span>
      <span class="tl5-stat tl5-hold">HOLD</span>
      <span class="tl5-msg"><strong>TANKING HOLD · LH2</strong>Upper-stage LH2 fill pressure 2.3 PSI above nominal. Bleed valve cycling. Recovery in progress.</span>
      <span class="tl5-gauge">HOLD<span class="tl5-bar tl5-bar-hold" style="--g: 38%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−42m</span>
      <span class="tl5-stat tl5-go">RESUME</span>
      <span class="tl5-msg"><strong>HOLD RELEASED</strong>LH2 fill pressure nominal at 14.8 PSI. Count resumed. Loss-of-window risk: low.</span>
      <span class="tl5-gauge">98%<span class="tl5-bar" style="--g: 98%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T−10m</span>
      <span class="tl5-stat tl5-go">GO</span>
      <span class="tl5-msg"><strong>TERMINAL COUNT</strong>FTS armed. APU spin-up complete. Launch director polls all stations: GO for launch.</span>
      <span class="tl5-gauge">99%<span class="tl5-bar" style="--g: 99%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+00:00</span>
      <span class="tl5-stat tl5-go">LIFT</span>
      <span class="tl5-msg"><strong>IGNITION &amp; LIFTOFF</strong>27 Merlin engines at 100% throttle. Tower cleared at T+7. Pitch program initiated at T+9.</span>
      <span class="tl5-gauge">7.6M LBF<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+01:08</span>
      <span class="tl5-stat tl5-nom">NOM</span>
      <span class="tl5-msg"><strong>MAX-Q</strong>Vehicle passes maximum dynamic pressure at 11.2 km altitude. Throttle-down complete, throttling back up.</span>
      <span class="tl5-gauge">Q=33<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+02:42</span>
      <span class="tl5-stat tl5-go">SEP</span>
      <span class="tl5-msg"><strong>BECO &amp; STAGE SEP</strong>Boost engine cutoff. Side cores separate cleanly. Upper stage MVac ignition confirmed.</span>
      <span class="tl5-gauge">+147km<span class="tl5-bar" style="--g: 84%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+08:34</span>
      <span class="tl5-stat tl5-crit">CRIT</span>
      <span class="tl5-msg"><strong>UPPER STAGE ANOMALY</strong>Telemetry dropout on FCC-2. Backup channel active. Crew safe; redundancy nominal but logged for review.</span>
      <span class="tl5-gauge">REDX<span class="tl5-bar tl5-bar-crit" style="--g: 65%"></span></span>
    </div>
    <div class="tl5-event">
      <span class="tl5-tmin">T+12:18</span>
      <span class="tl5-stat tl5-go">ORB</span>
      <span class="tl5-msg"><strong>ORBITAL INSERTION</strong>Parking orbit confirmed: 185 × 192 km @ 28.5°. TLI burn scheduled for T+02:14:00.</span>
      <span class="tl5-gauge">ORBIT✓<span class="tl5-bar" style="--g: 100%"></span></span>
    </div>
  </div>

  <div class="tl5-status-bar">
    <div class="tl5-item">ALT<span class="tl5-v">187km</span></div>
    <div class="tl5-item">VEL<span class="tl5-v">7.79km/s</span></div>
    <div class="tl5-item">DOWNRANGE<span class="tl5-v">2,140km</span></div>
    <div class="tl5-item">ΔV LEFT<span class="tl5-v">3,148m/s</span></div>
    <div class="tl5-item">SIGNAL<span class="tl5-v">−104dBm</span></div>
    <div class="tl5-item">CREW<span class="tl5-v">N/A</span></div>
  </div>
</section>
```

**CSS:**
```css
.tl5-wrap {
  background: #000;
  color: #00ff88;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.tl5-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0,255,136,0.06), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,255,136,0.02) 2px 3px);
  pointer-events: none;
  z-index: 1;
}
.tl5-wrap > * { position: relative; z-index: 2; }
.tl5-head {
  margin-bottom: 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  border-bottom: 1px solid #006633;
  padding-bottom: 1.25rem;
}
.tl5-title {
  font-family: 'Major Mono Display', 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(1.25rem, 3vw, 2rem);
  color: #00ff88;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0,255,136,0.5);
  letter-spacing: -0.02em;
  margin: 0;
}
.tl5-sub {
  display: block;
  font-size: 0.5em;
  color: #ffaa00;
  margin-top: 0.5rem;
  text-shadow: 0 0 8px rgba(255,170,0,0.5);
}
.tl5-telemetry {
  font-size: 10.5px;
  line-height: 1.7;
  color: #00cc6a;
}
.tl5-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed #003322;
  padding: 2px 0;
}
.tl5-row span:last-child { color: #00ff88; }
.tl5-countdown { text-align: right; }
.tl5-cd-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #ffaa00;
}
.tl5-clock {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 3rem;
  line-height: 1;
  color: #ff3355;
  text-shadow: 0 0 14px rgba(255,51,85,0.7);
  margin-top: 0.25rem;
}
.tl5-blink { animation: tl5-blink 1s steps(2) infinite; }
@keyframes tl5-blink { 50% { opacity: 0; } }
.tl5-log {
  border: 1px solid #006633;
  background: rgba(0,20,12,0.6);
}
.tl5-log-head {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: #003322;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #00cc6a;
  border-bottom: 1px solid #006633;
}
.tl5-event {
  display: grid;
  grid-template-columns: 90px 60px 1fr 80px;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px dashed #003322;
  align-items: center;
  transition: background 0.2s;
  cursor: pointer;
}
.tl5-event:hover { background: rgba(0,255,136,0.06); }
.tl5-tmin { font-size: 13px; color: #ffaa00; font-weight: 700; }
.tl5-stat {
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid;
}
.tl5-stat.tl5-go { color: #00ff88; border-color: #00ff88; }
.tl5-stat.tl5-hold { color: #ffaa00; border-color: #ffaa00; }
.tl5-stat.tl5-nom { color: #00cc6a; border-color: #00cc6a; }
.tl5-stat.tl5-crit {
  color: #ff3355;
  border-color: #ff3355;
  animation: tl5-blink 0.8s infinite;
}
.tl5-msg { font-size: 12px; color: #d4ffe8; line-height: 1.4; }
.tl5-msg strong { color: #00ff88; display: inline-block; margin-right: 0.5rem; }
.tl5-gauge {
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: #00cc6a;
  text-align: right;
}
.tl5-bar {
  display: block;
  height: 4px;
  margin-top: 2px;
  background: #003322;
  position: relative;
}
.tl5-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--g, 50%);
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}
.tl5-bar-hold::after { background: #ffaa00; box-shadow: 0 0 6px #ffaa00; }
.tl5-bar-crit::after { background: #ff3355; box-shadow: 0 0 6px #ff3355; }
.tl5-status-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #006633;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.tl5-item {
  padding: 0.5rem;
  border: 1px solid #006633;
  text-align: center;
}
.tl5-item .tl5-v {
  display: block;
  font-family: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 20px;
  color: #00ff88;
  margin-top: 2px;
  text-shadow: 0 0 6px rgba(0,255,136,0.5);
}
@media (max-width: 720px) {
  .tl5-head, .tl5-log-head, .tl5-event { grid-template-columns: 1fr; gap: 0.5rem; }
  .tl5-status-bar { grid-template-columns: repeat(3, 1fr); }
  .tl5-countdown { text-align: left; }
}
```

### 06. Fermentation Calendar

**Type:** Pure CSS
**Description:** Hand-drawn 21-day grid where each day is a glass jar SVG with rising bubble animations and an activity bar. Soft EB Garamond + Caveat typography on cream paper. Peak days are highlighted in terracotta. Built for time-lapse projects, recipe diaries, and any patient process measured by days.

**HTML:**
```html
<section class="tl6-wrap">
  <header class="tl6-head">
    <h2 class="tl6-title">Sourdough <span class="tl6-swash">Starter</span><br>A 21-day Diary</h2>
    <div class="tl6-recipe">
      <h4 class="tl6-recipe-head">before you begin —</h4>
      <p>You need almost nothing. A glass jar, a wooden spoon, room around 22°C, and the patience of someone who has never been in a hurry.</p>
      <p class="tl6-ing">— rye flour, room-temp water, a kitchen with a window</p>
    </div>
  </header>

  <div class="tl6-grid">
    <div class="tl6-day-label">mon</div>
    <div class="tl6-day-label">tue</div>
    <div class="tl6-day-label">wed</div>
    <div class="tl6-day-label">thu</div>
    <div class="tl6-day-label">fri</div>
    <div class="tl6-day-label">sat</div>
    <div class="tl6-day-label">sun</div>

    <div class="tl6-day">
      <div class="tl6-num">1</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="38" width="20" height="8" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">flour + water, mixed</div>
      <div class="tl6-act" style="--act: 10%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">2</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="36" width="20" height="10" fill="#d4b890"/>
          <circle cx="16" cy="42" r="1" class="tl6-bubble" style="animation-delay: 0s"/>
        </svg>
      </div>
      <div class="tl6-stage">quiet still</div>
      <div class="tl6-act" style="--act: 15%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">3</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="32" width="20" height="14" fill="#d4b890"/>
          <circle cx="14" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="22" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">first bubbles</div>
      <div class="tl6-act" style="--act: 35%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">4</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="28" width="20" height="18" fill="#d4b890"/>
          <circle cx="14" cy="38" r="1.5" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="20" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="26" cy="40" r="1.5" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">smells sour</div>
      <div class="tl6-act" style="--act: 55%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">5</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="24" width="20" height="22" fill="#d4b890"/>
          <circle cx="13" cy="36" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="27" cy="38" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">false rise</div>
      <div class="tl6-act" style="--act: 60%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">6</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="30" width="20" height="16" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">it falls. don't worry.</div>
      <div class="tl6-act" style="--act: 30%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">7</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="26" width="20" height="20" fill="#d4b890"/>
          <circle cx="14" cy="36" r="1.5" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">second wind</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">8</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="13" cy="34" r="1" class="tl6-bubble"/>
          <circle cx="21" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="36" r="1" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">tangier now</div>
      <div class="tl6-act" style="--act: 65%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">9</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="20" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
          <circle cx="26" cy="34" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">doubling</div>
      <div class="tl6-act" style="--act: 78%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">10</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="26" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="32" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="16" cy="22" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">first peak ✦</div>
      <div class="tl6-act" style="--act: 90%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">11</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
          <circle cx="14" cy="34" r="1" class="tl6-bubble" style="animation-delay: 0.3s"/>
          <circle cx="24" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
        </svg>
      </div>
      <div class="tl6-stage">discard half</div>
      <div class="tl6-act" style="--act: 50%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">12</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
          <circle cx="13" cy="32" r="1.5" class="tl6-bubble"/>
          <circle cx="22" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
        </svg>
      </div>
      <div class="tl6-stage">rebuilding</div>
      <div class="tl6-act" style="--act: 68%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">13</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
          <circle cx="27" cy="32" r="1" class="tl6-bubble" style="animation-delay: 1.1s"/>
        </svg>
      </div>
      <div class="tl6-stage">predictable</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">14</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0s"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.4s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 0.8s"/>
          <circle cx="17" cy="20" r="1" class="tl6-bubble" style="animation-delay: 1.2s"/>
        </svg>
      </div>
      <div class="tl6-stage">bake-ready ✦</div>
      <div class="tl6-act" style="--act: 95%"></div>
    </div>

    <div class="tl6-day">
      <div class="tl6-num">15</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="24" cy="28" r="1.5" class="tl6-bubble" style="animation-delay: 0.6s"/>
        </svg>
      </div>
      <div class="tl6-stage">first loaf</div>
      <div class="tl6-act" style="--act: 75%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">16</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="20" width="20" height="26" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">rest</div>
      <div class="tl6-act" style="--act: 40%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">17</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="16" width="20" height="30" fill="#d4b890"/>
          <circle cx="14" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.2s"/>
          <circle cx="22" cy="26" r="1.5" class="tl6-bubble" style="animation-delay: 0.7s"/>
        </svg>
      </div>
      <div class="tl6-stage">name it</div>
      <div class="tl6-act" style="--act: 82%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">18</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="14" width="20" height="32" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1" class="tl6-bubble" style="animation-delay: 0.1s"/>
          <circle cx="21" cy="24" r="1.5" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1" class="tl6-bubble" style="animation-delay: 0.9s"/>
        </svg>
      </div>
      <div class="tl6-stage">share with neighbor</div>
      <div class="tl6-act" style="--act: 88%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">19</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="18" width="20" height="28" fill="#d4b890"/>
          <circle cx="14" cy="32" r="1.5" class="tl6-bubble"/>
        </svg>
      </div>
      <div class="tl6-stage">to the fridge</div>
      <div class="tl6-act" style="--act: 25%"></div>
    </div>
    <div class="tl6-day">
      <div class="tl6-num">20</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="22" width="20" height="24" fill="#d4b890"/>
        </svg>
      </div>
      <div class="tl6-stage">sleeping</div>
      <div class="tl6-act" style="--act: 12%"></div>
    </div>
    <div class="tl6-day tl6-peak">
      <div class="tl6-num">21</div>
      <div class="tl6-jar">
        <svg viewBox="0 0 40 50" aria-hidden="true">
          <rect x="14" y="2" width="12" height="4" fill="#6a4a3a"/>
          <path d="M8 8 L32 8 L32 46 Q32 48 30 48 L10 48 Q8 48 8 46 Z" fill="#e8d5b0" stroke="#6a4a3a" stroke-width="1"/>
          <rect x="10" y="12" width="20" height="34" fill="#d4b890"/>
          <circle cx="13" cy="28" r="1.5" class="tl6-bubble"/>
          <circle cx="20" cy="24" r="1" class="tl6-bubble" style="animation-delay: 0.5s"/>
          <circle cx="27" cy="30" r="1.5" class="tl6-bubble" style="animation-delay: 1s"/>
        </svg>
      </div>
      <div class="tl6-stage">it has a name now ✦</div>
      <div class="tl6-act" style="--act: 92%"></div>
    </div>
  </div>

  <div class="tl6-tasting">
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 3 — first acid</h5>
      <div class="tl6-note-day">tasting note</div>
      Sharp, almost like green apple peel. Bubbles smaller than a poppy seed. You will think it has failed. It has not.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 10 — peak one</h5>
      <div class="tl6-note-day">tasting note</div>
      Yogurt and warm wheat. Doubles in four hours. The smell will rearrange your kitchen — in a good way.
    </div>
    <div class="tl6-note">
      <h5 class="tl6-note-head">day 21 — the bread</h5>
      <div class="tl6-note-day">tasting note</div>
      Crust like old porcelain, crumb the color of evening light. A faint sweetness underneath the sour. Now you have a friend for life.
    </div>
  </div>
</section>
```

**CSS:**
```css
.tl6-wrap {
  background: #f5ecd9;
  color: #3a2a1a;
  font-family: 'EB Garamond', Georgia, serif;
  padding: 2.5rem 2rem 3rem;
  position: relative;
  overflow: hidden;
}
.tl6-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(184, 92, 56, 0.04) 0 80px, transparent 80px),
    radial-gradient(circle at 80% 70%, rgba(106, 130, 90, 0.06) 0 100px, transparent 100px),
    radial-gradient(circle at 50% 50%, rgba(146, 89, 130, 0.03) 0 60px, transparent 60px);
  pointer-events: none;
}
.tl6-wrap > * { position: relative; }
.tl6-head {
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: end;
}
.tl6-title {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 0.95;
  color: #3a2a1a;
  margin: 0;
}
.tl6-swash {
  font-family: 'Caveat', 'EB Garamond', cursive;
  color: #b85c38;
  font-weight: 700;
  font-style: normal;
  display: block;
  font-size: 1.2em;
  transform: rotate(-2deg) translateX(20px);
}
.tl6-recipe {
  background: #fff8e8;
  border: 1px solid #c4ab85;
  padding: 1rem;
  transform: rotate(1deg);
  box-shadow: 4px 4px 0 rgba(58,42,26,0.1);
  position: relative;
}
.tl6-recipe::before {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  width: 60px; height: 16px;
  background: rgba(184, 92, 56, 0.3);
  transform: translateX(-50%) rotate(-3deg);
}
.tl6-recipe-head {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  color: #b85c38;
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.tl6-recipe p {
  font-size: 13px;
  line-height: 1.5;
  color: #5a3e2a;
  margin: 0 0 0.5rem;
}
.tl6-ing {
  font-family: 'Caveat', cursive;
  font-size: 1rem !important;
  color: #6a4a3a !important;
}
.tl6-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.75rem;
}
.tl6-day-label {
  font-family: 'Caveat', cursive;
  font-size: 1.15rem;
  color: #b85c38;
  text-align: center;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px dashed #c4ab85;
}
.tl6-day {
  aspect-ratio: 1;
  background: #fff8e8;
  border: 1.5px solid #c4ab85;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.tl6-day:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 4px 6px 0 rgba(58,42,26,0.15);
  z-index: 3;
}
.tl6-num {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #6a4a3a;
}
.tl6-stage {
  font-family: 'Caveat', cursive;
  font-size: 0.9rem;
  line-height: 1.1;
  color: #3a2a1a;
  margin-top: auto;
}
.tl6-jar {
  width: 44px;
  height: 54px;
  margin: 4px auto;
}
.tl6-jar svg { width: 100%; height: 100%; }
.tl6-bubble {
  fill: rgba(255,255,255,0.6);
  animation: tl6-rise 3s ease-in infinite;
}
@keyframes tl6-rise {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tl6-bubble { animation: none; opacity: 0.6; }
}
.tl6-peak { background: #ffe9c4; border-color: #b85c38; }
.tl6-peak .tl6-stage { color: #b85c38; font-weight: 700; }
.tl6-act {
  height: 4px;
  background: rgba(196,171,133,0.3);
  margin-top: 4px;
  position: relative;
}
.tl6-act::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--act, 0%);
  background: linear-gradient(90deg, #6a825a, #b85c38);
}
.tl6-tasting {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #c4ab85;
}
.tl6-note {
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: #5a3e2a;
  padding-left: 1rem;
  border-left: 2px solid #b85c38;
}
.tl6-note-head {
  font-family: 'Caveat', cursive;
  font-style: normal;
  font-size: 1.25rem;
  color: #b85c38;
  margin: 0 0 0.25rem;
  font-weight: 700;
}
.tl6-note-day {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6a4a3a;
  margin-bottom: 0.5rem;
}
@media (max-width: 720px) {
  .tl6-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl6-grid { grid-template-columns: repeat(4, 1fr); }
  .tl6-tasting { grid-template-columns: 1fr; }
}
```

### 07. Thread Timeline

**Type:** Pure CSS
**Description:** Conversational thread format where each moment reads like a message. Tight left-aligned thread line with chat-bubble entries and system-event dividers. Perfect for healthcare patient histories, support ticket logs, or onboarding checklists that tell a human story step by step.

**HTML:**
```html
<div class="tl7-wrap">
  <div class="tl7-thread"></div>

  <div class="tl7-entry tl7-system">
    <div class="tl7-avatar" aria-hidden="true">●</div>
    <div class="tl7-bubble">
      <p class="tl7-msg">Patient record opened · Case #PT-20419 · Admitted 08 Jan 2025</p>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">DR</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Dr. Ananya Rao — Attending</p>
      <p class="tl7-msg">Initial assessment complete. Patient presents with persistent fatigue and elevated markers. Ordering full metabolic panel and chest imaging. Suspect autoimmune involvement — referring to rheumatology.</p>
      <span class="tl7-ts">08 Jan 2025 · 09:14</span>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">LB</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Lab Results — Pathology</p>
      <p class="tl7-msg">ANA titre: 1:320 (positive). Anti-dsDNA elevated at 48 IU/mL. ESR 72 mm/hr. Results forwarded to rheumatology and attending physician.</p>
      <span class="tl7-ts">10 Jan 2025 · 14:32</span>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">RH</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Dr. Marcos Lima — Rheumatology</p>
      <p class="tl7-msg">Based on clinical picture and serology, diagnosis consistent with SLE. Initiating hydroxychloroquine 400mg daily. Scheduling follow-up in 6 weeks. Patient counselled on sun avoidance and flare recognition.</p>
      <span class="tl7-ts">15 Jan 2025 · 11:05</span>
    </div>
  </div>

  <div class="tl7-entry tl7-system">
    <div class="tl7-avatar tl7-avatar-ok" aria-hidden="true">✓</div>
    <div class="tl7-bubble tl7-bubble-ok">
      <p class="tl7-msg">Medication dispensed · Pharmacy confirmed · Insurance pre-auth approved</p>
    </div>
  </div>

  <div class="tl7-entry">
    <div class="tl7-avatar" aria-hidden="true">NS</div>
    <div class="tl7-bubble">
      <p class="tl7-who">Nurse Yuki Tanaka — Follow-up</p>
      <p class="tl7-msg">6-week check-in completed. Patient reports reduced fatigue, joint pain improved significantly. No adverse drug reactions noted. Labs trending in right direction — ESR down to 41 mm/hr.</p>
      <span class="tl7-ts">26 Feb 2025 · 10:20</span>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl7-wrap {
  --tl7-bg: #0c1117;
  --tl7-a:  #00e5c8;
  background: var(--tl7-bg);
  padding: 2.5rem 1.75rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl7-thread {
  position: absolute;
  left: calc(1.75rem + 19px);
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(to bottom, var(--tl7-a), rgba(0,229,200,0.05));
}
.tl7-entry {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  position: relative;
}
.tl7-entry:last-child { margin-bottom: 0; }
.tl7-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--tl7-a);
  position: relative;
  z-index: 2;
  border: 1px solid rgba(0,229,200,0.3);
  background: rgba(0,229,200,0.08);
  box-shadow: 0 0 0 3px var(--tl7-bg);
}
.tl7-bubble {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px 16px 16px 16px;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s, background 0.2s;
}
.tl7-bubble:hover {
  background: rgba(0,229,200,0.05);
  border-color: rgba(0,229,200,0.2);
}
.tl7-who {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--tl7-a);
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.tl7-msg {
  font-size: 13.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
}
.tl7-ts {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-top: 0.5rem;
}
.tl7-system .tl7-bubble {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
  border-radius: 8px;
  text-align: center;
}
.tl7-system .tl7-msg {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tl7-avatar-ok {
  background: rgba(0,229,200,0.12);
  border-color: rgba(0,229,200,0.3);
  color: var(--tl7-a);
}
.tl7-bubble-ok {
  border-color: rgba(0,229,200,0.2) !important;
  background: rgba(0,229,200,0.04) !important;
}
@media (max-width: 480px) {
  .tl7-wrap { padding: 1.5rem 1rem; }
  .tl7-thread { left: calc(1rem + 19px); }
}
```

### 08. Accordion Timeline

**Type:** Pure CSS + tiny JS
**Description:** Collapsible year-rows that expand to reveal structured detail panels. Built for legislation history, contract amendments, compliance records — anywhere dense information must be scannable before it is readable. The accordion uses a small onclick handler so only one row stays open at a time.

**HTML:**
```html
<div class="tl8-wrap">
  <div class="tl8-row tl8-open">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">1998</span>
      <span class="tl8-summary">Data Protection Act <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Jurisdiction</p>
          <p class="tl8-detail-text">United Kingdom. Replaced the 1984 Act. Implemented the EC Data Protection Directive 95/46/EC into domestic law.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Key Provisions</p>
          <p class="tl8-detail-text">Eight data protection principles governing fair processing, purpose limitation, data accuracy, and subject access rights.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2002</span>
      <span class="tl8-summary">Privacy &amp; Electronic Comms <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Scope</p>
          <p class="tl8-detail-text">Regulated direct marketing, cookies, and electronic communications. First major regulation to address unsolicited email.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Amendment (2011)</p>
          <p class="tl8-detail-text">Cookie consent requirements strengthened following EU pressure. Opt-in became mandatory for non-essential tracking.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2018</span>
      <span class="tl8-summary">GDPR / DPA 2018 <span class="tl8-badge tl8-badge-en">Enacted</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Scale</p>
          <p class="tl8-detail-text">EU-wide regulation with extraterritorial effect. Maximum fines of €20M or 4% of global annual turnover, whichever is higher.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">New Rights</p>
          <p class="tl8-detail-text">Right to erasure, data portability, and objection to automated decision-making formally enshrined for the first time.</p>
        </div>
      </div>
    </div>
  </div>

  <div class="tl8-row">
    <div class="tl8-head" onclick="toggleTl2(this)">
      <span class="tl8-year">2022</span>
      <span class="tl8-summary">UK GDPR Post-Brexit <span class="tl8-badge tl8-badge-am">Amended</span></span>
      <span class="tl8-arrow" aria-hidden="true">▾</span>
    </div>
    <div class="tl8-body">
      <div class="tl8-body-inner">
        <div class="tl8-detail">
          <p class="tl8-detail-label">Divergence</p>
          <p class="tl8-detail-text">UK retained GDPR principles but began diverging from EU text. Government proposed reforms to reduce compliance burden for SMEs.</p>
        </div>
        <div class="tl8-detail">
          <p class="tl8-detail-label">Adequacy Decision</p>
          <p class="tl8-detail-text">EU granted UK adequacy status until 2025, permitting data flows. Subject to ongoing review as UK law evolves independently.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl8-wrap {
  --tl8-bg: #faf7f2;
  --tl8-a:  #b5451b;
  --tl8-ink: #1a1209;
  background: var(--tl8-bg);
  padding: 2rem 1.5rem;
  max-width: 780px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
  border-top: 2px solid var(--tl8-ink);
}
.tl8-row {
  border-bottom: 1px solid rgba(26,18,9,0.12);
}
.tl8-head {
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.1rem 0;
  cursor: pointer;
  transition: padding 0.15s;
}
.tl8-head:hover {
  padding-left: 0.5rem;
}
.tl8-year {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tl8-ink);
}
.tl8-summary {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  color: var(--tl8-ink);
}
.tl8-arrow {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(26,18,9,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--tl8-ink);
  transition: transform 0.3s, background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tl8-row.tl8-open .tl8-arrow {
  transform: rotate(180deg);
  background: var(--tl8-ink);
  color: var(--tl8-bg);
}
.tl8-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.tl8-row.tl8-open .tl8-body {
  max-height: 400px;
}
.tl8-body-inner {
  padding: 0 0 1.5rem 6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.tl8-detail {
  background: #fff;
  border: 1px solid rgba(26,18,9,0.1);
  padding: 0.9rem 1rem;
  border-radius: 2px;
}
.tl8-detail-label {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tl8-a);
  margin-bottom: 0.4rem;
}
.tl8-detail-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13.5px;
  color: rgba(26,18,9,0.65);
  line-height: 1.6;
}
.tl8-badge {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.tl8-badge-en {
  background: rgba(27,67,50,0.12);
  color: #1b4332;
}
.tl8-badge-am {
  background: rgba(181,69,27,0.1);
  color: var(--tl8-a);
}
@media (max-width: 600px) {
  .tl8-head { grid-template-columns: 70px 1fr 28px; gap: 0.75rem; }
  .tl8-body-inner { padding-left: 0; grid-template-columns: 1fr; }
}
```

**JS:**
```js
// Click any year-row header to toggle that row open. Only one row
// stays open at a time — clicking another collapses the previous one.
// Wired via inline onclick="toggleTl2(this)" in the HTML markup.
function toggleTl2(headEl) {
  const row = headEl.closest('.tl8-row');
  const isOpen = row.classList.contains('tl8-open');
  document.querySelectorAll('.tl8-row.tl8-open').forEach(r => r.classList.remove('tl8-open'));
  if (!isOpen) row.classList.add('tl8-open');
}
```

### 09. Cinematic Filmstrip

**Type:** CSS + drag scroll
**Description:** Horizontal film reel you drag to explore. Sprocket holes, warm amber type, and frame numbers give it a physical celluloid feel — ideal for film studies, festival histories, or any media company timeline that wants to read as cinema rather than spreadsheet.

**HTML:**
```html
<div class="tl9-stripwrap">
  <div class="tl9-sprockets" aria-hidden="true">
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
  </div>

  <div class="tl9-frames" id="tl9-frames">
    <div class="tl9-frame" data-n="F·001">
      <div class="tl9-year">1927</div>
      <h3 class="tl9-title">The Jazz Singer</h3>
      <p class="tl9-desc">The first feature-length film with synchronized dialogue. Warner Bros gambled on a dying studio — and changed cinema forever.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Sound Era</span>
        <span class="tl9-chip">Warner Bros</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·002">
      <div class="tl9-year">1941</div>
      <h3 class="tl9-title">Citizen Kane</h3>
      <p class="tl9-desc">Welles' debut redefined visual storytelling. Deep focus, unconventional structure, and narrative fragmentation became a new grammar.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">RKO</span>
        <span class="tl9-chip">Welles</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·003">
      <div class="tl9-year">1960</div>
      <h3 class="tl9-title">La Dolce Vita</h3>
      <p class="tl9-desc">Fellini's freewheeling portrait of Roman high society. Coined a word, launched a visual culture, and bewildered critics for decades.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Nouvelle Vague</span>
        <span class="tl9-chip">Fellini</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·004">
      <div class="tl9-year">1972</div>
      <h3 class="tl9-title">The Godfather</h3>
      <p class="tl9-desc">Coppola transforms pulp crime fiction into Shakespearean tragedy. The American New Wave at its most commercially ruthless.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">New Hollywood</span>
        <span class="tl9-chip">Paramount</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·005">
      <div class="tl9-year">1994</div>
      <h3 class="tl9-title">Pulp Fiction</h3>
      <p class="tl9-desc">Tarantino's fractured chronology, pop-culture saturation, and explosive dialogue reset independent cinema's ambitions globally.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">Indie</span>
        <span class="tl9-chip">Tarantino</span>
      </div>
    </div>
    <div class="tl9-frame" data-n="F·006">
      <div class="tl9-year">2019</div>
      <h3 class="tl9-title">Parasite</h3>
      <p class="tl9-desc">Bong Joon-ho's genre-shifting class satire became the first non-English film to win the Academy Award for Best Picture.</p>
      <div class="tl9-meta">
        <span class="tl9-chip">CJ ENM</span>
        <span class="tl9-chip">Palme d'Or</span>
      </div>
    </div>
  </div>

  <div class="tl9-sprockets" aria-hidden="true">
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
    <div class="tl9-hole"></div><div class="tl9-hole"></div><div class="tl9-hole"></div>
  </div>

  <p class="tl9-hint">↔ DRAG TO SCROLL ↔</p>
</div>
```

**CSS:**
```css
.tl9-stripwrap {
  --tl9-bg: #13111a;
  --tl9-a:  #f0c040;
  background: var(--tl9-bg);
  padding: 2rem 0 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}
.tl9-sprockets {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-top: 2px solid rgba(240,192,64,0.15);
  border-bottom: 2px solid rgba(240,192,64,0.15);
  gap: 2.5rem;
  overflow: hidden;
}
.tl9-hole {
  width: 12px;
  height: 18px;
  border-radius: 3px;
  border: 1.5px solid rgba(240,192,64,0.28);
  flex-shrink: 0;
}
.tl9-frames {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
  border-top: 3px solid rgba(240,192,64,0.22);
  border-bottom: 3px solid rgba(240,192,64,0.22);
}
.tl9-frames::-webkit-scrollbar { display: none; }
.tl9-frame {
  flex-shrink: 0;
  width: 240px;
  border-right: 2px solid rgba(240,192,64,0.1);
  padding: 1.75rem 1.5rem;
  position: relative;
  transition: background 0.25s;
}
.tl9-frame:hover {
  background: rgba(240,192,64,0.04);
}
.tl9-frame::before {
  content: attr(data-n);
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(240,192,64,0.25);
}
.tl9-year {
  font-family: 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--tl9-a);
  line-height: 1;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 30px rgba(240,192,64,0.3);
}
.tl9-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl9-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.tl9-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tl9-chip {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 3px;
  color: rgba(240,192,64,0.7);
}
.tl9-hint {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(240,192,64,0.35);
  letter-spacing: 2px;
}
```

**JS:**
```js
// Drag-to-scroll the horizontal filmstrip. Mouse handlers wire
// up grab/release; touch handlers do the same for mobile. Wrapped
// in an IIFE so the element handle, state vars, and listeners stay
// scoped. Runs once per page load since the gallery dedupes
// identical js strings before emitting script tags.
(function() {
  const el = document.getElementById('tl9-frames');
  if (!el) return;
  let down = false, sx = 0, sl = 0;
  el.addEventListener('mousedown', e => {
    down = true; sx = e.pageX - el.offsetLeft; sl = el.scrollLeft;
    el.style.cursor = 'grabbing'; el.style.userSelect = 'none';
  });
  document.addEventListener('mouseup', () => { down = false; el.style.cursor = 'grab'; });
  el.addEventListener('mousemove', e => {
    if (!down) return; e.preventDefault();
    el.scrollLeft = sl - (e.pageX - el.offsetLeft - sx) * 1.3;
  });
  let tx = 0;
  el.addEventListener('touchstart', e => { tx = e.touches[0].pageX; sl = el.scrollLeft; }, { passive: true });
  el.addEventListener('touchmove', e => { el.scrollLeft = sl - (e.touches[0].pageX - tx); }, { passive: true });
})();
```

### 10. Nature Trail

**Type:** Pure CSS
**Description:** Stepping stones along a dashed path. Each milestone is anchored by an icon gem, a year marker, and impact tags. Earthy greens, alternating left/right layout, and an organic visual rhythm — made for environmental reports, ESG storytelling, and brand sustainability journeys.

**HTML:**
```html
<div class="tl10-wrap">
  <div class="tl10-path" aria-hidden="true"></div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 01</p>
      <h3 class="tl10-name">Baseline Assessment</h3>
      <p class="tl10-desc">Comprehensive scope 1, 2, and 3 emissions audit completed across all 14 operational sites. The first honest look at our footprint — and it was confronting.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Carbon Audit</span>
        <span class="tl10-tag">14 Sites</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◉</div>
      <span class="tl10-year">2020</span>
    </div>
    <div class="tl10-img">🌍</div>
  </div>

  <div class="tl10-stone tl10-flip">
    <div class="tl10-img">⚡</div>
    <div class="tl10-center">
      <div class="tl10-gem">⚡</div>
      <span class="tl10-year">2021</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 02</p>
      <h3 class="tl10-name">Renewable Transition</h3>
      <p class="tl10-desc">Switched 80% of grid electricity to wind and solar PPAs. On-site solar installed at 6 warehouses. Energy costs fell 22% in year one.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">−42% Scope 2</span>
        <span class="tl10-tag">PPA Contracts</span>
      </div>
    </div>
  </div>

  <div class="tl10-stone">
    <div class="tl10-text">
      <p class="tl10-phase">Phase 03</p>
      <h3 class="tl10-name">Supply Chain Engagement</h3>
      <p class="tl10-desc">Rolled out supplier sustainability scorecard to 340 vendors. 82% have committed to science-based targets. Phased out three high-impact suppliers.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">340 Vendors</span>
        <span class="tl10-tag">SBTi Aligned</span>
      </div>
    </div>
    <div class="tl10-center">
      <div class="tl10-gem">◈</div>
      <span class="tl10-year">2023</span>
    </div>
    <div class="tl10-img">🌱</div>
  </div>

  <div class="tl10-stone tl10-flip tl10-last">
    <div class="tl10-img">🎯</div>
    <div class="tl10-center">
      <div class="tl10-gem">★</div>
      <span class="tl10-year">2025</span>
    </div>
    <div class="tl10-text">
      <p class="tl10-phase">Phase 04</p>
      <h3 class="tl10-name">Net Zero Certified</h3>
      <p class="tl10-desc">Achieved verified net zero status across scopes 1 and 2. Scope 3 on target for 2028. B Corp certification under review. The hardest work is still ahead.</p>
      <div class="tl10-tags">
        <span class="tl10-tag">Net Zero S1+S2</span>
        <span class="tl10-tag">B Corp Pending</span>
        <span class="tl10-tag">2028 Target</span>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl10-wrap {
  --tl10-bg: #f2f4f0;
  --tl10-a:  #1b4332;
  --tl10-ink: #0d1f16;
  background: var(--tl10-bg);
  padding: 2.5rem 1.5rem;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl10-path {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(27,67,50,0.3) 0 8px,
    transparent 8px 16px
  );
  transform: translateX(-50%);
}
.tl10-stone {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
}
.tl10-last { margin-bottom: 0; }
.tl10-flip .tl10-text  { grid-column: 3; }
.tl10-flip .tl10-img   { grid-column: 1; }
.tl10-text { padding: 0 1.5rem; }
.tl10-flip .tl10-text { text-align: left; }
.tl10-stone:not(.tl10-flip) .tl10-text { text-align: right; }
.tl10-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  grid-column: 2;
}
.tl10-gem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(27,67,50,0.25);
  box-shadow: 0 4px 16px rgba(27,67,50,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tl10-a);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tl10-stone:hover .tl10-gem {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(27,67,50,0.2);
}
.tl10-year {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--tl10-a);
}
.tl10-phase {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(27,67,50,0.45);
  margin-bottom: 0.35rem;
}
.tl10-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
  color: var(--tl10-ink);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.tl10-desc {
  font-size: 13.5px;
  color: rgba(13,31,22,0.55);
  line-height: 1.7;
  margin: 0 0 0.7rem;
}
.tl10-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-end; }
.tl10-tag {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  padding: 0.2rem 0.6rem;
  background: rgba(27,67,50,0.08);
  border-radius: 99px;
  color: var(--tl10-a);
}
.tl10-img {
  aspect-ratio: 5 / 4;
  max-width: 220px;
  border-radius: 12px;
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  box-shadow: 0 4px 20px rgba(27,67,50,0.12);
}
@media (max-width: 720px) {
  .tl10-path { left: 28px; }
  .tl10-stone, .tl10-flip {
    grid-template-columns: 56px 1fr;
    gap: 0.75rem;
    text-align: left;
  }
  .tl10-flip .tl10-text,
  .tl10-stone:not(.tl10-flip) .tl10-text { text-align: left; grid-column: 2; padding: 0; }
  .tl10-center { grid-column: 1; align-self: flex-start; }
  .tl10-img { display: none; }
  .tl10-stone:not(.tl10-flip) .tl10-tags { justify-content: flex-start; }
}
```

### 11. Terminal Log

**Type:** Pure CSS
**Description:** Terminal-style incident timeline. Each log line carries a timestamp, severity level, and event detail. Scanlines, mono fonts, and blinking critical alerts create genuine operational tension. Built for incident reports, security audits, deployment postmortems.

**HTML:**
```html
<div class="tl11-wrap">
  <div class="tl11-scanlines" aria-hidden="true"></div>

  <div class="tl11-term">
    <div class="tl11-topbar">
      <span class="tl11-dot tl11-r"></span>
      <span class="tl11-dot tl11-y"></span>
      <span class="tl11-dot tl11-g"></span>
      <span class="tl11-tlabel">incident-report-2025-03-14.log — Production / US-EAST-1</span>
    </div>

    <div class="tl11-body">
      <div class="tl11-sep">── INCIDENT INC-4471 · Severity P1 · Duration 4h 17m ──</div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:13:07</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Latency spike detected on <strong>api-gateway-prod-3</strong>. P99: <span class="tl11-hl">1,840ms</span> (threshold 500ms). Auto-scaling triggered.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:19:44</span>
        <span class="tl11-lvl tl11-err">ERROR</span>
        <span class="tl11-text">DB connection pool exhausted on <strong>rds-primary-east</strong>. <span class="tl11-hl">4,200 queued</span>. New connections rejected.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:21:02</span>
        <span class="tl11-lvl tl11-crit">CRIT</span>
        <span class="tl11-text"><strong>ALERT FIRED:</strong> Error rate exceeded <span class="tl11-hl">18.7%</span>. PagerDuty escalated. Checkout flow <span class="tl11-hl">DEGRADED</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:28:15</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">SRE <strong>@chen_wei</strong> acknowledged. War room opened in <strong>#inc-4471</strong>. Status page updated to "Investigating".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 02:45:33</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Root cause: <strong>unoptimised query</strong> in release <span class="tl11-hl">v4.12.1</span> causing full table scans. Rollback initiated.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:02:09</span>
        <span class="tl11-lvl tl11-warn">WARN</span>
        <span class="tl11-text">Rollback to <strong>v4.11.9</strong> complete. Queue depth: <span class="tl11-hl">812</span>. Error rate falling → <span class="tl11-hl">3.2%</span>.</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 03:18:51</span>
        <span class="tl11-lvl tl11-ok">OK</span>
        <span class="tl11-text">All services nominal. Error rate <span class="tl11-hl">0.04%</span>. P99 <span class="tl11-hl">182ms</span>. Status: "Resolved".</span>
      </div>

      <div class="tl11-line">
        <span class="tl11-ts">03-14 06:30:00</span>
        <span class="tl11-lvl tl11-info">INFO</span>
        <span class="tl11-text">Postmortem created. <strong>Action items:</strong> query review gate in CI, pool alerting at 60% capacity, blue/green for DB migrations.</span>
      </div>

      <div class="tl11-sep">── END OF INCIDENT · 3,847 users affected · $14,200 est. revenue loss ──</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl11-wrap {
  --tl11-bg:   #080810;
  --tl11-a:    #ff3860;
  background: var(--tl11-bg);
  padding: 2rem 1.5rem;
  position: relative;
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  overflow: hidden;
}
.tl11-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.04) 0 1px,
    transparent 1px 3px
  );
}
.tl11-term {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid rgba(255,56,96,0.18);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tl11-topbar {
  background: rgba(255,56,96,0.08);
  border-bottom: 1px solid rgba(255,56,96,0.18);
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tl11-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.tl11-r { background: #ff5f57; }
.tl11-y { background: #febc2e; }
.tl11-g { background: #28c840; }
.tl11-tlabel {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin-left: 0.65rem;
}
.tl11-body {
  padding: 1.25rem 1rem;
}
.tl11-sep {
  font-size: 10.5px;
  color: rgba(255,255,255,0.12);
  letter-spacing: 1.5px;
  padding: 0.4rem 0;
}
.tl11-line {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.tl11-line:last-of-type { border-bottom: 0; }
.tl11-ts {
  font-size: 10.5px;
  color: rgba(255,255,255,0.22);
  white-space: nowrap;
  flex-shrink: 0;
}
.tl11-lvl {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}
.tl11-info { background: rgba(30,120,255,0.18); color: #4da6ff; }
.tl11-warn { background: rgba(255,180,0,0.18);  color: #fbbf24; }
.tl11-err  { background: rgba(255,56,96,0.22);  color: var(--tl11-a); }
.tl11-ok   { background: rgba(40,200,64,0.18);  color: #4ade80; }
.tl11-crit {
  background: rgba(255,56,96,0.4);
  color: #fff;
  animation: tl11-blink 1s step-end infinite;
}
@keyframes tl11-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.tl11-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.55;
  flex: 1;
  word-break: break-word;
}
.tl11-text strong { color: #fff; font-weight: 600; }
.tl11-hl          { color: var(--tl11-a); }
@media (max-width: 600px) {
  .tl11-line { flex-direction: column; gap: 0.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tl11-crit { animation: none; }
}
```

### 12. Art Deco Steps

**Type:** Pure CSS
**Description:** Gallery-wall layout with geometric ornamentation, italic serif eras, and curated work tags. Indigo on cream with diamond decorations and serif grandeur — for museums, heritage brands, artist retrospectives, and any institution whose history should feel like a permanent collection.

**HTML:**
```html
<div class="tl12-wrap">
  <div class="tl12-ornament" aria-hidden="true">
    <div class="tl12-rule"></div>
    <div class="tl12-diamond"></div>
    <div class="tl12-label">A Retrospective</div>
    <div class="tl12-diamond"></div>
    <div class="tl12-rule"></div>
  </div>

  <div class="tl12-entry">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Early</div>
        <div class="tl12-span">1890 — 1910</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">The Impressionist Foundation</h3>
        <p class="tl12-body">Rooted in the tradition of plein-air painting, the early works capture fleeting light and emotional atmosphere rather than documentary precision. Critics were hostile; collectors were entranced.</p>
        <div class="tl12-works">
          <span class="tl12-work">Haystacks at Dusk</span>
          <span class="tl12-work">The Seine in November</span>
          <span class="tl12-work">Portrait of Madeleine</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tl12-entry">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Middle</div>
        <div class="tl12-span">1911 — 1935</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">The Cubist Rupture</h3>
        <p class="tl12-body">Exposure to Picasso and Braque in Paris fractured the picture plane. The artist began dissecting familiar forms — faces, furniture, cityscapes — into interlocking geometric shards of simultaneous viewpoints.</p>
        <div class="tl12-works">
          <span class="tl12-work">Decomposition No. 7</span>
          <span class="tl12-work">Woman at the Table</span>
          <span class="tl12-work">Three Guitars</span>
        </div>
      </div>
    </div>
  </div>

  <div class="tl12-entry tl12-last">
    <div class="tl12-inner">
      <div class="tl12-left">
        <div class="tl12-era">Late</div>
        <div class="tl12-span">1936 — 1962</div>
      </div>
      <div class="tl12-right">
        <h3 class="tl12-title">Abstraction &amp; Silence</h3>
        <p class="tl12-body">The war years stripped away decoration. Large canvases of near-monochromatic fields emerged — radical reductions that anticipated Abstract Expressionism. The late works are the quietest and the most demanding.</p>
        <div class="tl12-works">
          <span class="tl12-work">Blue Field Study I</span>
          <span class="tl12-work">Nocturne for V.</span>
          <span class="tl12-work">The Last Interior</span>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl12-wrap {
  --tl12-bg:  #fff8f0;
  --tl12-a:   #2d3a8c;
  --tl12-ink: #0d0d20;
  background: var(--tl12-bg);
  padding: 2.5rem 1.5rem;
  max-width: 880px;
  margin: 0 auto;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl12-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.tl12-rule {
  flex: 1;
  height: 1px;
  background: rgba(45,58,140,0.22);
}
.tl12-diamond {
  width: 8px;
  height: 8px;
  background: var(--tl12-a);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.tl12-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45,58,140,0.5);
  white-space: nowrap;
}
.tl12-entry {
  margin-bottom: 3rem;
}
.tl12-last { margin-bottom: 0; }
.tl12-inner {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-left: 2px solid rgba(45,58,140,0.18);
}
.tl12-left {
  padding: 0 1.75rem 0 0;
  text-align: right;
  position: relative;
}
.tl12-left::after {
  content: '';
  position: absolute;
  right: -7px;
  top: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tl12-bg);
  border: 2px solid var(--tl12-a);
}
.tl12-era {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6rem;
  font-style: italic;
  color: var(--tl12-a);
  line-height: 1;
}
.tl12-span {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  color: rgba(13,13,32,0.35);
  letter-spacing: 0.5px;
  margin-top: 0.25rem;
}
.tl12-right {
  padding: 0 0 0 1.75rem;
}
.tl12-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.4rem;
  color: var(--tl12-ink);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.tl12-body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: rgba(13,13,32,0.6);
  line-height: 1.75;
  margin: 0 0 0.9rem;
}
.tl12-works {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tl12-work {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12.5px;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(45,58,140,0.22);
  border-radius: 2px;
  color: var(--tl12-a);
  background: rgba(45,58,140,0.04);
  transition: background 0.2s, color 0.2s;
  cursor: default;
}
.tl12-work:hover {
  background: var(--tl12-a);
  color: var(--tl12-bg);
}
@media (max-width: 600px) {
  .tl12-inner { grid-template-columns: 1fr; border-left: 0; }
  .tl12-left {
    padding: 0 0 1rem;
    text-align: left;
    border-left: 2px solid rgba(45,58,140,0.18);
    padding-left: 1rem;
  }
  .tl12-left::after { left: -7px; right: auto; }
  .tl12-right { padding-left: 1rem; border-left: 2px solid rgba(45,58,140,0.18); }
}
```

### 13. Vertical Centered

**Type:** Pure CSS
**Description:** Classic alternating layout with a glowing red center spine and editorial dot markers. Items zigzag left and right along a vertical line — the most recognizable timeline pattern, refined with bold serif type and a moody dark canvas.

**HTML:**
```html
<div class="tl13-wrap">
  <div class="tl13-line" aria-hidden="true"></div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2018</p>
      <h3 class="tl13-heading">First Contact</h3>
      <p class="tl13-body">A small prototype quietly changed everything. What started as a weekend project became the foundation for something much larger.</p>
      <span class="tl13-tag">Origin</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>

  <div class="tl13-item">
    <div class="tl13-empty"></div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-content">
      <p class="tl13-year">2019</p>
      <h3 class="tl13-heading">First Funding Round</h3>
      <p class="tl13-body">Series A closed at $4.2M. The team grew from 3 to 18 people over the following six months, fueling rapid product development.</p>
      <span class="tl13-tag">Growth</span>
    </div>
  </div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2021</p>
      <h3 class="tl13-heading">Global Expansion</h3>
      <p class="tl13-body">Operations extended to 12 countries. Localization teams established in EMEA, APAC, and LATAM markets.</p>
      <span class="tl13-tag">Scale</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>

  <div class="tl13-item">
    <div class="tl13-empty"></div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-content">
      <p class="tl13-year">2023</p>
      <h3 class="tl13-heading">Product V3 Launch</h3>
      <p class="tl13-body">A full platform rearchitecture delivered 10× performance improvements and unlocked an entirely new category of enterprise clients.</p>
      <span class="tl13-tag">Milestone</span>
    </div>
  </div>

  <div class="tl13-item">
    <div class="tl13-content">
      <p class="tl13-year">2025</p>
      <h3 class="tl13-heading">IPO Filed</h3>
      <p class="tl13-body">With $120M ARR and 94% NRR, the company filed S-1 with an initial valuation range between $1.4B and $1.9B.</p>
      <span class="tl13-tag">Today</span>
    </div>
    <div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
    <div class="tl13-empty"></div>
  </div>
</div>
```

**CSS:**
```css
.tl13-wrap {
  --tl13-bg:     #0a0a0a;
  --tl13-accent: #c8423a;
  background: var(--tl13-bg);
  padding: 2.5rem 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl13-line {
  position: absolute;
  left: 50%;
  top: 2.5rem;
  bottom: 2.5rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(200,66,58,0.6) 10%,
    rgba(200,66,58,0.6) 90%,
    transparent
  );
  transform: translateX(-50%);
}
.tl13-item {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: start;
  margin-bottom: 3rem;
}
.tl13-item:last-child { margin-bottom: 0; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-content { grid-column: 1; text-align: right; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-empty   { grid-column: 3; }
.tl13-item:nth-child(even of .tl13-item) .tl13-empty  { grid-column: 1; }
.tl13-item:nth-child(even of .tl13-item) .tl13-content { grid-column: 3; text-align: left; }
.tl13-dot-col {
  grid-column: 2;
  display: flex;
  justify-content: center;
  padding-top: 0.6rem;
}
.tl13-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tl13-accent);
  box-shadow:
    0 0 0 4px rgba(200,66,58,0.2),
    0 0 16px rgba(200,66,58,0.5);
}
.tl13-content { padding: 0 1.5rem; }
.tl13-year {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--tl13-accent);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.tl13-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl13-body {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.65;
  margin: 0;
}
.tl13-tag {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(200,66,58,0.4);
  border-radius: 4px;
  color: var(--tl13-accent);
}
@media (max-width: 600px) {
  .tl13-line { left: 22px; }
  .tl13-item,
  .tl13-item:nth-child(odd of .tl13-item),
  .tl13-item:nth-child(even of .tl13-item) {
    grid-template-columns: 44px 1fr;
  }
  .tl13-item:nth-child(odd of .tl13-item) .tl13-content,
  .tl13-item:nth-child(even of .tl13-item) .tl13-content {
    grid-column: 2;
    text-align: left;
    padding: 0 0 0 0.5rem;
  }
  .tl13-dot-col { grid-column: 1; justify-content: flex-start; padding-left: 14px; }
  .tl13-empty { display: none; }
}
```

### 14. Horizontal Scroll

**Type:** CSS + drag scroll
**Description:** A draggable horizontal ribbon of era cards above a ruled line. Each card gets its own accent color, building a rainbow chronology you can scroll left-to-right. Made for tech histories, product evolution, brand decades.

**HTML:**
```html
<div class="tl14-scene">
  <div class="tl14-rail-wrap" id="tl14-rail-wrap">
    <div class="tl14-rail">
      <div class="tl14-card tl14-c1">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">1980 — 1990</p>
          <h3 class="tl14-title">The Mainframe Decade</h3>
          <p class="tl14-desc">Computing power was centralized and access was controlled. The seeds of distributed thinking were being planted.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c2">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">1990 — 2000</p>
          <h3 class="tl14-title">The Internet Awakens</h3>
          <p class="tl14-desc">HTML, browsers, and dial-up modems stitched the world together. A new kind of publishing was born.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c3">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2000 — 2010</p>
          <h3 class="tl14-title">Social &amp; Mobile</h3>
          <p class="tl14-desc">Platforms, smartphones, and the always-on web reshaped every aspect of daily communication and commerce.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c4">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2010 — 2018</p>
          <h3 class="tl14-title">Cloud Dominance</h3>
          <p class="tl14-desc">Infrastructure became invisible. AWS, Azure, and GCP abstracted away hardware, enabling new kinds of scale.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c5">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2018 — 2023</p>
          <h3 class="tl14-title">Machine Learning Era</h3>
          <p class="tl14-desc">Transformers, foundation models, and generative AI moved from research papers to everyday products at breakneck speed.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
      <div class="tl14-card tl14-c6">
        <div class="tl14-node" aria-hidden="true"></div>
        <div class="tl14-inner">
          <p class="tl14-period">2023 — Now</p>
          <h3 class="tl14-title">Ambient Intelligence</h3>
          <p class="tl14-desc">AI is embedded into every layer of the stack. The interface is dissolving into conversation, context, and intent.</p>
          <div class="tl14-bar"></div>
        </div>
      </div>
    </div>
  </div>
  <p class="tl14-hint">↔ DRAG TO SCROLL ↔</p>
</div>
```

**CSS:**
```css
.tl14-scene {
  --tl14-paper: #f7f4ef;
  --tl14-ink:   #0d0d0d;
  --tl14-c1: #0d0d0d;
  --tl14-c2: #c8423a;
  --tl14-c3: #2b6cb0;
  --tl14-c4: #d4a017;
  --tl14-c5: #1a7a4a;
  --tl14-c6: #7c3aed;
  background: var(--tl14-paper);
  padding: 2rem 0;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl14-rail-wrap {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 1.5rem 2rem 2rem;
  cursor: grab;
}
.tl14-rail-wrap::-webkit-scrollbar { display: none; }
.tl14-rail {
  display: flex;
  gap: 60px;
  min-width: max-content;
  align-items: flex-start;
  position: relative;
}
.tl14-rail::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tl14-ink) 5%,
    var(--tl14-ink) 95%,
    transparent
  );
}
.tl14-card {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  padding-top: 70px;
}
.tl14-node {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tl14-ink);
  border: 3px solid var(--tl14-paper);
  box-shadow: 0 0 0 2px var(--tl14-ink);
  z-index: 2;
}
.tl14-c2 .tl14-node { background: var(--tl14-c2); box-shadow: 0 0 0 2px var(--tl14-c2); }
.tl14-c3 .tl14-node { background: var(--tl14-c3); box-shadow: 0 0 0 2px var(--tl14-c3); }
.tl14-c4 .tl14-node { background: var(--tl14-c4); box-shadow: 0 0 0 2px var(--tl14-c4); }
.tl14-c5 .tl14-node { background: var(--tl14-c5); box-shadow: 0 0 0 2px var(--tl14-c5); }
.tl14-c6 .tl14-node { background: var(--tl14-c6); box-shadow: 0 0 0 2px var(--tl14-c6); }
.tl14-inner {
  background: #fff;
  border: 1px solid rgba(13,13,13,0.1);
  padding: 1.1rem 1.1rem 1.3rem;
  border-radius: 4px;
  box-shadow: 4px 4px 0 rgba(13,13,13,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl14-inner:hover {
  transform: translateY(-4px);
  box-shadow: 4px 8px 0 rgba(13,13,13,0.12);
}
.tl14-period {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: rgba(13,13,13,0.4);
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.tl14-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tl14-ink);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.tl14-desc {
  font-size: 12.5px;
  color: rgba(13,13,13,0.5);
  line-height: 1.55;
  margin: 0;
}
.tl14-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 0.9rem;
  background: var(--tl14-ink);
}
.tl14-c2 .tl14-bar { background: var(--tl14-c2); }
.tl14-c3 .tl14-bar { background: var(--tl14-c3); }
.tl14-c4 .tl14-bar { background: var(--tl14-c4); }
.tl14-c5 .tl14-bar { background: var(--tl14-c5); }
.tl14-c6 .tl14-bar { background: var(--tl14-c6); }
.tl14-hint {
  margin: 1rem 0 0;
  text-align: center;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(13,13,13,0.35);
  letter-spacing: 2px;
}
```

**JS:**
```js
// Drag-to-scroll the horizontal ribbon. Same pattern as the
// filmstrip demo; IIFE keeps state and listeners scoped per page.
(function() {
  const rail = document.getElementById('tl14-rail-wrap');
  if (!rail) return;
  let down = false, sx = 0, sl = 0;
  rail.addEventListener('mousedown', e => {
    down = true;
    sx = e.pageX - rail.offsetLeft;
    sl = rail.scrollLeft;
    rail.style.cursor = 'grabbing';
    rail.style.userSelect = 'none';
  });
  document.addEventListener('mouseup', () => { down = false; rail.style.cursor = 'grab'; });
  rail.addEventListener('mousemove', e => {
    if (!down) return;
    e.preventDefault();
    rail.scrollLeft = sl - (e.pageX - rail.offsetLeft - sx) * 1.2;
  });
  let tx = 0;
  rail.addEventListener('touchstart', e => { tx = e.touches[0].pageX; sl = rail.scrollLeft; }, { passive: true });
  rail.addEventListener('touchmove',  e => { rail.scrollLeft = sl - (e.touches[0].pageX - tx); }, { passive: true });
})();
```

### 15. Neon Left Rail

**Type:** Pure CSS
**Description:** A glowing purple spine anchors event icons to detailed metric cards. Dark, dense, and data-forward — built for engineering dashboards, mission logs, and product announcements where every event needs numbers attached.

**HTML:**
```html
<div class="tl15-scene">
  <div class="tl15-wrap">
    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">◉</div>
      <div class="tl15-meta">
        <span class="tl15-date">Jan 2022</span>
        <span class="tl15-badge">Launch</span>
      </div>
      <h3 class="tl15-title">Mission Alpha Initiated</h3>
      <p class="tl15-body">Initial deployment of the orbital logistics platform. Four units synchronized across three continents within the first 72 hours of operation.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">4</span><span class="tl15-stat-label">Units</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">72h</span><span class="tl15-stat-label">Deploy</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">99.2%</span><span class="tl15-stat-label">Uptime</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">⚡</div>
      <div class="tl15-meta">
        <span class="tl15-date">Sep 2022</span>
        <span class="tl15-badge">Upgrade</span>
      </div>
      <h3 class="tl15-title">Propulsion Overhaul</h3>
      <p class="tl15-body">Second-generation ion drives installed across the fleet, cutting fuel consumption by 38% and extending operational range by nearly 2,000km.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">−38%</span><span class="tl15-stat-label">Fuel</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">+2k</span><span class="tl15-stat-label">km Range</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">⚠</div>
      <div class="tl15-meta">
        <span class="tl15-date">Mar 2024</span>
        <span class="tl15-badge">Critical</span>
      </div>
      <h3 class="tl15-title">Communication Relay Failure</h3>
      <p class="tl15-body">Ground station Echo suffered a 14-hour blackout. Autonomous recovery protocols activated; manual override restored full comms within 6 hours ahead of schedule.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">14h</span><span class="tl15-stat-label">Outage</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">6h</span><span class="tl15-stat-label">Recovery</span></div>
      </div>
    </div>

    <div class="tl15-item">
      <div class="tl15-icon" aria-hidden="true">★</div>
      <div class="tl15-meta">
        <span class="tl15-date">Nov 2025</span>
        <span class="tl15-badge">Milestone</span>
      </div>
      <h3 class="tl15-title">Global Coverage Achieved</h3>
      <p class="tl15-body">The 24th satellite placed the network in geosynchronous alignment. Full polar coverage now enables sub-50ms latency for any point on Earth.</p>
      <div class="tl15-stats">
        <div class="tl15-stat"><span class="tl15-stat-val">24</span><span class="tl15-stat-label">Satellites</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">&lt;50ms</span><span class="tl15-stat-label">Latency</span></div>
        <div class="tl15-stat"><span class="tl15-stat-val">100%</span><span class="tl15-stat-label">Coverage</span></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl15-scene {
  --tl15-bg:     #08081a;
  --tl15-accent: #7c3aed;
  --tl15-accent-soft: #a78bfa;
  background: var(--tl15-bg);
  padding: 2.5rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl15-wrap {
  max-width: 720px;
  margin: 0 auto;
  border-left: 1px solid rgba(124,58,237,0.3);
}
.tl15-item {
  position: relative;
  padding: 0 0 3rem 3rem;
}
.tl15-item:last-child { padding-bottom: 0; }
.tl15-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  height: 100%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(124,58,237,0.8),
    rgba(124,58,237,0.1)
  );
}
.tl15-icon {
  position: absolute;
  left: -22px;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--tl15-accent-soft);
  box-shadow: 0 0 20px rgba(124,58,237,0.3);
}
.tl15-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}
.tl15-date {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--tl15-accent);
  text-transform: uppercase;
}
.tl15-badge {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  background: rgba(124,58,237,0.15);
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: 3px;
  color: var(--tl15-accent-soft);
}
.tl15-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
}
.tl15-body {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin: 0 0 0.9rem;
}
.tl15-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tl15-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.tl15-stat-val {
  font-family: ui-monospace, monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--tl15-accent-soft);
}
.tl15-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
```

### 16. Editorial

**Type:** Pure CSS
**Description:** Magazine-style two-column alternating layout with large gradient visuals, italic serif headings, and pull quotes. Refined type on warm paper — built for retrospectives, brand histories, and long-read feature articles.

**HTML:**
```html
<div class="tl16-scene">
  <div class="tl16-wrap">
    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">01</p>
        <p class="tl16-decade">1940 — 1960</p>
        <h3 class="tl16-heading">The Atomic Age</h3>
        <p class="tl16-body">Nuclear fission unlocked both promise and peril. Nations raced to harness what was once thought to be nature's most fundamental secret.</p>
        <blockquote class="tl16-pullquote">"We have unleashed a force that will reshape civilization itself."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v1" data-label="1940 — 1960">40s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">02</p>
        <p class="tl16-decade">1960 — 1980</p>
        <h3 class="tl16-heading">The Space Race</h3>
        <p class="tl16-body">Earthbound dreams took flight. Rockets carried humans beyond the atmosphere, reframing humanity's sense of its own place in the cosmos.</p>
        <blockquote class="tl16-pullquote">"The Moon is not so far when you decide you must go there."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v2" data-label="1960 — 1980">60s</div>
      </div>
    </div>

    <div class="tl16-entry">
      <div class="tl16-text">
        <p class="tl16-number">03</p>
        <p class="tl16-decade">1980 — 2000</p>
        <h3 class="tl16-heading">The Digital Revolution</h3>
        <p class="tl16-body">Personal computers arrived in homes. Software became the new architecture, and those who wrote it found themselves as the architects of the century ahead.</p>
        <blockquote class="tl16-pullquote">"Software is eating the world — and it's hungry."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v3" data-label="1980 — 2000">80s</div>
      </div>
    </div>

    <div class="tl16-entry tl16-last">
      <div class="tl16-text">
        <p class="tl16-number">04</p>
        <p class="tl16-decade">2000 — Present</p>
        <h3 class="tl16-heading">The Intelligence Age</h3>
        <p class="tl16-body">Data became the substrate of decision. Machines learned from patterns invisible to human eyes, and the boundary between tool and collaborator began to blur.</p>
        <blockquote class="tl16-pullquote">"We are no longer just using intelligence; we are growing it."</blockquote>
      </div>
      <div class="tl16-visual">
        <div class="tl16-visual-inner tl16-v4" data-label="2000 — Now">2K</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl16-scene {
  --tl16-paper: #f0ece4;
  --tl16-ink:   #0d0d0d;
  background: var(--tl16-paper);
  padding: 3rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl16-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.tl16-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  align-items: center;
  border-bottom: 1px solid rgba(13,13,13,0.1);
}
.tl16-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tl16-entry:nth-child(even) .tl16-text   { order: 2; }
.tl16-entry:nth-child(even) .tl16-visual { order: 1; }
.tl16-visual {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.tl16-visual-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.9);
  position: relative;
}
.tl16-visual-inner::after {
  content: attr(data-label);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  font-weight: 400;
}
.tl16-v1 { background: linear-gradient(135deg, #1a1a2e, #c8423a); }
.tl16-v2 { background: linear-gradient(135deg, #0a3d62, #2980b9); }
.tl16-v3 { background: linear-gradient(135deg, #1a3a1a, #2ecc71); }
.tl16-v4 { background: linear-gradient(135deg, #3d2000, #d4a017); }
.tl16-number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(13,13,13,0.1);
  line-height: 1;
  margin: 0 0 -0.5rem;
}
.tl16-decade {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(13,13,13,0.4);
  text-transform: uppercase;
  margin: 0 0 0.7rem;
}
.tl16-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tl16-ink);
  margin: 0 0 0.7rem;
  line-height: 1.2;
}
.tl16-body {
  font-size: 13.5px;
  color: rgba(13,13,13,0.6);
  line-height: 1.75;
  margin: 0;
}
.tl16-pullquote {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--tl16-ink);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(13,13,13,0.65);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .tl16-entry,
  .tl16-entry:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
  .tl16-entry:nth-child(even) .tl16-text,
  .tl16-entry:nth-child(even) .tl16-visual { order: unset; }
}
```

### 17. Stacked Progress

**Type:** Pure CSS
**Description:** Left-anchored trail with per-card progress bars and status pills. Built for product roadmaps, quarterly OKRs, and milestone trackers where each step carries a percentage and a "done / in progress / planned" state.

**HTML:**
```html
<div class="tl17-scene">
  <div class="tl17-wrap">
    <div class="tl17-track" aria-hidden="true"><div class="tl17-track-fill"></div></div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q1</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jan — Mar 2025</span>
          <span class="tl17-status tl17-done">Complete</span>
        </div>
        <h3 class="tl17-name">Core Infrastructure</h3>
        <p class="tl17-text">Database sharding, API gateway redesign, and global CDN rollout completed 12 days ahead of schedule.</p>
        <div class="tl17-progress-label"><span>Infrastructure</span><span>100%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q2</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Apr — Jun 2025</span>
          <span class="tl17-status tl17-done">Complete</span>
        </div>
        <h3 class="tl17-name">Mobile Application</h3>
        <p class="tl17-text">iOS and Android apps launched simultaneously. 4.8-star App Store rating within the first month of public availability.</p>
        <div class="tl17-progress-label"><span>Mobile</span><span>100%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:100%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q3</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jul — Sep 2025</span>
          <span class="tl17-status tl17-active">In Progress</span>
        </div>
        <h3 class="tl17-name">AI Integration Layer</h3>
        <p class="tl17-text">Embedding the new intelligence pipeline into all major product surfaces. Search, recommendations, and auto-summarization on track.</p>
        <div class="tl17-progress-label"><span>AI Layer</span><span>67%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:67%"></div></div>
      </div>
    </div>

    <div class="tl17-row">
      <div class="tl17-aside">
        <div class="tl17-circle">Q4</div>
        <div class="tl17-connector"></div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Oct — Dec 2025</span>
          <span class="tl17-status tl17-plan">Planned</span>
        </div>
        <h3 class="tl17-name">Enterprise Platform</h3>
        <p class="tl17-text">SSO, audit logging, custom data residency, and dedicated onboarding for Fortune 500 accounts entering the pipeline.</p>
        <div class="tl17-progress-label"><span>Enterprise</span><span>12%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:12%"></div></div>
      </div>
    </div>

    <div class="tl17-row tl17-last">
      <div class="tl17-aside">
        <div class="tl17-circle">Q1</div>
      </div>
      <div class="tl17-card">
        <div class="tl17-top">
          <span class="tl17-when">Jan — Mar 2026</span>
          <span class="tl17-status tl17-plan">Planned</span>
        </div>
        <h3 class="tl17-name">Global Expansion</h3>
        <p class="tl17-text">Localization into 14 new markets, regional data centers in Southeast Asia and South America, and a dedicated partner ecosystem.</p>
        <div class="tl17-progress-label"><span>Expansion</span><span>0%</span></div>
        <div class="tl17-progress-bar"><div class="tl17-progress-fill" style="width:0%"></div></div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl17-scene {
  --tl17-bg:     #0d0d10;
  --tl17-accent: #e05c1a;
  background: var(--tl17-bg);
  padding: 2.5rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl17-wrap {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.tl17-track {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.06);
}
.tl17-track-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, var(--tl17-accent), rgba(224,92,26,0));
  animation: tl17-track 2s ease forwards;
}
@keyframes tl17-track {
  from { height: 0; }
  to   { height: 85%; }
}
.tl17-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}
.tl17-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1rem;
}
.tl17-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(224,92,26,0.12);
  border: 1px solid rgba(224,92,26,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tl17-accent);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background 0.3s, box-shadow 0.3s;
}
.tl17-row:hover .tl17-circle {
  background: rgba(224,92,26,0.25);
  box-shadow: 0 0 20px rgba(224,92,26,0.3);
}
.tl17-connector {
  width: 2px;
  flex: 1;
  background: linear-gradient(to bottom, rgba(224,92,26,0.3), transparent);
  min-height: 30px;
}
.tl17-card {
  flex: 1;
  margin-bottom: 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 1.25rem;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.tl17-row:hover .tl17-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(224,92,26,0.25);
  transform: translateX(4px);
}
.tl17-last .tl17-card { margin-bottom: 0; }
.tl17-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.tl17-when {
  font-family: ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--tl17-accent);
  text-transform: uppercase;
}
.tl17-status {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  white-space: nowrap;
}
.tl17-done   { background: rgba(26,122,74,0.2); color: #4ade80; border: 1px solid rgba(74,222,128,0.25); }
.tl17-active { background: rgba(224,92,26,0.2); color: var(--tl17-accent); border: 1px solid rgba(224,92,26,0.3); }
.tl17-plan   { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }
.tl17-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.4rem;
}
.tl17-text {
  font-size: 12.5px;
  color: rgba(255,255,255,0.45);
  line-height: 1.65;
  margin: 0 0 0.9rem;
}
.tl17-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.35rem;
}
.tl17-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.tl17-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tl17-accent), #f97316);
  transition: width 1s ease;
}
@media (prefers-reduced-motion: reduce) {
  .tl17-track-fill { animation: none; height: 85%; }
}
```

### 18. Brutalist Grid

**Type:** Pure CSS
**Description:** Raw borders, offset shadows, and a rigid year-column grid. Vertical year labels in the left rail; two-up event blocks in the right rail. No softness — just structure, contrast, and impact. For brand histories that want to read as built, not designed.

**HTML:**
```html
<div class="tl18-scene">
  <div class="tl18-grid">
    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">1995</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event tl18-highlight">
          <p class="tl18-cat">Foundation</p>
          <h3 class="tl18-ev-title">Company Founded</h3>
          <p class="tl18-ev-body">Three engineers left to build what they believed the industry was missing. Bootstrapped, no external capital.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Product</p>
          <h3 class="tl18-ev-title">First Beta Released</h3>
          <p class="tl18-ev-body">200 early access users signed on in the first week. Feedback was brutal. It improved everything.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">2002</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event">
          <p class="tl18-cat">Finance</p>
          <h3 class="tl18-ev-title">Series B Raised</h3>
          <p class="tl18-ev-body">$22M from Sequoia and Index Ventures. Valuation crossed $100M for the first time.</p>
        </div>
        <div class="tl18-event tl18-accent">
          <p class="tl18-cat">Crisis</p>
          <h3 class="tl18-ev-title">CEO Replaced</h3>
          <p class="tl18-ev-body">Board-led transition. Incoming leadership brought an operations background that proved transformative.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row">
      <div class="tl18-year-cell"><span class="tl18-yr">2011</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event">
          <p class="tl18-cat">Milestone</p>
          <h3 class="tl18-ev-title">1M Users</h3>
          <p class="tl18-ev-body">The platform crossed one million active accounts. A full-page ad in the New York Times marked the occasion.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Tech</p>
          <h3 class="tl18-ev-title">V4 Architecture</h3>
          <p class="tl18-ev-body">Complete rewrite of the core engine. Moved to a distributed microservices model running on commodity hardware.</p>
        </div>
      </div>
    </div>

    <div class="tl18-row tl18-last">
      <div class="tl18-year-cell"><span class="tl18-yr">2026</span></div>
      <div class="tl18-content-cell">
        <div class="tl18-event tl18-highlight">
          <p class="tl18-cat">Now</p>
          <h3 class="tl18-ev-title">Market Leader</h3>
          <p class="tl18-ev-body">42% category share. $340M ARR. Operations in 58 countries. The original engineers are still writing code.</p>
        </div>
        <div class="tl18-event">
          <p class="tl18-cat">Future</p>
          <h3 class="tl18-ev-title">What's Next</h3>
          <p class="tl18-ev-body">Autonomous workflows, embedded AI, and a marketplace launching later this year. The best chapter hasn't been written yet.</p>
        </div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl18-scene {
  --tl18-paper: #f5f0e8;
  --tl18-ink:   #0d0d0d;
  --tl18-red:   #c8423a;
  background: var(--tl18-paper);
  padding: 3rem 1.5rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.tl18-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0;
  border-top: 3px solid var(--tl18-ink);
  border-bottom: 3px solid var(--tl18-ink);
}
.tl18-row {
  display: contents;
}
.tl18-year-cell {
  padding: 1.5rem 1rem 1.5rem 0;
  border-right: 3px solid var(--tl18-ink);
  border-bottom: 1px solid rgba(13,13,13,0.12);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.tl18-last .tl18-year-cell { border-bottom: 0; }
.tl18-yr {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--tl18-ink);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
}
.tl18-content-cell {
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(13,13,13,0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.tl18-last .tl18-content-cell { border-bottom: 0; }
/* Brutalist offset shadow is intentionally hard-edged — no blur, just
   a solid ink-colored block peeking out behind the card. Built with
   box-shadow rather than a ::before pseudo because pseudos with
   z-index: -1 get hidden behind the parent's background when the
   parent gets its own stacking context (any transform creates one),
   making the card's text invisible on hover. */
.tl18-event {
  position: relative;
  padding: 1rem;
  border: 1.5px solid var(--tl18-ink);
  background: #fff;
  box-shadow: 4px 4px 0 0 var(--tl18-ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.tl18-event:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 var(--tl18-ink);
}
.tl18-cat {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(13,13,13,0.45);
  margin: 0 0 0.5rem;
}
.tl18-ev-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--tl18-ink);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.tl18-ev-body {
  font-size: 12.5px;
  color: rgba(13,13,13,0.55);
  line-height: 1.55;
  margin: 0;
}
.tl18-highlight { background: var(--tl18-ink); }
.tl18-highlight .tl18-cat       { color: rgba(255,255,255,0.4); }
.tl18-highlight .tl18-ev-title  { color: #fff; }
.tl18-highlight .tl18-ev-body   { color: rgba(255,255,255,0.5); }
.tl18-highlight::before         { background: rgba(255,255,255,0.3); }
.tl18-accent                    { border-color: var(--tl18-red); }
.tl18-accent::before            { background: var(--tl18-red); }
.tl18-accent .tl18-ev-title     { color: var(--tl18-red); }
@media (max-width: 700px) {
  .tl18-grid { grid-template-columns: 60px 1fr; }
  .tl18-yr { font-size: 1.4rem; }
  .tl18-content-cell { grid-template-columns: 1fr; padding-left: 1rem; }
}
```

### 19. Ticker Tape Changelog

**Type:** Pure CSS
**Description:** Horizontal snap-scroll changelog with giant ghost version numerals behind each card and colour-coded tags (Feature / Fix / Breaking / Perf). Built for software release notes, version histories, and product update streams.

**HTML:**
```html
<div class="tl19-wrap">
  <div class="tl19-track">
    <div class="tl19-item" data-v="v3.2">
      <div class="tl19-ver">v3.2.0</div>
      <div class="tl19-date">14 May 2026</div>
      <div class="tl19-headline">Streaming response latency reduced by 40%</div>
      <span class="tl19-tag tl19-tag-perf">Perf</span>
    </div>
    <div class="tl19-item" data-v="v3.1">
      <div class="tl19-ver">v3.1.4</div>
      <div class="tl19-date">02 May 2026</div>
      <div class="tl19-headline">Fixed race condition in auth token refresh</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
    <div class="tl19-item" data-v="v3.0">
      <div class="tl19-ver">v3.0.0</div>
      <div class="tl19-date">18 Apr 2026</div>
      <div class="tl19-headline">New plugin architecture — breaking API changes</div>
      <span class="tl19-tag tl19-tag-break">Breaking</span>
    </div>
    <div class="tl19-item" data-v="v2.9">
      <div class="tl19-ver">v2.9.1</div>
      <div class="tl19-date">01 Apr 2026</div>
      <div class="tl19-headline">Dark mode system preference detection</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.8">
      <div class="tl19-ver">v2.8.0</div>
      <div class="tl19-date">12 Mar 2026</div>
      <div class="tl19-headline">Keyboard shortcut manager added</div>
      <span class="tl19-tag tl19-tag-feat">Feature</span>
    </div>
    <div class="tl19-item" data-v="v2.7">
      <div class="tl19-ver">v2.7.2</div>
      <div class="tl19-date">28 Feb 2026</div>
      <div class="tl19-headline">Memory leak in observer pattern patched</div>
      <span class="tl19-tag tl19-tag-fix">Fix</span>
    </div>
  </div>
  <div class="tl19-hint">← scroll →</div>
</div>
```

**CSS:**
```css
.tl19-wrap {
  background: #111;
  border: 1px solid #222;
  border-radius: 2px;
  overflow: hidden;
  padding: 2rem 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl19-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 2rem;
  scroll-snap-type: x mandatory;
}
.tl19-track::-webkit-scrollbar { display: none; }
.tl19-item {
  flex: 0 0 250px;
  padding: 1.5rem 2rem 1.5rem 1.5rem;
  border-right: 1px solid #2a2a2a;
  margin-right: 1rem;
  scroll-snap-align: start;
  position: relative;
}
.tl19-item::before {
  content: attr(data-v);
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 3.5rem;
  color: #1e1e1e;
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  line-height: 1;
  pointer-events: none;
}
.tl19-ver {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: #c8ff00;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.tl19-date {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  margin-bottom: 0.8rem;
}
.tl19-headline {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  color: #e8e5e0;
}
.tl19-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  border-radius: 2px;
  text-transform: uppercase;
}
.tl19-tag-feat  { background: #1a2e00; color: #c8ff00; }
.tl19-tag-fix   { background: #2e0000; color: #ff6b6b; }
.tl19-tag-break { background: #2e1a00; color: #ffaa00; }
.tl19-tag-perf  { background: #00182e; color: #00b4d8; }
.tl19-hint {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #444;
  text-align: right;
  padding: 0.5rem 1.5rem 0;
  letter-spacing: 0.1em;
}
```

### 20. Editorial Spine

**Type:** Pure CSS
**Description:** Magazine-style vertical with italic display years on the left of a hairline gold rule, kicker labels, Instrument Serif titles, and Crimson Pro italic body copy on warm paper. Built for company histories, personal biographies, and long-read editorial features.

**HTML:**
```html
<div class="tl20-wrap">
  <div class="tl20-header">
    <span class="tl20-header-title">A Brief History</span>
    <span class="tl20-header-sub">Studio Chronicle · 2018–present</span>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2018</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Origin</div>
      <div class="tl20-title-main">Founded in a rented loft, Shoreditch</div>
      <div class="tl20-text">Three designers with one shared monitor and an unhealthy obsession with kerning. The first project was a brand identity for a local coffee importer.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2020</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Pivot</div>
      <div class="tl20-title-main">Shifted to digital-first products</div>
      <div class="tl20-text">The pandemic reshaped our practice. We dissolved our print retainer clients and rebuilt around software, motion, and interactive design systems.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">2023</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Recognition</div>
      <div class="tl20-title-main">D&amp;AD Wood Pencil, Digital Design</div>
      <div class="tl20-text">Our data-journalism work for a climate NGO earned the studio's first major award and opened a new chapter of purpose-led commissions.</div>
    </div>
  </div>

  <div class="tl20-entry">
    <div class="tl20-year">Now</div>
    <div class="tl20-rule"></div>
    <div class="tl20-body">
      <div class="tl20-kicker">Present</div>
      <div class="tl20-title-main">Eight people, four time zones</div>
      <div class="tl20-text">A deliberately small studio that treats craft as a non-negotiable. Currently booking for Q4 2026.</div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl20-wrap {
  background: #faf6ef;
  color: #1a1a1a;
  padding: 2.5rem 2rem;
  border-radius: 2px;
  max-width: 680px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl20-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 0.75rem;
}
.tl20-header-title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.85rem;
  font-weight: 300;
  color: #1a1a1a;
}
.tl20-header-sub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #999;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tl20-entry {
  display: grid;
  grid-template-columns: 6ch 1px 1fr;
  gap: 0 1.5rem;
  margin-bottom: 2.25rem;
  animation: tl20-fade-up 0.4s ease both;
}
@keyframes tl20-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tl20-entry { animation: none; }
}
.tl20-year {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #c8a96e;
  text-align: right;
  padding-top: 0.1rem;
}
.tl20-rule {
  width: 1px;
  background: #ddd;
  position: relative;
}
.tl20-rule::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1.5px solid #c8a96e;
  border-radius: 50%;
  background: #faf6ef;
  position: absolute;
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
}
.tl20-kicker {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.3rem;
}
.tl20-title-main {
  font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.tl20-text {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  font-style: italic;
}
```

### 21. Split Screen Timeline

**Type:** Pure CSS
**Description:** Dark alternating left/right layout with a faded center spine and ringed dot markers. Each entry carries a date, two-line heading, body copy, and a discipline pill. Built for career histories, CVs, and project milestone retrospectives.

**HTML:**
```html
<div class="tl21-wrap">
  <div class="tl21-spine"></div>

  <div class="tl21-entry">
    <div class="tl21-content">
      <div class="tl21-date">Jan 2022</div>
      <div class="tl21-heading">Lead Product Designer<br>Vercel</div>
      <div class="tl21-body">Oversaw the redesign of the dashboard, reducing time-to-deploy by 30% through progressive disclosure patterns.</div>
      <span class="tl21-pill">Product · Systems</span>
    </div>
    <div class="tl21-spacer"></div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-spacer"></div>
    <div class="tl21-content">
      <div class="tl21-date">Mar 2020</div>
      <div class="tl21-heading">Senior UX Engineer<br>Linear</div>
      <div class="tl21-body">Built the keyboard-first interaction model that became Linear's defining differentiator in the project management space.</div>
      <span class="tl21-pill">Interaction · Eng</span>
    </div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-content">
      <div class="tl21-date">Jun 2018</div>
      <div class="tl21-heading">Design Systems Lead<br>Stripe</div>
      <div class="tl21-body">Created and maintained Stripe's internal component library across 12 product teams and three platform surfaces.</div>
      <span class="tl21-pill">Tokens · Figma</span>
    </div>
    <div class="tl21-spacer"></div>
    <div class="tl21-dot"></div>
  </div>

  <div class="tl21-entry">
    <div class="tl21-spacer"></div>
    <div class="tl21-content">
      <div class="tl21-date">Sep 2016</div>
      <div class="tl21-heading">UI Designer<br>Intercom</div>
      <div class="tl21-body">Early product hire. Shaped the visual language for the Messenger product from v1 through to its first major rebrand.</div>
      <span class="tl21-pill">Visual · Branding</span>
    </div>
    <div class="tl21-dot"></div>
  </div>
</div>
```

**CSS:**
```css
.tl21-wrap {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 0;
  background: #0c0c0c;
  color: #f0ede8;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl21-spine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, #333 5%, #333 95%, transparent);
  transform: translateX(-50%);
}
.tl21-entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 120px;
  position: relative;
}
.tl21-entry:nth-child(odd) .tl21-content {
  grid-column: 1;
  text-align: right;
  padding: 1.5rem 2.5rem 1.5rem 0;
}
.tl21-entry:nth-child(even) .tl21-content {
  grid-column: 2;
  text-align: left;
  padding: 1.5rem 0 1.5rem 2.5rem;
}
.tl21-entry:nth-child(odd) .tl21-spacer { grid-column: 2; }
.tl21-entry:nth-child(even) .tl21-spacer { grid-column: 1; }
.tl21-dot {
  position: absolute;
  left: 50%;
  top: 1.6rem;
  width: 10px;
  height: 10px;
  background: #f0ede8;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 3px #0c0c0c, 0 0 0 4px #444;
}
.tl21-date {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  color: #555;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.tl21-heading {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #e8e5e0;
  margin-bottom: 0.4rem;
  line-height: 1.25;
}
.tl21-body {
  font-size: 0.8rem;
  color: #666;
  line-height: 1.5;
}
.tl21-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid #333;
  border-radius: 99px;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
@media (max-width: 600px) {
  .tl21-entry { grid-template-columns: 1fr; }
  .tl21-entry:nth-child(odd) .tl21-content,
  .tl21-entry:nth-child(even) .tl21-content {
    grid-column: 1;
    text-align: left;
    padding: 1.5rem 0 1.5rem 2rem;
  }
  .tl21-spine { left: 0.5rem; transform: none; }
  .tl21-dot { left: 0.5rem; transform: translateX(-50%); }
}
```

### 22. Railroad Stations

**Type:** Pure CSS
**Description:** Horizontal stations on a dashed track with one active station glowing cyan. Each station has a status header (Archived / Current / Planned / Concept), year, name, and sub-line. Built for product roadmaps, technology evolution, and API version maps.

**HTML:**
```html
<div class="tl22-wrap">
  <div class="tl22-track">
    <div class="tl22-station">
      <div class="tl22-top">ARCHIVED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2019</div>
        <div class="tl22-name">REST API v1</div>
        <div class="tl22-sub">Deprecated</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">ARCHIVED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2021</div>
        <div class="tl22-name">GraphQL Gateway</div>
        <div class="tl22-sub">Replaced 2024</div>
      </div>
    </div>
    <div class="tl22-station tl22-active">
      <div class="tl22-top">CURRENT</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2024</div>
        <div class="tl22-name">Edge Runtime</div>
        <div class="tl22-sub">Live · 99.98% uptime</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">PLANNED</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">Q3 2026</div>
        <div class="tl22-name">WASM Runtime</div>
        <div class="tl22-sub">In development</div>
      </div>
    </div>
    <div class="tl22-station">
      <div class="tl22-top">CONCEPT</div>
      <div class="tl22-node"></div>
      <div class="tl22-label">
        <div class="tl22-year">2027+</div>
        <div class="tl22-name">Zero-latency Mesh</div>
        <div class="tl22-sub">Research phase</div>
      </div>
    </div>
  </div>
</div>
```

**CSS:**
```css
.tl22-wrap {
  background: #0d0f14;
  border-radius: 4px;
  padding: 2.5rem;
  overflow-x: auto;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl22-track {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: 700px;
  position: relative;
  padding-top: 3rem;
}
.tl22-track::before {
  content: '';
  position: absolute;
  top: calc(3rem + 16px);
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #1e2530 0px, #1e2530 8px,
    #2a3340 8px, #2a3340 12px
  );
}
.tl22-station {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.tl22-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d0f14;
  border: 3px solid #3a4a5c;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tl22-node::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4a5c;
  transition: background 0.2s;
}
.tl22-active .tl22-node {
  border-color: #00e5ff;
  box-shadow: 0 0 20px rgba(0,229,255,0.3);
}
.tl22-active .tl22-node::after {
  background: #00e5ff;
  width: 10px;
  height: 10px;
}
.tl22-label {
  margin-top: 0.8rem;
  text-align: center;
}
.tl22-year {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  color: #3a4a5c;
  letter-spacing: 0.1em;
  margin-bottom: 0.2rem;
}
.tl22-active .tl22-year { color: #00e5ff; }
.tl22-name {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8899aa;
  line-height: 1.3;
  max-width: 90px;
}
.tl22-active .tl22-name { color: #ccd6e0; }
.tl22-sub {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #3a4a5c;
  margin-top: 0.2rem;
  max-width: 90px;
  line-height: 1.4;
}
.tl22-active .tl22-sub { color: #5a7a8c; }
.tl22-top {
  position: absolute;
  top: -3rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #2a3340;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.tl22-active .tl22-top { color: #4a6070; }
```

### 23. Film Strip Portfolio

**Type:** Pure CSS
**Description:** Horizontal portfolio reel with sprocket holes top and bottom, gradient project tiles with year stickers, role line, and tech-stack chips. Built for design portfolios, case-study indexes, and creative project galleries.

**HTML:**
```html
<div class="tl23-wrap">
  <div class="tl23-holes">
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
  </div>
  <div class="tl23-strip">
    <div class="tl23-frame">
      <div class="tl23-num">001 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a1a2e,#16213e)">NOVA</div>
        <div class="tl23-year-tag">2026</div>
      </div>
      <div class="tl23-title">Nova Design System</div>
      <div class="tl23-role">Lead Designer</div>
      <div class="tl23-tech"><span>Figma</span><span>Tokens</span><span>React</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">002 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#0d2137,#0a3d2b)">ATLAS</div>
        <div class="tl23-year-tag">2025</div>
      </div>
      <div class="tl23-title">Atlas Data Viz</div>
      <div class="tl23-role">UX + Dev</div>
      <div class="tl23-tech"><span>D3.js</span><span>WebGL</span><span>SVG</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">003 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#2e1a0a,#1a0a2e)">ORBIT</div>
        <div class="tl23-year-tag">2024</div>
      </div>
      <div class="tl23-title">Orbit Mobile App</div>
      <div class="tl23-role">Product Design</div>
      <div class="tl23-tech"><span>iOS</span><span>Swift</span><span>Haptics</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">004 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#0a2e1a,#2e0a1a)">DUNE</div>
        <div class="tl23-year-tag">2023</div>
      </div>
      <div class="tl23-title">Dune Brand Identity</div>
      <div class="tl23-role">Brand + Motion</div>
      <div class="tl23-tech"><span>After Effects</span><span>AI</span></div>
    </div>
    <div class="tl23-frame">
      <div class="tl23-num">005 ▸</div>
      <div class="tl23-img">
        <div class="tl23-img-inner" style="background:linear-gradient(135deg,#1a2e0a,#0a1a2e)">LOOP</div>
        <div class="tl23-year-tag">2022</div>
      </div>
      <div class="tl23-title">Loop CMS Platform</div>
      <div class="tl23-role">Full-stack Design</div>
      <div class="tl23-tech"><span>Next.js</span><span>CMS</span></div>
    </div>
  </div>
  <div class="tl23-holes">
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
    <div class="tl23-hole"></div><div class="tl23-hole"></div><div class="tl23-hole"></div>
  </div>
</div>
```

**CSS:**
```css
.tl23-wrap {
  background: #111;
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 3px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl23-holes {
  display: flex;
  gap: 1rem;
  padding: 0.4rem 1rem;
  background: #111;
}
.tl23-hole {
  width: 18px;
  height: 12px;
  background: #0c0c0c;
  border-radius: 2px;
  flex-shrink: 0;
}
.tl23-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  background: #000;
}
.tl23-strip::-webkit-scrollbar { display: none; }
.tl23-frame {
  flex: 0 0 220px;
  padding: 1.5rem 1rem;
  background: #141414;
  border-right: 2px solid #000;
  position: relative;
  transition: background 0.2s;
}
.tl23-frame:hover { background: #1a1a1a; }
.tl23-num {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #333;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.tl23-img {
  width: 100%;
  aspect-ratio: 16/10;
  background: #1e1e1e;
  border-radius: 2px;
  margin-bottom: 0.75rem;
  overflow: hidden;
  position: relative;
}
.tl23-img-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 2.5rem;
  opacity: 0.18;
  letter-spacing: 0.1em;
  color: #fff;
}
.tl23-year-tag {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  background: rgba(0,0,0,0.7);
  color: #888;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
}
.tl23-title {
  font-family: 'Syne', 'Inter Tight', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #d4d0cb;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.tl23-role {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.55rem;
  color: #555;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl23-tech {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tl23-tech span {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 0.5rem;
  color: #444;
  border: 1px solid #2a2a2a;
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  letter-spacing: 0.05em;
}
```

### 24. Ledger Audit Log

**Type:** Pure CSS
**Description:** Financial-grade audit log table with a dark masthead, column ruling, status badges (Done / Pending / Critical / Archived), and a gold left-edge marker on milestone rows. Built for database migration history, compliance records, and incident logs.

**HTML:**
```html
<div class="tl24-wrap">
  <div class="tl24-header">
    <div>
      <div class="tl24-title-lbl">System Audit Log</div>
      <div class="tl24-title-name">Migration Record</div>
    </div>
    <div class="tl24-period">FY 2024–2026<br>Schema v4 → v7</div>
  </div>

  <div class="tl24-cols">
    <span>Date</span>
    <span>Description</span>
    <span>Reference</span>
    <span>Status</span>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2024-01-08</div>
    <div class="tl24-desc">
      Initial schema migration v4 → v5
      <small>Postgres 14 → 16 · 3.2M rows</small>
    </div>
    <div class="tl24-ref">MIG-001</div>
    <div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2024-03-22</div>
    <div class="tl24-desc">
      Added composite index on events table
      <small>Resolved P1 query timeout · Ticket #4421</small>
    </div>
    <div class="tl24-ref">IDX-007</div>
    <div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2025-07-14</div>
    <div class="tl24-desc">
      Backfilled NULL values in user_meta
      <small>GDPR remediation · 88k rows affected</small>
    </div>
    <div class="tl24-ref">REM-034</div>
    <div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2025-11-01</div>
    <div class="tl24-desc">
      Schema migration v5 → v6 — new billing model
      <small>Zero-downtime · Blue/green deployment</small>
    </div>
    <div class="tl24-ref">MIG-002</div>
    <div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
  </div>

  <div class="tl24-row">
    <div class="tl24-dt">2026-02-19</div>
    <div class="tl24-desc">
      Incident: replication lag exceeded 45s
      <small>RCA complete · Failover triggered</small>
    </div>
    <div class="tl24-ref">INC-012</div>
    <div class="tl24-status"><span class="tl24-badge tl24-crit">Critical</span></div>
  </div>

  <div class="tl24-row tl24-milestone">
    <div class="tl24-dt">2026-05-08</div>
    <div class="tl24-desc">
      Schema migration v6 → v7 in progress
      <small>Estimated completion 2026-05-22</small>
    </div>
    <div class="tl24-ref">MIG-003</div>
    <div class="tl24-status"><span class="tl24-badge tl24-pend">Pending</span></div>
  </div>

  <div class="tl24-footer">
    <div class="tl24-footer-note">Gold bar = milestone event</div>
    <div class="tl24-footer-count">6 of 148 entries shown</div>
  </div>
</div>
```

**CSS:**
```css
.tl24-wrap {
  background: #f8f5f0;
  color: #1a1a1a;
  padding: 0;
  border-radius: 2px;
  overflow: hidden;
  font-family: 'Space Mono', ui-monospace, monospace;
  border: 1px solid #ddd;
}
.tl24-header {
  padding: 1.5rem 2rem;
  background: #1a1a1a;
  color: #f8f5f0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tl24-title-lbl {
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 0.25rem;
}
.tl24-title-name {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
  color: #f8f5f0;
}
.tl24-period {
  font-size: 0.6rem;
  color: #888;
  text-align: right;
  line-height: 1.5;
}
.tl24-cols {
  display: grid;
  grid-template-columns: 8ch 1fr 10ch 8ch;
  gap: 0 1.5rem;
  padding: 0.5rem 2rem;
  background: #eee;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  border-bottom: 1px solid #ddd;
}
.tl24-row {
  display: grid;
  grid-template-columns: 8ch 1fr 10ch 8ch;
  gap: 0 1.5rem;
  padding: 0.8rem 2rem;
  border-bottom: 1px solid #ebe8e2;
  align-items: center;
  transition: background 0.15s;
  position: relative;
}
.tl24-row:hover { background: #f0ece6; }
.tl24-milestone { background: #fffbf2; }
.tl24-milestone::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #c8a96e;
}
.tl24-dt {
  font-size: 0.65rem;
  color: #999;
  white-space: nowrap;
}
.tl24-desc {
  font-size: 0.7rem;
  color: #333;
  line-height: 1.3;
}
.tl24-desc small {
  display: block;
  font-size: 0.55rem;
  color: #aaa;
  margin-top: 0.15rem;
}
.tl24-ref {
  font-size: 0.6rem;
  color: #bbb;
  text-align: right;
}
.tl24-status { text-align: right; }
.tl24-badge {
  display: inline-block;
  font-size: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl24-done { background: #e8f5e9; color: #2e7d32; }
.tl24-pend { background: #fff3e0; color: #e65100; }
.tl24-arch { background: #f5f5f5; color: #999; }
.tl24-crit { background: #fce4ec; color: #c62828; }
.tl24-footer {
  padding: 1rem 2rem;
  background: #f0ece6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #ddd;
}
.tl24-footer-note {
  font-size: 0.55rem;
  color: #aaa;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl24-footer-count {
  font-size: 0.65rem;
  color: #666;
}
@media (max-width: 600px) {
  .tl24-cols, .tl24-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.5rem 1rem; }
  .tl24-cols { display: none; }
  .tl24-ref, .tl24-status { text-align: left; }
}
```

---
## 20 Pure CSS Toggles & Switches

URL: https://codefronts.com/components/css-toggles-switches/
Description: 20 hand-coded CSS toggle switches with live demos — haptic keys, waveform, timed countdown, biometric scan, split-flap board, permission stack, iOS, Material Design, skeuomorphic, neon, brutalist, day/night, flip card, sliding pill, glassmorphism, rotary knob, iOS light, outline, bouncy pebble, and industrial rocker. Pure CSS, fully accessible, copy-paste ready.
Demo count: 20

### 01. Haptic Keys

**Type:** Pure CSS
**Description:** Chunky square key with a 3D press-depth shadow and a glowing accent ring on activate. Pressing literally sinks the button 3px while the hard bottom shadow collapses — pure tactile button metaphor for tactile UI trends.

**HTML:**
```html
<label class="tg-hap">
  <input class="tg-hap-input" type="checkbox" checked>
  <span class="tg-hap-btn" aria-hidden="true">
    <span class="tg-hap-ring"></span>
    <svg class="tg-hap-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
    </svg>
  </span>
  <span class="tg-hap-label">Notify</span>
</label>
```

**CSS:**
```css
.tg-hap {
  --tg-hap-rim: #14141e;
  --tg-hap-wire: #1e1e2e;
  --tg-hap-edge: #020205;
  --tg-hap-accent: #39d353;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  user-select: none;
}
.tg-hap-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-hap-btn {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--tg-hap-rim);
  border: 1px solid var(--tg-hap-wire);
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 0 var(--tg-hap-edge),
    0 8px 16px rgba(0,0,0,0.5);
  transition:
    box-shadow 0.1s ease,
    transform 0.1s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}
.tg-hap-icon {
  width: 22px;
  height: 22px;
  color: #3a3a52;
  filter: grayscale(1) brightness(0.6);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}
.tg-hap-ring {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Press effect — clicking the label sinks the button.
   Using the label's :active so the whole hit-area drives the press. */
.tg-hap:active .tg-hap-btn {
  box-shadow:
    0 2px 0 var(--tg-hap-edge),
    0 3px 8px rgba(0,0,0,0.5);
  transform: translateY(3px);
}
.tg-hap-input:checked ~ .tg-hap-btn {
  background: #0f1a0f;
  border-color: rgba(57,211,83,0.3);
  box-shadow:
    0 6px 0 var(--tg-hap-edge),
    0 8px 16px rgba(0,0,0,0.5),
    0 0 20px rgba(57,211,83,0.15);
}
.tg-hap-input:checked ~ .tg-hap-btn .tg-hap-icon {
  color: var(--tg-hap-accent);
  filter: none;
  transform: scale(1.15);
}
.tg-hap-input:checked ~ .tg-hap-btn .tg-hap-ring {
  border-color: var(--tg-hap-accent);
  box-shadow: 0 0 12px rgba(57,211,83,0.3);
}
.tg-hap-input:focus-visible ~ .tg-hap-btn {
  outline: 2px solid var(--tg-hap-accent);
  outline-offset: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-hap-btn,
  .tg-hap-icon,
  .tg-hap-ring { transition: none; }
}
```

### 02. Waveform Toggle

**Type:** Pure CSS
**Description:** Static audio bars spring to life with staggered breathing animations when toggled on. The track border and indicator dot pulse with an ice-cyan glow. Audio-visual data physicality — toggle = sound on/off.

**HTML:**
```html
<label class="tg-wav">
  <input class="tg-wav-input" type="checkbox" checked>
  <span class="tg-wav-body" aria-hidden="true">
    <span class="tg-wav-bars">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span>
    </span>
    <span class="tg-wav-text">Microphone</span>
    <span class="tg-wav-dot"></span>
  </span>
</label>
```

**CSS:**
```css
.tg-wav {
  --tg-wav-rim: #14141e;
  --tg-wav-wire: #1e1e2e;
  --tg-wav-fog: #3a3a52;
  --tg-wav-ash: #7a7a98;
  --tg-wav-ice: #00e5ff;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-wav-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-wav-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--tg-wav-rim);
  border: 1px solid var(--tg-wav-wire);
  min-width: 240px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.tg-wav-bars {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 28px;
}
.tg-wav-bars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--tg-wav-fog);
  transition: background 0.3s ease, height 0.3s ease;
}
/* Static heights (off state) — each bar has its own resting height. */
.tg-wav-bars span:nth-child(1) { height: 8px; }
.tg-wav-bars span:nth-child(2) { height: 14px; }
.tg-wav-bars span:nth-child(3) { height: 20px; }
.tg-wav-bars span:nth-child(4) { height: 26px; }
.tg-wav-bars span:nth-child(5) { height: 18px; }
.tg-wav-bars span:nth-child(6) { height: 24px; }
.tg-wav-bars span:nth-child(7) { height: 12px; }
.tg-wav-bars span:nth-child(8) { height: 20px; }
.tg-wav-bars span:nth-child(9) { height: 8px; }
.tg-wav-text {
  font-size: 13px;
  color: var(--tg-wav-ash);
  transition: color 0.3s ease;
}
.tg-wav-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tg-wav-wire);
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Each bar oscillates between its resting height and ~30% of it. The
   varied durations + delays keep the pattern from looking robotic. */
@keyframes tg-wav-breathe {
  0%, 100% { height: var(--tg-wav-h); }
  50%      { height: calc(var(--tg-wav-h) * 0.3 + 4px); }
}
.tg-wav-input:checked ~ .tg-wav-body {
  border-color: rgba(0,229,255,0.3);
  background: rgba(0,229,255,0.04);
}
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span {
  background: var(--tg-wav-ice);
}
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(1) { animation: tg-wav-breathe 0.9s ease-in-out infinite;       --tg-wav-h: 8px;  }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(2) { animation: tg-wav-breathe 0.7s ease-in-out 0.1s infinite;  --tg-wav-h: 14px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(3) { animation: tg-wav-breathe 1.1s ease-in-out 0.2s infinite;  --tg-wav-h: 20px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(4) { animation: tg-wav-breathe 0.8s ease-in-out 0.05s infinite; --tg-wav-h: 26px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(5) { animation: tg-wav-breathe 1.0s ease-in-out 0.15s infinite; --tg-wav-h: 18px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(6) { animation: tg-wav-breathe 0.6s ease-in-out 0.25s infinite; --tg-wav-h: 24px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(7) { animation: tg-wav-breathe 0.9s ease-in-out 0.08s infinite; --tg-wav-h: 12px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(8) { animation: tg-wav-breathe 1.2s ease-in-out 0.18s infinite; --tg-wav-h: 20px; }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span:nth-child(9) { animation: tg-wav-breathe 0.75s ease-in-out 0.3s infinite; --tg-wav-h: 8px;  }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-text { color: var(--tg-wav-ice); }
.tg-wav-input:checked ~ .tg-wav-body .tg-wav-dot {
  background: var(--tg-wav-ice);
  box-shadow: 0 0 8px var(--tg-wav-ice);
}
.tg-wav-input:focus-visible ~ .tg-wav-body {
  outline: 2px solid var(--tg-wav-ice);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-wav-body,
  .tg-wav-bars span,
  .tg-wav-dot,
  .tg-wav-text { transition: none; }
  .tg-wav-input:checked ~ .tg-wav-body .tg-wav-bars span { animation: none; }
}
```

### 03. Timed Toggle

**Type:** Pure CSS
**Description:** An SVG arc fills around a circle when the toggle activates, visualising session time. Temporal UI for progress-aware states — users see state over time, not just on/off. The ember glow signals an active countdown.

**HTML:**
```html
<label class="tg-time">
  <input class="tg-time-input" type="checkbox" checked>
  <span class="tg-time-body" aria-hidden="true">
    <span class="tg-time-arc">
      <svg viewBox="0 0 28 28">
        <circle class="tg-time-bg" cx="14" cy="14" r="11"/>
        <circle class="tg-time-prog" cx="14" cy="14" r="11"/>
      </svg>
      <span class="tg-time-dot"></span>
    </span>
    <span class="tg-time-text">15 min · active</span>
  </span>
</label>
```

**CSS:**
```css
.tg-time {
  --tg-time-rim: #14141e;
  --tg-time-wire: #1e1e2e;
  --tg-time-fog: #3a3a52;
  --tg-time-ash: #7a7a98;
  --tg-time-ember: #ff6b35;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-time-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-time-body {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--tg-time-rim);
  border: 1px solid var(--tg-time-wire);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.tg-time-arc {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.tg-time-arc svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.tg-time-bg {
  fill: none;
  stroke: var(--tg-time-wire);
  stroke-width: 3;
}
/* circumference at r=11 is 2*pi*11 ~= 69. We use 82 as the dasharray
   so the fill animates from "empty" (offset 82) to "nearly full" (offset
   20) — leaving a small gap signals it's still counting down, not done. */
.tg-time-prog {
  fill: none;
  stroke: var(--tg-time-ember);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 82;
  stroke-dashoffset: 82;
  transition: stroke-dashoffset 0.4s ease;
}
.tg-time-dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tg-time-fog);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.tg-time-text {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--tg-time-ash);
  transition: color 0.3s ease;
}
.tg-time-input:checked ~ .tg-time-body {
  border-color: rgba(255,107,53,0.4);
  background: rgba(255,107,53,0.05);
}
.tg-time-input:checked ~ .tg-time-body .tg-time-prog {
  stroke-dashoffset: 20;
}
.tg-time-input:checked ~ .tg-time-body .tg-time-dot {
  background: var(--tg-time-ember);
  box-shadow: 0 0 6px var(--tg-time-ember);
}
.tg-time-input:checked ~ .tg-time-body .tg-time-text {
  color: var(--tg-time-ember);
}
.tg-time-input:focus-visible ~ .tg-time-body {
  outline: 2px solid var(--tg-time-ember);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-time-body,
  .tg-time-prog,
  .tg-time-dot,
  .tg-time-text { transition: none; }
}
```

### 04. Biometric Scan

**Type:** Pure CSS
**Description:** A scanline sweeps top-to-bottom, corner brackets glow lilac, and the icon ring lights up when activated. Identity-first UI for auth flows — the toggle becomes a scan target instead of a switch.

**HTML:**
```html
<label class="tg-bio">
  <input class="tg-bio-input" type="checkbox" checked>
  <span class="tg-bio-frame" aria-hidden="true">
    <span class="tg-bio-scanline"></span>
    <span class="tg-bio-corners"></span>
    <span class="tg-bio-icon-wrap">
      <span class="tg-bio-rings"></span>
      <svg class="tg-bio-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 11a2 2 0 0 0-2 2v1a8 8 0 0 1-.6 3"/>
        <path d="M14 13.1c0 .9 0 1.8-.2 2.6a13 13 0 0 1-.6 2.4"/>
        <path d="M16 11.4c.3 1 .4 2 .4 3.1a15 15 0 0 1-.3 2.7"/>
        <path d="M18 11.5c.3 2 .3 4 0 6"/>
        <path d="M8 13.5c0 1.4-.1 2.7-.5 4"/>
        <path d="M6 11c-.2.7-.3 1.4-.3 2.1"/>
        <path d="M3.5 9.5A12 12 0 0 1 12 5a12 12 0 0 1 8.5 4.5"/>
      </svg>
    </span>
    <span class="tg-bio-status">Touch ID · scanning</span>
  </span>
</label>
```

**CSS:**
```css
.tg-bio {
  --tg-bio-rim: #14141e;
  --tg-bio-wire: #1e1e2e;
  --tg-bio-ash: #7a7a98;
  --tg-bio-lilac: #c084fc;
  display: inline-block;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  user-select: none;
}
.tg-bio-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-bio-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 180px;
  padding: 20px;
  border-radius: 16px;
  background: var(--tg-bio-rim);
  border: 1px solid var(--tg-bio-wire);
  overflow: hidden;
  transition: border-color 0.5s ease, background 0.5s ease;
}
.tg-bio-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tg-bio-lilac), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tg-bio-corners {
  position: absolute;
  inset: 12px;
  pointer-events: none;
}
.tg-bio-corners::before,
.tg-bio-corners::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--tg-bio-wire);
  border-style: solid;
  transition: border-color 0.4s ease;
}
.tg-bio-corners::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
  border-radius: 3px 0 0 0;
}
.tg-bio-corners::after {
  bottom: 0; right: 0;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 3px 0;
}
.tg-bio-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--tg-bio-wire);
  color: var(--tg-bio-ash);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.tg-bio-icon {
  width: 28px;
  height: 28px;
}
/* Two concentric outer rings that light up on scan. The :before adds
   a second ring so we get the layered radar look without extra DOM. */
.tg-bio-rings {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.tg-bio-rings::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.tg-bio-status {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tg-bio-ash);
  transition: color 0.4s ease;
}
@keyframes tg-bio-scan {
  0%   { top: 0; }
  100% { top: 100%; }
}
.tg-bio-input:checked ~ .tg-bio-frame {
  border-color: rgba(192,132,252,0.4);
  background: rgba(192,132,252,0.05);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-scanline {
  opacity: 1;
  animation: tg-bio-scan 1.8s ease-in-out infinite;
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-icon-wrap {
  border-color: var(--tg-bio-lilac);
  color: var(--tg-bio-lilac);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-rings {
  border-color: rgba(192,132,252,0.3);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-rings::before {
  border-color: rgba(192,132,252,0.15);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-status {
  color: var(--tg-bio-lilac);
}
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-corners::before,
.tg-bio-input:checked ~ .tg-bio-frame .tg-bio-corners::after {
  border-color: var(--tg-bio-lilac);
}
.tg-bio-input:focus-visible ~ .tg-bio-frame {
  outline: 2px solid var(--tg-bio-lilac);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-bio-frame,
  .tg-bio-icon-wrap,
  .tg-bio-rings,
  .tg-bio-status,
  .tg-bio-corners::before,
  .tg-bio-corners::after { transition: none; }
  .tg-bio-input:checked ~ .tg-bio-frame .tg-bio-scanline { animation: none; }
}
```

### 05. Split-Flap Board

**Type:** Pure CSS
**Description:** A retro-mechanical airport departure board built from CSS-only rotateX flips. Toggling cycles both rows simultaneously — OFFLINE flips to ONLINE, STANDBY flips to ACTIVE — with each character flipping in sequence for the cascading split-flap feel.

**HTML:**
```html
<label class="tg-flap">
  <input class="tg-flap-input" type="checkbox" checked>
  <span class="tg-flap-stage" aria-hidden="true">
    <span class="tg-flap-row">
      <span class="tg-flap-lbl">Status</span>
      <span class="tg-flap-board">
        <span class="tg-flap-char" data-off="O" data-on="O"></span>
        <span class="tg-flap-char" data-off="F" data-on="N"></span>
        <span class="tg-flap-char" data-off="F" data-on="L"></span>
        <span class="tg-flap-char" data-off="L" data-on="I"></span>
        <span class="tg-flap-char" data-off="I" data-on="N"></span>
        <span class="tg-flap-char" data-off="N" data-on="E"></span>
        <span class="tg-flap-char" data-off="E" data-on="·"></span>
      </span>
    </span>
    <span class="tg-flap-row">
      <span class="tg-flap-lbl">Mode</span>
      <span class="tg-flap-board">
        <span class="tg-flap-char" data-off="S" data-on="A"></span>
        <span class="tg-flap-char" data-off="T" data-on="C"></span>
        <span class="tg-flap-char" data-off="A" data-on="T"></span>
        <span class="tg-flap-char" data-off="N" data-on="I"></span>
        <span class="tg-flap-char" data-off="D" data-on="V"></span>
        <span class="tg-flap-char" data-off="B" data-on="E"></span>
        <span class="tg-flap-char" data-off="Y" data-on="·"></span>
      </span>
    </span>
  </span>
</label>
```

**CSS:**
```css
.tg-flap {
  --tg-flap-bg: #0a0a12;
  --tg-flap-border: #1a1a28;
  --tg-flap-ash: #7a7a98;
  --tg-flap-volt: #e0ff00;
  --tg-flap-ice: #00e5ff;
  --tg-flap-flip: 0.5s;
  display: inline-block;
  cursor: pointer;
  font-family: "Inconsolata", "Roboto Mono", ui-monospace, monospace;
  user-select: none;
}
.tg-flap-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-flap-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tg-flap-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tg-flap-lbl {
  min-width: 56px;
  font-size: 12px;
  color: var(--tg-flap-ash);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tg-flap-board {
  display: flex;
  gap: 4px;
}
/* Each char is a black tile with a horizontal seam down the middle and
   a CSS-only flip. The letter is rendered via data-off/data-on attrs in
   a pseudo, so toggling swaps which attr is shown. */
.tg-flap-char {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 38px;
  border-radius: 5px;
  background: var(--tg-flap-bg);
  border: 1px solid var(--tg-flap-border);
  font-size: 18px;
  font-weight: 500;
  color: var(--tg-flap-ash);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 400px;
  transition: color var(--tg-flap-flip) ease;
}
/* Seam across the middle of every char tile. */
.tg-flap-char::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0,0,0,0.6);
  z-index: 2;
  pointer-events: none;
}
/* The letter itself lives in ::before so we can flip it independently
   of the tile chrome. Default shows the off character. */
.tg-flap-char::before {
  content: attr(data-off);
  display: inline-block;
  transform-origin: center;
  animation: tg-flap-off var(--tg-flap-flip) ease both;
}
@keyframes tg-flap-off {
  0%   { transform: rotateX(-90deg); }
  50%  { content: attr(data-off); }
  100% { transform: rotateX(0); }
}
@keyframes tg-flap-on {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); }
  51%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
/* Stagger — each char is delayed 80ms further than the previous so the
   board cascades. Both rows share the same stagger pattern. */
.tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char {
  color: var(--tg-flap-volt);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-row:nth-child(2) .tg-flap-char {
  color: var(--tg-flap-ice);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before {
  content: attr(data-on);
  animation: tg-flap-on var(--tg-flap-flip) ease both;
  animation-delay: inherit;
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:focus-visible ~ .tg-flap-stage {
  outline: 2px solid var(--tg-flap-volt);
  outline-offset: 6px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-flap-char,
  .tg-flap-char::before { animation: none; transition: none; }
  .tg-flap-char::before { content: attr(data-off); }
  .tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before { content: attr(data-on); }
}
```

### 06. Permission Stack

**Type:** Pure CSS
**Description:** Grouped consent UI with mini pill toggles inside stacked bordered rows. Each row independently grants or revokes a permission — the icon and label brighten and the pill switches to brand-green when granted. The dominant trust-first UI pattern replacing modal popups.

**HTML:**
```html
<div class="tg-perm">
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox" checked>
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Location</span>
      <span class="tg-perm-desc">While using the app</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox">
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M23 7l-7 5 7 5V7z"/>
      <rect x="1" y="5" width="15" height="14" rx="2"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Camera</span>
      <span class="tg-perm-desc">Photos and video</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox" checked>
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <rect x="9" y="2" width="6" height="12" rx="3"/>
      <path d="M19 10a7 7 0 0 1-14 0"/>
      <path d="M12 18v3"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Microphone</span>
      <span class="tg-perm-desc">Voice input</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
  <label class="tg-perm-item">
    <input class="tg-perm-input" type="checkbox">
    <svg class="tg-perm-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
      <circle cx="9" cy="7" r="4"/>
      <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
    </svg>
    <span class="tg-perm-info">
      <span class="tg-perm-name">Contacts</span>
      <span class="tg-perm-desc">Read access only</span>
    </span>
    <span class="tg-perm-pill" aria-hidden="true">
      <span class="tg-perm-thumb"></span>
    </span>
  </label>
</div>
```

**CSS:**
```css
.tg-perm {
  --tg-perm-bg: #08080f;
  --tg-perm-rim: #14141e;
  --tg-perm-wire: #1e1e2e;
  --tg-perm-fog: #3a3a52;
  --tg-perm-ash: #7a7a98;
  --tg-perm-snow: #f0f0fa;
  --tg-perm-volt: #e0ff00;
  --tg-perm-void: #04040a;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 280px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.tg-perm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tg-perm-wire);
  margin-top: -1px;
  background: var(--tg-perm-bg);
  cursor: pointer;
  transition: background 0.2s ease;
}
.tg-perm-item:first-child { border-radius: 12px 12px 0 0; }
.tg-perm-item:last-child  { border-radius: 0 0 12px 12px; }
.tg-perm-item:hover { background: var(--tg-perm-rim); }
.tg-perm-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-perm-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--tg-perm-ash);
  opacity: 0.4;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.tg-perm-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tg-perm-name {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--tg-perm-snow);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.tg-perm-desc {
  font-size: 11px;
  color: var(--tg-perm-ash);
}
/* Mini pill toggle on the right of each row. */
.tg-perm-pill {
  position: relative;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--tg-perm-wire);
  border: 1px solid var(--tg-perm-fog);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.tg-perm-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tg-perm-fog);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.3s ease;
}
.tg-perm-input:checked ~ .tg-perm-icon { opacity: 1; color: var(--tg-perm-volt); }
.tg-perm-input:checked ~ .tg-perm-info .tg-perm-name { opacity: 1; }
.tg-perm-input:checked ~ .tg-perm-pill {
  background: var(--tg-perm-volt);
  border-color: var(--tg-perm-volt);
}
.tg-perm-input:checked ~ .tg-perm-pill .tg-perm-thumb {
  transform: translateX(18px);
  background: var(--tg-perm-void);
}
.tg-perm-input:focus-visible ~ .tg-perm-pill {
  outline: 2px solid var(--tg-perm-volt);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-perm-item,
  .tg-perm-icon,
  .tg-perm-name,
  .tg-perm-pill,
  .tg-perm-thumb { transition: none; }
}
```

### 07. iOS

**Type:** Pure CSS
**Description:** The reference iOS-style pill toggle — translucent track, white thumb with a subtle drop shadow, smooth slide on toggle. Honors prefers-reduced-motion.

**HTML:**
```html
<label class="tg-ios">
  <input class="tg-ios-input" type="checkbox" checked>
  <span class="tg-ios-track" aria-hidden="true">
    <span class="tg-ios-thumb"></span>
  </span>
  <span class="tg-ios-label">Wi-Fi</span>
</label>
```

**CSS:**
```css
.tg-ios {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #f0eeff;
  user-select: none;
}
.tg-ios-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-ios-track {
  position: relative;
  width: 51px;
  height: 31px;
  background: rgba(120,120,128,0.32);
  border-radius: 999px;
  transition: background 0.25s ease;
}
.tg-ios-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #ffffff;
  /* Tighter shadow than real iOS — on iOS the shadow casts onto the
     screen background; here the toggle sits on a card and a softer
     shadow keeps the thumb visually contained within the track. */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-ios-input:checked ~ .tg-ios-track {
  background: #34c759;
}
.tg-ios-input:checked ~ .tg-ios-track .tg-ios-thumb {
  transform: translateX(20px);
}
.tg-ios-input:focus-visible ~ .tg-ios-track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-ios-track,
  .tg-ios-thumb { transition: none; }
}
```

### 08. Material Design

**Type:** Pure CSS
**Description:** Google Material Design 3 switch — track with rounded thumb that lifts and changes colour on toggle. Active state shows a filled icon-style indicator.

**HTML:**
```html
<label class="tg-md">
  <input class="tg-md-input" type="checkbox" checked>
  <span class="tg-md-track" aria-hidden="true">
    <span class="tg-md-thumb"></span>
  </span>
  <span class="tg-md-label">Notifications</span>
</label>
```

**CSS:**
```css
.tg-md {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Roboto", "Google Sans", sans-serif;
  font-size: 14px;
  color: #e6e0e9;
  user-select: none;
}
.tg-md-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-md-track {
  position: relative;
  width: 52px;
  height: 32px;
  background: #49454f;
  border: 2px solid #79747e;
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}
.tg-md-thumb {
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cac4d0;
  transform: translateY(-50%);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.15s ease,
              height 0.15s ease,
              background 0.2s ease;
}
.tg-md-input:checked ~ .tg-md-track {
  background: #d0bcff;
  border-color: #d0bcff;
}
.tg-md-input:checked ~ .tg-md-track .tg-md-thumb {
  /* Inner width is 48px (52 - 2px border × 2). Thumb grows to 24px
     on-state, so max left value that keeps the thumb fully inside the
     border is 48 - 24 = 24px, minus 2px breathing room = 22px. */
  left: 22px;
  width: 24px;
  height: 24px;
  background: #381e72;
}
.tg-md-input:focus-visible ~ .tg-md-track {
  outline: 2px solid #d0bcff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-md-track,
  .tg-md-thumb { transition: none; }
}
```

### 09. Skeuomorphic Light Switch

**Type:** Pure CSS
**Description:** A physical rocker light switch — brushed metal bezel, plastic rocker that tilts on toggle, subtle shadow that deepens when pressed. Heavy realism, satisfying click.

**HTML:**
```html
<label class="tg-skeo">
  <input class="tg-skeo-input" type="checkbox" checked>
  <span class="tg-skeo-bezel" aria-hidden="true">
    <span class="tg-skeo-rocker">
      <span class="tg-skeo-mark"></span>
    </span>
  </span>
  <span class="tg-skeo-label">Power</span>
</label>
```

**CSS:**
```css
.tg-skeo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d8d4dc;
  user-select: none;
}
.tg-skeo-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-skeo-bezel {
  position: relative;
  width: 56px;
  height: 44px;
  background: linear-gradient(180deg, #4a4a52 0%, #2a2a30 100%);
  border-radius: 6px;
  padding: 4px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.5),
    0 2px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-skeo-rocker {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #f4f1ec 0%, #d8d2c6 100%);
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.18s ease;
  transform-origin: center;
}
.tg-skeo-mark {
  position: absolute;
  top: 6px; left: 50%;
  width: 14px; height: 3px;
  background: #2a2a30;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: top 0.18s ease, bottom 0.18s ease;
}
.tg-skeo-input:checked ~ .tg-skeo-bezel .tg-skeo-rocker {
  transform: rotateX(0deg);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.8),
    inset 0 1px 0 rgba(0,0,0,0.15);
}
.tg-skeo-input:checked ~ .tg-skeo-bezel .tg-skeo-mark {
  top: auto;
  bottom: 6px;
  background: #d04f4f;
}
.tg-skeo-input:not(:checked) ~ .tg-skeo-bezel .tg-skeo-rocker {
  transform: rotateX(180deg);
}
.tg-skeo-input:focus-visible ~ .tg-skeo-bezel {
  outline: 2px solid #6b9eff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-skeo-rocker,
  .tg-skeo-mark { transition: none; }
}
```

### 10. Neon Cyber

**Type:** Pure CSS
**Description:** A glowing neon outline toggle — dark track with a cyan thumb that pulses with a soft glow when active. Futuristic dashboard aesthetic.

**HTML:**
```html
<label class="tg-neon">
  <input class="tg-neon-input" type="checkbox" checked>
  <span class="tg-neon-track" aria-hidden="true">
    <span class="tg-neon-thumb"></span>
  </span>
  <span class="tg-neon-label">Shields</span>
</label>
```

**CSS:**
```css
.tg-neon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8e8f0;
  user-select: none;
}
.tg-neon-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-neon-track {
  position: relative;
  width: 54px;
  height: 26px;
  background: #0a1320;
  border: 1px solid rgba(0, 220, 255, 0.3);
  border-radius: 999px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tg-neon-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6be8ff 0%, #0a90b8 100%);
  transform: translateY(-50%);
  box-shadow:
    0 0 6px rgba(0, 220, 255, 0.4),
    inset 0 1px 1px rgba(255,255,255,0.4);
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s ease;
}
.tg-neon-input:checked ~ .tg-neon-track {
  border-color: rgba(0, 220, 255, 0.9);
  box-shadow:
    0 0 12px rgba(0, 220, 255, 0.5),
    inset 0 0 8px rgba(0, 220, 255, 0.15);
}
.tg-neon-input:checked ~ .tg-neon-track .tg-neon-thumb {
  left: 33px;
  box-shadow:
    0 0 14px rgba(0, 220, 255, 0.9),
    inset 0 1px 1px rgba(255,255,255,0.5);
}
.tg-neon-input:focus-visible ~ .tg-neon-track {
  outline: 2px solid #6be8ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-neon-track,
  .tg-neon-thumb { transition: none; }
}
```

### 11. Brutalist

**Type:** Pure CSS
**Description:** Hard edges, no shadows, monospace label, raw markup feel. The track and thumb are pure rectangles. A counterpoint to polished SaaS-style toggles.

**HTML:**
```html
<label class="tg-brut">
  <input class="tg-brut-input" type="checkbox" checked>
  <span class="tg-brut-track" aria-hidden="true">
    <span class="tg-brut-thumb"></span>
  </span>
  <span class="tg-brut-label">Tracking</span>
</label>
```

**CSS:**
```css
.tg-brut {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f0eeff;
  user-select: none;
}
.tg-brut-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-brut-track {
  /* Outer 60×28; with 2px border, inner space is 56×24. Thumb is a
     24×24 white block that slides inside that inner space. Track
     stays dark in both states — the thumb's position is the signal,
     not a color inversion, so the state is readable at a glance even
     in a static preview. */
  position: relative;
  width: 60px;
  height: 28px;
  background: #1a1a1a;
  border: 2px solid #f0eeff;
  border-radius: 0;
  transition: background 0.1s linear;
  box-sizing: border-box;
}
.tg-brut-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 100%;
  background: #f0eeff;
  border-radius: 0;
  transition: left 0.1s linear;
}
.tg-brut-input:checked ~ .tg-brut-track .tg-brut-thumb {
  /* Inner width is 56px, thumb width 24px → 32px is the rightmost
     position that keeps the thumb fully inside the border. The track
     stays dark in both states — the thumb's position is the only
     state signal. Pure brutalist: stark contrast, no decoration. */
  left: 32px;
}
.tg-brut-input:focus-visible ~ .tg-brut-track {
  outline: 2px solid #ff6c8a;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-brut-track,
  .tg-brut-thumb { transition: none; }
}
```

### 12. Day / Night

**Type:** Pure CSS
**Description:** A dark-mode toggle that morphs from a sun in a sky-blue track to a crescent moon over a deep night track. The most "what does this control" pattern in the bunch.

**HTML:**
```html
<label class="tg-dn" aria-label="Theme: light or dark">
  <input class="tg-dn-input" type="checkbox" checked>
  <span class="tg-dn-track" aria-hidden="true">
    <span class="tg-dn-thumb">
      <span class="tg-dn-crater tg-dn-c1"></span>
      <span class="tg-dn-crater tg-dn-c2"></span>
      <span class="tg-dn-crater tg-dn-c3"></span>
    </span>
    <span class="tg-dn-star tg-dn-s1"></span>
    <span class="tg-dn-star tg-dn-s2"></span>
    <span class="tg-dn-star tg-dn-s3"></span>
  </span>
</label>
```

**CSS:**
```css
.tg-dn {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
}
.tg-dn-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-dn-track {
  position: relative;
  width: 72px;
  height: 36px;
  background: linear-gradient(180deg, #87ceeb 0%, #4a90c2 100%);
  border-radius: 999px;
  overflow: hidden;
  transition: background 0.4s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.tg-dn-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe066 0%, #f5a623 90%);
  box-shadow: 0 0 14px rgba(255, 224, 102, 0.7);
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s ease,
              box-shadow 0.4s ease;
}
.tg-dn-crater {
  position: absolute;
  border-radius: 50%;
  background: #2a2a30;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-dn-c1 { top: 6px;  left: 8px;  width: 6px;  height: 6px; }
.tg-dn-c2 { top: 14px; left: 18px; width: 4px;  height: 4px; }
.tg-dn-c3 { top: 20px; left: 6px;  width: 5px;  height: 5px; }
.tg-dn-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-dn-s1 { top: 8px;  left: 14px; }
.tg-dn-s2 { top: 18px; left: 24px; width: 1.5px; height: 1.5px; }
.tg-dn-s3 { top: 10px; left: 28px; }
.tg-dn-input:not(:checked) ~ .tg-dn-track {
  background: linear-gradient(180deg, #0a1322 0%, #1c2540 100%);
}
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-thumb {
  left: 39px;
  background: radial-gradient(circle at 35% 35%, #e8e6f0 0%, #a8a5bb 90%);
  box-shadow: 0 0 12px rgba(168, 165, 187, 0.5);
}
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-crater { opacity: 0.5; }
.tg-dn-input:not(:checked) ~ .tg-dn-track .tg-dn-star { opacity: 0.85; }
.tg-dn-input:focus-visible ~ .tg-dn-track {
  outline: 2px solid #ffe066;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-dn-track,
  .tg-dn-thumb,
  .tg-dn-crater,
  .tg-dn-star { transition: none; }
}
```

### 13. Flip Card

**Type:** Pure CSS
**Description:** A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.

**HTML:**
```html
<label class="tg-flip">
  <input class="tg-flip-input" type="checkbox" checked>
  <span class="tg-flip-card" aria-hidden="true">
    <span class="tg-flip-face tg-flip-on">ON</span>
    <span class="tg-flip-face tg-flip-off">OFF</span>
  </span>
  <span class="tg-flip-label">Auto-save</span>
</label>
```

**CSS:**
```css
.tg-flip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
  perspective: 400px;
}
.tg-flip-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-flip-card {
  position: relative;
  width: 56px;
  height: 30px;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 6px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tg-flip-on {
  background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.tg-flip-off {
  background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
  color: #b8b6d4;
  transform: rotateY(180deg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tg-flip-input:not(:checked) ~ .tg-flip-card {
  transform: rotateY(180deg);
}
.tg-flip-input:focus-visible ~ .tg-flip-card {
  outline: 2px solid #7c6cff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-flip-card { transition: none; }
}
```

### 14. Sliding Pill with Label

**Type:** Pure CSS
**Description:** A track containing both labels (ON / OFF) with a thumb that slides over the active one. Common SaaS-dashboard pattern — the label IS the indicator.

**HTML:**
```html
<label class="tg-pill">
  <input class="tg-pill-input" type="checkbox" checked>
  <span class="tg-pill-track" aria-hidden="true">
    <span class="tg-pill-text tg-pill-on">ON</span>
    <span class="tg-pill-text tg-pill-off">OFF</span>
    <span class="tg-pill-thumb"></span>
  </span>
  <span class="tg-pill-label">Public profile</span>
</label>
```

**CSS:**
```css
.tg-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-pill-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-pill-track {
  position: relative;
  width: 76px;
  height: 28px;
  background: #2a2a30;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background 0.25s ease;
}
.tg-pill-text {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: color 0.25s ease;
  pointer-events: none;
}
.tg-pill-on  { color: #7c6cff; }
.tg-pill-off { color: #6a6a7a; }
.tg-pill-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(50% - 2px);
  height: calc(100% - 4px);
  background: #f0eeff;
  border-radius: 999px;
  z-index: 1;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.tg-pill-input:checked ~ .tg-pill-track .tg-pill-on  { color: #1a1a1a; }
.tg-pill-input:checked ~ .tg-pill-track .tg-pill-off { color: #6a6a7a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-on  { color: #6a6a7a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-off { color: #1a1a1a; }
.tg-pill-input:not(:checked) ~ .tg-pill-track .tg-pill-thumb {
  left: 50%;
}
.tg-pill-input:focus-visible ~ .tg-pill-track {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-pill-thumb,
  .tg-pill-text,
  .tg-pill-track { transition: none; }
}
```

### 15. Glassmorphism

**Type:** Pure CSS
**Description:** A frosted-glass pill with a backdrop-blurred thumb. The colored backdrop tints the glass; the thumb floats above it. Modern dark-mode aesthetic.

**HTML:**
```html
<label class="tg-glass">
  <input class="tg-glass-input" type="checkbox" checked>
  <span class="tg-glass-track" aria-hidden="true">
    <span class="tg-glass-thumb"></span>
  </span>
  <span class="tg-glass-label">Focus mode</span>
</label>
```

**CSS:**
```css
.tg-glass {
  /* A subtle colored backdrop behind the track makes the backdrop-filter
     blur visible. Without a non-flat background the glass effect has
     nothing to refract. */
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,108,255,0.18), rgba(255,108,138,0.12));
}
.tg-glass-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-glass-track {
  position: relative;
  width: 56px;
  height: 30px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: background 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}
.tg-glass-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 2px 6px rgba(0,0,0,0.18);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}
.tg-glass-input:checked ~ .tg-glass-track {
  background: rgba(124,108,255,0.32);
  border-color: rgba(124,108,255,0.55);
}
.tg-glass-input:checked ~ .tg-glass-track .tg-glass-thumb {
  /* Inner width: 56 - 2 = 54. Thumb 24. Max left to stay inside: 54-24-2 = 28. */
  left: 28px;
  background: rgba(255,255,255,0.95);
}
.tg-glass-input:focus-visible ~ .tg-glass-track {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-glass-track,
  .tg-glass-thumb { transition: none; }
}
```

### 16. Skeuomorphic Knob

**Type:** Pure CSS
**Description:** A brushed-metal rotary knob that physically rotates 90 degrees on toggle. Different motion type from the sliding switches — rotation as the state signal. Tick marks anchor the dial.

**HTML:**
```html
<label class="tg-knob">
  <input class="tg-knob-input" type="checkbox" checked>
  <span class="tg-knob-stage" aria-hidden="true">
    <span class="tg-knob-tick tg-knob-t-off">OFF</span>
    <span class="tg-knob-tick tg-knob-t-on">ON</span>
    <span class="tg-knob-dial">
      <span class="tg-knob-indicator"></span>
    </span>
  </span>
  <span class="tg-knob-label">Power</span>
</label>
```

**CSS:**
```css
.tg-knob {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #d8d4dc;
  user-select: none;
}
.tg-knob-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-knob-stage {
  position: relative;
  width: 60px;
  height: 60px;
}
.tg-knob-tick {
  position: absolute;
  font-family: ui-monospace, "Fira Code", monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #6a6a7a;
}
.tg-knob-t-off { top: 4px;  left: 0; }
.tg-knob-t-on  { top: 4px;  right: 0; }
.tg-knob-dial {
  position: absolute;
  top: 12px; left: 6px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #f0e8d8 0%, #6a5a30 90%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.3),
    0 2px 6px rgba(0,0,0,0.4);
  transform: rotate(-45deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-knob-indicator {
  position: absolute;
  top: 4px; left: 50%;
  width: 3px; height: 14px;
  background: #2a1d0e;
  border-radius: 2px;
  transform: translateX(-50%);
}
.tg-knob-input:checked ~ .tg-knob-stage .tg-knob-dial {
  transform: rotate(45deg);
}
.tg-knob-input:checked ~ .tg-knob-stage .tg-knob-t-on { color: #d8b66e; }
.tg-knob-input:not(:checked) ~ .tg-knob-stage .tg-knob-t-off { color: #d8b66e; }
.tg-knob-input:focus-visible ~ .tg-knob-stage .tg-knob-dial {
  outline: 2px solid #d8b66e;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-knob-dial { transition: none; }
}
```

### 17. iOS Light Mode

**Type:** Pure CSS
**Description:** The iOS toggle in its light-theme presentation — clean white card backdrop, soft gray off-state, signature green on-state. Counterpart to demo 1.

**HTML:**
```html
<label class="tg-iosl">
  <input class="tg-iosl-input" type="checkbox" checked>
  <span class="tg-iosl-track" aria-hidden="true">
    <span class="tg-iosl-thumb"></span>
  </span>
  <span class="tg-iosl-label">Bluetooth</span>
</label>
```

**CSS:**
```css
.tg-iosl {
  /* Wrapped in a light-card backdrop because the gallery stage is dark.
     This is exactly how you'd ship this in a real light-mode app —
     surrounded by a white surface. */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 15px;
  color: #1a1a1f;
  user-select: none;
  padding: 14px 18px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tg-iosl-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-iosl-track {
  position: relative;
  width: 51px;
  height: 31px;
  background: #e5e5ea;
  border-radius: 999px;
  transition: background 0.25s ease;
}
.tg-iosl-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 0 1px rgba(0,0,0,0.08);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-iosl-input:checked ~ .tg-iosl-track {
  background: #34c759;
}
.tg-iosl-input:checked ~ .tg-iosl-track .tg-iosl-thumb {
  transform: translateX(20px);
}
.tg-iosl-input:focus-visible ~ .tg-iosl-track {
  outline: 2px solid #0a84ff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-iosl-track,
  .tg-iosl-thumb { transition: none; }
}
```

### 18. Outline

**Type:** Pure CSS
**Description:** A pure-stroke toggle — track and thumb are outlines only, no fills. When toggled on, the thumb fills with brand color. Minimalist; pairs with the brutalist demo.

**HTML:**
```html
<label class="tg-out">
  <input class="tg-out-input" type="checkbox" checked>
  <span class="tg-out-track" aria-hidden="true">
    <span class="tg-out-thumb"></span>
  </span>
  <span class="tg-out-label">Sync</span>
</label>
```

**CSS:**
```css
.tg-out {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-out-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-out-track {
  position: relative;
  width: 56px;
  height: 28px;
  background: transparent;
  border: 1px solid #6a6a7a;
  border-radius: 999px;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.tg-out-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #6a6a7a;
  transform: translateY(-50%);
  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.2s ease,
              border-color 0.2s ease;
}
.tg-out-input:checked ~ .tg-out-track {
  border-color: #7c6cff;
}
.tg-out-input:checked ~ .tg-out-track .tg-out-thumb {
  /* Inner width: 56 - 2 = 54. Thumb 20. Max left: 54-20-3 = 31. */
  left: 31px;
  background: #7c6cff;
  border-color: #7c6cff;
}
.tg-out-input:focus-visible ~ .tg-out-track {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-out-track,
  .tg-out-thumb { transition: none; }
}
```

### 19. Bouncy Pebble

**Type:** Pure CSS
**Description:** A chunky outlined toggle with an organic "pebble" thumb shape built from 8-value border-radius syntax. Bouncy springy transition with anticipation + overshoot. Track and thumb swap colors on each state. The reference for hand-crafted, designer-drawn toggles — distinctive from every other demo in the collection.

**HTML:**
```html
<label class="tg-bp">
  <input class="tg-bp-input" type="checkbox" checked>
  <span class="tg-bp-track" aria-hidden="true">
    <span class="tg-bp-thumb"></span>
  </span>
  <span class="tg-bp-label">Theme: butter</span>
</label>
```

**CSS:**
```css
.tg-bp {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #f0eeff;
  user-select: none;
}
.tg-bp-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.tg-bp-track {
  position: relative;
  width: 150px;
  height: 74px;
  background: #f3f3f3;
  border-radius: 999px;
  box-shadow:
    inset 0 0 0 3px #2a2a2a,
    0 10px 20px rgba(0,0,0,0.35);
  transition: background 0.35s ease;
}
.tg-bp-thumb {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 48px;
  height: 48px;
  background: #f4df72;
  border: 3px solid #2b2b2b;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  /* 8-value border-radius (horizontal × vertical radii per corner)
     creates the organic asymmetric pebble shape: fuller left, tighter
     right, subtle diagonal tension. The -2deg tilt adds hand-crafted
     irregularity. The cubic-bezier easing has anticipation (negative
     control point) and overshoot (>1 control point) — the thumb
     pulls back slightly before sliding, then overshoots the
     destination before settling. */
  border-radius: 52% 38% 42% 58% / 52% 42% 58% 48%;
  transform: translateY(-50%) rotate(-2deg);
  transition: all 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.4);
}
.tg-bp-input:checked ~ .tg-bp-track {
  background: #f4df72;
}
.tg-bp-input:checked ~ .tg-bp-track .tg-bp-thumb {
  /* Slides to right edge. Track is 150px wide, thumb is 48px + 3px×2
     border = 54px total. left: calc(100% - 64px) gives 10px from the
     right edge, mirroring the 10px from the left in the off state. */
  left: calc(100% - 64px);
  background: #f5f5f5;
  /* Mirrored border-radius — horizontal asymmetry flips. The "fuller"
     side is now the right (the direction the thumb just came from). */
  border-radius: 38% 52% 58% 42% / 42% 52% 48% 58%;
  transform: translateY(-50%) rotate(2deg);
}
.tg-bp-input:focus-visible ~ .tg-bp-track {
  outline: 3px solid #7c6cff;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-bp-track,
  .tg-bp-thumb { transition: none; }
}
```

### 20. Industrial Rocker

**Type:** Pure CSS
**Description:** A chunky industrial rocker switch with twin indicator lights, rotating "teeth" along the rail, and a color-shifting metallic thumb. The off-light glows red; the on-light glows brand purple. Inspired by heavy-duty equipment power switches.

**HTML:**
```html
<label class="tg-rock">
  <input class="tg-rock-input" type="checkbox" checked>
  <span class="tg-rock-body" aria-hidden="true">
    <span class="tg-rock-lights">
      <span class="tg-rock-light tg-rock-light-off"></span>
      <span class="tg-rock-light tg-rock-light-on"></span>
    </span>
    <span class="tg-rock-track-top">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span><span></span>
    </span>
    <span class="tg-rock-rail"></span>
    <span class="tg-rock-thumb"></span>
    <span class="tg-rock-track-bot">
      <span></span><span></span><span></span><span></span><span></span>
      <span></span><span></span><span></span><span></span><span></span>
    </span>
  </span>
  <span class="tg-rock-label">Power</span>
</label>
```

**CSS:**
```css
@property --tg-rock-shine {
  syntax: "<color>";
  initial-value: #f50000;
  inherits: false;
}
.tg-rock {
  --tg-rock-sz: 8px;
  --tg-rock-off: #f50000;
  --tg-rock-on: #7c6cff;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  user-select: none;
}
.tg-rock-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Body proportions: 28×sz wide, 18×sz tall.
   Layout regions stacked vertically:
     row 1 (top): lights row, ~3×sz tall
     row 2: top track teeth, ~1.5×sz tall
     row 3: rail + thumb, ~7×sz tall (the main switch)
     row 4: bottom track teeth, ~1.5×sz tall */
.tg-rock-body {
  position: relative;
  display: inline-block;
  width: calc(var(--tg-rock-sz) * 28);
  height: calc(var(--tg-rock-sz) * 18);
}
.tg-rock-lights {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: calc(var(--tg-rock-sz) * 2);
}
.tg-rock-light {
  width: calc(var(--tg-rock-sz) * 1.4);
  height: calc(var(--tg-rock-sz) * 1.4);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4a4a52, #1a1a1f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: all 0.5s ease;
}
/* Rail spans the full body width, vertically centered. */
.tg-rock-rail {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(var(--tg-rock-sz) * 7);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #2a2a30, #0a0a0e);
  border-radius: calc(var(--tg-rock-sz) * 0.8);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.8),
    inset 0 -1px 2px rgba(255,255,255,0.05),
    0 2px 4px rgba(0,0,0,0.3);
}
/* Thumb: ~12×sz wide (almost half the body), 6×sz tall, sits on the rail. */
.tg-rock-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--tg-rock-sz) * 1);
  width: calc(var(--tg-rock-sz) * 12);
  height: calc(var(--tg-rock-sz) * 5.5);
  transform: translateY(-50%);
  background: linear-gradient(180deg, #c0c0c8 0%, #8a8a92 45%, #4a4a52 100%);
  border-radius: calc(var(--tg-rock-sz) * 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 4px rgba(0,0,0,0.5),
    0 3px 6px rgba(0,0,0,0.5),
    0 0 calc(var(--tg-rock-sz) * 1.8) var(--tg-rock-shine);
  transition: left 0.5s ease, --tg-rock-shine 0.5s ease;
}
/* Grip lines: three horizontal bars across the thumb face. */
.tg-rock-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  box-shadow:
    0 calc(var(--tg-rock-sz) * 0.6) 0 rgba(0,0,0,0.55),
    0 calc(var(--tg-rock-sz) * -0.6) 0 rgba(0,0,0,0.55);
}
.tg-rock-track-top,
.tg-rock-track-bot {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--tg-rock-sz) * 1);
}
.tg-rock-track-top { top: calc(var(--tg-rock-sz) * 3); }
.tg-rock-track-bot { bottom: calc(var(--tg-rock-sz) * 0); }
.tg-rock-track-top span,
.tg-rock-track-bot span {
  width: calc(var(--tg-rock-sz) * 1);
  height: calc(var(--tg-rock-sz) * 1);
  background: #3a3a42;
  border-radius: 1px;
  transition: transform 0.5s ease;
}
/* Off state — left light glows red. */
.tg-rock-light-off {
  background: radial-gradient(circle at 35% 35%, #ff7575, var(--tg-rock-off));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    0 0 calc(var(--tg-rock-sz) * 1.2) var(--tg-rock-off);
}
/* On state — left dims, right lights up purple, thumb slides right. */
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-light-off {
  background: radial-gradient(circle at 35% 35%, #4a4a52, #1a1a1f);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-light-on {
  background: radial-gradient(circle at 35% 35%, #b5a8ff, var(--tg-rock-on));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.3),
    0 0 calc(var(--tg-rock-sz) * 1.2) var(--tg-rock-on);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-thumb {
  left: calc(100% - var(--tg-rock-sz) * 13);
  --tg-rock-shine: #7c6cff;
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-track-top span {
  transform: rotate(20deg);
}
.tg-rock-input:checked ~ .tg-rock-body .tg-rock-track-bot span {
  transform: rotate(-20deg);
}
.tg-rock-input:focus-visible ~ .tg-rock-body .tg-rock-rail {
  outline: 2px solid #7c6cff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-rock-thumb,
  .tg-rock-light,
  .tg-rock-track-top span,
  .tg-rock-track-bot span { transition: none; }
}
```

---
## Tools

### Base64 Encoder / Decoder

URL: https://codefronts.com/tools/base64-encoder-decoder/
Description: Encode or decode Base64 — text, JSON, JWTs, and files up to 5 MB. Standard and URL-safe variants with full UTF-8 support and live preview.
Summary: Free online Base64 encoder and decoder. Encode UTF-8 text or files, decode standard or URL-safe Base64, inspect JWTs, and copy ready-to-use data: URIs.

### Colour Contrast Checker

URL: https://codefronts.com/tools/color-contrast-checker/
Description: Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.
Summary: Free online colour contrast checker. Enter foreground and background colours to get the WCAG 2.1 contrast ratio with AA and AAA pass-fail ratings and a live preview.

### Color Format Converter

URL: https://codefronts.com/tools/color-format-converter/
Description: Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.
Summary: Free online color format converter. Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Paste a whole stylesheet and convert every color at once.

### CSS Formatter & Beautifier

URL: https://codefronts.com/tools/css-formatter/
Description: Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.
Summary: Free online CSS formatter and beautifier. Paste minified or messy CSS, get cleanly indented output with configurable indent size, optional property sorting, and live preview.

### CSS Minifier

URL: https://codefronts.com/tools/css-minifier/
Description: Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.
Summary: Free online CSS minifier. Paste any stylesheet and get a minified output with live size savings. Trims whitespace, comments, leading zeros, hex colours and zero-units.

### CSS Specificity Calculator

URL: https://codefronts.com/tools/css-specificity-calculator/
Description: Paste any CSS selector and get its (a, b, c) specificity score — with a colour-coded breakdown of every ID, class, attribute, pseudo, and element.
Summary: Free online CSS specificity calculator. Paste selectors and get the (a, b, c) score with token-by-token breakdown. Compare selectors, see which wins, copy the result.

### CSS to Tailwind Converter

URL: https://codefronts.com/tools/css-to-tailwind-converter/
Description: Paste any CSS and instantly get the Tailwind CSS class equivalents — supports 400+ properties with arbitrary value fallback.
Summary: Free online CSS to Tailwind CSS converter. Paste CSS and get Tailwind class names instantly. Supports spacing, typography, flexbox, grid, colors, effects and more.

### CSS Unit Converter

URL: https://codefronts.com/tools/css-unit-converter/
Description: Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.
Summary: Free online CSS unit converter for length, time, angle, and resolution. Convert px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls.

### CSS Variable Checker

URL: https://codefronts.com/tools/css-variable-checker/
Description: Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.
Summary: Free online CSS variable checker. Paste any :root or theme block to see every custom property as a colour swatch or typed chip, follow var() chains, and audit tokens.

### HTML Entity Encoder / Decoder

URL: https://codefronts.com/tools/html-entity-encoder/
Description: Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.
Summary: Free online HTML entity encoder and decoder. Convert <, >, &, quotes, and Unicode symbols to named, decimal, or hex entities — and decode them back instantly.

### HTML to JSX Converter

URL: https://codefronts.com/tools/html-to-jsx-converter/
Description: Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.
Summary: Free online HTML to JSX converter for React. Paste HTML and instantly get JSX with className, htmlFor, self-closed void elements, camelCase events, and style objects. Handles 50+ attribute conversions.

### JSON to TypeScript Converter

URL: https://codefronts.com/tools/json-to-typescript-converter/
Description: Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.
Summary: Free online JSON to TypeScript converter with Zod, JSON Schema and Go output. Paste JSON and get types, runtime validators and structs instantly. 100% in-browser.

### JSON / YAML / CSV Converter

URL: https://codefronts.com/tools/json-yaml-csv-converter/
Description: Convert between JSON, YAML, and CSV in one tool. All 9 conversions, with options for indent, sort keys, YAML quote style, CSV delimiter, nested-object flattening and more.
Summary: Free online JSON to YAML, YAML to JSON, JSON to CSV, CSV to JSON converter. Paste any format, output in any of the three. Auto-detect, sort keys, custom delimiters. 100% in-browser.

### PX to REM Converter

URL: https://codefronts.com/tools/px-to-rem-converter/
Description: Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.
Summary: Free online px to rem converter. Enter any pixel value and instantly get the REM equivalent based on your root font size. Essential for responsive CSS.

### Responsive Breakpoint Tester

URL: https://codefronts.com/tools/responsive-breakpoint-tester/
Description: Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.
Summary: Free online responsive design tester. Preview any URL across mobile, tablet, and desktop viewports with Tailwind breakpoint detection, rotation, and live zoom.

### Tailwind Config Theme Builder

URL: https://codefronts.com/tools/tailwind-config-theme-builder/
Description: Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.
Summary: Free online Tailwind config theme builder. Pick a primary color and get a full theme.extend with 50-950 color scale, semantic tokens, light + dark mode. Output to Tailwind v3, v4 @theme, CSS variables, or shadcn/ui.

### Tailwind to CSS Converter

URL: https://codefronts.com/tools/tailwind-to-css-converter/
Description: Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.
Summary: Free Tailwind to CSS converter. Paste utility classes and get plain CSS, SCSS, custom properties, or @apply. Variants and arbitrary values supported.

### Viewport Unit Calculator

URL: https://codefronts.com/tools/viewport-unit-calculator/
Description: Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.
Summary: Free online viewport unit calculator. Convert px to vw, vh, vmin, vmax (and back) at any viewport size. Device presets, fluid typography table, and clamp() patterns.

---
## Generators

### CSS Animation Generator

URL: https://codefronts.com/generators/css-animation-generator/
Description: Build CSS keyframe animations visually — pick a preset, tune duration, easing, direction and fill-mode, then copy the output.
Summary: Free online CSS animation generator with live preview. Configure @keyframes, duration, easing, iteration, direction and fill-mode — copy the CSS instantly.

### CSS Aspect Ratio Calculator

URL: https://codefronts.com/generators/css-aspect-ratio-calculator/
Description: Calculate any CSS aspect ratio and visualize it across six device viewports — iPhone, iPad, laptop, desktop, ultrawide, square. Computed values panel, padding-bottom fallback, export to CSS, Tailwind, styled-components, SCSS, React.
Summary: Free CSS aspect ratio calculator. 10 presets (16:9, 1:1, golden, A4), 6 device viewports rendered at scale, padding-bottom fallback, export CSS, Tailwind, styled, SCSS, React.

### CSS Border Radius Generator

URL: https://codefronts.com/generators/css-border-radius-generator/
Description: Design CSS border-radius shapes visually — round individual corners, create blobs, pills, circles and more, then copy the output.
Summary: Free online CSS border-radius generator with live preview. Control all corners individually, pick from blob and shape presets, then copy the CSS instantly.

### CSS Box Shadow Generator

URL: https://codefronts.com/generators/css-box-shadow-generator/
Description: Build CSS box shadows visually — adjust blur, spread, offset, colour and opacity with live preview, then copy the output.
Summary: Free online CSS box shadow generator with live preview. Stack multiple shadows, adjust blur, spread and colour, then copy the CSS output instantly.

### CSS Clip-Path Generator

URL: https://codefronts.com/generators/css-clip-path-generator/
Description: Design any CSS clip-path visually — drag polygon vertices, pick from triangle to star presets, switch between polygon/circle/ellipse/inset, and copy the CSS instantly.
Summary: Free online CSS clip-path generator with live drag-to-edit polygon handles. Triangles, hexagons, stars, chevrons, circles, ellipses, inset shapes — copy the CSS instantly.

### CSS Color Palette Generator

URL: https://codefronts.com/generators/css-color-palette-generator/
Description: Generate a 3–12 color palette from any image directly in your browser. K-means clustering, real WCAG contrast scores, export to CSS variables, Tailwind, design tokens, SCSS, or JS.
Summary: Free CSS color palette generator. Drop any image, get 3–12 dominant colors with WCAG contrast scores. Export CSS variables, Tailwind, design tokens, SCSS, JS.

### CSS Cubic Bezier Generator

URL: https://codefronts.com/generators/css-cubic-bezier-generator/
Description: Design CSS cubic-bezier easing curves visually — drag two handles, see the curve play live as a moving ball, compare against linear / ease / ease-in-out, export to CSS, Tailwind, JS, or SCSS.
Summary: Free visual cubic-bezier generator. Drag handles to design CSS easing curves with live ball animation, side-by-side comparison, export to CSS, Tailwind, JS, SCSS.

### CSS Cursor Generator

URL: https://codefronts.com/generators/css-cursor-generator/
Description: Browse all 36 standard CSS cursors and build custom data-URL cursors from emoji, text badges, or SVG — with a visual hotspot picker and instant export to CSS, Tailwind, styled-components, or SCSS.
Summary: Free CSS cursor generator. Browse all 36 system cursors live, build custom cursors from emoji, text or SVG with visual hotspot picker. Export CSS, Tailwind, styled-components, SCSS.

### CSS Filter Generator

URL: https://codefronts.com/generators/css-filter-generator/
Description: Build CSS filter strings visually — blur, brightness, contrast, saturation, hue-rotate, sepia, drop-shadow and more — with a live before/after preview.
Summary: Free online CSS filter generator. Adjust blur, brightness, contrast, saturation, hue-rotate, sepia, grayscale, invert, opacity and drop-shadow with a live before / after preview.

### CSS Flexbox Generator

URL: https://codefronts.com/generators/css-flexbox-generator/
Description: Build CSS flexbox layouts visually — control direction, wrapping, alignment, and gap, then copy the output.
Summary: Free online CSS flexbox generator with live preview. Set flex-direction, justify-content, align-items, gap and more — copy the CSS instantly.

### Font Pairing Finder — Curated Heading + Body

URL: https://codefronts.com/generators/css-font-pairing-finder/
Description: Find a working font pairing in seconds — eight curated headings (Inter, Playfair, Space Grotesk, Fraunces) each with 3–4 hand-picked body fonts. Multi-size live preview, auto Google Fonts loading, copy-ready CSS.
Summary: Free font pairing finder with 8 curated heading fonts and hand-picked body matches. Live preview at hero/subhead/body/caption sizes. Export CSS, Tailwind, SCSS, Google Fonts import.

### CSS Glassmorphism Generator

URL: https://codefronts.com/generators/css-glassmorphism-generator/
Description: Build frosted-glass surfaces visually — live preview against six vivid backgrounds, real-time WCAG contrast scoring, and copy-ready output in CSS, Tailwind, CSS Modules, styled-components, SCSS or React.
Summary: Free CSS glassmorphism generator with live preview against six backgrounds, real-time AA/AAA contrast checker, and instant export to CSS, Tailwind, CSS Modules, styled-components, SCSS, and React.

### CSS Gradient Generator

URL: https://codefronts.com/generators/css-gradient-generator/
Description: Build linear, radial, and conic CSS gradients visually — adjust stops, angles, and colours with a live preview, then copy the output.
Summary: Free online CSS gradient generator. Create linear, radial and conic gradients with a visual editor, live preview, and instant copy-to-clipboard CSS output.

### CSS Grid Generator

URL: https://codefronts.com/generators/css-grid-generator/
Description: Build CSS grid layouts visually — set columns, rows, gaps, and alignment, then copy the output.
Summary: Free online CSS grid generator with live preview. Configure grid-template-columns, rows, gap, justify-items, align-items and more — copy the CSS instantly.

### CSS Letter Spacing Generator

URL: https://codefronts.com/generators/css-letter-spacing-generator/
Description: Tune CSS letter-spacing and line-height visually — eight font stacks, eight elements (h1 through caption), and a Goldilocks side-by-side comparison so your eye picks the right value, not your guesswork.
Summary: Free CSS letter-spacing generator. Tune letter-spacing and line-height visually with 8 font stacks, 8 elements (h1, h2, body, caption, mono), side-by-side preview, instant CSS export.

### CSS Outline & Border Generator

URL: https://codefronts.com/generators/css-outline-border-generator/
Description: Build CSS borders, outlines, and gradient borders visually — with per-side controls, side-by-side border-vs-outline comparison, and copy-ready output in CSS, Tailwind, styled-components, or SCSS.
Summary: Free CSS border and outline generator. Per-side controls, gradient borders, side-by-side compare, and instant export to CSS, Tailwind, styled-components, SCSS.

### CSS Scrollbar Generator

URL: https://codefronts.com/generators/css-scrollbar-generator/
Description: Generate custom CSS scrollbars visually — width, thumb color, track color, hover state, padding, border-radius. Outputs both modern `scrollbar-color` and legacy `::-webkit-scrollbar` CSS side by side, with a live scrollable preview.
Summary: Free CSS scrollbar generator. Customize width, colors, hover, radius with a live scrollable preview. Outputs both `scrollbar-color` (Firefox) and `::-webkit-scrollbar` (Chrome / Safari) syntax.

### CSS Spacing Scale Generator

URL: https://codefronts.com/generators/css-spacing-scale-generator/
Description: Generate a modular CSS spacing scale visually — pick a base size and a ratio (golden, perfect-fourth, modular fifth), see the cascade as side-by-side rectangles, export to CSS variables, Tailwind, design tokens, SCSS, or JS.
Summary: Free CSS spacing scale generator. 8 modular ratio presets (golden, perfect-fourth, etc.), visual cascade preview, T-shirt or numeric naming. Export CSS variables, Tailwind, design tokens, SCSS, JS.

### CSS Text Shadow Generator

URL: https://codefronts.com/generators/css-text-shadow-generator/
Description: Stack any number of text shadows visually — neon glows, 3D depth, faux outlines, embossed labels and retro layers — with a live preview and copy-on-click CSS.
Summary: Free online CSS text-shadow generator. Stack multiple shadow layers for neon, 3D, outline, retro, and emboss effects. Live preview with editable text, font, and background.

### CSS Transform Generator

URL: https://codefronts.com/generators/css-transform-generator/
Description: Stack 2D and 3D CSS transforms visually — translate, rotate, scale, skew, perspective and origin — with a live preview, ghost reference, and copy-on-click CSS.
Summary: Free online CSS transform generator. Build 2D and 3D transforms (translate, rotate, scale, skew, perspective) with a live preview, transform-origin picker, and copyable CSS.