/* ═══════════════════════════════════════════════════════════════════ Moonlit Foundry Concept: cold light, hot metal. Moonlight sets the ground; the accent is the only warm thing on the page, so it always means something when it appears. ═══════════════════════════════════════════════════════════════ */ @font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: "SourceSerif"; src: url("fonts/source-serif-var.woff2") format("woff2-variations"); font-weight: 200 900; font-display: swap; } /* ── palettes ─────────────────────────────────────────────────────── A palette is four numbers: the ground's hue/saturation and the heat's hue/saturation. Theme turns those into lightness. Put data-pal on any element to re-tint that subtree — that's how each game carries its own heat inside the studio's page. */ [data-pal="iron"] { --hue: 226; --sat: 34%; --ah: 35; --as: 88%; } [data-pal="argent"] { --hue: 28; --sat: 10%; --ah: 199; --as: 90%; } [data-pal="verdigris"] { --hue: 193; --sat: 26%; --ah: 158; --as: 58%; } [data-pal="nightshade"] { --hue: 258; --sat: 30%; --ah: 278; --as: 68%; } /* Dark is the site, not a preference. The palette is built around ink and the accent only reads as heat against it, so the system's setting doesn't get a vote — day is a choice made in the settings panel and remembered. */ :root, [data-pal] { --ink: hsl(var(--hue) var(--sat) 5.5%); --cast: hsl(var(--hue) calc(var(--sat) * .78) 10%); --raise: hsl(var(--hue) calc(var(--sat) * .70) 14%); --rim: hsl(var(--hue) calc(var(--sat) * .55) 22%); --moon: hsl(var(--hue) 30% 93%); --lunar: hsl(var(--hue) 17% 66%); --heat: hsl(var(--ah) var(--as) 60%); --heat-txt: hsl(var(--ah) var(--as) 62%); --on-heat: hsl(var(--hue) 40% 8%); --ember: hsl(calc(var(--ah) - 20) calc(var(--as) - 8%) 50%); --glow: hsl(var(--ah) var(--as) 58% / .30); } :root[data-theme="light"], :root[data-theme="light"] [data-pal] { --ink: hsl(var(--hue) 20% 96%); --cast: hsl(var(--hue) 22% 91%); --raise: hsl(var(--hue) 24% 87%); --rim: hsl(var(--hue) 17% 78%); --moon: hsl(var(--hue) 42% 13%); --lunar: hsl(var(--hue) 15% 40%); --heat: hsl(var(--ah) var(--as) 44%); --heat-txt: hsl(var(--ah) calc(var(--as) - 4%) 33%); --on-heat: hsl(var(--hue) 30% 97%); --ember: hsl(calc(var(--ah) - 20) var(--as) 38%); --glow: hsl(var(--ah) var(--as) 45% / .22); } /* No data-theme="dark" block: the base above already is it, so switching back to night is removing the attribute rather than setting another one. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } :root { --mk-cool: var(--moon); --mk-hot: var(--heat); --display: "Archivo", ui-sans-serif, system-ui, sans-serif; --body: "SourceSerif", Georgia, "Times New Roman", serif; --measure: 64ch; --pad: clamp(20px, 5vw, 64px); --wide: 1180px; } /* ── case ─────────────────────────────────────────────────────────── Display type is lowercase. Tracking and leading are bound to the case because they can't be shared: caps want space between letters and can sit tight vertically, lowercase wants the reverse or its ascenders and descenders collide. --trk scales every tracked label at once; each rule keeps its own em value so the tighter-as-larger rhythm survives the switch. Put data-case="upper" on for the all-caps treatment. */ :root { --case: lowercase; --trk: .55; --trk-hero: -.014em; --lh-hero: 1.0; --trk-display: -.014em; --lh-display: 1.06; --trk-h2: -.012em; --lh-h2: 1.12; } :root[data-case="upper"] { --case: uppercase; --trk: 1; --trk-hero: .045em; --lh-hero: .92; --trk-display: -.008em; --lh-display: 1.02; --trk-h2: -.004em; --lh-h2: 1.08; } /* ── base ───────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--ink); color: var(--moon); font-family: var(--body); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* A page shorter than the viewport still plants its footer on the floor. The slack goes to the hero, which absorbs it as breathing room; anywhere else it reads as a section that ran out of content. */ main { display: flex; flex-direction: column; flex: 1 0 auto; } main > .hero { flex: 1 0 auto; display: flex; max-height: 460px; } p { margin: 0; max-width: var(--measure); } a { color: var(--heat-txt); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--moon); } :focus-visible { outline: 2px solid var(--heat); outline-offset: 3px; border-radius: 2px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--moon); color: var(--ink); padding: 9px 14px; border-radius: 2px; font-family: var(--display); font-size: 12px; letter-spacing: calc(var(--trk) * .12em); text-transform: var(--case); text-decoration: none; transition: top .15s ease; } .skip:focus { top: 8px; color: var(--ink); } .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; } /* ── typographic roles ──────────────────────────────────────────── */ .eyebrow { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 620; font-size: 11px; letter-spacing: calc(var(--trk) * .16em); text-transform: var(--case); color: var(--lunar); margin: 0; } .display { font-family: var(--display); font-variation-settings: "wdth" 118, "wght" 780; font-size: clamp(30px, 5.6vw, 58px); line-height: var(--lh-display); letter-spacing: var(--trk-display); text-transform: var(--case); text-wrap: balance; margin: 0; } .h2 { font-family: var(--display); font-variation-settings: "wdth" 112, "wght" 740; font-size: clamp(23px, 3.4vw, 33px); line-height: var(--lh-h2); letter-spacing: var(--trk-h2); text-transform: var(--case); text-wrap: balance; margin: 0; } .h3 { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-size: 15px; letter-spacing: calc(var(--trk) * .05em); text-transform: var(--case); margin: 0; } .lede { font-size: clamp(17px, 2vw, 19.5px); line-height: 1.6; color: var(--lunar); } .lede strong { color: var(--moon); font-weight: 600; } /* Opts a run of text out of the case transform — acronyms inside a lowercase label ("SVG", "EU") that would otherwise flatten. */ .caps { text-transform: none; } /* ── brand lockups ──────────────────────────────────────────────── */ .mk { display: block; flex: none; } .lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; } .lockup .mk { width: 30px; height: 30px; } .lockup .wm { font-family: var(--display); font-variation-settings: "wdth" 120, "wght" 800; font-size: 13.5px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); line-height: 1; white-space: nowrap; } .lockup:hover { color: inherit; } /* ── masthead ───────────────────────────────────────────────────── */ .masthead { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rim); } .masthead > .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 13px var(--pad); } .nav { display: flex; gap: 22px; margin-left: auto; } .nav a { font-family: var(--display); font-variation-settings: "wdth" 92, "wght" 620; font-size: 11.5px; letter-spacing: calc(var(--trk) * .14em); text-transform: var(--case); color: var(--lunar); text-decoration: none; } .nav a:hover, .nav a[aria-current="page"] { color: var(--moon); } .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--heat); text-underline-offset: 5px; } /* heat picker */ .heat-pick { display: flex; align-items: center; gap: 7px; } .heat-chip { width: 22px; height: 22px; padding: 0; position: relative; border: 1px solid var(--rim); border-radius: 2px; background: var(--chip-g); cursor: pointer; transition: transform .16s ease, border-color .16s ease; } .heat-chip::after { content: ""; position: absolute; inset: 4px 4px auto 4px; height: 5px; background: var(--chip-h); } .heat-chip:hover { transform: translateY(-2px); } .heat-chip[aria-pressed="true"] { border-color: var(--moon); } .hc-iron { --chip-g: hsl(226 34% 12%); --chip-h: hsl(35 88% 60%); } .hc-argent { --chip-g: hsl(28 10% 12%); --chip-h: hsl(199 90% 60%); } .hc-verdigris { --chip-g: hsl(193 26% 12%); --chip-h: hsl(158 58% 55%); } .hc-nightshade { --chip-g: hsl(258 30% 13%); --chip-h: hsl(278 68% 66%); } .ghost-btn { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 620; font-size: 10px; letter-spacing: calc(var(--trk) * .14em); text-transform: var(--case); color: var(--lunar); background: none; border: 1px solid var(--rim); border-radius: 2px; padding: 6px 10px; cursor: pointer; transition: color .16s ease, border-color .16s ease; } .ghost-btn:hover { color: var(--moon); border-color: var(--lunar); } /* ── settings pop-down ────────────────────────────────────────────── Holds the two display preferences, heat and theme. The panel keeps focus inside the header, so it closes on outside click, Escape, or focus leaving it — but not on a click within, so a heat can be tried against the page without reopening. */ .settings { position: relative; } .gear-btn { padding: 6px; line-height: 0; } .gear-btn svg { display: block; width: 15px; height: 15px; } .gear-btn[aria-expanded="true"] { color: var(--moon); border-color: var(--lunar); } .settings-panel { position: absolute; top: calc(100% + 11px); right: 0; z-index: 50; display: grid; gap: 16px; padding: 16px; background: var(--cast); border: 1px solid var(--rim); border-radius: 2px; box-shadow: 0 16px 38px hsl(var(--hue) 45% 3% / .45); } /* Beats the grid above, which would otherwise defeat [hidden]. */ .settings-panel[hidden] { display: none; } .set-group { display: grid; gap: 9px; justify-items: start; } /* ── sections ───────────────────────────────────────────────────── */ .band { border-bottom: 1px solid var(--rim); } /* The rule above the footer belongs to the footer. On the last section it would float, since any space the hero doesn't absorb collects below it — invisible ink, but a stranded line if the rule sits here. */ main > .band:last-child { border-bottom: none; } .band > .wrap { padding: clamp(38px, 5vw, 64px) var(--pad); display: grid; gap: clamp(22px, 2.6vw, 30px); } .band-head { display: grid; gap: 10px; } /* ── hero ───────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rim); } .hero > .wrap { flex: 1; padding: clamp(44px, 6vw, 84px) var(--pad) clamp(40px, 5vw, 72px); display: grid; gap: 22px; justify-items: start; align-content: center; position: relative; z-index: 1; } .hero-lockup { display: flex; align-items: center; gap: clamp(15px, 2.6vw, 30px); } .hero-lockup .mk { width: clamp(56px, 9.5vw, 100px); height: clamp(56px, 9.5vw, 100px); filter: drop-shadow(0 0 30px var(--glow)); } .hero h1 { font-family: var(--display); font-variation-settings: "wdth" 122, "wght" 800; font-size: clamp(34px, 6.8vw, 70px); line-height: var(--lh-hero); letter-spacing: var(--trk-hero); text-transform: var(--case); margin: 0; } .hero .lede { max-width: 46ch; } .rule-row { display: flex; align-items: center; gap: 13px; } .hot-rule { height: 3px; width: clamp(64px, 12vw, 128px); background: linear-gradient(90deg, var(--ember), var(--heat)); flex: none; } .rule-row span { font-family: var(--display); font-variation-settings: "wdth" 92, "wght" 600; font-size: 11.5px; letter-spacing: calc(var(--trk) * .22em); text-transform: var(--case); color: var(--lunar); } /* ── games ──────────────────────────────────────────────────────── */ .games { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; } /* A lone game takes the whole row rather than sitting in a column with dead space beside it. Add a second and both fall back into the grid. */ .games > :only-child { grid-column: 1 / -1; } .game { background: var(--cast); border: 1px solid var(--rim); border-radius: 2px; padding: 30px 24px 28px; display: grid; gap: 15px; align-content: start; justify-items: center; text-align: center; position: relative; overflow: hidden; transition: border-color .2s ease, transform .2s ease; } .game::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--ember), var(--heat)); } .game:hover { border-color: var(--lunar); transform: translateY(-2px); } .game .mk { width: 42px; height: 42px; } .game h3 { font-family: var(--display); font-variation-settings: "wdth" 112, "wght" 760; font-size: 22px; letter-spacing: calc(var(--trk) * .01em); text-transform: var(--case); margin: 0; line-height: 1.12; } /* The one place the body serif doesn't run. A card is a display object rather than prose, and the serif reads as an article intro sitting above buttons. */ .game p { font-family: var(--display); font-variation-settings: "wdth" 96, "wght" 400; font-size: 15px; line-height: 1.55; color: var(--lunar); max-width: 58ch; } /* Title and status on one line, centred as a pair. */ .game-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; } /* Two classes, to outweigh `.game p` above. */ .game .game-plat { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-size: 10.5px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); color: var(--lunar); } .game-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .game-play, .game-more { font-family: var(--display); font-size: 12px; letter-spacing: calc(var(--trk) * .1em); text-transform: var(--case); padding: 9px 15px; border-radius: 2px; text-decoration: none; transition: background .16s ease, color .16s ease, border-color .16s ease; } /* The only filled control on the site, and the only warm one. Heat is meant to mean something wherever it appears; here it means the game is playable. */ .game-play { font-variation-settings: "wdth" 92, "wght" 700; background: var(--heat); color: var(--on-heat); border: 1px solid var(--heat); } .game-play:hover { background: var(--moon); border-color: var(--moon); color: var(--ink); } .game-more { font-variation-settings: "wdth" 92, "wght" 620; color: var(--lunar); background: none; border: 1px solid var(--rim); } .game-more:hover { color: var(--moon); border-color: var(--lunar); } /* Phone captures, so height is the shared dimension — matching widths would leave them different heights and the row would look ragged. */ .shots { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .shots img { display: block; width: auto; height: clamp(230px, 24vw, 380px); border: 1px solid var(--rim); border-radius: 4px; } .pill { justify-self: start; font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 660; font-size: 9.5px; letter-spacing: calc(var(--trk) * .15em); text-transform: var(--case); padding: 4px 9px; border-radius: 2px; border: 1px solid var(--heat); color: var(--heat-txt); } .pill-live { background: var(--heat); border-color: var(--heat); color: var(--on-heat); } /* ── prose / legal documents ────────────────────────────────────── */ .doc > .wrap { padding: clamp(40px, 6vw, 72px) var(--pad) clamp(60px, 8vw, 96px); display: grid; gap: 30px; } .doc-head { display: grid; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--rim); } .doc-head .stamp { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 620; font-size: 11px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); color: var(--lunar); font-variant-numeric: tabular-nums; } .prose { display: grid; gap: 26px; max-width: var(--measure); } .prose h2 { font-family: var(--display); font-variation-settings: "wdth" 108, "wght" 740; font-size: 19px; letter-spacing: calc(var(--trk) * .02em); text-transform: var(--case); margin: 12px 0 0; } .prose h3 { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 680; font-size: 14px; letter-spacing: calc(var(--trk) * .06em); text-transform: var(--case); margin: 8px 0 0; color: var(--lunar); } .prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; } .prose li { max-width: var(--measure); } .prose li::marker { color: var(--heat); } /* Fill-in markers. Delete .todo styling once the brackets are gone. */ .todo { background: color-mix(in srgb, var(--heat) 20%, transparent); border-bottom: 1px solid var(--heat); padding: 0 3px; font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 620; font-size: .84em; letter-spacing: .06em; } .callout { border: 1px solid var(--heat); border-left-width: 3px; background: color-mix(in srgb, var(--heat) 9%, transparent); padding: 18px 20px; display: grid; gap: 8px; border-radius: 2px; max-width: var(--measure); } .callout .h3 { color: var(--heat-txt); } .callout p { font-size: 15.5px; line-height: 1.55; } .toc { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; list-style: none; max-width: var(--measure); } .toc a { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-size: 11px; letter-spacing: calc(var(--trk) * .12em); text-transform: var(--case); text-decoration: none; color: var(--lunar); } .toc a:hover { color: var(--heat-txt); } /* ── definition rows (press factsheet, support) ─────────────────── */ .rows { list-style: none; padding: 0; margin: 0; display: grid; max-width: 820px; } .rows li { display: grid; grid-template-columns: minmax(118px, auto) 1fr; gap: 4px 20px; padding: 15px 0; border-top: 1px solid var(--rim); align-items: baseline; } .rows li:last-child { border-bottom: 1px solid var(--rim); } .rows .k { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 680; font-size: 11px; letter-spacing: calc(var(--trk) * .1em); text-transform: var(--case); color: var(--heat-txt); } .rows .v { font-size: 16px; line-height: 1.5; } .rows .v small { display: block; color: var(--lunar); font-size: 14px; margin-top: 3px; } /* ── mark preview controls (press) ────────────────────────────────── The same heat and theme controls as the masthead, inline beside the downloads. The marks below take their colour from the page, so this re-tints them in place. */ .mark-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 13px 16px; border: 1px solid var(--rim); border-radius: 2px; background: var(--cast); max-width: 820px; } /* ── download grid (press) ────────────────────────────────────────── auto-fit, not auto-fill: empty tracks collapse so the tiles present always divide the row evenly instead of leaving a short last row. Held to the same 820px as .rows so the page keeps one edge. */ .dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px; max-width: 820px; min-width: 0; } .dl a { border: 1px solid var(--rim); background: var(--cast); border-radius: 2px; padding: 22px 18px 16px; display: grid; gap: 14px; justify-items: center; text-decoration: none; color: var(--moon); text-align: center; transition: border-color .18s ease, background .18s ease; } .dl a:hover { border-color: var(--heat); background: var(--raise); } .dl .mk { width: 54px; height: 54px; } /* The lockup tile previews the actual lockup, not the bare mark — otherwise the one tile whose point is the arrangement doesn't show it. Boxed to the mark's height so all the tiles sit on one line. */ .dl .lockup { height: 54px; } .dl .lockup .mk { width: 30px; height: 30px; } .dl .lockup .wm { font-size: 11px; } .dl .cap { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 620; font-size: 10px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); color: var(--lunar); } .dl .nm { font-family: var(--display); font-variation-settings: "wdth" 100, "wght" 700; font-size: 12.5px; letter-spacing: calc(var(--trk) * .05em); text-transform: var(--case); } /* ── footer ───────────────────────────────────────────────────────── Two rows, no dividing rule: the site index centred on top, the wordmark and copyright on the baseline below it. Everything a visitor seeks deliberately lives here — the masthead carries only the games listing, which is the one destination they browse to. */ .foot { border-top: 1px solid var(--rim); } .foot > .wrap { padding: clamp(22px, 3vw, 34px) var(--pad); display: grid; gap: 16px; } .foot .lockup { gap: 9px; } .foot .lockup .mk { width: 24px; height: 24px; } .foot .lockup .wm { font-size: 12px; } .foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } .foot-base .lockup { margin-right: auto; } .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; padding: 0; margin: 0; list-style: none; } .foot-nav a { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 600; font-size: 11px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); color: var(--lunar); text-decoration: none; } .foot-nav a:hover, .foot-nav a[aria-current="page"] { color: var(--moon); } .foot-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--heat); text-underline-offset: 5px; } .foot-copy { font-family: var(--display); font-variation-settings: "wdth" 88, "wght" 520; font-size: 11px; letter-spacing: calc(var(--trk) * .13em); text-transform: var(--case); color: var(--lunar); } /* ── motion ─────────────────────────────────────────────────────── */ @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero .mk { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; } .hero h1 { animation: wipe .7s cubic-bezier(.4,0,.15,1) .18s both; } .hero .lede { animation: rise .5s ease .58s both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } .brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }