/* Powershift forms — the scheme token layer Gravity Forms reads through. Front end AND editor canvas (enqueue_block_assets), so the block preview shows the real thing. READ THIS BEFORE EDITING — this file names colours, and inc/gravity-forms.php does not. THE SHAPE OF THE PROBLEM ------------------------ Gravity Forms 2.9 exposes ~730 custom properties, all declared in ONE rule on `.gform-theme--api, .gform-theme--framework` (specificity 0,1,0). Easy to beat — except that GF also prints a per-form block at #gform_wrapper_5[data-form-index="0"].gform-theme, [data-parent-form="5_0"] { … } which is (1,2,0). An ID. No stylesheet of ours can out-specify that, and it is printed on every form whether or not anyone opened the Styles panel, because GF's block-styles layer fills in its own defaults. A plain `.gform-theme--framework { --gf-color-primary: … }` here would silently lose, every time. (Same family of trap as the `:root :where()` one documented at the head of buttons.css — one notch worse, because specificity cannot be matched.) So the GF property map lives in PHP, in inc/gravity-forms.php, printed into GF's own ID-specificity block via its Theme Layers API. That wins. WHY THAT PHP MAP NAMES NO COLOURS, AND THIS FILE DOES ---------------------------------------------------- PHP renders once per form and cannot know what the form is sitting INSIDE. "Dark band" is a CSS fact — an ancestor carrying `has-contrast-background-color` — discoverable only at cascade time. The two cannot be reconciled directly, so the map is an INDIRECTION: PHP : --gf-ctrl-label-color-primary: var(--pwr-form-label, #0f212c) here : .gform_wrapper { --pwr-form-label: var(--wp--preset--color--contrast) } .has-contrast-background-color .gform_wrapper { --pwr-form-label: #fff } A custom property's value is an unresolved token stream until something USES it. The label element computes `color: var(--gf-ctrl-label-color-primary)`, which substitutes to `var(--pwr-form-label)`, which then resolves against what THE LABEL inherits. So the dark band wins by being an ancestor, and never fights GF at all — GF declares no `--pwr-form-*`, so there is nothing here to out-specify. This file only competes with itself. This is the same division glass.css has with header.css: the token layer names the ink, the consumer names no colour of its own. TWO RULES FOR ANYONE EDITING THE MAP ------------------------------------ 1. EVERY indirection carries a literal fallback. `var(--pwr-form-label)` with no fallback is invalid-at-computed-value-time if the token is ever missing, and the declaration collapses to `unset` — an unstyled form rather than a slightly wrong one. The fallbacks below are the light scheme's values, so the worst case is "light form on a dark band", not "no form". 2. The `*-rgb` tokens are BARE CHANNEL TRIPLETS, not colours. GF consumes them as `rgba(var(--gf-color-danger-rgb), 0.03)` — legacy comma syntax — so `#c02b0a` there kills the whole declaration. A `var()` fallback may itself contain commas, which is why `var(--pwr-form-error-rgb, 192, 43, 10)` is legal and means what it looks like. WHY INPUTS ARE SQUARE AND NOT CHAMFERED --------------------------------------- The brand cut is on buttons, cards and images — objects. A field is a slot, and cutting twelve of them turns a form into a sawtooth. It also costs the focus ring: `clip-path` on an input clips its outline away, which is the whole reason buttons.css draws the cut in gradients instead (see its header). Radius is 0 site-wide from theme.json, so square is already the brand's answer. The submit button is the one object in a form, and it keeps its chamfer by being a real Powershift button — see inc/gravity-forms.php. */ /* ══ light — forms on a white or light-grey surface ══════════════════════════════════════ (Was "the real case" until the site went dark — see the dark block's 12 Oct note.) These values are also the PHP map's literal fallbacks, so they are what renders if this stylesheet ever fails to load. */ .gform_wrapper { /* --- the accent: focus rings, checked boxes, progress bars, links --- */ --pwr-form-accent: var(--wp--preset--color--orange); /* #f58228 */ --pwr-form-accent-rgb: 245, 130, 40; --pwr-form-accent-ink: var(--wp--preset--color--base); /* on the accent */ --pwr-form-accent-ink-rgb: 255, 255, 255; /* Hover DEEPENS on light, the way the light glass scheme and the buttons do. */ --pwr-form-accent-hi: var(--wp--preset--color--orange-dark); /* #f05a28 */ /* --- the controls themselves --- */ --pwr-form-ctrl-bg: var(--wp--preset--color--base); --pwr-form-ctrl-bg-rgb: 255, 255, 255; --pwr-form-ctrl-ink: var(--wp--preset--color--contrast); /* #0f212c */ --pwr-form-ctrl-ink-rgb: 15, 33, 44; --pwr-form-ctrl-line: var(--wp--preset--color--grey-bright); /* #d9e0e6 */ /* Disabled and the file-picker's button plate — one step off white, not a grey. */ --pwr-form-ctrl-bg-alt: #f4f6f8; --pwr-form-ctrl-line-off: #c3ced6; /* --- type around the controls --- */ --pwr-form-label: var(--wp--preset--color--contrast); --pwr-form-desc: var(--wp--preset--color--grey); /* #495c73 */ /* Links inside a form — the consent field's privacy-policy link is the one that matters. theme.json's elements.link values, restated because GF's reset strips them (see the rule at the foot of this file). */ --pwr-form-link: var(--wp--preset--color--orange); /* resting is ORANGE — orange-dark is hover-only (Wayne, 2 Oct) */ --pwr-form-link-hi: var(--wp--preset--color--orange-dark); /* --- geometry and motion, scheme-independent but tunable here with everything else --- 48px so a field and a Powershift button stand level when they share a row: the button is 14px padding + 16px text. Re-measure if --wp--custom--button--pad-y ever moves. */ --pwr-form-ctrl-size: 48px; --pwr-form-transition: var(--wp--custom--motion--fast, 120ms); /* --- states --- */ /* The brand has no red, so error keeps GF's, which is already a deep brick rather than a siren and sits acceptably beside orange. Success is the brand green. */ --pwr-form-error: #c02b0a; --pwr-form-error-rgb: 192, 43, 10; --pwr-form-success: var(--wp--preset--color--green); /* #3dad56 */ --pwr-form-success-rgb: 61, 173, 86; /* --- the baked-fill icons --- The select chevron and number spinner are data-URI background images with the colour BAKED IN, not masks, so they do not inherit `color` and will not follow the scheme on their own. Left alone, a dark-grey chevron disappears on an ink band — which is exactly the kind of thing that only shows up once a form lands on dark. `#` must be `%23`. (`--gf-icon-ctrl-search` exists too, for the search field type; no form here uses one, so it is left at GF's default rather than carried as a fourth copy.) */ --pwr-form-icon-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23495c73'/%3E%3C/svg%3E"); --pwr-form-icon-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%23495c73'/%3E%3C/svg%3E"); } /* ══ dark — insurance, not a current case ════════════════════════════════════════════════ No form sits on an ink band today (checked 25 Sep 2026). This exists so that the day one does, it survives rather than rendering as a white form punched into the band — and so that nobody has to rediscover the chevron and the `*-rgb` gotchas under deadline. THE SIGNAL is the class WordPress already prints for a `contrast` background, which is what section-hero-dark and the product/series/case-study heroes all use. `grey-dark` and `grey` are here too because they are the other two grounds dark enough to need white type. `.pwr-form-dark` is the ESCAPE HATCH, and it is the one to reach for over a cover block or a photograph: WordPress prints no background class there, so nothing else can detect it. Add it to any ancestor of the form. WHAT ACTUALLY CHANGES, and why it is more than swapping black for white: · The control plate does NOT go transparent. A transparent input on a dark band reads as a hairline rectangle, not as somewhere to type, and its placeholder lands in the same tonal register as the body copy beside it. It goes to a LIFTED INK — one step up from the band, the same move the mid glass scheme makes — so the field still reads as a recess with an edge, and the band still reads as the ground. · Hover LIFTS instead of deepening (orange → Light Orange). Deep Orange on ink goes muddy at control size; this is the same inversion glass.css documents for the dark scheme. · The secondary ink climbs the ramp. Grey #495c73 is a mid-tone meant for type on white and is nearly invisible on ink, so descriptions move to Light Grey #7f97af — the one grey that holds up on a dark ground. Same trap, same fix, as `--pwr-glass-ink-soft`. */ /* UPDATE 12 Oct 2026 — dark is now THE case. The site went dark (1 Oct) and the painted light bands came off (`wp powershift unpaint`), so a form sits on the Deep Grey ground by default. The first selector makes this scheme the default for every form NOT inside a light surface (white / light-grey paint, the article's white paper, or the `.pwr-form-light` hatch), where the light values above still apply. Without it, Hire now's labels rendered #0f212c on #0f212c — the light fallback on a ground nothing detected as dark. */ .gform_wrapper:not(:is(.has-base-background-color, .has-grey-bright-background-color, .has-grey-light-background-color, .has-grey-light-gradient-background, .pwr-b-paper, .pwr-form-light) .gform_wrapper), .has-contrast-background-color .gform_wrapper, .has-grey-dark-background-color .gform_wrapper, .has-grey-background-color .gform_wrapper, .pwr-form-dark .gform_wrapper, .gform_wrapper.pwr-form-dark { --pwr-form-accent: var(--wp--preset--color--orange); --pwr-form-accent-rgb: 245, 130, 40; --pwr-form-accent-ink: var(--wp--preset--color--contrast); --pwr-form-accent-ink-rgb: 15, 33, 44; --pwr-form-accent-hi: var(--wp--preset--color--orange-light); /* #fdb823 — lifts, not deepens */ /* Lifted ink, not transparent — see above. #1b303d is `contrast` raised far enough to separate from a `contrast` band while still reading as a recess rather than a card. */ --pwr-form-ctrl-bg: #1b303d; --pwr-form-ctrl-bg-rgb: 27, 48, 61; --pwr-form-ctrl-ink: var(--wp--preset--color--base); --pwr-form-ctrl-ink-rgb: 255, 255, 255; /* A white hairline rather than a grey: on ink, a grey edge reads as grime and a white one reads as an edge. Same reasoning as the glass stroke. */ --pwr-form-ctrl-line: rgb(255 255 255 / 0.26); --pwr-form-ctrl-bg-alt: #24394a; --pwr-form-ctrl-line-off: rgb(255 255 255 / 0.14); --pwr-form-label: var(--wp--preset--color--base); --pwr-form-desc: var(--wp--preset--color--grey-light); /* #7f97af, NOT #495c73 */ /* Deep Orange #f05a28 on ink is about 3.5:1 — too thin for body-size link text. Orange lifts it to a usable contrast and hover lifts again, which is the same inversion glass.css makes for its dark scheme rather than a second opinion about it. */ --pwr-form-link: var(--wp--preset--color--orange); /* #f58228 */ --pwr-form-link-hi: var(--wp--preset--color--orange-light); /* #fdb823 */ /* Brick red on ink is close to unreadable; Light Orange is already the accent's dark-scheme partner, so error moves to a red that sits on the same lifted ramp as everything else. */ --pwr-form-error: #ff6a4d; --pwr-form-error-rgb: 255, 106, 77; --pwr-form-success: var(--wp--preset--color--green-light); /* #7ec252 */ --pwr-form-success-rgb: 126, 194, 82; /* The same two icons, white. This is the line that would be forgotten. */ --pwr-form-icon-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23ffffff'/%3E%3C/svg%3E"); --pwr-form-icon-number: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* ══ the form's own heading and description ══════════════════════════════════════════════ GF prints these outside the `--gf-*` API's reach (they are plain `.gform_title` / `.gform_description`), so they are the one place this file paints directly. They still read the scheme tokens, so they follow the band like everything else. */ .gform_wrapper .gform_heading { margin-block-end: var(--wp--preset--spacing--m); } .gform_wrapper .gform_title { font-family: var(--wp--preset--font-family--red-hat-display); font-size: var(--wp--custom--type--heading); font-weight: 900; line-height: var(--wp--custom--leading--heading); text-transform: uppercase; letter-spacing: var(--wp--custom--tracking--tight); color: var(--pwr-form-label, #0f212c); } .gform_wrapper .gform_description, .gform_wrapper .gform_required_legend { font-family: var(--wp--preset--font-family--red-hat-display); font-size: var(--wp--preset--font-size--s); line-height: var(--wp--custom--leading--s); color: var(--pwr-form-desc, #495c73); } /* ══ the submit button ═══════════════════════════════════════════════════════════════════ inc/gravity-forms.php re-renders it as a real `