/* ============================================================
NEBULA 2.0 — theme pack cho GoBuddy
Đặt file tại: css/themes/nebula.css
Kích hoạt: (xem js/theme.js → applyTheme('nebula'))
Kế thừa toàn bộ token NEON 1.0 trong css/vars.css; chỉ THÊM token mới +
primitive mới. KHÔNG hard-code màu — mọi giá trị qua var(--…).
------------------------------------------------------------
Nebula = 6 lớp: (1) atmosphere nền · (2) material chiều sâu ·
(3) icon nét · (4) type biên tập · (5) tonal action · (6) micro.
Màu NEON đã trùng Nebula nên phần lớn là THÊM CẤU TRÚC, không đổi màu.
============================================================ */
/* ---------- 0 · token nudge + token MỚI (chỉ khi theme = nebula) ---------- */
:root[data-theme="nebula"] {
/* nền tối hơn/xanh hơn NEON một chút (tùy chọn — có thể bỏ để giữ nguyên NEON) */
--bg: #0F0C22;
--bg2: #171233;
/* Nền DASHBOARD (Studio/AdminCP) — tối & trung tính hơn app (bớt tím), khớp mockup */
--bg-dash: #0B0918;
--bg-dash-rgb: 11, 9, 24;
--bg-dash-panel: #120E26; /* sidebar dashboard */
--n-nav: #B8B2DA; /* chữ mục menu dashboard (nghỉ) — sáng dịu, dễ đọc */
/* Bảng CHỮ khớp chính xác design Nebula (dịu, tinh tế) — áp toàn app khi theme=nebula.
--ink #F3F0FF (giữ) · sub dịu hơn · hồng donate/live · thang xám mờ nhiều bậc. */
--ink-soft: #C4BDE6; /* chữ phụ (hero sub, meta sáng) — dịu hơn bản neon #D9D4F5 */
--pink-tint: #FF9DBB; /* chữ hồng: nav Donate, nút donate, pill LIVE */
--n-kick: #8F86C4; /* kicker uppercase / nhãn mờ tím */
--n-label: #8A83B8; /* nhãn thống kê, caption overlay */
--n-icon: #E6DBFF; /* màu icon nét trên top-nav (mảnh, sáng dịu) */
/* Thanh kẻ / viền: rgba TRẮNG mờ (glass) thay tím đặc #3A3270/#2E2860 — hết "chỏi", tinh tế,
đồng bộ mọi divider/border toàn app (đúng ngôn ngữ Nebula: viền = ánh sáng mờ trên nền tối). */
--line: rgba(var(--hl-rgb), .1);
--line-soft: rgba(var(--hl-rgb), .07);
/* thang elevation MỚI (material nhiều lớp) — dùng --hl-rgb / --shadow-rgb có sẵn */
--elev-1: inset 0 1px 0 rgba(var(--hl-rgb),.08), 0 2px 4px rgba(var(--shadow-rgb),.22), 0 18px 40px -22px rgba(var(--shadow-rgb),.55);
--elev-2: inset 0 1px 0 rgba(var(--hl-rgb),.10), 0 30px 70px -30px rgba(var(--shadow-rgb),.70);
--sheen: linear-gradient(180deg, rgba(var(--hl-rgb),.055), rgba(var(--hl-rgb),.02));
--hairline: 1px solid rgba(var(--hl-rgb),.10);
}
/* ---------- 1 · ATMOSPHERE ----------
THÊM 1 lần vào layout shell (xem snippet HTML cuối file / README).
Root của shell PHẢI có: position:relative; z-index:0 → orb z-index:-1
nằm trên nền đục nhưng SAU nội dung, không cần đụng z-index nội dung. */
/* Container LUÔN fixed/out-of-flow (mọi theme) → không bao giờ thành grid-item của .app
phá layout ở neon/midnight. Chỉ phần orb + màu bên dưới mới scope theo nebula
(ở theme khác container rỗng, vô hình, vô hại). */
.gl-atmos { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
:root[data-theme="nebula"] .gl-atmos i { position:absolute; border-radius:50%; display:block; }
:root[data-theme="nebula"] .gl-atmos .o1 { top:-220px; left:-140px; width:600px; height:600px; background:radial-gradient(circle, rgba(var(--violet-rgb),.22), transparent 62%); filter:blur(50px); animation:gl-drift-a 27s ease-in-out infinite; }
:root[data-theme="nebula"] .gl-atmos .o2 { top:-160px; right:-160px; width:560px; height:560px; background:radial-gradient(circle, rgba(var(--pink-rgb),.16), transparent 62%); filter:blur(52px); animation:gl-drift-b 31s ease-in-out infinite; }
:root[data-theme="nebula"] .gl-atmos .o3 { bottom:-280px; left:38%; width:620px; height:620px; background:radial-gradient(circle, rgba(var(--cyan-rgb),.12), transparent 64%); filter:blur(58px); animation:gl-drift-c 35s ease-in-out infinite; }
:root[data-theme="nebula"] .gl-atmos .grain {
position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay; background-size:170px 170px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* dashboard tối hơn (Studio/AdminCP) — chỉnh cường độ nhẹ */
:root[data-theme="nebula"] .gl-atmos.is-dashboard .o1 { background:radial-gradient(circle, rgba(var(--violet-rgb),.18), transparent 62%); }
@keyframes gl-drift-a { 0%,100% { transform:translate(0,0); } 50% { transform:translate(44px,32px); } }
@keyframes gl-drift-b { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-50px,24px); } }
@keyframes gl-drift-c { 0%,100% { transform:translate(0,0); } 50% { transform:translate(28px,-30px); } }
/* ---------- 2 · MATERIAL (card chiều sâu) ----------
Thêm class .gl-elev vào card/panel/KPI. Viền sáng cạnh trên + bóng nhiều lớp. */
:root[data-theme="nebula"] .gl-elev {
background: var(--sheen), var(--surface);
border: var(--hairline);
box-shadow: var(--elev-1);
}
:root[data-theme="nebula"] .gl-elev--hero { box-shadow: var(--elev-2); }
/* card có hover nhấc (browse/thumbnail) */
:root[data-theme="nebula"] .gl-elev.is-hover { transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
:root[data-theme="nebula"] .gl-elev.is-hover:hover { transform:translateY(-5px); border-color:rgba(var(--violet-rgb),.4); box-shadow:inset 0 1px 0 rgba(var(--hl-rgb),.12), 0 26px 50px -20px rgba(var(--violet-rgb),.32); }
/* ---------- 3 · ICON NÉT ----------
Thay emoji chrome bằng inline SVG 1-stroke (xem ICONS.md).
⚠️ App là VANILLA → dùng thuộc tính SVG kebab: stroke-width / stroke-linecap.
(Trong mockup .dc.html là camelCase vì đó là React — ĐỪNG bê nguyên.) */
:root[data-theme="nebula"] .gl-ic { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* giữ 🪙💠 tiền tệ + ★ + emoji genre (⚔️🎯🎲…) làm NỘI DUNG — không thay */
/* ---------- 4 · TYPE biên tập ---------- */
:root[data-theme="nebula"] .gl-kicker { font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--violet-tint); }
:root[data-theme="nebula"] .gl-display { letter-spacing:-.03em; font-weight:800; line-height:1.02; }
:root[data-theme="nebula"] .gl-num, :root[data-theme="nebula"] .mono { font-variant-numeric:tabular-nums; }
/* ---------- 5 · TONAL ACTION (phân cấp donate) ----------
Nút donate mặc định TONAL, hover mới tô đặc + quầng. 1 CTA tô đặc/màn hình. */
:root[data-theme="nebula"] .btn-donate {
background:rgba(var(--pink-rgb),.12); border:1px solid rgba(var(--pink-rgb),.42);
color:var(--pink-tint); transition:all .16s ease;
}
:root[data-theme="nebula"] .btn-donate:hover {
background:var(--pink); color:var(--on-accent); border-color:var(--pink);
box-shadow:0 12px 26px -10px rgba(var(--pink-rgb),.8);
}
/* CTA chủ đạo (hero) — điểm tô đặc DUY NHẤT, có quầng thở */
:root[data-theme="nebula"] .btn-cta { background:var(--pink); color:var(--on-accent); animation:gl-glow 3s ease-in-out infinite; }
@keyframes gl-glow { 0%,100% { box-shadow:0 12px 30px -14px rgba(var(--pink-rgb),.55); } 50% { box-shadow:0 14px 46px -10px rgba(var(--pink-rgb),.85); } }
/* ---------- 6 · MICRO global ---------- */
:root[data-theme="nebula"] { caret-color:var(--violet); }
:root[data-theme="nebula"] ::selection { background:rgba(var(--violet-rgb),.42); color:#fff; }
/* Cả selector KHÔNG dấu cách (scrollbar viewport của :root) LẪN có dấu cách (phần tử con)
→ ghi đè gradient sáng của base.css cho cả thanh cuộn trang chính. */
/* Nghỉ = tím TRẦM (tối), hover mới SÁNG lên (đúng mẫu). */
:root[data-theme="nebula"] { scrollbar-color: rgba(var(--violet-rgb),.35) transparent; }
:root[data-theme="nebula"]::-webkit-scrollbar,
:root[data-theme="nebula"] ::-webkit-scrollbar { width:12px; height:12px; }
:root[data-theme="nebula"]::-webkit-scrollbar-track,
:root[data-theme="nebula"] ::-webkit-scrollbar-track { background:transparent; }
:root[data-theme="nebula"]::-webkit-scrollbar-thumb,
:root[data-theme="nebula"] ::-webkit-scrollbar-thumb { background:rgba(var(--violet-rgb),.3); border-radius:100px; border:3px solid var(--bg); background-clip:padding-box; }
:root[data-theme="nebula"]::-webkit-scrollbar-thumb:hover,
:root[data-theme="nebula"] ::-webkit-scrollbar-thumb:hover { background:rgba(var(--violet-rgb),.6); background-clip:padding-box; }
/* vệt sáng quét key-art (thumbnail streamer/player) */
@keyframes gl-shine { 0% { transform:translateX(-130%) skewX(-14deg); } 60%,100% { transform:translateX(240%) skewX(-14deg); } }
:root[data-theme="nebula"] .gl-shine { position:absolute; top:-40%; left:0; width:55%; height:180%; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(var(--hl-rgb),.15), transparent); animation:gl-shine 6s ease-in-out infinite; }
/* ============================================================
REPO WIRING — nối theme Nebula vào codebase GoBuddy hiện tại.
(Handoff cho phép sửa nebula.css để tích hợp; MỌI giá trị qua token.)
Áp cho component DÙNG CHUNG (thẻ/section) nên hiện đồng bộ ở mọi màn —
nhưng chỉ khi data-theme="nebula". Không đụng markup, không đổi chức năng.
============================================================ */
/* Shell tạo stacking-context: orb (.gl-atmos z-index:-1) nằm TRÊN nền #app,
SAU nội dung. .gl-atmos là con fixed → out-of-flow, không phá grid .app. */
:root[data-theme="nebula"] #app { position:relative; z-index:0; }
/* Nền: bỏ 2 vầng neon hard-code ở body — để .gl-atmos làm lớp ambient DUY NHẤT. */
:root[data-theme="nebula"] body { background: var(--bg); }
/* ---- 2 · Material áp cho thẻ dùng chung (Home: player + streamer) ----
Thêm chiều sâu (sheen + bóng nhiều lớp) lúc NGHỈ; GIỮ nguyên hover + viền
rank (VIP vàng / HOT hồng) sẵn có → không set border/hover ở đây. */
:root[data-theme="nebula"] .pcard,
:root[data-theme="nebula"] .scard {
background: var(--sheen), var(--bg2);
box-shadow: var(--elev-1);
}
/* Hero banner Home — chiều sâu cấp hero, giữ gradient nhận diện marketing. */
:root[data-theme="nebula"] .dbanner { box-shadow: var(--elev-2); }
/* ---- 4 · Type biên tập cho tiêu đề section dùng chung ---- */
:root[data-theme="nebula"] .sec-head h3,
:root[data-theme="nebula"] .pl-sec__head h3 { font-weight:800; letter-spacing:-.02em; }
/* ---- 5 · Tonal action: "Donate →" trên thẻ streamer ----
Base app là tonal CYAN; Nebula chuyển sang tonal HỒNG (đúng phân cấp donate),
hover mới tô đặc. Cùng box model → chỉ recolor, an toàn. */
:root[data-theme="nebula"] .scard__go {
color: var(--pink-tint);
background: rgba(var(--pink-rgb), .12);
border-color: rgba(var(--pink-rgb), .42);
}
:root[data-theme="nebula"] .scard:hover .scard__go {
background: var(--pink); color: var(--on-accent); border-color: var(--pink);
}
/* ============================================================
SNIPPET ATMOSPHERE — dán 1 lần vào layout shell (ngay sau thẻ mở của
phần tử gốc trang; phần tử gốc cần position:relative; z-index:0):
Dashboard:
============================================================ */