diff --git a/demo/index.html b/demo/index.html index 50f4c60..e43ff4a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,27 +10,27 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { - --gold: #d4af37; - --gold-lt: #ffdf8a; - --gold-dk: #a88520; - --bg: #050608; - --bg-nav: #000000; - --bg-card: #111217; - --bg-section:#181924; - --border: #222; - --border-lt: #2a2b3a; - --text: #f8f9fa; - --text-muted:#9ca0b8; - --text-dim: #d1d3e0; - --green: #28a745; - --green-bg: #d4edda; - --yellow: #856404; - --yellow-bg: #fff3cd; - --red: #d9534f; - --red-bg: #f8d7da; - --red-dk: #721c24; - --red-dk-bg: #f5c6cb; - --sep: #721c24; + --gold: #d4af37; + --gold-lt: #ffdf8a; + --gold-dk: #a88520; + --bg: #050608; + --bg-nav: #000000; + --bg-card: #111217; + --bg-section: #181924; + --border: #222; + --border-lt: #2a2b3a; + --text: #f8f9fa; + --text-muted: #9ca0b8; + --text-dim: #d1d3e0; + --green: #28a745; + --green-bg: #d4edda; + --yellow: #856404; + --yellow-bg: #fff3cd; + --red: #d9534f; + --red-bg: #f8d7da; + --red-dk: #721c24; + --red-dk-bg: #f5c6cb; + --sep: #721c24; } html { scroll-behavior: smooth; } @@ -407,8 +407,94 @@ .feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; } /* ── FOOTER ── */ - footer { border-top: 1px solid var(--border); padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: 'DM Mono', monospace; } - .footer-brand { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 700; color: var(--text-dim); } + footer { + border-top: 1px solid var(--border); + padding: 20px 40px; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 12px; + font-size: 11px; + color: var(--text-muted); + font-family: 'DM Mono', monospace; + background: var(--bg-nav); + } + .footer-left { + display: flex; + align-items: center; + gap: 18px; + } + .footer-brand { + font-family: 'Syne', sans-serif; + font-size: 13px; + font-weight: 700; + color: var(--text-dim); + } + .footer-copy { + color: var(--text-muted); + font-size: 11px; + } + .footer-gitea { + display: flex; + align-items: center; + gap: 6px; + color: var(--text-muted); + text-decoration: none; + padding: 4px 10px; + border: 1px solid var(--border-lt); + border-radius: 5px; + transition: border-color 0.2s, color 0.2s; + font-size: 11px; + } + .footer-gitea:hover { + border-color: var(--gold-dk); + color: var(--gold-lt); + } + .footer-gitea svg { + width: 14px; + height: 14px; + fill: currentColor; + flex-shrink: 0; + } + .footer-right { + display: flex; + align-items: center; + gap: 18px; + } + .footer-ticker { + display: flex; + align-items: center; + gap: 8px; + background: rgba(212,175,55,0.06); + border: 1px solid rgba(212,175,55,0.2); + border-radius: 5px; + padding: 4px 12px; + } + .footer-ticker-label { + font-size: 10px; + color: var(--text-muted); + letter-spacing: 0.5px; + text-transform: uppercase; + } + .footer-ticker-time { + font-family: 'DM Mono', monospace; + font-size: 12px; + color: var(--gold); + font-weight: 500; + letter-spacing: 1px; + } + .footer-ticker-dot { + width: 5px; height: 5px; border-radius: 50%; + background: var(--gold); + animation: pulse 2s infinite; + flex-shrink: 0; + } + .footer-divider { + width: 1px; + height: 16px; + background: var(--border-lt); + } /* ── ANIMATIONS ── */ .fade-in { opacity: 0; transform: translateY(16px); animation: fadeUp 0.5s ease forwards; } @@ -429,6 +515,8 @@ .hero h1 { font-size: 26px; } nav { padding: 0 16px; } .main { padding: 0 12px 60px; } + footer { padding: 16px 20px; flex-direction: column; align-items: flex-start; } + .footer-right { flex-wrap: wrap; } } @@ -531,7 +619,7 @@