/* ============================================================ SHITS & GIGGLES — TOKENS The single source of truth: design tokens + theme variants. Subdomains (lovense., hub.) may load THIS FILE ALONE and just override --accent to stay on-brand. ============================================================ */ /* ============================================================ 1 · BRAND FONT (Hello Charm 2 — self-hosted, DISPLAY ONLY) All-caps marker face. Use for wordmark + big headings only; it has no lowercase and is unreadable as body text. ============================================================ */ @font-face{ font-family:'Hello Charm 2'; src:url('/assets/fonts/HelloCharm2.woff2') format('woff2'), url('/assets/fonts/HelloCharm2.otf') format('opentype'); font-weight:normal; font-display:swap; } /* ============================================================ 2 · DESIGN TOKENS ============================================================ */ :root{ /* --- Surfaces (near-black → raised) --- */ --ink: #050505; /* page background */ --surface: #0d0c11; /* cards, nav glass base */ --surface-2: #141019; /* raised panels, hovers */ --line: #241f2c; /* borders */ --line-soft: #19151f; /* subtle dividers */ /* --- S&G pink (site default) --- */ --pink: #f840c8; --pink-light: #ff7be3; /* gradient top, highlights */ --pink-deep: #b81f8f; /* hover / active borders */ --pink-glow: rgba(248, 64, 200, .55); --pink-tint: rgba(248, 64, 200, .12); /* --- Lovense pink (LOVENSE PAGES ONLY — do not use in S&G chrome) --- Scope it on the Lovense project's and remap there, e.g. .lovense{ --accent:var(--lovense-pink); ... } */ --lovense-pink: #ff2d89; /* --- Semantic accent (COMPONENTS READ THESE, not --pink directly) --- The whole site re-skins by overriding these five on a theme. Default is the S&G pink; see the theme variants just below :root. */ --accent: var(--pink); --accent-light: var(--pink-light); --accent-deep: var(--pink-deep); --accent-glow: var(--pink-glow); --accent-tint: var(--pink-tint); /* --- Accent --- */ --gold: #ffb454; /* "Bestseller" badge */ --gold-tint: rgba(255, 180, 84, .12); /* --- Text --- */ --text: #f6f3f8; --muted: #9a94a4; --dim: #645e70; /* --- Shape & depth --- */ --radius: 14px; --radius-sm: 10px; --pill: 999px; --maxw: 1180px; --shadow: 0 18px 44px rgba(0,0,0,.5); --glow-sm: 0 0 14px var(--accent-glow); /* --- Type --- */ --font-brand: 'Hello Charm 2', 'Space Grotesk', system-ui, sans-serif; /* DISPLAY ONLY — all-caps */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* headings */ --font-body: 'Inter', system-ui, sans-serif; /* body + UI */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* dev / API pages */ } /* ============================================================ THEME VARIANTS — override the accent, the whole site follows. Dark-first brand, so no light mode. The switcher in the header sets html[data-theme]; the default (no attribute, or "default") is the S&G pink defined in :root above. Keep this list in sync with available_themes() in helpers.php. ============================================================ */ html[data-theme="halloween"]{ --accent:#ff7a18; --accent-light:#ffb454; --accent-deep:#c2560a; --accent-glow:rgba(255,122,24,.55); --accent-tint:rgba(255,122,24,.12); } html[data-theme="xmas"]{ --accent:#ff3b5c; --accent-light:#ff8aa0; --accent-deep:#b81f3a; --accent-glow:rgba(255,59,92,.55); --accent-tint:rgba(255,59,92,.12); } /* Pride — vivid magenta accent + a rainbow wordmark treatment (see base.css) */ html[data-theme="pride"]{ --accent:#ff5ca2; --accent-light:#ffa3c8; --accent-deep:#d62f7a; --accent-glow:rgba(255,92,162,.55); --accent-tint:rgba(255,92,162,.12); } /* ============================================================ DAY / NIGHT MODE — an axis independent of the accent theme. Dark is the default (the tokens in :root above). Light mode (html[data-mode="light"]) re-skins the SURFACE + TEXT tokens only, so every accent theme keeps working. The public header has a toggle; admin pages never set data-mode, so they stay dark. ============================================================ */ html[data-mode="light"]{ --ink: #faf7fc; /* page background */ --surface: #ffffff; /* cards, panels */ --surface-2: #f2edf6; /* raised / hovers */ --line: #e4dded; /* borders */ --line-soft: #efeaf4; /* subtle dividers */ --text: #1b1422; --muted: #6c6478; --dim: #9a92a6; --shadow: 0 18px 44px rgba(90,40,100,.14); }