/* Theme Name: Plinth Theme URI: https://bullhornforwordpress.com/ Description: Block theme for bullhornforwordpress.com. Documentation-dominant marketing and reference site. Editorial pages are assembled from blocks; reference pages render from fields via classic templates. Version: 0.3.0 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 8.1 Text Domain: plinth Tags: block-theme, full-site-editing License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* Everything visual lives in theme.json. This file exists for the theme header and for the three things theme.json cannot express: @font-face, @keyframes, and resets. Do not add component styles here — blocks carry their own. */ @font-face { font-family: Inter; font-style: normal; /* Variable font: one request covers 400/500/600/700. Four static weights would have been four requests for the same coverage. The previous four @font-face rules pointed at files that did not exist (defect D-17), so every page issued four failing requests and none of the weights applied. */ font-weight: 100 900; font-display: swap; src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'); } /* --------------------------------------------------------------------------- Metric-matched fallback. font-display:swap paints the text in Arial first and repaints it in Inter when the font arrives. Arial's glyphs are wider (0.5562em average advance against Inter's 0.5269em) and its line box is a different height, so every line in the document moved on the swap. Lighthouse measured the result as CLS 1.206 on the API-documentation and comparison specimens at 412px, and 0.933 on the hub — against a target of 0.1. It did not show up in manual testing because the font was already cached; it only happens on a first, cold visit, which is exactly the visit that matters. These overrides are derived from the shipped font file itself, not from a published table: Inter is unitsPerEm 2048, hhea ascent 1984, descent -494, line gap 0, and averages 1079.1 units of advance across the lowercase alphabet and space. See the working in the FOUNDATION-003 notes. size-adjust 0.5269em / 0.5562em = 94.74% ascent-override (1984/2048) / 0.9474 = 102.25% descent-override (494/2048) / 0.9474 = 25.46% With the fallback occupying the same space as the real font, the swap is invisible and contributes no shift. --------------------------------------------------------------------------- */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); ascent-override: 102.25%; descent-override: 25.46%; line-gap-override: 0%; size-adjust: 94.74%; } /* Self-hosted. No Google Fonts request: the design system caps the dependency at Inter, and a third-party font request is a GDPR question we do not need. */ :where(:focus-visible) { outline: 2px solid var(--wp--preset--color--navy-700); outline-offset: 2px; } /* The one permitted motion: 150ms colour and opacity. Nothing else animates. */ :where(a, button, summary, input, select, textarea, .wp-block-button__link) { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* Containment, applied once rather than per block. Every flex and grid child in this build must be able to shrink; the mobile rounds proved this is the single most common source of horizontal overflow. */ :where(.plinth-row, .plinth-grid) > * { min-width: 0; } /* Skip link is visually hidden until focused. */ .plinth-skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --------------------------------------------------------------------------- Long unbroken tokens. Bullhorn field names (customTextBlock37), REST paths, code identifiers and raw URLs are ordinary content on this site, and they arrive inside editor fields where no author will think to add a soft hyphen. The theme already set overflow-wrap:anywhere in 149 inline attributes and 38 stylesheet rules, and it was not enough. break-word deliberately does NOT reduce an element's min-content contribution: a 140-character token still forces every flex and grid ancestor to that width, so the ancestors grow, the document grows with them and the whole page scrolls sideways — at 1920px just as much as at 320px. overflow-wrap:anywhere is the value that does feed back into intrinsic sizing, which is what actually stops the growth. Visually the two behave identically for normal prose: both break a word only when it cannot fit. The difference is only in how ancestors are measured. Preformatted content is exempt: overflow-wrap does not apply under white-space:pre, and code blocks are meant to scroll inside their own container rather than wrap. --------------------------------------------------------------------------- */ body { overflow-wrap: anywhere; } pre, pre code, .plinth-code, .plinth-code * { overflow-wrap: normal; } /* Inline in prose is NOT exempt: a token like customTextBlock37 inside a sentence must break rather than push the line out. Only preformatted blocks, which scroll inside their own container, keep normal wrapping. */ /* Flex and grid children default to min-width:auto, which is the other half of the same problem: it refuses to shrink below the content's minimum size. */ .plinth-row > *, .plinth-grid > * { min-width: 0; } /* --------------------------------------------------------------------------- Grid tracks must be able to collapse. repeat(auto-fit, minmax(320px, 1fr)) does not shrink below 320px. At a 320px viewport the content column is 240px wide after the 40px page gutters, so any track minimum above 240px pushed its grid — and the whole document — wider than the screen. Eleven of the fourteen grids in the theme used minima between 260px and 380px. minmax(min(320px, 100%), 1fr) keeps the intended minimum wherever there is room and collapses to the container width where there is not. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Badge. Every tone pairs its colour with a text label AND an icon shape, so colour is never the only carrier of meaning. The layout is shared; only the three colours change per tone. --------------------------------------------------------------------------- */ .plinth-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 7px; border-radius: var(--wp--custom--radius--base); border: 1px solid transparent; font-size: var(--wp--preset--font-size--caption); line-height: 18px; font-weight: 600; white-space: nowrap; } .plinth-badge--supported { background: var(--wp--preset--color--success-100); border-color: var(--wp--preset--color--success-600); color: var(--wp--preset--color--success-600); } .plinth-badge--partial { background: var(--wp--preset--color--warning-100); border-color: var(--wp--preset--color--warning-600); color: var(--wp--preset--color--text); } .plinth-badge--unsupported { background: var(--wp--preset--color--surface-sunken); border-color: var(--wp--preset--color--border-strong); color: var(--wp--preset--color--text-secondary); } .plinth-badge--beta { background: var(--wp--preset--color--teal-100); border-color: var(--wp--preset--color--teal-600); color: var(--wp--preset--color--teal-700); } .plinth-badge--deprecated { background: var(--wp--preset--color--error-100); border-color: var(--wp--preset--color--error-600); color: var(--wp--preset--color--error-600); } .plinth-badge--pro { background: var(--wp--preset--color--rust-100); border-color: var(--wp--preset--color--rust-600); color: var(--wp--preset--color--rust-700); } .plinth-badge--free { background: var(--wp--preset--color--navy-100); border-color: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--navy-800); } .plinth-badge--info { background: var(--wp--preset--color--navy-100); border-color: var(--wp--preset--color--navy-700); color: var(--wp--preset--color--navy-800); } /* Comparison feature tables (single-comparison.php). These declarations were emitted once per product per row. On the seven-product specimen the page carried 647 inline style attributes, 76.3 KB, 30.4% of the document. */ .plinth-cmp { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); min-width: 480px; } .plinth-cmp__headrow { background: var(--wp--preset--color--surface, #f9fafb); } .plinth-cmp__feathead, .plinth-cmp__prodhead { padding: 10px 14px; font-weight: 600; border-bottom: 2px solid var(--wp--preset--color--border); } .plinth-cmp__feathead { text-align: left; width: 40%; } .plinth-cmp__prodhead { text-align: center; overflow-wrap: anywhere; } .plinth-cmp__feat, .plinth-cmp__cell { padding: 10px 14px; border-top: 1px solid var(--wp--preset--color--border); vertical-align: middle; } .plinth-cmp__feat { overflow-wrap: anywhere; } .plinth-cmp__cell { text-align: center; } /* The design system sizes every box from its border (the approved design files set this globally). Without it, a 1280px container with 40px padding ran 1360px wide and content sat 80px wider than the design (STAGE-1 V-01). */ *, *::before, *::after { box-sizing: border-box; } /* Heading size presets. WordPress defines a preset slug ending in a digit with a hyphen (h3 -> --wp--preset--font-size--h-3) but writes references to it, including theme.json's own var:preset|font-size|h3, without one. Every h1-h4 size therefore resolved to nothing and fell back to 16px, site-wide (found in STAGE-1 design fidelity work, V-02). These aliases make both spellings resolve to the one defined value. */ :root { --wp--preset--font-size--h1: var(--wp--preset--font-size--h-1); --wp--preset--font-size--h2: var(--wp--preset--font-size--h-2); --wp--preset--font-size--h3: var(--wp--preset--font-size--h-3); --wp--preset--font-size--h4: var(--wp--preset--font-size--h-4); } /* Header, main, closing band and footer sit edge to edge (no white strips between navy bands). body: outranks WordPress's :root :where() gap rule. */ body .wp-site-blocks > * { margin-block-start: 0; }