:root { --night:#091225; --ink:#16243a; --paper:#f7f4ed; --blue:#51d5e7; --gold:#ffd47a; --violet:#9b85ed; --line:rgba(202,225,239,.2); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.6 Manrope,sans-serif; } body:before { content:""; position:fixed; inset:0; z-index:-5; opacity:.34; pointer-events:none; background-image:radial-gradient(#667184 1px,transparent 1px); background-size:15px 15px; } h1,h2,h3,.brand { font-family:Cinzel,serif; line-height:1.1; } h1,h2,h3,p { margin-top:0; } .site-header { height:82px; padding:0 clamp(24px,7vw,120px); display:flex; align-items:center; justify-content:space-between; position:absolute; width:100%; z-index:3; color:white; } .brand { color:inherit; text-decoration:none; font-size:22px; font-weight:700; letter-spacing:.02em; } .brand span { color:var(--blue); } nav { display:flex; gap:28px; } nav a { color:inherit; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.04em; } nav a:hover { color:var(--blue); } .language-toggle { border:1px solid rgba(255,255,255,.45); background:rgba(9,18,37,.25); color:inherit; border-radius:50%; width:38px; height:38px; font-weight:700; cursor:pointer; }
.hero { min-height:760px; padding:154px clamp(24px,10vw,160px) 86px; display:grid; grid-template-columns:minmax(310px,.9fr) minmax(350px,1.1fr); position:relative; overflow:hidden; color:white; isolation:isolate; background:linear-gradient(120deg,#091124 10%,#192d50 58%,#3e6790 130%); } .hero:after { content:""; position:absolute; inset:0; z-index:-1; opacity:.6; background:linear-gradient(112deg,transparent 45%,rgba(77,220,230,.12) 45.2%,transparent 45.7%),radial-gradient(ellipse at 88% 36%,rgba(77,220,230,.24),transparent 33%); } .hero-copy { max-width:600px; align-self:center; z-index:1; } .eyebrow { color:var(--blue); font-size:11px; letter-spacing:.2em; font-weight:700; } h1 { font-size:clamp(43px,5.5vw,77px); margin-bottom:24px; text-shadow:0 4px 18px rgba(0,0,0,.18); } .hero-description { max-width:505px; color:#dce8f2; font-size:18px; } .button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 25px; border:0; border-radius:3px; background:linear-gradient(135deg,#ffe0a0,#efb954); box-shadow:0 8px 0 #ac7730,0 17px 30px rgba(0,0,0,.22); color:#15243a; font:800 12px Manrope,sans-serif; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:transform .2s,filter .2s; } .button:hover { transform:translateY(-3px); filter:brightness(1.06); } .button:active { transform:translateY(3px); box-shadow:0 3px 0 #ac7730; } .hero-art { min-height:490px; position:relative; } .hero-art img { position:absolute; height:min(690px,78vw); max-width:100%; object-fit:contain; object-position:center bottom; bottom:-90px; left:5%; z-index:1; filter:drop-shadow(0 25px 22px #07101d); } .orb { position:absolute; border-radius:50%; border:1px solid rgba(154,243,250,.7); background:radial-gradient(circle,rgba(102,231,241,.44),rgba(72,157,197,.08) 47%,transparent 68%); box-shadow:0 0 55px rgba(87,211,233,.27); } .orb-one { width:300px;height:300px;right:4%;top:6%; } .orb-two { width:120px;height:120px;left:2%;top:50%; }
.intro { position:relative; max-width:800px; padding:116px 24px 122px; margin:auto; text-align:center; } .intro:before { content:"✦"; display:block; margin-bottom:16px; color:#d6a749; font-size:24px; } h2 { font-size:clamp(31px,4vw,51px); margin-bottom:18px; } .intro>p:last-child { color:#566377; font-size:17px; } .heroes { padding:96px clamp(24px,7vw,120px) 112px; position:relative; overflow:hidden; background:#e2ebe7; } .heroes:before { content:""; position:absolute; width:620px; height:620px; border:1px solid rgba(65,132,151,.18); border-radius:50%; right:-380px; top:-270px; } .section-heading { position:relative; text-align:center; } .hero-grid { max-width:1300px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; margin:48px auto 0; } .character-card { min-height:400px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; position:relative; padding:19px; color:white; isolation:isolate; border:1px solid rgba(255,255,255,.36); box-shadow:0 13px 24px rgba(19,35,48,.18); } .character-card:before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 28%,rgba(5,12,23,.94)); } .character-card:after { content:""; position:absolute; inset:7px; z-index:-1; border:1px solid rgba(255,255,255,.25); } .character-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:-2; transition:transform .45s ease; } .character-card:hover img { transform:scale(1.06); } .character-card h3 { margin:2px 0; font-size:19px; } .character-card p { margin:0; font-size:13px; } .character-card .element { color:var(--gold); font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; } .water { background:#235f7d; } .shadow { background:#422a5f; } .wind { background:#3f6e54; } .arcane { background:#49394d; } .lightning { background:#405379; }
.signup { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(340px,1.15fr); gap:75px; align-items:center; padding:115px max(24px,12vw); position:relative; overflow:hidden; color:white; background:#0b1830; } .signup:before { content:""; position:absolute; width:850px; height:850px; border:1px solid rgba(82,213,231,.15); border-radius:50%; left:-575px; top:-335px; box-shadow:0 0 80px rgba(82,213,231,.12); } .signup-copy { position:relative; } .signup-copy>p:last-child { color:#cbd7e5; max-width:450px; } form { position:relative; padding:36px; border:1px solid rgba(255,226,151,.74); border-radius:7px; background:linear-gradient(145deg,#fff3d1,#efd08b); box-shadow:0 20px 0 rgba(0,0,0,.22),0 27px 60px rgba(0,0,0,.28); color:#1c2940; } form:before { content:"✦  EARLY ACCESS  ✦"; display:block; margin-bottom:15px; color:#80652c; font:800 10px Manrope,sans-serif; letter-spacing:.19em; text-align:center; } form label { display:block; margin-bottom:8px; font-size:14px; font-weight:800; } .form-row { display:flex; gap:10px; } input { min-width:0; flex:1; min-height:52px; padding:0 14px; border:1px solid #b59b60; border-radius:3px; background:#fffdf8; color:var(--ink); font:16px Manrope,sans-serif; } input:focus { outline:3px solid rgba(80,204,222,.45); border-color:#24889c; } form .button { flex-shrink:0; box-shadow:0 5px 0 #ac7730,0 10px 18px rgba(106,70,22,.2); } .privacy { margin:15px 0 0; color:#685936; font-size:12px; line-height:1.5; } .form-status { min-height:23px; margin:12px 0 0; font-size:14px; font-weight:700; } .form-status[data-state="success"] { color:#14714e; } .form-status[data-state="error"] { color:#a5362e; } button:disabled { opacity:.65; cursor:wait; } footer { padding:29px clamp(24px,7vw,120px); display:flex; justify-content:space-between; align-items:center; background:#060d1b; color:#d7dee9; } footer p { margin:0; font-size:13px; }
@media (max-width:950px) { .hero-grid { grid-template-columns:repeat(3,1fr); } .character-card { min-height:350px; } .signup { padding-inline:8vw; gap:40px; } } @media (max-width:690px) { .site-header { padding:0 20px; } nav { display:none; } .hero { min-height:765px; grid-template-columns:1fr; padding:119px 24px 0; } .hero-copy { align-self:start; } .hero-art { min-height:330px; } .hero-art img { height:485px; left:0; bottom:-62px; } .hero-grid { grid-template-columns:repeat(2,1fr); gap:11px; } .character-card { min-height:314px; padding:14px; } .hero-grid article:last-child { grid-column:span 2; } .signup { grid-template-columns:1fr; padding:80px 24px; } form { padding:27px 20px; } .form-row { flex-direction:column; } input { min-height:52px; } footer { flex-direction:column; align-items:flex-start; gap:8px; } }