/* VALE: IMPOSTAZIONE COLORI PRIMARI E LINK GENERALI */ @charset "UTF-8"; :root { --cassiopeia-color-primary: #ef7b0a; --cassiopeia-color-link: #224faa; --link-color: #224faa; --link-color-rgb: 34, 79, 170; --cassiopeia-color-hover: #ef7b0a; --link-hover-color: #ef7b0a; --link-hover-color-rgb: 239, 123, 10; } /******************************************************************************* /* VALE: IMPOSTAZIONE GRIGIO CHIARO COME SFONDO DELLE PAGINE */ /* 1. Applica il grigio chiaro allo sfondo totale della pagina */ body { background-color: #f4f4f5 !important; } /* 2. Con la modalità FISSA, questo codice colora di BIANCO il blocco centrale, creando il bellissimo distacco "inscatolato" sui lati dello schermo */ .site-container, .site-grid { background-color: #ffffff !important; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Crea un'ombra leggerissima ed elegante per dare profondità */ } /******************************************************************************* /* VALE: IMPOSTAZIONE IMMAGINE DI SFONDO PER L'INTESTAZIONE */ header.header, .header, .container-header, .header-wrapper, .grid-child.container-header { background-image: url('/media/templates/site/cassiopeia_cassiopeia_child/images/bgsu.jpg') !important; background-repeat: repeat-x !important; /* Fa ripetere l'immagine repeat: se solo orizzontale repeat-x se solo verticale repeat-y */ background-position: top left !important; /* Fa partire la ripetizione dall'alto a sinistra */ background-size: auto !important; /* Mantiene la dimensione reale dell'immagine senza scalarla */ background-color: transparent !important; /* Rimuove eventuali colori solidi protettivi */ } /* VALE: IMPOSTAZIONE FONT PER TUTTO IL SITO: verificare se funziona */ @font-face { font-family: 'Titillium Maps'; src: url("/media/templates/site/cassiopeia_cassiopeia_child/fonts/TitilliumMaps29L002.eot"); src: local('Titillium Maps'), local('TitilliumMaps'), url("/media/templates/site/cassiopeia_cassiopeia_child/fonts/TitilliumMaps29L002.otf") format("opentype"), url("/media/templates/site/cassiopeia_cassiopeia_child/fonts/TitilliumMaps29L002.woff") format("woff"); } /******************************************************************************* /* VALE: IMPOSTA TUTTI I TESTI DEI LINK IN MAIUSCOLO */ a:link, a:visited { font-size: 14px; text-transform: uppercase; /* trasforma i testi indicati come link da minuscoli a maiuscoli */ text-decoration:none; } /******************************************************************************* /* VALE: IMPOSTAZIONI VARIE BANDA LATERALE CHE CONTIENE I LINK AD ALTRE PAGINE (sidebar-right) */ /* Centra l'intera lista del menu nella barra laterale destra */ .mod-menu.nav_sidebar-right, .sidebar-right .mod-menu { display: flex; flex-direction: column; align-items: center; padding-left: 0; /* Rimuove il rientro predefinito a sinistra */ } /* Centra il contenuto del link all'interno del suo spazio */ .mod-menu.nav_sidebar-right a, .sidebar-right .mod-menu a { text-align: center; } /* Modifica le proporzioni della griglia solo su desktop */ @media (min-width: 992px) { .site-grid { /* Definisce una colonna per l'80% (contenuto) e una per il 20% (sidebar) */ grid-template-columns: [full-start] minmax(0, 1fr) [main-start] 4fr 1fr [main-end] minmax(0, 1fr) [full-end] !important; /* Forza l'assegnazione delle aree: il componente a sinistra, la sidebar a destra */ grid-template-areas: ". banner banner ." ". top-a top-a ." ". top-b top-b ." ". comp side-r ." ". bot-a bot-a ." ". bot-b bot-b ." !important; } } /******************************************************************************* /* VALE: FOOTER */ /* ========================================================================== RESET E FORZATURA COLORE FOOTER ========================================================================== */ .container-footer, footer, .footer { background-color: #f4f4f5 !important; /* Forza il footer interamente BIANCO */ background-image: none !important; /* Distrugge gradienti o sfumature di Cassiopeia */ width: 100% !important; padding: 5px 0 !important; /* Riduce i margini per compattare l'altezza */ border-radius: 0 0 8px 8px; } /* ========================================================================== STRUTTURA DELLA TABELLA CUSTOM (ALTEZZA COMPATTA ~170PX) ========================================================================== */ .footer-table-custom { width: 100% !important; max-width: 100% !important; table-layout: fixed !important; /* Divide matematicamente lo spazio del foglio */ border-collapse: collapse !important; height: auto !important; /* RIMOZIONE ALTEZZA FISSA: ora la tabella è alta solo quanto il testo! */ margin: 0 auto !important; } /* Gestione delle 5 colonne (le prime 3 prendono il 18%, quella con la mappa il 11% e l'ultima il 35%) */ .footer-table-custom th, .footer-table-custom td { text-align: left !important; vertical-align: top !important; padding: 0px 8px 2px 8px !important; /* Ridotto il padding laterale standard */ } /* 1. REGOLAZIONE PRECISA DELLE LARGHEZZE DI TUTTE E 5 LE COLONNE (TOTALE 100%) */ .footer-table-custom th:nth-child(1), .footer-table-custom td:nth-child(1), .footer-table-custom th:nth-child(2), .footer-table-custom td:nth-child(2), .footer-table-custom th:nth-child(3), .footer-table-custom td:nth-child(3) { width: 18% !important; /* Le prime 3 colonne dei link prendono il 18% ciascuna */ } .footer-table-custom th:nth-child(4), .footer-table-custom td:nth-child(4) { width: 11% !important; /* STRINGE LA COLONNA DELLA MAPPA AL MINIMO INDISPENSABILE (11%) */ padding-right: 0px !important; /* AZZERA lo spazio vuoto a destra della piantina */ } .footer-table-custom th:nth-child(5), .footer-table-custom td:nth-child(5) { width: 35% !important; /* ALLARGA LA COLONNA DEI TESTI (35%) spingendola verso la mappa */ padding-left: 0px !important; /* AZZERA lo spazio vuoto a sinistra dei testi */ } /* 2. STILE DEI TITOLI DELLE COLONNE */ .footer-table-custom th { font-family: 'Trebuchet MS', Geneva, sans-serif !important; font-size: 18px !important; font-weight: bold !important; color: #000000 !important; padding-bottom: 2px !important; } /* ========================================================================== STILE DEI LINK INTERNI (NERO DI BASE -> ARANCIONE ALL'HOVER) ========================================================================== */ .footer-table-custom td a { color: #000000 !important; /* TESTO DEI LINK COMPLETAMENTE NERO */ text-decoration: none !important; font-size: 13px !important; line-height: 1.2 !important; display: inline-block; } /* Effetto passaggio del mouse sui link */ .footer-table-custom td a:hover { color: #ff6600 !important; /* I LINK DIVENTANO ARANCIONI SOLO QUANDO CI PASSI SOPRA */ text-decoration: underline !important;/* Aggiunge la sottolineatura di cortesia */ } /* ========================================================================== CONFIGURAZIONE SPECIFICA COLONNA 'CONTATTACI' - AZZERAMENTO MARGINI (ELIMINA LO SPAZIO VUOTO INVISIBILE) ========================================================================== */ .col-contatti img { float: left !important; /* Affianca la piantina di Google Maps a sinistra del testo */ margin-right: 12px !important; margin-top: 2px !important; border: 1px solid #ddd !important; } .col-testo-contatti p { margin: 0 !important; padding: 0 !important; float: left !important; font-family: 'Trebuchet MS', Geneva, sans-serif !important; font-size: 13px !important; color: #3f3f3f !important; /* FORZA IL TESTO GRIGIO SCURO/NERASTRO */ line-height: 1.3 !important; } /* Forza in nero anche i link eventualmente inseriti in questa colonna (es. l'email) */ .col-testo-contatti p a { color: #000000 !important; /* Email in nero di base */ text-decoration: none !important; } /* Fa diventare arancione anche l'email al passaggio del mouse */ .col-testo-contatti p a:hover { color: #ff6600 !important; /* Email in arancione all'hover */ text-decoration: underline !important; } /* Mantiene i titoli delle colonne (CONTATTACI) in nero pieno */ .footer-table-custom th { color: #000000 !important; /* Forza il titolo in nero */ } /* VALEA: BANNER ALTI /* ========================================================================== RIPOSIZIONAMENTO E OTTIMIZZAZIONE BANNER ALTO (BLU) ========================================================================== */ /* ========================================================================== CONFIGURAZIONE BANNER ALTO: 7 BOTTONI IDENTICI + TELEFONO ========================================================================== */ /* 1. Annulla i margini vuoti nativi di Cassiopeia sopra la posizione banner */ .container-banner, .banner { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* 2. Forza la tabella a espandersi al 100% e a mantenere la struttura rigida */ .banner-top-table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; /* TRUCCO CHIAVE: Impedisce ai testi di addossarsi e schiacciarsi */ margin-top: -15px !important; /* Regola questo valore per alzare/abbassare il banner */ position: relative; z-index: 10; } /* 3. Regolazione millimetrica di tutte le celle */ .banner-top-table td { padding: 0 !important; vertical-align: middle !important; text-align: center !important; height: 54px !important; /* Pareggia l'altezza dei bottoni a quella del telefono */ } /* 4. Ripartizione esatta degli spazi (7 colonne uguali + 1 più larga) */ .banner-top-table td:not(.col-telefono) { width: 10.714% !important; /* Distribuisce equamente i 7 pulsanti occupando il 75% dello spazio */ } .banner-top-table td.col-telefono { width: 25% !important; /* Riserva il 25% dello spazio totale per l'immagine del telefono */ } /* 5. Stile dei bottoni (Testo grande, grassetto e sfondo blu di base) */ .btn-banner { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; width: 100% !important; background-color: #2e4094 !important; /* Colore blu di sfondo stabile */ color: #ffffff !important; /* Testo bianco di base */ font-family: 'Geneva', sans-serif !important; font-size: 16px !important; /* Testo grande */ font-weight: 600 !important; /* Grassetto marcato */ text-decoration: none !important; text-transform: uppercase; box-sizing: border-box !important; /*border-right: 1px solid #0033aa; /* Linea sottile di separazione tra i tasti */ border-right: 1px solid #adb0b6; /* Linea sottile di separazione tra i tasti */ transition: color 0.2s ease; /* Rende il cambio colore fluido */ } /* 6. Effetto al passaggio del mouse: lo sfondo resta blu, SOLO il testo diventa arancione */ .btn-banner:hover { background-color: #2e4094 !important; color: #ef7b0a !important; /* Il testo si illumina di arancione */ text-decoration: none !important; } /* 7. Bordo grigio sx bottone HOME */ .banner-top-table td:nth-child(1) { border-left: 1px solid #adb0b6; /* Linea sottile di separazione tra i tasti */ } .banner-top-table td:nth-child(8) { border-right: 1px solid #adb0b6; /* Linea sottile di separazione tra i tasti */ } /* ========================================================= TELEFONO MENU PRINCIPALE ========================================================= */ .banner-top-table .col-telefono { padding: 0 12px; vertical-align: middle; } .sabik-menu-phone { display: flex; align-items: center; justify-content: center; gap: .7rem; min-width: 220px; height: 54px; padding: 0 1rem; color: #ffffff !important; background-color: #2e4094 !important; text-decoration: none !important; box-sizing: border-box; transition: color .2s ease; } .sabik-menu-phone:hover { color: #ffffff !important; background-color: #2e4094 !important; } .sabik-menu-phone:hover .sabik-menu-phone-label, .sabik-menu-phone:hover .sabik-menu-phone-number { color: #ef7b0a !important; } .sabik-menu-phone-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; color: #2e4094; background: #ffffff; border-radius: 50%; font-size: 1.1rem; line-height: 1; } .sabik-menu-phone-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; white-space: nowrap; } .sabik-menu-phone-label { margin-bottom: .18rem; color: #ffffff; font-size: .76rem; font-weight: 600; letter-spacing: .08em; } .sabik-menu-phone-number { color: #ffffff; font-size: 1rem; font-weight: 700; } /************************* BANNER SU: BOTTONI PRODOTTI SABIK + CE ******************************/ /* ========================================================= BANNER SUPERIORE - AREE SABIK ========================================================= */ .sabik-top-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; width: 100%; max-width: 1300px; margin: 12px auto 2px; padding: 0 8px; box-sizing: border-box; } /* ========================================================= CARD ========================================================= */ .sabik-top-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #ffffff; border: 1px solid #dce5ea; border-radius: 7px; color: #4f565b !important; text-decoration: none !important; box-shadow: 0 2px 5px rgba(23, 74, 115, .08); transition: transform .2s ease, box-shadow .2s ease; } .sabik-top-card:hover { color: #4f565b !important; text-decoration: none !important; box-shadow: 0 5px 14px rgba(23, 74, 115, .14); transform: translateY(-2px); } /* ========================================================= TESTATA CARD ========================================================= */ .sabik-top-card-head { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding: .55rem .8rem; color: #ffffff; box-sizing: border-box; } .sabik-top-card-head span { margin-bottom: .1rem; font-size: .78rem; line-height: 1; } .sabik-top-card-head strong { font-size: .95rem; font-weight: 700; line-height: 1.15; } /* triangolino bianco, richiamo ai banner attuali */ .sabik-top-card-head::after { content: ""; position: absolute; top: 0; right: 14px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ffffff; } /* ========================================================= COLORI AREE ========================================================= */ .sabik-top-ele .sabik-top-card-head { background: #ef7b0a; } .sabik-top-fld .sabik-top-card-head { background: #2e4094; } .sabik-top-elefld .sabik-top-card-head { background: #003653; } .sabik-top-ce .sabik-top-card-head { background: #174a73; } /* ========================================================= CORPO CARD ========================================================= */ .sabik-top-card-body { display: flex; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: .75rem; min-height: 105px; padding: .8rem; box-sizing: border-box; } .sabik-top-card-name { display: flex; flex-direction: column; min-width: 0; } .sabik-top-card-name strong { margin-bottom: .25rem; color: #174a73; font-size: 1rem; font-weight: 700; line-height: 1.15; } .sabik-top-card-name span { color: #68777e; font-size: .72rem; line-height: 1.3; } .sabik-top-card-product { display: flex; align-items: center; justify-content: center; flex: 0 0 82px; width: 82px; height: 88px; overflow: hidden; } .sabik-top-card-product img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .sabik-top-card-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; } .sabik-top-product-title { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; } .sabik-top-logo { display: block; width: 78px; height: auto; object-fit: contain; } .sabik-top-version-name { color: #174a73; font-size: 1rem; font-weight: 700; line-height: 1; white-space: nowrap; } .sabik-top-description { color: #68777e; font-size: .72rem; line-height: 1.3; text-transform: uppercase; } .sabik-top-ele .sabik-top-version-name { font-size: .92rem; color: #ef7b0a; } .sabik-top-ele .sabik-top-logo { width: 71px; } .sabik-top-fld .sabik-top-version-name { font-size: .92rem; color: #2e4094; } .sabik-top-fld .sabik-top-logo { width: 71px; } .sabik-top-elefld .sabik-top-version-name { font-size: .92rem; color: #174a73; } .sabik-top-elefld .sabik-top-product-title { gap: .22rem; } .sabik-top-elefld .sabik-top-logo { width: 71px; } .sabik-top-elefld .sabik-top-card-versions { padding-left: .55rem; } /* ========================================================= VERSIONI ========================================================= */ .sabik-top-card-versions { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-end; transform: translateY(-3px); gap: 5px; padding-left: .65rem; border-left: 1px solid #dce5ea;} .sabik-top-card-versions span { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: .78rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; white-space: nowrap; } .sabik-top-ele .sabik-top-card-versions span { color: #ef7b0a; background: #fff1df; } .sabik-top-fld .sabik-top-card-versions span { color: #174a73; background: #eef6fb; } .sabik-top-elefld .sabik-top-card-versions span { color: #174a73; background: #eef6fb; } /* ========================================================= MARCATURA CE ========================================================= */ .sabik-top-card-body-ce { justify-content: flex-start; gap: .9rem; } .sabik-top-ce-visual { position: relative; flex: 0 0 125px; width: 125px; height: 88px; overflow: hidden; border-radius: 3px; } .sabik-top-ce-flag { display: block; width: 100%; height: 100%; object-fit: cover; } .sabik-top-ce-mark-white { position: absolute; top: 50%; left: 50%; color: #ffffff; font-size: 2.6rem; font-weight: 600; line-height: 1; transform: translate(-50%, -50%); } .sabik-top-ce-title { margin-bottom: .35rem; color: #174a73; font-size: .95rem; font-weight: 700; line-height: 1.15; } .sabik-top-ce-title { margin-bottom: .35rem; color: #174a73; font-size: .95rem; font-weight: 700; line-height: 1.15; } .sabik-top-ce-mark { position: absolute; top: 50%; left: 50%; width: 66px; height: auto; transform: translate(-50%, -50%); filter: brightness(0) invert(1); /* Il filter trasforma il nero del PNG in bianco senza modificare la geometria del marchio.*/ } /* ========================================================= RESPONSIVE MENU PRODOTTI + CE ========================================================= */ /* TABLET */ @media (max-width: 900px) { .sabik-top-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding-left: 12px; padding-right: 12px; } } /* SMARTPHONE */ @media (max-width: 520px) { .sabik-top-products { grid-template-columns: 1fr; gap: .7rem; padding-left: 10px; padding-right: 10px; } .sabik-top-card-body { min-height: 0; padding: .7rem; } .sabik-top-card-product { flex-basis: 72px; width: 72px; height: 78px; } .sabik-top-logo { width: 62px; } .sabik-top-version-name { font-size: .88rem; } .sabik-top-card-versions { padding-left: .55rem; } /* Marcatura CE */ .sabik-top-ce-visual { flex-basis: 105px; width: 105px; height: 74px; } .sabik-top-ce-mark { width: 56px; } } /****************************************************************************************************/ /*VALE ---- PAGINE PRODOTTO SABIK CREATA DA CHATGPT / /* SABIK - CSS comune pagine prodotto, versione compatta 2026-10-09. Sostituire soltanto il blocco Sabik esistente in user.css. Logo FUNZIONALITÀ: impostazione confermata dall’utente. */ /* ========================================================= SABIK - PAGINE PRODOTTO ========================================================= */ .sabik-product { max-width: 1200px; margin: 0 auto; } /* --------------------------------------------------------- HEADER PRODOTTO --------------------------------------------------------- */ .sabik-product-header { margin-bottom: 1.65rem; } .sabik-product-header h1 { margin: 0; color: #174a73; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 600; line-height: 1.15; } .sabik-product-subtitle { margin: 0.7rem 0 0; padding-left: 1rem; border-left: 4px solid #f28c00; color: #555; font-size: 1.2rem; line-height: 1.5; } /* --------------------------------------------------------- INTRODUZIONE --------------------------------------------------------- */ .sabik-intro { display: grid; grid-template-columns: minmax(220px, 30%) 1fr; gap: 2rem; align-items: center; margin-bottom: 1.9rem; } .sabik-intro-image { text-align: center; } .sabik-intro-image img { max-width: 100%; height: auto; display: inline-block; } .sabik-intro-content p { margin-top: 0; margin-bottom: 0.75rem; line-height: 1.65; } /* --------------------------------------------------------- MINI HIGHLIGHTS --------------------------------------------------------- */ .sabik-highlight-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1rem; } .sabik-highlight-list > div { padding: 0.8rem; background: #f3f7fa; border-top: 3px solid #f28c00; } .sabik-highlight-list strong { display: block; margin-bottom: 0.35rem; color: #174a73; font-size: 0.95rem; } .sabik-highlight-list span { display: block; color: #555; font-size: 0.85rem; line-height: 1.4; } /* ========================================================= SABIK - 35 ANNI Fascia celebrativa temporanea ========================================================= */ .sabik-product .sabik-anniversary { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; padding: 0.5rem 1rem; background: #ffffff; border: 1px solid #f28c00; border-radius: 5px; } .sabik-product .sabik-anniversary-number { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 54px; padding: 0.3rem; color: #ffffff; background: #092a48; border-radius: 3px; } .sabik-product .sabik-anniversary-number strong { color: #ff9418; font-size: 1.5rem; line-height: 1.1; } .sabik-product .sabik-anniversary-number span { font-size: 0.6rem; letter-spacing: 0.15em; } .sabik-product .sabik-anniversary-text { display: flex; flex-direction: column; gap: 0.15rem; } .sabik-product .sabik-anniversary-text strong { color: #174a73; font-size: 0.95rem; } .sabik-product .sabik-anniversary-text span { color: #596970; font-size: 0.82rem; line-height: 1.4; } @media (max-width: 480px) { .sabik-product .sabik-anniversary { gap: 0.7rem; padding: 0.65rem; } } /* ========================================================= Fine Fascia celebrativa temporanea SABIK - 35 ANNI ========================================================= */ /* --------------------------------------------------------- CONFIGURATORE --------------------------------------------------------- */ .sabik-configurator { margin: 1.9rem 0; padding: 1.5rem 1.8rem; background: #f3f7fa; border-left: 5px solid #f28c00; } .sabik-section-label { margin-bottom: 0.5rem; color: #f28c00; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sabik-configurator h2 { margin-top: 0; color: #174a73; font-size: 1.7rem; } .sabik-configurator p { max-width: 900px; line-height: 1.65; } /* --------------------------------------------------------- FLUSSO CONFIGURATORE --------------------------------------------------------- */ .sabik-process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.2rem; } .sabik-process-item { min-height: 0; padding: 0.95rem; background: #fff; border: 1px solid #d9e2e8; text-align: center; } .sabik-process-number { display: block; margin-bottom: 0.5rem; color: #f28c00; font-size: 0.75rem; font-weight: 700; } .sabik-process-item strong { display: block; color: #174a73; } .sabik-process-item small { display: block; margin-top: 0.4rem; color: #666; line-height: 1.4; } .sabik-process-arrow { color: #f28c00; font-size: 1.8rem; font-weight: 600; } /* --------------------------------------------------------- INTRODUZIONE FUNZIONALITÀ --------------------------------------------------------- */ .sabik-features-intro { margin-top: 2.2rem; } .sabik-features-intro h2 { color: #174a73; font-size: 1.8rem; } .sabik-features-intro p { line-height: 1.65; } /* ========================================================= LOGO SABIK NELLA SEZIONE FUNZIONALITÀ ========================================================= */ .sabik-product .sabik-features-heading-logo { position: relative; display: block; width: 100%; max-width: none; min-height: 115px; } .sabik-product .sabik-features-heading-text { width: 100%; min-width: 0; } .sabik-product .sabik-features-heading-text h2 { width: 100%; } .sabik-product .sabik-features-heading-text p { max-width: calc(100% - 260px); } .sabik-product .sabik-features-logo { position: absolute; top: 42px; right: 0; display: block; width: 210px; max-width: 25%; height: auto; object-fit: contain; } @media (max-width: 900px) { .sabik-product .sabik-features-heading-logo { min-height: 0; } .sabik-product .sabik-features-heading-text p { max-width: 100%; } .sabik-product .sabik-features-logo { position: static; width: 150px; max-width: 45%; margin: 12px 0 0 auto; } } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 900px) { .sabik-intro { grid-template-columns: 1fr; gap: 2rem; } .sabik-intro-image { order: 0; } .sabik-highlight-list { grid-template-columns: 1fr; } .sabik-process { grid-template-columns: 1fr; } .sabik-process-arrow { transform: rotate(90deg); text-align: center; } } @media (max-width: 600px) { .sabik-product-header h1 { font-size: 2rem; } .sabik-product-subtitle { font-size: 1rem; } .sabik-configurator { padding: 1.4rem; } } /* ========================================================= SABIK - FUNZIONALITÀ ========================================================= */ .sabik-features { margin-top: 2.4rem; } /* --------------------------------------------------------- TITOLO SEZIONE --------------------------------------------------------- */ .sabik-features-heading { width: 100%; max-width: none; margin-bottom: 1.3rem; } .sabik-features-heading h2 { margin-top: 0; margin-bottom: 0.8rem; color: #174a73; font-size: 1.9rem; } .sabik-features-heading p { margin-bottom: 0; color: #555; line-height: 1.65; } /* --------------------------------------------------------- GRIGLIA --------------------------------------------------------- */ .sabik-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } /* --------------------------------------------------------- SINGOLA CARD --------------------------------------------------------- */ .sabik-feature-card { padding: 1.05rem 1.2rem; background: #f5f8fa; border: 1px solid #dce5ea; border-top: 3px solid #174a73; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .sabik-feature-card:hover { border-top-color: #f28c00; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); transform: translateY(-2px); } /* --------------------------------------------------------- TITOLO CARD --------------------------------------------------------- */ .sabik-feature-card h3 { margin-top: 0; margin-bottom: 0.5rem; color: #174a73; font-size: 1.1rem; line-height: 1.3; } /* --------------------------------------------------------- ELENCO --------------------------------------------------------- */ .sabik-feature-card ul { margin: 0; padding: 0; list-style: none; } .sabik-feature-card li { position: relative; margin-bottom: 0.5rem; padding-left: 1.1rem; color: #555; font-size: 0.92rem; line-height: 1.45; } .sabik-feature-card li:last-child { margin-bottom: 0; } .sabik-feature-card li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 5px; height: 5px; background: #f28c00; border-radius: 50%; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1000px) { .sabik-feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .sabik-feature-grid { grid-template-columns: 1fr; } } /* ========================================================= SABIK - WORKFLOW DEL PROGETTO ========================================================= */ .sabik-workflow { margin-top: 1.7rem; } /* --------------------------------------------------------- TITOLO --------------------------------------------------------- */ .sabik-workflow-heading { width: 100%; max-width: none; margin-bottom: 1.3rem; } .sabik-workflow-heading h2 { margin-top: 0; margin-bottom: 0.8rem; color: #174a73; font-size: 1.9rem; } .sabik-workflow-heading p { margin-bottom: 0; color: #555; line-height: 1.65; } /* --------------------------------------------------------- TRE COLONNE --------------------------------------------------------- */ .sabik-workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } /* --------------------------------------------------------- CARD --------------------------------------------------------- */ .sabik-workflow-card { padding: 1.15rem; background: #fff; border: 1px solid #dce5ea; border-top: 3px solid #174a73; } .sabik-workflow-card h3 { margin-top: 0; margin-bottom: 0.5rem; color: #174a73; font-size: 1.15rem; } .sabik-workflow-card p { margin-bottom: 0.75rem; color: #555; font-size: 0.92rem; line-height: 1.6; } .sabik-workflow-card ul { margin: 0; padding: 0; list-style: none; } .sabik-workflow-card li { position: relative; margin-bottom: 0.4rem; padding-left: 1rem; color: #555; font-size: 0.88rem; line-height: 1.4; } .sabik-workflow-card li:last-child { margin-bottom: 0; } .sabik-workflow-card li::before { content: ""; position: absolute; top: 0.55em; left: 0; width: 5px; height: 5px; background: #f28c00; border-radius: 50%; } /* --------------------------------------------------------- RISULTATO --------------------------------------------------------- */ .sabik-workflow-result { margin-top: 1rem; padding: 0.95rem 1.2rem; background: #f3f7fa; border-left: 4px solid #f28c00; box-sizing: border-box; width: 100%; max-width: 100%; } .sabik-workflow-result strong { display: block; margin-bottom: 0.45rem; color: #174a73; } .sabik-workflow-result span { display: block; color: #555; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.7; } .sabik-workflow-result b { margin: 0 0.35rem; color: #f28c00; } /* --------------------------------------------------------- RESPONSIVE --------------------------------------------------------- */ @media (max-width: 1000px) { .sabik-workflow-grid { grid-template-columns: 1fr; } .sabik-workflow-result { align-items: flex-start; flex-direction: column; gap: 0.7rem; } .sabik-workflow-result span { text-align: left; } } @media (max-width: 600px) { .sabik-workflow { margin-top: 3rem; } .sabik-workflow-card { padding: 1.25rem; } .sabik-workflow-result { padding: 0.8rem; } .sabik-workflow-result span { line-height: 1.8; } } /* PAGINE PRODOTTO SABIK LIGHT E SMALL */ /* ===================================================== SEZIONE CRESCITA - PASSAGGIO ALLA LIGHT/FULL ===================================================== */ .sabik-upgrade { margin-top: 1.7rem; padding: 1.5rem 1.8rem; background: #f3f7fa; border-left: 5px solid #f28c00; } .sabik-upgrade .sabik-section-label { margin-bottom: 0.5rem; color: #f28c00; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sabik-upgrade h2 { margin-top: 0; margin-bottom: 0.9rem; color: #174a73; font-size: 1.7rem; } .sabik-upgrade p { max-width: 900px; margin-bottom: 0.5rem; color: #555; line-height: 1.65; } .sabik-upgrade p:last-of-type { margin-bottom: 0; } .sabik-upgrade-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 1.2rem; } .sabik-upgrade-flow > div:not(.sabik-process-arrow) { min-height: 0; padding: 0.85rem 1rem; background: #fff; border: 1px solid #d9e2e8; text-align: center; } .sabik-upgrade-flow strong { display: block; color: #174a73; line-height: 1.4; } .sabik-upgrade-flow span { display: block; margin-top: 0.4rem; color: #666; font-size: 0.88rem; line-height: 1.4; } .sabik-upgrade-flow .sabik-process-arrow { color: #f28c00; font-size: 1.8rem; font-weight: 600; } @media (max-width: 700px) { .sabik-upgrade { padding: 1.4rem; } .sabik-upgrade-flow { grid-template-columns: 1fr; } .sabik-upgrade-flow .sabik-process-arrow { transform: rotate(90deg); text-align: center; } } .sabik-technical-info { margin-top: 1.7rem; padding-top: 1.2rem; border-top: 1px solid #dce5ea; } .sabik-technical-info .sabik-section-label { margin-bottom: 0.35rem; } .sabik-technical-info p { margin: 0; color: #555; font-size: 0.9rem; line-height: 1.5; } .sabik-technical-info strong { color: #174a73; } /* ================================================== SABIK - TABELLA CONFRONTO VERSIONI ================================================== */ .sabik-compare { width: 100%; max-width: 1400px; margin: 0 auto; } .sabik-compare-header { max-width: 900px; margin-bottom: 2rem; } .sabik-compare-header h1 { margin: 0 0 0.8rem; color: #174a73; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 600; line-height: 1.15; } .sabik-compare-header p { margin: 0; color: #555; font-size: 1.05rem; line-height: 1.65; } /* LEGENDA */ /* ================================================== LEGENDA ================================================== */ .sabik-compare-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-bottom: 1.2rem; padding: 0.9rem 1.2rem; background: #f3f7fa; border-left: 4px solid #f28c00; color: #555; font-size: 0.88rem; } .sabik-compare-legend span { display: flex; align-items: center; gap: 0.5rem; } .sabik-status { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 18px; font-family: Arial, sans-serif; font-size: 1.35rem; font-weight: 400; line-height: 18px; } /* Funzionalità completa: pallino blu pieno */ .sabik-status.full { font-size: 0; color: transparent; } .sabik-status.full::before { content: ""; display: block; width: 14px; height: 14px; background: #174a73; border-radius: 50%; } /* Funzionalità con limitazioni: pallino arancione mezza luna */ .sabik-status.partial { color: #f28c00; } /* CONTENITORE RESPONSIVE */ .sabik-table-scroll { width: 100%; overflow-x: auto; border: 1px solid #dce5ea; -webkit-overflow-scrolling: touch; } /* TABELLA */ .sabik-comparison-table { width: 100%; min-width: 950px; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; } .sabik-comparison-table th, .sabik-comparison-table td { box-sizing: border-box; } /* INTESTAZIONE FAMIGLIE */ .sabik-family-row th { padding: 0.85rem 0.5rem; background: #174a73; color: #fff; border-right: 1px solid rgba(255,255,255,0.25); text-align: center; font-size: 1rem; font-weight: 700; } .sabik-family-row th:not(.sabik-function-heading) { border-bottom: 3px solid #f28c00; } .sabik-function-heading { width: 32%; text-align: left !important; padding-left: 1.2rem !important; vertical-align: middle; } /* INTESTAZIONE VERSIONI */ .sabik-version-row th { padding: 0.65rem 0.4rem; background: #f28c00; color: #fff; border-right: 1px solid rgba(255,255,255,0.4); text-align: center; font-size: 0.88rem; font-weight: 700; } /* RIGHE */ .sabik-comparison-table tbody th { padding: 0.72rem 1rem; background: #f7f9fa; color: #333; border-right: 1px solid #dce5ea; border-bottom: 1px solid #dce5ea; text-align: left; font-size: 0.88rem; font-weight: 500; line-height: 1.35; } .sabik-comparison-table tbody td { padding: 0.65rem 0.35rem; border-right: 1px solid #e3eaee; border-bottom: 1px solid #e3eaee; text-align: center; vertical-align: middle; color: #555; font-size: 0.88rem; } /* RIGHE ALTERNATE */ .sabik-comparison-table tbody tr:nth-child(even) th { background: #eef3f6; } .sabik-comparison-table tbody tr:nth-child(even) td { background: #fafcfd; } /* HOVER */ .sabik-comparison-table tbody tr:hover th, .sabik-comparison-table tbody tr:hover td { background: #fff7ec; } /* SIMBOLI */ .sabik-comparison-table td.yes { font-size: 0; } .sabik-comparison-table td.yes::after { content: ""; display: inline-block; width: 12px; height: 12px; background: #174a73; border-radius: 50%; vertical-align: middle; } .sabik-comparison-table td.partial { color: #f28c00; font-size: 1.25rem; font-weight: 700; line-height: 1; } .sabik-comparison-table td.value { color: #174a73; font-size: 0.9rem; font-weight: 700; } /* SEPARAZIONE TRA LE TRE FAMIGLIE */ /* Separazione delle famiglie nel corpo della tabella */ .sabik-comparison-table tbody td:nth-child(5), .sabik-comparison-table tbody td:nth-child(7) { border-left: 3px solid #c5d4de; } /* Separazione delle famiglie nella riga delle versioni */ .sabik-version-row th:nth-child(4), .sabik-version-row th:nth-child(6) { border-left: 3px solid #c5d4de; } /* PRIMA COLONNA BLOCCATA DURANTE SCROLL */ .sabik-comparison-table tbody th, .sabik-function-heading { position: sticky; left: 0; z-index: 2; } .sabik-function-heading { z-index: 4; } /* MOBILE */ @media (max-width: 900px) { .sabik-compare-header h1 { font-size: 2rem; } .sabik-compare-legend { gap: 0.7rem 1.2rem; } .sabik-comparison-table { min-width: 900px; } .sabik-function-heading { width: 280px; } } @media (max-width: 600px) { .sabik-compare-legend { display: grid; grid-template-columns: 1fr; } .sabik-comparison-table tbody th { font-size: 0.82rem; } .sabik-comparison-table tbody td { font-size: 0.8rem; } } /* *************************************************************************************************************************/ /* ===================================================== SIDEBAR SABIK ===================================================== */ .sidebar-right.no-card { margin-bottom: 1.5rem; } /* ------------------------- TITOLO FAMIGLIA ------------------------- */ .sidebar-right .mod-custom p { margin-bottom: 0.8rem; } .sidebar-right .mod-custom img { max-width: 100%; height: auto; } /* ------------------------- MENU VERSIONI ------------------------- */ .sidebar-right .mod-menu { width: 100%; margin: 0; padding: 0; list-style: none; } .sidebar-right .mod-menu li { margin: 0; padding: 0; } .sidebar-right .mod-menu li a { display: block; padding: 0.55rem 0.7rem; color: #174a73; font-size: 0.9rem; line-height: 1.3; text-decoration: none; border-bottom: 1px solid #dce5ea; transition: background-color 0.2s ease, color 0.2s ease; } .sidebar-right .mod-menu li a:hover { color: #f28c00; background: #f3f7fa; } /* PAGINA CORRENTE */ .sidebar-right .mod-menu li.current > a { color: #f28c00; font-weight: 700; background: #f3f7fa; border-left: 3px solid #f28c00; } /* ------------------------- BANNER DEMO ------------------------- */ .sidebar-right .mod-custom img { max-width: 100%; height: auto; } /* ------------------------- MENU DOCUMENTAZIONE ------------------------- */ .sidebar-right .mod-menu + .mod-menu { margin-top: 0.5rem; } /* ULTERIORE MODIFICA SIDEBAR /* ===================================================== SIDEBAR SABIK - RESTYLING ===================================================== */ /* Spaziatura generale tra i 4 blocchi */ .sidebar-right.no-card { margin-bottom: 1.4rem; } /* ===================================================== TITOLO DELLA FAMIGLIA ===================================================== */ .sidebar-right .mod-custom p { margin-bottom: 0.8rem; } .sidebar-right .mod-custom img { max-width: 100%; height: auto; } /* ===================================================== MENU ===================================================== */ .sidebar-right .mod-menu { width: 100%; margin: 0; padding: 0; list-style: none; } .sidebar-right .mod-menu li { margin: 0; padding: 0; } .sidebar-right .mod-menu li a { display: block; padding: 0.6rem 0.7rem; color: #174a73; font-size: 0.9rem; line-height: 1.35; text-decoration: none; border-bottom: 1px solid #dce5ea; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .sidebar-right .mod-menu li a:hover { color: #f28c00; background: #f3f7fa; padding-left: 0.9rem; } /* ===================================================== PAGINA ATTUALMENTE VISUALIZZATA ===================================================== */ .sidebar-right .mod-menu li.current > a { color: #f28c00; font-weight: 700; background: #f3f7fa; border-left: 3px solid #f28c00; } /* ===================================================== BANNER DEMO ===================================================== */ .sidebar-right .mod-custom img { max-width: 100%; height: auto; } /* ===================================================== SEPARAZIONE TRA MENU VERSIONI E MENU TECNICO ===================================================== */ /* Il menu che segue il banner mantiene una propria identità */ .sidebar-right .mod-custom + .sidebar-right .mod-menu { margin-top: 0.4rem; } /* ===================================================== MENU TECNICO / DOCUMENTAZIONE ===================================================== */ /* Le voci tecniche hanno la stessa importanza delle voci delle versioni */ .sidebar-right .mod-menu a { font-weight: 500; } /* Ultima voce senza linea inferiore */ .sidebar-right .mod-menu li:last-child a { border-bottom: none; } /************************************************* /**************** MARCATURA CE ******************* /* ========================================================= PRISMA - CONSULENZA MARCATURA CE CSS UNIFICATO E COMPATTO ========================================================= */ /* 1. IMPOSTAZIONI GENERALI */ .ce-page { --ce-dark: #26383a; --ce-petrol: #327b78; --ce-petrol-dark: #245d5b; --ce-text: #4d5555; --ce-light: #f3f6f5; --ce-line: #d9e2e0; --ce-white: #ffffff; width: 100%; max-width: 1250px; margin: 0; color: var(--ce-text); } .ce-page, .ce-page * { box-sizing: border-box; } .ce-page p { line-height: 1.55; } /* 2. BANNER INIZIALE */ .ce-page .ce-hero { position: relative; margin-bottom: 1rem; padding: .9rem 3rem; overflow: hidden; background: #17458f; color: #fff; border-radius: 10px; } .ce-page .ce-hero::after { content: ""; position: absolute; top: -130px; right: -80px; width: 350px; height: 350px; border: 55px solid rgba(241, 207, 69, 0.10); border-radius: 50%; pointer-events: none; } .ce-page .ce-eyebrow { position: relative; z-index: 1; margin-bottom: 0.4rem; color: #f1cf45; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; } .ce-page .ce-hero h1 { position: relative; z-index: 1; max-width: 800px; margin: 0 0 0.65rem; color: #fff; font-size: clamp(2.2rem, 3.5vw, 3.2rem); font-weight: 500; line-height: 1.08; } .ce-page .ce-hero-intro { position: relative; z-index: 1; max-width: 800px; margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 1rem; line-height: 1.55; } .ce-page .ce-hero-points { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.75rem; } .ce-page .ce-hero-points .ce-hero-tag { display: block; width: auto; padding: 0.32rem 0.75rem; color: #f1cf45; font-size: 0.78rem; font-weight: 600; line-height: 1.25; border: 1px solid rgba(255, 255, 255, 0.40); border-radius: 5px; } /* 3. TITOLI ED ELEMENTI COMUNI */ .ce-page .ce-section-label { margin-bottom: 0.45rem; color: var(--ce-petrol); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .ce-page .ce-section-heading { max-width: 800px; margin-bottom: 1.1rem; } .ce-page .ce-section-heading h2, .ce-page .ce-intro h2, .ce-page .ce-regulation h2, .ce-page .ce-closing h2 { margin-top: 0; margin-bottom: 0.55rem; color: var(--ce-dark); font-size: clamp(1.7rem, 2.4vw, 2.15rem); font-weight: 500; line-height: 1.25; } .ce-page .ce-section-heading p, .ce-page .ce-intro p, .ce-page .ce-regulation p, .ce-page .ce-closing p { line-height: 1.55; } /* 4. INTRODUZIONE */ .ce-page .ce-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; align-items: start; margin-bottom: 1.25rem; } .ce-page .ce-intro-main { max-width: 760px; } .ce-page .ce-intro-main h2 { margin-bottom: 1rem; } .ce-page .ce-intro-main p { margin: 0 0 0.85rem; } .ce-page .ce-intro-main p:last-child { margin-bottom: 0; } .ce-page .ce-experience { position: relative; padding: 1.5rem 1.7rem; background: var(--ce-light); border-left: 4px solid var(--ce-petrol); } .ce-page .ce-experience strong { display: block; margin-bottom: 0.65rem; color: var(--ce-dark); font-size: 1.05rem; } .ce-page .ce-experience p { margin: 0; font-size: 0.92rem; line-height: 1.55; } /* 5. IMMAGINE PANORAMICA CE */ .ce-page .ce-visual-banner { width: 100%; height: 180px; margin: 0 0 1.25rem; overflow: hidden; border-radius: 8px; } .ce-page .ce-visual-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* 6. I NOSTRI SERVIZI */ .ce-page .ce-services { margin: 0 0 2rem; padding: 2rem 2.5rem 1.1rem; background: var(--ce-light); } .ce-page .ce-services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0; margin: 0; padding: 0; align-items: start; } .ce-page .ce-service { position: relative; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 1.15rem 0 1.2rem 3.5rem; border-top: 1px solid var(--ce-line); } .ce-page .ce-service-number { position: absolute; top: 1.12rem; left: 0; width: 2.8rem; color: rgba(50, 123, 120, 0.38); font-size: 1.8rem; font-weight: 300; line-height: 1.1; white-space: nowrap; } .ce-page .ce-service h3 { margin: 0 0 0.45rem; color: var(--ce-dark); font-size: 1.12rem; font-weight: 600; line-height: 1.35; } .ce-page .ce-service p { margin: 0; font-size: 0.92rem; line-height: 1.5; } .ce-page .ce-service .ce-service-detail { margin-top: 0.55rem; color: #65706f; font-size: 0.85rem; } /* 7. MACCHINE ESISTENTI */ .ce-page .ce-existing-machines { margin: 0 0 2rem; } .ce-page .ce-existing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ce-line); border: 1px solid var(--ce-line); } .ce-page .ce-existing-item { min-width: 0; padding: 1.3rem 1.5rem; background: #fff; } .ce-page .ce-existing-item h3 { position: relative; margin: 0 0 0.8rem; padding-top: 1rem; color: var(--ce-dark); font-size: 1.2rem; font-weight: 600; } .ce-page .ce-existing-item h3::before { content: ""; position: absolute; top: 0; left: 0; width: 45px; height: 3px; background: var(--ce-petrol); } .ce-page .ce-existing-item p { margin: 0 0 0.65rem; line-height: 1.55; } .ce-page .ce-existing-item p:last-child { margin-bottom: 0; } .ce-page .ce-existing-item span { display: block; color: #6a7473; font-size: 0.82rem; line-height: 1.5; } /* 8. EMC E BASSA TENSIONE */ .ce-page .ce-directives { margin: 0 0 2rem; } .ce-page .ce-directives-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ce-page .ce-directive { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 1rem; align-items: start; min-width: 0; padding: 1.3rem; background: var(--ce-light); } .ce-page .ce-directive-code { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; color: var(--ce-petrol); border: 1px solid var(--ce-petrol); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; } .ce-page .ce-directive h3 { margin: 0 0 0.5rem; color: var(--ce-dark); font-size: 1.1rem; font-weight: 600; } .ce-page .ce-directive p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.5; } .ce-page .ce-directive span { color: var(--ce-petrol-dark); font-size: 0.8rem; font-weight: 700; } /* 9. QUADRO NORMATIVO */ .ce-page .ce-regulation { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr); gap: 2rem; margin: 0 0 2rem; padding: 1.7rem 2rem; border: 1px solid var(--ce-line); } .ce-page .ce-regulation-title h2 { margin-bottom: 0; } .ce-page .ce-regulation-content { padding-left: 1.5rem; border-left: 1px solid var(--ce-line); } .ce-page .ce-regulation-content p { margin: 0 0 0.75rem; } .ce-page .ce-regulation-content p:last-child { margin-bottom: 0; } .ce-page .ce-regulation-content strong { color: var(--ce-dark); } /* 10. CHIUSURA PRISMA E VIDEO */ .ce-page .ce-closing { display: grid; grid-template-columns: minmax(0, 1fr) 211px; gap: 2rem; align-items: center; margin: 0; padding: 1.25rem 2.5rem; background: #17458f; border-radius: 10px; } .ce-page .ce-closing .ce-section-label { color: #f1cf45; } .ce-page .ce-closing h2 { margin-bottom: 0.5rem; color: #fff; } .ce-page .ce-closing p { margin: 0 0 0.45rem; color: rgba(255, 255, 255, 0.84); line-height: 1.5; } .ce-page .ce-closing-note { margin-top: 0.6rem; color: #f1cf45 !important; font-weight: 600; } .ce-page .ce-closing-video { width: 211px; justify-self: end; } .ce-page .ce-video-link { position: relative; display: block; width: 211px; overflow: hidden; background: transparent; text-decoration: none; border-radius: 6px; } .ce-page .ce-video-link img { display: block; width: 211px; height: 150px; object-fit: cover; transition: transform 0.2s ease, opacity 0.2s ease; } .ce-page .ce-video-link:hover img { transform: scale(1.025); opacity: 0.82; } .ce-page .ce-play-button { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding-left: 3px; transform: translate(-50%, -50%); color: #fff; background: #327b78; border-radius: 50%; font-size: 0.9rem; line-height: 1; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, background-color 0.2s ease; } .ce-page .ce-video-link:hover .ce-play-button { transform: translate(-50%, -50%) scale(1.08); background: #3f928e; } /* 11. TABLET */ @media (max-width: 1000px) { .ce-page .ce-hero { padding: 1.5rem 2rem; } .ce-page .ce-intro { grid-template-columns: 1fr; gap: 1.25rem; } .ce-page .ce-services { padding: 1.7rem 1.8rem 1rem; } .ce-page .ce-services-grid { column-gap: 1.4rem; } .ce-page .ce-directives-grid { grid-template-columns: 1fr; } .ce-page .ce-regulation { grid-template-columns: 1fr; gap: 1rem; } .ce-page .ce-regulation-content { padding-left: 0; padding-top: 1rem; border-left: 0; border-top: 1px solid var(--ce-line); } .ce-page .ce-closing { grid-template-columns: 1fr; gap: 1.25rem; } .ce-page .ce-closing-video { justify-self: start; } } /* 12. SMARTPHONE */ @media (max-width: 700px) { .ce-page .ce-hero { margin-bottom: 1.5rem; padding: 1.5rem 1.2rem; } .ce-page .ce-hero h1 { font-size: 2rem; } .ce-page .ce-hero-intro { font-size: 1rem; } .ce-page .ce-hero-points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; } .ce-page .ce-intro { gap: 1rem; margin-bottom: 1rem; } .ce-page .ce-experience { padding: 1.2rem; } .ce-page .ce-visual-banner { height: 120px; margin-bottom: 1rem; } .ce-page .ce-services, .ce-page .ce-existing-machines, .ce-page .ce-directives, .ce-page .ce-regulation { margin-bottom: 1.5rem; } .ce-page .ce-services { padding: 1.3rem 1.2rem 0.7rem; } .ce-page .ce-services-grid { grid-template-columns: 1fr; } .ce-page .ce-service { padding: 1rem 0 1rem 3rem; } .ce-page .ce-service-number { top: 1rem; width: 2.4rem; font-size: 1.6rem; } .ce-page .ce-existing-grid { grid-template-columns: 1fr; } .ce-page .ce-existing-item { padding: 1.2rem; } .ce-page .ce-directive { grid-template-columns: 58px minmax(0, 1fr); gap: 0.8rem; padding: 1rem; } .ce-page .ce-directive-code { width: 54px; height: 54px; font-size: 0.8rem; } .ce-page .ce-regulation { padding: 1.2rem; } .ce-page .ce-closing { padding: 1.5rem 1.2rem; } } /****************** CHI SIAMO ****************************** /* ========================================================= PRISMA - CHI SIAMO ========================================================= */ .prisma-about { --prisma-blue: #174a73; --prisma-orange: #f28c00; --prisma-text: #4f565b; --prisma-light: #f4f7f9; --prisma-line: #dce5ea; --prisma-white: #ffffff; width: 100%; margin: 0; color: var(--prisma-text); } /* ========================================================= INTRODUZIONE ========================================================= */ .prisma-about-header { position: relative; margin-bottom: 3.5rem; padding: 0.5rem 0 2.2rem; border-bottom: 1px solid var(--prisma-line); } .prisma-about-label { margin-bottom: 0.6rem; color: var(--prisma-orange); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .prisma-about-header h1 { max-width: 850px; margin: 0 0 1.2rem; color: var(--prisma-blue); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 500; line-height: 1.18; } .prisma-about-header p { max-width: 850px; margin: 0 0 0.8rem; color: var(--prisma-text); font-size: 1rem; line-height: 1.65; } .prisma-about-header p:last-child { margin-bottom: 0; } .prisma-about-header strong { color: #303a40; } /* piccolo elemento grafico legato al 1987 */ .prisma-about-header::after { content: "dal 1987"; position: absolute; right: 1rem; bottom: -0.2rem; color: rgba(23, 74, 115, 0.055); font-size: 5rem; font-weight: 700; line-height: 1; pointer-events: none; } /* ========================================================= TITOLO SEZIONE ========================================================= */ .prisma-about-content { margin-bottom: 2rem; } .prisma-about-section-title { max-width: 780px; margin-bottom: 2rem; } .prisma-about-section-title h2 { margin: 0; color: var(--prisma-blue); font-size: 1.65rem; font-weight: 500; line-height: 1.3; } /* ========================================================= GRIGLIA 3 x 2 ========================================================= */ .prisma-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; } /* ========================================================= BOX ========================================================= */ .prisma-about-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--prisma-white); border: 1px solid var(--prisma-line); border-radius: 7px; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .prisma-about-card:hover { transform: translateY(-2px); border-color: #cbd9e1; box-shadow: 0 5px 16px rgba(20, 50, 70, 0.08); } /* ========================================================= IMMAGINI ========================================================= */ .prisma-about-image { position: relative; width: 100%; aspect-ratio: 16 / 5; overflow: hidden; background: var(--prisma-light); } .prisma-about-image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--prisma-orange); } .prisma-about-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= CONTENUTO BOX ========================================================= */ .prisma-about-card-content { position: relative; flex: 1; padding: 1.35rem 1.35rem 1.45rem; } .prisma-about-number { margin-bottom: 0.45rem; color: #9bafb9; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } .prisma-about-card h3 { margin: 0 0 0.85rem; color: var(--prisma-blue); font-size: 1.05rem; font-weight: 600; line-height: 1.3; } .prisma-about-card p { margin: 0 0 0.7rem; color: var(--prisma-text); font-size: 0.87rem; line-height: 1.55; } .prisma-about-card p:last-child { margin-bottom: 0; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .prisma-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prisma-about-header::after { font-size: 5rem; } } @media (max-width: 700px) { .prisma-about-header { margin-bottom: 2.5rem; padding-bottom: 1.7rem; } .prisma-about-header h1 { font-size: 2rem; } .prisma-about-header::after { display: none; } .prisma-about-section-title { margin-bottom: 1.5rem; } .prisma-about-section-title h2 { font-size: 1.4rem; } .prisma-about-grid { grid-template-columns: 1fr; gap: 1rem; } .prisma-about-image { aspect-ratio: 16 / 5; } .prisma-about-card-content { padding: 1.2rem; } } /************** DOVE SIAMO ***********************/ /* ========================================================= PRISMA - DOVE SIAMO ========================================================= */ .prisma-location { --prisma-blue: #174a73; --prisma-orange: #f28c00; --prisma-text: #4f565b; --prisma-light: #f4f7f9; --prisma-line: #dce5ea; --prisma-white: #ffffff; width: 100%; margin: 0; color: var(--prisma-text); } /* INTRODUZIONE */ .prisma-location-header { margin-bottom: 2rem; } .prisma-location-label { margin-bottom: 0.55rem; color: var(--prisma-orange); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .prisma-location-header h1 { margin: 0 0 1rem; color: var(--prisma-blue); font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 500; line-height: 1.15; } .prisma-location-header > p { max-width: 850px; margin: 0 0 1.3rem; line-height: 1.65; } .prisma-location-address { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; padding-left: 1rem; border-left: 4px solid var(--prisma-orange); } .prisma-location-address strong { color: var(--prisma-blue); } .prisma-location-address span { color: #555; } /* MAPPA */ .prisma-location-map { margin: 0 0 3rem; overflow: hidden; border: 1px solid var(--prisma-line); border-radius: 8px; } .prisma-location-map a { position: relative; display: block; text-decoration: none; } .prisma-location-map img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; } .prisma-location-map a:hover img { transform: scale(1.01); } .prisma-map-action { position: absolute; right: 1rem; bottom: 1rem; padding: 0.55rem 0.9rem; color: #fff; background: rgba(23, 74, 115, 0.94); border-radius: 5px; font-size: 0.82rem; font-weight: 600; transition: background-color 0.2s ease; } .prisma-location-map a:hover .prisma-map-action { background: var(--prisma-orange); } /* INDICAZIONI */ .prisma-directions { margin-top: 3rem; } .prisma-directions-heading { margin-bottom: 1.5rem; } .prisma-directions-heading h2 { margin: 0; color: var(--prisma-blue); font-size: 1.65rem; font-weight: 500; } /* FERRARA / MODENA */ .prisma-directions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .prisma-direction-card { padding: 1.4rem 1.5rem; background: var(--prisma-light); border-top: 3px solid var(--prisma-blue); } .prisma-direction-from { margin-bottom: 0.7rem; color: var(--prisma-blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; } .prisma-direction-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; } .prisma-direction-distance { margin-top: 0.9rem; color: var(--prisma-orange); font-size: 0.82rem; font-weight: 700; } /* AUTOSTRADE */ .prisma-motorway { margin-top: 1.2rem; padding: 1.5rem; border: 1px solid var(--prisma-line); } .prisma-motorway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; } .prisma-motorway-grid > div { padding-top: 0.9rem; border-top: 1px solid var(--prisma-line); } .prisma-motorway-grid strong { color: var(--prisma-blue); font-size: 0.9rem; } .prisma-motorway-grid p { margin: 0.45rem 0 0; color: var(--prisma-text); font-size: 0.86rem; line-height: 1.55; } /* RESPONSIVE */ @media (max-width: 800px) { .prisma-directions-grid, .prisma-motorway-grid { grid-template-columns: 1fr; } .prisma-location-map { margin-bottom: 2.3rem; } } @media (max-width: 600px) { .prisma-location-header h1 { font-size: 2rem; } .prisma-location-address { align-items: flex-start; flex-direction: column; } .prisma-map-action { right: 0.7rem; bottom: 0.7rem; } .prisma-direction-card, .prisma-motorway { padding: 1.2rem; } } /* ========================================================= PRISMA - FOTO SEDE ========================================================= */ .prisma-building { display: grid; grid-template-columns: 42% 1fr; align-items: stretch; width: 100%; margin: 2.2rem 0 3rem; overflow: hidden; background: #f4f7f9; border: 1px solid #dce5ea; border-radius: 7px; } .prisma-building-image { min-height: 260px; } .prisma-building-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .prisma-building-text { display: flex; flex-direction: column; justify-content: center; padding: 2rem 2.2rem; } .prisma-building-text .prisma-location-label { margin-bottom: 0.55rem; } .prisma-building-text h3 { margin: 0 0 0.8rem; color: #174a73; font-size: 1.35rem; font-weight: 600; line-height: 1.3; } .prisma-building-text p { margin: 0; color: #4f565b; font-size: 0.9rem; line-height: 1.6; } /* RESPONSIVE */ @media (max-width: 700px) { .prisma-building { grid-template-columns: 1fr; max-width: 100%; } .prisma-building-image { min-height: 0; } .prisma-building-image img { height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .prisma-building-text { padding: 1.4rem; } } /******************* PRIVACY E COOKIES ***********************/ /* ========================================================= PRISMA - PAGINE LEGALI Cookie Policy / Privacy Policy ========================================================= */ .prisma-legal { width: 100%; max-width: 950px; margin: 0; color: #4f565b; font-size: 0.92rem; line-height: 1.65; text-align: justify; } /* ETICHETTA */ .prisma-legal-label { margin-bottom: 0.55rem; color: #f28c00; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } /* TITOLO PRINCIPALE */ .prisma-legal h1 { margin: 0 0 1.8rem; padding-bottom: 1rem; color: #174a73; font-size: clamp(1.8rem, 2.5vw, 2.3rem); font-weight: 500; line-height: 1.2; border-bottom: 1px solid #dce5ea; text-align: left; } /* TITOLI DELLE SEZIONI */ .prisma-legal h2 { margin: 2rem 0 0.65rem; color: #174a73; font-size: 1.08rem; font-weight: 600; line-height: 1.35; text-align: left; } /* EVENTUALI TITOLI MINORI */ .prisma-legal h3 { margin: 1.5rem 0 0.5rem; color: #174a73; font-size: 0.96rem; font-weight: 600; text-align: left; } /* TESTO */ .prisma-legal p { margin: 0 0 0.9rem; line-height: 1.65; text-align: justify; } .prisma-legal strong { color: #36444c; } /* ELENCHI */ .prisma-legal ul, .prisma-legal ol { margin: 0.7rem 0 1.2rem; padding-left: 1.5rem; } .prisma-legal li { margin-bottom: 0.45rem; line-height: 1.6; } /* LINK */ .prisma-legal a { color: #174a73; text-decoration: underline; text-decoration-color: #b9cbd5; text-underline-offset: 2px; } .prisma-legal a:hover { color: #f28c00; text-decoration-color: #f28c00; } /* MOBILE */ @media (max-width: 600px) { .prisma-legal { max-width: 100%; font-size: 0.9rem; } .prisma-legal h1 { font-size: 1.8rem; margin-bottom: 1.4rem; } .prisma-legal h2 { margin-top: 1.7rem; } .prisma-legal p { text-align: left; } } /******************** FAQ *******************************************/ /* ========================================================= SABIK - FAQ ========================================================= */ .sabik-faq { --sabik-blue: #174a73; --sabik-orange: #f28c00; --sabik-text: #4f565b; --sabik-light: #f4f7f9; --sabik-line: #dce5ea; --sabik-white: #ffffff; width: 100%; margin: 0; color: var(--sabik-text); } /* TESTATA */ .sabik-faq-header { max-width: 900px; margin-bottom: 1rem; } .sabik-faq-label { margin-bottom: 0.55rem; color: var(--sabik-orange); font-size: 1rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .sabik-faq-header h1 { margin: 0 0 0.9rem; color: var(--sabik-blue); font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 500; line-height: 1.15; } .sabik-faq-header p { max-width: 760px; margin: 0; color: var(--sabik-text); font-size: 1rem; line-height: 1.65; } /* ========================================================= INDICE DOMANDE ========================================================= */ .sabik-faq-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-bottom: 2rem; border-top: 1px solid var(--sabik-line); } .sabik-faq-index > a { display: grid; grid-template-columns: 36px 1fr 20px; gap: 0.7rem; align-items: center; min-height: 30px; padding: 0.75rem 0.3rem; color: var(--sabik-text); text-decoration: none; border-bottom: 1px solid var(--sabik-line); transition: color 0.2s ease, background-color 0.2s ease; } .sabik-faq-index > a:hover { color: var(--sabik-blue); background: var(--sabik-light); } .sabik-faq-number { color: #9bafb9; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; } .sabik-faq-question { font-size: 0.91rem; font-weight: 500; line-height: 1.4; } .sabik-faq-arrow { color: var(--sabik-orange); font-size: 1rem; font-weight: 700; text-align: right; } /* ========================================================= RISPOSTE ========================================================= */ .sabik-faq-answers { width: 98%; } .sabik-faq-answer { position: relative; padding: .9rem 2.2rem 1.15rem; border-top: 1px solid var(--sabik-line); scroll-margin-top: 30px; /* evita che il titolo finisca troppo in alto quando si arriva tramite ancora */ } .sabik-faq-answer:nth-child(odd) { background: var(--sabik-light); } .sabik-faq-answer-number { margin-bottom: 0.25rem; color: var(--sabik-orange); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-faq-answer h2 { max-width: 950px; margin: 0 0 0.55rem; color: var(--sabik-blue); font-size: 1.15rem; font-weight: 600; line-height: 1.35; } .sabik-faq-answer p { max-width: 1050px; margin: 0 0 0.55rem; color: var(--sabik-text); font-size: 0.91rem; line-height: 1.55; } .sabik-faq-back { display: inline-block; color: #7b8e98; font-size: 0.76rem; font-weight: 600; text-decoration: none; } .sabik-faq-back:hover { color: var(--sabik-orange); } /* ultima risposta */ .sabik-faq-answer:last-child { border-bottom: 1px solid var(--sabik-line); } /* ========================================================= SCORRIMENTO ========================================================= */ html { scroll-behavior: smooth; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 800px) { .sabik-faq-index { grid-template-columns: 1fr; gap: 0; } .sabik-faq-answer { padding: 1.7rem 1.5rem; } } @media (max-width: 600px) { .sabik-faq-header h1 { font-size: 2rem; } .sabik-faq-index { margin-bottom: 3rem; } .sabik-faq-index > a { grid-template-columns: 30px 1fr 18px; min-height: 60px; } .sabik-faq-question { font-size: 0.87rem; } .sabik-faq-answer { padding: 1.5rem 1.1rem; } .sabik-faq-answer h2 { font-size: 1.05rem; } } /**************** OFFERTE ******************************/ /******************** OFFERTE SABIK *******************************/ /* ========================================================= SABIK - OFFERTE ========================================================= */ .sabik-offers { --offer-blue: #07345d; --offer-orange: #f57c00; --offer-text: #4f565b; --offer-light: #f4f7f9; --offer-line: #dce5ea; --offer-white: #ffffff; width: 100%; margin: 0; color: var(--offer-text); } /* ========================================================= BANNER ========================================================= */ .sabik-offers-hero { width: 100%; margin: 0; /*text-align: left;*/ } .sabik-offers-hero img { display: block; width: 100%; height: auto; /*max-width: 750px;*/ margin: 0; border-radius: 7px 7px 0 0; } /* ========================================================= SCADENZA ========================================================= */ .sabik-offers-deadline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0; padding: 0.85rem 1.2rem; box-sizing: border-box; color: #ffffff; background: var(--offer-blue); border-left: 5px solid var(--offer-orange); border-radius: 0 0 7px 7px; } .sabik-offers-deadline span { color: #c9d9e5; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; } .sabik-offers-deadline strong { font-size: 0.95rem; font-weight: 600; } /* PROMEMORIA SCADENZA OFFERTE */ .sabik-offers-deadline-reminder { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 24px; padding: 5px 18px; background: #fff5e9; border-left: 4px solid #f28c28; border-radius: 4px; color: #f57c00; font-size: 14px; } .sabik-offers-deadline-reminder span { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #f57c00; } .sabik-offers-deadline-reminder strong { font-size: 15px; font-weight: 700; color: #f57c00; } @media (max-width: 600px) { .sabik-offers-deadline-reminder { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ========================================================= INTRODUZIONE ========================================================= */ .sabik-offers-header { max-width: 900px; padding: 2.5rem 0 1rem; } .sabik-offers-label { margin-bottom: 0.5rem; color: var(--offer-orange); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; } .sabik-offers-header h1 { margin: 0 0 0.9rem; color: var(--offer-blue); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 500; line-height: 1.2; } .sabik-offers-header p { max-width: 800px; margin: 0 0 0.7rem; font-size: 0.94rem; line-height: 1.65; } .sabik-offers-vat { color: #7b8e98; font-size: 0.95rem !important; } /* ========================================================= SEZIONI ========================================================= */ .sabik-offers-section { position: relative; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 2px solid #cbd8df; } /* Riduce lo spazio solo prima della prima sezione offerte */ .sabik-offers-header + .sabik-offers-section { margin-top: 0.5rem; } .sabik-offers-section::before { content: ""; position: absolute; top: -2px; left: 0; width: 90px; height: 3px; background: var(--offer-orange); } .sabik-offers-section-heading { margin-bottom: .8rem; } .sabik-offers-section-label { margin-bottom: 0.35rem; color: var(--offer-orange); font-size: 1rem; font-weight: 700; letter-spacing: 0.09em; } .sabik-offers-section-heading h2 { margin: 0; color: var(--offer-blue); font-size: 1.55rem; font-weight: 500; } /* ========================================================= GRIGLIA OFFERTE ========================================================= */ .sabik-offers-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .sabik-offers-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ========================================================= CARD ========================================================= */ .sabik-offer-card { display: grid; grid-template-columns: 145px 1fr; min-width: 0; overflow: hidden; background: var(--offer-white); border: 1px solid var(--offer-line); border-radius: 7px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .sabik-offer-card:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(20, 50, 70, 0.08); } /* IMMAGINE PRODOTTO */ .sabik-offer-image { display: flex; align-items: center; justify-content: center; padding: 1rem; background: #f7f9fa; border-right: 1px solid var(--offer-line); } .sabik-offer-image img { display: block; max-width: 100%; max-height: 210px; width: auto; height: auto; } /* CONTENUTO */ .sabik-offer-content { padding: 1.3rem 1.4rem; } .sabik-offer-version { margin-bottom: 0.15rem; color: #8a9ba5; font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-offer-card h3 { margin: 0 0 0.65rem; color: var(--offer-blue); font-size: 1.35rem; font-weight: 600; } .sabik-offer-description { min-height: 42px; margin: 0 0 1rem; color: var(--offer-text); font-size: 0.84rem; line-height: 1.5; } /* ========================================================= PREZZO ========================================================= */ .sabik-offer-price { padding-top: 0.9rem; border-top: 1px solid var(--offer-line); } .sabik-offer-old { color: #7b8e98; font-size: 0.9rem; } .sabik-offer-old del { margin-left: 0.3rem; } .sabik-offer-promo { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.3rem; } .sabik-offer-promo span { color: var(--offer-orange); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; } .sabik-offer-promo strong { color: var(--offer-blue); font-size: 1.65rem; font-weight: 700; } .sabik-offer-saving { margin-top: 0.1rem; color: var(--offer-orange); font-size: 0.9rem; font-weight: 600; } /* ========================================================= MODULO ORDINE ========================================================= */ .sabik-offer-order { display: inline-block; margin-top: 1rem; padding: 0.6rem 0.9rem; color: #ffffff; background: var(--offer-blue); border-radius: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: background-color 0.2s ease; } .sabik-offer-order:hover { color: #ffffff; background: var(--offer-orange); } /* ========================================================= VERSIONE FULL ========================================================= */ .sabik-offers-full { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--offer-light); border-left: 3px solid var(--offer-blue); } /* ========================================================= VERSIONE FULL ========================================================= */ .sabik-offers-full { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--offer-light); border-left: 3px solid var(--offer-blue); } /* BOTTONE RICHIESTA PREVENTIVO */ .sabik-full-quote { display: inline-block; flex: 0 0 auto; padding: 0.55rem 0.8rem; color: #ffffff; background: var(--offer-blue); border-radius: 4px; font-size: 0.76rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease; } .sabik-full-quote:hover { color: #ffffff; background: var(--offer-orange); } /* Pagina OFFERTE - avvicina contenuto all'header */ body.itemid-122 .site-grid { margin-top: -15px; } /* Pagina OFFERTE - evidenzia Richiedi preventivo */ body.itemid-122 .sidebar-right .mod-menu li.item-276 > a { color: #f28c00; font-weight: 700; background: #f3f7fa; border-left: 3px solid #f28c00; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1000px) { .sabik-offers-grid-two { grid-template-columns: 1fr; } } @media (max-width: 650px) { .sabik-offers-deadline { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .sabik-offer-card { grid-template-columns: 110px 1fr; } .sabik-offer-image { padding: 0.7rem; } .sabik-offer-content { padding: 1.1rem; } .sabik-offers-full { align-items: flex-start; flex-direction: column; gap: 0.5rem; } .sabik-offers-full p { text-align: left; } } @media (max-width: 480px) { .sabik-offer-card { grid-template-columns: 1fr; } .sabik-offer-image { border-right: 0; border-bottom: 1px solid var(--offer-line); } .sabik-offer-image img { max-height: 180px; } } /******************* CONTRATTI ******************/ /* ========================================================= PAGINA CONTRATTI SABIK ========================================================= */ .sabik-contracts { --contracts-blue: #174a73; --contracts-orange: #f28c00; --contracts-text: #4f565b; --contracts-light: #f3f7fa; --contracts-line: #dce5ea; --contracts-white: #ffffff; width: 100%; color: var(--contracts-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-contracts-header { margin-bottom: 2.8rem; } .sabik-contracts-label, .sabik-contracts-section-label { margin-bottom: 0.35rem; color: var(--contracts-orange); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sabik-contracts-header h1 { margin: 0 0 0.8rem; color: var(--contracts-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-contracts-intro { max-width: 850px; margin: 0; color: var(--contracts-text); font-size: 0.98rem; line-height: 1.65; text-align: justify; } /* ========================================================= SEZIONI ========================================================= */ .sabik-contracts-section { margin-bottom: 3rem; } .sabik-contracts-section h2, .sabik-maintenance h2 { margin: 0 0 0.75rem; color: var(--contracts-blue); font-size: 1.45rem; font-weight: 600; line-height: 1.25; } .sabik-contracts-section > p { margin: 0 0 1.6rem; color: var(--contracts-text); font-size: 1rem; line-height: 1.65; text-align: justify; } /* ========================================================= TIMELINE SVILUPPO ========================================================= */ .sabik-development { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; margin-top: 1.7rem; } .sabik-development-step { position: relative; min-width: 0; padding: 1.15rem 1rem; background: var(--contracts-light); border-top: 3px solid var(--contracts-blue); } .sabik-development-release { background: #fff8ef; border-top-color: var(--contracts-orange); } .sabik-development-number { margin-bottom: 0.55rem; color: var(--contracts-orange); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-development-content strong { display: block; margin-bottom: 0.35rem; color: var(--contracts-blue); font-size: 0.9rem; font-weight: 700; } .sabik-development-content span { display: block; color: #5b686f; font-size: 0.8rem; line-height: 1.5; } .sabik-development-arrow { display: flex; align-items: center; justify-content: center; width: 2rem; color: var(--contracts-orange); font-size: 1.15rem; font-weight: 700; } /* ========================================================= SABIK SEMPRE AGGIORNATO ========================================================= */ .sabik-maintenance { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr); gap: 1.5rem; align-items: stretch; margin: 0 0 3rem; padding: 1.5rem; background: var(--contracts-light); border-left: 4px solid var(--contracts-orange); } .sabik-maintenance-content p { margin: 0; color: var(--contracts-text); font-size: 0.92rem; line-height: 1.65; text-align: justify; } .sabik-maintenance-highlight { display: flex; flex-direction: column; justify-content: center; padding: 1.1rem 1.2rem; background: var(--contracts-white); border: 1px solid var(--contracts-line); } .sabik-maintenance-highlight strong { display: block; margin-bottom: 0.4rem; color: var(--contracts-blue); font-size: 0.9rem; font-weight: 700; } .sabik-maintenance-highlight span { color: #64747c; font-size: 0.8rem; line-height: 1.5; } /* ========================================================= INTRODUZIONE CONTRATTI ========================================================= */ .sabik-contract-types-intro { max-width: 820px; } /* ========================================================= GRIGLIA CONTRATTI ========================================================= */ .sabik-contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .sabik-contract-card { overflow: hidden; background: var(--contracts-white); border: 1px solid var(--contracts-line); border-top: 4px solid var(--contracts-blue); border-radius: 6px; } .sabik-contract-card-premium { border-top-color: var(--contracts-orange); } /* ========================================================= TESTATA CARD ========================================================= */ .sabik-contract-card-top { padding: 1.25rem 1.3rem 1.15rem; background: var(--contracts-light); border-bottom: 1px solid var(--contracts-line); } .sabik-contract-card-premium .sabik-contract-card-top { background: #fff8ef; } .sabik-contract-card-top > span { display: block; margin-bottom: 0.25rem; color: var(--contracts-orange); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-contract-card-top h3 { margin: 0 0 0.55rem; color: var(--contracts-blue); font-size: 1.35rem; font-weight: 600; } .sabik-contract-card-top p { margin: 0; color: #5b686f; font-size: 0.95rem; line-height: 1.6; text-align: justify; } /* ========================================================= SERVIZI COMPRESI ========================================================= */ .sabik-contract-features { padding: 0.3rem 1.3rem 0.6rem; } .sabik-contract-feature { display: grid; grid-template-columns: 1.65rem minmax(0, 1fr); gap: 0.65rem; padding: 0.95rem 0; border-bottom: 1px solid var(--contracts-line); } .sabik-contract-feature:last-child { border-bottom: 0; } .sabik-contract-check { display: flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; margin-top: 0.05rem; color: #ffffff; background: var(--contracts-blue); border-radius: 50%; font-size: 0.72rem; font-weight: 700; } .sabik-contract-feature > div strong { display: block; margin-bottom: 0.18rem; color: var(--contracts-blue); font-size: 0.85rem; font-weight: 700; } .sabik-contract-feature > div span { display: block; color: #69777e; font-size: 0.88rem; line-height: 1.55; } /* ========================================================= ELEMENTO PLUS GOLD / PLATINUM ========================================================= */ .sabik-contract-feature-plus { margin: 0.35rem -0.55rem 0; padding: 0.9rem 0.55rem; background: #fff8ef; border-bottom: 0; } .sabik-contract-feature-plus .sabik-contract-check { color: #ffffff; background: var(--contracts-orange); } .sabik-contract-feature-plus > div strong { color: var(--contracts-orange); } /* ========================================================= SERVIZI E OPZIONI ========================================================= */ .sabik-contract-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.3rem; } .sabik-contract-option { padding: 1.15rem 1.25rem; background: var(--contracts-light); border-left: 3px solid var(--contracts-blue); } .sabik-contract-option-title { margin-bottom: 0.4rem; color: var(--contracts-blue); font-size: 0.9rem; font-weight: 700; } .sabik-contract-option p { margin: 0; color: #5f6d74; font-size: 0.82rem; line-height: 1.55; text-align: justify; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .sabik-development { grid-template-columns: 1fr; gap: 0; } .sabik-development-arrow { width: auto; height: 1.7rem; transform: rotate(90deg); } } @media (max-width: 700px) { .sabik-contracts-header h1 { font-size: 1.65rem; } .sabik-maintenance, .sabik-contract-grid, .sabik-contract-options { grid-template-columns: 1fr; } .sabik-maintenance { padding: 1.2rem; } } /****************** CORSI COLLETTIVI **********************/ /* ========================================================= PAGINA CORSI COLLETTIVI SABIK ========================================================= */ .sabik-training { --training-blue: #174a73; --training-orange: #f28c00; --training-text: #4f565b; --training-light: #f3f7fa; --training-line: #dce5ea; --training-white: #ffffff; width: 100%; color: var(--training-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-training-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; } .sabik-training-heading { flex: 1 1 auto; min-width: 0; } .sabik-training-label, .sabik-training-section-label { margin-bottom: 0.35rem; color: var(--training-orange); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sabik-training-header h1 { margin: 0 0 0.8rem; color: var(--training-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-training-intro { margin: 0; color: var(--training-text); font-size: 1rem; line-height: 1.65; text-align: justify; } /* ========================================================= LOGO FORMAZIONE ========================================================= */ .sabik-training-brand { position: relative; flex: 0 0 300px; max-width: 300px; } .sabik-training-brand img { display: block; width: 100%; height: auto; } .sabik-training-year { position: absolute; right: 4%; bottom: 8%; color: var(--training-orange); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.035em; line-height: 1; } /* ========================================================= ACCESSO AI CORSI ========================================================= */ .sabik-training-access { margin-bottom: 2.7rem; padding: 1rem 1.2rem; background: var(--training-light); border-left: 4px solid var(--training-orange); } .sabik-training-access-title { margin-bottom: 0.3rem; color: var(--training-blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; } .sabik-training-access p { margin: 0; color: var(--training-text); font-size: 0.92rem; line-height: 1.55; } /* ========================================================= SEZIONE CALENDARIO ========================================================= */ .sabik-training-calendar-section { margin-bottom: 3.2rem; } .sabik-training-calendar-section h2, .sabik-training-program > h2 { margin: 0 0 0.7rem; color: var(--training-blue); font-size: 1.45rem; font-weight: 600; line-height: 1.25; } .sabik-training-calendar-section > p, .sabik-training-program-intro { margin: 0 0 1.5rem; color: var(--training-text); font-size: 1rem; line-height: 1.65; text-align: justify; } /* ========================================================= CALENDARIO ========================================================= */ .sabik-calendar { overflow: hidden; max-width: 720px; background: var(--training-white); border: 1px solid var(--training-line); border-radius: 7px; } /* TESTATA */ .sabik-calendar-header { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; min-height: 3.6rem; background: var(--training-blue); } .sabik-calendar-month { color: #ffffff; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; } .sabik-calendar-nav { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; color: #ffffff; background: transparent; border: 0; font-family: Arial, sans-serif; font-size: 1.6rem; line-height: 1; cursor: pointer; } .sabik-calendar-nav:hover { color: var(--training-orange); background: rgba(255, 255, 255, 0.06); } /* GIORNI DELLA SETTIMANA */ .sabik-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--training-light); border-bottom: 1px solid var(--training-line); } .sabik-calendar-weekdays b { display: block; padding: 0.65rem 0.2rem; color: var(--training-blue); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; } /* GRIGLIA GIORNI */ .sabik-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 270px; } /* Queste classi verranno utilizzate dal JavaScript */ .sabik-calendar-day { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px; color: #526169; background: #ffffff; border-right: 1px solid #edf1f3; border-bottom: 1px solid #edf1f3; font-size: 0.85rem; } .sabik-calendar-day:nth-child(7n) { border-right: 0; } .sabik-calendar-day.is-empty { background: #fafcfd; } .sabik-calendar-day.has-webinar { color: var(--training-blue); background: #fff8ef; font-weight: 700; cursor: pointer; } .sabik-calendar-day.has-webinar::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 5px; height: 5px; background: var(--training-orange); border-radius: 50%; transform: translateX(-50%); } .sabik-calendar-day.has-webinar:hover { background: #fff0dc; } .sabik-calendar-day.is-selected { color: #ffffff; background: var(--training-orange); } .sabik-calendar-day.is-selected::after { background: #ffffff; } /* LEGENDA */ .sabik-calendar-legend { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; color: #68777e; background: var(--training-light); border-top: 1px solid var(--training-line); font-size: 0.76rem; } .sabik-calendar-dot { display: inline-block; width: 7px; height: 7px; background: var(--training-orange); border-radius: 50%; } /* ========================================================= DETTAGLIO DEL GIORNO SELEZIONATO ========================================================= */ .sabik-calendar-detail { max-width: 720px; margin-top: 0.8rem; } .sabik-calendar-detail-empty { padding: 0.9rem 1rem; color: #74838a; background: var(--training-light); border-left: 3px solid var(--training-line); font-size: 0.84rem; line-height: 1.5; } /* Queste classi serviranno al JavaScript */ .sabik-calendar-event { padding: 1rem 1.15rem; background: #fff8ef; border-left: 4px solid var(--training-orange); } .sabik-calendar-event-label { margin-bottom: 0.25rem; color: var(--training-orange); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-calendar-event h3 { margin: 0 0 0.4rem; color: var(--training-blue); font-size: 1rem; font-weight: 700; } .sabik-calendar-event p { margin: 0 0 0.55rem; color: var(--training-text); font-size: 0.86rem; line-height: 1.55; } .sabik-calendar button.sabik-calendar-day { padding: 0; font-family: inherit; border-top: 0; border-left: 0; } .sabik-calendar-nav:disabled { opacity: 0.3; cursor: default; } .sabik-calendar-nav:disabled:hover { color: #ffffff; background: transparent; } /* ========================================================= PROGRAMMA - VERSIONE COMPATTA ========================================================= */ .sabik-training-program { margin-bottom: 3rem; } /* ========================================================= MESE ========================================================= */ .sabik-training-month { margin-top: 1.4rem; } /* ========================================================= INTESTAZIONI MESI ALTERNATE ========================================================= */ .sabik-training-month > h3 { margin: 0; padding: 0.55rem 0.85rem; color: var(--training-blue); background: var(--training-light); border-left: 4px solid var(--training-blue); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; } .sabik-training-month-blue > h3 { color: var(--training-blue); border-left: 4px solid var(--training-blue); } .sabik-training-month-orange > h3 { color: var(--training-orange); border-left-color: var(--training-orange); } .sabik-training-month > h3 span { color: inherit; opacity: 0.75; font-size: 0.82rem; font-weight: 600; } /* ========================================================= SINGOLO WEBINAR ========================================================= */ .sabik-training-lesson { display: grid; grid-template-columns: 58px minmax(0, 1fr); border-bottom: 1px solid var(--training-line); } .sabik-training-date { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0.72rem 0.3rem; background: #fafcfd; } .sabik-training-date strong { display: block; color: var(--training-blue); font-size: 1.18rem; font-weight: 600; line-height: 1; } .sabik-training-date span { display: block; margin-top: 0.18rem; color: var(--training-orange); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.06em; } /* CONTENUTO LEZIONE */ .sabik-training-lesson-content { padding: 0.65rem 0.85rem 0.7rem; } .sabik-training-lesson-number { margin-bottom: 0.1rem; color: var(--training-orange); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-training-lesson-content h4 { margin: 0 0 0.18rem; color: var(--training-blue); font-size: 1.05rem; font-weight: 700; } .sabik-training-lesson-content p { margin: 0 0 0.4rem; color: var(--training-text); font-size: 0.92rem; line-height: 1.45; text-align: justify; } /* ========================================================= ORARIO + VERSIONI ========================================================= */ .sabik-training-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .sabik-training-meta strong { margin-right: 0.35rem; color: var(--training-blue); font-size: 0.88rem; font-weight: 700; } .sabik-training-version { display: inline-flex; align-items: center; justify-content: center; padding: 0.18rem 0.48rem; color: var(--training-blue); background: var(--training-light); border: 1px solid var(--training-line); border-radius: 3px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; } /* ========================================================= CORSI SPECIFICI SABIK SMALL ========================================================= */ .sabik-training-lesson-small { background: #fffaf3; } .sabik-training-lesson-small .sabik-training-date { background: #fff4e5; } .sabik-training-lesson-small .sabik-training-lesson-number { color: var(--training-orange); } /* ========================================================= DATE DA CALENDARIZZARE ========================================================= */ .sabik-training-coming { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 1rem; padding: 1rem; background: #fff8ef; border-bottom: 1px solid var(--training-line); } .sabik-training-coming-label { align-self: start; padding: 0.3rem 0.45rem; color: #ffffff; background: var(--training-orange); border-radius: 3px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-align: center; } .sabik-training-coming h4 { margin: 0 0 0.3rem; color: var(--training-blue); font-size: 1rem; } .sabik-training-coming p { margin: 0 0 0.4rem; color: var(--training-text); font-size: 0.88rem; line-height: 1.5; } .sabik-training-coming strong { color: var(--training-orange); font-size: 0.78rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 850px) { .sabik-training-header { align-items: flex-start; flex-direction: column; gap: 1.3rem; } .sabik-training-brand { width: 100%; max-width: 360px; flex-basis: auto; } } @media (max-width: 600px) { .sabik-training-header h1 { font-size: 1.65rem; } .sabik-calendar-day { min-height: 46px; font-size: 0.78rem; } .sabik-training-lesson { grid-template-columns: 55px minmax(0, 1fr); } .sabik-training-date strong { font-size: 1.15rem; } .sabik-training-lesson-content { padding-right: 0.6rem; } .sabik-training-coming { grid-template-columns: 1fr; } .sabik-training-coming-label { justify-self: start; } } /**************** PAGINA TELEASSISTENZA *****************/ /* ========================================================= PAGINA TELE-ASSISTENZA SABIK ========================================================= */ .sabik-remote { --remote-blue: #174a73; --remote-orange: #f28c00; --remote-text: #4f565b; --remote-light: #f3f7fa; --remote-line: #dce5ea; --remote-white: #ffffff; width: 100%; color: var(--remote-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-remote-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; } .sabik-remote-heading { flex: 1 1 auto; min-width: 0; } .sabik-remote-label, .sabik-remote-section-label { margin-bottom: .35rem; color: var(--remote-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-remote-header h1 { margin: 0 0 .8rem; color: var(--remote-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-remote-intro { max-width: 720px; margin: 0; color: var(--remote-text); font-size: 1rem; line-height: 1.65; } .sabik-remote-brand { flex: 0 0 260px; max-width: 260px; } .sabik-remote-brand img { display: block; width: 100%; height: auto; } /* ========================================================= BOX RICHIESTA ASSISTENZA ========================================================= */ .sabik-remote-action { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: stretch; margin-bottom: 3rem; padding: 0; background: var(--remote-light); border-left: 5px solid var(--remote-orange); } .sabik-remote-action-main { min-width: 0; padding: 1.7rem 1.8rem; } .sabik-remote-teamviewer { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: 1.7rem 1.8rem; border-top: 0; border-left: 1px solid var(--remote-line); } .sabik-remote-action-label { margin-bottom: .4rem; color: var(--remote-orange); font-size: .72rem; font-weight: 700; letter-spacing: .07em; } .sabik-remote-action h2 { margin: 0 0 .55rem; color: var(--remote-blue); font-size: 1.45rem; font-weight: 600; } .sabik-remote-action p { max-width: 760px; margin: 0 0 1.25rem; font-size: .96rem; line-height: 1.6; } .sabik-remote-button { display: inline-block; padding: .72rem 1.2rem; color: #fff !important; background: var(--remote-orange); border-radius: 4px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; transition: background .2s ease, transform .2s ease; } .sabik-remote-button:hover { color: #fff !important; background: var(--remote-blue); transform: translateY(-1px); } .sabik-remote-contract { margin-top: .8rem; color: #68777e; font-size: .78rem; } /* ========================================================= TEAMVIEWER NEL BOX TELE-ASSISTENZA ========================================================= */ .sabik-remote-teamviewer { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.8rem; border-left: 1px solid var(--remote-line); } .sabik-remote-teamviewer-brand { margin-bottom: 1rem; } .sabik-remote-teamviewer-brand img { display: block; width: auto; max-width: 190px; max-height: 48px; } .sabik-remote-teamviewer strong { display: block; margin-bottom: .3rem; color: var(--remote-blue); font-size: .95rem; font-weight: 700; } .sabik-remote-teamviewer span { display: block; color: #68777e; font-size: .82rem; line-height: 1.5; } /* ========================================================= PROCEDURA ========================================================= */ .sabik-remote-process { margin-bottom: 3rem; } .sabik-remote-process > h2, .sabik-remote-info > h2 { margin: 0 0 1.25rem; color: var(--remote-blue); font-size: 1.45rem; font-weight: 600; } .sabik-remote-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .sabik-remote-step { display: flex; gap: .85rem; padding: 1.1rem; background: #fff; border: 1px solid var(--remote-line); border-radius: 6px; } .sabik-remote-step-number { display: flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; color: #fff; background: var(--remote-orange); border-radius: 50%; font-size: .9rem; font-weight: 700; } .sabik-remote-step h3 { margin: .05rem 0 .3rem; color: var(--remote-blue); font-size: .95rem; font-weight: 700; } .sabik-remote-step p { margin: 0; font-size: .84rem; line-height: 1.5; } /* ========================================================= INFORMAZIONI ========================================================= */ .sabik-remote-info { margin-bottom: 2.5rem; } .sabik-remote-info > h2 { margin-bottom: .8rem; } .sabik-remote-info p { max-width: 900px; margin: 0 0 .8rem; font-size: .95rem; line-height: 1.65; text-align: justify; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 850px) { .sabik-remote-header { align-items: flex-start; flex-direction: column; gap: 1.3rem; } .sabik-remote-brand { width: 100%; max-width: 300px; flex-basis: auto; } .sabik-remote-steps { grid-template-columns: 1fr; } .sabik-remote-action { grid-template-columns: 1fr !important; } .sabik-remote-teamviewer { border-top: 1px solid var(--remote-line); border-left: 0; } } @media (max-width: 600px) { .sabik-remote-header h1 { font-size: 1.65rem; } .sabik-remote-action { padding: 1.3rem 1.2rem; } } /************************** RICHIEDI DEMO ONLINE ************************/ /* ========================================================= PAGINA RICHIEDI DEMO ONLINE ========================================================= */ .sabik-demo { --demo-blue: #174a73; --demo-orange: #f28c00; --demo-text: #4f565b; --demo-light: #f3f7fa; --demo-line: #dce5ea; --demo-white: #ffffff; width: 100%; color: var(--demo-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-demo-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2.2rem; } .sabik-demo-heading { flex: 1 1 auto; min-width: 0; } .sabik-demo-brand { flex: 0 0 260px; max-width: 260px; } .sabik-demo-brand img { display: block; width: 100%; height: auto; } .sabik-demo-label, .sabik-demo-section-label { margin-bottom: .35rem; color: var(--demo-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-demo-header h1 { margin: 0 0 .8rem; color: var(--demo-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-demo-intro { max-width: 760px; margin: 0; color: var(--demo-text); font-size: 1rem; line-height: 1.65; } /* ========================================================= BOX PRINCIPALE ========================================================= */ .sabik-demo-action { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); margin-bottom: 3rem; background: var(--demo-light); border-left: 5px solid var(--demo-orange); } .sabik-demo-action-main { padding: 1.7rem 1.8rem; } .sabik-demo-action-label { margin-bottom: .4rem; color: var(--demo-orange); font-size: .72rem; font-weight: 700; letter-spacing: .07em; } .sabik-demo-action h2 { margin: 0 0 .55rem; color: var(--demo-blue); font-size: 1.45rem; font-weight: 600; } .sabik-demo-action-main p { max-width: 760px; margin: 0 0 1.25rem; font-size: .96rem; line-height: 1.6; } /* ========================================================= PULSANTE ========================================================= */ .sabik-demo-button { display: inline-block; padding: .72rem 1.2rem; color: #fff !important; background: var(--demo-orange); border-radius: 4px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; transition: background .2s ease, transform .2s ease; } .sabik-demo-button:hover { color: #fff !important; background: var(--demo-blue); transform: translateY(-1px); } .sabik-demo-phone { margin-top: .85rem; color: #68777e; font-size: .8rem; } .sabik-demo-phone strong { margin-left: .25rem; color: var(--demo-blue); } /* ========================================================= TEAMVIEWER ========================================================= */ .sabik-demo-teamviewer { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.8rem; border-left: 1px solid var(--demo-line); } .sabik-demo-teamviewer-brand { margin-bottom: 1rem; } .sabik-demo-teamviewer-brand img { display: block; width: auto; max-width: 190px; max-height: 48px; } .sabik-demo-teamviewer > strong { display: block; margin-bottom: .3rem; color: var(--demo-blue); font-size: .95rem; font-weight: 700; } .sabik-demo-teamviewer > span { display: block; color: #68777e; font-size: .82rem; line-height: 1.5; } /* ========================================================= COME FUNZIONA ========================================================= */ .sabik-demo-process { margin-bottom: 3rem; } .sabik-demo-process > h2, .sabik-demo-info > h2 { margin: 0 0 1.25rem; color: var(--demo-blue); font-size: 1.45rem; font-weight: 600; } .sabik-demo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .sabik-demo-step { display: flex; gap: .85rem; padding: 1.1rem; background: #fff; border: 1px solid var(--demo-line); border-radius: 6px; } .sabik-demo-step-number { display: flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; color: #fff; background: var(--demo-orange); border-radius: 50%; font-size: .9rem; font-weight: 700; } .sabik-demo-step h3 { margin: .05rem 0 .3rem; color: var(--demo-blue); font-size: .95rem; font-weight: 700; } .sabik-demo-step p { margin: 0; font-size: .84rem; line-height: 1.5; } /* ========================================================= PRESENTAZIONE ========================================================= */ .sabik-demo-info { margin-bottom: 2.5rem; } .sabik-demo-info > h2 { margin-bottom: .8rem; } .sabik-demo-info p { max-width: 950px; margin: 0 0 .8rem; font-size: .95rem; line-height: 1.65; } /* ========================================================= CHAT OFFLINE ========================================================= */ .sabik-demo-offline { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; padding: 1.35rem 1.5rem; background: var(--demo-light); border-top: 1px solid var(--demo-line); } .sabik-demo-offline-label { margin-bottom: .3rem; color: var(--demo-orange); font-size: .7rem; font-weight: 700; letter-spacing: .07em; } .sabik-demo-offline h2 { margin: 0 0 .4rem; color: var(--demo-blue); font-size: 1.15rem; font-weight: 600; } .sabik-demo-offline p { max-width: 760px; margin: 0; font-size: .88rem; line-height: 1.55; } .sabik-demo-offline-phone { flex: 0 0 auto; padding-left: 1.5rem; border-left: 1px solid var(--demo-line); text-align: center; } .sabik-demo-offline-phone span { display: block; margin-bottom: .15rem; color: #68777e; font-size: .72rem; } .sabik-demo-offline-phone strong { display: block; color: var(--demo-blue); font-size: 1.15rem; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 850px) { .sabik-demo-action { grid-template-columns: 1fr; } .sabik-demo-teamviewer { border-top: 1px solid var(--demo-line); border-left: 0; } .sabik-demo-steps { grid-template-columns: 1fr; } .sabik-demo-offline { align-items: flex-start; flex-direction: column; gap: 1rem; } .sabik-demo-offline-phone { padding-top: .8rem; padding-left: 0; border-top: 1px solid var(--demo-line); border-left: 0; text-align: left; } .sabik-demo-header { align-items: flex-start; flex-direction: column; gap: 1.3rem; } .sabik-demo-brand { width: 100%; max-width: 300px; flex-basis: auto; } } @media (max-width: 600px) { .sabik-demo-header h1 { font-size: 1.65rem; } .sabik-demo-action-main, .sabik-demo-teamviewer { padding: 1.3rem 1.2rem; } } /************************* REFERENZE ***********************/ /* ========================================================= PAGINA REFERENZE SABIK ========================================================= */ .sabik-references { --ref-blue: #174a73; --ref-orange: #f28c00; --ref-text: #4f565b; --ref-light: #f3f7fa; --ref-line: #dce5ea; --ref-white: #ffffff; width: 100%; color: var(--ref-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-references-header { margin-bottom: 2.8rem; } .sabik-references-label, .sabik-references-section-label { margin-bottom: .35rem; color: var(--ref-orange); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-references-header h1 { margin: 0 0 .8rem; color: var(--ref-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-references-intro { max-width: 850px; margin: 0; color: var(--ref-text); font-size: 1rem; line-height: 1.65; } /* ========================================================= REFERENZE IN EVIDENZA ========================================================= */ .sabik-references-featured { margin-bottom: 3.5rem; } .sabik-references-featured > h2, .sabik-references-all > h2 { margin: 0 0 1.3rem; color: var(--ref-blue); font-size: 1.45rem; font-weight: 600; } .sabik-references-featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .sabik-reference-featured { display: flex; align-items: center; justify-content: center; min-width: 0; height: 145px; padding: 1.35rem 1.5rem; background: var(--ref-white); border: 1px solid var(--ref-line); border-radius: 6px; text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .sabik-reference-featured:hover { border-color: var(--ref-orange); box-shadow: 0 5px 15px rgba(23, 74, 115, .08); transform: translateY(-2px); } .sabik-reference-featured img { display: block; width: auto; max-width: 100%; height: auto; max-height: 95px; object-fit: contain; } /* ========================================================= ALTRE REFERENZE ========================================================= */ .sabik-references-all { margin-bottom: 2rem; } .sabik-references-all > h2 { margin-bottom: .45rem; } .sabik-references-all-intro { margin: 0 0 2rem; color: #68777e; font-size: .9rem; } /* ========================================================= GRUPPI ALFABETICI ========================================================= */ .sabik-reference-group { margin-bottom: 2.4rem; } .sabik-reference-letter { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; color: var(--ref-blue); font-size: .8rem; font-weight: 700; letter-spacing: .08em; } .sabik-reference-letter::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--ref-line); } /* ========================================================= GRIGLIA REFERENZE ========================================================= */ .sabik-reference-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; } .sabik-reference { display: flex; align-items: center; justify-content: center; min-width: 0; height: 68px; padding: .45rem .8rem; background: var(--ref-white); border: 1px solid var(--ref-line); border-radius: 4px; text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .sabik-reference:hover { border-color: var(--ref-orange); box-shadow: 0 4px 12px rgba(23, 74, 115, .07); transform: translateY(-1px); } .sabik-reference img { display: block; width: auto; max-width: 100%; height: auto; max-height: 50px; object-fit: contain; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px) { .sabik-reference-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 850px) { .sabik-references-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sabik-reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .sabik-references-header h1 { font-size: 1.65rem; } .sabik-references-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .sabik-reference-featured { height: 115px; padding: 1rem; } .sabik-reference-featured img { max-height: 75px; } .sabik-reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .sabik-reference { height: 82px; padding: .65rem .8rem; } .sabik-reference img { max-height: 55px; } } /************* TITOLI DELLE SIDEBAR ********************/ /* ========================================================= TITOLI SIDEBAR SABIK ========================================================= */ .sabik-sidebar-title { width: 100%; box-sizing: border-box; margin: 0 0 1rem; padding: .48rem .55rem; color: #174a73; background: #ffffff; border: 1px solid #174a73; border-radius: 4px; font-size: 1rem; font-weight: 700; line-height: 1.15; text-align: center; letter-spacing: .01em; } /**************************** VISUALIZZA VIDEO FULL **********************************/ /* ========================================================= PAGINA VIDEO SABIK ========================================================= */ .sabik-videos { --video-blue: #174a73; --video-orange: #f28c00; --video-text: #4f565b; --video-light: #f3f7fa; --video-line: #dce5ea; --video-white: #ffffff; width: 100%; color: var(--video-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-videos-header { margin-bottom: 2.2rem; } .sabik-videos-label, .sabik-videos-section-label { margin-bottom: .35rem; color: var(--video-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-videos-header h1 { margin: 0 0 .7rem; color: var(--video-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-videos-header p { max-width: 800px; margin: 0; font-size: 1rem; line-height: 1.65; } /* ========================================================= VIDEO IN EVIDENZA ========================================================= */ /* ========================================================= FUNZIONALITÀ IN EVIDENZA ========================================================= */ .sabik-videos-highlights { margin-bottom: 3rem; } .sabik-videos-highlights > h2 { margin: 0 0 1.25rem; color: var(--video-blue); font-size: 1.45rem; font-weight: 600; } .sabik-videos-highlights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem; } /* ========================================================= SINGOLO VIDEO IN EVIDENZA ========================================================= */ .sabik-video-highlight { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-width: 0; overflow: hidden; background: var(--video-light); border-left: 5px solid var(--video-orange); } .sabik-video-highlight-image { min-width: 0; } .sabik-video-highlight-image a { position: relative; display: block; height: 100%; overflow: hidden; } .sabik-video-highlight-image img { display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform .3s ease; } .sabik-video-highlight-image a:hover img { transform: scale(1.025); } /* ========================================================= TESTO VIDEO IN EVIDENZA ========================================================= */ .sabik-video-highlight-content { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; } .sabik-video-featured-label { margin-bottom: .4rem; color: var(--video-orange); font-size: .7rem; font-weight: 700; letter-spacing: .08em; } .sabik-video-highlight-content h3 { margin: 0 0 .6rem; color: var(--video-blue); font-size: 1.15rem; font-weight: 700; line-height: 1.3; } .sabik-video-highlight-content p { margin: 0 0 1.1rem; font-size: .86rem; line-height: 1.55; } /* ========================================================= PULSANTE VIDEO IN EVIDENZA ========================================================= */ .sabik-video-button { align-self: flex-start; display: inline-block; padding: .7rem 1.15rem; color: #fff !important; background: var(--video-blue); border-radius: 4px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; transition: background .2s ease, transform .2s ease; } .sabik-video-button:hover { color: #fff !important; background: var(--video-orange); transform: translateY(-1px); } /* ========================================================= ICONA PLAY ========================================================= */ .sabik-video-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: #fff; background: var(--video-orange); border-radius: 50%; font-size: 1.15rem; line-height: 1; transform: translate(-50%, -50%); transition: background .2s ease, transform .2s ease; pointer-events: none; } .sabik-video-highlight-image a:hover .sabik-video-play, .sabik-video-card:hover .sabik-video-play { background: var(--video-blue); transform: translate(-50%, -50%) scale(1.08); } /* ========================================================= RACCOLTA VIDEO ========================================================= */ .sabik-videos-library { margin-bottom: 2rem; } .sabik-videos-library > h2 { margin: 0 0 1.25rem; color: var(--video-blue); font-size: 1.45rem; font-weight: 600; } .sabik-videos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.9rem; } /* ========================================================= SINGOLA CARD VIDEO ========================================================= */ .sabik-video-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--video-text) !important; background: var(--video-white); border: 1px solid var(--video-line); border-radius: 6px; text-decoration: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .sabik-video-card:hover { color: var(--video-text) !important; border-color: #c5d4dd; box-shadow: 0 5px 16px rgba(23, 74, 115, .10); transform: translateY(-2px); } .sabik-video-card-image { position: relative; overflow: hidden; background: var(--video-light); aspect-ratio: 16 / 9; } .sabik-video-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .sabik-video-card:hover .sabik-video-card-image img { transform: scale(1.025); } .sabik-video-card .sabik-video-play { width: 44px; height: 44px; font-size: .95rem; } /* ========================================================= TESTO CARD ========================================================= */ .sabik-video-card-content { flex: 1 1 auto; padding: .9rem 1rem 1rem; } .sabik-video-card-content h3 { margin: 0 0 .3rem; color: var(--video-blue); font-size: .96rem; font-weight: 700; line-height: 1.3; } .sabik-video-card-content p { margin: 0; color: var(--video-text); font-size: .82rem; line-height: 1.5; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .sabik-videos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sabik-videos-highlights-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .sabik-videos-header h1 { font-size: 1.65rem; } .sabik-videos-grid { grid-template-columns: 1fr; } .sabik-video-card-content { padding: .85rem .9rem .95rem; } .sabik-video-highlight { grid-template-columns: 1fr; } .sabik-video-highlight-image img { height: auto; min-height: 0; aspect-ratio: 16 / 9; } } /************************** VIDEO SMALL *******************************/ /* ========================================================= VIDEO SABIK SMALL ========================================================= */ .sabik-small-video { --small-blue: #174a73; --small-orange: #f28c00; --small-text: #4f565b; --small-light: #f3f7fa; --small-line: #dce5ea; width: 100%; color: var(--small-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-small-video-header { margin-bottom: 2.2rem; } .sabik-small-video-label { margin-bottom: .35rem; color: var(--small-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-small-video-header h1 { margin: 0 0 .7rem; color: var(--small-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-small-video-header p { max-width: 800px; margin: 0; font-size: 1rem; line-height: 1.65; } /* ========================================================= VIDEO PRINCIPALE ========================================================= */ .sabik-small-video-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); max-width: 1050px; margin-bottom: 2.5rem; overflow: hidden; background: var(--small-light); border-left: 5px solid var(--small-orange); } /* ========================================================= IMMAGINE ========================================================= */ .sabik-small-video-image { min-width: 0; } .sabik-small-video-image a { position: relative; display: block; overflow: hidden; } .sabik-small-video-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; } .sabik-small-video-image a:hover img { transform: scale(1.025); } /* ========================================================= PLAY ========================================================= */ .sabik-small-video-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; color: #fff; background: var(--small-orange); border-radius: 50%; font-size: 1.15rem; line-height: 1; transform: translate(-50%, -50%); transition: background .2s ease, transform .2s ease; pointer-events: none; } .sabik-small-video-image a:hover .sabik-small-video-play { background: var(--small-blue); transform: translate(-50%, -50%) scale(1.08); } /* ========================================================= TESTO ========================================================= */ .sabik-small-video-content { display: flex; flex-direction: column; justify-content: center; padding: 2rem; } .sabik-small-video-content-label { margin-bottom: .4rem; color: var(--small-orange); font-size: .72rem; font-weight: 700; letter-spacing: .08em; } .sabik-small-video-content h2 { margin: 0 0 .65rem; color: var(--small-blue); font-size: 1.45rem; font-weight: 600; line-height: 1.25; } .sabik-small-video-content p { margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.6; } /* ========================================================= PULSANTE ========================================================= */ .sabik-small-video-button { align-self: flex-start; display: inline-block; padding: .7rem 1.15rem; color: #fff !important; background: var(--small-orange); border-radius: 4px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-decoration: none !important; transition: background .2s ease, transform .2s ease; } .sabik-small-video-button:hover { color: #fff !important; background: var(--small-blue); transform: translateY(-1px); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 750px) { .sabik-small-video-featured { grid-template-columns: 1fr; } .sabik-small-video-content { padding: 1.5rem; } } @media (max-width: 560px) { .sabik-small-video-header h1 { font-size: 1.65rem; } } /********************************AGGIORNA SABIK *****************************/ /* ========================================================= AGGIORNA SABIK ========================================================= */ .sabik-update { --update-blue: #174a73; --update-orange: #f28c00; --update-text: #4f565b; --update-light: #f3f7fa; --update-line: #dce5ea; --update-white: #ffffff; width: 100%; color: var(--update-text); } /* ========================================================= INTRODUZIONE ========================================================= */ .sabik-update-header { max-width: 850px; padding: 0 0 2rem; } .sabik-update-label { margin-bottom: 0.45rem; color: var(--update-orange); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; } .sabik-update-header h1 { margin: 0 0 0.7rem; color: var(--update-blue); font-size: clamp(1.9rem, 2.7vw, 2.5rem); font-weight: 500; line-height: 1.2; } .sabik-update-header p { margin: 0; font-size: 0.95rem; line-height: 1.6; } /* ========================================================= SEZIONI VERSIONI - IDENTITÀ VISIVA 30 / 29 ========================================================= */ /* Contenitore generale delle due versioni. Il bordo e lo sfondo separano visivamente i download. */ .sabik-update-section { position: relative; margin-top: 2rem; padding: 1.25rem; background: #f1f5f8; border: 1px solid #d4dfe7; border-radius: 10px; } /* Sabik 30: versione corrente, maggior risalto. */ .sabik-update-current { margin-top: 0; background: #edf5fb; border: 2px solid var(--update-blue); box-shadow: 0 8px 22px rgba(23, 74, 115, 0.09); } /* Intestazione a tutta larghezza dentro il riquadro. */ .sabik-update-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1.25rem -1.25rem 1.3rem; padding: 1.1rem 1.4rem; background: #e2eaf0; border-radius: 9px 9px 0 0; } .sabik-update-current .sabik-update-section-heading { background: var(--update-blue); border-radius: 7px 7px 0 0; } .sabik-update-section-label { margin-bottom: 0.25rem; color: #526e82; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; } .sabik-update-section-heading h2 { margin: 0; color: var(--update-blue); font-size: clamp(1.65rem, 2.5vw, 2rem); font-weight: 700; } .sabik-update-current .sabik-update-section-label { color: #ffb650; } .sabik-update-current .sabik-update-section-heading h2 { color: #ffffff; } /* Numero versione: ben visibile, senza cambiare l'HTML. */ .sabik-update-badge { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 66px; height: 66px; color: #ffffff; background: var(--update-orange); border-radius: 12px; font-size: 1.65rem; font-weight: 700; } .sabik-update-badge-old { color: #ffffff; background: #748c9c; } /* Le schede della versione corrente hanno un accento blu. Le schede Sabik 29 rimangono più neutre. */ .sabik-update-current .sabik-update-card { border-top: 4px solid var(--update-blue); } .sabik-update-current .sabik-update-card-version { color: var(--update-orange); } .sabik-update-section:not(.sabik-update-current) .sabik-update-card-version { color: #728796; } /* Navigator mantiene lo stesso comportamento, ma richiama visivamente la versione corrispondente. */ .sabik-update-current .sabik-navigator { background: #ffffff; border-left-color: var(--update-orange); } .sabik-update-section:not(.sabik-update-current) .sabik-navigator { background: #e7edf1; border-left-color: #748c9c; } /* ========================================================= SCHEDE AGGIORNAMENTO ========================================================= */ .sabik-update-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .sabik-update-card { display: flex; flex-direction: column; min-width: 0; padding: 1.4rem; background: var(--update-white); border: 1px solid var(--update-line); border-radius: 7px; } .sabik-update-card-version { margin-bottom: 0.25rem; color: #899aa4; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-update-card h3 { margin: 0 0 0.6rem; color: var(--update-blue); font-size: 1.25rem; font-weight: 600; } .sabik-update-card p { flex-grow: 1; margin: 0 0 1.1rem; font-size: 0.85rem; line-height: 1.55; } .sabik-update-button { align-self: flex-start; display: inline-block; padding: 0.62rem 0.9rem; color: #ffffff; background: var(--update-blue); border-radius: 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; transition: background-color 0.2s ease; } .sabik-update-button:hover { color: #ffffff; background: var(--update-orange); } /* ========================================================= NAVIGATOR ========================================================= */ .sabik-navigator { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 0.9rem 1.1rem; background: var(--update-light); border-left: 3px solid var(--update-blue); } .sabik-navigator-text span { display: block; margin-bottom: 0.15rem; color: var(--update-orange); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-navigator-text { flex: 1 1 auto; min-width: 0; } .sabik-navigator-text p { margin: 0; font-size: 0.88rem; line-height: 1.5; } .sabik-navigator-text p strong { white-space: nowrap; } .sabik-navigator-actions { flex: 0 0 auto; align-items: flex-start; } .sabik-navigator-button { flex: 0 0 auto; display: inline-block; padding: 0.55rem 0.8rem; color: #ffffff; background: var(--update-blue); border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .sabik-navigator-button:hover { color: #ffffff; background: var(--update-orange); } /* ========================================================= AGGIORNAMENTO / UPGRADE ========================================================= */ .sabik-update-info { margin-top: 2rem; padding: 1.4rem 1.5rem; background: #fff8ef; border-left: 4px solid var(--update-orange); } .sabik-update-info-label { margin-bottom: 0.35rem; color: var(--update-orange); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-update-info h2 { margin: 0 0 0.55rem; color: var(--update-blue); font-size: 1.2rem; font-weight: 600; } .sabik-update-info p { margin: 0; font-size: 0.86rem; line-height: 1.55; } /* ========================================================= DRIVER CHIAVE DI PROTEZIONE ========================================================= */ .sabik-driver { margin-top: 2rem; padding-top: 1.8rem; border-top: 2px solid var(--update-line); } .sabik-driver-label { margin-bottom: 0.3rem; color: var(--update-orange); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-driver-heading h2 { margin: 0 0 0.5rem; color: var(--update-blue); font-size: 1.45rem; font-weight: 500; } .sabik-driver-heading p { max-width: 780px; margin: 0 0 1.2rem; font-size: 0.85rem; line-height: 1.55; } .sabik-driver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .sabik-driver-card { padding: 1.2rem; background: var(--update-light); border: 1px solid var(--update-line); border-radius: 6px; } .sabik-driver-type { margin-bottom: 0.25rem; color: #81939d; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-driver-card h3 { margin: 0 0 0.5rem; color: var(--update-blue); font-size: 1.05rem; font-weight: 600; } .sabik-driver-card p { margin: 0 0 0.9rem; font-size: 0.82rem; line-height: 1.5; } .sabik-driver-button { display: inline-block; padding: 0.55rem 0.8rem; color: #ffffff; background: var(--update-blue); border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-decoration: none; } .sabik-driver-button:hover { color: #ffffff; background: var(--update-orange); } /* ========================================================= AZIONI DOWNLOAD / INFO ========================================================= */ .sabik-update-actions, .sabik-navigator-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; } .sabik-update-info-button, .sabik-navigator-info-button { display: inline-block; padding: 0.58rem 0.8rem; color: var(--update-blue); background: #ffffff; border: 1px solid var(--update-blue); border-radius: 4px; font-family: inherit; font-size: 0.7rem; font-weight: 700; line-height: 1.3; cursor: pointer; text-decoration: none; transition: color 0.2s ease, background-color 0.2s ease; } .sabik-update-info-button:hover, .sabik-navigator-info-button:hover { color: #ffffff; background: var(--update-orange); border-color: var(--update-orange); } /* ========================================================= BOX INFO AGGIORNAMENTO ========================================================= */ .sabik-info-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(18, 39, 54, 0.58); } .sabik-info-modal.is-open { display: flex; } .sabik-info-modal-box { width: min(680px, 100%); max-height: 80vh; overflow: hidden; background: #ffffff; border-radius: 7px; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25); } .sabik-info-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--update-line); } .sabik-info-modal-label { margin-bottom: 0.25rem; color: var(--update-orange); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; } .sabik-info-modal-header h2 { margin: 0; color: var(--update-blue); font-size: 1.25rem; font-weight: 600; } .sabik-info-modal-x { padding: 0; color: #71828c; background: transparent; border: 0; font-family: Arial, sans-serif; font-size: 1.7rem; line-height: 1; cursor: pointer; } .sabik-info-modal-x:hover { color: var(--update-orange); } .sabik-info-modal-content { max-height: 50vh; overflow-y: auto; padding: 1.4rem; } .sabik-info-loading { color: #71828c; font-size: 0.88rem; } #sabikInfoText { display: none; margin: 0; padding: 0; color: #46545c; background: transparent; border: 0; font-family: Arial, sans-serif; font-size: 0.9rem; line-height: 1.6; white-space: normal; } /* CONTENUTO TECNICO FORMATTATO */ .sabik-tech-product { margin-bottom: 1rem; padding-bottom: 0.65rem; color: var(--update-blue); border-bottom: 1px solid var(--update-line); font-size: 1rem; font-weight: 600; } .sabik-tech-date { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; color: #596970; font-size: 0.88rem; font-weight: 600; } .sabik-tech-date span { display: inline-block; padding: 0.22rem 0.45rem; color: var(--update-orange); background: #fff8ef; border-radius: 3px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-tech-build { margin-bottom: 1.1rem; padding: 0.75rem 0.9rem; color: var(--update-blue); background: var(--update-light); border-left: 3px solid var(--update-blue); font-size: 0.9rem; font-weight: 600; line-height: 1.5; } .sabik-tech-warning { margin: 1rem 0 1.15rem; padding: 0.85rem 1rem; background: #fff8ef; border-left: 3px solid var(--update-orange); } .sabik-tech-warning strong { display: block; margin-bottom: 0.25rem; color: var(--update-orange); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; } .sabik-tech-warning span { display: block; color: #4f565b; font-size: 0.88rem; line-height: 1.55; text-align: justify; } .sabik-tech-paragraph { margin: 0 0 1rem; color: #4f5e66; font-size: 0.9rem; line-height: 1.65; text-align: justify; } .sabik-tech-paragraph:last-child { margin-bottom: 0; } .sabik-info-modal-footer { display: flex; justify-content: flex-end; padding: 0.9rem 1.4rem; background: var(--update-light); border-top: 1px solid var(--update-line); } .sabik-info-modal-close { padding: 0.58rem 1rem; color: #ffffff; background: var(--update-blue); border: 0; border-radius: 4px; font-family: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; } .sabik-info-modal-close:hover { background: var(--update-orange); } body.sabik-modal-open { overflow: hidden; } @media (max-width: 600px) { .sabik-info-modal { padding: 0.8rem; } .sabik-info-modal-box { max-height: 88vh; } .sabik-info-modal-content { max-height: 58vh; padding: 1rem; } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 700px) { /* Le intestazioni rimangono leggibili anche su mobile. */ .sabik-update-section { padding: 0.9rem; } .sabik-update-section-heading { margin: -0.9rem -0.9rem 1rem; padding: 0.9rem 1rem; } .sabik-update-badge { width: 54px; height: 54px; font-size: 1.35rem; } .sabik-update-grid, .sabik-driver-grid { grid-template-columns: 1fr; } .sabik-navigator { align-items: flex-start; flex-direction: column; gap: 0.7rem; } .sabik-navigator-button { white-space: normal; } } /************************************************************************************ ************************* AGGIORNA DATI TECNICI ************************************ *************************************************************************************/ .sabik-tech-page a { text-transform: none; } /* ========================================================= DATI TECNICI SABIK ========================================================= */ .sabik-tech-page { --tech-blue: #174a73; --tech-orange: #f28c00; --tech-text: #4f565b; --tech-light: #f3f7fa; --tech-line: #dce5ea; --tech-white: #ffffff; width: 100%; color: var(--tech-text); } /* ========================================================= INTESTAZIONE ========================================================= */ .sabik-tech-header { max-width: 100%; margin-bottom: 2.3rem; } .sabik-tech-label, .sabik-tech-section-label { margin-bottom: .35rem; color: var(--tech-orange); font-size: 1rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-tech-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; } .sabik-tech-heading h1 { margin: 0 0 .55rem; color: var(--tech-blue); font-size: 2rem; font-weight: 600; line-height: 1.15; } .sabik-tech-intro { margin: 0; font-size: 1rem; line-height: 1.6; } .sabik-tech-badge { display: flex; align-items: center; justify-content: center; flex: 0 0 58px; width: 58px; height: 58px; color: #ffffff; background: var(--tech-blue); border-radius: 50%; font-size: 1.25rem; font-weight: 700; line-height: 1; } .sabik-tech-description { max-width: 880px; padding: 1rem 1.15rem; background: var(--tech-light); border-left: 4px solid var(--tech-orange); } .sabik-tech-description p { margin: 0; font-size: .92rem; line-height: 1.55; } .sabik-tech-description .sabik-tech-note { margin-top: .55rem; color: #68777e; font-size: .9rem; } /* ========================================================= AGGIORNAMENTO COMPLETO ========================================================= */ .sabik-tech-complete { max-width: 100%; margin-bottom: 2.7rem; } .sabik-tech-complete h2 { margin: 0 0 .45rem; color: var(--tech-blue); font-size: 1.45rem; font-weight: 600; } .sabik-tech-complete-intro { margin: 0 0 1.2rem; color: #68777e; font-size: .9rem; line-height: 1.5; } /* ========================================================= RESPONSIVE TESTATA ========================================================= */ @media (max-width: 650px) { .sabik-tech-heading h1 { font-size: 1.65rem; } .sabik-tech-badge { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.05rem; } } /* ========================================================= DATI TECNICI - GRIGLIA FILE DISPOSTA SU 3 COLONNE ========================================================= */ .sabik-tech-files-section { width: 100%; margin-top: 2rem; } .sabik-tech-path { margin: 0 0 1rem; padding: .65rem .9rem; color: #ffffff; background: #f28c00; font-size: .95rem; font-weight: 700; line-height: 1.3; } .sabik-tech-files-subtitle { grid-column: 1 / -1; margin: 1.4rem 0 .25rem; padding-bottom: .4rem; color: #174a73; border-bottom: 1px solid #dce5ea; font-size: .9rem; font-weight: 700; text-transform: uppercase; } .sabik-tech-files-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem 1.4rem; } .sabik-tech-file { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; min-width: 0; padding: .12rem 0; border-bottom: 1px solid #eef2f4; } .sabik-tech-file a { min-width: 0; color: #224faa; font-size: .8rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; } .sabik-tech-file a:hover { color: #f28c00; } .sabik-tech-file-date { flex: 0 0 auto; color: #68777e; font-size: .72rem; white-space: nowrap; } /* TABLET */ @media (max-width: 900px) { .sabik-tech-files-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* SMARTPHONE */ @media (max-width: 600px) { .sabik-tech-files-grid { grid-template-columns: 1fr; } } /* ========================================================= DATI TECNICI - CONFIGURAZIONI / VOCABOLARI ========================================================= */ .sabik-tech-dual-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; width: 100%; margin-top: 2rem; } .sabik-tech-group { min-width: 0; } .sabik-tech-files-grid-single { grid-template-columns: 1fr; } @media (max-width: 750px) { .sabik-tech-dual-section { grid-template-columns: 1fr; } } .sabik-tech-download-note { margin-top: .7rem; padding: .75rem .9rem; color: #68777e; background: #f3f7fa; border-left: 3px solid #f28c00; font-size: .78rem; line-height: 1.45; } .sabik-tech-major-title { margin: 2.4rem 0 1.4rem; color: #174a73; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; border-bottom: 3px solid #f28c00; padding-bottom: .45rem; } /* ========================================================= DATI TECNICI - DATABASE COSTRUTTORI ========================================================= */ .sabik-tech-manufacturers { width: 100%; } .sabik-tech-manufacturer { margin: 0 0 .55rem; padding: .55rem .75rem; background: #ffffff; border: 1px solid #dce5ea; border-radius: 6px; } .sabik-tech-manufacturer-logo { display: flex; align-items: center; gap: 2rem; min-height: 42px; margin-bottom: .45rem; padding-bottom: .45rem; border-bottom: 1px solid #eef2f4; } .sabik-tech-manufacturer-logo img { display: block; max-width: 180px; max-height: 55px; width: auto; height: auto; object-fit: contain; } .sabik-tech-manufacturer-name { margin-bottom: .7rem; padding-bottom: .7rem; color: #174a73; border-bottom: 1px solid #eef2f4; font-size: .9rem; font-weight: 700; } .sabik-tech-manufacturer-generic { margin-top: 1.8rem; } /* ========================================================= DATI TECNICI - FISARMONICA MACRO SEZIONI ========================================================= */ .sabik-tech-accordion { width: 100%; margin: 0 0 1rem; } .sabik-tech-accordion > summary { position: relative; display: flex; align-items: center; margin: 0; padding: .75rem 2.7rem .65rem 0; color: #174a73; border-bottom: 3px solid #f28c00; font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; cursor: pointer; list-style: none; } /* elimina il triangolino standard */ .sabik-tech-accordion > summary::-webkit-details-marker { display: none; } .sabik-tech-accordion > summary::marker { content: ""; } /* simbolo + */ .sabik-tech-accordion > summary::after { content: "+"; position: absolute; right: .35rem; top: 50%; color: #f28c00; font-size: 1.65rem; font-weight: 400; line-height: 1; transform: translateY(-50%); } /* quando la sezione è aperta diventa − */ .sabik-tech-accordion[open] > summary::after { content: "−"; } /* spazio tra titolo e contenuto */ .sabik-tech-accordion[open] > summary { margin-bottom: 1rem; } /* togliamo margini superiori già presenti all'interno delle sezioni */ .sabik-tech-accordion .sabik-tech-files-section, .sabik-tech-accordion .sabik-tech-dual-section { margin-top: 0; } .sabik-tech-accordion > summary:hover { color: #f28c00; } /******************************************************************* **************************** HOME PAGE *************************** *******************************************************************/ /* ========================================================= HOME SABIK ========================================================= */ .sabik-home { --home-blue: #174a73; --home-orange: #f28c00; --home-text: #4f565b; --home-light: #f3f7fa; --home-line: #dce5ea; --home-white: #ffffff; width: 100%; color: var(--home-text); } /* ========================================================= PARTE ALTA ========================================================= */ .sabik-home-top { display: grid; /* Colonna sinistra più ampia e card di destra più strette. 2.8fr = spazio proporzionale della colonna principale. 1fr = spazio proporzionale della colonna delle card. 260px = larghezza minima della colonna destra. */ grid-template-columns: minmax(0, 2.8fr) minmax(260px, 1fr); gap: 2rem; align-items: stretch; width: 100%; margin-bottom: .75rem; } /* ========================================================= HERO ========================================================= */ .sabik-home-hero { position: relative; padding: 1.3rem 1.35rem 1.6rem; /* 1.3rem = SOPRA 1.35rem = DESTRA e SINISTRA 1.6rem = SOTTO */ background: linear-gradient( 135deg, #f3f7fa 0%, #ffffff 70% ); border-left: 5px solid var(--home-orange); } /* LOGO SABIK NELL'HERO */ .sabik-home-hero-logo { display: block; width: auto; height: 58px; margin-left: auto; object-fit: contain; } .sabik-home-main-column { display: flex; flex-direction: column; min-width: 0; } .sabik-home-main-column .sabik-home-products-grid { gap: .8rem; } .sabik-home-label { margin-bottom: .65rem; color: var(--home-orange); font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-home-hero h1 { max-width: 760px; margin: 0 0 1rem; color: var(--home-blue); font-size: clamp(1.9rem, 2.8vw, 2.75rem); /* clamp usa una dimensione flessibile, ma senza scendere sotto un minimo e senza superare un massimo. I tre valori sono: - 1.9rem = dimensione minima - 2.8vw = dimensione “elastica” variabile - 2.75rem = dimensione massima Quindi il browser fa questo ragionamento: minimo valore variabile massimo 1.9rem 2.8vw 2.75rem rem dipende dalla dimensione base del testo del sito. Se il browser usa il valore standard di 16 px: - 1.9rem ≈ 30,4 px - 2.75rem ≈ 44 px vw invece significa viewport width, cioè percentuale della larghezza della finestra. 2.8vw significa: 2,8% della larghezza della finestra del browser. Per esempio: finestra 1000 px → 2.8vw = 28 px finestra 1200 px → 2.8vw = 33,6 px finestra 1500 px → 2.8vw = 42 px finestra 1800 px → 2.8vw = 50,4 px Ma grazie a clamp(): - se 2.8vw produce meno di circa 30 px → usa comunque 1.9rem - se produce tra circa 30 e 44 px → usa 2.8vw - se produce più di circa 44 px → si ferma a 2.75rem Quindi, in parole semplici: il titolo cresce con lo schermo, ma non diventa mai troppo piccolo né troppo grande. Nel nostro caso, per fare delle prove, il parametro che cambia maggiormente la crescita sui monitor grandi è quello centrale: 2.8vw*/ font-weight: 700; line-height: 1.08; letter-spacing: -.025em; } .sabik-home-lead { max-width: 760px; margin: 0 0 1.2rem; color: #334f63; font-size: 1.2rem; line-height: 1.5; } .sabik-home-description { max-width: 780px; margin: 0; font-size: .96rem; line-height: 1.65; } /* ========================================================= PULSANTI HERO ========================================================= */ .sabik-home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; width: 100%; } .sabik-home-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .7rem 1.15rem; border: 1px solid var(--home-blue); border-radius: 4px; font-size: .82rem; font-weight: 700; line-height: 1.15; text-decoration: none; transition: .2s ease; } .sabik-home-button-primary { color: #ffffff; background: var(--home-blue); } .sabik-home-button-primary:hover { color: #ffffff; background: var(--home-orange); border-color: var(--home-orange); } .sabik-home-button-secondary { color: var(--home-blue); background: #ffffff; } .sabik-home-button-secondary:hover { color: var(--home-orange); border-color: var(--home-orange); } /* ========================================================= PAROLE CHIAVE ========================================================= */ .sabik-home-keywords { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; } .sabik-home-keywords span { padding: .38rem .65rem; color: var(--home-blue); background: #ffffff; border: 1px solid var(--home-line); border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; } /* ========================================================= COLONNA DESTRA ========================================================= */ .sabik-home-side { display: flex; flex-direction: column; gap: 1rem; } /* ========================================================= DEMO ONLINE ========================================================= */ .sabik-home-demo { display: block; padding: 1rem 1.2rem 1.2rem; color: #ffffff; background: #174a73; border-radius: 6px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .sabik-home-demo:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); } /* IMMAGINE DEMO */ .sabik-home-demo-image { margin-bottom: .9rem; overflow: hidden; background: #ffffff; border-radius: 5px; } .sabik-home-demo-image img { display: block; width: 100%; height: auto; } /* TESTO */ .sabik-home-demo-label { margin-bottom: .5rem; color: #f7b34f; font-size: .7rem; font-weight: 700; letter-spacing: .08em; } .sabik-home-demo-title { margin-bottom: .55rem; font-size: 1.35rem; font-weight: 700; line-height: 1.2; } .sabik-home-demo p { margin: 0 0 .9rem; color: #eef4f7; font-size: .85rem; line-height: 1.5; } .sabik-home-demo-link { color: #ffffff; font-size: .76rem; font-weight: 700; } /* ========================================================= CORSI COLLETTIVI ========================================================= */ .sabik-home-courses { padding: 1.2rem 1.25rem; background: #ffffff; border: 1px solid var(--home-line); border-radius: 6px; } .sabik-home-courses-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: .85rem; } .sabik-home-side-label { margin-bottom: .2rem; color: var(--home-orange); font-size: .68rem; font-weight: 700; letter-spacing: .08em; } .sabik-home-courses h2 { margin: 0; color: var(--home-blue); font-size: 1.15rem; font-weight: 700; } .sabik-home-courses-month { flex: 0 0 auto; padding: .28rem .45rem; color: var(--home-blue); background: var(--home-light); border-radius: 4px; font-size: .8rem; font-weight: 700; } /* ========================================================= SINGOLO CORSO ========================================================= */ .sabik-home-course { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .75rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #eef2f4; } .sabik-home-course-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; color: #ffffff; background: var(--home-orange); border-radius: 4px; } .sabik-home-course-date strong { font-size: 1rem; line-height: 1; } .sabik-home-course-date span { margin-top: .15rem; font-size: .62rem; font-weight: 700; } .sabik-home-course-content { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .sabik-home-course-content strong { color: var(--home-blue); font-size: .82rem; } .sabik-home-course-content span { color: #68777e; font-size: .72rem; } .sabik-home-courses-all { display: inline-block; margin-top: .85rem; color: var(--home-blue); font-size: .72rem; font-weight: 700; text-decoration: none; } .sabik-home-courses-all:hover { color: var(--home-orange); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .sabik-home-top { grid-template-columns: 1fr; } .sabik-home-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 650px) { .sabik-home-hero { padding: 1.7rem 1.35rem; } .sabik-home-hero h1 { font-size: 2rem; } .sabik-home-hero-logo { height: 48px; margin-left: 0; margin-top: .4rem; } .sabik-home-lead { font-size: 1.05rem; } .sabik-home-side { grid-template-columns: 1fr; } .sabik-home-actions { flex-direction: column; align-items: stretch; } .sabik-home-button { width: 100%; } } /* ========================================================= HOME - COMUNICAZIONI: FERIE, PATRONI, PONTI ========================================================= */ /* ========================================================= HOME - COMUNICAZIONI =========================================================*/ .sabik-home-notice { padding: .65rem 1.25rem; background: #f3f7fa; border: 1px solid #dce5ea; border-left: 4px solid #f28c00; border-radius: 6px; } .sabik-home-notice h2 { margin: 0 0 .55rem; color: #174a73; font-size: 1.05rem; font-weight: 700; } .sabik-home-notice p { margin: 0; color: #4f565b; font-size: .82rem; line-height: 1.5; } .sabik-home-notice-meta { margin-top: .7rem; color: #68777e; font-size: .72rem; font-weight: 600; } /* COMUNICAZIONE NORMALE */ .sabik-home-notice-info { background: #f3f7fa; border-left-color: #174a73; } /* CHIUSURA AZIENDALE */ .sabik-home-notice-closure { background: #fff7eb; border-left-color: #f28c00; } /* COMUNICAZIONE IMPORTANTE */ .sabik-home-notice-important { background: #fff1f1; border-left-color: #b64242; } .sabik-home-notice-important h2 { color: #9f3030; } /* ========================================================= HOME - SEZIONI GENERALI ========================================================= */ .sabik-home-section-label { margin-bottom: .4rem; color: #f28c00; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sabik-home-section-intro { max-width: 760px; margin: 0 0 1.5rem; color: #68777e; font-size: .95rem; line-height: 1.6; } /* ========================================================= HOME - PRODOTTI ========================================================= */ .sabik-home-products { margin: 2.5rem 0 0; } .sabik-home-products h2 { margin: 0 0 .55rem; color: #174a73; font-size: 1.65rem; font-weight: 700; } .sabik-home-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; } .sabik-home-product-card { display: flex; flex-direction: column; padding: .95rem 1.1rem; background: #ffffff; border: 1px solid #dce5ea; border-top: 4px solid #174a73; border-radius: 6px; } .sabik-home-product-code { margin-bottom: .45rem; color: #f28c00; font-size: .72rem; font-weight: 700; letter-spacing: .08em; } .sabik-home-product-card h3 { margin: 0 0 .45rem; color: #174a73; font-size: 1.25rem; font-weight: 700; } .sabik-home-product-card p { margin: 0 0 1rem; color: #4f565b; font-size: .88rem; line-height: 1.5; } .sabik-home-product-card a { margin-top: auto; color: #174a73; font-size: .74rem; font-weight: 700; text-decoration: none; } .sabik-home-product-card a:hover { color: #f28c00; } /* ========================================================= HOME - PRISMA / SOFTWARE ITALIANO ========================================================= */ .sabik-home-prisma { width: 100%; margin: 0 0 3rem; } /* ========================================================= LOGO PRISMA ========================================================= */ .sabik-home-prisma-logo-home { margin-top: auto; padding-top: 2rem; } .sabik-home-prisma-logo-row { margin-bottom: 1rem; } .sabik-home-prisma-logo-row img { display: block; width: auto; max-width: 330px; height: auto; } /* ========================================================= BLOCCO PRINCIPALE ========================================================= */ .sabik-home-prisma-panel { width: 100%; padding: 1.35rem 2rem; background: #f3f7fa; border-radius: 6px; } /* ========================================================= FILETTO TRICOLORE ========================================================= */ .sabik-home-prisma-tricolor { width: 160px; height: 7px; margin: .25rem 0 1rem; border: 1px solid #dce5ea; border-radius: 3px; background: linear-gradient( to right, #009246 0 33.33%, #ffffff 33.33% 66.66%, #ce2b37 66.66% 100% ); } /* ========================================================= TESTI ========================================================= */ .sabik-home-prisma-panel h2 { max-width: 900px; margin: 0 0 1rem; color: #174a73; font-size: 1.55rem; font-weight: 700; line-height: 1.25; } .sabik-home-prisma-panel > p { max-width: 1050px; margin: 0 0 .75rem; color: #4f565b; font-size: .9rem; line-height: 1.6; } /* ========================================================= TRE PUNTI ========================================================= */ .sabik-home-prisma-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.35rem; } .sabik-home-prisma-point { padding: .8rem .9rem; background: #ffffff; border: 1px solid #dce5ea; border-radius: 5px; } .sabik-home-prisma-point strong { display: block; margin-bottom: .3rem; color: #174a73; font-size: .72rem; font-weight: 700; line-height: 1.25; } .sabik-home-prisma-point span { display: block; color: #68777e; font-size: .74rem; line-height: 1.4; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 650px) { .sabik-home-prisma-logo-row img { max-width: 260px; } .sabik-home-prisma-panel { padding: 1.4rem 1.2rem; } .sabik-home-prisma-points { grid-template-columns: 1fr; } } /* ========================================================= HOME - AUTOMAZIONE ========================================================= */ .sabik-home-automation { width: 100%; margin: 0 0 3rem; } .sabik-home-automation-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.4rem; align-items: stretch; } /* ========================================================= TESTO PRINCIPALE ========================================================= */ .sabik-home-automation-content { padding: 1.25rem 1.8rem; background: #ffffff; border: 1px solid #dce5ea; border-top: 4px solid #174a73; border-radius: 6px; } .sabik-home-automation-content h2 { margin: 0 0 .8rem; color: #174a73; font-size: 1.55rem; font-weight: 700; line-height: 1.25; } .sabik-home-automation-content p { margin: 0 0 .75rem; color: #4f565b; font-size: .9rem; line-height: 1.6; } .sabik-home-automation-content p:last-child { margin-bottom: 0; } .sabik-home-automation-lead { color: #334f63 !important; font-size: 1rem !important; } /* ========================================================= CONFIGURATORE ========================================================= */ .sabik-home-configurator { padding: 1.25rem 1.8rem; color: #ffffff; background: #174a73; border-radius: 6px; } .sabik-home-configurator-label { margin-bottom: .55rem; color: #f7b34f; font-size: .72rem; font-weight: 700; letter-spacing: .08em; } .sabik-home-configurator h3 { margin: 0 0 .8rem; color: #ffffff; font-size: 1.35rem; font-weight: 700; line-height: 1.25; } .sabik-home-configurator p { margin: 0 0 .75rem; color: #eef4f7; font-size: .86rem; line-height: 1.55; } /* ========================================================= BENEFICI ========================================================= */ .sabik-home-configurator-benefits { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; } .sabik-home-configurator-benefits span { padding: .38rem .55rem; color: #174a73; background: #ffffff; border-radius: 4px; font-size: .65rem; font-weight: 700; line-height: 1.2; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 800px) { .sabik-home-automation-grid { grid-template-columns: 1fr; } } /* ========================================================= HOME - WORKFLOW SABIK ========================================================= */ .sabik-home-workflow { width: 100%; margin: 0 0 3rem; padding: 1.8rem 2rem; background: #f3f7fa; border-radius: 6px; } .sabik-home-workflow h2 { margin: 0 0 .45rem; color: #174a73; font-size: 1.55rem; font-weight: 700; line-height: 1.25; } .sabik-home-workflow-intro { margin: 0 0 1.5rem; color: #68777e; font-size: .9rem; line-height: 1.55; } /* ========================================================= LINEA WORKFLOW ========================================================= */ .sabik-home-workflow-line { display: flex; align-items: stretch; justify-content: space-between; gap: .55rem; width: 100%; } /* ========================================================= SINGOLO PASSAGGIO ========================================================= */ .sabik-home-workflow-step { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 88px; padding: .8rem .65rem; background: #ffffff; border: 1px solid #dce5ea; border-top: 4px solid #174a73; border-radius: 5px; text-align: center; } .sabik-home-workflow-step span { display: block; margin-bottom: .3rem; color: #f28c00; font-size: .68rem; font-weight: 700; } .sabik-home-workflow-step strong { color: #174a73; font-size: .8rem; font-weight: 700; line-height: 1.2; } /* ========================================================= FRECCE ========================================================= */ .sabik-home-workflow-arrow { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #f28c00; font-size: 1.35rem; font-weight: 700; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { .sabik-home-workflow-line { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sabik-home-workflow-arrow { display: none; } } @media (max-width: 600px) { .sabik-home-workflow { padding: 1.4rem 1.2rem; } .sabik-home-workflow-line { grid-template-columns: 1fr; } .sabik-home-workflow-step { min-height: auto; } } /* ========================================================= HOME - CTA FINALE ========================================================= */ .sabik-home-final-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; width: 100%; margin: 0 0 2rem; padding: 1.25rem 1.8rem; background: #f3f7fa; border-top: 4px solid #174a73; border-radius: 6px; } .sabik-home-final-cta-content { max-width: 760px; } .sabik-home-final-cta h2 { margin: 0 0 .45rem; color: #174a73; font-size: 1.5rem; font-weight: 700; line-height: 1.25; } .sabik-home-final-cta p { margin: 0; color: #4f565b; font-size: .9rem; line-height: 1.55; } .sabik-home-final-cta-actions { display: flex; flex: 0 0 auto; gap: .7rem; align-items: center; } .sabik-home-final-cta .sabik-home-button-primary { color: #ffffff; background: #174a73; border-color: #174a73; } .sabik-home-final-cta .sabik-home-button-primary:hover { color: #ffffff; background: #f28c00; border-color: #f28c00; } /* RESPONSIVE */ @media (max-width: 750px) { .sabik-home-final-cta { flex-direction: column; align-items: flex-start; } .sabik-home-final-cta-actions { width: 100%; flex-wrap: wrap; } } /* ========================================================= HOME - OPPORTUNITÀ PER PROGETTISTI SABIK ========================================================= */ .sabik-home-jobs { width: 100%; margin: 0 0 1.5rem; padding: 1rem 1.2rem; background: #fff7eb; border: 1px solid #dce5ea; border-left: 4px solid #f28c00; border-radius: 6px; } .sabik-home-jobs-title { margin-bottom: .35rem; color: #174a73; font-size: .82rem; font-weight: 700; letter-spacing: .04em; } .sabik-home-jobs p { margin: 0; color: #4f565b; font-size: .82rem; line-height: 1.5; } .sabik-home-jobs a { color: #174a73; font-weight: 700; text-decoration: none; } .sabik-home-jobs a:hover { color: #f28c00; } /* ========================================================= HOME - SPAZIO PER ZENDESK CHAT ========================================================= */ /* Sui monitor desktop riserviamo uno spazio a destra della colonna delle card, evitando la sovrapposizione con la finestra Zendesk aperta. */ @media (min-width: 1200px) { .sabik-home-top { padding-right: 20px; } } /* Restringe le sezioni inferiori della HOME per lasciare uno spazio libero sulla destra. Non modifica le pagine prodotto né la sidebar. */ @media (min-width: 1200px) { .sabik-home-prisma, .sabik-home-automation, .sabik-home-workflow, .sabik-home-final-cta, .sabik-home-jobs { width: calc(100% - 20px); margin-right: 20px; } } /************************ ZENDESK CHAT nel FOOTER **************************************/ /* ZENDESK CHAT - Spostamento verso sinistra */ /****************************************************************************/ iframe#launcher { right: 40px !important; } /************************ FRASE AI NEL FOOTER **************************************/ /* Footer - riga dedicata al supporto AI */ .footer-table-custom tr.footer-ai-row > td { text-align: center !important; vertical-align: middle; padding: 10px 5px 0 !important; font-size: 11px; line-height: 1.4; color: #777; border: none; } .footer-table-custom tr.footer-ai-row strong { font-weight: 600; } /* Footer più compatto */ .footer-table-custom { margin-bottom: 0 !important; } .footer-table-custom th { padding-top: 4px !important; padding } /* ========================================= FOOTER - COMPATTAZIONE ========================================= */ /* Contenitore del footer */ .container-footer { padding: 0 0 12px !important; } /* Contenitore interno Cassiopeia */ .container-footer .grid-child { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Modulo personalizzato */ .container-footer .mod-custom { margin: 0 !important; padding: 0 !important; } /* Tabella */ .container-footer .footer-table-custom { margin: 0 !important; } /* Paragrafo dei contatti */ .container-footer .col-testo-contatti p { margin: 0 !important; } /* Riga AI */ .container-footer .footer-table-custom tr.footer-ai-row > td { text-align: center !important; vertical-align: middle !important; padding: 5px 0 0 !important; font-size: 11px; line-height: 1.3; color: #777; }