:root{ --miura-error-color: #c02d2d; /* red-ish, matches WP admin error tone */ } /* Hide newsletter form until the page has fully loaded (prevents flicker and unwanted br/p wrapping issues) We reveal the form when the receives the class .miura-newsletter-loaded via JS on window.load */ .miura-newsletter-form { visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease, transform .18s ease; transform: translateY(6px); } body.miura-newsletter-loaded .miura-newsletter-form { visibility: visible; opacity: 1; transform: translateY(0); } /* Make frontend/server notice-error visible as red */ .notice.notice-error, .notice-error { color: var(--miura-error-color); } /* Form field invalid indication */ .miura-invalid { border-color: var(--miura-error-color) !important; outline-color: rgba(192,45,45,0.4); } .miura-error { color: var(--miura-error-color); display: block; margin-top: 4px; font-size: 13px; } /* FORM */ /* ============================================================ ESTILOS PREMIUM PARA INPUTS, SELECTS, CHECKBOX Y BOTÓN (Sin contenedores, sin popup, sin overlays, sin grids) ============================================================ */ /* ====== CAMPOS DE TEXTO Y SELECT ====== */ .miura-nl-field input, .miura-nl-field select { font-size: 20px; font-family: inherit; background-color: transparent; border: none; border-bottom: 1px solid #959695; width: 100%; padding: 6px 0 10px; color: #959695; outline: none; transition: border-color .2s ease; } .miura-nl-field input:focus, .miura-nl-field select:focus { border-bottom-color: #b88315; /* dorado */ } .miura-nl-field input::placeholder { color: #959695; opacity: 1; } /* ====== CHECKBOX ====== */ .miura-nl-checkbox input[type="checkbox"] { display: none; } .miura-nl-checkbox input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px; font-size: 20px; color: #959695; cursor: pointer; user-select: none; } .miura-nl-checkbox input[type="checkbox"] + label a { color: #959695; text-decoration: underline; } .miura-nl-checkbox input[type="checkbox"] + label a:hover { color: #b88315; } .miura-nl-checkbox input[type="checkbox"] + label:before { content: ''; width: 20px; height: 20px; border: 1px solid #497D79; opacity: .6; position: absolute; left: 0; top: 0; transition: all .12s ease; } .miura-nl-checkbox input[type="checkbox"]:checked + label:before { width: 10px; top: -5px; left: 5px; opacity: 1; border-color: #497D79; border-top-color: transparent; border-left-color: transparent; transform: rotate(45deg); } /* ====== BOTÓN ====== */ .miura-nl-submit-btn input[type="submit"], #miura-submit-btn { font-family: inherit; font-size: 20px; border-radius: 38.5px; border: 1px solid #b88315; background: transparent; color: #b88315; padding: 0 25px; line-height: 42px; cursor: pointer; transition: all 0.4s ease; display: inline-block; } .miura-nl-submit-btn input[type="submit"]:hover, #miura-submit-btn:hover { background: #b88315; color: #ffffff !important; } /* ====== ERRORES ====== */ .miura-nl-error { color: #FA7167; font-size: 16px; margin-top: 6px; } /* ====== OPCIONAL: LINE HEIGHT Y ESPACIADO ====== */ .miura-nl-field { margin-bottom: 30px; } .miura-nl-checkbox { margin-top: 20px; margin-bottom: 25px; }