/* ============================================================================ Made in Restaurants — Marketo form styles Form 3058 · "Made In Restaurants Opt-In Website" · munchkin 078-ZLA-461 Self-contained: no external fonts, images or icons, nothing inherited from the host page. Safe to paste into the Marketo form's Custom CSS box and equally safe to load as a stylesheet on the embedding page. Marketo injects its own base + theme stylesheets into at runtime, i.e. AFTER any stylesheet the host page links. It therefore wins every specificity tie, which is why every declaration that Marketo also sets carries !important. That is deliberate — please keep it. The form paints its own dark panel. To sit it on an existing surface instead, set --mir-form-surface / --mir-form-padding / --mir-form-border on any ancestor. Bravely — edit this file, then re-send it. Do not fork the two copies. ========================================================================= */ .mktoForm { --mir-red: #ec1c2f; --mir-blue: #163785; --mir-blue-dk: #0d2660; --mir-white: #ffffff; --mir-label: rgba(255, 255, 255, 0.5); --mir-field: rgba(255, 255, 255, 0.06); --mir-line: rgba(255, 255, 255, 0.18); --mir-hint: rgba(255, 255, 255, 0.3); --mir-font: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; --mir-gap: 14px; /* Envelope glyph for the submit button, inlined so nothing is fetched. */ --mir-envelope: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='.75' y='.75' width='14.5' height='10.5'/%3E%3Cpath d='M1.25 1.25 8 6.75l6.75-5.5'/%3E%3C/g%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- 1. Panel Opaque by default so the form carries its own dark surface anywhere it is embedded. The host page can hand back its own surface via these variables. ------------------------------------------------------------------------- */ .mktoForm { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: var(--mir-form-padding, 32px 28px) !important; background: var(--mir-form-surface, #121212) !important; border: 1px solid var(--mir-form-border, rgba(255, 255, 255, 0.1)) !important; border-radius: 0 !important; font-family: var(--mir-font) !important; font-size: 14px !important; line-height: 1.4 !important; color: var(--mir-white) !important; /* Native controls (checkbox, select popup, scrollbars) render for a dark surface — the form is dark wherever it is embedded. */ color-scheme: dark !important; } .mktoForm * { box-sizing: border-box !important; float: none !important; font-family: var(--mir-font) !important; } /* --------------------------------------------------------------------------- 2. Undo Marketo's table-ish layout Marketo lays fields out with floats, fixed pixel widths and spacer divs, all stamped as inline styles. !important beats inline styles, so this is enough — no JavaScript "unstyling" required. ------------------------------------------------------------------------- */ .mktoForm .mktoOffset, .mktoForm .mktoGutter, .mktoForm .mktoAsterix, .mktoForm .mktoClear, .mktoForm .mktoPlaceholder { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; } /* Spacing lives on the visible controls, never on the rows — so the form's hidden fields (UTM capture, list flags) collapse to nothing instead of leaving unexplained gaps. */ .mktoForm .mktoFormRow, .mktoForm .mktoFieldDescriptor, .mktoForm .mktoFormCol, .mktoForm .mktoFieldWrap, .mktoForm .mktoButtonRow, .mktoForm .mktoButtonWrap { width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } /* Two fields in one Marketo row (First / Last) sit side by side and share the width; a row holding one field fills it. Below ~180px each they stack. */ .mktoForm .mktoFormRow { display: flex !important; flex-wrap: wrap !important; column-gap: var(--mir-gap) !important; } .mktoForm .mktoFormCol { flex: 1 1 180px !important; min-width: 0 !important; } .mktoForm .mktoFieldWrap { display: block !important; width: 100% !important; } .mktoForm input[type="hidden"] { display: none !important; } /* --------------------------------------------------------------------------- 3. Labels ------------------------------------------------------------------------- */ .mktoForm .mktoLabel { display: block !important; float: none !important; width: 100% !important; min-height: 0 !important; margin: 0 0 8px !important; padding: 0 !important; font-size: 9px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--mir-label) !important; } .mktoForm .mktoInstruction { display: block !important; margin: -6px 0 var(--mir-gap) !important; font-size: 12px !important; color: var(--mir-hint) !important; } /* Rich-text blocks (e.g. privacy / consent copy) */ .mktoForm .mktoHtmlText { width: 100% !important; margin: 0 0 var(--mir-gap) !important; font-size: 12px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.55) !important; } .mktoForm .mktoHtmlText a, .mktoForm .mktoLabel a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: underline !important; } .mktoForm .mktoHtmlText a:hover, .mktoForm .mktoLabel a:hover { color: var(--mir-white) !important; } /* --------------------------------------------------------------------------- 4. Fields ------------------------------------------------------------------------- */ .mktoForm input[type="text"], .mktoForm input[type="email"], .mktoForm input[type="tel"], .mktoForm input[type="url"], .mktoForm input[type="number"], .mktoForm input[type="date"], .mktoForm input[type="password"], .mktoForm select.mktoField, .mktoForm textarea.mktoField { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; margin: 0 0 var(--mir-gap) !important; padding: 12px 16px !important; background-color: var(--mir-field) !important; background-image: none !important; border: 1px solid var(--mir-line) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--mir-font) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--mir-white) !important; outline: none !important; transition: border-color 0.2s !important; -webkit-appearance: none !important; appearance: none !important; } .mktoForm textarea.mktoField { min-height: 96px !important; resize: vertical !important; } /* Native select arrow, drawn as CSS so the file stays image-free. */ .mktoForm select.mktoField { padding-right: 40px !important; background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%) !important; background-position: calc(100% - 20px) center, calc(100% - 14px) center !important; background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important; cursor: pointer !important; } /* Dropdown options inherit the OS palette, not the form's — force dark. */ .mktoForm select.mktoField option { background: #1a1a1a !important; color: var(--mir-white) !important; } .mktoForm .mktoField::placeholder { color: var(--mir-hint) !important; opacity: 1 !important; } .mktoForm .mktoField:focus { border-color: var(--mir-red) !important; outline: none !important; box-shadow: none !important; } /* Browsers repaint autofilled inputs opaque white, which would blow a hole in the dark panel. The inset shadow repaints the field; the text colour has to be set separately because autofill overrides `color`. */ .mktoForm .mktoField:-webkit-autofill, .mktoForm .mktoField:-webkit-autofill:hover, .mktoForm .mktoField:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset !important; box-shadow: 0 0 0 1000px #1c1c1c inset !important; -webkit-text-fill-color: var(--mir-white) !important; caret-color: var(--mir-white) !important; } /* --------------------------------------------------------------------------- 5. Checkboxes / radios Marketo puts the field's label above the control. For a single opt-in box that reads better as one line: box, then text. ------------------------------------------------------------------------- */ .mktoForm .mktoCheckboxList, .mktoForm .mktoRadioList { display: block !important; width: 100% !important; float: none !important; margin: 0 0 var(--mir-gap) !important; padding: 0 !important; } /* Marketo hides the real checkbox (opacity: 0) and paints a hard-coded white box with a "✓" on the following label's ::before. That box can't be recoloured for a dark panel, so drop it and show the real control instead — which also restores the native focus ring and keeps the hit target on the input itself. */ .mktoForm .mktoCheckboxList > label::before, .mktoForm .mktoCheckboxList > label::after, .mktoForm .mktoRadioList > label::before, .mktoForm .mktoRadioList > label::after { content: none !important; display: none !important; } .mktoForm .mktoCheckboxList > input, .mktoForm .mktoRadioList > input { position: static !important; opacity: 1 !important; width: 16px !important; height: 16px !important; margin: 0 10px 0 0 !important; padding: 0 !important; flex: 0 0 auto !important; box-shadow: none !important; -webkit-appearance: auto !important; appearance: auto !important; accent-color: var(--mir-red) !important; cursor: pointer !important; } .mktoForm .mktoCheckboxList > label, .mktoForm .mktoRadioList > label { display: inline !important; width: auto !important; margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.55) !important; cursor: pointer !important; } /* Single checkbox: pull its label down beside the box as one consent line. */ .mktoForm .mktoFieldWrap:has(> .mktoCheckboxList) { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 0 10px !important; margin-bottom: var(--mir-gap) !important; } .mktoForm .mktoFieldWrap:has(> .mktoCheckboxList) > .mktoLabel { order: 2 !important; flex: 1 1 0 !important; width: auto !important; margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.55) !important; } .mktoForm .mktoFieldWrap:has(> .mktoCheckboxList) > .mktoCheckboxList { order: 1 !important; flex: 0 0 auto !important; width: auto !important; margin: 2px 0 0 !important; } /* --------------------------------------------------------------------------- 6. Button ------------------------------------------------------------------------- */ .mktoForm .mktoButtonRow { display: block !important; width: 100% !important; margin-top: 4px !important; } .mktoForm .mktoButtonWrap { display: block !important; margin: 0 !important; /* clears Marketo's inline label-width indent */ } .mktoForm .mktoButtonWrap .mktoButton, .mktoForm .mktoButton { display: inline-flex !important; align-items: center !important; gap: 10px !important; width: auto !important; margin: 0 !important; padding: 12px 20px !important; background: var(--mir-blue) !important; background-color: var(--mir-blue) !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--mir-font) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.14em !important; line-height: 1 !important; text-transform: uppercase !important; text-shadow: none !important; color: var(--mir-white) !important; cursor: pointer !important; transition: background 0.2s, transform 0.15s !important; } /* Envelope. Inlined as a data URI and painted through a mask so it takes the button's own colour — no icon font, no network request. Wrapped in @supports so that browsers without mask support get no icon rather than a solid block. */ @supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .mktoForm .mktoButtonWrap .mktoButton::after, .mktoForm .mktoButton::after { content: '' !important; display: block !important; flex: 0 0 auto !important; width: 15px !important; height: 11px !important; background: currentColor !important; -webkit-mask: var(--mir-envelope) no-repeat center / contain !important; mask: var(--mir-envelope) no-repeat center / contain !important; } .mktoForm .mktoButton[type="reset"]::after { content: none !important; } } .mktoForm .mktoButtonWrap .mktoButton:hover, .mktoForm .mktoButton:hover { background: var(--mir-blue-dk) !important; background-color: var(--mir-blue-dk) !important; background-image: none !important; border: none !important; transform: scale(1.02) !important; } .mktoForm .mktoButtonWrap .mktoButton:focus-visible, .mktoForm .mktoButton:focus-visible { outline: 2px solid var(--mir-white) !important; outline-offset: 2px !important; } .mktoForm .mktoButtonWrap .mktoButton:disabled, .mktoForm .mktoButton:disabled { opacity: 0.55 !important; transform: none !important; cursor: default !important; } /* The form is configured with a second "Clear" button. The design has one action, so it is hidden here. Better still, switch it off in the form editor — then this rule simply never applies. */ .mktoForm .mktoButtonWrap .mktoButton[type="reset"], .mktoForm .mktoButton[type="reset"] { display: none !important; } /* --------------------------------------------------------------------------- 7. Validation ------------------------------------------------------------------------- */ .mktoForm .mktoField.mktoInvalid, .mktoForm .mktoField[aria-invalid="true"] { border-color: var(--mir-red) !important; } .mktoForm .mktoError { position: static !important; right: auto !important; bottom: auto !important; } .mktoForm .mktoError .mktoErrorArrowWrap, .mktoForm .mktoError .mktoErrorArrow { display: none !important; } .mktoForm .mktoError .mktoErrorMsg { display: block !important; max-width: none !important; margin: -6px 0 var(--mir-gap) !important; padding: 0 !important; background: none !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; color: #ff6b6b !important; } /* Success state. With a "stay on page" follow-up, Marketo clears the form and puts the thank-you content in its place; with a redirect, none of this runs. An emptied form would otherwise sit there as a bare 64px-tall dark box, so collapse it, and give any message text the same treatment as the rest. */ .mktoForm:empty { display: none !important; } .mktoForm .mktoConfirmMessage, .mktoForm + .mktoConfirmMessage, .mktoForm > p, .mktoForm > span { margin: 0 0 var(--mir-gap) !important; font-family: var(--mir-font) !important; font-size: 14px !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.8) !important; } .mktoForm > *:last-child { margin-bottom: 0 !important; } /* --------------------------------------------------------------------------- 8. Narrow screens — First / Last stop sharing a line ------------------------------------------------------------------------- */ @media (max-width: 640px) { .mktoForm { padding: var(--mir-form-padding, 24px 20px) !important; } .mktoForm .mktoFormCol { flex: 1 1 100% !important; } }