| :root{ |
| --bg:#f5f6f8; --card:#fff; --ink:#1c2228; --muted:#8a929c; |
| --line:#e7eaee; --accent:#ff7849; --accent-ink:#d6451a; |
| } |
| *{box-sizing:border-box} |
| html,body{margin:0;padding:0} |
| body{ |
| background:var(--bg); |
| color:var(--ink); |
| font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; |
| -webkit-font-smoothing:antialiased; |
| display:flex; min-height:100vh; align-items:center; justify-content:center; |
| padding:32px 20px; |
| } |
| .wrap{width:100%; max-width:760px} |
| .card{ |
| background:var(--card); border:1px solid var(--line); border-radius:18px; |
| padding:28px 30px 30px; box-shadow:0 1px 2px rgba(28,34,40,.04),0 12px 32px rgba(28,34,40,.06); |
| } |
| .banner{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line)} |
| h1{font-size:22px; margin:22px 0 4px; letter-spacing:-.2px} |
| .tag{color:var(--muted); margin:0 0 18px; font-size:15px; line-height:1.55} |
| .tag b{color:var(--ink); font-weight:600} |
| .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px} |
| .btn{ |
| display:inline-flex; align-items:center; gap:7px; |
| padding:10px 16px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600; |
| border:1px solid var(--line); color:var(--ink); background:#fff; transition:.15s; |
| } |
| .btn:hover{border-color:#d7dbe0; transform:translateY(-1px)} |
| .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff} |
| .btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink)} |
| .foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px} |
| .foot a{color:var(--accent-ink); text-decoration:none} |
|
|
