/* ============================================================================ fc-section.css — the universal section system (fcbrands-api.netlify.app) PROPOSAL / OPT-IN. Nothing loads this yet. Adding it changes no existing page: every rule is scoped to .fcb-cfg[data-…] or an fc- class, so a section only picks it up when a shortcode asks for it. WHY IT EXISTS Six different container widths across sections that share a page (event 1600, tickettypes/links 1500, payment 1200, tickets 1100, signup 760) and a bespoke type ramp in each. Nobody chose that — each section was built to look right on its own and no layer defined what "a section" is. This is that layer. SCOPE — this file is the section BOX only. The TYPE half (eyebrow, headline scale, rhythm, .fc-sechead) is Newman's, in docs/DESIGN-TOKENS.md, measured from real usage — 22 eyebrow declarations with EIGHT different letter-spacings. His values win because they were counted; mine were plausible. Two files, one seam, no rival ramps. NOT EVERYTHING SHOULD ADOPT THIS. Some sections are bespoke by design — the lineup is a custom-built type object, not "a section with a headline in it". Making it consume the shared ramp would flatten the thing that makes it work. Bespoke sections are marked `system: "bespoke"` in the registry and are NEVER migrated. Unset means "not decided yet", which also means do not touch. Adoption is opt-in, per section, by its owner — there is no sweep. THE THREE TIERS, and the order matters 1 BRAND one block per brand. The scale, the palette, the face. 2 PRESET what a shortcode asks for: width="mid" pad="l" register="light" 3 OVERRIDE a per-placement escape hatch, always available, always last The embed plugin already wraps every fragment in .fcb-cfg and forwards any shortcode attribute onto it as data-*. So this file needs no PHP change to work — it styles a wrapper that is already there. ============================================================================ */ /* ---------------------------------------------------------------- 1 · BRAND */ /* Neutral defaults. A brand block below overrides only what differs, so a new brand starts from something sane rather than from nothing. */ :root { /* widths — the vocabulary, not the values */ --fc-w-full: 100%; --fc-w-wide: 1500px; --fc-w-mid: 1200px; --fc-w-narrow: 860px; --fc-w-text: 62ch; /* reading measure, for prose columns */ /* rhythm */ --fc-pad-none: 0px; --fc-pad-s: clamp(24px, 4vw, 48px); --fc-pad-m: clamp(40px, 7vw, 96px); --fc-pad-l: clamp(60px, 10vw, 140px); --fc-gutter: clamp(20px, 5vw, 64px); /* type — the FACES only. Sizes, tracking and rhythm are the type stylesheet's job (--fc-eyebrow-*, --fc-h-hero|major|minor, --fc-stack-*). Defining a second ramp here is exactly the drift this whole exercise exists to end. */ --fc-cond: "helvetica-neue-lt-pro-cond", "helvetica-neue-lt-pro", Arial, sans-serif; --fc-sans: "helvetica-neue-lt-pro", Arial, sans-serif; --fc-body: clamp(15px, 1.7vw, 19px); --fc-lead: 1.6; /* colour — register-aware, so a section flips by swapping these four */ --fc-ink: #eaf6ff; --fc-paper: transparent; --fc-accent: #6BCEE8; --fc-rule: rgba(234, 246, 255, .24); } /* Temper. A second brand adds its own block and changes nothing here. */ [data-brand="temper"], .fc-brand-temper { --fc-accent: #6BCEE8; --fc-ink: #eaf6ff; } /* LIGHT register. Set by body.fc-light (the site-wide invert) or per section via register="light". Both routes land on the same four tokens on purpose. */ body.fc-light, .fcb-cfg[data-register="light"] { --fc-ink: #0a0f16; --fc-paper: #eff2ee; --fc-accent: #0f7f9c; --fc-rule: rgba(10, 15, 22, .22); } .fcb-cfg[data-register="dark"] { --fc-ink: #eaf6ff; --fc-paper: #06090e; --fc-accent: #6BCEE8; --fc-rule: rgba(234, 246, 255, .24); } /* --------------------------------------------------------------- 2 · PRESET */ /* Applied to the wrapper the plugin already emits. A section opts in by being placed with the attribute; without one, nothing here applies and the section keeps whatever it does today. */ .fcb-cfg[data-width] > * { max-width: var(--fc-w, var(--fc-w-mid)); margin-inline: auto; width: 100%; } .fcb-cfg[data-width="full"] { --fc-w: var(--fc-w-full); } .fcb-cfg[data-width="wide"] { --fc-w: var(--fc-w-wide); } .fcb-cfg[data-width="mid"] { --fc-w: var(--fc-w-mid); } .fcb-cfg[data-width="narrow"] { --fc-w: var(--fc-w-narrow); } .fcb-cfg[data-width="text"] { --fc-w: var(--fc-w-text); } .fcb-cfg[data-pad] > * { padding-block: var(--fc-p, var(--fc-pad-m)); } .fcb-cfg[data-pad="none"] { --fc-p: var(--fc-pad-none); } .fcb-cfg[data-pad="s"] { --fc-p: var(--fc-pad-s); } .fcb-cfg[data-pad="m"] { --fc-p: var(--fc-pad-m); } .fcb-cfg[data-pad="l"] { --fc-p: var(--fc-pad-l); } .fcb-cfg[data-gutter="none"] > * { padding-inline: 0; } .fcb-cfg[data-gutter="on"] > * { padding-inline: var(--fc-gutter); } .fcb-cfg[data-align="left"] > * { margin-inline: 0 auto; } .fcb-cfg[data-align="right"] > * { margin-inline: auto 0; } /* register paints the box, not just the text — otherwise a light section on a dark page renders dark ink on a dark background, which is the failure people report as "the invert is broken". */ .fcb-cfg[data-register="light"], .fcb-cfg[data-register="dark"] { background: var(--fc-paper); color: var(--fc-ink); } /* ---------------------------------------------------------- box-owned parts */ /* Body copy and the divider RULE belong to the box (measure and section joins). Eyebrow, headline steps and .fc-sechead belong to the type stylesheet — see docs/DESIGN-TOKENS.md. Deliberately not duplicated here. */ .fc-body { font-family: var(--fc-sans); font-weight: 300; font-size: var(--fc-body); line-height: var(--fc-lead); color: var(--fc-ink); max-width: var(--fc-w-text); } .fc-divider { height: 1px; width: 100%; background: var(--fc-rule); border: 0; margin: 0; } .fc-divider.thick { height: 2px; background: var(--fc-ink); opacity: .9; } /* ---------------------------------------------- CLASS FORMS — for hand-placed markup. The presets above key off .fcb-cfg[data-*], which only exists on a shortcode-embedded fragment. Anything typed by hand in Oxygen or a WP editor has no such wrapper, so every preset also has a plain class. Same tokens, same values — one system whether the markup came from a fragment or from a person. ---------------------------------------------------------------------------- */ .fc-w-full, .fc-w-wide, .fc-w-mid, .fc-w-narrow, .fc-w-text { margin-inline: auto; width: 100%; } .fc-w-full { max-width: var(--fc-w-full); } .fc-w-wide { max-width: var(--fc-w-wide); } .fc-w-mid { max-width: var(--fc-w-mid); } .fc-w-narrow { max-width: var(--fc-w-narrow); } .fc-w-text { max-width: var(--fc-w-text); } .fc-pad-none { padding-block: var(--fc-pad-none); } .fc-pad-s { padding-block: var(--fc-pad-s); } .fc-pad-m { padding-block: var(--fc-pad-m); } .fc-pad-l { padding-block: var(--fc-pad-l); } .fc-gutter { padding-inline: var(--fc-gutter); } .fc-align-left { margin-inline: 0 auto; } .fc-align-right { margin-inline: auto 0; } .fc-center { text-align: center; } /* register as a class, for a hand-built block that should read light on a dark page (or the reverse). Paints the box, same as the attribute form. */ .fc-light-register { --fc-ink:#0a0f16; --fc-paper:#eff2ee; --fc-accent:#0f7f9c; --fc-rule:rgba(10,15,22,.22); background:var(--fc-paper); color:var(--fc-ink); } .fc-dark-register { --fc-ink:#eaf6ff; --fc-paper:#06090e; --fc-accent:#6BCEE8; --fc-rule:rgba(234,246,255,.24); background:var(--fc-paper); color:var(--fc-ink); } /* colour helpers — so hand-placed type picks up the brand rather than a hex someone pasted from a screenshot */ .fc-ink { color: var(--fc-ink); } .fc-accent { color: var(--fc-accent); } /* Explicit opt-OUT. Put on anything bespoke that must never inherit the system, so an accidental ancestor class cannot reach into it. */ .fc-bespoke, .fc-bespoke * { max-width: none; } /* ------------------------------------------------------------- 3 · OVERRIDE */ /* Always available, always wins, and deliberately ugly to type so it reads as an exception rather than a habit: [temper_x width="mid" style="--fc-w-mid:1080px; --fc-pad-l:80px"] Any token above can be set inline on the wrapper. Nothing here to configure — this comment IS the feature, because custom properties already cascade. */ /* Escape hatch for a one-off width that deserves no preset name. */ .fcb-cfg[data-width]:not([data-width="full"]):not([data-width="wide"]):not([data-width="mid"]):not([data-width="narrow"]):not([data-width="text"]) { --fc-w: attr(data-width type(), var(--fc-w-mid)); /* progressive: ignored where attr() types are unsupported */ } @media (prefers-reduced-motion: reduce) { .fcb-cfg * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }