/* ════════════════════════════════════════════════════════════════════ brand-themes.css — Gopnik ↔ LiquidLabs theming layer ════════════════════════════════════════════════════════════════════ Loaded LAST in so it can re-point the gn-* design tokens (defined in dashboard_v11.css :root) per active brand. The body carries the active brand class (set in base.html from the server-side brand flag), so the whole app re-skins when an admin flips the switch — no redeploy. Gopnik = the existing cosmic-purple identity (the :root defaults already express it, so we add nothing there). LiquidLabs = the official Liquid___ brand: Mint #01CB9A used sparingly on Pitch #000F0C / Future Forest #10302E, Ghost White text, Montserrat. Dark-first; never OS-driven. ════════════════════════════════════════════════════════════════════ */ /* ── Brand accent variables (both brands) ───────────────────────────────── The straggler sweep routes hard-coded cosmic purples through these vars, so they follow the active brand. Defaults below = Gopnik purple (so the Gopnik view is unchanged); body.brand-liquidlabs overrides them to mint. These are defined on `body` so they resolve on every page, even ones that don't load the dashboard_v11.css :root token block. */ body { --gn-accent: #8b5cf6; /* default so swept usages always resolve, even on pages that don't load :root tokens */ --gn-accent-rgb: 139, 92, 246; /* #8b5cf6 */ --gn-accent-light: #a78bfa; --gn-accent-deep: #7c3aed; --gn-accent-2: #22d3ee; /* cosmic cyan (Gopnik secondary) */ --gn-accent-2-rgb: 34, 211, 238; --gn-accent-3: #f472b6; /* cosmic pink (Gopnik tertiary) */ --gn-accent-3-rgb: 244, 114, 182; /* ── COSMIC NAVY family (canvas + panels) — Gopnik defaults below; the cosmic-navy sweep routes every hard-coded navy background through these so the LiquidLabs override turns the whole app green-black. */ --ll-canvas: #080a2e; /* page canvas navy */ --ll-canvas-2: #152c51; /* radial stop (lighter navy) */ --ll-canvas-deep: #0a1335; /* radial stop (deepest navy) */ --ll-panel: #0e1048; /* solid navy card */ --ll-panel-rgb: 14, 16, 72; /* translucent navy card */ --ll-nav-rgb: 18, 18, 42; /* the frosted top-nav navy */ --ll-teal: #38e0e6; /* nftmarket's own cyan */ } /* ── LiquidLabs: near-monochrome mint on green-black ────────────────────── Mint is THE accent (used sparingly). The secondary/tertiary collapse into the mint family so NO purple/cyan/pink survives anywhere; semantic green/red (up/down) stay as-is. */ body.brand-liquidlabs { --gn-accent-rgb: 1, 203, 154; /* #01CB9A */ --gn-accent-light: #19E0AE; --gn-accent-deep: #00A37C; --gn-accent-2: #19E0AE; /* mint-light (was cyan) */ --gn-accent-2-rgb: 25, 224, 174; --gn-accent-3: #0BA37E; /* deep mint-teal (was pink) */ --gn-accent-3-rgb: 11, 163, 126; --gn-bg: #000F0C; /* Pitch */ --gn-bg-2: #06140F; --gn-panel: #0B2420; /* Future-Forest tint */ --gn-panel-2: #0C241F; --gn-border: rgba(1,203,154,.16); --gn-border-strong:rgba(1,203,154,.42); --gn-text: #EFF0F6; /* Ghost White */ --gn-muted: rgba(239,240,246,.56); --gn-accent: #01CB9A; /* Mint — the brand colour */ /* Refined, restrained mint gradient (no rainbow). */ --gn-grad: linear-gradient(135deg,#01CB9A 0%,#19E0AE 100%); --gn-grad-soft: linear-gradient(135deg,rgba(1,203,154,.14),rgba(1,203,154,.04)); --gn-shadow-lg: 0 30px 60px -22px rgba(1,203,154,.26), 0 0 0 1px rgba(1,203,154,.12); --accent: #01CB9A; /* token-market gradient → refined mint */ --tkm-grad: linear-gradient(135deg,#01CB9A,#19E0AE 60%,#00A37C); /* re-point the cosmic-theme background vars to green-black */ --cosmic-bg: #000F0C; --cosmic-bg-deep: #000F0C; --cosmic-bg-secondary: #0B2420; --cosmic-bg-card: rgba(11,36,32,.70); --cosmic-bg-card-solid:#0B2420; } /* ── LiquidLabs: structural surfaces that bypass the tokens ───────────── */ /* Body/html canvas — beat the cosmic background hardener (#080a2e !important) with an equal/higher-specificity rule + an ambient Future-Forest mesh and a gentle mint glow on pitch (the "ambient lighting in dark environments" the guidelines call for). */ html:not(.light-theme) body.brand-liquidlabs:not(.light-theme):not(.bg-white):not(.bg-light) { background-color: #000F0C !important; background-image: radial-gradient(900px 520px at 14% -8%, rgba(1,203,154,.13), transparent 60%), radial-gradient(760px 460px at 88% -4%, rgba(16,48,46,.92), transparent 58%), radial-gradient(1200px 760px at 50% 116%, rgba(1,203,154,.06), transparent 60%) !important; background-attachment: fixed; } html.brand-liquidlabs, body.brand-liquidlabs { background-color:#000F0C; } .brand-liquidlabs .gn-academy-eyebrow { background-color:#000F0C; } /* Retint the cosmic ambient overlay (.cosmic-bg::before) — it hard-codes a cyan radial; recolour the whole overlay to mint-on-forest for depth. */ .brand-liquidlabs.cosmic-bg::before, .brand-liquidlabs .cosmic-bg::before { background: radial-gradient(ellipse at 20% 18%, rgba(1,203,154,.12) 0%, transparent 55%), radial-gradient(ellipse at 82% 78%, rgba(16,48,46,.55) 0%, transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(1,203,154,.04) 0%, transparent 70%) !important; } /* Near-invisible pitch-glass top nav (melts into the page) + mint hairline. !important to beat the inline base.html nav background (which also uses !important). */ .brand-liquidlabs .glass-nav, .brand-liquidlabs nav.glass-nav, .brand-liquidlabs .glass-nav.navbar { background: linear-gradient(180deg, rgba(0,15,12,.86) 0%, rgba(0,15,12,.62) 100%) !important; border-bottom: 1px solid rgba(1,203,154,.16) !important; box-shadow: 0 10px 30px -20px rgba(1,203,154,.22) !important; } .brand-liquidlabs .glass-nav::after { background: linear-gradient(90deg, transparent 0%, rgba(1,203,154,.5) 50%, transparent 100%) !important; } .brand-liquidlabs .glass-nav .navbar-brand i { color: #01CB9A; filter: drop-shadow(0 0 6px rgba(1,203,154,.6)); } .brand-liquidlabs .glass-nav .nav-link.active, .brand-liquidlabs .glass-nav .nav-link:hover { color:#fff !important; } /* active-tab pill + the small under-item indicator → mint */ .brand-liquidlabs .glass-nav .nav-link.active { background: rgba(1,203,154,.12) !important; border-radius:10px; } .brand-liquidlabs .glass-nav .nav-link::after, .brand-liquidlabs .glass-nav .nav-item .active-indicator, .brand-liquidlabs .gn-nav-dot { background:#01CB9A !important; } /* ── Kill EVERY rainbow gradient-text idiom app-wide → the accent word becomes a single mint tone (no purple/cyan/pink). Covers nftmarket's `.g`, token-market, academy, etc. ── */ .brand-liquidlabs .nftm-title .g, .brand-liquidlabs .g.grad, .brand-liquidlabs .nftm .g, .brand-liquidlabs .tkm .g, .brand-liquidlabs [class~="g"][style*="gradient"] { background: none !important; -webkit-text-fill-color: #01CB9A !important; color: #01CB9A !important; } /* ── Wallet filter chips: semantic-aware. Keep red (Unfunded) + amber (Read-only); recolour blue ("Full") + purple (group) chips to mint. ── */ .brand-liquidlabs .wal-filter, .brand-liquidlabs .gn-filter-chip, .brand-liquidlabs .group-chip, .brand-liquidlabs .gn-group-chip { border-color: rgba(1,203,154,.30) !important; } .brand-liquidlabs .wal-filter.is-active, .brand-liquidlabs .gn-filter-chip.is-active, .brand-liquidlabs .group-chip, .brand-liquidlabs .gn-group-chip { background: rgba(1,203,154,.14) !important; color:#EFF0F6 !important; } /* keep semantic state chips: red 'Unfunded', amber 'Read-only' — leave as-is */ .brand-liquidlabs a { color: inherit; } /* ── Headlines: clean light-on-dark (editorial), NOT rainbow gradients ────── The guidelines lead with white-on-dark and use mint sparingly, so big titles render in Ghost White with a single mint accent (.ll-accent). This neutralises every gradient-text idiom in LiquidLabs mode. */ .brand-liquidlabs .text-cosmic, .brand-liquidlabs .cosmic-gradient-text, .brand-liquidlabs [class*="gradient-text"], .brand-liquidlabs .text-gradient, .brand-liquidlabs .gn-hero-title, .brand-liquidlabs .tkm-title, .brand-liquidlabs .gn-page-title, .brand-liquidlabs .gn-ed-display, .brand-liquidlabs .gopnik-wordmark { background: none !important; -webkit-text-fill-color: #EFF0F6 !important; color: #EFF0F6 !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; } /* the one mint accent word inside a headline */ .brand-liquidlabs .ll-accent { color: #01CB9A !important; -webkit-text-fill-color: #01CB9A !important; } /* Primary actions / pills → mint. Covers Bootstrap + gn-* button variants. */ .brand-liquidlabs .btn-primary, .brand-liquidlabs .gn-btn-primary, .brand-liquidlabs .gn-btn--primary, .brand-liquidlabs .gn-cta, .brand-liquidlabs .btn-cosmic { background: var(--gn-grad) !important; border-color: transparent !important; color: #00130E !important; } .brand-liquidlabs .btn-outline-primary { border-color: rgba(1,203,154,.5) !important; color:#EFF0F6 !important; } .brand-liquidlabs .btn-outline-primary:hover { background: rgba(1,203,154,.12) !important; border-color:#01CB9A !important; } /* Focus rings + selection in mint. */ .brand-liquidlabs ::selection { background: rgba(1,203,154,.30); color:#fff; } .brand-liquidlabs :focus-visible { outline-color:#01CB9A; } /* ════════════════════════════════════════════════════════════════════ Brand lockup (nav / login / footer) — Montserrat Black wordmark + the official #lqMark logomark. Used by base.html's conditional brand block. ════════════════════════════════════════════════════════════════════ */ .ll-lockup{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; } .ll-lockup .ll-mark{ width:32px; height:32px; flex:0 0 auto; color:#01CB9A; } .ll-lockup .ll-text{ display:flex; flex-direction:column; line-height:1; } /* New lockup: LIQUID (Montserrat Black, all-caps) + Labs (Dancing Script, mixed-case), matching the updated brand logos. */ .ll-wordmark{ display:inline-flex; align-items:baseline; gap:.12em; font-family:"Montserrat",system-ui,sans-serif; font-weight:900; letter-spacing:-.01em; line-height:1; } .ll-wordmark .ll-liquid{ color:#FFFFFF; text-transform:uppercase; font-size:1.06rem; } .ll-wordmark .ll-suffix{ color:#01CB9A; text-transform:none; font-family:"Dancing Script","Brush Script MT",cursive; font-weight:700; font-size:1.62em; line-height:.7; margin-left:.04em; transform:translateY(.06em); } .ll-powered{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(239,240,246,.45); font-weight:700; margin-top:3px; } .ll-powered b{ color:rgba(239,240,246,.66); font-weight:800; } /* On a light surface (e.g. light-theme), keep LIQUID readable. */ .light-theme .ll-wordmark .ll-liquid{ color:#00130E; } /* Footer attribution line. */ .brand-liquidlabs .ll-footer-legal{ color:rgba(239,240,246,.5); font-size:.8rem; } .brand-liquidlabs .ll-footer-legal .lq{ color:#01CB9A; font-weight:700; } /* ════════════════════════════════════════════════════════════════════ Refined surfaces — mint hairlines + soft glass, mint glow on the ONE primary CTA only. Quietens the loud gradient bars into thin accents. ════════════════════════════════════════════════════════════════════ */ /* Soften the bright gradient top-bars on cards to a thin, low-opacity mint. */ .brand-liquidlabs .tkm-b::before { height:1px !important; opacity:.45 !important; } /* Primary CTA: solid mint with a soft glow (used sparingly). */ .brand-liquidlabs .gn-btn:not(.gn-btn-ghost):not(.gn-btn-outline) { background: var(--gn-grad) !important; color:#00130E !important; border:0 !important; box-shadow: 0 10px 26px -10px rgba(1,203,154,.55) !important; } /* Secondary / ghost buttons: clean mint hairline, no fill. */ .brand-liquidlabs .gn-btn-ghost, .brand-liquidlabs .gn-btn-outline { background: transparent !important; color:#EFF0F6 !important; border:1px solid rgba(1,203,154,.34) !important; } .brand-liquidlabs .gn-btn-ghost:hover, .brand-liquidlabs .gn-btn-outline:hover { border-color:#01CB9A !important; } /* Eyebrow / live pills → mint on forest. */ .brand-liquidlabs .gn-eyebrow, .brand-liquidlabs .nftm-eyebrow, .brand-liquidlabs .tkm-eyebrow { color:#01CB9A; border-color:rgba(1,203,154,.30); } /* Tame stray non-purple brand blues that bypassed the token sweep (e.g. info chips, the old #0d9dff/#3b82f6 accents) toward mint. */ .brand-liquidlabs { --accent:#01CB9A; --bs-primary:#01CB9A; --bs-link-color:#19E0AE; } /* Keep semantic state colours intact (up=green / down=red / warning=gold) — these are universal finance conventions and read fine on green-black. */ /* ════════════════════════════════════════════════════════════════════════ DECISIVE OVERRIDE — beat per-page wrapper palettes. ------------------------------------------------------------------------ Page wrappers (.tkm, .gn-dash, .db-wrap, .nftm, .mpv2e, .gn-ed-canvas …) RE-DECLARE the colour tokens locally, which shadows a body-level override for everything inside them. Setting the tokens on `.brand-liquidlabs *` with !important forces them on EVERY element, so no wrapper can keep its purple/navy. Custom properties accept !important; the wrapper declarations are not !important, so these win. Colour/gradient tokens only — never layout — so this can't shift spacing or sizing. ════════════════════════════════════════════════════════════════════════ */ body.brand-liquidlabs, body.brand-liquidlabs * { /* shared gn-* accent family → mint */ --gn-accent: #01CB9A !important; --gn-accent-rgb: 1, 203, 154 !important; --gn-accent-light: #19E0AE !important; --gn-accent-deep: #00A37C !important; --gn-accent-2: #19E0AE !important; --gn-accent-2-rgb: 25, 224, 174 !important; --gn-accent-3: #0BA37E !important; --gn-accent-3-rgb: 11, 163, 126 !important; --gn-grad: linear-gradient(135deg,#01CB9A,#19E0AE) !important; --gn-grad-soft: linear-gradient(135deg,rgba(1,203,154,.14),rgba(1,203,154,.04)) !important; --gn-bg: #000F0C !important; --gn-bg-2: #06140F !important; --gn-panel: #0B2420 !important; --gn-panel-2: #0C241F !important; --gn-border: rgba(1,203,154,.16) !important; --gn-border-strong: rgba(1,203,154,.42) !important; /* token-market local palette (.tkm) → mint / green-black */ --tkm-vio: #01CB9A !important; --tkm-cyan: #19E0AE !important; --tkm-pink: #0BA37E !important; --tkm-grad: linear-gradient(135deg,#01CB9A,#19E0AE 60%,#00A37C) !important; --tkm-panel: #0B2420 !important; --tkm-panel2:#0C241F !important; --tkm-line: rgba(1,203,154,.16) !important; --tkm-line2: rgba(1,203,154,.34) !important; --tkm-txt: #EFF0F6 !important; --tkm-dim: rgba(239,240,246,.56) !important; --tkm-faint: rgba(239,240,246,.40) !important; /* cosmic-theme locals → green-black + mint */ --cosmic-accent: #01CB9A !important; --cosmic-teal: #19E0AE !important; --cosmic-border: rgba(1,203,154,.18) !important; --cosmic-bg: #000F0C !important; --cosmic-bg-deep: #000F0C !important; --cosmic-bg-secondary: #0B2420 !important; --cosmic-bg-card: rgba(11,36,32,.70) !important; --cosmic-bg-card-solid:#0B2420 !important; /* generic single-accent vars some components read */ --accent: #01CB9A !important; --bs-primary: #01CB9A !important; --bs-link-color: #19E0AE !important; /* cosmic-navy family → pitch / forest (kills the navy canvas + cards) */ --ll-canvas: #000F0C !important; --ll-canvas-2: #0B2420 !important; --ll-canvas-deep: #000F0C !important; --ll-panel: #0B2420 !important; --ll-panel-rgb: 11, 36, 32 !important; --ll-nav-rgb: 4, 17, 13 !important; /* near-invisible pitch glass nav */ --ll-teal: #19E0AE !important; /* nftmarket cyan → mint-light */ /* nftmarket's own local palette (.nftm) → mint family */ --vio: #01CB9A !important; --cyan: #19E0AE !important; --pink: #0BA37E !important; --mint: #01CB9A !important; --grad: linear-gradient(110deg,#01CB9A,#19E0AE 52%,#00A37C) !important; } /* Page-wrapper canvases → let the pitch body + ambient mesh show through. */ body.brand-liquidlabs .gn-dash, body.brand-liquidlabs .db-wrap, body.brand-liquidlabs .tkm, body.brand-liquidlabs .tkm-wrap, body.brand-liquidlabs .nftm, body.brand-liquidlabs .gn-wrap { background-color: transparent !important; } /* DIRECT canvas override — some shells (.gn-dash, .gn-page, .gn-ed-canvas, .gn-auth) re-declare the FULL palette locally AND paint their own navy `radial-gradient(...) var(--gn-bg)` background. Override the whole `background` shorthand here so the navy can never paint, regardless of how the variable cascade resolves. Pitch + a restrained mint/forest ambient. */ body.brand-liquidlabs .gn-dash, body.brand-liquidlabs .gn-page, body.brand-liquidlabs .gn-ed-canvas, body.brand-liquidlabs .gn-auth, body.brand-liquidlabs .gn-shell, body.brand-liquidlabs .gn-hub { background: radial-gradient(1200px 700px at 80% -10%, rgba(1,203,154,.13), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(16,48,46,.55), transparent 55%), radial-gradient(700px 500px at 50% 110%, rgba(1,203,154,.06), transparent 50%), #000F0C !important; } /* The diamond hex-mesh lines → mint (it reads accent vars, but force it too). */ body.brand-liquidlabs .gn-hex-bg { background-image: linear-gradient(30deg, transparent 49%, rgba(1,203,154,.14) 49%, rgba(1,203,154,.14) 51%, transparent 51%), linear-gradient(-30deg, transparent 49%, rgba(1,203,154,.09) 49%, rgba(1,203,154,.09) 51%, transparent 51%), linear-gradient(90deg, transparent 49%, rgba(1,203,154,.07) 49%, rgba(1,203,154,.07) 51%, transparent 51%) !important; } /* Belt-and-braces: force the most visible gradient controls to mint, in case any used a hard-coded gradient the token sweep didn't reach. */ body.brand-liquidlabs .tkm-swap, body.brand-liquidlabs .tkm-ps.is-active, body.brand-liquidlabs .tkm-pg-n.is-active, body.brand-liquidlabs .tkm-m-tf.is-active, body.brand-liquidlabs .btn-primary, body.brand-liquidlabs .gn-btn:not(.gn-btn-ghost):not(.gn-btn-outline), body.brand-liquidlabs [class*="-swap"]:not(a):not(.gn-btn-ghost) { background-image: linear-gradient(135deg,#01CB9A,#19E0AE) !important; color: #00130E !important; border-color: transparent !important; } /* Tame off-brand wallet/filter chips (blue "Full", gold "Read-only", purple group chips) toward mint while keeping red for "Unfunded". */ body.brand-liquidlabs .wal-filter.is-active, body.brand-liquidlabs .wal-chip.is-active, body.brand-liquidlabs .gn-pill--info, body.brand-liquidlabs .group-chip { background: rgba(1,203,154,.14) !important; border-color: rgba(1,203,154,.40) !important; color: #EFF0F6 !important; }