/* ============================================================ SmartingLab.it — Main Stylesheet Design: Tech + Professionale | Palette: Teal + Neutri caldi ============================================================ */ /* Art direction: Centro assistenza tech, Caserta → Professionale, affidabile, moderno Palette: warm neutrals + teal accent Typography: Cabinet Grotesk (display) + Satoshi (body) Density: bilanciata */ /* ── Design Tokens ───────────────────────────────────────── */ :root, [data-theme="light"] { --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #f0ede8; --color-divider: #dcd9d5; --color-border: #d4d1ca; --color-text: #28251d; --color-text-muted: #6b6a65; --color-text-faint: #b0aea9; --color-text-inverse: #f9f8f4; --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-primary-active: #0f3638; --color-primary-light: #e0f0ef; --color-success: #437a22; --color-error: #c0392b; --color-warning: #e67e22; --shadow-sm: 0 1px 3px rgba(40,37,29,.07); --shadow-md: 0 4px 16px rgba(40,37,29,.09); --shadow-lg: 0 12px 40px rgba(40,37,29,.13); --radius-sm: .375rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-xl: 1rem; --radius-full: 9999px; --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; --text-xs: clamp(.75rem, .7rem + .25vw, .875rem); --text-sm: clamp(.875rem, .8rem + .35vw, 1rem); --text-base: clamp(1rem, .95rem + .25vw, 1.125rem); --text-lg: clamp(1.125rem,1rem + .75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw,2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --content-narrow:640px; --content-default:960px; --content-wide:1200px; --transition: 180ms cubic-bezier(.16,1,.3,1); } [data-theme="dark"] { --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-offset: #252320; --color-divider: #2a2926; --color-border: #393836; --color-text: #cdccca; --color-text-muted: #797876; --color-text-faint: #5a5957; --color-text-inverse: #2b2a28; --color-primary: #4f98a3; --color-primary-hover: #3d8390; --color-primary-active: #2d6e7a; --color-primary-light: #1e3335; --color-success: #6daa45; --color-error: #e74c3c; --color-warning: #f39c12; --shadow-sm: 0 1px 3px rgba(0,0,0,.25); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg:#171614; --color-surface:#1c1b19; --color-surface-2:#201f1d; --color-surface-offset:#252320; --color-divider:#2a2926; --color-border:#393836; --color-text:#cdccca; --color-text-muted:#797876; --color-text-faint:#5a5957; --color-primary:#4f98a3; --color-primary-hover:#3d8390; --color-primary-light:#1e3335; --shadow-sm:0 1px 3px rgba(0,0,0,.25); --shadow-md:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.45); } } /* ── Reset & Base ────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:none;text-size-adjust:none; -webkit-font-smoothing:antialiased;scroll-behavior:smooth; scroll-padding-top:var(--space-20)} body{min-height:100dvh;line-height:1.65; font-family:var(--font-body);font-size:var(--text-base); color:var(--color-text);background:var(--color-bg)} img,picture,video,canvas,svg{display:block;max-width:100%;height:auto} ul[role="list"],ol[role="list"]{list-style:none} input,button,textarea,select{font:inherit;color:inherit} h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.15;font-family:var(--font-display)} p,li,figcaption{text-wrap:pretty;max-width:72ch} button{cursor:pointer;background:none;border:none} table{border-collapse:collapse;width:100%} address{font-style:normal} a{color:var(--color-primary);text-decoration:none; transition:color var(--transition)} a:hover{color:var(--color-primary-hover)} ::selection{background:color-mix(in oklch,var(--color-primary) 25%,transparent);color:var(--color-text)} :focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ── Layout ──────────────────────────────────────────────── */ .container{max-width:var(--content-wide);margin-inline:auto; padding-inline:clamp(var(--space-4),4vw,var(--space-12))} .container--narrow{max-width:var(--content-narrow)} .container--default{max-width:var(--content-default)} /* ── Skip link ───────────────────────────────────────────── */ .skip-link{position:absolute;top:-100%;left:var(--space-4);z-index:1000; background:var(--color-primary);color:#fff;padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700} .skip-link:focus{top:var(--space-4)} /* ── Header ──────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:100; background:color-mix(in oklch,var(--color-bg) 92%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--color-border); transition:box-shadow var(--transition)} .site-header.scrolled{box-shadow:var(--shadow-sm)} .header-inner{display:flex;align-items:center;gap:var(--space-6); padding-block:var(--space-3)} /* Logo */ .logo{display:flex;align-items:center;gap:var(--space-2); color:var(--color-text);text-decoration:none} .logo-text{font-family:var(--font-display);font-size:var(--text-lg); font-weight:800;letter-spacing:-.02em;color:var(--color-text)} .logo-text strong{color:var(--color-primary)} /* Nav */ .main-nav{margin-left:auto} .main-nav ul{display:flex;align-items:center;gap:var(--space-2);list-style:none} .nav-link{display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500; color:var(--color-text-muted);text-decoration:none; transition:color var(--transition),background var(--transition)} .nav-link:hover,.nav-link.active{color:var(--color-primary);background:var(--color-primary-light)} .btn-nav{background:var(--color-primary);color:#fff!important; padding:var(--space-2) var(--space-5);border-radius:var(--radius-full)!important; font-weight:600} .btn-nav:hover{background:var(--color-primary-hover)!important;color:#fff} /* Header actions */ .header-actions{display:flex;align-items:center;gap:var(--space-2);margin-left:var(--space-4)} .btn-icon{display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:var(--radius-md); color:var(--color-text-muted); transition:color var(--transition),background var(--transition)} .btn-icon:hover{color:var(--color-text);background:var(--color-surface-offset)} /* Hamburger */ .hamburger{display:none;flex-direction:column;justify-content:center; gap:5px;width:40px;height:40px;padding:var(--space-2); border-radius:var(--radius-md);color:var(--color-text); touch-action:manipulation;-webkit-tap-highlight-color:transparent; cursor:pointer;-webkit-appearance:none;appearance:none} .hamburger span{display:block;height:2px;background:currentColor;border-radius:2px; transition:transform var(--transition),opacity var(--transition)} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Buttons ─────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:var(--space-2); padding:var(--space-3) var(--space-6);border-radius:var(--radius-full); font-size:var(--text-sm);font-weight:600;text-decoration:none; transition:all var(--transition);cursor:pointer;border:none; white-space:nowrap} .btn-primary{background:var(--color-primary);color:#fff} .btn-primary:hover{background:var(--color-primary-hover);color:#fff; transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn-outline{background:transparent;color:var(--color-primary); border:2px solid var(--color-primary)} .btn-outline:hover{background:var(--color-primary);color:#fff} .btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base)} /* ── Sections ────────────────────────────────────────────── */ .section{padding-block:clamp(var(--space-12),7vw,var(--space-24))} .section--alt{background:var(--color-surface)} .section__header{text-align:center;max-width:600px;margin:0 auto var(--space-12)} .section__eyebrow{display:inline-block;font-size:var(--text-xs);font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:var(--color-primary);margin-bottom:var(--space-3)} .section__title{font-size:var(--text-2xl);font-weight:900; color:var(--color-text);margin-bottom:var(--space-4)} .section__subtitle{font-size:var(--text-base);color:var(--color-text-muted); max-width:55ch;margin-inline:auto} /* ── Hero ────────────────────────────────────────────────── */ .hero{padding-block:clamp(var(--space-16),10vw,var(--space-24)); background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-bg) 60%); overflow:hidden;position:relative} .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12); align-items:center} .hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2); background:var(--color-primary-light);color:var(--color-primary); padding:var(--space-2) var(--space-4);border-radius:var(--radius-full); font-size:var(--text-xs);font-weight:700;text-transform:uppercase; letter-spacing:.08em;margin-bottom:var(--space-6)} .hero-title{font-size:var(--text-3xl);font-weight:900;line-height:1.05; color:var(--color-text);margin-bottom:var(--space-6)} .hero-title span{color:var(--color-primary)} .hero-desc{font-size:var(--text-lg);color:var(--color-text-muted); margin-bottom:var(--space-8);max-width:50ch} .hero-cta{display:flex;gap:var(--space-4);flex-wrap:wrap;align-items:center} .hero-badges{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-8)} .badge{display:inline-flex;align-items:center;gap:var(--space-2); padding:var(--space-2) var(--space-3);background:var(--color-surface); border:1px solid var(--color-border);border-radius:var(--radius-full); font-size:var(--text-xs);color:var(--color-text-muted)} .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--color-primary); animation:pulse 2s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.9)}} .hero-visual{position:relative;display:flex;justify-content:center;align-items:center} .hero-device-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)} .device-card{background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-xl);padding:var(--space-5); box-shadow:var(--shadow-md);text-align:center} .device-card .icon{font-size:2.5rem;margin-bottom:var(--space-2)} .device-card p{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500} @media(max-width:768px){ .hero-inner{grid-template-columns:1fr} .hero-visual{display:none} } /* ── Servizi Grid ────────────────────────────────────────── */ .servizi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--space-6)} .servizio-card{background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-xl);padding:var(--space-6); transition:transform var(--transition),box-shadow var(--transition)} .servizio-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .servizio-icon{width:52px;height:52px;background:var(--color-primary-light); border-radius:var(--radius-lg);display:flex;align-items:center; justify-content:center;margin-bottom:var(--space-4); color:var(--color-primary);font-size:1.5rem} .servizio-card h3{font-size:var(--text-lg);font-weight:700; margin-bottom:var(--space-2);color:var(--color-text)} .servizio-card p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6} .servizio-price{display:inline-block;margin-top:var(--space-3); font-size:var(--text-xs);font-weight:700;color:var(--color-primary); background:var(--color-primary-light);padding:var(--space-1) var(--space-3); border-radius:var(--radius-full)} /* ── FAQ ─────────────────────────────────────────────────── */ .faq-list{max-width:800px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)} .faq-item{background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-lg);overflow:hidden} .faq-question{width:100%;text-align:left;padding:var(--space-5) var(--space-6); font-size:var(--text-base);font-weight:600;color:var(--color-text); display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); cursor:pointer;background:none;border:none; transition:background var(--transition)} .faq-question:hover{background:var(--color-surface-offset)} .faq-question[aria-expanded="true"]{color:var(--color-primary)} .faq-arrow{width:20px;height:20px;flex-shrink:0;color:var(--color-text-muted); transition:transform var(--transition)} .faq-question[aria-expanded="true"] .faq-arrow{transform:rotate(180deg);color:var(--color-primary)} .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease} .faq-answer.open{max-height:500px} .faq-answer-inner{padding:0 var(--space-6) var(--space-5); color:var(--color-text-muted);font-size:var(--text-base);line-height:1.7} /* ── Blog cards ──────────────────────────────────────────── */ .blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:var(--space-6)} .blog-card{background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-xl);overflow:hidden; transition:transform var(--transition),box-shadow var(--transition); display:flex;flex-direction:column} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .blog-card__img{aspect-ratio:16/9;background:var(--color-surface-offset); overflow:hidden} .blog-card__img img{width:100%;height:100%;object-fit:cover; transition:transform .4s ease} .blog-card:hover .blog-card__img img{transform:scale(1.05)} .blog-card__body{padding:var(--space-5);flex:1;display:flex;flex-direction:column} .blog-card__cat{font-size:var(--text-xs);font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--color-primary); margin-bottom:var(--space-2)} .blog-card__title{font-size:var(--text-lg);font-weight:700;color:var(--color-text); margin-bottom:var(--space-2);line-height:1.3} .blog-card__excerpt{font-size:var(--text-sm);color:var(--color-text-muted); flex:1;line-height:1.6} .blog-card__footer{display:flex;align-items:center;justify-content:space-between; margin-top:var(--space-4);padding-top:var(--space-4); border-top:1px solid var(--color-border); font-size:var(--text-xs);color:var(--color-text-faint)} /* ── CTA Banner ──────────────────────────────────────────── */ .cta-banner{background:var(--color-primary);color:#fff; padding-block:clamp(var(--space-10),6vw,var(--space-20));text-align:center} .cta-banner h2{font-size:var(--text-2xl);font-weight:900;margin-bottom:var(--space-4)} .cta-banner p{font-size:var(--text-lg);opacity:.9;margin-bottom:var(--space-8)} .cta-banner .btn-outline{border-color:#fff;color:#fff} .cta-banner .btn-outline:hover{background:#fff;color:var(--color-primary)} /* ── Stats ───────────────────────────────────────────────── */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--space-6);text-align:center} .stat-item strong{display:block;font-size:var(--text-2xl);font-weight:900; color:var(--color-primary);font-family:var(--font-display)} .stat-item span{font-size:var(--text-sm);color:var(--color-text-muted)} /* ── Forms ───────────────────────────────────────────────── */ .form-grid{display:grid;gap:var(--space-5)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)} @media(max-width:600px){.form-row{grid-template-columns:1fr}} .form-group{display:flex;flex-direction:column;gap:var(--space-2)} .form-group label{font-size:var(--text-sm);font-weight:600;color:var(--color-text)} .form-group input,.form-group textarea,.form-group select{ padding:var(--space-3) var(--space-4); background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-md);font-size:var(--text-base);color:var(--color-text); transition:border-color var(--transition),box-shadow var(--transition)} .form-group input:focus,.form-group textarea:focus,.form-group select:focus{ outline:none;border-color:var(--color-primary); box-shadow:0 0 0 3px color-mix(in oklch,var(--color-primary) 15%,transparent)} .form-group textarea{resize:vertical;min-height:140px} .form-msg{padding:var(--space-4);border-radius:var(--radius-md); font-size:var(--text-sm);font-weight:600;display:none} .form-msg.success{background:color-mix(in oklch,var(--color-success) 12%,transparent); color:var(--color-success);border:1px solid var(--color-success);display:block} .form-msg.error{background:color-mix(in oklch,var(--color-error) 12%,transparent); color:var(--color-error);border:1px solid var(--color-error);display:block} /* ── Footer ──────────────────────────────────────────────── */ .site-footer{background:var(--color-surface);border-top:1px solid var(--color-border); padding-top:clamp(var(--space-12),6vw,var(--space-20))} .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:var(--space-10);padding-bottom:var(--space-12)} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.footer-grid{grid-template-columns:1fr}} .footer-brand p{font-size:var(--text-sm);color:var(--color-text-muted); margin-top:var(--space-4);max-width:32ch;line-height:1.6} .footer-social{display:flex;gap:var(--space-3);margin-top:var(--space-4)} .footer-social a{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:var(--radius-md); background:var(--color-surface-offset);color:var(--color-text-muted); transition:all var(--transition)} .footer-social a:hover{background:var(--color-primary);color:#fff} .footer-col h3{font-size:var(--text-sm);font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--color-text-muted); margin-bottom:var(--space-4)} .footer-col ul{display:flex;flex-direction:column;gap:var(--space-2)} .footer-col a{font-size:var(--text-sm);color:var(--color-text-muted); text-decoration:none;transition:color var(--transition)} .footer-col a:hover{color:var(--color-primary)} .footer-col address p{font-size:var(--text-sm);color:var(--color-text-muted); margin-bottom:var(--space-2)} .footer-hours{margin-top:var(--space-4);padding:var(--space-3); background:var(--color-surface-offset);border-radius:var(--radius-md)} .footer-hours p{font-size:var(--text-xs);color:var(--color-text-muted)} .footer-bottom{border-top:1px solid var(--color-border); padding-block:var(--space-5);text-align:center} .footer-bottom p{font-size:var(--text-xs);color:var(--color-text-faint)} .footer-bottom a{color:var(--color-text-muted)} .footer-bottom a:hover{color:var(--color-primary)} /* ── Page header interno ─────────────────────────────────── */ .page-hero{padding-block:clamp(var(--space-10),6vw,var(--space-16)); background:linear-gradient(135deg,var(--color-primary-light),var(--color-bg)); text-align:center} .page-hero h1{font-size:var(--text-2xl);font-weight:900;margin-bottom:var(--space-4)} .page-hero p{font-size:var(--text-lg);color:var(--color-text-muted);max-width:55ch;margin-inline:auto} /* ── Alert ───────────────────────────────────────────────── */ .alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md); font-size:var(--text-sm);margin-bottom:var(--space-5)} .alert-success{background:color-mix(in oklch,var(--color-success) 12%,transparent); color:var(--color-success);border:1px solid currentColor} .alert-error{background:color-mix(in oklch,var(--color-error) 12%,transparent); color:var(--color-error);border:1px solid currentColor} /* Mobile menu - definitivo */ @media (max-width: 768px) { .hamburger { display: flex; } .main-nav { position: fixed; top: 70px; left: 0; right: 0; background: var(--color-surface); padding: 1rem; max-height: 0; /* nascosto: altezza zero */ overflow: hidden; /* nessun contenuto fuori viewport */ opacity: 0; visibility: hidden; transition: max-height 0.35s ease, opacity 0.3s ease, visibility 0.3s; z-index: 1000; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .main-nav.open { max-height: calc(100vh - 70px); /* si apre verso il basso */ opacity: 1; visibility: visible; } .main-nav ul { flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; } .main-nav ul li { width: 100%; } .main-nav ul li a { display: block; padding: 0.75rem 0; font-size: 1.125rem; } .header-actions { gap: 0.5rem; } } @media (min-width: 769px) { .hamburger { display: none; } }