qihuo/static/css/tech.css

/* 科技感增强层 — 与 base.html 变量配合 */

.tech-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.tech-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(var(--bg-grid) 1px,transparent 1px),
        linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 20%,transparent 75%);
}
.tech-glow{
    position:absolute;width:70vmax;height:70vmax;
    top:-25%;left:50%;transform:translateX(-50%);
    background:radial-gradient(circle,var(--ambient-glow) 0%,transparent 65%);
    animation:tech-pulse 8s ease-in-out infinite;
}
.tech-glow-2{
    position:absolute;width:50vmax;height:50vmax;
    bottom:-20%;right:-10%;
    background:radial-gradient(circle,var(--ambient-glow-2) 0%,transparent 70%);
    animation:tech-pulse 10s ease-in-out infinite reverse;
}
.tech-scanline{
    position:absolute;inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        var(--scanline) 2px,
        var(--scanline) 3px
    );
    opacity:.35;
    animation:tech-scan 12s linear infinite;
}
@keyframes tech-pulse{
    0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}
    50%{opacity:.85;transform:translateX(-50%) scale(1.05)}
}
@keyframes tech-scan{
    0%{transform:translateY(0)}
    100%{transform:translateY(32px)}
}
@keyframes tech-shine{
    0%,100%{opacity:.45}
    50%{opacity:.9}
}

@media (prefers-reduced-motion: reduce){
    .tech-glow,.tech-glow-2,.tech-scanline,.card::after,.site-header::after{animation:none}
}

.page-wrap{position:relative;z-index:1}

.site-header{
    border-bottom:1px solid var(--border-header);
    background:var(--header-bg);
    backdrop-filter:blur(12px);
}
.site-header::after{
    content:"";display:block;height:1px;margin-top:-1px;
    background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);
    opacity:.7;animation:tech-shine 4s ease-in-out infinite;
}
.site-title{
    letter-spacing:.04em;
    background:linear-gradient(135deg,var(--text-title) 0%,var(--accent) 45%,var(--accent-2) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 24px var(--title-glow));
}
.site-title-sub{
    display:block;font-size:.72rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;
    color:var(--text-muted);margin-top:.35rem;
    -webkit-text-fill-color:var(--text-muted);
}

.site-nav a{
    border-radius:999px;
    letter-spacing:.02em;
    position:relative;overflow:hidden;
    transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
}
.site-nav a::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent);
    opacity:0;transition:opacity .25s;
}
.site-nav a:hover::before{opacity:1}
.site-nav a:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 20px var(--nav-hover-glow);
}
.site-nav a.active{
    background:linear-gradient(135deg,var(--nav-active),var(--accent-2));
    border-color:transparent;
    box-shadow:0 0 20px var(--nav-active-glow),inset 0 1px 0 rgba(255,255,255,.15);
}

.theme-switch-btn:hover{
    color:var(--text-primary);
}
.theme-switch-btn.active{
    box-shadow:0 0 12px var(--btn-glow);
}

.card{
    border-radius:14px;
    transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{
    transform:translateY(-2px);
    border-color:var(--card-border-hover);
    box-shadow:var(--shadow-card-hover);
}
.card::after{
    animation:tech-shine 5s ease-in-out infinite;
}
.card h2{letter-spacing:.03em}
.card h2:before{
    box-shadow:0 0 12px var(--accent),0 0 4px var(--accent-2);
}

input:focus,select:focus,textarea:focus{
    box-shadow:0 0 0 3px var(--focus-ring),0 0 16px var(--focus-glow);
}
button.btn-primary{
    font-weight:600;letter-spacing:.04em;
    box-shadow:0 4px 20px var(--btn-glow);
    transition:transform .15s,box-shadow .2s,opacity .2s;
}
button.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 28px var(--btn-glow-strong);
    opacity:1;
}

.list-item{
    transition:border-color .2s,box-shadow .2s,transform .2s;
}
.list-item:hover{
    border-color:var(--card-border-hover);
    box-shadow:0 4px 16px var(--card-glow);
}
table tbody tr{transition:background .15s}
table tbody tr:hover{background:var(--row-hover)}

.stat-item{
    backdrop-filter:blur(8px);
    transition:transform .2s,box-shadow .2s;
}
.stat-item:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px var(--card-glow);
}
.stat-item .value{
    font-variant-numeric:tabular-nums;
    letter-spacing:.02em;
}

.pos-card{
    position:relative;overflow:hidden;
    transition:border-color .2s,box-shadow .2s;
}
.pos-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    opacity:.5;
}
.pos-card:hover{
    border-color:var(--card-border-hover);
    box-shadow:0 6px 24px var(--card-glow);
}

.badge{letter-spacing:.02em;border:1px solid transparent}
.badge.dir{border-color:rgba(76,194,255,.25)}
.badge.profit{border-color:rgba(76,217,127,.3)}
.badge.loss{border-color:rgba(255,102,102,.3)}

.modal-box{
    border:1px solid var(--card-border-hover);
    box-shadow:var(--shadow-card-hover),0 0 60px var(--card-glow);
}

.flash{
    box-shadow:0 0 24px var(--focus-glow);
    letter-spacing:.02em;
}

.profile-spec{
    border:1px solid var(--card-border-hover);
    box-shadow:inset 0 0 40px var(--card-glow);
}

.key-live .live-price-line,.live-price{
    text-shadow:0 0 12px var(--focus-glow);
}

.preset-tabs a.active{
    box-shadow:0 0 12px var(--focus-glow);
}