/* fw-preview.css - the free preview of the database pages (Intelligence). Added 22 September 2026. Loaded only on a database page sent to somebody without the Intelligence plan; the password wall adds the tag and the data-fw-preview mark on (functions/api/_preview.js). Without both this file does nothing. Matt's design: the top of the page, nothing clickable, fading into the paywall. The rows behind the fade were never sent - see _preview.js. */ html[data-fw-preview] main { position: relative; max-height: 125vh; overflow: hidden; -webkit-user-select: none; user-select: none; } /* The fade: the page's own background colour, so it works on the light pages and the dark ones alike. */ html[data-fw-preview] main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70vh; background: linear-gradient(to bottom, transparent, var(--paper) 78%); pointer-events: none; z-index: 5; } /* Nothing in the page can be pressed, tabbed to or typed in. fw-preview.js sets `inert` as well, which is what keeps the keyboard out; this is for the moment before it runs. */ html[data-fw-preview] main * { pointer-events: none !important; } /* Counts would read "20 results" - true of the preview, false of the register - so they are hidden rather than left to mislead. */ html[data-fw-preview] #count, html[data-fw-preview] .count, html[data-fw-preview] [data-count] { visibility: hidden !important; } .fw-pv { position: relative; z-index: 6; max-width: 44rem; margin: -6rem auto 3rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); color: var(--ink); border: 1px solid var(--ink); box-shadow: var(--shadow-lg); } .fw-pv__eyebrow { margin: 0 0 .4rem; font-family: var(--font-mono); font-size: .69rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .fw-pv h2 { margin: 0 0 .6rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; } .fw-pv p { margin: 0 0 1rem; color: var(--ink-soft); } .fw-pv__row { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; } .fw-pv__small { margin: 1rem 0 0 !important; font-size: .85rem; } .fw-pv a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } @media (max-width: 640px) { .fw-pv { margin: -4rem 16px 2rem; } }