/* zheenga — cool hero scheme * * Pages opt in to the cool palette by setting [data-scheme="cool"] on the * tag. When set, every dark hero on the page swaps its oxblood/orange * gradient for a deep navy → teal one, keeping the gold accent so brand DNA * (warm orange + editorial gold) is preserved. Cream surfaces below the hero * are unchanged so cards, lists and content sections still feel like home. */ /* ── Hero (Home) ─────────────────────────────────────────────── */ [data-scheme="cool"] .hero { background: radial-gradient(ellipse at 80% 10%, rgba(243, 190, 98, 0.18), transparent 50%), radial-gradient(ellipse at 10% 88%, rgba(15, 108, 109, 0.55), transparent 55%), radial-gradient(ellipse at 50% 0%, rgba(58, 141, 142, 0.22), transparent 60%), linear-gradient(180deg, #06121f 0%, #0d2640 38%, #154057 76%, #d9e2dc 100%); } [data-scheme="cool"] .hero::before { background: radial-gradient(circle, rgba(243, 190, 98, 0.16), transparent 70%); } /* ── Generic page hero (Events / Artists / About) ────────────── */ [data-scheme="cool"] .page-hero { background: radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.16), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(15, 108, 109, 0.42), transparent 55%), linear-gradient(180deg, #06121f 0%, #0d2640 60%, #11405a 100%); } /* ── Artist profile hero ─────────────────────────────────────── */ [data-scheme="cool"] .artist-hero { background: radial-gradient(ellipse at 80% 0%, rgba(243, 190, 98, 0.18), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(15, 108, 109, 0.38), transparent 55%), linear-gradient(180deg, #06121f 0%, #0d2640 100%); } /* ── Auth shell ──────────────────────────────────────────────── */ [data-scheme="cool"] .auth-shell { background: radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.14), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(15, 108, 109, 0.42), transparent 55%), linear-gradient(180deg, #06121f 0%, #0d2640 60%, #11405a 100%); } /* ── Profile hero (dancer + artist studio) ───────────────────── */ [data-scheme="cool"] .profile-hero { background: radial-gradient(ellipse at 85% 0%, rgba(243, 190, 98, 0.16), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(15, 108, 109, 0.42), transparent 55%), linear-gradient(180deg, #06121f 0%, #0d2640 100%); } /* ── Sticky nav — match the cool top of the page ─────────────── */ [data-scheme="cool"] .nav { background: color-mix(in srgb, #06121f 90%, transparent); border-bottom-color: rgba(180, 220, 222, 0.10); } /* ── Spotlight pulse dot in eyebrows — go teal on cool ───────── */ [data-scheme="cool"] .page-hero .eyebrow .spotlight-live-dot, [data-scheme="cool"] .profile-hero .eyebrow .spotlight-live-dot { background: var(--accent-gold); box-shadow: 0 0 0 3px rgba(243, 190, 98, 0.28); } [data-scheme="cool"] .page-hero .eyebrow, [data-scheme="cool"] .profile-hero .eyebrow, [data-scheme="cool"] .hero .eyebrow, [data-scheme="cool"] .artist-hero .eyebrow { /* Slightly cooler tint on the eyebrow text — still gold-ish for warmth */ color: #f0c97a; } /* ── Cinematic theme + cool scheme ───────────────────────────── * * In the deeper "cinematic" theme, drop the cream-fade at the foot of * .hero (it would clash with the dark page below) and lean further into * the night-navy. */ [data-theme="cinematic"][data-scheme="cool"] .hero, [data-theme="cinematic"] [data-scheme="cool"] .hero { background: radial-gradient(ellipse at 70% 30%, rgba(243, 190, 98, 0.16), transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(15, 108, 109, 0.42), transparent 55%), linear-gradient(180deg, #03080f 0%, #061320 60%, #0c2436 100%); } [data-theme="cinematic"][data-scheme="cool"] .nav, [data-theme="cinematic"] [data-scheme="cool"] .nav { background: color-mix(in srgb, #03080f 92%, transparent); } /* ── Auth card (cool tier) ─────────────────────────────────────── * The cream auth card was tuned for the warm hero — on cool navy * it reads as two design systems colliding. Re-skin the whole card * in cool tones so it sits as one composition with the gradient * behind it. The orange Log-in button is intentionally preserved — * it's the only spot of brand heat in the frame and now has no * competition for the eye. */ [data-scheme="cool"] .auth-card { background: linear-gradient(180deg, #112a46 0%, #0c2038 100%); border-color: rgba(180, 220, 222, 0.10); box-shadow: 0 32px 80px rgba(3, 10, 22, 0.55), 0 6px 20px rgba(3, 10, 22, 0.30), 0 1px 0 rgba(255, 245, 232, 0.04) inset; color: #fff5e8; } [data-scheme="cool"] .auth-card .eyebrow { color: var(--accent-gold); } [data-scheme="cool"] .auth-title { color: #fff5e8; } [data-scheme="cool"] .auth-title em { color: var(--accent-gold); } [data-scheme="cool"] .auth-lede { color: rgba(220, 232, 240, 0.68); } /* Tabs */ [data-scheme="cool"] .auth-tabs { background: rgba(3, 10, 22, 0.45); border-color: rgba(180, 220, 222, 0.08); } [data-scheme="cool"] .auth-tab { color: rgba(220, 232, 240, 0.55); } [data-scheme="cool"] .auth-tab.active { background: rgba(255, 245, 232, 0.08); color: #fff5e8; box-shadow: 0 1px 0 rgba(255, 245, 232, 0.08) inset, 0 1px 3px rgba(0, 0, 0, 0.25); } /* Form fields */ [data-scheme="cool"] .auth-field span { color: rgba(220, 232, 240, 0.55); } [data-scheme="cool"] .auth-field input { background: rgba(3, 10, 22, 0.40); border-color: rgba(180, 220, 222, 0.10); color: #fff5e8; } [data-scheme="cool"] .auth-field input::placeholder { color: rgba(220, 232, 240, 0.32); } [data-scheme="cool"] .auth-field input:focus { border-color: var(--accent-gold); } /* Forgot / switch / divider — swap warm rust for editorial gold */ [data-scheme="cool"] .auth-forgot { color: var(--accent-gold); } [data-scheme="cool"] .auth-switch { color: rgba(220, 232, 240, 0.55); } [data-scheme="cool"] .auth-switch a { color: var(--accent-gold); } [data-scheme="cool"] .auth-divider { color: rgba(220, 232, 240, 0.45); } [data-scheme="cool"] .auth-divider::before, [data-scheme="cool"] .auth-divider::after { background: rgba(180, 220, 222, 0.12); } /* Social buttons — invert from cream-outline to cool-outline */ [data-scheme="cool"] .auth-social .btn-outline { background: rgba(255, 245, 232, 0.04); border-color: rgba(180, 220, 222, 0.14); color: #fff5e8; } [data-scheme="cool"] .auth-social .btn-outline:hover { background: rgba(255, 245, 232, 0.08); border-color: var(--accent-gold); color: #fff; } /* Sign-up role picker tiles */ [data-scheme="cool"] .auth-check { background: rgba(3, 10, 22, 0.40); border-color: rgba(180, 220, 222, 0.10); } [data-scheme="cool"] .auth-check:hover { border-color: var(--accent-gold); } [data-scheme="cool"] .auth-check strong { color: #fff5e8; } [data-scheme="cool"] .auth-check em { color: rgba(220, 232, 240, 0.55); } /* Side teases — soften the cream slightly so the whole composition reads as one cool key. Gold accents stay so brand DNA carries. */ [data-scheme="cool"] .auth-tease { color: rgba(220, 232, 240, 0.82); } [data-scheme="cool"] .auth-tease p .next-city { color: var(--accent-gold); } /* ───────────────────────────────────────────────────────────── * Floating palette switch — one-click toggle between Original * (all warm) and New (warm/cool split). Sits bottom-left so it * doesn't clash with the Tweaks panel (bottom-right). * ───────────────────────────────────────────────────────────── */ .zh-palette-switch { position: fixed; bottom: 18px; left: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px 6px 14px; border: 0; border-radius: 999px; background: rgba(20, 8, 12, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); color: #fff5e8; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 245, 232, 0.06) inset; transition: transform 160ms ease, background 160ms ease; } .zh-palette-switch:hover { transform: translateY(-1px); } .zh-palette-switch:focus-visible { outline: 2px solid var(--accent-gold, #f3be62); outline-offset: 2px; } .zh-palette-switch-label { font-size: 10.5px; opacity: 0.78; letter-spacing: 0.14em; } .zh-palette-pill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; width: 130px; height: 26px; padding: 0 2px; border-radius: 999px; background: linear-gradient(135deg, #2a1018 0%, #5a1b1d 100%); /* original — warm */ font-size: 10.5px; letter-spacing: 0.08em; transition: background 220ms ease; } .zh-palette-pill.is-new { /* new — cool */ background: linear-gradient(135deg, #0d2640 0%, #11405a 100%); } .zh-palette-knob { position: absolute; top: 3px; left: 3px; width: 60px; height: 20px; border-radius: 999px; background: var(--accent, #df6337); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background 220ms ease; } .zh-palette-pill.is-new .zh-palette-knob { transform: translateX(64px); background: var(--accent-gold, #f3be62); } .zh-palette-text-orig, .zh-palette-text-new { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 245, 232, 0.55); transition: color 220ms ease; pointer-events: none; } .zh-palette-pill.is-orig .zh-palette-text-orig { color: #fff5e8; } .zh-palette-pill.is-new .zh-palette-text-new { color: #1a0e10; } @media (max-width: 480px) { .zh-palette-switch { bottom: 12px; left: 12px; padding: 5px 8px 5px 12px; gap: 8px; } .zh-palette-switch-label { display: none; } .zh-palette-pill { width: 116px; height: 24px; } .zh-palette-knob { width: 54px; height: 18px; } .zh-palette-pill.is-new .zh-palette-knob { transform: translateX(56px); } } /* Hide the switch when running inside the iOS phone frame — the user already has the bigger switch on the desktop view. */ body.in-phone-frame .zh-palette-switch { display: none; }