body{
margin:0;
background:#f3f5f7;
color:#1c252e;
font-family:Arial;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 20px;
background:#30213f;
color:#f8f2ff;
}
header div{
font-weight:bold;
}
.brand{
color:#f8f2ff;
text-decoration:none;
}
nav a{
margin-left:12px;
color:#f8f2ff;
text-decoration:none;
}
.header-right{
display:flex;
align-items:center;
gap:12px;
}
.header-right a{
color:#f8f2ff;
text-decoration:none;
}
main{
padding:42px 20px;
min-height:360px;
text-align:center;
}
h1{
margin:0 0 10px;
font-size:34px;
}
p{
max-width:620px;
margin:0 auto 18px;
line-height:1.5;
}
.search-box{
display:flex;
justify-content:center;
gap:8px;
}
.search-box input{
width:320px;
max-width:70%;
padding:10px;
border:1px solid #b8c4cc;
}
.search-box button{
padding:10px 18px;
border:1px solid #315f9b;
background:#315f9b;
color:#ffffff;
}
.auth-box{
width:330px;
max-width:100%;
margin:0 auto;
text-align:left;
}
.auth-box label{
display:block;
margin:12px 0 6px;
}
.auth-box input,
.auth-box select{
display:block;
width:100%;
box-sizing:border-box;
padding:10px;
border:1px solid #b8c4cc;
background:#ffffff;
color:#1c252e;
font-family:Arial;
font-size:14px;
}
.auth-box button{
display:block;
width:100%;
box-sizing:border-box;
margin-top:16px;
padding:10px;
border:1px solid #315f9b;
background:#315f9b;
color:#ffffff;
}
.errore{
color:#9b1c1c;
font-weight:bold;
}
.ok{
color:#1d6f38;
font-weight:bold;
}
.logout-box{
margin:0;
}
.logout-box button{
padding:9px 14px;
border:1px solid #c27cff;
background:#c27cff;
color:#1d0f2a;
font-family:Verdana;
font-weight:bold;
}
.phone-box{
display:grid;
grid-template-columns:64px 1fr;
gap:8px;
}
.date-box{
display:grid;
grid-template-columns:64px 64px 1fr;
gap:8px;
}
.card-box{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
}
.card-box input{
min-width:0;
}
.profilo-box{
max-width:520px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
text-align:left;
}
.profilo-box div{
padding:10px;
background:#f3f5f7;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-box b{
font-family:Verdana;
font-size:12px;
}
.profilo-madre{
max-width:820px;
margin:0 auto;
background:#ffffff;
border:1px solid #d6dee4;
text-align:left;
box-sizing:border-box;
position:relative;
}
.profilo-modifica-top{
position:absolute;
top:12px;
right:12px;
z-index:2;
padding:8px 12px;
background:#ffffff;
border:1px solid #7fb1d6;
color:#1f5f96;
font-family:Verdana;
font-size:12px;
text-decoration:none;
}
.profilo-madre-cover{
height:190px;
background:#1f5f96;
border-bottom:5px solid #7fb1d6;
}
.profilo-madre-head{
display:flex;
gap:22px;
align-items:flex-end;
padding:0 18px 18px;
margin-top:-86px;
}
.profilo-madre-info h2{
margin:0 0 4px;
font-size:34px;
color:#1c252e;
}
.profilo-madre-info p{
margin:0 0 8px;
max-width:none;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
}
.profilo-madre-info .profilo-nickname{
margin:0 0 5px;
color:#315f9b;
font-size:13px;
}
.profilo-badge-row{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.profilo-badge-row span{
padding:0;
background:transparent;
border:0;
color:#1c252e;
font-family:Verdana;
font-size:12px;
}
.profilo-stat-row{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid #d6dee4;
border-bottom:1px solid #d6dee4;
}
.profilo-stat-row div{
padding:12px;
text-align:center;
border-right:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-stat-row div:last-child{
border-right:0;
}
.profilo-stat-row b{
display:block;
font-size:22px;
}
.profilo-stat-row span{
font-family:Verdana;
font-size:12px;
color:#6f7f89;
}
.profilo-tab-row{
display:grid;
grid-template-columns:repeat(4,1fr);
border-bottom:1px solid #d6dee4;
}
.profilo-tab-row a{
padding:11px 6px;
color:#315f9b;
font-family:Verdana;
font-size:12px;
text-align:center;
text-decoration:none;
border-right:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-tab-row a:last-child{
border-right:0;
}
.profilo-tab-row a.attivo{
background:#f3f5f7;
color:#30213f;
font-weight:bold;
}
.profilo-feed{
display:grid;
gap:10px;
padding:14px;
}
.profilo-feed article{
padding:12px;
background:#f3f5f7;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-feed article.profilo-pin{
background:#ffffff;
border-left:5px solid #1f5f96;
}
.profilo-feed h3{
margin:0 0 8px;
font-size:16px;
}
.profilo-feed p{
margin:0;
max-width:none;
}
.profilo-media-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
}
.profilo-media-grid div{
display:flex;
align-items:center;
justify-content:center;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
box-sizing:border-box;
}
.profilo-media-grid.foto div{
aspect-ratio:1 / 1;
}
.profilo-media-grid.video div{
aspect-ratio:9 / 16;
}
.profilo-pubblico{
max-width:760px;
margin:0 auto;
text-align:left;
background:#ffffff;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-cover{
height:96px;
background:#30213f;
border-bottom:5px solid #765291;
}
.profilo-pubblico-head{
display:flex;
gap:16px;
align-items:flex-end;
padding:0 16px 16px;
margin-top:-34px;
}
.profilo-avatar{
width:172px;
height:172px;
display:flex;
align-items:center;
justify-content:center;
background:#f3f5f7;
border:6px solid #ffffff;
color:#30213f;
font-family:Verdana;
font-size:48px;
font-weight:bold;
box-sizing:border-box;
}
.profilo-pubblico h2{
margin:0 0 4px;
font-size:28px;
}
.profilo-pubblico-head p{
margin:0 0 6px;
max-width:none;
color:#6f7f89;
}
.profilo-pubblico-head span{
display:inline-block;
padding:4px 8px;
background:#f3f5f7;
border:1px solid #d6dee4;
font-family:Verdana;
font-size:12px;
}
.profilo-social-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:16px;
}
.profilo-social-grid article{
padding:12px;
background:#f3f5f7;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.profilo-social-grid h3{
margin:0 0 8px;
font-size:16px;
}
.profilo-social-grid p{
margin:0;
max-width:none;
}
.impostazioni-box{
max-width:520px;
margin:0 auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
text-align:left;
}
.impostazioni-box a{
display:block;
padding:12px;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#315f9b;
text-decoration:none;
box-sizing:border-box;
}
.sezioni-box{
max-width:760px;
margin:0 auto 14px;
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
}
.sezioni-box a{
padding:9px 12px;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#315f9b;
font-family:Verdana;
font-size:12px;
text-decoration:none;
box-sizing:border-box;
}
.sezioni-box a.attivo{
background:#30213f;
border-color:#765291;
color:#ffffff;
}
.messaggi-layout{
display:grid;
grid-template-columns:1fr 220px;
gap:12px;
text-align:left;
}
.messaggi-thread,
.messaggi-contatti,
.posta-lista{
padding:12px;
background:#ffffff;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.messaggi-thread{
display:flex;
flex-direction:column;
min-height:360px;
}
.messaggi-contatti{
max-height:60vh;
overflow:auto;
}
.messaggi-contatti a{
display:block;
margin:0 0 6px;
padding:8px;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#315f9b;
text-decoration:none;
}
.messaggi-contatti a span{
display:block;
margin-top:4px;
color:#6f7f89;
font-size:11px;
line-height:1.3;
}
.messaggi-contatti a.attivo{
background:#30213f;
border-color:#765291;
color:#ffffff;
}
.messaggi-contatti a.attivo span{
color:#d9e5ea;
}
.messaggio-riga{
margin:0 0 10px;
padding:10px;
background:#f3f5f7;
border:1px solid #d6dee4;
max-width:78%;
border-radius:6px;
box-sizing:border-box;
}
.messaggio-riga.mio{
background:#eef7ff;
margin-left:auto;
border-color:#b9d8ee;
}
.messaggio-riga.sistema{
max-width:100%;
margin-left:auto;
margin-right:auto;
background:#f8f8f8;
border-color:#d6dee4;
color:#6f7f89;
text-align:center;
font-family:Verdana;
font-size:12px;
}
.notifica-sistema{
border-left:4px solid #315f9b;
}
.notifica-sicurezza{
border-left:4px solid #9b3131;
}
.notifica-altre{
border-left:4px solid #6f7f89;
}
.messaggio-riga span{
display:block;
margin-top:4px;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
}
.messaggio-riga p{
margin:8px 0 0;
max-width:none;
}
.stanza-descrizione{
max-width:none;
margin:0 0 12px;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
}
.messaggi-form{
display:grid;
grid-template-columns:1fr auto;
gap:8px;
margin-top:12px;
position:sticky;
bottom:0;
padding-top:10px;
background:#ffffff;
}
.messaggi-form select,
.messaggi-form input,
.messaggi-form button,
.auth-box textarea{
box-sizing:border-box;
padding:10px;
border:1px solid #b8c4cc;
background:#ffffff;
color:#1c252e;
font-family:Arial;
font-size:14px;
}
.messaggi-form button{
background:#315f9b;
border-color:#315f9b;
color:#ffffff;
}
.auth-box textarea{
display:block;
width:100%;
min-height:90px;
resize:vertical;
}
.posta-box{
display:grid;
grid-template-columns:1fr;
gap:16px;
text-align:left;
}
.posta-azioni{
max-width:760px;
margin:0 auto;
text-align:right;
}
.posta-azioni a{
display:inline-block;
padding:9px 12px;
background:#315f9b;
border:1px solid #315f9b;
color:#ffffff;
font-family:Verdana;
font-size:12px;
text-decoration:none;
}
.messaggi-head{
max-width:900px;
margin:0 auto 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:0 0 12px;
border-bottom:1px solid #d6dee4;
}
.messaggi-head h1{
margin:0;
font-size:26px;
text-align:left;
}
.messaggi-tabs{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.messaggi-tabs a{
min-width:92px;
padding:9px 12px;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#315f9b;
text-decoration:none;
box-sizing:border-box;
text-align:center;
font-family:Verdana;
font-size:12px;
}
.messaggi-tabs a.attivo{
background:#30213f;
border-color:#765291;
color:#ffffff;
}
.sotto-tabs{
max-width:760px;
margin:0 auto 12px;
justify-content:center;
}
.messaggi-intro{
max-width:620px;
margin:22px auto 0;
padding:14px;
background:#ffffff;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.news-list{
max-width:760px;
margin:18px auto 0;
display:grid;
gap:12px;
text-align:left;
}
.news-card{
padding:16px;
background:#ffffff;
border:1px solid #d6dee4;
box-sizing:border-box;
}
.utente-content .news-card{
background:#f3f5f7;
}
.news-card time{
display:block;
margin-bottom:7px;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
}
.news-card h2{
margin:0 0 8px;
font-size:20px;
color:#1c252e;
}
.news-card p{
max-width:none;
margin:0;
}
.area-utente{
display:grid;
grid-template-columns:210px 1fr;
gap:18px;
text-align:left;
}
.menu-utente{
padding:12px;
background:#ffffff;
border:1px solid #b8c4cc;
}
.menu-utente a{
display:block;
margin:0 0 6px;
padding:9px;
background:#f3f5f7;
border:1px solid #d6dee4;
color:#315f9b;
text-decoration:none;
}
.contenuto-utente{
padding:12px;
background:#ffffff;
border:1px solid #b8c4cc;
text-align:center;
}
.utente-body{
background:#f3f5f7;
overflow:hidden;
}
.utente-title{
position:fixed;
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
box-sizing:border-box;
height:58px;
padding:14px 20px;
background:#30213f;
border-bottom:5px solid #765291;
color:#f8f2ff;
z-index:2;
}
.utente-shell{
display:block;
}
.utente-menu{
position:fixed;
top:58px;
bottom:40px;
left:0;
width:220px;
box-sizing:border-box;
padding:0;
background:#172630;
border-right:2px solid #385866;
overflow:hidden;
}
.utente-menu a{
display:block;
margin:0 0 8px;
padding:10px;
background:transparent;
border:1px solid transparent;
color:#d9e5ea;
font-family:Verdana;
font-size:12px;
text-decoration:none;
}
.utente-menu a.attivo{
background:#30213f;
border-color:#765291;
color:#ffffff;
}
.utente-content{
position:fixed;
top:58px;
right:0;
bottom:40px;
left:220px;
box-sizing:border-box;
padding:22px;
background:#ffffff;
text-align:center;
overflow:auto;
}
.utente-footer{
position:fixed;
left:0;
right:0;
bottom:0;
height:40px;
display:flex;
align-items:center;
box-sizing:border-box;
padding:0 14px 0 18px;
background:#30213f;
border-top:3px solid #765291;
color:#9fb0ba;
font-family:Verdana;
font-size:12px;
z-index:2;
}
.utente-footer a{
color:#9fb0ba;
}
footer{
padding:18px 20px;
background:#f3f5f7;
border-top:1px solid #d6dee4;
text-align:center;
}
.footer-links{
margin:0 0 8px;
}
.footer-links:last-child{
margin-bottom:0;
}
footer a{
margin:0 8px;
color:#315f9b;
text-decoration:none;
}
.footer-legale a{
color:#6f7f89;
font-family:Verdana;
font-size:12px;
}
.subfooter{
padding:10px 20px;
background:#f3f5f7;
color:#6f7f89;
font-family:Verdana;
font-size:12px;
text-align:center;
line-height:1.6;
}
@media(max-width:600px){
header{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
}
header div{
font-size:14px;
}
.header-right{
margin-left:auto;
}
.logout-box button{
padding:7px 9px;
font-size:12px;
}
nav{margin-top:10px}
nav a{margin:0 12px 0 0}
main{
padding:12px;
}
h1{
font-size:24px;
}
p{
margin-bottom:12px;
}
.area-utente{
grid-template-columns:1fr;
gap:10px;
}
.menu-utente{
display:flex;
gap:6px;
overflow:auto;
padding:8px;
}
.menu-utente a{
flex:0 0 auto;
margin:0;
padding:7px 9px;
font-size:13px;
white-space:nowrap;
}
.contenuto-utente{
padding:10px;
}
.auth-box{
width:100%;
}
.search-box{
display:grid;
grid-template-columns:1fr auto;
}
.search-box input{
max-width:none;
width:100%;
box-sizing:border-box;
}
.card-box{
gap:5px;
}
.date-box{
grid-template-columns:1fr 1fr 1.4fr;
gap:5px;
}
.profilo-box{
grid-template-columns:1fr;
gap:6px;
}
.profilo-madre-head{
align-items:flex-start;
padding:0 12px 12px;
gap:12px;
margin-top:-70px;
}
.profilo-madre-cover{
height:150px;
}
.profilo-madre .profilo-avatar{
width:120px;
height:120px;
font-size:34px;
}
.profilo-madre-info h2{
font-size:22px;
}
.profilo-stat-row{
grid-template-columns:1fr 1fr;
}
.profilo-tab-row{
grid-template-columns:1fr 1fr;
}
.profilo-media-grid{
gap:3px;
}
.profilo-media-grid div{
font-size:11px;
}
.profilo-pubblico-head{
align-items:flex-start;
padding:0 12px 12px;
}
.profilo-avatar{
width:70px;
height:70px;
font-size:22px;
}
.profilo-madre .profilo-avatar{
width:120px;
height:120px;
font-size:34px;
}
.profilo-pubblico h2{
font-size:22px;
}
.profilo-social-grid{
grid-template-columns:1fr;
padding:12px;
gap:8px;
}
.impostazioni-box{
grid-template-columns:1fr;
gap:6px;
}
.messaggi-layout,
.posta-box{
grid-template-columns:1fr;
}
.messaggi-head{
display:block;
margin:0 0 12px;
padding-bottom:10px;
}
.messaggi-head h1{
margin:0 0 10px;
font-size:22px;
text-align:left;
}
.messaggi-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.sezioni-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
}
.messaggi-tabs a{
min-width:0;
padding:8px 4px;
font-size:12px;
}
.messaggi-form{
grid-template-columns:1fr;
}
.messaggio-riga{
max-width:100%;
}
.utente-title{
height:52px;
padding:10px 12px;
}
.utente-shell{
display:block;
}
.utente-menu{
position:fixed;
top:52px;
bottom:38px;
left:0;
width:78px;
display:block;
overflow:hidden;
padding:0;
border-right:2px solid #385866;
border-bottom:0;
}
.utente-menu a{
display:block;
margin:0;
padding:8px 4px;
font-size:12px;
white-space:normal;
}
.utente-content{
position:fixed;
top:52px;
right:0;
bottom:38px;
left:78px;
overflow:auto;
padding:12px;
}
.utente-footer{
height:38px;
padding:0 14px 0 10px;
}
}