2 lines
1.4 KiB
CSS
2 lines
1.4 KiB
CSS
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f5f5;background:#242628}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% 30%,#303336,#202224 65%);min-height:100vh;color:#fff}main{min-height:100vh;display:grid;grid-template-rows:auto 1fr 120px;padding:28px 42px;gap:18px}header{display:flex;justify-content:space-between;opacity:.72;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem}#stage{display:flex;align-items:center;justify-content:center;overflow:hidden}#content{width:min(1100px,92vw);text-align:center;transition:opacity .45s ease,transform .45s ease;animation:appear .55s ease}#content.swap{opacity:0;transform:translateY(12px) scale(.99)}h1{font-size:clamp(2rem,5vw,5rem);font-weight:350;margin:.2em}p{font-size:clamp(1rem,2vw,1.5rem);color:#d4d4d4}.hero{max-width:min(100%,900px);max-height:62vh;border-radius:18px;box-shadow:0 25px 70px #0008;animation:imageIn .9s cubic-bezier(.2,.8,.2,1)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left}.card{padding:18px;border:1px solid #ffffff1c;background:#ffffff0a;border-radius:16px;backdrop-filter:blur(8px)}#wave{display:flex;align-items:center}canvas{width:100%;height:100%}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes imageIn{from{opacity:0;filter:blur(14px);transform:scale(.965)}to{opacity:1;filter:blur(0);transform:scale(1)}}
|