/* Theme Name: PayGen Theme URI: https://paygennow.com Author: NewGen Business Solutions Author URI: https://newgennow.com Description: Block theme for paygennow.com β€” payment processing built natively into Oracle NetSuite, by NewGen Business Solutions. Design tokens live in theme.json; this file carries only what theme.json cannot express. Requires at least: 6.7 Tested up to: 7.0 Requires PHP: 8.1 Version: 0.26.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: paygen Tags: block-theme, business, one-column, custom-colors, custom-menu, editor-style, full-site-editing */ /* =========================================================== Everything expressible in theme.json belongs in theme.json. This file carries only what the schema genuinely cannot do: block style variations, the canvas/ledger hosts, and the hairline lattice. NO LITERAL COLOURS OR SIZES. Every value below is a theme.json token reference. =========================================================== */ /* =========================================================== Fluent Forms β€” the demo request form design-system.md Β§7.7. Added 2026-09-02 with form 3. The plugin ships its own stylesheet; this overrides it from the theme so no plugin template is touched and nothing is lost on a plugin update. Selectors are the plugin's real DOM, read off a `do_shortcode()` render on the box, not guessed: .ff-el-group wraps a field, .ff-el-input--label the label, .ff-el-input--content the control, .ff-el-form-control IS the input/select/textarea. SCOPED TO .pg-form so it cannot reach a form added elsewhere later. Everything is a token; there is not a literal colour or size below. πŸ”΄ TURNSTILE IS NOT STYLED, HIDDEN OR MOVED. The widget is a real control that must stay visible and clickable; the only rule touching it reserves vertical space. Do not add display/visibility/position/transform rules to .cf-turnstile. =========================================================== */ .pg-form .frm-fluent-form { display: grid; gap: var(--wp--preset--spacing--60); } .pg-form .ff-el-group { margin-bottom: 0; } /* Label β€” the eyebrow treatment, per Β§7.7: mono, uppercase, muted, sitting above the field. */ .pg-form .ff-el-input--label label { color: var(--wp--preset--color--muted); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs-mono); font-weight: 400; letter-spacing: var(--wp--custom--kicker--letter-spacing); line-height: 1.4; text-transform: var(--wp--custom--kicker--text-transform); } .pg-form .ff-el-input--label { margin-bottom: var(--wp--preset--spacing--20); } .pg-form .ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--error); } /* Controls. THE FONT SIZE IS THE ONE PLACE THE COMP IS OVERRULED β€” design-system.md Β§C8: the design specs 15.5px and trap 16 says anything under 16px triggers iOS focus zoom. --control--min-font-size is 1rem and is not negotiable. */ .pg-form .ff-el-form-control { background-color: var(--wp--preset--color--base-white); border: 1px solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--custom--control--min-font-size); line-height: 1.5; min-height: var(--wp--custom--control--touch-target); padding: var(--wp--custom--control--padding); transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing); width: 100%; } .pg-form textarea.ff-el-form-control { min-height: calc(var(--wp--custom--control--touch-target) * 2.5); resize: vertical; } .pg-form .ff-el-form-control::placeholder { color: var(--wp--preset--color--disabled-text); opacity: 1; } /* Focus. Β§7.7 says `outline: none` with a border-color shift; we keep BOTH. The design's own rule list also requires a 2px ring at 3px offset on every focusable element, and dropping the outline here would take the SC 2.4.7 indicator with it. The border shift is the comp's signal, the ring is the accessible one. */ .pg-form .ff-el-form-control:focus { border-color: var(--wp--preset--color--accent-blue); } /* Errors β€” never colour-only: the plugin prints a message element, this only carries the colour. */ .pg-form .ff-el-form-control.has-error, .pg-form .ff-el-form-control[aria-invalid="true"] { border-color: var(--wp--preset--color--error); } .pg-form .error.text-danger, .pg-form .ff-el-is-error .error { color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--s); margin-top: var(--wp--preset--spacing--20); } /* Submit β€” matches theme.json's button element exactly, because the plugin's button is not a wp-element-button and inherits none of it. The 15px/28px padding is DUPLICATED from theme.json styles.elements.button, which hardcodes it too; there is no preset for either value. If that padding changes, change it here as well β€” nothing enforces the pairing. */ .pg-form .ff-btn-submit { background-color: var(--wp--preset--color--accent-green); border: 0; border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--base-navy); cursor: pointer; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--custom--control--min-font-size); font-weight: 600; line-height: 1.2; min-height: var(--wp--custom--control--touch-target); padding: 15px 28px; transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing); width: 100%; } .pg-form .ff-btn-submit:hover, .pg-form .ff-btn-submit:focus { background-color: var(--wp--preset--color--accent-green-light); color: var(--wp--preset--color--base-navy); } /* The name field is laid out as a table by the plugin; strip the cell padding so it lines up with the other fields. */ .pg-form .ff-t-container, .pg-form .ff-t-cell { padding: 0; } /* TURNSTILE β€” space only. See the header of this section. */ .pg-form .cf-turnstile { margin-block: var(--wp--preset--spacing--40); } /* Confirmation β€” the design's "Got it" panel (Β§C9). */ .pg-form .ff-message-success { background-color: var(--wp--preset--color--status-success-surface); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card); color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--70); } /* --- Band seams inside
------------------------------ The 0.14.0 rule above fixed the THREE ROOT children. This fixes the bands, one level below it, which the root selector cannot reach. Core opts every blockGap theme into a SECOND gap rule, on every flow container: :root :where(.is-layout-flow) > * { margin-block-start: } `.entry-content` is `is-layout-flow`, so every band took `margin-top: 26px` from its own margin β€” the same spacing-60 token, a different selector. Measured 2026-09-02 at 26.0px on ALL THIRTEEN band boundaries across the four pages (page 8 nine, 17 two, 18 one, 3 one). Three of the thirteen painted as white stripes: a body-white gap only shows where a non-white band sits on BOTH sides. #cycleβ†’#platform was the worst β€” both surface, and framed by a border-bottom and a border-top, so it read as surface Β· line Β· white Β· line Β· surface. NO DESIGN INTENT IS BEING REMOVED. Every band owns its vertical rhythm through --wp--custom--section--rhythm padding; the 26px is core's default leaking through. Recolouring it instead would mean a per-boundary colour decision at thirteen boundaries β€” this is one rule. ⚠️ SPECIFICITY IS NOT THE SAME AS THE ROOT CASE. Core's root selector is (0,0,0); THIS one is (0,1,0), because `:root` counts as a pseudo-class. A (0,1,0) override would only tie and fall back to source order, which is not dependable β€” global styles can be printed inline and after this sheet (trap 30). Two classes gives (0,2,0) and wins outright. SCOPED TO DIRECT CHILDREN ONLY. `>` means the bands and nothing else: flow spacing INSIDE a band comes from the same core rule applied to nested `is-layout-flow` containers, and is deliberately untouched. ---------------------------------------------------------- */ .entry-content.is-layout-flow > * { margin-block-start: 0; } /* --- Root band seams -------------------------------------- Core opts every blockGap-supporting theme into :where(.wp-site-blocks) > * { margin-block-start: ; } and our gap is spacing 60 = 26px. The three root children are
,
and