:root { --emailer-bg: #ffffff; --emailer-fg: #1f2937; --emailer-muted: #6b7280; --emailer-border: #d1d5db; --emailer-border-focus: #2563eb; --emailer-primary: #2563eb; --emailer-primary-hover: #1d4ed8; --emailer-error: #dc2626; --emailer-success: #047857; --emailer-input-bg: #ffffff; --emailer-focus-ring: rgba(37, 99, 235, 0.15); --emailer-info-bg: #eff6ff; --emailer-info-border: #bfdbfe; --emailer-info-fg: #1e40af; --emailer-radius: 8px; --emailer-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Spacing scale — density=compact tightens these */ --emailer-pad: 20px; --emailer-form-gap: 12px; --emailer-field-pad-y: 8px; --emailer-field-pad-x: 10px; --emailer-title-size: 18px; --emailer-textarea-min: 96px; } /* Dark token set — applied either when the embed explicitly asks for dark (data-theme="dark") or, in auto mode, when the visitor's OS prefers dark. theme.js sets data-theme on ; defaults to "auto". */ :root[data-theme="dark"] { --emailer-bg: #111827; --emailer-fg: #f3f4f6; --emailer-muted: #9ca3af; --emailer-border: #374151; --emailer-input-bg: #1f2937; --emailer-info-bg: #1e293b; --emailer-info-border: #1e3a8a; --emailer-info-fg: #93c5fd; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: transparent; font-family: var(--emailer-font); color: var(--emailer-fg); font-size: 14px; line-height: 1.5; } /* Compact density for hosts with tight marketing layouts (e.g. Subtwin cards). */ :root[data-density="compact"] { --emailer-pad: 12px; --emailer-form-gap: 8px; --emailer-field-pad-y: 6px; --emailer-field-pad-x: 8px; --emailer-title-size: 16px; --emailer-textarea-min: 72px; } .emailer { background: var(--emailer-bg); padding: var(--emailer-pad); max-width: 480px; margin: 0 auto; } .emailer__header { margin-bottom: 12px; } .emailer__title { font-size: var(--emailer-title-size); font-weight: 600; margin: 0 0 4px 0; } .emailer__subtitle { font-size: 13px; color: var(--emailer-muted); margin: 0; } .emailer__form { display: flex; flex-direction: column; gap: var(--emailer-form-gap); } .emailer__field { display: flex; flex-direction: column; gap: 4px; } .emailer__field label { font-size: 13px; font-weight: 500; } .emailer__field input, .emailer__field textarea { font-family: inherit; font-size: 14px; padding: var(--emailer-field-pad-y) var(--emailer-field-pad-x); border: 1px solid var(--emailer-border); border-radius: var(--emailer-radius); background: var(--emailer-input-bg); color: var(--emailer-fg); width: 100%; transition: border-color 120ms ease, box-shadow 120ms ease; } .emailer__field input:focus, .emailer__field textarea:focus { outline: none; border-color: var(--emailer-border-focus); box-shadow: 0 0 0 3px var(--emailer-focus-ring); } .emailer__field textarea { resize: vertical; min-height: var(--emailer-textarea-min); } .emailer__field input[aria-invalid="true"], .emailer__field textarea[aria-invalid="true"] { border-color: var(--emailer-error); } .emailer__error { font-size: 12px; color: var(--emailer-error); min-height: 14px; } /* --- custom fields (server-defined; rendered by widget.js) --- */ .emailer__field select { font-family: inherit; font-size: 14px; padding: var(--emailer-field-pad-y) var(--emailer-field-pad-x); border: 1px solid var(--emailer-border); border-radius: var(--emailer-radius); background: var(--emailer-input-bg); color: var(--emailer-fg); width: 100%; transition: border-color 120ms ease, box-shadow 120ms ease; } .emailer__field select:focus { outline: none; border-color: var(--emailer-border-focus); box-shadow: 0 0 0 3px var(--emailer-focus-ring); } .emailer__field select[aria-invalid="true"] { border-color: var(--emailer-error); } .emailer__checkbox { display: flex; align-items: flex-start; gap: 8px; } .emailer__checkbox input { width: auto; margin-top: 3px; accent-color: var(--emailer-primary); } .emailer__checkbox label { font-weight: 400; } .emailer__help { font-size: 12px; color: var(--emailer-muted); } .emailer__required { color: var(--emailer-error); } .emailer__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .emailer__actions { margin-top: 4px; } .emailer__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--emailer-primary); color: #ffffff; border: none; padding: 10px 16px; font-size: 14px; font-weight: 500; border-radius: var(--emailer-radius); cursor: pointer; transition: background-color 120ms ease; width: 100%; } .emailer__submit:hover:not(:disabled) { background: var(--emailer-primary-hover); } .emailer__submit:disabled { opacity: 0.6; cursor: not-allowed; } .emailer__spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: emailer-spin 0.7s linear infinite; } .emailer__submit.is-loading .emailer__spinner { display: inline-block; } @keyframes emailer-spin { to { transform: rotate(360deg); } } .emailer__status { font-size: 13px; min-height: 18px; margin-top: 4px; } .emailer__status.is-success { color: var(--emailer-success); } .emailer__status.is-error { color: var(--emailer-error); } /* Auto mode follows the visitor's OS setting. Explicit data-theme="light" stays light even when the OS prefers dark. */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --emailer-bg: #111827; --emailer-fg: #f3f4f6; --emailer-muted: #9ca3af; --emailer-border: #374151; --emailer-input-bg: #1f2937; --emailer-info-bg: #1e293b; --emailer-info-border: #1e3a8a; --emailer-info-fg: #93c5fd; } }