/* ============================================================================ * blarg-ui.css — the ONE shared Blarg design system (Sean 2026-06-15 overhaul). * Source of truth: blarg-studio/blarghub.net (the member Hub) + Matrix Alp 3.4. * Include this on EVERY blarg + enmity domain so all Blarg UI is retained * everywhere. Pair with blarg-chrome.js to inject the standard nav + footer. * * Light is the Blarg default. `.blarg-dark` on flips to the Enmity dark * theme — the toggle paid users get inside their enmity.pro session. The toggle * themes the CHROME; a game canvas stays dark on its own. * ==========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@8..96,400;8..96,700;8..96,900&family=Crimson+Pro:ital,wght@0,400;0,600&family=Oswald:wght@400;600&display=swap'); :root { --bg: #FFFFFF; --bg2: #FBFAFD; --text: #0A0A0A; --muted: #6A6A7E; --rule: #E5E0F0; --purple: #4C1D95; --purple-soft: #7E5BD0; --turquoise: #14B8A6; --pink: #E66BB7; --nav-bg: rgba(255,255,255,0.95); --serif: 'Crimson Pro', Georgia, serif; --display: 'Bodoni Moda', serif; --label: 'Oswald', sans-serif; } /* The Enmity dark theme (Matrix 3.4 / Trax) — applied via */ html.blarg-dark { --bg: #0B0B0F; --bg2: #11111c; --text: #E8E8F0; --muted: #9a9ab0; --rule: #23233a; --purple: #b79be8; --purple-soft: #8b6fd0; --turquoise: #5fe3c8; --pink: #ff7fb5; --nav-bg: rgba(11,11,15,0.94); } /* ── Standard Blarg nav (injected by blarg-chrome.js) ───────────────────── */ .blarg-nav { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 2.5rem; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--nav-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 60; font-family: var(--serif); } .blarg-nav .brand { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--text); text-decoration: none; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.55rem; } .blarg-nav .brand span { color: var(--purple); } .blarg-nav .brand img, .blarg-nav .brand .brand-logo { height: 26px; width: auto; display: block; } .blarg-nav .brand .suite-tag { font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--purple); text-transform: uppercase; align-self: center; } /* Wordmark swaps with the theme: light = multicolor, dark = all white (Sean's monochrome rule). */ .blarg-nav .brand .logo-dark { display: none; } html.blarg-dark .blarg-nav .brand .logo-light { display: none; } html.blarg-dark .blarg-nav .brand .logo-dark { display: block; } .blarg-nav .nav-links { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; } .blarg-nav .nav-links a { font-family: var(--label); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.16em; color: var(--muted); text-decoration: none; transition: color 0.2s; } .blarg-nav .nav-links a:hover, .blarg-nav .nav-links a.active { color: var(--purple); } .blarg-nav .nav-links a.cta { border: 1.5px solid var(--rule); padding: 0.45rem 1rem; border-radius: 6px; } .blarg-nav .nav-links a.cta:hover { border-color: var(--purple); color: var(--purple); } .blarg-nav .nav-links a.cta.solid { background: var(--purple); color: #fff; border-color: var(--purple); } .blarg-nav .nav-links a.cta.solid:hover { background: var(--purple-soft); border-color: var(--purple-soft); color: #fff; } .blarg-nav .theme-toggle { font-family: var(--label); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 0.4rem 0.7rem; cursor: pointer; } .blarg-nav .theme-toggle:hover { border-color: var(--turquoise); color: var(--turquoise); } /* ── Standard Blarg footer (injected by blarg-chrome.js) — identical on every domain ─ */ .blarg-footer { border-top: 1px solid var(--rule); background: var(--bg2); font-family: var(--label); color: var(--muted); margin-top: 3rem; } .blarg-footer .ft-inner { max-width: 1120px; margin: 0 auto; padding: 2.2rem 2rem 1.4rem; display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; align-items: center; justify-content: center; } .blarg-footer a { color: var(--muted); text-decoration: none; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.16em; transition: color 0.2s; } .blarg-footer a:hover { color: var(--purple); } .blarg-footer .ft-mark { font-family: var(--display); font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0.02em; font-size: 0.95rem; } .blarg-footer .ft-mark span { color: var(--purple); } .blarg-footer .ft-legal { text-align: center; padding: 0 2rem 1.8rem; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0.85; } .blarg-footer .ft-handles { display: flex; gap: 1rem; } /* ── Empress Skunkwork patron loading splash (Sean 2026-06-15) ───────────── * Paid patrons (+ Sean) get the badge pulsating 1x→2x→1x on a white (light) or * black (dark) screen while a page loads. Free users never see the badge. */ .blarg-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #FFFFFF; transition: opacity 0.55s ease; } html.blarg-dark .blarg-loader { background: #000000; } .blarg-loader.hide { opacity: 0; pointer-events: none; } .blarg-loader .esk { width: 132px; height: auto; transform-origin: center center; animation: eskpulse 1.6s ease-in-out infinite; } @keyframes eskpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(2); } } @media (prefers-reduced-motion: reduce) { .blarg-loader .esk { animation: none; } } @media (max-width: 620px) { .blarg-nav { padding: 0.7rem 1.1rem; } .blarg-nav .nav-links { gap: 0.9rem; } .blarg-footer .ft-inner { gap: 0.9rem 1.4rem; } }