| 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", "PingFang SC", serif; } |
| 10 | .stage { width: 1600px; height: 900px; position: relative; overflow: hidden; background: #E5E0D0; } |
| 11 | |
| 12 | .left-panel { |
| 13 | position: absolute; top: 0; left: 0; width: 620px; height: 900px; |
| 14 | background: #4A5D34; |
| 15 | } |
| 16 | .left-panel::before { |
| 17 | content: ""; position: absolute; inset: 30px; |
| 18 | border: 1px solid rgba(229,224,208,0.25); |
| 19 | } |
| 20 | .pattern { |
| 21 | position: absolute; inset: 60px; |
| 22 | background-image: |
| 23 | repeating-linear-gradient(45deg, transparent 0 28px, rgba(229,224,208,0.04) 28px 29px), |
| 24 | repeating-linear-gradient(-45deg, transparent 0 28px, rgba(229,224,208,0.04) 28px 29px); |
| 25 | } |
| 26 | |
| 27 | .brand { |
| 28 | position: absolute; top: 90px; left: 90px; z-index: 3; |
| 29 | color: #E5E0D0; |
| 30 | } |
| 31 | .brand .mark { |
| 32 | font-size: 13px; letter-spacing: 6px; font-weight: 600; |
| 33 | color: #B89B5E; margin-bottom: 14px; |
| 34 | } |
| 35 | .brand .name { |
| 36 | font-size: 42px; font-weight: 700; letter-spacing: 8px; |
| 37 | font-family: "Songti SC", serif; |
| 38 | } |
| 39 | .brand .en { |
| 40 | font-size: 13px; letter-spacing: 5px; color: #9A9488; |
| 41 | margin-top: 10px; font-family: "PingFang SC", sans-serif; |
| 42 | } |
| 43 | |
| 44 | .quote { |
| 45 | position: absolute; bottom: 110px; left: 90px; right: 90px; z-index: 3; |
| 46 | color: #E5E0D0; |
| 47 | } |
| 48 | .quote .line { |
| 49 | font-size: 26px; font-weight: 400; line-height: 1.8; |
| 50 | font-family: "Songti SC", serif; letter-spacing: 2px; |
| 51 | opacity: 0.92; |
| 52 | } |
| 53 | .quote .from { |
| 54 | font-size: 13px; letter-spacing: 4px; color: #B89B5E; |
| 55 | margin-top: 22px; font-family: "PingFang SC", sans-serif; |
| 56 | } |
| 57 | .quote .from::before { content: "—— "; } |
| 58 | |
| 59 | /* right content */ |
| 60 | .content { |
| 61 | position: absolute; top: 110px; left: 720px; right: 90px; z-index: 3; |
| 62 | color: #3A3326; |
| 63 | } |
| 64 | .content .kicker { |
| 65 | font-size: 13px; letter-spacing: 6px; color: #B89B5E; |
| 66 | font-weight: 600; margin-bottom: 26px; |
| 67 | font-family: "PingFang SC", sans-serif; |
| 68 | } |
| 69 | .content .kicker::before { content: "◆ "; } |
| 70 | .content h1 { |
| 71 | font-size: 76px; font-weight: 700; line-height: 1.1; |
| 72 | letter-spacing: 4px; color: #4A5D34; |
| 73 | font-family: "Songti SC", serif; |
| 74 | } |
| 75 | .content h1 .accent { color: #B89B5E; font-style: italic; } |
| 76 | .content .en-title { |
| 77 | font-size: 22px; font-weight: 400; letter-spacing: 6px; |
| 78 | color: #9A9488; margin-top: 18px; |
| 79 | font-family: "Times New Roman", serif; font-style: italic; |
| 80 | } |
| 81 | .content .divider { |
| 82 | width: 60px; height: 2px; background: #B89B5E; |
| 83 | margin: 36px 0; |
| 84 | } |
| 85 | .content .body { |
| 86 | font-size: 17px; line-height: 2; color: #3A3326; |
| 87 | max-width: 640px; font-family: "PingFang SC", sans-serif; |
| 88 | } |
| 89 | |
| 90 | .meta-grid { |
| 91 | position: absolute; bottom: 110px; left: 720px; right: 90px; z-index: 3; |
| 92 | display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; |
| 93 | padding-top: 30px; border-top: 1px solid rgba(74,93,52,0.25); |
| 94 | } |
| 95 | .meta-grid .m .v { |
| 96 | font-size: 34px; font-weight: 700; color: #4A5D34; |
| 97 | font-family: "Songti SC", serif; letter-spacing: 2px; |
| 98 | } |
| 99 | .meta-grid .m .l { |
| 100 | font-size: 12px; letter-spacing: 3px; color: #9A9488; |
| 101 | margin-top: 8px; font-family: "PingFang SC", sans-serif; |
| 102 | } |
| 103 | |
| 104 | .corner-stamp { |
| 105 | position: absolute; top: 90px; right: 90px; z-index: 3; |
| 106 | text-align: right; color: #9A9488; |
| 107 | font-size: 12px; letter-spacing: 3px; |
| 108 | font-family: "PingFang SC", sans-serif; |
| 109 | } |
| 110 | .corner-stamp .no { color: #B89B5E; font-weight: 700; font-size: 14px; } |
| 111 | </style> |
| 112 | </head> |
| 113 | <body> |
| 114 | <div class="stage"> |
| 115 | <div class="left-panel"> |
| 116 | <div class="pattern"></div> |
| 117 | <div class="brand"> |
| 118 | <div class="mark">EST · MMXXVI</div> |
| 119 | <div class="name">橄 榄 集</div> |
| 120 | <div class="en">OLIVADE ATELIER</div> |
| 121 | </div> |
| 122 | <div class="quote"> |
| 123 | <div class="line">"深绿是岁月沉淀的底色，<br>奶白是时光未尽的柔光。"</div> |
| 124 | <div class="from">橄榄集 · 卷一</div> |
| 125 | </div> |
| 126 | </div> |
| 127 | |
| 128 | <div class="corner-stamp"> |
| 129 | <div>NO. <span class="no">07</span></div> |
| 130 | <div>HERITAGE EDITION</div> |
| 131 | </div> |
| 132 | |
| 133 | <div class="content"> |
| 134 | <div class="kicker">高 级 系 列 · 第 七 期</div> |
| 135 | <h1>沉静之力<br><span class="accent">Olive & Ivory</span></h1> |
| 136 | <div class="en-title">A Study in Stillness</div> |
| 137 | <div class="divider"></div> |
| 138 | <p class="body">以深橄榄绿筑基，奶白绿作柔光，金线作点睛。<br>不喧哗，不张扬，只把高级感藏在每一处克制的留白里。<br>这是属于懂得的人的稳重温雅。</p> |
| 139 | </div> |
| 140 | |
| 141 | <div class="meta-grid"> |
| 142 | <div class="m"><div class="v">36 件</div><div class="l">CAPSULE</div></div> |
| 143 | <div class="m"><div class="v">2026</div><div class="l">AUTUMN</div></div> |
| 144 | <div class="m"><div class="v">手工</div><div class="l">CRAFTED</div></div> |
| 145 | </div> |
| 146 | </div> |
| 147 | </body> |
| 148 | </html> |
| 149 |