| 1 | /* xhs-post — 小红书 3:4 九宫格 */ |
| 2 | .tpl-xhs-post{ |
| 3 | --bg:#fef7f3;--bg-soft:#fff1ea;--surface:#ffffff;--surface-2:#fff5ef; |
| 4 | --border:rgba(90,40,30,.12);--border-strong:rgba(90,40,30,.24); |
| 5 | --text-1:#3a1f18;--text-2:#6f4a3e;--text-3:#a68676; |
| 6 | --accent:#ff6b8b;--accent-2:#ffa94d;--accent-3:#ffd166; |
| 7 | --grad:linear-gradient(135deg,#ffd3e0,#ffe5c7 50%,#d6f0ff); |
| 8 | --good:#7bc67b;--warn:#ffb547;--bad:#ff6b6b; |
| 9 | --radius:24px;--radius-lg:32px; |
| 10 | --shadow:0 14px 36px rgba(90,40,30,.08); |
| 11 | font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif; |
| 12 | } |
| 13 | .tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh} |
| 14 | .tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent} |
| 15 | .tpl-xhs-post .slide{ |
| 16 | position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4; |
| 17 | padding:70px 64px;border-radius:28px;overflow:hidden; |
| 18 | background:var(--bg); |
| 19 | } |
| 20 | .tpl-xhs-post .slide::before{content:"";position:absolute;inset:0;background: |
| 21 | radial-gradient(45% 30% at 80% 10%,rgba(255,209,102,.35),transparent 70%), |
| 22 | radial-gradient(50% 35% at 10% 95%,rgba(255,107,139,.22),transparent 70%), |
| 23 | radial-gradient(40% 30% at 90% 85%,rgba(122,200,255,.18),transparent 70%); |
| 24 | pointer-events:none;z-index:0} |
| 25 | .tpl-xhs-post .slide > *{position:relative;z-index:1} |
| 26 | .tpl-xhs-post .h1{font-size:72px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--text-1)} |
| 27 | .tpl-xhs-post .h2{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--text-1)} |
| 28 | .tpl-xhs-post .h3{font-size:36px;font-weight:800;color:var(--text-1)} |
| 29 | .tpl-xhs-post .page-dot{position:absolute;top:40px;right:48px;background:var(--text-1);color:#fff;border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2} |
| 30 | .tpl-xhs-post .sticker{position:absolute;padding:10px 18px;background:#fff;border:2.5px dashed var(--text-1);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--text-1)} |
| 31 | .tpl-xhs-post .sticker.pink{background:#ffd3e0} |
| 32 | .tpl-xhs-post .sticker.yellow{background:#ffe788} |
| 33 | .tpl-xhs-post .sticker.blue{background:#cfeaff} |
| 34 | .tpl-xhs-post .sticker.green{background:#d4f2c8} |
| 35 | .tpl-xhs-post .hand-box{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:24px 28px;box-shadow:5px 5px 0 var(--text-1)} |
| 36 | .tpl-xhs-post .lede{color:var(--text-2);font-size:26px;line-height:1.55} |
| 37 | .tpl-xhs-post .big-emoji{font-size:180px;line-height:1;text-align:center} |
| 38 | .tpl-xhs-post .num-circle{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:36px;border:3px solid var(--text-1);box-shadow:4px 4px 0 var(--text-1)} |
| 39 | .tpl-xhs-post .step-card{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:26px 28px;box-shadow:5px 5px 0 var(--text-1);margin-bottom:24px} |
| 40 | .tpl-xhs-post .step-card h4{font-size:28px;font-weight:800;margin:0 0 6px} |
| 41 | .tpl-xhs-post .step-card p{font-size:18px;color:var(--text-2);margin:0} |
| 42 | .tpl-xhs-post .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} |
| 43 | .tpl-xhs-post .ht{background:#fff;color:var(--accent);border:2px solid var(--text-1);padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px} |
| 44 | .tpl-xhs-post .cover-title{background:linear-gradient(180deg,transparent 60%,var(--accent-3) 60%,var(--accent-3) 92%,transparent 92%);padding:0 10px} |
| 45 | .tpl-xhs-post .heart{color:var(--accent);font-size:28px} |
| 46 | .tpl-xhs-post .bottom-bar{position:absolute;bottom:40px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-3);font-family:'JetBrains Mono',monospace;z-index:2} |
| 47 | .tpl-xhs-post .avatar{width:54px;height:54px;border-radius:50%;background:var(--grad);border:2.5px solid var(--text-1);box-shadow:3px 3px 0 var(--text-1);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--text-1)} |
| 48 |