/* ============================================================= Tideloo — Design System Colours, type scale and metrics sampled from main-reference.png ============================================================= */ /* ---------- Fonts ---------- Four static cuts rather than one variable file. iOS WebKit does not reliably apply the weight axis of a variable woff2, which collapsed every weight on the page into one heavy rendering. Static faces map 1:1 to the weights the design uses, and the browser only downloads the ones a page actually needs. */ @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* Brand — sampled from the reference */ --blue: #002bf8; /* buttons, links, accents */ --blue-hover: #0022cf; --blue-deep: #0031e6; /* filled panels / bands */ --blue-dark: #002ca6; /* footer, under the wave */ --blue-soft: #eef1ff; --blue-tint: #f6f8fe; /* Ink */ --ink: #060b2b; --body: #2b3049; --muted: #54566e; --placeholder: #8d8ea6; /* Surfaces */ --page: #fdfdfe; --surface: #ffffff; --line: #e9ecf4; --line-strong: #dfe4f0; /* Layout */ --max: 1560px; --band-inset: 28px; --band-pad: 48px; /* The whole page — full-bleed artwork included — stops growing here, so zooming out shrinks everything together instead of leaving a small text column beside a giant image. At 1920 nothing is capped. */ --site-max: 1920px; --vw: min(100vw, var(--site-max)); /* Widest the text container ever gets, and its distance from the page edge at any width — lets art bleed to the edge without magic numbers. */ --wrap-max: calc(var(--max) - var(--band-pad) * 2); --wrap-gutter: max( calc(var(--band-inset) + var(--band-pad)), calc((var(--vw) - var(--wrap-max)) / 2) ); /* Radii */ --r-btn: 12px; --r-card: 16px; --r-img: 14px; --r-band: 28px; --r-pill: 999px; /* Elevation */ --shadow-sm: 0 2px 10px rgba(6, 11, 43, .05); --shadow-md: 0 10px 30px rgba(6, 11, 43, .07); --shadow-lg: 0 22px 60px rgba(6, 11, 43, .10); --shadow-blue: 0 12px 30px rgba(0, 43, 248, .25); /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Safari must not resize text on rotate */ text-size-adjust: 100%; scroll-behavior: smooth; background: #fff; /* only ever visible past --site-max */ /* iOS honours overflow-x on only intermittently — without the same rule on the page can still be panned sideways. */ overflow-x: hidden; overscroll-behavior-x: none; } body { margin: 0 auto; max-width: var(--site-max); width: 100%; position: relative; background: var(--page); color: var(--body); font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.65; font-weight: 400; font-synthesis-weight: none; /* never let the OS fake a bold */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overscroll-behavior-x: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } /* Artwork is not selectable, draggable or directly targetable. Clicks fall through to the parent link, so cards and the logo still work. A deterrent, not DRM — the files are still reachable over the network. */ img, svg, .brand__mark, .brand__word, .sparkle { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; } /* …except icons that carry their own interaction */ a svg, button svg { pointer-events: none; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid rgba(0, 43, 248, .45); outline-offset: 3px; border-radius: 4px; } ::selection { background: rgba(0, 43, 248, .18); color: var(--ink); } ::-moz-selection { background: rgba(0, 43, 248, .18); color: var(--ink); } /* ---------- Layout primitives ---------- */ .band { width: min(100% - (var(--band-inset) * 2), var(--max)); margin-inline: auto; } .wrap { width: min(100% - (var(--wrap-gutter) * 2), var(--wrap-max)); margin-inline: auto; } .wrap--wide { width: min(100% - ((var(--band-inset) + 16px) * 2), calc(var(--max) - 32px)); margin-inline: auto; } /* ---------- Type ---------- */ .h-hero, .h1, .h2, .h3, .h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.025em; } /* Display sizes track the reference 1:1 at a 1122px viewport, then scale up */ .h-hero { font-size: clamp(52px, 10.5vw, 140px); line-height: .92; letter-spacing: -0.035em; } .h1 { font-size: clamp(42px, 6.8vw, 92px); line-height: 1.02; letter-spacing: -0.032em; } .h1--long { font-size: clamp(38px, 5.3vw, 72px); line-height: 1.08; } .h2 { font-size: clamp(30px, 3.55vw, 48px); line-height: 1.15; letter-spacing: -0.028em; } .h3 { font-size: clamp(22px, 2.1vw, 29px); line-height: 1.32; letter-spacing: -0.022em; font-weight: 600; } .h4 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; } /* One size for every hero supporting paragraph, so the pages match */ .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--body); } .body-sm { font-size: 15px; line-height: 1.6; } .muted { color: var(--muted); } .accent { color: var(--blue); } .eyebrow { font-size: 15px; font-weight: 600; color: var(--blue); letter-spacing: -0.01em; } /* ---------- Buttons ---------- */ .btn { --btn-h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: var(--btn-h); padding: 0 28px; border-radius: var(--r-btn); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-radius .35s var(--ease); } /* Corners round right out on hover. The target is exactly half the height, not 999px: the browser clamps the *used* radius to half the height, so animating toward 999px finishes visually in the first few milliseconds and reads as a jump rather than a transition. */ .btn:hover { border-radius: calc(var(--btn-h) / 2); } .btn svg { flex: none; transition: transform .25s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); } .btn--primary:hover { background: var(--blue-hover); transform: translateY(-2px); } .btn--primary:active { transform: translateY(0); } .btn--white { background: #fff; color: var(--blue); box-shadow: 0 10px 26px rgba(0, 20, 90, .18); } .btn--white:hover { background: #f2f5ff; transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); } .btn--ghost:hover { border-color: var(--blue); color: var(--blue); } .btn--sm { --btn-h: 48px; padding: 0 24px; font-size: 16px; gap: 10px; } .btn--lg { --btn-h: 64px; padding: 0 32px; font-size: 19px; gap: 14px; } /* Text link with arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--blue); letter-spacing: -0.01em; } .link-arrow svg { transition: transform .3s var(--ease); } .link-arrow:hover svg { transform: translateX(5px); } .link-arrow--white { color: #fff; } /* Expanded: the arrow turns back on itself to read as "collapse" */ .link-arrow[aria-expanded="true"] svg { transform: rotate(180deg); } .link-arrow[aria-expanded="true"]:hover svg { transform: rotate(180deg) translateX(5px); } /* Circular icon button (game cards) */ .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-pill); background: var(--blue); color: #fff; transition: transform .25s var(--ease), background-color .2s var(--ease); } .icon-btn--white { background: #fff; color: var(--blue); } .icon-btn svg { transition: transform .25s var(--ease); } /* Play button (Watch Showreel) */ .play-link { display: inline-flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 600; color: var(--ink); } .play-circle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-pill); border: 2px solid var(--blue); color: var(--blue); transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .play-link:hover .play-circle { background: var(--blue); color: #fff; transform: scale(1.06); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgba(253, 253, 254, .86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(6, 11, 43, .04); } .site-header__inner { display: flex; align-items: center; gap: 24px; height: 104px; } .brand { display: inline-flex; align-items: center; gap: 11px; color: var(--blue); } .brand__mark { width: 25px; height: 40px; background: currentColor; -webkit-mask: url('../img/tideloo-mark.svg') center / contain no-repeat; mask: url('../img/tideloo-mark.svg') center / contain no-repeat; } .brand__word { width: 116px; height: 25px; background: currentColor; -webkit-mask: url('../img/tideloo-wordmark.svg') left center / contain no-repeat; mask: url('../img/tideloo-wordmark.svg') left center / contain no-repeat; } .brand--footer { color: #fff; } .brand--footer .brand__mark { width: 28px; height: 45px; } .brand--footer .brand__word { width: 132px; height: 28px; } .nav { margin-inline: auto; } .nav__list { display: flex; align-items: center; gap: 42px; } .nav__link { position: relative; font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: color .2s var(--ease); } .nav__link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transition: transform .25s var(--ease); } .nav__link:hover { color: var(--blue); } .nav__link:hover::after { transform: scaleX(1); } .nav__link.is-active { color: var(--blue); font-weight: 600; } .nav__link.is-active::after { transform: scaleX(1); } /* Menu button — same pill language as the brand buttons */ .nav-toggle { display: none; place-items: center; align-content: center; width: 50px; height: 50px; border-radius: var(--r-btn); background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); transition: background-color .2s var(--ease), transform .2s var(--ease); } .nav-toggle:hover { background: var(--blue-hover); transform: translateY(-1px); } .nav-toggle:active { transform: translateY(0); } .nav-toggle span { display: block; width: 19px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .28s var(--ease), opacity .18s var(--ease), width .28s var(--ease); } .nav-toggle span + span { margin-top: 4.5px; } .nav-toggle span:nth-child(3) { width: 13px; } /* stepped, like a wave */ .nav-toggle:hover span:nth-child(3) { width: 19px; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { width: 19px; transform: translateY(-7px) rotate(-45deg); } /* ---------- Hero (shared) ---------- */ .hero { position: relative; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; } .hero__inner { position: relative; z-index: 1; } .hero-home { min-height: clamp(620px, calc(var(--vw) * .52), 940px); display: flex; align-items: center; } /* Dissolves the artwork's bottom edge so no hard cut shows beside the stats card */ .hero-home .hero__bg { -webkit-mask: linear-gradient(180deg, #000 86%, transparent 100%); mask: linear-gradient(180deg, #000 86%, transparent 100%); } .hero-home .hero__inner { padding: 40px 0 74px; } .hero-home .hero__copy { max-width: 54%; } .hero-home .h-hero { position: relative; } .h-hero__word { position: relative; display: inline-block; } /* 4-point star accent */ .sparkle { position: absolute; display: inline-block; color: var(--blue); background: currentColor; pointer-events: none; -webkit-mask: url('../img/sparkle.svg') center / contain no-repeat; mask: url('../img/sparkle.svg') center / contain no-repeat; } .hero-home .sparkle { top: .01em; right: -.52em; width: .33em; height: .40em; } .hero-home .lead { margin-top: 34px; max-width: 25em; } .hero__actions { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin-top: 44px; } /* Inner-page hero */ .hero-page { position: relative; overflow: hidden; } .hero-page__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 74px 0 82px; } /* Tall artwork must not push the copy down the page — pin it to the top */ .hero-page__grid--top { align-items: start; padding-top: 40px; } .hero-page__grid--top > :first-child { padding-top: 26px; } .hero-page__art { position: relative; } .hero-page__art img { width: 100%; border-radius: var(--r-card); } /* Art that runs out to the right viewport edge */ .bleed-right { position: relative; margin-right: calc(var(--wrap-gutter) * -1); } /* Games hero — soft wave silhouette behind the mascot */ .hero-games { position: relative; overflow: hidden; } .hero-games__wave { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(90deg, transparent 2%, #000 26%); mask: linear-gradient(90deg, transparent 2%, #000 26%); } .hero-games__wave svg { width: 100%; height: auto; } /* Ribbon sits behind; the mascot PNG carries its own alpha so it just overlaps. Tight bottom padding so the first row of games peeks above the fold. */ .hero-games .hero-page__grid { position: relative; z-index: 1; padding: 44px 0 8px; } .hero-games__art img { border-radius: 0; } /* ---------- Section rhythm ---------- */ .section { padding: 96px 0; } .section--tight { padding: 72px 0; } .section-head { margin-bottom: 52px; } .section-head--center { text-align: center; } /* Bands stacked directly on top of each other (home page) */ .band-stack { display: grid; gap: 22px; padding: 0 0 8px; } /* Anchor targets have to clear the sticky header */ [id] { scroll-margin-top: 116px; } /* ---------- Stats card (home) ---------- */ .stats-card { position: relative; z-index: 2; /* Rides up over the hero artwork so its bottom edge is never visible */ margin-top: -72px; background: var(--surface); border-radius: var(--r-band); box-shadow: var(--shadow-lg); padding: 46px 24px; display: grid; grid-template-columns: repeat(4, 1fr); } .stat { display: flex; align-items: center; gap: 20px; padding: 8px 32px; } .stat + .stat { border-left: 1px solid var(--line); } .stat__icon { color: var(--blue); flex: none; } /* tabular figures keep the box from twitching while the number counts up */ .stat__value { font-size: clamp(30px, 3.2vw, 42px); font-weight: 700; color: var(--blue); line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat__label { font-size: 16px; color: var(--muted); line-height: 1.4; margin-top: 2px; } /* ---------- Blue showcase band (home) ---------- */ .showcase { background: var(--blue-deep); border-radius: var(--r-band); padding: 56px 44px; display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, 1fr); gap: 34px; align-items: center; position: relative; overflow: hidden; } .showcase::after { content: ''; position: absolute; left: -60px; bottom: -120px; width: 420px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .10), transparent 62%); pointer-events: none; } .showcase__copy { position: relative; z-index: 1; color: #fff; } .showcase__copy .h2 { color: #fff; } .showcase__sub { margin-top: 18px; font-size: clamp(19px, 1.96vw, 25px); line-height: 1.45; color: rgba(255, 255, 255, .92); letter-spacing: -0.015em; } .showcase__link { margin-top: 40px; display: inline-flex; } .showcase__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; z-index: 1; } .show-card { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-img); overflow: hidden; background: #0d1a63; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } /* Cards past the first row stay collapsed until "View All Games" */ .show-card.is-extra { display: none; } .showcase.is-open .show-card.is-extra { display: block; animation: card-in .5s var(--ease) backwards; } .showcase.is-open .show-card.is-extra:nth-child(6) { animation-delay: 70ms; } .showcase.is-open .show-card.is-extra:nth-child(7) { animation-delay: 140ms; } .showcase.is-open .show-card.is-extra:nth-child(8) { animation-delay: 210ms; } @keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } } .show-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .show-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 58%; background: linear-gradient(to top, rgba(4, 10, 46, .92) 12%, rgba(4, 10, 46, .55) 48%, transparent); } .show-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 12, 70, .45); } .show-card:hover img { transform: scale(1.06); } .show-card__body { position: absolute; z-index: 2; left: 18px; right: 14px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #fff; } .show-card__body > div { min-width: 0; } .show-card__title { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; overflow-wrap: anywhere; } .show-card__cat { font-size: 15px; color: rgba(255, 255, 255, .8); margin-top: 2px; } .show-card:hover .icon-btn { transform: scale(1.1); } /* ---------- Game grid (games page) ---------- */ .game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; } .game-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .game-card__media { aspect-ratio: 214 / 200; overflow: hidden; background: var(--blue-soft); } .game-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .game-card__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 20px; } .game-card__title { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; } .game-card__cat { font-size: 16px; color: var(--muted); margin-top: 1px; } .game-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .game-card:hover img { transform: scale(1.07); } .game-card:hover .icon-btn { transform: scale(1.1); background: var(--blue-hover); } .game-card.is-hidden { display: none; } /* ---------- Filters ---------- */ .filter { position: relative; height: 52px; padding: 0 26px; border-radius: var(--r-pill); font-size: 17px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .filter:hover { color: var(--blue); } .filter.is-active { background: var(--blue); color: #fff; font-weight: 600; box-shadow: var(--shadow-blue); } /* Games page: standalone "All" pill next to a bordered segmented group */ .filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .filter-shell { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); padding: 4px 6px; } .filter-shell .filter { height: 44px; padding: 0 24px; } /* Separator lives on a pseudo-element: toggling it can't reshape the button, which is what made the active pill flash as a square mid-transition. */ .filter-shell .filter + .filter::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: var(--line); transition: opacity .2s var(--ease); } .filter-shell .filter.is-active::before, .filter-shell .filter.is-active + .filter::before { opacity: 0; } /* ---------- Feature columns (values / perks) ---------- */ .feature-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .feature { padding: 8px 34px; text-align: center; } .feature + .feature { border-left: 1px solid var(--line); } /* The svg is display:block, so it needs its own auto margins to centre */ .feature__icon { display: block; color: var(--blue); margin-bottom: 22px; } .feature__icon svg { margin-inline: auto; } .feature__title { font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; } .feature__text { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--muted); } .feature-row--left .feature { text-align: left; padding-left: 0; padding-right: 40px; } .feature-row--left .feature + .feature { padding-left: 40px; } .feature-row--left .feature__icon svg { margin-inline: 0; } /* ---------- Blue stat band (about) ---------- */ .stat-band { background: var(--blue-deep); border-radius: var(--r-band); padding: 48px 32px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; overflow: hidden; } .stat-band__item { text-align: center; padding: 4px 20px; } .stat-band__item + .stat-band__item { border-left: 1px solid rgba(255, 255, 255, .22); } .stat-band__value { font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .stat-band__label { margin-top: 8px; font-size: 17px; color: rgba(255, 255, 255, .82); } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; border-radius: var(--r-band); background: var(--blue-deep); min-height: 190px; display: flex; align-items: center; } /* iOS Safari does not clip a transformed child to a rounded overflow:hidden box. The overscaled artwork escaped the band, which made the whole page pannable sideways and forced Safari to start at a shrunken zoom. Promoting these containers to their own compositing layer restores the clip. `will-change` rather than `translateZ(0)`: the reveal animation owns the transform property on some of these, and would overwrite the promotion. */ .cta-band, .show-card, .game-card__media { will-change: transform; isolation: isolate; } .cta-band__bg { position: absolute; inset: 0; z-index: 0; } /* Overscaled so the cursor drift never exposes an edge of the clip */ .cta-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; transform: scale(1.08) translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .6s cubic-bezier(.22, .61, .36, 1); will-change: transform; } /* Keeps the left half on brand blue while the mascot stays readable on the right */ .cta-band::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue-deep) 38%, rgba(0, 49, 230, 0) 76%); pointer-events: none; } .cta-band__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 48px; flex-wrap: wrap; padding: 44px 48px; width: 100%; } .cta-band__title { color: #fff; } /* ---------- Newsletter band ---------- */ .news-cta { position: relative; overflow: hidden; border-radius: var(--r-band); background: var(--blue-deep); padding: 54px 48px 58px; } .news-cta__bg { position: absolute; inset: 0; z-index: 0; } .news-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; mix-blend-mode: screen; opacity: .8; } /* Holds the copy side on flat blue — white text was washing out over the foam */ .news-cta::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue-deep) 34%, rgba(0, 49, 230, 0) 80%); pointer-events: none; } .news-cta__inner { position: relative; z-index: 2; max-width: 560px; color: #fff; } .news-cta .h2 { color: #fff; } .news-cta__sub { margin-top: 10px; font-size: 18px; color: rgba(255, 255, 255, .9); } .subscribe { display: flex; margin-top: 30px; max-width: 470px; border-radius: var(--r-btn); overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(0, 15, 80, .22); } .subscribe input { flex: 1; min-width: 0; height: 60px; padding: 0 22px; border: 0; background: transparent; font-size: 17px; color: var(--ink); } .subscribe input::placeholder { color: var(--placeholder); } .subscribe input:focus { outline: none; } .subscribe button { height: 60px; padding: 0 32px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 600; transition: background-color .2s var(--ease); } .subscribe button:hover { background: var(--blue-hover); } /* ---------- Careers ---------- */ .positions { background: var(--blue-tint); border: 1px solid var(--line); border-radius: var(--r-band); padding: 44px 48px 20px; } .positions__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px dashed var(--line-strong); } .positions__empty { min-height: 130px; } .job { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 4px; border-bottom: 1px solid var(--line); transition: background-color .2s var(--ease); } .job:last-child { border-bottom: 0; } .job:hover { background: rgba(255, 255, 255, .7); } .job__title { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.018em; } .job__meta { font-size: 16px; color: var(--muted); } .job__tag { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); font-size: 14px; font-weight: 600; } /* ---------- About hero art ---------- The studio render fades to white on its left, so it can slide under the copy column to reach the reference's full width. The copy is capped and raised above it so the two never collide. */ .hero-about .hero-page__art { margin-left: -14%; } .hero-about .hero-page__grid > :first-child { position: relative; z-index: 1; max-width: 470px; } /* ---------- Careers hero art ---------- Hard-edged photo: stays clear of the copy, rounded on the inner corners. */ .hero-careers__art img { border-radius: var(--r-card) 0 0 var(--r-card); } /* ---------- Contact ---------- */ .contact-sparkle { top: .42em; right: -.6em; width: .24em; height: .30em; } .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 64px; align-items: start; } .contact-methods { margin-top: 46px; display: grid; gap: 30px; } .contact-method { display: flex; gap: 20px; align-items: flex-start; } .contact-method__icon { color: var(--blue); flex: none; margin-top: 2px; } .contact-method__label { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; } .contact-method__value { display: inline-block; margin-top: 2px; font-size: 17px; color: var(--blue); } .contact-method__value:hover { text-decoration: underline; } .socials { display: flex; gap: 14px; margin-top: 44px; } .social { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-pill); color: #fff; transition: transform .2s var(--ease), filter .2s var(--ease); } .social:hover { transform: translateY(-3px); filter: brightness(1.08); } .social--twitter { background: #1d9bf0; } .social--linkedin { background: #0a66c2; } .social--youtube { background: #ff0000; } .social--instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b 48%, #6228d7); } .social--discord { background: #5865f2; } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-band); box-shadow: var(--shadow-md); padding: 40px; } .field { margin-top: 18px; } .field:first-of-type { margin-top: 26px; } .field input, .field textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--surface); padding: 0 20px; height: 60px; font-size: 17px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field textarea { height: auto; min-height: 170px; padding: 18px 20px; line-height: 1.6; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--placeholder); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 43, 248, .12); } .form-card .btn { width: 100%; margin-top: 26px; justify-content: space-between; } .form-note { margin-top: 16px; font-size: 15px; color: var(--muted); text-align: center; min-height: 22px; } .form-note.is-ok { color: var(--blue); font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { position: relative; margin-top: 40px; color: #fff; } .site-footer__wave { display: block; position: relative; width: 100%; line-height: 0; } .site-footer__wave img { width: 100%; display: block; } /* The artwork is left untouched; the hand-off to the flat footer blue happens inside the footer itself, over its first 150px. */ .site-footer__body { background: linear-gradient(180deg, #0043dd 0, #0034ba 62px, var(--blue-dark) 150px, var(--blue-dark) 100%); padding: 30px 0 44px; margin-top: -1px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .78fr)) minmax(0, 1.35fr); gap: 40px; padding-bottom: 44px; } .footer-tagline { margin-top: 22px; font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -0.015em; } .footer-socials { display: flex; gap: 10px; margin-top: 26px; } .footer-socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; transition: background-color .2s var(--ease), transform .2s var(--ease); } .footer-socials a:hover { background: rgba(255, 255, 255, .26); transform: translateY(-2px); } .footer-col__title { font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.015em; margin-bottom: 20px; } .footer-col__list { display: grid; gap: 12px; } .footer-col__list a { font-size: 17px; color: rgba(255, 255, 255, .82); transition: color .2s var(--ease); } .footer-col__list a:hover { color: #fff; } .footer-sub { margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .82); } .footer-form { display: flex; margin-top: 22px; max-width: 330px; background: #fff; border-radius: var(--r-btn); overflow: hidden; } .footer-form input { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 0; font-size: 16px; background: transparent; color: var(--ink); /* the footer sets white — typed text needs ink here */ } .footer-form input::placeholder { color: var(--placeholder); } .footer-form input:focus { outline: none; } .footer-form button { width: 58px; display: grid; place-items: center; background: var(--blue); color: #fff; transition: background-color .2s var(--ease); } .footer-form button:hover { background: var(--blue-hover); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 26px; text-align: center; font-size: 16px; color: rgba(255, 255, 255, .72); } /* ---------- Reveal on scroll ---------- Gated on .js so the content is never hidden when scripting is unavailable. */ .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } /* ============================================================= Responsive Standard breakpoint scale, largest first: 1536 2xl large desktop 1280 xl small desktop / laptop 1024 lg tablet landscape → nav collapses here 768 md tablet portrait → single column 640 sm large phone 480 xs phone ============================================================= */ /* ---------- 2xl ---------- */ @media (max-width: 1536px) { :root { --band-pad: 42px; } .nav__list { gap: 34px; } .stat { padding: 8px 26px; } } /* ---------- xl ---------- */ @media (max-width: 1280px) { :root { --band-pad: 34px; --band-inset: 24px; } .nav__list { gap: 26px; } .nav__link { font-size: 16px; } .showcase { grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); padding: 44px 34px; gap: 26px; } .showcase__grid { gap: 14px; } .game-grid { gap: 20px; } .stat { padding: 8px 20px; gap: 16px; } .stat__icon svg { width: 52px; height: 52px; } .feature { padding-inline: 24px; } .feature__icon svg { width: 58px; height: 58px; } .contact-layout { gap: 46px; } } /* ---------- lg : nav collapses, wide grids halve ---------- */ @media (max-width: 1024px) { :root { --band-pad: 28px; --band-inset: 22px; --r-band: 24px; } /* Menu */ .site-header__inner { height: 88px; } .nav { position: fixed; inset: 88px 0 auto 0; margin: 0; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 10px 26px 24px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } body.nav-open .nav { opacity: 1; transform: none; pointer-events: auto; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__link { display: block; padding: 16px 2px; border-bottom: 1px solid var(--line); font-size: 18px; } .nav__link:last-child { border-bottom: 0; } .nav__link::after { display: none; } .nav-toggle { display: grid; margin-left: auto; } .site-header .btn { display: none; } /* Layout */ .section { padding: 76px 0; } .stats-card { grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding: 34px 12px; margin-top: -56px; } .stat:nth-child(odd) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 18px; } .showcase { grid-template-columns: 1fr; padding: 40px 30px; } .showcase__copy { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .showcase__sub { margin-top: 0; } .showcase__link { margin-top: 0; margin-left: auto; } .showcase__grid { grid-template-columns: repeat(4, 1fr); } .feature-row { grid-template-columns: repeat(2, 1fr); gap: 46px 0; } .feature:nth-child(odd) { border-left: 0; } .stat-band { grid-template-columns: repeat(3, 1fr); gap: 32px 0; padding: 40px 22px; } .stat-band__item:nth-child(3n+1) { border-left: 0; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .footer-grid > :first-child, .footer-grid > :last-child { grid-column: span 2; } /* Page artwork stops crowding the copy */ .hero-about .hero-page__art { margin-left: -6%; } .hero-about .hero-page__grid > :first-child { max-width: 380px; } .hero-page__grid { gap: 32px; } } /* ---------- md : everything goes single column ---------- */ @media (max-width: 768px) { :root { --band-inset: 18px; --band-pad: 22px; --r-band: 22px; } .section { padding: 62px 0; } /* Home hero stacks: copy, then the whole artwork uncropped */ .hero-home { min-height: 0; display: flex; flex-direction: column; } .hero-home .hero__inner { order: 1; padding: 40px 0 26px; } .hero-home .hero__bg { order: 2; position: static; height: auto; } .hero-home .hero__bg img { height: auto; } .hero-home .hero__copy { max-width: none; } /* Page heroes stack with the artwork on top — it sets the scene before the heading, and stops the copy being pushed far down the screen. */ .hero-page__grid, .hero-page__grid--top { grid-template-columns: 1fr; gap: 26px; padding: 26px 0 48px; } .hero-page__grid--top > :first-child { padding-top: 0; } .hero-page__art { order: -1; } .bleed-right { margin-right: 0; } .hero-about .hero-page__art { margin-left: 0; } .hero-about .hero-page__grid > :first-child { max-width: none; } .hero-careers__art img { border-radius: var(--r-card); } .hero-games__wave { display: none; } .hero-games .hero-page__grid { padding: 38px 0 32px; } .stats-card { margin-top: -44px; } .showcase { padding: 30px 20px; } .showcase__copy { display: block; } .showcase__sub { margin-top: 14px; } .showcase__link { margin-top: 24px; margin-left: 0; } .showcase__grid { grid-template-columns: repeat(2, 1fr); } .game-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .contact-layout { grid-template-columns: 1fr; gap: 38px; } .contact-methods { margin-top: 34px; gap: 26px; } .cta-band__inner { padding: 32px 24px; gap: 22px; } .news-cta { padding: 36px 22px 40px; } /* Copy runs full width here, so the scrim covers the whole band instead */ .news-cta::before { background: linear-gradient(180deg, var(--blue-deep) 0%, rgba(0, 49, 230, .82) 62%, rgba(0, 49, 230, .55) 100%); } .news-cta__bg img { opacity: .55; } .positions { padding: 28px 20px 14px; } .positions__empty { min-height: 50px; } .job { grid-template-columns: 1fr; gap: 8px; } .form-card { padding: 26px 20px; } .site-footer { margin-top: 22px; } } /* ---------- sm ---------- */ @media (max-width: 640px) { body { font-size: 16px; } .site-header__inner { height: 78px; } .nav { inset: 78px 0 auto 0; } .nav-toggle { width: 46px; height: 46px; } .stats-card { grid-template-columns: 1fr; margin-top: -36px; padding: 28px 14px; } .stat { padding: 6px 14px; } .stat:nth-child(n+2) { border-top: 1px solid var(--line); border-left: 0; padding-top: 20px; margin-top: 14px; } .feature-row { grid-template-columns: 1fr; gap: 32px; } .feature { border-left: 0 !important; padding-inline: 0; } .stat-band { grid-template-columns: repeat(2, 1fr); gap: 26px 0; padding: 32px 16px; } .stat-band__item { border-left: 0 !important; padding-inline: 10px; } /* Compact footer: brand row, then the three link columns side by side, then the signup — instead of one very long single column. */ .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 18px; padding-bottom: 34px; } .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; } .footer-grid > :first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .footer-tagline { margin-top: 14px; font-size: 19px; } .footer-socials { margin-top: 4px; } .footer-socials a { width: 36px; height: 36px; } .footer-col__title { font-size: 17px; margin-bottom: 14px; } .footer-col__list { gap: 10px; } .footer-col__list a { font-size: 15px; } .footer-sub { font-size: 15px; } .footer-form { max-width: none; } .footer-bottom { padding-top: 22px; font-size: 15px; } .hero__actions { gap: 20px; } .btn--lg { --btn-h: 56px; font-size: 17px; padding: 0 24px; } .cta-band__inner { flex-direction: column; align-items: flex-start; } .positions__head { flex-direction: column; align-items: flex-start; gap: 14px; } .filter-row { gap: 10px; } .filter { height: 46px; padding: 0 20px; font-size: 16px; } .filter-shell { padding: 4px; } .filter-shell .filter { height: 40px; padding: 0 16px; } /* The field stays one unit — the button just gets tighter */ .subscribe { max-width: none; } .subscribe input { height: 54px; padding: 0 16px; font-size: 16px; } .subscribe button { height: 54px; padding: 0 20px; font-size: 15px; white-space: nowrap; } .contact-method__value { overflow-wrap: anywhere; } .socials { flex-wrap: wrap; gap: 12px; } } /* ---------- xs ---------- */ @media (max-width: 480px) { .game-grid, .showcase__grid { grid-template-columns: 1fr; } .stat-band { grid-template-columns: 1fr; } .hero-home .sparkle { display: none; } .show-card { aspect-ratio: 4 / 3; } .filter-shell { flex-wrap: wrap; justify-content: center; } .filter-shell .filter + .filter::before { display: none; } .form-card .btn { padding: 0 18px; } } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; } } /* ============================================================= Skip link — first stop for keyboard and screen-reader users ============================================================= */ .skip-link { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -160%); z-index: 200; padding: 12px 22px; border-radius: var(--r-btn); background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; transition: transform .2s var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); } /* ============================================================= Cookie consent ============================================================= */ .cookie { position: fixed; z-index: 150; left: 50%; bottom: 22px; transform: translate(-50%, 140%); width: min(100% - 36px, 660px); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 24px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(6, 11, 43, .16); transition: transform .45s var(--ease), opacity .35s var(--ease); opacity: 0; visibility: hidden; } .cookie.is-shown { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .cookie__text { flex: 1 1 300px; font-size: 15px; line-height: 1.55; color: var(--muted); } .cookie__text strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; margin-bottom: 4px; } .cookie__text a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie .btn { --btn-h: 46px; padding: 0 22px; font-size: 15px; } @media (max-width: 640px) { .cookie { left: 0; bottom: 0; width: 100%; transform: translateY(140%); border-radius: var(--r-card) var(--r-card) 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); gap: 16px; } .cookie.is-shown { transform: translateY(0); } .cookie__actions { width: 100%; } .cookie__actions .btn { flex: 1; } } /* ============================================================= 404 ============================================================= */ .notfound { display: grid; place-items: center; text-align: center; min-height: 62vh; padding: 90px 0 110px; } .notfound .lead { color: var(--muted); } .notfound .hero__actions { justify-content: center; } /* ============================================================= Legal pages ============================================================= */ .legal { padding: 70px 0 100px; } .legal__inner { max-width: 820px; } .legal__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue); font-size: 14px; font-weight: 600; } .legal__lede { margin-top: 26px; font-size: 19px; line-height: 1.6; color: var(--body); } .legal__body { margin-top: 46px; } .legal__body h2 { margin-top: 52px; font-size: 26px; line-height: 1.3; font-weight: 700; color: var(--ink); letter-spacing: -0.022em; } .legal__body h2:first-child { margin-top: 0; } .legal__body h3 { margin-top: 30px; font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.015em; } .legal__body p { margin-top: 16px; color: var(--body); } .legal__body ul { margin-top: 16px; display: grid; gap: 10px; } .legal__body li { position: relative; padding-left: 22px; color: var(--body); } .legal__body li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .legal__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; } .legal__body strong { color: var(--ink); font-weight: 600; } /* Callout for the sentence that actually matters */ .legal__note { margin-top: 26px; padding: 22px 26px; border-radius: var(--r-card); background: var(--blue-tint); border: 1px solid var(--line); } .legal__note p:first-child { margin-top: 0; } .legal__note--strong { background: var(--blue-soft); border-color: #cdd6ff; } /* Data table */ .legal__table { margin-top: 22px; overflow-x: auto; } .legal__table table { width: 100%; border-collapse: collapse; min-width: 540px; } .legal__table th, .legal__table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; vertical-align: top; } .legal__table th { color: var(--ink); font-weight: 600; background: var(--blue-tint); white-space: nowrap; } .legal__table td { color: var(--muted); } .legal__table tr:last-child td { border-bottom: 0; } .legal__toc { margin-top: 34px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); } .legal__toc h2 { margin: 0 0 14px; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; } .legal__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; counter-reset: toc; } .legal__toc li { counter-increment: toc; font-size: 16px; } .legal__toc li::before { content: counter(toc) '.'; color: var(--blue); font-weight: 600; margin-right: 8px; } .legal__toc a { color: var(--body); } .legal__toc a:hover { color: var(--blue); } @media (max-width: 768px) { .legal { padding: 44px 0 70px; } .legal__body h2 { margin-top: 42px; font-size: 23px; } .legal__lede { font-size: 17px; } }