| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>鎏金象牙 · 高级质感</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { width: 1600px; height: 900px; overflow: hidden; } |
| 9 | body { font-family: "Songti SC", "STSong", "Times New Roman", serif; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: #E8DCC8; |
| 13 | } |
| 14 | /* gold foil texture */ |
| 15 | .stage::before { |
| 16 | content: ""; position: absolute; inset: 0; |
| 17 | background-image: |
| 18 | repeating-linear-gradient(115deg, transparent 0 3px, rgba(201,168,118,0.04) 3px 4px); |
| 19 | pointer-events: none; |
| 20 | } |
| 21 | |
| 22 | .frame { |
| 23 | position: absolute; inset: 40px; |
| 24 | border: 1px solid #C9A876; |
| 25 | } |
| 26 | .frame::before { |
| 27 | content: ""; position: absolute; inset: 8px; |
| 28 | border: 1px solid rgba(201,168,118,0.4); |
| 29 | } |
| 30 | |
| 31 | .top-bar { |
| 32 | position: absolute; top: 80px; left: 0; right: 0; |
| 33 | display: flex; justify-content: space-between; align-items: center; |
| 34 | padding: 0 100px; z-index: 5; |
| 35 | } |
| 36 | .brand { |
| 37 | color: #4A2E15; |
| 38 | } |
| 39 | .brand .mark { |
| 40 | font-size: 12px; letter-spacing: 6px; color: #C9A876; font-weight: 600; |
| 41 | margin-bottom: 8px; font-family: "PingFang SC", sans-serif; |
| 42 | } |
| 43 | .brand .name { |
| 44 | font-size: 28px; font-weight: 700; letter-spacing: 8px; |
| 45 | font-family: "Songti SC", serif; |
| 46 | } |
| 47 | .nav { |
| 48 | display: flex; gap: 32px; font-size: 12px; letter-spacing: 3px; |
| 49 | color: #7A4E1D; font-family: "PingFang SC", sans-serif; |
| 50 | } |
| 51 | .nav span { padding-bottom: 4px; } |
| 52 | .nav .active { border-bottom: 1px solid #C9A876; color: #4A2E15; font-weight: 600; } |
| 53 | |
| 54 | .hero { |
| 55 | position: absolute; top: 220px; left: 0; right: 0; |
| 56 | text-align: center; z-index: 5; |
| 57 | } |
| 58 | .hero .ornament { |
| 59 | color: #C9A876; font-size: 22px; letter-spacing: 14px; |
| 60 | margin-bottom: 30px; |
| 61 | } |
| 62 | .hero .kicker { |
| 63 | font-size: 13px; letter-spacing: 8px; color: #7A4E1D; |
| 64 | font-weight: 600; margin-bottom: 26px; |
| 65 | font-family: "PingFang SC", sans-serif; |
| 66 | } |
| 67 | .hero h1 { |
| 68 | font-size: 130px; font-weight: 700; line-height: 1; |
| 69 | letter-spacing: 20px; color: #4A2E15; |
| 70 | font-family: "Songti SC", serif; |
| 71 | text-shadow: 0 2px 0 rgba(201,168,118,0.3); |
| 72 | } |
| 73 | .hero h1 .gold { |
| 74 | background: linear-gradient(180deg, #C9A876 0%, #7A4E1D 100%); |
| 75 | -webkit-background-clip: text; background-clip: text; |
| 76 | -webkit-text-fill-color: transparent; |
| 77 | } |
| 78 | .hero .en { |
| 79 | font-size: 26px; font-weight: 400; letter-spacing: 10px; |
| 80 | color: #7A4E1D; margin-top: 24px; font-style: italic; |
| 81 | font-family: "Times New Roman", serif; |
| 82 | } |
| 83 | .hero .lead { |
| 84 | font-size: 17px; line-height: 2; color: #5A3A1F; |
| 85 | margin: 40px auto 0; max-width: 720px; |
| 86 | font-family: "PingFang SC", sans-serif; |
| 87 | } |
| 88 | |
| 89 | /* gold block accent */ |
| 90 | .gold-block { |
| 91 | position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); |
| 92 | display: flex; gap: 0; z-index: 5; |
| 93 | box-shadow: 0 16px 40px rgba(122,78,29,0.25); |
| 94 | } |
| 95 | .gold-block .cell { |
| 96 | background: #7A4E1D; color: #E8DCC8; |
| 97 | padding: 26px 44px; text-align: center; |
| 98 | border-right: 1px solid rgba(232,220,200,0.2); |
| 99 | } |
| 100 | .gold-block .cell:last-child { border-right: none; } |
| 101 | .gold-block .cell .v { |
| 102 | font-size: 30px; font-weight: 700; letter-spacing: 3px; |
| 103 | color: #C9A876; font-family: "Songti SC", serif; |
| 104 | } |
| 105 | .gold-block .cell .l { |
| 106 | font-size: 11px; letter-spacing: 3px; color: #E8DCC8; |
| 107 | opacity: 0.7; margin-top: 8px; |
| 108 | font-family: "PingFang SC", sans-serif; |
| 109 | } |
| 110 | |
| 111 | .footer-line { |
| 112 | position: absolute; bottom: 60px; left: 100px; right: 100px; |
| 113 | display: flex; justify-content: space-between; |
| 114 | font-size: 11px; letter-spacing: 4px; color: #7A4E1D; |
| 115 | font-family: "PingFang SC", sans-serif; z-index: 5; |
| 116 | } |
| 117 | .footer-line .center { color: #C9A876; font-weight: 600; } |
| 118 | |
| 119 | .corner-orn { |
| 120 | position: absolute; color: #C9A876; font-size: 18px; z-index: 4; |
| 121 | } |
| 122 | .co1 { top: 60px; left: 60px; } |
| 123 | .co2 { top: 60px; right: 60px; } |
| 124 | .co3 { bottom: 60px; left: 60px; } |
| 125 | .co4 { bottom: 60px; right: 60px; } |
| 126 | </style> |
| 127 | </head> |
| 128 | <body> |
| 129 | <div class="stage"> |
| 130 | <div class="frame"></div> |
| 131 | |
| 132 | <div class="corner-orn co1">❦</div> |
| 133 | <div class="corner-orn co2">❦</div> |
| 134 | <div class="corner-orn co3">❦</div> |
| 135 | <div class="corner-orn co4">❦</div> |
| 136 | |
| 137 | <div class="top-bar"> |
| 138 | <div class="brand"> |
| 139 | <div class="mark">EST · MMXXVI</div> |
| 140 | <div class="name">鎏 金 集</div> |
| 141 | </div> |
| 142 | <div class="nav"> |
| 143 | <span class="active">COLLECTION</span> |
| 144 | <span>HERITAGE</span> |
| 145 | <span>JOURNAL</span> |
| 146 | <span>CONTACT</span> |
| 147 | </div> |
| 148 | </div> |
| 149 | |
| 150 | <div class="hero"> |
| 151 | <div class="ornament">— ◆ —</div> |
| 152 | <div class="kicker">高 级 系 列 · 典 藏 版</div> |
| 153 | <h1><span class="gold">鎏金</span> · 象牙</h1> |
| 154 | <div class="en">AURUM & EBUR</div> |
| 155 | <p class="lead">以鎏金棕筑底，象牙白作丝光，香槟金线作点睛。<br>每一处留白都是仪式，每一次落笔都是典藏。</p> |
| 156 | </div> |
| 157 | |
| 158 | <div class="gold-block"> |
| 159 | <div class="cell"><div class="v">N°07</div><div class="l">EDITION</div></div> |
| 160 | <div class="cell"><div class="v">MMXXVI</div><div class="l">YEAR</div></div> |
| 161 | <div class="cell"><div class="v">限量</div><div class="l">LIMITED</div></div> |
| 162 | <div class="cell"><div class="v">手工</div><div class="l">CRAFTED</div></div> |
| 163 | </div> |
| 164 | |
| 165 | <div class="footer-line"> |
| 166 | <span>AURUMA ATELIER</span> |
| 167 | <span class="center">— HERITAGE EDITION —</span> |
| 168 | <span>2026 · AUTUMN</span> |
| 169 | </div> |
| 170 | </div> |
| 171 | </body> |
| 172 | </html> |
| 173 |