/* 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; } } /* ---------- image cover (v1.1 A3) ---------- The cover page becomes the top item's cover image, full-bleed, with the masthead + headline + pull-quote arranged over it. DECISIONS #13 holds: everything outside the hero stays Studio light — the scrim below is the image treatment only. The gradient darkens the top and bottom text bands to >= ~75% black over any image, which keeps the near-white overlay ink at WCAG AA (4.5:1) regardless of the photograph behind it. */ .cover-hero { position: relative; min-height: 78dvh; overflow: hidden; } .cover-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; } .cover-hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.16 0.01 80 / 0.82) 0%, oklch(0.16 0.01 80 / 0.45) 32%, oklch(0.16 0.01 80 / 0.30) 52%, oklch(0.16 0.01 80 / 0.86) 100%); } .cover-hero-content { /* overlay ink: near-white tokens, scoped to the hero only */ --ink: oklch(0.97 0.005 85); --ink-2: oklch(0.88 0.008 85); --ink-3: oklch(0.82 0.008 85); --hair: oklch(0.97 0.005 85 / 0.28); --hair-strong: oklch(0.97 0.005 85 / 0.45); --ed: oklch(0.84 0.10 55); /* decay clay, lifted for the dark scrim */ /* color must be re-declared here: descendants inherit body's COMPUTED dark ink, not the var() expression, so the token overrides above are inert for plain inherited text (the headline) without this line. */ color: var(--ink); position: relative; min-height: 78dvh; display: flex; flex-direction: column; justify-content: space-between; } .cover-hero .masthead { width: 100%; } .cover-hero .folio .live { color: var(--ink); } .cover-hero .cover-lead { width: 100%; max-width: 52rem; margin: 0 auto; padding: 2.5rem 1.25rem 2.25rem; } .cover-hero .pull-quote { color: var(--ink-2); } .cover-hero .action { background: var(--ink); color: oklch(0.2 0.01 80); } /* ---------- 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; } /* contents thumbnail when the item carries a cover image (v1.1 A3) */ .toc-row.has-thumb { grid-template-columns: auto 1fr auto; } .toc-row.has-thumb .toc-thumb { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 55px; /* 4:5, matching the cover composition */ object-fit: cover; border-radius: 2px; border: 1px solid var(--hair); } .toc-row.has-thumb .headline, .toc-row.has-thumb .byline { grid-column: 2; } .toc-row.has-thumb .meta { grid-column: 3; } .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); } /* ---------- meta-feedback (v1.1 A5: chrome-level, "to Reader") ---------- */ .chrome-actions { display: inline-flex; align-items: center; gap: 0.5rem; } .meta-fb-toggle { padding: 0.4rem 0.7rem; border: 1px dashed var(--hair-strong); border-radius: 999px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); transition: border-color 0.18s ease, color 0.18s ease; } .meta-fb-toggle:hover, .meta-fb-toggle[aria-expanded="true"] { border-color: var(--ink-2); color: var(--ink); } .meta-fb { position: fixed; left: 0; right: 0; top: 3.4rem; /* set precisely from the chrome height in JS */ z-index: 11; padding: 1rem 1.25rem 1.1rem; background: var(--panel); border-bottom: 1px solid var(--hair); box-shadow: 0 8px 24px oklch(0.2 0.01 80 / 0.12); } .meta-fb[hidden] { display: none; } .meta-fb textarea { display: block; width: 100%; margin-top: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--hair-strong); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9375rem; resize: vertical; } .meta-fb-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.7rem; } .meta-fb-note { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* ---------- issue menu (v1.2: hamburger in the shell chrome) ---------- New chrome, not in the affirmed mockups; follows the shipped shell idiom: mono uppercase for navigation labels, serif headlines for item titles, hairline rules, the panel surface, blue as the only action colour. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .issue-menu-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); border: 1px solid var(--hair-strong); border-radius: 999px; transition: border-color 0.18s ease, color 0.18s ease; } .issue-menu-btn:hover, .issue-menu-btn[aria-expanded="true"] { border-color: var(--ink-2); color: var(--ink); } .issue-menu-btn.floating { position: fixed; top: calc(0.9rem + env(safe-area-inset-top)); right: 1rem; z-index: 30; width: 2.25rem; height: 2.25rem; background: var(--panel); box-shadow: 0 2px 10px oklch(0.2 0.01 80 / 0.10); } .issue-menu-btn.in-chrome { width: 1.9rem; height: 1.9rem; flex: none; } /* Shipped-shell deviation (commented per AGENTS.md): with the menu button in the item chrome, the decorative mini-masthead no longer fits at phone widths; navigation and actions win over decoration there. */ @media (max-width: 480px) { .chrome .mini-masthead { display: none; } } .issue-menu { position: fixed; right: 0.75rem; z-index: 40; width: min(22rem, calc(100vw - 1.5rem)); max-height: 70dvh; overflow-y: auto; background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 6px; box-shadow: 0 12px 32px oklch(0.2 0.01 80 / 0.18); } .issue-menu[hidden] { display: none; } .issue-menu ul { list-style: none; } .issue-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-top: 1px solid var(--hair); } .issue-menu li:first-child .issue-menu-item { border-top: none; } .issue-menu-title { font-family: var(--serif); font-weight: 560; font-size: 0.9375rem; line-height: 1.3; transition: color 0.18s ease; } .issue-menu-item:hover .issue-menu-title { color: var(--fn); } .issue-menu-item.nav .issue-menu-title { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); } .issue-menu-item.read { opacity: 0.55; } .issue-menu-item.read .issue-menu-title { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-3); } .agent-chip { flex: none; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 0.15rem 0.55rem; } /* Riso re-skin: ink rules, squared corners (Decision #15 language) */ body.theme-riso .issue-menu { border: 2px solid var(--ink); border-radius: 0; } body.theme-riso .issue-menu-btn { border-radius: 0; border-color: var(--ink); color: var(--ink); } body.theme-riso .agent-chip { border-radius: 0; } /* ---------- item identity plate (v1.3, replaces the v1.2 full-width cover) ---------- A compact inset band, not full-bleed and not tall: the cover image is texture only, under a SOLID dark multiply tint keyed to page type. Multiply against an opaque dark tint means the blended backdrop can only be darker than the tint itself, so the near-white plate ink holds >= 4.5:1 (WCAG AA) over any image. Deliberately a solid colour blend, never a gradient. Scroll rule: the plate is never a scroll container — overflow crops only, vertical pans pass straight through (touch-action: pan-y), no handlers. */ :root { /* Dark plate tints, derived from the shipped theme palette's hue families (clay/editorial ink ~40, functional blue ~225, studio ink ~80) with lightness pinned low so AA holds under multiply. */ --plate-report: oklch(0.31 0.09 40); --plate-explainer: oklch(0.30 0.06 225); --plate-default: oklch(0.27 0.012 80); } .item-plate { --plate-tint: var(--plate-default); position: relative; isolation: isolate; /* keep the multiply inside the plate */ width: calc(100% - 2rem); max-width: 50rem; height: min(96vw, 42dvh); /* compact identity band: <= 45% of viewport */ margin: 1rem auto 0; border-radius: 4px; overflow: hidden; /* crop only — never scrollable */ touch-action: pan-y; /* scrolls the PAGE; no pinch/pan of its own */ background: var(--plate-tint); } .item-plate.plate-report { --plate-tint: var(--plate-report); } .item-plate.plate-explainer { --plate-tint: var(--plate-explainer); } .item-plate img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-select: none; } .item-plate .plate-tint { position: absolute; inset: 0; background: var(--plate-tint); mix-blend-mode: multiply; } .item-plate .plate-title { position: absolute; inset: auto 0 0 0; padding: 0 1.15rem 1.05rem; color: oklch(0.965 0.006 85); } .item-plate .plate-title .eyebrow { color: oklch(0.965 0.006 85 / 0.78); margin-bottom: 0.45rem; } .item-plate .plate-title .eyebrow b { color: oklch(0.965 0.006 85); } .item-plate .plate-title .headline { font-size: clamp(1.35rem, 5.6vw, 2rem); max-width: 22ch; } /* Plated pages scroll as one document; the bridge reports content height and the shell grows the iframe to it, so there is no nested scroll container. */ .item-frame-wrap.with-plate { position: static; margin-top: 0.9rem; } .item-frame-wrap.with-plate .item-frame { height: 70dvh; } /* pre-measure fallback */ /* ---------- cover return (v1.3: ambient chrome, every non-cover view) ---------- */ .chrome-nav { display: inline-flex; align-items: center; gap: 0.6rem; } .cover-return { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); opacity: 0.75; transition: opacity 0.18s ease, color 0.18s ease; } .cover-return:hover { opacity: 1; color: var(--ink); } .cover-return.floating { position: fixed; top: calc(0.9rem + env(safe-area-inset-top)); left: 1rem; z-index: 30; width: 2.25rem; height: 2.25rem; background: var(--panel); border: 1px solid var(--hair); border-radius: 999px; box-shadow: 0 2px 10px oklch(0.2 0.01 80 / 0.10); } .cover-return.in-chrome { width: 1.9rem; height: 1.9rem; flex: none; } body.theme-riso .cover-return.floating { border-radius: 0; border-color: var(--ink); } /* ---------- cover parity (v1.3: contents is one first-class tap) ---------- */ .contents-call { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.05rem; padding: 0.7rem 1.2rem; min-height: 2.75rem; border: 1px solid var(--hair-strong); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); transition: border-color 0.18s ease, color 0.18s ease; } .contents-call:hover { border-color: var(--ink-2); color: var(--ink); } .cover-hero .contents-call { color: var(--ink); } /* ---------- one quiet page-turn fade (v1.3, MOTION 3) ---------- */ .fade-in { animation: fadein 0.22s ease both; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } } /* ---------- 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); } /* device-setup manual token entry (installed apps / iOS standalone have no URL bar) */ .setup-manual { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.1rem 0 0.4rem; max-width: 30rem; } .setup-manual label { margin-bottom: 0.1rem; } .setup-manual input { font: 400 0.9rem/1.3 var(--mono); padding: 0.6rem 0.7rem; color: var(--ink); background: var(--panel); border: 1px solid var(--hair-strong); border-radius: 6px; } .setup-manual input:focus { outline: none; border-color: var(--fn); box-shadow: 0 0 0 3px var(--fn-tint); } .setup-manual button { align-self: flex-start; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; padding: 0.6rem 1rem; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; } .setup-manual button:active { transform: translateY(1px); }