/* bitbaum.orangecat.ch — the studio's front door. * * Values live in @bitbaum/design-tokens (loaded first, as /tokens.css): the * same SSOT OrangeCat, Loki and Solon consume. This file maps those roles onto * the names the markup uses and adds nothing chromatic of its own. Retheming * the stack therefore reaches this site, and the mono face is finally the * fleet's IBM Plex Mono rather than whatever mono the visitor's OS shipped. * * THE ACCENT IS INK, ON PURPOSE. #ff5c00 belongs to OrangeCat — the name says * so — and a studio wearing one of its products' colours reads as that * product's subsidiary. Here the accent is the text colour itself, which * inverts per theme, so the primary action is black-on-white in light and * white-on-black in dark. Orange stays for two honest jobs: status, and links * that actually point at OrangeCat. */ :root { /* Surfaces and text — roles, not values. */ --bg: hsl(var(--surface-base)); --bg-raised: hsl(var(--surface-raised)); --bg-overlay: hsl(var(--surface-overlay)); --fg: hsl(var(--text-primary)); --fg-2: hsl(var(--text-secondary)); --fg-3: hsl(var(--text-tertiary)); --line: hsl(var(--border-subtle)); --line-2: hsl(var(--border-default)); /* Ink: the action colour is the text colour, so it flips with the theme. */ --accent: hsl(var(--text-primary)); --accent-hover: hsl(var(--border-interactive)); --on-accent: hsl(var(--text-inverted)); /* The only chromatic colours on the site, and neither is decoration. */ --status: hsl(var(--status-warning)); --orangecat: var(--public-accent); --ok: hsl(var(--status-positive)); --sans: var(--font-sans, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif); --mono: var(--font-mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace); --display-weight: 600; --display-tracking: -0.035em; --text-display-1: clamp(2.5rem, 5.2vw, 4.75rem); --text-display-2: clamp(1.8rem, 3.4vw, 2.9rem); --text-display-3: clamp(1.35rem, 2vw, 1.75rem); --lede: clamp(1.05rem, 1.5vw, 1.3rem); --shell: var(--shell-max, 80rem); --gutter: clamp(1.25rem, 5vw, 3rem); --nav-h: var(--public-nav-height, 76px); --tracking-caps: 0.14em; --section: var(--section-py); --section-tight: var(--section-py-tight); --radius: 3px; --radius-pill: var(--radius-pill, 999px); --measure-lede: 46ch; --measure-copy: 62ch; /* The hero bed and its scrim only make sense over a dark ground; in light they would wash the headline out, so each theme states its own. */ --bed-opacity: 0.06; --scrim-1: hsl(var(--surface-base) / 0.86); --scrim-2: hsl(var(--surface-base) / 0.72); --scrim-3: hsl(var(--surface-base) / 0.96); } /* Dark is a class, exactly as the package intends, so light / dark / system is a class on and never a second stylesheet. */ .dark { /* Override the package's ROLES, not this file's aliases: anything else that reads --surface-base (the sticky header, the scrims) then agrees instead of sitting a shade apart. */ --surface-base: 0 0% 0%; --surface-raised: 0 0% 5%; --surface-overlay: 0 0% 9%; --text-primary: 0 0% 92%; --text-secondary: 0 0% 65%; --text-tertiary: 0 0% 48%; --text-inverted: 0 0% 4%; --border-subtle: 0 0% 15%; --border-default: 0 0% 26%; --accent: hsl(0 0% 96%); --accent-hover: hsl(0 0% 100%); --on-accent: hsl(0 0% 4%); --bed-opacity: 0.26; --scrim-1: hsl(0 0% 0% / 0.86); --scrim-2: hsl(0 0% 0% / 0.72); --scrim-3: hsl(0 0% 0% / 0.96); } /* ─── base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: light; } html.dark { color-scheme: dark; } html, body { margin: 0; background: var(--bg); color: var(--fg); } body { font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* The UA rule for [hidden] is `display: none`, which ANY display declaration beats — .card is display:flex, so filtered-out cards stayed on screen while the property read as hidden. Make it win. */ [hidden] { display: none !important; } .wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); } /* ─── type roles ──────────────────────────────────────────────────────── */ .display-1, .display-2, .display-3 { font-weight: var(--display-weight); letter-spacing: var(--display-tracking); margin: 0; } .display-1, .display-2 { text-transform: uppercase; letter-spacing: -0.025em; } .display-1 { font-size: var(--text-display-1); line-height: 0.98; text-wrap: balance; } .display-2 { font-size: var(--text-display-2); line-height: 1.04; text-wrap: balance; } .display-3 { font-size: var(--text-display-3); line-height: 1.15; letter-spacing: -0.02em; } .lede { font-size: var(--lede); line-height: 1.5; color: var(--fg-2); max-width: var(--measure-lede); margin: 0; text-wrap: pretty; } .copy { color: var(--fg-2); max-width: var(--measure-copy); line-height: 1.65; margin: 0; } .copy + .copy { margin-top: 1rem; } /* The fleet's shared eyebrow pill comes from tokens.css. Two deliberate differences: the face is the mono (this site labels in mono everywhere), and the dot is a STATUS colour rather than --public-accent, because that orange is OrangeCat's identity and this is the studio. */ .eyebrow { width: fit-content; font-family: var(--mono); font-size: 0.7rem; } .eyebrow::before { background: var(--status); } .eyebrow.quiet::before { background: var(--fg-3); } .label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } /* ─── actions ─────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0 1.6rem; border-radius: 3px; font-weight: 600; font-size: 0.78rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; border: 1px solid transparent; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; white-space: nowrap; } .btn.primary { background: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hover); } .btn.secondary { border-color: var(--line-2); color: var(--fg); background: hsl(var(--surface-base) / 0.4); backdrop-filter: blur(6px); } .btn.secondary:hover { border-color: var(--fg); background: hsl(var(--text-primary) / 0.08); } .btn .arrow { transition: transform 120ms ease; } .btn:hover .arrow { transform: translateX(3px); } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .textlink { color: var(--fg-2); border-bottom: 1px solid var(--line-2); transition: color 120ms ease, border-color 120ms ease; } .textlink:hover { color: var(--fg); border-color: var(--fg-3); } /* ─── nav ─────────────────────────────────────────────────────────────── */ .top { position: sticky; top: 0; z-index: 10; height: var(--nav-h); background: hsl(var(--surface-base) / 0.72); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); } .top .wrap { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } /* NOT tokens.css's .wordmark: that component is the display serif, and the studio's own register is Inter 600 tight (the serif was tried and rejected). Everything else here comes from the package. */ .mark { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.02em; font-size: 1.05rem; } .mark svg { width: 22px; height: 25px; color: var(--fg); } .top nav { display: flex; gap: clamp(0.9rem, 2.2vw, 1.9rem); font-size: 0.72rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; color: var(--fg-2); margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .top nav::-webkit-scrollbar { display: none; } .top nav a { white-space: nowrap; padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color 120ms ease; } .top nav a:hover, .top nav a[aria-current="page"] { color: var(--fg); } .top .cta { margin-left: 0.25rem; } /* Three states, one row of hairline squares — the same geometry as the rest of the chrome, so the switcher reads as part of the page and not a widget. */ .theme { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 3px; margin-left: 0.75rem; flex: none; } .theme button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--fg-3); cursor: pointer; transition: color 120ms ease, background 120ms ease; } .theme button:hover { color: var(--fg); } .theme button[aria-pressed="true"] { color: var(--fg); background: var(--bg-overlay); } .theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ─── hero ────────────────────────────────────────────────────────────── */ .hero { padding: calc(var(--section) * 0.9) 0 var(--section-tight); position: relative; } .hero .wrap { display: grid; gap: 1.5rem; } .hero .display-1 { max-width: 13ch; } .hero .lede { margin-top: 0.25rem; } .hero .actions { margin-top: 0.75rem; } .hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--fg-3); } .hero-facts b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } /* ─── cinematic hero ───────────────────────────────────────────────────── */ /* The headline says "many products". The bed behind it IS them — every tile a screenshot of something running, so the picture cannot outrun the claim. */ .hero-cinema { position: relative; isolation: isolate; min-height: min(82vh, 780px); display: flex; align-items: flex-end; overflow: hidden; } .hero-cinema > .wrap { position: relative; z-index: 2; width: 100%; } .hero-bed { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 50%; } .hero-bed.single { grid-template-columns: 1fr; grid-auto-rows: 100%; } .hero-bed img { width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: var(--bed-opacity); filter: grayscale(1) contrast(0.9) brightness(0.92) blur(2.4px); } .hero-cinema::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 86%, var(--bg) 100%), radial-gradient(130% 95% at 16% 46%, var(--scrim-2) 0%, transparent 72%); } .hero-cinema .display-1 { max-width: 15ch; } .hero-cinema .lede { text-shadow: 0 1px 28px var(--scrim-3); } /* ─── compact band for interior pages ──────────────────────────────────── */ .hero.compact { padding: var(--section-tight) 0 clamp(1.6rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); } .hero.compact + .section { padding-top: clamp(2.25rem, 4vw, 3.25rem); } .hero.compact .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); gap: 1.1rem; } .hero.compact .eyebrow { grid-column: 1 / -1; grid-row: 1; } .hero.compact .display-1 { font-size: clamp(2.3rem, 4.6vw, 3.9rem); max-width: 14ch; grid-column: 1; grid-row: 2; } .hero.compact .lede { grid-column: 2; grid-row: 2 / 4; align-self: end; margin-top: 0; max-width: 48ch; } .hero.compact .actions { grid-column: 1; grid-row: 3; margin-top: 0.4rem; } .hero.compact .hero-facts, .hero.compact .specs { grid-column: 1 / -1; grid-row: 4; margin-top: 1.25rem; } .notice { display: flex; gap: 0.7rem; align-items: baseline; margin: 0.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--fg-2); max-width: var(--measure-lede); } .notice::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status); transform: translateY(-1px); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The intake form. Asking for a name, a company and two lines about the work is more friction than an email box — deliberately: the request goes to a person who has to answer it, and a request with detail is the one that can be answered. Labels are always visible; a placeholder is not a label. */ .signup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); max-width: 46rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; min-width: 0; } .field.wide { grid-column: 1 / -1; } .field label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } .field .opt { text-transform: none; letter-spacing: 0; color: var(--fg-3); opacity: 0.75; } .signup input, .signup select, .signup textarea { font: inherit; font-size: 0.95rem; color: var(--fg); background: var(--bg-raised); border: 1px solid var(--line-2); border-radius: 3px; padding: 0.65rem 0.8rem; min-height: 46px; width: 100%; } .signup textarea { min-height: 116px; resize: vertical; line-height: 1.5; } .signup input::placeholder, .signup textarea::placeholder { color: var(--fg-3); } .signup input:focus-visible, .signup select:focus-visible, .signup textarea:focus-visible { outline: none; border-color: var(--accent); } .field.submit { margin-top: 0.3rem; } .field.submit .btn { width: fit-content; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-status { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--fg-2); min-height: 1.4em; } .form-status.bad { color: hsl(var(--status-negative)); } /* ─── spec strip: the numbers, read like instruments ───────────────────── */ .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line-2); margin-top: clamp(2rem, 4vw, 3.25rem); } .spec { padding: 1.25rem 0 0.25rem; } .spec + .spec { border-left: 1px solid var(--line); padding-left: 1.5rem; } .spec-value { display: block; font-family: var(--mono); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; } .spec-label { display: block; margin-top: 0.55rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } /* ─── sections ────────────────────────────────────────────────────────── */ .section { padding: var(--section-tight) 0; } /* The header is sticky, so an anchor jump would tuck the heading under it. */ .section[id], .hero[id], #work, #join, #stack, #packages, #open { scroll-margin-top: calc(var(--nav-h) + 1.5rem); } .section + .section { border-top: 1px solid var(--line); } .section-head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: end; } .section-head > :first-child { grid-column: 1; grid-row: 1; } .section-head .display-2 { max-width: 20ch; } .section-head .lede { font-size: 1.05rem; grid-column: 2; grid-row: 1; max-width: 48ch; } .section-head .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.25rem; } /* ─── cards ───────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 160ms ease, background 160ms ease; } a.card:hover { border-color: var(--fg-3); background: hsl(var(--text-primary) / 0.04); } .shot { aspect-ratio: 16 / 10; background: var(--bg-overlay); border-bottom: 1px solid var(--line); overflow: hidden; } .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.25rem 1.2rem; flex: 1; } .card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .card-name { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.015em; } .card-what { color: var(--fg-2); font-size: 0.95rem; line-height: 1.5; } .card-story { color: var(--fg-3); font-size: 0.875rem; line-height: 1.5; margin-top: 0.25rem; } .card.big .card-name { font-size: 1.5rem; letter-spacing: -0.02em; } .card.big .card-what { font-size: 1.02rem; } .card.text .card-body { padding-top: 1.25rem; } .pill { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0.18rem 0.55rem; white-space: nowrap; } /* The accent that marks a thing you can actually open. Named for what it means, not for a status word: `live` was a release claim nothing here can make, and a CSS class is how a retired word gets typed again. */ .pill.beta, .pill.pillar { color: var(--ok); border-color: hsl(145 55% 50% / 0.35); } /* ─── filters: facets as chips, state in the address bar ──────────────── */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; padding: 1.1rem 0; border-block: 1px solid var(--line); } .filter-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; min-width: 0; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px; padding: 0 0.7rem; font: inherit; font-size: 0.85rem; color: var(--fg-2); background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius-pill); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .chip:hover { color: var(--fg); border-color: var(--fg-3); } .chip[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } .chip-n { font-variant-numeric: tabular-nums; font-size: 0.72rem; opacity: 0.7; } .clear, .linkish { font: inherit; font-size: 0.85rem; color: var(--fg-2); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--line-2); } .clear:hover, .linkish:hover { color: var(--fg); } .clear { margin-left: auto; } .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem 1.75rem; margin: 1.1rem 0 0; } .legend div { display: grid; gap: 0.15rem; } .legend dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); } .legend dd { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--fg-3); } #work-grid { margin-top: 1.6rem; } .empty { margin: 1.5rem 0 0; color: var(--fg-2); } /* ─── "used by" / "built from": the same idiom in both directions ──────── */ .uses { display: grid; gap: 0.4rem; margin-top: 0.35rem; } .uses .chips { gap: 0.3rem; } /* Scoped to .chips on purpose: the section's own .label is a too, and an unscoped rule drew a chip around the words "Used by". */ .uses .chips a, .uses .chips span { font-size: 0.78rem; line-height: 1.2; color: var(--fg-2); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 0.2rem 0.55rem; } .uses .chips a:hover { color: var(--fg); border-color: var(--fg-3); background: var(--bg); } .uses .chips span { color: var(--fg-3); border-style: dashed; } /* ─── hire: prices and questions ──────────────────────────────────────── */ .qa { display: grid; gap: 0; border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 1.1rem 0; font-size: 1.05rem; font-weight: 500; cursor: pointer; list-style: none; } .qa summary::-webkit-details-marker { display: none; } .qa summary::before { content: "+"; color: var(--accent); font-family: var(--mono); font-size: 1.1rem; line-height: 1; } .qa details[open] summary::before { content: "\2212"; } .qa details p { margin: 0 0 1.25rem 1.7rem; max-width: var(--measure-copy); color: var(--fg-2); line-height: 1.65; } /* ─── packages ────────────────────────────────────────────────────────── */ .pkg-install { display: block; font-family: var(--mono); font-size: 0.74rem; line-height: 1.5; color: var(--fg); background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; padding: 0.5rem 0.65rem; overflow-wrap: anywhere; margin-top: 0.5rem; } /* margin-top:auto so every card in a row ends its links on the same line. */ .pkg-links { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--fg-3); margin-top: auto; padding-top: 0.6rem; } .pkg-links a:hover { color: var(--fg); } /* ─── facts strip (open by construction) ──────────────────────────────── */ .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .price { display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; font-family: var(--mono); font-size: clamp(1.15rem, 1.6vw, 1.45rem); letter-spacing: -0.01em; color: var(--fg); margin: 0.15rem 0 0.4rem; font-variant-numeric: tabular-nums; } .price-unit { font-size: 0.68rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } .fact { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); } .fact .display-3 { margin-top: 0.1rem; } .fact .copy { font-size: 0.92rem; } .fact a { color: var(--fg-2); border-bottom: 1px solid var(--line-2); } .fact a:hover { color: var(--fg); } /* ─── venture page ────────────────────────────────────────────────────── */ .venture-hero { padding: calc(var(--section-tight) * 0.9) 0 2.5rem; } .venture-hero .wrap { display: grid; gap: 1.25rem; } .venture-hero .display-1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 16ch; } .venture-shot { border: 1px solid var(--line-2); border-radius: 3px; overflow: hidden; background: var(--bg-overlay); box-shadow: 0 40px 120px hsl(var(--text-primary) / 0.22); } .venture-shot img { width: 100%; height: auto; } .venture-body { padding-block: var(--section-tight); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); } .venture-facts { display: grid; gap: 0.9rem; align-content: start; } .venture-facts > div { display: grid; gap: 0.2rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; } .venture-facts .uses { margin-top: 0.2rem; } .venture-facts a { color: var(--fg-2); } .venture-facts a:hover { color: var(--fg); } .caption { font-size: 0.85rem; color: var(--fg-3); line-height: 1.5; margin: 0; max-width: var(--measure-copy); } .pager { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 0; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--fg-2); } .pager a:hover { color: var(--fg); } /* ─── prose pages ─────────────────────────────────────────────────────── */ /* align-content: start, or the grid stretches its rows to match the taller facts column and the paragraphs drift apart down the page. */ .prose { display: grid; align-content: start; gap: 1.25rem; max-width: var(--measure-copy); } .prose h2 { font-size: var(--text-display-3); font-weight: 600; letter-spacing: -0.02em; margin: 1.5rem 0 0; } .prose p { margin: 0; color: var(--fg-2); line-height: 1.65; } .prose a { color: var(--fg); border-bottom: 1px solid var(--line-2); } .prose a:hover { border-color: var(--fg-3); } /* ─── footer ──────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--line); padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 3vw, 2.75rem); margin-top: var(--section); color: var(--fg-3); font-size: 0.9rem; } footer .wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); } /* ─── responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .grid, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts { grid-template-columns: 1fr; } .venture-body { grid-template-columns: 1fr; } } @media (max-width: 900px) { .hero-bed { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 25%; } .hero.compact .wrap { grid-template-columns: 1fr; } .section-head { grid-template-columns: 1fr; } .section-head > :first-child, .section-head .lede { grid-column: 1; grid-row: auto; } .hero.compact .eyebrow, .hero.compact .display-1, .hero.compact .lede, .hero.compact .actions, .hero.compact .hero-facts, .hero.compact .specs { grid-column: 1; grid-row: auto; } .spec + .spec { border-left: 0; padding-left: 0; } } @media (max-width: 640px) { .signup { grid-template-columns: 1fr; } .hero-cinema { min-height: 74vh; } .btn { padding: 0 1.15rem; font-size: 0.72rem; } .grid, .grid.two, .grid.four { grid-template-columns: 1fr; } .top .cta { display: none; } .hero { padding-top: var(--section-tight); } .eyebrow { font-size: 0.64rem; letter-spacing: 0.1em; padding: 0.35rem 0.7rem; } .hero-facts { gap: 0.4rem 1.25rem; } .filters { gap: 0.9rem; } .filter-row { align-items: flex-start; flex-direction: column; gap: 0.5rem; width: 100%; } .clear { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } html { scroll-behavior: auto; } } /* ─── footer: a map, not a row of links ─────────────────────────────────── Four columns for the four readers PURPOSE.md ranks — the work, joining, working together — so the last thing on every page is a way onward. */ .foot-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line); } .foot-brand .mark { color: var(--fg); } .foot-brand p { margin: 0.9rem 0 0; max-width: 34ch; line-height: 1.6; } footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } footer nav .label { margin: 0 0 0.35rem; font-size: 0.66rem; } footer a:not(.mark) { color: var(--fg-2); transition: color 120ms ease; } footer a:not(.mark):hover { color: var(--fg); } .foot-note { margin: 0; font-size: 0.82rem; color: var(--fg-3); max-width: var(--measure-copy); } @media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }