/* ============================================================================ CHEERCAST PLATFORM CSS — third-party plugin surfaces on v4 tokens ---------------------------------------------------------------------------- Shared styling for the form/membership plugins (Gravity Forms Orbital, MemberPress, MailPoet) consumed by BOTH sites — replaces the duplicated, drifting rules that lived in each site's Customizer "Additional CSS". Resolves against cheercast-tokens.css (the :root v4 sheet), so one --pagetheme re-skins every form on every page. §1 Gravity Forms — theme-framework (Orbital) token mapping §2 Gravity Forms — Cheercast components (boxed choices, steps) [pending] §3 MemberPress [Stage C] Scoping rule: everything in §1/§2 hangs off .gform-theme--framework, which only exists on forms rendered with the GF theme framework (Orbital). Forms still on the legacy "gravity-theme" (2.5) markup keep their existing Customizer styling untouched until they're individually flipped. ========================================================================== */ /* ── §1 Gravity Forms · Orbital token mapping ────────────────────────────── The GF CSS API is hierarchical: ~20 root knobs cascade into the 700+ derived properties (buttons, choices, file zones, steps). We override the roots and let the framework do the work. Exceptions: two props consume the -rgb triplets (which can't follow a var()), overridden directly at the bottom. Ground truth: gravityforms/assets/css/dist/ gravity-forms-theme-framework.css @ 2.10. */ /* .gform-theme-datepicker: the popup is appended to with the orbital marker but NOT the framework class, so it needs the mapping too. */ /* `body` prefix: GF's sheets load AFTER this one and re-declare the same variables at (0,1,0) — (0,1,1) wins the cascade regardless of order. */ body .gform-theme--framework, body .gform-theme-datepicker { /* — brand / primary action (focus, checked, primary button) — */ --gf-color-primary: var(--accent); --gf-color-primary-contrast: var(--accent-fg); --gf-color-primary-darker: var(--accent-hi); --gf-color-primary-lighter: color-mix(in oklab, var(--accent) 85%, white 15%); /* — secondary button → the design system's "ghost" (panel + hairline) — */ --gf-color-secondary: var(--panel); --gf-color-secondary-contrast: var(--fg); --gf-color-secondary-darker: var(--surface-2); --gf-color-secondary-lighter: var(--surface); /* — text outside controls (labels, descriptions, legends) — */ --gf-color-out-ctrl-dark: var(--fg-3); --gf-color-out-ctrl-dark-darker: var(--fg); --gf-color-out-ctrl-dark-lighter: var(--fg-4); --gf-color-out-ctrl-light: var(--surface-2); --gf-color-out-ctrl-light-darker: var(--border-2); --gf-color-out-ctrl-light-lighter: var(--surface); /* — inside controls (inputs, selects, choices) — */ --gf-color-in-ctrl: var(--panel); --gf-color-in-ctrl-contrast: var(--fg); --gf-color-in-ctrl-darker: var(--surface); --gf-color-in-ctrl-lighter: var(--surface); --gf-color-in-ctrl-dark: var(--fg-2); --gf-color-in-ctrl-dark-darker: var(--fg); --gf-color-in-ctrl-dark-lighter: var(--border-2); /* default field border */ --gf-color-in-ctrl-light: var(--surface-2); --gf-color-in-ctrl-light-darker: var(--border-2); --gf-color-in-ctrl-light-lighter: var(--surface); /* — semantic — */ --gf-color-danger: var(--danger); --gf-color-success: var(--good); /* — type: one family knob cascades to inputs, labels and buttons — */ --gf-font-family-base: var(--font-ui); --gf-font-size-primary: 14.5px; /* input/body text (design: SGInput 14.5) */ --gf-font-size-secondary: 13px; /* labels (design: FieldLabel 13/600) */ --gf-font-weight-secondary: 600; /* — geometry: sharp 6px controls, 44px height, flat (no input shadows) — */ --gf-radius: var(--radius-sm); /* GF caps control radii via radius-max tiers (md default 3px!) — raise to the token radii so 6px actually renders. */ --gf-radius-max-sm: var(--radius-sm); --gf-radius-max-md: var(--radius-sm); --gf-radius-max-lg: var(--radius-lg); --gf-ctrl-font-size: 14.5px; --gf-ctrl-label-font-size-primary: 13px; --gf-ctrl-label-font-weight-primary: 600; --gf-ctrl-label-color-primary: var(--fg-2); /* canon .field>label */ --gf-ctrl-size-md: var(--control-md); --gf-ctrl-btn-size-md: var(--control-md); --gf-ctrl-shadow: none; --gf-ctrl-btn-shadow: none; --gf-ctrl-btn-font-weight: 600; /* — required indicator: quiet, not alarmed (design's Required tag is a muted pill, not red text) — */ --gf-ctrl-label-color-req: var(--fg-4); /* — the two props that consume -rgb triplets (can't follow var(--accent) upstream) — re-derived from --accent via color-mix — */ --gf-ctrl-outline-color-focus: color-mix(in srgb, var(--accent) 65%, transparent); --gf-form-spinner-bg-color: var(--accent-soft); } /* ── §1c Control boundary ────────────────────────────────────────────────── GF wraps its control rules in :where() (zero specificity), so the Customizer/Breakdance ELEMENT selectors (input/label element rules) beat them. Re-assert the GF variable pipeline at class specificity for the contested properties. */ body .gform-theme--framework .gfield input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]), body .gform-theme--framework .gfield select, body .gform-theme--framework .gfield textarea { font-size: var(--gf-ctrl-font-size); border-radius: var(--gf-ctrl-radius-max-md); border-color: var(--gf-ctrl-border-color); } body .gform-theme--framework .gfield .gfield_label { font-size: var(--gf-ctrl-label-font-size-primary); font-weight: var(--gf-ctrl-label-font-weight-primary); color: var(--gf-ctrl-label-color-primary); } /* The REQUIRED pill sits inside the label — body prefix outguns GF's later-loading label/required rules. */ body .gform-theme--framework .gfield_label .gfield_required, body .gform-theme--framework .gfield .gfield_required { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; } /* ── §1b Font boundary ───────────────────────────────────────────────────── The Customizer/Breakdance set fonts on ELEMENT selectors (p, input, a, strong → area-normal; h1-h4 → area-extended), and element rules beat inheritance — so any form element not individually pinned leaks the site face. This resets the whole form subtree to inherit the token font; the places that genuinely use other faces (mono metas, display totals/titles) set theirs explicitly and win on specificity. */ body .gform-theme--framework, body .gform-theme-datepicker, div.gpasc-drafts, div.gpasc-auto-load-notice, table.gpnf-nested-entries, .wp-block-gp-entry-blocks-entries-table { font-family: var(--font-ui); } body .gform-theme--framework p, body .gform-theme--framework a, body .gform-theme--framework strong, body .gform-theme--framework em, body .gform-theme--framework span, body .gform-theme--framework label, body .gform-theme--framework legend, body .gform-theme--framework input, body .gform-theme--framework select, body .gform-theme--framework textarea, body .gform-theme--framework button, body .gform-theme--framework h1, body .gform-theme--framework h2, body .gform-theme--framework h3, body .gform-theme--framework h4, body .gform-theme--framework li, body .gform-theme-datepicker select, div.gpasc-drafts p, div.gpasc-drafts a, div.gpasc-drafts li, div.gpasc-drafts strong, div.gpasc-auto-load-notice > p, div.gpasc-auto-load-notice strong, table.gpnf-nested-entries td, .wp-block-gp-entry-blocks-entries-table td, .wp-block-gp-entry-blocks-entries-table td a { font-family: inherit; } /* ── §2b Form-adjacent components (GP addons rendering outside the gform theme wrapper — nested-entries tables, drafts, entry-blocks tables). All follow the design system's table spec: black mono-uppercase bold header, hairline rows. ─────────────────────────────────────────────────────────── */ /* GP Nested Forms — entries table + add button */ table.gpnf-nested-entries { margin-top: 6px; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } table.gpnf-nested-entries thead tr { background: var(--black); } table.gpnf-nested-entries th, body .gform-theme--framework table.gpnf-nested-entries th { padding: 12px 16px; background: var(--black); border: 0; color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } table.gpnf-nested-entries td, body .gform-theme--framework table.gpnf-nested-entries td { padding: 13px 16px; border-top: 1px solid var(--border); font-size: 14px; } tr.gpnf-no-entries td { padding: 24px; text-align: center; font-size: 13.5px; color: var(--fg-4); } /* GF's :is()-boosted theme-button rules outrank any sane selector — the ghost treatment carries scoped !important (same precedent as the upload browse button). */ button.gpnf-add-entry, body .gform-theme--framework button.gpnf-add-entry { height: 36px !important; min-height: 0 !important; padding: 0 13px !important; background: var(--panel) !important; border: 1.5px solid var(--border-2) !important; border-radius: var(--radius-sm) !important; color: var(--fg) !important; font-size: 13px !important; font-weight: 600; cursor: pointer; transition: border-color 0.12s; } body .gform-theme--framework button.gpnf-add-entry::before { content: "+ "; } body .gform-theme--framework button.gpnf-add-entry:hover { border-color: var(--border-3) !important; background: var(--panel) !important; } /* GP Advanced Save & Continue — drafts card + resume notice */ .gpasc-drafts { margin-bottom: 18px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--fg-2); } .gpasc-drafts h4, .breakdance .gpasc-drafts h4 { margin: 0 0 8px; background: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--fg); } .gpasc-drafts ul { margin: 0 0 12px; padding-left: 18px; } .gpasc-drafts button.gpasc-new-draft-button { height: var(--control-sm); padding: 0 14px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color 0.12s; } .gpasc-drafts button.gpasc-new-draft-button:hover { border-color: var(--border-3); background: var(--panel); } /* div+child combinator: the site-wide `p:last-of-type {margin-bottom:0}` in the Customizer ties a plain .class p selector (pseudo-classes count as classes) and prints later — (0,1,2) settles it. */ div.gpasc-auto-load-notice > p { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border: 1px solid var(--accent-border); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-hi); /* Breakdance's body cascade is area-normal — app components pin Geist. */ font-family: var(--font-ui); font-size: 13px; line-height: 1.5; margin: 0 0 20px; /* canon .alert spacing to the content below */ } /* Leading info icon per the canon alert (GPASC markup has none). */ div.gpasc-auto-load-notice > p::before { content: ""; flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M12 11v5M12 8h.01' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M12 11v5M12 8h.01' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* Same cascade pin for the drafts card's list + links. */ .gpasc-drafts, .gpasc-drafts a, .gpasc-drafts button { font-family: var(--font-ui); } /* GP Entry Blocks — entries table */ .wp-block-gp-entry-blocks-entries-table.is-style-stripes { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .wp-block-gp-entry-blocks-entries-table .gpeb-table-column-view-link { display: none; } .wp-block-gp-entry-blocks-entries-table thead { background: var(--black); border-bottom: 0; box-shadow: none; color: #fff; } .wp-block-gp-entry-blocks-entries-table thead th { padding: 12px 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } .wp-block-gp-entry-blocks-entries-table thead th a, .wp-block-gp-entry-blocks-entries-table thead th a:hover { color: #fff; } .wp-block-gp-entry-blocks-entries-table tbody { box-shadow: none; font-size: 13.5px; } .wp-block-gp-entry-blocks-entries-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--panel); } .wp-block-gp-entry-blocks-entries-table.is-style-stripes tbody tr:nth-child(even) { background: var(--surface); } .wp-block-gp-entry-blocks-entries-table td { padding: 13px 16px; border-top: 1px solid var(--border); } .wp-block-gp-entry-blocks-entries-table .gpeb-table-column-edit-link { text-align: right; } .wp-block-gp-entry-blocks-entries-table td a { padding: 5px 12px; background: var(--surface-2); border-radius: var(--radius-pill); color: var(--fg-2); font-size: 12px; font-weight: 600; text-decoration: none; } .wp-block-gp-entry-blocks-entries-table td a:hover { background: var(--accent-soft); color: var(--accent-hi); } /* ── §2 Gravity Forms · Cheercast component treatments ───────────────────── The handful of places where Orbital's defaults diverge from the design system. Kept selector-light: everything else is the §1 token cascade. */ /* Required fields: each field carries the quiet "REQUIRED" pill (the design system's ReqTag) — so the form-top legend Orbital adds is redundant noise. */ body .gform-theme--framework .gform_required_legend { display: none; } body .gform-theme--framework .gfield_required { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-4); background: var(--surface-2); padding: 1px 6px; border-radius: 4px; margin-left: 7px; vertical-align: middle; } /* Orbital nests a second .gfield_required (the custom-text span) inside the wrapper — without this reset both layers get the pill padding and it renders double-wide. */ body .gform-theme--framework .gfield_required .gfield_required { padding: 0; margin: 0; background: none; border-radius: 0; } /* Footer actions sit right — long-standing site convention on account forms. (.gform_page_footer = multi-page steps; Previous naturally lands left of Next inside the right-aligned group.) */ body .gform-theme--framework .gform_footer { justify-content: flex-end; } body .gform-theme--framework .gform_page_footer { justify-content: space-between; margin-top: 24px; } /* Boxed selection group — the design system's signature choice control (SGCheck): each option is a tappable 44px box; selected = accent-soft fill + accent border + accent text. Opt-in per field via the existing marker classes: `ccgf-radio-boxes` (single choice) and `ccgf-cb-button` (multi). The native Orbital radio/checkbox indicator is kept inside the box. */ /* Selectors carry `.gfield.ccgf-*` + the choice container so they outrank Orbital's own .gchoice grid layout (same-order specificity tie otherwise — GF's sheet loads after ours). */ body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; } body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice { display: inline-flex; align-items: center; gap: 10px; width: auto; height: var(--control-md); padding: 0 16px; margin: 0; position: relative; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, border-color 0.12s; } body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice:hover, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice:hover { border-color: var(--border-3); } body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice:has(.gfield-choice-input:checked), body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice:has(.gfield-choice-input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice label, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice label { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); cursor: pointer; max-width: none; } body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice:has(.gfield-choice-input:checked) label, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice:has(.gfield-choice-input:checked) label { font-weight: 600; color: var(--accent-hi); } /* Whole box toggles the input — stretch the label's hit area over the box. */ body .gform-theme--framework .gfield.ccgf-radio-boxes .gfield_radio .gchoice label::after, body .gform-theme--framework .gfield.ccgf-cb-button .gfield_checkbox .gchoice label::after { content: ""; position: absolute; inset: 0; } /* Selectable service cards (ccgf-cb-styled) — full-width boxed multi-select: each choice is a content card (title · right-aligned price · description), selected = accent-soft. The label ships as three stacked
s. */ body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio { display: flex; flex-direction: column; gap: 10px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; margin: 0; position: relative; background: var(--surface); /* canon .svc resting card */ border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: background 0.12s, border-color 0.12s; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice:hover, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice:hover { border-color: var(--border-3); } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice:has(.gfield-choice-input:checked), body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice:has(.gfield-choice-input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice .gfield-choice-input, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice .gfield-choice-input { margin-top: 2px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice label, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice label { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px; flex: 1; margin: 0; max-width: none; cursor: pointer; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(1), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(1) { font-size: 14.5px; font-weight: 700; color: var(--fg); } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(2), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(2) { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-hi); text-align: right; white-space: nowrap; } /* Orbital's reset sets label br { display:none } — multi-line prices ($200/day
$2 per routine) need theirs back. */ body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(2) br, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(2) br { display: inline; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3), body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) { grid-column: 1 / -1; font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--fg-3); max-width: 64ch; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3) p, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) p { margin: 0 0 6px; } body .gform-theme--framework .gfield.ccgf-cb-styled .gchoice label > div:nth-of-type(3) p:last-child, body .gform-theme--framework .gfield.ccgf-rb-styled .gchoice label > div:nth-of-type(3) p:last-child { margin-bottom: 0; } body .gform-theme--framework .gfield.ccgf-cb-styled .gfield_checkbox .gchoice label::after, body .gform-theme--framework .gfield.ccgf-rb-styled .gfield_radio .gchoice label::after { content: ""; position: absolute; inset: 0; } /* Price totals (ccgf-pricetotal-column / ccgf-pricing-formtotal) — the estimate banner: accent-soft panel, big tabular figure, no "Price:" label. */ body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_container, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_container { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 18px; text-align: center; } body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_product_price, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_product_price, body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_total, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_total { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.01em; color: var(--accent-hi); } body .gform-theme--framework .gfield.ccgf-pricetotal-column .ginput_product_price_label, body .gform-theme--framework .gfield.ccgf-pricing-formtotal .ginput_product_price_label { display: none; } /* Checkbox table (ccgf-checkbox-table) — the design system's "selectable rows" table: solid black mono-uppercase header (the field label), hairline rows, checkbox on the right. */ body .gform-theme--framework .gfield.ccgf-checkbox-table { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } body .gform-theme--framework .gfield.ccgf-checkbox-table > .gfield_label { display: block; width: 100%; /* Orbital labels default to fit-content */ margin: 0; padding: 12px 16px; background: var(--black); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; } body .gform-theme--framework .gfield.ccgf-checkbox-table > .ginput_container { margin-top: 0; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox { display: flex; flex-direction: column; gap: 0; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 13px 16px; border-top: 1px solid var(--border); background: var(--panel); transition: background 0.12s; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice:first-child { border-top: none; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice:hover { background: var(--surface); } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice label { order: 0; flex: 1; margin: 0; max-width: none; font-size: 14px; font-weight: 500; color: var(--fg); cursor: pointer; } body .gform-theme--framework .gfield.ccgf-checkbox-table .gfield_checkbox .gchoice .gfield-choice-input { order: 1; margin: 0; } /* Destructive selection (ccgf-checkbox-remove — flagging users for removal): checked state reads danger, not accent. */ body .gform-theme--framework .gfield.ccgf-checkbox-remove .gfield-choice-input:checked { background-color: var(--danger); border-color: var(--danger); } body .gform-theme--framework .gfield.ccgf-checkbox-remove .gchoice:has(.gfield-choice-input:checked) label { color: var(--danger); } /* HTML content blocks: form intro headers + spacing utility. */ body .gform-theme--framework .gfield.ccgf-html-notopmargin { margin-top: 0; } body .gform-theme--framework .gfield.ccgf-formheader p { font-size: 15px; line-height: 1.6; color: var(--fg-2); } /* Info box (ccgf-infobox) — the design system's info Banner: accent-soft fill, accent border, accent-hi text. */ body .gform-theme--framework .ccgf-infobox { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 13px 15px; font-size: 13.5px; line-height: 1.5; color: var(--accent-hi); } body .gform-theme--framework .ccgf-infobox h4 { margin: 0 0 4px; background: none; font-size: 15px; font-weight: 700; color: var(--fg); } body .gform-theme--framework .ccgf-infobox ul { margin: 6px 0 0 18px; padding: 0; } body .gform-theme--framework .ccgf-infobox p:last-child, body .gform-theme--framework .ccgf-infobox ul li:last-of-type { margin-bottom: 0; } /* Tom Select (GP Advanced Select) — design-system select: 44px control, panel bg, hairline border, chevron; dropdown = popover panel. Replaces the old Chosen-era styling (Chosen is no longer in use). */ body .gform-theme--framework .ts-wrapper .ts-control { min-height: var(--control-md); padding: 4px 36px 4px 14px; align-items: center; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); box-shadow: none; color: var(--fg); font-family: var(--font-ui); font-size: 14.5px; } body .gform-theme--framework .ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); /* canon focus ring */ } body .gform-theme--framework .ts-wrapper:not(.form-control):not(.form-select).single .ts-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23797d84' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; } body .gform-theme--framework .ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-pill); color: var(--accent-hi); font-size: 12.5px; font-weight: 600; } /* Dropdown per the Advanced-form-fields canon (sg-formsx SearchSelect): radius-8 panel, 6px inner padding, radius-sm options, surface hover, accent-soft selected. */ body .gform-theme--framework .ts-dropdown { padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); color: var(--fg-2); font-family: var(--font-ui); font-size: 13.5px; } body .gform-theme--framework .ts-dropdown .option, body .gform-theme--framework .ts-dropdown .optgroup-header, body .gform-theme--framework .ts-dropdown .no-results, body .gform-theme--framework .ts-dropdown .create { padding: 9px 10px; border-radius: var(--radius-sm); font-weight: 500; } body .gform-theme--framework .ts-dropdown .option:hover { background: var(--surface); } body .gform-theme--framework .ts-dropdown .active, body .gform-theme--framework .ts-dropdown .option.selected { background: var(--accent-soft); color: var(--accent-hi); font-weight: 600; } /* Data display (ccgf-datadisplay) — readonly values shown as display type, not form chrome. */ body .gform-theme--framework .gfield.ccgf-datadisplay input[readonly], body .gform-theme--framework .gfield.ccgf-datadisplay textarea[readonly] { height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: -0.01em; color: var(--fg); } /* Grid-span utilities — the gform_fields 12-col grid survives in Orbital. */ .gform-theme--framework .gfield.ccgf-grid-span1 { grid-column: span 1; } .gform-theme--framework .gfield.ccgf-grid-span5 { grid-column: span 5; } .gform-theme--framework .gfield.ccgf-grid-span6 { grid-column: span 6; } .gform-theme--framework .gfield.ccgf-grid-span11 { grid-column: span 11; } /* Small utilities carried over from the V4 sheet. */ body .gform-theme--framework .ccgf-hide-instructions .instruction { display: none; } body .gform-theme--framework .gfield.ccgf-nosubmit ~ .gform_footer, body .gform-theme--framework.ccgf-nosubmit_wrapper .gform_footer { display: none; } body .gform-theme--framework .gfield.ccgf-hideradios .gfield-choice-input { display: none; } body .gform-theme--framework .gfield.ccgf-hasdescription > .gfield_label { margin-bottom: 0; } body .gform-theme--framework .gfield.ccgf-topbordergap .gfield_description { padding-bottom: 15px; } /* Survey star rating — canon (sg-formsx): 30px two-tone stars, medal gold fill + darker gold stroke when filled; quiet surface/border greys empty. Two-tone needs SVG backgrounds, not masks; the grey hexes are the light palette values (forms render on light surfaces). */ body .gform-theme--framework .gfield .gsurvey-rating > label { width: 30px; height: 30px; margin: 0 4px 0 0; overflow: hidden; text-indent: -9999px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.9 6.3.6-4.7 4.2 1.4 6.2L12 16.9 6.3 19.5l1.4-6.2L3 9.1l6.3-.6L12 2.6z' fill='%23e0e0dd' stroke='%23b8b8b3' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") !important; /* GF Survey's sprite rule outranks unflagged overrides */ background-size: contain; background-repeat: no-repeat; background-position: center; } body .gform-theme--framework .gfield .gsurvey-rating > input:checked ~ label, body .gform-theme--framework .gfield .gsurvey-rating:not(:checked) > label:hover, body .gform-theme--framework .gfield .gsurvey-rating:not(:checked) > label:hover ~ label { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.7 5.9 6.3.6-4.7 4.2 1.4 6.2L12 16.9 6.3 19.5l1.4-6.2L3 9.1l6.3-.6L12 2.6z' fill='%23f6c84c' stroke='%23d99a16' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* File upload — canon (sg-elements › File & video upload): dashed surface dropzone, circled accent icon (GF draws the cloud via an icon-font ::before — no element exists for it), accent "browse" as TEXT not a button, mono format hint, preview rows as quiet cards. Selectors carry .gfield--type-fileupload because GF's own rules tie bare (0,2,0) selectors via :where() and load later. */ body .gform-theme--framework .gfield--type-fileupload .gform_drop_area.gform-theme-field-control { /* GF paints the zone border from --gf-local-* vars — set those rather than fight the shorthand. */ --gf-local-border-color: var(--border-3); --gf-local-bg-color: var(--surface); padding: 30px 22px; background: var(--surface); border: 1.5px dashed var(--border-3) !important; /* GF hardcodes 1px width */ border-radius: var(--radius-lg); text-align: center; } /* Canon icon (sg-elements EI.upload — arrow into tray): GF's ::before carries an icon-font cloud, so ::before becomes the bare accent-soft circle (content reset) and the canon SVG overlays via a masked ::after. */ body .gform-theme--framework .gfield--type-fileupload .gform_drop_area { position: relative; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_area.gform-theme-field-control::before { content: ""; /* kills GF's icon-font cloud — class bump beats its ::before */ width: 48px; height: 48px; margin: 0 auto 12px; display: block; background: var(--accent-soft); border-radius: 50%; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_area::after { content: ""; position: absolute; top: 43px; /* zone padding 30 + (48 - 22)/2 */ left: 50%; transform: translateX(-50%); width: 22px; height: 22px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 16V6m0 0L8 10m4-4 4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 16V6m0 0L8 10m4-4 4 4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 16v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } body .gform-theme--framework .gfield--type-fileupload .gform_drop_instructions { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 600; color: var(--fg); } /* Canon renders "browse" as accent TEXT; GF's theme-button rules are variable-driven at high specificity, so the chrome-stripping properties carry !important (scoped to this one control). */ body .gform-theme--framework .gfield--type-fileupload button.gform_button_select_files.gform-theme-button { height: auto !important; min-height: 0 !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; color: var(--accent) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; } body .gform-theme--framework .gfield--type-fileupload button.gform_button_select_files.gform-theme-button:hover { background: none !important; color: var(--accent-hi) !important; } body .gform-theme--framework .gfield_description.gform_fileupload_rules { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); } /* Preview rows (uploading / done / error) */ body .gform-theme--framework .gfield--type-fileupload .ginput_preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; color: var(--fg); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_filesize { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--fg-4); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_progress { flex: 1 1 100%; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gfield_fileupload_progressbar_progress { height: 100%; background: var(--accent); border-radius: var(--radius-pill); } body .gform-theme--framework .gfield--type-fileupload .ginput_preview .gform_delete_file { margin-left: auto; background: none; border: none; color: var(--fg-3); cursor: pointer; } /* ── Advanced form fields (canon: sg-formsx) ────────────────────────────── Progress bar · likert · rank · datepicker. Surveys and long forms. */ /* Progress bar: 8px pill track (surface-2) with accent fill. GF's title is one

