/* ============================================================ ELD Forms — public form styles Themed via CSS variables. Theme/density set via data-* attrs on the form's outer .eld-form-card container (NOT on ), so multiple forms with different themes can coexist on a page. Specificity strategy: We frequently have to win against arbitrary WordPress theme rules that style "any input on the page" or "any button on the page". Most rules below scope under .eld-form-card to gain specificity without resorting to !important. The places that DO use !important are the ones where themes routinely apply broad rules: focus outlines and link colors. ============================================================ */ .eld-form-card { --eld-accent: #1e4ae0; --eld-accent-hover: #1a3fc4; --eld-accent-soft: #e8eeff; --eld-accent-ring: rgba(30, 74, 224, 0.18); --eld-bg: #ffffff; --eld-card: #ffffff; --eld-fg: #0c1322; --eld-fg-muted: #4a5568; /* WCAG-AA on white: 7.5:1 */ --eld-fg-subtle: #6b7388; /* WCAG-AA on white: 5.0:1 (was 8b94a8 = 3.3:1) */ --eld-border: #e4e7ee; --eld-border-strong: #d1d6e0; --eld-input-bg: #ffffff; --eld-input-bg-hover: #fafbfd; --eld-danger: #d23b3b; --eld-danger-soft: #fdecec; --eld-success: #16a76b; --eld-radius: 10px; --eld-radius-input: 10px; --eld-radius-card: 18px; --eld-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif; --eld-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px -12px rgba(15, 23, 42, 0.10); --eld-shadow-input-focus: 0 0 0 4px var(--eld-accent-ring); --eld-density: 16px; } /* ---------- Themes (scoped to the form container) ---------- */ .eld-form-card[data-theme="rounded"] { --eld-radius: 16px; --eld-radius-input: 14px; --eld-radius-card: 24px; } .eld-form-card[data-theme="minimal"] { --eld-radius: 4px; --eld-radius-input: 6px; --eld-radius-card: 12px; --eld-shadow-card: 0 1px 0 var(--eld-border); --eld-border: #ececec; } .eld-form-card[data-theme="dark"] { --eld-bg: #0d1220; --eld-card: #141a2a; --eld-fg: #f1f4fa; --eld-fg-muted: #c5cdd9; /* WCAG-AA on dark card */ --eld-fg-subtle: #9aa3b8; /* WCAG-AA on dark card */ --eld-border: #232a3d; --eld-border-strong: #303955; --eld-input-bg: #1a2033; --eld-input-bg-hover: #1e2540; --eld-accent-soft: rgba(30, 74, 224, 0.15); --eld-shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 12px 40px -12px rgba(0,0,0,0.5); --eld-danger-soft: rgba(210, 59, 59, 0.18); } .eld-form-card[data-theme="bold"] { --eld-radius: 8px; --eld-radius-input: 10px; --eld-radius-card: 22px; --eld-fg: #06080f; --eld-border-strong: #06080f; --eld-shadow-card: 6px 6px 0 #06080f; } .eld-form-card[data-density="comfortable"] { --eld-density: 18px; } .eld-form-card[data-density="cozy"] { --eld-density: 16px; } .eld-form-card[data-density="compact"] { --eld-density: 12px; } /* ---------- Card ---------- */ .eld-form-card { width: 100%; max-width: 560px; background: var(--eld-card); border-radius: var(--eld-radius-card); box-shadow: var(--eld-shadow-card); border: 1px solid var(--eld-border); font-family: var(--eld-font); color: var(--eld-fg); box-sizing: border-box; } .eld-form-card *, .eld-form-card *::before, .eld-form-card *::after { box-sizing: border-box; } .eld-form-card[data-theme="bold"] { border: 2px solid #06080f; } /* Suppress WordPress theme default focus outlines on every interactive element inside the form card. We replace it with our own ring (set per- element below), which is more accessible AND matches the design. We need !important because many themes apply a global *:focus rule. */ .eld-form-card input:focus, .eld-form-card textarea:focus, .eld-form-card button:focus, .eld-form-card [role="listbox"]:focus, .eld-form-card [role="option"]:focus { outline: none !important; } .eld-form-card input:focus-visible, .eld-form-card textarea:focus-visible, .eld-form-card button:focus-visible { outline: none !important; } .eld-form { padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: var(--eld-density); margin: 0; } /* ---------- Header ---------- */ .eld-form-header { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; } .eld-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; background: var(--eld-accent-soft); color: var(--eld-accent); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } .eld-form-card[data-theme="bold"] .eld-badge { background: #06080f; color: #fff; border-radius: 6px; } .eld-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eld-accent); box-shadow: 0 0 0 0 var(--eld-accent); animation: eld-pulse 2s ease-out infinite; } .eld-form-card[data-theme="bold"] .eld-badge-dot { background: #fff; } @keyframes eld-pulse { 0% { box-shadow: 0 0 0 0 var(--eld-accent-ring); } 70% { box-shadow: 0 0 0 8px rgba(30,74,224,0); } 100% { box-shadow: 0 0 0 0 rgba(30,74,224,0); } } .eld-form-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--eld-fg); text-wrap: balance; } .eld-form-card[data-theme="bold"] .eld-form-title { font-weight: 800; letter-spacing: -0.025em; } .eld-form-subtitle { margin: 0; font-size: 15px; line-height: 1.5; color: var(--eld-fg-muted); text-wrap: pretty; } /* ---------- Field structure ---------- */ .eld-fields { display: flex; flex-direction: column; gap: var(--eld-density); } .eld-row { display: contents; } .eld-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .eld-row-2 { grid-template-columns: 1fr; } } .eld-empty-hint { padding: 14px 12px; border: 1px dashed var(--eld-border); border-radius: var(--eld-radius); font-size: 13px; color: var(--eld-fg-muted); text-align: center; background: var(--eld-input-bg); } /* ---------- Custom select ---------- */ .eld-form-card .eld-select-wrap { position: relative; } .eld-form-card .eld-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; padding-right: 36px; font: inherit; color: var(--eld-fg); } .eld-form-card .eld-select-btn.is-placeholder .eld-select-value { color: var(--eld-fg-subtle); } .eld-form-card .eld-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eld-form-card .eld-select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--eld-fg-muted); pointer-events: none; transition: transform 0.15s ease; } .eld-form-card .eld-select-wrap.is-open .eld-select-caret { transform: translateY(-50%) rotate(180deg); } .eld-form-card .eld-select-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; margin: 0; padding: 4px; list-style: none; background: var(--eld-input-bg); border: 1px solid var(--eld-border); border-radius: var(--eld-radius); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06); max-height: 240px; overflow-y: auto; animation: eld-select-in 120ms ease-out; } @keyframes eld-select-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .eld-form-card .eld-select-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: calc(var(--eld-radius) - 4px); cursor: pointer; font-size: 14px; color: var(--eld-fg); transition: background 0.1s ease; } .eld-form-card .eld-select-option.is-active { background: var(--eld-accent-soft); } .eld-form-card .eld-select-option.is-selected { color: var(--eld-accent); font-weight: 500; } .eld-form-card .eld-select-option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eld-form-card[data-theme="dark"] .eld-select-menu { background: #1a1d24; border-color: rgba(255,255,255,0.1); box-shadow: 0 16px 36px rgba(0,0,0,0.5); } .eld-form-card[data-theme="bold"] .eld-select-menu { border-width: 2px; border-color: #06080f; box-shadow: 4px 4px 0 #06080f; } /* ---------- Field rows ---------- */ .eld-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .eld-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .eld-label { font-size: 13.5px; font-weight: 600; color: var(--eld-fg); letter-spacing: -0.005em; } .eld-req { color: var(--eld-accent); margin-left: 2px; } .eld-hint { font-size: 12px; color: var(--eld-fg-subtle); } .eld-optional { font-weight: 400; color: var(--eld-fg-subtle); } /* ---------- Inputs ---------- */ .eld-form-card .eld-input { width: 100%; appearance: none; -webkit-appearance: none; background: var(--eld-input-bg); color: var(--eld-fg); border: 1px solid var(--eld-border); border-radius: var(--eld-radius-input); padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.4; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .eld-form-card[data-theme="bold"] .eld-input { border-width: 2px; border-color: #06080f; } .eld-form-card .eld-input::placeholder { color: var(--eld-fg-subtle); opacity: 1; } .eld-form-card .eld-input:hover { background: var(--eld-input-bg-hover); } .eld-form-card .eld-input:focus { outline: none !important; border-color: var(--eld-accent); box-shadow: var(--eld-shadow-input-focus); background: var(--eld-input-bg); } .eld-form-card .eld-input-error { border-color: var(--eld-danger); } .eld-form-card .eld-input-error:focus { box-shadow: 0 0 0 4px var(--eld-danger-soft); } .eld-form-card .eld-textarea { min-height: 88px; resize: vertical; font-family: inherit; } .eld-error-text { font-size: 12.5px; color: var(--eld-danger); display: flex; align-items: center; gap: 4px; margin-top: -2px; } /* ---------- Phone field ---------- */ .eld-form-card .eld-phone { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: stretch; border: 1px solid var(--eld-border); border-radius: var(--eld-radius-input); background: var(--eld-input-bg); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .eld-form-card[data-theme="bold"] .eld-phone { border-width: 2px; border-color: #06080f; } .eld-form-card .eld-phone:focus-within { border-color: var(--eld-accent); box-shadow: var(--eld-shadow-input-focus); } .eld-form-card .eld-input-error-wrap.eld-phone { border-color: var(--eld-danger); } .eld-form-card .eld-input-error-wrap.eld-phone:focus-within { box-shadow: 0 0 0 4px var(--eld-danger-soft); } .eld-form-card .eld-phone-country { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 0 12px; font: inherit; color: var(--eld-fg-muted); cursor: pointer; border-right: 1px solid var(--eld-border); border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .eld-form-card[data-theme="bold"] .eld-phone-country { border-right: 2px solid #06080f; } .eld-form-card .eld-phone-country:hover { background: var(--eld-input-bg-hover); } .eld-form-card .eld-flag { font-size: 18px; line-height: 1; } .eld-form-card .eld-dial { font-size: 14px; font-weight: 500; color: var(--eld-fg); } .eld-form-card .eld-phone-input { border: none !important; border-radius: 0 var(--eld-radius-input) var(--eld-radius-input) 0 !important; box-shadow: none !important; background: transparent !important; } .eld-form-card .eld-phone-input:focus { box-shadow: none !important; } .eld-form-card .eld-phone-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--eld-card); border: 1px solid var(--eld-border); border-radius: var(--eld-radius); box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.25); max-height: 280px; overflow-y: auto; z-index: 10; padding: 4px; } .eld-form-card .eld-phone-option { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; border: none; background: transparent; padding: 8px 10px; border-radius: calc(var(--eld-radius) - 2px); font: inherit; font-size: 14px; color: var(--eld-fg); text-align: left; cursor: pointer; } .eld-form-card .eld-phone-option:hover { background: var(--eld-input-bg-hover); } .eld-form-card .eld-phone-option.is-selected { background: var(--eld-accent-soft); color: var(--eld-accent); } .eld-form-card .eld-phone-name { color: inherit; } .eld-form-card .eld-phone-dial { color: var(--eld-fg-subtle); font-variant-numeric: tabular-nums; } /* ---------- Radio tiles ---------- */ .eld-form-card .eld-radio-group { display: grid; gap: 8px; } .eld-form-card .eld-radio-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--eld-border); border-radius: var(--eld-radius-input); background: var(--eld-input-bg); cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--eld-fg); transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .eld-form-card[data-theme="bold"] .eld-radio-tile { border-width: 2px; border-color: #06080f; } .eld-form-card .eld-radio-tile:hover { background: var(--eld-input-bg-hover); } .eld-form-card .eld-radio-tile input { position: absolute; opacity: 0; pointer-events: none; } .eld-form-card .eld-radio-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--eld-border-strong); background: var(--eld-input-bg); flex-shrink: 0; position: relative; transition: border-color 0.15s ease; } .eld-form-card .eld-radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--eld-accent); transform: scale(0); transition: transform 0.15s ease; } .eld-form-card .eld-radio-tile.is-selected { border-color: var(--eld-accent); background: var(--eld-accent-soft); color: var(--eld-accent); } .eld-form-card .eld-radio-tile.is-selected .eld-radio-dot { border-color: var(--eld-accent); } .eld-form-card .eld-radio-tile.is-selected .eld-radio-dot::after { transform: scale(1); } .eld-form-card .eld-radio-tile:focus-within { box-shadow: var(--eld-shadow-input-focus); border-color: var(--eld-accent); } .eld-form-card[data-theme="dark"] .eld-radio-tile.is-selected { color: #fff; } /* ---------- Consent / checkbox ---------- */ .eld-form-card .eld-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--eld-border); border-radius: var(--eld-radius-input); background: var(--eld-input-bg); cursor: pointer; user-select: none; } .eld-form-card[data-theme="bold"] .eld-consent { border-width: 2px; border-color: #06080f; } .eld-form-card .eld-consent input { position: absolute; opacity: 0; pointer-events: none; } .eld-form-card .eld-consent.is-error { border-color: var(--eld-danger); } .eld-form-card .eld-consent-box { width: 18px; height: 18px; border: 1.5px solid var(--eld-border-strong); border-radius: 5px; background: var(--eld-input-bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; transition: background 0.15s ease, border-color 0.15s ease; } .eld-form-card .eld-consent-box svg { opacity: 0; transition: opacity 0.15s ease; } .eld-form-card .eld-consent input:checked + .eld-consent-box { background: var(--eld-accent); border-color: var(--eld-accent); } .eld-form-card .eld-consent input:checked + .eld-consent-box svg { opacity: 1; } .eld-form-card .eld-consent input:focus + .eld-consent-box { box-shadow: var(--eld-shadow-input-focus); } .eld-form-card .eld-consent-text { font-size: 13px; line-height: 1.5; color: var(--eld-fg-muted); } /* ---------- Submit ---------- */ .eld-form-card .eld-submit { margin-top: 8px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; background: var(--eld-accent); color: #fff; padding: 14px 18px; border-radius: var(--eld-radius-input); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 16px -10px var(--eld-accent); } .eld-form-card[data-theme="bold"] .eld-submit { background: #06080f; box-shadow: 4px 4px 0 var(--eld-accent); border-radius: var(--eld-radius-input); } .eld-form-card[data-theme="bold"] .eld-submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--eld-accent); } .eld-form-card .eld-submit:hover:not(:disabled) { background: var(--eld-accent-hover); color: #fff; } .eld-form-card .eld-submit:active:not(:disabled) { transform: scale(0.995); } .eld-form-card .eld-submit:disabled { opacity: 0.7; cursor: not-allowed; } .eld-form-card .eld-submit:focus-visible { outline: none; box-shadow: var(--eld-shadow-input-focus), 0 8px 16px -10px var(--eld-accent); } .eld-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; animation: eld-spin 0.7s linear infinite; } @keyframes eld-spin { to { transform: rotate(360deg); } } /* ---------- Trust strip ---------- */ .eld-trust { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding-top: 4px; color: var(--eld-fg-subtle); } .eld-trust-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; } /* ---------- Success state ---------- */ .eld-success { padding: 48px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; font-family: var(--eld-font); color: var(--eld-fg); } .eld-success-icon { animation: eld-pop 0.4s cubic-bezier(.2,1.4,.4,1); } @keyframes eld-pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .eld-success-title { margin: 4px 0 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--eld-fg); } .eld-success-msg { margin: 0; font-size: 15px; color: var(--eld-fg-muted); max-width: 36ch; text-wrap: pretty; } /* The "Submit Another" link button. !important on color because some themes apply broad button or .button color rules that wash this out. */ .eld-form-card .eld-link-btn { margin-top: 8px; background: none; border: none; color: var(--eld-accent) !important; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 12px; border-radius: 8px; text-decoration: none; opacity: 1 !important; } .eld-form-card .eld-link-btn:hover { background: var(--eld-accent-soft); color: var(--eld-accent) !important; } /* ---------- Multi-step navigation ---------- */ .eld-step-nav { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .eld-step-nav .eld-submit { margin-top: 0; flex: 1; min-width: 0; } .eld-form-card .eld-step-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--eld-border); color: var(--eld-fg-muted); padding: 0 18px; height: 48px; border-radius: var(--eld-radius-input); font-size: 14.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; flex-shrink: 0; } .eld-form-card .eld-step-back:hover { background: var(--eld-input-bg-hover); color: var(--eld-fg); border-color: var(--eld-border-strong); } .eld-form-card .eld-step-back:focus-visible { outline: none; box-shadow: var(--eld-shadow-input-focus); } .eld-form-card[data-theme="bold"] .eld-step-back { border: 2px solid #06080f; color: #06080f; } /* ---------- Step progress indicator ---------- */ .eld-progress { margin-bottom: 4px; margin-top: calc(var(--eld-density) * -1 + 4px); } .eld-progress-bar { display: flex; flex-direction: column; gap: 6px; } .eld-progress-bar-track { position: relative; height: 4px; background: var(--eld-accent-soft); border-radius: 999px; overflow: hidden; } .eld-progress-bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--eld-accent); border-radius: 999px; transition: width 280ms cubic-bezier(.4,.0,.2,1); } .eld-progress-bar-label { font-size: 12px; color: var(--eld-fg-muted); font-weight: 500; letter-spacing: 0.01em; } .eld-progress-dots { display: flex; align-items: center; gap: 8px; } .eld-progress-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--eld-border); transition: background 220ms ease, transform 220ms ease; } .eld-progress-dot.is-done { background: var(--eld-accent); opacity: 0.55; } .eld-progress-dot.is-current { background: var(--eld-accent); transform: scale(1.35); box-shadow: 0 0 0 3px var(--eld-accent-soft); } .eld-progress-text-aside { margin-left: 4px; font-size: 12px; color: var(--eld-fg-muted); font-weight: 500; } .eld-progress-text { font-size: 13px; color: var(--eld-fg-muted); font-weight: 500; } .eld-progress-text strong { color: var(--eld-fg); font-weight: 600; } /* ============================================================ Surface containers — popup + bar These live OUTSIDE .eld-form-card (the surface wraps the card). z-index is set high enough to clear most theme chrome, sticky headers, and Cookie banners. If a site has a theme element with z-index > 999999, popup will sit behind it — no perfect way to guard against that without breaking other sites. ============================================================ */ #eld-surface-host { /* Empty host element. Per-form controllers append into here. */ } /* ---------- Popup backdrop + modal ---------- */ .eld-popup-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 24, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 999990; animation: eld-popup-fade-in 180ms ease-out; } @keyframes eld-popup-fade-in { from { opacity: 0; } to { opacity: 1; } } .eld-popup-modal { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 18px; background: transparent; animation: eld-popup-pop-in 240ms cubic-bezier(.2, 1.4, .4, 1); /* The form card inside provides its own background/shadow, so the modal wrapper itself is invisible — it just constrains layout and provides the rounded clipping for the close button. */ } @keyframes eld-popup-pop-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .eld-popup-modal .eld-form-card { /* Inside a popup, the card always wants to fill the modal width — no centering, no max-width override. The backdrop already centers the modal element, and the popup-card boundaries match the modal's. */ max-width: none; margin: 0; } /* On phone-sized screens, top-anchor the popup instead of vertically centering it. When the form is taller than 100vh - 40px (common with long titles, multi-step forms, or many fields), vertical centering pushes the top portion of the form above the visible viewport — the user has to scroll up inside the modal to see the title/badge that they were never told existed up there. Top-anchoring guarantees the form's top edge is always visible, and the user scrolls DOWN through it like any other long content. Backdrop padding also drops to give the modal a few more pixels of vertical room on small screens. */ @media (max-width: 540px) { .eld-popup-backdrop { align-items: flex-start; padding: 10px; } .eld-popup-modal { max-height: calc(100vh - 20px); } } .eld-popup-close { position: absolute; top: 14px; right: 14px; z-index: 5; /* !important on dimensions because WordPress themes routinely apply broad button rules (width:auto, padding, min-height) that distort the close button into an oval or pill shape. We need exact 32x32. */ width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: none; /* !important on background AND color across all states because some themes apply primary-color !important rules to all buttons that turn the close into a solid blue circle with white X. */ background: rgba(255, 255, 255, 0.92) !important; color: #1d2327 !important; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background 0.15s ease, transform 0.05s ease; } .eld-popup-close:hover { background: #ffffff !important; color: #1d2327 !important; transform: scale(1.08); } .eld-popup-close:focus, .eld-popup-close:active, .eld-popup-close:visited { background: rgba(255, 255, 255, 0.92) !important; color: #1d2327 !important; } .eld-popup-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(30, 74, 224, 0.4); } /* When the form inside is dark themed, the close button needs to flip to a dark background so it stays visible against a dark card edge. */ .eld-popup-modal:has(.eld-form-card[data-theme="dark"]) .eld-popup-close, .eld-popup-modal:has(.eld-form-card[data-theme="dark"]) .eld-popup-close:focus, .eld-popup-modal:has(.eld-form-card[data-theme="dark"]) .eld-popup-close:active, .eld-popup-modal:has(.eld-form-card[data-theme="dark"]) .eld-popup-close:visited { background: rgba(20, 26, 42, 0.92) !important; color: #f1f4fa !important; } .eld-popup-modal:has(.eld-form-card[data-theme="dark"]) .eld-popup-close:hover { background: #141a2a !important; color: #f1f4fa !important; } /* ---------- Bar ---------- */ /* * The bar host (.eld-bar-host-top / .eld-bar-host-bottom) is inserted at * the start or end of by surfaces.jsx, so the bar takes natural * document space — page content sits below (top) or above (bottom) it, * no overlap with theme headers, no body-padding hack required. * * Sticky positioning keeps the bar visible during scroll. We use * position: sticky on the .eld-bar itself rather than the host so the * host doesn't affect anything else (it's just a marker for where the * bar lives). */ .eld-bar-host { /* Stacking context for the bar. The host itself takes no space; the bar inside does. */ width: 100%; } .eld-bar { position: sticky; z-index: 999980; /* below popup, above most page content */ display: flex; align-items: center; justify-content: center; /* center .eld-bar-center as a group */ gap: 12px; /* Extra right padding leaves room for the absolutely-positioned close button so the centered group never overlaps it on narrow screens. */ padding: 10px 56px 10px 16px; color: #ffffff; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 15.5px; font-weight: 500; line-height: 1.4; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); animation: eld-bar-slide-in 280ms cubic-bezier(.2, 1, .4, 1); } /* The text + CTA group sits in the geometric center of the bar. Because the close button is absolutely positioned (out of normal flow), this group sees the full bar width and centers within it. */ .eld-bar-center { display: inline-flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%; } .eld-bar-top { top: 0; } .eld-bar-bottom { bottom: 0; } @keyframes eld-bar-slide-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } .eld-bar-bottom { animation-name: eld-bar-slide-in-bottom; } @keyframes eld-bar-slide-in-bottom { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } .eld-bar-text { flex: 1 1 auto; min-width: 0; text-align: center; /* Wraps gracefully on narrow screens; truncates on very narrow ones */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eld-bar-button { flex-shrink: 0; display: inline-flex; align-items: center; background: #ffffff !important; /* color is set via the --eld-bar-accent CSS variable that JSX attaches to the parent .eld-bar element. !important is necessary because WordPress themes routinely have global `button:hover` / `button:active` rules with their own !important that flip text and bg colors. We win all states with our own !important. */ color: var(--eld-bar-accent, #1e4ae0) !important; border: none; border-radius: 6px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease; } .eld-bar-button:hover, .eld-bar-button:focus, .eld-bar-button:focus-visible, .eld-bar-button:active, .eld-bar-button:visited { /* Subtle darken on hover — same gentle hover affordance as the form's submit button — while locking color so themes don't flip the text white on hover/active. */ color: var(--eld-bar-accent, #1e4ae0) !important; background: #ffffff !important; text-decoration: none; } .eld-bar-button:hover { background: #f3f4f6 !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .eld-bar-button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); } .eld-bar-close { /* Absolutely positioned to the right of the bar so it doesn't push the centered text+CTA group off-center. The bar reserves padding-right: 56px so this never overlaps the centered group. */ position: absolute; top: 50%; right: 14px; transform: translateY(-50%); /* !important for the same reason as .eld-popup-close — themes stretch buttons via min-width/padding rules. */ width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: none; background: rgba(255, 255, 255, 0.18); color: #ffffff; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: background 0.15s ease; } .eld-bar-close:hover { background: rgba(255, 255, 255, 0.28); } .eld-bar-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45); } /* On narrow screens, stack the bar's content vertically so it doesn't truncate. The bar is "modal-ish" in feel — it gets enough height to show everything readably. Layout decisions for mobile: - text and button stack vertically so neither has to truncate - text stays centered (matches desktop), reads better than left-align on narrow screens because the bar's narrow width keeps lines short - button hugs its text instead of stretching to full width — full-width buttons in announcement bars look like the bar IS the button, which makes the dismiss X confusing. align-items: center on the column lets each child size to its content. */ @media (max-width: 540px) { .eld-bar { padding: 10px 44px 10px 12px; } .eld-bar-center { flex-direction: column; align-items: center; gap: 8px; width: 100%; } .eld-bar-text { text-align: center; white-space: normal; } .eld-bar-button { /* Hug text width plus a bit of breathing room. max-width keeps it from going edge-to-edge on tablets where 540px breakpoint is still active but there's plenty of room for content. */ align-self: center; max-width: 280px; } .eld-bar-close { top: 8px; right: 8px; transform: none; } }