# Components
Working, framework-agnostic HTML/CSS for Meddle surfaces. Every value comes from `brand/visual/tokens.css`. Every class is prefixed `.m-`, so it can sit next to Bootstrap on meddle.studio or in any other stack. The live demo of each one is in the root [`index.html`](../index.html) under **Components**.
## Setup
```html
…
```
Wrap any region in `.m-theme-dark`, `.m-theme-light`, `.m-theme-paper`, or `.m-theme-sheet` and the components inside adapt: they read `--m-bg`, `--m-fg`, `--m-muted`, `--m-rule`, and `--m-hairline`, never raw colors. Themes nest correctly, so a dark panel inside a light page gets dark components.
**Theme crossfade:** put `data-scroll-theme="light"` (or `"dark"`) on the element where the page should change. `components.js` swaps the theme on the `.m-root` element as it crosses the viewport midpoint. Sections with their own `.m-theme-*` class are fixed islands; the rest follow the scroll.
The CSS includes a minimal reset (border-box, `body` margin 0) scoped to `.m-root`. Everything is visible without JavaScript: reveals only hide content once `components.js` has added `.m-js` to ``.
## Inventory
| Component | Class | Use | Rule it encodes |
|---|---|---|---|
| Type roles | `.m-display` `.m-h1` `.m-statement` `.m-h2` `.m-h3` `.m-body-lg` `.m-body` `.m-small` `.m-label` `.m-caption` | All text | Weight follows role; −0.042em tracking; mono is uppercase labels only |
| Italic payoff | `` inside `.m-root` | One word per headline | `em` → Libre Baskerville Italic 400; 87% inside `.m-display` |
| Link | `.m-link` (+ `--arrow` after, `--lead` before, `--external`) | Inline CTAs (`--arrow`); footer and contact lists (`--lead`) | Underline draws from the left, exits right |
| Sign-off | `.m-signoff` | *Fortune favors the daring.* in footers and CTA bands | Always Baskerville italic, sentence case |
| Grid | `.m-grid` > `.m-span-{3–8,12}` / `.m-start-{5,7}` | 12-column layouts outside Bootstrap | Stacks below 768px |
| Pill | `.m-pill` (+ `.is-active` / `aria-current="page"`) | Nav links, small actions | Pills = actions; frosted; mono uppercase |
| Button | `.m-pill.m-button` | Form submit, primary action | Outlined on light, frosted on dark |
| CTA | `.m-pill.m-cta` | The single end-of-page CTA on ink | Lift + glow. **One per page.** |
| Nav | `.m-nav` + `.m-nav__end` | Primary nav | Contact pushed to the far end |
| Homepage hero | `.m-hero` > `.m-hero__media` + `h1.m-hero__wordmark.m-blend`, then `nav.m-hero__nav[data-autohide][data-scrollspy]` | Brand-level page openings | The meddle.studio pattern: the wordmark starts centered, sticks, and stops above the nav, and the nav then pins |
| Top bar | `.m-topbar` | Offer and sub-pages | Corner wordmark home link plus one pill CTA |
| CTA band | `.m-cta-band` > `.m-pill.m-cta` | The end of a page | Once per page |
| Aside | `.m-aside` | The one fully italic line under a display headline | Part of the headline's move |
| Wordmark | `.m-wordmark--corner` / `.m-wordmark--bleed` + `.m-blend` / `.m-wordmark--ghost` | Logo placement | One proportion; corner or edge-to-edge, nothing in between; ghost on deck interiors |
| Section | `.m-section` + `.m-section__head` | Page sections | Hairline top, huge bottom padding |
| Section title | `.m-section-title` | Deck-style titles | Mono number over heavy Inter + italic |
| Ruled columns | `.m-columns` (+ `.m-columns__empty`, `--m-columns: 3`) + `.m-col-label` | Deck grid on the web | 1px rule at each column's left edge, no boxes |
| Bordered list | `.m-list` / `.m-list--no` / `.m-list--plain` | Services, inclusions, comparisons | Arrow = included; × = the other model; items at weight 300 |
| Engagement rows | `.m-rows` > `a.m-row` | Offers, process steps | Mono number · title · muted description |
| Comparison | `.m-compare` | Meddle vs. traditional agency | The foil is a model, never a named competitor |
| Quote | `.m-quote` | Client testimonials, pull quotes | Baskerville Italic at −0.042em, oversized bold roman mark, Inter cite |
| Figure | `.m-figure` + `.m-ratio-16x9` / `.m-ratio-5x6` | Imagery | Square corners; mono caption |
| Field | `.m-field` + `.m-input` | Forms | Underline-only inputs; conversational labels |
| Chips | `.m-chips` > `label.m-chip` | Multi-select in forms | Square (content), not pill (action) |
| Tooltip | `.m-tooltip` (+ `.is-visible`) | Cursor label on linked rows | Names the action |
| Meta row | `.m-meta` > `.m-meta__item` | Document header | Mono, uppercase, grey, 4-column |
| Footer | `.m-footer` | Page footer | Mono uppercase links with arrows |
| Reveal | `.m-reveal` / `.m-reveal-list` | Statement fade-up; list items fade right in turn | 1500ms / 1000ms expo; needs components.js; off for reduced motion and (lists) on mobile |
## Snippets
**Hero with full-bleed wordmark over video**
```html
```
**Statement**
```html
It's time you seized an unfair advantage.
```
**Deck-style section on the web**
```html
3.0Market Analysis
Target Market
…
Core Problems Solved
…
Differentiators
…
```
**Comparison**
```html
Meddle
Flat fee of $30K
2 weeks to brand
Traditional Agency
$80K–$500K+
3–9 months or more
```
## Using these in meddle.studio
The production site already implements most of these under Bootstrap class names (`.arrow-list`, `.list-bordered`, `.nav-link`, `.btn-meddle`, `.meddle-input`, `.cs-*`). When the site and the kit disagree, the kit is the intended rule. Log the difference in `CHANGELOG.md` and fix the site, or update the kit with the reason.