/* PIXELABS THEME ENGINE v1 */
/* ============================================================================
* pixelabs-themes.css
* ----------------------------------------------------------------------------
* Portable visual-tone engine for any Pixelabs landing page.
*
* HOW TO USE (drop-in, ~2 minutes):
* 1.
* 2. (or "cyber-arcade", "desert-ethnic")
* 3. (optional)
* 4. In your own page CSS, reference --pl-* tokens. NEVER hard-code colors.
* e.g. .card { background: var(--pl-panel); border: 1px solid var(--pl-border); }
*
* The default pack (no attribute set) is "hud" — guston's dark cyan/violet look.
*
* TOKEN CONTRACT (the portable interface — every theme MUST set all of these):
* Surface : --pl-bg, --pl-bg-alt, --pl-panel, --pl-panel-hover,
* --pl-border, --pl-border-bright
* Text : --pl-text, --pl-muted, --pl-subtle
* Accent : --pl-accent, --pl-accent-2, --pl-accent-rgb, --pl-accent-2-rgb
* Status : --pl-good, --pl-warn, --pl-bad
* Type : --pl-font-display, --pl-font-body, --pl-font-mono
* Shape : --pl-radius, --pl-radius-sm, --pl-pill-radius,
* --pl-card-clip, --pl-border-style
* Feel : --pl-glow-strength, --pl-shadow, --pl-card-grad, --pl-mesh-grad
*
* ADDING A NEW THEME: scroll to the bottom of this file for the 6-line recipe.
*
* Constraints: no JS here. Self-hosted-friendly @font-face declarations only
* (Google Fonts CDN URLs for OFL fonts). Lazy-loading is the JS layer's job.
* ========================================================================= */
/* ---------------------------------------------------------------------------
* @font-face — OFL fonts pulled from Google Fonts CDN, font-display: swap.
* The JS layer decides WHEN to inject the for these; declarations here
* are inert until referenced by an active theme pack.
* ------------------------------------------------------------------------- */
@font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
}
@font-face {
font-family: 'VT323';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isfFJU.woff2') format('woff2');
}
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.gstatic.com/s/amiri/v27/J7aRnpd8CGxBHqUpvrIw74NL.woff2') format('woff2');
}
@font-face {
font-family: 'Amiri';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://fonts.gstatic.com/s/amiri/v27/J7acnpd8CGxBHp2VkZY4xJ9CGyAa.woff2') format('woff2');
}
@font-face {
font-family: 'Rubik';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV7nBrXyw023e.woff2') format('woff2');
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n5igg1l9kn-s.woff2') format('woff2');
}
/* ===========================================================================
* DEFAULT PACK: "hud" (guston dark) — applies when no data-theme-pack is set.
* ======================================================================== */
:root,
:root[data-theme-pack="hud"] {
color-scheme: dark;
/* Surface */
--pl-bg: #070a14;
--pl-bg-alt: #0a1026;
--pl-panel: rgba(255,255,255,0.05);
--pl-panel-hover: rgba(255,255,255,0.08);
--pl-border: rgba(255,255,255,0.10);
--pl-border-bright: rgba(255,255,255,0.18);
/* Text */
--pl-text: rgba(255,255,255,0.92);
--pl-muted: rgba(255,255,255,0.60);
--pl-subtle: rgba(255,255,255,0.40);
/* Accents */
--pl-accent: #71e0ff;
--pl-accent-2: #a78bfa;
--pl-accent-rgb: 113,224,255;
--pl-accent-2-rgb: 167,139,250;
/* Semantics */
--pl-good: #5cffb1;
--pl-warn: #ffd166;
--pl-bad: #ff5c7c;
/* Typography */
--pl-font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--pl-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--pl-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
/* Shape */
--pl-radius: 16px;
--pl-radius-sm: 10px;
--pl-pill-radius: 999px;
--pl-card-clip: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
--pl-border-style: solid;
/* Feel */
--pl-glow-strength: 0.85;
--pl-shadow:
0 8px 32px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.04);
--pl-card-grad:
linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
--pl-mesh-grad:
radial-gradient(1200px 700px at 20% 0%, rgba(113,224,255,0.10), transparent 55%),
radial-gradient(1000px 700px at 85% 15%, rgba(167,139,250,0.10), transparent 55%),
linear-gradient(180deg, #070a14 0%, #0a1026 55%, #070a14 100%);
/* Bridge: map --pl-* tokens to index.html's legacy --* namespace so a
theme-pack switch actually retints everything that reads var(--accent) etc. */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--font-mono: var(--pl-font-mono);
--font-body: var(--pl-font-body);
--card-clip: var(--pl-card-clip);
--card-radius: var(--pl-radius);
--radius: var(--pl-radius);
--radius-sm: var(--pl-radius-sm);
--pill-radius: var(--pl-pill-radius);
--glow-strength: var(--pl-glow-strength);
}
/* ---- hud LIGHT (CT spec: "very light navy") ---------------------------- */
:root[data-theme-pack="hud"][data-theme="light"],
:root[data-theme="light"] {
color-scheme: light;
--pl-bg: #eef2f9;
--pl-bg-alt: #e2e9f5;
--pl-panel: rgba(0,0,0,0.04);
--pl-panel-hover: rgba(0,0,0,0.07);
--pl-border: rgba(0,0,0,0.10);
--pl-border-bright: rgba(0,0,0,0.18);
--pl-text: rgba(0,0,10,0.88);
--pl-muted: rgba(0,0,10,0.58);
--pl-subtle: rgba(0,0,10,0.38);
--pl-accent: #0098c7;
--pl-accent-2: #7c3aed;
--pl-accent-rgb: 0,152,199;
--pl-accent-2-rgb: 124,58,237;
--pl-good: #0a9460;
--pl-warn: #b45309;
--pl-bad: #c41f40;
--pl-glow-strength: 0.35;
--pl-shadow:
0 8px 32px rgba(0,0,0,0.12),
0 0 0 1px rgba(0,0,0,0.04);
--pl-card-grad:
linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
--pl-mesh-grad:
radial-gradient(1200px 700px at 20% 0%, rgba(0,152,199,0.08), transparent 55%),
radial-gradient(1000px 700px at 85% 15%, rgba(124,58,237,0.06), transparent 55%),
linear-gradient(180deg, #eef2f9 0%, #e2e9f5 55%, #eef2f9 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--glow-strength: var(--pl-glow-strength);
}
/* hud honors OS preference when no explicit data-theme is set */
@media (prefers-color-scheme: light) {
:root[data-theme-pack="hud"]:not([data-theme="dark"]):not([data-theme="light"]) {
color-scheme: light;
--pl-bg: #eef2f9;
--pl-bg-alt: #e2e9f5;
--pl-panel: rgba(0,0,0,0.04);
--pl-panel-hover: rgba(0,0,0,0.07);
--pl-border: rgba(0,0,0,0.10);
--pl-border-bright: rgba(0,0,0,0.18);
--pl-text: rgba(0,0,10,0.88);
--pl-muted: rgba(0,0,10,0.58);
--pl-subtle: rgba(0,0,10,0.38);
--pl-accent: #0098c7;
--pl-accent-2: #7c3aed;
--pl-accent-rgb: 0,152,199;
--pl-accent-2-rgb: 124,58,237;
--pl-good: #0a9460;
--pl-warn: #b45309;
--pl-bad: #c41f40;
--pl-glow-strength: 0.35;
--pl-shadow:
0 8px 32px rgba(0,0,0,0.12),
0 0 0 1px rgba(0,0,0,0.04);
--pl-card-grad:
linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
--pl-mesh-grad:
radial-gradient(1200px 700px at 20% 0%, rgba(0,152,199,0.08), transparent 55%),
radial-gradient(1000px 700px at 85% 15%, rgba(124,58,237,0.06), transparent 55%),
linear-gradient(180deg, #eef2f9 0%, #e2e9f5 55%, #eef2f9 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--glow-strength: var(--pl-glow-strength);
}
}
/* ===========================================================================
* PACK: "cyber-arcade" — hot pink + electric blue, dark-only, pixel-feel.
* ======================================================================== */
:root[data-theme-pack="cyber-arcade"] {
color-scheme: dark;
--pl-bg: #0a0015;
--pl-bg-alt: #14002a;
--pl-panel: rgba(255,43,214,0.06);
--pl-panel-hover: rgba(255,43,214,0.12);
--pl-border: rgba(0,240,255,0.35);
--pl-border-bright: rgba(255,43,214,0.85);
--pl-text: #fff200;
--pl-muted: rgba(255,242,0,0.70);
--pl-subtle: rgba(0,240,255,0.55);
--pl-accent: #ff2bd6;
--pl-accent-2: #00f0ff;
--pl-accent-rgb: 255,43,214;
--pl-accent-2-rgb: 0,240,255;
--pl-good: #39ff14;
--pl-warn: #fff200;
--pl-bad: #ff003c;
--pl-font-display: 'Press Start 2P', 'Courier New', monospace;
--pl-font-body: 'VT323', 'Courier New', monospace;
--pl-font-mono: 'VT323', 'Courier New', monospace;
--pl-radius: 2px;
--pl-radius-sm: 0px;
--pl-pill-radius: 0px;
--pl-card-clip: none;
--pl-border-style: solid;
--pl-glow-strength: 1;
--pl-shadow:
0 0 0 2px #00f0ff,
4px 4px 0 0 #ff2bd6,
0 0 24px rgba(255,43,214,0.55),
0 0 48px rgba(0,240,255,0.35);
--pl-card-grad:
linear-gradient(180deg, rgba(255,43,214,0.10) 0%, rgba(0,240,255,0.04) 100%);
--pl-mesh-grad:
radial-gradient(800px 500px at 15% 10%, rgba(255,43,214,0.30), transparent 55%),
radial-gradient(900px 600px at 90% 30%, rgba(0,240,255,0.25), transparent 55%),
radial-gradient(700px 500px at 50% 95%, rgba(255,242,0,0.12), transparent 60%),
linear-gradient(180deg, #0a0015 0%, #14002a 50%, #0a0015 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--font-mono: var(--pl-font-mono);
--font-body: var(--pl-font-body);
--card-clip: var(--pl-card-clip);
--card-radius: var(--pl-radius);
--radius: var(--pl-radius);
--radius-sm: var(--pl-radius-sm);
--pill-radius: var(--pl-pill-radius);
--glow-strength: var(--pl-glow-strength);
}
/* ---- cyber-arcade LIGHT ("80s arcade on a sunny beach") ---------------- */
:root[data-theme-pack="cyber-arcade"][data-theme="light"] {
color-scheme: light;
--pl-bg: #fef0f8;
--pl-bg-alt: #ffe0f0;
--pl-panel: rgba(255,0,153,0.06);
--pl-panel-hover: rgba(255,0,153,0.12);
--pl-border: rgba(0,153,255,0.45);
--pl-border-bright: rgba(255,0,153,0.85);
--pl-text: #1a0015;
--pl-muted: rgba(26,0,21,0.68);
--pl-subtle: rgba(26,0,21,0.46);
--pl-accent: #ff0099;
--pl-accent-2: #0099ff;
--pl-accent-rgb: 255,0,153;
--pl-accent-2-rgb: 0,153,255;
--pl-good: #0ab34a;
--pl-warn: #d97706;
--pl-bad: #d60036;
--pl-glow-strength: 0.5;
--pl-shadow:
0 0 0 2px #0099ff,
3px 3px 0 0 #ff0099,
0 8px 24px rgba(255,0,153,0.18);
--pl-card-grad:
linear-gradient(180deg, rgba(255,255,255,0.70) 0%, rgba(255,224,240,0.35) 100%);
--pl-mesh-grad:
radial-gradient(800px 500px at 15% 10%, rgba(255,0,153,0.18), transparent 55%),
radial-gradient(900px 600px at 90% 30%, rgba(0,153,255,0.16), transparent 55%),
radial-gradient(700px 500px at 50% 95%, rgba(255,242,0,0.08), transparent 60%),
linear-gradient(180deg, #fef0f8 0%, #ffe0f0 50%, #fef0f8 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--glow-strength: var(--pl-glow-strength);
}
/* ===========================================================================
* PACK: "desert-ethnic" — sand + terracotta + sage, light/paper, no glow.
* ======================================================================== */
:root[data-theme-pack="desert-ethnic"] {
color-scheme: light;
--pl-bg: #f3e9d2;
--pl-bg-alt: #ead9b6;
--pl-panel: rgba(61,40,23,0.04);
--pl-panel-hover: rgba(61,40,23,0.08);
--pl-border: rgba(61,40,23,0.18);
--pl-border-bright: rgba(199,125,78,0.65);
--pl-text: #3d2817;
--pl-muted: rgba(61,40,23,0.70);
--pl-subtle: rgba(61,40,23,0.50);
--pl-accent: #c77d4e;
--pl-accent-2: #7a9a7a;
--pl-accent-rgb: 199,125,78;
--pl-accent-2-rgb: 122,154,122;
--pl-good: #5a7d3a;
--pl-warn: #d4a843;
--pl-bad: #a83232;
--pl-font-display: 'Amiri', 'Georgia', 'Times New Roman', serif;
--pl-font-body: 'Rubik', ui-sans-serif, system-ui, sans-serif;
--pl-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
--pl-radius: 18px;
--pl-radius-sm: 12px;
--pl-pill-radius: 999px;
--pl-card-clip: none;
--pl-border-style: solid;
--pl-glow-strength: 0;
--pl-shadow:
0 2px 4px rgba(61,40,23,0.08),
0 12px 28px rgba(61,40,23,0.14);
/* Subtle "paper" texture via stacked low-contrast gradients (no images) */
--pl-card-grad:
repeating-linear-gradient(135deg,
rgba(61,40,23,0.018) 0 2px,
transparent 2px 6px),
linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(234,217,182,0.30) 100%);
--pl-mesh-grad:
radial-gradient(1100px 700px at 20% 10%, rgba(199,125,78,0.18), transparent 60%),
radial-gradient(900px 600px at 85% 30%, rgba(122,154,122,0.14), transparent 60%),
radial-gradient(800px 600px at 50% 100%, rgba(212,168,67,0.10), transparent 60%),
linear-gradient(180deg, #f3e9d2 0%, #ead9b6 60%, #f3e9d2 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--font-mono: var(--pl-font-mono);
--font-body: var(--pl-font-body);
--card-clip: var(--pl-card-clip);
--card-radius: var(--pl-radius);
--radius: var(--pl-radius);
--radius-sm: var(--pl-radius-sm);
--pill-radius: var(--pl-pill-radius);
--glow-strength: var(--pl-glow-strength);
}
/* ---- desert-ethnic DARK ("desert night campfire") ---------------------- */
:root[data-theme-pack="desert-ethnic"][data-theme="dark"] {
color-scheme: dark;
--pl-bg: #1a1008;
--pl-bg-alt: #261810;
--pl-panel: rgba(61,40,23,0.60);
--pl-panel-hover: rgba(82,56,32,0.75);
--pl-border: rgba(212,168,67,0.22);
--pl-border-bright: rgba(212,168,67,0.55);
--pl-text: #f3e9d2;
--pl-muted: rgba(243,233,210,0.68);
--pl-subtle: rgba(243,233,210,0.42);
--pl-accent: #d4a843;
--pl-accent-2: #c77d4e;
--pl-accent-rgb: 212,168,67;
--pl-accent-2-rgb: 199,125,78;
--pl-good: #7a9a7a;
--pl-warn: #d4a843;
--pl-bad: #c04030;
--pl-glow-strength: 0;
--pl-shadow:
0 2px 6px rgba(0,0,0,0.5),
0 14px 32px rgba(0,0,0,0.45);
--pl-card-grad:
repeating-linear-gradient(135deg,
rgba(243,233,210,0.025) 0 2px,
transparent 2px 6px),
linear-gradient(180deg, rgba(82,56,32,0.45) 0%, rgba(38,24,16,0.25) 100%);
--pl-mesh-grad:
radial-gradient(1100px 700px at 20% 10%, rgba(199,125,78,0.22), transparent 60%),
radial-gradient(900px 600px at 85% 30%, rgba(212,168,67,0.14), transparent 60%),
radial-gradient(800px 600px at 50% 100%, rgba(122,154,122,0.10), transparent 60%),
linear-gradient(180deg, #1a1008 0%, #261810 60%, #1a1008 100%);
/* Bridge --pl-* -> index.html legacy vars */
--bg: var(--pl-bg);
--bg2: var(--pl-bg-alt);
--panel: var(--pl-panel);
--panel-hover: var(--pl-panel-hover);
--border: var(--pl-border);
--border-bright: var(--pl-border-bright);
--text: var(--pl-text);
--muted: var(--pl-muted);
--subtle: var(--pl-subtle);
--accent: var(--pl-accent);
--accent2: var(--pl-accent-2);
--accent-rgb: var(--pl-accent-rgb);
--accent-2-rgb: var(--pl-accent-2-rgb);
--good: var(--pl-good);
--warn: var(--pl-warn);
--bad: var(--pl-bad);
--shadow: var(--pl-shadow);
--glow-strength: var(--pl-glow-strength);
}
/* ===========================================================================
* Reduced motion — global gate. Themes that animate (glow pulses, mesh
* drift, etc.) should key off this rather than re-declaring it.
* ======================================================================== */
@media (prefers-reduced-motion: reduce) {
:root {
--pl-glow-strength: 0;
}
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===========================================================================
* ADDING A NEW THEME PACK — the 6-line recipe:
*
* :root[data-theme-pack="my-pack"] {
* --pl-bg: #...; --pl-bg-alt: #...; --pl-panel: ...; --pl-panel-hover: ...;
* --pl-border: ...; --pl-border-bright: ...;
* --pl-text: ...; --pl-muted: ...; --pl-subtle: ...;
* --pl-accent: #...; --pl-accent-2: #...; --pl-accent-rgb: r,g,b; --pl-accent-2-rgb: r,g,b;
* --pl-good: ...; --pl-warn: ...; --pl-bad: ...;
* --pl-font-display: ...; --pl-font-body: ...; --pl-font-mono: ...;
* --pl-radius: ...; --pl-radius-sm: ...; --pl-pill-radius: ...;
* --pl-card-clip: ...; --pl-border-style: ...;
* --pl-glow-strength: ...; --pl-shadow: ...;
* --pl-card-grad: ...; --pl-mesh-grad: ...;
* }
*
* That's it. Set all tokens, ship. Light variant? Add a second block with
* [data-theme-pack="my-pack"][data-theme="light"]. Dark/light-only? Use the
* "refuse to flip" pattern from cyber-arcade / desert-ethnic above.
* ========================================================================= */