| 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>瑞士网格 · Swiss Grid</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: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; } |
| 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 | /* Visible grid overlay */ |
| 22 | .grid-overlay { |
| 23 | position: absolute; |
| 24 | inset: 0; |
| 25 | z-index: 1; |
| 26 | background: |
| 27 | repeating-linear-gradient(90deg, |
| 28 | transparent, |
| 29 | transparent calc(100%/12 - 0.5px), |
| 30 | #e2e8f0 calc(100%/12 - 0.5px), |
| 31 | #e2e8f0 calc(100%/12 + 0.5px), |
| 32 | transparent calc(100%/12 + 0.5px) |
| 33 | ), |
| 34 | repeating-linear-gradient(0deg, |
| 35 | transparent, |
| 36 | transparent calc(100%/8 - 0.5px), |
| 37 | #e2e8f0 calc(100%/8 - 0.5px), |
| 38 | #e2e8f0 calc(100%/8 + 0.5px), |
| 39 | transparent calc(100%/8 + 0.5px) |
| 40 | ); |
| 41 | opacity: 0.35; |
| 42 | pointer-events: none; |
| 43 | } |
| 44 | |
| 45 | /* Content strictly on grid */ |
| 46 | .content { |
| 47 | position: absolute; |
| 48 | inset: 0; |
| 49 | z-index: 2; |
| 50 | padding: clamp(14px, 2.5vw, 36px); |
| 51 | display: grid; |
| 52 | grid-template-columns: repeat(12, 1fr); |
| 53 | grid-template-rows: repeat(8, 1fr); |
| 54 | gap: clamp(4px, 0.5vw, 8px); |
| 55 | } |
| 56 | |
| 57 | /* Top-left: red square + eyebrow */ |
| 58 | .red-square { |
| 59 | grid-column: 1 / 3; |
| 60 | grid-row: 1 / 3; |
| 61 | background: #ef4444; |
| 62 | display: flex; |
| 63 | align-items: center; |
| 64 | justify-content: center; |
| 65 | } |
| 66 | .red-square span { |
| 67 | font-size: clamp(5px, 0.6vw, 8px); |
| 68 | font-weight: 900; |
| 69 | letter-spacing: 0.15em; |
| 70 | text-transform: uppercase; |
| 71 | color: #ffffff; |
| 72 | } |
| 73 | |
| 74 | /* Title area */ |
| 75 | .title-area { |
| 76 | grid-column: 3 / 9; |
| 77 | grid-row: 1 / 4; |
| 78 | display: flex; |
| 79 | flex-direction: column; |
| 80 | justify-content: flex-end; |
| 81 | padding-bottom: clamp(4px, 0.6vw, 8px); |
| 82 | } |
| 83 | .eyebrow { |
| 84 | font-size: clamp(6px, 0.75vw, 10px); |
| 85 | font-weight: 800; |
| 86 | letter-spacing: 0.18em; |
| 87 | text-transform: uppercase; |
| 88 | color: #ef4444; |
| 89 | margin-bottom: clamp(3px, 0.4vw, 6px); |
| 90 | } |
| 91 | h1 { |
| 92 | font-size: clamp(24px, 4.2vw, 50px); |
| 93 | line-height: 0.95; |
| 94 | font-weight: 900; |
| 95 | color: #0f172a; |
| 96 | letter-spacing: -0.02em; |
| 97 | } |
| 98 | |
| 99 | /* Right side info block */ |
| 100 | .info-block { |
| 101 | grid-column: 9 / 13; |
| 102 | grid-row: 1 / 5; |
| 103 | background: #111827; |
| 104 | padding: clamp(8px, 1.2vw, 18px); |
| 105 | display: flex; |
| 106 | flex-direction: column; |
| 107 | justify-content: center; |
| 108 | } |
| 109 | .info-label { |
| 110 | font-size: clamp(6px, 0.7vw, 9px); |
| 111 | font-weight: 800; |
| 112 | letter-spacing: 0.15em; |
| 113 | text-transform: uppercase; |
| 114 | color: #ef4444; |
| 115 | margin-bottom: clamp(3px, 0.4vw, 6px); |
| 116 | } |
| 117 | .info-text { |
| 118 | font-size: clamp(7px, 0.85vw, 11px); |
| 119 | line-height: 1.55; |
| 120 | color: #ffffff; |
| 121 | opacity: 0.75; |
| 122 | } |
| 123 | .palette { |
| 124 | display: flex; |
| 125 | gap: clamp(3px, 0.4vw, 6px); |
| 126 | margin-top: clamp(6px, 1vw, 14px); |
| 127 | } |
| 128 | .palette i { |
| 129 | display: block; |
| 130 | width: clamp(10px, 1.4vw, 18px); |
| 131 | height: clamp(10px, 1.4vw, 18px); |
| 132 | background: var(--c); |
| 133 | } |
| 134 | |
| 135 | /* Description */ |
| 136 | .desc-area { |
| 137 | grid-column: 1 / 9; |
| 138 | grid-row: 4 / 6; |
| 139 | display: flex; |
| 140 | flex-direction: column; |
| 141 | justify-content: center; |
| 142 | padding-top: clamp(4px, 0.6vw, 8px); |
| 143 | } |
| 144 | .desc { |
| 145 | font-size: clamp(8px, 1.1vw, 14px); |
| 146 | line-height: 1.6; |
| 147 | color: #334155; |
| 148 | max-width: 85%; |
| 149 | } |
| 150 | .tags { |
| 151 | display: flex; |
| 152 | flex-wrap: wrap; |
| 153 | gap: clamp(3px, 0.4vw, 6px); |
| 154 | margin-top: clamp(4px, 0.6vw, 10px); |
| 155 | } |
| 156 | .tags span { |
| 157 | font-size: clamp(6px, 0.7vw, 9px); |
| 158 | font-weight: 700; |
| 159 | padding: clamp(2px, 0.25vw, 4px) clamp(4px, 0.5vw, 7px); |
| 160 | border: 1.5px solid #0f172a; |
| 161 | color: #0f172a; |
| 162 | } |
| 163 | |
| 164 | /* Bottom horizontal red bar */ |
| 165 | .red-bar { |
| 166 | grid-column: 1 / 13; |
| 167 | grid-row: 7 / 9; |
| 168 | background: #ef4444; |
| 169 | display: flex; |
| 170 | align-items: center; |
| 171 | justify-content: space-between; |
| 172 | padding: 0 clamp(8px, 1.2vw, 18px); |
| 173 | } |
| 174 | .red-bar span { |
| 175 | font-size: clamp(6px, 0.7vw, 9px); |
| 176 | font-weight: 800; |
| 177 | letter-spacing: 0.1em; |
| 178 | text-transform: uppercase; |
| 179 | color: #ffffff; |
| 180 | } |
| 181 | |
| 182 | /* Thin red accent line */ |
| 183 | .accent-line { |
| 184 | grid-column: 3 / 9; |
| 185 | grid-row: 3; |
| 186 | height: 3px; |
| 187 | background: #ef4444; |
| 188 | align-self: end; |
| 189 | margin-bottom: clamp(2px, 0.3vw, 4px); |
| 190 | } |
| 191 | |
| 192 | /* Transition note */ |
| 193 | .transition-area { |
| 194 | grid-column: 9 / 13; |
| 195 | grid-row: 6 / 7; |
| 196 | display: flex; |
| 197 | align-items: center; |
| 198 | } |
| 199 | .transition-note { |
| 200 | font-size: clamp(6px, 0.7vw, 9px); |
| 201 | color: #334155; |
| 202 | opacity: 0.55; |
| 203 | letter-spacing: 0.05em; |
| 204 | } |
| 205 | |
| 206 | @media (max-aspect-ratio: 16/9) { .slide { width: min(100vw, calc(100vh * 16 / 9)); height: auto; } } |
| 207 | @media (min-aspect-ratio: 16/9) { .slide { height: min(100vh, calc(100vw * 9 / 16)); width: auto; } } |
| 208 | </style> |
| 209 | </head> |
| 210 | <body> |
| 211 | <main class="slide" aria-label="瑞士网格 style preview"> |
| 212 | <div class="grid-overlay"></div> |
| 213 | <section class="content"> |
| 214 | <div class="red-square"><span>Swiss</span></div> |
| 215 | <div class="title-area"> |
| 216 | <div class="eyebrow">大胆 · 宣言 · swiss-grid</div> |
| 217 | <h1>瑞士网格</h1> |
| 218 | </div> |
| 219 | <div class="accent-line"></div> |
| 220 | <div class="info-block"> |
| 221 | <div class="info-label">Style DNA</div> |
| 222 | <p class="info-text">瑞士国际主义风格是设计史上最优雅的理性主义。12栏网格是神圣不可侵犯的法则，Helvetica 或无衬线字体是唯一选择。</p> |
| 223 | <div class="palette"> |
| 224 | <i style="--c:#0f172a"></i> |
| 225 | <i style="--c:#334155"></i> |
| 226 | <i style="--c:#111827"></i> |
| 227 | <i style="--c:#ef4444"></i> |
| 228 | <i style="--c:#ffffff"></i> |
| 229 | </div> |
| 230 | </div> |
| 231 | <div class="desc-area"> |
| 232 | <p class="desc">严谨到像素的网格信仰，理性本身就是一种浪漫。红色是唯一的色彩出口，其余皆由黑白灰承担秩序的重任。</p> |
| 233 | <div class="tags"><span>设计行业分享</span><span>品牌规范发布</span><span>严肃的排版展示</span><span>建筑设计叙事</span></div> |
| 234 | </div> |
| 235 | <div class="transition-area"> |
| 236 | <span class="transition-note">fade-up / stagger-list / path-draw</span> |
| 237 | </div> |
| 238 | <div class="red-bar"> |
| 239 | <span>Layout: 12栏网格是神圣不可侵犯的法则</span> |
| 240 | <span>16:9 preview</span> |
| 241 | </div> |
| 242 | </section> |
| 243 | </main> |
| 244 | </body> |
| 245 | </html> |
| 246 |