/* ============================================================
GLACIS — Aubergine Theme (site-wide)
Activated via `` on any page that wants the
twilight-aubergine aesthetic. Ports the token system + base styles
from the redesigned homepage so every page feels like the same site.
Pages intentionally NOT using this theme:
- terms.html / privacy.html / cookies.html (readable light-theme
legal documents by design)
- overt/* , overt-is/* (academic cream paper per feedback memory)
- 404.html, individual deck files (standalone aesthetics)
How to use on a page:
...
============================================================ */
body.aubergine {
/* ── surface (deep twilight aubergine) */
--iris-0: #14101B;
--iris-1: #18141F;
--iris-1-5: #1B1623;
--iris-2: #1E1724;
--iris-3: #241B2C;
--iris-4: #2C2135;
--iris-5: #352741;
/* ── type (warm bone on aubergine) */
--bone: #EDE3D0;
--bone-strong: #F5ECD9;
--bone-mute: #B5A9A0;
--bone-dim: #958996;
/* ── semantic trio — each layer of the stack has its own color */
--cyan: #82C4D0;
--cyan-mid: #5FB4C4;
--cyan-deep: #3F94A8;
--cyan-wash: rgba(95,180,196,0.11);
--cyan-line: rgba(130,196,208,0.36);
--violet: #C084FC;
--violet-mid: #A78BFA;
--violet-deep: #818CF8;
--violet-wash: rgba(167,139,250,0.12);
--violet-line: rgba(192,132,252,0.40);
--amber: #E0AE7C; /* bronze, not yellow */
--amber-mid: #C18E5C;
--amber-deep: #8A5E3C;
--amber-wash: rgba(224,174,124,0.11);
--amber-line: rgba(224,174,124,0.38);
/* ── antique brass — editorial accent, rare (≤5 per page) */
--brass: #B8935E;
--brass-lift: #CFA973;
--brass-deep: #8E6D3E;
--brass-wash: rgba(184,147,94,0.10);
--brass-line: rgba(184,147,94,0.38);
/* ── rare coral — emotional punctuation */
--coral: #E8A48A;
--coral-soft: rgba(232,164,138,0.22);
/* ── graphite (diagram-only) */
--graphite: #8F7E98;
/* ── semantic */
--pass: #94A381;
--warn: #C4964A;
--fail: #B05A3E;
/* ── rules */
--rule: rgba(237,227,208,0.10);
--rule-warm: rgba(184,147,94,0.20);
--rule-strong: rgba(237,227,208,0.18);
/* ── type stacks */
--serif: 'Fraunces', 'Source Serif 4', Georgia, serif;
--serif-body: 'Source Serif 4', 'Fraunces', Georgia, serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* ── rhythm */
--ease: cubic-bezier(0.2, 0.0, 0.2, 1);
/* ── body base — dark aubergine with chromatic atmospheric layers */
background:
radial-gradient(ellipse 50% 16% at 14% 4%, rgba(95,180,196,0.13) 0%, transparent 60%),
radial-gradient(ellipse 42% 14% at 88% 10%, rgba(192,132,252,0.14) 0%, transparent 62%),
radial-gradient(ellipse 36% 12% at 52% 16%, rgba(129,140,248,0.11) 0%, transparent 64%),
radial-gradient(ellipse 52% 16% at 14% 24%, rgba(224,174,124,0.12) 0%, transparent 60%),
radial-gradient(ellipse 32% 14% at 22% 44%, rgba(232,164,138,0.13) 0%, transparent 62%),
radial-gradient(ellipse 52% 16% at 86% 40%, rgba(167,139,250,0.19) 0%, transparent 62%),
radial-gradient(ellipse 30% 14% at 48% 56%, rgba(156,183,139,0.08) 0%, transparent 64%),
radial-gradient(ellipse 38% 14% at 66% 64%, rgba(217,132,184,0.10) 0%, transparent 62%),
radial-gradient(ellipse 46% 16% at 22% 72%, rgba(224,174,124,0.14) 0%, transparent 60%),
radial-gradient(ellipse 58% 20% at 82% 84%, rgba(192,132,252,0.22) 0%, transparent 62%),
radial-gradient(ellipse 32% 10% at 42% 92%, rgba(232,164,138,0.09) 0%, transparent 62%),
radial-gradient(ellipse 100% 22% at 50% 106%, rgba(20,16,27,0.55) 0%, transparent 72%),
linear-gradient(180deg, #1E1724 0%, #1B1623 42%, #18141F 100%) !important;
color: var(--bone) !important;
font-family: var(--serif-body);
font-feature-settings: "kern" 1, "ss01" 1, "onum" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.aubergine ::selection { background: var(--brass); color: var(--iris-0); }
/* ── Typography — Fraunces for display, Source Serif for long-form.
Heading sizes are AGGRESSIVELY oversized because Fraunces at
narrow optical-size has thin strokes — it needs scale to stay
legible. Prefixed html+body for specificity that beats Tailwind
text-* utility classes on individual pages. */
html body.aubergine h1,
html body.aubergine h2,
html body.aubergine h3,
html body.aubergine h4,
html body.aubergine h5,
html body.aubergine h6 {
font-family: var(--serif) !important;
color: var(--bone-strong) !important;
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 70;
}
html body.aubergine h1 {
font-size: clamp(2.8rem, 6.5vw, 5.2rem) !important;
line-height: 1.04 !important;
letter-spacing: -0.03em !important;
font-variation-settings: "opsz" 144, "SOFT" 50 !important;
margin-bottom: 0.4em;
}
html body.aubergine h2 {
font-size: clamp(2rem, 4.4vw, 3.6rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
font-variation-settings: "opsz" 144, "SOFT" 60 !important;
margin-bottom: 0.5em;
}
html body.aubergine h3 {
font-size: clamp(1.5rem, 2.8vw, 2.35rem) !important;
line-height: 1.18 !important;
letter-spacing: -0.015em !important;
font-variation-settings: "opsz" 144, "SOFT" 70 !important;
margin-bottom: 0.5em;
}
html body.aubergine h4 {
font-size: clamp(1.25rem, 1.9vw, 1.65rem) !important;
line-height: 1.28 !important;
letter-spacing: -0.01em !important;
font-variation-settings: "opsz" 72, "SOFT" 80 !important;
margin-bottom: 0.55em;
}
html body.aubergine h5 {
font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
line-height: 1.32 !important;
font-variation-settings: "opsz" 36, "SOFT" 90 !important;
margin-bottom: 0.55em;
}
html body.aubergine h6 {
font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
line-height: 1.38 !important;
font-variation-settings: "opsz" 24, "SOFT" 100 !important;
margin-bottom: 0.6em;
}
html body.aubergine h2 em,
html body.aubergine h1 em,
html body.aubergine h3 em {
color: var(--amber) !important;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100 !important;
}
/* ── Display classes (used on some pages as standalone typographic moments) */
html body.aubergine .font-display,
html body.aubergine .font-serif,
html body.aubergine [class*="font-display"],
html body.aubergine [class*="font-serif"] {
font-family: var(--serif) !important;
}
body.aubergine p,
body.aubergine li,
body.aubergine dd,
body.aubergine td,
body.aubergine blockquote { color: var(--bone); font-family: var(--serif-body); }
body.aubergine p { line-height: 1.68; }
body.aubergine a { color: var(--cyan); border-bottom: 1px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease); }
body.aubergine a:hover { color: var(--cyan-mid); border-bottom-color: var(--cyan-line); }
body.aubergine blockquote {
font-family: var(--serif);
font-style: italic;
color: var(--bone-strong);
border-left: 2px solid var(--brass-line);
padding-left: 18px;
}
body.aubergine code, body.aubergine pre, body.aubergine .mono {
font-family: var(--mono);
color: var(--bone-strong);
background: rgba(237,227,208,0.06);
}
body.aubergine pre { padding: 14px 18px; border: 1px solid var(--rule); border-radius: 2px; overflow-x: auto; }
body.aubergine hr { border: 0; border-top: 1px solid var(--rule); margin: clamp(32px, 5vw, 56px) 0; }
/* ── Common Tailwind overrides so existing light-theme utility classes
don't explode on the aubergine base. Pages built with Tailwind use
bg-white / bg-slate-50 / text-slate-900 everywhere; these soften
them to the dark theme without rewriting every class. */
body.aubergine .bg-white,
body.aubergine .bg-slate-50,
body.aubergine .bg-slate-100,
body.aubergine .bg-gray-50,
body.aubergine .bg-gray-100,
body.aubergine .bg-neutral-50,
body.aubergine .bg-neutral-100 {
background: rgba(237,227,208,0.04) !important;
}
body.aubergine .bg-slate-900,
body.aubergine .bg-slate-950,
body.aubergine .bg-gray-900,
body.aubergine .bg-gray-950 {
background: var(--iris-0) !important;
}
/* ── Kill ALL Tailwind gradient utilities on aubergine pages. Nuclear but
correct: no light-tinted gradient should ever render here. If a
section needs a dark gradient, the theme provides it at body level. */
html body.aubergine [class*="bg-gradient-to-"] {
background-image: none !important;
background-color: transparent !important;
}
/* ── Named card classes generated by Tailwind @apply that put bg-white
inline without the `.bg-white` class literal appearing on the HTML
element (so our [class*="bg-white"] selector never matches). Hard
override to read as a subtle bone-tinted card on aubergine. */
html body.aubergine .stat-card,
html body.aubergine .g-cap-card,
html body.aubergine .g-pricing-signal,
html body.aubergine .g-audience,
html body.aubergine .g-cross-card,
html body.aubergine .g-control-card,
html body.aubergine .g-arch-node,
html body.aubergine .g-arch-zone,
html body.aubergine .g-audience-item,
html body.aubergine .g-faq details,
html body.aubergine .data-table,
html body.aubergine .data-table th,
html body.aubergine .data-table td {
background-color: rgba(237,227,208,0.04) !important;
color: var(--bone) !important;
border-color: var(--rule) !important;
}
html body.aubergine .data-table th { color: var(--bone-strong) !important; }
html body.aubergine .g-faq summary { color: var(--bone-strong) !important; }
html body.aubergine .g-faq .faq-body { color: var(--bone) !important; }
/* ── Catch inline-style linear-gradients with explicit white stops.
Most pages use inline gradient CSS for heroes. This is imperfect
attribute matching but catches the common patterns. */
body.aubergine [style*="linear-gradient"][style*="#fff"],
body.aubergine [style*="linear-gradient"][style*="#FFF"],
body.aubergine [style*="linear-gradient"][style*="white"],
body.aubergine [style*="linear-gradient"][style*="#f8fafc"],
body.aubergine [style*="linear-gradient"][style*="#f1f5f9"],
body.aubergine [style*="linear-gradient"][style*="#eff6ff"] {
background-image: none !important;
background: transparent !important;
}
/* ── Cards with white backgrounds that my earlier .bg-white override
didn't catch (e.g., when more specific class chains override).
These force-reset any element whose class contains "bg-white" to
a subtle bone-tinted card so text stays readable. */
body.aubergine [class*="bg-white"],
body.aubergine section.bg-white,
body.aubergine div.bg-white,
body.aubergine article.bg-white {
background: rgba(237,227,208,0.04) !important;
color: var(--bone) !important;
}
/* ── If a page has a `.hero-spotlight` or similar named hero class with
its own light gradient, wipe the bg and let the aubergine show.
Also catches any SOLID light Tailwind 50-tier utility (bg-amber-50,
bg-rose-50, bg-emerald-50, bg-yellow-50, etc.) that's commonly used
for callout boxes on the guide pages. */
html body.aubergine .hero-spotlight,
html body.aubergine .hero-light,
html body.aubergine .light-hero,
html body.aubergine [class*="bg-amber-50"],
html body.aubergine [class*="bg-amber-100"],
html body.aubergine [class*="bg-blue-50"],
html body.aubergine [class*="bg-blue-100"],
html body.aubergine [class*="bg-cyan-50"],
html body.aubergine [class*="bg-cyan-100"],
html body.aubergine [class*="bg-emerald-50"],
html body.aubergine [class*="bg-emerald-100"],
html body.aubergine [class*="bg-fuchsia-50"],
html body.aubergine [class*="bg-gray-50"],
html body.aubergine [class*="bg-gray-100"],
html body.aubergine [class*="bg-green-50"],
html body.aubergine [class*="bg-green-100"],
html body.aubergine [class*="bg-indigo-50"],
html body.aubergine [class*="bg-indigo-100"],
html body.aubergine [class*="bg-lime-50"],
html body.aubergine [class*="bg-neutral-50"],
html body.aubergine [class*="bg-orange-50"],
html body.aubergine [class*="bg-orange-100"],
html body.aubergine [class*="bg-pink-50"],
html body.aubergine [class*="bg-pink-100"],
html body.aubergine [class*="bg-purple-50"],
html body.aubergine [class*="bg-purple-100"],
html body.aubergine [class*="bg-red-50"],
html body.aubergine [class*="bg-red-100"],
html body.aubergine [class*="bg-rose-50"],
html body.aubergine [class*="bg-rose-100"],
html body.aubergine [class*="bg-sky-50"],
html body.aubergine [class*="bg-slate-50"],
html body.aubergine [class*="bg-slate-100"],
html body.aubergine [class*="bg-teal-50"],
html body.aubergine [class*="bg-teal-100"],
html body.aubergine [class*="bg-violet-50"],
html body.aubergine [class*="bg-violet-100"],
html body.aubergine [class*="bg-yellow-50"],
html body.aubergine [class*="bg-glacis-50"],
html body.aubergine [class*="bg-glacis-100"] {
background: rgba(237,227,208,0.04) !important;
background-image: none !important;
color: var(--bone) !important;
}
/* ── Header CTA button "Start Your Free Scan" — default `btn-cta-glossy`
uses an indigo gradient fill that reads too aggressively against the
aubergine palette. Restyle to a subtle bone outline that lifts to
cyan on hover — matches the home-page hero CTA pattern. */
html body.aubergine .btn-cta-glossy {
background: transparent !important;
background-image: none !important;
color: var(--bone-strong) !important;
border: 1px solid var(--brass-line) !important;
box-shadow: inset 0 1px 0 rgba(237,227,208,0.06) !important;
transition: border-color 220ms var(--ease), color 220ms var(--ease), background-color 220ms var(--ease) !important;
}
html body.aubergine .btn-cta-glossy::before {
display: none !important;
}
html body.aubergine .btn-cta-glossy:hover {
background: rgba(184,147,94,0.06) !important;
color: var(--bone-strong) !important;
border-color: var(--brass) !important;
}
/* ── Wordmark on aubergine pages — the shared partial loads the light
wordmark (`glacis-wordmark.svg`, dark ink on light). On aubergine,
compound filters convert that dark ink into warm bone without a
JS swap (which wasn't reliably firing). brightness(0) reduces every
colour stop to black, invert(0.9) lifts to near-white, sepia(0.15)
warms it toward bone, then two drop-shadows add the brass halo. */
html body.aubergine .site-header img[alt="GLACIS"],
html body.aubergine .wordmark-glow,
html body.aubergine img[src*="glacis-wordmark"] {
filter:
brightness(0)
invert(0.9)
sepia(0.14)
drop-shadow(0 0 10px rgba(184,147,94,0.22))
drop-shadow(0 1px 2px rgba(20,16,27,0.6)) !important;
}
/* ── Pseudo-elements that draw light radial glows on hero sections */
body.aubergine .hero-spotlight::before,
body.aubergine .hero-spotlight::after {
display: none !important;
}
body.aubergine .text-slate-900,
body.aubergine .text-slate-800,
body.aubergine .text-gray-900,
body.aubergine .text-gray-800,
body.aubergine .text-neutral-900,
body.aubergine .text-black { color: var(--bone-strong) !important; }
body.aubergine .text-slate-700,
body.aubergine .text-slate-600,
body.aubergine .text-gray-700,
body.aubergine .text-gray-600 { color: var(--bone) !important; }
body.aubergine .text-slate-500,
body.aubergine .text-slate-400,
body.aubergine .text-gray-500,
body.aubergine .text-gray-400 { color: var(--bone-mute) !important; }
body.aubergine .text-white { color: var(--bone-strong) !important; }
/* Borders */
body.aubergine .border-slate-200,
body.aubergine .border-slate-300,
body.aubergine .border-gray-200,
body.aubergine .border-gray-300,
body.aubergine .border-neutral-200 { border-color: var(--rule) !important; }
body.aubergine .border-slate-800,
body.aubergine .border-slate-900,
body.aubergine .border-gray-800,
body.aubergine .border-gray-900 { border-color: var(--rule-strong) !important; }
/* Color semantic accents — map existing color utilities to the trio */
body.aubergine .text-cyan-400,
body.aubergine .text-cyan-500,
body.aubergine .text-cyan-600,
body.aubergine .text-sky-500,
body.aubergine .text-blue-500,
body.aubergine .text-blue-600 { color: var(--cyan) !important; }
body.aubergine .text-violet-400,
body.aubergine .text-violet-500,
body.aubergine .text-violet-600,
body.aubergine .text-indigo-500,
body.aubergine .text-indigo-600,
body.aubergine .text-purple-500,
body.aubergine .text-purple-600 { color: var(--violet-mid) !important; }
body.aubergine .text-amber-400,
body.aubergine .text-amber-500,
body.aubergine .text-amber-600,
body.aubergine .text-yellow-500,
body.aubergine .text-yellow-600,
body.aubergine .text-orange-500 { color: var(--amber) !important; }
body.aubergine .text-emerald-500,
body.aubergine .text-emerald-600,
body.aubergine .text-green-500,
body.aubergine .text-green-600 { color: var(--pass) !important; }
body.aubergine .text-red-500,
body.aubergine .text-red-600,
body.aubergine .text-rose-500 { color: var(--fail) !important; }
/* ── Cards and panels — keep structure but adapt colour */
body.aubergine .card,
body.aubergine [class*="rounded-"][class*="bg-white"],
body.aubergine [class*="rounded-"][class*="bg-slate-5"],
body.aubergine [class*="rounded-"][class*="bg-gray-5"] {
background: rgba(237,227,208,0.05) !important;
border: 1px solid var(--rule) !important;
box-shadow: inset 0 1px 0 rgba(237,227,208,0.04), 0 4px 16px rgba(20,16,27,0.3) !important;
}
/* ── Site header on aubergine pages — override the shared light header.
Keeps the structure of _partials/header.html but flips the palette. */
body.aubergine .site-header {
background: rgba(24,20,31,0.75) !important;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-bottom: 1px solid var(--rule) !important;
color: var(--bone);
}
body.aubergine .site-header::before {
display: none;
}
body.aubergine .site-header a { color: var(--bone-mute); border-bottom: none; }
body.aubergine .site-header a:hover { color: var(--bone-strong); }
body.aubergine .site-header .nav-toggle { color: var(--bone-mute); }
body.aubergine .site-header .nav-dropdown {
background: rgba(20,16,27,0.95) !important;
backdrop-filter: blur(20px);
border: 1px solid var(--rule) !important;
box-shadow: 0 24px 60px rgba(14,16,27,0.7);
}
body.aubergine .site-header .nav-dropdown .dd-label { color: var(--bone-strong); }
body.aubergine .site-header .nav-dropdown .dd-desc { color: var(--bone-mute); }
body.aubergine .site-header img[alt="GLACIS logo"] { filter: none; }
body.aubergine .site-header img[alt="GLACIS"] {
filter: drop-shadow(0 0 10px rgba(184,147,94,0.22)) drop-shadow(0 1px 2px rgba(20,16,27,0.6));
}
body.aubergine .wordmark-glow { filter: drop-shadow(0 0 10px rgba(184,147,94,0.22)) drop-shadow(0 1px 2px rgba(20,16,27,0.6)) !important; }
/* ── Footer on aubergine pages — shared partial already has a dark bg
(bg-slate-950), but soften to aubergine iris-0 for consistency. */
body.aubergine footer.bg-slate-950 {
background: var(--iris-0) !important;
border-top: 1px solid var(--rule);
color: var(--bone-mute) !important;
}
body.aubergine footer.bg-slate-950 h4 { color: var(--bone-strong) !important; }
body.aubergine footer.bg-slate-950 a { color: var(--bone-mute) !important; }
body.aubergine footer.bg-slate-950 a:hover { color: var(--cyan) !important; }
/* ── Buttons — preserve Tailwind button utility classes but adapt colour */
body.aubergine button:not(.nav-toggle):not(.mobile-menu-close),
body.aubergine .btn,
body.aubergine [class*="btn-"] {
font-family: var(--sans);
}
body.aubergine .bg-gradient-to-r,
body.aubergine [class*="from-cyan"],
body.aubergine [class*="to-violet"] {
background: linear-gradient(135deg, var(--cyan) 0%, var(--violet-mid) 50%, var(--violet) 100%) !important;
color: var(--iris-0) !important;
}
/* ── Kickers / small labels — the mono + uppercase + letter-spacing
pattern is used on many pages; make sure they read as bronze or cyan */
body.aubergine [class*="uppercase"][class*="tracking-"] {
font-family: var(--mono);
letter-spacing: 0.18em;
}
/* ── Inline style overrides that many pages use */
body.aubergine [style*="background: #f8fafc"],
body.aubergine [style*="background:#f8fafc"],
body.aubergine [style*="background: white"],
body.aubergine [style*="background:#fff"],
body.aubergine [style*="background:#ffffff"],
body.aubergine [style*="background: #ffffff"] {
background: rgba(237,227,208,0.04) !important;
}
/* ── Media / images — keep as-is but add subtle rounded border so they
don't look marooned on aubergine */
body.aubergine img:not(.shield):not(.wordmark):not([src*="logo"]) {
border-radius: 2px;
}
/* ──────────────────────────────────────────────────────────
SHARED EDITORIAL PRIMITIVES — drop-in classes any page can
use to kill Claude-era dot-in-pill eyebrows and bright
SaaS tag pills without bespoke CSS.
────────────────────────────────────────────────────────── */
/* Serif small-caps eyebrow under an optional thin rule. Use:
Insights
or with .is-cyan / .is-amber / .is-dim modifiers. */
body.aubergine .g-eyebrow {
display: inline-block;
padding-bottom: 12px;
margin-bottom: 20px;
border-bottom: 1px solid var(--rule);
font-family: var(--serif);
font-weight: 500;
font-size: 12.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--brass-lift);
font-feature-settings: "c2sc" 1, "smcp" 1;
font-variation-settings: "opsz" 14;
background: transparent !important;
border-radius: 0 !important;
border-top: 0;
border-left: 0;
border-right: 0;
}
body.aubergine .g-eyebrow.is-cyan { color: var(--cyan); }
body.aubergine .g-eyebrow.is-amber { color: var(--amber); }
body.aubergine .g-eyebrow.is-violet { color: var(--violet-mid); }
body.aubergine .g-eyebrow.is-dim { color: var(--bone-dim); }
body.aubergine .g-eyebrow.is-plain { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; }
/* Subtle editorial tag pill — 1px rule, small-caps serif, bone-mute.
Replaces bright bg-{color}-100 text-{color}-700 Tailwind pills. */
body.aubergine .g-tag {
display: inline-flex;
align-items: center;
padding: 4px 9px;
font-family: var(--serif);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bone-mute);
background: rgba(237,227,208,0.03);
border: 1px solid var(--rule);
border-radius: 2px;
font-feature-settings: "c2sc" 1, "smcp" 1;
}
body.aubergine .g-tag.is-cyan { color: var(--cyan); border-color: var(--cyan-line); background: rgba(95,180,196,0.06); }
body.aubergine .g-tag.is-amber { color: var(--amber); border-color: var(--amber-line); background: rgba(224,174,124,0.06); }
body.aubergine .g-tag.is-violet { color: var(--violet-mid);border-color: var(--violet-line); background: rgba(167,139,250,0.06); }
body.aubergine .g-tag.is-brass { color: var(--brass-lift);border-color: var(--brass-line); background: rgba(184,147,94,0.06); }
/* Auto-demote bright Tailwind text tags on aubergine — any inline
`bg-{color}-100 text-{color}-700` pill shimmers into a muted editorial
chip. Covers the common combinations used across legacy pages. Does NOT
touch elements with `.g-tag` (authored) or anything already on dark bg. */
body.aubergine [class*="bg-blue-100"][class*="text-blue-7"],
body.aubergine [class*="bg-rose-100"][class*="text-rose-7"],
body.aubergine [class*="bg-red-100"][class*="text-red-7"],
body.aubergine [class*="bg-amber-100"][class*="text-amber-7"],
body.aubergine [class*="bg-emerald-100"][class*="text-emerald-7"],
body.aubergine [class*="bg-purple-100"][class*="text-purple-7"],
body.aubergine [class*="bg-violet-100"][class*="text-violet-7"],
body.aubergine [class*="bg-glacis-100"][class*="text-glacis-7"],
body.aubergine [class*="bg-slate-100"][class*="text-slate-7"],
body.aubergine [class*="bg-teal-100"][class*="text-teal-7"],
body.aubergine [class*="bg-orange-100"][class*="text-orange-7"],
body.aubergine [class*="bg-pink-100"][class*="text-pink-7"] {
background: rgba(237,227,208,0.04) !important;
background-image: none !important;
border: 1px solid var(--rule) !important;
color: var(--bone-mute) !important;
border-radius: 2px !important;
font-family: var(--serif) !important;
font-feature-settings: "c2sc" 1, "smcp" 1 !important;
letter-spacing: 0.14em !important;
}
/* Map the 600-tier text utilities (often used as eyebrow text) to
editorial brass/cyan on aubergine. These already get some coverage
from the earlier .text-indigo-600 → --violet-mid rule, but we also
target the glacis brand tier + amber + emerald + red for eyebrow use. */
body.aubergine .text-glacis-600,
body.aubergine .text-glacis-500,
body.aubergine .text-glacis-400,
body.aubergine .text-glacis-300 { color: var(--brass-lift) !important; }
body.aubergine .text-glacis-200 { color: var(--bone-mute) !important; }
body.aubergine .text-glacis-100 { color: var(--bone-dim) !important; }
/* Deep-saturated glacis brand fills (bg-glacis-500/600/700/800) — tone
down to an editorial brass surface so numbered step circles and
buttons don't glow indigo on the aubergine. */
body.aubergine [class*="bg-glacis-500"],
body.aubergine [class*="bg-glacis-600"],
body.aubergine [class*="bg-glacis-700"],
body.aubergine [class*="bg-glacis-800"],
body.aubergine [class*="bg-glacis-900"] {
background: rgba(184,147,94,0.12) !important;
background-image: none !important;
border: 1px solid var(--brass-line) !important;
color: var(--brass-lift) !important;
}
/* Ensure `text-white` children of those force-remapped buttons remain
readable (brass-lift, not washed-out bone). */
body.aubergine [class*="bg-glacis-600"].text-white,
body.aubergine [class*="bg-glacis-500"].text-white,
body.aubergine [class*="bg-glacis-700"].text-white {
color: var(--brass-lift) !important;
}
/* Claude-era "dot-in-pill" category/hero lozenges used across 20 legacy
blog posts and a few other pages. Pattern:
...
Normalize to a small-caps serif eyebrow, demote the icon, keep the label
visible. Scope is tight (requires inline-flex + rounded-full + border +
text-sm/xs + font-medium) so round buttons and genuine chips are safe. */
body.aubergine span.inline-flex.rounded-full.border.text-sm.font-medium,
body.aubergine span.inline-flex.rounded-full.border.text-xs.font-medium,
body.aubergine div.inline-flex.rounded-full.border.text-sm.font-medium,
body.aubergine div.inline-flex.rounded-full.border.text-xs.font-medium {
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-bottom: 1px solid var(--rule) !important;
border-radius: 0 !important;
padding: 0 0 10px !important;
color: var(--brass-lift) !important;
font-family: var(--serif) !important;
font-weight: 500 !important;
font-size: 11.5px !important;
letter-spacing: 0.26em !important;
text-transform: uppercase !important;
font-feature-settings: "c2sc" 1, "smcp" 1 !important;
font-variation-settings: "opsz" 14 !important;
gap: 10px !important;
align-items: center !important;
}
/* Re-color child text utilities inside these normalized eyebrows */
body.aubergine span.inline-flex.rounded-full.border.text-sm [class*="text-"][class*="-300"],
body.aubergine span.inline-flex.rounded-full.border.text-xs [class*="text-"][class*="-300"],
body.aubergine div.inline-flex.rounded-full.border.text-sm [class*="text-"][class*="-300"],
body.aubergine div.inline-flex.rounded-full.border.text-xs [class*="text-"][class*="-300"] {
color: var(--brass-lift) !important;
}
/* Hide the tiny pulse dot if present (w-2 h-2 rounded-full child) */
body.aubergine span.inline-flex.rounded-full.border.text-sm > span.w-2,
body.aubergine span.inline-flex.rounded-full.border.text-xs > span.w-2,
body.aubergine div.inline-flex.rounded-full.border.text-sm > span.w-2,
body.aubergine div.inline-flex.rounded-full.border.text-xs > span.w-2,
body.aubergine span.inline-flex.rounded-full.border.text-sm > span.w-1\.5,
body.aubergine span.inline-flex.rounded-full.border.text-xs > span.w-1\.5,
body.aubergine div.inline-flex.rounded-full.border.text-sm > span.w-1\.5,
body.aubergine div.inline-flex.rounded-full.border.text-xs > span.w-1\.5 {
display: none !important;
}
/* Demote inline SVGs inside these eyebrows to a calm brass mark */
body.aubergine span.inline-flex.rounded-full.border.text-sm > svg,
body.aubergine span.inline-flex.rounded-full.border.text-xs > svg,
body.aubergine div.inline-flex.rounded-full.border.text-sm > svg,
body.aubergine div.inline-flex.rounded-full.border.text-xs > svg {
width: 13px !important;
height: 13px !important;
color: var(--brass-lift) !important;
stroke: var(--brass-lift) !important;
opacity: 0.7 !important;
}
/* ── Scroll behaviour */
html:has(body.aubergine) { scroll-behavior: smooth; }