/**
* Domainless Ecosystem — Shared Design System (base.css)
*
* Loaded by sister sites (stream, music, creators, jandgstudios,
* vivarium) to inherit the domainless.fun look & feel while letting
* each site override its own accent/brand color.
*
* Usage in a site's :
*
*
* To override the accent color for a specific site:
* :root { --accent: #ff6b9d; }
*
* All classes are prefixed with `dl-` to avoid collisions with
* site-specific styles.
*/
/* ── Design tokens ─────────────────────────────────────────────── */
:root {
--dl-bg: #0c0c12;
--dl-card: #16161e;
--dl-card-hover: #1e1e28;
--dl-border: rgba(255, 255, 255, 0.08);
--dl-border-strong: rgba(255, 255, 255, 0.14);
--dl-text: #c0c0cc;
--dl-bright: #f0f0f6;
--dl-dim: #7a7a88;
--dl-accent: #c8a86e;
--dl-accent-tint: rgba(200, 168, 110, 0.12);
--dl-accent-glow: rgba(200, 168, 110, 0.28);
--dl-danger: #e05050;
--dl-green: #50c878;
--dl-sans:
"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--dl-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
/* ── Base elements ─────────────────────────────────────────────── */
.dl-reset,
.dl-reset * {
box-sizing: border-box;
}
.dl-body {
margin: 0;
background: var(--dl-bg);
color: var(--dl-text);
font-family: var(--dl-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Layout ────────────────────────────────────────────────────── */
.dl-container {
max-width: 720px;
margin: 0 auto;
padding: 24px 18px;
}
.dl-container-wide {
max-width: 1100px;
margin: 0 auto;
padding: 24px 24px;
}
.dl-stack {
display: flex;
flex-direction: column;
gap: 14px;
}
/* ── Typography ────────────────────────────────────────────────── */
.dl-h1 {
font-size: clamp(28px, 5vw, 44px);
font-weight: 900;
color: var(--dl-bright);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 14px;
}
.dl-h2 {
font-size: clamp(22px, 3.5vw, 30px);
font-weight: 800;
color: var(--dl-bright);
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.dl-h3 {
font-size: 17px;
font-weight: 800;
color: var(--dl-bright);
margin: 0 0 8px;
}
.dl-lead {
font-size: clamp(15px, 2vw, 17px);
color: var(--dl-dim);
line-height: 1.55;
}
.dl-section-label {
font-size: 10px;
font-weight: 800;
color: var(--dl-accent);
text-transform: uppercase;
letter-spacing: 1.8px;
margin-bottom: 8px;
}
/* ── Cards ─────────────────────────────────────────────────────── */
.dl-card {
background: var(--dl-card);
border: 1px solid var(--dl-border);
border-radius: 14px;
padding: 18px 20px;
transition: border-color 0.15s;
}
.dl-card-interactive {
cursor: pointer;
}
.dl-card-interactive:hover {
border-color: var(--dl-accent);
}
.dl-card-elevated {
background: linear-gradient(
135deg,
var(--dl-card),
color-mix(in srgb, var(--dl-accent) 8%, var(--dl-card))
);
border-color: var(--dl-accent);
box-shadow: 0 4px 24px var(--dl-accent-tint);
}
/* ── Buttons ───────────────────────────────────────────────────── */
.dl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: 10px;
font-family: var(--dl-sans);
font-size: 14px;
font-weight: 700;
text-decoration: none;
border: 1px solid var(--dl-border);
background: transparent;
color: var(--dl-bright);
cursor: pointer;
transition:
transform 0.1s,
filter 0.15s,
background 0.15s,
border-color 0.15s;
white-space: nowrap;
}
.dl-btn:hover {
border-color: var(--dl-accent);
}
.dl-btn:active {
transform: scale(0.97);
}
.dl-btn-primary {
background: var(--dl-accent);
color: #000;
border-color: var(--dl-accent);
box-shadow: 0 4px 20px var(--dl-accent-glow);
}
.dl-btn-primary:hover {
filter: brightness(1.08);
border-color: var(--dl-accent);
}
.dl-btn-outline {
color: var(--dl-accent);
border-color: var(--dl-accent);
}
.dl-btn-outline:hover {
background: var(--dl-accent-tint);
}
.dl-btn-ghost {
color: var(--dl-dim);
border-color: transparent;
}
.dl-btn-ghost:hover {
color: var(--dl-bright);
background: var(--dl-card);
}
/* ── Forms ─────────────────────────────────────────────────────── */
.dl-input {
display: block;
width: 100%;
padding: 12px 14px;
background: var(--dl-bg);
color: var(--dl-bright);
border: 1px solid var(--dl-border);
border-radius: 10px;
font-family: var(--dl-sans);
font-size: 14px;
outline: none;
transition: border-color 0.15s;
}
.dl-input:focus {
border-color: var(--dl-accent);
}
.dl-input::placeholder {
color: var(--dl-dim);
}
/* ── Rows / list items ─────────────────────────────────────────── */
.dl-row {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
background: var(--dl-card);
border: 1px solid var(--dl-border);
border-radius: 10px;
cursor: pointer;
color: var(--dl-bright);
font-size: 14px;
transition:
background 0.12s,
border-color 0.12s;
}
.dl-row:hover {
background: var(--dl-card-hover);
border-color: var(--dl-accent);
}
/* ── Utilities ─────────────────────────────────────────────────── */
.dl-dim {
color: var(--dl-dim);
}
.dl-bright {
color: var(--dl-bright);
}
.dl-mono {
font-family: var(--dl-mono);
}
.dl-center {
text-align: center;
}
/* ── Chrome-bar compensation ───────────────────────────────────── */
/* When chrome.js injects its top bar it adds the `dl-chrome-present`
class to . Any site that has its own fixed top nav should
use this selector to push its nav down by the chrome bar height
so they don't collide. */
html.dl-chrome-present .dl-site-nav,
html.dl-chrome-present .nav[id="nav"],
html.dl-chrome-present body > nav.nav {
top: 48px !important;
}
@media (max-width: 640px) {
html.dl-chrome-present .dl-site-nav,
html.dl-chrome-present .nav[id="nav"],
html.dl-chrome-present body > nav.nav {
top: 44px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
BRAND OVERRIDE — universal palette, every site gets the same look.
Per-site stylesheets used to set their own --bg/--card/--text and
the result was an inconsistent mess (some near-black, some purple,
some with hot-pink accents). Until customizable themes return with
proper isolation, every page wears the J&G Studios gold-on-warm-
dark brand. !important is intentional — beats per-site :root.
Covers every variable name spotted across the ecosystem:
--bg, --bg-2, --card, --card-hover, --text, --bright, --dim, --fg,
--accent, --border, --line, --panel, --surface, --neon, --brand,
--highlight, --danger, --green.
══════════════════════════════════════════════════════════════════ */
:root {
--bg: #1a1820 !important;
--bg-2: #14121a !important;
--card: #25232d !important;
--card-hover: #2d2b35 !important;
--text: #d8d6e2 !important;
--bright: #f4f2fa !important;
--dim: #9a98a8 !important;
--fg: #d8d6e2 !important;
--accent: #c8a86e !important;
--accent-2: #e6cb87 !important;
--accent-tint: rgba(200, 168, 110, 0.12) !important;
--accent-glow: rgba(200, 168, 110, 0.22) !important;
--border: rgba(200, 168, 110, 0.1) !important;
--border-strong: rgba(200, 168, 110, 0.2) !important;
--border-soft: rgba(255, 255, 255, 0.06) !important;
--line: rgba(200, 168, 110, 0.1) !important;
--panel: #25232d !important;
--surface: #25232d !important;
--neon: #c8a86e !important;
--brand: #c8a86e !important;
--highlight: #e6cb87 !important;
--danger: #e05050 !important;
--green: #50c878 !important;
--sans:
"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
sans-serif !important;
--mono:
"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace !important;
--brand-handwriting:
"Gerald Hand", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
system-ui, sans-serif !important;
}
/* Utility: opt into Gerald's handwriting for selected text. The font only
defines [A-Z a-z 0-9]; everything else cascades to DM Sans for visual
continuity. */
.dl-handwriting,
html.dl-chrome-present .dl-handwriting {
font-family: var(--brand-handwriting) !important;
letter-spacing: 0 !important;
}
html.dl-chrome-present body {
background: #1a1820 !important;
color: #d8d6e2 !important;
font-family:
"DM Sans",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
system-ui,
sans-serif !important;
}
/* Headlines + headings — pure-cream on warm-dark, sans (no mono) */
html.dl-chrome-present h1,
html.dl-chrome-present h2,
html.dl-chrome-present h3,
html.dl-chrome-present h4 {
color: #f4f2fa !important;
font-family:
"DM Sans",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
system-ui,
sans-serif !important;
letter-spacing: -0.01em !important;
}
/* Default link color — gold for TEXT links only. Excludes anchors that
the page is styling as buttons / CTAs / chrome surfaces / brand-marks.
Without these exclusions, an or
would render gold text on a gold background (invisible until hover).
[class*="btn"] — btn / btn-primary / cd-btn / etc.
[class*="cta"] — sol-cta / hero-cta / footer-cta / etc.
[class*="button"] — explicit "button" word in class
[class*="dl-chrome"] — chrome's own internal links manage their color
[role="button"] — accessibility-styled action anchors
.brand / .eyebrow — site-specific hero markup that pages style themselves
*/
html.dl-chrome-present
a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):not(
[class*="dl-chrome"]
):not([role="button"]):not(.brand):not(.eyebrow) {
color: #c8a86e;
}
html.dl-chrome-present
a:not([class*="btn"]):not([class*="cta"]):not([class*="button"]):not(
[class*="dl-chrome"]
):not([role="button"]):not(.brand):not(.eyebrow):hover {
color: #e6cb87;
text-decoration: underline;
}