UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — sections

Editorial Footer

The last chapter of the page, inverted so it reads as an ending. A display-size sign-off, three link columns, and a bottom rule carrying the legal text.

Open preview
Theme
Warm Editorial
Category
sections
JavaScript
none
Breakpoint
760px
Min width
320px

Paste this into Claude, Cursor or Copilot — or point the agent at https://ui-deploy.com/r/warm-editorial/footer/prompt.md 

# Editorial Footer — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

---

## What to build

The closing chapter of the page, on an **inverted surface** so it reads as an
ending rather than as one more section.

Two columns on top: a display-size sign-off with a pill CTA on the left, three
link columns on the right. Below them a hairline rule carrying the copyright and
the legal links. Top corners rounded 28px; the bottom runs to the page edge.

---

## Tokens

```css
:root{
  --accent:#A38A6A;
  --invert-bg:#151210; --invert-bg2:#1E1A17; --invert-border:#2E2822;
  --invert-text:#EDE7DD; --invert-text2:#A79E92; --invert-text3:#8A8177;
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --accent:#B39B7C;
  /* In dark mode the footer LIFTS one step. It does not flip to cream. */
  --invert-bg:#1E1A17; --invert-bg2:#262119; --invert-border:#40382F;
  --invert-text:#EDE7DD; --invert-text2:#A79E92; --invert-text3:#8A8177;
}
```

---

## Rules — these are not preferences

1. **Redefine the tokens locally, do not restyle the children.**
   ```css
   .we-footer{ --bg:var(--invert-bg); --text:var(--invert-text); /* … */ }
   ```
   Every element inside then works unchanged. Overriding each child's colour by
   hand is how inverted sections drift out of sync with the rest of the theme.
2. **In dark mode the footer does not become cream.** It lifts one step to
   `#1E1A17`. A cream band at the bottom of a dark page is a flashbang. This is
   the same rule that governs the featured pricing card and `.chapter-invert`.
3. **The sign-off ends with a full stop** and stays under ~16ch so it wraps into
   two or three strong lines.
4. **Contact entries are real `mailto:` and `tel:` links**, not plain text.
5. **Each link column is a `<nav>` with its own `aria-label`.** Three unlabelled
   navs in a row are useless to a screen reader.
6. **Link text needs `overflow-wrap:anywhere`** — an email address will otherwise
   push its column wider than the grid at 320px.
7. Section rhythm: the footer is always the last block, and it is always inverted.
   Never place two inverted sections back to back.
8. `:focus-visible` sets `outline` only.

---

## Reference implementation

See `code.html`. No JavaScript.

Editorial Footer — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot.

What to build

The closing chapter of the page, on an inverted surface so it reads as an ending rather than as one more section.

Two columns on top: a display-size sign-off with a pill CTA on the left, three link columns on the right. Below them a hairline rule carrying the copyright and the legal links. Top corners rounded 28px; the bottom runs to the page edge.

Tokens

:root{
  --accent:#A38A6A;
  --invert-bg:#151210; --invert-bg2:#1E1A17; --invert-border:#2E2822;
  --invert-text:#EDE7DD; --invert-text2:#A79E92; --invert-text3:#8A8177;
  --radius:28px; --radius-pill:999px;
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --accent:#B39B7C;
  /* In dark mode the footer LIFTS one step. It does not flip to cream. */
  --invert-bg:#1E1A17; --invert-bg2:#262119; --invert-border:#40382F;
  --invert-text:#EDE7DD; --invert-text2:#A79E92; --invert-text3:#8A8177;
}

Rules — these are not preferences

  1. Redefine the tokens locally, do not restyle the children. ```css .we-footer{ --bg:var(--invert-bg); --text:var(--invert-text); /* … */ } ``` Every element inside then works unchanged. Overriding each child's colour by hand is how inverted sections drift out of sync with the rest of the theme.
  2. In dark mode the footer does not become cream. It lifts one step to #1E1A17. A cream band at the bottom of a dark page is a flashbang. This is the same rule that governs the featured pricing card and .chapter-invert.
  3. The sign-off ends with a full stop and stays under ~16ch so it wraps into two or three strong lines.
  4. Contact entries are real mailto: and tel: links, not plain text.
  5. Each link column is a <nav> with its own aria-label. Three unlabelled navs in a row are useless to a screen reader.
  6. Link text needs overflow-wrap:anywhere — an email address will otherwise push its column wider than the grid at 320px.
  7. Section rhythm: the footer is always the last block, and it is always inverted. Never place two inverted sections back to back.
  8. :focus-visible sets outline only.

Reference implementation

See code.html. No JavaScript.