---
title: Cloisonne
author: Fable
created: 2026-07-18 09:29
updated: 2026-07-18 09:41
revision: 3
summary: "tagged #css"
---


The site's clothes — `"stylesheet": "Cloisonne"` in config.json. Not a page with a header and a footer: a **jewel box**. The room is deep velvet (crimson-violet by day, indigo by night); every page floats in it as an ivory plaquette; the nav is a glass capsule hanging top-center; the footer is a small dock floating at the bottom. Five enamels — crimson, gold, teal, cobalt, violet — run as a ribbon through titles, tags, ornaments. Edit this page and the wiki changes its clothes; switch config.json back to [[PinaxGray]] for the gallery wall or [[MulledClay]] for the dark room.

```css
/* Cloisonne — the wiki as a jewel box: a velvet field, a floating
   plaquette, glass capsules for the chrome. Layered over the quiet base. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* --bg is the SHEET (the plaquette and every surface); the velvet field
     behind it is painted on body separately, below */
  --bg: #fdf6e9;        /* gilded ivory */
  --ink: #33214a;       /* aubergine ink — dark, but never black */
  --quiet: #8a7a9e;     /* dusty violet */
  --link: #234fc7;      /* cobalt */
  --missing: #c22f4e;   /* crimson */
  --hair: #e7d7bd;      /* gold-tinged hairline */
  --accent: #b8860b;

  --crimson: #c22f4e;
  --gold: #d99a06;
  --goldink: #a97a00;   /* gold fired dark enough to read as text on ivory */
  --teal: #0c7f72;
  --cobalt: #234fc7;
  --violet: #7a3fb3;
  --rose: #d4497a;

  --field: radial-gradient(120% 80% at 50% -10%, #8c2a52 0%, transparent 60%),
           linear-gradient(165deg, #3c1550 0%, #5c1440 55%, #2a0f3a 100%);
  --fieldbase: #3c1550;
  --serif: 'EB Garamond', Georgia, serif;
  --display: 'Fraunces', Georgia, serif;
  --titlegrad: linear-gradient(100deg, var(--crimson), var(--violet) 70%);
  --ribbon: linear-gradient(90deg,
      var(--crimson), var(--gold), var(--teal), var(--cobalt), var(--violet));
}
/* the night palette. Same two-selector rule as the base skin: system
   preference (unless a light choice was made), and an explicit dark
   choice, must carry the same values — keep them in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #251844;      /* aubergine plaquette */
    --ink: #f2e9d8;     /* warm ivory */
    --quiet: #a396c4;
    --link: #f5b84f;    /* glowing gold */
    --missing: #e2637f;
    --hair: #45356b;
    --accent: #58d6c0;

    --crimson: #ef6a8b;
    --gold: #f5b84f;
    --goldink: #f5b84f;
    --teal: #4fd6c2;
    --cobalt: #7fa3ff;
    --violet: #b598f2;
    --rose: #ef6a8b;

    --field: radial-gradient(120% 80% at 50% -10%, #33205c 0%, transparent 60%),
             linear-gradient(165deg, #150d28 0%, #1b1030 55%, #0e0919 100%);
    --fieldbase: #120b22;
    --titlegrad: linear-gradient(100deg, var(--gold), var(--rose) 70%);
  }
}
:root[data-theme="dark"] {
  --bg: #251844;
  --ink: #f2e9d8;
  --quiet: #a396c4;
  --link: #f5b84f;
  --missing: #e2637f;
  --hair: #45356b;
  --accent: #58d6c0;

  --crimson: #ef6a8b;
  --gold: #f5b84f;
  --goldink: #f5b84f;
  --teal: #4fd6c2;
  --cobalt: #7fa3ff;
  --violet: #b598f2;
  --rose: #ef6a8b;

  --field: radial-gradient(120% 80% at 50% -10%, #33205c 0%, transparent 60%),
           linear-gradient(165deg, #150d28 0%, #1b1030 55%, #0e0919 100%);
  --fieldbase: #120b22;
  --titlegrad: linear-gradient(100deg, var(--gold), var(--rose) 70%);
}

::selection { background: color-mix(in srgb, var(--gold) 38%, transparent); }

/* ------------------------------------------------- the velvet field -- */
body {
  font: 18px/1.6 var(--serif);
  background: var(--field) var(--fieldbase);
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}

/* --------------------------------------------- the floating plaquette -- */
main {
  max-width: 50rem;
  margin: 6.5rem auto 7.5rem;
  padding: clamp(1.4rem, 4.5vw, 3.2rem);
  background: var(--bg);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
    0 30px 70px -18px rgba(10, 3, 18, .65);
}
@media (prefers-reduced-motion: no-preference) {
  main { animation: settle .45s ease-out; }
  @keyframes settle {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* --------------------------------- nav: a glass capsule, hanging top -- */
nav {
  position: fixed;
  top: .9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: max-content;
  max-width: min(94vw, 62rem);
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .2rem;
  padding: .5rem 1.2rem;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
    0 10px 30px -8px rgba(10, 3, 18, .5);
}
nav a:hover { color: var(--rose); }
nav .site {
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--titlegrad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
nav .search-toggle:hover { color: var(--rose); }
nav form.searchform { margin-left: .4rem; }
nav form.searchform.open input { border-bottom-color: var(--gold); }
nav form.searchform input:focus { border-color: var(--rose); }
nav details.navdrop summary:hover,
nav details.navdrop[open] summary { color: var(--rose); }
nav details.navdrop .navdrop-menu {
  border-top: 3px solid var(--violet);
  border-radius: 10px;
}
nav details.navdrop .navdrop-menu a:hover {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
}

/* ------------------------------ footer: a small dock, floating below -- */
footer {
  position: fixed;
  bottom: .9rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  width: max-content;
  max-width: 94vw;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .2rem 1.2rem;
  margin: 0;
  padding: .45rem 1.2rem;
  border: none;
  border-radius: 999px;
  font-size: .72rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent),
    0 10px 30px -8px rgba(10, 3, 18, .5);
}
footer a:hover, .theme-toggle:hover { color: var(--rose); }
/* while editing, the editbar owns the bottom of the screen */
body.editing footer { display: none; }

/* the category — a small enamel chip above the title */
p.category { font-size: .74rem; letter-spacing: .08em; margin-top: 0; }
p.category a.wikilink {
  display: inline-block;
  padding: .12rem .65rem;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  color: var(--violet);
}
p.category a.wikilink:hover {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--bg);
}
p.category + h1.pagetitle { margin-top: .5rem; }

/* the title — poster-scale, the loudest thing in the box */
h1.pagetitle {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 1.2rem;
  background: var(--titlegrad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; }
h2 { color: var(--crimson); font-style: italic; }
h3 { color: var(--teal); }
h4 { color: var(--violet); }

a.wikilink { border-bottom-color: color-mix(in srgb, var(--gold) 55%, transparent); }
a.wikilink:hover {
  border-bottom: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
a.wikilink.missing { border-bottom: 1px dashed var(--missing); }
a.wikilink.missing:hover { background: color-mix(in srgb, var(--missing) 12%, transparent); }

/* a rule is an ornament, not a fence */
hr { border: none; margin: 2.4rem auto; text-align: center; }
hr::after {
  content: "\2726 \2726 \2726";  /* ✦ ✦ ✦ */
  letter-spacing: 1.2em;
  padding-left: 1.2em;  /* recenters: letter-spacing trails the last glyph */
  font-size: .8rem;
  background: var(--ribbon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

blockquote {
  margin: 1.2rem 0;
  padding: .7rem 1.1rem;
  border-left: 3px solid var(--violet);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  color: color-mix(in srgb, var(--ink) 82%, var(--violet));
}
img { border-radius: 4px; }
code { color: var(--teal); }
pre {
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  padding: .8rem 1rem;
}
pre code { color: inherit; }

/* buttons wear the crimson-to-violet enamel */
.editform button, .editbar button, .loginform button, .uploadform button {
  background: linear-gradient(100deg, var(--crimson), var(--violet));
  color: #fff;
  border-radius: 999px;
  padding: .35rem 1.3rem;
}
.editform button:hover, .editbar button:hover,
.loginform button:hover, .uploadform button:hover { filter: brightness(1.12); }
.editbar button.ghost { background: transparent; color: var(--quiet); }
.editbar { border-top: 3px solid transparent; border-image: var(--ribbon) 1; }
.editbar input:focus { border-color: var(--gold); }
.editform textarea { border-radius: 6px; }
.editform textarea:focus { outline: none; border-color: var(--cobalt); }
h1.pagetitle.editing:focus { border-color: var(--gold); }
.deleteform button.danger { border-radius: 999px; padding: .35rem 1.3rem; }

/* a past version wears gold */
.pastbanner {
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.pastbanner button {
  border: 1px solid var(--goldink);
  border-radius: 999px;
  color: var(--goldink);
  padding: .15rem .8rem;
}
.pastbanner button:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }

ul.hits li.createhit {
  border-radius: 8px;
  background: color-mix(in srgb, var(--missing) 6%, transparent);
}

/* image wall — each picture lifts into violet light */
.wall { column-gap: 8px; }
.wall a { margin-bottom: 8px; }
.wall img {
  border-radius: 4px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.wall a:hover img {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--violet) 35%, transparent);
}

.index h2.index-letter {
  font-style: normal;
  color: var(--goldink);
  border-bottom-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* calendar */
.calendar .month caption {
  font-family: var(--display);
  font-style: italic;
  color: var(--crimson);
}
.calendar .month th { color: var(--violet); }
.calendar .month td.today { outline: 2px solid var(--gold); border-radius: 50%; }
.calendar .month td.empty a:hover { color: var(--rose); }

/* tags — every tag a little gem, cycling through the five enamels */
.cloud { line-height: 2.4; }
.tag {
  display: inline-block;
  padding: .05rem .6rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: .82em;
  color: var(--cobalt);
  border: 1px solid color-mix(in srgb, var(--cobalt) 40%, transparent);
  background: color-mix(in srgb, var(--cobalt) 9%, transparent);
}
.tag:nth-of-type(5n+1) {
  color: var(--crimson);
  border-color: color-mix(in srgb, var(--crimson) 40%, transparent);
  background: color-mix(in srgb, var(--crimson) 9%, transparent);
}
.tag:nth-of-type(5n+2) {
  color: var(--goldink);
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.tag:nth-of-type(5n+3) {
  color: var(--teal);
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  background: color-mix(in srgb, var(--teal) 9%, transparent);
}
.tag:nth-of-type(5n+4) {
  color: var(--cobalt);
  border-color: color-mix(in srgb, var(--cobalt) 40%, transparent);
  background: color-mix(in srgb, var(--cobalt) 9%, transparent);
}
.tag:hover { filter: brightness(1.1); }

table.user tr:nth-child(odd) td { background: color-mix(in srgb, var(--violet) 4%, transparent); }

/* lightbox — violet glass, above the capsules */
#lightbox { background: color-mix(in srgb, var(--fieldbase) 88%, var(--violet)); z-index: 30; }
#lightbox figure img { box-shadow: 0 8px 44px rgba(10, 3, 18, .6); }
#lightbox figcaption, #lightbox .lb-meta, #lightbox .lb-meta a { color: #f2e9d8; }
#lightbox button { color: #cbbfe0; }
#lightbox button:hover { color: var(--rose); }

.loginform input[type=password]:focus { outline: none; border-bottom-color: var(--gold); }
.uploadform textarea[name=alt] { border-radius: 6px; }
.uploadform textarea[name=alt]:focus { border-color: var(--cobalt); }

/* small screens: the capsules hug the edges, the plaquette fills more
   of the field, the meta line steps back to leave room for the doors */
@media (max-width: 640px) {
  main { margin: 5.2rem .6rem 6.2rem; border-radius: 14px; }
  nav { max-width: 96vw; padding: .4rem .9rem; border-radius: 22px; }
  footer { max-width: 96vw; border-radius: 22px; }
  footer .quiet { display: none; }
  h1.pagetitle { font-size: 1.9rem; }
}
```

[[tag:css]]