/* * Restyles the Voting Photo Contest [addcontestants] form to match the * VIXRs / Sonic 35th "s35-codes" form treatment (navy card, white boxed * inputs, blue/gold button, self-hosted HelveticaNeue). * Scoped to [data-shortcode="addcontestants"] so it never touches other * wpvc shortcodes (showcontestants, addcontest, etc.) on the same site. * Popup rules near the bottom are deliberately left UNSCOPED: MUI renders * dialogs/modals into a portal appended to , outside this container, * so a scoped selector would never match them. */ @font-face { font-family: 'HelveticaNeue'; src: url('/_assets/fonts/HelveticaNeue-Regular.otf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'HelveticaNeue'; src: url('/_assets/fonts/HelveticaNeue-Bold.otf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'HelveticaNeue'; src: url('/_assets/fonts/HelveticaNeue-Heavy.otf'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'HelveticaNeue'; src: url('/_assets/fonts/HelveticaNeue-Black.otf'); font-weight: 900; font-style: normal; font-display: swap; } /* Heading injected by script.js into the blank space left by the hidden theme title, only when embedded in the VlXRs popup iframe. Lives as a sibling of .wpvc_show_contestants (not a descendant), since it's inserted outside the plugin's own React mount point - so it can't use the --vixr-* custom properties scoped to that container. */ body.wpvc-embed-mode .wpvc_embed_heading { font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif; font-weight: 900; font-size: 28px; text-transform: uppercase; letter-spacing: -0.02em; text-align: center; color: #FFE900; margin: 0; padding-top: clamp(12px, 5vw, 50px); } .wpvc_show_contestants[data-shortcode="addcontestants"] { --vixr-navy: #0A195C; --vixr-true: #004EA2; --vixr-blue: #007CC6; --vixr-cyan: #00DEFF; --vixr-gold: #FFE900; --vixr-green: #63B84A; --vixr-white: #FFFFFF; --vixr-red: #E53345; --vixr-font: 'HelveticaNeue', Helvetica, Arial, sans-serif; --vixr-radius: 2px; --vixr-motion: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); --vixr-field-width: 350px; display: block; font-family: var(--vixr-font); } /* Contest title heading, shown above the form */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_grid_header { font-family: var(--vixr-font) !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: -0.02em; color: var(--vixr-navy) !important; } /* Card treatment: navy box, white text, centered column layout */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_submit_form { background-color: var(--vixr-navy) !important; border-radius: var(--vixr-radius); color: var(--vixr-white); text-align: center; padding: clamp(12px, 5vw, 50px) !important; padding-bottom: clamp(12px, 7.5vw, 75px) !important; box-sizing: border-box; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_submit_form, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_submit_form * { font-family: var(--vixr-font); } /* Field labels / legends / descriptions */ .wpvc_show_contestants[data-shortcode="addcontestants"] form#add_contestant label, .wpvc_show_contestants[data-shortcode="addcontestants"] form#add_contestant legend, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_label, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_submit_description { font-size: 90% !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--vixr-white) !important; margin-block-end: 8px; } /* Text inputs / textareas / date picker (MUI "standard" underline variant), reboxed as solid white fields to match the reference form */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_form_control_ad, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_form_datepicker { max-width: var(--vixr-field-width); width: 100%; margin-inline: auto; } .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiInputBase-root, .wpvc_show_contestants[data-shortcode="addcontestants"] textarea { background-color: var(--vixr-white) !important; color: var(--vixr-navy) !important; border-radius: var(--vixr-radius) !important; min-height: 52px; width: 100%; box-sizing: border-box; padding-inline: 16px !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: box-shadow var(--vixr-motion), outline-color var(--vixr-motion); } .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiInputBase-input, .wpvc_show_contestants[data-shortcode="addcontestants"] textarea { font-family: var(--vixr-font) !important; font-weight: 400 !important; color: var(--vixr-navy) !important; text-align: center; } .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiInput-underline:before, .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiInput-underline:after { border-bottom: none !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiInput-underline:hover:not(.Mui-disabled):before { border-bottom: none !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .Mui-focused.MuiInputBase-root { outline: 2px solid var(--vixr-cyan); outline-offset: 1px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } /* Checkboxes / radios (terms, custom fields) - visible against the navy card */ .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiCheckbox-root, .wpvc_show_contestants[data-shortcode="addcontestants"] .MuiRadio-root { color: var(--vixr-white) !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .Mui-checked { color: var(--vixr-gold) !important; } /* "Terms & Conditions" link, and the age/agreement checkbox label link injected by script.js when that field isn't the plugin's TERMS type */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_terms_submit, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_agreement_inline_link { color: var(--vixr-cyan) !important; font-weight: 700 !important; text-transform: none; text-decoration: underline; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_terms_submit:hover, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_agreement_inline_link:hover { text-decoration: none; } /* Validation messages */ .wpvc_show_contestants[data-shortcode="addcontestants"] .srv-validation-message { color: var(--vixr-red) !important; font-weight: 400 !important; text-transform: none !important; } /* Email field enforcement, added client-side since the plugin has no native email field type - see script.js */ .wpvc_show_contestants[data-shortcode="addcontestants"] input.wpvc_field_invalid { outline: 2px solid var(--vixr-red) !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_email_error { color: var(--vixr-red) !important; font-size: 90%; font-weight: 400; text-transform: none; margin-top: 4px; } /* Upload / submit buttons, matches the navy-card blue button + gold hover */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_btn_submit_form, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_save_contestant_btn { font-family: var(--vixr-font) !important; font-weight: 700 !important; font-size: 16px !important; text-transform: uppercase !important; letter-spacing: 0.04em; width: 100%; max-width: var(--vixr-field-width); min-height: 52px; margin-inline: auto !important; border-radius: var(--vixr-radius) !important; background-color: var(--vixr-blue) !important; color: var(--vixr-white) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; transition: all var(--vixr-motion) !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_btn_submit_form:hover, .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_save_contestant_btn:hover { background-color: var(--vixr-gold) !important; color: var(--vixr-navy) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; } /* Upload button's icon renders as a Material Icons ligature ("cloud_upload" etc). If that webfont fails to load the raw ligature text shows as a broken glyph, so we collapse the text and draw a simple upload arrow with CSS instead. */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_btn_submit_form .MuiButton-startIcon { display: inline-flex !important; align-items: center; justify-content: center; margin-inline-end: 8px; margin-inline-start: 0; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_btn_submit_form .MuiButton-startIcon > * { display: none !important; } .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_btn_submit_form .MuiButton-startIcon::before { content: ""; display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5 20h14v-2H5v2zM12 2 5 9h4v6h6V9h4z'/%3E%3C/svg%3E"); } /* Shown in place of the (now blank/reset) form once a submission succeeds, see script.js */ .wpvc_show_contestants[data-shortcode="addcontestants"] .wpvc_already_submitted_msg { display: block; font-family: var(--vixr-font); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; text-align: center; color: var(--vixr-white); background-color: var(--vixr-navy); border-radius: var(--vixr-radius); padding: clamp(24px, 6vw, 60px) 20px; } /* Popups triggered on submit/terms - unscoped, see note above */ .wpvc_terms_popup_title, .wpvc_progress_popup_title, .wpvc_sucess_popup_title { font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; } /* Link injected into the terms popup content, see script.js */ .wpvc_terms_popup_link { display: inline-block; margin-top: 16px; font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif; font-weight: 700; color: #004EA2; text-decoration: underline; }