iye
d5ed43acbd
- nav: center links (首页/排行榜/我的), right-side AuthMenu + RemainingVotesBadge; image logo with responsive sizing - auth: replace /login route with global LoginModal triggered anywhere; "我的" intercepts unauth users with post-login redirect - home: full-screen Hero, redesigned Top12 (12 pill cards, top-3 glow), scroll-snap mandatory between Hero/Top12/candidates - home: candidates section with sticky filter that gains frosted-glass bg when stuck (matches nav) - filter: simplified tags (全部/舞蹈/声乐/rap/全能型); ArtistCard uniform purple vote button - ranking/me: remove Top12Bar; me header stacks 编辑资料/退出登录 vertically - typography: font-logo set to Orbitron; ✦ glyph in CYBER ✦ STAR preserved - layout: max-w-[1500px] unified across pages - docs: add design-spec.md + design-spec.html with full visual spec (lucide SVG, zero emoji policy) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
271 lines
7.9 KiB
CSS
271 lines
7.9 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
CYBER STAR · 设计令牌（Tailwind v4 @theme）
|
||
将所有 token 暴露为 Tailwind 工具类
|
||
════════════════════════════════════════════════════════════ */
|
||
@theme {
|
||
/* ── 背景层级（偏紫调深色） ── */
|
||
--color-deepest: #08051a;
|
||
--color-deep: #0d0a24;
|
||
--color-base: #13102e;
|
||
--color-surface: #1a1638;
|
||
--color-elevated: #221d4a;
|
||
--color-card: #1e1840;
|
||
|
||
/* ── 主调紫 · Royal Violet ── */
|
||
--color-purple-100: #ede9fe;
|
||
--color-purple-200: #ddd6fe;
|
||
--color-purple-300: #c4b5fd;
|
||
--color-purple-400: #a78bfa;
|
||
--color-purple-500: #8b5cf6;
|
||
--color-purple-600: #7c3aed;
|
||
--color-purple-700: #6d28d9;
|
||
--color-purple-800: #5b21b6;
|
||
|
||
/* ── 辅助蓝青（仅用于点缀光效） ── */
|
||
--color-blue-300: #93b8ff;
|
||
--color-blue-500: #2d7fff;
|
||
--color-cyan-400: #38d9f5;
|
||
|
||
/* ── 强调色 ── */
|
||
--color-magenta: #d946ef;
|
||
--color-pink-400: #f472b6;
|
||
--color-pink-500: #ec4899;
|
||
--color-gold-400: #fcd34d;
|
||
--color-silver: #c4ccd8;
|
||
--color-bronze: #cd7f32;
|
||
|
||
/* ── 字体（变量注入自 next/font） ── */
|
||
--font-logo: var(--font-orbitron), "Audiowide", sans-serif;
|
||
--font-display: var(--font-audiowide), "Audiowide", sans-serif;
|
||
--font-label: var(--font-cinzel), "Cinzel", serif;
|
||
--font-body: var(--font-inter), -apple-system, "Source Han Sans SC",
|
||
"PingFang SC", "Microsoft YaHei", sans-serif;
|
||
|
||
/* ── 自定义动画 ── */
|
||
--animate-pulse-glow: pulse-glow 2.4s ease-in-out infinite;
|
||
--animate-float: float 3s ease-in-out infinite;
|
||
--animate-spin-slow: spin-slow 20s linear infinite;
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
非 Tailwind 化的 CSS 变量（复杂值 / 渐变 / 阴影）
|
||
════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
--grad-hero: radial-gradient(
|
||
ellipse at 70% 40%,
|
||
#2a1f5c 0%,
|
||
#13102e 45%,
|
||
#08051a 100%
|
||
);
|
||
--grad-purple: linear-gradient(
|
||
135deg,
|
||
#6d28d9 0%,
|
||
#8b5cf6 55%,
|
||
#a78bfa 100%
|
||
);
|
||
--grad-purple-deep: linear-gradient(160deg, #5b21b6 0%, #7c3aed 100%);
|
||
--grad-violet-glow: radial-gradient(
|
||
circle,
|
||
rgba(139, 92, 246, 0.4) 0%,
|
||
transparent 65%
|
||
);
|
||
--grad-card: linear-gradient(155deg, #221d4a 0%, #1a1638 100%);
|
||
--grad-shine: linear-gradient(
|
||
105deg,
|
||
transparent 40%,
|
||
rgba(255, 255, 255, 0.06) 50%,
|
||
transparent 60%
|
||
);
|
||
|
||
--shadow-purple: 0 0 24px rgba(139, 92, 246, 0.5),
|
||
0 0 60px rgba(139, 92, 246, 0.18);
|
||
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.65),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||
--shadow-glow: 0 0 40px rgba(196, 181, 253, 0.25);
|
||
|
||
--border-subtle: rgba(255, 255, 255, 0.08);
|
||
--border-default: rgba(255, 255, 255, 0.14);
|
||
--border-purple: rgba(139, 92, 246, 0.55);
|
||
--border-glow: rgba(196, 181, 253, 0.65);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
全局基础样式
|
||
════════════════════════════════════════════════════════════ */
|
||
html {
|
||
background: var(--color-deepest);
|
||
color: #fff;
|
||
font-family: var(--font-body);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
background: var(--color-deepest);
|
||
min-height: 100vh;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ── 氛围装饰层 1 · 紫雾环境光 ── */
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(
|
||
ellipse at 20% 10%,
|
||
rgba(139, 92, 246, 0.12) 0%,
|
||
transparent 40%
|
||
),
|
||
radial-gradient(
|
||
ellipse at 80% 70%,
|
||
rgba(217, 70, 239, 0.08) 0%,
|
||
transparent 45%
|
||
);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* ── 氛围装饰层 2 · 星点粒子背景 ── */
|
||
body::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image:
|
||
radial-gradient(1px 1px at 23% 17%, rgba(255, 255, 255, 0.6), transparent),
|
||
radial-gradient(1px 1px at 67% 41%, rgba(196, 181, 253, 0.5), transparent),
|
||
radial-gradient(1.5px 1.5px at 89% 23%, rgba(255, 255, 255, 0.4), transparent),
|
||
radial-gradient(1px 1px at 12% 78%, rgba(196, 181, 253, 0.4), transparent),
|
||
radial-gradient(1px 1px at 45% 89%, rgba(255, 255, 255, 0.5), transparent),
|
||
radial-gradient(1.5px 1.5px at 78% 11%, rgba(255, 255, 255, 0.3), transparent),
|
||
radial-gradient(1px 1px at 33% 53%, rgba(196, 181, 253, 0.35), transparent),
|
||
radial-gradient(1px 1px at 91% 88%, rgba(255, 255, 255, 0.4), transparent);
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 页面内容须高于装饰层
|
||
* ⚠ 必须放入 @layer base，否则会覆盖 Tailwind .fixed 等工具类，
|
||
* 导致 createPortal 的弹窗失去 position:fixed 被排到页面底部。 */
|
||
@layer base {
|
||
body > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
/* ── 选中文字 ── */
|
||
::selection {
|
||
background: rgba(139, 92, 246, 0.4);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── 自定义滚动条 ── */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
::-webkit-scrollbar-track {
|
||
background: var(--color-deep);
|
||
}
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--color-elevated);
|
||
border-radius: 5px;
|
||
border: 2px solid var(--color-deep);
|
||
}
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-purple-700);
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
动画 keyframes
|
||
════════════════════════════════════════════════════════════ */
|
||
@keyframes pulse-glow {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 12px rgba(139, 92, 246, 0.45);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 32px rgba(139, 92, 246, 0.85),
|
||
0 0 64px rgba(139, 92, 246, 0.35);
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-6px);
|
||
}
|
||
}
|
||
|
||
@keyframes spin-slow {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes fade-in-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes shine-sweep {
|
||
0% {
|
||
transform: translateX(-100%);
|
||
}
|
||
100% {
|
||
transform: translateX(100%);
|
||
}
|
||
}
|
||
|
||
/* ════════════════════════════════════════════════════════════
|
||
工具类（在 Tailwind 之外的、需要特殊渲染的）
|
||
════════════════════════════════════════════════════════════ */
|
||
.glow-text-purple {
|
||
text-shadow:
|
||
0 0 16px rgba(196, 181, 253, 0.55),
|
||
0 0 32px rgba(139, 92, 246, 0.35);
|
||
}
|
||
.glow-text-cyan {
|
||
text-shadow:
|
||
0 0 12px rgba(56, 217, 245, 0.5);
|
||
}
|
||
|
||
.bg-grad-hero {
|
||
background: var(--grad-hero);
|
||
}
|
||
.bg-grad-purple {
|
||
background: var(--grad-purple);
|
||
}
|
||
.bg-grad-card {
|
||
background: var(--grad-card);
|
||
}
|
||
|
||
.shadow-purple-glow {
|
||
box-shadow: var(--shadow-purple);
|
||
}
|
||
.shadow-card {
|
||
box-shadow: var(--shadow-card);
|
||
}
|
||
|
||
.border-purple-glow {
|
||
border-color: var(--border-purple);
|
||
}
|