/* ========================================================================== FORMULARIOS — vestido del plugin Fluent Forms ========================================================================== El plugin trae su propio aspecto, con azules y bordes que no son los de este sitio. Aquí NO se rehace su maquetación: solo se le cambian los colores, la letra y el aire, para que un formulario no parezca pegado desde fuera. Se toca por las clases del plugin —.ff-el-*— y no metiendo clases propias en sus campos: quien edite el formulario desde el escritorio no tiene que saber nada de este archivo para que le quede bien. Solo se carga en las páginas que llevan un formulario. Ver functions.php. ========================================================================== */ /* El rojo de «obligatorio», declarado UNA vez: lo usan el asterisco que pinta el plugin junto a cada campo y el que aparece escrito dentro del texto de la página. Si se separan, el día que cambie uno el otro se queda distinto y nadie se entera hasta que alguien los ve juntos. Es el acento oscurecido, no el acento tal cual: sobre fondo claro, el rojo del sitio no llega al contraste exigible para un texto tan pequeño. */ :root { --gt-required: #a03836; --gt-required: color-mix(in srgb, var(--color-accent) 86%, #000); } .frm-fluent-form { font-family: var(--font-primary); } /* El asterisco escrito dentro del texto —«Los campos marcados con * son obligatorios»— tiene que ser el MISMO que el de los campos, o no se entiende que hablan de lo mismo. */ .gt-required { color: var(--gt-required); font-weight: 700; } /* -------------------------------------------------------------------------- Un campo y su etiqueta -------------------------------------------------------------------------- */ /* EL :not() NO ES DECORATIVO, ES LO QUE HACE QUE ESTA REGLA EXISTA. El plugin declara `.fluentform .ff-el-group { margin-bottom: 20px }`: dos clases, las mismas que esta, y su hoja carga DESPUÉS de la del tema. En un empate de especificidad gana la última, así que esta regla no se aplicaba nunca: los 22px de aquí eran letra muerta y el formulario respiraba 20. :not() suma la especificidad de su argumento, una clase más, y con eso gana sin recurrir a !important. Y de paso separa lo que hay que separar: la nota legal no es un campo, es la explicación de la casilla que va justo debajo, y va pegada a ella. */ .frm-fluent-form .ff-el-group:not(.ff-custom_html) { margin-bottom: 22px; } .frm-fluent-form .ff-el-group.ff-custom_html { /* Pegada a la casilla, pero no encima: son dos cosas que se leen juntas, no una sola. Menos que el aire entre campos —22px— y más que el que separa dos renglones del mismo párrafo. */ margin-bottom: 18px; } /* OTRO EMPATE PERDIDO, y este se veía. El plugin declara `.ff-default .ff-el-input--label label { font-weight: 500 }`: dos clases y un tipo, lo mismo que había aquí, y carga después. Resultado: en /contacto/ las etiquetas salían en 500 y en /empleo/ y /canal-etico/ en 600, porque allí el formulario vive dentro de .gt-prose y algo de esa cadena desempataba. Dos formularios del mismo sitio con la etiqueta de distinto grosor. Con .ff-el-group delante pesa una clase más y vale en los tres. Poppins no trae 600 —ver la memoria del tema padre—, así que esto se dibuja con el 700. Es lo que ya se veía en los otros dos formularios. */ .frm-fluent-form .ff-el-group .ff-el-input--label label { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--color-primary); } /* Un respiro entre la etiqueta y su caja. Pegadas, la etiqueta parece parte del campo de arriba: en una columna de nueve campos, esos pocos píxeles son los que dicen qué pertenece a qué. */ .frm-fluent-form .ff-el-group .ff-el-input--label { margin-bottom: 7px; } /* El asterisco es del sitio, no del plugin. EL SELECTOR ES LARGO A PROPÓSITO. El del plugin es `.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after`, cuatro clases; con tres, la de aquí perdía y el asterisco de los campos salía en el rojo claro del plugin mientras el escrito en el texto salía en el del sitio. Dos rojos distintos para decir lo mismo, a dos dedos el uno del otro. Se le añade `.ff-el-group`, que es el envoltorio real de cada campo, para pasarle una clase y ganar sin recurrir a !important. */ .frm-fluent-form .ff-el-group .ff-el-input--label.ff-el-is-required.asterisk-right label::after, .frm-fluent-form .ff-el-group .ff-el-input--label.ff-el-is-required.asterisk-left label::before { color: var(--gt-required); } .frm-fluent-form .ff-el-input--content .ff-el-help-message { margin-top: 6px; font-size: 0.8125rem; line-height: 1.5; color: #5a5a5a; } /* -------------------------------------------------------------------------- Cajas de texto -------------------------------------------------------------------------- */ /* EL SELECTOR ES ASÍ DE LARGO PORQUE HAY QUE GANAR DOS PELEAS, NO UNA. Antes de esto, en un mismo formulario convivían tres estilos de campo: · las cajas de texto las vestía el TEMA PADRE, con input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=file]) —cuatro :not(), cada uno con el peso de un atributo—, que ganaba a las dos clases de aquí: salían con 8px de relleno y letra de 17,6px; · el desplegable y la caja grande los vestía el PLUGIN, con .ff-default .ff-el-form-control, que empata con esta regla y carga después: 11px de relleno y letra de 16px; · y lo de aquí solo se aplicaba en lo que ninguno de los dos tocaba. Resultado: campos de 44px al lado de campos de 47px, con dos tamaños de letra distintos, uno debajo del otro. Se ve como descuido aunque no se sepa decir por qué. Para las cajas de texto se repite la cadena de :not() del padre y se le añade la clase del formulario: una clase más que la suya, gana. Para el desplegable y la caja grande basta con nombrar el tipo junto a la clase del plugin. Los tipos excluidos se quedan fuera a propósito: enviar es un botón, y radio, casilla y archivo tienen cada uno su apartado más abajo. */ .frm-fluent-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]), .frm-fluent-form textarea.ff-el-form-control, .frm-fluent-form select.ff-el-form-control { width: 100%; padding: 12px 14px; font-family: var(--font-primary); font-size: 1rem; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); /* EL FILO ES AZUL REBAJADO, no gris neutro. Un borde de negro al 22% sobre un panel gris no pertenece a ninguna paleta: es el gris de todos los formularios de internet. Con el azul del sitio rebajado, la caja sigue siendo discreta pero forma parte de la casa. */ border: 1px solid #c3ced6; border: 1px solid color-mix(in srgb, var(--color-primary) 26%, transparent); border-radius: 3px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Al pasar el ratón, el filo se marca. Es la señal de que la caja se puede usar, y llega ANTES de pulsar: sin ella, un formulario largo se ve como un dibujo hasta que se hace clic. No se toca el fondo, que ya es blanco sobre gris. */ .frm-fluent-form input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="hidden"]):hover, .frm-fluent-form textarea.ff-el-form-control:hover, .frm-fluent-form select.ff-el-form-control:hover { border-color: #7e95a6; border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); } .frm-fluent-form textarea.ff-el-form-control { min-height: 160px; resize: vertical; } /* -------------------------------------------------------------------------- Desplegables — la flecha -------------------------------------------------------------------------- La flecha que pinta el navegador no es la misma en Windows, en Mac y en Android: un triángulo relleno aquí, un doble galón allá, y siempre en el gris del sistema. Era el único trozo del formulario que no decidía nadie. Se apaga con appearance: none y se dibuja la nuestra, en el azul de la casa y con el trazo redondeado. Va como imagen de fondo y no como pseudoelemento porque un entero, no solo la flecha. :focus-visible y no :focus: quien llega con el teclado ve el galón rojo además del halo; quien acaba de hacer clic no necesita que le confirmen dónde pulsó. */ .frm-fluent-form select.ff-el-form-control:hover, .frm-fluent-form select.ff-el-form-control:focus-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23a03836' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Mientras no se ha elegido nada, el desplegable enseña un texto que NO es una respuesta —«— Elija un servicio —»— y lo enseñaba en negro, con el mismo aspecto que un campo ya contestado. En gris, el mismo de los textos de ejemplo de las cajas de texto, se lee como lo que es: un hueco por rellenar. :has() no llega a navegadores viejos; allí el texto sale en negro, que es exactamente como estaba antes: no se rompe nada, solo no mejora. Las opciones recuperan el color del texto: en Windows heredan el del