/* * Hub Rebrand Overrides (surgical — splash + auth pages only) * * Purpose * ------- * Bring Hub's public-facing pages (splash, Login, register) into visual * alignment with Genius Labs by overriding the legacy yellow palette * (--primary: #ffde02 from global-variables.css) with the dark + lime * palette from hub-figma-design-system.css. * * Scope * ----- * Activated only when has the class `theme-figma-rebrand`. Every * other page in Hub keeps the legacy yellow palette unchanged. * * Once the rest of Hub is rebranded, this file becomes redundant — its * vars can be folded back into global-variables.css and this stylesheet * deleted. */ body.theme-figma-rebrand { /* Repoint legacy yellow vars to the Figma green/black palette */ --primary: #90c03c; --primary-hover: #b4d878; --secondary: #90c03c; --hub-electric-yellow: #90c03c; /* legacy alias — repoint, don't rename */ --hub-warm-orange: #b4d878; /* repoint to lighter accent for gradients */ /* Backgrounds: use Figma ink */ --dark-800: #0a0a0b; --hub-black: #0a0a0b; /* Refresh status colors that quietly reused yellow */ --warning: #b4d878; --error: #ff6b6b; /* Page baseline */ background-color: #0a0a0b; color: #f5f5f5; } /* Hero gradients & glows: swap yellow rgba() values to the Figma accent */ body.theme-figma-rebrand { --hub-hero-gradient: radial-gradient(900px circle at 16% 0%, rgba(144, 192, 60, 0.18), transparent 58%), radial-gradient(800px circle at 84% 18%, rgba(180, 216, 120, 0.10), transparent 56%); --hub-cta-gradient: linear-gradient(135deg, rgba(144, 192, 60, 0.95) 0%, rgba(180, 216, 120, 0.95) 100%); } /* ------------------------------------------------------------------ */ /* Splash inline-style rescues */ /* The splash template hardcodes rgba(255, 222, 2, X) and box-shadows */ /* that bypass the var() layer. Reach into those with targeted rules. */ /* ------------------------------------------------------------------ */ body.theme-figma-rebrand .logo-container img { filter: drop-shadow(0 4px 8px rgba(144, 192, 60, 0.35)); } body.theme-figma-rebrand .logo-container:hover img { filter: drop-shadow(0 6px 12px rgba(144, 192, 60, 0.55)); } body.theme-figma-rebrand .btn:hover { box-shadow: 0 10px 20px rgba(144, 192, 60, 0.30); } body.theme-figma-rebrand .feature-card:hover { box-shadow: 0 15px 30px rgba(144, 192, 60, 0.22); } body.theme-figma-rebrand .feature-card::before { background: linear-gradient( 90deg, transparent, rgba(144, 192, 60, 0.10), transparent ); } /* ------------------------------------------------------------------ */ /* Auth pages: input focus rings, primary CTA button glow */ /* ------------------------------------------------------------------ */ body.theme-figma-rebrand input:focus, body.theme-figma-rebrand textarea:focus, body.theme-figma-rebrand select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(144, 192, 60, 0.22); outline: none; } body.theme-figma-rebrand .btn-primary { background: var(--primary); color: #0a0a0b; border: 1px solid rgba(144, 192, 60, 0.55); } body.theme-figma-rebrand .btn-primary:hover { background: var(--primary-hover); } /* ------------------------------------------------------------------ */ /* Welcome-back / hero badges that used yellow gold pill backgrounds */ /* ------------------------------------------------------------------ */ body.theme-figma-rebrand .badge, body.theme-figma-rebrand .hero-badge, body.theme-figma-rebrand .welcome-badge { background: rgba(144, 192, 60, 0.12); border-color: rgba(144, 192, 60, 0.30); color: var(--primary); }