/* Iris Edge Studios, irisedgestudios.com Studio chrome is neutral; each game page injects its own accent via . Zero dependencies, no build step, no third-party requests. */ :root { /* ground */ --ink: #0B0B0D; --ink-2: #131317; --ink-3: #1A1A20; --line: #26262E; --line-2: #35353F; /* type */ --bone: #F4F1EC; --muted: #A3A3AE; /* ~6.5:1 on --ink, AA for body */ --muted-2: #8A8A95; /* ~4.8:1 on --ink, AA for small text */ /* studio accent, lifted from the logo's own ground */ --sand: #EDB37A; --sand-deep: #D9975A; --sand-ink: #1B1105; /* per-game accent, overridden by [data-game] below */ --accent: var(--sand); --accent-2: var(--sand-deep); --accent-ink: var(--sand-ink); --accent-soft: rgba(237, 179, 122, 0.13); --accent-line: rgba(237, 179, 122, 0.26); --radius: 16px; --radius-lg: 22px; --maxw: 1120px; /* one type scale */ --fs-display: clamp(38px, 6.4vw, 76px); --fs-h2: clamp(26px, 4.2vw, 40px); --fs-h3: 18px; --fs-body: 16.5px; --fs-small: 13.5px; /* one vertical rhythm */ --sec: clamp(48px, 6.4vw, 92px); --font-display: "Iris Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .8, .25, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } /* Per-game accents. Set on so the whole page, including chrome, retunes. */ [data-game="pinteza"] { --accent: #34A860; --accent-2: #2A8B4F; --accent-ink: #06140B; --accent-soft: rgba(52, 168, 96, 0.13); --accent-line: rgba(52, 168, 96, 0.28); } /* Sampled from the key art itself: #FED378 and #A38C18 dominate it. The earlier purple came from nowhere in the artwork. Gold stays distinct from the studio sand (#EDB37A), which is peach rather than yellow. */ [data-game="cowardly-heroes"] { --accent: #F5C518; --accent-2: #C89A0F; --accent-ink: #1A1400; --accent-soft: rgba(245, 197, 24, 0.13); --accent-line: rgba(245, 197, 24, 0.3); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; /* `overflow-x: hidden` on body alone does NOT contain this: per the overflow propagation rules it is lifted to the viewport and body reverts to visible, so an oversized decorative pseudo-element still widens the document. `clip` on html contains it without creating a scroll container, so sticky headers and smooth scrolling keep working. `hidden` is the fallback where clip is unsupported. */ overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font); font-size: var(--fs-body); color: var(--bone); background: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; position: relative; } /* Ambient field. No blur filter on a fixed layer. That re-rasterizes every scroll frame on mobile. The gradient stops are soft enough already; promote and composite. */ body::before { content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none; background: radial-gradient(38% 38% at 18% 12%, var(--accent-soft), transparent 62%), radial-gradient(34% 34% at 84% 8%, rgba(237, 179, 122, 0.09), transparent 62%), radial-gradient(46% 46% at 62% 92%, var(--accent-soft), transparent 66%); will-change: transform; animation: drift 26s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, 1.4%, 0) scale(1.06); } 100% { transform: translate3d(-2%, -1%, 0) scale(1.02); } } /* Freeze paint-heavy ambience while the user is actively scrolling. app.js toggles html.scrolling and clears it 140ms after motion stops. */ html.scrolling body::before, html.scrolling .hero-mark, html.scrolling .display .sweep { animation-play-state: paused; } a { color: inherit; text-decoration: none; } img, video { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ───────────────────────── the mark ───────────────────────── Alex's own artwork in four layers (tools/logo_parts.py). Percentages are the PSD's 400x400 layer bounding boxes, so the pieces reassemble exactly as he drew them. */ .mark { position: relative; display: block; width: 44px; aspect-ratio: 1 / 1; flex: none; } .mark img { position: absolute; display: block; } .mark .mk-spiral { left: .25%; top: 0; width: 99.75%; height: 92%; } .mark .mk-eye, .mark .mk-iris { left: 0; top: 28%; width: 100%; height: 44%; } .mark .mk-frame { left: 59.25%; top: 28.25%; width: 40.75%; height: 43.5%; } /* the aperture tracks the pointer; only the iris moves, as a real eye does */ .mark .mk-iris { transform: translate(var(--eye-x, 0px), var(--eye-y, 0px)); transition: transform .3s var(--ease-out); } .mark .mk-spiral { transform: rotate(var(--spin, 0deg)); transition: transform .8s var(--ease-out); } /* load ceremony: spiral unwinds, aperture irises open, frame lands last */ .mark[data-animate] .mk-spiral { animation: mk-spin 1.3s var(--ease-out) both; } .mark[data-animate] .mk-eye { animation: mk-eye .8s var(--ease-out) both; } .mark[data-animate] .mk-iris { animation: mk-iris 1.1s var(--ease-out) .12s both; } .mark[data-animate] .mk-frame { animation: mk-frame .6s var(--ease-out) .5s both; } @keyframes mk-spin { from { transform: rotate(-150deg) scale(.82); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mk-eye { from { transform: scaleX(.3); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mk-iris { from { transform: rotate(-90deg) scale(.1); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mk-frame { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } } /* a real blink: the almond closes vertically, the aperture with it */ .mark.blink .mk-eye, .mark.blink .mk-iris { animation: mk-blink .32s var(--ease); } @keyframes mk-blink { 0%, 100% { transform: scaleY(1); } 46% { transform: scaleY(.03); } } /* ───────────────────────── header ───────────────────────── */ header.site { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; } header.site.stuck { background: rgba(11, 11, 13, 0.78); border-bottom-color: var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .bar { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 18px; } .wordmark { display: inline-flex; align-items: center; gap: 11px; } .wordmark .wm-txt { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; letter-spacing: .015em; font-size: 15px; } .wordmark .wm-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; } .wordmark:hover .mark { --open: 48deg; } .wordmark .mark { transition: transform .4s var(--ease); } .wordmark:hover .mark { transform: rotate(-8deg); } .nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted); } .nav > a { position: relative; transition: color .16s; padding-block: 4px; white-space: nowrap; } .nav > a:hover, .nav > a[aria-current="page"] { color: var(--bone); } .nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ease); } .nav > a:not(.nav-cta):hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); } .nav .nav-cta { color: var(--accent); font-weight: 600; border: 1px solid var(--accent-line); background: var(--accent-soft); padding: 7px 15px; border-radius: 10px; transition: background .18s, border-color .18s, transform .18s var(--ease); } .nav .nav-cta:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-1px); } /* mobile nav */ .navtoggle { display: none; background: none; border: 1px solid var(--line-2); color: var(--bone); width: 42px; height: 42px; border-radius: 11px; cursor: pointer; align-items: center; justify-content: center; } .navtoggle svg { width: 19px; height: 19px; } .navtoggle .x { display: none; } body.nav-open .navtoggle .x { display: block; } body.nav-open .navtoggle .burger { display: none; } /* ── language picker (native
, works without JS) ── */ .langpick { position: relative; } .langpick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--muted); transition: color .15s, border-color .15s, background .15s; } .langpick > summary::-webkit-details-marker { display: none; } .langpick[open] > summary, .langpick > summary:hover { color: var(--bone); border-color: var(--accent-line); background: var(--ink-2); } .langpick .globe { width: 15px; height: 15px; opacity: .85; } .langpick .chev { width: 11px; height: 11px; opacity: .7; transition: transform .2s var(--ease); } .langpick[open] .chev { transform: rotate(180deg); } .langpick .menu { position: absolute; right: 0; top: calc(100% + 9px); min-width: 214px; z-index: 60; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 13px; padding: 6px; box-shadow: 0 24px 54px -18px rgba(0, 0, 0, .8); animation: pop-in .17s var(--ease) both; } @keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .langpick.up .menu { top: auto; bottom: calc(100% + 9px); } .langpick .menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font-size: 14px; color: var(--muted); transition: background .12s, color .12s; } .langpick .menu a:hover { background: var(--ink-3); color: var(--bone); } .langpick .menu a[aria-current="true"] { color: var(--bone); } .langpick .menu .code { width: 30px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--ink-3); border: 1px solid var(--line); font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--sand); } .langpick .menu a[aria-current="true"] .code { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .langpick .menu .nm { display: flex; flex-direction: column; line-height: 1.25; } .langpick .menu .nm small { font-size: 11.5px; color: var(--muted-2); } .langpick .menu .check { margin-left: auto; width: 16px; height: 16px; color: var(--accent); opacity: 0; } .langpick .menu a[aria-current="true"] .check { opacity: 1; } /* ───────────────────────── type ───────────────────────── */ .display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; } h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.028em; font-weight: 800; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; } .lead { font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 62ch; } /* gradient sweep on the accented headline phrase */ @property --sweep { syntax: ""; inherits: false; initial-value: 0%; } .display .sweep { color: var(--accent); background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 32%, var(--bone) 47%, var(--sand) 53%, var(--accent) 68%, var(--accent) 100%); background-size: 220% 100%; background-position: var(--sweep) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: sweep 8s var(--ease) 1.4s infinite; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .display .sweep { -webkit-text-fill-color: var(--accent); } } @keyframes sweep { 0%, 24% { --sweep: 0%; } 62%, 100% { --sweep: 100%; } } /* A catalogue label, not a pill. Pills with a leading dot are the single most recognisable tell of a templated landing page, and this is a studio, not a SaaS. */ .eyebrow { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); max-width: 340px; } .eyebrow em { font-style: normal; color: var(--accent); } /* headline words rise behind a mask */ .rise { display: block; overflow: hidden; padding-bottom: .22em; margin-bottom: -.22em; } .rise > span { display: block; animation: rise-up 1s var(--ease-out) both; } .rise:nth-of-type(2) > span { animation-delay: .09s; } .rise:nth-of-type(3) > span { animation-delay: .18s; } @keyframes rise-up { from { transform: translateY(105%); } to { transform: none; } } /* ───────────────────────── buttons ───────────────────────── */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 13px; border: none; cursor: pointer; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; font-size: 15px; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 55%, transparent); transition: transform .17s var(--ease), background .17s, box-shadow .17s; } .btn:hover { transform: translateY(-3px); background: var(--accent-2); box-shadow: 0 18px 38px -10px color-mix(in srgb, var(--accent) 62%, transparent); } .btn:active { transform: translateY(-1px); } .btn svg { width: 17px; height: 17px; position: relative; z-index: 1; } .btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 60%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent); transform: translateX(-160%) skewX(-18deg); } .btn:hover::after { transition: transform .65s var(--ease); transform: translateX(240%) skewX(-18deg); } .btn-ghost { background: var(--ink-2); color: var(--bone); border: 1px solid var(--line-2); box-shadow: none; } .btn-ghost:hover { background: var(--ink-3); border-color: var(--accent); box-shadow: none; } .btn-ghost::after { display: none; } .btn[disabled] { opacity: .55; pointer-events: none; } .cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* text link with an animated rule */ .tlink { color: var(--accent); font-weight: 600; position: relative; white-space: nowrap; } .tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); } .tlink:hover::after { transform: scaleX(1); transform-origin: left; } .tlink .arw { display: inline-block; transition: transform .3s var(--ease); } .tlink:hover .arw { transform: translateX(4px); } /* ───────────────────────── sections ───────────────────────── */ /* Padding on the bottom only. With it on both sides, adjacent sections stacked two full rhythms of empty space between every block, which is what made the pages feel hollow. The first section restores its own top padding. */ section { padding-block: 0 var(--sec); position: relative; } main > section:first-child { padding-top: var(--sec); } main > section.hero:first-child { padding-top: clamp(40px, 6vw, 76px); } .section-head { max-width: 640px; margin-bottom: 46px; } .section-head.center { max-width: 640px; } /* centring retired; kept so old markup does not break */ .section-head p { color: var(--muted); margin-top: 14px; } /* scroll reveal */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal[data-d="1"] { transition-delay: .08s; } .reveal[data-d="2"] { transition-delay: .16s; } .reveal[data-d="3"] { transition-delay: .24s; } .reveal[data-d="4"] { transition-delay: .32s; } /* ───────────────────────── hero ───────────────────────── */ .hero { padding-top: clamp(48px, 8vw, 96px); padding-bottom: var(--sec); position: relative; } .hero::before { content: ""; position: absolute; inset: -80px 0 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0); background-size: 28px 28px; -webkit-mask-image: radial-gradient(115% 82% at 50% 14%, #000 38%, transparent 80%); mask-image: radial-gradient(115% 82% at 50% 14%, #000 38%, transparent 80%); } .hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px 56px; align-items: center; } .hero-copy { animation: fade-up .9s var(--ease-out) both; } .hero .lead { margin-top: 24px; } .hero .cta-row { margin-top: 34px; } @keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .hero-art { display: grid; place-items: center; position: relative; animation: fade-up 1.1s var(--ease-out) .16s both; } .hero-mark { width: min(340px, 74vw); height: auto; color: var(--bone); filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .6)); animation: float 11s ease-in-out infinite alternate; } @keyframes float { from { transform: translateY(-8px); } to { transform: translateY(8px); } } /* Vertical bleed only. A negative horizontal inset here is what pushed the document 39px wider than the viewport on narrow screens. */ .hero-art::before { content: ""; position: absolute; z-index: -1; inset: -14% 0; background: radial-gradient(44% 44% at 50% 46%, var(--accent-soft), transparent 70%), radial-gradient(30% 28% at 64% 26%, rgba(237, 179, 122, .12), transparent 70%); filter: blur(38px); animation: breathe 9s ease-in-out infinite alternate; pointer-events: none; } /* Opacity-only breathe, scaling a blurred layer re-rasterizes it every frame. */ @keyframes breathe { from { opacity: .72; } to { opacity: 1; } } /* ───────────────────────── game bands ───────────────────────── Each game is a full-bleed clickable band carrying its own colour. The whole thing is one , so the target is the entire band rather than a small text link. */ /* The band ends on a hairline; the next panel needs air below it or the two read as one block. */ .bands { display: grid; margin-bottom: var(--sec); } .band-game { position: relative; display: block; overflow: hidden; isolation: isolate; padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); } .bands .band-game:last-child { border-bottom: 1px solid var(--line); } /* the colour wash, and a second layer that lights up on hover */ .band-game .bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 140% at 12% 0%, var(--g-glow), transparent 62%), radial-gradient(90% 120% at 88% 100%, var(--g-glow-2), transparent 66%), linear-gradient(180deg, rgba(11,11,13,0), rgba(11,11,13,.55)); opacity: .75; transition: opacity .55s var(--ease), transform .9s var(--ease); } .band-game:hover .bg, .band-game:focus-visible .bg { opacity: 1; transform: scale(1.04); } /* a hairline of the game's colour that draws across on hover */ .band-game::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--g-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); z-index: 2; } .band-game:hover::after, .band-game:focus-visible::after { transform: scaleX(1); } .band-inner { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(24px, 4vw, 64px); } .band-game:nth-of-type(even) .band-inner { direction: rtl; } .band-game:nth-of-type(even) .band-inner > * { direction: ltr; } .band-art { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .95); transition: transform .7s var(--ease), box-shadow .7s var(--ease); } .band-game:hover .band-art { transform: translateY(-6px) scale(1.012); box-shadow: 0 44px 90px -34px rgba(0, 0, 0, 1); } .band-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .7s var(--ease); filter: saturate(.9); } .band-game:hover .band-art img { transform: scale(1.06); filter: saturate(1.1); } /* the index numeral sits behind the copy and swells slightly on hover */ /* The band clips its overflow, so the numeral has to sit fully inside it. A larger negative offset looked deliberate on a tall band and beheaded on a short one. */ .band-idx { position: absolute; z-index: -1; top: -.08em; left: -.04em; font-family: var(--mono); font-size: clamp(76px, 12vw, 168px); line-height: .78; font-weight: 300; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--g-accent); opacity: .16; transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; } .band-game:hover .band-idx { opacity: .3; transform: translateY(-6px) scale(1.03); } .band-copy { position: relative; } .band-copy h2 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 62px); line-height: .96; letter-spacing: -.035em; margin-bottom: 16px; } .band-copy p { color: var(--muted); max-width: 46ch; font-size: 16px; } .band-meta { display: flex; flex-wrap: wrap; margin: 22px 0 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted-2); text-transform: uppercase; } .band-meta span { padding-right: 14px; margin-right: 14px; border-right: 1px solid var(--line-2); } .band-meta span:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .band-status { color: var(--g-accent); } .band-go { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--g-accent); } .band-go .arw { transition: transform .4s var(--ease); } .band-game:hover .band-go .arw { transform: translateX(7px); } .band-game.pinteza { --g-accent: #34A860; --g-glow: rgba(52,168,96,.16); --g-glow-2: rgba(52,168,96,.08); } .band-game.cowardly { --g-accent: #F5C518; --g-glow: rgba(245,197,24,.15); --g-glow-2: rgba(254,211,120,.08); } @media (max-width: 860px) { .band-inner, .band-game:nth-of-type(even) .band-inner { grid-template-columns: 1fr; direction: ltr; gap: 26px; } .band-art { aspect-ratio: 16 / 9; } .band-idx { font-size: clamp(70px, 22vw, 120px); } } /* ───────────────────────── cards / grids ───────────────────────── */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .card { position: relative; padding: 28px 26px; border-radius: var(--radius); background: linear-gradient(180deg, var(--ink-2), #101014); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 14px 34px -22px rgba(0, 0, 0, .7); transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; } .card:hover { transform: translateY(-4px); border-color: var(--line-2); } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 62% at 50% 0%, var(--accent-soft), transparent 60%); opacity: 0; transition: opacity .22s var(--ease); } .card:hover::after { opacity: 1; } .card .ci { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 16px; color: var(--accent); } .card .ci svg { width: 21px; height: 21px; } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14.5px; } /* the two engagement tracks: hire vs partner */ .card.track { padding: 32px 30px; display: flex; flex-direction: column; } .card.track h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; margin-bottom: 12px; } .card.track > ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; } .card.track > ul li { position: relative; padding-left: 24px; font-size: 14px; color: var(--muted); } .card.track > ul li::before { content: ""; position: absolute; left: 0; top: .58em; width: 10px; height: 2px; border-radius: 2px; background: var(--accent); } /* ── stat row ── */ /* pointer tilt on the game cards. Compositor-only, and the JS clamps the angle. */ .gcard { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d; will-change: transform; } .gcard:hover { --lift: -5px; } /* numbered process list */ .steps { list-style: none; counter-reset: s; display: grid; gap: 2px; } .steps li { counter-increment: s; position: relative; padding: 22px 20px 22px 68px; border-top: 1px solid var(--line); } .steps li:last-child { border-bottom: 1px solid var(--line); } .steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 20px; top: 22px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .06em; } .steps li b { display: block; font-size: 17px; margin-bottom: 5px; letter-spacing: -0.01em; } .steps li span { color: var(--muted); font-size: 14.5px; } /* band. A framed statement block */ .band { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(30px, 4.6vw, 60px); background: linear-gradient(180deg, var(--ink-2), var(--ink)); position: relative; overflow: hidden; } .band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 12% 0%, var(--accent-soft), transparent 60%); } .band > * { position: relative; } /* Trailing margin inside a padded band doubles up with the padding and leaves a dead strip along the bottom of every panel. */ .band > :last-child { margin-bottom: 0; } .band .facts li:last-child { border-bottom: none; padding-bottom: 0; } /* ───────────────────────── screenshots ───────────────────────── Every card gets the same fixed-ratio media box with object-fit: cover. Letting each image set its own height is what left a portrait screenshot dictating the row and a column of dead space under the two landscape ones. */ .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; } .shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); display: flex; flex-direction: column; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; } .shot:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 20px 44px -26px rgba(0, 0, 0, .9); } .shot .media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); } .shot .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .shot:hover .media img { transform: scale(1.04); } /* Portrait phone shots and wide store banners both get contained rather than cropped. A 2:1 banner cover-cropped into a 16:10 box loses the ends of its own headline. */ .shot.portrait .media, .shot.contain .media { display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, var(--accent-soft), var(--ink-3)); } .shot.portrait .media img { width: auto; height: 100%; object-fit: contain; } .shot.contain .media { padding: 14px; } .shot.contain .media img { width: 100%; height: auto; max-height: 100%; object-fit: contain; } .shot figcaption { padding: 13px 15px 15px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); } .shot figcaption b { display: block; color: var(--bone); font-weight: 650; font-size: 14px; margin-bottom: 2px; } /* ── downloadable press assets: show the thing rather than describe it ── */ .assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .asset { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ink-2); transition: transform .26s var(--ease), border-color .26s, box-shadow .26s; } .asset:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .9); } .asset .prev { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 18px; } .asset .prev.dark { background: radial-gradient(120% 100% at 50% 0%, var(--accent-soft), var(--ink-3)); } .asset .prev.sand { background: var(--sand); } .asset .prev.wide { padding: 0; } .asset .prev img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .asset .prev.wide img { width: 100%; height: 100%; object-fit: cover; } .asset .meta { padding: 13px 15px 15px; border-top: 1px solid var(--line); display: grid; gap: 2px; } .asset .meta b { font-size: 14.5px; font-weight: 650; } .asset .meta span { font-size: 12.5px; color: var(--muted-2); font-family: var(--mono); } .asset::after { content: "\2193"; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: rgba(11, 11, 13, .74); color: var(--accent); border: 1px solid var(--line-2); opacity: 0; transition: opacity .22s; } .asset:hover::after { opacity: 1; } /* the Pinteza app icon is pre-masked with transparent corners, so it must NOT get a border-radius: a squircle on a squircle clips the corners off the artwork */ .app-icon { width: min(250px, 60vw); height: auto; filter: drop-shadow(0 26px 54px rgba(0, 0, 0, .75)); animation: float 11s ease-in-out infinite alternate; } /* video facade. Nothing third-party loads until the user clicks */ .vfacade { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--ink-2); cursor: pointer; display: block; width: 100%; padding: 0; } .vfacade img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; } .vfacade:hover img { transform: scale(1.03); opacity: .82; } .vfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .vplay { position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .7); transition: transform .3s var(--ease); } .vfacade:hover .vplay { transform: scale(1.09); } .vplay svg { width: 26px; height: 26px; margin-left: 4px; } .vplay::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: .5; animation: ripple 2.6s var(--ease) infinite; } @keyframes ripple { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.28); opacity: 0; } } /* ───────────────────────── forms ───────────────────────── */ .form { display: grid; gap: 16px; max-width: 620px; } .field { display: grid; gap: 7px; } .field label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { font: inherit; font-size: 15px; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 13px 15px; width: 100%; transition: border-color .18s, background .18s, box-shadow .18s; } .field textarea { min-height: 148px; resize: vertical; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3AE' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 42px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--ink-3); box-shadow: 0 0 0 3px var(--accent-soft); } .field input::placeholder, .field textarea::placeholder { color: #6B6B76; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-msg { font-size: 14px; min-height: 22px; } .form-msg.ok { color: var(--accent); } .form-msg.bad { color: #F0876B; } .biz { display: none; gap: 16px; } .biz.show { display: grid; animation: fade-up .4s var(--ease-out) both; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* contact inbox cards */ .inboxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .inbox { padding: 22px 22px; border-radius: var(--radius); background: var(--ink-2); border: 1px solid var(--line); transition: border-color .2s, transform .2s var(--ease); } .inbox:hover { border-color: var(--accent-line); transform: translateY(-3px); } .inbox h2 { font-size: 15.5px; margin-bottom: 5px; } .inbox p { font-size: 13.5px; color: var(--muted-2); margin-bottom: 11px; } .inbox a { color: var(--accent); font-size: 14px; font-weight: 600; word-break: break-all; } /* ───────────────────────── legal / prose ───────────────────────── */ .prose { max-width: 74ch; } .prose h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); letter-spacing: -0.03em; line-height: 1.06; } .prose h2 { font-size: clamp(20px, 2.6vw, 25px); margin-top: 42px; margin-bottom: 12px; } .prose h3 { font-size: 17px; margin-top: 26px; margin-bottom: 8px; } .prose p, .prose li { color: var(--muted); } .prose p { margin-bottom: 15px; } .prose ul, .prose ol { margin: 0 0 18px 22px; display: grid; gap: 8px; } .prose a:not(.btn):not(.tlink) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .prose strong { color: var(--bone); font-weight: 650; } .prose table { width: 100%; border-collapse: collapse; margin: 18px 0 22px; font-size: 14.5px; } .prose th, .prose td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; color: var(--muted); } .prose th { background: var(--ink-2); color: var(--bone); font-weight: 650; width: 34%; } .updated { color: var(--muted-2); font-size: 13.5px; margin-top: 10px; } .callout { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 13px; padding: 17px 19px; margin: 22px 0; font-size: 14.5px; color: var(--bone); } .crumb { font-size: 13px; color: var(--muted-2); margin-bottom: 20px; } .crumb a { color: var(--muted); } .crumb a:hover { color: var(--bone); } .crumb .sep { margin-inline: 8px; opacity: .5; } .facts { list-style: none; display: grid; gap: 0; margin: 0 0 22px; } .facts li { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); } .facts li b { color: var(--bone); font-weight: 650; } /* ───────────────────────── footer ───────────────────────── */ footer.site { border-top: 1px solid var(--line); padding-block: 54px 34px; margin-top: var(--sec); } .frow { display: flex; align-items: flex-start; justify-content: space-between; gap: 34px; flex-wrap: wrap; } .fcol { display: grid; gap: 11px; align-content: start; } .fcol .fcol-h { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } .fcol a { color: var(--muted); font-size: 14.5px; transition: color .15s; } .fcol a:hover { color: var(--accent); } .socials { display: flex; gap: 10px; flex-wrap: wrap; } .socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: var(--ink-2); transition: color .18s, border-color .18s, transform .18s var(--ease), background .18s; } .socials a:hover { color: var(--accent); border-color: var(--accent-line); background: var(--ink-3); transform: translateY(-3px); } .socials svg { width: 17px; height: 17px; } .fbase { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted-2); } /* ───────────────────────── 404 ───────────────────────── */ .nf { min-height: 66vh; display: grid; place-items: center; text-align: center; } .nf .mark { width: 96px; height: 96px; margin-inline: auto; margin-bottom: 26px; } .nf .code { font-family: var(--mono); font-size: 13px; letter-spacing: .3em; color: var(--accent); margin-bottom: 14px; } /* ───────────────────────── responsive ───────────────────────── */ @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 34px; } .hero-art { order: -1; } .hero-mark { width: min(230px, 56vw); } .grid-3 { grid-template-columns: 1fr 1fr; } .gcard, .gcard:nth-child(even) { grid-template-columns: 1fr; direction: ltr; } .gcard-media { min-height: 216px; } .gcard-media::after { background: linear-gradient(180deg, transparent 34%, var(--ink) 99%); } } /* The wordmark subtitle is the first thing to break the header: it wraps to three lines long before the nav itself runs out of room. */ @media (max-width: 1040px) { .wordmark .wm-txt small { display: none; } } /* Mobile nav switches at 900px, not 720px, between those two widths the desktop nav is technically fitting but visibly cramped, with labels wrapping mid-phrase. */ @media (max-width: 900px) { .navtoggle { display: inline-flex; } .nav { position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: rgba(11, 11, 13, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); padding: 10px 22px 22px; font-size: 17px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .24s var(--ease), transform .24s var(--ease); } body.nav-open .nav { opacity: 1; transform: none; pointer-events: auto; } .nav > a { padding: 15px 0; border-bottom: 1px solid var(--line); } .nav > a::after { display: none; } .nav .nav-cta { margin-top: 16px; text-align: center; padding: 14px; border-bottom: none; } .nav .langpick { margin-top: 16px; } .nav .langpick .menu { position: static; margin-top: 8px; width: 100%; } } @media (max-width: 720px) { .grid-3, .grid-2, .row-2, .inboxes { grid-template-columns: 1fr; } .facts li { grid-template-columns: 1fr; gap: 3px; } .frow { flex-direction: column; gap: 30px; } body { font-size: 16px; } } /* ───────────────────────── reduced motion ───────────────────────── Reduced motion gets a COMPLETE, correct composition. Not a broken one. Reveals resolve to visible, the aperture resolves to open, nothing loops. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .rise > span { transform: none; } .mark .m-blade { --open: 48deg; transform: rotate(48deg); } .mark .m-arc { stroke-dashoffset: 0; } body::before { animation: none; } } /* ───────────────────────── guides ───────────────────────── */ /* Separator lines come from borders on the cards, not from a background showing through the gaps. The gap trick paints any empty cell in a part-filled row. */ .guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--line); } .guide { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: background .28s var(--ease); } .guide:first-child { border-left: 1px solid var(--line); } .guide:hover { background: var(--ink-2); } .guide-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .guide-kicker em { font-style: normal; color: var(--muted-2); letter-spacing: .1em; } .guide h2 { font-family: var(--font-display); font-size: clamp(20px, 2.3vw, 26px); line-height: 1.1; letter-spacing: -0.025em; transition: color .2s; } .guide:hover h2 { color: var(--accent); } .guide p { color: var(--muted); font-size: 14.5px; flex: 1; } .guide-go { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); transition: color .2s, transform .28s var(--ease); } .guide:hover .guide-go { color: var(--accent); transform: translateX(4px); } .guide-body { max-width: 68ch; } .guide-body .eyebrow { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; color: var(--accent); } .guide-body .eyebrow em { color: var(--muted-2); } .guide-body h1 { margin-bottom: 26px; } .guide-body .lead { font-size: clamp(18px, 2.2vw, 21px); color: var(--bone); margin-bottom: 30px; padding-left: 20px; border-left: 2px solid var(--accent); } .guide-body h2 { margin-top: 46px; } .guide-body code { font-family: var(--mono); font-size: .88em; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; color: var(--bone); } .rule { border: 0; border-top: 1px solid var(--line); margin: 46px 0 22px; } .byline { font-size: 14px; color: var(--muted-2); } .byline a { color: var(--accent); font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; margin-left: 6px; white-space: nowrap; } /* ───────────────────────── FAQ ───────────────────────── */ .qa-list { border-top: 1px solid var(--line); max-width: 820px; } .qa { border-bottom: 1px solid var(--line); } .qa > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; font-size: clamp(17px, 2vw, 19px); font-weight: 650; letter-spacing: -0.01em; transition: color .2s; } .qa > summary::-webkit-details-marker { display: none; } .qa > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 22px; line-height: 1; color: var(--accent); transition: transform .28s var(--ease); flex: none; } .qa[open] > summary::after { transform: rotate(45deg); } .qa > summary:hover { color: var(--accent); } .qa-a { padding: 0 40px 24px 0; animation: qa-in .3s var(--ease-out) both; } .qa-a p { color: var(--muted); } .qa-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } @keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ───────────────────────── article byline ───────────────────────── Clear authorship is a ranking signal and a reader signal. The studio is the author; the credential line says why it is worth reading rather than just who wrote it. */ .byline-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; margin-bottom: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .byline-mark { width: 38px; } .byline-who { display: grid; line-height: 1.25; } .byline-who b { font-size: 14.5px; font-weight: 650; } .byline-who span { font-size: 12px; color: var(--muted-2); font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; } .byline-when { margin-left: auto; display: grid; justify-items: end; line-height: 1.4; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; color: var(--muted-2); } .byline-end { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); } .byline-end .byline-mark { flex: none; } .byline-end b { display: block; font-size: 15px; margin-bottom: 6px; } .byline-end p { color: var(--muted); font-size: 14.5px; margin-bottom: 10px; } .byline-end .tlink { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 560px) { .byline-when { margin-left: 0; justify-items: start; } .byline-end { flex-direction: column; gap: 14px; } } /* ───────────────────────── notify form ───────────────────────── */ .notify { max-width: 520px; margin-top: 24px; } .notify-row { display: flex; gap: 10px; flex-wrap: wrap; } .notify .notify-email { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; color: var(--bone); background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 11px; padding: 14px 16px; transition: border-color .18s, background .18s, box-shadow .18s; } .notify .notify-email::placeholder { color: #6B6B76; } .notify .notify-email:focus { outline: none; border-color: var(--accent); background: var(--ink-3); box-shadow: 0 0 0 3px var(--accent-soft); } .notify .btn { flex: 0 0 auto; } .notify .form-msg { margin-top: 12px; } .notify-note { font-size: 13px; color: var(--muted-2); margin-top: 14px; } .notify-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } /* the hero art on a game page should never upscale past its own pixels */ .game-hero-art { max-width: 1280px; margin-inline: auto; } /* a link out to a game's own site, stated plainly rather than hidden in a button */ .offsite { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); margin-top: 30px; } .offsite-txt { display: grid; gap: 2px; } .offsite-txt b { font-size: 15px; } .offsite-txt span { font-size: 13.5px; color: var(--muted); } .offsite .btn { margin-left: auto; } @media (max-width: 560px) { .offsite .btn { margin-left: 0; width: 100%; } }