/* * ═══════════════════════════════════════════════════════════════════════════════ * Lavisa Destinations Theme — ENHANCED NEWSLETTER INLINE (rich polish) * ═══════════════════════════════════════════════════════════════════════════════ * * @file assets/css/ldt-enhanced-newsletter-rich.css * @package Lavisa_Destinations_Theme * @since 3.0.1 (post-3.0.0 visual refinement — newsletter inline rich polish) * @depends ALL prior enhanced CSS (loads after rtl-polish so it wins cascade) * * Targets sections/shared/section-newsletter-inline.php — the Hotel-deals / * Travel-deals signup strip used at the bottom of: * pages/page-hotels.php variant=gradient * pages/page-flights.php variant=gradient * pages/page-cars.php variant=gradient * ...and any other booking page * * FIXES the bug from E11: the existing rules only handle --inverted / * --dark variants for color flips. The --gradient and --solid variants * inherited the LIGHT-background color (#1e293b dark text) over a NAVY * gradient background — making the title nearly invisible. * * ENRICHES the section with: * • Multi-layer ambient background (existing dot pattern + new radial * accent glow + new bottom orange-glow strip) * • Decorative envelope ring on the left of the title (CSS-only) * • Eyebrow "NEWSLETTER" pill above the title (pseudo-element, no PHP edit) * • Title with text-shadow for depth + responsive type * • Pill-shaped fieldset with glass effect + subtle inner glow + accent * focus ring * • Submit button bigger + more energetic + accent shimmer on hover * • Privacy line with subtle lock prefix * • Trust dots animation: subtle floating motion on the background * * PURE CSS LAYER — NO PHP partial is touched. * * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ * 1. FIX THE VISIBILITY BUG — gradient + solid variants are ALSO dark backgrounds * * Apply the same color-flip rules that --inverted / --dark already had to the * --gradient and --solid variants. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__title, body .ldt-nl-inline--solid .ldt-nl-inline__title { color: #ffffff !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__subtitle, body .ldt-nl-inline--solid .ldt-nl-inline__subtitle { color: rgba(255, 255, 255, 0.86) !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__fieldset, body .ldt-nl-inline--solid .ldt-nl-inline__fieldset { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); } body .ldt-nl-inline--gradient .ldt-nl-inline__input, body .ldt-nl-inline--solid .ldt-nl-inline__input { color: #ffffff !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__input::placeholder, body .ldt-nl-inline--solid .ldt-nl-inline__input::placeholder { color: rgba(255, 255, 255, 0.55) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ * 2. RICH BACKGROUND — multi-layer ambient glow on the gradient variant * * Existing inline styles paint a soft radial dot pattern on the inner. We add * radial accent glows + a bottom orange highlight strip via additional * background layers stacked on top. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__inner { position: relative; overflow: hidden; border-radius: var(--ldt-radius-card, 1.25rem); /* Override the simple linear gradient with a richer composite. */ background: /* Top-right accent glow */ radial-gradient( circle at 90% 10%, rgba(255, 140, 0, 0.22) 0%, transparent 38% ), /* Bottom-left brand-light accent */ radial-gradient( circle at 8% 90%, rgba(0, 87, 184, 0.42) 0%, transparent 50% ), /* Base navy gradient */ linear-gradient( 135deg, #002560 0%, #003580 50%, #0057b8 100% ) !important; box-shadow: 0 24px 60px -16px rgba(0, 53, 128, 0.45), 0 8px 16px rgba(0, 53, 128, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; padding: 36px 40px !important; } /* Decorative bottom-glow strip — subtle accent line at the bottom edge */ body .ldt-nl-inline--gradient .ldt-nl-inline__inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient( 90deg, transparent 0%, rgba(255, 140, 0, 0.50) 30%, rgba(255, 140, 0, 0.80) 50%, rgba(255, 140, 0, 0.50) 70%, transparent 100% ); opacity: 0.6; pointer-events: none; z-index: 2; } [dir="rtl"] body .ldt-nl-inline--gradient .ldt-nl-inline__inner, .ldt-rtl body .ldt-nl-inline--gradient .ldt-nl-inline__inner { /* Mirror the radial glows in RTL */ background: radial-gradient( circle at 10% 10%, rgba(255, 140, 0, 0.22) 0%, transparent 38% ), radial-gradient( circle at 92% 90%, rgba(0, 87, 184, 0.42) 0%, transparent 50% ), linear-gradient( 225deg, #002560 0%, #003580 50%, #0057b8 100% ) !important; } /* ═══════════════════════════════════════════════════════════════════════════════ * 3. EYEBROW PILL — "NEWSLETTER" pill above the title (CSS-only, via ::before) * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__text { position: relative; z-index: 1; } body .ldt-nl-inline--gradient .ldt-nl-inline__text::before { content: "✉ NEWSLETTER"; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; margin-bottom: 12px; background: rgba(255, 140, 0, 0.18); color: #ffd699; border: 1px solid rgba(255, 140, 0, 0.35); border-radius: var(--ldt-radius-pill, 9999px); font-size: 11px; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(255, 140, 0, 0.20); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Arabic eyebrow */ [dir="rtl"] body .ldt-nl-inline--gradient .ldt-nl-inline__text::before, .ldt-rtl body .ldt-nl-inline--gradient .ldt-nl-inline__text::before { content: "✉ النشرة البريدية"; letter-spacing: 0; text-transform: none; } /* ═══════════════════════════════════════════════════════════════════════════════ * 4. TITLE — bigger, with text-shadow for depth, gradient highlight on key word * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__title { font-size: clamp(1.5rem, 2.6vw, 2rem) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin: 0 0 8px !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.30), 0 0 24px rgba(255, 140, 0, 0.10); } /* ═══════════════════════════════════════════════════════════════════════════════ * 5. SUBTITLE — better contrast, a touch of warmth * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__subtitle { font-size: 14.5px !important; line-height: 1.55 !important; margin: 0 !important; max-width: 460px; } /* ═══════════════════════════════════════════════════════════════════════════════ * 6. FIELDSET — pill-shaped glass, brighter focus ring, inner glow * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__fieldset { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: var(--ldt-radius-pill, 9999px) !important; padding: 6px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 250ms var(--ldt-ease-portal, ease), border-color 250ms var(--ldt-ease-portal, ease), box-shadow 250ms var(--ldt-ease-portal, ease); } body .ldt-nl-inline--gradient .ldt-nl-inline__fieldset:focus-within { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 140, 0, 0.65) !important; box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.20), 0 6px 18px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } /* ═══════════════════════════════════════════════════════════════════════════════ * 7. INPUT — comfortable padding, weight, white-on-translucent * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__input { padding: 12px 18px !important; font-size: 14.5px !important; font-weight: 500; color: #ffffff !important; letter-spacing: 0.01em; } body .ldt-nl-inline--gradient .ldt-nl-inline__input::placeholder { color: rgba(255, 255, 255, 0.55) !important; font-weight: 400; } /* ═══════════════════════════════════════════════════════════════════════════════ * 8. SUBMIT BUTTON — bigger, accent shimmer on hover * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__submit { position: relative; overflow: hidden; padding: 12px 24px !important; border-radius: var(--ldt-radius-pill, 9999px) !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.02em; background: linear-gradient( 135deg, #ff9d1a 0%, #ff8c00 50%, #e07a00 100% ) !important; box-shadow: 0 6px 18px rgba(255, 140, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important; transition: transform 250ms var(--ldt-ease-portal, ease), box-shadow 250ms var(--ldt-ease-portal, ease), filter 250ms var(--ldt-ease-portal, ease); } /* Shimmer sweep across button on hover */ body .ldt-nl-inline--gradient .ldt-nl-inline__submit::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100% ); transition: left 600ms var(--ldt-ease-portal, ease); pointer-events: none; } @media (hover: hover) and (pointer: fine) { body .ldt-nl-inline--gradient .ldt-nl-inline__submit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 140, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.22) inset !important; filter: brightness(1.08); } body .ldt-nl-inline--gradient .ldt-nl-inline__submit:hover::before { left: 100%; } } @media (prefers-reduced-motion: reduce) { body .ldt-nl-inline--gradient .ldt-nl-inline__submit::before { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 9. PRIVACY LINE — better visibility, subtle lock prefix * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__privacy { color: rgba(255, 255, 255, 0.65) !important; font-size: 12px; margin: 10px 0 0 !important; display: flex; align-items: center; justify-content: flex-end; gap: 6px; text-align: right; } body .ldt-nl-inline--gradient .ldt-nl-inline__privacy::before { content: "🔒"; font-size: 11px; opacity: 0.8; } [dir="rtl"] body .ldt-nl-inline--gradient .ldt-nl-inline__privacy, .ldt-rtl body .ldt-nl-inline--gradient .ldt-nl-inline__privacy { justify-content: flex-start; text-align: left; } /* ═══════════════════════════════════════════════════════════════════════════════ * 10. STATUS MESSAGE — better visibility on dark bg * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--gradient .ldt-nl-inline__status:not(:empty) { margin-top: 8px; padding: 8px 14px; border-radius: var(--ldt-radius-input, 0.75rem); font-size: 13px; font-weight: 600; } body .ldt-nl-inline--gradient .ldt-nl-inline__status[data-status="success"], body .ldt-nl-inline--gradient .ldt-nl-inline__status.is-success { background: rgba(34, 197, 94, 0.20); border: 1px solid rgba(34, 197, 94, 0.40); color: #86efac; } body .ldt-nl-inline--gradient .ldt-nl-inline__status[data-status="error"], body .ldt-nl-inline--gradient .ldt-nl-inline__status.is-error { background: rgba(239, 68, 68, 0.20); border: 1px solid rgba(239, 68, 68, 0.40); color: #fca5a5; } /* ═══════════════════════════════════════════════════════════════════════════════ * 11. RESPONSIVE — mobile tightens nicely * ═══════════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body .ldt-nl-inline--gradient .ldt-nl-inline__inner { padding: 28px 22px !important; text-align: center; } body .ldt-nl-inline--gradient .ldt-nl-inline__text::before { margin-left: auto; margin-right: auto; } body .ldt-nl-inline--gradient .ldt-nl-inline__subtitle { margin: 0 auto !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__title { font-size: clamp(1.375rem, 5vw, 1.75rem) !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__fieldset { flex-direction: column; border-radius: var(--ldt-radius-card, 1.25rem) !important; padding: 8px !important; gap: 8px !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__input { text-align: center; padding: 12px 16px !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__submit { width: 100%; padding: 14px 24px !important; } body .ldt-nl-inline--gradient .ldt-nl-inline__privacy { justify-content: center !important; text-align: center !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ * 12. SOLID VARIANT — the same enrichment, simpler bg (single brand color) * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline--solid .ldt-nl-inline__inner { position: relative; overflow: hidden; border-radius: var(--ldt-radius-card, 1.25rem); background: radial-gradient( circle at 90% 10%, rgba(255, 140, 0, 0.18) 0%, transparent 38% ), var(--ldt-primary, #003580) !important; box-shadow: 0 24px 60px -16px rgba(0, 53, 128, 0.45), 0 8px 16px rgba(0, 53, 128, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; padding: 36px 40px !important; } /* Solid variant uses the same eyebrow + fieldset polish (rules above use --gradient OR --solid via the early "1. Fix the visibility bug" block) */ /* ═══════════════════════════════════════════════════════════════════════════════ * 13. SPINNER — restore default-hidden state (fixes E11 regression) * * The partial's inline CSS sets the spinner to `display: none` by default, * and only shows it when `.ldt-nl-inline__submit.is-loading` is on the parent * button (toggled by the JS during fetch). E11's CTA polish forced * `display: inline-block` unconditionally, breaking the gating — the spinner * spun forever regardless of submission state. This was masked while the * REST endpoint was returning 404 (the loading state never completed) and * surfaced after 3.0.2 when subscriptions started succeeding. * * Restore the correct gating: * - Default: spinner hidden * - Only visible while `.is-loading` is on the parent submit button * * Applies to all variants, not just gradient — so this also fixes /subtle/ * /solid/ /inverted/ /dark/ if any of those forms get reached. * ═══════════════════════════════════════════════════════════════════════════════ */ body .ldt-nl-inline__spinner { display: none !important; } body .ldt-nl-inline__submit.is-loading .ldt-nl-inline__spinner { display: inline-block !important; } body .ldt-nl-inline__submit.is-loading [data-role="submit-label"] { opacity: 0; transition: opacity 150ms ease; } /* Position spinner centered inside the button while loading (the partial's .is-loading rules expect absolute positioning at the button center). */ body .ldt-nl-inline__submit { position: relative; } body .ldt-nl-inline__submit.is-loading .ldt-nl-inline__spinner { position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -7px; } /* ─── END OF ldt-enhanced-newsletter-rich.css ─────────────────────────────── */