/* ═══════════════════════════════════════════════════════════════════════════ THE GARDEN — Feedback Loop design layer (garden.css) Assembled by garden/assemble.py: parlor.css core (structure + legibility) + garden fragments A–D. Edit the FRAGMENTS, then re-run the assembler. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CORE (parlor.css, verbatim) ───────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ parlor.css — THE PARLOR (FL_PERSONA, chosen by the owner 2026-08-16) "A lamplit room, not an app screen." Feedback Loop asks people to say the hardest true things, so the product is dressed like the room where you'd actually say them: a deep velvet dark, one warm lamp falling across sheets of lit paper, and type set at the scale of a voice that leans in rather than a UI that announces. THE SYSTEM • THE ROOM — var(--canvas): velvet, napped, with the lamp falling from the top right. Everything ambient lives here. • THE PAPER — var(--sheet): lamplit stock with real fibre, a warm gradient and a letterpress bite. Everything you WORK on lives here. • THE LAMP — var(--a1): brass. The only thing that glows: primary buttons, focus, the accent rule, the eyes' catchlight. • THE INK — var(--ink)/--body/--muted: walnut, steeped tea, cocoa shadow. Six palettes become SIX ROOMS — the upholstery and the shade of the lamp change, the system does not. TYPE Young Serif (display) · Instrument Serif Italic (the voice) · Karla 200–800 (every control, every row, every label). They are declared under the family names the app already asks for, so the app's thousands of inline styles pick them up untouched. REVERT FL_PERSONA=0 rebuilds the pre-persona bundle byte-for-byte, and releases/pre-persona-2026-08-16/ holds the live files. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. The voices ──────────────────────────────────────────────────────── */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* the aliases: the app asks for these three names everywhere */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* [stripped by garden/core-strip.json] */ /* Young Serif is one weight by design — never let the browser fake a bolder one, and never let the app's inherited 'opsz'/SOFT/WONK settings apply to a face that has no such axes. */ /* [stripped by garden/core-strip.json] */ /* ═══════════════════════════════════════════════════════════════════════════ rooms.css — SIX ROOMS, NOT SIX HUES The complaint was fair: every room was the same recipe — dark velvet, warm cream paper, brass lamp — so they could only differ by hue, and two of them (the Rose Room and the Parlour) landed on nearly the same hue. This replaces the recipe with six. Each room varies THREE things, not one: ROOM (the velvet) what colour the dark is LAMP (--a1 / --cta) brass · verdigris · bole · rose-gold · amber · moon PAPER (--sheet) warm cream · cool bone · green ivory · blush · dark walnut · dark slate FOUR rooms keep the signature structure: a dark room, and LIT PAPER you work on. TWO are true dark themes — the working surface itself is dark, the inks are light, and --p-shade DARKENS the paper's far edge instead of warming it. Every ratio below is computed (WCAG relative luminance, sRGB compositing, oklab color-mix), never eyeballed. See roomcheck.py; the full table is in the handover. Floors held in all six rooms: ink/sheet ≥7 · body,muted/sheet ≥4.5 · a1Text,a2Text,a3Text/sheet ≥4.5 ctaText/cta ≥4.5 · onCanvas/canvas ≥7 · onCanvasBody/canvas ≥4.5 onCanvasMuted/canvas ≥3 · warmText/warm ≥4.5 · logo,eye/sheet AND /canvas ≥3 a1/sheet ≥3 · rule/sheet ≥1.35 · plus parlor.css's own derived invariants (--p-ring ≥3 on sheet/canvas/velvet/tint1/tint2, --ctaText ≥4.5 on both button-face stops, --p-quiet ≥4.5 on both chip stops). The KEYS never change — they are stored in user accounts. Only the colours and the room names moved. ═══════════════════════════════════════════════════════════════════════════ */ /* ── The lit edge ────────────────────────────────────────────────────────── parlor.css builds the paper with radial-gradient(… color-mix(--sheet 88%, white) … --sheet … color-mix(--sheet 88%, --p-shade)) That hardcoded `white` is the last thing standing between this system and a dark working surface: 12% white on dark paper is a grey fog, not a lamp. Each room now names the colour its paper is lit BY. Light rooms name a warm or cool white; dark rooms name a pale lamp-tint, so the lit edge glows warm instead of going grey. parlor.css reads --p-lit-mix; this redefinition of --p-paper-lit means the file also works unchanged against today's build. */ :root { --p-lit-mix: #FFFFFF; --p-paper-lit: radial-gradient(120% 90% at 22% -8%, color-mix(in oklab, var(--sheet) 88%, var(--p-lit-mix, white)) 0%, var(--sheet) 44%, color-mix(in oklab, var(--sheet) 88%, var(--p-shade)) 100%); } /* ═══ 1 · THE PARLOUR ══════════════════════════════════════════════════════ Aubergine velvet, a brass lamp, warm cream paper. The house room: the one the product was drawn for. Purple and gold, and unapologetic about it. */ [data-palette="amethyst-night"] { --canvas: #24122C; --velvet: #3D1D49; --sheet: #FBEAD1; --p-shade: #C7A67C; --p-lit-mix: #FFF8E8; --ink: #2B1410; --body: #5A362A; --muted: #795443; --a1: #AF7318; --a2: #B2496A; --a3: #6C7A53; --a1Text: #815310; --a2Text: #953A55; --a3Text: #4E5B39; --a1OnCanvas: #E7B863; --tint1: #F6E2BE; --tint2: #F3E0DC; --rule: #DEC298; --ruleStrong: #C7A67C; --cta: #C9922F; --ctaText: #2B1108; --onCanvas: #F9EAD7; --onCanvasBody: #E2CEB9; --onCanvasMuted: #B79D8C; --logo: #A0741F; --eye: #A0741F; --logoSoft: #C9922F; --pupil: #2B1410; --cheek: #B2496A; --glint: #F6DFBC; --spark: #E3B463; --stampInk: #953A55; --warm: #A63E5D; --warmDeep: #8A2E4A; --warmText: #FFF1EA; --catL: .47; --catC: .13; --catText: #FFF7EF; } /* ═══ 2 · THE HARBOUR OFFICE ═══════════════════════════════════════════════ Cold slate-navy walls, an oxidised-copper lamp, and COOL BONE paper — a grey-white sheet with graphite ink instead of walnut. Nothing in this room is warm except one rust buoy. The opposite temperature to the Parlour. */ [data-palette="harbor"] { --canvas: #0E1A25; --velvet: #1A2E3E; --sheet: #EEEDE6; --p-shade: #A6ABA2; --p-lit-mix: #FFFFFF; --ink: #151E24; --body: #3D4A54; --muted: #58646D; --a1: #2E8577; --a2: #B4551F; --a3: #3B5F86; --a1Text: #1E6A5D; --a2Text: #8E3F14; --a3Text: #31506F; --a1OnCanvas: #5FC3AD; --tint1: #E1E7E1; --tint2: #E2E6EB; --rule: #C6CABF; --ruleStrong: #A6ABA2; --cta: #1B6E60; --ctaText: #F2FBF7; --onCanvas: #E9EEEF; --onCanvasBody: #BFCAD0; --onCanvasMuted: #91A0A9; --logo: #2E8577; --eye: #B4551F; --logoSoft: #4FA593; --pupil: #0E1A25; --cheek: #C0705A; --glint: #DCEDE8; --spark: #5FC3AD; --stampInk: #8E3F14; --warm: #A34A18; --warmDeep: #82370F; --warmText: #FFF3EA; --catL: .47; --catC: .13; --catText: #FFFFFF; } /* ═══ 3 · THE GARDEN ROOM ══════════════════════════════════════════════════ Bottle-green walls after dark, a terracotta lamp, and GREENISH IVORY paper with olive ink. The lamp is the complement of the room, so this is the one room where the light and the walls argue — which is what makes it read at thumbnail size from three feet away. */ /* the default room for every new visitor (owner 2026-08-17): the app stamps data-palette pre-paint, static pages fall back to :root */ :root:not([data-palette]), [data-palette="meadow"] { --canvas: #0F1D16; --velvet: #193020; --sheet: #F0F0D5; --p-shade: #AFB582; --p-lit-mix: #FCFFEA; --ink: #1E2415; --body: #444C32; --muted: #586140; /* 5.67 on sheet, 4.90 on tint (was #636D4A: 4.44 on the lamp rim) */ --a1: #A04630; --a2: #3B6742; --a3: #86671F; --a1Text: #8A3A24; --a2Text: #315636; --a3Text: #6A5115; --a1OnCanvas: #EA9C80; --tint1: #E8EABC; --tint2: #DDE8D0; --rule: #C8CB9C; --ruleStrong: #AFB582; --cta: #92402B; --ctaText: #FFF0E6; --onCanvas: #ECF1D9; --onCanvasBody: #C6D1B2; --onCanvasMuted: #96A484; --logo: #AB4F35; --eye: #4E8A5C; --logoSoft: #C06A4E; --pupil: #0F1D16; --cheek: #B5764F; --glint: #EAEBBE; --spark: #EA9C80; --stampInk: #315636; --warm: #9A4322; --warmDeep: #7E3418; --warmText: #FFF2E7; --catL: .47; --catC: .13; --catText: #FFF8F2; } /* ═══ 4 · THE ROSE ROOM ════════════════════════════════════════════════════ Rosewood, not aubergine: a warm brown-red room, lighter and softer than the others, with a ROSE-GOLD lamp and BLUSH paper. Where the Parlour is purple over cream, this is cocoa over pink — the two the owner called identical now share neither the wall, the lamp, nor the stock. */ [data-palette="blush-study"] { --canvas: #331F1E; --velvet: #452A28; --sheet: #FCE9E2; --p-shade: #D3A497; --p-lit-mix: #FFF6F2; --ink: #301718; --body: #653838; --muted: #7F4F4D; /* 5.72 on sheet, 4.87 on tint (was #895654: 4.33 on tint) */ --a1: #B5654E; --a2: #8E4B72; --a3: #6F7A57; --a1Text: #93452F; --a2Text: #763B5D; --a3Text: #525C3C; --a1OnCanvas: #F2AC93; --tint1: #F8DCD3; --tint2: #F3E1E7; --rule: #E1BBAF; --ruleStrong: #D3A497; --cta: #A04A34; --ctaText: #FFF1E8; --onCanvas: #FAE6DF; --onCanvasBody: #DFC0B7; --onCanvasMuted: #B4928A; --logo: #B5654E; --eye: #AC5686; --logoSoft: #C97D63; --pupil: #301718; --cheek: #C1544B; --glint: #F7DED2; --spark: #F2AC93; --stampInk: #763B5D; --warm: #A8443C; --warmDeep: #8A322F; --warmText: #FFF2EA; --catL: .47; --catC: .13; --catText: #FFF7F3; } /* ═══ 5 · THE LATE STUDY ═══ DARK ══════════════════════════════════════════ One in the morning, one amber lamp, and the desk itself is dark: the working surface is walnut blotter, the ink is chalk and warm bone. Nothing on this screen is bright except the lamp, which is the point — the room does not flash at you when you open it at night. [dark theme 1/2] */ [data-palette="ember"] { --canvas: #120E0B; --velvet: #201811; --sheet: #2A211A; --p-shade: #0C0805; --p-lit-mix: #E9C89C; --ink: #F4E9D7; --body: #CEBDA5; --muted: #A6957D; --a1: #E09A3C; --a2: #D97A55; --a3: #C9AE5E; --a1Text: #F0B466; --a2Text: #E89A78; --a3Text: #D6BC74; --a1OnCanvas: #EDA24A; --tint1: #3B2F24; --tint2: #38322B; --rule: #4A3D30; --ruleStrong: #61503F; --cta: #E09A3C; --ctaText: #231404; --onCanvas: #F5EAD9; --onCanvasBody: #D4C3AB; --onCanvasMuted: #A08F79; --logo: #F0B466; --eye: #F0B466; --logoSoft: #E09A3C; --pupil: #120E0B; --cheek: #D97A55; --glint: #FFEFD9; --spark: #EFC46E; --stampInk: #E89A78; --warm: #D9764E; --warmDeep: #EC9A72; --warmText: #2A1206; --catL: .78; --catC: .12; --catText: #1A1207; } /* ═══ 6 · THE BLUE HOUR ═══ DARK ═══════════════════════════════════════════ The last blue light of the evening, held. Indigo-black room, a dark slate working surface, a MOONLIGHT lamp — pale steel-blue, the only cool lamp in the set — with a single warm gold kept back for stamps and status, so the room has one thing in it that is not blue. [dark theme 2/2] */ [data-palette="midnight"] { --canvas: #0B0F1D; --velvet: #171D34; --sheet: #1C2233; --p-shade: #070A12; --p-lit-mix: #CCD9EF; --ink: #E8EEF8; --body: #B9C6D9; --muted: #94A2B9; --a1: #8FAAD0; --a2: #D2A65E; --a3: #79B39A; --a1Text: #B0C5E3; --a2Text: #DEB878; --a3Text: #8FC3AC; --a1OnCanvas: #B7CCE9; --tint1: #293044; --tint2: #263140; --rule: #39435C; --ruleStrong: #4E5A76; --cta: #93B0D6; --ctaText: #0D1424; --onCanvas: #E9EFF9; --onCanvasBody: #C0CBDD; --onCanvasMuted: #8E9BB0; --logo: #B0C5E3; --eye: #B0C5E3; --logoSoft: #8FAAD0; --pupil: #0B0F1D; --cheek: #C98B8B; --glint: #EAF1FB; --spark: #DEB878; --stampInk: #DEB878; --warm: #C98A73; --warmDeep: #DFA98F; --warmText: #1A1410; --catL: .78; --catC: .12; --catText: #101624; } /* ── Shared material tokens (the six rooms above only carry colour) ──────── NOTE: these were lost once when the rooms were spliced in and the paper silently lost its fibre — tests/t_persona.mjs now asserts they exist. */ :root { --p-grain: url(patterns/grain-parlor.png); --p-press: 0 1px 0 rgba(255, 255, 255, .70), 0 -1px 0 rgba(66, 28, 18, .18); --p-hair: inset 0 0 0 1px color-mix(in oklab, var(--ink) 13%, transparent); --p-rad: 16px; --p-shadow: 0 1px 0 color-mix(in oklab, var(--ink) 6%, transparent), 0 10px 24px -14px color-mix(in oklab, var(--ink) 10%, transparent), 0 16px 42px -10px var(--boxGlow, transparent); } /* ── 3. The room itself ─────────────────────────────────────────────────── */ /* One lamp, top right; velvet nap; a vertical sheen. The doodle wallpaper is retired here — the room IS the wallpaper. */ :root { --wall: none; } .fl-root { background-color: var(--canvas) !important; background-image: radial-gradient(1100px 780px at 88% -12%, color-mix(in oklab, var(--a1) 30%, transparent) 0%, transparent 62%), radial-gradient(900px 700px at 8% 108%, color-mix(in oklab, var(--velvet, var(--canvas)) 90%, white 6%) 0%, transparent 58%), repeating-linear-gradient(90deg, rgba(255, 232, 205, .028) 0 1px, rgba(0, 0, 0, 0) 1px 5px), linear-gradient(168deg, var(--velvet, var(--canvas)) 0%, var(--canvas) 58%), var(--p-grain) !important; background-size: auto, auto, auto, auto, 128px 128px !important; background-repeat: no-repeat, no-repeat, repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, scroll, fixed, scroll !important; } /* text that sits directly on the velvet */ .fl-root > *:not([style*="var(--sheet)"]) .fl-logo, .fl-hero-logo { color: var(--onCanvas); } /* ── 4. The paper ───────────────────────────────────────────────────────── */ /* Anything the app paints with --sheet becomes lit stock: a warm gradient toward the lamp, real fibre, and a hairline instead of a hard border. */ [style*="background: var(--sheet)"], [style*="background-color: var(--sheet)"], .ui-card, .v2-loop, .v2-com__card, .v2-ph, .card { background-image: var(--p-paper-lit), var(--p-grain) !important; background-size: auto, 128px 128px !important; background-blend-mode: normal, multiply !important; } /* the main working panel: paper on velvet, lit from the top right */ [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { background-image: radial-gradient(1200px 820px at 92% -6%, color-mix(in oklab, var(--sheet) 84%, white) 0%, transparent 58%), var(--p-paper-lit), var(--p-grain) !important; background-size: auto, auto, 128px 128px !important; background-blend-mode: normal, normal, multiply !important; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), var(--p-hair) !important; border-radius: 18px !important; } /* cards keep the box-glow law, but the glow is now lamplight under the sheet */ .ui-card, .v2-com__card, .v2-ph, .card, [style*="border-radius: 12px"][style*="border: 1px solid var(--rule)"]:not(input):not(textarea):not(select):not(button):not(.fl-btn):not([style*="pointer-events: none"]):not([style*="border-left:"]), [style*="border-radius: 14px"][style*="border: 1px solid var(--rule)"]:not(input):not(textarea):not(select):not(button):not(.fl-btn):not([style*="pointer-events: none"]):not([style*="border-left:"]), [style*="border-radius: 16px"][style*="border: 1px solid var(--rule)"]:not(input):not(textarea):not(select):not(button):not(.fl-btn):not([style*="pointer-events: none"]):not([style*="border-left:"]), [style*="border-radius: 16px"][style*="border: 1.5px solid"]:not(input):not(textarea):not(select):not(button):not(.fl-btn):not([style*="pointer-events: none"]):not([style*="border-left:"]):not([style*="box-shadow: inset"]) { border-radius: var(--p-rad) !important; border-color: transparent !important; box-shadow: var(--p-hair), 0 2px 1px -1px rgba(74, 42, 20, .10), 0 16px 26px -20px rgba(48, 22, 10, .85), 0 16px 42px -10px var(--boxGlow, transparent) !important; background-color: color-mix(in oklab, var(--sheet) 93%, var(--p-shade)) !important; } /* ── 5. Ink: letterpress on paper, lamplight on velvet ──────────────────── */ [style*="font-family: Fraunces"], [style*="font-family:Fraunces"], .v2-sent, .v2-lead, .fl-hero-line { text-shadow: var(--p-press); } /* the biggest titles carry a whisper of ember-rose ink, one plate off */ [style*='font-size: 26px; font-variation-settings: "opsz" 48'], [style*='font-size: 28px; font-variation-settings: "opsz" 48'] { text-shadow: var(--p-press), 1.6px 1.6px 0 color-mix(in oklab, var(--a2) 42%, transparent); } /* the rotating hero line is the voice: Instrument Serif italic, not display */ .fl-hero-line { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(26px, 3.4vw, 38px) !important; line-height: 1.24 !important; letter-spacing: -.005em !important; color: var(--a1Text) !important; } /* kickers and labels: Karla, wide, quiet — never a terminal tag */ [style*='"IBM Plex Mono"'][style*="letter-spacing"], .kicker, .stamp, [style*="'IBM Plex Mono'"][style*="letter-spacing"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: .2em !important; } /* Karla's 400 sets lighter than Public Sans' — one notch up for prose only */ :is([style^="font: 400 12"], [style*="; font: 400 12"], [style^="font: 400 13"], [style*="; font: 400 13"], [style^="font: 400 14"], [style*="; font: 400 14"], [style^="font: 400 11"], [style*="; font: 400 11"]):not(input):not(textarea):not(select) { font-weight: 500 !important; } /* ── 6. The lamp: brass controls ────────────────────────────────────────── */ button.fl-btn[style*="background: var(--a1)"], button.fl-btn[style*="background: var(--cta)"], button.fl-btn[style*="background:var(--a1)"] { background-image: linear-gradient(176deg, color-mix(in oklab, var(--cta) 78%, white) 0%, var(--cta) 56%, color-mix(in oklab, var(--cta) 76%, black) 100%) !important; box-shadow: 0 1px 0 rgba(255, 240, 214, .55) inset, 0 -2px 0 rgba(84, 48, 8, .30) inset, 0 14px 26px -14px color-mix(in oklab, var(--cta) 85%, transparent) !important; border-radius: 13px !important; } /* .fl-primary (auth modal Continue, etc.) pairs --ctaText with an --a1 fill in the bundle; in three rooms that is dark ink on mid brass (3.85:1). It is a primary control: the same --cta lamp as every other primary. */ button.fl-primary { background: var(--cta) !important; background-image: linear-gradient(176deg, color-mix(in oklab, var(--cta) 78%, white) 0%, var(--cta) 56%, color-mix(in oklab, var(--cta) 76%, black) 100%) !important; color: var(--ctaText) !important; box-shadow: 0 1px 0 rgba(255, 240, 214, .55) inset, 0 -2px 0 rgba(84, 48, 8, .30) inset, 0 14px 26px -14px color-mix(in oklab, var(--cta) 85%, transparent) !important; } button.fl-btn { border-radius: 13px !important; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { button.fl-btn[style*="background: var(--a1)"]:hover:not(:disabled), button.fl-btn[style*="background: var(--cta)"]:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); } button.fl-btn:active:not(:disabled) { transform: translateY(0) scale(.99); } } /* the round submit is a brass knob */ .v2-go, [style*="border-radius: 50%"][style*="background: var(--a1)"] { background-image: radial-gradient(120% 120% at 32% 22%, color-mix(in oklab, var(--cta) 72%, white), var(--cta) 58%, color-mix(in oklab, var(--cta) 70%, black)) !important; box-shadow: 0 1px 0 rgba(255, 244, 220, .6) inset, 0 10px 20px -10px rgba(0, 0, 0, .85) !important; } /* the big ask field is a brass tray */ .v2-ask, [style*="border-radius: 999px"][style*="border: 1.5px solid"][style*="background: var(--sheet)"] { background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 90%, white), color-mix(in oklab, var(--sheet) 86%, var(--p-shade))) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 -1px 0 rgba(120, 74, 40, .16) inset, 0 0 0 1.5px color-mix(in oklab, var(--a1) 52%, transparent), 0 26px 44px -26px rgba(0, 0, 0, .8) !important; border-color: transparent !important; } /* the hero's ask field is a pill and stays one — inner and outer agree */ .v2-ask input, .v2-ask[data-sec="hero-ask"] input { border-radius: 999px !important; } .v2-ask, .v2-ask[data-sec="hero-ask"] { border-radius: 999px; } /* ── 7. Inputs, chips, focus ────────────────────────────────────────────── */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.v2-ask input), textarea, select { border-radius: 13px !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 92%, white), color-mix(in oklab, var(--sheet) 94%, var(--p-shade))) !important; } :where(input, textarea, select, button, a, [tabindex]):focus-visible { outline: 3px solid color-mix(in oklab, var(--a1) 78%, transparent) !important; outline-offset: 2px !important; } ::selection { background: color-mix(in oklab, var(--a1) 34%, var(--sheet)); color: var(--ink); } .ui-chip, [style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"]:not(button):not(.fl-btn) { box-shadow: inset 0 0 0 1.3px color-mix(in oklab, var(--ink) 18%, transparent) !important; border-color: transparent !important; } /* ── 8. Rules and dividers: a brass hairline, not a grey line ───────────── */ [style*="border-top: 1px solid var(--rule)"], hr { border-top-color: transparent !important; background-image: linear-gradient(90deg, color-mix(in oklab, var(--a1) 55%, transparent) 0%, color-mix(in oklab, var(--a1) 22%, transparent) 58%, transparent 100%); background-size: 100% 1px; background-repeat: no-repeat; background-position: left top; } /* ── 9. On the velvet: the bottom bar and the utility rail ──────────────── */ [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] { background: color-mix(in oklab, var(--velvet, var(--canvas)) 82%, transparent) !important; border-top: 1px solid color-mix(in oklab, var(--a1) 30%, transparent) !important; backdrop-filter: blur(16px) saturate(1.1) !important; } /* the bar is upholstery: the items sit ON it, they are not paper chips stuck to it. Transparent + cream reads at 8:1; the active item is the lit one. */ [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--onCanvasBody) !important; } [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn svg { color: var(--onCanvasBody) !important; } [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"], [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"] { background-image: linear-gradient(176deg, color-mix(in oklab, var(--cta) 78%, white), var(--cta) 60%) !important; color: var(--ctaText) !important; box-shadow: 0 1px 0 rgba(255, 240, 214, .5) inset, 0 10px 20px -12px color-mix(in oklab, var(--cta) 90%, transparent) !important; } [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"] svg, [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"] svg { color: var(--ctaText) !important; } /* ── 10. Motion: the lamp comes up once, then holds ─────────────────────── */ @keyframes p-lamp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { animation: p-lamp .5s cubic-bezier(.2, .7, .3, 1) backwards; } } /* ── 11. Scrollbars and small print ─────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--a1) 45%, var(--rule)) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--a1) 45%, var(--rule)); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } /* ── 12. LEGIBILITY LAW (found by tests/design-review.py, 2026-08-16) ──────── Three systemic failures, fixed at the source rather than case by case: a) The app paints nav labels and small print with --onCanvas* because it assumes they sit on the dark field. In this design those chips are PAPER, so cream-on-cream rendered at 1.28:1. On paper, on-canvas ink becomes real ink. b) --a1 is used as a TEXT colour inline in dozens of places. Brass is a LAMP, not an ink: at text sizes it must fall back to its AA-safe twin. c) --glint / --logoSoft are highlights meant for a dark ground; on paper the wordmark's eyes disappeared (1.11:1). They get an ink-side value. Every rule here is measured, not eyeballed — re-run the review after edits. */ [style*="color: var(--onCanvas)"], [style*="color:var(--onCanvas)"], [style*="color: var(--onCanvasBody)"], [style*="color:var(--onCanvasBody)"], [style*="color: var(--onCanvasMuted)"], [style*="color:var(--onCanvasMuted)"] { color: var(--body) !important; } /* …but NOT on the velvet band (account/profile header): there the surface IS the canvas, so the onCanvas inks are the right inks (measured 1.5:1 as body ink on velvet, 2026-08-17). */ .fl-root [style*="background-color: var(--brand"] [style*="color: var(--onCanvas)"], .fl-root [style*="background-color: var(--brand"] [style*="color:var(--onCanvas)"] { color: var(--onCanvas) !important; } .fl-root [style*="background-color: var(--brand"] [style*="color: var(--onCanvasBody)"], .fl-root [style*="background-color: var(--brand"] [style*="color:var(--onCanvasBody)"] { color: var(--onCanvasBody) !important; } .fl-root [style*="background-color: var(--brand"] [style*="color: var(--onCanvasMuted)"], .fl-root [style*="background-color: var(--brand"] [style*="color:var(--onCanvasMuted)"] { color: var(--onCanvasBody) !important; } /* the nav rail's icons inherit that colour as currentColor — follow it */ [style*="var(--onCanvasBody)"] svg [stroke="currentColor"], [style*="var(--onCanvasBody)"] svg { color: var(--body) !important; } [style*="background: var(--sheet)"] [style*="color: var(--onCanvas)"], [style*="background: var(--sheet)"] [style*="color: var(--onCanvasBody)"] { color: var(--ink) !important; } /* brass is a lamp, not an ink */ [style*="color: var(--a1)"]:not(button) { color: var(--a1Text) !important; } [style*="color:var(--a1)"]:not(button) { color: var(--a1Text) !important; } [style*="color: var(--a2)"]:not(button) { color: var(--a2Text) !important; } [style*="color: var(--a3)"]:not(button) { color: var(--a3Text) !important; } /* the wordmark and the feeling faces must read on paper */ .fl-logo, .fl-hero-logo, .v2-ob__face, .fl-cere__face, .fl-ab-fig { color: var(--a1Text); } /* placeholder and the typed topic are content, not decoration */ .fl-blankin, .fl-pencil-in, input, textarea { color: var(--ink) !important; } .fl-blankin::placeholder, input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--muted) 88%, var(--ink)) !important; opacity: 1; } /* ── 13. The explainer column is content, so it gets paper ───────────────── The respondent / survey / recipient previews put their explainer column (.fl-pv-panel) straight onto the field. That was fine when the field was pale; on velvet it measured 1.03:1 — invisible. Content belongs on paper. (The class is .fl-pv-panel — the app hides it on small screens with display:none!important, which this must not fight.) Found by the review. */ .fl-pv-panel:not([style*="display: none"]) { background-color: var(--sheet); background-image: var(--p-paper-lit), var(--p-grain); background-size: auto, 128px 128px; background-blend-mode: normal, multiply; border-radius: var(--p-rad); padding: 22px 20px; box-shadow: var(--p-hair), 0 18px 34px -26px rgba(0, 0, 0, .8), 0 16px 42px -10px var(--boxGlow, transparent); } .fl-pv-title { color: var(--ink) !important; } .fl-pv-sub, .fl-pv-cs { color: var(--body) !important; } .fl-pv-ct { color: var(--ink) !important; } .fl-pv-klabel { color: var(--a1Text) !important; } /* a ghost button's brass label sits on paper: use the AA-safe twin */ .fl-btn[style*="color: var(--a1)"], .fl-btn[style*="color:var(--a1)"] { color: var(--a1Text) !important; } /* --ctaText is the ink for text ON a lit button. Anywhere else it is paper on paper (measured 1.03:1 in the Rose Room). Ink by default; cream only inside a lit control. */ [stroke="var(--ctaText)"] { stroke: var(--ink); } [fill="var(--ctaText)"] { fill: var(--ink); } button[style*="background: var(--a1)"] [stroke="var(--ctaText)"], button[style*="background: var(--cta)"] [stroke="var(--ctaText)"], button[style*="background: var(--a1)"] [fill="var(--ctaText)"], button[style*="background: var(--cta)"] [fill="var(--ctaText)"] { stroke: var(--ctaText); fill: var(--ctaText); } /* ── 14. palettes.css lightens --warm text for its two DARK-sheet palettes. In this design ember and midnight are rooms with LIGHT paper, so that override became 1.42:1 on paper and 2.5:1 on a rust badge. Put it back on the ink side, and make sure any label on a warm fill uses the warm ink. */ [data-palette="ember"] [style*="color:var(--warm"], [data-palette="ember"] [style*="color: var(--warm"], [data-palette="midnight"] [style*="color:var(--warm"], [data-palette="midnight"] [style*="color: var(--warm"] { color: var(--a2Text) !important; } [style*="background: var(--warm)"], [style*="background:var(--warm)"], [style*="background: var(--warmDeep)"], [style*="background:var(--warmDeep)"] { color: var(--warmText) !important; } [style*="background: var(--warm)"] *, [style*="background:var(--warm)"] *, [style*="background: var(--warmDeep)"] *, [style*="background:var(--warmDeep)"] * { color: var(--warmText) !important; } /* the drawn faces are characters, not watermarks — they must read on paper */ /* [stripped by garden/core-strip.json] */ /* ── 15. palettes.css repaints the wordmark and the drawn faces pale for its two dark-sheet palettes. Those palettes are now rooms with LIGHT paper, so the mark measured 1.2:1. Take the ink side back for ember and midnight. */ [data-palette="ember"] .fl-logo, [data-palette="ember"] .fl-hero-logo, [data-palette="ember"] .fl-cere__face, [data-palette="ember"] .v2-ob__face, [data-palette="ember"] .fl-ab-fig, [data-palette="midnight"] .fl-logo, [data-palette="midnight"] .fl-hero-logo, [data-palette="midnight"] .fl-cere__face, [data-palette="midnight"] .v2-ob__face, [data-palette="midnight"] .fl-ab-fig { color: var(--a1Text) !important; } /* the About figures are drawn on a tint disc — the strokes must be ink, and the disc must stay lighter than them in every room */ .fl-ab-fig, .fl-ab-figL { background: color-mix(in oklab, var(--sheet) 88%, var(--a1)) !important; border-color: color-mix(in oklab, var(--a1) 34%, transparent) !important; } /* every lit control carries ink that clears AA on its own fill, in every room */ button.fl-btn[style*="background: var(--a1)"], button.fl-btn[style*="background:var(--a1)"], button.fl-btn[style*="background: var(--cta)"], button.fl-btn[style*="background:var(--cta)"] { color: var(--ctaText) !important; background-color: var(--cta) !important; } /* the unread dot / small status marks in the Blue Hour were painted with the palette's pale rose; on paper that is 1.5:1. Status marks use warm ink. */ /* ══════════════════════════════════════════════════════════════════════ THE PARLOR · CRAFT — from the 52-site study (see built-inventory) ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ frag-craft.css — THE CRAFT LAYER Buttons · inputs · chips & badges · the paper itself · motion. Loads AFTER parlor.css. Presentation only: no copy, no behaviour, no new UI. Every colour is a token or a color-mix of tokens, so all six rooms follow. Contrast for every ink/ground pair below was COMPUTED in all six rooms (see the numbers in the comments; floor 4.5:1 body / 3:1 non-text). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. THE MOTION CONTRACT ───────────────────────────────────────────────── Duration by intent, one easing family. Nothing in this file invents a number outside this set. (Emil Kowalski's rules: proportional, interruptible, hover is a transition — never a keyframe.) */ .fl-root { --p-t-press: 70ms; /* pointer-down: instant compression */ --p-t-hover: 180ms; /* pointer state: reversible mid-flight */ --p-t-page: 720ms; /* a whole sheet */ --p-e-out: cubic-bezier(.2, .7, .3, 1); --p-e-inout: cubic-bezier(.65, 0, .35, 1); /* the ink is PRESSED INTO the paper, not embossed on top of it. A white top-highlight + dark bottom (the old --p-press) reads as a plastic bevel at text sizes and is a big part of why the last pass looked like a recolour. This is the ink-spread of a letterpress plate biting damp stock: it is drawn in currentColor, so it can only ever RAISE contrast, in every room, at every size, with no palette variants. */ --p-press: .012em .012em 0 currentColor, -.008em .008em 0 currentColor, .008em -.008em 0 currentColor; /* the brass face. Shallow on purpose: --ctaText must clear 4.5:1 on EVERY stop, and a deep gradient breaks it (the shipped 76%-black stop measures 2.59:1 in the Hearth). The depth lives in the plinth below the face, where no text sits. Measured on these stops, --ctaText scores: hi 6.98 / 6.79 / 5.70 / 5.68 / 5.90 mid 6.44 / 6.22 / 5.15 / 5.12 / 5.32 lo 5.79 / 5.60 / 4.65 / 4.63 / 4.81 (parlor·library·conservatory·hearth·blue hour) */ --p-face-hi: color-mix(in oklab, var(--cta) 93%, white); --p-face-lo: color-mix(in oklab, var(--cta) 96%, black); --p-plinth: color-mix(in oklab, var(--cta) 50%, black); /* paper stocks, all ≤8% off --sheet so the ink budget never moves far */ --p-key-hi: color-mix(in oklab, var(--sheet) 97%, white); --p-key-lo: color-mix(in oklab, var(--sheet) 92%, var(--p-shade)); --p-well-top: color-mix(in oklab, var(--sheet) 93%, var(--p-shade)); --p-well-bot: color-mix(in oklab, var(--sheet) 99%, white); /* THE QUIET INK. --muted is the app's colour for secondary labels on controls, and it is not safe there: measured against the darkest stop of parlor's own --p-paper-lit it is 4.37 (Blue Hour) and 4.40 (Conservatory), and on a card ground 4.50 / 4.53 — under the 4.5 floor at the 10.5–12.5px sizes these labels use. One step toward the ink fixes it everywhere (5.73–7.02) while staying clearly quieter than --body. */ --p-quiet: color-mix(in oklab, var(--muted) 78%, var(--ink)); } /* THE ROSE ROOM runs its brass dark, because it is the one room whose --ctaText is cream (#FFF1E6) instead of near-black: a light face drops the label to 3.51:1, which is exactly what parlor's bottom-bar gradient does today. Measured on the live token (#9E4630): hi 6.95, lo 7.89 — and still 5.07 / 5.88 if --cta ever reverts to the value parlor declares (#B85F45). */ [data-palette="blush-study"] .fl-root { --p-face-hi: color-mix(in oklab, var(--cta) 90%, black); --p-face-lo: color-mix(in oklab, var(--cta) 82%, black); --p-plinth: color-mix(in oklab, var(--cta) 46%, black); } /* ═══ 1. THE PAPER ════════════════════════════════════════════════════════ */ /* 1a. THE DECKLE — the working sheet is TORN along its top edge, not cut. Three rows of bites at coprime periods (23 / 13 / 7px) and three different depths (5.4 / 3.2 / 1.9px): because the periods share no factor, the profile does not repeat inside any width the eye can hold, so it reads as fibre rather than as a scalloped doily. HOW IT IS DRAWN (2026-08-17): NOT as a mask on the sheet. The app renders every fixed overlay — onboarding sheet + scrim, confirms, toasts, the ⌘K palette, the share dialogs — INSIDE this element, and a mask on it (like a filter, or a transform left behind by a filling animation) turns it into a stacking context / containing block for all of them: sheets centred on a 2000px paper instead of the viewport, scrims that stop at the rail, dialogs under the phone tab bar. So the sheet keeps its own paint and stays a plain positioned box, and the tear is a 6px strip of ROOM laid over its top edge on ::before: the strip is masked to the UNION of the bites (the inverse of the old intersect-of-keeps), and it is painted with the room's own fixed layers, so a bite shows exactly what the velvet behind it shows. */ .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { --bite-a: radial-gradient(circle at 50% 0%, #000 4.6px, transparent 5.4px); --bite-b: radial-gradient(circle at 50% 0%, #000 2.6px, transparent 3.2px); --bite-c: radial-gradient(circle at 50% 0%, #000 1.4px, transparent 1.9px); position: relative; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; /* the hairline and the shade along the free bottom edge. No outer shadow: the old drop-shadow was clipped away by the mask, so the sheet never cast one, and any upward bleed would darken the wall just above the tear and make the bites read a shade off. */ box-shadow: var(--p-hair), inset 0 -14px 22px -20px color-mix(in oklab, var(--p-shade) 90%, var(--ink)) !important; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 5; pointer-events: none; /* THE ROOM, RESTATED. Every layer of the room — the nap (soft-light), the bloom (color-dodge, its opacity folded into the layer's alpha), the lamp, the throw, the bounce, the sheen, the vignette, the velvet and the grain — in the same order and blend as §1 THE ROOM paints them, all viewport- fixed, so a bite shows exactly the wall behind it. Keep this list in step with .fl-root / .fl-root::before / .fl-root::after. */ background-color: var(--canvas); background-image: repeating-linear-gradient(103deg, rgba(255, 255, 255, .085) 0 1px, transparent 1px 3px), repeating-linear-gradient(13deg, rgba(0, 0, 0, .090) 0 1px, transparent 1px 4px), radial-gradient(880px 620px at 89% -10%, color-mix(in oklab, var(--a1) calc(46% * var(--p-bloom, .34)), transparent) 0%, transparent 60%), radial-gradient(760px 540px at 89% -8%, color-mix(in oklab, var(--a1) 56%, transparent) 0%, color-mix(in oklab, var(--a1) 22%, transparent) 34%, transparent 70%), radial-gradient(1600px 1150px at 94% -22%, color-mix(in oklab, var(--a1) 12%, transparent) 0%, color-mix(in oklab, var(--a1) 4%, transparent) 46%, transparent 74%), radial-gradient(880px 600px at 4% 112%, color-mix(in oklab, var(--velvet, var(--canvas)) 84%, white 12%) 0%, transparent 60%), linear-gradient(104deg, transparent 0%, rgba(255, 255, 255, .030) 34%, rgba(255, 255, 255, .046) 47%, rgba(255, 255, 255, .012) 60%, transparent 82%), radial-gradient(126% 104% at 68% 16%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .16) 46%, rgba(0, 0, 0, .38) 74%, rgba(0, 0, 0, .60) 100%), linear-gradient(168deg, var(--velvet, var(--canvas)) 0%, var(--canvas) 60%), var(--p-grain); background-blend-mode: soft-light, soft-light, var(--p-bloom-blend, color-dodge), normal, normal, normal, normal, normal, normal, normal; background-size: auto, auto, auto, auto, auto, auto, auto, auto, auto, 128px 128px; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; background-attachment: fixed; -webkit-mask-image: var(--bite-a), var(--bite-b), var(--bite-c); -webkit-mask-size: 23px 100%, 13px 100%, 7px 100%; -webkit-mask-position: 7px 0, 3px 0, 0 0; -webkit-mask-repeat: repeat-x, repeat-x, repeat-x; mask-image: var(--bite-a), var(--bite-b), var(--bite-c); mask-size: 23px 100%, 13px 100%, 7px 100%; mask-position: 7px 0, 3px 0, 0 0; mask-repeat: repeat-x, repeat-x, repeat-x; } /* the two rooms that run their bloom differently (see .fl-root::before) */ [data-palette="ember"] .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::before { --p-bloom: .62; --p-bloom-blend: overlay; } [data-palette="blush-study"] .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::before { --p-bloom: .28; } /* 1b. THE STAGE — on the "what others see" screens the app fills the sheet edge to edge with its own canvas-coloured stage (background-color: var(--canvas); background-image: var(--wall)). That is not paper; with the wallpaper retired it was a flat dark slab with a torn top edge. The stage goes clear so the room itself shows through, and the sheet dressing (paint, tear, hairline, gutter, curl, desk shadow) steps aside. */ .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea):has(> [style*="background-color: var(--canvas)"][style*="background-image: var(--wall)"]) { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea):has(> [style*="background-color: var(--canvas)"][style*="background-image: var(--wall)"])::before, .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea):has(> [style*="background-color: var(--canvas)"][style*="background-image: var(--wall)"])::after { display: none; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) > [style*="background-color: var(--canvas)"][style*="background-image: var(--wall)"] { background-color: transparent !important; background-image: none !important; } /* 1c. THE GUTTER AND THE CURL — where the sheet meets the desk it darkens along the bound edge, and its free bottom edge lifts a hair off the velvet. Painted on one overlay so the type underneath keeps its ground. */ .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background-image: /* the lamp glint, parked off-sheet until arrival sweeps it across */ linear-gradient(100deg, transparent 0 36%, color-mix(in oklab, var(--sheet) 40%, white) 50%, transparent 64% 100%), /* the gutter: a bound edge, shaded toward the spine */ linear-gradient(90deg, color-mix(in oklab, var(--p-shade) 42%, transparent) 0, color-mix(in oklab, var(--p-shade) 12%, transparent) 10px, transparent 32px), /* the curl: the free edge lifting off the desk */ linear-gradient(0deg, color-mix(in oklab, var(--p-shade) 34%, transparent) 0, color-mix(in oklab, var(--p-shade) 7%, transparent) 13px, transparent 36px), /* laid lines — the stock's own fibre, hue-neutral so no room can break */ repeating-linear-gradient(2deg, rgba(0, 0, 0, .017) 0 1px, transparent 1px 3px); background-size: 240% 100%, 100% 100%, 100% 100%, 100% 100%; background-position: 220% 0, 0 0, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, repeat; mix-blend-mode: multiply; } /* ═══ 2. BUTTONS ══════════════════════════════════════════════════════════ */ /* Shared physics: no iOS grey flash (we have our own press), no sticky hover on touch, and a transition list that is reversible mid-flight. */ .fl-root button.fl-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--p-t-hover) var(--p-e-out), box-shadow var(--p-t-hover) var(--p-e-out), background-color var(--p-t-hover) var(--p-e-out), color var(--p-t-hover) var(--p-e-out), filter var(--p-t-hover) var(--p-e-out) !important; } /* 2a. PRIMARY — brass, standing on a plinth. The face is shallow (see the token block); all the depth is the 3px plinth underneath, which is what the button travels down INTO when pressed. */ .fl-root button.fl-btn[style*="background: var(--a1)"], .fl-root button.fl-btn[style*="background: var(--cta)"], .fl-root button.fl-btn[style*="background:var(--a1)"], /* the fixed bottom bar's primary, which parlor §9 repaints with a mix(cta 78%, white) face — 3.51:1 against cream --ctaText in the Rose Room. Same law, same face, everywhere the brass appears. */ .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"], .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"] { /* two layers: a sheen parked off the right edge, and the face beneath it. The sheen is made of --cta mixed toward white, so it is brass catching the lamp — never a white gloss, and never a new hue. */ background-image: linear-gradient(104deg, transparent 0 38%, color-mix(in oklab, var(--cta) 62%, white) 50%, transparent 62% 100%), linear-gradient(178deg, var(--p-face-hi) 0%, var(--cta) 48%, var(--p-face-lo) 100%) !important; background-size: 230% 100%, 100% 100% !important; background-position: 200% 0, 0 0 !important; background-repeat: no-repeat !important; box-shadow: inset 0 1px 0 color-mix(in oklab, white 46%, transparent), inset 0 0 0 1px color-mix(in oklab, black 16%, transparent), inset 0 -2px 0 color-mix(in oklab, black 18%, transparent), 0 3px 0 0 var(--p-plinth), 0 12px 22px -12px color-mix(in oklab, var(--cta) 80%, transparent) !important; } /* the round submit is the same object turned on a lathe */ .fl-root .v2-go, .fl-root [style*="border-radius: 50%"][style*="background: var(--a1)"] { background-image: radial-gradient(120% 120% at 34% 20%, var(--p-face-hi), var(--cta) 56%, var(--p-face-lo)) !important; box-shadow: inset 0 1px 0 color-mix(in oklab, white 50%, transparent), inset 0 0 0 1px color-mix(in oklab, black 16%, transparent), 0 3px 0 0 var(--p-plinth), 0 14px 22px -12px color-mix(in oklab, var(--cta) 80%, transparent) !important; } /* 2b. SECONDARY — a key cut from the same stock as the sheet. Lit from the top (the room's one lamp), a hard 1px bottom edge, and a hair- line ring instead of a border, so five of them in a row read as five objects rather than five outlines. Inks measured on the darkest stop: --body 7.5–8.7 · --ink 13.3–14.3 · --a1Text 4.7–5.6 · --warmDeep 5.2–6.1. */ .fl-root button.fl-btn[style*="background: var(--sheet)"], .fl-root button.fl-btn[style*="background: var(--tint1)"], .fl-root button.fl-btn[style*="background: var(--tint2)"] { background-image: linear-gradient(180deg, var(--p-key-hi) 0%, var(--p-key-lo) 100%) !important; border-color: transparent !important; box-shadow: inset 0 1px 0 color-mix(in oklab, white 80%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent), 0 1px 0 color-mix(in oklab, var(--ink) 18%, transparent), 0 3px 5px -3px color-mix(in oklab, var(--ink) 40%, transparent) !important; } /* every --muted label on a control steps to the quiet ink — see the token */ .fl-root button.fl-btn[style*="color: var(--muted)"] { color: var(--p-quiet) !important; } /* 2c. GHOST — no ground at rest, so its --muted label keeps plain --sheet underneath (4.68–5.46, AA). On hover it does not get a box: the ink darkens to --body and a brass hairline draws in under the label. */ .fl-root button.fl-btn[style*="background: none"], .fl-root button.fl-btn[style*="background: transparent"] { background-image: linear-gradient(color-mix(in oklab, var(--a1Text) 90%, transparent), color-mix(in oklab, var(--a1Text) 90%, transparent)) !important; background-size: 0% 1.5px !important; background-position: left calc(100% - 3px) !important; background-repeat: no-repeat !important; transition: background-size var(--p-t-hover) var(--p-e-out), color var(--p-t-hover) var(--p-e-out), transform var(--p-t-press) var(--p-e-out) !important; } /* 2d. DESTRUCTIVE — warm ink, never a red fill. Filled warm badges get their ground darkened to --warmDeep, where --warmText measures 5.85–7.13 (on raw --warm it was 4.04–4.13 — under AA in every room). */ .fl-root button.fl-btn[style*="color: var(--warmDeep)"], .fl-root button.fl-btn[style*="color: var(--warm)"] { color: var(--warmDeep) !important; } .fl-root [style*="background: var(--warm)"][style*="border-radius: 999px"], .fl-root button.fl-btn[style*="background: var(--warm)"] { background-color: var(--warmDeep) !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--warmDeep) 90%, white) 0%, color-mix(in oklab, var(--warmDeep) 96%, black) 100%) !important; box-shadow: inset 0 1px 0 color-mix(in oklab, white 30%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--ink) 55%, transparent) !important; } /* 2e. DISABLED — unlit, not merely faded. The plinth collapses (the object is resting flat on the desk) and the brass loses its bloom. A disabled ghost gets nothing at all: no ring, no ground, no travel. */ .fl-root button.fl-btn:disabled, .fl-root button.fl-btn[style*="opacity: 0.5"] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent) !important; filter: saturate(.4); transform: none !important; } .fl-root button.fl-btn[style*="cursor: default"][style*="background: none"], .fl-root button.fl-btn[style*="cursor: default"][style*="background: transparent"], .fl-root button.fl-btn:disabled[style*="background: none"], .fl-root button.fl-btn:disabled[style*="background: transparent"] { box-shadow: none !important; filter: none; background-size: 0% 1.5px !important; } /* 2f. THE PRESS — real objects compress instantly and rebound slowly. 70ms going down, 180ms coming back, declared only inside :active. */ @media (prefers-reduced-motion: no-preference) { @media (hover: hover) { /* the sweep: a light crosses the brass once, over 620ms. It is felt more than seen — the eye registers that the metal moved under the lamp. */ .fl-root button.fl-btn[style*="background: var(--a1)"], .fl-root button.fl-btn[style*="background: var(--cta)"] { transition: transform var(--p-t-hover) var(--p-e-out), box-shadow var(--p-t-hover) var(--p-e-out), filter var(--p-t-hover) var(--p-e-out), background-position 620ms var(--p-e-inout) !important; } .fl-root button.fl-btn[style*="background: var(--a1)"]:hover:not(:disabled), .fl-root button.fl-btn[style*="background: var(--cta)"]:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); background-position: -110% 0, 0 0 !important; } .fl-root .v2-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); } .fl-root button.fl-btn[style*="background: var(--sheet)"]:hover:not(:disabled), .fl-root button.fl-btn[style*="background: var(--tint1)"]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px 0 color-mix(in oklab, white 90%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--a1) 34%, transparent), 0 2px 0 color-mix(in oklab, var(--ink) 18%, transparent), 0 7px 12px -6px color-mix(in oklab, var(--ink) 42%, transparent) !important; } .fl-root button.fl-btn[style*="background: none"]:hover:not(:disabled), .fl-root button.fl-btn[style*="background: transparent"]:hover:not(:disabled) { background-size: 100% 1.5px !important; color: var(--body) !important; } } .fl-root button.fl-btn:active:not(:disabled), .fl-root .v2-go:active { transform: translateY(3px); transition-duration: var(--p-t-press) !important; } .fl-root button.fl-btn[style*="background: var(--a1)"]:active:not(:disabled), .fl-root button.fl-btn[style*="background: var(--cta)"]:active:not(:disabled), .fl-root .v2-go:active:not(:disabled) { box-shadow: inset 0 2px 3px color-mix(in oklab, black 26%, transparent), inset 0 0 0 1px color-mix(in oklab, black 18%, transparent), 0 0 0 0 var(--p-plinth), 0 4px 8px -8px color-mix(in oklab, var(--cta) 70%, transparent) !important; } .fl-root button.fl-btn[style*="background: var(--sheet)"]:active:not(:disabled), .fl-root button.fl-btn[style*="background: var(--tint1)"]:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 2px 3px color-mix(in oklab, var(--ink) 22%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 16%, transparent) !important; } } /* a phone must never be left in a hover state after a tap — but the language rows keep the hairline as their CURRENT-language marker, so the ghost rule must not underline all five codes there */ @media (hover: none) { .fl-root button.fl-btn[style*="background: none"]:not(.fl-foot-lang *):not(.fl-side-lang *), .fl-root button.fl-btn[style*="background: transparent"]:not(.fl-foot-lang *):not(.fl-side-lang *) { background-size: 100% 1.5px !important; } .fl-root .fl-foot-lang button.fl-btn[style*="text-decoration: underline"] { background-size: 100% 1.5px !important; } } /* ═══ 3. INPUTS — paper wells, inked focus, pencil placeholder ════════════ */ /* A boxed input puts a wall around the thing you are asking someone to say. These are wells pressed into the sheet: darker under the top lip, lifting to near-white at the bottom, with a hairline that is a shadow, not a border. --ink on the darkest stop measures 13.0–13.9 in the six rooms. */ .fl-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .fl-root textarea, .fl-root select { /* the colour is the fallback ground; the gradient is the pressed light */ background-color: var(--p-well-bot) !important; border-color: transparent !important; box-shadow: inset 0 2px 3px -1px color-mix(in oklab, var(--ink) 22%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent), 0 1px 0 color-mix(in oklab, white 70%, transparent) !important; transition: box-shadow var(--p-t-hover) var(--p-e-out), background-color var(--p-t-hover) var(--p-e-out) !important; } /* The topic fields carry the pencil mark as a background-image (with an !important background-size of 17px). Painting a gradient there would both delete the pencil — a UI element, not mine to remove — and get tiled to 17px. Those two fields take their ground from background-color alone; every other field gets the lit gradient. */ .fl-root input:not(.fl-pencil-in):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .fl-root textarea:not(.fl-pencil-in), .fl-root select { background-image: linear-gradient(180deg, var(--p-well-top) 0%, var(--p-well-bot) 62%, var(--p-well-bot) 100%) !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; } /* the topic fields carry the app's 2px brass underline inline — keep the gesture, make it the well's inked lip rather than a border */ .fl-root .fl-blankin, .fl-root .fl-pencil-in { border-bottom-color: transparent !important; background-color: var(--p-well-top) !important; } .fl-root .fl-blankin, .fl-root .fl-pencil-in, .fl-root [style*="border-bottom: 2px solid var(--a1)"] { box-shadow: inset 0 2px 3px -1px color-mix(in oklab, var(--ink) 20%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 13%, transparent), inset 0 -2.5px 0 color-mix(in oklab, var(--a1Text) 62%, transparent) !important; } /* focus: the lamp is brought to the page. The lip inks up to full --a1Text (4.7–5.6:1 against the well — well past the 3:1 non-text floor) and a brass bloom spreads onto the sheet around the field. The GROUND does not move: warming it would have dropped the brass topic ink to 3.99:1 in the Parlor. The accessible :focus-visible ring still fires on top of this. */ .fl-root input:focus, .fl-root textarea:focus, .fl-root select:focus { box-shadow: inset 0 2px 3px -1px color-mix(in oklab, var(--ink) 16%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--a1Text) 45%, transparent), inset 0 -2.5px 0 var(--a1Text), 0 0 0 3px color-mix(in oklab, var(--a1) 15%, transparent), 0 6px 16px -8px color-mix(in oklab, var(--a1) 55%, transparent) !important; } /* the placeholder is pencil: the voice face, italic, and one step lighter than the typed ink — measured 5.5–6.3:1 on the well, comfortably AA */ .fl-root input::placeholder, .fl-root textarea::placeholder { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; color: color-mix(in oklab, var(--muted) 82%, var(--ink)) !important; opacity: 1 !important; } /* the caret is the lamp */ .fl-root input, .fl-root textarea { caret-color: var(--a1Text); } /* THE FOCUS RING — one colour that is legible on every surface in the room. A ring cannot know whether it lands on paper or on velvet (a nav tile is paper, but its ring at 3px offset is drawn on the velvet behind it), so picking --a1Text fails on the canvas (2.59–3.09) and --a1OnCanvas fails on the sheet. I searched the token space for the mix with the best worst case; --a1OnCanvas 65% toward --ink clears the 3:1 non-text floor against ALL of --sheet, --canvas, --velvet, --tint1 and --tint2 in all six rooms: sheet 3.48 3.62 3.57 3.92 3.54 3.66 canvas 4.37 3.95 3.96 3.81 4.15 4.11 velvet 3.65 3.21 3.17 3.22 3.70 3.47 parlor's 78%-transparent mix cannot: transparency pulls the ring toward whatever is behind it, which is the one thing it must not resemble. */ .fl-root { --p-ring: color-mix(in oklab, var(--a1OnCanvas) 65%, var(--ink)); } .fl-root :where(input, textarea, select, button, a, [tabindex]):focus-visible { outline: 2.5px solid var(--p-ring) !important; outline-offset: 3px !important; transition: outline-offset var(--p-t-press) var(--p-e-out); } /* on a lit brass face the ring uses the face's own ink, which is designed against it (4.6–7.0) */ .fl-root [style*="background: var(--a1)"]:focus-visible, .fl-root [style*="background: var(--cta)"]:focus-visible { outline-color: var(--ctaText) !important; } .fl-root :where(button, a):focus-visible:active { outline-offset: 1px !important; } /* ═══ 4. CHIPS AND BADGES ═════════════════════════════════════════════════ */ /* Three shadow layers turn a 22px pill into a solid object: a bright inset top highlight, a dark inset ring, one hard bottom edge. Lit from the top — the same lamp as the room — so chips agree with buttons about where the light is. Grounds are stock, so the inks measure: --body 7.6–8.7, --ink 13.4–14.4, --a1Text 4.7–5.6, --a2Text 5.3–6.8, --a3Text 4.9–6.1. */ .fl-root .ui-chip, .fl-root [style*="border-radius: 999px"][style*="background: var(--rule)"], .fl-root [style*="border-radius: 999px"][style*="background: var(--tint1)"], .fl-root [style*="border-radius: 999px"][style*="background: var(--tint2)"], .fl-root [style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"]:not(button):not(.fl-btn) { background-color: transparent !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 96%, white) 0%, color-mix(in oklab, var(--sheet) 93%, var(--p-shade)) 100%) !important; border-color: transparent !important; box-shadow: inset 0 1px 0 color-mix(in oklab, white 85%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent), 0 1px 0 color-mix(in oklab, var(--ink) 20%, transparent), 0 2px 3px -2px color-mix(in oklab, var(--ink) 45%, transparent) !important; } /* --muted measures 4.50–5.24 on that stock: under AA in two rooms. Step up. */ .fl-root .ui-chip[style*="color: var(--muted)"], .fl-root [style*="border-radius: 999px"][style*="background: var(--rule)"][style*="color: var(--muted)"], .fl-root [style*="border-radius: 999px"][style*="background: var(--tint1)"][style*="color: var(--muted)"], .fl-root [style*="border-radius: 999px"][style*="background: var(--tint2)"][style*="color: var(--muted)"] { color: var(--p-quiet) !important; } /* tracked caps deserve real tracking, and numbers must not jitter as counts tick — presentation only, the words are untouched */ .fl-root .ui-chip, .fl-root [style*="border-radius: 999px"][style*="text-transform: uppercase"] { font-variant-numeric: tabular-nums lining-nums; } /* ═══ 5. THE WAITING STATE ════════════════════════════════════════════════ */ /* People wait on this app while answers are being anonymised. A grey shimmer says "server thinking"; a slow warm sweep says "someone is writing." */ @keyframes p-sweep { from { background-position: -40% 0, 0 0; } to { background-position: 140% 0, 0 0; } } /* Owner 2026-08-17: "can't see the processing icons on the homepage in the demo box — too light against background." The bars were --p-key-lo (paper + 8% shade) with a whiter sweep: on paper-coloured cards that is a ghost. A placeholder must read as a placeholder: light rooms → paper 70% + shade (a soft pencil-grey bar); dark rooms → paper 74% + the room's lamp tint (a lighter bar); the sweep is the lamp passing over it. */ .fl-root { --p-shim: color-mix(in oklab, var(--sheet) 70%, var(--p-shade)); --p-shim-lit: color-mix(in oklab, var(--sheet) 34%, white); } [data-palette="ember"] .fl-root, [data-palette="midnight"] .fl-root, [data-palette="ember"].fl-root, [data-palette="midnight"].fl-root { --p-shim: color-mix(in oklab, var(--sheet) 74%, var(--p-lit-mix)); --p-shim-lit: color-mix(in oklab, var(--sheet) 40%, var(--p-lit-mix)); } .fl-root .fl-shim { background-image: linear-gradient(100deg, transparent 0 34%, var(--p-shim-lit) 50%, transparent 66% 100%), linear-gradient(var(--p-shim), var(--p-shim)) !important; background-size: 220% 100%, 100% 100% !important; background-repeat: no-repeat !important; animation: p-sweep 1.9s cubic-bezier(.45, 0, .35, 1) infinite !important; } /* ═══ 6. ARRIVAL ══════════════════════════════════════════════════════════ */ /* One choreography, once: the sheet slides up under the lamp and a single glint crosses it. This REPLACES parlor's p-lamp on the same element — running both would double-animate the panel. fill-mode is BACKWARDS, never both/forwards: the end keyframe already equals the resting state, and a filling transform (even the identity matrix Chrome keeps after `to { transform: none }`) makes the sheet the containing block for every fixed overlay the app renders inside it. */ @keyframes p-sheet-in { from { opacity: 0; transform: translateY(16px) scale(.994); } to { opacity: 1; transform: none; } } @keyframes p-glint { from { background-position: 220% 0, 0 0, 0 0, 0 0; } to { background-position: -120% 0, 0 0, 0 0, 0 0; } } @media (prefers-reduced-motion: no-preference) { .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { animation: p-sheet-in var(--p-t-page) var(--p-e-out) backwards !important; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::after { animation: p-glint 1.5s cubic-bezier(.32, .1, .2, 1) 180ms 1 both; } } /* ═══ 7. REDUCED MOTION ═══════════════════════════════════════════════════ */ /* Reduced motion means no movement — not no feedback. Every end state above is still reachable; only the travel is removed. */ @media (prefers-reduced-motion: reduce) { .fl-root button.fl-btn, .fl-root .v2-go, .fl-root input, .fl-root textarea, .fl-root select, .fl-root .ui-chip { transition: none !important; } .fl-root button.fl-btn:active:not(:disabled) { transform: none !important; } .fl-root .fl-shim { animation: none !important; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { animation: none !important; opacity: 1 !important; } .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea)::after { animation: none !important; background-position: 220% 0, 0 0, 0 0, 0 0; } } /* ═══ 8. 390px ════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { /* a shallower tear: at 390px a 5px bite is already a third of a tap row */ .fl-root [style*="flex: 1 1 0%"][style*="overflow: hidden"][style*="background: var(--sheet)"]:not(textarea) { --bite-a: radial-gradient(circle at 50% 0%, #000 3.4px, transparent 4px); --bite-b: radial-gradient(circle at 50% 0%, #000 2px, transparent 2.5px); --bite-c: radial-gradient(circle at 50% 0%, #000 1.1px, transparent 1.5px); } } /* 44px tap targets on coarse pointers — but ONLY on controls the app has not deliberately sized. The palette swatches are 20px and the row actions are 32px by design; forcing those to 44 would rebuild someone else's layout. */ @media (pointer: coarse) { .fl-root button.fl-btn:not([style*="width:"]):not([style*="height:"]) { min-block-size: 44px; } } /* ══════════════════════════════════════════════════════════════════════ THE PARLOR · SHELL — from the 52-site study (see built-inventory) ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ frag-shell.css — THE SHELL: the room, the rail, the masthead, the bar. Loads AFTER parlor.css. Presentation only. Every colour is a token or a color-mix of tokens, so all six rooms follow one declaration. THE THESIS The room is not a background, it is a lit interior: a lamp with a real two-stage falloff, a vignette that closes the corners, and a woven nap. The rail is not a stack of white pills on velvet — it is UPHOLSTERY: one continuous panel of deeper velvet with a brass edge, where navigation reads as LIT or UNLIT rather than filled or unfilled. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. The shell's own timing layer (Emil Kowalski) ────────────────────── */ .fl-root { --sh-press: 70ms; --sh-hover: 180ms; --sh-enter: 420ms; --sh-out: cubic-bezier(.2, .7, .3, 1); --sh-brass: color-mix(in oklab, var(--a1) 55%, transparent); --sh-brassSoft: color-mix(in oklab, var(--a1) 20%, transparent); --sh-hair: color-mix(in oklab, var(--onCanvas) 10%, transparent); --sh-railTop: color-mix(in oklab, var(--velvet, var(--canvas)) 88%, black); --sh-railBot: color-mix(in oklab, var(--canvas) 92%, black); } /* ═══ 1. THE ROOM ════════════════════════════════════════════════════════ */ /* The lamp is rebuilt with a two-stage falloff — a tight hot core and a wide weak throw — because a single radial reads as a flat coloured blob, which is exactly what made the last pass look like a recolour. Under it: a vignette that closes the corners, the velvet fall, and the fibre. */ .fl-root { isolation: isolate; background-color: var(--canvas) !important; background-image: /* the hot core of the lamp */ radial-gradient(760px 540px at 89% -8%, color-mix(in oklab, var(--a1) 56%, transparent) 0%, color-mix(in oklab, var(--a1) 22%, transparent) 34%, transparent 70%), /* the throw — wide, weak, so the falloff has two stages, not one ramp */ radial-gradient(1600px 1150px at 94% -22%, color-mix(in oklab, var(--a1) 12%, transparent) 0%, color-mix(in oklab, var(--a1) 4%, transparent) 46%, transparent 74%), /* the bounce off the floor, bottom left */ radial-gradient(880px 600px at 4% 112%, color-mix(in oklab, var(--velvet, var(--canvas)) 84%, white 12%) 0%, transparent 60%), /* one broad sheen raking across the nap, the way light sits on velvet */ linear-gradient(104deg, transparent 0%, rgba(255, 255, 255, .030) 34%, rgba(255, 255, 255, .046) 47%, rgba(255, 255, 255, .012) 60%, transparent 82%), /* the vignette: the corners of a room are never as lit as its middle */ radial-gradient(126% 104% at 68% 16%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .16) 46%, rgba(0, 0, 0, .38) 74%, rgba(0, 0, 0, .60) 100%), /* the velvet itself */ linear-gradient(168deg, var(--velvet, var(--canvas)) 0%, var(--canvas) 60%), var(--p-grain) !important; background-size: auto, auto, auto, auto, auto, auto, 128px 128px !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, scroll !important; background-blend-mode: normal, normal, normal, normal, normal, normal, normal !important; } /* THE BLOOM (Isle of Harris): light that brightens what is already light and leaves the shadows alone. A tinted gradient cannot do that; color-dodge can. z-index:-1 keeps it above the room's own paint and below every sheet, so the paper is never touched. */ .fl-root::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(880px 620px at 89% -10%, color-mix(in oklab, var(--a1) 46%, transparent) 0%, transparent 60%); mix-blend-mode: color-dodge; opacity: .34; } /* ember's canvas is already warm umber and dodge runs orange fast */ [data-palette="ember"] .fl-root::before { mix-blend-mode: overlay; opacity: .62; } [data-palette="blush-study"] .fl-root::before { opacity: .28; } /* THE NAP (Tekla): two line grids at non-orthogonal angles and coprime periods, composited soft-light. Pure white/black at low alpha, so it is mathematically hue-neutral and cannot break a single room. */ .fl-root::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(103deg, rgba(255, 255, 255, .085) 0 1px, transparent 1px 3px), repeating-linear-gradient(13deg, rgba(0, 0, 0, .090) 0 1px, transparent 1px 4px); mix-blend-mode: soft-light; } /* ═══ 2. THE RAIL — upholstery, not a stack of pills ═════════════════════ */ /* One continuous recessed panel: a deeper velvet than the room, a fold shadow where it meets the wall, the lamp catching its top edge, a fine vertical rib (upholstery is ribbed), and a brass edge down its face. */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] { padding: 26px 12px 14px !important; gap: 3px !important; background-color: transparent !important; background-image: /* the brass edge, fading out top and bottom like a real strip */ linear-gradient(180deg, transparent 0%, var(--sh-brass) 8%, color-mix(in oklab, var(--a1) 68%, transparent) 34%, var(--sh-brass) 88%, transparent 100%), /* the rib */ repeating-linear-gradient(90deg, color-mix(in oklab, var(--onCanvas) 4%, transparent) 0 1px, transparent 1px 6px), /* the lamp catching the top of the panel */ radial-gradient(150% 42% at 74% -2%, color-mix(in oklab, var(--a1) 15%, transparent), transparent 70%), /* the fold where the panel meets the wall */ linear-gradient(90deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 38%), /* the upholstery */ linear-gradient(174deg, var(--sh-railTop) 0%, var(--sh-railBot) 64%, color-mix(in oklab, var(--canvas) 84%, black) 100%), var(--p-grain) !important; background-size: 1.5px 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 128px 128px !important; background-position: right top, left top, left top, left top, left top, left top !important; background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat, repeat !important; /* 'scroll' (not 'local'): the upholstery is a panel fixed to the rail's box, so it never scrolls out from under the nav when the rail itself scrolls */ background-attachment: scroll, scroll, scroll, scroll, scroll, scroll !important; background-blend-mode: normal, normal, normal, normal, normal, soft-light !important; scrollbar-width: none; } .fl-root > div[style*="width: 212px"][style*="position: sticky"]::-webkit-scrollbar { width: 0; } /* ── 2a. THE MASTHEAD (It's Nice That) ──────────────────────────────────── */ /* The wordmark stops being a logo floating in a header and becomes the top of a publication: the cameo, the name at 21px, and a rule ruled under it. */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] > div[style*="border-radius: 16px"][style*="margin-bottom: 2px"] { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 4px 17px !important; margin-bottom: 4px !important; gap: 12px !important; /* the masthead's double rule: a thick and a thin, the way a running head is ruled off in a printed book. Never a box, never a divider. */ background-image: linear-gradient(90deg, color-mix(in oklab, var(--a1) 72%, transparent) 0%, color-mix(in oklab, var(--a1) 26%, transparent) 66%, transparent 100%), linear-gradient(90deg, color-mix(in oklab, var(--a1) 34%, transparent) 0%, color-mix(in oklab, var(--a1) 8%, transparent) 52%, transparent 88%) !important; background-size: 100% 1.5px, 100% 1px !important; background-position: left calc(100% - 5px), left bottom !important; background-repeat: no-repeat, no-repeat !important; } /* the cameo: the drawn face in a brass-ringed medallion of lit paper */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] > div[style*="border-radius: 16px"][style*="margin-bottom: 2px"] > [style*="border-radius: 50%"] { width: 38px !important; height: 38px !important; background: radial-gradient(80% 80% at 32% 22%, color-mix(in oklab, var(--sheet) 94%, white) 0%, var(--sheet) 46%, color-mix(in oklab, var(--sheet) 74%, var(--p-shade)) 100%) !important; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--a1) 62%, transparent), 0 0 0 1px color-mix(in oklab, var(--onCanvas) 9%, transparent), 0 6px 14px -6px rgba(0, 0, 0, .92), 0 0 26px -6px color-mix(in oklab, var(--a1) 46%, transparent) !important; } /* the name. --onCanvas on the rail's upholstery measures 12.06–13.98:1 */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] > div[style*="border-radius: 16px"][style*="margin-bottom: 2px"] > [style*="font-family: Fraunces"] { color: var(--onCanvas) !important; font-size: 21px !important; line-height: .96 !important; letter-spacing: .012em !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 18px color-mix(in oklab, var(--a1) 22%, transparent); } /* ── 2b. NAV: lit or unlit ──────────────────────────────────────────────── */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav { position: relative; isolation: isolate; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 11px !important; border: 0 !important; min-height: 44px; padding: 10px 12px 10px 15px !important; color: var(--onCanvasBody) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .006em !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--sh-hover) var(--sh-out), background-color var(--sh-hover) var(--sh-out); } .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav svg { stroke: var(--onCanvasMuted) !important; opacity: 1 !important; transition: stroke var(--sh-hover) var(--sh-out); } /* the state ledge (Mercury): the accent is never a decoration, only a state */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: var(--a1OnCanvas); box-shadow: 0 0 14px color-mix(in oklab, var(--a1) 75%, transparent); transform: translateY(-50%); transition: height .22s var(--sh-out); pointer-events: none; } @media (hover: hover) { .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav:hover { background-color: color-mix(in oklab, var(--a1) 15%, transparent) !important; color: var(--onCanvas) !important; } /* the parts move, not the box (Hello Monday): the icon leads by 2px, the label follows — a jointed object rather than a sliding slab */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav:hover svg { stroke: var(--a1OnCanvas) !important; transform: translateX(2px); } .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav:hover::before { height: 34%; } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav svg { transition: stroke var(--sh-hover) var(--sh-out), transform .22s var(--sh-out) 40ms; } } .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav:focus-visible::before { height: 34%; } /* THE LIT ONE. Not a filled chip — an alcove the lamp is pointed at. --onCanvas on this ground measures 8.24–9.23:1 in all six rooms. */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--a1)"], .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--cta)"] { background-color: color-mix(in oklab, var(--a1) 30%, transparent) !important; /* the light spills FROM the ledge and falls off to the right — an alcove the lamp is pointed at, not a filled chip */ background-image: linear-gradient(96deg, color-mix(in oklab, var(--a1) 20%, transparent) 0%, color-mix(in oklab, var(--a1) 4%, transparent) 46%, transparent 82%) !important; color: var(--onCanvas) !important; text-shadow: 0 0 18px color-mix(in oklab, var(--a1) 38%, transparent), 0 1px 0 rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--onCanvas) 15%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--a1) 34%, transparent), inset 22px 0 30px -26px color-mix(in oklab, var(--a1) 90%, transparent), 0 10px 22px -14px rgba(0, 0, 0, .9) !important; } .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--a1)"]::before, .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--cta)"]::before { /* the ledge lives inside the STRAIGHT run of the item's left edge: an 11px radius on a 44px item leaves 22px straight, so 58% overhung the curve by ~3px at each end and read as a stub bolted onto a pill */ height: 46%; } .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--a1)"] svg, .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="background: var(--cta)"] svg { stroke: var(--a1OnCanvas) !important; } /* the unread pip gets a lamp of its own instead of sitting flat */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav [style*="background: var(--warm)"] { box-shadow: 0 0 0 2px color-mix(in oklab, var(--canvas) 60%, transparent), 0 0 12px color-mix(in oklab, var(--warm) 80%, transparent); } /* ── 2c. THE GROUPED SET — a broken rule, not a floating card ───────────── */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] > [style*="margin-top: 18px"][style*="background: var(--sheet)"] { background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin-top: 26px !important; padding: 0 0 4px !important; overflow: visible !important; background-image: none !important; } /* THE BROKEN RULE (AIGA Eye on Design): the hairline runs, stops for the tracked word, and resumes. A hundred-year-old letterpress device — and it removes a filled chip from the page, which is subtraction AND craft. */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] > [style*="margin-top: 18px"] > [style*="letter-spacing: 0.13em"], .fl-root .fl-side-util .v2-pk-hint { display: flex !important; align-items: center; gap: 10px; color: var(--onCanvasMuted) !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 9px !important; letter-spacing: .18em !important; text-transform: uppercase; padding: 14px 12px 9px !important; margin: 0 !important; white-space: nowrap; } .fl-root > div[style*="width: 212px"][style*="position: sticky"] > [style*="margin-top: 18px"] > [style*="letter-spacing: 0.13em"]::after, .fl-root .fl-side-util .v2-pk-hint::after { content: ""; flex: 1 1 0; height: 1px; min-width: 8px; background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 52%, transparent) 0%, color-mix(in oklab, var(--a1) 10%, transparent) 78%, transparent 100%); } .fl-root .fl-side-util .v2-pk-hint { letter-spacing: .16em !important; font-size: 9px !important; padding: 12px 8px 8px !important; } /* the paper hairline between the grouped rows becomes a velvet seam */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav[style*="border-bottom: 1px solid var(--rule)"] { border-bottom: 1px solid var(--sh-hair) !important; border-radius: 0 !important; } /* ── 2d. THE UTILITY TRAY ───────────────────────────────────────────────── */ .fl-root .fl-side-util { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 2px 4px 2px !important; margin-top: 14px !important; background-image: none !important; } .fl-root .fl-side-util .v2-pk-hint__k { color: var(--onCanvas) !important; background: color-mix(in oklab, var(--onCanvas) 10%, transparent) !important; border-color: var(--sh-hair) !important; box-shadow: inset 0 0 0 1px var(--sh-hair) !important; } /* the language row: on velvet, paper inks are invisible — 7.0–7.6:1 instead */ .fl-root .fl-side-util .fl-side-lang .fl-btn { color: var(--onCanvasMuted) !important; } .fl-root .fl-side-util .fl-side-lang .fl-btn[style*="text-decoration: underline"] { color: var(--onCanvas) !important; text-decoration-color: var(--a1OnCanvas) !important; } .fl-root .fl-side-util [title] { box-shadow: 0 0 0 1px var(--sh-hair), 0 2px 5px -2px rgba(0, 0, 0, .9) !important; } .fl-root .fl-side-util [style*="outline: 2.5px solid var(--onCanvas)"] { box-shadow: 0 0 0 1px var(--canvas), 0 0 14px -2px color-mix(in oklab, var(--a1) 70%, transparent) !important; } /* ═══ 3. THE BOTTOM BAR — the same upholstery, laid flat ═════════════════ */ .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] { background-color: color-mix(in oklab, var(--sh-railTop) 86%, transparent) !important; background-image: linear-gradient(90deg, transparent 0%, var(--sh-brass) 16%, color-mix(in oklab, var(--a1) 66%, transparent) 50%, var(--sh-brass) 84%, transparent 100%), radial-gradient(120% 130% at 50% 132%, color-mix(in oklab, var(--a1) 13%, transparent), transparent 68%), repeating-linear-gradient(90deg, color-mix(in oklab, var(--onCanvas) 4%, transparent) 0 1px, transparent 1px 6px) !important; background-size: 100% 1px, 100% 100%, 100% 100% !important; background-position: left top, left top, left top !important; background-repeat: no-repeat, no-repeat, repeat !important; border-top: 0 !important; box-shadow: 0 -18px 34px -22px rgba(0, 0, 0, .95) !important; backdrop-filter: blur(18px) saturate(1.12) !important; -webkit-backdrop-filter: blur(18px) saturate(1.12) !important; } .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn { position: relative; background: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; border-radius: 12px !important; min-height: 48px; color: var(--onCanvasBody) !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--sh-hover) var(--sh-out), background-color var(--sh-hover) var(--sh-out); } /* the bar is translucent over lit paper, so its worst-case ground is much lighter than the rail's: measured, --onCanvasMuted lands at 3.39–3.92:1 there, so bar icons take --onCanvasBody (5.40–6.37:1) instead. */ .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn svg { color: var(--onCanvasBody) !important; stroke: var(--onCanvasBody) !important; transition: stroke var(--sh-hover) var(--sh-out); } /* the lit tab: the same alcove, marked by a brass filament above it */ .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"], .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"] { background-color: color-mix(in oklab, var(--a1) 30%, transparent) !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--a1) 13%, transparent), transparent 74%) !important; color: var(--onCanvas) !important; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--onCanvas) 20%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--a1) 34%, transparent) !important; } .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"] svg, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"] svg { color: color-mix(in oklab, var(--a1OnCanvas) 50%, var(--onCanvas)) !important; stroke: color-mix(in oklab, var(--a1OnCanvas) 50%, var(--onCanvas)) !important; } .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--a1)"]::after, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn[style*="background: var(--cta)"]::after { content: ""; position: absolute; top: -1px; left: 50%; width: 30px; height: 2px; transform: translateX(-50%); border-radius: 0 0 2px 2px; background: var(--a1OnCanvas); box-shadow: 0 0 14px color-mix(in oklab, var(--a1) 80%, transparent); pointer-events: none; } @media (hover: hover) { .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn:hover:not([style*="background: var(--a1)"]):not([style*="background: var(--cta)"]) { background-color: color-mix(in oklab, var(--a1) 14%, transparent) !important; color: var(--onCanvas) !important; } } /* the bar's labels were being clipped by the row height at 390px — give the stack the 3px it needs rather than letting the words disappear */ .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn { min-height: 54px; padding: 7px 4px 8px !important; line-height: 1.15 !important; letter-spacing: .012em !important; } /* press physics (basement.studio): down fast, up slow — the asymmetry is the whole trick, and it is declared only inside :active */ @media (prefers-reduced-motion: no-preference) { .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav:active, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn:active { transform: translateY(1px); transition-duration: var(--sh-press); } } /* ── 3b. THE FLOATING TRAY on screens with no rail ──────────────────────── */ /* Without a rail behind it the tray would be a hairline hanging in mid-air, so it gets its own small plate of upholstery — the same material, a smaller piece of furniture. */ .fl-root .fl-side-util.fl-home-util { padding: 11px 8px 6px !important; border-radius: 13px !important; background-color: color-mix(in oklab, var(--sh-railTop) 88%, transparent) !important; background-image: linear-gradient(90deg, transparent 0%, var(--sh-brass) 14%, color-mix(in oklab, var(--a1) 62%, transparent) 48%, var(--sh-brass) 86%, transparent 100%), repeating-linear-gradient(90deg, color-mix(in oklab, var(--onCanvas) 4%, transparent) 0 1px, transparent 1px 6px) !important; background-size: 100% 1px, 100% 100% !important; background-position: left top, left top !important; background-repeat: no-repeat, repeat !important; box-shadow: inset 0 0 0 1px var(--sh-hair), 0 20px 38px -24px rgba(0, 0, 0, .95) !important; backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08); } /* ═══ 4. THE WORDMARK, EVERYWHERE ELSE ══════════════════════════════════ */ /* Mailchimp's reverse-mark rule: the logo has no colour, it has a colour per surface. On paper it is walnut brass; on velvet it is the cream reverse. */ .fl-logo, .fl-hero-logo { color: var(--logo) !important; } [style*="background: var(--sheet)"] .fl-logo, [style*="background-color: var(--sheet)"] .fl-logo, .ui-card .fl-logo, .v2-loop .fl-logo, .v2-com__card .fl-logo { color: var(--logo) !important; } .fl-root > .fl-logo, .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-logo, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-logo, [style*="background: var(--canvas)"] .fl-logo, [style*="background: var(--velvet)"] .fl-logo { color: var(--onCanvas) !important; } /* on velvet the drawn eyes are dark brass on dark velvet — reverse them too */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-logo [stroke="var(--logo)"], .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-logo [stroke="var(--logo)"] { stroke: var(--a1OnCanvas) !important; } /* Graza's ink spread + Tartine's second plate: the hero mark is PRESSED into the stock, with one plate of ember a hair out of register. Both shadows use currentColor or a --a2 mix, so the measured ratio is still governed by the fill and can only rise. */ .fl-hero-logo { text-shadow: .04em .045em 0 color-mix(in oklab, var(--a2) 26%, transparent), .011em .011em 0 currentColor, -.007em .007em 0 currentColor; } /* ═══ 5. FOCUS, TARGETS, MOTION FLOOR (Rauno) ═══════════════════════════ */ .fl-root > div[style*="width: 212px"][style*="position: sticky"] :is(button, a, [tabindex]):focus-visible, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] :is(button, a):focus-visible { outline: 2.5px solid var(--a1OnCanvas) !important; outline-offset: 2px !important; } @media (pointer: coarse) { .fl-root .fl-side-util .fl-side-lang .fl-btn { min-height: 44px !important; min-width: 44px; } .fl-root .fl-side-util [title] { min-height: 26px; min-width: 26px; } } @media (max-width: 760px) { /* guarantee zero horizontal scroll on a phone. 'clip' (not 'hidden') so it never becomes a scroll container and never breaks position:sticky. */ .fl-root { overflow-x: clip; } .fl-root::after { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav, .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav::before, .fl-root > div[style*="width: 212px"][style*="position: sticky"] .fl-nav svg, .fl-root [style*="position: fixed"][style*="backdrop-filter"][style*="var(--sheet)"] .fl-btn { transition: none !important; } } /* ══════════════════════════════════════════════════════════════════════ THE PARLOR · HERO — from the 52-site study (see built-inventory) ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ frag-hero.css — THE HOME SCREEN, art-directed. "A masthead, a promise, a voice, and one lit tray to speak into." Loads after parlor.css. Presentation only: no copy, no behaviour, no new UI. Every colour is a token or a color-mix of tokens, so all six rooms follow. THE COMPOSITION (top to bottom) · (retired 2026-08-17) a small note used to be pinned to the top-right corner, tilted — the one asymmetry that makes the centred lockup read as composed · THE MASTHEAD: the wordmark at 3× its old size, standing in a pool of lamplight, the two eyes finally big enough to be a character · a hairline, then the promise demoted to a quiet Karla standfirst · THE VOICE: the rotating line, Instrument Serif italic, large — with a brass rule beneath it that opens as a line arrives and closes as it goes · THE TRAY: the ask field as the heaviest object on the page · a diamond node on the section rule, and a broken rule around the section head below ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. Motion grammar (Emil Kowalski) ──────────────────────────────────── */ :root { --h-press: 70ms; --h-hover: 180ms; --h-enter: 620ms; --h-out: cubic-bezier(.22, .68, .24, 1); } /* ── 1. The home sheet gets a page margin ───────────────────────────────── */ /* :has() keeps this off every other screen that shares .fl-scroll. */ @supports selector(:has(*)) { .fl-scroll:has(> [style*="padding: 24px 0px 8px"]) { padding: clamp(14px, 2.2vw, 26px) clamp(16px, 3vw, 34px) 40px !important; max-width: 980px !important; } } /* ── 2. (retired) The note that used to sit in the corner of the sheet is gone from the app entirely (owner 2026-08-17). ─────────────────────────────── */ /* ── 3. The hero block: one lamp pool, one stagger ──────────────────────── */ /* NOT isolated: this block is the DOM parent of the onboarding sheet + scrim (position:fixed, z 50/51). A stacking context here would trap them under the z-50 tab bar and let later sections paint over them. The lamp pool below is z -1 in .fl-root's context, which paints above the sheet's own ::before by tree order — the same result without the trap. */ .fl-scroll > [style*="padding: 24px 0px 8px"] { position: relative; padding: clamp(18px, 4vw, 46px) 0 6px !important; /* The two light pools below deliberately spill past this box. Measured: without this, .fl-scroll gained 46px of horizontal scroll at 390px and 130px at 1280px. `clip` on one axis only leaves overflow-y untouched, so the pools still bleed vertically and nothing becomes a scroll container. */ overflow-x: clip; } /* the lamp falls on the masthead: paper lightens toward the wordmark, which can only RAISE the contrast of everything set on it. It is painted as a layer of the SHEET's own background (the sheet is not a stacking context, so a z:-1 pseudo here would sit behind it), soft-edged with three stops so it does not band on near-flat paper. */ /* Owner 2026-08-17: "some logos on the main page have a light treatment around them, but not the light themes — parity for all color schemes." Then, after the first attempt: "still no equal light treatment … you didn't even check it visually." A sheet-toward-white pool is a glow on dark paper and nothing on cream/bone/ivory/blush. So the pool is now LAMP LIGHT — a warm gold (--p-pool, per room) — which reads on light paper by HUE as well as lightness, sitting in a soft shaded surround (sheet → the room's shade). Dark rooms use their own lamp tint as the pool. Verified by six-room contact sheet (headless Chrome, 1280) before shipping. */ [data-palette="amethyst-night"] { --p-pool: #FFEFBA; } [data-palette="harbor"] { --p-pool: #FFF1C8; } :root:not([data-palette]), [data-palette="meadow"] { --p-pool: #FFF3B8; } [data-palette="blush-study"] { --p-pool: #FFF0C6; } [data-palette="ember"] { --p-pool: color-mix(in oklab, var(--sheet) 42%, var(--p-lit-mix)); } [data-palette="midnight"] { --p-pool: color-mix(in oklab, var(--sheet) 42%, var(--p-lit-mix)); } /* [stripped by garden/core-strip.json] */ /* ── 4. THE MASTHEAD ────────────────────────────────────────────────────── */ /* The scale jump is the design (Bloomberg Businessweek): 68px wordmark, then nothing until the 17px standfirst. No middle of the scale at all. */ .fl-hero-logo { font-size: clamp(31px, 7.2vw, 82px) !important; letter-spacing: .006em !important; line-height: 1 !important; max-width: 100%; /* the misregistered second plate + the ink spread of a real press */ text-shadow: .026em .026em 0 color-mix(in oklab, var(--a2) 22%, transparent), .011em .011em 0 currentColor, -.007em .007em 0 currentColor; } @supports (text-box: trim-both cap alphabetic) { .fl-hero-logo { text-box: trim-both cap alphabetic; } } /* the wordmark casts onto the sheet: it is an object in the room, not a fill */ .fl-hero-logo::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -.11em; height: .14em; pointer-events: none; filter: blur(9px); background: radial-gradient(50% 100% at 50% 0%, color-mix(in oklab, var(--p-shade) 44%, transparent) 0%, transparent 76%); } /* ── 5. The rule, then the promise ──────────────────────────────────────── */ .fl-hero-copy { max-width: min(640px, 100%) !important; padding: 0 clamp(8px, 2vw, 18px) !important; margin-top: clamp(16px, 2.6vw, 30px) !important; } /* the masthead rule: a hairline that fades at both ends */ .fl-hero-copy::before { content: ""; display: block; width: min(340px, 62%); height: 1px; margin: 0 auto clamp(18px, 2.8vw, 30px); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--a1) 64%, transparent) 20%, color-mix(in oklab, var(--a1) 64%, transparent) 80%, transparent); } /* the promise stops competing with the wordmark: Karla, quiet, --body */ /* --body on --sheet = 9.00 parlor / 8.23 ember / 9.10 harbor / 8.03 midnight */ .fl-hero-copy > [style*="font-family: Fraunces"]:first-child { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 500 !important; font-style: normal !important; font-size: clamp(15px, 1.35vw, 17px) !important; line-height: 1.75 !important; letter-spacing: .006em !important; color: var(--body) !important; text-shadow: none !important; text-wrap: pretty; max-width: 100%; margin: 0 auto !important; } /* ── 6. THE VOICE: the rotating line ────────────────────────────────────── */ /* The app's own dissolve (opacity + 1.5px blur, owner-tuned 2026-07-31) is left exactly as it is — the type never moves. What is new is the brass rule beneath it, which opens as a line arrives and closes as it leaves. */ .fl-hero-line { font-size: clamp(25px, 3.9vw, 42px) !important; line-height: 1.18 !important; letter-spacing: -.014em !important; margin-top: clamp(14px, 2.2vw, 24px) !important; min-height: 2.42em !important; text-wrap: balance; padding: 0 4px; position: relative; } /* the pause: a brass lozenge set ON the rule below — the same node that marks the section rule further down, so the page has one ornamental language. It lives inside .fl-hero-line, so the app's own dissolve fades it in and out with the sentence for free. */ .fl-hero-line::after { content: ""; position: absolute; left: 50%; bottom: -12.5px; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: color-mix(in oklab, var(--sheet) 92%, white); box-shadow: 0 0 0 1.2px color-mix(in oklab, var(--a1) 62%, transparent); pointer-events: none; } .fl-hero-copy::after { content: ""; display: block; height: 1.5px; width: 100%; margin: 8px auto 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--a1) 66%, transparent) 26%, color-mix(in oklab, var(--a1) 66%, transparent) 74%, transparent); background-size: 40% 100%; background-repeat: no-repeat; background-position: 50% 50%; } @supports selector(:has(*)) { @media (prefers-reduced-motion: no-preference) { .fl-hero-copy::after { transition: background-size .9s cubic-bezier(.7, .25, .6, 1), opacity .9s ease; } .fl-hero-copy:has(.fl-hero-in)::after { background-size: 40% 100%; opacity: 1; } .fl-hero-copy:has(.fl-hero-out)::after { background-size: 0% 100%; opacity: 0; } } } /* ── 7. THE TRAY: the ask field as the heaviest object on the page ──────── */ .v2-ask[data-sec="hero-ask"] { width: min(600px, 100%) !important; margin-top: clamp(26px, 3.8vw, 46px) !important; position: relative; isolation: isolate; } /* lamplight pooling under the tray — brightens on focus */ .v2-ask[data-sec="hero-ask"]::before { content: ""; position: absolute; z-index: -1; inset: -30px -40px -26px; pointer-events: none; border-radius: 999px; background: radial-gradient(58% 116% at 50% 46%, color-mix(in oklab, var(--a1) 15%, transparent) 0%, transparent 72%); opacity: .7; } .v2-ask[data-sec="hero-ask"] input { min-height: 68px !important; padding: 20px 74px 20px 56px !important; font: 500 17px/1.35 'Karla', system-ui, sans-serif !important; color: var(--ink) !important; border-color: transparent !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 88%, white) 0%, color-mix(in oklab, var(--sheet) 97%, var(--p-shade)) 100%) !important; /* the top highlight is the STOCK catching the lamp, not a white line: on dark paper a fixed white read as a second ring inside the brass one */ box-shadow: inset 0 1px 0 color-mix(in oklab, var(--sheet) 70%, white), inset 0 -1px 0 color-mix(in oklab, var(--ink) 12%, transparent), 0 0 0 1.5px color-mix(in oklab, var(--a1) 58%, transparent), 0 4px 0 color-mix(in oklab, var(--p-shade) 62%, var(--ink)), 0 26px 40px -24px rgba(0, 0, 0, .55) !important; transition: box-shadow var(--h-hover) var(--h-out), background-color var(--h-hover) var(--h-out) !important; } /* the placeholder is the voice asking, not a label */ .v2-ask[data-sec="hero-ask"] input::placeholder { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 19px !important; opacity: 1; } .v2-ask[data-sec="hero-ask"] input:focus { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--sheet) 70%, white), 0 0 0 2px var(--a1Text), 0 0 0 7px color-mix(in oklab, var(--a1) 20%, transparent), 0 4px 0 color-mix(in oklab, var(--p-shade) 62%, var(--ink)), 0 30px 46px -24px rgba(0, 0, 0, .6) !important; } @media (prefers-reduced-motion: no-preference) { .v2-ask[data-sec="hero-ask"]::before { transition: opacity .3s ease, transform .3s var(--h-out); } .v2-ask[data-sec="hero-ask"]:focus-within::before { opacity: 1; transform: scale(1.05); } } /* the pencil in the tray */ .v2-ask[data-sec="hero-ask"] .v2-lead { left: 22px !important; color: var(--a1Text) !important; } /* the brass knob: a plinth under it, and it presses INTO the plinth */ .v2-ask[data-sec="hero-ask"] .v2-go { width: 52px !important; height: 52px !important; right: 8px !important; box-shadow: 0 1px 0 rgba(255, 244, 220, .62) inset, 0 -2px 0 rgba(84, 48, 8, .26) inset, 0 3px 0 color-mix(in oklab, var(--cta) 48%, black), 0 14px 22px -12px color-mix(in oklab, var(--cta) 82%, transparent) !important; transition: transform var(--h-hover) var(--h-out), box-shadow var(--h-hover) var(--h-out) !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .v2-ask[data-sec="hero-ask"] .v2-go:hover { transform: translateY(-50%) scale(1.05) !important; } .v2-ask[data-sec="hero-ask"] .v2-go:active { transform: translateY(calc(-50% + 3px)) scale(1) !important; transition-duration: var(--h-press) !important; box-shadow: 0 1px 0 rgba(255, 244, 220, .4) inset, 0 0 0 color-mix(in oklab, var(--cta) 48%, black), 0 6px 12px -10px color-mix(in oklab, var(--cta) 70%, transparent) !important; } } /* ── 8. The quick chip below the tray: a wall label, not a button ───────── */ .v2-quick { margin-top: clamp(14px, 2vw, 22px) !important; } .v2-quick .ui-chip { font: 700 10.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .2em !important; text-transform: uppercase !important; /* NOT --muted: on the darkest stop of the paper gradient --muted measures 4.43 in Blue Hour and 4.47 in the Conservatory — under AA. One notch of ink takes the worst room to 5.57 and it still reads as a quiet label. */ color: color-mix(in oklab, var(--muted) 70%, var(--ink)) !important; background: transparent !important; border-color: transparent !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 16%, transparent) !important; padding: 11px 16px !important; } @media (hover: hover) { .v2-quick .ui-chip:hover { color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a1) 55%, transparent) !important; } } @media (pointer: coarse) { .v2-quick .ui-chip { min-height: 44px !important; } } /* ── 9. THE SECTION BELOW: a real section rhythm ────────────────────────── */ .fl-scroll > [style*="margin-top: 26px"][style*="border-top: 1px solid var(--rule)"] { margin-top: clamp(40px, 5.4vw, 72px) !important; padding-top: clamp(38px, 5vw, 62px) !important; border-top-color: transparent !important; background-image: linear-gradient(90deg, transparent, color-mix(in oklab, var(--a1) 46%, transparent) 24%, color-mix(in oklab, var(--a1) 46%, transparent) 76%, transparent) !important; background-size: 100% 1px !important; background-repeat: no-repeat !important; background-position: 50% top !important; } /* a diamond node set on the rule — the letterpress pause */ .fl-scroll > [style*="margin-top: 26px"][style*="border-top: 1px solid var(--rule)"]::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; transform: rotate(45deg); background: color-mix(in oklab, var(--sheet) 92%, white); box-shadow: 0 0 0 1.2px color-mix(in oklab, var(--a1) 62%, transparent); pointer-events: none; } /* the section head: a rule that BREAKS around its title (AIGA Eye on Design) */ .fl-scroll > [style*="margin-top: 26px"] > [data-sec="demo"] { display: flex !important; align-items: center; gap: clamp(14px, 2.6vw, 28px); margin-bottom: clamp(26px, 3.6vw, 42px) !important; } .fl-scroll > [style*="margin-top: 26px"] > [data-sec="demo"]::before, .fl-scroll > [style*="margin-top: 26px"] > [data-sec="demo"]::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--a1) 44%, transparent)); } .fl-scroll > [style*="margin-top: 26px"] > [data-sec="demo"]::after { background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 44%, transparent), transparent); } .fl-scroll > [style*="margin-top: 26px"] > [data-sec="demo"] h2 { flex: 0 1 auto; font-size: clamp(24px, 3.4vw, 38px) !important; line-height: 1.06 !important; letter-spacing: -.022em !important; text-wrap: balance; } /* ── 10. Entrance choreography (Obys): the page assembles top-down ──────── */ @keyframes h-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } } @keyframes h-mast { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .fl-scroll > .v2-post { animation: h-rise .5s var(--h-out) both; } .fl-scroll > [style*="padding: 24px 0px 8px"] > *:not(.ui-sheet):not(.ui-sheet-scrim) { animation: h-rise var(--h-enter) var(--h-out) both; } .fl-scroll > [style*="padding: 24px 0px 8px"] > .fl-hero-logo { animation-name: h-mast; animation-delay: 60ms; } .fl-scroll > [style*="padding: 24px 0px 8px"] > .fl-hero-copy { animation-delay: 170ms; } .fl-scroll > [style*="padding: 24px 0px 8px"] > .v2-ask { animation-delay: 280ms; } .fl-scroll > [style*="padding: 24px 0px 8px"] > .v2-quick { animation-delay: 360ms; } } /* ── 11. Phone: 390px, no horizontal overflow, 44px targets ─────────────── */ @media (max-width: 480px) { .fl-hero-logo { letter-spacing: 0 !important; } .fl-hero-copy { max-width: 100% !important; } .fl-hero-copy::before { width: min(200px, 56%); } .v2-ask[data-sec="hero-ask"] input { min-height: 60px !important; padding: 16px 62px 16px 48px !important; font-size: 16px !important; } .v2-ask[data-sec="hero-ask"] input::placeholder { font-size: 17px !important; } .v2-ask[data-sec="hero-ask"] .v2-lead { left: 18px !important; } .v2-ask[data-sec="hero-ask"] .v2-go { width: 46px !important; height: 46px !important; } } /* ══════════════════════════════════════════════════════════════════════ THE PARLOR · WIZARD — from the 52-site study (see built-inventory) ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ frag-wizard.css — THE ASK FLOW, set as a printed form Surface: the create-a-loop wizard only. SCOPE Every rule is prefixed with the wizard anchor (see §0 below) — the topic field id exists only inside this wizard, so nothing here can reach the dashboard, insights or the about page (all of which also use .fl-scroll). The :has() argument is an id, so the prefix carries id-level specificity and cleanly outranks parlor.css's !important element rules without resorting to selector spam. THE IDEA The wizard is where somebody decides to ask for the truth. It should read like a form printed for that purpose — a masthead, a register of steps set like a plate number, a sentence you complete on a ruled line, an index of questions with ordinals and a hairline between them — not like a settings screen made of pill chips. CONTRAST — every colour below was resolved through color-mix in all six rooms and measured (rd2 rig, sRGB WCAG 2.1). The worst room is quoted at each rule. Two shipped AA failures are FIXED here rather than inherited: • --ctaText on --a1/--cta is 3.76 / 3.99:1 in the Rose Room, so the brass-filled "+ Add" pills and the filled step numeral could not be used as-is. They become paper-and-keyline objects instead. • --a1 as a 2px indicator rule under the topic field is 2.97:1 in the Parlor (below the 3:1 non-text floor). It becomes --a1Text (4.92:1). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 0. Local ink and timing, derived only from room tokens ─────────────── */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) { /* stocks */ --w-stock: color-mix(in oklab, var(--sheet) 96%, var(--p-shade)); --w-lit: color-mix(in oklab, var(--a1) 16%, var(--sheet)); --w-litter: color-mix(in oklab, var(--a1) 22%, var(--sheet)); /* rules */ --w-hair: color-mix(in oklab, var(--ink) 22%, transparent); --w-hairsoft: color-mix(in oklab, var(--ink) 15%, transparent); --w-rule: color-mix(in oklab, var(--ink) 26%, transparent); --w-brass: color-mix(in oklab, var(--a1Text) 62%, transparent); --w-brassX: color-mix(in oklab, var(--a1Text) 88%, transparent); /* object physics (Raycast) */ --w-edge: inset 0 1px 0 rgba(255, 255, 255, .82); --w-ring: inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent); --w-plinth: 0 1px 0 color-mix(in oklab, var(--ink) 18%, transparent), 0 2px 3px -2px color-mix(in oklab, var(--ink) 42%, transparent); --w-ramp: 0 1px 1px -1px color-mix(in oklab, var(--ink) 28%, transparent), 0 6px 10px -8px color-mix(in oklab, var(--ink) 32%, transparent), 0 26px 40px -28px rgba(0, 0, 0, .8); /* motion (Emil Kowalski's proportional set) */ --w-press: 70ms; --w-hover: 180ms; --w-out: cubic-bezier(.2, .7, .3, 1); font-variant-numeric: tabular-nums lining-nums; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) { overflow-x: clip; } /* ══ 1. THE MASTHEAD ═══════════════════════════════════════════════════════ Eleven Fraunces sizes inside an 11px span is a mush. This surface uses three rungs only: 44 / 22 / 16. The jump is the hierarchy. Title: --ink on --sheet = 13.88:1 worst (ember). */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="font-size: 26px"][style*="letter-spacing: var(--tr-display)"] { font-size: clamp(33px, 4.4vw, 45px) !important; line-height: 1.02 !important; letter-spacing: -.026em !important; color: var(--ink) !important; text-wrap: balance; margin: 0 0 2px !important; /* Graza ink-spread in currentColor (can only raise contrast) + one plate of Tartine misregistration from the room's own second ink. */ text-shadow: .034em .034em 0 color-mix(in oklab, var(--a2) 22%, transparent), .011em .011em 0 currentColor, -.007em .007em 0 currentColor; } @supports (text-box: trim-both cap alphabetic) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="font-size: 26px"][style*="letter-spacing: var(--tr-display)"], .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="font-size: 20px"][style*="letter-spacing: var(--tr-display)"] { text-box: trim-both cap alphabetic; margin-block: .30em .30em !important; } } /* a masthead needs a rule over it, not a gap */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) > [style*="min-height: 44px"]:first-child { position: relative; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) > [style*="min-height: 44px"]:first-child::before { content: ""; display: block; width: 100%; height: 5px; margin-bottom: 16px; background-image: linear-gradient(90deg, var(--a1Text) 0 34px, transparent 34px), linear-gradient(90deg, var(--w-hair) 0 100%); background-size: 100% 2px, 100% 1px; background-position: left top, left 4px; background-repeat: no-repeat; opacity: .9; } /* the deck is the voice, not more UI. --body on --sheet = 7.88:1 worst. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) > [style*="font: 400 14px / 1.6"][style*="color: var(--muted)"] { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: clamp(17px, 1.7vw, 20px) !important; line-height: 1.44 !important; letter-spacing: .004em !important; color: var(--body) !important; max-width: 54ch; margin-top: 12px !important; text-wrap: pretty; } /* printer's rule: a brass hairline over an ink hairline */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) > [style*="border-top: 1px solid var(--rule)"][style*="margin: 22px 0px 0px"] { border-top: 0 !important; height: 3px; margin-top: 26px !important; background-image: linear-gradient(90deg, var(--w-brassX), color-mix(in oklab, var(--a1Text) 14%, transparent) 62%, transparent), linear-gradient(90deg, var(--w-hairsoft), transparent 78%); background-size: 100% 1px, 100% 1px; background-position: left top, left 2px; background-repeat: no-repeat; } /* ══ 2. THE REGISTER (the stepper) ═════════════════════════════════════════ Two grey circles become a printed register: plate-numbered roundels, a dashed leader that fills brass behind you, and wall-label step names. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] { align-items: center !important; gap: 14px !important; min-height: 52px; margin: 22px 0 30px !important; padding-bottom: 14px; background-image: linear-gradient(90deg, var(--w-hairsoft), transparent 88%) !important; background-size: 100% 1px !important; background-position: left bottom !important; background-repeat: no-repeat !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] > [style*="gap: 9px"] { gap: 11px !important; min-height: 44px; align-items: center !important; } /* the roundels — tabular numerals, cut into paper */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="border-radius: 50%"] { width: 30px !important; height: 30px !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; } /* current step — a lamplit tile with a brass ring. --ink on --a1 16% + sheet = 12.4:1 worst (ember). Ring --a1Text is 4.9:1+, well over the 3:1 floor. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="border-radius: 50%"][style*="background: var(--a1)"] { background: var(--w-lit) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--w-brassX), inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 16px -6px color-mix(in oklab, var(--a1) 70%, transparent); } /* upcoming step — a blind deboss: hairline ring, no fill. --body on --sheet = 7.88:1 worst (meadow). */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="border-radius: 50%"][style*="background: var(--rule)"] { background: transparent !important; color: var(--body) !important; box-shadow: inset 0 0 0 1px var(--w-hair); } /* step names as wall labels — --ink 13.9:1 / --body 7.9:1 on --sheet */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="white-space: nowrap"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .19em !important; text-transform: uppercase; line-height: 1.2 !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] > [style*="gap: 9px"]:first-of-type [style*="white-space: nowrap"] { color: var(--ink) !important; } /* the upcoming step ships as --muted, which is only 4.68:1 in the Blue Hour. --body gives the same "quieter" read with 7.88:1 of headroom. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] > [style*="gap: 9px"]:not(:first-of-type) [style*="white-space: nowrap"] { color: var(--body) !important; } /* the leader: a dashed rule with the travelled part inked brass */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="height: 2px"] { background-color: transparent !important; height: 3px !important; border-radius: 0 !important; min-width: 24px !important; background-image: linear-gradient(90deg, var(--w-brassX), color-mix(in oklab, var(--a1Text) 20%, transparent)), repeating-linear-gradient(90deg, var(--w-hair) 0 3px, transparent 3px 8px) !important; background-size: 26% 2px, 100% 1px !important; background-position: left center, left center !important; background-repeat: no-repeat, repeat-x !important; } /* ══ 3. THE SENTENCE ═══════════════════════════════════════════════════════ "I want to [receive] honest feedback about ___" is the one line that states the product. It is set as a line of type with a word switched in it, not as a segmented control with words inside. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="font-size: 21px"][style*="flex-wrap: wrap"] { font-size: clamp(23px, 2.8vw, 31px) !important; line-height: 1.22 !important; letter-spacing: -.018em !important; gap: 6px 11px !important; align-items: center !important; text-wrap: balance; } /* the trough stops being a grey tray: it is a ruled slot in the line, so the two candidate words sit on the page and one of them is lit. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] { background: none !important; background-color: transparent !important; border-color: transparent !important; border-radius: 0 !important; padding: 2px !important; box-shadow: inset 0 -1px 0 var(--w-hairsoft) !important; } /* the thumb keeps its inline geometry (JS drives `left`) and changes only its face: lit paper with a brass ledge, the Frans Hals block that takes the item rather than a coloured pill floating under it. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: calc(50% - 4px)"] { top: 2px !important; bottom: 2px !important; background: var(--w-lit) !important; border-radius: 8px 8px 0 0 !important; box-shadow: inset 0 -3px 0 var(--a1Text), inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 0 0 1px color-mix(in oklab, var(--a1Text) 24%, transparent) !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] > button.fl-btn { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(18px, 1.9vw, 22px) !important; letter-spacing: .004em !important; min-height: 44px !important; padding: 6px 0 !important; transition: color var(--w-hover) ease, letter-spacing var(--w-hover) var(--w-out) !important; } /* chosen word: --ink on the lit tile = 12.4:1 worst. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] > button.fl-btn[style*="color: var(--ctaText)"] { color: var(--ink) !important; } /* the other word: --body on the trough stock = 7.4:1 worst. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] > button.fl-btn[style*="color: var(--body)"] { color: var(--body) !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] > button.fl-btn svg { width: 13px; height: 13px; opacity: .72; } @media (hover: hover) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="width: min(248px, 100%)"] > button.fl-btn[style*="color: var(--body)"]:hover { color: var(--ink) !important; letter-spacing: .028em !important; } } /* ── the topic line: paper you write on, not a filled input ────────────── Tally's ruled field. The pencil emoji background is retired (rule 6) — the rule under the line is the affordance. --ink on --sheet = 13.9:1; the 2px indicator is --a1Text (4.92:1) because raw --a1 measures 2.97:1 in the Parlor and fails the 3:1 non-text floor. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main-sf, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-pencil-in { background-image: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 -2px 0 var(--a1Text) !important; transition: box-shadow var(--w-hover) ease, background-color var(--w-hover) ease; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main-sf { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(22px, 2.5vw, 29px) !important; line-height: 1.34 !important; letter-spacing: .002em !important; color: var(--ink) !important; padding: 10px 2px 12px !important; min-height: 62px !important; margin-top: 20px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main::placeholder, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main-sf::placeholder, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-pencil-in::placeholder { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; /* mixed ink placeholder = 5.43:1 worst (Blue Hour) */ color: color-mix(in oklab, var(--muted) 88%, var(--ink)) !important; opacity: 1; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main:focus, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main-sf:focus, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-pencil-in:focus { box-shadow: inset 0 -2.5px 0 var(--a1Text) !important; background-color: color-mix(in oklab, var(--a1) 7%, transparent) !important; } /* ══ 4. FINE TUNING — a rule that breaks around its label ══════════════════ AIGA Eye on Design's broken rule replaces a bordered disclosure box. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] { border: 0 !important; background: transparent !important; border-radius: 0 !important; margin-top: 26px !important; overflow: visible !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn { padding: 0 !important; min-height: 44px; gap: 14px !important; border-radius: 0 !important; align-items: center !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn::after { content: ""; order: 1; flex: 1 1 0; height: 1px; background-image: linear-gradient(90deg, var(--w-brass), color-mix(in oklab, var(--a1Text) 8%, transparent) 70%, transparent); transition: opacity var(--w-hover) ease; opacity: .8; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn > span:first-child { order: 0; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: .19em !important; text-transform: uppercase; color: var(--ink) !important; transition: letter-spacing var(--w-hover) var(--w-out); } /* "· optional" returns to the voice — --a1Text on --sheet = 4.92:1 worst */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn > span:first-child > span { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: 0 !important; text-transform: none; color: var(--a1Text) !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn > span:last-child { order: 2; color: var(--a1Text) !important; font-size: 11px !important; } @media (hover: hover) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn:hover > span:first-child { letter-spacing: .24em !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-rise[style*="border: 1.5px solid color-mix(in oklab, var(--a1) 32%, var(--rule))"] > button.fl-btn:hover::after { opacity: 1; } } /* ══ 5. THE NOTICE — an editor's margin note, not a coloured box ══════════ Public Domain Review marginalia. The tinted box and the 3px green slab go; what is left is a hanging brass rule and a voice. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"] { background: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 2px 0 2px 20px !important; margin: 4px 0 20px -22px !important; position: relative; background-image: linear-gradient(180deg, transparent, var(--w-brassX) 14%, var(--w-brassX) 86%, transparent) !important; background-size: 2px 100% !important; background-position: left top !important; background-repeat: no-repeat !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"] > [style*="font: 600 16px"] { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 20px !important; line-height: 1.3 !important; letter-spacing: .003em !important; color: var(--ink) !important; /* 13.88:1 worst */ margin-bottom: 6px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"] > [style*="font: 400 14px"] { font-family: 'Karla', system-ui, sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.62 !important; color: var(--body) !important; /* 7.88:1 worst */ max-width: 58ch; text-wrap: pretty; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"] strong { font-weight: 700 !important; color: var(--ink) !important; } /* ══ 6. CARD SHELLS — sheets, not outlines ════════════════════════════════ Family's rule: depth is a lit top edge plus a three-stop ramp, never a border. Nesting steps the stock instead of adding a stroke. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-sheen, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--rule)"][style*="margin-top: 22px"] { border: 0 !important; border-radius: 16px !important; background-color: var(--w-stock) !important; box-shadow: var(--w-edge), var(--p-hair), var(--w-ramp) !important; overflow: hidden !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--rule)"][style*="margin-top: 22px"] { margin-top: 30px !important; } /* card headers: a hairline and a short accent tab, not a 3px slab */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-req, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-sf, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-top: 3px solid var(--a1)"], .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 16px 18px 12px"] { position: relative; border-top: 0 !important; border-bottom: 0 !important; background: transparent !important; background-color: transparent !important; padding: 20px 18px 14px !important; background-image: linear-gradient(90deg, var(--w-hair), transparent 82%) !important; background-size: 100% 1px !important; background-position: left bottom !important; background-repeat: no-repeat !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-req::before, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-sf::before, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-top: 3px solid var(--a1)"]::before, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 16px 18px 12px"]::before { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 2px; background: var(--a1Text); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-req::before { background: var(--a2Text); } /* rung 2: every card title lands on one size */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="font-size: 20px"][style*="letter-spacing: var(--tr-display)"] { font-size: 22px !important; line-height: 1.14 !important; letter-spacing: -.014em !important; color: var(--ink) !important; text-wrap: balance; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-req > [style*="font: 400 12.5px"], .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-cathdr-sf > [style*="font: 400 12.5px"] { color: var(--body) !important; /* was --muted; --body is 7.88:1 worst */ font-weight: 500 !important; font-size: 13px !important; } /* badges become keyline labels — no fill, no pill. --a1Text 4.92:1 / --a2Text 5.49:1 on --sheet, and both are bold caps. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="vertical-align: 4px"], .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="vertical-align: 3px"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 9.5px !important; letter-spacing: .2em !important; background: none !important; border-radius: 3px !important; padding: 4px 7px 3px !important; vertical-align: 5px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="vertical-align: 4px"] { color: var(--a2Text) !important; border: 1px solid color-mix(in oklab, var(--a2Text) 40%, transparent) !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="vertical-align: 3px"] { color: var(--a1Text) !important; border: 1px solid color-mix(in oklab, var(--a1Text) 40%, transparent) !important; } /* Back / Next read as page turns */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="margin: -12px -10px"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase; min-height: 44px; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="cursor: pointer"][style*="margin: -12px -10px"] { color: var(--a2Text) !important; } /* the inert Back ships at --muted 40% + --sheet, which measures 1.72–1.82:1 — inactive controls are exempt from 1.4.3, but that is invisible rather than inert. 78% reads unmistakably disabled and still measures 3.16–3.58:1. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="cursor: default"][style*="margin: -12px -10px"] { color: color-mix(in oklab, var(--muted) 78%, var(--sheet)) !important; } /* ══ 7. THE QUESTION INDEX ════════════════════════════════════════════════ Five cards with five brass buttons become an index: ordinals in a reserved gutter, a hairline between rows, and a brass rule that draws in under the row you are on (Fonts In Use). The questions are the payload, so they are set in the voice, not in UI sans. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 14px 16px"]:has(> [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]) { counter-reset: flq; padding: 6px 18px 16px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] { position: relative; counter-increment: flq; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-bottom: 0 !important; padding: 15px 4px 15px 40px !important; gap: 16px !important; min-height: 60px; /* layer 1: the hover rule, drawn from the left. layer 2: the row divider, inset to the text column (Stripe) so it reads as a paragraph break. */ background-image: linear-gradient(90deg, var(--w-brassX), color-mix(in oklab, var(--a1Text) 12%, transparent)), linear-gradient(90deg, transparent 0 40px, var(--w-rule) 40px 72%, color-mix(in oklab, var(--ink) 8%, transparent) 100%) !important; background-size: 0% 1.5px, 100% 1px !important; background-position: left bottom, left top !important; background-repeat: no-repeat, no-repeat !important; transition: background-size .28s var(--w-out); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 14px 16px"]:has(> [style*="border-left: 8px solid var(--a2)"]) > *:first-child { background-position: left bottom, left -99px !important; } /* the ordinal — --body on --sheet = 7.88:1 worst */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]::before { content: counter(flq, decimal-leading-zero); position: absolute; left: 4px; top: 20px; font: 700 10.5px/1 'Karla', system-ui, sans-serif; letter-spacing: .13em; font-variant-numeric: tabular-nums lining-nums; color: var(--body); transition: color var(--w-hover) ease; } /* the question, in the voice. --ink on --sheet = 13.88:1 worst */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > [style*="font: 400 14px / 1.4"] { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: clamp(17px, 1.7vw, 19.5px) !important; line-height: 1.4 !important; letter-spacing: .002em !important; color: var(--ink) !important; max-width: 46ch; text-wrap: pretty; transition: letter-spacing .22s var(--w-out); } /* the affordance. A brass-filled pill here is an AA bug: --ctaText on --a1 is 3.76:1 in the Rose Room. A keyline on paper is 4.92:1 in the worst room and it stops five buttons from shouting over the questions. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > button.fl-btn { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--a1Text) !important; background: none !important; background-color: transparent !important; background-image: none !important; border-radius: 9px !important; min-height: 44px !important; min-width: 74px; padding: 0 12px !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 92%, white) 0%, color-mix(in oklab, var(--sheet) 97%, var(--p-shade)) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), inset 0 0 0 1px color-mix(in oklab, var(--a1Text) 40%, transparent), var(--w-plinth) !important; transition: box-shadow var(--w-hover) var(--w-out), background-color var(--w-hover) var(--w-out), color var(--w-hover) ease, transform var(--w-hover) var(--w-out) !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]:hover, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]:focus-within { background-size: 100% 1.5px, 100% 1px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]:hover::before { color: var(--a1Text); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]:hover > [style*="font: 400 14px / 1.4"] { letter-spacing: .012em !important; } } @media (hover: hover) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]:hover > button.fl-btn, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > button.fl-btn:hover { background-image: none !important; background-color: var(--w-litter) !important; color: var(--ink) !important; /* --ink on a1 22% + sheet = 11.6:1 worst */ box-shadow: inset 0 0 0 1px var(--w-brassX), var(--w-edge), var(--w-plinth) !important; } } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > button.fl-btn:active { transform: translateY(1.5px); transition-duration: var(--w-press) !important; } /* ══ 8. THE CATEGORY CHIPS — collectible, not clickable pills ═════════════ Raycast physics: bright inset top edge, dark inset ring, one hard bottom edge. Every layer is a color-mix off the room's own ink and stock. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .012em !important; border-color: transparent !important; border-radius: 8px !important; min-height: 36px; padding: 8px 13px !important; color: var(--body) !important; /* 7.69:1 worst on chip stock */ background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 92%, white) 0%, color-mix(in oklab, var(--sheet) 96%, var(--p-shade)) 100%) !important; box-shadow: var(--w-edge), var(--w-ring), var(--w-plinth) !important; transition: transform var(--w-hover) var(--w-out), box-shadow var(--w-hover) var(--w-out), color var(--w-hover) ease !important; } /* the ones matched to the topic wear a brass keyline — a collector's mark */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="background: var(--sheet)"][style*="color: var(--ink)"] { color: var(--ink) !important; box-shadow: var(--w-edge), inset 0 0 0 1px color-mix(in oklab, var(--a1Text) 44%, transparent), var(--w-plinth) !important; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"]:hover { transform: translateY(-1px); color: var(--ink) !important; box-shadow: var(--w-edge), inset 0 0 0 1px var(--w-brass), var(--w-plinth), 0 8px 14px -10px color-mix(in oklab, var(--a1) 70%, transparent) !important; } } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"]:active { transform: translateY(1px); transition-duration: var(--w-press) !important; box-shadow: inset 0 1px 2px color-mix(in oklab, var(--ink) 26%, transparent), var(--w-ring) !important; } /* the suggested tray */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: color-mix(in oklab, var(--warm) 7%, var(--sheet))"] { border-color: transparent !important; border-radius: 14px !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warm) 28%, transparent) !important; } /* the tab on the tray: a struck stamp. --warmText on --warmDeep = 5.85:1 worst; the shipped --catText on --warm was 3.28:1 in the Hearth. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--warm)"][style*="border-radius: 999px"] { background: var(--warmDeep) !important; color: var(--warmText) !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .2em !important; border-radius: 4px !important; padding: 6px 11px 5px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 7px -3px rgba(0, 0, 0, .6) !important; } /* "more themes" becomes a broken rule instead of a grey pill */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--rule)"][style*="border-radius: 999px"][style*="letter-spacing: 0.09em"] { display: flex !important; align-items: center; gap: 14px; width: 100%; background: none !important; border-radius: 0 !important; padding: 4px 0 !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .2em !important; color: var(--body) !important; /* 7.88:1 worst */ } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--rule)"][style*="border-radius: 999px"][style*="letter-spacing: 0.09em"]::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, var(--w-hair), transparent 76%); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 12px"][style*="border-bottom: 1px solid var(--rule)"] { border-bottom: 0 !important; gap: 7px !important; padding: 10px 12px 16px !important; background: transparent !important; } /* ══ 9. THE QUESTIONS YOU ARE SENDING ═════════════════════════════════════ */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 16px 18px 12px"] > [style*="margin-bottom: 3px"] { align-items: baseline !important; } /* the counter: tabular, keylined, never a filled tag on --rule (3.72:1) */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--rule)"][style*="border-radius: 8px"] { background: none !important; color: var(--a1Text) !important; /* 4.71:1 worst on card stock */ font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .12em !important; font-variant-numeric: tabular-nums lining-nums; border-radius: 4px !important; padding: 3px 7px !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a1Text) 40%, transparent); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="padding: 16px 18px 12px"] > [style*="font: 400 12.5px / 1.5"] { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 16px !important; color: var(--body) !important; } /* a slot: a brass ledge on the leading edge, Mercury-style, in --a1Text (4.71:1) because --a1 as an indicator is 2.84:1 on this stock. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="border-radius: 16px"] { border-left: 0 !important; border-radius: 0 !important; padding: 4px 0 4px 16px !important; margin-bottom: 16px !important; background-image: linear-gradient(180deg, var(--w-brassX), color-mix(in oklab, var(--a1Text) 18%, transparent)) !important; background-size: 2px 100% !important; background-position: left top !important; background-repeat: no-repeat !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="border-radius: 16px"] [style*="border-radius: 50%"] { background: transparent !important; color: var(--body) !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 11px !important; font-variant-numeric: tabular-nums lining-nums; box-shadow: inset 0 0 0 1px var(--w-hair); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) textarea[style*="white-space: pre-wrap"] { background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: inset 0 -1.5px 0 var(--w-hair) !important; padding: 12px 2px !important; font-family: 'Karla', system-ui, sans-serif !important; font-size: 15px !important; color: var(--ink) !important; transition: box-shadow var(--w-hover) ease; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) textarea[style*="white-space: pre-wrap"]:focus { box-shadow: inset 0 -2px 0 var(--a1Text) !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border: 1px dashed"] { border: 1px dashed color-mix(in oklab, var(--a1Text) 42%, transparent) !important; color: var(--a1Text) !important; /* 4.71:1 worst */ font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .14em !important; text-transform: uppercase; border-radius: 9px !important; min-height: 44px; padding: 0 16px !important; transition: background-color var(--w-hover) ease, color var(--w-hover) ease; } @media (hover: hover) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border: 1px dashed"]:hover { background: var(--w-litter) !important; color: var(--ink) !important; } } /* the remove control is a keyline, not a tinted blob */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="width: 32px"][style*="height: 32px"] { background: transparent !important; color: var(--body) !important; /* 7.88:1 worst */ border-radius: 8px !important; box-shadow: inset 0 0 0 1px var(--w-hairsoft); transition: box-shadow var(--w-hover) ease, color var(--w-hover) ease; } @media (hover: hover) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="width: 32px"][style*="height: 32px"]:hover { color: var(--a2Text) !important; /* 5.49:1 worst */ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--a2Text) 45%, transparent); } } /* a card inside a card steps the stock and drops its shadow (Family) */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--tint2)"] { border: 0 !important; border-radius: 12px !important; background: color-mix(in oklab, var(--sheet) 90%, var(--p-shade)) !important; box-shadow: var(--w-edge), var(--p-hair) !important; padding: 14px 16px 16px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--tint2)"] > [style*="font: 600 12.5px"] { font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .17em !important; text-transform: uppercase; color: var(--ink) !important; margin-bottom: 10px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--tint2)"] > [style*="font: 600 12.5px"] > span { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none; color: var(--body) !important; } /* ══ 10. MOTION — scroll authors it, nothing depends on it ════════════════ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes w-into-light { from { opacity: .3; transform: translateY(12px); } to { opacity: 1; transform: none; } } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-sheen, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"], .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border: 1.5px solid var(--rule)"][style*="margin-top: 22px"] { animation: w-into-light linear both; animation-timeline: view(); animation-range: entry 5% cover 24%; } } } /* ══ 11. 390px — the wizard on a phone ════════════════════════════════════ */ @media (max-width: 760px) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 3px solid var(--a3)"] { margin-left: 0 !important; } } @media (max-width: 560px) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] { gap: 9px !important; flex-wrap: nowrap !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="white-space: nowrap"] { font-size: 9.5px !important; letter-spacing: .1em !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="border-radius: 50%"] { width: 26px !important; height: 26px !important; font-size: 11px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="margin: 20px 0px 3"] [style*="height: 2px"] { min-width: 12px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] { padding: 14px 2px 14px 32px !important; gap: 10px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > button.fl-btn { min-width: 60px; padding: 0 9px !important; letter-spacing: .1em !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] > [style*="font: 400 14px / 1.4"] { font-size: 16.5px !important; min-width: 0; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] { background-image: linear-gradient(90deg, var(--w-brassX), color-mix(in oklab, var(--a1Text) 12%, transparent)), linear-gradient(90deg, transparent 0 34px, var(--w-rule) 34px 76%, color-mix(in oklab, var(--ink) 8%, transparent) 100%); } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"]::before { left: 0; top: 18px; } } /* 44px tap targets on any narrow viewport AND on any coarse pointer — the two are not the same population and both must be covered. */ @media (pointer: coarse), (max-width: 620px) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="border: 1px solid var(--rule)"] { min-height: 44px; padding: 11px 14px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="width: 32px"][style*="height: 32px"] { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="margin: -12px -10px"] { min-height: 44px; display: inline-flex; align-items: center; } .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } /* ══ 12. Reduced motion — the finished page, held still ═══════════════════ */ @media (prefers-reduced-motion: reduce) { .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) *, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) *::before, .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } /* reduced motion means no movement, not no feedback: the end states above are all reachable, they simply arrive instantly. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="border-left: 8px solid var(--a2)"][style*="justify-content: space-between"] { background-size: 100% 1.5px, 100% 1px !important; } } /* ══════════════════════════════════════════════════════════════════════ THE PARLOR · LIST — from the 52-site study (see built-inventory) ══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ frag-list.css — LOOPONOMICS: the ledger Loads after parlor.css. Scoped to the Looponomics scroller only: .fl-scroll:has(.v2-sent) — the one column in the app that carries the filter sentence. Nothing here can reach the wizard, the hero or the respondent view. MEASURED FLOOR (lx-contrast.py, oklab color-mix, all six rooms): the cards and this whole column sit on --p-paper-lit, whose darkest stop is color-mix(in oklab, var(--sheet) 88%, var(--p-shade)). Against THAT stop: --ink 13.04–13.96 ✓ --body 7.36–8.49 ✓ --a1Text 4.58–5.45 ✓ --a2Text 5.12–6.61 ✓ --a3Text 4.72–6.26 ✓ --warmDeep 5.12–6.03 ✓ --muted 4.39–5.09 ✗ ← fails AA in Blue Hour (4.39) and Conservatory So --muted is BANNED in this column. Everything the app painted muted is re-inked to --body or to a measured mix of --body, and quietness is bought with size, weight and tracking instead of with lightness. ═══════════════════════════════════════════════════════════════════════════ */ .fl-scroll:has(.v2-sent) { /* the paper this column is printed on */ --lx-stock: color-mix(in oklab, var(--sheet) 93%, var(--p-shade)); --lx-stock-lead: color-mix(in oklab, var(--sheet) 96%, white); /* inks (every one measured above) */ --lx-quiet: color-mix(in oklab, var(--body) 88%, var(--sheet)); /* 5.68–6.36 */ --lx-hair: color-mix(in oklab, var(--ink) 15%, transparent); --lx-brass: color-mix(in oklab, var(--a1Text) 62%, transparent); /* the house motif: one brass lozenge, used as slot mark, rule break, pause */ --lx-loz: color-mix(in oklab, var(--a1Text) 78%, transparent); /* Family: depth is a lit edge plus a three-stop ramp, never a border */ --lx-edge: inset 0 1px 0 color-mix(in oklab, white 62%, transparent); --lx-ramp: 0 1px 1px -1px color-mix(in oklab, var(--ink) 30%, transparent), 0 6px 10px -8px color-mix(in oklab, var(--ink) 32%, transparent), 0 22px 34px -26px rgba(0, 0, 0, .8); /* Emil Kowalski's duration/easing law */ --lx-t-press: 70ms; --lx-t-hover: 180ms; --lx-e-out: cubic-bezier(.2, .7, .3, 1); font-variant-numeric: tabular-nums lining-nums; } /* ── 1. THE MASTHEAD ───────────────────────────────────────────────────────── Bloomberg Businessweek: ban the middle of the scale. The page had a 26px title, a 22px filter sentence and 14px card titles — three sizes inside 12px, which is why nothing read as a hierarchy. The title now leaps to ~46px and tracks hard negative; everything else falls back to label sizes. */ .fl-scroll:has(.v2-sent) > [style*="align-items: baseline"] { align-items: flex-end !important; margin-bottom: 0 !important; } .fl-scroll:has(.v2-sent) [style*="font-family: Fraunces"][style*="font-size: 26px"] { font-size: clamp(34px, 4.4vw, 46px) !important; line-height: .96 !important; letter-spacing: -.026em !important; color: var(--ink) !important; text-wrap: balance; margin-bottom: 2px; } @supports (text-box: trim-both cap alphabetic) { .fl-scroll:has(.v2-sent) [style*="font-family: Fraunces"][style*="font-size: 26px"] { text-box: trim-both cap alphabetic; margin-block: .06em .10em; } } /* the deck is the voice, not a caption */ .fl-scroll:has(.v2-sent) > [style*="font: 400 12.5px / 1.55"] { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 18px !important; line-height: 1.42 !important; color: var(--body) !important; /* was --muted: 4.39 on the darkest stop */ max-width: 42ch; margin-top: 9px !important; text-wrap: pretty; } /* "Hide samples" is a utility, not an action: a tracked label on a hairline */ .fl-scroll:has(.v2-sent) > [style*="align-items: baseline"] > button.fl-btn { min-height: 30px !important; padding: 4px 1px 5px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: 0 1px 0 var(--lx-brass) !important; font: 700 10.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .19em !important; text-transform: uppercase !important; color: var(--a1Text) !important; /* 4.58–5.45 on the darkest stop */ align-self: flex-end; margin-bottom: 6px; transition: box-shadow var(--lx-t-hover) var(--lx-e-out), color var(--lx-t-hover) var(--lx-e-out); } @media (hover: hover) { .fl-scroll:has(.v2-sent) > [style*="align-items: baseline"] > button.fl-btn:hover { color: var(--ink) !important; box-shadow: 0 1px 0 var(--a1Text) !important; } } /* the head's closing rule: brass, fading, with air around it */ .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 20px"] { border-top-color: transparent !important; height: 1px; margin: 30px 0 26px !important; background-image: linear-gradient(90deg, color-mix(in oklab, var(--a1Text) 52%, transparent) 0%, color-mix(in oklab, var(--a1Text) 16%, transparent) 46%, transparent 100%) !important; background-size: 100% 1px !important; background-repeat: no-repeat !important; } /* ── 2. THE FILTER SENTENCE ────────────────────────────────────────────────── Linear's filter grammar, set as a line of prose rather than a toolbar: the joining words are the whispered voice (Instrument Serif italic, --body) and the VALUES are the display face in full ink, so the sentence reads "quiet · LOUD · quiet · LOUD". It is now the second-largest type on the page, which is correct — it is the best idea in the product. */ .fl-scroll:has(.v2-sent) [style*="order: 1; flex-basis"] { margin-bottom: 6px; } .fl-scroll:has(.v2-sent) .v2-sent { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: clamp(24px, 3.1vw, 32px) !important; line-height: 1.34 !important; letter-spacing: .004em !important; color: var(--body) !important; /* was --muted */ text-wrap: balance; } .fl-scroll:has(.v2-sent) .v2-slotwrap { white-space: nowrap; } .fl-scroll:has(.v2-sent) .v2-slot { font-family: 'Fraunces', Georgia, serif !important; /* Young Serif */ font-style: normal !important; font-size: .92em !important; letter-spacing: -.012em !important; color: var(--ink) !important; padding: 0 1px 2px !important; /* Cuberto: two underline plates — one wipes out right, one draws in left */ text-decoration: none !important; background-image: linear-gradient(var(--a1Text), var(--a1Text)), linear-gradient(var(--a1Text), var(--a1Text)) !important; background-size: 100% 1.5px, 0 1.5px !important; background-position: 100% 100%, 0 100% !important; background-repeat: no-repeat !important; transition: background-size .2s cubic-bezier(.4, 0, .2, 1), color var(--lx-t-hover) ease; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-scroll:has(.v2-sent) .v2-slot:hover { background-size: 0 1.5px, 100% 1.5px !important; transition-delay: 0s, .16s; } } /* The house lozenge marks a word you can open. It hangs off the end of the rule, below the baseline, so the sentence's own line is never disturbed. NOTE: .v2-slot::after is the app's invisible hit-area expander (inset:-8px -4px) — touching it would shrink a tap target, so the ornament goes on ::before and the hit area is left exactly as the app built it. */ .fl-scroll:has(.v2-sent) .v2-slot::before { content: ''; position: absolute; inset: auto -1px -6px auto; width: 4.5px; height: 4.5px; transform: rotate(45deg); background: var(--lx-loz); transition: transform var(--lx-t-hover) var(--lx-e-out); } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-scroll:has(.v2-sent) .v2-slot:hover::before { transform: rotate(45deg) scale(1.45); } } /* ── 3. THE SEARCH LINE ────────────────────────────────────────────────────── Tally: a field is a line you write on, not a box you are put in. The pill was competing with the sentence above it; as a ruled line it recedes to second voice while keeping its 44px tap target. */ .fl-scroll:has(.v2-sent) [style*="order: 4; flex-basis"] > button.fl-btn { min-height: 44px !important; padding: 0 2px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: inset 0 -1px 0 var(--lx-hair) !important; font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: 16px !important; color: var(--body) !important; /* was --muted */ gap: 11px !important; transition: box-shadow var(--lx-t-hover) var(--lx-e-out); } @media (hover: hover) { .fl-scroll:has(.v2-sent) [style*="order: 4; flex-basis"] > button.fl-btn:hover { box-shadow: inset 0 -1.5px 0 var(--a1Text) !important; } } .fl-scroll:has(.v2-sent) [style*="order: 4; flex-basis"] > button.fl-btn svg { opacity: .85; } .fl-scroll:has(.v2-sent) > [style*="margin-bottom: 22px"] { margin-bottom: 30px !important; } /* ── 4. THE SECTION MARK ───────────────────────────────────────────────────── AIGA Eye on Design: the rule breaks around its label. The label is a tracked small-cap in brass ink, then the lozenge, then a hairline that runs out. */ .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 11px"] { margin: 38px 0 14px !important; gap: 10px !important; } .fl-scroll:has(.v2-sent) .ui-label { font: 700 10.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--a1Text) !important; /* 4.58–5.45 */ } .fl-scroll:has(.v2-sent) .ui-label::after { content: ''; display: inline-block; width: 4.5px; height: 4.5px; margin: 0 0 1px 10px; vertical-align: middle; transform: rotate(45deg); background: var(--lx-loz); } .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 11px"] > span[style*="height: 1px"] { background: linear-gradient(90deg, color-mix(in oklab, var(--a1Text) 42%, transparent) 0%, color-mix(in oklab, var(--ink) 12%, transparent) 34%, transparent 100%) !important; } /* Klim: the running head stays with you. In a long ledger the chapter you are inside is pinned to the top of the column, on a blurred band of its own paper, so a scroll of forty loops never loses its place. */ @supports (position: sticky) { .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 11px"] { position: sticky; top: -1px; z-index: 3; padding: 9px 0 7px; background: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 88%, transparent) 0%, color-mix(in oklab, var(--sheet) 84%, transparent) 62%, transparent 100%); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } } /* ── 5. THE CARD ───────────────────────────────────────────────────────────── Bear's three-track row + Craft's reserved gutter. The old card led with its chrome (a toolbar on line one, the question on line two). Re-laid as a grid with display:contents on the two wrapper rows, it now reads [status glyph] THE QUESTION [controls] [ time ] provenance — the human content first, the machinery in the margins. No markup changed: the wrappers simply stop generating boxes. */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] { display: grid !important; /* mark | tags | question/meta | controls — 'tags' is 0 wide until a row carries a status pill (INACTIVE / ARCHIVED). Owner 2026-08-17: the pill used to be squeezed into the 34px mark track and wrapped letter by letter. */ grid-template-columns: 34px max-content minmax(0, 1fr) auto; grid-template-areas: "mark title title title" "time tags meta acts"; align-items: center; column-gap: 14px; row-gap: 6px; padding: 15px 30px 15px 15px !important; margin-bottom: 8px !important; border-width: 0 !important; border-radius: 14px !important; background-color: var(--lx-stock) !important; box-shadow: var(--lx-edge), var(--lx-ramp), 0 16px 42px -10px var(--boxGlow, transparent) !important; transition: transform var(--lx-t-hover) var(--lx-e-out), background-color var(--lx-t-hover) ease !important; } /* the two wrapper rows stop being boxes */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div:first-of-type, .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > [style*="align-items: flex-end"] { display: contents !important; } /* Mercury: the accent is never a fill, only a state ledge on the leading edge */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] { --lx-spine: var(--a2Text); } .fl-scroll:has(.v2-sent) > .fl-lift[style*="border-color: var(--a3)"] { --lx-spine: var(--a3Text); } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; /* lit, not painted: the ledge falls off at both ends like light on a spine */ background: linear-gradient(180deg, color-mix(in oklab, var(--lx-spine) 52%, transparent) 0%, var(--lx-spine) 26%, var(--lx-spine) 74%, color-mix(in oklab, var(--lx-spine) 52%, transparent) 100%); /* a2Text 5.12–6.61 · a3Text 4.72–6.26 */ transition: top var(--lx-t-hover) var(--lx-e-out), bottom var(--lx-t-hover) var(--lx-e-out); } /* the status glyph sits in its own fixed track, so every row has one straight left edge no matter how long the question is */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="flex-wrap: wrap"] { display: contents !important; /* the glyph and any pill place themselves */ } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="flex-wrap: wrap"] > span:not([style*="border-radius: 999px"]):not([style*="border-radius:999px"]) { grid-area: mark; justify-self: center; align-self: center; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="flex-wrap: wrap"] > span[style*="border-radius: 999px"], .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="flex-wrap: wrap"] > span[style*="border-radius:999px"] { grid-area: tags; align-self: center; justify-self: start; white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; font: 700 9.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase !important; padding: 5px 8px 4px !important; color: var(--body) !important; background: color-mix(in oklab, var(--rule) 55%, var(--sheet)) !important; margin-right: 8px; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="flex-wrap: wrap"] svg { width: 15px; height: 15px; } /* the question, in the display face, is the loudest thing on the row */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > [style*="font: 600 14px"] { grid-area: title; font-family: 'Fraunces', Georgia, serif !important; font-weight: 400 !important; font-size: 17px !important; line-height: 1.24 !important; letter-spacing: -.008em !important; color: var(--ink) !important; /* 13.04–13.96 */ margin-top: 0 !important; /* the question is the product: let it finish, up to two lines */ white-space: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: letter-spacing .22s var(--lx-e-out); } /* provenance is a wall label (Rijksmuseum), sized so it can never shout */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > [style*="font: 400 12.5px"] { grid-area: meta; font: 600 11px/1.35 'Karla', system-ui, sans-serif !important; letter-spacing: .075em !important; text-transform: uppercase !important; color: var(--body) !important; /* was --muted: 4.39 in Blue Hour */ margin-top: 0 !important; } /* the timestamp is a marginal figure, tabular so the column never jitters */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > span[style*="font: 500 11.5px"] { grid-area: time; justify-self: center; font: 600 10.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .02em !important; font-variant-numeric: tabular-nums lining-nums; color: var(--lx-quiet) !important; /* 5.68–6.36 */ } /* ── the controls: a reserved gutter, never a layout shift (Craft) ── */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > [style*="gap: 8px"] { grid-area: acts; align-self: center; gap: 2px !important; margin-left: 10px; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] button.fl-btn[style*="border-radius: 8px"] { min-height: 34px; padding: 7px 9px !important; border: 0 !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; font: 700 9.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .15em !important; text-transform: uppercase !important; gap: 6px !important; transition: background-color var(--lx-t-hover) ease, color var(--lx-t-hover) ease; } @media (hover: hover) { .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] button.fl-btn[style*="border-radius: 8px"]:hover { background: color-mix(in oklab, var(--ink) 7%, transparent) !important; } } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] button.fl-btn[style*="border-radius: 8px"] svg { width: 11px; height: 11px; opacity: .8; } /* unread: not a red pill — a live dot and a tracked figure. The bundle paints the count on the inner .sc-interp span as well as on its wrapper, so the descendant has to be re-inked or the figure renders in --warmText (cream on cream, 1.05:1). */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] [style*="background: var(--warm)"] *, .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] [style*="background: var(--warm)"] { background: none !important; padding: 0 4px 0 0 !important; border-radius: 0 !important; font: 700 9.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .15em !important; color: var(--warmDeep) !important; /* 5.12–6.03 */ gap: 6px; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] [style*="background: var(--warm)"]::before { content: ''; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 3px color-mix(in oklab, var(--warm) 18%, transparent); } /* ── the SAMPLE mark: a plate mark down the trim edge, not a sticker ──────── Klim's running head, turned on its side. The old mark was a 40px rotated slab through the middle of the card at 28% — it collided with the question and with the unread count. Here it runs bottom-to-top in the trim margin, the way a printer signs the edge of a specimen sheet: it is legible, it is permanent, and it touches nothing. The card reserves its own gutter for it, so nothing moves when it appears or goes. */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] [style*="rotate(-8deg)"] { left: auto !important; top: 50% !important; bottom: auto !important; right: 7px !important; z-index: 0; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg) !important; font: 700 9px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .34em !important; opacity: 1 !important; color: color-mix(in oklab, var(--ink) 66%, transparent) !important; /* 4.85–5.11 */ } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > *, .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > * { position: relative; z-index: 1; } /* ── 6. (removed) THE LEAD ROW — the fixer set the first card of each section at 21px on lighter stock. Owner 2026-08-17: "using different size fonts for different loop cards? that is horrible design." Every card is now the same card: one size, one stock, one ledge. ─────────────────────────────────── */ /* ── 7. HOVER: the type answers, the light moves — no colour swap ─────────── Fonts In Use (the row opens typographically) + Hello Monday (the parts move on a stagger, and the shadow lives on its own layer so nothing repaints). */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(420px 240px at 88% -12%, color-mix(in oklab, var(--a1) 17%, transparent) 0%, transparent 64%); opacity: 0; transition: opacity .26s ease; } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover { transform: translateY(-1px) !important; box-shadow: var(--lx-edge), 0 2px 2px -1px color-mix(in oklab, var(--ink) 32%, transparent), 0 12px 20px -10px color-mix(in oklab, var(--ink) 34%, transparent), 0 34px 48px -28px rgba(0, 0, 0, .9), 0 16px 42px -10px var(--boxGlow, transparent) !important; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover::after { opacity: 1; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover::before { top: 7px; bottom: 7px; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover > [style*="font: 600 14px"] { letter-spacing: -.002em !important; } } @media (hover: none) { .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover { transform: none !important; } } /* ── 8. THE EMPTY ROOM ─────────────────────────────────────────────────────── Things 3: empty is a composition, not a dashed rectangle apologising. The box is dissolved, the face becomes a lamplit medallion, and the line above it is the house lozenge — one shape, used for the third time. */ .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] { border: 0 !important; background: none !important; box-shadow: none !important; padding: 30px 24px 44px !important; gap: 2px; } .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"]::before { content: ''; width: 5px; height: 5px; margin: 6px auto 34px; transform: rotate(45deg); background: var(--lx-loz); box-shadow: 0 0 14px color-mix(in oklab, var(--a1) 42%, transparent); } .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] > [style*="border-radius: 50%"] { width: 82px !important; height: 82px !important; border: 0 !important; background: radial-gradient(66% 66% at 34% 26%, color-mix(in oklab, var(--a1) 22%, transparent), transparent 72%), color-mix(in oklab, var(--sheet) 94%, white) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 11%, transparent), 0 20px 30px -22px rgba(0, 0, 0, .8), 0 0 44px -8px color-mix(in oklab, var(--a1) 30%, transparent) !important; margin-bottom: 22px !important; } .fl-scroll:has(.v2-sent) .ui-d3 { font-family: 'Instrument Serif', Georgia, serif !important; font-style: italic !important; font-size: clamp(28px, 3.6vw, 38px) !important; line-height: 1.1 !important; letter-spacing: -.006em !important; color: var(--ink) !important; } .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] > [style*="font: 400 14px"] { font: 500 13.5px/1.6 'Karla', system-ui, sans-serif !important; color: var(--body) !important; /* was --muted */ max-width: 34ch !important; margin-top: 11px !important; text-wrap: pretty; } /* Raycast: a small control gets real physics — lit top edge, dark ring, one hard bottom edge — so it reads as an object rather than an outlined word. */ .fl-scroll:has(.v2-sent) .ui-chip { margin: 20px 0 4px !important; min-height: 34px; padding: 8px 14px !important; border: 0 !important; border-radius: 9px !important; font: 700 10px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .17em !important; text-transform: uppercase !important; color: var(--body) !important; background-image: linear-gradient(180deg, color-mix(in oklab, var(--sheet) 92%, white) 0%, color-mix(in oklab, var(--sheet) 96%, var(--p-shade)) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px color-mix(in oklab, var(--ink) 15%, transparent), 0 1px 0 color-mix(in oklab, var(--ink) 18%, transparent), 0 2px 3px -2px color-mix(in oklab, var(--ink) 42%, transparent) !important; } @media (prefers-reduced-motion: no-preference) { .fl-scroll:has(.v2-sent) .ui-chip:active { translate: 0 1px; } } /* the pair of exits sits on one line, primary then utility — the second is the same control as the head's, so it is given the same tracked-label voice */ .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] > [style*="flex-direction: column"] { flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px !important; margin-top: 26px !important; } .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] button.fl-btn[style*="min-height: 38px"] { min-height: 30px !important; padding: 4px 1px 5px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: 0 1px 0 var(--lx-brass) !important; font: 700 10.5px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .19em !important; text-transform: uppercase !important; color: var(--a1Text) !important; } .fl-scroll:has(.v2-sent) > [style*="border: 1px dashed var(--rule)"] button.fl-btn[style*="background: var(--a1)"] { padding: 13px 26px !important; font: 700 11px/1 'Karla', system-ui, sans-serif !important; letter-spacing: .16em !important; text-transform: uppercase !important; } /* ── 8b. The column's last inherited --muted ──────────────────────────────── The page footer rides inside this scroller and is still painted --muted, which measures 4.39 (Blue Hour) and 4.40 (Conservatory) against the paper's darkest stop — under AA. Same ban, same fix, scoped to this column only. */ .fl-scroll:has(.v2-sent) [style*="color: var(--muted)"], .fl-scroll:has(.v2-sent) .fl-about-foot, .fl-scroll:has(.v2-sent) .fl-about-foot :is(a, span, div, p, button, .fl-about-foot-link) { color: var(--body) !important; /* 7.36–8.49 */ } /* the same for the carded footer wherever it rides (home, profile, about…): ember's --muted on its dark card measured 4.37 — under AA. */ .fl-foot-canvas, .fl-foot-canvas :is(a, span, div, p, .fl-credit, .fl-about-foot-link), .fl-foot-canvas [style*="color: var(--muted)"], .fl-foot-canvas [style*="color:var(--muted)"] { color: var(--body) !important; } /* footer language chips and the footer link row: 44px targets on phones (measured 34px / 27px); static pages' footer pills likewise */ @media (max-width: 759px) { .fl-foot-lang .fl-btn { min-height: 44px !important; min-width: 40px; } .fl-foot-canvas a, .fl-foot-canvas .fl-credit { display: inline-block; padding-block: 9px; } .fl-foot-canvas .fl-about-foot-link { min-height: 44px !important; } body:not(:has(.fl-root)) .pagefoot a, body:not(:has(.fl-root)) .pagefoot .pill a, body:not(:has(.fl-root)) .foot a { display: inline-block; padding-block: 13px; } /* Looponomics card actions (Stop / Archive / Decline) measured 34px */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] button.fl-btn { min-height: 40px !important; } } /* the utility tray's narrowest language chip ("IT") measured 23px wide */ .fl-root .fl-side-util .fl-side-lang .fl-btn { min-width: 26px; } /* ── 9. 390px ──────────────────────────────────────────────────────────────── The grid folds to two tracks and the controls take their own row; every control keeps a 44px target and the column never scrolls sideways. */ .fl-scroll:has(.v2-sent) { overflow-x: clip; } @media (max-width: 620px) { .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "mark title" "time meta" "acts acts"; align-items: center; column-gap: 11px; row-gap: 4px; padding: 14px 26px 12px 13px !important; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > div > [style*="gap: 8px"] { justify-content: flex-start; flex-wrap: wrap; margin-left: 0; margin-top: 8px; padding-top: 9px; box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent); opacity: 1; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] [style*="rotate(-8deg)"] { right: 5px !important; letter-spacing: .26em !important; } .fl-scroll:has(.v2-sent) .v2-sent { font-size: 20px !important; text-wrap: pretty; } .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 20px"] { margin: 22px 0 20px !important; } .fl-scroll:has(.v2-sent) > [style*="margin: 22px 0px 11px"] { margin: 28px 0 12px !important; } /* the lead question gets a third line rather than an ellipsis on a phone */ .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] > [style*="font: 600 14px"] { font-size: 16.5px !important; } } @media (pointer: coarse) { .fl-scroll:has(.v2-sent) button.fl-btn, .fl-scroll:has(.v2-sent) .ui-chip { min-height: 44px !important; } .fl-scroll:has(.v2-sent) .v2-slot { min-height: 0 !important; } } /* ── 9b. Into the light ────────────────────────────────────────────────────── Lenis/Exo Ape, done natively: the arrival is authored by the scroll position, not by a timer, so a row brightens and settles as it crosses into the lamp. The range completes while the row is still low in the column, so nothing is ever read while it moves. Everything sits behind @supports + no-preference: without them the finished, static page is what ships. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes lx-into-light { /* never fully invisible, and lit well before it is readable */ from { opacity: .25; transform: translateY(9px) scale(.994); } to { opacity: 1; transform: none; } } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"] { animation: lx-into-light linear both; animation-timeline: view(block); animation-range: entry 0% entry 46%; } } } /* ── 10. Reduced motion: the end state stays reachable, the movement goes ─── */ @media (prefers-reduced-motion: reduce) { .fl-scroll:has(.v2-sent) *, .fl-scroll:has(.v2-sent) *::before, .fl-scroll:has(.v2-sent) *::after { transition: none !important; animation: none !important; } .fl-scroll:has(.v2-sent) > .fl-lift[role="button"]:hover { transform: none !important; } } /* ── 16. Utility tray legibility (design-review, integrated build) ────────── The language codes and the ⌘K hint sit on the tray's brass-lit plate; at --onCanvasMuted they measured 2.55:1. Utility text is still text. */ .fl-side-util .sc-interp, .fl-side-util button { color: var(--onCanvas) !important; } /* The FOOTER language row (.fl-foot-lang) is a different surface: it rides inside the paper column or the carded sheet footer, never on the velvet — owner 2026-08-17: "can't read language selection text on about page". Ink on paper, the chosen language darkest. */ .fl-foot-lang .sc-interp, .fl-foot-lang button, .fl-foot-lang .fl-btn { color: var(--body) !important; } .fl-foot-lang .fl-btn[style*="text-decoration: underline"], .fl-foot-lang .fl-btn[style*="text-decoration:underline"] { color: var(--ink) !important; } .fl-side-util [style*="color: var(--onCanvasMuted)"], .fl-side-util [style*="color:var(--onCanvasMuted)"] { color: var(--onCanvasBody) !important; } .v2-pk-hint, .v2-pk-hint__k { color: var(--onCanvas) !important; } .v2-pk-hint__k { background: color-mix(in oklab, var(--canvas) 72%, black) !important; } /* the same dark-sheet override reaches SVG marks through currentColor in the two rooms whose paper is now light — take those back to warm ink as well */ [data-palette="ember"] svg [style*="color: var(--warm"], [data-palette="midnight"] svg [style*="color: var(--warm"], [data-palette="ember"] [style*="color: var(--warm"] svg, [data-palette="midnight"] [style*="color: var(--warm"] svg, [data-palette="ember"] [style*="color: var(--warm"] path, [data-palette="midnight"] [style*="color: var(--warm"] path, [data-palette="ember"] [style*="color: var(--warm"] circle, [data-palette="midnight"] [style*="color: var(--warm"] circle { color: var(--a2Text) !important; fill: currentColor !important; stroke: currentColor !important; } /* ══════════════════════════════════════════════════════════════════════════ THE FACES — they are characters, and characters have colour. Owner 2026-08-16: "the eyes in the logo are sloppy… make them perfect circles without blemishes" and "the faces scattered through the about page are missing colors". Two causes, both fixed here: a) The app draws every face through filter:url(#pencil) — feTurbulence + feDisplacementMap at scale 1.5 — which is what wobbles the rings and chews the edges. On the WORDMARK we want a struck mark, not a sketch. b) An earlier legibility pass flattened every face fill to currentColor, which killed the eye whites, cheeks, tongues and glints. Faces keep their own palette tokens; only the ones that vanish get retuned. ══════════════════════════════════════════════════════════════════════════ */ /* a) PERFECT ROUND EYES, SHARP FEATURES (owner 2026-08-17: "go back to perfect round eyes and sharp facial features. the hand drawn doesn't look good"). No filter of any kind on the wordmark or the illustrated faces — not the app's own #pencil wobble (it is set as an SVG attribute on the hero face; a CSS filter:none out-ranks a presentation attribute) and not the #handdrawn warp. The app's own stroke widths and caps stand. */ .fl-logo svg, .fl-hero-logo svg, .fl-mlock__btn svg, .fl-lockup-card svg, .v2-ob__face svg, .fl-cere__face svg, .fl-ab-fig svg, .fl-ab-figL svg, .fl-lidf1, .fl-lidf2 { filter: none !important; } .fl-logo svg, .fl-hero-logo svg, .fl-mlock__btn svg, .fl-lockup-card svg { overflow: visible; } /* b) the face palette, restated so every part reads on paper AND on velvet. --glint is the eye white: it must be the lightest thing in the mark. */ :root { --glint: #FFF8EC; /* eye white — paper-bright, never inked */ --logoSoft: color-mix(in oklab, var(--a1) 55%, var(--sheet)); --face2: color-mix(in oklab, var(--a3) 72%, var(--ink)); --tongue: color-mix(in oklab, var(--a2) 78%, var(--ink)); --drop: color-mix(in oklab, var(--a3Text) 80%, var(--sheet)); --fdot: color-mix(in oklab, var(--ink) 82%, var(--a2)); --spark: var(--a1Text); } /* the eye white needs an edge when the face sits on paper, or it disappears */ .fl-logo svg [fill="var(--glint)"], .fl-hero-logo svg [fill="var(--glint)"] { stroke: color-mix(in oklab, var(--logo) 92%, transparent); stroke-width: 1.6; paint-order: fill stroke; } /* on the velvet rail the mark reverses: cream ring, dark pupil, warm cheeks */ .fl-root > div[style*="width: 212px"] .fl-logo, .fl-root > div[style*="width: 212px"] .fl-hero-logo, [style*="position: fixed"][style*="backdrop-filter"] .fl-logo { --logo: var(--onCanvas); --glint: color-mix(in oklab, var(--canvas) 82%, black); --pupil: var(--onCanvas); } /* ── The standing home-page note (.v2-post) is removed at build time now (FL_NO_BETA, 2026-08-17); this guard only matters for an old bundle. */ .v2-post, .fl-scroll > .v2-post { display: none !important; } /* ── THE BLINK — the app's mid-blink frame (.fl-lidf1) is a flat-topped plate 32 units wide (M cx-16 7 H cx+16 V21 …) over a 24-unit eye; under the drawn stroke it read as a square, and as an ellipse of its own box it still capped the ring on both sides. The lid is now the eye's own interior: the plate is clipped to the circle the app itself uses for the eye white (r 12 about the eye centre — the plate's box starts at (cx-16, 7), so the centre (cx, 24) is 16px, 17px into it, the same offset for both eyes), and the closed frame's disc shrinks from r 16 to r 12 so it fills the eye and never thins the ring to a hairline. The fill is the eye-white so the lid reads as skin closing over the eye. No filter (sharp, owner 2026-08-17). */ .fl-lidf1 > path:first-child, .fl-lidf2 > circle { fill: color-mix(in oklab, var(--sheet) 70%, var(--logo)) !important; } .fl-lidf1 > path:first-child { clip-path: circle(12px at 16px 17px); } .fl-lidf2 > circle { r: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ REVIEW ROUND — 2026-08-17. Findings from the four inspectors, applied. Every rule here is a correction to something already above; the fixed- overlay trap (the paper as containing block) is fixed in §1a/1b/6 and the hero block directly, the wizard fragment is re-anchored in place. What follows are the smaller, self-contained repairs. ═══════════════════════════════════════════════════════════════════════════ */ /* ── R-1. Screens that scroll ON the room (profile): the column sits on the velvet and its cards are sheets. The divider "This is what other users will see" and its hairlines sit between cards, directly on velvet — the rail's inks, not paper ink (measured 1.4:1 as body ink, 2026-08-17). The chain is scroller > column > row > span; the cards below are deeper. */ .fl-root [style*="overflow: auto"][style*="background-color: var(--canvas)"] > div > div > [style*="color: var(--onCanvasMuted)"], .fl-root [style*="overflow: auto"][style*="background-color: var(--canvas)"] > div > div > [style*="color: var(--onCanvasBody)"] { color: var(--onCanvasBody) !important; } .fl-root [style*="overflow: auto"][style*="background-color: var(--canvas)"] > div > div > [style*="color: var(--onCanvas)"], .fl-root [style*="overflow: auto"][style*="background-color: var(--canvas)"] > div > [style*="color: var(--onCanvas)"] { color: var(--onCanvas) !important; } /* ── R0. The sign-in / sign-up modal's brand panel ───────────────────────── The bundle paints it as a brass gradient (--a1 → a1/a3) and sets every line in --ctaText; in the light rooms that is dark ink on mid brass (3.0–3.9:1). Brass is a lamp, not a wall: the panel is the room's velvet, lit from the corner, and its lines are the rail's inks. */ .v2-brand[style*="background: linear-gradient(160deg, var(--a1)"] { background: linear-gradient(160deg, var(--velvet, var(--canvas)) 0%, color-mix(in oklab, var(--velvet, var(--canvas)) 78%, var(--canvas)) 100%) !important; } .v2-brand [style*="color: var(--ctaText)"], .v2-brand [style*="color:var(--ctaText)"] { color: var(--onCanvas) !important; } .v2-brand [style*="color: color-mix(in oklab, var(--ctaText) 78%"] { color: var(--onCanvasBody) !important; } .v2-brand [style*="background: color-mix(in oklab, var(--ctaText) 22%"] { background: color-mix(in oklab, var(--onCanvas) 22%, transparent) !important; } .v2-brand svg { color: var(--onCanvas); } /* ── R1. The account / profile header band ────────────────────────────────── The bundle paints it `background-color: var(--brand, …)` and sets every line on it in --ctaText. parlor never defined --brand (so the house room got the bundle's flat #361666) and three rooms run --ctaText dark, so the handle and plan line were near-black on a dark slab. The band is upholstery: the room's own velvet, lit from the lamp corner, and the ink on it is the ink the rail uses. Custom-property overrides only — the inline var()s resolve to these. */ .fl-root [style*="background-color: var(--brand"] { --brand: var(--velvet, var(--canvas)); --ctaText: var(--onCanvas); background-image: radial-gradient(120% 140% at 88% -20%, color-mix(in oklab, var(--a1) 28%, transparent) 0%, transparent 60%), linear-gradient(168deg, var(--velvet, var(--canvas)) 0%, color-mix(in oklab, var(--velvet, var(--canvas)) 82%, var(--canvas)) 100%), var(--p-grain) !important; background-size: auto, auto, 128px 128px !important; background-repeat: no-repeat, no-repeat, repeat !important; } /* ── R2. Account tab strip at phone width ──────────────────────────────────── Karla sets wider than Public Sans and .fl-root allows overflow-wrap: anywhere, so "Preferences" split mid-word at 390px. */ @media (max-width: 480px) { .fl-root .v2-acct-tabs .fl-btn, .fl-root button.fl-btn[style*="flex: 1 1 0%"][style*="min-height: 44px"][style*="font: 600 14px"][style*="letter-spacing: 0.01em"] { padding-inline: 4px !important; letter-spacing: 0 !important; overflow-wrap: normal; white-space: nowrap; } } /* ── R3. Wizard: the browse-categories row ─────────────────────────────────── "MORE THEMES AND TOPICS" is a broken rule (§8 above), but the generic 999px chip rule still handed it an inset ring, which traced a rectangle around the whole row. Same fix on the send side's twin. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--rule)"][style*="border-radius: 999px"][style*="letter-spacing: 0.09em"] { box-shadow: none !important; border: 0 !important; } /* The ACTIVE category chip carries an inline oklch border instead of `border: 1px solid var(--rule)`, so it missed the chip rule and stayed a 13px-radius pill beside 8px chips. Same object, same physics. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) button.fl-btn[style*="border-radius: 999px"][style*="oklch(var(--catL"] { border-radius: 8px !important; min-height: 36px; padding: 8px 13px !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 600 !important; font-size: 12.5px !important; letter-spacing: .012em !important; border-color: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--w-plinth) !important; } /* …and the sub-category tab (background oklch, 999px) becomes the same 4px struck stamp as READY-MADE LIBRARY next to it. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: oklch(var(--catL"][style*="border-radius: 999px"] { border-radius: 4px !important; font-family: 'Karla', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10px !important; letter-spacing: .2em !important; padding: 6px 11px 5px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 7px -3px rgba(0, 0, 0, .6) !important; } /* the "0/5" counter must never wrap inside its keyline at 390px */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) [style*="background: var(--rule)"][style*="border-radius: 8px"] { white-space: nowrap; flex: 0 0 auto; } /* the "ask something different" field: the pencil background is retired above, but the app's own 42px indent survived; and without min-width:0 the row pushed its Go button 7px past the card at 390px. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) .fl-pencil-in { padding-left: 12px !important; min-width: 0; } /* send side: a section divider (holding only an empty statements list) sat 18px under the topic rule and read as a doubled line. It comes back the moment the list holds a row. */ .fl-scroll:is(:has(#fl-topic-main), :has(#fl-topic-main-sf), :has(> [style*="min-height: 44px"] + [style*="font: 400 14px"] + [style*="border-top: 1px solid var(--rule)"] + [style*="margin: 20px 0px 3"])) #fl-topic-main-sf ~ [style*="margin-top: 18px"][style*="border-top: 1px solid var(--rule)"]:not(:has(* > *)) { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; } /* ── R4. The static pages (privacy · terms · text messaging) ───────────────── They link this file but have no .fl-root, so they got the fonts and the paper and none of the room: a flat velvet, and the wordmark in a leftover translucent capsule from the wallpaper era. The body becomes the room, the wordmark sits on the velvet the way it does on the rail, and the card is the app's sheet. survey.php also links this file: its embed mode must stay transparent, and its card is left alone (scoped by the `.brand > a` lockup only these pages have). */ /* brass text on the standalone pages and the survey card is text: AA twin. (privacy/terms/sms: a, .stamp, .cap; survey.php: .kicker, .wm; the app's own survey screen: .v2-svp__brand, .v2-svp__k — all measured 3.1–3.5:1) */ body:not(:has(.fl-root)) :is(a, .stamp, .cap, .kicker, .wm, .brand a), .v2-svp__brand, .v2-svp__k { color: var(--a1Text) !important; } body:not(:has(.fl-root)) .fine, body:not(:has(.fl-root)) .formdemo .fin { color: var(--body) !important; } /* the recipient demo's "Anonymous · shared with care" chip: --muted on a tint (4.11) */ .fl-root [style*="background: var(--tint1)"] [style*="color: var(--muted)"], .fl-root [style*="background: var(--tint2)"] [style*="color: var(--muted)"] { color: var(--body) !important; } body:not(:has(.fl-root)):not(.embed) { background-color: var(--canvas) !important; background-image: radial-gradient(760px 540px at 89% -8%, color-mix(in oklab, var(--a1) 56%, transparent) 0%, color-mix(in oklab, var(--a1) 22%, transparent) 34%, transparent 70%), radial-gradient(1600px 1150px at 94% -22%, color-mix(in oklab, var(--a1) 12%, transparent) 0%, color-mix(in oklab, var(--a1) 4%, transparent) 46%, transparent 74%), radial-gradient(880px 600px at 4% 112%, color-mix(in oklab, var(--velvet, var(--canvas)) 84%, white 12%) 0%, transparent 60%), radial-gradient(126% 104% at 68% 16%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .16) 46%, rgba(0, 0, 0, .38) 74%, rgba(0, 0, 0, .60) 100%), linear-gradient(168deg, var(--velvet, var(--canvas)) 0%, var(--canvas) 60%), var(--p-grain) !important; background-size: auto, auto, auto, auto, auto, 128px 128px !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important; background-attachment: fixed, fixed, fixed, fixed, fixed, scroll !important; } body:not(:has(.fl-root)):has(.brand > a) .brand a { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding-inline: 0 !important; color: var(--onCanvas) !important; --logo: var(--onCanvas); --glint: color-mix(in oklab, var(--canvas) 82%, black); --pupil: var(--onCanvas); text-shadow: none; } /* [stripped by garden/core-strip.json] */ body:not(:has(.fl-root)):has(.brand > a) .pagefoot .pill { background: color-mix(in oklab, var(--onCanvas) 7%, transparent) !important; border-color: color-mix(in oklab, var(--onCanvas) 16%, transparent) !important; box-shadow: none !important; backdrop-filter: none !important; color: var(--onCanvasMuted) !important; } body:not(:has(.fl-root)):has(.brand > a) .pagefoot .pill a { color: var(--onCanvasBody) !important; } /* ── FACES IN THE DARK ROOMS (verify pass, 2026-08-17) ───────────────────── palettes.css carries per-palette .fl-hero-logo overrides written for the OLD ember/midnight logos (mint lids, cream pupils). Under the Parlor those rooms have paper-white eye whites, so pupils vanished and expression lids came out mint-on-orange / coral-on-steel while the blink lids in the same eye were dark. One lid token, one pupil, every face, every room — asserted at (0,2,0). */ [data-palette] .fl-hero-logo, [data-palette] .fl-logo, [data-palette] .fl-cere__face, [data-palette] .v2-ob__face, [data-palette] .fl-ab-fig, [data-palette] .fl-ab-ctaface { --logoSoft: color-mix(in oklab, var(--sheet) 70%, var(--logo)); } [data-palette="ember"] .fl-hero-logo, [data-palette="ember"] .fl-logo, [data-palette="midnight"] .fl-hero-logo, [data-palette="midnight"] .fl-logo { --pupil: var(--canvas); } /* the blink frames use the same lid token as the expression faces */ .fl-lidf1 > path:first-child, .fl-lidf2 > circle { fill: var(--logoSoft) !important; } /* ═══ GARDEN FRAGMENT frag-a-foundation.css ═══ */ /* ═════════════════════════════════════════════════════════════════════════════ frag-a-foundation.css — THE GARDEN · FRAGMENT A (tokens · materials · type) Owner: builder A. Assembled by garden/assemble.py AFTER parlor.css (the core) and BEFORE fragments B, C and D. Spec: garden/GARDEN-SPEC.md §2, §3.2b, §3.5, §3.7, §4.2–4.5, §7.2. WHAT LIVES HERE, AND NOWHERE ELSE A1 the @font-face block + the alias plan (§4.2). A is the ONLY fragment that may declare a font face. A2 the :root shared MATERIAL tokens (§2.2) — geometry, motion, textures, depth, letterpress, and every --g-* glyph mask. A3 the six palette blocks (§2.4–2.8) with the headers patch-api.py's _ROOM_HEAD parses, plus the S-token stock inks of THE SURFACE LAW (§3.2b) and the standalone --boxGlow defaults (§3.7). A4 the derived :root block (§2.3). A5 the three type roles (§4.3 display · §4.4 voice · §4.5 small caps). INVARIANTS (any of these breaking is a build stopper) • --p-grain: url(patterns/grain-parlor.png) verbatim — t_persona asserts it. • --wall: none present — t_persona asserts it. • --p-rad: 3px. • every asset URL RELATIVE (url(fonts/…), url(patterns/…)); an absolute path breaks the standalone pages served from sub-paths. • every data URI percent-encoded: the embedder refuses any CSS carrying a literal closing-tag sequence (an unescaped %3C%2F pair) — it would break out of the