/* * src/styles.css — ALL styles for the public site (copied to dist/css/style.css by scripts/build.js). * * Who uses it : dist/index.html + dist/404.html + dist/privacypolicy.html + dist/terms.html + dist/creators.html * + dist/news/index.html + dist/news//index.html + dist/unsubscribe.html (via scripts/build.js). * Related : src/render.js (markup + class names; its inline script adds html.js / html.is-page-transition), * src/main.js + src/creators.js + src/unsubscribe.js (adds .is-open / .is-revealed / .is-invalid / .is-ready / * .ticker--static / .hero--offscreen / .hero--intro-done). * * Block order (fixed — keep it): TOKENS → BASE → NAV → HERO → PLATFORMS → GAMES → PUBLISH → CONTACT * → FOOTER → NOT FOUND (404) → LEGAL → CREATORS → UNSUBSCRIBE → NEWS → ANIMATIONS → RESPONSIVE (tablet, mobile). * Breakpoints: desktop ≥1200px · tablet 810–1199px · mobile ≤809px. * Numbers were measured from the original Framer site at 1440 / 1000 / 390px viewports. * "Surface" borders are drawn with an inset box-shadow so they never change an element's size * (the original drew them with an overlay, not a real border). */ /* ======================================================================= TOKENS */ :root { /* colours */ --color-bg: #000; --color-text: #fff; --color-muted: #ccc; --color-border: #222; --color-surface: rgba(13, 13, 13, 0.8); --color-surface-solid: rgb(13, 13, 13); --color-accent: #814ac8; /* rgb(129,74,200) */ --color-accent-light: #df7afe; /* rgb(223,122,254) */ --color-accent-rgb: 129 74 200; /* same purple as channels, for see-through fills: rgb(var(--color-accent-rgb) / 0.4) */ --color-error: #ff7a8a; /* form validation messages and invalid field borders (/creators) */ /* typography */ --font: "Figtree", Arial, sans-serif; /* radii */ --radius-chip: 4px; --radius-badge: 6px; --radius-card: 8px; --radius-box: 12px; --radius-graphic: 18px; --radius-pill: 999px; /* fully rounded pill ("Takes just 2 minutes" on /creators) */ /* layout */ --container: 1200px; --pad-x: 40px; /* side padding of every section (mobile: 24px) */ --section-pad-y: 100px; /* games / publish / contact vertical padding (mobile: 64px) */ /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: var(--ease-out); /* upgraded to a real spring curve below when linear() is supported */ /* reusable fills */ --surface-border: inset 0 0 0 1px var(--color-border); --glow-stops: var(--color-accent-light) 13%, rgba(201, 110, 240, 0) 35%, rgba(164, 92, 219, 0) 64%, var(--color-accent) 88%; /* height of the fixed nav: in-page #anchor jumps stop below it (mobile: 64px) */ --nav-height: 65px; } /* The original site animated with springs (no bounce). linear() samples that curve; browsers without linear() keep the --ease-out fallback above, which looks almost the same. */ @supports (transition-timing-function: linear(0, 1)) { :root { --ease-spring: linear(0, 0.062 2%, 0.212 5%, 0.424 10%, 0.579 15%, 0.693 20%, 0.836 30%, 0.913 40%, 0.953 50%, 0.982 65%, 0.993 80%, 1); } } /* ======================================================================= BASE */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--color-bg); } html { scroll-padding-top: var(--nav-height); } body { font-family: var(--font); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, p, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; } :focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 2px; } /* Visually hidden but readable by screen readers (hero sentence behind the animated words). */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Shared text styles — change a text role here once, every element using it follows. */ /* Label text 14/16.8: badges + tags, nav links, wishlist line, footer bottom strip */ .badge, .nav__link, .platforms__text, .footer__bottom-text { font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; } /* Body text 16/22.4: game description, step card text, footer copyright/address, footer links */ .game-row__desc, .step-card__text, .footer__legal, .footer__links { font-size: 16px; line-height: 22.4px; font-weight: 500; letter-spacing: -0.02em; } .section-title { /* "Publish With Us", "Support Email" */ font-size: 50px; line-height: 55px; font-weight: 550; /* original: Figtree variable font, wght axis 550 */ letter-spacing: -0.04em; color: var(--color-text); } .lead { /* publish intro, contact email line */ font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-muted); } /* Badge: "Releases in 2026", date badges, tags, "Partnership" */ .badge { display: inline-block; padding: 8px 12px; border-radius: var(--radius-badge); background: var(--color-surface); box-shadow: var(--surface-border); color: var(--color-text); white-space: nowrap; } .badge--solid { /* game tags */ background: var(--color-surface-solid); } /* ======================================================================= NAV */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px var(--pad-x); background: var(--color-bg); box-shadow: inset 0 -1px 0 var(--color-border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--container); min-height: 44.8px; margin: 0 auto; } .nav__brand { display: inline-flex; align-items: center; gap: 4px; } .nav__logo { width: 42px; height: 42px; } .nav__brand-name { font-size: 21px; line-height: 25.2px; font-weight: 700; letter-spacing: -0.06em; color: var(--color-text); } .nav__links { display: flex; align-items: center; gap: 2px; padding: 6px 0; } .nav__link { padding: 8px 14px; border-radius: var(--radius-chip); color: var(--color-text); transition: opacity 0.2s ease; } .nav__link:hover { opacity: 0.7; } /* Hamburger (mobile only — shown in RESPONSIVE › mobile) */ .nav__toggle { display: none; position: relative; width: 31px; height: 31px; padding: 0; border: 0; background: transparent; cursor: pointer; } .nav__toggle-line { position: absolute; left: 2.5px; width: 27px; height: 2px; background: var(--color-text); transition: transform 0.3s var(--ease-out), opacity 0.2s ease; } .nav__toggle-line:nth-child(1) { top: 6px; } .nav__toggle-line:nth-child(2) { top: 15px; } .nav__toggle-line:nth-child(3) { top: 24px; } .nav.is-open .nav__toggle-line:nth-child(1) { transform: translateY(9px) rotate(45deg); } .nav.is-open .nav__toggle-line:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ======================================================================= HERO */ .hero { position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; min-height: 640px; /* bottom 165px = original 100px padding + 65px empty slot under the text (keeps the text at the same height) */ padding: 180px var(--pad-x) 165px; overflow: hidden; background: var(--color-bg); text-align: center; } .hero__bg { position: absolute; inset: 0; pointer-events: none; } /* Layer 1: star particles (drawn by initParticles in main.js) */ .hero__particles { position: absolute; inset: 0; } .hero__canvas { display: block; width: 100%; height: 100%; } /* Black disc behind the glow so stars don't shine through the ring's centre */ .hero__void { position: absolute; left: 50%; top: 50%; width: 410px; height: 410px; margin: -205px 0 0 -205px; border-radius: 50%; background: var(--color-bg); } /* Layer 2: purple swirling glow */ .hero__glow { position: absolute; left: 50%; top: 50%; width: 406px; height: 406px; margin: -203px 0 0 -203px; opacity: 0.6; filter: blur(10px); } .hero__circle { position: absolute; left: 50%; top: 50%; border-radius: 50%; } .hero__circle--big { width: 406px; height: 406px; margin: -203px 0 0 -203px; background: linear-gradient(229deg, var(--glow-stops)); } .hero__circle--small { width: 300px; height: 300px; margin: -150px 0 0 -150px; background: linear-gradient(141deg, var(--glow-stops)); } /* Text */ .hero__content { position: relative; z-index: 1; width: 100%; } .hero__title { max-width: 900px; margin: 0 auto; font-size: 70px; line-height: 77px; font-weight: 600; letter-spacing: -2.2px; /* fixed px on purpose: the original keeps -2.2px at every size */ color: var(--color-text); } .hero__subtitle { max-width: 600px; margin: 10px auto 0; font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-muted); } .hero .word { display: inline-block; } /* ======================================================================= PLATFORMS */ .platforms { padding: 50px var(--pad-x); } .platforms__content { display: flex; flex-direction: column; align-items: center; gap: 25px; } .platforms__text { color: var(--color-text); text-align: center; } /* Logo marquee. main.js clones .ticker__list and animates .ticker__track to the left. The clipped + faded box is 700×50 like the original's inner strip (its 630×45 wrapper did not clip). */ .ticker { position: relative; width: 700px; max-width: 100%; height: 50px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%); } .ticker__track, .ticker__list { display: flex; align-items: center; gap: 74px; } .ticker__track { width: max-content; height: 50px; /* logos sit on the ticker's centre line */ will-change: transform; } .ticker__list { flex-shrink: 0; } .ticker__item { flex-shrink: 0; } .ticker__logo { width: auto; max-width: none; } /* Without JS, or with reduced motion (main.js adds .ticker--static): one static, centred row */ html:not(.js) .ticker__track, .ticker--static .ticker__track { position: relative; left: 50%; transform: translateX(-50%); } /* ======================================================================= GAMES */ .games { padding: var(--section-pad-y) var(--pad-x); } .games__header { display: flex; justify-content: center; margin-bottom: 60px; } .games__rows { display: flex; flex-direction: column; gap: 100px; max-width: 1000px; margin: 0 auto; padding-bottom: 100px; } /* One game = graphic box + text column. Even rows are mirrored (game-row--reverse). */ .game-row { display: grid; grid-template-columns: 45% 1fr; /* 450px of 1000px on desktop, 407px on tablet */ grid-template-areas: "graphic text"; column-gap: 80px; align-items: center; } .game-row--reverse { grid-template-columns: 1fr 45%; grid-template-areas: "text graphic"; } .game-row__graphic { --graphic-pad: 50px; /* top padding of the box (tablet 20px, mobile 10px) */ --image-w: 460px; /* image is "contained" in this box: */ --image-h: 228px; /* 1232×706 → 398×228, 460×215 → 460×215 */ grid-area: graphic; position: relative; display: block; aspect-ratio: 450 / 350; border-radius: var(--radius-graphic); overflow: hidden; background: var(--color-surface); } /* Centred horizontally, and vertically inside the area below the top padding. */ .game-row__image { position: absolute; left: 50%; top: calc(50% + var(--graphic-pad) / 2); width: min(var(--image-w), 100% + 10px); /* never more than 5px past each side of the box (as on desktop) */ height: var(--image-h); max-width: none; object-fit: contain; transform: translate(-50%, -50%); } .game-row__text { grid-area: text; display: flex; flex-direction: column; align-items: flex-start; max-width: 470px; } .game-row__text > .badge + .game-row__title { margin-top: 20px; /* space under the date badge (no badge → no gap) */ } .game-row__title { font-size: 35px; line-height: 38.5px; font-weight: 500; letter-spacing: -0.04em; color: var(--color-text); } .game-row__desc { max-width: 450px; margin-top: 10px; color: var(--color-muted); } .game-row__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } /* ======================================================================= PUBLISH */ .publish { padding: var(--section-pad-y) var(--pad-x); } .publish__header { display: flex; flex-direction: column; align-items: center; text-align: center; } .publish__title { width: 100%; max-width: 700px; margin-top: 25px; } .publish__text { width: 100%; max-width: 600px; margin-top: 15px; } .publish__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); /* 440px columns that shrink on narrow tablets */ justify-content: center; gap: 20px; max-width: 900px; margin: 60px auto 0; } .step-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 156px; padding: 20px 30px; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--surface-border); } .step-card__chip { display: inline-block; padding: 6px 9px; border-radius: var(--radius-chip); background: var(--color-surface); box-shadow: var(--surface-border); font-size: 12px; line-height: 12px; font-weight: 500; letter-spacing: -0.04em; color: var(--color-text); } .step-card__title { margin-top: 10px; font-size: 23px; line-height: 27.6px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); } .step-card__text { margin-top: 10px; color: var(--color-muted); } /* ======================================================================= CONTACT */ .contact { padding: var(--section-pad-y) var(--pad-x); } .contact__box { max-width: 750px; margin: 0 auto; padding: 80px 30px; border-radius: var(--radius-box); text-align: center; background: linear-gradient(149deg, rgb(var(--color-accent-rgb) / 0.4) 0%, var(--color-surface) 29%, var(--color-surface) 74%, rgb(var(--color-accent-rgb) / 0.4) 100%); } .contact__line { max-width: 500px; margin: 15px auto 0; } .contact__email { color: var(--color-muted); transition: color 0.2s ease; } .contact__email:hover { color: var(--color-text); } /* ======================================================================= FOOTER */ .footer__main { padding: 64px var(--pad-x); background: radial-gradient(50% 50% at 50% 3.4%, rgb(var(--color-accent-rgb) / 0.3) 0%, rgba(171, 171, 171, 0) 100%); box-shadow: inset 0 2px 0 var(--color-border); } .footer__inner { display: grid; grid-template-columns: 1fr 1fr; /* brand block | link columns */ gap: 20px; align-items: start; max-width: var(--container); margin: 0 auto; } .footer__brand { padding-bottom: 42px; /* original had an empty 15px + 27px slot here */ } .footer__brand-link { display: flex; /* block-level flex: no extra line-box space under the logo */ width: fit-content; align-items: center; gap: 4px; } .footer__logo { width: 71px; height: 71px; } .footer__brand-name { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.06em; color: var(--color-text); } .footer__legal { max-width: 300px; margin-top: 20px; color: var(--color-muted); } .footer__copyright, .footer__address { display: block; } .footer__copyright + .footer__address { margin-top: 22.4px; /* one empty line between copyright and address, like the original */ } .footer__columns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; } .footer__heading { font-size: 18px; line-height: 27px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); } .footer__links { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; } .footer__link { color: var(--color-muted); transition: color 0.2s ease; } .footer__link:hover { color: var(--color-text); } /* Bottom strip under the footer */ .footer__bottom { min-height: 67px; padding: 25px var(--pad-x); background: var(--color-bg); box-shadow: inset 0 2px 0 var(--color-border); text-align: center; } .footer__bottom-text { color: var(--color-muted); } /* ======================================================================= NOT FOUND (404) */ .not-found { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 24px; text-align: center; background: radial-gradient(50% 50% at 50% 30%, rgb(var(--color-accent-rgb) / 0.25) 0%, rgba(0, 0, 0, 0) 100%); } .not-found__box { display: flex; flex-direction: column; align-items: center; max-width: 600px; } .not-found__brand { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 40px; } .not-found__title { margin-top: 25px; } .not-found__text { margin-top: 15px; } .not-found__home { margin-top: 30px; padding: 10px 18px; border-radius: var(--radius-card); background: var(--color-accent); font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--color-text); transition: opacity 0.2s ease; } .not-found__home:hover { opacity: 0.85; } /* ======================================================================= LEGAL (privacy policy page) */ /* dist/privacypolicy.html (). Reuses nav + footer; only this block is new. */ /* No hero on this page: show the nav at once instead of waiting for the hero intro (1.2s) */ .page-legal .nav, .page-creators .nav { animation: none; } .legal { padding: calc(var(--nav-height) + 80px) var(--pad-x) var(--section-pad-y); background: radial-gradient(60% 420px at 50% 0%, rgb(var(--color-accent-rgb) / 0.18) 0%, rgba(0, 0, 0, 0) 100%); } .legal__inner { max-width: 760px; margin: 0 auto; overflow-wrap: break-word; } .legal__header { padding-bottom: 32px; margin-bottom: 8px; box-shadow: inset 0 -1px 0 var(--color-border); } .legal__updated { margin-top: 16px; font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-muted); } .legal__section { padding-top: 40px; } .legal__heading { font-size: 26px; line-height: 32px; font-weight: 550; letter-spacing: -0.03em; color: var(--color-text); } .legal__subheading { margin-top: 28px; font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .legal__text, .legal__list { margin-top: 14px; font-size: 16px; line-height: 26px; font-weight: 400; color: var(--color-muted); } .legal__list { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; } .legal__list li::marker { color: var(--color-accent-light); } .legal strong { font-weight: 600; color: var(--color-text); } .legal__link { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-accent-light); text-underline-offset: 3px; transition: color 0.2s ease; } .legal__link:hover { color: var(--color-accent-light); } /* ======================================================================= CREATORS (content creator program page) */ /* dist/creators.html (). Reuses nav, footer, .section-title, .lead, .legal__list/.legal__text/ .legal__link (terms box); form classes are cform__*. States from src/creators.js: .is-ready, .is-unavailable, .is-invalid. */ .creators { padding: calc(var(--nav-height) + 80px) var(--pad-x) var(--section-pad-y); background: radial-gradient(60% 420px at 50% 0%, rgb(var(--color-accent-rgb) / 0.18) 0%, rgba(0, 0, 0, 0) 100%); } .creators__inner { max-width: 760px; margin: 0 auto; overflow-wrap: break-word; } .creators__intro { margin-top: 20px; } /* "Takes just 2 minutes" pill above the title (site.json › creators.timeBadge; empty → not rendered) */ .creators__time { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-bottom: 20px; padding: 7px 14px 7px 11px; border-radius: var(--radius-pill); background: rgb(var(--color-accent-rgb) / 0.18); box-shadow: inset 0 0 0 1px rgb(var(--color-accent-rgb) / 0.7); font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); white-space: nowrap; } .creators__time-icon { flex: none; color: var(--color-accent-light); } .creators__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; } .creators__card, .cform__section, .cform__success { padding: 28px; border-radius: var(--radius-box); background: var(--color-surface); box-shadow: var(--surface-border); } .creators__card-title { font-size: 22px; line-height: 28px; font-weight: 550; letter-spacing: -0.03em; color: var(--color-text); } .creators__list { margin-top: 14px; } .cform-wrap { margin-top: 48px; } .cform { color-scheme: dark; } .cform__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; } .cform__hint, .cform__help, .cform__counter, .cform__terms-intro { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--color-muted); } .cform__hint { margin-bottom: 20px; } .cform__notice, .cform__summary, .cform__send-error { margin-bottom: 20px; padding: 16px 20px; border-radius: var(--radius-card); font-size: 16px; line-height: 24px; font-weight: 500; } .cform__notice { background: rgb(var(--color-accent-rgb) / 0.18); box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-text); } .cform__summary, .cform__send-error { background: rgba(13, 13, 13, 0.9); box-shadow: inset 0 0 0 1px var(--color-error); color: var(--color-text); } .cform__send-error { margin: 0; } .cform__summary-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; } .cform__summary-list a { color: var(--color-error); text-decoration: underline; text-underline-offset: 3px; } .cform__notice[hidden], .cform__summary[hidden], .cform__send-error[hidden], .cform__error[hidden], .cform__field[hidden], .cform__success[hidden], .cform[hidden] { display: none; } /* Section card:

/ .cformsection { min-width: 0; margin: 0; border: 0; } .cformlegend { float: left; / keeps the legend inside the padded card instead of on the border line / width: 100%; padding: 0; } .cformlegend + { clear: both; } .cformheading { font-size: 26px; line-height: 32px; font-weight: 550; letter-spacing: -0.03em; color: var(--color-text); } .cformfield { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; } .cformlabel { display: block; float: none; width: 100%; padding: 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--color-text); } .cformreq, .cformopt { margin-left: 6px; font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; } .cformreq { color: var(--color-accent-light); } .cformopt { color: var(--color-muted); } .cformhelp { margin-top: 4px; } .cforminput { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-solid); color: var(--color-text); font: inherit; font-size: 16px; /* ≥16px: no zoom-on-focus on iOS / line-height: 22px; transition: border-color 0.2s ease; } .cforminput:hover { border-color: #3a3a3a; } .cforminput:focus { border-color: var(--color-accent-light); outline: none; } .cforminput:focus-visible { outline: 2px solid var(--color-accent-light); outline-offset: 2px; } .cformtextarea { min-height: 96px; resize: vertical; } .cformcounter { margin-top: 6px; text-align: right; } .cformcounter.is-over { color: var(--color-error); } .cformchoices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 10px; } .cformchoice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: var(--radius-card); background: var(--color-surface-solid); box-shadow: var(--surface-border); font-size: 15px; line-height: 20px; font-weight: 500; color: var(--color-text); cursor: pointer; } .cformchoice:hover { box-shadow: inset 0 0 0 1px #3a3a3a; } .cformchoice:has(input:checked) { box-shadow: inset 0 0 0 1px var(--color-accent-light); } .cformchoice input, .cformconsent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-accent); } .cformerror { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--color-error); } .cformfield.is-invalid .cforminput, .cforminput[aria-invalid="true"] { border-color: var(--color-error); } .cformgroup.is-invalid .cformchoice { box-shadow: inset 0 0 0 1px rgb(255 122 138 / 0.55); } / Terms box: scrolls on its own so the consent boxes and button stay close / .cformterms { max-height: 420px; margin-top: 20px; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-card); background: var(--color-surface-solid); box-shadow: var(--surface-border); } .cformterms-title { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .cformterms-intro { margin-top: 4px; } .cformterms-section { padding-top: 20px; } .cformterms-heading { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--color-text); } .cformterms strong { font-weight: 600; color: var(--color-text); } .cformterms .legaltext, .cformterms .legallist { font-size: 15px; line-height: 24px; } .cformterms-link { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--color-muted); } .cformconsent { display: flex; align-items: flex-start; gap: 12px; margin-top: 20px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--color-muted); } .cformconsent input { width: 20px; height: 20px; margin-top: 2px; } .cformconsent label { cursor: pointer; } .cformhp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .cformsubmit { align-self: flex-start; padding: 14px 26px; border: 0; border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-text); font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background-color 0.2s ease, opacity 0.2s ease; } .cformsubmit:hover:not(:disabled) { background: #9460d6; } .cformsubmit:disabled { opacity: 0.45; cursor: not-allowed; } / Firebase config not filled in: greyed out, nothing can be used / .cform.is-unavailable .cformbody { opacity: 0.5; } .cformsuccess-text { margin-top: 12px; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--color-muted); } / ======================================================================= UNSUBSCRIBE (/unsubscribe, news e-mail opt-out) / / dist/unsubscribe.html (), built only with a configured Firebase web config. Same page frame as CREATORS; the form itself reuses the cform* classes above. / .page-unsubscribe .nav { animation: none; } .unsubscribe { padding: calc(var(--nav-height) + 80px) var(--pad-x) var(--section-pad-y); background: radial-gradient(60% 420px at 50% 0%, rgb(var(--color-accent-rgb) / 0.18) 0%, rgba(0, 0, 0, 0) 100%); } .unsubscribeinner { max-width: 560px; margin: 0 auto; overflow-wrap: break-word; } .unsubscribeintro { margin-top: 20px; } .unsubscribeform, .unsubscribeinner > .cformsuccess { margin-top: 40px; } .unsubscribeform .cformsection { display: flex; flex-direction: column; gap: 20px; } / ======================================================================= NEWS (/news/ list + /news// posts) / / dist/news/index.html and dist/news//index.html (). Reuses nav, footer, .badge, .section-title, .lead and .legallink (links inside a post). Same page frame as LEGAL: purple glow at the top, 760px reading column. / .page-news .nav { animation: none; } .news, .post { padding: calc(var(--nav-height) + 80px) var(--pad-x) var(--section-pad-y); background: radial-gradient(60% 420px at 50% 0%, rgb(var(--color-accent-rgb) / 0.18) 0%, rgba(0, 0, 0, 0) 100%); } .newsinner { max-width: 1000px; margin: 0 auto; } .newsheader { max-width: 760px; } .newsintro { margin-top: 20px; } / Cards: 2 columns; the newest post (--featured) spans both, cover left / text right / .newslist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; } .news-card { position: relative; / the title link's ::after covers the whole card / display: flex; flex-direction: column; border-radius: var(--radius-box); background: var(--color-surface); box-shadow: var(--surface-border); overflow: hidden; transition: box-shadow 0.2s ease; } .news-card:hover { box-shadow: inset 0 0 0 1px rgb(var(--color-accent-rgb) / 0.9); } .news-card--featured { grid-column: 1 / -1; flex-direction: row; } .news-cardmedia { aspect-ratio: 1200 / 630; background: var(--color-surface-solid); } .news-card--featured .news-cardmedia { flex: 0 0 50%; aspect-ratio: auto; min-height: 280px; } .news-cardimage { width: 100%; height: 100%; object-fit: cover; } .news-cardbody { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; overflow-wrap: break-word; } .news-cardtitle { margin-top: 18px; font-size: 26px; line-height: 32px; font-weight: 550; letter-spacing: -0.03em; color: var(--color-text); } .news-card--featured .news-cardtitle { font-size: 35px; line-height: 38.5px; letter-spacing: -0.04em; } .news-cardlink::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .news-cardlink:focus-visible { outline: none; } .news-cardlink:focus-visible::after { outline: 2px solid var(--color-accent-light); outline-offset: -2px; border-radius: var(--radius-box); } .news-carddesc { margin-top: 12px; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--color-muted); } .news-cardmore { margin-top: auto; padding-top: 22px; font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); } .news-cardarrow { display: inline-block; color: var(--color-accent-light); transition: transform 0.2s ease; } .news-card:hover .news-cardarrow { transform: translateX(4px); } / Category badge + date (cards and post header) / .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .post-metadate { font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-muted); } / Article page / .postinner { max-width: 760px; margin: 0 auto; overflow-wrap: break-word; } .postback { display: inline-flex; gap: 6px; font-size: 14px; line-height: 16.8px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-muted); transition: color 0.2s ease; } .postback:hover { color: var(--color-text); } .postheader { margin-top: 28px; padding-bottom: 32px; box-shadow: inset 0 -1px 0 var(--color-border); } .posttitle { margin-top: 20px; } .postauthor { margin-top: 16px; font-size: 14px; line-height: 16.8px; font-weight: 500; color: var(--color-muted); } .postcover { margin: 40px 0 0; border-radius: var(--radius-graphic); overflow: hidden; background: var(--color-surface); } .postcover img { width: 100%; } .postbody { padding-top: 8px; font-size: 18px; line-height: 29px; font-weight: 400; color: var(--color-muted); } .postbody p, .postbody ul, .postbody ol, .postbody blockquote { margin: 20px 0 0; } .postbody h2 { margin-top: 44px; font-size: 26px; line-height: 32px; font-weight: 550; letter-spacing: -0.03em; color: var(--color-text); } .postbody h3 { margin-top: 32px; font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text); } .postbody ul, .postbody ol { display: flex; flex-direction: column; gap: 10px; padding-left: 24px; } .postbody ul { list-style: disc; } .postbody ol { list-style: decimal; } .postbody li::marker { color: var(--color-accent-light); } .postbody blockquote { padding: 4px 0 4px 20px; box-shadow: inset 3px 0 0 var(--color-accent); color: var(--color-text); } .postbody blockquote p { margin: 0; } .postbody figure { margin: 32px 0 0; border-radius: var(--radius-box); overflow: hidden; } .postbody figure img { width: 100%; } .postbody hr { height: 1px; margin: 40px 0 0; border: 0; background: var(--color-border); } .postbody strong { font-weight: 600; color: var(--color-text); } / "Wishlist on Steam" (only rendered when the post's game has a Steam store url) / .postcta { margin-top: 48px; padding: 32px; border-radius: var(--radius-box); background: radial-gradient(80% 120% at 0% 0%, rgb(var(--color-accent-rgb) / 0.35) 0%, rgba(0, 0, 0, 0) 100%), var(--color-surface); box-shadow: var(--surface-border); text-align: center; } .postwishlist { display: inline-block; padding: 12px 22px; border-radius: var(--radius-card); background: var(--color-accent); font-size: 16px; line-height: 22.4px; font-weight: 500; color: var(--color-text); transition: opacity 0.2s ease; } .postwishlist:hover { opacity: 0.85; } / ======================================================================= ANIMATIONS / / Nav slides down together with the hero title (original: spring damping 60 / stiffness 320, delay 1.2s). view-transition-name lifts the nav out of the page fade below, so it stays put between pages. / .nav { animation: nav-intro 1.1s var(--ease-spring) 1.2s both; view-transition-name: site-nav; } / Arrived through a page transition (class set by the inline script in render.js on `pagereveal`): the nav is already on screen, so skip the intro — otherwise it would vanish and slide in again. / html.is-page-transition .nav { animation: none; } / Page transitions (cross-document View Transitions, same-origin links + back/forward). Chromium 126+ and Safari 18.2+: the old page fades out, the new one fades in rising 8px; the nav does not move. Other browsers (Firefox, older ones) ignore these rules and load the next page as before. The opt-in sits inside `no-preference`, so with prefers-reduced-motion there is no transition at all. Smooth scrolling for #anchor jumps (and creators.js scrollIntoView) follows the same rule. / @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } html { scroll-behavior: smooth; } } ::view-transition-old(root) { animation: page-out 0.2s ease-out both; } ::view-transition-new(root) { animation: page-in 0.3s var(--ease-out) both; } / Nav is the same on both pages: swap it instantly (no crossfade, no movement) / ::view-transition-group(site-nav), ::view-transition-new(site-nav) { animation: none; } ::view-transition-old(site-nav) { animation: none; opacity: 0; } / Only one side has a nav (404 page has none): it fades together with the page / ::view-transition-old(site-nav):only-child { opacity: 1; animation: page-out 0.2s ease-out both; } ::view-transition-new(site-nav):only-child { animation: page-in 0.3s var(--ease-out) both; } / Stars fade in / .heroparticles { animation: fade-in 2s var(--ease-out) 0.6s both; } / Glow circles rotate in opposite directions / .herocircle--big { animation: spin-reverse 10s linear infinite; } .herocircle--small { animation: spin 12s linear infinite; } / main.js › initGlowPause adds .hero--offscreen while the hero is scrolled out of view / .hero--offscreen .herocircle { animation-play-state: paused; } / Hero words blur in one by one (original: Framer text effect, spring damping 100 / stiffness 400). --i (set in render.js) is the word's index in its own line: title words start at 1.2s, subtitle words at 1.3s, each word 50ms after the previous one. / .hero .word { animation: word-in 1.5s var(--ease-spring) both; animation-delay: calc(var(--words-start) + var(--i, 0) 0.05s); } .herotitle { --words-start: 1.2s; } .herosubtitle { --words-start: 1.3s; } .hero--intro-done .word { animation: none; /* frees the blur layers once the intro is over / } / Scroll reveal (main.js › initReveal adds .is-revealed). Hidden start state only when JS runs. Used on: platforms block, games badge, publish header, step cards, contact box (same as the original). / html.js [data-reveal] { opacity: 0; transform: translateY(50px); transition: opacity 1.3s var(--ease-spring), transform 1.3s var(--ease-spring); transition-delay: var(--reveal-delay, 0ms); } html.js [data-reveal].is-revealed { opacity: 1; transform: none; } / Ticker has its own slower intro that starts on page load (original: delay .4s, 2s) / .ticker { animation: ticker-in 2s var(--ease-out) 0.4s both; } / Mobile dropdown menu / .nav.is-open .navlinks { animation: menu-in 0.25s var(--ease-out) both; } @keyframes nav-intro { from { transform: translateY(-150px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @keyframes word-in { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: none; } } @keyframes ticker-in { from { opacity: 0; transform: perspective(1200px) translateY(80px) scale(0.9); } to { opacity: 1; transform: none; } } @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes page-out { from { opacity: 1; } to { opacity: 0; } } @keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } / Everything simply visible for people who prefer less motion. (Page transitions and smooth scrolling need no rule here: they are only switched on under `no-preference` above.) / @media (prefers-reduced-motion: reduce) { .nav, .heroparticles, .herocircle--big, .herocircle--small, .hero .word, .ticker, .nav.is-open .navlinks { animation: none; } html.js [data-reveal] { opacity: 1; transform: none; transition: none; } .navtoggle-line, .news-cardarrow { transition: none; } } / Printing: sections that were never scrolled into view must not print blank / @media print { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } } / ======================================================================= RESPONSIVE › tablet (810–1199px) / @media (max-width: 1199.98px) { .herotitle { font-size: 56px; line-height: 61.6px; } .herosubtitle { / measured from the original at 1000px: 16/24 (not 18/27) / font-size: 16px; line-height: 24px; } .section-title { font-size: 40px; line-height: 44px; } .lead { / measured from the original at 1000px / font-size: 16px; line-height: 24px; } .game-rowgraphic { --graphic-pad: 20px; } } / ======================================================================= RESPONSIVE › mobile (≤809px) / @media (max-width: 809.98px) { :root { --pad-x: 24px; --section-pad-y: 64px; --nav-height: 64px; } / NAV / .nav { height: 64px; padding: 16px 20px 14px; } .navinner { min-height: 34px; } .navlogo { width: 34px; height: 34px; } .navtoggle { display: block; } .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .nav.is-open .navlinks { display: flex; } .navlink { padding: 0; font-size: 16px; line-height: 19.2px; } / Without JS the menu button cannot work: hide it and show the links as a wrapped row under the brand / html:not(.js) .navtoggle { display: none; } html:not(.js) .nav { height: auto; } html:not(.js) .navinner { flex-wrap: wrap; } html:not(.js) .navlinks { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; width: 100%; padding: 12px 0 0; border: 0; } / HERO / .hero { height: auto; min-height: 0; padding: 180px var(--pad-x) 165px; } .herotitle { font-size: 45px; line-height: 49.5px; } / PLATFORMS / .platforms { padding: 35px var(--pad-x); } / GAMES — always graphic first, then text / .gamesrows { padding-bottom: 0; } .game-row, .game-row--reverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "graphic" "text"; row-gap: 20px; } .game-rowgraphic { --graphic-pad: 10px; aspect-ratio: auto; height: 238px; } .game-rowimage { / fully visible, fitted to the box / left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 10px); transform: none; } .game-rowtext, .game-rowdesc { max-width: none; } / PUBLISH / .publishgrid { grid-template-columns: minmax(0, 1fr); gap: 20px; } .step-card { min-height: 0; padding: 10px; } .section-title { font-size: 28px; line-height: 30.8px; } / FOOTER / .footermain { padding: 40px var(--pad-x) 35px; } .footerinner { grid-template-columns: minmax(0, 1fr); gap: 25px; } .footerbrand { padding-bottom: 47px; } .footerbrand-name { font-size: 26px; line-height: 31.2px; } .footercolumns { gap: 20px; padding-bottom: 20px; } / LEGAL / .legal { padding-top: calc(var(--nav-height) + 48px); } .legalheader { padding-bottom: 24px; } .legalsection { padding-top: 32px; } .legalheading { font-size: 22px; line-height: 28px; } .legalsubheading { font-size: 18px; line-height: 24px; } / CREATORS / .creators, .unsubscribe { padding-top: calc(var(--nav-height) + 48px); } .creatorscards { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } .creatorscard, .cformsection, .cformsuccess { padding: 20px 16px; } .cformheading { font-size: 22px; line-height: 28px; } .cformchoices { grid-template-columns: minmax(0, 1fr); } .cformterms { max-height: 360px; padding: 16px; } .cformsubmit { align-self: stretch; } / NEWS */ .news, .post { padding-top: calc(var(--nav-height) + 48px); } .newslist { grid-template-columns: minmax(0, 1fr); margin-top: 32px; } .news-card--featured { flex-direction: column; } .news-card--featured .news-cardmedia { flex: none; aspect-ratio: 1200 / 630; min-height: 0; } .news-cardbody { padding: 20px 16px 22px; } .news-cardtitle, .news-card--featured .news-cardtitle { font-size: 22px; line-height: 28px; letter-spacing: -0.03em; } .postheader { padding-bottom: 24px; } .postbody { font-size: 16px; line-height: 26px; } .postbody h2 { margin-top: 36px; font-size: 22px; line-height: 28px; } .postbody h3 { font-size: 18px; line-height: 24px; } .postcta { padding: 24px 16px; } .postwishlist { display: block; } }