Merge branch 'dev_qing' of https://git.cancerai.top/qing/micro_servers into dev_qing

static/public/css/index.css

@@ -4,31 +4,177 @@ body {
     align-items: normal;
 }
 
-/* ===== 头部 ===== */
+@media (prefers-reduced-motion: no-preference) {
+    html { scroll-behavior: smooth; }
+}
+
+/* ===== 按钮 ===== */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.55rem 1.3rem;
+    font-size: 0.88rem;
+    font-weight: 600;
+    font-family: inherit;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    text-decoration: none;
+    line-height: 1.4;
+    transition: opacity 0.15s, transform 0.1s, background 0.15s, border-color 0.15s;
+}
+.btn:active { transform: scale(0.96); }
+.btn-primary { background: var(--accent); color: #fff; }
+.btn-primary:hover { background: var(--accent-dark); opacity: 1; }
+.btn-ghost { background: var(--accent-soft); color: var(--accent-dark); }
+.btn-ghost:hover { border-color: var(--accent); opacity: 1; }
+.btn-lg { padding: 0.7rem 1.9rem; font-size: 1rem; border-radius: var(--radius-md); }
+
+/* ===== 头部：悬浮毛玻璃导航（镜像 minimap/userpanel 风格） ===== */
 .header {
+    position: sticky;
+    top: 0.75rem;
+    z-index: 100;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
     width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    background: rgba(253, 246, 238, 0.72);
+    border: 1px solid var(--border-light);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: var(--shadow-md);
+    transition: background 0.2s, border-color 0.2s;
 }
+@media (prefers-color-scheme: dark) {
+    .header {
+        background: rgba(30, 23, 18, 0.72);
+        border-color: var(--border);
+    }
+}
+
+.header h1 {
+    font-size: 1.15rem;
+    cursor: pointer;
+    user-select: none;
+    transition: color 0.15s;
+}
+.header h1:hover { color: var(--accent); }
 
 .right-group {
     display: flex;
     align-items: center;
-}
-
-.right-group > img,
-.right-group > b,
-.right-group > button {
-    margin-left: 5px;
-    margin-right: 5px;
+    flex-wrap: wrap;
+    gap: 0.4rem;
 }
 
 #avatar {
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
+    border: 1.5px solid var(--border);
+    object-fit: cover;
 }
 
-/* ===== 网站简介 ===== */
+#name {
+    font-size: 0.88rem;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ===== Hero 首屏 ===== */
+.hero {
+    position: relative;
+    text-align: center;
+    padding: 4rem 1rem 3rem;
+}
+.hero::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%);
+    pointer-events: none;
+}
+.hero > * { position: relative; }
+.hero-title {
+    font-size: clamp(1.8rem, 5vw, 2.6rem);
+    font-weight: 800;
+    line-height: 1.35;
+    letter-spacing: 0.02em;
+    margin-bottom: 0.75rem;
+}
+.accent-text { color: var(--accent); }
+.hero-sub {
+    font-size: 1.05rem;
+    color: var(--fg-secondary);
+}
+.hero-actions {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 1.75rem;
+}
+
+/* ===== 特性卡片 ===== */
+.section-title {
+    text-align: center;
+    margin-top: 3rem;
+}
+.features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+    gap: 0.9rem;
+    width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
+}
+.feature-card {
+    background: var(--card);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-md);
+    padding: 1.4rem 1.25rem;
+    box-shadow: var(--shadow-sm);
+    transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
+}
+.feature-card:hover {
+    transform: translateY(-3px);
+    border-color: var(--border);
+    box-shadow: var(--shadow-md);
+}
+.feature-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    margin-bottom: 0.75rem;
+    border-radius: var(--radius-sm);
+    background: var(--accent-soft);
+    color: var(--accent-dark);
+}
+.feature-icon svg { width: 20px; height: 20px; }
+.feature-card h3 { margin-bottom: 0.35rem; }
+.feature-card p {
+    font-size: 0.86rem;
+    line-height: 1.65;
+    color: var(--fg-secondary);
+}
+
+/* ===== 关于本站 ===== */
+.about {
+    text-align: center;
+    padding-bottom: 2rem;
+}
 .site-intro {
     max-width: 640px;
     margin: 0 auto;
@@ -36,3 +182,42 @@ body {
     line-height: 1.9;
     color: var(--fg-secondary);
 }
+.quick-links {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1.25rem;
+    margin-top: 1.5rem;
+}
+.quick-links a {
+    font-size: 0.85rem;
+    color: var(--muted);
+    text-decoration: none;
+    transition: color 0.15s;
+}
+.quick-links a:hover { color: var(--accent); }
+
+/* ===== 入场动画 ===== */
+@keyframes fade-up {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: no-preference) {
+    .hero > *, .feature-card, .about { animation: fade-up 0.5s ease both; }
+    .hero-sub { animation-delay: 0.08s; }
+    .hero-actions { animation-delay: 0.16s; }
+    .feature-card:nth-child(2) { animation-delay: 0.06s; }
+    .feature-card:nth-child(3) { animation-delay: 0.12s; }
+    .feature-card:nth-child(4) { animation-delay: 0.18s; }
+}
+
+/* ===== 响应式 ===== */
+@media (max-width: 480px) {
+    .header { top: 0.5rem; padding: 0.45rem 0.75rem; }
+    .header h1 { font-size: 1rem; }
+    #name { max-width: 72px; }
+    .hero { padding: 2.5rem 0.5rem 2rem; }
+    .hero-sub { font-size: 0.95rem; }
+    .hero-actions { flex-direction: column; align-items: stretch; }
+    .section-title { margin-top: 2rem; }
+}