/* ============================================================================ briefing.css — daily briefing render (Stage 1 chunk 1.2; dark re-theme chunk 3). Smart-Brevity card stack on the dark #0e0e0e system. Brand tokens + @font-face declarations come from global.css; this file is layout only. Every franchise card is a visual PEER — the fact card is NOT a hero. ============================================================================ */ .bf-page { min-height: 100svh; background: var(--bg); /* warm beige in light mode */ /* + status-bar/camera inset on top so the wordmark clears the notch / Dynamic Island (the Daily header is normal-flow, so no top:0 bar selector covers it). */ padding: calc(28px + var(--safe-top)) 18px 64px; } .bf-wrap { max-width: 620px; margin: 0 auto; } /* ── Header — ONE utility row (the paper carries the nameplate/date/edition now): culture pill left, icon-only calendar trigger right. ───────────────────── */ .bf-header { text-align: center; margin: 2px 0 26px; } .bf-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; /* Positioned ancestor for .ar-cal-panel on /briefing ONLY (see the .bf-header-row .ar-calbar override below) — full content-column width, so the calendar centers on the column instead of on the narrow flush-right trigger. /archive's standalone .ar-calbar (not nested here) is untouched. */ position: relative; } /* .bf-wordmark / .bf-kicker / .bf-nav: no longer used by /briefing (the daily card's own nameplate carries them now) — kept only because archive.html's header still renders this trio and shares this stylesheet. Do not delete without checking archive.html first. */ .bf-wordmark { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px; } .bf-kicker { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ margin: 0 0 4px; } html.theme-light .bf-kicker { color: var(--accent-ink); } /* WO-CONV-3 (§8.3 register 3c) — the standing ambient rule line atop the archive/Collection headers. Neutral ink always (§3a: ambient affordances on a reading-primary view are never lime), quieter than .bf-kicker since it's a supporting line, not the page's own title. */ .ar-rule-line { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-subtle); margin: 0 0 4px; } .bf-nav { margin: 10px 0 0; } .bf-nav a { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text-primary); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ text-decoration: none; } html.theme-light .bf-nav a { color: var(--accent-ink); } .bf-nav a:hover { text-decoration: underline; } .bf-nav a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } /* ── Culture selector (tease + seam) — subtle editorial row, not an app switcher. Live culture is selectable; not-yet-built ones show a muted "Soon" badge. ── */ .bf-culture { margin: 2px 0 8px; } .bf-cults { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .bf-cult { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.8rem; color: var(--text-subtle); padding: 3px 4px; border-radius: 8px; } .bf-cult.is-active { position: relative; color: var(--text-primary); font-weight: 700; } /* FLAT ink underline (not a cupped/pill shape): a straight 2px rule the width of the active tab's text, barely-rounded ends, sitting just below the word. Neutral, not lime — the loved-state heart is the card's one signal (§3a punctuation law: lime is never decoration/tab-indicator chrome). */ .bf-cult.is-active::after { content: ''; position: absolute; left: 4px; right: 4px; bottom: 0; height: 2px; border-radius: 1px; background: var(--text-primary); } .bf-cult.is-locked { color: var(--text-subtle); cursor: default; opacity: 0.6; } /* Locked cultures recede — dim "SOON" pill so the active Czech clearly leads. */ .bf-cult-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-disabled); background: var(--border); border-radius: 999px; padding: 1px 6px; } .bf-cult:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .bf-cults-hint { font-family: var(--font-body); font-size: 0.74rem; color: var(--text-subtle); text-align: center; margin: 6px 0 0; min-height: 1em; } /* ── Culture DROPDOWN (Daily) — compact trigger pill + bottom sheet ────────── Replaces the row above on /briefing (DB-driven: all is_live cultures). Trigger centres in the header (.bf-header is text-align:center). The sheet reuses the notif-sheet safe-area pattern: the backdrop's bottom padding carries var(--safe-bottom, 0px) so the sheet floats above the home indicator. ── */ .bf-cult-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; padding: 7px 14px; min-height: 44px; /* a11y medium-pass (2026-07-11): was ~35.6px */ font-family: var(--font-numeric); font-size: 0.9rem; font-weight: 700; color: var(--text-primary); -webkit-tap-highlight-color: transparent; } .bf-cult-trigger-flag { font-size: 1.05rem; line-height: 1; } .bf-cult-trigger-name { line-height: 1; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bf-cult-trigger-caret { font-size: 0.85rem; color: var(--text-subtle); margin-left: 2px; } .bf-cult-trigger:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* §ED176 — the selector sits at the top LEFT of .bf-header-row and the calendar trigger at the top RIGHT, and only one of them was raised. These four declarations are COPIED VERBATIM from .ar-cal-trigger (briefing.css:1789) — the same resting shadow, the same hover pair, the same 0.97 press, the same transition list. Nothing invented: no new shadow, no new radius, no new token. What is deliberately NOT copied is .ar-cal-trigger's SHAPE — its 13px radius, 15px padding and --border (the selector keeps its 999px pill, --border-strong and 44px min-height). Jake asked for raised and hovering like the calendar button, not for the selector to become one. ONE RULE SERVES BOTH SURFACES — no is-app fork. The shadows are plain rgba(0,0,0,·) rather than a theme token, which is exactly what the calendar button already does in both themes on both surfaces; forking here would mean inventing an elevation the calendar button does not have. */ .bf-cult-trigger { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease; } .bf-cult-trigger:hover { background: var(--surface-3); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .bf-cult-trigger:active { transform: scale(0.97); } .cult-sheet-backdrop { position: fixed; inset: 0; z-index: 9200; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; padding: 0 0 var(--safe-bottom, 0px); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .cult-sheet-backdrop.is-visible { opacity: 1; visibility: visible; } .cult-sheet { width: 100%; max-width: 480px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 24px 24px 0 0; padding: 20px 16px 28px; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); } .cult-sheet-backdrop.is-visible .cult-sheet { transform: translateY(0); } .cult-sheet-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); text-align: center; margin: 0 0 12px; text-wrap: balance; } .cult-sheet-list { display: flex; flex-direction: column; gap: 4px; } .cult-sheet-item { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 13px 12px; border-radius: 14px; font-family: var(--font-numeric); font-size: 1rem; font-weight: 600; color: var(--text-primary); -webkit-tap-highlight-color: transparent; } .cult-sheet-item:hover, .cult-sheet-item.is-current { background: var(--surface-2); } .cult-sheet-item-flag { font-size: 1.3rem; line-height: 1; flex-shrink: 0; } .cult-sheet-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cult-sheet-item-check { color: var(--accent-ink); font-size: 1rem; flex-shrink: 0; } .cult-sheet-item:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; } /* ── WEB: culture picker is an ANCHORED POPOVER, not a bottom sheet ────────── html.is-app (native, see briefing.html's capability-gate script) keeps every rule above untouched — the sheet still rises from the bottom exactly as before. On web (html:not(.is-app)) js/card.js's mountCultureDropdown appends .cult-sheet into #bf-culture itself (now position:relative here) instead of nesting it inside .cult-sheet-backdrop, so it can anchor top:100% under the trigger pill the same way .ar-cal-panel anchors under its own trigger above — same floats-over-the-feed mechanic, just a narrower box. .cult-sheet-item rows are reused completely unstyled here; only the outer container differs. .cult-sheet-backdrop is repurposed into a plain full-viewport, invisible click-outside catcher (no dimming — a popover this small doesn't earn a scrim), decoupled from the panel entirely so its own position:fixed never becomes the panel's containing block. ── */ /* §ED529 — `html:not(.is-app) #bf-culture { position: relative; }` DELETED. It was the anchor for a position:absolute .cult-sheet nested inside it. The sheet is a child now and anchors off a measured rect, so this rule has nothing left to position. */ html:not(.is-app) .cult-sheet-backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; display: block; padding: 0; opacity: 1; visibility: visible; pointer-events: none; transition: none; } html:not(.is-app) .cult-sheet-backdrop.is-visible { pointer-events: auto; } /* §ED529 — THE COMMENT ON THE OLD z-index WAS FALSE, AND THAT IS THE WHOLE BUG. It read "above .cult-sheet-backdrop's 9200 — clicks on the panel never fall through to the click-catcher". They fell through every time. .cult-sheet- backdrop is appended to , so its 9200 is in the ROOT stacking context; .cult-sheet was appended into #bf-culture, i.e. inside .bf-header (a stacking context at z-index 20) inside .bf-wrap (a stacking context at z-index 1), so its 9210 was scoped inside .bf-header and never competed with 9200 at all. The transparent, pointer-events:auto catcher therefore painted over every row and swallowed the click: elementFromPoint() at the centre of a culture row returned `DIV.cult-sheet-backdrop is-visible`, e.target WAS the backdrop so its own `if (e.target !== backdrop) return` guard did not fire, and the handler just closed the sheet. That is the reported "clicking a culture does nothing at all" — nothing to do with the membership lock. FIX: js/card.js appends the sheet to on web too, position:fixed, with top/left written by positionSheet(). Now 9210 and 9200 are siblings in one context and the comment is true. See scripts/audit-ed529-chrome.js. */ html:not(.is-app) .cult-sheet { position: fixed; top: 0; left: 0; right: auto; margin: 0; width: max-content; min-width: 220px; max-width: min(320px, calc(100vw - 32px)); border-radius: 16px; padding: 10px; z-index: 9210; border: 1px solid var(--border-strong); box-shadow: var(--shadow-hero); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(0.97); transform-origin: top left; transition: opacity 160ms ease-in, transform 160ms ease-in, visibility 0s linear 160ms; } html:not(.is-app) .cult-sheet.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 160ms ease-out, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } html:not(.is-app) .cult-sheet-title { margin: 0 0 8px; } /* §ED529 — the sheet itself is tabindex="-1" and takes focus on open so Tab continues into the rows (it is a child now, not the trigger's DOM neighbour). That is a programmatic focus on a container, never a target the reader tabbed to, so it must not paint a ring: the ring belongs to the rows, which keep their own :focus-visible outline. The element is still focused, so the role="dialog"/aria-label announcement is unaffected. */ html:not(.is-app) .cult-sheet:focus { outline: none; } /* ── Cards (all franchises are coequal — same weight) ───────────────────── */ .bf-stack { display: flex; flex-direction: column; gap: 14px; } .bf-card { background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 20px 20px 18px; } /* Light mode: --surface is only ~10% relatively brighter than --bg (cream on tan), versus dark mode's --surface being ~64% relatively brighter than --bg (#171717 on #0e0e0e) — the same absolute gap reads far flatter once both are pushed into the light-luminance range, so a border alone doesn't give the card enough figure-ground separation. --shadow-card already exists for exactly this (global.css theme-light block, olive-brown per PREMIUM-POLISH-SPEC §8 "Elevation on paper") but was never wired to a selector — .bf-daily gets --shadow-hero already; this gives the other (non-hero) cards the same paper-over-paper lift instead of reading flat. Dark mode untouched — .bf-card there already reads elevated via contrast alone. */ html.theme-light .bf-card { box-shadow: var(--shadow-card); } /* Collection shelf — a kept fact's card is a tap target to its day's edition (js/collection.js). Same hover/press language as .ar-worth-row's clickable rows (briefing.css) rather than inventing a new affordance. */ .bf-card-linked { cursor: pointer; transition: transform 140ms ease, border-color 140ms ease; } .bf-card-linked:hover { border-color: var(--border-accent); } .bf-card-linked:active { transform: scale(0.99); } .bf-card-linked:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .bf-label { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 10px; } /* One fact unit inside a card (a card may hold >1 item). Transparent border at rest (not "none") so the loved-state green outline below doesn't shift layout when it appears — same treatment as .bf-guessmoment further down. */ .bf-item { border: 1.5px solid transparent; border-radius: 10px; transition: border-color 160ms ease; } .bf-item + .bf-item { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .bf-actions { margin-top: 2px; } /* Tier-2 'love' reaction (fact cards only) — light, on-brand, distinct from Report. */ .bf-love { flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 0 12px 0 0; font-size: 1.05rem; line-height: 1; color: var(--text-muted); transition: color 0.12s ease, transform 0.08s ease; } .bf-love:hover { color: var(--text-subtle); } .bf-love.is-on { color: var(--accent-ink); } .bf-love:active { transform: scale(1.15); } .bf-love:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-reported { display: inline-block; margin-left: 14px; font-family: var(--font-body); font-size: 0.78rem; color: var(--text-primary); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ } html.theme-light .bf-reported { color: var(--accent-ink); } .bf-text { font-family: var(--font-body); font-size: 1.05rem; /* ~16–17px lead — the "what + why it matters" */ line-height: 1.6; color: var(--text-primary); margin: 0 0 12px; } .bf-source { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-subtle); margin: 0 0 10px; overflow-wrap: break-word; } /* ARCH-CORRECTION notice (R6.3) — deliberately NOT an alarm/warning treatment (no red, no icon): a correction notice states a fact, it does not apologize or alarm. Same neutral register as .bf-source, set apart only by a hairline top rule so it reads as an appended editorial note. */ .bf-correction { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); } .bf-correction-label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 4px; } .bf-correction-body, .bf-correction-replacement { font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5; color: var(--text-subtle); margin: 0 0 4px; } .bf-correction-replacement:last-child { margin-bottom: 0; } /* ── Unified daily card — "B · The Masthead" (dark · premium-editorial) ──────── */ .bf-daily { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; /* Promoted to the shared --shadow-hero token (global.css Phase A) — the top-weighted lime glow this card originated, now shared app-wide. Carries its own light-mode olive-glow variant automatically. */ box-shadow: var(--shadow-hero); transition: transform 160ms ease, box-shadow 160ms ease; } /* Gentle, subtle hover-lift — the card rises a touch and the glow firms up. */ .bf-daily:hover { transform: translateY(-2px); box-shadow: var(--shadow-hero-hover); } /* Masthead — ONE publication nameplate: elevated by LUMINANCE (stands proud of the card body) + a lime top-edge, now with --edge-light (T0) as its catch light. Row 1 = the Culturily wordmark itself (the "The Daily" title that used to sit under it is retired — the wordmark alone carries the nameplate now, per the strict Fraunces rule: Fraunces stays ONLY on this wordmark, nowhere else on the card); Row 2 = the dateline folio under a hairline — it absorbs the old corner edition number, page date, and culture marker. */ .bf-masthead { display: flex; flex-direction: column; padding: 14px 28px 12px; background: var(--surface-3); border-top: 2px solid var(--border-strong); /* structural edge, not a lime flourish */ box-shadow: var(--edge-light); } .bf-mast-wordmark { font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; color: var(--text-primary); margin: 0 0 4px; } .bf-mast-dateline { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-subtle); margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); } /* Past-day (isolated single-day view, /briefing only) additions to the dateline. Dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink. */ .bf-mast-archive { color: var(--text-subtle); letter-spacing: 0.06em; } html.theme-light .bf-mast-archive { color: var(--accent-ink); } .bf-mast-back { position: relative; /* a11y medium-pass (2026-07-11): hit-slop base, see ::before */ align-self: flex-start; margin-top: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; color: var(--text-primary); -webkit-tap-highlight-color: transparent; } html.theme-light .bf-mast-back { color: var(--accent-ink); } /* Was ~18px tall (12px text * 1.5 line-height, zero padding). Invisible hit-slop instead of real padding — same pattern as .pf-icon-btn's ::before{inset:-4px} — so the visible label/spacing doesn't shift. */ .bf-mast-back::before { content: ''; position: absolute; inset: -13px 0; } .bf-mast-back:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } /* ── §ED509 — THE HONEST STATE ──────────────────────────────────────────────── "Today's edition isn't ready yet — this is the last one published." NOT AN ERROR, and styled so nothing suggests one: no red, no warning tint, no alert glyph. Nothing has broken from the reader's side — they are on the current page, looking at the most recent edition that exists. NOT AN ARCHIVE TAG either: .bf-mast-archive is a small-caps marker for a day the reader CHOSE, and this reader chose nothing, so the two must never share a treatment. The grammar is an editorial aside inside the paper: neutral ink, a rule on the leading edge, sitting under the dateline's own hairline. One step firmer than the dateline so it cannot be skimmed past, and no firmer than that. AT THE §ED306 TYPE FLOOR (1rem/16px) DELIBERATELY. This is prose a reader has to actually read and act on, not furniture. .bf-mast-dateline above it sits at 0.75rem and predates the floor (§ED475's unswept backlog) — that is a debt, not a precedent, and matching it here would deepen it. Fully token-driven, so light and dark are covered by global.css's own palettes rather than by a second theme rule here. */ .bf-mast-stale { font-family: var(--font-body); font-size: 1rem; line-height: 1.45; color: var(--text-secondary); margin: 10px 0 0; padding: 8px 0 2px 12px; border-left: 3px solid var(--border-strong); text-wrap: pretty; } .bf-mast-stale-lede { color: var(--text-primary); font-weight: 700; } /* Ribbon slot (item #8, R4) — structural shape only; ships hidden/empty here (composeHookCard sets [hidden]). The tutorial build populates the content and un-hides it — this is the shell it drops into, not a live element yet. */ .bf-ribbon-slot { background: var(--accent-dim); padding: 10px 28px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--accent-ink); text-align: center; } /* Top padding tightened (was 30px) — the masthead/nameday/rootline group above the fact reads as one compact block now; the fact headline's own generous lead-in (.bf-quote's padding-top) is where the deliberate air lives instead. */ .bf-daily-body { padding: 22px 32px 28px; } /* Standing root-line: the daily emotional frame — warm muted italic dek. Quiet context, not competing with the hero below. Nudged back up slightly (was 0.95rem/--text-subtle) — the declutter pass had softened this past legibility; still a step short of the pre-declutter weight/size. */ .bf-rootline { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--text-muted); margin: 0 0 10px; } /* Name-day folio — a franchise line between the masthead's dateline and the root-line (moved out of the old bf-frame metadata row, which is gone: the date it carried is now the dateline folio's job). The dot is neutral now — decoration doesn't get to be lime (§3a); the card's one signal is the loved heart. Label + name nudged back up slightly (were 0.68rem/500/--text-subtle and 0.8rem/500) — still short of the original 700/600 weights, just past the point the declutter pass had softened them to. */ .bf-namefolio { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; } .bf-namefolio-label { font-family: var(--font-display); font-variant: small-caps; font-size: 0.72rem; font-weight: 580; letter-spacing: 0.06em; color: var(--text-muted); } .bf-namefolio-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); } .bf-namefolio-name { font-family: var(--font-body); font-size: 0.85rem; font-weight: 560; color: var(--text-primary); } /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ html.theme-light .bf-namefolio-name { color: var(--accent-ink); } /* Edge case only — a day with a name-day but NO fact block, so composeCards has no paper to fold the folio into (renderNameDayCard fallback). Not a bordered peer card, just enough surface so the line doesn't float bare on the page. */ .bf-namefolio-standalone { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 18px 20px; } .bf-namefolio-standalone .bf-namefolio { margin: 0; } /* Name-day save toggle (114_user_saved_namedays.sql) — signed-in readers only. Each name in the folio becomes its own tap target: same font/size/weight as the plain .bf-namefolio-name it replaces, so a day with nothing saved reads IDENTICALLY to before. Calm/almanac styling per the ruling: no lime, no celebration, no counter — just a quiet ring that fills when saved. */ .bf-namefolio-names { font-family: var(--font-body); font-size: 0.85rem; font-weight: 560; } .bf-nameday-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 2px 1px; margin: 0; font: inherit; color: var(--text-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; } html.theme-light .bf-nameday-toggle { color: var(--accent-ink); } .bf-nameday-toggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-nameday-icon { display: inline-flex; color: var(--text-subtle); } .bf-nameday-toggle.is-saved .bf-nameday-icon { color: currentColor; } .bf-nameday-toggle.is-saved .bf-nameday-ring { fill: currentColor; } /* Free-tier cap (MONETIZATION-MODEL.md §7-R2, 115_user_saved_namedays_free_ limit.sql) — an unsaved name once a free reader already has 3. Dimmed, not hidden or struck through: still reads as a name, not a broken control. */ .bf-nameday-toggle.is-locked { opacity: 0.5; } /* "Today is X — one of yours" — the personal-touch line, quiet and editorial like .bf-rootline (never a badge, never colored, no icon). Sits between the folio and the root-line only when it has something to say. */ .bf-namefolio-mine { font-family: var(--font-body); font-style: italic; font-size: 0.8125rem; color: var(--text-muted); margin: -4px 0 10px; } /* Folio invitation (Part 3, "make membership feel like membership", 2026-07-23) — a member's OTHER culture edition, mentioned as one quiet masthead line, same register as .bf-namefolio-mine (italic, muted, no badge). It IS tappable (in-place culture switch), unlike that line, so it gets cursor:pointer + a slightly bolder arrow as the one tap affordance — still no lime, no border, no card: this is furniture, not a CTA. */ .bf-culture-invite { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; font-family: var(--font-body); font-style: italic; font-size: 0.8125rem; color: var(--text-muted); margin: -4px 0 10px; cursor: pointer; } .bf-culture-invite:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-culture-invite-arrow { font-style: normal; font-weight: 700; color: var(--text-primary); } html.theme-light .bf-culture-invite-arrow { color: var(--accent-ink); } /* Free-cap note — appended once, after the folio, on the proactive-lock tap or the server rejection. Same quiet register as .bf-namefolio-mine: one plain sentence, no badge, no button, a plain-text link is the only accent. */ .bf-nameday-limit-note { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-muted); margin: -4px 0 10px; } .bf-nameday-limit-link { color: var(--text-primary); text-decoration: underline; } html.theme-light .bf-nameday-limit-link { color: var(--accent-ink); } /* Hook — the daily fact, marked by a short neutral horizontal DASH above it (was lime — decoration doesn't get to be lime, §3a). Set for SENTENCES (the editorial-voice hook reads ~8-10 wrapped lines on mobile, not a poster fragment). .is-short (card.js, text ≤ ~90 chars) steps back up to a poster size for short punchy facts. The hook stays the hero in both themes. Font §ED430 · back to Fraunces, at 400. Jake's FINAL ruling makes fact titles Fraunces 400, which supersedes the old "Fraunces is the wordmark only" reservation (VISUAL-IDENTITY §2) for this element. --font-display now RESOLVES to Fraunces, so the token is already correct and only the weight moves (480 -> 400). Fraunces' opsz axis is live again (9-144, measured); browsers apply font-optical-sizing:auto by default, so it tracks font-size without the hand-set opsz 40 this comment used to describe. Generous padding-top here (was 2px) is deliberate — the hero's arrival needs clear air after the quiet pre-fact stack above (masthead/nameday/ rootline), not a snug transition; the size bump below is only half the "hero" effect, the breathing room is the other half. */ .bf-quote { padding-top: 26px; } .bf-accent-dash { display: block; width: 36px; height: 4px; background: var(--text-muted); border-radius: 999px; margin: 0 0 14px; } .bf-hook-text { position: relative; font-family: var(--font-display); font-weight: 400; /* §ED430 · ruled */ font-size: 2rem; line-height: 1.18; letter-spacing: -0.015em; color: var(--text-primary); margin: 0; overflow-wrap: break-word; /* long Czech names never overflow the card */ text-wrap: balance; } .bf-hook-text.is-short { font-size: 2.4rem; } /* Fact deck (§1.7, FACT-ANATOMY-SPEC.md 2026-07-15 amendment) — fact_text, demoted from hero to deck ONLY when an approved title takes the hero slot above it (card.js renderFactRead: appended only when fact.title is present). Body-serif, first-class (full text_primary, not the debrief's muted tone) — never truncated, always renders in full. (Renamed "standfirst" -> "deck" in this comment 2026-07-23: that word now names a DIFFERENT, new block — see .bf-standfirst below, the placement line between the title and THIS deck — so reusing it here would read as the same thing twice.) */ .bf-fact-deck { font-family: var(--font-body); font-size: 1.2rem; line-height: 1.5; color: var(--text-primary); max-width: 62ch; margin: 14px 0 0; } /* Standfirst (§1.7 amendment, 2026-07-23) — a placement line for the card's LEAD entity, between the hero title and the deck above: "Benjamin Franklin — a statesman of American independence (1706-1790)." Deliberately subordinate to .bf-hook-text in every dimension (smaller, uppercase-tracked label register instead of display type, muted color) — a second headline here would reopen the emotional-spine two-subject law (§1.7's own register bans exist for the same reason). Server-gated to render only alongside an approved, hash-fresh title (10-assemble-daily.js's gateRenderableStandfirst), so it never appears floating with no title above it. */ .bf-standfirst { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.01em; color: var(--text-muted); max-width: 62ch; margin: 10px 0 0; } /* Hook → story seam — the classic head/dek separator: one quiet hairline, no second lime flourish (the dash stays the column's only one). */ .bf-hook-seam { width: 24px; height: 1px; background: var(--border); margin: 20px auto; border: none; } /* Debrief — grounded background/story below the hook. */ .bf-debrief { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.62; color: var(--text-muted); max-width: 62ch; margin: 16px 0 0; } /* Trust line — standing provenance, ALWAYS visible (never tap-gated behind Read-more, which keeps the URL/subdomain/report affordances). No lime here — the hook's accent-dash stays the column's one flourish. */ .bf-trust { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-subtle); margin: 16px 0 0; } /* Reaction row — love pill (live count) + social proof. */ .bf-reaction { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .bf-love-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9999px; padding: 11px 18px 11px 15px; cursor: pointer; min-height: 44px; /* a11y low-pass (2026-07-11): was ~42px on desktop */ transition: transform 140ms ease, background 140ms ease; } .bf-love-pill:hover { transform: translateY(-1px); background: var(--surface-3); } .bf-love-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* §ED240 — the save pill's glyph is the bookmark now; the heart went to .bf-like-pill. Same ink it always carried, on the new mark. */ .bf-love-pill .bf-bookmark { color: var(--accent-ink); } .bf-love-lbl { font-family: var(--font-body); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); } .bf-love-count { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-subtle); } .bf-love-pill.is-on { background: var(--accent); border-color: var(--accent); } /* loved → lime fill, dark text */ .bf-love-pill.is-on .bf-bookmark { color: var(--accent-text); fill: var(--accent-text); } .bf-love-pill.is-on .bf-love-lbl { color: var(--accent-text); } .bf-love-pill.is-on .bf-love-count { color: color-mix(in srgb, var(--accent-text) 55%, transparent); } /* LIKE (§ED240) — the reaction, beside the save. Same pill geometry so the two read as one control group, but NEVER lime-filled in either state: the view's one lime action is the save's is-on fill, and a second filled pill beside it would breach the palette invariant every time a reader did both. The on-state says its piece through the heart's ink (--accent-ink, exactly the treatment .bf-love-pill already gives that glyph on this surface) and a strengthened border — not a fill. Label ink is --text-primary in both states, so nothing here rests on a muted tone for legibility. */ .bf-like-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; } .bf-like-pill:hover { transform: translateY(-1px); background: var(--surface-3, var(--surface-2, var(--surface))); } .bf-like-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .bf-like-pill .bf-heart { color: var(--text-subtle); transition: color 120ms ease; } .bf-like-pill.is-on { border-color: var(--accent-ink); } .bf-like-pill.is-on .bf-heart { color: var(--accent-ink); } .bf-like-pill .bf-like-lbl { color: var(--text-primary); } /* Green "kept" outline on the fact's own OUTER card, toggled in card.js's paint() via row.closest('.bf-daily, .bf-item'). Matches --accent, the same lime used for .bf-masthead's border-top "lime top-edge" (the card's own top-bar accent) — was --success (a darker, distinct mint/forest green) until this pass; changed to read as the SAME brand accent as the rest of the card rather than a separate, slightly-too-dark green. Border-color only (.bf-item already carries a transparent border at rest to color here, and .bf-daily carries its own non-transparent border already) — no fill, kept deliberately subtle. .bf-guessmoment is deliberately NOT targeted here — it always nests inside .bf-daily/.bf-item, so coloring it drew the outline on an inner box instead of framing the actual card (see card.js paint()). */ .bf-daily.is-loved, .bf-item.is-loved { border-color: var(--accent); } /* A2 — love-pill micro-interaction. Both classes are added by card.js only on the tap-driven transition into loved (never on the async server- reconciliation repaint), so they never replay spuriously. Reduced-motion is handled globally (global.css collapses animation-duration app-wide). */ @keyframes bf-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } } .bf-heart.bf-pop { animation: bf-heart-pop 250ms ease-out; } @keyframes bf-count-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .bf-love-count.bf-rise { animation: bf-count-rise 220ms ease-out; } .bf-social { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-subtle); } /* ── BLUR + OVERLAY guess gate (calendar-scrim pattern) ────────────────────── The lead fact renders BLURRED behind an overlay (filter:blur, same approach as the calendar scrim); a guess panel hovers on top with the thin stem + 4 tiles. On a guess the overlay drops and the blur clears (the fact reads sharp), and a small result chip lands at the BOTTOM. Masthead/date above stay sharp. */ /* Transparent border at rest (matches .bf-item's treatment) — this is the closest()-matched container for every TESTABLE fact (hero or secondary), so it needs its own border to color; .is-gated's veil pseudo-element uses the same 16px radius, kept in sync here for a consistent outline. */ .bf-guessmoment { margin-top: 22px; border: 1.5px solid transparent; border-radius: 16px; transition: border-color 160ms ease; } /* GATED — the fact renders NOW but blurred unreadable; the overlay panel stacks in the SAME grid cell on top. */ .bf-guessmoment.is-gated { display: grid; } .bf-guessmoment.is-gated > .bf-gated, .bf-guessmoment.is-gated > .bf-guess-overlay { grid-area: 1 / 1; } .bf-gated { filter: blur(0); transition: filter 520ms cubic-bezier(0.22, 1, 0.36, 1); } /* Veiled fact — FULL natural height (the grid cell stretches it); blurred unreadable. §ED137: THIS RULE IS THE SIGHTED READER'S GATE ONLY, and nothing more. `filter` is a paint-time effect and `pointer-events` a hit-testing rule; neither removes the subtree from the accessibility tree or the tab order, so for four months a screen reader read the whole answer before the guess. The AT gate is the `inert` (+ aria-hidden) attribute card.js sets on .bf-gated at build time and clears in reveal() — see js/card.js's buildGuessMoment. Do not conclude from this rule that the gate is CSS's job: CSS closes one channel of two. */ .bf-guessmoment.is-gated .bf-gated { filter: blur(10px); pointer-events: none; user-select: none; } /* VEIL — a translucent tint over the blurred fact (calendar-scrim pattern lineage), covering the FULL gated block and extending BEYOND the floating panel. Above the fact (z0), below the panel (z2). R5: the backdrop-filter (blur+brightness) layer that used to live here is GONE — a perf fix (backdrop-filter is expensive in WKWebView, and this was stacking a SECOND blur on top of .bf-gated's own `filter: blur(10px)`, for one veil). The content layer's own blur + this plain translucent tint now carry the whole effect. Device-verify (dark + light): if the veil visibly cheapens without the extra brightness lift, that's the one thing in this commit to revert. */ .bf-guessmoment.is-gated::before { content: ''; grid-area: 1 / 1; z-index: 1; pointer-events: none; border-radius: 16px; background: color-mix(in srgb, var(--text-primary) 6%, transparent); } .bf-guess-overlay { z-index: 2; align-self: start; } /* A1 — animated exit: card.js adds .is-exiting on commit() and removes the node ~200ms later (matching this duration) instead of an instant removeChild. prefers-reduced-motion is handled globally (global.css collapses transition durations app-wide), so this degrades to an effectively-instant removal there. */ .bf-guess-overlay.is-exiting { opacity: 0; transform: scale(0.94); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; } /* The guess panel — a frosted "door": TRANSLUCENT (--glass-panel, T0/R5 token — was a hand-written rgba + a theme-light override, now one declaration) so the blurred story shows through underneath (teasing shape/length) while staying unreadable; lime-tinted hairline is the panel's interaction affordance, the ambient shadow lifts it off the blur (var(--shadow-float), already per-theme) — the lime-tinted GLOW that used to ride along the shadow is gone (§3a: no glow-at-scale). The old dark-mode-only text-shadow is gone — it existed to keep text legible over the FROST layer's brightness boost (removed above), which no longer applies. */ .bf-guess { background: var(--glass-panel); border: 1px solid var(--border-accent); border-radius: 18px; padding: 24px 22px; box-shadow: var(--shadow-float); } .bf-guess-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ } html.theme-light .bf-guess-eyebrow { color: var(--accent-ink); } .bf-guess-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; } .bf-guess-stem { font-family: var(--font-body); font-size: 1.16rem; line-height: 1.45; font-weight: 500; color: var(--text-primary); margin: 0 0 20px; } .bf-guess-hint { font-family: var(--font-body); font-size: 0.74rem; color: var(--text-muted); margin: 16px 0 0; text-align: center; } /* Option tiles — letter badge + text rows. Translucent (--glass-tile, T0/R5 token) so the blurred story reads continuously across the panel; border reuses the standard --border/--border-strong ladder instead of one-off alpha values, which retires the theme-light override entirely. */ .bf-opts { display: flex; flex-direction: column; gap: 10px; } .bf-opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--glass-tile); border: 1.5px solid var(--border); border-radius: 13px; padding: 13px 14px; cursor: pointer; color: var(--text-primary); transition: border-color 120ms ease, background 120ms ease, transform 100ms ease; } .bf-opt:hover { border-color: var(--border-strong); } .bf-opt:active { transform: scale(0.99); } .bf-opt:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .bf-opt:disabled { cursor: default; } .bf-opt-badge { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-3); color: var(--text-subtle); font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; /* 14px bold clears the WCAG "large text" line — needed so the is-wrong state's --error-ink-on-fill ratio (~4.2:1 in dark theme) qualifies under the 3:1 large-text tier instead of failing 4.5:1. */ } .bf-opt-text { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; } /* INLINE correct/wrong OPTION FEEDBACK (card.js commit()) — the SAME pattern the arcade quiz uses (guest-lesson.js/lesson.js .option-card is-correct/ is-wrong/is-reveal/is-dimmed), reused here on .bf-opt instead of a centered overlay or a page-level toast — both broke on-device (the toast overlapped the header, the overlay never appeared). This page doesn't load components.css, so the same brand-locked red values are duplicated here rather than pulled in wholesale — colors match exactly, just scoped to .bf-opt's own badge/text structure instead of .option-card's. Correct now uses the semantic --success green (was brand lime) — quiz feedback is functional state, not brand punctuation; the loved heart stays the card's one lime signal (§3a), and this also brings is-correct in line with is-wrong below, which already used semantic --error. */ .bf-opt.is-correct { border-color: var(--success); background: var(--success-dim); box-shadow: 0 0 0 1px var(--success) inset, 0 2px 10px color-mix(in srgb, var(--success) 12%, transparent); } .bf-opt.is-correct .bf-opt-badge { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); } /* Reveal — the right answer shown inline after a WRONG pick (replaces the old "Not quite — it was X" copy; the correct option itself IS the answer now). */ .bf-opt.is-reveal { border-color: var(--success); background: var(--success-dim); } .bf-opt.is-reveal .bf-opt-badge { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); } .bf-opt.is-wrong { border-color: var(--error); background: var(--error-dim); box-shadow: 0 0 0 1px var(--error) inset, 0 2px 10px color-mix(in srgb, var(--error) 12%, transparent); } .bf-opt.is-wrong .bf-opt-badge { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error-ink); } .bf-opt.is-dimmed { opacity: 0.4; } /* Result banner — COMPACT but readable at a glance, at the BOTTOM after the read. THREE shapes (card.js buildResultChip): GUESS (STREAK ONLY now — the verdict badge/headline and wrong-answer reveal live inline on the guess options above, see .bf-opt.is-correct/.is-wrong/.is-reveal), READ completion (R4 — no correctness, flame badge + the PROMOTED streak cell), and DAY-1 (R4 — full-width band, self-limiting). Not the old full-screen flame; the reading stays the hero. Entrance = BLOOM (.m-bloom, global.css T0 primitive, applied via Motion.bloom() in card.js) — replaces the old plain-CSS slide-up. */ .bf-result { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 13px 15px; border-radius: 14px; border: 1px solid; font-family: var(--font-body); } .bf-result.is-read { background: var(--accent-dim); border-color: var(--border-accent); } .bf-result-badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; line-height: 1; } .bf-result-badge.is-flame { background: var(--accent); color: var(--accent-text); } .bf-result-mid { flex: 1 1 auto; min-width: 0; } .bf-result-head { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; margin: 0; text-wrap: balance; } .bf-result.is-read .bf-result-head { color: var(--text-primary); } /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ html.theme-light .bf-result.is-read .bf-result-head { color: var(--accent-ink); } .bf-result-sub { font-size: 0.86rem; color: var(--text-muted); margin: 3px 0 0; } .bf-result-streak { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--text-subtle); font-size: 0.8rem; font-weight: 600; font-family: var(--font-numeric); /* the streak digit — numbers use --font-numeric, never --font-display */ } .bf-result-flame { color: var(--accent-ink); } .bf-result-flame svg { width: 16px; height: 16px; } /* GUESS result, streak-only — this chip no longer signifies right/wrong (that moved to the top banner), so shrink it to a modest pill and drop the green/red tint. Scoped to correct/wrong only — is-day1 and is-read keep the base .bf-result sizing/background above untouched. */ .bf-result.is-correct, .bf-result.is-wrong { padding: 8px 12px; margin-top: 10px; background: var(--surface-well); border-color: var(--border); } /* READ completion (R4) — the PROMOTED streak cell: "Day N" is the thing the eye lands on (a reward, not a footnote), the self-narrative label below it. */ .bf-result-cell { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .bf-result-cell-n { font-family: var(--font-numeric); font-weight: 800; font-size: 1.05rem; line-height: 1; color: var(--text-primary); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ } html.theme-light .bf-result-cell-n { color: var(--accent-ink); } .bf-result-cell-label { font-family: var(--font-body); font-size: 0.72rem; color: var(--text-subtle); } /* DAY-1 (R4) — self-limiting, full-width Beat-2 band; shared by whichever path (guess or read) first reaches streakCount===1. Replaces the shapes above. */ .bf-result.is-day1 { flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; background: var(--accent-dim); border-color: var(--border-accent); } .bf-result-day1-head { display: flex; align-items: center; gap: 10px; } .bf-result.is-day1 .bf-result-head { color: var(--text-primary); } /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ html.theme-light .bf-result.is-day1 .bf-result-head { color: var(--accent-ink); } .bf-result.is-day1 .bf-result-sub { color: var(--text-muted); margin: 0; } /* ANON STREAK NUDGE — logged-out only, sits quietly under the result banner. No fill, subtle text: it must read as a footnote to the banner, not a peer. font-family was ALREADY var(--font-body) (Montserrat) — checked git history, it has been since this rule was first introduced (2026-06-27) and there is no other CSS rule or theme override touching --font-body/--font-display that could flip it; per DESIGN-INVARIANTS.md this is correct as-is. Size bumped per the 2026-07-08 design pass — 0.78rem read as too small for a CTA line, not just a caption. */ .bf-streak-nudge { display: inline-block; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--text-subtle); text-decoration: none; margin: 10px 0 0 2px; padding: 2px 0; transition: color 120ms ease; } .bf-streak-nudge:hover { color: var(--text-muted); } /* DAILY COLLECTION NUDGE — logged-in equivalent of the anon streak nudge above, but promoted to a proper button-weight tap target (was a bare inline-text footnote — too subtle to act on). Matches the existing .pf-change-culture- link row pattern (profile.html) rather than a loud lime CTA: padded, a subtle border/surface tint, calm/editorial text color. */ .bf-collection-nudge { display: flex; align-items: center; width: 100%; margin-top: 14px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-well); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: var(--text-primary); text-decoration: none; transition: background 120ms ease, border-color 120ms ease; } .bf-collection-nudge:hover { background: var(--surface-2); border-color: var(--border-strong); } /* CONVERSION WALL (ONBOARDING-CONVERSION-AUDIT §2) — dual-trigger anon signup ask. Same visual family as .bf-result.is-day1 (--accent-dim band, border-accent) per PREMIUM-POLISH-SPEC's result-chip convention. */ .bf-reaction-wrap { display: block; } .bf-wall-slot:not([hidden]) { display: block; } /* WO-CONV-3 (§8.3/§8.7) — the first-save disclosure, once ever. Neutral ink, no lime (§3a: an ambient affordance on a reading-primary view). */ .bf-first-save { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .bf-first-save-text { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-subtle); margin: 0; flex: 1; } .bf-first-save-dismiss { flex: 0 0 auto; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 6px; } /* ── "This one's ours" — the reader's own one-line note (119_user_fact_notes.sql). The FIRST feature that puts the reader's OWN WORDS on a card, so a note must read UNMISTAKABLY as theirs, never as sourced/verified content. Three signals carry the distinction at once: (1) an explicit "Your note" label, (2) a RECESSED well — sourced text sits on the flat card surface, the note sits inset in a well — and (3) a NEUTRAL grey left rule, deliberately NOT the olive source-accent (.bf-accent-dash / .bf-trust), so the two can never blur. Calm, no arcade, no celebration. Theme-aware via the shared tokens (well/border/ink). */ .bf-note-zone { margin: 10px 0 2px; } /* Empty state — a quiet ambient trigger, not a heavy button. */ .bf-note-add { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--text-subtle); padding: 2px 0; } .bf-note-add:hover { color: var(--text-muted); } .bf-note-add-ic { display: inline-flex; } .bf-note-add:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } /* The saved note — recessed well + neutral left rule + label. */ .bf-note { padding: 9px 12px 9px 13px; background: var(--surface-well); border-left: 3px solid var(--border-strong); border-radius: 0 8px 8px 0; } .bf-note-label { display: block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 3px; } .bf-note-text { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--text-primary); margin: 0; overflow-wrap: break-word; } .bf-note-edit { margin-top: 6px; border: none; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--text-subtle); padding: 0; text-decoration: underline; } .bf-note-edit:hover { color: var(--text-muted); } /* Inline editor — one line, calm. */ .bf-note-editor { display: flex; flex-direction: column; gap: 8px; } .bf-note-input { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px; } .bf-note-input::placeholder { color: var(--text-subtle); } .bf-note-input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; } .bf-note-actions { display: flex; gap: 8px; align-items: center; } .bf-note-save, .bf-note-cancel, .bf-note-delete { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; cursor: pointer; border-radius: 7px; padding: 6px 14px; } .bf-note-save { border: none; background: var(--accent-ink); color: #fff; } /* olive-ink action, calm (matches the stepped-down email CTA), never raw lime */ .bf-note-cancel { border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); } .bf-note-delete { margin-left: auto; border: none; background: transparent; color: var(--text-subtle); text-decoration: underline; padding: 6px 2px; } .bf-note-save:focus-visible, .bf-note-cancel:focus-visible, .bf-note-delete:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } /* Calm free-cap note — mirrors .bf-nameday-limit-note exactly. */ .bf-note-limit { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-muted); margin: 8px 0 0; } .bf-note-limit-link { color: var(--text-primary); text-decoration: underline; } html.theme-light .bf-note-limit-link { color: var(--accent-ink); } .bf-wall { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; margin-top: 12px; padding: 14px 40px 14px 15px; border-radius: 14px; border: 1px solid var(--border-accent); background: var(--accent-dim); font-family: var(--font-body); transition: opacity 200ms ease, transform 200ms ease; } .bf-wall.is-dismissing { opacity: 0; transform: translateY(-4px); } /* a11y follow-up (2026-07-11): explicit, local reduced-motion guard for the wall's slide/fade — see the identical rationale comment on TURN (global.css, near mTurnIn/mTurnOut): the blanket `*` rule (global.css § Reduced motion) already forces this to near-instant today, so this is defense-in-depth/legibility, not a behavior change. Dismissal (the interaction) is untouched — only its motion is suppressed. */ @media (prefers-reduced-motion: reduce) { .bf-wall { transition-duration: 0.01ms; } } .bf-wall-head { margin: 0; font-size: 0.92rem; line-height: 1.35; color: var(--text-primary); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below */ } html.theme-light .bf-wall-head { color: var(--accent-ink); } .bf-wall-cta { display: inline-flex; align-items: center; justify-content: center; padding: 14px 16px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: background 120ms ease, transform 120ms ease; } .bf-wall-cta:hover { background: var(--accent-hover); } .bf-wall-cta:active { transform: scale(0.97); } .bf-wall-close { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; padding: 0; background: transparent; color: var(--text-subtle); cursor: pointer; } .bf-wall-close:hover { color: var(--text-muted); background: color-mix(in srgb, var(--text-primary) 6%, transparent); } /* Hit-slop only — the visible 26px circle is unchanged; -9px on every side brings the actual tappable area to 44x44 (same technique as .pf-icon-btn). */ .bf-wall-close::before { content: ''; position: absolute; inset: -9px; } .bf-wall-close-ic svg { display: block; width: 14px; height: 14px; } @keyframes bf-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Reduced motion — the blur clears with a simple fade, no filter transition. a11y follow-up (2026-07-11), resolved: global.css's universal reduced- motion kill-switch (`*{transition-duration:0.01ms !important}`) wins over this rule's 160ms regardless of specificity, since !important beats non-!important outright — so this fade collapses to near-instant, same as everywhere else. Confirmed correct, not a gap: a media query that only ever suppresses/shortens motion never changes the guess-reveal LOGIC (content still appears the instant it's un-gated, just without an animated fade) — no device test needed for that class of change, only for anything that could alter WHEN/WHETHER content appears, which this doesn't. Left as-is rather than adding !important to force the 160ms through, since that would mean MORE motion for reduced-motion users than the already-compliant instant reveal, not less. */ @media (prefers-reduced-motion: reduce) { .bf-gated { transition: none; } .bf-guessmoment:not(.is-gated) .bf-gated { animation: bf-fade-in 160ms linear both; } } /* Inline icons. */ .bf-ic { display: inline-flex; align-items: center; flex: 0 0 auto; } .bf-ic svg { display: block; } /* WO-VIS Wave B: IC_LINK (card.js) used to hardcode stroke="#a89a7e" regardless of theme; now stroke="currentColor", scoped here to the muted tone it had. */ .bf-row-src .bf-ic { color: var(--text-subtle); } /* Read-more disclosure — quiet inline; depth hidden by default (MOD 1). */ .bf-depth { margin-top: 24px; } .bf-depth-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--text-primary); padding: 12px 0; /* a11y medium-pass: was 4px (~28px tall); dark-theme small text is never lime — Wave D follow-up, light stays --accent-ink below */ } html.theme-light .bf-depth-summary { color: var(--accent-ink); } .bf-depth-summary::-webkit-details-marker { display: none; } .bf-depth-summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-chev { color: var(--accent-ink); transition: transform 160ms ease; } .bf-depth[open] .bf-chev { transform: rotate(180deg); } .bf-depth-rows { margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .bf-depth-context { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin: 0 0 6px; } .bf-depth-row { display: flex; align-items: center; gap: 9px; padding: 11px 0; text-decoration: none; } a.bf-depth-row { cursor: pointer; } .bf-depth-sep { height: 1px; background: var(--border); } .bf-row-text { font-family: var(--font-body); font-size: 0.84rem; color: var(--text-muted); overflow-wrap: break-word; } .bf-row-strong { color: var(--text-primary); font-weight: 600; overflow-wrap: break-word; } .bf-row-muted { color: var(--text-subtle); } /* Source link — provenance, deliberately quiet (not a loud link); the title underlines subtly only on hover/focus. */ .bf-row-src { text-decoration: none; } .bf-row-src .bf-row-strong { text-decoration: none; } .bf-row-src:hover .bf-row-strong, .bf-row-src:focus-visible .bf-row-strong { text-decoration: underline; } .bf-row-src:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } /* ENTITY ARCHIVE — "More on — N pieces in the archive" (below the seam, after Read-more). Same disclosure shape as .bf-depth (details/ summary, chevron rotates open) so it reads as one family of "there's more here, tap to see" affordances rather than a second, competing pattern. */ .bf-entity-archive { margin-top: 18px; } .bf-entity-archive-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 0.84rem; font-weight: 600; color: var(--text-primary); padding: 12px 0; } html.theme-light .bf-entity-archive-summary { color: var(--accent-ink); } .bf-entity-archive-summary::-webkit-details-marker { display: none; } .bf-entity-archive-summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-entity-archive[open] .bf-chev { transform: rotate(180deg); } .bf-entity-archive-rows { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } .bf-entity-archive-row { display: flex; align-items: center; gap: 10px; /* wrap so the R2 attribution line drops BELOW the hook rather than competing with it for the row's width — see .bf-entity-archive-source */ flex-wrap: wrap; padding: 11px 0; text-decoration: none; font-family: var(--font-body); font-size: 0.84rem; color: var(--text-muted); } .bf-entity-archive-row:not(:last-child) { border-bottom: 1px solid var(--border); } .bf-entity-archive-row:hover { color: var(--text-primary); } .bf-entity-archive-row:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 4px; } .bf-entity-archive-hook { flex: 1; overflow-wrap: break-word; } .bf-entity-archive-row.is-locked .bf-entity-archive-hook { color: var(--text-subtle); } /* R2 attribution on an archive row (CORPUS-RIGHTS.md R2) — its own full-width line under the hook, deliberately quieter than the hook it credits. Renders only when the endpoint supplied a source, so there is no empty line. */ .bf-entity-archive-source { flex: 1 0 100%; margin-top: 3px; font-size: 0.74rem; line-height: 1.35; color: var(--text-subtle); overflow-wrap: break-word; } .bf-entity-archive-lock { flex: 0 0 auto; color: var(--text-disabled); display: inline-flex; } .bf-entity-archive-lock svg { display: block; } /* Report flag — muted outline by default; on report the ICON fills olive (like the loved heart, both themes). The "Reported — thanks" TEXT goes neutral on dark (small text is never lime — Wave D follow-up) and stays olive on light. */ .bf-flag { color: var(--text-subtle); } .bf-row-report.is-reported .bf-flag { color: var(--accent-ink); } .bf-row-report.is-reported .bf-flag svg path { fill: currentColor; } .bf-row-report.is-reported .bf-row-text { color: var(--text-primary); font-weight: 600; } html.theme-light .bf-row-report.is-reported .bf-row-text { color: var(--accent-ink); } .bf-row-soon { font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); } /* On This Day — year lead + lived-memory ("25 years ago today") badge. */ .bf-otd-year { color: var(--text-primary); } .bf-otd-badge { display: inline-block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-muted); /* dark-theme small text is never lime — Wave D follow-up; light stays --accent-ink below. Background wash (--accent-dim) is translucent, not a solid fill, so the button-fill exemption doesn't apply here */ background: var(--accent-dim); border-radius: 999px; padding: 2px 9px; margin: 0 0 8px; } html.theme-light .bf-otd-badge { color: var(--accent-ink); } .bf-report { display: inline-block; margin-left: 14px; font-family: var(--font-body); font-size: 0.78rem; color: var(--text-subtle); text-decoration: underline; } .bf-report:hover { color: var(--text-primary); } /* ── States ─────────────────────────────────────────────────────────────── */ .bf-state { text-align: center; font-family: var(--font-body); color: var(--text-subtle); padding: 40px 16px; } .bf-state .bf-state-h { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-primary); margin: 0 0 8px; text-wrap: balance; } .bf-retry { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; padding: 9px 16px; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--surface-4); color: var(--text-primary); cursor: pointer; } /* A6 — masthead-shaped loading skeleton, replacing the plain "Loading…" text. Mirrors .bf-daily's shape — imprint + nameplate + dateline bars in the mast, then hook/debrief lines in the body — so the page doesn't jump when the real card lands. Shimmer recipe ported from components.css's .skeleton (NOT loaded on briefing.html/archive.html, which only load global.css + briefing.css) — same GPU-friendly transform-sweep, scoped under bf- so it can't collide if components.css is ever added here later. Archive's #ar-loader reuses this same treatment (hardcoded HTML, still just .bf-skel-kicker — a single bar is enough for a loading TILE, not a full page mount, so it's untouched here). */ .bf-skeleton { border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); } .bf-skel-mast { display: flex; flex-direction: column; gap: 6px; padding: 16px 28px 14px; background: var(--surface-3); border-top: 2px solid var(--border-accent); } .bf-skel-imprint { width: 22%; height: 9px; } .bf-skel-title { width: 46%; height: 20px; margin-top: 2px; } .bf-skel-dateline { width: 64%; height: 11px; margin-top: 8px; } .bf-skel-body { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 12px; } .bf-skel-line { position: relative; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .bf-skel-line::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text-primary) 6%, transparent) 50%, transparent 100%); animation: bf-skel-sweep 1.3s ease-in-out infinite; } /* color-mix(var(--text-primary)) inverts per theme automatically (white tint dark, dark tint light), so the loading sweep stays visible without a separate light override. */ @keyframes bf-skel-sweep { to { transform: translateX(100%); } } .bf-skel-kicker { width: 34%; height: 12px; } .bf-skel-hook { width: 92%; height: 26px; margin-top: 6px; } .bf-skel-hook-2 { width: 68%; height: 26px; } .bf-skel-debrief { width: 100%; height: 14px; margin-top: 10px; } .bf-skel-debrief-2 { width: 82%; height: 14px; } /* ── Bottom anonymous / signup prompt ───────────────────────────────────── */ .bf-foot { margin-top: 26px; text-align: center; } .bf-signup { background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 18px 20px; } .bf-signup p { font-family: var(--font-body); } .bf-signup-h { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; } .bf-signup-sub { font-size: 0.84rem; color: var(--text-subtle); margin: 0 0 14px; } /* Waitlist capture — email + lime "Join the waitlist" (reuses waitlist-signup). */ .bf-wl { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .bf-wl-email { flex: 1 1 220px; max-width: 300px; font-family: var(--font-body); font-size: 0.92rem; padding: 11px 14px; border: 1.5px solid var(--border-strong); border-radius: 12px; background: var(--surface-4); color: var(--text-primary); } .bf-wl-email:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; } .bf-wl-btn { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; padding: 11px 20px; border: none; border-radius: 12px; background: var(--accent); /* sanctioned lime fill: dark text on lime */ color: var(--accent-text); cursor: pointer; } .bf-wl-btn:hover { background: var(--accent-hover); } .bf-wl-btn:disabled { opacity: 0.6; cursor: default; } /* Native variant's CTA is an , not a