/** * 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; } }