— its text nodes ("Step x of y") take the mono meta style and the page-name span takes the display label style, approximating the canon's label-left / meta-right row within the markup we have. */ body .gform-theme--framework .gf_progressbar_wrapper { padding: 0; margin-bottom: 22px; border: none; } body .gform-theme--framework .gf_progressbar_title { display: block; margin: 0 0 9px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--fg-3); text-transform: none; } body .gform-theme--framework .gf_progressbar_title .gf_step_page_name { font-family: var(--font-display); font-weight: 900; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); } body .gform-theme--framework .gf_progressbar { height: 8px; padding: 0; background: var(--surface-2); border: none; border-radius: var(--radius-pill); overflow: hidden; } body .gform-theme--framework .gf_progressbar_percentage, body .gform-theme--framework .gf_progressbar_percentage.percentbar_blue { height: 8px; border-radius: var(--radius-pill); background: var(--accent); background-image: none; transition: width 0.3s ease; } body .gform-theme--framework .gf_progressbar_percentage span { display: none; /* canon carries no text inside the bar */ } /* Likert grid: bordered radius-8 matrix, surface header band, centred choices. The radios are real inputs, so Orbital's accent radio applies. */ body .gform-theme--framework table.gsurvey-likert { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } body .gform-theme--framework table.gsurvey-likert th.gsurvey-likert-choice-label { padding: 11px 8px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--fg-3); text-align: center; } body .gform-theme--framework table.gsurvey-likert td, body .gform-theme--framework table.gsurvey-likert th { border: none; } body .gform-theme--framework table.gsurvey-likert tbody tr + tr td, body .gform-theme--framework table.gsurvey-likert tbody tr + tr th { border-top: 1px solid var(--border); } body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice { padding: 10px 0; text-align: center; cursor: pointer; } body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice .gfield-choice-input, body .gform-theme--framework table.gsurvey-likert td.gsurvey-likert-choice input[type="radio"] { margin: 0 auto; } /* Rank list: each option is a card with an accent-soft order number and a grip affordance (markup is a bare sortable

  • , so both are pseudos). */ body .gform-theme--framework ul.gsurvey-rank { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: cc-rank; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: 14px; font-weight: 500; color: var(--fg); cursor: grab; max-width: none; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice::before { counter-increment: cc-rank; content: counter(cc-rank); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-hi); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; } body .gform-theme--framework ul.gsurvey-rank li.gsurvey-rank-choice::after { content: ""; flex-shrink: 0; width: 16px; height: 16px; margin-left: auto; background: var(--fg-4); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='6' r='1.4'/%3E%3Ccircle cx='15' cy='6' r='1.4'/%3E%3Ccircle cx='9' cy='12' r='1.4'/%3E%3Ccircle cx='15' cy='12' r='1.4'/%3E%3Ccircle cx='9' cy='18' r='1.4'/%3E%3Ccircle cx='15' cy='18' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat; } /* Datepicker popup — canon calendar: radius-lg panel, ghost nav squares, display-font title, mono DOW row, 34px day cells (selected = accent, today = accent outline). jQuery-UI structure under .gform-theme-datepicker; GF renders month/year as selects, styled quiet. */ body .gform-theme-datepicker.ui-datepicker { width: 290px; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-family: var(--font-ui); } body .gform-theme-datepicker .ui-datepicker-header { padding: 0 0 14px; background: none; border: none; } body .gform-theme-datepicker .ui-datepicker-prev, body .gform-theme-datepicker .ui-datepicker-next { top: 0; width: 30px; height: 30px; background: var(--panel); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--fg-2); cursor: pointer; } .gform-theme-datepicker .ui-datepicker-prev { left: 0; } .gform-theme-datepicker .ui-datepicker-next { right: 0; } body .gform-theme-datepicker .ui-datepicker-title select { height: 30px; padding: 0 8px; background: var(--surface); border: none; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--fg); } body .gform-theme-datepicker table.ui-datepicker-calendar { margin: 0; border-collapse: separate; border-spacing: 2px; } body .gform-theme-datepicker .ui-datepicker-calendar th { padding: 0 0 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--fg-4); text-transform: uppercase; } body .gform-theme-datepicker .ui-datepicker-calendar td { padding: 0; } body .gform-theme-datepicker .ui-datepicker-calendar td a, body .gform-theme-datepicker .ui-datepicker-calendar td span { display: block; height: 34px; line-height: 34px; border: 1.5px solid transparent; border-radius: var(--radius-sm); background: transparent; background-image: none; font-size: 13px; font-weight: 500; color: var(--fg-2); text-align: center; } body .gform-theme-datepicker .ui-datepicker-calendar td a:hover { background: var(--surface); } body .gform-theme-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { border-color: var(--accent-border); } body .gform-theme-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a, body .gform-theme-datepicker .ui-datepicker-calendar .ui-state-active { background: var(--accent); background-image: none; border-color: var(--accent); color: var(--accent-fg); font-weight: 700; } /* Multi-page step indicator — the design system's SEGMENTED CONTROL (canon: Cheercast Account Pages › Add Event). Steps render as text segments in a surface-2 track; the active page is a raised panel pill. Numbers are not part of the canon and are hidden. */ .gform_wrapper.gform-theme--framework .gf_page_steps { display: inline-flex; /* canon: track hugs its segments (GF forces flex at equal specificity, hence the .gform_wrapper bump) */ width: -moz-fit-content; width: fit-content; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 22px; background: var(--surface-2); border: none; border-radius: var(--radius-sm); } body .gform-theme--framework .gf_step { margin: 0; height: auto; width: auto; opacity: 1; } body .gform-theme--framework .gf_step .gf_step_number { display: none; } body .gform-theme--framework .gf_step .gf_step_label { display: block; padding: 8px 16px; border-radius: 5px; font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; color: var(--fg-3); text-transform: none; letter-spacing: 0; white-space: nowrap; transition: all 0.12s; } body .gform-theme--framework .gf_step.gf_step_active .gf_step_label { background: var(--panel); color: var(--fg); box-shadow: var(--shadow-sm); } body .gform-theme--framework .gf_step:not(.gf_step_active):hover .gf_step_label { color: var(--fg-2); } body .gform-theme--framework .gf_step.gf_step_hidden { display: none; } /* GP Multi-Page Navigation wraps visited steps in links — keep them reading as steps, not underlined hyperlinks, with a hover cue. */ body .gform-theme--framework .gf_step .gpmpn-page-link { display: block; text-decoration: none; } body .gform-theme--framework .gf_step .gpmpn-page-link:hover .gf_step_label { color: var(--fg-2); } /* Page footer extras: Previous anchors left; native Save-&-Continue link and last-page (Submit-jump) button read as quiet secondary actions. */ body .gform-theme--framework .gform_page_footer .gform_previous_button { margin-right: auto; } body .gform-theme--framework .gform_page_footer .gform_save_link, body .gform-theme--framework .gform_footer .gform_save_link { color: var(--accent-hi); font-weight: 600; text-decoration: none; } body .gform-theme--framework .gform_page_footer .gform_save_link:hover, body .gform-theme--framework .gform_footer .gform_save_link:hover { text-decoration: underline; } body .gform-theme--framework .gform_page_footer input.button.gform_last_page_button { background: transparent; border: 1.5px solid var(--border-2); color: var(--fg); } /* Section breaks: GF section fields get a hairline rule; the HTML-field variant (ccgf-sectionbreak) is a quiet surface band. ccgf-section-nostyle strips both. ccgf-nofooter hides a form's footer (display-only forms). */ body .gform-theme--framework .gsection { padding: 0; margin-bottom: 10px; border-bottom: 1px solid var(--border); } body .gform-theme--framework .gfield.ccgf-sectionbreak.gfield_html { margin-top: 0; padding: 10px 15px; background: var(--surface); border-radius: var(--radius-sm); } body .gform-theme--framework .gfield.ccgf-sectionbreak h3:last-child, body .gform-theme--framework .gfield.ccgf-sectionbreak h4:last-child { margin-bottom: 0; padding-bottom: 0; } body .gform-theme--framework .gsection.ccgf-section-nostyle, body .gform-theme--framework .gsection.ccgf-section-nostyle h3.gsection_title { margin-bottom: 0; border-bottom: none; } body .gform-theme--framework .ccgf-nofooter .gform_footer, body .gform-theme--framework.ccgf-nofooter_wrapper .gform_footer { display: none; } /* ── §3 MemberPress (canon: Auth & Restricted Pages prototype) ───────────── Surfaces: program-membership signup (mepr-signup-form + Stripe), login form fallback, account payments table, validation, /restricted message. Login inputs render BARE (no classes) so controls are element-scoped within .mp_wrapper. body prefix for the same load-order reason as §1. */ /* font + element boundary */ body .mp_wrapper, body .mepr_error, body .mepr_updated, body .cc-streamunauth-container { font-family: var(--font-ui); } body .mp_wrapper p, body .mp_wrapper a, body .mp_wrapper span, body .mp_wrapper label, body .mp_wrapper input, body .mp_wrapper select, body .mp_wrapper textarea, body .mp_wrapper button { font-family: inherit; } /* rows + labels */ body .mp_wrapper .mp-form-row { margin-bottom: 18px; } body .mp_wrapper .mp-form-label label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--fg-2); } /* text-like controls (canon .input) */ body .mp_wrapper input[type="text"], body .mp_wrapper input[type="email"], body .mp_wrapper input[type="password"], body .mp_wrapper input[type="tel"], body .mp_wrapper input[type="url"], body .mp_wrapper input[type="number"], body .mp_wrapper select, body .mp_wrapper textarea { width: 100%; height: var(--control-md); padding: 0 14px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); font-size: 14.5px; color: var(--fg); margin: 0; transition: border-color 0.12s, box-shadow 0.12s; } body .mp_wrapper textarea { height: auto; min-height: 96px; padding: 12px 14px; } body .mp_wrapper input:focus, body .mp_wrapper select:focus, body .mp_wrapper textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-2); } body .mp_wrapper select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23797d84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 16px 16px; padding-right: 38px; } /* radios → boxed selection group (age bracket etc.) */ body .mp_wrapper .mepr-radios-field { display: flex; flex-wrap: wrap; gap: 9px; } body .mp_wrapper .mepr-radios-field-row { display: inline-flex; align-items: center; gap: 10px; height: var(--control-md); padding: 0 16px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.12s; } body .mp_wrapper .mepr-radios-field-row:hover { border-color: var(--border-3); } body .mp_wrapper .mepr-radios-field-row:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-border); } body .mp_wrapper .mepr-form-radios-input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); } body .mp_wrapper .mepr-form-radios-label { margin: 0; font-size: 14px; font-weight: 500; color: var(--fg-2); cursor: pointer; } body .mp_wrapper .mepr-radios-field-row:has(input:checked) .mepr-form-radios-label { font-weight: 600; color: var(--accent-hi); } /* checkboxes (remember me, ToS) — middle-aligned with their label text */ body .mp_wrapper input[type="checkbox"] { width: 18px; height: 18px; margin: 0 9px 0 0; vertical-align: middle; accent-color: var(--accent); } body .mp_wrapper input[type="checkbox"] + label, body .mp_wrapper .mepr-checkbox-field label { vertical-align: middle; } /* password reveal */ body .mp_wrapper .mp-hide-pw button.mp-hide-pw { background: none; border: none; color: var(--fg-4); cursor: pointer; } /* price row → quiet surface band with mono amount */ body .mp_wrapper .mp-form-row.mepr_price { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } body .mp_wrapper .mepr_price_cell_label { font-size: 13px; font-weight: 600; color: var(--fg-2); } body .mp_wrapper .mepr_price_cell { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--fg); } /* submits → canon full-width primary (control-lg) */ body .mp_wrapper input[type="submit"], body .mp_wrapper .mepr-submit, body .mp_wrapper .button-primary { width: 100%; height: var(--control-lg); padding: 0 20px; background: var(--accent); border: none; border-radius: var(--radius-sm); color: var(--accent-fg); font-size: 15px; font-weight: 600; cursor: pointer; transition: filter 0.12s; } /* Hover: explicit accent-hi background — beats MEPR/theme rules that flip the share button to blue on hover (they set background, our old filter didn't). */ body .mp_wrapper input[type="submit"]:hover, body .mp_wrapper .mepr-submit:hover, body .mp_wrapper .button-primary:hover, body .mp_wrapper .mepr-share-button:hover { background: var(--accent-hi); filter: none; } /* links (forgot password etc.) */ body .mp_wrapper .mepr-login-actions a { font-size: 13px; font-weight: 500; color: var(--accent); } /* validation → canon banners */ body .mepr_error, body .mp_wrapper .mepr_error { margin: 0 0 20px; padding: 13px 15px; background: var(--danger-soft); border: 1px solid color-mix(in oklab, var(--danger) 26%, transparent); border-radius: var(--radius); color: color-mix(in oklab, var(--danger) 58%, var(--fg)); font-size: 13.5px; line-height: 1.5; list-style-position: inside; } body .mepr_updated { margin: 0 0 20px; padding: 13px 15px; background: var(--good-soft); border: 1px solid color-mix(in oklab, var(--good) 22%, transparent); border-radius: var(--radius); color: color-mix(in oklab, var(--good) 60%, var(--fg)); font-size: 13.5px; line-height: 1.5; } body .mp_wrapper .cc-error, body .mp_wrapper .mepr-form-has-errors { color: var(--danger); font-size: 12.5px; font-weight: 500; } /* Stripe elements → input look */ body .mp_wrapper .StripeElement { padding: 12px 14px; background: var(--panel); border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); } body .mp_wrapper .StripeElement--focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } body .mp_wrapper .StripeElement--invalid { border-color: var(--danger); } /* account payments table → quiet design table */ body .mp_wrapper table { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; } body .mp_wrapper table th { padding: 10px 14px; background: var(--surface-2); border: none; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); text-align: left; } body .mp_wrapper table td { padding: 11px 14px; border: none; border-top: 1px solid var(--border); font-size: 13.5px; } /* /restricted + stream-unauthorized message → warning card. Solid panel (not the translucent warn-soft): this renders over loud gradient heroes where a tint would wash out. */ body .cc-streamunauth-container { padding: 16px 18px; background: var(--panel); border: 1px solid color-mix(in oklab, var(--warn) 40%, transparent); border-left: 4px solid var(--warn); border-radius: var(--radius); color: var(--fg-2); font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-card); } body .cc-streamunauth-container h3, .breakdance body .cc-streamunauth-container h3 { margin: 0 0 4px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--fg) !important; /* BD hero contexts force white headings */ }