/* * Merovex Press — public front-of-house styles. * * EVERYTHING here is scoped under `.press` (set on the public ). The app's * `stylesheet_link_tag :app` globs app/assets/**/*.css, so this file also loads * on Inkwell admin pages — but with no `.press` ancestor there, none of it * applies. Ported from ~/Work/merovex.press (variables/home/components) onto the * shared syō-ro / mountain-mist scales defined in 01-tokens.css. */ /* Self-hosted Merovex Press fonts (ported from ~/Work/merovex.press). Variable woff2s — one file covers the 400–700 weight range. */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/source-sans-3-05c823df.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/source-serif-4-e527d70d.woff2") format("woff2"); } .press { --press-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --press-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; /* semantic tokens — light */ --surface-0: var(--color-mountain-mist-50); --surface-1: var(--color-mountain-mist-100); --surface-2: var(--color-mountain-mist-200); --border-1: var(--color-mountain-mist-300); --border-2: var(--color-mountain-mist-400); --text-1: var(--color-mountain-mist-900); --text-2: var(--color-mountain-mist-700); --text-3: var(--color-mountain-mist-500); --accent: var(--color-syo-ro-600); --link-color: var(--color-syo-ro-600); --link-hover: var(--color-syo-ro-700); --button-bg: var(--color-syo-ro-500); --button-text: var(--color-mountain-mist-50); min-height: 100dvh; margin: 0; display: flex; flex-direction: column; background: var(--surface-0); color: var(--text-1); font-family: var(--press-sans); line-height: 1.6; -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; } @media (prefers-color-scheme: dark) { .press { --surface-0: var(--color-mountain-mist-950); --surface-1: var(--color-syo-ro-950); --surface-2: var(--color-syo-ro-900); --border-1: var(--color-mountain-mist-700); --border-2: var(--color-mountain-mist-600); --text-1: var(--color-mountain-mist-100); --text-2: var(--color-mountain-mist-200); --text-3: var(--color-mountain-mist-500); --accent: var(--color-syo-ro-300); --link-color: var(--color-syo-ro-300); --link-hover: var(--color-syo-ro-200); --button-bg: var(--color-syo-ro-300); --button-text: var(--color-mountain-mist-800); } } /* --- shared bits --- */ .press-link { color: var(--link-color); text-decoration: underline; text-underline-offset: 0.15em; transition: color 200ms ease; } .press-link:hover { color: var(--link-hover); } .press-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.6em 1.4em; font: inherit; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border: 1px solid transparent; border-radius: 0.25rem; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } .press-btn--primary { background: var(--button-bg); color: var(--button-text); } .press-btn--primary:hover { background: var(--link-hover); } .press-btn--outline { background: transparent; border-color: var(--link-color); color: var(--link-color); } .press-btn--outline:hover { background: var(--link-color); color: var(--button-text); } /* --- nav --- */ .press-nav { position: sticky; top: 0; z-index: 50; background: var(--surface-1); border-block-end: 1px solid var(--border-1); } .press-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1100px; margin-inline: auto; padding: 0.75rem 1.5rem; } .press-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-1); text-decoration: none; } .press-brand__mark { display: inline-flex; width: 32px; height: 32px; color: var(--text-1); } .press-brand__mark svg { width: 100%; height: 100%; } .press-brand__word { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.9rem; } .press-nav__links { display: flex; align-items: center; gap: 1.5rem; } .press-nav__link { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-2); text-decoration: none; transition: color 200ms ease; } .press-nav__link:hover { color: var(--text-1); } .press-nav__link.is-active { color: var(--accent); } @media (max-width: 640px) { .press-nav__links, .press-nav__cta { display: none; } } /* --- split hero --- */ .press-hero { display: flex; flex-direction: column-reverse; align-items: center; gap: 3rem; max-width: 1100px; margin-inline: auto; padding: 5rem 1.5rem 3.5rem; text-align: center; } .press-hero__text { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .press-hero__headline { margin: 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.12; color: var(--text-1); } .press-hero__lede { margin: 0; max-width: 34ch; font-size: 1.3rem; line-height: 1.6; color: var(--text-2); } .press-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .press-hero__photo { flex-shrink: 0; } .press-hero__ring { width: min(280px, 70vw); aspect-ratio: 4 / 5; overflow: hidden; } .press-hero__ring img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } @media (min-width: 900px) { .press-hero { flex-direction: row; justify-content: space-between; text-align: left; gap: 4rem; } .press-hero__text { align-items: flex-start; } .press-hero__ring { width: 340px; } } /* --- genre cards --- */ .press-genres { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1100px; margin: 0 auto 5rem; padding-inline: 1.5rem; } @media (min-width: 640px) { .press-genres { grid-template-columns: 1fr 1fr; } } .press-genre-card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 0.75rem; padding: 1.5rem; transition: border-color 200ms ease; } .press-genre-card:hover { border-color: var(--border-2); } .press-genre-card__label { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .press-genre-card__title { margin: 0; font-family: var(--press-serif); font-size: 1.6rem; line-height: 1.2; color: var(--text-1); } .press-genre-card__blurb { margin: 0; color: var(--text-2); } .press-genre-card__more { margin-top: 0.25rem; align-self: flex-start; font-size: 0.875rem; font-weight: 600; color: var(--link-color); text-decoration: none; } .press-genre-card__more:hover { text-decoration: underline; text-underline-offset: 0.15em; } /* --- simple page shell (blog index / article) --- */ .press-page { max-width: 44rem; margin-inline: auto; padding: 4rem 1.5rem 5rem; } .press-page__head { max-width: 36rem; } .press-page__title { margin: 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; color: var(--text-1); } .press-page__intro { margin: 1rem 0 0; font-size: 1.1rem; line-height: 1.7; color: var(--text-2); } /* --- article cards (single-column chronological stack) --- */ .press-articles { display: flex; flex-direction: column; gap: 2rem; /* tighter than a whitespace-only list — the card edge does the separating */ margin-block-start: 3rem; } .press-articles__empty { margin-block-start: 3rem; color: var(--text-2); } .press-article-card { position: relative; /* anchor for the full-card click overlay */ padding: 1.5rem; border: 1px solid var(--border-1); border-radius: 1rem; background: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 24px -16px rgb(0 0 0 / 0.18); transition: background-color 200ms ease, border-color 200ms ease; } .press-article-card:hover { background: var(--surface-2); } .press-article-card__date { display: block; margin-block-end: 0.5rem; font-size: 0.875rem; color: var(--text-3); text-align: center; } .press-article-card__title { margin: 0; font-size: 1.6rem; /* HEY-style: title dominates the body text (~1.6×) */ font-weight: 600; line-height: 1.25; color: var(--text-1); text-align: center; } .press-article-card__link { color: inherit; text-decoration: none; } /* The title link covers the whole card, so anywhere on the card navigates — the visible CTA below is decorative (aria-hidden). */ .press-article-card__link::after { content: ""; position: absolute; inset: 0; } .press-article-card__desc { margin: 0.75rem 0 0; font-size: 1rem; /* base body size — the title reads clearly larger */ line-height: 1.6; color: var(--text-2); } .press-article-card__cta { display: flex; width: fit-content; margin: 1.25rem auto 0; /* centered pill button in the card */ align-items: center; gap: 0.25rem; padding: 0.5rem 1.25rem; font-size: 0.85rem; font-weight: 600; color: var(--link-color); border: 1px solid var(--link-color); border-radius: 999px; /* full radius */ transition: background-color 200ms ease, color 200ms ease; } /* The whole card is the click target; the pill fills on card hover as feedback. */ .press-article-card:hover .press-article-card__cta { background: var(--link-color); color: var(--surface-0); } .press-article-card__cta .lucide { display: inline-block; vertical-align: middle; } /* --- single article page --- */ .press-article { max-width: 42rem; margin-inline: auto; padding: 3rem 1.5rem 5rem; } .press-article__back { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: var(--text-2); text-decoration: none; } .press-article__back:hover { color: var(--text-1); } .press-article__back-icon { transform: rotate(180deg); } .press-article__head { margin: 2rem 0 2.5rem; } .press-article__date { display: block; font-size: 0.875rem; color: var(--text-3); } .press-article__title { margin: 0.5rem 0 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; color: var(--text-1); } .press-article__byline { margin: 0.75rem 0 0; font-size: 0.95rem; color: var(--text-2); } .press-article__body { color: var(--text-1); line-height: 1.75; } .press-article__body > * + * { margin-block-start: 1.25rem; } .press-article__body h2, .press-article__body h3 { font-family: var(--press-serif); line-height: 1.25; } .press-article__body a { color: var(--link-color); text-decoration: underline; text-underline-offset: 0.15em; } .press-article__body img { max-width: 100%; height: auto; border-radius: 0.5rem; } /* --- book catalog (3-card grid, grouped by series) --- */ .press-books { max-width: 1100px; margin-inline: auto; padding: 4rem 1.5rem 5rem; } .press-books__head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; } .press-books__title { margin: 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--text-1); } .press-books__intro { margin: 1rem 0 0; color: var(--text-2); font-size: 1.1rem; } .press-books__empty { text-align: center; color: var(--text-2); } .press-series { margin-block-end: 3.5rem; } .press-series__title { margin: 0 0 0.5rem; font-family: var(--press-serif); font-weight: 700; font-size: 1.6rem; color: var(--text-1); } .press-series__blurb { margin: 0 0 1.5rem; max-width: 60ch; color: var(--text-2); line-height: 1.6; } /* Cap the columns so covers stay a reasonable height (~330px, matching the book detail cover) rather than filling the full container width. */ .press-book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 1.5rem; } @media (max-width: 760px) { .press-book-grid { grid-template-columns: repeat(2, minmax(0, 220px)); } } @media (max-width: 520px) { .press-book-grid { grid-template-columns: minmax(0, 260px); } } .press-book-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 0.75rem; overflow: hidden; text-decoration: none; color: inherit; transition: transform 200ms ease, border-color 200ms ease; } .press-book-card:hover { transform: translateY(-2px); border-color: var(--border-2); } .press-book-card__cover, .press-book-card__placeholder { display: block; box-sizing: border-box; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; } .press-book-card__placeholder { background: var(--surface-2); } .press-book-card__body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem 1.25rem 1.25rem; flex: 1; } .press-book-card__label { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--accent); } .press-book-card__title { margin: 0; font-family: var(--press-serif); font-size: 1.3rem; line-height: 1.2; color: var(--text-1); } .press-book-card__blurb { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .press-book-card__more { margin-top: auto; padding-top: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--link-color); } /* --- book detail --- */ .press-book { max-width: 46rem; margin-inline: auto; padding: 3rem 1.5rem 5rem; } .press-book__top { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; margin-block: 2rem; } .press-book__cover { width: 220px; flex: none; border-radius: 0.5rem; } .press-book__meta { flex: 1; min-width: 15rem; } .press-book__series { margin: 0 0 0.25rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--accent); } .press-book__title { margin: 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.12; color: var(--text-1); } .press-book__date { margin: 0.5rem 0 0; color: var(--text-3); } .press-book__buy { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.5rem; } .press-book__body { color: var(--text-1); line-height: 1.75; } .press-book__body > * + * { margin-block-start: 1.25rem; } /* --- not found --- */ .press-notfound { max-width: 34rem; margin-inline: auto; padding: 6rem 1.5rem; text-align: center; } .press-notfound__code { margin: 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(3.5rem, 12vw, 6rem); line-height: 1; color: var(--accent); } .press-notfound__title { margin: 0.75rem 0 0; font-family: var(--press-serif); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--text-1); } .press-notfound__text { margin: 0.75rem 0 0; color: var(--text-2); } .press-notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-block-start: 2rem; } /* --- footer --- */ .press-footer { border-block-start: 1px solid var(--border-1); padding-block: 3rem; text-align: center; } .press-footer__inner { max-width: 1100px; margin-inline: auto; padding-inline: 1.5rem; } .press-footer__mark { display: block; width: 40px; margin: 0 auto 1.5rem; color: var(--text-3); } .press-footer__mark svg { width: 100%; height: 100%; } .press-footer__legal { margin: 0; color: var(--text-2); font-size: 0.875rem; } /* --- newsletter form --- */ .press-form { max-width: 42rem; margin-inline: auto; padding-inline: 1.5rem; } .press-form__label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin-block-end: 0.5rem; } .press-form__row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .press-form__input { flex: 1 1 16rem; padding: 0.75rem 1rem; font: inherit; color: var(--text-1); background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 0.5rem; } .press-form__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .press-form__flash { max-width: 42rem; margin: 0 auto 1.5rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.9rem; } .press-form__flash--notice { background: var(--surface-2); color: var(--text-1); } .press-form__flash--alert { background: var(--surface-2); color: var(--accent); }