diff --git a/enterprise/guanghu-chat/index.html b/enterprise/guanghu-chat/index.html index fdd2d97..001193a 100644 --- a/enterprise/guanghu-chat/index.html +++ b/enterprise/guanghu-chat/index.html @@ -54,26 +54,78 @@ body{font-family:var(--font);background:var(--bg);color:var(--gray-200);-webkit- .sec-tit{font-size:28px;font-weight:600;color:#fff;letter-spacing:.04em;font-family:var(--serif)} .sec-tit b{font-weight:600;color:var(--accent-light)} -/* Cards */ -.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-800);border-radius:12px;overflow:hidden;max-width:1000px;margin:0 auto} -.card{padding:36px 28px;background:var(--gray-950);transition:background .3s} -.card:hover{background:var(--gray-900)} -.card-num{font-size:28px;font-weight:600;color:var(--accent-light);margin-bottom:16px} -.card-tit{font-size:17px;font-weight:600;color:#fff;margin-bottom:8px} -.card-txt{font-size:14px;color:var(--gray-400);line-height:1.8} +/* Cards · 玻璃态+强hover */ +.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto} +.card{ + padding:40px 28px;border-radius:14px; + background:rgba(10,10,10,0.65); + border:1px solid rgba(255,255,255,0.06); + transition:all .45s cubic-bezier(.25,.1,.25,1); + position:relative;overflow:hidden; + backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); +} +.card::before{ + content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s; + background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.1),transparent 60%); +} +.card::after{ + content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:0;transition:opacity .45s; + background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); +} +.card:hover{ + transform:translateY(-8px); + border-color:rgba(255,255,255,0.15); + box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(37,99,235,0.15),0 0 60px rgba(37,99,235,0.08); +} +.card:hover::before{opacity:1} +.card:hover::after{opacity:1} +.card-num{font-size:28px;font-weight:600;color:var(--accent-light);margin-bottom:16px;position:relative} +.card-tit{font-size:17px;font-weight:600;color:#fff;margin-bottom:8px;position:relative} +.card-txt{font-size:14px;color:var(--gray-400);line-height:1.8;position:relative} -/* Steps */ -.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--gray-800);border-radius:12px;overflow:hidden;max-width:1000px;margin:0 auto} -.step{padding:36px 28px;background:var(--gray-950);text-align:center;transition:background .3s} -.step:hover{background:var(--gray-900)} -.step-num{font-size:32px;font-weight:600;color:var(--accent-light);margin-bottom:12px} -.step-tit{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px} -.step-txt{font-size:14px;color:var(--gray-400);line-height:1.8} +/* Steps · 玻璃态+强hover */ +.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:0 auto} +.step{ + padding:40px 28px;border-radius:14px;text-align:center; + background:rgba(10,10,10,0.65); + border:1px solid rgba(255,255,255,0.06); + transition:all .45s cubic-bezier(.25,.1,.25,1); + position:relative;overflow:hidden; + backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); +} +.step::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .45s; + background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.08),transparent 55%);} +.step::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;opacity:0;transition:opacity .45s; + background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);} +.step:hover{ + transform:translateY(-8px); + border-color:rgba(255,255,255,0.15); + box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(37,99,235,0.1),0 0 40px rgba(37,99,235,0.05); +} +.step:hover::before{opacity:1} +.step:hover::after{opacity:1} +.step-num{font-size:32px;font-weight:600;color:var(--accent-light);margin-bottom:12px;position:relative} +.step-tit{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px;position:relative} +.step-txt{font-size:14px;color:var(--gray-400);line-height:1.8;position:relative} /* Arch */ .arch{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1px} -.alayer{padding:28px 36px;background:var(--gray-950);border:1px solid var(--gray-800);border-radius:12px;transition:border-color .3s} -.alayer:hover{border-color:var(--gray-700)} +.alayer{ + padding:32px 40px;border-radius:14px; + background:rgba(10,10,10,0.65); + border:1px solid rgba(255,255,255,0.06); + transition:all .4s cubic-bezier(.25,.1,.25,1); + position:relative;overflow:hidden; + backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); +} +.alayer::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s; + background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.05),transparent 55%);} +.alayer:hover{ + transform:translateY(-6px); + border-color:rgba(255,255,255,0.15); + box-shadow:0 12px 36px rgba(0,0,0,0.4),0 0 0 1px rgba(37,99,235,0.08); +} +.alayer:hover::before{opacity:1} .alayer.l1{border-left:3px solid var(--accent-light)} .alayer.l2{border-left:3px solid var(--gray-400)} .alayer.l3{border-left:3px solid var(--gray-500)} @@ -84,8 +136,22 @@ body{font-family:var(--font);background:var(--bg);color:var(--gray-200);-webkit- /* Eco */ .eco{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;margin:0 auto} -.eg{padding:24px;background:var(--gray-950);border:1px solid var(--gray-800);border-radius:12px;transition:border-color .2s} -.eg:hover{border-color:var(--gray-700)} +.eg{ + padding:24px;border-radius:14px; + background:rgba(10,10,10,0.65); + border:1px solid rgba(255,255,255,0.06); + transition:all .35s cubic-bezier(.25,.1,.25,1); + position:relative;overflow:hidden; + backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); +} +.eg::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s; + background:radial-gradient(circle at 50% 0%,rgba(37,99,235,0.04),transparent 55%);} +.eg:hover{ + transform:translateY(-4px); + border-color:rgba(255,255,255,0.12); + box-shadow:0 8px 24px rgba(0,0,0,0.3),0 0 0 1px rgba(37,99,235,0.06); +} +.eg:hover::before{opacity:1} .el{font-size:14px;font-weight:600;color:#fff;margin-bottom:14px} .et{display:flex;flex-wrap:wrap;gap:6px} .eti{font-size:12px;padding:4px 10px;border-radius:6px;background:var(--gray-900);color:var(--gray-400);border:1px solid var(--gray-800);transition:all .2s}