/* Theme Name: Cheapy Theme URI: https://cheapy.co.il/ Author: Cheapy Description: Chrome layer for cheapy.co.il, built to CO-EXIST with the BGpost Custom plugin rather than replace it. The plugin keeps its page templates, per-page assets, SEO handling, font hosting and the MCP management tools. This theme renders the site header and site footer once, from PHP, so they cannot drift page to page — and paints the document ground colour, which no page-level stylesheet can reach. It renders no chat dock: cp-chat-live.js builds its own at body level, which is both correct and what lets the conversation outlive a page. Version: 0.10.3 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: cheapy */ /* ═══════════════════════════════════════════════════════════════ WHAT THIS FILE IS AND IS NOT --------------------------------------------------------------- It is NOT the design system. Tokens, components, the character, the chat and the form surfaces all live in the BRAND BUNDLE the plugin serves (bgpost-brand/cheapy.local.min.css, built from mark/src/cp-{brand,mark,chat,form}.css). Re-declaring any of that here is exactly the stacked-override disease CLAUDE.md records as the thing that killed the previous brand on this stack. This file carries ONLY what cannot be expressed inside the page container — which today is one rule, and it is a real bug fix. ═══════════════════════════════════════════════════════════════ */ /* ═══ the canvas, painted where it can actually be seen ══════════ THE WHITE GAP, AND WHY IT IS NOT A PAGE-LEVEL PROBLEM. --cp-canvas is painted by .cp-doc / .cp-shell, and both of those are classes on the .bgpost-container DIV. So the ground colour only ever covers the container's own box. html and body are left transparent, and a transparent body means the browser paints its own default white behind everything. That is invisible while the container is taller than the viewport and glaring the moment it is not. Measured on the live site 2026-08-29: /loans-compare/ rendered a container 688px tall in a 900px viewport, and elementFromPoint at the bottom of the screen found no painted ancestor at all — 212px of browser white under a page that also has no footer. .cp-bg cannot cover for it: that layer holds four blurred blobs and a masked grid and has no background-color of its own. It belongs HERE rather than in the brand bundle because it is a statement about the document, not about a component — and because the bundle is hand-carried while this ships in the zip. */ html { background: var(--cp-canvas, #EEF1F7); } /* body stays transparent on purpose. Painting it as well would win over html for the canvas propagation and change nothing visible, but it would also start covering pages that deliberately paint their own ground. One owner for the ground colour. */ /* ═══ the foundation, repeated on the chrome ═════════════════════ CLAUDE.md trap 13, at site scale, and this theme is what caused it. The brand bundle scopes the typographic foundation to .cp-page: .cp-doc { font-family: var(--cp-font); color: var(--cp-ink); -webkit-font-smoothing: antialiased } .cp-doc *, .cp-doc *::before, .cp-doc *::after { box-sizing: border-box } That was correct while the header and footer lived INSIDE the page container. This theme moved them out — they are now siblings of .bgpost-container, hanging off — so they inherit none of it and fall back to the UA default. Measured on the live site after the chrome migration: getComputedStyle(document.body).fontFamily === "Times New Roman", and 45 text-bearing elements inherited it — every nav link and the whole footer. Identical on /health/, which had been deployed for days. The .cp-header layout rules DID apply (height 73px, the glass background resolved), so it measured as working while the type was visibly wrong. That is the same shape as the .cp-cat-modal bug CLAUDE.md records: a component that escapes .cp-page must repeat the foundation on its own root. Declared on the chrome elements rather than on body: body is the ground for everything including things the plugin injects, and this theme has no business restyling those. */ .cp-header, .cp-footer { font-family: var(--cp-font, 'Heebo', 'Segoe UI', Arial, sans-serif); color: var(--cp-ink, #0D1526); -webkit-font-smoothing: antialiased; box-sizing: border-box; } .cp-header *, .cp-header *::before, .cp-header *::after, .cp-footer *, .cp-footer *::before, .cp-footer *::after { box-sizing: border-box; } /* THE CHAT DOCK AND LAUNCHER, for the same reason and not by the same route. cp-chat-live.js appends both to document.body, so they escape .cp-page exactly as this theme's chrome does. Everything from .cp-chat inwards was already right — cp-chat.css sets --cp-font on .cp-chat itself — which is why only the dock's own bar was wrong: .cp-dock-title rendered the name in Times New Roman while every message beneath it was correct. Measured on the deployed /health/ 2026-09-01. THIS IS A DUPLICATE OF A RULE IN cp-chat.css AND THAT IS DELIBERATE. The component owns it there, which is where it belongs and where it is now fixed. But cp-chat.css reaches the site inside the BRAND bundle, which deploys on its own schedule through a different tool, while this file ships in the theme zip. Both resolve the same --cp-font token, so they cannot drift to different values; when the brand bundle next ships, this block is redundant rather than wrong, and can go. font-family only. The launcher's tick marks use currentColor. */ .cp-dock, .cp-launcher { font-family: var(--cp-font, 'Heebo', 'Segoe UI', Arial, sans-serif); } /* The footer sits on ink and declares its own light text; restating --cp-ink above must not win over it. The bundle's .cp-footer rule sets color on the element itself, and both are (0,1,0), so source order decides — the bundle is enqueued first and this file second, which would flip it. Restore the footer's own ground explicitly. */ .cp-footer { color: rgba(255, 255, 255, .72); } /* ═══ the swap region ════════════════════════════════════════════ bgpost-canvas.php wraps the post content in
. That element is the seam this theme is built around: everything the theme renders (header, footer, dock) sits OUTSIDE it, so a future partial navigation can replace main's contents while the chrome and the conversation survive untouched. It must not introduce a box of its own — the page inside it is already a full-bleed container. */ .bgpost-main { display: block; min-height: 0; } /* A page whose container is shorter than the viewport should still push its footer to the bottom rather than leaving it floating mid-screen above the canvas. Only applies when THIS theme renders the footer; a page carrying its own baked chrome is untouched. */ body.cp-theme-chrome { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body.cp-theme-chrome > .bgpost-main { flex: 1 0 auto; } body.cp-theme-chrome > .cp-footer { flex: none; } /* ═══ a locked shell that this theme puts a header on ════════════ .cp-shell is height:100dvh with overflow:hidden above the lock breakpoint. This theme's header renders at wp_body_open, OUTSIDE the container, so the two STACKED rather than sharing the viewport and the one surface that must never scroll scrolled by exactly the header's height. Measured on the deployed /health-calculator/ 2026-08-30: viewport 889, document 960, header 71px, overflow 71px. The fix is to let the body own the viewport and hand the shell what is left, rather than doing arithmetic with a header height that changes with the viewport. SCOPED TO THE SAME MEDIA QUERY THAT DOES THE LOCKING, and that is deliberate. Below 900x560 cp-brand.css lets a shell scroll on purpose: a mobile keyboard shrinks the visual viewport and a locked shell then either clips the focused field or fights the browser for it. Overriding the height there would reintroduce exactly that. Only .cp-theme-shell is affected, so a page still carrying baked-in chrome — where the header is a row inside the shell grid and was always accounted for — is untouched. */ @media (min-width: 900px) and (min-height: 560px) { body.cp-theme-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } body.cp-theme-shell > .cp-header { flex: none } body.cp-theme-shell > .bgpost-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* beats .cp-shell's own height and min-height at (0,1,0) */ body.cp-theme-shell .cp-page.cp-shell { flex: 1 1 auto; height: auto; min-height: 0; } }