Spaces:
Running
Running
| @import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600&display=swap'); | |
| :root{font-family:Manrope,sans-serif;color:#edf5f0;background:#07110e;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 72% 14%,#15392c 0,transparent 38%),#07110e}button{font:inherit}.opening{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.opening h1{margin:0;font-size:clamp(90px,11vw,190px);font-weight:500;line-height:.9;letter-spacing:-.075em;animation:rise .8s both}.opening h1 em{color:#779084;font-style:normal}.opening p{margin:46px 0 0;color:#62e6a3;font:11px 'DM Mono';letter-spacing:.24em;animation:rise .7s .4s both} | |
| .construction{position:relative;width:min(1824px,calc(100vw - 72px));height:100vh;margin:auto;padding-bottom:36px;display:grid;grid-template-rows:82px minmax(0,1fr)}header{display:grid;grid-template-columns:240px 1fr 70px;align-items:center;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:12px;font:10px 'DM Mono';letter-spacing:.12em}.brand span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #62e6a3;color:#62e6a3;font-size:15px}header nav{display:flex;justify-content:center}header nav button{padding:10px 18px;border:0;background:none;color:#4f685d;font:8px 'DM Mono';letter-spacing:.08em;cursor:pointer}header nav i{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:#365145}header nav .done{color:#789084}header nav .done i{background:#43765f}header nav .active{color:#c7f2da}header nav .active i{background:#62e6a3;box-shadow:0 0 9px #62e6a3}header>small{justify-self:end;color:#637a70;font:9px 'DM Mono'} | |
| .story{min-height:0;display:grid;grid-template-columns:1.15fr 1fr;border:1px solid #ffffff1b;border-top:0;background:#08130f}.build-scene{position:relative;overflow:hidden;border-right:1px solid #ffffff18;background:linear-gradient(#0d221a 0 66%,#09130f 66%)}.sky{position:absolute;inset:0}.sky i{position:absolute;width:3px;height:3px;border-radius:50%;background:#62e6a366}.sky i:nth-child(1){left:16%;top:16%}.sky i:nth-child(2){left:73%;top:12%}.sky i:nth-child(3){left:88%;top:31%}.ground{position:absolute;left:8%;right:8%;top:66%;height:1px;background:#4a6e5d} | |
| .blueprint{position:absolute;left:18%;top:16%;width:64%;height:48%;border:2px solid #5dbb90;background:#0c281ecf;box-shadow:0 20px 60px #0007;opacity:0;animation:appear .7s forwards}.blueprint:before,.blueprint:after{content:'';position:absolute;border:1px solid #5dbb9066}.blueprint:before{inset:10% 8%;background:linear-gradient(90deg,transparent 49%,#5dbb9044 50%,transparent 51%)}.blueprint:after{left:18%;right:18%;top:42%;height:36%}.blueprint span{position:absolute;background:#5dbb9077}.blueprint span:nth-child(1){left:49%;top:10%;bottom:10%;width:1px}.blueprint span:nth-child(2){left:8%;right:8%;top:42%;height:1px}.blueprint span:nth-child(3){left:31%;top:43%;bottom:10%;width:1px}.blueprint b{position:absolute;left:8%;bottom:4%;font:10px 'DM Mono';letter-spacing:.1em}.blueprint em{display:none;position:absolute;right:8%;top:8%;padding:9px;border:2px solid #62e6a3;color:#62e6a3;font:12px 'DM Mono';font-style:normal;transform:rotate(-8deg)} | |
| .foundation{display:none;position:absolute;left:14%;right:14%;top:61%;height:12%;background:#263b32;border:1px solid #698175;animation:foundation .8s both}.foundation i{float:left;width:33.33%;height:100%;border-right:1px solid #ffffff1a}.scaffold{display:none;position:absolute;left:17%;right:17%;top:19%;height:47%;border:2px solid #be9360;animation:appear .6s both}.scaffold i{position:absolute;background:#be9360}.scaffold i:nth-child(1),.scaffold i:nth-child(2){top:0;bottom:0;width:2px}.scaffold i:nth-child(1){left:32%}.scaffold i:nth-child(2){right:32%}.scaffold i:nth-child(3),.scaffold i:nth-child(4){left:0;right:0;height:2px}.scaffold i:nth-child(3){top:33%}.scaffold i:nth-child(4){top:66%} | |
| .house{display:none;position:absolute;left:26%;right:26%;top:30%;height:36%;animation:rise .7s both}.roof{position:absolute;left:-8%;right:-8%;top:-32%;height:35%;background:#5e806f;clip-path:polygon(50% 0,100% 100%,0 100%)}.wall{position:absolute;inset:0;background:#b58b61;display:grid;grid-template-columns:1fr 1fr;gap:25%;padding:18%}.wall i{background:#b9d6c8;border:5px solid #465d52}.wall span{position:absolute;left:43%;bottom:0;width:14%;height:42%;background:#34483f}.bricks{display:none;position:absolute;left:18%;right:18%;bottom:19%;grid-template-columns:repeat(6,1fr);gap:4px}.bricks i{height:25px;background:#a56f4c;border:1px solid #d09a70;animation:brick .4s both}.bricks i:nth-child(n+7){animation-delay:.25s}.inspection{display:none;position:absolute;right:17%;top:17%;place-items:center;width:78px;height:78px;border:3px solid #62e6a3;border-radius:50%;color:#62e6a3;font-size:40px;animation:stamp .5s both}.scene-caption{position:absolute;left:5%;bottom:5%}.scene-caption small,.scene-caption b{display:block}.scene-caption small{color:#668075;font:8px 'DM Mono';letter-spacing:.12em;text-transform:uppercase}.scene-caption b{margin-top:6px;font-size:17px;font-weight:500} | |
| .story aside{position:relative;padding:9vh 6vw;background:linear-gradient(145deg,#10251d,#08120e 70%);animation:rise .55s both}.story aside>span{color:#62e6a3;font:10px 'DM Mono';letter-spacing:.12em}.story aside h1{max-width:680px;margin:25px 0 24px;font-size:clamp(43px,4vw,72px);font-weight:500;line-height:1.02;letter-spacing:-.055em}.story aside p{max-width:670px;margin:0;color:#9db2a8;font-size:21px;line-height:1.65}.loop{margin-top:45px;padding:20px;border:1px solid #438366;color:#c4e7d5;font:14px 'DM Mono';letter-spacing:.08em}.loop i{margin:0 13px;color:#62e6a3;font-style:normal}.loop b{float:right;color:#62e6a3;font-size:22px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:42px}.checks span{padding:15px;border:1px solid #397258;color:#bde7d2;font:13px 'DM Mono'}.pause{position:absolute;right:18px;bottom:45px;width:42px;height:42px;border:1px solid #ffffff24;background:#0b1b15;color:#62e6a3;cursor:pointer} | |
| .stage-foundation .blueprint{opacity:.3}.stage-foundation .blueprint em,.stage-foundation .foundation{display:block}.stage-workspace .blueprint{opacity:.15}.stage-workspace .foundation,.stage-workspace .scaffold{display:block}.stage-assist .foundation,.stage-assist .scaffold,.stage-assist .bricks{display:grid}.stage-assist .house{display:block;opacity:.45}.stage-evidence .foundation,.stage-evidence .house,.stage-evidence .inspection{display:grid} | |
| @keyframes rise{from{opacity:0;transform:translateY(18px)}}@keyframes appear{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes foundation{from{opacity:0;transform:scaleX(.2)}}@keyframes brick{from{opacity:0;transform:translateY(-20px)}}@keyframes stamp{from{opacity:0;transform:scale(1.8) rotate(-15deg)}} | |
| @media(max-width:900px){.construction{width:100%;padding:0 15px 20px}header{grid-template-columns:1fr auto}header nav{display:none}.story{grid-template-columns:1fr}.build-scene{min-height:46vh;border-right:0;border-bottom:1px solid #ffffff18}.story aside{padding:35px 25px}.story aside h1{font-size:38px}.story aside p{font-size:17px}.opening h1{font-size:70px}} | |
| @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms}} | |