/* Merovex Press — foundational public styles. * * All public styles are scoped under `.press` (set on the public ), so * even though `stylesheet_link_tag :app` also loads these files on Inkwell admin * pages, none of it applies there (no `.press` ancestor). Semantic tokens map * onto the shared syō-ro / mountain-mist scales from 01-tokens.css. * * This file owns the `.press` root, its tokens (incl. dark mode), and the * page-load fade. Component files (press-nav, press-hero, …) build on top. */ .press { /* Display/headings: Archivo Narrow; body: Source Serif 4 — both self-hosted (press-fonts.css). Token names are historical: --press-serif = display, --press-sans = body. */ --press-serif: "Archivo Narrow", "Source Serif 4", Georgia, serif; --press-sans: "Source Serif 4", Georgia, "Times New Roman", serif; /* Semantic tokens as light-dark() pairs — which side renders is decided by color-scheme, which the html[data-theme] rules below set from the theme cookie (light / dark / auto→OS). One definition per token, no dark block. */ --surface-0: light-dark(var(--color-mountain-mist-50), var(--color-mountain-mist-950)); --surface-1: light-dark(var(--color-mountain-mist-100), var(--color-syo-ro-950)); --surface-2: light-dark(var(--color-mountain-mist-200), var(--color-syo-ro-900)); --border-1: light-dark(var(--color-mountain-mist-300), var(--color-mountain-mist-700)); --border-2: light-dark(var(--color-mountain-mist-400), var(--color-mountain-mist-600)); --text-1: light-dark(var(--color-mountain-mist-900), var(--color-mountain-mist-100)); /* Body copy steps down a level in dark so headings (mist-100) lead and near-white paragraphs don't halate on the dark canvas. */ --text-body: light-dark(var(--color-mountain-mist-900), var(--color-mountain-mist-200)); --text-2: light-dark(var(--color-mountain-mist-700), var(--color-mountain-mist-200)); --text-3: light-dark(var(--color-mountain-mist-500), var(--color-mountain-mist-400)); --accent: light-dark(var(--color-syo-ro-600), var(--color-syo-ro-300)); --link-color: light-dark(var(--color-syo-ro-600), var(--color-syo-ro-300)); --link-hover: light-dark(var(--color-syo-ro-700), var(--color-syo-ro-200)); --button-bg: light-dark(var(--color-syo-ro-500), var(--color-syo-ro-300)); --button-text: light-dark(var(--color-mountain-mist-50), var(--color-mountain-mist-800)); min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--surface-0); color: var(--text-body); font-family: var(--press-sans); /* Literal values (not Open Props vars): public_minimal loads this file without open-props.css. The variable fonts cover 200–900. */ font-weight: 500; line-height: 1.65; letter-spacing: 0.015em; -webkit-font-smoothing: antialiased; } /* Fill the space between nav and footer so the footer's top border always sits at the bottom of the viewport, separating main from footer. */ .press > #main-content { flex: 1; } /* Headings are serif display type by default on the public site — pages size them with .press-display-* (press-utilities.css) instead of minting per-page title classes. :where() keeps specificity at a single class so any one-class rule that loads later can override a piece of this. */ .press :where(h1, h2, h3) { margin: 0; font-family: var(--press-serif); font-weight: 800; line-height: 1.2; color: var(--text-1); } /* Theme switching: the layouts render the theme cookie as (public default "dark"), and color-scheme resolves every light-dark() pair above. "auto" leaves the UA's default (light dark from 01-tokens) so the OS preference decides. These also correct UA widgets (scrollbars, form controls) on admin pages that force a theme. */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* Mirror the .press body background onto html so the document canvas matches in dark mode (avoids a white flash at overscroll / behind the page). --surface-0 is scoped to .press, so use the same underlying tokens here. */ html { background: light-dark(var(--color-mountain-mist-50), var(--color-mountain-mist-950)); } /* --- page transitions --- The public site uses Turbo Drive; on each render the incoming content fades up from the background. Nav/footer stay steady; only

fades. */ main#main-content { animation: press-page-in 300ms var(--ease-3, ease) both; } @keyframes press-page-in { from { opacity: 0; } to { opacity: 1; } } /* Don't run the entry fade on Turbo's instant cached preview — only on the real render — so a revisit (back/forward, or a prefetched page) doesn't double-fade. */ html[data-turbo-preview] main#main-content { animation: none; } /* Respect users who ask for less motion — skip the fade entirely. */ @media (prefers-reduced-motion: reduce) { main#main-content { animation: none; } }