/* ============================================================================ * BRIEFLY — PRIME FOUNDATION. Shared by every theme in the new generation. * * ── WHY THIS FILE IS THE WHOLE ARGUMENT ───────────────────────────────────── * The eight themes this generation replaces were each bespoke. Vertex was 180 * lines of CSS with no signature script at all; Firstborn was rebuilt to ~505 * lines and a real system, and it is the only one of the eight that worked. * Seven separate stylesheets meant seven separate scopings, seven font * handlings, seven answers to "what is a section header" — and when a preview * came up blank there were eight independent places for the fault to be. * * Here a THEME IS A SKIN: a palette, a type pairing, a motif, a shape * assignment. Roughly 120 lines. Every structural decision lives in this file * and in the shape packs, so "did the foundation load" is one visible question * with one answer, not eight mysteries. * * ── SCOPING, AND THE TRAP IT AVOIDS ───────────────────────────────────────── * Scoped to .bfy-prime, which every section root carries — NOT to a body class. * inject_body_classes() deliberately skips the free theme, so anything scoped * to is dead on exactly the theme every evaluator sees first. That is * how an entire performance layer once silently no-opped on the default theme. * Section-root scoping works in page mode, in a preview iframe, in a block * editor preview and inside a shortcode, because it does not depend on anything * outside the section. * * Themes publish their tokens on .bfy-prime.bfy-, so both classes land on * the same element and specificity is predictable without a single !important. * * ── EVERY var() CARRIES A LITERAL FALLBACK ────────────────────────────────── * The page survives a missing scope class, and a bare var() is invisible to the * contrast auditor — a colour expressed only as var(--x) cannot be scored, so * an unreadable label would pass silently. * ========================================================================== */ /* ── 1. TOKEN CONTRACT ─────────────────────────────────────────────────────── * Defaults only. Each theme overrides the ones that carry its identity and * inherits the rest, which is what keeps a skin to ~120 lines. * -------------------------------------------------------------------------- */ .bfy-prime { /* Canvas and ink. */ --p-bg: #FFFFFF; --p-surface: #FFFFFF; --p-ink: #14171A; --p-muted: #55606B; --p-border: rgba(20, 23, 26, 0.12); --p-brand: #1F4D3D; --p-on-brand: #FFFFFF; /* Type. A ten-step scale, anchored on 16px. Nothing below 12px ships, and running text never goes below 16px — the floor eight shipped themes were still breaking, one of them at 9.9px. */ --p-t-hero: clamp(2.5rem, 6vw, 4.2rem); --p-t-h1: clamp(2.25rem, 5.2vw, 3.9rem); --p-t-display: clamp(2rem, 4vw, 3rem); --p-t-h2: clamp(1.75rem, 3.4vw, 2.7rem); --p-t-h2-sm: clamp(1.35rem, 2.4vw, 1.75rem); --p-t-h3: 1.14rem; --p-t-h4: 1.02rem; --p-t-lead: clamp(1.06rem, 1.4vw, 1.2rem); --p-t-body: 1rem; --p-t-sm: 0.9rem; --p-t-xs: 0.82rem; --p-t-micro: 0.75rem; --p-font-display: system-ui, -apple-system, "Segoe UI", sans-serif; --p-font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --p-lh: 1.6; --p-lh-tight: 1.14; --p-track-tight: -0.015em; /* Rhythm. Three bands, not one improvisation per section. */ --p-sect: clamp(3rem, 5vw, 4.5rem); --p-sect-tight: clamp(2.5rem, 4vw, 3.5rem); --p-sect-loose: clamp(3.25rem, 6vw, 5.5rem); --p-gut: clamp(1.5rem, 4vw, 3rem); /* Containers. ONE page-level width. Seventeen of the shipped themes had more than one — two had eight — so the left edge of the page moved as you scrolled. Nobody reads "1080 vs 1120"; everybody feels it. */ --p-w: 1160px; --p-w-wide: 1320px; --p-w-mid: 900px; --p-w-prose: 720px; --p-w-narrow: 520px; /* Surface treatment — the dial a theme turns to feel soft or engineered. */ --p-radius: 14px; --p-radius-sm: 8px; --p-radius-pill: 999px; --p-shadow: 0 18px 44px rgba(20, 23, 26, 0.10); --p-shadow-sm: 0 6px 18px rgba(20, 23, 26, 0.08); --p-hairline: 1px; --p-ease: cubic-bezier(0.16, 1, 0.3, 1); --p-anchor-off: 6rem; /* The shared component packs read --bfy-*; these bridge onto them so the section header and every shape inherit the theme without knowing it. */ --bfy-title-font: var(--p-font-display, system-ui, sans-serif); --bfy-title-size: var(--p-t-h2, clamp(1.75rem, 3.4vw, 2.7rem)); --bfy-title-ink: var(--p-ink, #14171A); --bfy-lede-font: var(--p-font-body, system-ui, sans-serif); --bfy-lede-size: var(--p-t-lead, clamp(1.06rem, 1.4vw, 1.2rem)); --bfy-lede-ink: var(--p-muted, #55606B); --bfy-eyebrow-ink: var(--p-brand, #1F4D3D); --bfy-eyebrow-bg: var(--p-surface, #FFFFFF); --bfy-eyebrow-border: var(--p-border, rgba(20, 23, 26, 0.12)); --bfy-eyebrow-size:var(--p-t-micro, 0.75rem); --bfy-rule-ink: var(--p-border, rgba(20, 23, 26, 0.12)); --bfy-rule-accent: var(--p-brand, #1F4D3D); --bfy-head-mb: var(--p-sect-tight, clamp(2.5rem, 4vw, 3.5rem)); --bfy-head-measure-wide: var(--p-w, 1160px); --bfy-sect: var(--p-sect, clamp(3rem, 5vw, 4.5rem)); --bfy-gut: var(--p-gut, clamp(1.5rem, 4vw, 3rem)); --bfy-anchor-offset: var(--p-anchor-off, 6rem); --bfy-btn-fill: var(--p-brand, #1F4D3D); --bfy-btn-ink: var(--p-on-brand, #FFFFFF); --bfy-btn-radius: var(--p-radius-sm, 8px); --bfy-quote-bg: var(--p-surface, #FFFFFF); --bfy-quote-border:var(--p-border, rgba(20, 23, 26, 0.12)); --bfy-quote-radius:var(--p-radius, 14px); --bfy-svc-bg: var(--p-surface, #FFFFFF); --bfy-svc-border: var(--p-border, rgba(20, 23, 26, 0.12)); --bfy-svc-radius: var(--p-radius, 14px); --bfy-gal-radius: var(--p-radius, 14px); --bfy-proc-bg: var(--p-surface, #FFFFFF); --bfy-proc-border: var(--p-border, rgba(20, 23, 26, 0.12)); --bfy-proc-radius: var(--p-radius, 14px); --bfy-hero-radius: var(--p-radius, 14px); --bfy-hero-w: var(--p-w, 1160px); font-family: var(--p-font-body, system-ui, sans-serif); font-size: var(--p-t-body, 1rem); line-height: var(--p-lh, 1.6); color: var(--p-ink, #14171A); background: var(--p-bg, #FFFFFF); -webkit-font-smoothing: antialiased; } /* ── 2. SECTION SHELL ────────────────────────────────────────────────────── */ .bfy-prime > section, section.bfy-prime { padding: var(--p-sect, clamp(3rem, 5vw, 4.5rem)) var(--p-gut, clamp(1.5rem, 4vw, 3rem)); box-sizing: border-box; } .bfy-wrap { max-width: var(--p-w, 1160px); margin-inline: auto; } .bfy-wrap--mid { max-width: var(--p-w-mid, 900px); } .bfy-wrap--prose { max-width: var(--p-w-prose, 720px); } /* Alternating tone WITHOUT a per-section decision. A band retokenises rather than overriding rule by rule, so anything inside it — including a shape pack that has never heard of this theme — recolours correctly by inheritance. */ .bfy-band { --p-bg: var(--p-band-bg, #F5F6F7); --p-surface: var(--p-band-surface, #FFFFFF); background: var(--p-band-bg, #F5F6F7); } .bfy-band--ink { --p-bg: var(--p-ink-bg, #14171A); --p-surface: var(--p-ink-surface, rgba(255, 255, 255, 0.05)); --p-ink: var(--p-ink-fg, #F7F8F9); --p-muted: var(--p-ink-muted, rgba(247, 248, 249, 0.68)); --p-border: var(--p-ink-border, rgba(255, 255, 255, 0.14)); background: var(--p-ink-bg, #14171A); color: var(--p-ink-fg, #F7F8F9); } /* ── 3. TYPE ─────────────────────────────────────────────────────────────── */ .bfy-prime h1, .bfy-prime h2, .bfy-prime h3, .bfy-prime h4 { font-family: var(--p-font-display, system-ui, sans-serif); line-height: var(--p-lh-tight, 1.14); letter-spacing: var(--p-track-tight, -0.015em); color: var(--p-ink, #14171A); text-wrap: balance; margin: 0; } .bfy-prime h1 { font-size: var(--p-t-h1, clamp(2.25rem, 5.2vw, 3.9rem)); } .bfy-prime h2 { font-size: var(--p-t-h2, clamp(1.75rem, 3.4vw, 2.7rem)); } .bfy-prime h3 { font-size: var(--p-t-h3, 1.14rem); } .bfy-prime h4 { font-size: var(--p-t-h4, 1.02rem); } .bfy-prime p { margin: 0; text-wrap: pretty; } .bfy-lead { font-size: var(--p-t-lead, clamp(1.06rem, 1.4vw, 1.2rem)); color: var(--p-muted, #55606B); } .bfy-micro { font-size: var(--p-t-micro, 0.75rem); letter-spacing: 0.12em; text-transform: uppercase; } /* ── 4. INTERACTIVE FLOOR ──────────────────────────────────────────────────── * 17 of the 28 shipped themes had NO focus state at all — a straight WCAG 2.4.7 * failure and the first thing an accessibility reviewer tabs for. * -------------------------------------------------------------------------- */ .bfy-prime a:focus-visible, .bfy-prime button:focus-visible, .bfy-prime input:focus-visible, .bfy-prime select:focus-visible, .bfy-prime textarea:focus-visible, .bfy-prime summary:focus-visible, .bfy-prime [tabindex]:focus-visible { outline: 3px solid var(--p-brand, #1F4D3D); outline-offset: 3px; border-radius: var(--p-radius-sm, 8px); } /* 16px, always. Below it, iOS Safari zooms the whole page on focus — a real mobile defect that hid for a long time because these styles lived inside PHP string variables and a tag-scoped migration never saw them. */ .bfy-prime input, .bfy-prime select, .bfy-prime textarea { font-size: var(--p-t-body, 1rem); font-family: inherit; width: 100%; padding: 0.8rem 0.95rem; color: var(--p-ink, #14171A); background: var(--p-surface, #FFFFFF); border: var(--p-hairline, 1px) solid var(--p-border, rgba(20, 23, 26, 0.12)); border-radius: var(--p-radius-sm, 8px); box-sizing: border-box; } .bfy-prime label { display: block; margin-bottom: 0.35rem; font-size: var(--p-t-sm, 0.9rem); font-weight: 600; } /* 44px minimum touch target — the most commonly failed item on a mobile accessibility audit, and the cheapest to get right. */ .bfy-prime .bfy-btn, .bfy-prime .bfy-btn-ghost { min-height: 44px; } /* ── 5. MOTION CONTRACT ────────────────────────────────────────────────────── * The hidden state is gated behind .bfy-js, which only the script adds. No-JS, * a blocked script, a missing IntersectionObserver and reduced-motion all fall * through to FULLY VISIBLE. Content can never be trapped invisible. * * This is one implementation, in one file, for every theme. Two already exist * in this codebase and drift between them is the failure this project has met * more than any other — there will not be a third. * -------------------------------------------------------------------------- */ .bfy-js .bfy-rise { opacity: 0; transform: translateY(14px); } .bfy-js .bfy-rise.is-in, .bfy-rise { opacity: 1; transform: none; transition: opacity 0.6s var(--p-ease, ease), transform 0.6s var(--p-ease, ease); } @media (prefers-reduced-motion: reduce) { .bfy-js .bfy-rise { opacity: 1 !important; transform: none !important; } .bfy-prime *, .bfy-prime *::before, .bfy-prime *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ── 6. FORCED COLOURS AND PRINT ─────────────────────────────────────────── */ @media (forced-colors: active) { .bfy-prime [class*="bfy-"] { border-color: CanvasText; } .bfy-band, .bfy-band--ink { background: Canvas; color: CanvasText; } } @media print { .bfy-prime { background: #FFF; color: #000; } .bfy-band, .bfy-band--ink { background: transparent; color: #000; } .bfy-js .bfy-rise { opacity: 1; transform: none; } } /* ── 7. IMAGE PLACEHOLDERS ──────────────────────────────────────────────── v3.5.5 — An unfilled image slot renders as a

with a neutral gradient. On its own that reads as an unfinished wireframe. This makes it read as an intentional "image goes here" panel: a centred picture glyph and a faint inset frame, drawn in the palette's own muted ink. Filled slots are , never matched here. No stock photo is ever injected. */ [data-briefly-img][role="img"] { position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--border, #DDE3EA) 65%, transparent); } [data-briefly-img][role="img"]::after { content: ""; width: clamp(28px, 8%, 48px); aspect-ratio: 1; background-color: var(--wp--preset--color--muted, #8a93a3); opacity: 0.45; /* inline-masked picture glyph — no external asset, tints with the palette */ -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); } @media (forced-colors: active) { [data-briefly-img][role="img"]::after { background-color: CanvasText; opacity: 1; } }