/* ========================================================================== ITERUM CORPORATION · iterumcorp.org Pure CSS, no build step. Mobile first. One theme (dark), one accent (cyan). Type: Space Grotesk (display + body) · IBM Plex Mono (metadata, tables). ========================================================================== */ @import url("assets/fonts/fonts.css"); /* -------------------------------------------------------------------------- 0. TOKENS -------------------------------------------------------------------------- */ :root { --bg: #070b0c; --bg-2: #0b1113; --bg-3: #101a1d; --ink: #e3ecec; --ink-2: #93a6a8; --ink-3: #5b6d70; --rule: #182427; --rule-2: #24343a; --cy: #2ad9d0; --cy-2: #12807b; --cy-ink: #06302f; --blood: #ff2f2f; /* semantic: the word "sangre". Used once per page. */ --vi: #8f6bff; /* semantic: the light on the home emblem. The only purple on the site. */ --sans: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --step--2: 0.72rem; --step--1: 0.85rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem; --step-3: clamp(1.9rem, 3.6vw, 2.75rem); --step-4: clamp(2.5rem, 6.2vw, 4.75rem); --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 7rem; --sp-10: 10rem; --wrap: 84rem; --gutter: clamp(1.25rem, 5vw, 4rem); --nav-h: 4rem; --sat: env(safe-area-inset-top, 0px); /* iOS status-bar strip when Safari's bar collapses */ --sab: env(safe-area-inset-bottom, 0px); /* iPhone home indicator */ --nav-top: calc(var(--nav-h) + var(--sat)); /* where content may start under the sticky nav */ --bars: 0px; /* the phone-toolbar strip; a real value under @supports below */ --ease: cubic-bezier(.16, 1, .3, 1); } /* A phone browser hides its URL bar as you scroll and hands that strip of screen back. --bars is how tall it is: zero on a desktop, some 50-90px on a phone. Heroes are then laid out as "large viewport tall, small viewport of content" — the section always reaches the bottom edge, so the next one never peeks in under it, while the copy stays inside what is visible at the moment the page opens. Guarded, because a browser without the 2022 viewport units keeps 0. */ @supports (height: 1lvh) and (height: 1svh) { :root { --bars: calc(100lvh - 100svh); } } /* -------------------------------------------------------------------------- 1. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-top) + 1rem); } body { margin: 0; min-height: 100vh; min-height: 100dvh; padding-top: var(--nav-top); /* room for the fixed nav */ color: var(--ink); background: var(--bg); font-family: var(--sans); font-size: var(--step-0); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Opaque cap over the iOS status-bar strip: nothing scrolls visibly above the nav. */ body::after { content: ""; position: fixed; top: -8rem; left: 0; right: 0; height: calc(8rem + var(--sat)); z-index: 55; background: var(--bg); pointer-events: none; } /* Fixed film grain. pointer-events none, fixed layer, cheap. */ body::before { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 300px 300px; opacity: .045; mix-blend-mode: screen; } a { color: inherit; text-decoration: none; transition: color .25s var(--ease); } a:hover { color: var(--cy); } :focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; } ::selection { background: var(--cy); color: var(--bg); } h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } p { margin: 0; max-width: 62ch; } p + p { margin-top: var(--sp-4); } strong { font-weight: 700; color: var(--ink); } em { font-style: italic; } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } button, input { font: inherit; } table { border-collapse: collapse; } .pixel { image-rendering: pixelated; image-rendering: crisp-edges; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .reveal { opacity: 1 !important; transform: none !important; filter: none !important; } .ticker__in { animation: none !important; } .plate__img img, .hero__media img, .tilt { transform: none !important; } } /* -------------------------------------------------------------------------- 2. TYPE UTILITIES -------------------------------------------------------------------------- */ .mono { font-family: var(--mono); font-size: var(--step--1); } .meta { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .meta b { color: var(--cy); font-weight: 400; } .dim { color: var(--ink-2); } .cy { color: var(--cy); } .blood { color: var(--blood); font-weight: 700; } .lead { font-size: var(--step-1); line-height: 1.45; color: var(--ink); } .prose p { color: var(--ink-2); } .prose p.lead { color: var(--ink); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Redacted text: the corporation's one signature. Hover / focus reveals. */ .redacted { background: var(--bg-3); color: transparent; box-shadow: inset 0 0 0 1px var(--rule-2); padding: 0 .3em; cursor: help; user-select: none; transition: color .35s var(--ease), background .35s var(--ease); } .redacted:hover, .redacted:focus-visible { color: var(--cy); background: var(--cy-ink); user-select: text; } /* -------------------------------------------------------------------------- 3. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-7); } .section + .section { border-top: 1px solid var(--rule); } .section__head { margin-bottom: var(--sp-6); max-width: 40rem; } .section__head h2 { font-size: var(--step-3); } .section__head p { margin-top: var(--sp-4); color: var(--ink-2); } /* -------------------------------------------------------------------------- 3b. PLATES (Doré engraving as section backdrop: digital dossier × old-master maximalism) Usage:
...content...
Modifiers: --left / --right (image sits on that side, fades to bg on the other), --full (fades top + bottom only), --soft (quieter), --framed (inner engraved mat). Tokens: --plate-bg (section ground), --plate-op (image opacity), --plate-pos (object-position). -------------------------------------------------------------------------- */ .plate { position: relative; overflow: hidden; overflow: clip; isolation: isolate; --plate-bg: var(--bg); --plate-op: .38; --plate-pos: 50% 30%; background: var(--plate-bg); } .plate > * { position: relative; z-index: 1; } .plate__img { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; } .plate__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--plate-pos); opacity: var(--plate-op); filter: saturate(1.2) contrast(1.05); } .plate__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--plate-bg) 0%, transparent 28%, transparent 70%, var(--plate-bg) 100%), linear-gradient(90deg, var(--plate-bg) 0%, color-mix(in srgb, var(--plate-bg) 82%, transparent) 40%, color-mix(in srgb, var(--plate-bg) 25%, transparent) 100%); } .plate--left .plate__img::after { background: linear-gradient(180deg, var(--plate-bg) 0%, transparent 28%, transparent 70%, var(--plate-bg) 100%), linear-gradient(270deg, var(--plate-bg) 0%, color-mix(in srgb, var(--plate-bg) 82%, transparent) 40%, color-mix(in srgb, var(--plate-bg) 25%, transparent) 100%); } .plate--full .plate__img::after { background: linear-gradient(180deg, var(--plate-bg) 0%, color-mix(in srgb, var(--plate-bg) 55%, transparent) 30%, color-mix(in srgb, var(--plate-bg) 55%, transparent) 70%, var(--plate-bg) 100%); } .plate--soft { --plate-op: .22; } /* Tall wrappers (press / legal / contact bodies): the engraving pins to the viewport instead of stretching. */ .plate--pin .plate__img img { position: sticky; top: 0; height: 100vh; height: 100dvh; } /* Parallax: JS writes --py (px) per plate. Slight over-scale hides the edges. */ /* Lazy images fade in once decoded (no pop-in on slow connections). JS adds .is-loaded; without JS nothing is hidden. */ html.js img[loading="lazy"]:not(.is-loaded) { opacity: 0 !important; } img[loading="lazy"] { transition: opacity .7s var(--ease); } .plate__img img { will-change: transform; transform: translate3d(0, var(--py, 0px), 0) scale(1.08); } .plate--pin .plate__img img { transform: none; } /* Torch: the engraving wakes up under the pointer. JS writes --mx/--my; --torch 0→1 while hovering. */ .plate__img::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--torch, 0); background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--cy) 22%, transparent), transparent 70%); mix-blend-mode: screen; transition: opacity .6s var(--ease); } .plate--framed::before { content: ""; position: absolute; z-index: 1; inset: .75rem; pointer-events: none; border: 1px solid color-mix(in srgb, var(--cy) 22%, transparent); } /* Corner ticks (registration marks): the "declassified plate" detail. */ .plate--framed::after { content: ""; position: absolute; z-index: 1; inset: .75rem; pointer-events: none; --tk: linear-gradient(var(--cy), var(--cy)); background: var(--tk) 0 0 / 1.25rem 1px, var(--tk) 0 0 / 1px 1.25rem, var(--tk) 100% 0 / 1.25rem 1px, var(--tk) 100% 0 / 1px 1.25rem, var(--tk) 0 100% / 1.25rem 1px, var(--tk) 0 100% / 1px 1.25rem, var(--tk) 100% 100% / 1.25rem 1px, var(--tk) 100% 100% / 1px 1.25rem; background-repeat: no-repeat; opacity: .7; } /* Phones: the engraving never sits under copy. It becomes its own strip at the top of the section (a framed plate), full opacity, then the text follows on plain ground. */ @media (max-width: 47.99em) { .plate { --plate-op: .85; } .plate__img { position: relative !important; inset: auto; height: clamp(11rem, 46vw, 16rem); margin: 0 0 var(--sp-6); border-bottom: 1px solid var(--rule); } .plate--pin .plate__img { display: none; } /* body wrappers: the page hero already carries a strip */ .plate__img img, .plate--pin .plate__img img { position: static; height: 100%; transform: none !important; } .plate__img::before { display: none; } .plate__img::after, .plate--left .plate__img::after, .plate--full .plate__img::after { background: linear-gradient(180deg, color-mix(in srgb, var(--plate-bg) 35%, transparent) 0%, transparent 35%, transparent 60%, var(--plate-bg) 100%); } /* The strip bleeds to the section's top edge. */ .section.plate, .page-hero.plate, .press-hero.plate, .access.plate { padding-top: 0; } .plate--framed::before, .plate--framed::after { display: none; } /* Footer: strip → ticker → columns */ .footer.plate .plate__img { margin-bottom: 0; } .footer .ticker { border-top: 0; } .footer .wrap { padding-top: var(--sp-6); } /* Corp watermark under text is fine on desktop; on phones it just muddies the copy. */ .corp__emblem { display: none; } } /* Engraved rule: hairline + small diamond. Used above section heads and in the footer. */ .orn { position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 1px; margin-bottom: var(--sp-5); color: var(--cy); } .orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule-2), color-mix(in srgb, var(--cy) 45%, transparent)); } .orn::after { background: linear-gradient(270deg, var(--rule-2), color-mix(in srgb, var(--cy) 45%, transparent)); } .orn i { display: block; width: 6px; height: 6px; transform: rotate(45deg); background: var(--cy); box-shadow: 0 0 0 3px var(--plate-bg, var(--bg)), 0 0 0 4px color-mix(in srgb, var(--cy) 40%, transparent); } .orn--start::before { display: none; } .orn--start::after { flex: 0 0 4rem; } .section__head .orn { margin-bottom: var(--sp-4); } /* Every section head gets a short engraved tick unless it carries an explicit .orn */ .section__head:not(:has(.orn))::before { content: ""; display: block; width: 4rem; height: 1px; margin-bottom: var(--sp-4); background: linear-gradient(90deg, var(--cy), color-mix(in srgb, var(--cy) 30%, transparent) 60%, transparent); } /* -------------------------------------------------------------------------- 3c. REACTIVE LAYER (all progressive: nothing here is required for reading) -------------------------------------------------------------------------- */ /* Scroll progress: hairline under the nav. JS creates the element and writes --p. */ .progress { position: fixed; top: var(--sat); left: 0; z-index: 60; width: 100%; height: 2px; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--cy-2), var(--cy)); box-shadow: 0 0 12px color-mix(in srgb, var(--cy) 60%, transparent); } /* Tilt: cards lean toward the pointer. JS writes --rx/--ry. */ .tilt { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); transform-style: preserve-3d; will-change: transform; } .tilt.is-tilting { transition: transform .08s linear; } .tilt::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease); background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 50%), color-mix(in srgb, var(--cy) 14%, transparent), transparent 70%); mix-blend-mode: screen; } .tilt.is-tilting::after { opacity: 1; } /* Hero key art follows the pointer, barely. */ .hero__media img { transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0) scale(1.04); transition: transform .9s var(--ease); } /* Decode: mono kickers resolve from noise into text on entry. */ .decode { color: var(--cy); } /* Ticker: a status line that never stops (footer). */ .ticker { overflow: hidden; border-block: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__in { display: flex; width: max-content; animation: ticker 48s linear infinite; } .ticker:hover .ticker__in { animation-play-state: paused; } .ticker__in span { display: inline-block; padding: .8rem 0; white-space: nowrap; } .ticker__in span::after { content: "◆"; color: var(--cy); font-size: .6em; vertical-align: .2em; margin-inline: 2.5em; } .ticker b { color: var(--cy); font-weight: 400; } .ticker .blood { font-weight: 400; } @keyframes ticker { to { transform: translateX(-50%); } } /* Magnetic-ish primary buttons: the arrow leads, the box follows. */ .btn--primary { position: relative; overflow: hidden; } .btn--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .btn--primary:hover::before { transform: translateX(120%); } /* Sound toggle over an autoplaying reel. The clip starts muted (browsers allow autoplay no other way) and this speaker is the one thing that turns the sound on. site.js wires [data-vol] to the video beside it; deck.js builds the same button over the reel inside the deck. */ .vol { position: absolute; right: .75rem; bottom: .75rem; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease); } .vol svg { width: 1.1rem; height: 1.1rem; } .vol__body { fill: currentColor; } .vol__on, .vol__off { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .vol__on { display: none; } .vol[aria-pressed="true"] .vol__on { display: block; } .vol[aria-pressed="true"] .vol__off { display: none; } .vol:hover, .vol[aria-pressed="true"] { color: var(--cy); border-color: var(--cy); } /* Scroll reveal (JS adds .is-in). Now with a soft focus pull. */ .reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .reveal.is-in { opacity: 1; transform: none; filter: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } .reveal[data-delay="5"] { transition-delay: .40s; } /* -------------------------------------------------------------------------- 4. NAV -------------------------------------------------------------------------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-top); padding-top: var(--sat); background: linear-gradient(180deg, var(--bg) 0, var(--bg) var(--sat), color-mix(in srgb, var(--bg) 82%, transparent) var(--sat)); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--rule); } /* Extends the nav 8rem above the screen: iOS Safari (bottom tab bar) paints scrolled-off content behind the status bar; with this, what it paints there is the nav's own opaque ground. Invisible everywhere else. */ .nav::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 8rem; background: var(--bg); } .nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .brand { display: inline-flex; align-items: center; gap: .7em; color: var(--ink); } .brand:hover { color: var(--ink); } .brand img { width: 30px; height: 30px; } .brand span { font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: var(--step--1); } .brand small { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase; } .nav__links { display: none; gap: var(--sp-6); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; } .nav__links a { color: var(--ink-2); } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); } .nav .nav__cta { display: none; } .nav__end { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .nav__lang { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem; padding: .5rem .7rem; border: 1px solid var(--rule-2); color: var(--ink-2); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; transition: color .25s var(--ease), border-color .25s var(--ease); } .nav__lang:hover, .nav__lang:focus-visible { color: var(--cy); border-color: var(--cy); } .nav__toggle { appearance: none; background: none; border: 1px solid var(--rule-2); color: var(--ink); padding: .5rem .8rem; min-height: 2.2rem; font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } /* Very narrow phones: drop the "Corporation" tag so brand + EN + Menu always fit on one line. */ @media (max-width: 22.5em) { .brand small { display: none; } } .nav__menu { display: none; position: absolute; top: var(--nav-top); left: 0; right: 0; background: var(--bg-2); border-bottom: 1px solid var(--rule); padding: var(--sp-5) var(--gutter); flex-direction: column; gap: var(--sp-4); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; } .nav.is-open .nav__menu { display: flex; } @media (min-width: 62em) { .nav__links, .nav .nav__cta { display: inline-flex; } .nav__end { gap: var(--sp-3); } .nav__toggle, .nav__menu { display: none !important; } } /* -------------------------------------------------------------------------- 5. BUTTONS Sharp corners everywhere. Primary: solid cyan, dark text (AA ok). -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .85rem 1.35rem; min-height: 2.9rem; white-space: nowrap; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn:active { transform: translateY(1px) scale(.985); } .btn--primary { background: var(--cy); color: #04201f; border-color: var(--cy); font-weight: 500; } .btn--primary:hover { background: #5fe6df; color: #04201f; } .btn--ghost { color: var(--ink); border-color: var(--rule-2); background: transparent; } .btn--ghost:hover { color: var(--cy); border-color: var(--cy); } .btn--sm { padding: .55rem .9rem; min-height: 2.2rem; font-size: var(--step--2); } .btn .arr { transition: transform .25s var(--ease); } .btn:hover .arr { transform: translateX(3px); } /* -------------------------------------------------------------------------- 6. HERO (asymmetric split; key art right, bleeds behind copy on mobile) -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); } .hero__media { position: absolute; inset: 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; } .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,12,.35) 0%, rgba(7,11,12,.75) 60%, var(--bg) 100%), linear-gradient(90deg, var(--bg) 0%, rgba(7,11,12,.85) 45%, rgba(7,11,12,.15) 100%); } .hero__media picture { display: contents; } /* Full screen, twice over: vh first for browsers older than the 2022 viewport units (they ignore the line below and still get a full screen instead of collapsing), then lvh — the largest the viewport ever gets, so the section covers the phone's screen whether the URL bar is showing or retracted, and the section below never appears under it. --bars keeps the copy above the fold. */ .hero__in { position: relative; z-index: 1; display: grid; align-content: end; min-height: calc(100vh - var(--nav-top)); min-height: calc(100lvh - var(--nav-top)); padding-block: var(--sp-8) calc(var(--sp-7) + var(--bars)); } .hero__kicker { margin-bottom: var(--sp-4); } .hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.035em; line-height: .96; max-width: 12ch; } .hero h1 em { font-style: italic; color: var(--cy); font-weight: 500; } .hero--corp .hero__media img { object-position: 50% 45%; } .hero__sub { margin-top: var(--sp-5); font-size: var(--step-1); color: var(--ink-2); max-width: 36ch; } .hero__sub strong { color: var(--ink); font-weight: 500; } .hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* Phones: portrait key art pinned to the top of the hero (Ari full-figure, face clear), and the copy starts at a fixed height below the face whatever the phone's viewport is. The image fades into the ground under the text, so long copy simply continues on plain background instead of over the art. */ @media (max-width: 47.99em) { .hero__media { bottom: auto; height: min(78vh, 40rem); overflow: hidden; } .hero__media img { object-position: 50% 8%; transform: none !important; } .hero__media::after { background: linear-gradient(180deg, rgba(7,11,12,.3) 0%, rgba(7,11,12,0) 18%, rgba(7,11,12,.1) 40%, rgba(7,11,12,.82) 62%, var(--bg) 82%, var(--bg) 100%); } .hero__in { min-height: 0; padding-top: min(46vh, 24rem); padding-bottom: var(--sp-8); } .hero h1, .hero__sub, .hero__kicker { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 24px rgba(7,11,12,.9); } } @media (min-width: 62em) { .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-content: center; padding-block: var(--sp-9) var(--sp-8); } .hero__media img { object-position: 82% 25%; } .hero__media::after { background: linear-gradient(180deg, rgba(7,11,12,.15) 0%, rgba(7,11,12,.35) 55%, var(--bg) 100%), linear-gradient(90deg, var(--bg) 22%, rgba(7,11,12,.72) 48%, rgba(7,11,12,0) 78%); } } /* Home hero: no key art. The emblem is the image — centred, dark, and nothing else. Overrides the key-art hero above by specificity, so the .hero__media rules never apply. Three pools of light: one wide enough to hold the whole wordmark, and one at each edge so the halved black sigils have something to be cut out of. --vi is the site's only purple. */ .hero--mark { --ghost: min(170vw, 74rem); /* the central black cut; the purple light is derived from it */ background: radial-gradient(52% 62% at 0% 50%, #16242a 0%, rgba(22,36,42,0) 76%), radial-gradient(52% 62% at 100% 50%, #16242a 0%, rgba(22,36,42,0) 76%), radial-gradient(108% 86% at 50% 46%, #16242a 0%, #101b1f 44%, var(--bg) 86%); } .hero--mark .hero__in { grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--nav-top)); min-height: calc(100lvh - var(--nav-top)); align-content: center; justify-items: center; text-align: center; padding-block: var(--sp-8); padding-bottom: calc(var(--sp-8) + var(--sab) + var(--bars)); } /* Maximalist ground, back to front: a Doré plate, then a scatter of small emblems and engraver's registration marks in black and purple, then the sigils. All of it stays out of the middle column, where the seal and the copy live. */ .hero__engraving { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .hero__engraving img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: .13; filter: grayscale(1) contrast(1.3) brightness(.7); } .hero__engraving::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 40% at 8% 12%, rgba(143,107,255,.07) 0%, rgba(143,107,255,0) 70%), radial-gradient(42% 40% at 92% 86%, rgba(143,107,255,.06) 0%, rgba(143,107,255,0) 70%), linear-gradient(180deg, var(--bg) 0%, rgba(7,11,12,0) 26%, rgba(7,11,12,0) 68%, var(--bg) 100%); } .hero__hud { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .box, .datum, .blip, .tick { position: absolute; top: var(--t); left: var(--x); transition: transform 1.2s var(--ease); } /* Tracking bracket: four corners drawn straight out of the background, no extra markup. */ .box { width: var(--s); aspect-ratio: 1; transform: translate(var(--gx, 0px), var(--gy, 0px)); background: linear-gradient(var(--c), var(--c)) 0 0 / 28% 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px 28% no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 28% 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 28% no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 28% 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px 28% no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 28% 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 28% no-repeat; } /* The lock indicator at the centre of each bracket. */ .box::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--c); animation: hud-lock 5.5s ease-in-out infinite; } .box--bk { --c: #000; opacity: .6; } .box--vi { --c: var(--vi); opacity: .42; } .box--vi::after { animation-delay: -2.4s; } /* Readouts: codes the plate prints next to whatever it is watching. */ .datum { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; transform: translate(var(--gx, 0px), var(--gy, 0px)); } .datum--bk { color: #000; opacity: .75; } .datum--vi { color: var(--vi); opacity: .45; } .blip { width: 4px; height: 4px; transform: translate(var(--gx, 0px), var(--gy, 0px)); animation: hud-lock 5.5s ease-in-out infinite; } .blip--bk { background: #000; opacity: .6; animation-delay: -1.2s; } .blip--vi { background: var(--vi); opacity: .45; animation-delay: -3.6s; } /* Hitmarkers: the crosses an engraver leaves on the plate. These drift against everything else. */ .tick { width: 11px; height: 11px; transform: translate(calc(var(--gx, 0px) * -1), calc(var(--gy, 0px) * -1)); } .tick::before, .tick::after { content: ""; position: absolute; background: currentColor; } .tick::before { left: 0; right: 0; top: 50%; height: 1px; } .tick::after { top: 0; bottom: 0; left: 50%; width: 1px; } .tick--bk { color: #000; opacity: .6; } .tick--vi { color: var(--vi); opacity: .38; } @keyframes hud-lock { 0%, 62%, 100% { opacity: .25; } 70%, 88% { opacity: 1; } } /* Sigils: the black version of the emblem, one halved by each edge of the screen. Nothing turns — they only drift a little against the seal (site.js --gx/--gy). The third black cut is .mark__ghost below, kept inside .mark so it stays concentric with the white seal. All three fade out downward so no line art ever crosses the wordmark and the copy under it. */ .hero__sigils { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .sigil { position: absolute; top: 50%; width: min(150vw, 62rem); max-width: none; opacity: .45; filter: invert(1); transition: transform 1.2s var(--ease); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 80%); mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 80%); } .sigil--l { left: 0; transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))); } .sigil--r { right: 0; transform: translate(calc( 50% - var(--gx, 0px)), calc(-50% + var(--gy, 0px))); } /* The mark: the sharp seal at the centre, over the third black cut. site.js sets --sx/--sy and --srx/--sry (lean toward the pointer). Everything degrades to a still emblem without JS. */ .mark { position: relative; z-index: 0; width: min(46vw, 13rem); aspect-ratio: 1; perspective: 900px; animation: mark-in 1.4s var(--ease) both; } .mark__ghost { position: absolute; top: 50%; left: 50%; z-index: -1; pointer-events: none; width: var(--ghost); max-width: none; opacity: .45; filter: invert(1); /* Pulls against the side sigils so the three never read as one flat stamp. */ transform: translate(calc(-50% - var(--gx, 0px)), calc(-50% - var(--gy, 0px))); transition: transform 1.2s var(--ease); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.25) 64%, rgba(0,0,0,0) 78%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.25) 64%, rgba(0,0,0,0) 78%); } /* The purple light is the serpent's own ring: same centre as .mark__ghost, and .47 of its width, which is where the ouroboros sits inside the 1000×1000 artwork. */ .mark__halo { position: absolute; top: 50%; left: 50%; z-index: -1; border-radius: 50%; pointer-events: none; width: calc(var(--ghost) * .47); aspect-ratio: 1; transform: translate(calc(-50% - var(--gx, 0px)), calc(-50% - var(--gy, 0px))); background: radial-gradient(circle, rgba(143,107,255,.16) 0%, rgba(143,107,255,.12) 58%, rgba(143,107,255,0) 74%); opacity: .75; transition: opacity .6s var(--ease), transform 1.2s var(--ease); } .mark__seal { position: relative; width: 100%; transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotateX(var(--srx, 0deg)) rotateY(var(--sry, 0deg)); transition: transform .9s var(--ease), filter .6s var(--ease); } .mark__ping { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--vi); opacity: 0; pointer-events: none; } .mark.is-pinging .mark__ping { animation: mark-ping .95s var(--ease); } .mark:hover .mark__halo, .mark:active .mark__halo { opacity: 1; } .mark:hover .mark__seal, .mark:active .mark__seal { filter: drop-shadow(0 0 24px rgba(143,107,255,.35)); } /* Touch: while a finger is on the hero the drift follows it closely (site.js .is-dragging). Gyroscope and scroll keep the long, slow transitions above. */ .hero--mark.is-dragging .mark__seal { transition: transform .18s linear, filter .6s var(--ease); } .hero--mark.is-dragging .mark__ghost, .hero--mark.is-dragging .mark__halo { transition: transform .35s linear, opacity .6s var(--ease); } .hero--mark.is-dragging .sigil, .hero--mark.is-dragging .box, .hero--mark.is-dragging .datum, .hero--mark.is-dragging .blip, .hero--mark.is-dragging .tick { transition: transform .35s linear; } @keyframes mark-ping { from { opacity: .65; transform: scale(.6); } to { opacity: 0; transform: scale(1.55); } } @keyframes mark-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } } /* The copy sits in its own dark aura: the line art behind never reads through the glyphs. */ .hero__wordmark, .hero__tagline, .hero__stamp { color: #fff; position: relative; text-shadow: 0 0 10px var(--bg), 0 0 24px var(--bg), 0 0 44px rgba(7,11,12,.92), 0 1px 2px rgba(0,0,0,.8); } .hero__wordmark { margin-top: var(--sp-6); max-width: none; font-size: var(--step-4); font-weight: 700; letter-spacing: -0.045em; line-height: .92; } .hero__wordmark span { display: block; margin-top: 1.1em; color: #fff; font-family: var(--mono); font-size: var(--step--2); font-weight: 400; letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; } /* Two lines: the word first, the plain description under it. */ .hero__tagline { margin-top: var(--sp-6); font-size: var(--step-1); line-height: 1.4; max-width: 30ch; } .hero__tagline span { display: block; margin-bottom: var(--sp-2); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .hero__stamp { margin-top: var(--sp-5); color: #fff; } .hero__cue { position: absolute; left: 50%; bottom: calc(var(--sp-6) + var(--sab) + var(--bars)); z-index: 1; transform: translateX(-50%); display: grid; place-items: center; width: 2.5rem; height: 3rem; } .hero__cue i { display: block; width: 1px; height: 2.25rem; background: linear-gradient(180deg, transparent, var(--rule-2) 35%, var(--ink-3)); transition: background .25s var(--ease); } .hero__cue:hover i { background: linear-gradient(180deg, transparent, var(--cy-2) 35%, var(--cy)); } /* Phones and tablets: the opening screen has to land whole on any of them, from a 4-inch Android to a Pro Max, portrait or landscape. Every measure below is stated twice — the current value first, then the same value capped against svh (the viewport with the browser's bars showing). The cap only ever bites on a short screen: on a tall phone each clamp sits at its maximum, so the layout is pixel-identical to what it was, and a browser too old for svh drops the second declaration and keeps the first. Nothing is ever cut, nothing is ever left short. */ @media (max-width: 61.99em) { .hero--mark .hero__in { padding-block: clamp(1.5rem, 6svh, 4.5rem); padding-bottom: calc(clamp(1.5rem, 6svh, 4.5rem) + var(--sab) + var(--bars)); } .hero--mark .mark { width: min(46vw, 26svh, 13rem); } .hero--mark .hero__wordmark { font-size: min(var(--step-4), 11svh); margin-top: clamp(1rem, 4svh, 2rem); } .hero--mark .hero__wordmark span { margin-top: clamp(.55em, 2.4svh, 1.1em); } .hero--mark .hero__tagline { margin-top: clamp(1rem, 4svh, 2rem); } .hero--mark .hero__tagline span { font-size: min(var(--step-2), 4.4svh); } .hero--mark .hero__stamp { margin-top: clamp(.75rem, 2.6svh, 1.5rem); } .hero--mark .hero__cue { bottom: calc(clamp(.75rem, 2.6svh, 2rem) + var(--sab) + var(--bars)); } } @media (min-width: 62em) { .hero--mark { --ghost: 80rem; } .hero--mark .hero__in { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-8); } .mark { width: 15rem; } .sigil { width: 66rem; } } /* -------------------------------------------------------------------------- 6b. SUBNAV (sticky section index on the game page) -------------------------------------------------------------------------- */ .subnav { position: sticky; top: var(--nav-top); z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .subnav__in { display: flex; gap: var(--sp-5); overflow-x: auto; scrollbar-width: none; font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; } .subnav__in::-webkit-scrollbar { display: none; } .subnav__in a { position: relative; flex: none; padding: .9rem 0; color: var(--ink-3); } .subnav__in a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--cy); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .subnav__in a:hover { color: var(--ink); } .subnav__in a[aria-current="true"] { color: var(--cy); } .subnav__in a[aria-current="true"]::after { transform: scaleX(1); } html:has(.subnav) { scroll-padding-top: calc(var(--nav-top) + 3.5rem); } /* -------------------------------------------------------------------------- 6c. HOME · FEATURED PROJECT + PURPOSE TEASER -------------------------------------------------------------------------- */ /* Genre line under the pitch: the tags a press site would file the game under. It has to hold one line, so it opts out of the 62ch cap that `p` sets — that cap was what orphaned the last tag. */ .feature__genre { margin-top: var(--sp-4); max-width: none; color: var(--ink-2); letter-spacing: .16em; text-wrap: pretty; } .feature__card { position: relative; display: block; border: 1px solid var(--rule-2); background: var(--bg-2); overflow: hidden; color: var(--ink); } .feature__card img, .feature__card video { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: 50% 40%; transition: transform 1.4s var(--ease), opacity .6s var(--ease); opacity: .85; } .feature__card:hover img, .feature__card:hover video { transform: scale(1.02); opacity: 1; } .feature__card:hover { color: var(--ink); } .feature__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-6); background: linear-gradient(180deg, rgba(7,11,12,0) 30%, rgba(7,11,12,.9) 100%); } .feature__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .feature__tags span { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule-2); padding: .3rem .6rem; background: color-mix(in srgb, var(--bg) 70%, transparent); } .feature__links { display: grid; gap: 1px; margin-top: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0; } .feature__links a { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); background: var(--bg); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .feature__links a:hover { color: var(--cy); background: var(--bg-2); } .feature__links .arr { transition: transform .25s var(--ease); } .feature__links a:hover .arr { transform: translateX(4px); } @media (max-width: 47.99em) { .feature__tags { display: none; } .feature__overlay { padding: var(--sp-4); background: linear-gradient(180deg, rgba(7,11,12,0) 55%, rgba(7,11,12,.85) 100%); } } @media (min-width: 48em) { .feature__links { grid-template-columns: repeat(2, 1fr); } .feature__card img, .feature__card video { aspect-ratio: 21/9; } } @media (min-width: 62em) { .feature__links { grid-template-columns: repeat(4, 1fr); } .feature__overlay { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: var(--sp-7); } } .teaser { position: relative; overflow: hidden; background: #000; border-block: 1px solid var(--rule); } .teaser__img { position: absolute; inset: 0; } .teaser__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .55; filter: saturate(1.15); } .teaser__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.25) 100%); } .teaser__in { position: relative; z-index: 1; padding-block: var(--sp-9); display: grid; gap: var(--sp-5); justify-items: start; } .teaser h2 { font-size: var(--step-3); max-width: 16ch; } .teaser p:not(.meta) { color: var(--ink-2); max-width: 46ch; } /* The question that follows the diagnosis: same weight as the creed, set apart by italics. */ .teaser p.teaser__q { max-width: 34ch; color: var(--ink); font-style: italic; } /* Two-line creed: the concession first, the claim under it. Spacing comes from .teaser__in's gap. */ .teaser p.teaser__creed { margin-top: 0; max-width: 30ch; line-height: 1.25; color: var(--ink); font-weight: 500; } .teaser__creed span { display: block; color: var(--ink-2); font-weight: 400; } @media (min-width: 62em) { .teaser__in { padding-block: var(--sp-10); } .teaser__img img { object-position: 70% 30%; } } /* -------------------------------------------------------------------------- 6d. PAGE HERO (generic interior page header) + CONTACT PAGE -------------------------------------------------------------------------- */ .page-hero { padding-block: var(--sp-8) var(--sp-7); border-bottom: 1px solid var(--rule); --plate-bg: var(--bg-2); --plate-op: .42; } .page-hero:not(.plate) { background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .page-hero .meta { margin-bottom: var(--sp-4); } .page-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.035em; line-height: .96; max-width: 14ch; } .page-hero p:not(.meta) { margin-top: var(--sp-5); color: var(--ink-2); max-width: 46ch; } @media (min-width: 62em) { .page-hero { padding-block: var(--sp-9) var(--sp-8); min-height: clamp(20rem, 52vh, 34rem); display: grid; align-content: center; } } .contact-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-block: var(--sp-8); } .contact-page__form { max-width: 40rem; } .contact-page__side { display: grid; gap: var(--sp-4); align-content: start; } .contact--open { border-color: var(--cy-2); } .contact__title { font-size: var(--step-1); font-weight: 700; color: var(--ink); } .contact .note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } .contact .note a:hover { color: var(--cy); } .field select, .field textarea { width: 100%; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: var(--step-0); padding: .8rem .9rem; border: 1px solid var(--rule-2); border-radius: 0; resize: vertical; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.5rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right .9rem center; } .field select:invalid { color: var(--ink-3); } .field select option { color: var(--ink); background: var(--bg-2); } .field textarea::placeholder { color: var(--ink-3); } .field select:focus, .field textarea:focus { outline: none; border-color: var(--cy); box-shadow: 0 0 0 3px var(--cy-ink); } @media (min-width: 62em) { .contact-page { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--sp-9); padding-block: var(--sp-9); } .contact-page__side { position: sticky; top: calc(var(--nav-top) + var(--sp-5)); } } /* -------------------------------------------------------------------------- 6e. VOID (404: the home presentation, stamping itself over a page that isn't there) -------------------------------------------------------------------------- */ /* Bigger central cut than the home page, and no scroll cue: this hero is the whole document. */ .hero--void { --ghost: min(180vw, 80rem); } .hero--void .hero__engraving img { opacity: .10; object-position: 50% 34%; } /* TBA (press): the same presentation without the swarm, stamped with a status code while the press kit is on hold. Shares the code and spacing rules below with the 404. */ .hero--tba .hero__engraving img { opacity: .12; object-position: 50% 22%; } /* The swarm: the mark repeated small across the plate. Black ones are inverted , purple ones are masked with the same artwork so the site's one purple does the stamping. They drift with the sigils (--gx/--gy from site.js) and each sits at its own fixed angle. */ .hero__swarm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .seed { position: absolute; top: var(--t); left: var(--x); width: var(--w); aspect-ratio: 1; max-width: none; opacity: var(--o); transform: translate(-50%, -50%) translate(var(--gx, 0px), var(--gy, 0px)) rotate(var(--r, 0deg)); transition: transform 1.2s var(--ease); } img.seed { filter: invert(1); } .seed--vi { background: var(--vi); -webkit-mask: url("assets/img/emblem.png") center / contain no-repeat; mask: url("assets/img/emblem.png") center / contain no-repeat; /* The purple stamps pull the opposite way, so the swarm never reads as one flat layer. */ transform: translate(-50%, -50%) translate(calc(var(--gx, 0px) * -1), calc(var(--gy, 0px) * -1)) rotate(var(--r, 0deg)); } /* The code. Two off-register ghosts behind it — the plate printed the number three times and missed twice. attr(data-code) keeps the markup to one element. */ .hero--void .void__code, .hero--tba .void__code { display: block; position: relative; margin: 0; font-family: var(--sans); font-size: clamp(5rem, 25vw, 15rem); font-weight: 700; letter-spacing: -0.06em; line-height: .82; text-indent: 0; text-transform: none; /* Tighter aura than the rest of the wordmark, so the two ghosts below still read. */ text-shadow: 0 0 12px var(--bg), 0 2px 6px rgba(0,0,0,.75); isolation: isolate; /* keeps the negative-z ghosts inside the number, not behind the hero */ } .hero--void .void__code::before, .hero--tba .void__code::before, .hero--void .void__code::after, .hero--tba .void__code::after { content: attr(data-code); position: absolute; inset: 0; z-index: -1; text-shadow: none; pointer-events: none; } .hero--void .void__code::before, .hero--tba .void__code::before { color: var(--vi); opacity: .5; animation: void-slip 7s var(--ease) infinite; } .hero--void .void__code::after, .hero--tba .void__code::after { color: var(--cy); opacity: .32; animation: void-slip 7s var(--ease) infinite reverse; } @keyframes void-slip { 0%, 100% { transform: translate(-.035em, .012em); } 50% { transform: translate(.03em, -.014em); } } /* Second line of the heading keeps the home wordmark's mono caps, just tighter to the number. */ .hero--void .hero__wordmark, .hero--tba .hero__wordmark { margin-top: var(--sp-5); } .hero--void .hero__wordmark span + span, .hero--tba .hero__wordmark span + span { margin-top: .9em; } .hero--void .hero__tagline, .hero--tba .hero__tagline { margin-top: var(--sp-5); max-width: 36ch; } /* The requested path, printed back as a readout. */ .void__req { position: relative; margin-top: var(--sp-6); display: grid; justify-items: center; gap: var(--sp-2); } .void__req__val { max-width: min(90vw, 44rem); padding: .5rem .9rem; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--bg) 78%, transparent); font-family: var(--mono); font-size: var(--step--1); color: var(--cy); overflow-wrap: anywhere; } .void__actions { position: relative; margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } .hero--void .hero__stamp, .hero--tba .hero__stamp { margin-top: var(--sp-6); } @media (min-width: 62em) { .hero--void { --ghost: 86rem; } } /* -------------------------------------------------------------------------- 7. FULL-BLEED GAMEPLAY BAND -------------------------------------------------------------------------- */ .band { position: relative; } .band__frame { position: relative; border: 1px solid var(--rule-2); background: var(--bg-2); overflow: hidden; } .band__frame img, .band__frame video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--bg-2); } .band__caption { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } .band__caption b { color: var(--ink-2); font-weight: 400; } .band__quote { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; margin-bottom: var(--sp-6); } .band__quote .blood { font-weight: 700; } @media (min-width: 62em) { .band__grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: var(--sp-8); align-items: end; } .band__caption { grid-template-columns: 1fr 1fr; } } /* -------------------------------------------------------------------------- 8. PILLARS BENTO (5 items -> 5 cells: 1 tall image + 3 tiles + 1 bar) -------------------------------------------------------------------------- */ .bento { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .tile { position: relative; background: var(--bg); padding: var(--sp-6); min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3); overflow: hidden; } .tile h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; } .tile p { color: var(--ink-2); font-size: var(--step--1); line-height: 1.5; max-width: 34ch; } .tile__img { position: absolute; inset: 0; z-index: 0; } .tile__img img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .6s var(--ease), transform 1.2s var(--ease); } .tile__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,12,.05), rgba(7,11,12,.92) 85%); } .tile:hover .tile__img img { opacity: .8; transform: scale(1.03); } .tile > :not(.tile__img) { position: relative; z-index: 1; } .tile--sprite { background: radial-gradient(70% 70% at 70% 30%, var(--cy-ink), var(--bg) 70%); } .tile .sprite { position: absolute; right: var(--sp-5); top: var(--sp-5); width: clamp(5rem, 34%, 9rem); opacity: .95; } .tile .sprite[src*="ari-dash"] { width: clamp(3.5rem, 20%, 5rem); } .tile--bar { min-height: 0; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; background: var(--bg-2); } .tile--bar h3 { color: var(--cy); font-size: var(--step-0); letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); font-weight: 500; } .tile--bar p { max-width: 60ch; font-size: var(--step-0); color: var(--ink); } .sys { display: grid; gap: var(--sp-2); font-family: var(--mono); font-size: var(--step--1); color: var(--ink-2); } .sys li { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--sp-3); } .sys b { color: var(--cy); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: var(--step--2); padding-top: .2em; } @media (min-width: 48em) { .bento { grid-template-columns: repeat(2, 1fr); } .tile--bar { grid-column: 1 / -1; } } @media (min-width: 62em) { .bento { grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; } .tile--tall { grid-row: 1 / 3; min-height: 30rem; } .tile:last-child:nth-child(4) { grid-column: 2 / -1; } .tile--bar { grid-column: 1 / -1; } } /* Plain bento (Singular pillars): no imagery, so the cells take the height of their copy instead of an image's — four equal, numbered cells on dark cyan ink: 1 column, 2×2 on tablets, 4-up on desktop. */ .bento--plain { counter-reset: pillar; } .bento--plain .tile { min-height: 0; justify-content: flex-start; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-6); background: radial-gradient(120% 110% at 100% 0%, #0a3f3e 0%, var(--cy-ink) 50%, #04221f 100%); } .bento--plain .tile::before { content: counter(pillar, decimal-leading-zero); counter-increment: pillar; margin-bottom: var(--sp-5); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em; color: var(--cy); } .bento--plain .tile p { color: color-mix(in srgb, var(--ink-2) 65%, var(--ink)); } @media (min-width: 48em) { .bento--plain { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .bento--plain { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; } .bento--plain .tile:last-child:nth-child(4) { grid-column: auto; } } /* -------------------------------------------------------------------------- 9. MECHANICS STRIP (horizontal scroll-snap on mobile, 3-up on desktop) -------------------------------------------------------------------------- */ .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; } .strip > figure { margin: 0; scroll-snap-align: start; border: 1px solid var(--rule); background: var(--bg-2); } .strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; } .strip figcaption { padding: var(--sp-3) var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .strip figcaption span { color: var(--ink-3); } .strip--wide img { aspect-ratio: 16 / 9; } .defs { margin-top: var(--sp-7); display: grid; gap: var(--sp-5); } .defs > div { padding-top: var(--sp-4); border-top: 1px solid var(--rule); } .defs h3 { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--cy); font-weight: 500; } .defs p { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-2); } @media (min-width: 48em) { .strip { grid-auto-columns: 1fr; overflow: visible; } .strip--wide { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .defs { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } } @media (min-width: 62em) { .strip--wide { grid-template-columns: repeat(4, 1fr); } } /* Combat defs (Singular): Overheat + Trauma as a centred pair, the combo clip under them, and Perfect dodge — the move the clip shows — as the single definition under the clip. */ .defs--pair, .defs--one, .combo { width: min(100%, 58rem); margin-inline: auto; } .combo { position: relative; margin-block: var(--sp-6) 0; border: 1px solid var(--rule); background: var(--bg-2); overflow: hidden; } .combo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .defs--one { margin-top: var(--sp-5); } @media (min-width: 48em) { .defs--pair { grid-template-columns: repeat(2, 1fr); } .defs--one { grid-template-columns: 1fr; } .defs--one p { max-width: 62ch; } } /* -------------------------------------------------------------------------- 10. BOSSES (sprites left, text right) -------------------------------------------------------------------------- */ .bosses { display: grid; gap: var(--sp-7); } .bosses__art { position: relative; min-height: 20rem; border: 1px solid var(--rule); background: radial-gradient(60% 55% at 50% 45%, #1a0b0e, var(--bg-2) 70%); overflow: hidden; } .bosses__art img { position: absolute; } /* Engraving behind the sprites: Doré's beasts under pixel-art bosses. */ .bosses__art .bosses__plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: .32; filter: saturate(1.2); } .bosses__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 65% at 50% 50%, rgba(26,11,14,.35), rgba(11,17,19,.85) 100%); pointer-events: none; } .bosses__art img:not(.bosses__plate) { z-index: 2; } .bosses__art::after { content: ""; position: absolute; inset: .6rem; z-index: 3; border: 1px solid color-mix(in srgb, var(--cy) 18%, transparent); pointer-events: none; } .bosses__art .b1 { width: 58%; left: 21%; top: 10%; } .bosses__art .b2 { width: 16%; left: 7%; bottom: 12%; opacity: .85; } .bosses__art .b3 { width: 16%; right: 7%; bottom: 16%; opacity: .85; } .bosses__art .b4 { width: 6%; left: 47%; bottom: 8%; } /* Boss clip (Singular): one looping gif fills the frame; no engraving, no sprites. */ .bosses__art.bosses__art--clip { min-height: 0; aspect-ratio: 16 / 9; background: var(--bg-2); } .bosses__art--clip::before { display: none; } .bosses__art--clip img { position: static; width: 100%; height: 100%; object-fit: cover; } .bosses__copy > * + * { margin-top: var(--sp-5); } .bosses__copy h2 { font-size: var(--step-3); } .bosses__copy h3 { font-size: var(--step-1); font-weight: 700; margin-bottom: var(--sp-2); } .bosses__copy p { color: var(--ink-2); } .bosses__copy .item { padding-left: var(--sp-4); border-left: 2px solid var(--cy-2); } @media (min-width: 62em) { .bosses { grid-template-columns: 1.1fr 1fr; gap: var(--sp-9); align-items: center; } .bosses__art { min-height: 30rem; } } /* -------------------------------------------------------------------------- 11. WORLD (full-bleed concept art with copy overlay) -------------------------------------------------------------------------- */ .world { position: relative; overflow: hidden; border-block: 1px solid var(--rule); } .world__img { position: absolute; inset: 0; } .world__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .world__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,12,.6), rgba(7,11,12,.35) 40%, rgba(7,11,12,.92) 100%); } .world__in { position: relative; z-index: 1; padding-block: var(--sp-10) var(--sp-8); } .world h2 { font-size: var(--step-3); max-width: 16ch; } .world__pillars { margin-top: var(--sp-8); display: grid; gap: var(--sp-5); } .world__pillars div { padding-top: var(--sp-3); border-top: 1px solid rgba(227,236,236,.25); } .world__pillars h3 { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); font-weight: 500; } .world__pillars p { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink); max-width: 28ch; } @media (min-width: 48em) { .world__pillars { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .world__pillars { grid-template-columns: repeat(4, 1fr); } .world__in { padding-block: var(--sp-10) var(--sp-9); min-height: 80vh; display: flex; flex-direction: column; justify-content: flex-end; } } /* -------------------------------------------------------------------------- 12. CORPORATION (emblem watermark + prose + team ledger) -------------------------------------------------------------------------- */ .corp { position: relative; overflow: hidden; } .corp__emblem { position: absolute; right: -8%; top: 50%; width: min(60vw, 34rem); transform: translateY(-50%); opacity: .12; pointer-events: none; } .corp__grid { position: relative; display: grid; gap: var(--sp-7); } .corp h2 { font-size: var(--step-3); } .corp .lead { margin-top: var(--sp-5); } .corp p + p { margin-top: var(--sp-4); } /* Close of the manifesto: three lines that escalate into the imperative, then the chant. */ .prose p.corp__creed { margin-top: var(--sp-6); font-size: var(--step-1); line-height: 1.35; color: var(--ink-2); } .corp__creed span { display: block; color: var(--ink); } .corp__creed span:last-child { margin-top: var(--sp-2); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .prose p.corp__chant { margin-top: var(--sp-6); color: var(--ink-3); font-family: var(--mono); font-size: var(--step--1); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; } .ledger { font-family: var(--mono); font-size: var(--step--1); } .ledger li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); padding-block: var(--sp-3); border-top: 1px solid var(--rule); } .ledger li:last-child { border-bottom: 1px solid var(--rule); } .ledger .k { color: var(--ink); } .ledger .v { color: var(--ink-2); text-align: right; } .ledger .v.mute { color: var(--ink-3); } .ledger__title { margin-bottom: var(--sp-3); } @media (min-width: 62em) { /* The manifesto column is much taller than the ledger, so the ledger centres against it. */ .corp__grid { grid-template-columns: 1.2fr .8fr; gap: var(--sp-9); align-items: center; } .corp__emblem { right: -4%; width: 36rem; opacity: .1; } } /* -------------------------------------------------------------------------- 12b. PURPOSE (Doré plates, inverted + cyan-tinted, as a masonry moodboard) -------------------------------------------------------------------------- */ .purpose { position: relative; background: #000; border-block: 1px solid var(--rule); overflow: hidden; } .purpose__head { position: relative; z-index: 1; padding-block: var(--sp-9) var(--sp-7); } .purpose__head h1, .purpose__head h2 { margin-top: var(--sp-4); font-size: var(--step-4); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; } .purpose__head .prose { margin-top: var(--sp-6); max-width: 46rem; } .purpose__head .prose p + p { margin-top: var(--sp-4); } /* Board: three bands, each an explicit grid (2 cols mobile / 5 cols desktop, 2 rows). The text card has a fixed slot per band (left · right · left) so I → II → III read in order. */ .purpose__board { --gap: .5rem; --row: 40vw; display: grid; gap: var(--gap); padding-inline: var(--gap); } /* Rows have a minimum height but may grow: text cards are never clipped, whatever the language or viewport. */ .purpose__board .band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(var(--row), auto); grid-auto-flow: dense; gap: var(--gap); } .pin { position: relative; overflow: hidden; background: #000; border: 1px solid var(--rule); margin: 0; } .pin--tall { grid-row: span 2; } /* Mobile: text cards take the full width on their own row (auto height). Desktop restores the 1-col × 2-row slot. */ .pin--text { grid-column: 1 / -1; grid-row: auto; } @media (max-width: 61.99em) { .pin--text { order: -1; } } @media (min-width: 62em) { .pin--text { grid-column: auto; grid-row: span 2; } .band--right .pin--text { grid-column: -2 / -1; grid-row: 1 / span 2; } .band--widecard .pin--text { grid-column: span 2; } } .pin--img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; filter: saturate(1.15) contrast(1.05); transition: opacity .5s var(--ease), filter .5s var(--ease), transform 1.4s var(--ease); transform: scale(1.02); } .pin--img:hover img { opacity: 1; filter: saturate(1.35) contrast(1.1) brightness(1.15); transform: scale(1); } .pin--img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-4) var(--sp-3); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--cy); background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85)); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .pin--img:hover figcaption, .pin--img:focus-within figcaption { opacity: 1; transform: none; } .pin--text { padding: var(--sp-6) var(--sp-5) var(--sp-6); background: var(--bg-2); border-color: var(--rule-2); } .pin--text::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cy); } .pin__n { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .2em; color: var(--cy); } .pin--text h2, .pin--text h3 { margin-top: var(--sp-3); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; max-width: 14ch; } .pin--text p:not(.pin__n) { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-2); max-width: 36ch; } .purpose__foot { position: relative; z-index: 1; } .purpose__credit { padding-block: var(--sp-5) var(--sp-4); color: var(--ink-3); } .purpose__cta { margin-top: var(--sp-7); padding-block: var(--sp-8) var(--sp-9); border-top: 1px solid var(--rule); } .purpose__cta .lead { max-width: 30ch; font-size: var(--step-2); line-height: 1.2; letter-spacing: -0.02em; } body.is-purpose { background: #000; } body.is-purpose .purpose { border-top: 0; } .purpose__credit i { font-style: italic; } @media (min-width: 62em) { .purpose__board { --gap: .75rem; --row: 13.5vw; } .purpose__board .band { grid-template-columns: repeat(5, minmax(0, 1fr)); } .pin--text { padding: var(--sp-7) var(--sp-6); } .purpose__head { padding-block: var(--sp-10) var(--sp-8); } } @media (min-width: 100em) { .purpose__board { --row: 13rem; } } @media (hover: none) { .pin--img img { opacity: .95; } .pin--img figcaption { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pin--img img, .pin--img figcaption { transition: none; transform: none; } } /* -------------------------------------------------------------------------- 13. ACCESS (text + form) -------------------------------------------------------------------------- */ .access { background: var(--bg-2); border-block: 1px solid var(--rule); --plate-bg: var(--bg-2); --plate-op: .34; --plate-pos: 50% 20%; } .access .form { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--rule-2); padding: var(--sp-6); } .access .form .field input { background: var(--bg); } .access__grid { display: grid; gap: var(--sp-7); } .access h2 { font-size: var(--step-3); } .access .prose { margin-top: var(--sp-5); } .form { display: grid; gap: var(--sp-5); max-width: 32rem; } .field { display: grid; gap: var(--sp-2); } .field label { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .field input[type="email"], .field input[type="text"] { width: 100%; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: var(--step-0); padding: .8rem .9rem; border: 1px solid var(--rule-2); border-radius: 0; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field input::placeholder { color: var(--ink-3); } .field input:focus { outline: none; border-color: var(--cy); box-shadow: 0 0 0 3px var(--cy-ink); } .field small { font-family: var(--mono); font-size: var(--step--2); color: var(--ink-3); } .check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--step--1); color: var(--ink-2); } .check input { accent-color: var(--cy); margin-top: .3em; flex: none; width: 1rem; height: 1rem; } .check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .check a:hover { color: var(--cy); } .honeypot { position: absolute; left: -9999px; } .form__foot { font-family: var(--mono); font-size: var(--step--2); letter-spacing: .08em; color: var(--ink-3); } /* Submission feedback. `.is-on` is set by site.js after the background POST; `:target` covers the no-JS path, where Formspree redirects back to #sent. */ .form__msg { display: none; font-size: var(--step--1); line-height: 1.5; color: var(--ink-2); border-left: 2px solid var(--cy); padding-left: var(--sp-4); } .form__msg.is-on, .form__msg:target { display: block; } .form__msg[data-form-err] { border-left-color: var(--ink-3); color: var(--ink); } .form button[aria-busy="true"] { opacity: .6; pointer-events: none; } @media (min-width: 62em) { .access__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-9); align-items: start; } } /* -------------------------------------------------------------------------- 14. FOOTER -------------------------------------------------------------------------- */ .footer { padding-block: var(--sp-8) var(--sp-7); border-top: 1px solid var(--rule); --plate-bg: #000; --plate-op: .3; --plate-pos: 50% 55%; } .footer.plate { padding-top: var(--sp-9); } @media (max-width: 47.99em) { .footer.plate { padding-top: 0; } } .footer .orn { margin-bottom: var(--sp-7); } .footer__grid { display: grid; gap: var(--sp-6); } .footer .meta { display: block; margin-bottom: var(--sp-3); } .footer ul { display: grid; gap: var(--sp-2); font-family: var(--mono); font-size: var(--step--1); } .footer a { color: var(--ink-2); } .footer a:hover { color: var(--cy); } .footer__brand p { margin-top: var(--sp-4); font-size: var(--step--1); color: var(--ink-2); max-width: 30ch; } .footer__legal { margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--rule); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .06em; line-height: 1.8; color: var(--ink-3); } @media (min-width: 48em) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } /* -------------------------------------------------------------------------- 15. PRESS KIT -------------------------------------------------------------------------- */ .press-hero { padding-block: var(--sp-8) var(--sp-7); border-bottom: 1px solid var(--rule); --plate-bg: var(--bg-2); --plate-op: .34; } .press-hero:not(.plate) { background: linear-gradient(180deg, var(--bg-2), var(--bg)); } .press-hero__art { box-shadow: 0 0 0 1px var(--bg-2), 0 0 0 2px var(--rule-2), 0 30px 60px -30px rgba(0,0,0,.9); } .press-hero h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.035em; line-height: .96; } .press-hero h1 span { display: block; color: var(--ink-3); font-weight: 400; font-size: .5em; letter-spacing: -0.01em; margin-top: .3em; } .press-hero p { margin-top: var(--sp-5); color: var(--ink-2); max-width: 44ch; } .press-hero__actions { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); } .press-hero__grid { display: grid; gap: var(--sp-7); } .press-hero__art { border: 1px solid var(--rule); background: var(--bg-2); overflow: hidden; } .press-hero__art img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } @media (min-width: 62em) { .press-hero__grid { grid-template-columns: 1fr 1.2fr; gap: var(--sp-9); align-items: center; } } .press { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-block: var(--sp-8); } .press__main, .press__side { min-width: 0; } .press__main > .section:first-child { padding-top: 0; } .press__side { display: grid; gap: var(--sp-6); align-content: start; } .toc { font-family: var(--mono); font-size: var(--step--1); } .toc li { border-top: 1px solid var(--rule); } .toc li:last-child { border-bottom: 1px solid var(--rule); } .toc a { display: block; padding: var(--sp-3) 0; color: var(--ink-2); } .toc a:hover { color: var(--cy); padding-left: var(--sp-2); transition: padding .25s var(--ease), color .25s var(--ease); } @media (min-width: 62em) { .press { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-9); } .press__side { position: sticky; top: calc(var(--nav-top) + var(--sp-5)); max-height: calc(100dvh - var(--nav-top) - var(--sp-6)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; padding-right: var(--sp-2); } } .facts { width: 100%; font-family: var(--mono); font-size: var(--step--1); } .facts th, .facts td { text-align: left; vertical-align: top; padding: var(--sp-2) 0; } .facts th { font-weight: 400; color: var(--ink-3); text-transform: uppercase; letter-spacing: .1em; font-size: var(--step--2); width: 36%; padding-right: var(--sp-3); } .facts td { color: var(--ink); } .facts tr + tr th, .facts tr + tr td { border-top: 1px solid var(--rule); } .copy { position: relative; font-family: var(--mono); font-size: var(--step--1); line-height: 1.7; color: var(--ink); background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--cy-2); padding: var(--sp-5) var(--sp-5) var(--sp-4); white-space: pre-wrap; margin: 0 0 var(--sp-4); } .copy::before { content: attr(data-label); display: block; font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); margin-bottom: var(--sp-3); white-space: normal; } .copy .blood { font-weight: 500; } .gallery { display: grid; gap: var(--sp-4); } .gallery figure { margin: 0; border: 1px solid var(--rule); background: var(--bg-2); } .gallery img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .gallery figcaption { padding: var(--sp-3) var(--sp-4); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .06em; color: var(--ink-3); } .gallery figcaption b { color: var(--ink-2); font-weight: 400; } .gallery .is-wide { grid-column: 1 / -1; } .gallery .is-tall img { aspect-ratio: 4/3; } .gallery .is-sprite { display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, var(--cy-ink), var(--bg-2) 75%); } .gallery .is-sprite img { aspect-ratio: auto; width: 55%; padding-block: var(--sp-6); object-fit: contain; } @media (min-width: 48em) { .gallery { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } } .dl { font-family: var(--mono); font-size: var(--step--1); } .dl li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center; padding-block: var(--sp-4); border-top: 1px solid var(--rule); } .dl li:last-child { border-bottom: 1px solid var(--rule); } .dl .name { color: var(--ink); } .dl .spec { display: block; font-size: var(--step--2); color: var(--ink-3); margin-top: 2px; } .contact { border: 1px solid var(--rule); background: var(--bg-2); padding: var(--sp-5); } .contact > * + * { margin-top: var(--sp-4); } .contact .ledger li { grid-template-columns: 1fr; gap: 2px; } .contact .ledger .v { text-align: left; } .note { font-family: var(--mono); font-size: var(--step--2); color: var(--ink-3); border-left: 1px solid var(--rule-2); padding-left: var(--sp-3); max-width: 40ch; line-height: 1.7; } .two { display: grid; gap: var(--sp-6); } @media (min-width: 48em) { .two { grid-template-columns: 1fr 1fr; } } /* Disabled button (e.g. downloads not yet available). Rendered as . */ .btn.is-disabled { color: var(--ink-3); border-color: var(--rule); background: transparent; cursor: not-allowed; pointer-events: none; } /* -------------------------------------------------------------------------- 15b. LEGAL -------------------------------------------------------------------------- */ .legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--sp-8); } .legal__main { min-width: 0; } .legal__side { align-content: start; } .legal__main { max-width: 46rem; } .legal__block + .legal__block { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--rule); } .legal__block h2 { font-size: var(--step-2); margin-bottom: var(--sp-4); } .legal__block h3 { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--cy); font-weight: 500; margin: var(--sp-6) 0 var(--sp-3); } .legal__block p + p { margin-top: var(--sp-4); } .legal__block .facts { margin-top: var(--sp-3); } .legal__block .facts th { width: 30%; } .legal__block .facts td { color: var(--ink-2); } .legal__block a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .legal__block a:not(.btn):hover { color: var(--cy); } .legal__block code { font-family: var(--mono); font-size: .9em; color: var(--cy); } .legal__block .note { margin-top: var(--sp-4); } @media (min-width: 62em) { .legal { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-9); padding-block: var(--sp-9); } .legal__side { position: sticky; top: calc(var(--nav-top) + var(--sp-5)); } } /* -------------------------------------------------------------------------- 16. PRINT -------------------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; padding-top: 0; } body::before, .nav, .hero__media, .hero__sigils, .hero__engraving, .hero__hud, .hero__swarm, .mark__ghost, .mark__halo, .world__img, .corp__emblem, .pin--img, .plate__img, .bosses__plate, .orn { display: none !important; } .redacted { color: #000; background: none; box-shadow: none; } .copy, .contact, .gallery figure { border-color: #999; background: none; } } /* -------------------------------------------------------------------------- 17. PITCH DECK (pitch.html · deck.js) The publisher deck, drawn slide by slide from the PDF. The press hero's purple carries over: the brackets around the stage, the progress line and the slide in hand all take --vi, while the buttons keep the site's cyan. Nothing below is needed to read the deck: without JS the stage shows the loading note and the PDF link, and the clips section stands on its own. -------------------------------------------------------------------------- */ .hero--pitch .hero__engraving img { opacity: .11; object-position: 50% 30%; } /* The deck is the point of the page: the hero opens full screen on phones, but on a desktop it stops short so the first slide already shows under the fold. */ @media (min-width: 62em) { .hero--pitch .hero__in { min-height: calc(84vh - var(--nav-top)); min-height: calc(84lvh - var(--nav-top)); } } .deck { position: relative; overflow: hidden; overflow: clip; background: radial-gradient(60% 45% at 50% 0%, rgba(143,107,255,.09) 0%, rgba(143,107,255,0) 70%), radial-gradient(40% 40% at 100% 100%, rgba(143,107,255,.05) 0%, rgba(143,107,255,0) 70%), var(--bg); } .deck__head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); } .deck__head h2 { margin-top: var(--sp-4); font-size: var(--step-3); max-width: 18ch; } .deck__head p:not(.meta) { color: var(--ink-2); max-width: 46ch; } .deck__head .meta b { color: var(--vi); } /* The note under the title: this deck leaves the budgets out, the full one is sent by email. */ .deck__head p.deck__access { margin-top: var(--sp-4); padding-left: var(--sp-3); border-left: 1px solid var(--vi); font-size: var(--step--1); color: var(--ink-3); max-width: 44ch; } .deck__access a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .deck__access a:hover { color: var(--vi); } @media (min-width: 62em) { .deck__head { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: end; } } .deck__viewer { --arn: 1.7778; position: relative; outline-offset: 6px; } .deck__viewer:focus-visible { outline-color: var(--vi); } .deck__stage { position: relative; aspect-ratio: var(--arn); overflow: hidden; background: #000; border: 1px solid var(--rule-2); box-shadow: 0 40px 90px -50px rgba(143,107,255,.45), 0 0 0 1px rgba(143,107,255,.08); touch-action: pan-y; user-select: none; -webkit-user-select: none; } /* Registration brackets: the press HUD closing its corners around the slide. */ .deck__stage::before { content: ""; position: absolute; inset: .55rem; z-index: 3; pointer-events: none; opacity: .6; --tk: linear-gradient(var(--vi), var(--vi)); background: var(--tk) 0 0 / 1.1rem 1px, var(--tk) 0 0 / 1px 1.1rem, var(--tk) 100% 0 / 1.1rem 1px, var(--tk) 100% 0 / 1px 1.1rem, var(--tk) 0 100% / 1.1rem 1px, var(--tk) 0 100% / 1px 1.1rem, var(--tk) 100% 100% / 1.1rem 1px, var(--tk) 100% 100% / 1px 1.1rem; background-repeat: no-repeat; } .deck__slide { position: absolute; inset: 0; } .deck__slide canvas { display: block; width: 100%; height: 100%; } .deck__slide.is-in { animation: deck-in .5s var(--ease); } @keyframes deck-in { from { opacity: 0; transform: translateX(var(--dir, 14px)); } to { opacity: 1; transform: none; } } /* The clips the slides refer to, laid over their still frames. deck.js sets --x/--y/--w/--h (%). */ .deck__media { position: absolute; inset: 0; pointer-events: none; } .deck__media > * { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); max-width: none; object-fit: cover; background: #000; pointer-events: auto; } .deck__media > img { pointer-events: none; } /* A gif over its still: stretched to the deck's box like PowerPoint does, and cropped the same way (deck.js sizes and offsets the image from data-deck-crop). */ .deck__media > .deck__clip { overflow: hidden; pointer-events: none; background: transparent; } /* sprites keep their transparency */ .deck__clip img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; } /* The speaker over the reel on its slide: anchored to the clip's own corner, in the deck's purple. */ .deck__media > .deck__vol { left: calc(var(--x) + var(--w) - 2.4rem - .6rem); top: calc(var(--y) + var(--h) - 2.4rem - .6rem); width: 2.4rem; height: 2.4rem; object-fit: unset; } .deck__media > .deck__vol:hover, .deck__media > .deck__vol[aria-pressed="true"] { color: var(--vi); border-color: var(--vi); } /* Loading readout, centred on the empty stage until the first slide lands. */ .deck__status { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: min(80%, 26rem); text-align: center; font-family: var(--mono); font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase; color: var(--vi); } .deck__status i { display: block; width: 10rem; height: 1px; margin: var(--sp-4) auto 0; background: var(--rule-2); overflow: hidden; } .deck__status i::after { content: ""; display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--vi); box-shadow: 0 0 8px var(--vi); transition: transform .3s var(--ease); } .deck__status .deck__error, .deck__status .deck__noscript { margin: 0; max-width: none; font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0; text-transform: none; color: var(--ink-2); line-height: 1.5; } .deck__status a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .deck__status a:hover { color: var(--vi); } .deck__viewer.is-ready .deck__status { display: none; } .deck__viewer.is-error .deck__status i { display: none; } /* Arrows: hidden until the pointer is over the stage; always there on touch screens. */ .deck__arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); width: 2.75rem; height: 3.75rem; padding: 0; border: 1px solid var(--rule-2); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); font-family: var(--mono); font-size: var(--step-0); cursor: pointer; opacity: 0; transition: opacity .3s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .deck__arrow--prev { left: var(--sp-3); } .deck__arrow--next { right: var(--sp-3); } .deck__viewer:hover .deck__arrow, .deck__viewer:focus-within .deck__arrow { opacity: 1; } @media (hover: none) { .deck__arrow { opacity: 1; } } .deck__arrow:hover { color: var(--vi); border-color: var(--vi); } .deck__arrow[disabled] { opacity: 0 !important; pointer-events: none; } /* Touch: the step buttons in the bar do the arrows' job, and the badge says the slide opens up. */ .deck__nav { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .deck__step { display: none; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font-family: var(--mono); font-size: var(--step--1); cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease); } .deck__step:hover { color: var(--vi); border-color: var(--vi); } .deck__step[disabled] { opacity: .3; pointer-events: none; } .deck__tap { display: none; position: absolute; right: .9rem; bottom: .8rem; z-index: 4; padding: .3rem .55rem; pointer-events: none; border: 1px solid rgba(143,107,255,.55); background: color-mix(in srgb, var(--bg) 78%, transparent); font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vi); } .deck__hint--touch { display: none; } @media (hover: none) { .deck__step { display: inline-flex; } .deck__tap { display: block; } .deck__hint--keys { display: none; } .deck__hint--touch { display: block; } } /* Phones: the stage runs edge to edge (every pixel counts), the arrows leave the slide alone, and the tools drop to their own row under the counter. */ @media (max-width: 47.99em) { .deck__viewer { margin-inline: calc(var(--gutter) * -1); } .deck__stage { border-inline: 0; } .deck__arrow { display: none; } .deck__bar { flex-wrap: wrap; padding-inline: var(--gutter); } .deck__tools { flex-basis: 100%; } .deck__thumbs { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .deck__thumb { width: 6.5rem; } } .deck__bar { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); } .deck__count { flex: none; min-width: 6.5ch; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; color: var(--ink-3); font-variant-numeric: tabular-nums; } .deck__count span:first-child { color: var(--vi); } .deck__progress { flex: 1 1 3rem; height: 1px; background: var(--rule-2); } .deck__progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--vi), color-mix(in srgb, var(--vi) 55%, var(--cy))); box-shadow: 0 0 8px rgba(143,107,255,.5); transition: transform .45s var(--ease); } .deck__tools { display: flex; gap: var(--sp-2); flex: none; } .deck__tools .btn { min-height: 2.2rem; padding: .45rem .8rem; font-size: var(--step--2); } .deck__tools .btn:hover { color: var(--vi); border-color: var(--vi); } /* Thumbnails: one strip, the slide in hand outlined in purple, a play sign on the ones with a clip. */ .deck__thumbs { position: relative; display: flex; gap: var(--sp-2); padding: var(--sp-4) 0 var(--sp-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; } .deck__thumb { position: relative; flex: none; width: clamp(6.5rem, 14vw, 9rem); aspect-ratio: var(--arn); padding: 0; border: 1px solid var(--rule-2); background: var(--bg-2); cursor: pointer; scroll-snap-align: center; opacity: .5; transition: opacity .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .deck__thumb canvas { display: block; width: 100%; height: 100%; } .deck__thumb span { position: absolute; left: .4rem; bottom: .3rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px #000; } .deck__thumb:hover { opacity: .9; } .deck__thumb[aria-selected="true"] { opacity: 1; border-color: var(--vi); box-shadow: 0 0 0 1px var(--vi), 0 0 16px rgba(143,107,255,.35); } .deck__thumb.has-clip::after { content: "▶"; position: absolute; right: .4rem; bottom: .3rem; font-size: .55rem; color: var(--vi); text-shadow: 0 1px 2px #000; } .deck__hint { margin-top: var(--sp-4); max-width: none; color: var(--ink-3); } .deck__hint kbd { font: inherit; color: var(--ink-2); border: 1px solid var(--rule-2); padding: .05em .45em; } /* Theatre: the Fullscreen API on a desktop or a tablet, a fixed overlay on every phone (deck.js decides; both states share these rules, so the two look the same). The stage and its bar sit in .deck__body, sized to whatever the screen allows inside the safe area; the thumbnails and the badge stay out. --fit is set twice on purpose: a custom property is not checked until it is used, so the dvh version lives behind @supports instead of a plain fallback. */ .deck__viewer:fullscreen, .deck__viewer.is-theatre { position: fixed; inset: 0; z-index: 70; margin: 0; padding: 0; background: #000; overflow: hidden; display: grid; place-items: center; } .deck__viewer:fullscreen .deck__body, .deck__viewer.is-theatre .deck__body { --sa-x: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px)); --sa-y: calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)); --room: 6rem; /* the bar under the slide plus a margin; a phone on its side gets less */ --fit: min(100vw - 2rem - var(--sa-x), (100vh - var(--room) - var(--sa-y)) * var(--arn)); width: var(--fit); display: grid; grid-template-rows: auto auto; } @supports (height: 1dvh) { .deck__viewer:fullscreen .deck__body, .deck__viewer.is-theatre .deck__body { --fit: min(100dvw - 2rem - var(--sa-x), (100dvh - var(--room) - var(--sa-y)) * var(--arn)); } } .deck__viewer:fullscreen .deck__stage, .deck__viewer.is-theatre .deck__stage { border-inline: 1px solid var(--rule-2); touch-action: pinch-zoom; } .deck__viewer:fullscreen .deck__bar, .deck__viewer.is-theatre .deck__bar { border-bottom: 0; padding-inline: 0; } .deck__viewer:fullscreen .deck__tools, .deck__viewer.is-theatre .deck__tools { flex-basis: auto; } .deck__viewer:fullscreen .deck__thumbs, .deck__viewer.is-theatre .deck__thumbs, .deck__viewer:fullscreen .deck__tap, .deck__viewer.is-theatre .deck__tap { display: none; } html.is-theatre, html.is-theatre body { overflow: hidden; } /* A short screen, which on a phone means it is being held on its side: the bar goes on a diet (steps, counter, the way out) and the slide takes all the height that is left. */ @media (max-height: 30em) { .deck__viewer:fullscreen .deck__body, .deck__viewer.is-theatre .deck__body { --room: 4rem; } .deck__viewer:fullscreen .deck__bar, .deck__viewer.is-theatre .deck__bar { padding-block: var(--sp-2); } .deck__viewer:fullscreen .deck__tools a, .deck__viewer.is-theatre .deck__tools a { display: none; } } /* A phone held upright: a 16:9 slide can only be as wide as the screen, so it takes the whole width and the bar goes light under it. Nothing is turned on its side and nothing is asked of the system, so this is what every browser shows; the badge at the foot says where the big version is, and turning the phone gives it. */ @media (max-width: 47.99em) and (orientation: portrait) { .deck__viewer:fullscreen .deck__body, .deck__viewer.is-theatre .deck__body { --fit: min(100vw - var(--sa-x), (100vh - var(--room) - var(--sa-y)) * var(--arn)); } @supports (height: 1dvh) { .deck__viewer:fullscreen .deck__body, .deck__viewer.is-theatre .deck__body { --fit: min(100dvw - var(--sa-x), (100dvh - var(--room) - var(--sa-y)) * var(--arn)); } } /* One row for the bar: the steps and the way out, nothing else. */ .deck__viewer:fullscreen .deck__bar, .deck__viewer.is-theatre .deck__bar { flex-wrap: nowrap; padding-inline: var(--sp-3); justify-content: space-between; } .deck__viewer:fullscreen .deck__stage, .deck__viewer.is-theatre .deck__stage { border-inline: 0; } .deck__viewer:fullscreen .deck__progress, .deck__viewer.is-theatre .deck__progress, .deck__viewer:fullscreen .deck__tools a, .deck__viewer.is-theatre .deck__tools a { display: none; } .deck__viewer:fullscreen .deck__turn, .deck__viewer.is-theatre .deck__turn { display: block; } } /* "Turn your phone": at the foot of the screen while the slide is as wide as an upright phone allows, gone after a few seconds. deck.js restarts it every time the theatre is opened. */ .deck__turn { display: none; position: absolute; left: 50%; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); z-index: 5; transform: translateX(-50%); padding: .45rem .8rem; white-space: nowrap; pointer-events: none; border: 1px solid rgba(143,107,255,.55); background: color-mix(in srgb, var(--bg) 80%, transparent); font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vi); animation: deck-turn 6s var(--ease) both; } .deck__turn::before { content: "\21BB"; display: inline-block; margin-right: .5em; font-size: 1.2em; line-height: 0; vertical-align: -.05em; } @keyframes deck-turn { 0%, 75% { opacity: 1; } 100% { opacity: 0; } } /* The badge has done its job once the theatre has been opened. */ .deck__viewer.is-tapped .deck__tap { display: none; } /* The clips section: the site's mechanics strip, each caption naming the slide it sits on. */ .clips .strip figcaption span, .clips__reel figcaption span { color: var(--vi); } .clips__reel { margin: var(--sp-6) 0 0; border: 1px solid var(--rule); background: var(--bg-2); } .clips__reel video { width: 100%; aspect-ratio: 16 / 9; background: #000; } .clips__reel figcaption { padding: var(--sp-3) var(--sp-4); display: flex; justify-content: space-between; gap: var(--sp-3); font-family: var(--mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } @media (min-width: 62em) { .clips__reel { width: min(100%, 58rem); margin-inline: auto; } } @media print { .deck__arrow, .deck__thumbs, .deck__hint, .deck__tools { display: none !important; } }