/* delist.ai — content pages, shared foundation. The tokens are the landing's Venice re-theme of Organic, copied verbatim: one palette sitewide, no content-page variant. What differs from the landing is only what has to — see the notes on the nav and the ground below. Load order on every content page: content-base.css → content-prose.css → content-blocks.css → page CSS ds-base.js is NOT in that chain any more. It injected Organic's styles.css, which is where this package silently got its element base layer and its button appearance from — neither is present on delist.ai, so a converted page was inheriting both from the OLD stylesheet. §20 of the matrix has the full account. The three sheets are now self-sufficient: fonts, tokens, element layer, all here. */ @import url('/fonts.css'); :root { /* — one namespace, and it is --color-*. Reversed from the last drop. — I had this backwards and the branch is right. My reasoning was that ~580 references were being renamed --color-* → --ds-* on every drop, so moving three files beat moving 360 pages. The fact that argument missed: --ds-* is not a free namespace. site.css already owns it — --ds-paper, --ds-ink, --ds-indigo, --ds-cta, --ds-coral, --ds-r-*, --ds-container, --ds-t-* — and that is the stylesheet we are migrating OFF. Declaring --ds-bg / --ds-text / --ds-accent here put two different design systems in one namespace on any page that loads both, which is a collision, not a rename cost. README's "reference --ds-*, do not redeclare" was written about site.css's family and I read it as an instruction to extend it. It was not. One namespace, --color-*, no aliases, no duplicate declarations. */ --color-bg: #efeee3; --color-text: #1d3b57; --font-heading: "Playfair Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --font-heading-weight: 500; --color-accent: #1f6bb5; --color-accent-100: #e3edf6; --color-accent-200: #c8dcee; --color-accent-300: #a2c4e1; --color-accent-400: #6fa3cf; --color-accent-500: #1f6bb5; --color-accent-600: #1a5d9f; --color-accent-700: #174f88; --color-accent-800: #123e6b; --color-accent-900: #0d2e50; --color-accent-2: #71875a; --color-accent-2-100: #ecefe4; --color-accent-2-200: #dde3cd; --color-accent-2-300: #c3cda9; --color-accent-2-400: #9cad7f; --color-accent-2-500: #71875a; --color-accent-2-600: #5f744b; --color-accent-2-700: #4d5e3d; --color-accent-2-800: #3e4c31; --color-accent-2-900: #2f3a26; --color-neutral-100: #fbfaf3; --color-neutral-200: #f2f1e7; --color-neutral-300: #e2e1d4; --color-neutral-400: #c3c5bc; --color-neutral-500: #9aa0a0; --color-neutral-600: #6f7b83; --color-neutral-700: #4d5f6e; --color-neutral-800: #33475a; --color-neutral-900: #1d3145; --color-surface: #fbfaf3; --color-divider: color-mix(in srgb, #1d3b57 18%, transparent); /* — the two rhythms — --leading is the marketing rhythm, unchanged from the landing: 28px, generous, built for sections that breathe. --read is the reading rhythm: 30px, the line box of 18px body copy. They are deliberately different numbers and they do NOT interleave — an article body never sits inside a marketing grid, and a marketing band never tries to align to a paragraph. Every content page uses --leading for its furniture (bands, cards, nav, footer) and --read for prose. */ --leading: 28px; --half: 14px; --read: 30px; --edge: clamp(20px, 5vw, 72px); --measure: 68ch; } /* ═══════════════════════════════════════════════════════════════════════════ THE ELEMENT BASE LAYER — everything :where(), so it is (0,0,0). ═══════════════════════════════════════════════════════════════════════════ This package shipped no element layer, so a converted page was taking p, ul, ol, h2, a, img, tr, td, summary, strong and sup from the OLD stylesheet — 87 elements at its colours, 25 at its font family. That is the third instance of one mistake: the prototypes load Organic via ds-base.js, Organic styles bare elements, and I read a rendered prototype as evidence the package was complete. The buttons and the nav drawer were the first two. Every selector here is wrapped in :where() and therefore weighs nothing. That is not defensive habit — it is what makes this layer safe to add underneath ~340 already-converted pages: no rule in any of the three sheets, and no page CSS, changes behaviour because of it. It only fills gaps. */ :where(*, *::before, *::after) { box-sizing: border-box; } :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.14; letter-spacing: -0.012em; margin: 0 0 var(--half); text-wrap: balance; } :where(h1) { font-size: 44px; } :where(h2) { font-size: 31px; } :where(h3) { font-size: 22px; } :where(h4) { font-size: 18px; } :where(h5, h6) { font-size: 15px; } :where(p) { margin: 0 0 var(--half); } :where(ul, ol) { margin: 0 0 var(--half); padding-left: 24px; } :where(li) { margin-bottom: 4px; } :where(a) { color: var(--color-accent-700); text-underline-offset: 3px; } :where(a:hover) { color: var(--color-accent-800); } :where(strong, b) { font-weight: 700; } :where(em, i) { font-style: italic; } :where(small) { font-size: 87.5%; } :where(sup, sub) { font-size: 72%; line-height: 0; } :where(img, svg, video) { display: block; max-width: 100%; } :where(figure, blockquote) { margin: 0; } :where(hr) { height: 1px; border: 0; background: var(--color-divider); margin: var(--leading) 0; } :where(table) { border-collapse: collapse; width: 100%; } :where(th) { text-align: left; font-weight: 700; } :where(th, td) { padding: 10px 14px; vertical-align: top; } :where(code, pre, kbd, samp) { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em; } :where(pre) { overflow-x: auto; margin: 0 0 var(--half); } :where(summary) { cursor: pointer; } :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(fieldset) { margin: 0; padding: 0; border: 0; } :where(legend) { padding: 0; } :where(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); } html { scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 92px; } /* ── Reduced motion: the strong form, as chat-funnel.css already uses. ── The README said "there is no animation on any content page, so this is free" and that is not true: the nav runs 450ms flex-grow and max-width transitions when the scan field takes focus, .btn transitions four properties, and the footer's column arrow animates translate. So the rule is not free and it is not optional. Duration rather than `none`, so anything relying on a transitionend still fires. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; position: relative; overflow-x: clip; text-wrap: pretty; font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); /* clears the fixed pill nav; the landing hides its nav behind a hero and does not need this */ padding-top: 86px; } .btn { font-family: var(--font-body); font-weight: 600; transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── The 44px floor is UNCONDITIONAL, not a mobile rule. ── It used to live only in @media (max-width: 900px), so above the breakpoint .btn fell back to the design system's padding and resolved to 36px — the scan button in the nav measured 30px. 900px is not a touch boundary: an iPad in landscape is 1024px and was getting the small targets. One number, every width. The design system's .btn is 36px and its ghost variant 23px; raised here rather than in the design system so the component is not forked. */ .nav .btn-ghost { min-height: 44px; padding-inline: 14px; } .nav-scan input { min-height: 44px; } /* — no photographic backdrop on content pages — The landing's full-bleed watercolor is ~300KB and is justified by one page that exists to set a mood. Three hundred search entry points cannot carry it: it is the single largest thing on the page and it is decoration. The ground is the same cream, the sheet is the same ivory, the type and color are identical — what is missing is a photograph nobody scrolled here to see. Budget below. */ /* [hidden] must actually hide. The UA stylesheet's [hidden] { display: none } is (0,1,0) and loses to any class that declares display — so .hubsearch { display: grid } left a search field visible and typeable with JS off, doing nothing, which is the exact failure the progressive design exists to avoid. This is a trap for every future component with both a display declaration and an initial hidden state, so it is fixed once here rather than per component. Author rules that need to override it must say so explicitly. */ [hidden] { display: none !important; } a { color: var(--color-accent-700); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 32%, transparent); text-underline-offset: 2px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } a:hover { color: var(--color-accent-800); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; } /* — the sheet — Same ivory card the landing uses, so a visitor arriving from search and a visitor arriving from the home page are demonstrably on one site. */ .sheet { background: var(--color-surface); border-radius: 40px; width: min(1400px, calc(100% - 28px)); margin: 0 auto 18px; box-sizing: border-box; padding: calc(1.5 * var(--leading)) clamp(20px, 5vw, 80px) calc(2.5 * var(--leading)); box-shadow: 0 1px 2px rgba(29, 59, 87, 0.05); } /* — the pill nav, sitewide — Identical component to the landing's. One difference, and it is structural rather than stylistic: the landing's nav starts hidden and slides in once you scroll past the hero, because it would otherwise sit on top of the hero it is introducing. A content page has no hero to clear, and a nav that appears only after scrolling is a nav a search visitor cannot find. So on content pages it is present from load — same pill, same contents, no JS. */ .nav { position: fixed; top: 14px; left: 50%; transform: translate(-50%, 0); z-index: 50; display: flex; align-items: center; width: min(1060px, calc(100% - 2 * var(--edge))); box-sizing: border-box; border-radius: 999px; background: var(--color-bg); box-shadow: 0 6px 20px rgba(29, 59, 87, 0.10); /* 4px, not 10px: the controls inside are now 44px, so the pill would grow to 72px on the old padding. At 4px it lands at ~60px — within 2px of what it was — and body { padding-top } below still clears it. */ padding: 4px 14px 4px 26px; } .nav .nav-brand { margin-right: 10px; display: flex; align-items: center; font-weight: 600; min-height: 44px; padding: 9px 4px; } .nav .nav-brand img { height: 22px; width: auto; display: block; } .nav .nav-scan { margin-right: auto; align-self: center; } /* nav links are standalone actions, so they take the 44px floor like every other control in the pill. Without this they were their 25px line box: the pill is 62px tall and both were centred in it, so this changes no rendered layout. */ .nav a { white-space: nowrap; font-size: 16px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } /* :not(.btn) on the colour, and this is a real bug the branch found. .nav a is (0,1,1) and .btn-ghost is (0,1,0), so a ghost button that is an lost its accent and rendered as body ink. It stayed invisible because features-page.html used