/* Atelier Newsletter - style popup i formularza * Zgodność z mockupem: kierunek "Nowoczesny / glass" - gradienty 667eea→764ba2, backdrop-filter, cienie, zaokrąglenia. * UWAGA: overlay jest przenoszony do przez JS - reguły pod .atelier-newsletter-ov, NIE pod .atelier-newsletter! */ /* Wrapper shortcode - przycisk wyzwalacz (kontener widoczny na stronie) */ .atelier-newsletter { display: block; margin: 1.5rem 0; } /* Przycisk wyzwalacz popup - gradient, cień, hover transform */ .atelier-newsletter .atelier-newsletter-open { display: inline-block; padding: 1rem 2rem; border: 0; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .atelier-newsletter .atelier-newsletter-open:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5); } .atelier-newsletter .atelier-newsletter-open:focus { outline: 2px solid #667eea; outline-offset: 2px; } /* Overlay - fullscreen przyciemnione tło z blur, fixed, centred */ .atelier-newsletter-ov { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2147483000; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: #1d2327; opacity: 0; transition: opacity 0.3s ease; } .atelier-newsletter-ov.atelier-newsletter-ov--open { display: flex; opacity: 1; } /* Karta modalu - glass effect, cień, animacja slideIn */ .atelier-newsletter-ov .atelier-newsletter-card { position: relative; box-sizing: border-box; width: 100%; max-width: 500px; max-height: 90vh; overflow: auto; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-radius: 20px; padding: 2.5rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: atelierSlideIn 0.4s ease; } @keyframes atelierSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } /* Przycisk zamykający × - prawy górny róg */ .atelier-newsletter-ov .atelier-newsletter-x { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; color: #888; transition: color 0.3s ease; } .atelier-newsletter-ov .atelier-newsletter-x:hover { color: #333; } .atelier-newsletter-ov .atelier-newsletter-x:focus { outline: 2px solid #667eea; outline-offset: 2px; } /* Nagłówek modalu - gradient text */ .atelier-newsletter-ov .atelier-newsletter-h { margin: 0 0 0.75rem; font-size: 1.75rem; font-weight: 700; background: linear-gradient(135deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } /* Opis pod nagłówkiem (opcjonalny) */ .atelier-newsletter-ov .atelier-newsletter-d { margin: 0 0 1.5rem; font-size: 0.9375rem; color: #555; } /* Formularz - reset marginesów */ .atelier-newsletter-ov .atelier-newsletter-form { margin: 0; } /* Wiersz pola (email) */ .atelier-newsletter-ov .atelier-newsletter-form__row { display: block; margin: 0 0 1.25rem; } /* Pole email - obramowanie, focus z cieniem i kolorem */ .atelier-newsletter-ov .atelier-newsletter-form__input { box-sizing: border-box; width: 100%; padding: 0.875rem 1rem; font-family: inherit; font-size: 1rem; line-height: 1.5; background: #fff; color: #1d2327; border: 2px solid #e0e0e0; border-radius: 10px; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .atelier-newsletter-ov .atelier-newsletter-form__input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1); } .atelier-newsletter-ov .atelier-newsletter-form__input::placeholder { color: #999; } /* Wiersz checkboxa zgody - flex start, gap */ .atelier-newsletter-ov .atelier-newsletter-form__consent { display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; margin: 0 0 1.5rem; font-size: 0.875rem; line-height: 1.5; color: #555; cursor: pointer; } .atelier-newsletter-ov .atelier-newsletter-form__consent-cb { flex: 0 0 auto; width: 20px; height: 20px; min-width: 20px; min-height: 20px; margin: 0.25rem 0 0; cursor: pointer; } .atelier-newsletter-ov .atelier-newsletter-form__consent span { flex: 1 1 auto; min-width: 0; } .atelier-newsletter-ov .atelier-newsletter-form__consent a { color: #667eea; text-decoration: none; } .atelier-newsletter-ov .atelier-newsletter-form__consent a:hover { text-decoration: underline; } /* Przycisk submit - gradient, pełna szerokość, hover transform */ .atelier-newsletter-ov .atelier-newsletter-form__button { box-sizing: border-box; width: 100%; margin-top: 0; padding: 1rem 1.25rem; border: 0; cursor: pointer; font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.2; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .atelier-newsletter-ov .atelier-newsletter-form__button:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5); } .atelier-newsletter-ov .atelier-newsletter-form__button:focus { outline: 2px solid #667eea; outline-offset: 2px; } .atelier-newsletter-ov .atelier-newsletter-form__button[disabled] { opacity: 0.6; cursor: default; transform: none; } /* Komunikat sukcesu/błędu - wyświetlany przez JS */ .atelier-newsletter-ov .atelier-newsletter-form__message { margin: 1rem 0 0; padding: 1rem; font-size: 0.9375rem; font-weight: 500; text-align: center; border-radius: 10px; min-height: 1.2em; } .atelier-newsletter-ov .atelier-newsletter-form__message:empty { display: none; } /* Honeypot field - niewidoczny (MUSI być poza wrapperem, scope płaski) */ .atelier-newsletter-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; display: none !important; } /* Responsywność - tablet/mobile */ @media (max-width: 768px) { .atelier-newsletter-ov .atelier-newsletter-card { padding: 2rem; } .atelier-newsletter-ov .atelier-newsletter-h { font-size: 1.5rem; } } @media (max-width: 480px) { .atelier-newsletter-ov { padding: 12px; } .atelier-newsletter-ov .atelier-newsletter-card { padding: 1.5rem; } .atelier-newsletter .atelier-newsletter-open { padding: 0.875rem 1.5rem; font-size: 0.9375rem; } .atelier-newsletter-ov .atelier-newsletter-form__button { font-size: 1rem; padding: 0.875rem 1rem; } }