| 7 |
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;place-items:center;background:#d9d9d9;color:#0d0d0d;font-family:Arial,"PingFang SC",sans-serif}.page{width:min(100vw,177.78vh);height:min(56.25vw,100vh);background:#f2f2f2;padding:5.5%;position:relative;overflow:hidden}.rail{position:absolute;left:0;top:0;bottom:0;width:2.4%;background:#435be1}.meta{font:700 12px/1 monospace;letter-spacing:2px;color:#435be1}.number{position:absolute;right:5%;top:4%;font:900 clamp(80px,17vw,280px)/.75 Arial;color:#435be1;letter-spacing:-8px}.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:5%;height:90%;align-items:end}h1{position:relative;margin:0;font:900 clamp(54px,8.5vw,145px)/.85 Arial,"PingFang SC",sans-serif;letter-spacing:0}.hline{height:5px;width:22%;background:#435be1;margin:7% 0 4%}.copy{font-size:clamp(14px,1.65vw,27px);line-height:1.5;max-width:22em}.shape{height:70%;border:2px dashed #0d0d0d;position:relative;background:linear-gradient(135deg,transparent 0 53%,#435be1 53% 100%)}.shape:before{content:"";position:absolute;width:28%;aspect-ratio:1;border:2px solid #fff;border-radius:50%;top:16%;left:13%}.shape:after{content:"";position:absolute;width:17%;aspect-ratio:1;background:#fff;right:11%;bottom:14%;transform:rotate(45deg)}.foot{position:absolute;bottom:5%;right:5%;font:12px monospace;letter-spacing:2px} |