/* ============================================================ The Origin house system Shared VERBATIM by singleoriginstudio.com and singleorigingames.com. The two sites differ only by `class="brand-games"` on , which recolours the hero orbit to teal. Copy this file across rather than editing one side. Meridian structure - strict grid, hairline rules, tight corners, the catalog set as a real table - carrying Orbit palette: deep navy, one warm gold, bone paper, and bodies circling a single point of light. Palette ink #0B1424 - slate #132038 - gold #F0C25A - bone #F6F2E9 Type Bricolage Grotesque (display) - Libre Franklin (body) IBM Plex Mono (labels + data) Layout Left-aligned grid, ruled sections, orbits behind the hero. Light-first, with a full dark theme. Three theme states: no data-theme attribute (follow the OS), data-theme="light", data-theme="dark". See js/site.js. ============================================================ */ /* ---- Tokens: light is the base definition ---------------------- */ :root { --ground: #F6F2E9; --surface: #FFFFFF; --surface-2: #FBF7EF; --border: #E3DBCA; --border-firm: #D2C7B1; --rule: #E8E1D3; --ink: #0B1424; --ink-soft: #3E4C61; --muted: #5F6E85; /* Two golds on purpose: one dark enough to pass as text on bone (4.5:1), one at full brand chroma for fills, buttons and the orbit bodies, where contrast is carried by the shape rather than by type. */ --accent: #8E5F0C; --accent-fill: #E9B23F; --accent-hov: #7C540A; --accent-wash: #FBF1DC; --accent-glow: rgba(233, 178, 63, 0.30); --on-accent: #1A1206; --ok: #2A7253; --ok-wash: #E7F3EC; /* The orbit bodies and hero glow are their own tokens so the two brands can differ there without touching the shared palette. Studio = gold, the accent. Games overrides them below. */ --orbit-body: var(--accent-fill); --orbit-glow: var(--accent-glow); --radius: 5px; --radius-sm: 3px; --w-page: 1180px; --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Libre Franklin", "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; } /* System dark - unless the reader explicitly chose light */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0B1424; --surface: #132038; --surface-2: #16243E; --border: #22304A; --border-firm: #2E3F5C; --rule: #1D2B43; --ink: #F3EEE2; --ink-soft: #C3CEDE; --muted: #8FA0B8; --accent: #F0C25A; --accent-fill: #F0C25A; --accent-hov: #FFD683; --accent-wash: #1E2A3F; --accent-glow: rgba(240, 194, 90, 0.26); --on-accent: #1A1206; --ok: #5FC79A; --ok-wash: #10261F; } } /* Explicit dark - the toggle wins over a light OS */ :root[data-theme="dark"] { --ground: #0B1424; --surface: #132038; --surface-2: #16243E; --border: #22304A; --border-firm: #2E3F5C; --rule: #1D2B43; --ink: #F3EEE2; --ink-soft: #C3CEDE; --muted: #8FA0B8; --accent: #F0C25A; --accent-fill: #F0C25A; --accent-hov: #FFD683; --accent-wash: #1E2A3F; --accent-glow: rgba(240, 194, 90, 0.26); --on-accent: #1A1206; --ok: #5FC79A; --ok-wash: #10261F; } /* ---- Brand variant: Single Origin Games ------------------------ */ /* Same palette, same grid - a different star at the centre. Teal reads clearly against navy and bone without competing with the gold accent, which both brands keep. Set `class="brand-games"` on . */ .brand-games { --orbit-body: #2E9C93; --orbit-glow: rgba(46, 156, 147, 0.22); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-games { --orbit-body: #4FD6C7; --orbit-glow: rgba(79, 214, 199, 0.18); } } :root[data-theme="dark"] .brand-games { --orbit-body: #4FD6C7; --orbit-glow: rgba(79, 214, 199, 0.18); } /* ---- Base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: var(--accent-glow); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Accessibility utilities ----------------------------------- */ /* Available to screen readers and to keyboard users who tab into it, but out of the visual flow. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius); background: var(--accent-fill); color: var(--on-accent); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: top .16s ease; } .skip-link:focus { top: 12px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; } /* ---- Labels ---------------------------------------------------- */ .label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .label--accent { color: var(--accent); } .lede { font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; } /* ---- Layout ---------------------------------------------------- */ .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: 32px; } /* Every section is separated by a rule, not by whitespace alone - the grid should feel drawn. */ .section { padding-block: 88px; border-top: 1px solid var(--rule); } .section--open { border-top: 0; } .section-head { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; align-items: start; margin-bottom: 44px; } .section-head h2 { font-size: clamp(27px, 3.2vw, 38px); margin-bottom: 12px; } .section-head__body { max-width: 62ch; } @media (max-width: 820px) { .section-head { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wrap { padding-inline: 20px; } .section { padding-block: 60px; } } /* ---- Header ---------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: var(--w-page); margin-inline: auto; padding: 13px 32px; display: flex; align-items: center; gap: 22px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); margin-right: auto; } .brand img { width: 30px; height: 30px; border-radius: 7px; } .brand__stack { display: flex; flex-direction: column; line-height: 1.2; } .brand__sub { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .nav { display: flex; gap: 24px; font-size: 14px; } .nav a { color: var(--muted); text-decoration: none; font-weight: 500; padding-block: 5px; position: relative; transition: color .16s ease; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--accent); } .nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: var(--accent-fill); } .theme-toggle { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--border-firm); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .16s ease, border-color .16s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: block; } :root[data-theme="dark"] .theme-toggle .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; } } @media (max-width: 860px) { .nav { display: none; } .site-header__inner { padding: 12px 20px; } } /* ---- Hero ------------------------------------------------------ */ .hero { padding-block: 92px 80px; position: relative; overflow: hidden; } .hero__wrap { position: relative; } /* The gutter between the hero's two columns is a real grid column rather than a `gap`, because it has a job: it holds the origin. Making it an element means the mark is centred in it BY CONSTRUCTION at every width - no percentage guesswork, and immune to the fr columns resolving differently when the spec panel's min-content width grows. It is also the only vertical strip no text can ever reach. */ .hero__axis { position: relative; z-index: 0; display: grid; place-items: center; align-self: stretch; } /* The meridian: one hairline through the origin, overshooting the wrap and clipped by .hero, so it reads as a full-height rule. */ .hero__axis::before { content: ""; position: absolute; top: -300px; bottom: -300px; left: 50%; width: 1px; background: var(--rule); pointer-events: none; } /* Background layer. It overflows the gutter freely and paints under the copy and spec columns, which sit at a higher z-index. */ .hero__field { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(900px, 134vw); aspect-ratio: 1; pointer-events: none; display: grid; place-items: center; } .hero__wash { position: absolute; inset: -8%; background: radial-gradient(circle, var(--orbit-glow) 0%, transparent 60%); } .hero__orbits { position: absolute; inset: 0; width: 100%; height: 100%; } .hero__orbits circle { fill: none; stroke: var(--border-firm); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .6; } .hero__orbits .body { fill: var(--orbit-body); stroke: none; } .hero__orbits .body--soft { fill: var(--border-firm); } .hero__orbits .spin { transform-origin: 50% 50%; animation: orbit 64s linear infinite; } .hero__orbits .spin--b { animation-duration: 108s; animation-direction: reverse; } .hero__orbits .spin--c { animation-duration: 168s; } @keyframes orbit { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .hero__orbits .spin { animation: none; } } /* The brand mark sits at the centre of the rings - the origin itself - but stays part of the backdrop rather than becoming a hero element. */ .hero__mark { position: relative; width: 78px; border-radius: 20px; opacity: .95; box-shadow: 0 0 0 1px var(--border), 0 14px 44px var(--orbit-glow); } .hero__grid { position: relative; display: grid; /* The middle track is the gutter: 120px, comfortably wider than the 78px mark, so there is 21px of clear space on either side of it. */ grid-template-columns: minmax(0, 1.15fr) 120px minmax(0, .85fr); gap: 0; align-items: end; } /* Copy and spec paint above the background field. */ .hero__grid > .hero__col { position: relative; z-index: 2; } @media (max-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) 100px minmax(0, .85fr); } } @media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; } /* Stacked, there is no gutter to hide in and the mark would land on the copy - so the whole field steps aside. The header still carries the logo, and .hero::after keeps a trace of the glow. */ .hero__axis { display: none; } .hero::after { content: ""; position: absolute; inset: -30% -20% auto -20%; height: 520px; background: radial-gradient(circle at 50% 40%, var(--orbit-glow) 0%, transparent 62%); pointer-events: none; z-index: 0; } } .hero h1 { font-size: clamp(40px, 6vw, 66px); letter-spacing: -0.042em; margin-block: 20px 22px; max-width: 14ch; } .hero h1 span { color: var(--accent); } .hero .lede { font-size: clamp(17px, 1.8vw, 19px); } .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } /* Hero right column: the studio stated as facts, in a ruled block. */ .spec { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); } .spec__row { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--rule); align-items: baseline; } .spec__row:last-child { border-bottom: 0; } .spec__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .spec__v { font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .spec__v a { color: var(--accent); text-decoration: none; } .spec__v a:hover { text-decoration: underline; } /* ---- Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 19px; border-radius: var(--radius); font-family: var(--font-body); font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .18s ease; } .btn svg { width: 15px; height: 15px; flex: none; } .btn--primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 4px 16px var(--accent-glow); } .btn--primary:hover { box-shadow: 0 7px 22px var(--accent-glow); } .btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-firm); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--sm { padding: 8px 14px; font-size: 13.5px; } /* ---- Division panels ------------------------------------------- */ .divisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .divisions > * + * { border-left: 1px solid var(--rule); } @media (max-width: 860px) { .divisions { grid-template-columns: minmax(0, 1fr); } .divisions > * + * { border-left: 0; border-top: 1px solid var(--rule); } } .division { background: var(--surface); padding: 32px 30px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } /* one faint arc per panel, echoing the hero */ .division::before { content: ""; position: absolute; top: -140px; right: -140px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid var(--rule); pointer-events: none; } .division > * { position: relative; } .division h3 { font-size: 24px; } .division p { color: var(--ink-soft); font-size: 15px; } .division__foot { margin-top: auto; padding-top: 12px; } .tag { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } .tag--live { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .tag--dev { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent); } .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } /* ---- Index table ----------------------------------------------- */ /* The studio site lists titles, it does not market them - one row each, with games pointing off to the games site. See README for the rule. */ .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } table.catalog { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; } table.catalog th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); padding: 13px 18px; border-bottom: 1px solid var(--border-firm); white-space: nowrap; } table.catalog td { padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: middle; } table.catalog tr:last-child td { border-bottom: 0; } table.catalog tbody tr { transition: background .14s ease; } table.catalog tbody tr:hover { background: var(--surface-2); } .cell-title { display: flex; align-items: center; gap: 12px; } .cell-title img { width: 34px; height: 34px; border-radius: var(--radius); flex: none; } .cell-title__ph { width: 34px; height: 34px; border-radius: var(--radius); flex: none; display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--border-firm); font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .cell-title strong { font-weight: 600; display: block; line-height: 1.3; } .cell-title span { font-size: 12.5px; color: var(--muted); } .cell-plat { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; } td.cell-link a { color: var(--accent); text-decoration: none; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } td.cell-link a:hover { text-decoration: underline; } td.cell-link a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } td.cell-link span { color: var(--muted); } /* ---- Principles ------------------------------------------------ */ .principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .principles > * + * { border-left: 1px solid var(--rule); } @media (max-width: 860px) { .principles { grid-template-columns: minmax(0, 1fr); } .principles > * + * { border-left: 0; border-top: 1px solid var(--rule); } } .principle { background: var(--surface); padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; } .principle__icon { color: var(--accent); margin-bottom: 6px; } .principle__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .principle h3 { font-size: 17.5px; } .principle p { font-size: 14.5px; color: var(--ink-soft); } /* ---- Media gallery --------------------------------------------- */ /* One horizontally scrollable rail per title, holding any number of screenshots and videos. Chosen over a fixed grid of slots because the count varies per game - Lexonaut wants two, a tycoon game wants eight - and a grid shrinks every thumbnail as you add more, while a rail just gets longer. It also removes a whole bug class: items have an explicit width, so the `aspect-ratio` intrinsic-sizing blow-up that clipped the old grid cannot happen here. */ .gallery { /* Uniform HEIGHT, natural width. The captures are not one shape - phone stills are 9:19.5, one Fleet Magnate frame is landscape, the Lexonaut clip is 9:16 - so fixing a single aspect ratio would crop something. Fixing the height instead lets every item keep its own proportions and still line up along the rail. */ --item-h: 320px; --gallery-bg: var(--ground); position: relative; } .gallery__rail { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block-end: 10px; scrollbar-width: thin; scrollbar-color: var(--border-firm) transparent; } .gallery__rail::-webkit-scrollbar { height: 6px; } .gallery__rail::-webkit-scrollbar-thumb { background: var(--border-firm); border-radius: 999px; } .gallery__rail::-webkit-scrollbar-track { background: transparent; } .gallery__item { flex: 0 0 auto; height: var(--item-h); scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); position: relative; line-height: 0; } /* The tile carries an inline aspect-ratio matching the capture, so the image just fills it. Nothing is cropped, and the landscape frame comes out wider than its neighbours because its ratio says so. Crucially the tile has a width BEFORE its lazy image loads - otherwise it collapses to its border and the rail reports no overflow. */ .gallery__item img, .gallery__item video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Empty state, for a title with no captures yet. */ .gallery__item--empty { width: 148px; border-style: dashed; border-color: var(--border-firm); display: flex; flex-direction: column; gap: 5px; line-height: 1.35; align-items: center; justify-content: center; text-align: center; padding: 12px; } .gallery__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .gallery__hint { font-size: 11.5px; color: var(--muted); opacity: .8; max-width: 18ch; line-height: 1.35; } /* Video facade: a poster plus a play badge. The real embed is only fetched on click, so no third party is contacted on page load. */ .gallery__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; background: rgba(11, 20, 36, 0.28); transition: background .18s ease; } .gallery__play:hover { background: rgba(11, 20, 36, 0.14); } .gallery__play span { width: 46px; height: 46px; border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); } .gallery__play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; } /* Scroll affordances. Hidden when the rail does not overflow. */ .gallery__nav { position: absolute; top: calc(50% - 5px); translate: 0 -50%; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; z-index: 2; background: var(--surface); color: var(--ink); border: 1px solid var(--border-firm); box-shadow: 0 2px 10px rgba(0,0,0,.14); transition: color .16s ease, border-color .16s ease, opacity .16s ease; } .gallery__nav:hover { color: var(--accent); border-color: var(--accent); } .gallery__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .gallery__nav--prev { left: -14px; } .gallery__nav--next { right: -14px; } .gallery__nav[hidden] { display: none; } .gallery__nav:disabled { opacity: .3; cursor: default; } .gallery__nav:disabled:hover { color: var(--ink); border-color: var(--border-firm); } /* No edge fades, deliberately. An earlier version faded the rail's edges into the page to signal "more this way". Laid over screenshots it read as a haze sitting on the art - the images looked out of focus rather than cut off. The arrows, the scrollbar and the item count already carry that signal, so the gradient was cost with no benefit. */ .gallery__rail::after { content: ""; flex: 0 0 2px; } .gallery__count { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; } /* A clip item carries a duration badge so it reads as video before you hover it, not only after. */ .gallery__dur { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; padding: 3px 7px; border-radius: 4px; line-height: 1.3; background: rgba(11, 20, 36, .72); color: #F3EEE2; } @media (max-width: 620px) { .gallery { --item-h: 260px; } .gallery__nav { display: none; } } /* ---- Long-form pages ------------------------------------------- */ /* Privacy, terms, and anything else that is mostly reading. Narrower measure than the marketing sections, and no card chrome. */ .page-head { padding-block: 76px 0; } .page-head h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.038em; margin-block: 18px 16px; } .page-head p { color: var(--ink-soft); font-size: 17px; max-width: 60ch; } .prose { max-width: 68ch; padding-block: 44px 88px; } .prose h2 { font-size: 25px; margin-block: 44px 14px; padding-top: 26px; border-top: 1px solid var(--rule); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { font-size: 18px; margin-block: 28px 10px; } .prose p { color: var(--ink-soft); margin-bottom: 14px; } .prose ul, .prose ol { color: var(--ink-soft); margin: 0 0 16px 22px; display: flex; flex-direction: column; gap: 8px; } .prose li { padding-left: 4px; } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .prose strong { color: var(--ink); font-weight: 600; } .prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 34px; } .prose__updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* A callout for the one thing a reader most needs to take away. */ .prose__note { border: 1px solid var(--border); border-left: 3px solid var(--accent-fill); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin-block: 22px; } .prose__note p:last-child { margin-bottom: 0; } /* ---- Error page ------------------------------------------------ */ .error-page { min-height: 62vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding-block: 80px; } .error-page__code { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .error-page h1 { font-size: clamp(34px, 5.5vw, 56px); letter-spacing: -0.04em; } .error-page p { color: var(--ink-soft); font-size: 17px; max-width: 52ch; } /* ---- Company block --------------------------------------------- */ .company { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; } @media (max-width: 900px) { .company { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .company p { color: var(--ink-soft); font-size: 15.5px; max-width: 58ch; } .company p + p { margin-top: 14px; } /* ---- Notify ---------------------------------------------------- */ .notify { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; } @media (max-width: 900px) { .notify { grid-template-columns: minmax(0, 1fr); gap: 26px; } } .notify h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 12px; } .notify p { color: var(--ink-soft); font-size: 15.5px; max-width: 52ch; } .notify__form { display: flex; gap: 9px; flex-wrap: wrap; } .notify__input { flex: 1 1 200px; padding: 11px 14px; font: inherit; font-size: 14.5px; border-radius: var(--radius); border: 1px solid var(--border-firm); background: var(--surface); color: var(--ink); } .notify__input::placeholder { color: var(--muted); } /* ---- Footer ---------------------------------------------------- */ .site-footer { border-top: 1px solid var(--rule); background: var(--surface); } .site-footer__inner { max-width: var(--w-page); margin-inline: auto; padding: 50px 32px 28px; } .footer-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 34px; } @media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } } @media (max-width: 520px) { .footer-cols { grid-template-columns: minmax(0, 1fr); } } .footer-brand p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 34ch; } .footer-col h4 { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 14px; transition: color .16s ease; } .footer-col a:hover { color: var(--accent); } .socials { display: flex; gap: 8px; margin-top: 16px; } .socials a { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--border); color: var(--muted); transition: color .16s ease, border-color .16s ease; } .socials a:hover { color: var(--accent); border-color: var(--accent); } .socials svg { width: 15px; height: 15px; fill: currentColor; } .footer-legal { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13px; color: var(--muted); } .footer-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); } .footer-note a { color: var(--accent); text-decoration: none; } /* ---- Cross-brand ----------------------------------------------- */ .crossbrand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; color: var(--ink-soft); } .crossbrand img { width: 30px; height: 30px; border-radius: var(--radius); flex: none; } .crossbrand strong { color: var(--ink); font-weight: 600; } .crossbrand .btn { margin-left: auto; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- Lightbox --------------------------------------------------- */ /* Rail thumbnails are ~150px wide, which is too small to read a game UI. Clicking one opens it at full size. Built as a dialog-like overlay rather than a native