/* ============================================================ AutoScribe Newsletter Form v4 Default: works on dark backgrounds (glassmorphism) Light mode: explicit overrides via class/media query ============================================================ */ /* ── Brand color defaults (overridden by Newsletter_BrandDetector in ) ── */ :root { --anl-primary: #6366f1; --anl-primary-dark: #4f46e5; --anl-primary-light: #f0f0ff; --anl-primary-rgb: 99, 102, 241; } /* ── Reset ── */ .autoscribe-nl-form-wrap, .autoscribe-nl-form-wrap * { box-sizing: border-box !important; } /* ── Outer wrapper ── */ .autoscribe-nl-form-wrap { width: 100% !important; max-width: 640px !important; margin: 0 auto !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } /* ── Card — DEFAULT (dark/glassmorphism) ── */ .autoscribe-nl-card { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 16px !important; padding: 28px 28px 22px !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; position: relative !important; overflow: hidden !important; transition: background 0.3s, border-color 0.3s !important; } /* Brand color top bar */ .autoscribe-nl-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, var(--anl-primary), var(--anl-primary-dark)) !important; display: block !important; } /* ── Header (shown when title/desc provided) ── */ .autoscribe-nl-header { display: none !important; } .autoscribe-nl-form-wrap.has-header .autoscribe-nl-header { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 0 18px 0 !important; } .autoscribe-nl-icon-wrap { flex-shrink: 0 !important; width: 42px !important; height: 42px !important; background: linear-gradient(135deg, var(--anl-primary), var(--anl-primary-dark)) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; box-shadow: 0 4px 12px rgba(var(--anl-primary-rgb), 0.3) !important; } .autoscribe-nl-header-text { flex: 1 !important; } .autoscribe-nl-form-title { font-size: 1.1rem !important; font-weight: 700 !important; color: #f1f5f9 !important; margin: 0 0 4px 0 !important; line-height: 1.3 !important; } .autoscribe-nl-form-description { font-size: 0.85rem !important; color: #94a3b8 !important; margin: 0 !important; line-height: 1.5 !important; } /* ── Input row — email + button side by side ── */ .autoscribe-nl-input-row { display: flex !important; gap: 10px !important; margin: 0 0 12px 0 !important; flex-wrap: wrap !important; } .autoscribe-nl-input-row .autoscribe-nl-input { flex: 1 1 200px !important; margin-bottom: 0 !important; min-width: 0 !important; } .autoscribe-nl-input-row .autoscribe-nl-submit { flex: 0 0 auto !important; width: auto !important; padding: 13px 24px !important; white-space: nowrap !important; } /* ── Email input — DEFAULT dark ── */ .autoscribe-nl-input { display: block !important; width: 100% !important; background: rgba(255,255,255,0.08) !important; border: 1.5px solid rgba(255,255,255,0.15) !important; border-radius: 10px !important; padding: 13px 16px !important; font-size: 0.93rem !important; color: #f1f5f9 !important; outline: none !important; -webkit-appearance: none !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .autoscribe-nl-input::placeholder { color: rgba(255,255,255,0.35) !important; opacity: 1 !important; } .autoscribe-nl-input:focus { border-color: var(--anl-primary) !important; box-shadow: 0 0 0 3px rgba(var(--anl-primary-rgb), 0.2) !important; outline: none !important; } /* ── Submit button ── */ .autoscribe-nl-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; background: var(--anl-primary) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; padding: 13px 20px !important; font-size: 0.93rem !important; font-weight: 700 !important; cursor: pointer !important; transition: background 0.18s, transform 0.12s, box-shadow 0.18s !important; box-shadow: 0 4px 14px rgba(var(--anl-primary-rgb), 0.4) !important; white-space: nowrap !important; text-decoration: none !important; } .autoscribe-nl-submit:hover { background: var(--anl-primary-dark) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(var(--anl-primary-rgb), 0.5) !important; color: #ffffff !important; } .autoscribe-nl-submit:active { transform: translateY(0) !important; } .autoscribe-nl-submit:disabled { opacity: 0.55 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ── GDPR ── */ .autoscribe-nl-gdpr { display: flex !important; align-items: flex-start !important; gap: 8px !important; font-size: 0.78rem !important; color: #64748b !important; line-height: 1.5 !important; cursor: pointer !important; margin: 0 !important; } .autoscribe-nl-gdpr input[type="checkbox"] { margin-top: 2px !important; flex-shrink: 0 !important; width: 14px !important; height: 14px !important; accent-color: var(--anl-primary) !important; cursor: pointer !important; } .autoscribe-nl-gdpr span { color: #64748b !important; font-size: 0.78rem !important; } /* ── Footer row ── */ .autoscribe-nl-footer-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; margin: 12px 0 0 0 !important; flex-wrap: wrap !important; } .autoscribe-nl-privacy { font-size: 11px !important; color: rgba(255,255,255,0.25) !important; display: flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; } .autoscribe-nl-trust-badges { display: flex !important; gap: 10px !important; } .autoscribe-nl-trust-badge { font-size: 11px !important; color: #475569 !important; display: flex !important; align-items: center !important; gap: 3px !important; } /* ── Error ── */ .autoscribe-nl-error { display: none !important; color: #f87171 !important; font-size: 12px !important; padding: 8px 12px !important; background: rgba(239,68,68,0.1) !important; border-radius: 8px !important; border-left: 3px solid #ef4444 !important; margin: 8px 0 0 0 !important; } /* ── Success ── */ .autoscribe-nl-success { text-align: center !important; padding: 12px 0 4px !important; } .autoscribe-nl-success-icon { font-size: 36px !important; display: block !important; margin: 0 0 8px 0 !important; animation: anl-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) !important; } @keyframes anl-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .autoscribe-nl-success-text { font-size: 1rem !important; font-weight: 700 !important; color: #a78bfa !important; margin: 0 0 3px 0 !important; } .autoscribe-nl-success-sub { font-size: 0.83rem !important; color: #64748b !important; margin: 0 !important; } /* ============================================================ LIGHT MODE — card becomes solid white/tinted Triggered by: OS preference OR explicit class on html/body ============================================================ */ /* OS light mode */ @media (prefers-color-scheme: light) { .autoscribe-nl-card { background: var(--anl-primary-light, #f0f0ff) !important; border-color: rgba(var(--anl-primary-rgb), 0.15) !important; } .autoscribe-nl-input { background: #ffffff !important; border-color: rgba(var(--anl-primary-rgb), 0.2) !important; color: #111827 !important; } .autoscribe-nl-input::placeholder { color: #9ca3af !important; } .autoscribe-nl-form-title { color: #111827 !important; } .autoscribe-nl-form-description { color: #6b7280 !important; } .autoscribe-nl-privacy { color: #d1d5db !important; } .autoscribe-nl-success-text { color: var(--anl-primary) !important; } } /* Class-based light mode */ [data-theme="light"] .autoscribe-nl-card, [data-bs-theme="light"] .autoscribe-nl-card, [data-color-mode="light"] .autoscribe-nl-card { background: var(--anl-primary-light, #f0f0ff) !important; border-color: rgba(var(--anl-primary-rgb), 0.15) !important; } [data-theme="light"] .autoscribe-nl-input, [data-bs-theme="light"] .autoscribe-nl-input, [data-color-mode="light"] .autoscribe-nl-input { background: #ffffff !important; border-color: rgba(var(--anl-primary-rgb), 0.2) !important; color: #111827 !important; } [data-theme="light"] .autoscribe-nl-input::placeholder, [data-bs-theme="light"] .autoscribe-nl-input::placeholder { color: #9ca3af !important; } [data-theme="light"] .autoscribe-nl-form-title, [data-bs-theme="light"] .autoscribe-nl-form-title { color: #111827 !important; } [data-theme="light"] .autoscribe-nl-privacy, [data-bs-theme="light"] .autoscribe-nl-privacy { color: #d1d5db !important; } /* ============================================================ DARK MODE — explicit dark classes (already default, but ensure) ============================================================ */ .dark .autoscribe-nl-card, .dark-mode .autoscribe-nl-card, .night-mode .autoscribe-nl-card, [data-theme="dark"] .autoscribe-nl-card, [data-bs-theme="dark"] .autoscribe-nl-card, [data-color-mode="dark"] .autoscribe-nl-card, .wp-dark-mode-active .autoscribe-nl-card { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; } .dark .autoscribe-nl-input, .dark-mode .autoscribe-nl-input, .night-mode .autoscribe-nl-input, [data-theme="dark"] .autoscribe-nl-input, [data-bs-theme="dark"] .autoscribe-nl-input, [data-color-mode="dark"] .autoscribe-nl-input, .wp-dark-mode-active .autoscribe-nl-input { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.15) !important; color: #f1f5f9 !important; } .dark .autoscribe-nl-input::placeholder, .dark-mode .autoscribe-nl-input::placeholder, [data-theme="dark"] .autoscribe-nl-input::placeholder, [data-bs-theme="dark"] .autoscribe-nl-input::placeholder, .wp-dark-mode-active .autoscribe-nl-input::placeholder { color: rgba(255,255,255,0.35) !important; } /* ── Mobile ── */ @media (max-width: 520px) { .autoscribe-nl-card { padding: 22px 18px 18px !important; border-radius: 14px !important; } .autoscribe-nl-input-row { flex-direction: column !important; } .autoscribe-nl-input-row .autoscribe-nl-submit { width: 100% !important; padding: 13px !important; } .autoscribe-nl-footer-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } } /* ============================================================ SECTION WRAPPER — for standalone newsletter sections ============================================================ */ .autoscribe-nl-section { background: linear-gradient(135deg, #0f172a 0%, #1a1040 50%, #0f172a 100%); padding: 64px 0; transition: background 0.3s; } @media (prefers-color-scheme: light) { .autoscribe-nl-section { background: linear-gradient(135deg, #f0f0ff 0%, #faf5ff 100%); } } [data-theme="light"] .autoscribe-nl-section, [data-bs-theme="light"] .autoscribe-nl-section, [data-color-mode="light"] .autoscribe-nl-section { background: linear-gradient(135deg, #f0f0ff 0%, #faf5ff 100%); } .dark .autoscribe-nl-section, .dark-mode .autoscribe-nl-section, .night-mode .autoscribe-nl-section, [data-theme="dark"] .autoscribe-nl-section, [data-bs-theme="dark"] .autoscribe-nl-section, [data-color-mode="dark"] .autoscribe-nl-section, .wp-dark-mode-active .autoscribe-nl-section { background: linear-gradient(135deg, #0f172a 0%, #1a1040 50%, #0f172a 100%); }