.newsletter-container { width: 100%; max-width: 400px; margin: 2rem auto; padding: 1.5rem; background: linear-gradient(145deg, var(--md-primary-fg-color--light), var(--md-primary-fg-color)); border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1), inset 0 -2px 0 rgba(0,0,0,0.1); } .listmonk-form { padding: 1.5rem; border-radius: 12px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transition: transform 0.2s ease; } .listmonk-form:hover { transform: translateY(-5px); } .listmonk-form h3 { color: var(--md-primary-bg-color); font-size: 1.4rem; margin: 0 0 1.5rem 0; text-align: center; font-weight: 600; letter-spacing: 0.5px; } .listmonk-form input[type="email"], .listmonk-form input[type="text"] { width: 100%; padding: 0.8rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: rgba(255,255,255,0.08); color: var(--md-primary-bg-color); font-size: 0.95rem; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); } .listmonk-form input[type="email"]:focus, .listmonk-form input[type="text"]:focus { outline: none; border-color: var(--md-accent-fg-color); background: rgba(255,255,255,0.12); box-shadow: 0 0 0 3px rgba(33,150,243,0.1), inset 0 2px 4px rgba(0,0,0,0.1); } .listmonk-form input[type="email"]::placeholder, .listmonk-form input[type="text"]::placeholder { color: rgba(255,255,255,0.5); } .checkbox-wrapper { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 1.5rem; } .listmonk-form input[type="checkbox"] { width: 18px; height: 18px; border-radius: 4px; accent-color: var(--md-accent-fg-color); } .listmonk-form label { color: var(--md-primary-bg-color); font-size: 0.9rem; line-height: 1.4; opacity: 0.9; } .listmonk-form input[type="submit"] { width: 100%; padding: 0.8rem; border: none; border-radius: 8px; background: var(--md-primary-bg-color); color: var(--md-primary-fg-color); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .listmonk-form input[type="submit"]:hover { background: var(--md-accent-fg-color); color: var(--md-accent-bg-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* Dark theme adjustments */ [data-md-color-scheme="slate"] .listmonk-form { background: var(--md-primary-fg-color--light); box-shadow: 0 8px 15px rgba(0,0,0,0.25), 0 12px 25px rgba(0,0,0,0.2), inset 0 -4px 0px #0D47A1; } [data-md-color-scheme="slate"] .newsletter-container { background: linear-gradient(145deg, var(--md-primary-fg-color--light), var(--md-primary-fg-color--dark)); } /* Mobile responsiveness */ @media (max-width: 768px) { .newsletter-container { margin: 0.5rem auto; padding: 1.25rem; width: calc(100% - 1rem); max-width: 100%; border-radius: 4px; } .listmonk-form { padding: 0.75rem; width: 100%; } .listmonk-form h3 { font-size: 1.2rem; margin: 0.5rem 0; } .listmonk-form input[type="email"], .listmonk-form input[type="text"], .listmonk-form input[type="submit"] { padding: 0.75rem; margin: 0.5rem 0; width: 100%; border-radius: 4px; } .checkbox-wrapper { margin: 0.75rem 0; padding: 0 0.25rem; } }