/* =========================================================================== Generic CMS — Foglio di stile principale --------------------------------------------------------------------------- Design system del CMS. SISTEMA DI TEMI Tutti i colori sono definiti come variabili CSS. Il tema predefinito è in :root; i temi alternativi sono blocchi [data-theme="..."] che ridefiniscono le variabili di base. L'attributo data-theme è applicato all'elemento da header.php in base all'impostazione del sito. Temi disponibili: default (blu), slate (grigio), forest (verde), sunset (arancio), midnight (scuro). ELEMENTI 3D Card, box e pannelli in rilievo usano un effetto translucido (glassmorphism): sfondo semi-trasparente + backdrop-filter blur + bordo chiaro a 1px, per dare profondità senza appesantire la pagina. Estende Bootstrap 5.3 con componenti e utility personalizzate. =========================================================================== */ :root { /* --- PANTONE 646 C — primario (gradienti di sfondo) -------------------- */ /* Colore campionato dalla cartella Pantone fornita: #5E8BB5 */ --cms-p1: #5E8BB5; /* Pantone 646 C base */ --cms-p1-900: #2E4E73; /* scala scura — fine gradiente sfondo */ --cms-p1-700: #426A95; /* scala media-scura */ --cms-p1-500: #5E8BB5; /* scala media — base */ --cms-p1-300: #87A9C9; /* scala chiara — accenti su scuro */ /* --- PANTONE 2018 C — secondario (gradienti degli elementi) ------------ */ /* Colore campionato dalla cartella Pantone fornita: #FF7701 */ --cms-p2: #FF7701; /* Pantone 2018 C base */ --cms-p2-700: #CC5F00; /* scala scura — hover/fine gradiente */ --cms-p2-text: #A84E00; /* arancione per TESTO — contrasto AA >=4.5 */ --cms-p2-500: #FF7701; /* scala media — base */ --cms-p2-300: #FF9433; /* scala chiara — inizio gradiente elementi */ /* --- Gradienti pronti all'uso ----------------------------------------- */ /* Gradiente HERO: parte dal Pantone 646 C reale (#5E8BB5), colore di marca per gli sfondi, e scurisce. Usato dove sopra ci sono solo titoli grandi in grassetto (contrasto WCAG AA per testo grande, >= 3:1). */ --cms-grad-hero: linear-gradient(160deg, var(--cms-p1-500) 0%, var(--cms-p1-900) 100%); /* Gradiente SFONDO scuro: tonalità scure del primario, per le sezioni che contengono anche testo piccolo (contrasto WCAG AA pieno, >= 4.5:1). */ --cms-grad-bg: linear-gradient(160deg, var(--cms-p1-700) 0%, var(--cms-p1-900) 100%); /* Gradiente del SECONDARIO (Pantone 2018 C) per gli ELEMENTI. */ --cms-grad-el: linear-gradient(135deg, var(--cms-p2-500) 0%, var(--cms-p2-700) 100%); /* --- Effetto translucido (glassmorphism) per elementi 3D --------------- */ --cms-glass-bg: rgba(255, 255, 255, 0.70); --cms-glass-bg-dark: rgba(46, 78, 115, 0.42); --cms-glass-border: rgba(255, 255, 255, 0.55); --cms-glass-blur: blur(14px) saturate(140%); --cms-glass-shadow: 0 8px 32px rgba(46, 78, 115, 0.22); /* --- Compatibilità: alias storici mappati sulla nuova palette --------- Nota: --cms-navy è usato sia come colore di testo sia come sfondo; è mappato su una tonalità medio-scura del primario (#426A95) che garantisce il contrasto WCAG AA in entrambi gli usi. Analogamente --cms-cyan, usato anche come testo, punta a una tonalità scura del secondario per restare leggibile su sfondo chiaro. */ --cms-navy: var(--cms-p1-700); --cms-navy-2: var(--cms-p1-900); --cms-navy-3: var(--cms-p1-300); --cms-blue: var(--cms-p1-700); --cms-blue-d: var(--cms-p1-900); --cms-cyan: var(--cms-p2-700); --cms-cyan-d: var(--cms-p2-700); /* --- Neutri ----------------------------------------------------------- */ --cms-ink: #243240; --cms-muted: #54626F; /* scurito per contrasto WCAG AA */ --cms-bg: #EEF2F6; --cms-card: #FFFFFF; --cms-line: #DCE4EC; --cms-soft: #E8EEF4; --cms-radius: 14px; --cms-radius-sm: 9px; --cms-shadow: 0 2px 14px rgba(46, 78, 115, .09); --cms-shadow-lg: 0 12px 40px rgba(46, 78, 115, .17); --cms-font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } /* =========================================================================== TEMI ALTERNATIVI --------------------------------------------------------------------------- Ogni tema ridefinisce le variabili-colore di base. Il layout, le dimensioni e i caratteri restano invariati. Il tema attivo è scelto dall'attributo data-theme sull'elemento (impostato da header.php). Tutte le combinazioni testo/sfondo sono state scelte per rispettare il contrasto WCAG 2.1 AA (>= 4.5:1 per il testo normale). =========================================================================== */ /* --- Tema "slate" — grigio professionale, sobrio ------------------------- */ [data-theme="slate"] { --cms-p1: #5B6B7B; --cms-p1-900: #2C3742; --cms-p1-700: #3F4D5A; --cms-p1-500: #5B6B7B; --cms-p1-300: #8A98A6; --cms-p2: #E08A2C; --cms-p2-700: #B06A14; --cms-p2-text: #8F5300; --cms-p2-500: #E08A2C; --cms-p2-300: #EDA856; --cms-grad-hero: linear-gradient(160deg, var(--cms-p1-500) 0%, var(--cms-p1-900) 100%); --cms-grad-bg: linear-gradient(160deg, var(--cms-p1-700) 0%, var(--cms-p1-900) 100%); --cms-grad-el: linear-gradient(135deg, var(--cms-p2-500) 0%, var(--cms-p2-700) 100%); --cms-glass-bg-dark: rgba(44, 55, 66, 0.42); --cms-glass-shadow: 0 8px 32px rgba(44, 55, 66, 0.22); --cms-ink: #232A31; --cms-muted: #525C66; --cms-bg: #EFF1F3; --cms-card: #FFFFFF; --cms-line: #DDE1E6; --cms-soft: #E9ECEF; --cms-shadow: 0 2px 14px rgba(44, 55, 66, .09); --cms-shadow-lg: 0 12px 40px rgba(44, 55, 66, .17); } /* --- Tema "forest" — verde naturale, equilibrato ------------------------- */ [data-theme="forest"] { --cms-p1: #4F8A6B; --cms-p1-900: #234A38; --cms-p1-700: #356650; --cms-p1-500: #4F8A6B; --cms-p1-300: #82AE97; --cms-p2: #E0913A; --cms-p2-700: #B26E1C; --cms-p2-text: #8C5400; --cms-p2-500: #E0913A; --cms-p2-300: #EBAB64; --cms-grad-hero: linear-gradient(160deg, var(--cms-p1-500) 0%, var(--cms-p1-900) 100%); --cms-grad-bg: linear-gradient(160deg, var(--cms-p1-700) 0%, var(--cms-p1-900) 100%); --cms-grad-el: linear-gradient(135deg, var(--cms-p2-500) 0%, var(--cms-p2-700) 100%); --cms-glass-bg-dark: rgba(35, 74, 56, 0.42); --cms-glass-shadow: 0 8px 32px rgba(35, 74, 56, 0.22); --cms-ink: #1F2E26; --cms-muted: #4C5B53; --cms-bg: #EDF3EF; --cms-card: #FFFFFF; --cms-line: #D8E3DC; --cms-soft: #E6EFE9; --cms-shadow: 0 2px 14px rgba(35, 74, 56, .09); --cms-shadow-lg: 0 12px 40px rgba(35, 74, 56, .17); } /* --- Tema "sunset" — arancio caldo, accogliente -------------------------- */ [data-theme="sunset"] { --cms-p1: #C5683E; --cms-p1-900: #6E3318; --cms-p1-700: #9A4D2A; --cms-p1-500: #C5683E; --cms-p1-300: #D8987B; --cms-p2: #2E8C9E; --cms-p2-700: #1F6B7A; --cms-p2-text: #0F5663; --cms-p2-500: #2E8C9E; --cms-p2-300: #5CABBA; --cms-grad-hero: linear-gradient(160deg, var(--cms-p1-500) 0%, var(--cms-p1-900) 100%); --cms-grad-bg: linear-gradient(160deg, var(--cms-p1-700) 0%, var(--cms-p1-900) 100%); --cms-grad-el: linear-gradient(135deg, var(--cms-p2-500) 0%, var(--cms-p2-700) 100%); --cms-glass-bg-dark: rgba(110, 51, 24, 0.42); --cms-glass-shadow: 0 8px 32px rgba(110, 51, 24, 0.22); --cms-ink: #33231C; --cms-muted: #5E4C44; --cms-bg: #F5EFEC; --cms-card: #FFFFFF; --cms-line: #E6DAD3; --cms-soft: #F0E7E2; --cms-shadow: 0 2px 14px rgba(110, 51, 24, .09); --cms-shadow-lg: 0 12px 40px rgba(110, 51, 24, .17); } /* --- Tema "midnight" — scuro, alto contrasto ----------------------------- */ [data-theme="midnight"] { --cms-p1: #3D5A80; --cms-p1-900: #1A2433; --cms-p1-700: #28384D; --cms-p1-500: #3D5A80; --cms-p1-300: #7E94B3; --cms-p2: #EE9B3A; --cms-p2-700: #C4791C; --cms-p2-text: #F0A94F; --cms-p2-500: #EE9B3A; --cms-p2-300: #F2B265; --cms-grad-hero: linear-gradient(160deg, var(--cms-p1-500) 0%, var(--cms-p1-900) 100%); --cms-grad-bg: linear-gradient(160deg, var(--cms-p1-700) 0%, var(--cms-p1-900) 100%); --cms-grad-el: linear-gradient(135deg, var(--cms-p2-500) 0%, var(--cms-p2-700) 100%); --cms-glass-bg: rgba(40, 56, 77, 0.62); --cms-glass-bg-dark: rgba(15, 21, 30, 0.55); --cms-glass-border: rgba(126, 148, 179, 0.40); --cms-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40); --cms-ink: #E6ECF3; --cms-muted: #A7B4C3; --cms-bg: #141B26; --cms-card: #1E2935; --cms-line: #2E3C4C; --cms-soft: #1A2330; --cms-shadow: 0 2px 14px rgba(0, 0, 0, .30); --cms-shadow-lg: 0 12px 40px rgba(0, 0, 0, .45); } /* ----------------------------- BASE -------------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } /* Lo sfondo di base sta sull'elemento html: fa da ripiego se il canvas 3D non viene caricato. Il body è trasparente, così il canvas (z-index -1) resta visibile dietro al contenuto. */ html { background: var(--cms-bg); } body { font-family: var(--cms-font); color: var(--cms-ink); background: transparent; display: flex; flex-direction: column; min-height: 100vh; line-height: 1.6; } /* Link: tonalità scura del primario per contrasto WCAG AA su sfondo chiaro. */ a { color: var(--cms-p1-700); text-decoration: none; } a:hover { color: var(--cms-p1-900); text-decoration: underline; } /* Titoli: tonalità scura del primario, contrasto WCAG AA pieno su sfondo chiaro. */ h1, h2, h3, h4, h5, h6 { color: var(--cms-p1-700); font-weight: 700; line-height: 1.25; } .cms-main { flex: 1 0 auto; position: relative; z-index: 1; } .container { max-width: 1180px; } /* Accessibilità: focus visibile coerente (WCAG 2.4.7). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .cms-nav-link:focus-visible { outline: 3px solid var(--cms-p2-700); outline-offset: 2px; } /* Sezione: spaziatura verticale standard. */ /* Le sezioni hanno uno sfondo semi-trasparente (circa 85%): lasciano intravedere lo sfondo 3D animato senza compromettere il contrasto del testo (verificato WCAG 1.4.3 - resta ben oltre 4.5:1 anche nel caso peggiore, con un colore acceso dietro). */ .cms-section { padding: 72px 0; background: rgba(238, 242, 246, .84); } .cms-section-sm { padding: 44px 0; background: rgba(238, 242, 246, .84); } .cms-section-tint { background: rgba(232, 238, 244, .86); } .cms-section-dark { background: var(--cms-grad-bg); color: #EAF1F8; } .cms-section-dark h1, .cms-section-dark h2, .cms-section-dark h3 { color: #fff; } .cms-eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cms-cyan-d); margin-bottom: .5rem; } .cms-section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .6rem; } .cms-section-lead { color: var(--cms-muted); font-size: 1.05rem; max-width: 720px; } /* ----------------------------- HEADER ------------------------------------ */ .cms-header { background: var(--cms-card); border-bottom: 1px solid var(--cms-line); position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 0 rgba(15, 42, 74, .04); } .cms-brand { color: var(--cms-navy); } .cms-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-right: 10px; border-radius: 10px; background: linear-gradient(135deg, var(--cms-navy), var(--cms-navy-3)); color: var(--cms-cyan); font-size: 1.25rem; } .cms-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .cms-brand-name { font-weight: 800; font-size: 1.18rem; color: var(--cms-navy); } .cms-brand-accent { color: var(--cms-cyan-d); } .cms-brand-sub { font-size: .7rem; color: var(--cms-muted); letter-spacing: .04em; } .cms-nav-link { color: var(--cms-ink); font-weight: 600; font-size: .94rem; padding: .5rem .8rem; border-radius: var(--cms-radius-sm); text-decoration: none; } .cms-nav-link:hover { background: var(--cms-soft); color: var(--cms-navy); text-decoration: none; } .cms-nav-link.is-active { color: var(--cms-blue); } .cms-burger { background: var(--cms-soft); border: 1px solid var(--cms-line); border-radius: var(--cms-radius-sm); width: 44px; height: 44px; font-size: 1.4rem; color: var(--cms-navy); } /* ----------------------------- BOTTONI ----------------------------------- */ .btn { font-weight: 600; border-radius: var(--cms-radius-sm); } .cms-btn-primary { background: var(--cms-blue); border: 1px solid var(--cms-blue); color: #fff; } .cms-btn-primary:hover { background: var(--cms-blue-d); border-color: var(--cms-blue-d); color: #fff; } .cms-btn-accent { /* Gradiente arancione su tonalità scure: il testo bianco in grassetto rispetta il contrasto WCAG AA per testo grande (rapporto >= 3:1). Il colore di marca Pantone 2018 C resta usato per badge ed elementi non testuali; qui si parte da una tonalità più scura per leggibilità. */ background: linear-gradient(135deg, #DD6600 0%, var(--cms-p2-700) 100%); border: 1px solid var(--cms-p2-700); color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(120, 56, 0, .55); box-shadow: 0 4px 14px rgba(204, 95, 0, .32); } .cms-btn-accent:hover { background: linear-gradient(135deg, var(--cms-p2-700) 0%, #A34C00 100%); border-color: #A34C00; color: #fff; } .cms-btn-navy { background: var(--cms-navy); border: 1px solid var(--cms-navy); color: #fff; } .cms-btn-navy:hover { background: var(--cms-navy-2); border-color: var(--cms-navy-2); color: #fff; } .cms-btn-outline { background: transparent; border: 1px solid var(--cms-line); color: var(--cms-navy); } .cms-btn-outline:hover { background: var(--cms-soft); color: var(--cms-navy); } .cms-btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; } .cms-btn-outline-light:hover { background: rgba(255,255,255,.12); color: #fff; } .cms-btn-outline-dark { background: transparent; border: 1px solid var(--cms-navy); color: var(--cms-navy); } .cms-btn-outline-dark:hover { background: var(--cms-navy); color: #fff; } /* ----------------------------- HERO -------------------------------------- */ .cms-hero { position: relative; /* Sfondo: gradiente del Pantone 646 C (colore di marca). Un velo scuro semi-trasparente (overlay sotto, in ::before) garantisce il contrasto WCAG AA del testo pur mantenendo riconoscibile la tinta blu. */ background: radial-gradient(900px 420px at 85% -10%, rgba(255,148,51,.20), transparent 60%), var(--cms-grad-hero); color: #EAF1F8; overflow: hidden; padding: 84px 0 76px; } .cms-hero::before { /* Velo scuro per la leggibilità del testo (WCAG 1.4.3). */ content: ""; position: absolute; inset: 0; background: rgba(30, 53, 82, .40); z-index: 0; } .cms-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(680px 360px at 78% 18%, #000, transparent 75%); mask-image: radial-gradient(680px 360px at 78% 18%, #000, transparent 75%); } .cms-hero > .container { position: relative; z-index: 1; } .cms-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.01em; } .cms-hero h1 .cms-hl { color: #FFB066; } .cms-hero-lead { font-size: 1.16rem; color: #E3EDF4; max-width: 560px; } .cms-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; } .cms-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #FFFFFF; font-size: .82rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px; } .cms-pill i { color: #FFC68F; } /* Scheda "card" decorativa nell'hero. */ .cms-hero-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--cms-radius); padding: 1.4rem; backdrop-filter: blur(2px); } .cms-hero-card .cms-hc-row { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); } .cms-hero-card .cms-hc-row:last-child { border-bottom: 0; } .cms-hero-card .cms-hc-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,119,1,.14); color: var(--cms-cyan); } /* ----------------------------- CARD GENERICA ----------------------------- Elemento 3D: sfondo translucido + sfocatura dello sfondo (glassmorphism). */ .cms-card { background: var(--cms-glass-bg); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid var(--cms-glass-border); border-radius: var(--cms-radius); box-shadow: var(--cms-glass-shadow); } .cms-card-pad { padding: 1.5rem; } /* Scheda servizio — anch'essa con effetto translucido in rilievo. */ .cms-service { background: var(--cms-glass-bg); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid var(--cms-glass-border); border-radius: var(--cms-radius); padding: 1.6rem; height: 100%; box-shadow: var(--cms-glass-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .cms-service:hover { transform: translateY(-4px); box-shadow: var(--cms-shadow-lg); border-color: var(--cms-p2-300); } .cms-service-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; background: var(--cms-grad-el); border: 1px solid var(--cms-p2-700); color: #fff; font-size: 1.5rem; margin-bottom: 1rem; box-shadow: 0 6px 16px rgba(204,95,0,.28); } .cms-service h3 { font-size: 1.12rem; margin-bottom: .4rem; } .cms-service p { color: var(--cms-muted); font-size: .94rem; margin-bottom: .8rem; } .cms-service .cms-service-link { font-weight: 700; font-size: .9rem; color: var(--cms-blue); } /* Numero/step. */ .cms-step-num { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--cms-navy); color: #FFC68F; font-weight: 800; font-size: 1.1rem; } /* ----------------------------- STAT / NUMERI ----------------------------- */ .cms-stat { text-align: center; padding: 1rem; } .cms-stat-num { font-size: 2.2rem; font-weight: 800; color: var(--cms-navy); line-height: 1; } .cms-stat-num .cms-hl { color: var(--cms-cyan-d); } .cms-stat-lbl { color: var(--cms-muted); font-size: .9rem; margin-top: .3rem; } /* ----------------------------- BADGE / CHIP ------------------------------ */ .cms-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--cms-soft); border: 1px solid var(--cms-line); color: var(--cms-navy); font-size: .78rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; } .cms-badge { font-weight: 600; font-size: .76rem; padding: .35em .65em; border-radius: 6px; } /* ----------------------------- FORM -------------------------------------- */ .cms-form-card { background: var(--cms-card); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); box-shadow: var(--cms-shadow); padding: 1.8rem; } .form-label { font-weight: 600; color: var(--cms-navy); font-size: .9rem; } .form-control, .form-select { border-radius: var(--cms-radius-sm); border-color: var(--cms-line); padding: .58rem .8rem; } .form-control:focus, .form-select:focus { border-color: var(--cms-cyan); box-shadow: 0 0 0 .2rem rgba(255,119,1,.18); } .cms-req { color: #d6336c; } /* ----------------------------- MAGAZINE ---------------------------------- */ .cms-article-card { background: var(--cms-card); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); overflow: hidden; height: 100%; transition: transform .16s ease, box-shadow .16s ease; } .cms-article-card:hover { transform: translateY(-3px); box-shadow: var(--cms-shadow-lg); } .cms-article-cover { height: 158px; background: linear-gradient(135deg, var(--cms-navy), var(--cms-navy-3)); display: grid; place-items: center; color: rgba(255,255,255,.28); font-size: 2.6rem; overflow: hidden; } /* Copertina con immagine reale: riempie il riquadro mantenendo le proporzioni. */ .cms-article-cover-img { background: var(--cms-soft); } .cms-article-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .cms-article-card:hover .cms-article-cover-img img { transform: scale(1.05); } /* Immagine in evidenza in cima alla pagina dell'articolo. */ .cms-article-hero { margin: 0; border-radius: var(--cms-radius); overflow: hidden; box-shadow: 0 8px 28px rgba(30, 53, 82, .12); } .cms-article-hero img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover; } .cms-article-body { padding: 1.15rem 1.25rem 1.35rem; } .cms-article-body h3 { font-size: 1.05rem; margin: .35rem 0 .45rem; } .cms-article-meta { font-size: .8rem; color: var(--cms-muted); } /* Contenuto articolo / pagina. */ .cms-prose { font-size: 1.04rem; color: #2c3a4b; } .cms-prose h2 { font-size: 1.4rem; margin: 1.8rem 0 .7rem; } .cms-prose h3 { font-size: 1.15rem; margin: 1.4rem 0 .5rem; } .cms-prose p { margin-bottom: 1rem; } .cms-prose ul, .cms-prose ol { margin-bottom: 1rem; padding-left: 1.3rem; } .cms-prose blockquote { border-left: 4px solid var(--cms-cyan); background: var(--cms-soft); padding: .8rem 1.1rem; margin: 1.2rem 0; border-radius: 0 var(--cms-radius-sm) var(--cms-radius-sm) 0; color: var(--cms-navy); } /* ----------------------------- ACCORDION FAQ ----------------------------- */ .accordion-button { font-weight: 600; color: var(--cms-navy); border-radius: var(--cms-radius-sm) !important; } .accordion-button:not(.collapsed) { background: var(--cms-soft); color: var(--cms-navy); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255,119,1,.2); } .accordion-item { border-color: var(--cms-line); margin-bottom: .55rem; border-radius: var(--cms-radius-sm); } /* ----------------------------- TESTIMONIANZE ----------------------------- */ .cms-quote { background: #fff; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); padding: 1.5rem; height: 100%; } .cms-quote-mark { color: var(--cms-cyan); font-size: 2rem; line-height: 0; } .cms-quote p { color: #344256; font-style: italic; } .cms-quote-author { font-weight: 700; color: var(--cms-navy); } .cms-quote-role { font-size: .82rem; color: var(--cms-muted); } /* ----------------------------- CTA BANNER -------------------------------- */ .cms-cta { background: radial-gradient(700px 280px at 90% 110%, rgba(255,119,1,.20), transparent 60%), linear-gradient(135deg, var(--cms-navy), var(--cms-navy-3)); color: #fff; border-radius: var(--cms-radius); padding: 2.6rem; } .cms-cta h2 { color: #fff; } /* ----------------------------- DASHBOARD / SIDEBAR ----------------------- */ /* L'area di amministrazione usa l'intera larghezza della finestra: quando un .container racchiude la dashboard (.cms-dash), il limite di larghezza di Bootstrap viene rimosso per sfruttare tutto lo spazio disponibile. */ .container:has(> .cms-dash) { max-width: 100%; width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; } .cms-dash { display: flex; gap: 1.5rem; align-items: flex-start; } .cms-sidebar { width: 248px; flex: none; background: var(--cms-card); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); overflow: hidden; position: sticky; top: 84px; } .cms-sidebar-head { background: var(--cms-navy); color: #fff; padding: 1rem 1.1rem; } .cms-sidebar-head .small { color: #E8EFF5; } .cms-sidebar-nav { padding: .5rem; } .cms-sidebar-nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: var(--cms-radius-sm); color: var(--cms-ink); font-weight: 600; font-size: .9rem; text-decoration: none; } .cms-sidebar-nav a:hover { background: var(--cms-soft); } .cms-sidebar-nav a.is-active { background: var(--cms-blue); color: #fff; } .cms-sidebar-nav a.cms-sb-child { padding-left: 1.7rem; font-size: .84rem; font-weight: 500; } .cms-sidebar-nav a.cms-sb-child i { font-size: .85rem; } .cms-sidebar-nav .cms-sb-sep { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cms-muted); padding: .8rem .7rem .25rem; font-weight: 700; } .cms-dash-main { flex: 1 1 auto; min-width: 0; } /* KPI dashboard — elemento 3D translucido. */ .cms-kpi { background: var(--cms-glass-bg); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid var(--cms-glass-border); border-radius: var(--cms-radius); padding: 1.1rem 1.2rem; box-shadow: var(--cms-glass-shadow); } .cms-kpi-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; } .cms-kpi-num { font-size: 1.7rem; font-weight: 800; color: var(--cms-navy); line-height: 1; } .cms-kpi-lbl { color: var(--cms-muted); font-size: .82rem; } /* Tabelle. */ .cms-table { background: #fff; border-radius: var(--cms-radius); overflow: hidden; } .cms-table table { margin: 0; } .cms-table thead th { background: var(--cms-soft); color: var(--cms-navy); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--cms-line); } .cms-table td, .cms-table th { vertical-align: middle; } /* Thread messaggi. */ .cms-msg { max-width: 78%; padding: .7rem 1rem; border-radius: 12px; margin-bottom: .7rem; } .cms-msg-in { background: var(--cms-soft); border: 1px solid var(--cms-line); } .cms-msg-out { background: var(--cms-navy); color: #E6EEF6; margin-left: auto; } .cms-msg-meta { font-size: .72rem; opacity: .75; margin-top: .25rem; } /* ----------------------------- AUTH ------------------------------------- */ .cms-auth-wrap { min-height: calc(100vh - 70px); display: grid; place-items: center; padding: 2.5rem 1rem; } .cms-auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); box-shadow: var(--cms-shadow-lg); padding: 2rem; } /* ----------------------------- FOOTER ------------------------------------ */ .cms-footer { background: var(--cms-grad-bg); color: #E8EFF5; flex-shrink: 0; } .cms-footer-title { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .8rem; } .cms-footer-link { color: #E8EFF5; line-height: 2; } .cms-footer-link:hover { color: #FFE3C8; text-decoration: underline; } .cms-owner-box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--cms-radius-sm); padding: .8rem; color: #E8EFF5; } .cms-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; color: #8094A8; } /* ----------------------------- COOKIE BANNER ----------------------------- */ .cms-cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1080; max-width: 560px; margin: 0 auto; } .cms-cookie-inner { background: #fff; border: 1px solid var(--cms-line); border-radius: var(--cms-radius); box-shadow: var(--cms-shadow-lg); padding: 1.2rem 1.3rem; } /* Torna su. */ .cms-back-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; width: 44px; height: 44px; border-radius: 50%; background: var(--cms-navy); color: #fff; border: 0; display: none; place-items: center; font-size: 1.1rem; box-shadow: var(--cms-shadow-lg); } .cms-back-top.show { display: grid; } /* ----------------------------- UTILITY ----------------------------------- */ .cms-divider { height: 1px; background: var(--cms-line); margin: 1.5rem 0; } .text-cyan { color: var(--cms-cyan-d) !important; } .bg-soft { background: var(--cms-soft) !important; } .cms-list-check { list-style: none; padding-left: 0; } .cms-list-check li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; } .cms-list-check li::before { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--cms-cyan-d); } /* ----------------------------- RESPONSIVE -------------------------------- */ .cms-mobile-menu { background: var(--cms-navy); width: 290px; } .cms-mobile-nav a { display: flex; align-items: center; gap: .7rem; color: #E8EFF5; padding: .7rem .4rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07); text-decoration: none; } .cms-mobile-nav a:hover { color: #FFC68F; } .cms-mobile-nav i { width: 20px; text-align: center; } @media (max-width: 991.98px) { .cms-dash { flex-direction: column; } .cms-sidebar { width: 100%; position: static; } .cms-hero { padding: 56px 0 52px; } .cms-section { padding: 52px 0; } } @media print { .cms-header, .cms-footer, .cms-cookie-banner, .cms-back-top, .cms-sidebar { display: none !important; } } /* =========================================================================== BACK-OFFICE — utilità aggiuntive per le tabelle di gestione ===========================================================================*/ .cms-scms-ic-sm { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 9px; background: var(--cms-grad-el); border: 1px solid var(--cms-p2-700); color: #fff; font-size: 1.05rem; } .cms-table .table > :not(caption) > * > * { padding: .8rem 1rem; } .cms-admin-toolbar { gap: .5rem; } .cms-help-box { background: var(--cms-soft); border: 1px solid var(--cms-line); border-radius: 10px; padding: 1rem 1.1rem; font-size: .9rem; } /* Barra di avviso sito (gestita da Impostazioni) */ .cms-announce { background: linear-gradient(135deg, #DD6600 0%, var(--cms-p2-700) 100%); color: #fff; text-shadow: 0 1px 2px rgba(120, 56, 0, .5); font-size: .88rem; font-weight: 600; text-align: center; padding: .5rem 0; } .cms-announce .container { padding-top: 0; padding-bottom: 0; } /* =========================================================================== ELEMENTI TRANSLUCIDI (glassmorphism) — utility riutilizzabili --------------------------------------------------------------------------- .cms-glass → pannello translucido chiaro (su sfondi chiari) .cms-glass-dark → pannello translucido scuro (su gradienti di sfondo) =========================================================================== */ .cms-glass { background: var(--cms-glass-bg); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid var(--cms-glass-border); border-radius: var(--cms-radius); box-shadow: var(--cms-glass-shadow); } .cms-glass-dark { background: var(--cms-glass-bg-dark); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid rgba(255,255,255,.18); border-radius: var(--cms-radius); box-shadow: var(--cms-glass-shadow); } /* Badge di stato del sito (online / manutenzione) nel pannello. */ .cms-site-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; } .cms-site-status.is-online { background: rgba(255,119,1,.14); color: var(--cms-p2-text); } .cms-site-status.is-maintenance { background: rgba(201,135,10,.16); color: #8A6007; } /* Pagina pubblica "sito in manutenzione". */ .cms-maintenance-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--cms-grad-bg); color: #E6EEF6; padding: 2rem; } .cms-maintenance-card { max-width: 540px; text-align: center; background: var(--cms-glass-bg-dark); -webkit-backdrop-filter: var(--cms-glass-blur); backdrop-filter: var(--cms-glass-blur); border: 1px solid rgba(255,255,255,.18); border-radius: var(--cms-radius); box-shadow: var(--cms-glass-shadow); padding: 2.6rem 2.2rem; } .cms-maintenance-ic { width: 76px; height: 76px; margin: 0 auto 1.2rem; display: grid; place-items: center; border-radius: 18px; background: var(--cms-grad-el); color: #fff; font-size: 2.1rem; box-shadow: 0 8px 22px rgba(204,95,0,.30); } /* ========================================================================== */ /* CATALOGO SOFTWARE E SERVIZI */ /* Griglia di schede selezionabili, barra di selezione e modale richiesta. */ /* ========================================================================== */ /* --- Filtri per categoria --- */ .cms-catalog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; } .cms-catalog-filter { display: inline-flex; align-items: center; gap: .4rem; background: var(--cms-card); border: 1px solid var(--cms-line); color: var(--cms-p1-700); font-size: .86rem; font-weight: 600; padding: .42rem .85rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cms-catalog-filter:hover { background: var(--cms-soft); } .cms-catalog-filter.is-active { background: var(--cms-p1-700); border-color: var(--cms-p1-700); color: #fff; } .cms-catalog-filter-n { font-size: .74rem; background: rgba(0,0,0,.10); padding: .04em .5em; border-radius: 999px; } .cms-catalog-filter.is-active .cms-catalog-filter-n { background: rgba(255,255,255,.22); } /* --- Griglia delle schede --- */ .cms-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; padding-bottom: 5rem; /* spazio per la barra fissa */ } /* --- Scheda prodotto/servizio --- */ .cms-catalog-card { position: relative; background: var(--cms-card); border: 2px solid var(--cms-line); border-radius: var(--cms-radius); padding: 1.2rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; } .cms-catalog-card:hover { border-color: var(--cms-p1-300); box-shadow: var(--cms-shadow); } .cms-catalog-card:focus-visible { outline: 3px solid var(--cms-p2-700); outline-offset: 2px; } .cms-catalog-card.is-selected { border-color: var(--cms-p2-text); box-shadow: 0 0 0 3px rgba(255, 119, 1, .16); } .cms-catalog-card.is-hidden { display: none; } /* Spunta di selezione (in alto a destra) */ .cms-catalog-check { position: absolute; top: .7rem; right: .7rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cms-soft); color: transparent; border: 1px solid var(--cms-line); font-size: .9rem; transition: background .15s, color .15s; } .cms-catalog-card.is-selected .cms-catalog-check { background: var(--cms-p2-700); color: #fff; border-color: var(--cms-p2-700); } .cms-catalog-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .cms-catalog-ic { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,119,1,.14); color: var(--cms-p2-text); font-size: 1.4rem; } .cms-catalog-ver { font-size: .72rem; font-weight: 700; background: var(--cms-soft); color: var(--cms-p1-700); padding: .15em .55em; border-radius: 6px; } .cms-catalog-name { font-size: 1.02rem; font-weight: 700; color: var(--cms-p1-700); margin: 0 0 .15rem; padding-right: 1.8rem; line-height: 1.3; } .cms-catalog-cat { font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cms-muted); margin-bottom: .5rem; } .cms-catalog-desc { font-size: .9rem; color: var(--cms-ink); line-height: 1.55; margin-bottom: .7rem; } .cms-catalog-price { font-size: .84rem; font-weight: 600; color: #9E4A00; margin-bottom: .6rem; } .cms-catalog-tags { display: flex; flex-wrap: wrap; gap: .3rem; } .cms-catalog-tag { font-size: .72rem; font-weight: 600; background: var(--cms-soft); color: var(--cms-p1-700); padding: .16em .55em; border-radius: 5px; } /* --- Barra di selezione fissa in basso --- */ .cms-catalog-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; background: var(--cms-p1-900); border-top: 3px solid var(--cms-p2-700); box-shadow: 0 -6px 24px rgba(0,0,0,.22); padding: .7rem 0; } .cms-catalog-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cms-catalog-bar-info { color: #fff; font-size: .95rem; } .cms-catalog-bar-info strong { font-size: 1.2rem; color: #FFC68F; } .cms-catalog-bar-actions { display: flex; gap: .5rem; } .cms-catalog-bar .cms-btn-outline { border-color: rgba(255,255,255,.5); color: #fff; } .cms-catalog-bar .cms-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; } /* --- Modale richiesta --- */ .cms-modal { position: fixed; inset: 0; z-index: 1060; display: grid; place-items: center; padding: 1rem; } .cms-modal[hidden] { display: none; } .cms-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 53, 82, .62); } .cms-modal-dialog { position: relative; background: var(--cms-card); border-radius: var(--cms-radius); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--cms-shadow-lg); } .cms-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--cms-line); } .cms-modal-head h2 { color: var(--cms-p1-700); } .cms-modal-x { background: none; border: 0; cursor: pointer; color: var(--cms-muted); font-size: 1.1rem; padding: .2rem .4rem; border-radius: 6px; } .cms-modal-x:hover { background: var(--cms-soft); color: var(--cms-ink); } .cms-modal-body { padding: 1.2rem; } .cms-modal-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; } .cms-modal-selected { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; } .cms-modal-selected-item { font-size: .78rem; font-weight: 600; background: rgba(255,119,1,.14); color: #9E4A00; padding: .22em .6em; border-radius: 6px; } /* --- Responsive --- */ @media (max-width: 540px) { .cms-catalog-bar-inner { justify-content: center; } .cms-catalog-bar-actions { width: 100%; } .cms-catalog-bar-actions .btn { flex: 1; } } /* ========================================================================== */ /* GENERAZIONE FAQ CON AI — selettore di modalità */ /* ========================================================================== */ .cms-faqai-tabs { display: flex; gap: .35rem; margin-bottom: .8rem; } .cms-faqai-tab { flex: 1; background: var(--cms-soft); border: 1px solid var(--cms-line); color: var(--cms-p1-700); font-size: .82rem; font-weight: 600; padding: .4rem .5rem; border-radius: var(--cms-radius-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cms-faqai-tab:hover { background: var(--cms-line); } .cms-faqai-tab.is-active { background: var(--cms-p1-700); border-color: var(--cms-p1-700); color: #fff; } .cms-faqai-panel[hidden] { display: none; } /* ========================================================================== */ /* CONDIVISIONE SOCIAL E LINK AI PROFILI */ /* ========================================================================== */ /* --- Riquadro di condivisione (articoli, pagine) --- */ .cms-share { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.15rem; background: var(--cms-soft); border: 1px solid var(--cms-line); border-radius: var(--cms-radius); margin: 1.6rem 0; } .cms-share-label { font-weight: 600; font-size: .92rem; color: var(--cms-p1-700); white-space: nowrap; } .cms-share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; } /* Pulsante singolo di condivisione */ .cms-share-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .8rem; border-radius: 999px; border: 1px solid var(--cms-line); background: var(--cms-card); color: var(--cms-p1-700); font-size: .85rem; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .1s; } .cms-share-btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px); } .cms-share-btn:focus-visible { outline: 3px solid var(--cms-p2-700); outline-offset: 2px; } .cms-share-btn i { font-size: 1rem; } /* Colori di marca al passaggio del mouse */ .cms-share-facebook:hover { background: #1877F2; border-color: #1877F2; } .cms-share-x:hover { background: #000000; border-color: #000000; } .cms-share-linkedin:hover { background: #0A66C2; border-color: #0A66C2; } .cms-share-whatsapp:hover { background: #1EA952; border-color: #1EA952; } .cms-share-telegram:hover { background: #1E8FC4; border-color: #1E8FC4; } .cms-share-reddit:hover { background: #D93B00; border-color: #D93B00; } .cms-share-pinterest:hover { background: #BD081C; border-color: #BD081C; } .cms-share-bluesky:hover { background: #0073DD; border-color: #0073DD; } .cms-share-instagram:hover { background: #C13584; border-color: #C13584; } /* Il pulsante "copia link" è un