:root { /* $ ------------------------------------------------- $ - Variabili colori di base $ ------------------------------------------------- */ --hrz-main-hue: 210; /* default 210 */ --hrz-accent-hue: 181; /* default 181 */ --hrz-contrast-hue: 44; /* default 44 */ --hrz-section-1-hue: 0; /* default 0 */ --hrz-section-2-hue: 264; /* default 264 */ --hrz-section-3-hue: 156; /* default 156 */ --hrz-section-4-hue: 221; /* default 221 */ --hrz-search-result-1-hue: 38; /* default 38 */ --hrz-search-result-2-hue: 108; /* default 108 */ --hrz-search-result-3-hue: 354; /* default 354 */ --hrz-search-result-4-hue: 180; /* default 180 */ } :root { /* $ ------------------------------------------------- $ - Variabili colori di base $ ------------------------------------------------- */ --hrz-main-color: hsl(var(--hrz-main-hue), 100%, 32%); /* blue-color */ --hrz-main-color-hover: hsl(var(--hrz-main-hue), 100%, 25%); /* link-hover */ --hrz-main-color-desaturated: hsl(var(--hrz-main-hue), 24%, 36%); --hrz-alt-main-color: hsl(var(--hrz-main-hue), 100%, 40%); /* link-color */ --hrz-main-text-color: hsl(0, 0%, 0%); --hrz-alt-accent-color: hsl(var(--hrz-accent-hue), 66%, 64%); /* link-color-dark */ --hrz-alt-accent-color-hover: hsl(var(--hrz-accent-hue), 48%, 55%); /* link-color-dark-hover */ --hrz-contrast-color: hsl(var(--hrz-contrast-hue), 96%, 52%); /* contrast-yellow */ --hrz-focus-color: hsl(36, 100%, 50%); /* #F90 */ --hrz-section-1-text-color: hsl(var(--hrz-section-1-hue), 81%, 43%); --hrz-section-1-text-color-hover: hsl(var(--hrz-section-1-hue), 72%, 27%); --hrz-section-2-text-color: hsl(var(--hrz-section-2-hue), 83%, 57%); --hrz-section-2-text-color-hover: hsl(var(--hrz-section-2-hue), 47%, 31%); --hrz-section-3-text-color: hsl(var(--hrz-section-3-hue), 100%, 28%); --hrz-section-3-text-color-hover: hsl(var(--hrz-section-3-hue), 100%, 20%); --hrz-section-4-text-color: hsl(var(--hrz-section-4-hue), 97%, 26%); --hrz-section-4-text-color-hover: hsl(var(--hrz-section-4-hue), 100%, 21%); --hrz-search-result-type-1: hsl(var(--hrz-search-result-1-hue), 90%, 62%); /* articoli-type-color */ --hrz-search-result-type-2: hsl(var(--hrz-search-result-2-hue), 55%, 53%); /* pagine-type-color */ --hrz-search-result-type-3: hsl(var(--hrz-search-result-3-hue), 75%, 45%); /* atti-type-color */ --hrz-search-result-type-4: hsl(var(--hrz-search-result-4-hue), 55%, 53%); /* eventi-type-color */ --hrz-light-text-color: hsl(0, 0%, 100%); /* #FFF */ --hrz-light-background: hsl(0, 0%, 100%); /* #FFF */ --hrz-light-background-hover: hsl(var(--hrz-main-hue), 100%, 84%); /* icon-link-hover */ --hrz-light-background-hover-gray: hsl(0, 9%, 96%); --hrz-light-background-active: hsl(var(--hrz-main-hue), 100%, 95%); /* background-active */ --hrz-light-border-color: hsl(0, 4%, 82%); /* border-form-color */ --hrz-light-alt-background: hsl(0, 0%, 94%); /* form-background */ --hrz-light-alt-2-background: hsl(0, 0%, 98%); /* area-trasparenza-background */ --hrz-light-shadow-color: hsl(0, 0%, 73%); /* custom-button-shadow-color */ --hrz-dark-text-color: hsl(var(--hrz-main-hue), 100%, 15%); /* pre-header */ --hrz-dark-text-color-gray: hsl(0, 0%, 20%); /* slide-title-color */ --hrz-dark-text-color-gray-lighter: hsl(0, 0%, 29%); /* notices-data-color */ --hrz-dark-text-color-hover: hsl(var(--hrz-main-hue), 98%, 21%); /* icon-hover */ --hrz-dark-background: hsl(var(--hrz-main-hue), 100%, 15%); /* pre-header */ --hrz-dark-background-lighter: hsl(var(--hrz-main-hue), 52%, 45%); /* calendar-link-menu-color */ --hrz-dark-background-darker: hsl(calc(var(--hrz-main-hue) - 2), 12%, 21%); /* footer-background */ --hrz-dark-details-color: hsl(calc(var(--hrz-main-hue) - 1), 25%, 35%); /* articles-data-color */ --hrz-dark-shadow-color: hsl(0, 0%, 40%); --hrz-disabled-background: hsl(0, 0%, 40%); /* splide-arrow-disabled */ --hrz-disabled-text-color: hsl(0, 0%, 40%); /* splide-arrow-disabled */ --hrz-disabled-link-color: hsl(0, 2%, 78%); /* splide-arrow-disabled */ } :root { /* $ ------------------------------------------------- $ - Variabili colori specifici $ ------------------------------------------------- */ /* ? Componenti Generiche */ /* * Bottoni: */ --hrz-btn-color: var(--hrz-main-color); --hrz-btn-color-hover: var(--hrz-main-color-hover); --hrz-btn-text-color: var(--hrz-light-text-color); /* * Icone: */ --hrz-light-icon-btn-bgcolor: var(--hrz-light-background); --hrz-light-icon-btn-bgcolor-hover: var(--hrz-light-background-hover); --hrz-light-icon-btn-textcolor: var(--hrz-main-color); --hrz-light-icon-btn-textcolor-hover: var(--hrz-dark-text-color-hover); --hrz-dark-icon-btn-textcolor: var(--hrz-light-text-color); /* * Link: */ --hrz-main-link-color: var(--hrz-alt-main-color); --hrz-main-link-color-hover: var(--hrz-main-color-hover); /* * Card: */ --hrz-card-bottom-bordercolor: var(--hrz-main-color); /* ? Componenti specifiche */ /* * Splide */ --hrz-splide-arrow-disabled-textcolor: var(--hrz-disabled-text-color); --hrz-splide-arrow-active-textcolor: var(--hrz-main-color); --hrz-splide-page-bullets-bgcolor: var(--hrz-main-color); /* * Tooltip */ --hrz-tooltip-bgcolor: var(--hrz-main-color-desaturated); --hrz-tooltip-textcolor: var(--hrz-light-text-color); /* * Cookiebar */ --hrz-cookiebar-bgcolor: var(--hrz-dark-background); --hrz-cookiebar-link-color: var(--hrz-alt-accent-color); --hrz-cookiebar-link-color-hover: var(--hrz-alt-accent-color-hover); --hrz-cookiebar-checkbox-label-textcolor: var(--hrz-light-text-color); --hrz-cookiebar-checkbox-input-bgcolor: var(--hrz-dark-background); --hrz-cookiebar-checkbox-input-bordercolor: var(--hrz-light-background); --hrz-cookiebar-checkbox-checked-input-bgcolor: var(--hrz-light-background); --hrz-cookiebar-checkbox-checked-input-bordercolor: var(--hrz-light-background); --hrz-cookiebar-checkbox-checked-input-checkcolor: var(--hrz-dark-text-color); --hrz-cookiebar-checkbox-checked-disabled-input-bgcolor: var(--hrz-disabled-background); --hrz-cookiebar-checkbox-checked-disabled-input-bordercolor: var(--hrz-disabled-background); --hrz-cookiebar-checkbox-checked-disabled-input-checkcolor: var(--hrz-light-text-color); --hrz-cookiebar-policy-textcolor: var(--hrz-light-text-color); --hrz-cookiebar-close-btn-bgcolor-hover: var(--hrz-light-background); --hrz-cookiebar-close-btn-textcolor-hover: var(--hrz-dark-text-color); --hrz-cookiebar-button-textcolor: var(--hrz-dark-text-color); --hrz-cookiebar-button-bordercolor: var(--hrz-light-background); --hrz-cookiebar-button-bgcolor-hover: var(--hrz-light-background); --hrz-cookiebar-button-bordercolor-hover: var(--hrz-light-background); /* * Tasti Social Articoli Pagine Atti Eventi */ --hrz-social-btn-bgcolor: var(--hrz-main-color); --hrz-social-btn-textcolor: var(--hrz-light-text-color); --hrz-social-btn-bordercolor-hover: var(--hrz-main-color); --hrz-social-btn-bgcolor-hover: transparent; --hrz-social-btn-textcolor-hover: var(--hrz-main-color); /* * Menu Area Riservata (Esci, Cambio PWD, etc..) */ --hrz-reserved-menu-link-textcolor: var(--hrz-alt-main-color); --hrz-reserved-menu-link-textcolor-hover: var(--hrz-main-color-hover); /* * Testo Articoli Pagine Atti Eventi */ --hrz-article-textcolor: var(--hrz-main-text-color); --hrz-article-catfilter-chip-bordercolor: var(--hrz-main-color); --hrz-article-catfilter-chip-textcolor: var(--hrz-main-color); --hrz-article-catfilter-chip-bgcolor-hover: var(--hrz-main-color); --hrz-article-catfilter-chip-textcolor-hover: var(--hrz-light-text-color); --hrz-blockquote-side-bgcolor: var(--hrz-contrast-color); --hrz-blockquote-bgcolor: var(--hrz-light-alt-background); --hrz-highlight-bgcolor: var(--hrz-alt-accent-color); --hrz-codeblock-bgcolor: var(--hrz-light-alt-background); --hrz-codeblock-bordercolor: var(--hrz-light-border-color); /* * Allegati Articoli */ --hrz-attachments-icon-textcolor: var(--hrz-alt-main-color); --hrz-attachments-icon-textcolor-hover: var(--hrz-main-color-hover); --hrz-attachments-textcolor: var(--hrz-alt-main-color); --hrz-attachments-textcolor-hover: var(--hrz-main-color-hover); /* * Sidebar Lista Articoli (Categoria, Albo Online, Bacheca Area Riservata, Calendario) */ --hrz-article-list-sidebar-bgcolor: var(--hrz-light-alt-background); --hrz-article-list-sidebar-bordercolor: var(--hrz-light-border-color); --hrz-article-list-sidebar-active-bgcolor: var(--hrz-light-background-active); --hrz-article-list-datefilter-main-bgcolor: var(--hrz-main-color); --hrz-article-list-datefilter-main-textcolor: var(--hrz-light-text-color); --hrz-article-list-datefilter-dropdown-textcolor: var(--hrz-main-text-color); --hrz-article-list-datefilter-dropdown-bgcolor: var(--hrz-light-background); --hrz-article-list-datefilter-yearselector-textcolor: var(--hrz-light-text-color); --hrz-article-list-datefilter-selected-bgcolor: var(--hrz-main-color); /* * Filtro Categorie/Tipologia (Albo Online, Bacheca Area Riservata) */ --hrz-article-list-catfilter-bgcolor: var(--hrz-light-alt-background); --hrz-article-list-catfilter-bordercolor: var(--hrz-light-border-color); --hrz-article-list-catfilter-active-bgcolor: var(--hrz-light-background-active); --hrz-article-list-catfilter-chip-bordercolor: var(--hrz-main-color); --hrz-article-list-catfilter-chip-textcolor: var(--hrz-main-color); --hrz-article-list-catfilter-chip-focuscolor: var(--hrz-focus-color); --hrz-article-list-catfilter-chip-bgcolor-hover: var(--hrz-main-color); --hrz-article-list-catfilter-chip-textcolor-hover: var(--hrz-light-text-color); --hrz-article-list-catfilter-chip-active-bgcolor: var(--hrz-main-color); --hrz-article-list-catfilter-chip-active-textcolor: var(--hrz-light-text-color); --hrz-article-list-card-details-textcolor: var(--hrz-dark-details-color); /* * Paginazione */ --hrz-pagination-link-textcolor: var(--hrz-main-link-color); --hrz-pagination-link-bordercolor: var(--hrz-main-link-color); --hrz-pagination-link-inactive-textcolor: var(--hrz-dark-details-color); /* * Form Area Riservata */ --hrz-reserved-form-bgcolor: var(--hrz-light-alt-background); --hrz-reserved-form-bordercolor: var(--hrz-light-border-color); --hrz-reserved-form-input-bgcolor: var(--hrz-light-alt-background); --hrz-reserved-form-input-bordercolor: var(--hrz-dark-details-color); --hrz-reserved-form-label-textcolor: var(--hrz-dark-details-color); /* * Tasto Accessibilità */ --hrz-accessibility-button-background: var(--hrz-light-background); --hrz-accessibility-button-bordercolor: var(--hrz-main-color); /* * Home Page Area Trasparenza */ --hrz-home-trasparenza-bgcolor: var(--hrz-light-alt-2-background); --hrz-home-trasparenza-images-bordercolor: var(--hrz-main-color); --hrz-home-trasparenza-images-box-bgcolor: var(--hrz-main-color); --hrz-home-trasparenza-images-box-textcolor: var(--hrz-light-text-color); --hrz-home-trasparenza-images-box-focuscolor: var(--hrz-focus-color); --hrz-home-trasparenza-procedure-bgcolor: var(--hrz-light-background); --hrz-home-trasparenza-procedure-bordercolor: var(--hrz-light-alt-2-background); --hrz-home-trasparenza-procedure-textcolor: var(--hrz-main-text-color); --hrz-home-trasparenza-procedure-modal-textcolor: var(--hrz-dark-details-color); /* * Home Page Area Articoli */ --hrz-home-articles-arrows-textcolor: var(--hrz-main-color); --hrz-home-articles-date-textcolor: var(--hrz-dark-details-color); --hrz-home-articles-noimg-bgcolor: var(--hrz-light-alt-2-background); --hrz-home-articles-img-bgcolor: var(--hrz-light-alt-2-background); --hrz-home-articles-img-textcolor: var(--hrz-main-link-color); --hrz-home-articles-img-focuscolor: var(--hrz-focus-color); /* * Home Page Calendario */ --hrz-home-calendar-link-color: var(--hrz-light-text-color); --hrz-home-calendar-head-bgcolor: var(--hrz-dark-background); --hrz-home-calendar-main-bgcolor: var(--hrz-main-color); --hrz-home-calendar-day-active: var(--hrz-light-text-color); --hrz-home-calendar-day-inactive: var(--hrz-disabled-link-color); --hrz-home-calendar-arrows-active: var(--hrz-light-text-color); --hrz-home-calendar-event-bgcolor: var(--hrz-dark-background-lighter); /* * Home Page Area Tasti Personalizzati */ --hrz-home-custom-shadowcolor: var(--hrz-light-shadow-color); --hrz-home-custom-bordercolor: var(--hrz-light-border-color); --hrz-home-custom-bgcolor: var(--hrz-main-color); --hrz-home-custom-textcolor: var(--hrz-light-text-color); --hrz-home-custom-focuscolor: var(--hrz-focus-color); /* * Footer */ --hrz-footer-bgcolor: var(--hrz-dark-background-darker); --hrz-footer-textcolor: var(--hrz-light-text-color); --hrz-footer-link-textcolor: var(--hrz-alt-accent-color); --hrz-footer-link-textcolor-hover: var(--hrz-alt-accent-color-hover); /* * Scroll to Top */ --hrz-scroll-to-top-bgcolor: var(--hrz-main-color); --hrz-scroll-to-top-bgcolor-hover: var(--hrz-main-color-hover); --hrz-scroll-to-top-textcolor: var(--hrz-light-text-color); --hrz-scroll-to-top-shadowcolor: var(--hrz-dark-shadow-color); /* * Header */ --hrz-header-preheader-bgcolor: var(--hrz-dark-background); --hrz-header-preheader-button-bordercolor: var(--hrz-dark-background); --hrz-header-preheader-button-bgcolor: var(--hrz-btn-color); --hrz-header-preheader-button-textcolor: var(--hrz-btn-text-color); --hrz-header-preheader-button-bordercolor-hover: var(--hrz-dark-background); --hrz-header-preheader-button-bgcolor-hover: var(--hrz-btn-color-hover); --hrz-header-preheader-button-textcolor-hover: var(--hrz-btn-text-color); --hrz-header-center-bgcolor: var(--hrz-main-color); --hrz-header-mobile-close-btn-bgcolor: var(--hrz-light-background); --hrz-header-mobile-close-btn-textcolor: var(--hrz-main-link-color); --hrz-header-mobile-search-bgcolor: var(--hrz-main-color); --hrz-header-mobile-search-btn-bgcolor: var(--hrz-light-background); --hrz-header-search-textcolor: var(--hrz-light-text-color); --hrz-header-search-bordercolor: var(--hrz-light-background); --hrz-header-search-bgcolor: var(--hrz-light-background); --hrz-header-search-icon-textcolor: var(--hrz-light-icon-btn-textcolor); --hrz-header-textcolor: var(--hrz-light-text-color); --hrz-header-input-bordercolor: var(--hrz-light-background); --hrz-header-menutop-bgcolor: var(--hrz-light-background); --hrz-header-menutop-link-bgcolor-hover: var(--hrz-light-background-hover-gray); /* * Colori 4 Sezioni */ --hrz-scuola-link-textcolor: var(--hrz-section-1-text-color); --hrz-scuola-link-textcolor-hover: var(--hrz-section-1-text-color-hover); --hrz-servizi-link-textcolor: var(--hrz-section-2-text-color); --hrz-servizi-link-textcolor-hover: var(--hrz-section-2-text-color-hover); --hrz-novita-link-textcolor: var(--hrz-section-3-text-color); --hrz-novita-link-textcolor-hover: var(--hrz-section-3-text-color-hover); --hrz-didattica-link-textcolor: var(--hrz-section-4-text-color); --hrz-didattica-link-textcolor-hover: var(--hrz-section-4-text-color-hover); /* * Banner Home */ --hrz-home-banner-focuscolor: var(--hrz-focus-color); /* * Fotogallery Home */ --hrz-home-photogallery-loading-bgcolor: var(--hrz-light-alt-2-background); --hrz-home-photogallery-title: var(--hrz-light-text-color); --hrz-home-photogallery-link: var(--hrz-light-text-color); --hrz-home-photogallery-border-color: var(--hrz-light-background); --hrz-home-photogallery-overlay-bgcolor: var(--hrz-dark-background-darker); --hrz-home-photogallery-overlay-textcolor: var(--hrz-light-text-color); --hrz-home-photogallery-focuscolor: var(--hrz-focus-color); /* * Fotogallery Pagina */ --hrz-photogallery-overlay-bgcolor: var(--hrz-dark-background-darker); --hrz-photogallery-overlay-textcolor: var(--hrz-light-text-color); --hrz-photogallery-textcolor-hover: var(--hrz-main-text-color); /* * Risultati Ricerca */ --hrz-search-result-filter-bgcolor: var(--hrz-light-alt-background); --hrz-search-result-filter-bordercolor: var(--hrz-light-border-color); --hrz-search-result-filter-bgcolor-active: var(--hrz-light-background-active); --hrz-search-result-typefilter-chip-bordercolor: var(--hrz-main-color); --hrz-search-result-typefilter-chip-textcolor: var(--hrz-main-color); --hrz-search-result-typefilter-chip-focuscolor: var(--hrz-focus-color); --hrz-search-result-typefilter-chip-bgcolor-hover: var(--hrz-main-color); --hrz-search-result-typefilter-chip-textcolor-hover: var(--hrz-light-text-color); --hrz-search-result-typefilter-chip-active-bgcolor: var(--hrz-main-color); --hrz-search-result-typefilter-chip-active-textcolor: var(--hrz-light-text-color); --hrz-search-result-card-details-textcolor: var(--hrz-dark-details-color); --hrz-search-result-card-bottom-articoli-bgcolor: var(--hrz-search-result-type-1); --hrz-search-result-card-bottom-pagine-bgcolor: var(--hrz-search-result-type-2); --hrz-search-result-card-bottom-atti-bgcolor: var(--hrz-search-result-type-3); --hrz-search-result-card-bottom-eventi-bgcolor: var(--hrz-search-result-type-4); --hrz-search-result-callout-bordercolor: var(--hrz-alt-main-color); --hrz-search-result-callout-textcolor: var(--hrz-main-color); /* * Slide */ --hrz-slide-focuscolor: var(--hrz-focus-color); --hrz-slide-contrast-bgcolor: var(--hrz-contrast-color); --hrz-slide-readall-textcolor: var(--hrz-main-link-color); --hrz-slide-readall-textcolor-hover: var(--hrz-main-link-color-hover); --hrz-slide-old-details-textcolor: var(--hrz-dark-details-color); --hrz-slide-old-notices-textcolor: var(--hrz-dark-text-color-gray-lighter); --hrz-slide-old-textcolor: var(--hrz-dark-text-color-gray); --hrz-slide-old-textcolor-hover: var(--hrz-main-text-color); --hrz-slide-alt-gradient-start-bgcolor: var(--hrz-light-alt-2-background); --hrz-slide-alt-gradient-end-bgcolor: var(--hrz-main-color-desaturated); --hrz-slide-alt-image-bgcolor: var(--hrz-light-background); --hrz-slide-wp-bg-color: var(--hrz-header-center-bgcolor); /* * Widget */ --hrz-widget-head-bgcolor: var(--hrz-light-alt-background); --hrz-widget-head-bordercolor: var(--hrz-light-border-color); --hrz-widget-body-bordercolor: var(--hrz-light-border-color); --hrz-widget-banner-bordercolor: var(--hrz-light-border-color); --hrz-widget-banner-bgcolor: var(--hrz-light-alt-background); --hrz-widget-banner-textcolor: var(--hrz-main-link-color); /* Percorsi di studio */ --hrz-percorsi-di-studio-plessi-bgcolor: var(--hrz-dark-background-darker); --hrz-percorsi-di-studio-border-color: var(--hrz-light-border-color); --hrz-percorsi-di-studio-border-color-hover: var(--hrz-light-background); --hrz-percorsi-di-studio-schoolname-color-hover: var(--hrz-light-shadow-color); --hrz-percorsi-di-studio-btn-bg: var(--hrz-light-background); --hrz-percorsi-di-studio-btn-label-color: var(--hrz-main-color); /* Paginazione */ --hrz-search-button-pagination-bgcolor: var(--hrz-main-color); --hrz-search-button-pagination-bgcolorhover: var(--hrz-main-color-hover); /* Variante menu top */ --hrz-menu-top-item-text-color: var(--hrz-section-4-text-color); --hrz-menu-top-item-text-color-hover: var(--hrz-section-4-text-color-hover); }