/* jc-review mockups v2 — house-style system (Juan suite / web-design skill) applied per page type for cognitive separation. Fraunces is the through-line display face (Jordan's call, 10Jul26f); each page picks a theme class on . Mode is semantic: light for text surfaces, dark for multimedia. */ /* Eksell Display — Jordan's masthead face (from jc.net). Main headers only; never below ~1.5rem (Eksell rule: doesn't hold at small sizes). */ @font-face { font-family: "Eksell Display"; src: url("fonts/EksellDisplay-Large.woff2") format("woff2"), url("fonts/EksellDisplay-Large.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { --display: "Eksell Display", "Fraunces", Georgia, serif; /* mastheads + H1s */ --serif: "Fraunces", Georgia, serif; /* subheads, pull-quotes */ --sans: "Hanken Grotesk", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --measure: 40rem; } /* ---------- themes (tokens per page type) ---------- */ /* Studio light — cover + contents (text surfaces, the everyday look) */ body.theme-studio { --paper: oklch(0.958 0.007 85); --panel: oklch(0.995 0.002 85); --panel-2: oklch(0.975 0.005 85); --hair: oklch(0.885 0.008 85); --hair-strong: oklch(0.78 0.01 85); --ink: oklch(0.24 0.012 80); --ink-2: oklch(0.45 0.012 80); --ink-3: oklch(0.51 0.012 80); /* darkened from 0.57 for AA at small mono sizes */ --fn: oklch(0.52 0.075 225); /* blue: functional — action, live, selected */ --fn-tint: oklch(0.72 0.045 215 / 0.16); --ed: oklch(0.55 0.125 40); /* clay: editorial — darkened from 0.64 for AA (decay text) */ --ed-tint: oklch(0.64 0.125 40 / 0.30); --dot-sec: oklch(0.28 0.012 80 / 0.065); } /* Studio dark — the stage: image/video pages (multimedia on near-black) */ body.theme-stage { --paper: oklch(0.185 0.006 80); --panel: oklch(0.235 0.007 80); --panel-2: oklch(0.212 0.006 80); --hair: oklch(0.32 0.008 80); --hair-strong: oklch(0.44 0.010 80); --ink: oklch(0.945 0.006 85); --ink-2: oklch(0.76 0.008 82); --ink-3: oklch(0.60 0.008 82); --fn: oklch(0.72 0.10 225); /* lifted for the dark field */ --fn-tint: oklch(0.72 0.10 225 / 0.22); --ed: oklch(0.74 0.115 45); --ed-tint: oklch(0.74 0.12 45 / 0.32); --dot-sec: oklch(0.98 0.006 85 / 0.06); } /* Editorial light — long-form dispatches/reports */ body.theme-editorial { --paper: #fbfaf7; --panel: #ffffff; --panel-2: #f4f2ec; --hair: oklch(0.88 0.006 60); --hair-strong: oklch(0.78 0.008 60); --ink: oklch(0.21 0.008 60); --ink-2: oklch(0.42 0.008 60); --ink-3: oklch(0.54 0.008 60); /* darkened from 0.56 for AA */ --fn: oklch(0.47 0.16 27); /* editorial's ink-red carries both jobs here */ --fn-tint: oklch(0.47 0.16 27 / 0.14); --ed: oklch(0.47 0.16 27); --ed-tint: oklch(0.47 0.16 27 / 0.18); --dot-sec: oklch(0.28 0.012 60 / 0.05); } /* Riso light — high-volume judgement tools (the playful departure) */ body.theme-riso { --paper: #f4f1e8; --panel: #faf8f1; --panel-2: #ece8db; --hair: #23204a; /* riso rules are ink, not grey */ --hair-strong: #23204a; --ink: #23204a; --ink-2: oklch(0.42 0.06 285); --ink-3: oklch(0.55 0.04 285); --fn: #2b4bf2; /* drum 2: keep */ --fn-tint: oklch(0.55 0.22 265 / 0.14); --ed: #cc2e57; /* drum 1: cut — darkened from #ff5277 for AA */ --ed-tint: oklch(0.68 0.21 5 / 0.2); --dot-sec: oklch(0.3 0.05 285 / 0.07); } /* ---------- base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; min-height: 100dvh; } a { color: inherit; text-decoration: none; } a:hover .headline, a:hover.headline { color: var(--fn); } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--fn); outline-offset: 2px; border-radius: 2px; } /* ---------- type roles ---------- */ .eyebrow { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .eyebrow b { color: var(--ink-2); font-weight: 500; } .stakes { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.9; } .stakes .decay { color: var(--ed); } .headline { font-family: var(--serif); font-weight: 560; font-variation-settings: "opsz" 60; letter-spacing: -0.015em; line-height: 1.08; transition: color 0.18s ease; } .byline { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } /* clay underline-highlight — Studio's signature emphasis device */ .hl { background: linear-gradient(transparent 58%, var(--ed-tint) 58%); } /* ---------- masthead (cover + contents) ---------- */ .masthead { padding: 1.75rem 1.25rem 0; max-width: 52rem; margin: 0 auto; } .masthead .title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 11vw, 4.5rem); letter-spacing: 0; line-height: 0.98; } .masthead .tagline { margin-top: 0.4rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--ink-2); } .folio { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding-top: 0.7rem; border-top: 1px solid var(--hair-strong); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); } .folio .live { color: var(--fn); } /* ---------- item-page chrome (the constant frame, themed by tokens) ---------- */ .chrome { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 1rem; background: color-mix(in oklab, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); } .chrome .back { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } .chrome .back:hover { color: var(--ink); } .chrome .mini-masthead { font-family: var(--display); font-weight: 400; font-size: 1.05rem; /* Eksell floor: never smaller than this */ letter-spacing: 0.01em; } .mark-read { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border: 1px solid var(--hair-strong); border-radius: 999px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); transition: border-color 0.18s ease, color 0.18s ease; } .mark-read:hover { border-color: var(--ink-2); color: var(--ink); } .mark-read.done { border-color: var(--fn); color: var(--fn); } .mark-read svg { width: 12px; height: 12px; stroke: currentColor; } /* ---------- sync strip (blue = live state; muted when settled) ---------- */ .sync-strip { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.55rem 1rem; padding-bottom: calc(0.55rem + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fn); } .sync-strip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fn); } .sync-strip[hidden] { display: none; } .sync-strip.synced { color: var(--ink-3); } .sync-strip.synced .dot { background: var(--ink-3); } .sync-strip.failed { color: var(--ed); } .sync-strip.failed .dot { background: var(--ed); } /* ---------- shared page scaffolding ---------- */ .page { max-width: 52rem; margin: 0 auto; padding: 0 1.25rem 6.5rem; } .rule { border: none; border-top: 1px solid var(--hair); margin: 2rem 0; } section.dotted { background-image: radial-gradient(var(--dot-sec) 1px, transparent 1.3px); background-size: 20px 20px; } /* the ONE action colour on screen is blue (Studio discipline) */ .action { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.4rem; border-radius: 999px; background: var(--fn); color: var(--paper); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.18s ease; } .action:hover { opacity: 0.88; } .action:disabled { background: var(--panel-2); color: var(--ink-3); cursor: default; } .action.ghost { background: none; color: var(--ink-2); border: 1px solid var(--hair-strong); } .action.ghost:hover { color: var(--ink); } /* ---------- gentle entrance (MOTION 3) ---------- */ .rise { animation: rise 0.5s ease both; } .rise-2 { animation: rise 0.5s 0.08s ease both; } .rise-3 { animation: rise 0.5s 0.16s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rise, .rise-2, .rise-3 { animation: none; } * { transition-duration: 0.01ms !important; } } /* ================= shell additions (beyond the mockup base) ================= */ /* Ma light — approvals. Tokens lifted from the affirmed item-approve mockup; the chrome re-skins against these when an approve item is open. */ body.theme-ma { --paper: oklch(0.968 0.004 95); --panel: oklch(0.99 0.002 95); --panel-2: oklch(0.945 0.004 95); --hair: oklch(0.89 0.004 95); --hair-strong: oklch(0.80 0.005 95); --ink: oklch(0.25 0 0); --ink-2: oklch(0.33 0 0); --ink-3: oklch(0.53 0 0); /* darkened from 0.55 for AA */ --fn: oklch(0.56 0.19 29); --fn-tint: oklch(0.56 0.19 29 / 0.14); --ed: oklch(0.56 0.19 29); --ed-tint: oklch(0.56 0.19 29 / 0.16); --dot-sec: transparent; } /* Riso body-face swap (Decision #15) applies to the chrome too */ body.theme-riso { font-family: "Bricolage Grotesque", var(--sans); } body.theme-riso .eyebrow, body.theme-riso .stakes, body.theme-riso .byline, body.theme-riso .back, body.theme-riso .sync-strip { font-family: "Space Mono", var(--mono); } /* Riso chrome accents from the affirmed item-judge mockup: 2px ink rules, squared ink-bordered mark-read, --fn-filled done state. */ body.theme-riso .chrome { border-bottom: 2px solid var(--ink); } body.theme-riso .mark-read { border: 2px solid var(--ink); border-radius: 0; color: var(--ink); font-family: "Space Mono", var(--mono); } body.theme-riso .mark-read.done { background: var(--fn); border-color: var(--fn); color: #f4f1e8; } html, body { max-width: 100%; overflow-x: hidden; } /* ---------- cover ---------- */ .cover-lead { display: block; padding: 2.75rem 0 2.25rem; } .cover-lead .headline { font-size: clamp(2.1rem, 8.5vw, 3.6rem); max-width: 18ch; margin-top: 0.85rem; } .pull-quote { margin: 1.5rem 0 0; max-width: 30ch; font-family: var(--serif); font-style: italic; font-weight: 480; font-size: 1.3rem; line-height: 1.5; color: var(--ink); } .cover-lead .stakes { margin-top: 1.4rem; } .cover-lead .action { margin-top: 1.6rem; } .also { padding: 0.5rem 0 1rem; } .also-head { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.4rem; } .also-item { display: block; padding: 1.15rem 0; border-top: 1px solid var(--hair); } .also-item .headline { font-size: 1.3rem; max-width: 30ch; margin: 0.3rem 0 0.45rem; } .issue-foot { margin-top: 2.5rem; padding-top: 0.9rem; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .issue-foot a:hover { color: var(--fn); } @media (min-width: 56rem) { .cover-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 4rem; align-items: start; } .also { border-left: 1px solid var(--hair); padding-left: 2.5rem; padding-top: 2.75rem; } .also-item:first-of-type { border-top: none; } } /* ---------- contents ---------- */ .contents-title .title { font-family: var(--serif); font-weight: 560; letter-spacing: -0.015em; font-size: clamp(1.8rem, 6vw, 2.4rem); } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 2.4rem 0 0.2rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); } .section-head .count { color: var(--ink-3); } .toc-row { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1.25rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--hair); } .toc-row .headline { font-size: 1.15rem; max-width: 34ch; } .toc-row .byline { margin-top: 0.3rem; grid-column: 1; } .toc-row .meta { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.9; white-space: nowrap; } .toc-row .meta .decay { color: var(--ed); display: block; } .toc-row.read { opacity: 0.5; } .toc-row.read .headline { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); } /* ---------- item frame (the bundle iframe under the shell chrome) ---------- */ .item-frame-wrap { position: fixed; inset: 0; top: var(--chrome-h, 3.4rem); } .item-frame { display: block; width: 100%; height: 100%; border: none; background: var(--paper); } .frame-note { padding: 3rem 1.25rem; max-width: var(--measure); margin: 0 auto; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* ---------- empty / setup states ---------- */ .quiet-state { padding: 3.5rem 0 2rem; max-width: var(--measure); } .quiet-state .headline { font-size: clamp(1.6rem, 6vw, 2.2rem); max-width: 20ch; margin-top: 0.7rem; } .quiet-state p { margin-top: 1rem; color: var(--ink-2); max-width: 44ch; } .quiet-state .mono-note { margin-top: 1.4rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }