/* ==== THEME VARIABLES (shared site + panel) ==== */ :root{ /* Dark default unless theme-light on */ --bg:#0f172a; --card:#003087; --ink:#ffffff; --muted:#cbd5e1; --brand:#0055a4; /* blu brand */ --accent:#f28c38; /* arancione CTA */ --divider:rgba(255,255,255,.18); } :root.theme-light{ --bg:#f4f4f4; --card:#ffffff; --ink:#333333; --muted:#555555; --brand:#0055a4; --accent:#f28c38; --divider:#d1d5db; } /* ==== BASE / RESET MINIMO ==== */ *,*::before,*::after{ box-sizing:border-box; } html,body{ overflow-x:clip; } html body{ background:var(--bg); color:var(--ink); } body{ font-family:Arial, sans-serif; margin:0; padding:0; line-height:1.6; position:relative; } h1,h2,h3,h4,h5,h6,p,li,small,dt,dd{ color:var(--ink); } a{ color:var(--brand); text-decoration:none; } a:hover{ color:var(--accent); } /* ==== HEADER (bianco fisso per logo su fondo bianco) ==== */ header{ background:#ffffff; color:#0f172a; padding:10px 0px; display:flex; align-items:flex-end; justify-content:flex-start; border-bottom:2px solid var(--brand); } header .site-title{ font-size:1.2em; color:#0f172a; margin-left:0px; font-weight:bold; padding-bottom:9px; } header a{ color:#0f172a; } header a:hover{ color:var(--brand); } header img{ max-height:90px; height:auto; padding:0px; border-radius:5px; margin-top: 15px; margin-left: 10px; } /* ==== NAVBAR (blu sempre) ==== */ nav{ background:var(--brand); padding:10px; } nav ul{ list-style:none; padding:0; margin:0; display:flex; justify-content:center; align-items:center; } nav ul li{ display:inline; margin-right:15px; } nav ul li a{ color:#fff; font-size:1em; } nav ul li a:hover{ color:var(--accent); } /* ==== BANNER / HERO ==== */ .banner{ position:relative; padding:150px 20px; /* più respiro */ text-align:center; color:#fff; /* testo chiaro sempre */ background-image:url('../img/consulenza_banner.jpg'); background-size:cover; background-position:center; } .banner::before{ content:""; position:absolute; inset:0; background-color:rgba(0,0,0,.45); z-index:1; } .banner h1{ margin:0; font-size:2em; position:relative; z-index:2; text-shadow:0 2px 8px rgba(0,0,0,.55); color:#fff; /* evita che prenda var(--ink) in tema chiaro */ } .banner p{ position:relative; z-index:2; color:#fff; } .cta-button{ background:var(--accent); color:#fff; padding:10px 20px; border-radius:5px; display:inline-block; margin-top:15px; position:relative; z-index:2; transition:filter .2s ease; } .cta-button:hover{ filter:brightness(1.05); } /* Evita che la regola globale "a:hover { color: var(--accent) }" scurisca il testo */ a.cta-button, a.cta-button:hover, .ttc-btn, .ttc-btn:hover, .contact-buttons .btn, .contact-buttons .btn:hover{ color:#fff; } /* ==== LAYOUT CONTAINER (1600px) ==== */ /* Limitiamo le sezioni di contenuto, lasciando full-bleed il banner */ .services, .about, .contact-form, main{ max-width:1600px; margin:0 auto; padding-left:20px; padding-right:20px; } /* ==== SERVIZI ==== */ .services{ padding:10px 20px; background:var(--card); color:var(--ink); text-align:center; } /* In tema chiaro, fondale più chiaro per far spiccare le card */ :root.theme-light .services{ background:var(--bg); } .service-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:20px; align-items:stretch; } /* Base: card neutre (light) + hover comune */ .service-item{ display:flex; flex-direction:column; text-align:center; padding:20px; background:var(--card); color:var(--ink); border:1px solid var(--divider); border-radius:5px; box-shadow:0 0 0 rgba(0,0,0,0); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .service-item h3{ color:var(--ink); margin:10px 0; } .service-item p{ color:var(--ink); } .service-item img{ max-width:100%; height:150px; object-fit:cover; margin-bottom:10px; border-radius:3px; } .service-item .cta-button{ margin-top:auto; align-self:center; background:var(--accent); color:#fff; } .service-item:hover, .service-item:focus-within{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.28); filter:brightness(1.02); } /* In tema chiaro: un po' di elevazione default */ :root.theme-light .service-item{ border-color:#e5e7eb; box-shadow:0 6px 14px rgba(0,0,0,.08); } /* In tema scuro: card blu brand con testo bianco */ :root:not(.theme-light) .service-item{ background:var(--brand); color:#fff; border-color:rgba(255,255,255,.22); } :root:not(.theme-light) .service-item h3, :root:not(.theme-light) .service-item p{ color:#fff; } /* ==== ABOUT ==== */ .about{ padding:40px 20px; text-align:center; color:var(--ink); background-color:var(--card); background-image:url('../img/rete%20contatti.jpg'); background-size:cover; background-position:center; } /*@@ABOUT-TEXT-COLOR-FIX-BEGIN@@*/ #about { color: #ffffff; /* testo sempre chiaro su immagine scura */ } #about h2, #about h3, #about p { color: #ffffff; } /*@@ABOUT-TEXT-COLOR-FIX-END@@*/ /* ==== FOOTER (full-bleed, senza overflow) ==== */ footer.bottom-page{ box-sizing:border-box; width:100%; max-width:100%; margin:0; padding:10px 20px; background:var(--brand); color:#fff; text-align:center; font-size:.9em; border-top:1px solid var(--divider); overflow-x:clip; } /* ==== CONTACT PANEL (slide-in integrato, senza allargare pagina) ==== */ #ttcOverlay{ position:fixed; inset:0; background:rgba(2,6,23,.55); opacity:0; visibility:hidden; transition:.25s; z-index:9998; } #ttcOverlay.show{ opacity:1; visibility:visible; } /* Usa transform per evitare overflow orizzontale */ #ttcPanel{ position:fixed; right:0; top:50%; transform:translate(110%, -50%); /* fuori a destra */ width:min(520px, calc(100vw - 24px)); /* evita sforamento con scrollbar */ max-height:90svh; background:var(--card); color:var(--ink); box-shadow:-8px 0 30px rgba(0,0,0,.25); transition:transform .35s, background-color .35s, color .35s; display:flex; flex-direction:column; border-radius:20px 0 0 20px; overflow:hidden; z-index:9999; } #ttcPanel.show{ transform:translate(0, -50%); } #ttcPanel .ttc-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 0 20px; } #ttcPanel .ttc-head h3{ margin:0; font-size:20px; text-transform:uppercase; } #ttcPanel .ttc-x{ border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:inherit; } /* Evita scroll orizzontale nel body del pannello */ #ttcPanel .ttc-body{ padding:0 18px 18px 18px; overflow-y:auto; overflow-x:hidden; } /* Divider + azioni rapide */ #ttcPanel .ttc-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin:12px 0; padding:12px 0; border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); } #ttcPanel .ttc-btn{ appearance:none; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; font-weight:700; color:#fff; cursor:pointer; transition:background-color .35s; background:var(--brand); text-align:center; text-decoration:none; display:inline-block; } #ttcPanel .ttc-btn:hover{ background:var(--accent); } #ttcPanel .ttc-subtitle{ font-size:20px; font-weight:600; text-align:center; text-transform:uppercase; line-height:1.25; margin:18px 0 0; padding-bottom:0; } #ttcPanel .ttc-group{ margin-bottom:14px; } #ttcPanel label{ display:block; font-weight:700; margin-bottom:6px; color:var(--ink); } /* Campi: padding verticale 10, niente overflow */ #ttcPanel input, #ttcPanel textarea{ display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box; padding:10px 0; /* richiesto: 10 top/bottom, 0 laterali */ padding-inline: 12px; /* spazio a sinistra/destra */ border:1px solid #cbd5e1; border-radius:10px; font:inherit; background:#fff; color:#0f172a; } #ttcPanel textarea{ min-height:120px; resize:vertical; } #ttcPanel .ttc-consent{ display:flex; align-items:center; gap:8px; margin-top:6px; } #ttcPanel .ttc-consent input{ flex:0 0 16px; width:16px; height:16px; margin:2px 0 0 0; } #ttcPanel .ttc-consent label{ display:inline; flex:1; margin:0; line-height:1.35; overflow-wrap:anywhere; } #ttcPanel .ttc-submit{ margin-top:14px; background:var(--accent); color:#fff; border:0; border-radius:12px; padding:12px 14px; font-weight:700; cursor:pointer; opacity:.6; } #ttcPanel .ttc-submit.enabled{ opacity:1; } /* ==== THEME SWITCH (top-right floating) ==== */ .theme-switch{ position:fixed; top:8px; right:8px; width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer; z-index:10000; box-shadow:0 2px 10px rgba(0,0,0,.2); transition:background-color .25s,border-color .25s,transform .15s; } .theme-switch:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); } .theme-switch .icon{ font-size:18px; line-height:1; } /* icona del tema successivo */ :root.theme-light .theme-switch .sun{ display:none; } :root.theme-light .theme-switch .moon{ display:block; } :root:not(.theme-light) .theme-switch .sun{ display:block; } :root:not(.theme-light) .theme-switch .moon{ display:none; } :root.theme-light .theme-switch{ border-color:#e5e7eb; background:#ffffffcc; } .theme-switch:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px rgba(2,132,199,.35); } /* ==== MEDIA (mobile) ==== */ @media (max-width:768px){ .banner h1{ font-size:1.5em; } .service-grid{ grid-template-columns:1fr; } .service-item{ margin:10px 0; } header{ flex-direction:column; text-align:center; } header .site-title{ margin-left:0; margin-top:5px; } header img{ margin-right:0; margin-bottom:10px; } nav ul{ flex-direction:column; align-items:center; } nav ul li{ margin:5px 0; } .contact-buttons .btn{ width:100%; margin:5px 0; } }