/************************************/ /* STILI SITO: COLORI BORDI E FONTS */ /************************************/ :root { /* TAVOLOZZA (2026-10-06): indaco-viola, con il fucsia per i dettagli. Prima era il verde di una prova fatta per Sinafo. Demo e' soprattutto un ambiente di test: un colore che nessun cliente usa fa capire a colpo d'occhio dove si e', e non si lavora per sbaglio nel backend sbagliato. Il viola scelto regge il testo bianco sopra (circa 6:1); il verde di prima, #33CC66, sul bianco stava a 2.1:1 e i titoli si leggevano male. */ --color-body-text: #000; --color-body-bg: #fff; --color-accent: #6a3fd9; /* indaco-viola: titoli, pulsanti, voce attiva */ --color-accent-strong: #4b2aa8; /* piu' scuro: fondi delle intestazioni di tabella */ --color-highlight: #c026d3; /* fucsia: passaggio del mouse e piccoli dettagli */ /* sulle barre scure (menu, breadcrumb) il viola non si leggerebbe: li' si usa questa variante chiara */ --color-accent-on-dark: #e9b3ff; --color-overlay-dark: rgba(34,24,72,0.85); --color-overlay-dark-solid: rgba(34,24,72,1.0); --color-overlay-light: rgba(255,255,255,0.8); --color-overlay-light-strong: rgba(255,255,255,0.9); --color-session-text: #6a5ba8; --color-session-text-dark: #2a1d5c; --color-header-accent: #c026d3; --color-header-menu-bg: #2a1d5c; --color-footer-text: #2a1d5c; --color-footer-link: #6a3fd9; --color-footer-link-hover: #c026d3; --color-footer-evidence-bg: #333; --color-logos-border: #b9a8f5; --color-link-text: #5b34cf; /* il focus deve superare il 3:1 sul bianco: il viola lo supera (circa 6:1) */ --color-focus-outline: #6a3fd9; --color-danger: #CC0033; /* colore dei link dentro #article: governato da qui e non scritto a mano in article.css, cosi' segue la tavolozza (si vede anche nel login). */ --color-article-link: #5b34cf; /* pulsanti di amministrazione: li disegna il framework (css/awvIcons.css), ma il colore lo decide il sito da qui. Se queste due non ci fossero, il FW ripiegherebbe su --color-accent e #fff. */ --awv-admin-bg: #6a3fd9; --awv-admin-text: #fff; } body{color:var(--color-body-text);background-color: var(--color-body-bg); font-size: 100%; font-family: 'Roboto', sans-serif;margin: 0 auto; padding: 0; } img{text-decoration:none; border-style: none; } #global{background:var(--color-overlay-light);margin: 0; padding: 0; } #bg{position:fixed;top: 0; left: 0; min-width: 100%; min-height: 100%; z-index: -5000; } #clear{clear:both;} :focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 2px; } .dropdown-notification { height: 40px; line-height: 40px; position: relative; top: -40px; transition: top .2s; /* don't forget to use prefixes */ } .dropdown-notification.active { top: 0; } /* BARRA LINGUA */ #flag{background:transparent;} #flag{position:absolute;height:27px;} #flag ul.lang{text-align:right;margin:0px;padding:2px 5px;} #flag ul.lang li.flag{display:inline;margin-left:1px;padding:0px 4px 0px 4px;} /* SESSIONE UTENTE */ /* pointer-events:none sul contenitore (resta a piena larghezza solo come sfondo semi-trasparente) + pointer-events:auto sui soli link: cosi' la barra non blocca piu' i click su logo/menu sottostanti nelle zone senza testo. */ #session{ background: var(--color-overlay-light); color: var(--color-session-text) !important;position: absolute; width: 100%; height: 25px; top: 0px; right: 0; margin: 0 ; padding: 0 150px 0 0; z-index: 1001; pointer-events: none; } #session p{ background: transparent; color: var(--color-session-text-dark) !important; font-size: 0.6em;height: 40px; margin: 0 0 0 30px !important; padding: 5px 0 0 0 !important; text-align: right; } #session a{ pointer-events: auto; } #session img.logout{padding:0px 10px 0px 10px;margin: 0px 0px 0px 0px;max-width:16px;} /* HEADER */ #headerbox{background:transparent;width:100%;clear:both;padding:0px 0px 0px 0px;} #header{background: var(--color-overlay-dark);border-radius:0;margin:0 auto;padding: 0;clear: both;position:relative;} #header h1{color:#ddd;font-family:'Roboto',sans-serif;font-size:2.0em;font-weight:bold;z-index:1;height:70px;margin: 0 0 0 20px;} #header h1 a{color:#ddd;text-decoration: none; } #header h1 a:hover{color:#ddd;text-decoration: none; } #header p{color:var(--color-header-accent); font-size: 0.8em; line-height: 1.1em; font-weight: bold;padding: 15px 0 0 12px; } #header ul.headmenu{background:var(--color-header-menu-bg);list-style: none;margin:55px 4px 0px 4px;padding:3px 5px 0;float:right;} #header ul.headmenu li{font-size:0.7em;line-height:1.0em;} #header ul.headmenu li { display: inline; letter-spacing: 0px; margin: 0 4px; padding: 0 5px; } #header ul.headmenu li a { color: #fff; } #header ul.headmenu li a { font-weight: bold; text-decoration: none; } #header ul.headmenu li a:hover { color: #fff; } #header ul.headmenu li a:hover { font-weight: bold; text-decoration: none; } /* Logo di Demo (2026-10-10): marchio + scritta, versione chiara per la barra scura (images/logo_demo_chiaro.png, sorgente .svg accanto). Niente piu' riquadro bianco dietro: il logo sta sulla barra, senza prevalere. */ #header img.logo { background: none; margin: 17px 3px 0 24px; height: 36px; width: auto; max-height: none; float: left; border-style: none; } #header ul.logos { background: none; position: absolute; list-style: none; margin: 5px 2px; padding: 0; right: 0; top: 0; } #header ul.logos li { display: inline; } #header ul.logos li img { padding: 0 3px; margin: 0; top: 0; } /* SKIP LINK: fuori schermo di default, torna visibile quando riceve il focus da tastiera */ #header a#skipnav { position: absolute; left: -9000px; top: auto; } #header a#skipnav:focus { position: absolute; left: 10px; top: 10px; width: auto; height: auto; background: #fff; color: #000; padding: 8px 16px; z-index: 2000; text-decoration: none; border-radius: 3px; } /* SEARCH BAR */ #headerbox #search { margin: 0; padding: 0; } #headerbox #search form { width:100%; margin: 0; padding: 0; height: auto; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;} /* La lente era graphics/bg_search.png (60x60 nera su trasparente), messa come secondo sfondo dell'input. Ora e' disegnata sul fieldset con due pseudo- elementi - il cerchio e il manico - e prende --color-accent, cosi' ogni sito se la ritrova del proprio colore senza rifare l'immagine. `pointer-events: none` perche' e' decorazione: il click deve arrivare all'input sotto, non fermarsi sull'icona. */ #headerbox #search fieldset { width:100%; margin: 0; padding: 0; border: 0; position: relative; } #headerbox #search fieldset::before, #headerbox #search fieldset::after { content: ""; position: absolute; pointer-events: none; background: transparent; } /* il cerchio della lente */ #headerbox #search fieldset::before { right: 12px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border: 2px solid var(--color-accent, #6a3fd9); border-radius: 50%; } /* il manico, in diagonale sotto al cerchio */ #headerbox #search fieldset::after { right: 10px; top: 50%; width: 2px; height: 7px; margin-top: 3px; background: var(--color-accent, #6a3fd9); border-radius: 1px; transform: rotate(-45deg); transform-origin: top center; } /* box-sizing esplicito: il padding destro serve a non far finire il testo digitato sotto la lente, ma senza border-box i 30px si sommerebbero al 98% di larghezza e il campo sborderebbe dall'header. */ #headerbox #search input { width: 98%; height: 30px; box-sizing: border-box; background: var(--color-overlay-light); margin: 0; padding: 0 30px 0 1%; border-radius: 0; border: 0; border-bottom: 1px; font-size: 1.2em; } /* BREADCRUMB (markup: