| 7 |
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;place-items:center;background:#d4d4d2;color:#0a0a0a;font-family:Arial,"PingFang SC",sans-serif}.page{width:min(100vw,177.78vh);height:min(56.25vw,100vh);padding:4.5%;background:#fafaf8;position:relative;overflow:hidden;background-image:linear-gradient(#f0f0ee 1px,transparent 1px),linear-gradient(90deg,#f0f0ee 1px,transparent 1px);background-size:5% 5%}.top{position:relative;display:flex;justify-content:space-between;font:12px/1 monospace;letter-spacing:1px}.square{width:14px;height:14px;background:#002fa7}.title{position:relative;margin-top:8%;max-width:72%}h1{margin:0;font-size:clamp(58px,10vw,170px);font-weight:200;line-height:.82;letter-spacing:0}.accent{color:#002fa7}.line{height:2px;background:#0a0a0a;width:100%;margin:5% 0 2%}.sub{font-size:clamp(15px,1.6vw,26px);max-width:28em;line-height:1.35}.data{position:absolute;right:4.5%;bottom:7%;width:36%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#0a0a0a}.metric{background:#fafaf8;padding:14px}.metric b{display:block;font-size:clamp(32px,4vw,70px);font-weight:300}.metric span{font:10px/1.3 monospace}.metric:first-child{background:#002fa7;color:#fff}.foot{position:absolute;left:4.5%;bottom:7%;font:12px monospace;letter-spacing:2px} |