| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>锐利黑白 · Sharp Mono</title> |
| 7 | <style> |
| 8 | * { box-sizing: border-box; margin: 0; padding: 0; } |
| 9 | html, body { width: 100%; height: 100%; overflow: hidden; background: #0f1117; display: grid; place-items: center; } |
| 10 | body { font-family: "SFMono-Regular", "Consolas", "Menlo", monospace; } |
| 11 | |
| 12 | .slide { |
| 13 | position: relative; |
| 14 | width: min(100vw, calc(100vh * 16 / 9)); |
| 15 | aspect-ratio: 16 / 9; |
| 16 | overflow: hidden; |
| 17 | background: #ffffff; |
| 18 | box-shadow: 0 0 0 1px rgba(255,255,255,.08); |
| 19 | } |
| 20 | |
| 21 | /* Split: left black, right white */ |
| 22 | .split-left { |
| 23 | position: absolute; |
| 24 | left: 0; |
| 25 | top: 0; |
| 26 | width: 42%; |
| 27 | height: 100%; |
| 28 | background: #000000; |
| 29 | z-index: 1; |
| 30 | display: flex; |
| 31 | flex-direction: column; |
| 32 | justify-content: center; |
| 33 | padding: clamp(16px, 3vw, 42px); |
| 34 | clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); |
| 35 | } |
| 36 | .split-right { |
| 37 | position: absolute; |
| 38 | right: 0; |
| 39 | top: 0; |
| 40 | width: 62%; |
| 41 | height: 100%; |
| 42 | background: #ffffff; |
| 43 | z-index: 1; |
| 44 | display: flex; |
| 45 | flex-direction: column; |
| 46 | justify-content: center; |
| 47 | padding: clamp(16px, 3vw, 42px) clamp(16px, 3vw, 42px) clamp(16px, 3vw, 42px) clamp(40px, 7vw, 100px); |
| 48 | } |
| 49 | |
| 50 | /* Diagonal divider line */ |
| 51 | .divider { |
| 52 | position: absolute; |
| 53 | left: 38%; |
| 54 | top: -5%; |
| 55 | width: 4px; |
| 56 | height: 120%; |
| 57 | background: #666666; |
| 58 | transform: rotate(4deg); |
| 59 | z-index: 2; |
| 60 | } |
| 61 | |
| 62 | .eyebrow { |
| 63 | font-size: clamp(6px, 0.7vw, 9px); |
| 64 | font-weight: 700; |
| 65 | letter-spacing: 0.22em; |
| 66 | text-transform: uppercase; |
| 67 | color: #666666; |
| 68 | margin-bottom: clamp(6px, 1vw, 14px); |
| 69 | } |
| 70 | .eyebrow-light { |
| 71 | color: #666666; |
| 72 | } |
| 73 | h1 { |
| 74 | font-size: clamp(30px, 5.5vw, 64px); |
| 75 | line-height: 0.9; |
| 76 | font-weight: 900; |
| 77 | letter-spacing: -0.04em; |
| 78 | color: #000000; |
| 79 | } |
| 80 | h1-white { |
| 81 | font-size: clamp(30px, 5.5vw, 64px); |
| 82 | line-height: 0.9; |
| 83 | font-weight: 900; |
| 84 | letter-spacing: -0.04em; |
| 85 | color: #ffffff; |
| 86 | display: block; |
| 87 | } |
| 88 | |
| 89 | .left-desc { |
| 90 | font-size: clamp(8px, 1vw, 13px); |
| 91 | line-height: 1.6; |
| 92 | color: #666666; |
| 93 | margin-top: clamp(8px, 1.2vw, 16px); |
| 94 | font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; |
| 95 | } |
| 96 | .right-desc { |
| 97 | font-size: clamp(8px, 1vw, 13px); |
| 98 | line-height: 1.6; |
| 99 | color: #333333; |
| 100 | margin-top: clamp(8px, 1.2vw, 16px); |
| 101 | font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; |
| 102 | } |
| 103 | |
| 104 | /* Monospace code block style */ |
| 105 | .mono-block { |
| 106 | margin-top: clamp(8px, 1.2vw, 16px); |
| 107 | padding: clamp(6px, 0.8vw, 12px) clamp(8px, 1vw, 14px); |
| 108 | border: 2px solid #000000; |
| 109 | font-size: clamp(7px, 0.8vw, 10px); |
| 110 | line-height: 1.7; |
| 111 | color: #333333; |
| 112 | } |
| 113 | .mono-block-dark { |
| 114 | border-color: #333333; |
| 115 | color: #666666; |
| 116 | } |
| 117 | |
| 118 | .tags { |
| 119 | display: flex; |
| 120 | flex-wrap: wrap; |
| 121 | gap: clamp(3px, 0.4vw, 6px); |
| 122 | margin-top: clamp(6px, 1vw, 14px); |
| 123 | } |
| 124 | .tags span { |
| 125 | font-size: clamp(6px, 0.7vw, 9px); |
| 126 | font-weight: 700; |
| 127 | padding: clamp(2px, 0.3vw, 4px) clamp(5px, 0.6vw, 8px); |
| 128 | border: 2px solid currentColor; |
| 129 | font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; |
| 130 | } |
| 131 | |
| 132 | .palette { |
| 133 | display: flex; |
| 134 | gap: clamp(3px, 0.4vw, 6px); |
| 135 | margin-top: clamp(6px, 1vw, 14px); |
| 136 | } |
| 137 | .palette i { |
| 138 | display: block; |
| 139 | width: clamp(12px, 1.6vw, 22px); |
| 140 | height: clamp(12px, 1.6vw, 22px); |
| 141 | background: var(--c); |
| 142 | border: 2px solid #000000; |
| 143 | } |
| 144 | |
| 145 | .label { |
| 146 | font-size: clamp(6px, 0.65vw, 8px); |
| 147 | font-weight: 700; |
| 148 | letter-spacing: 0.15em; |
| 149 | text-transform: uppercase; |
| 150 | color: #999999; |
| 151 | margin-top: clamp(6px, 1vw, 14px); |
| 152 | } |
| 153 | .label-dark { |
| 154 | color: #666666; |
| 155 | } |
| 156 | |
| 157 | @media (max-aspect-ratio: 16/9) { .slide { width: min(100vw, calc(100vh * 16 / 9)); height: auto; } } |
| 158 | @media (min-aspect-ratio: 16/9) { .slide { height: min(100vh, calc(100vw * 9 / 16)); width: auto; } } |
| 159 | </style> |
| 160 | </head> |
| 161 | <body> |
| 162 | <main class="slide" aria-label="锐利黑白 style preview"> |
| 163 | <div class="split-left"> |
| 164 | <div class="eyebrow eyebrow-light">大胆 · 宣言</div> |
| 165 | <h1-white>锐利</h1-white> |
| 166 | <h1-white>黑白</h1-white> |
| 167 | <p class="left-desc">黑白利刃切开视觉噪音，硬朗到骨子里</p> |
| 168 | <div class="mono-block mono-block-dark"> |
| 169 | Layout: 大胆的对角线切割、<br> |
| 170 | 大面积黑色色块与白色空间<br> |
| 171 | 的极端对比。排版即武器。 |
| 172 | </div> |
| 173 | <div class="palette"> |
| 174 | <i style="--c:#000000"></i> |
| 175 | <i style="--c:#333333"></i> |
| 176 | <i style="--c:#666666"></i> |
| 177 | <i style="--c:#ffffff"></i> |
| 178 | <i style="--c:#f5f5f5"></i> |
| 179 | </div> |
| 180 | </div> |
| 181 | <div class="divider"></div> |
| 182 | <div class="split-right"> |
| 183 | <div class="eyebrow">sharp-mono · 16:9 preview</div> |
| 184 | <h1>SHARP<br>MONO</h1> |
| 185 | <p class="right-desc">极致的高对比美学——没有灰色地带，只有黑与白的正面交锋。Archivo Black 或粗黑体，字重拉到最重，标题字号可以大到填满半个屏幕。</p> |
| 186 | <div class="tags"> |
| 187 | <span style="color:#000">宣言式演讲</span> |
| 188 | <span style="color:#000">品牌态度声明</span> |
| 189 | <span style="color:#000">创意比稿</span> |
| 190 | <span style="color:#000">反叛精神展示</span> |
| 191 | </div> |
| 192 | <div class="label">drop-in / zoom-pop / card-flip-3d</div> |
| 193 | </div> |
| 194 | </main> |
| 195 | </body> |
| 196 | </html> |
| 197 |