/* ============================================================ RegularWizardsCo — shared styles Brand: #FF609E pink · #000 black · #FAFAFA off-white · grey text Fonts: Roboto Condensed (everywhere) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&display=swap'); :root{ --bg:#000000; --surface:#0A0A0A; --surface-2:#101010; --ink:#FAFAFA; --grey:#9A9A9A; --muted:#6B6B6B; --pink:#FF609E; --line:#1C1C1C; --cond:'Roboto Condensed', system-ui, sans-serif; --mono:'Roboto Condensed', system-ui, sans-serif; } *{ box-sizing:border-box; margin:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--ink); font-family:var(--cond); -webkit-font-smoothing:antialiased; line-height:1.5; transition:opacity .3s ease; } /* hide the page until web fonts are ready (set by the inline script in ); no-JS users never get the .wait-fonts class, so they always see content */ html.wait-fonts body{ opacity:0; } html.fonts-loaded body{ opacity:1; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .mono{ font-family:var(--mono); } .pink{ color:var(--pink); } .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; } .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; border-radius:2px; } @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } html{ scroll-behavior:auto; } } /* ---------------- HEADER ---------------- */ .rwz-header{ position:sticky; top:0; z-index:20; background:rgba(0,0,0,.85); backdrop-filter:saturate(140%) blur(8px); } .rwz-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:24px; } .rwz-logo{ font-weight:700; font-size:19px; letter-spacing:.04em; text-transform:uppercase; } .rwz-nav{ display:flex; align-items:center; gap:26px; } .rwz-nav a.link{ font-family:var(--mono); font-size:14px; color:var(--grey); padding-bottom:3px; border-bottom:2px solid transparent; transition:all .18s; } .rwz-nav a.link:hover, .rwz-nav a.link.active{ color:var(--pink); border-color:var(--pink); } .rwz-btn{ display:inline-block; font-weight:700; font-size:14px; letter-spacing:.05em; text-transform:uppercase; padding:11px 20px; border-radius:3px; cursor:pointer; transition:transform .15s, background .15s, border-color .15s, color .15s; } .rwz-btn.solid{ background:var(--pink); color:#000; border:none; } .rwz-btn.solid:hover{ background:#ff7aad; transform:translateY(-1px); } .rwz-btn.ghost{ background:transparent; border:1px solid #333; color:var(--ink); } .rwz-btn.ghost:hover{ border-color:var(--pink); color:var(--pink); } .rwz-btn.sm{ padding:9px 15px; font-size:13px; } .rwz-btn.block{ display:block; width:100%; text-align:center; } /* "or" divider between the signup form and the Gamefound button */ .rwz-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .rwz-or::before, .rwz-or::after{ content:""; flex:1; height:1px; background:var(--line); } /* ---------------- HERO ---------------- */ .rwz-hero{ padding:140px 0 124px; background:radial-gradient(120% 80% at 78% -10%, rgba(255,96,158,.12), transparent 58%); } .rwz-eyebrow{ font-family:var(--mono); color:var(--grey); font-size:15px; letter-spacing:.02em; margin-bottom:30px; } .rwz-hero h1{ font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(52px, 8.2vw, 104px); line-height:.96; margin-bottom:30px; max-width:15ch; } .rwz-hero p.lead{ color:var(--grey); font-weight:300; font-size:clamp(19px,2.5vw,24px); max-width:52ch; line-height:1.6; margin-bottom:40px; } .rwz-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:30px; } .rwz-meta{ font-family:var(--mono); color:var(--muted); font-size:13px; letter-spacing:.03em; } /* ---------------- SECTION HEADINGS ---------------- */ .rwz-label{ font-family:var(--mono); color:var(--pink); font-size:14px; margin-bottom:10px; } .rwz-h2{ font-weight:700; text-transform:uppercase; font-size:clamp(26px,3.6vw,34px); letter-spacing:.01em; } /* ---------------- LATEST / CARDS ---------------- */ .rwz-latest{ padding:30px 0 80px; } .rwz-latest .head{ margin-bottom:34px; } .rwz-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; } .rwz-card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; } .rwz-card:hover{ border-color:#333; transform:translateY(-3px); } .rwz-card .media{ height:150px; position:relative; display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:#3a3a3a; font-size:12px; letter-spacing:.05em; } .media.m-game{ background:linear-gradient(150deg,#1a0c14,#050505); } .media.m-studio{ background:linear-gradient(150deg,#121212,#050505); } .media.m-community{ background:linear-gradient(150deg,#160a11,#050505); } .rwz-tag{ position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--pink); border:1px solid var(--pink); border-radius:20px; padding:4px 11px; } .rwz-card .body{ padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; } .rwz-card .cat{ font-family:var(--mono); color:var(--pink); font-size:13px; margin-bottom:9px; } .rwz-card h3{ font-weight:500; text-transform:uppercase; font-size:21px; margin-bottom:9px; letter-spacing:.01em; } .rwz-card p{ color:var(--grey); font-weight:300; font-size:15px; line-height:1.55; margin-bottom:20px; flex:1; } .rwz-card .more{ font-family:var(--mono); font-size:14px; color:var(--ink); display:inline-flex; align-items:center; gap:8px; } .rwz-card .more .arw{ color:var(--pink); transition:transform .2s; } .rwz-card:hover .more .arw{ transform:translateX(5px); } /* ---------------- STUDIO BAND ---------------- */ .rwz-studio{ padding:6px 0 70px; } .rwz-studio .inner{ border-top:1px solid var(--line); padding-top:44px; display:grid; grid-template-columns:.8fr 1.2fr; gap:34px; align-items:start; } .rwz-studio p{ color:var(--grey); font-weight:300; font-size:17px; line-height:1.7; max-width:54ch; } /* ---------------- NEWSLETTER ---------------- */ .rwz-news{ padding:0 0 84px; } .rwz-news .inner{ border:1px solid var(--line); border-radius:10px; padding:44px 40px; display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; background:radial-gradient(120% 130% at 0% 0%, rgba(255,96,158,.08), transparent 60%); } .rwz-news p.note{ color:var(--grey); font-weight:300; font-size:16px; line-height:1.6; margin-top:8px; max-width:42ch; } /* ---------------- FORMS ---------------- */ .rwz-form{ width:100%; } .rwz-form .row{ display:flex; gap:10px; } .rwz-form input[type=email]{ flex:1; min-width:0; background:var(--surface-2); border:1px solid #2a2a2a; color:var(--ink); font-family:var(--cond); font-size:16px; padding:13px 16px; border-radius:4px; } .rwz-form input[type=email]::placeholder{ color:#5c5c5c; } .rwz-form input[type=email]:focus{ border-color:var(--pink); outline:none; } .rwz-form .form-msg{ font-family:var(--mono); font-size:13px; margin-top:12px; min-height:18px; } .rwz-form .form-msg.ok{ color:#7CE3B0; } .rwz-form .form-msg.error{ color:#FF6B6B; } .rwz-form .fineprint{ font-family:var(--mono); color:var(--muted); font-size:12px; margin-top:10px; } .hp{ position:absolute; left:-9999px; } /* ---------------- GAME / CAMPAIGN PAGE ---------------- */ .rwz-game-hero{ padding:90px 0 70px; text-align:center; background:radial-gradient(120% 90% at 50% -10%, rgba(255,96,158,.14), transparent 60%); } .rwz-badge{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--pink); border:1px solid var(--pink); border-radius:20px; padding:6px 14px; margin-bottom:26px; } .rwz-game-hero h1{ font-weight:700; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(44px,7vw,82px); line-height:.96; margin:0 auto 20px; max-width:16ch; } .rwz-game-hero .pitch{ color:var(--grey); font-weight:300; font-size:clamp(17px,2.2vw,21px); max-width:44ch; margin:0 auto 30px; line-height:1.6; } .rwz-game-hero .when{ font-family:var(--mono); color:var(--muted); font-size:14px; letter-spacing:.04em; margin-bottom:40px; } .rwz-signup{ max-width:520px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:30px 28px; text-align:left; } .rwz-signup h2{ font-weight:500; text-transform:uppercase; font-size:20px; margin-bottom:6px; } .rwz-signup p.note{ color:var(--grey); font-weight:300; font-size:15px; line-height:1.55; margin-bottom:18px; } /* highlight rows on the game page */ .rwz-pillars{ padding:20px 0 80px; } .rwz-pillars .row{ border-top:1px solid var(--line); padding:22px 4px; display:grid; grid-template-columns:160px 1fr; gap:20px; align-items:baseline; } .rwz-pillars .row:last-child{ border-bottom:1px solid var(--line); } .rwz-pillars .row .k{ font-family:var(--mono); color:var(--pink); font-size:14px; } .rwz-pillars .row h3{ font-weight:500; text-transform:uppercase; font-size:19px; margin-bottom:5px; } .rwz-pillars .row p{ color:var(--grey); font-weight:300; font-size:15px; line-height:1.5; } /* ---------------- FOOTER ---------------- */ .rwz-footer{ border-top:1px solid var(--line); padding:28px 0; } .rwz-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .rwz-footer .links{ display:flex; gap:18px; font-family:var(--mono); font-size:13px; color:var(--grey); } .rwz-footer .links a:hover{ color:var(--pink); } .rwz-footer .copy{ font-family:var(--mono); font-size:12px; color:#555; } .rwz-footer .credit{ flex-basis:100%; text-align:center; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:#444; } .rwz-footer .credit a{ color:#555; } .rwz-footer .credit a:hover{ color:var(--pink); } /* ---------------- RESPONSIVE ---------------- */ @media (max-width: 880px){ .rwz-grid{ grid-template-columns:1fr; } .rwz-studio .inner, .rwz-news .inner{ grid-template-columns:1fr; gap:20px; } .rwz-pillars .row{ grid-template-columns:1fr; gap:6px; } } @media (max-width: 620px){ .rwz-header .wrap{ height:auto; padding-top:14px; padding-bottom:14px; flex-wrap:wrap; gap:14px; } .rwz-nav{ gap:16px; flex-wrap:wrap; } .rwz-hero{ padding:48px 0 72px; } .rwz-form .row{ flex-direction:column; } }