/* ============================================================== */ /* TEMA FRIGOMECCANICA - assets/css/modulo.css */ /* ============================================================== */ /* COSA FA: */ /* * STILE UNICO DEL MODULO PREVENTIVO DEL TEMA (.fm-form, */ /* inc/moduli.php), AL POSTO DELLE CINQUE SCHEDE CSS DI SMART */ /* FORMS; RIPRODUCE L'ASPETTO DI OGGI (style.css, REGOLE SUI */ /* CAMPI DI .fm-panel, E blog.css, MODULO NEGLI ARTICOLI) */ /* * PREFISSO body #main-area .entry .fm-form .fm-form-el: */ /* VINCE PER SPECIFICITA' LE REGOLE DI VERTEX SU #fm-pg */ /* (LINK, P, INPUT) E SU .entry p, SENZA !important; LE */ /* REGOLE DEL TEMA CON DUE ID LE CORREGGE IL BLOCCO 6/6 */ /* * FUNZIONA A 390, 820 E 1.440 PX SENZA SCORRIMENTO LATERALE */ /* QUANDO PARTE: SOLO DOVE C'E' IL MODULO (SCELTA IN */ /* inc/moduli.php) */ /* LEGENDA !important: DUE REGOLE SOLTANTO: [hidden] DEL */ /* MESSAGGIO (BLOCCO 5/6) E LE textarea DI .fm-panel (ALTEZZA, */ /* BORDO E OMBRA DELL'ERRORE, BLOCCO 6/6), CONTRO I !important */ /* DI style.css NATI PER SMART FORMS */ /* ============================================================== */ /* INDICE DEL FILE */ /* 1/6 RIQUADRO E DISPOSIZIONE DEI CAMPI */ /* 2/6 CAMPI DI TESTO, SEGNAPOSTO E FOCUS */ /* 3/6 CONSENSO, ETICHETTE NASCOSTE E TRAPPOLA */ /* 4/6 PULSANTE DI INVIO */ /* 5/6 MESSAGGI, CAMPI NON VALIDI E INVIO IN CORSO */ /* 6/6 CORREZIONI NELLE PAGINE IN BLOCCHI (#fm-pg) */ /* ============================================================== */ /* ============================================================== */ /* >>> INIZIO 1/6: RIQUADRO E DISPOSIZIONE DEI CAMPI */ /* ============================================================== */ /* COSA FA: */ /* * NEGLI ARTICOLI DEL BLOG IL MODULO E' UN RIQUADRO BIANCO */ /* (COME blog.css, REGOLA SU .rednaoFormContainer>form); */ /* NELLE PAGINE IN BLOCCHI IL RIQUADRO LO DA' GIA' .fm-panel */ /* * CAMPI A TUTTA COLONNA, UNO SOTTO L'ALTRO, 20 PX DI STACCO; */ /* DA 768 PX TELEFONO ED EMAIL SULLA STESSA RIGA (.fm-riga) */ /* QUANDO PARTE: SU OGNI PAGINA CON IL MODULO */ /* ============================================================== */ body.single-post #main-area .entry .fm-form{box-sizing:border-box;margin:0;padding:clamp(24px,4vw,44px);border-radius:8px;background:#FFFFFF} body #main-area .entry .fm-form .fm-form-el{position:relative;display:block;margin:0;padding:0;text-align:left;color:#2F4A55;font-family:'Ubuntu',sans-serif} body #main-area .entry .fm-form .fm-form-el .fm-f{margin:0;padding:0;min-width:0} body #main-area .entry .fm-form .fm-form-el .fm-f+.fm-f,body #main-area .entry .fm-form .fm-form-el .fm-f+.fm-riga,body #main-area .entry .fm-form .fm-form-el .fm-riga+.fm-f{margin-top:20px} body #main-area .entry .fm-form .fm-form-el .fm-riga{margin:0;padding:0} @media (min-width:768px){body #main-area .entry .fm-form .fm-form-el .fm-riga{display:flex;gap:20px} body #main-area .entry .fm-form .fm-form-el .fm-riga>.fm-f{flex:1 1 0;margin-top:0} } /* <<< FINE 1/6 */ /* ============================================================== */ /* >>> INIZIO 2/6: CAMPI DI TESTO, SEGNAPOSTO E FOCUS */ /* ============================================================== */ /* COSA FA: */ /* * INPUT text / tel / email E textarea COME OGGI: UBUNTU 300 */ /* 16 PX, #2F4A55, BORDO #C9D7DC, RAGGIO 8 PX, ALTI ALMENO */ /* 48 PX (textarea 110 PX, ALLUNGABILE SOLO IN VERTICALE) */ /* * height:auto E width:100% BATTONO LE REGOLE DI VERTEX SU */ /* #fm-pg (height 49px, width auto, BORDO #BBB) */ /* * FOCUS (MOUSE E TASTIERA): BORDO #5D8593 E ALONE TENUE AL */ /* POSTO DEL CONTORNO; :focus-visible STESSO ASPETTO, COSI' */ /* CHI USA LA TASTIERA VEDE SEMPRE DOVE SI TROVA */ /* QUANDO PARTE: SU OGNI PAGINA CON IL MODULO */ /* ============================================================== */ body #main-area .entry .fm-form .fm-form-el input[type=text],body #main-area .entry .fm-form .fm-form-el input[type=tel],body #main-area .entry .fm-form .fm-form-el input[type=email],body #main-area .entry .fm-form .fm-form-el textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;height:auto;min-height:48px;margin:0;padding:12px 14px;border:1px solid #C9D7DC;border-radius:8px;background:#FFFFFF;box-shadow:none;outline:none;font-family:'Ubuntu',sans-serif;font-size:16px;font-weight:300;line-height:1.4;letter-spacing:normal;color:#2F4A55;text-align:left;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s} body #main-area .entry .fm-form .fm-form-el textarea{min-height:110px;resize:vertical} body #main-area .entry .fm-form .fm-form-el input::placeholder,body #main-area .entry .fm-form .fm-form-el textarea::placeholder{color:#6B8794;opacity:1;font-family:'Ubuntu',sans-serif} /* DUE REGOLE SEPARATE: SAFARI 15.0-15.3 NON CONOSCE :focus-visible E SCARTEREBBE LA LISTA INTERA (REVISIONE M12) */ body #main-area .entry .fm-form .fm-form-el input[type=text]:focus,body #main-area .entry .fm-form .fm-form-el input[type=tel]:focus,body #main-area .entry .fm-form .fm-form-el input[type=email]:focus,body #main-area .entry .fm-form .fm-form-el textarea:focus{border-color:#5D8593;box-shadow:0 0 0 3px rgba(93,133,147,.18);outline:none} body #main-area .entry .fm-form .fm-form-el input[type=text]:focus-visible,body #main-area .entry .fm-form .fm-form-el input[type=tel]:focus-visible,body #main-area .entry .fm-form .fm-form-el input[type=email]:focus-visible,body #main-area .entry .fm-form .fm-form-el textarea:focus-visible{border-color:#5D8593;box-shadow:0 0 0 3px rgba(93,133,147,.18);outline:none} /* <<< FINE 2/6 */ /* ============================================================== */ /* >>> INIZIO 3/6: CONSENSO, ETICHETTE NASCOSTE E TRAPPOLA */ /* ============================================================== */ /* COSA FA: */ /* * CONSENSO: CASELLA E TESTO SULLA STESSA RIGA, UBUNTU 15 PX */ /* #3E6170; LINK SOTTOLINEATO #2F4A55 CON IL PESO DEL TESTO */ /* (VINCE LA REGOLA #fm-pg:not(...) a: AZZURRO, 500, PADDING) */ /* * .fm-sr: ETICHETTE PER I LETTORI DI SCHERMO, INVISIBILI */ /* * .fm-trappola: CAMPO PER I ROBOT FUORI DALLO SCHERMO, NON */ /* display:none (I ROBOT DEVONO POTERLO COMPILARE) */ /* QUANDO PARTE: SU OGNI PAGINA CON IL MODULO */ /* ============================================================== */ body #main-area .entry .fm-form .fm-form-el .fm-consenso{display:flex;align-items:flex-start;gap:10px} body #main-area .entry .fm-form .fm-form-el .fm-consenso input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:4px 0 0;padding:0;accent-color:#2F4A55;cursor:pointer} body #main-area .entry .fm-form .fm-form-el .fm-consenso input[type=checkbox]:focus-visible{outline:2px solid #5D8593;outline-offset:2px} body #main-area .entry .fm-form .fm-form-el .fm-consenso label{display:block;margin:0;padding:0;font-family:'Ubuntu',sans-serif;font-size:15px;font-weight:300;line-height:1.5;color:#3E6170;text-align:left;cursor:pointer} body #main-area .entry .fm-form .fm-form-el .fm-consenso label a,body #main-area .entry .fm-form .fm-form-el .fm-consenso label a:hover{display:inline;padding:0;line-height:inherit;font-weight:inherit;color:#2F4A55;text-decoration:underline} body #main-area .entry .fm-form .fm-form-el .fm-consenso label a:focus-visible{outline:2px solid #5D8593;outline-offset:2px} body #main-area .entry .fm-form .fm-form-el .fm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} body #main-area .entry .fm-form .fm-form-el .fm-trappola{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0} /* <<< FINE 3/6 */ /* ============================================================== */ /* >>> INIZIO 4/6: PULSANTE DI INVIO */ /* ============================================================== */ /* COSA FA: */ /* * PULSANTE #2F4A55 COME OGGI (style.css, redNaoSubmitButton) */ /* LARGO ALMENO 260 PX; SOTTO GLI 860 PX A TUTTA LARGHEZZA */ /* * SPENTO (disabled) FINCHE' LO SCRIPT NON LO ACCENDE E */ /* DURANTE L'INVIO: OPACITA' .6 */ /* QUANDO PARTE: SU OGNI PAGINA CON IL MODULO */ /* ============================================================== */ body #main-area .entry .fm-form .fm-form-el .fm-azioni{margin:20px 0 0;padding:0} body #main-area .entry .fm-form .fm-form-el .fm-invia{display:inline-block;box-sizing:border-box;min-width:260px;min-height:52px;margin:0;padding:0 36px;border:0;border-radius:8px;background:#2F4A55;color:#FFFFFF;font-family:'Ubuntu',sans-serif;font-size:16px;font-weight:400;line-height:1.2;letter-spacing:.02em;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s} body #main-area .entry .fm-form .fm-form-el .fm-invia:hover{background:#25383B} body #main-area .entry .fm-form .fm-form-el .fm-invia:focus{outline:none} body #main-area .entry .fm-form .fm-form-el .fm-invia:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(93,133,147,.4)} body #main-area .entry .fm-form .fm-form-el .fm-invia:disabled,body #main-area .entry .fm-form .fm-form-el .fm-invia:disabled:hover{background:#2F4A55;opacity:.6;cursor:default} @media (max-width:860px){body #main-area .entry .fm-form .fm-form-el .fm-invia{width:100%;min-width:0} } /* <<< FINE 4/6 */ /* ============================================================== */ /* >>> INIZIO 5/6: MESSAGGI, CAMPI NON VALIDI E INVIO IN CORSO */ /* ============================================================== */ /* COSA FA: */ /* * .fm-msg: FASCIA ROSSA DEI CAMPI OBBLIGATORI O DELL'ERRORE */ /* DI INVIO; VINCE .entry p (20 PX) E LE REGOLE SUI p DEL */ /* BLOG E DI #fm-pg; NASCOSTA CON L'ATTRIBUTO hidden */ /* (!important: NESSUNA REGOLA display PUO' MOSTRARLA VUOTA) */ /* * .fm-invalido: BORDO E ALONE ROSSI SUL CAMPO DA CORREGGERE */ /* * .fm-nojs: TESTO CON I RECAPITI PER CHI NON HA JAVASCRIPT */ /* * .fm-invio: PULSANTE ATTENUATO DURANTE L'INVIO */ /* QUANDO PARTE: SU OGNI PAGINA CON IL MODULO */ /* ============================================================== */ body #main-area .entry .fm-form .fm-form-el p.fm-msg{display:block;margin:10px 0 4px;padding:8px 12px;border-radius:8px;background:#B22222;color:#FFFFFF;font-family:'Ubuntu',sans-serif;font-size:14px;font-weight:400;line-height:1.4;text-align:left} body #main-area .entry .fm-form .fm-form-el p.fm-msg[hidden]{display:none !important} body #main-area .entry .fm-form .fm-form-el input.fm-invalido,body #main-area .entry .fm-form .fm-form-el textarea.fm-invalido,body #main-area .entry .fm-form .fm-form-el input.fm-invalido:focus,body #main-area .entry .fm-form .fm-form-el textarea.fm-invalido:focus{border-color:#B3261E;box-shadow:0 0 0 3px rgba(179,38,30,.12)} body #main-area .entry .fm-form .fm-form-el .fm-consenso input.fm-invalido{outline:2px solid #B3261E;outline-offset:2px} body #main-area .entry .fm-form .fm-form-el p.fm-nojs{margin:12px 0 0;padding:0;font-family:'Ubuntu',sans-serif;font-size:15px;font-weight:300;line-height:1.5;color:#2F4A55;text-align:left} body #main-area .entry .fm-form .fm-form-el.fm-invio .fm-invia{opacity:.6;cursor:default} /* <<< FINE 5/6 */ /* ============================================================== */ /* >>> INIZIO 6/6: CORREZIONI NELLE PAGINE IN BLOCCHI (#fm-pg) */ /* ============================================================== */ /* COSA FA: */ /* * style.css HA REGOLE CON DUE ID (body #main-area .entry */ /* #fm-pg p{padding:0} E #fm-pg a{text-decoration:none}) CHE */ /* BATTONO IL PREFISSO DEI BLOCCHI 1-5: QUI SI RIPETONO */ /* PADDING DEL MESSAGGIO E SOTTOLINEATO DEL LINK DEL */ /* CONSENSO CON #fm-pg, SENZA !important */ /* * style.css (BLOCCO B, RIGA "#fm-pg .fm-panel textarea", */ /* NATA PER SMART FORMS) DA' ALLE textarea DI .fm-panel */ /* min-height:48px, BORDO E OMBRA CON !important: SENZA LE */ /* DUE RIGHE !important QUI SOTTO IL MESSAGGIO SAREBBE ALTO */ /* 48 PX E IL ROSSO DI .fm-invalido NON SI VEDREBBE SULLA */ /* textarea (UN !important SI VINCE SOLO CON UN ALTRO */ /* !important PIU' SPECIFICO); DA TOGLIERE QUANDO LE REGOLE */ /* DI SMART FORMS LASCERANNO style.css */ /* QUANDO PARTE: SOLO NELLE PAGINE IN BLOCCHI (#fm-pg) */ /* ============================================================== */ body #main-area .entry #fm-pg .fm-form .fm-form-el p.fm-msg{padding:8px 12px} body #main-area .entry #fm-pg .fm-form .fm-form-el .fm-consenso label a{text-decoration:underline} body #main-area .entry #fm-pg .fm-panel .fm-form .fm-form-el textarea{min-height:110px !important} body #main-area .entry #fm-pg .fm-panel .fm-form .fm-form-el textarea.fm-invalido,body #main-area .entry #fm-pg .fm-panel .fm-form .fm-form-el textarea.fm-invalido:focus{border-color:#B3261E !important;box-shadow:0 0 0 3px rgba(179,38,30,.12) !important} /* <<< FINE 6/6 */ /* <<< FINE assets/css/modulo.css */