/* ============================================================ VENERECLOUD SOTTOPAGINE — CSS UNIFICATO 2025 Palette coerente con venerebcloud-landing.css Navy #0A2472 | Sky #0ea5e9 | Green #15803d Font: 'Segoe UI', system-ui — stesso della landing ============================================================ */ /* === ROOT: eredita dalla landing, aggiunge variabili spoke === */ :root { --navy: #0A2472; --navy-light: #1e3a8a; --sky: #0ea5e9; --sky-light: #e0f2fe; --green: #15803d; --green-bg: #f0fdf4; --green-border: #86efac; --gold: #d97706; --red: #dc2626; --text-dark: #1e293b; --text-mid: #334155; --text-muted: #64748b; --border: #e2e8f0; --bg-light: #f8fafc; --bg-blue: #f0f7ff; --white: #ffffff; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 1px 4px rgba(10,36,114,.07); --shadow-md: 0 4px 16px rgba(10,36,114,.10); --shadow-lg: 0 10px 36px rgba(10,36,114,.16); /* Accent per spoke — default navy/sky, sovrascrivibile per pagina */ --accent: var(--navy); --accent-soft: var(--bg-blue); --accent-border: #bfdbfe; --accent-text: var(--navy); } /* Varianti accent per ciascuna sotto-pagina (applica su ) */ body.accent-sky { --accent:#0284c7; --accent-soft:#f0f9ff; --accent-border:#bae6fd; --accent-text:#0369a1; } body.accent-violet { --accent:#7c3aed; --accent-soft:#faf5ff; --accent-border:#ddd6fe; --accent-text:#5b21b6; } body.accent-teal { --accent:#0d9488; --accent-soft:#f0fdfa; --accent-border:#99f6e4; --accent-text:#0f766e; } body.accent-amber { --accent:#d97706; --accent-soft:#fffbeb; --accent-border:#fde68a; --accent-text:#92400e; } body.accent-emerald { --accent:#059669; --accent-soft:#f0fdf4; --accent-border:#a7f3d0; --accent-text:#065f46; } /* === BASE === */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif; color: var(--text-dark); background: var(--white); margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ============================================================ NAVBAR — sfondo bianco, logo su bianco, sottile shadow ============================================================ */ .sp-navbar { background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 1px 8px rgba(10,36,114,.07); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 0; z-index: 200; } .sp-navbar-logo img { height: 42px; width: auto; display: block; } .sp-navbar-links { display: flex; align-items: center; gap: 6px; } .sp-navbar-links a { color: var(--text-mid); font-size: 14px; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: var(--radius-sm); transition: background .18s, color .18s; white-space: nowrap; } .sp-navbar-links a:hover { background: var(--bg-light); color: var(--navy); } .sp-navbar-links a.sp-nav-back { color: var(--navy); font-size: 13px; } .sp-navbar-links a.sp-nav-wa { color: #16a34a; } .sp-navbar-links a.sp-nav-cta { background: var(--navy); color: var(--white); font-weight: 700; padding: 8px 18px; border-radius: var(--radius-md); transition: background .18s, transform .12s; } .sp-navbar-links a.sp-nav-cta:hover { background: var(--navy-light); transform: translateY(-1px); } /* ============================================================ BREADCRUMB ============================================================ */ .sp-breadcrumb { background: var(--bg-light); border-bottom: 1px solid var(--border); padding: 9px 28px; font-size: 13px; color: var(--text-muted); } .sp-breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 500; } .sp-breadcrumb a:hover { text-decoration: underline; } .sp-breadcrumb .sp-bc-sep { margin: 0 7px; color: #cbd5e1; } .sp-breadcrumb strong { color: var(--text-dark); font-weight: 600; } /* ============================================================ CONTENITORE PAGINA ============================================================ */ .sp-page { max-width: 900px; margin: 0 auto; padding: 0 24px 72px; } /* ============================================================ HERO SPOKE ============================================================ */ .sp-hero { padding: 52px 0 40px; border-bottom: 1px solid var(--border); margin-bottom: 52px; } .sp-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-border); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 5px 13px; border-radius: 100px; margin-bottom: 20px; } .sp-hero h1 { font-size: clamp(22px, 4vw, 36px); font-weight: 800; color: var(--navy); line-height: 1.2; margin: 0 0 18px; letter-spacing: -.02em; } .sp-hero-sub { font-size: 17px; color: var(--text-mid); line-height: 1.7; max-width: 680px; margin: 0 0 28px; } /* Pills incluse / tag */ .sp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .sp-pill { background: var(--bg-light); border: 1px solid var(--border); color: var(--text-mid); font-size: 13px; font-weight: 600; padding: 5px 13px; border-radius: 100px; } .sp-pill.sp-pill-accent { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); } /* CTA hero */ .sp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .sp-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; padding: 12px 24px; border-radius: var(--radius-md); text-decoration: none; transition: transform .14s, box-shadow .14s, background .16s; white-space: nowrap; } .sp-btn:hover { transform: translateY(-2px); } .sp-btn-primary { background: var(--navy); color: var(--white); box-shadow: 0 3px 12px rgba(10,36,114,.25); } .sp-btn-primary:hover { background: var(--navy-light); color: var(--white); box-shadow: var(--shadow-lg); } .sp-btn-outline { background: var(--white); color: var(--navy); border: 2px solid var(--border); } .sp-btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-blue); } /* ============================================================ SCREENSHOT PRINCIPALE (hero image) ============================================================ */ .sp-main-shot { margin: 0 0 56px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .sp-main-shot img { width: 100%; height: auto; display: block; } .sp-shot-caption { background: var(--bg-light); border-top: 1px solid var(--border); padding: 10px 18px; font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; } /* ============================================================ SEZIONI CONTENUTO ============================================================ */ .sp-section { margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--border); } .sp-section:last-of-type { border-bottom: none; } .sp-section-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .sp-section-icon { font-size: 30px; line-height: 1; flex-shrink: 0; margin-top: 3px; } .sp-section h2 { font-size: clamp(19px, 2.8vw, 24px); font-weight: 800; color: var(--navy); margin: 0; line-height: 1.25; letter-spacing: -.01em; } .sp-section-lead { font-size: 16px; color: var(--text-mid); line-height: 1.75; margin: 0 0 24px; } /* ============================================================ LISTA FEATURE ============================================================ */ .sp-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; } .sp-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-mid); line-height: 1.6; } .sp-list li::before { content: '✓'; color: var(--accent); font-weight: 900; font-size: 11px; flex-shrink: 0; margin-top: 3px; background: var(--accent-soft); min-width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-border); } /* ============================================================ SCREENSHOT INLINE ============================================================ */ .sp-shot { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border); margin: 24px 0; } .sp-shot img { width: 100%; height: auto; display: block; } .sp-shot .sp-shot-caption { padding: 8px 14px; font-size: 12px; } /* ============================================================ HIGHLIGHT BOX ============================================================ */ .sp-highlight { background: var(--accent-soft); border: 1px solid var(--accent-border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 18px 22px; font-size: 15px; color: var(--accent-text); font-weight: 600; line-height: 1.6; margin: 20px 0; } /* ============================================================ ALERT BOX (warning/info) ============================================================ */ .sp-alert { background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f97316; border-radius: var(--radius-md); padding: 18px 22px; margin: 20px 0; display: flex; gap: 14px; align-items: flex-start; } .sp-alert-icon { font-size: 22px; flex-shrink: 0; line-height: 1.3; } .sp-alert strong { font-size: 14px; font-weight: 700; color: #9a3412; display: block; margin-bottom: 5px; } .sp-alert p { font-size: 14px; color: #7c2d12; margin: 0; line-height: 1.65; } /* ============================================================ CARD GRIGLIA MODULI / FUNZIONALITÀ ============================================================ */ .sp-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 52px; } .sp-card { background: var(--bg-light); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-md); padding: 20px; transition: box-shadow .18s, transform .18s; } .sp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .sp-card-icon { font-size: 26px; margin-bottom: 10px; display: block; } .sp-card strong { font-size: 14px; font-weight: 700; color: var(--navy); display: block; margin-bottom: 6px; } .sp-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.55; } /* ============================================================ KPI ROW — metriche in evidenza ============================================================ */ .sp-kpi-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0; } .sp-kpi { flex: 1; min-width: 130px; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-md); padding: 18px 16px; text-align: center; } .sp-kpi-num { font-size: 28px; font-weight: 900; color: var(--accent); display: block; margin-bottom: 4px; letter-spacing: -.02em; } .sp-kpi-label { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* Paragrafo descrittivo sotto il label nel kpi */ p.sp-kpi-label { margin-top: 6px; } /* Icona emoji grande dentro sp-flow-step */ .sp-flow-step-icon { font-size: 22px; display: block; margin-bottom: 6px; } /* ============================================================ GRID 2 COLONNE (schede tecniche, fornitori, ecc.) ============================================================ */ .sp-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; } @media (max-width: 580px) { .sp-two-col { grid-template-columns: 1fr; } } .sp-col-box { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; /* header a filo bordo */ background: var(--white); } /* Header colorato — si comporta come "tab title" */ .sp-col-box-header { font-size: 13px; font-weight: 700; padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } /* Body con padding separato */ .sp-col-box-body { padding: 16px 18px; } /* Retrocompatibilità: se non c'è .sp-col-box-body, il padding va al box */ .sp-col-box > ul { padding: 14px 18px; margin: 0; } .sp-col-box ul { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--text-mid); display: flex; flex-direction: column; gap: 8px; } .sp-col-box ul li { padding-left: 14px; position: relative; line-height: 1.5; } .sp-col-box ul li::before { content: '·'; position: absolute; left: 0; color: #94a3b8; font-weight: 900; font-size: 16px; line-height: 1.2; } /* ── VARIANTI COLORE col-box ─────────────────────── */ /* BLU — parrucchieri / agenda */ .sp-col-blue { border-color: #bfdbfe; } .sp-col-blue .sp-col-box-header { background: #dbeafe; color: #1e40af; border-bottom-color: #bfdbfe; } .sp-col-blue .sp-col-box ul li::before { color: #3b82f6; } /* ROSA — estetiche */ .sp-col-pink { border-color: #fbcfe8; } .sp-col-pink .sp-col-box-header { background: #fce7f3; color: #9d174d; border-bottom-color: #fbcfe8; } .sp-col-pink .sp-col-box ul li::before { color: #ec4899; } /* ARANCIO — magazzino / alert */ .sp-col-orange { border-color: #fed7aa; } .sp-col-orange .sp-col-box-header { background: #ffedd5; color: #9a3412; border-bottom-color: #fed7aa; } .sp-col-orange .sp-col-box ul li::before { color: #f97316; } /* SLATE — generico */ .sp-col-slate { border-color: var(--border); } .sp-col-slate .sp-col-box-header { background: var(--bg-light); color: var(--navy); } /* VERDE — prima nota / magazzino */ .sp-col-green { border-color: var(--green-border); } .sp-col-green .sp-col-box-header { background: var(--green-bg); color: #166534; border-bottom-color: var(--green-border); } .sp-col-green .sp-col-box ul li::before { color: var(--green); } /* ROSSO — avvisi */ .sp-col-red { border-color: #fecaca; } .sp-col-red .sp-col-box-header { background: #fef2f2; color: #7f1d1d; border-bottom-color: #fecaca; } .sp-col-red .sp-col-box ul li::before { color: #ef4444; } /* ============================================================ SALDI / BADGE NUMERI (prima nota) ============================================================ */ .sp-badges-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 52px; } @media (max-width: 580px) { .sp-badges-grid { grid-template-columns: 1fr 1fr; } } .sp-badge-num { background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--radius-md); padding: 16px 14px; text-align: center; } .sp-badge-num span { font-size: 26px; display: block; margin-bottom: 5px; } .sp-badge-num strong { font-size: 13px; color: var(--navy); display: block; margin-bottom: 3px; } .sp-badge-num p { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; } /* ============================================================ STEP FLOW (giroconto, processi) ============================================================ */ .sp-flow { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; margin: 20px 0; } .sp-flow strong { font-size: 14px; color: var(--navy); display: block; margin-bottom: 16px; font-weight: 700; } .sp-flow-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sp-flow-step { flex: 1; min-width: 110px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; text-align: center; font-size: 13px; color: var(--text-mid); } .sp-flow-step strong { font-size: 13px; color: var(--navy); display: block; margin-bottom: 3px; } .sp-flow-arrow { font-size: 20px; color: var(--accent); font-weight: 900; flex-shrink: 0; } /* ============================================================ GRID VANTAGGI (6 box) ============================================================ */ .sp-vantaggi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; } @media (max-width: 620px) { .sp-vantaggi { grid-template-columns: 1fr 1fr; } } .sp-vantaggio { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; transition: box-shadow .18s, transform .18s; } .sp-vantaggio:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .sp-vantaggio-icon { font-size: 26px; margin-bottom: 10px; display: block; background: var(--accent-soft); width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .sp-vantaggio strong { font-size: 14px; color: var(--navy); display: block; margin-bottom: 5px; font-weight: 700; } .sp-vantaggio p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; } /* ============================================================ GALLERY SCREENSHOT ============================================================ */ .sp-gallery { margin: 0 0 56px; } .sp-gallery-title { font-size: 20px; font-weight: 800; color: var(--navy); margin: 0 0 5px; letter-spacing: -.01em; } .sp-gallery-sub { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; } .sp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .sp-gallery-item { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: box-shadow .18s, transform .18s; } .sp-gallery-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .sp-gallery-item a { display: block; } .sp-gallery-item img { width: 100%; height: auto; display: block; } .sp-gallery-cap { padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-mid); border-top: 1px solid var(--border); background: var(--bg-light); } /* ============================================================ FAQ ============================================================ */ .sp-faq { margin: 0 0 56px; } .sp-faq-title { font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 24px; letter-spacing: -.01em; } .sp-faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px; margin-bottom: 10px; background: var(--white); transition: box-shadow .15s, border-left-color .15s; border-left: 3px solid transparent; } .sp-faq-item:hover { box-shadow: var(--shadow-sm); border-left-color: var(--accent); } .sp-faq-item h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.4; } .sp-faq-item p { font-size: 14px; color: var(--text-mid); margin: 0; line-height: 1.7; } /* ============================================================ CTA FINALE ============================================================ */ .sp-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); border-radius: var(--radius-xl); padding: 44px 36px; text-align: center; margin-bottom: 40px; box-shadow: var(--shadow-lg); } .sp-cta h2 { font-size: clamp(20px, 3.2vw, 28px); font-weight: 800; color: var(--white); margin: 0 0 10px; letter-spacing: -.01em; } .sp-cta p { font-size: 16px; color: #bfdbfe; margin: 0 0 28px; } .sp-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; } .sp-cta-btn-main { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--navy); font-size: 15px; font-weight: 800; padding: 14px 28px; border-radius: var(--radius-md); text-decoration: none; box-shadow: 0 4px 14px rgba(255,255,255,.2); transition: transform .14s, box-shadow .14s; } .sp-cta-btn-main:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,.3); color: var(--navy); } .sp-cta-btn-wa { display: inline-flex; align-items: center; gap: 8px; background: #25D366; color: var(--white); font-size: 15px; font-weight: 700; padding: 14px 24px; border-radius: var(--radius-md); text-decoration: none; transition: opacity .15s; } .sp-cta-btn-wa:hover { opacity: .88; color: var(--white); } .sp-cta-note { font-size: 13px; color: #93c5fd; margin: 0; } /* ============================================================ NAVIGAZIONE CORRELATI (uniforme su tutte le spoke) ============================================================ */ .sp-correlati { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px 0 0; border-top: 1px solid var(--border); font-size: 14px; margin-top: 8px; } .sp-correlati a { color: var(--navy); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--white); transition: background .16s, border-color .16s; } .sp-correlati a:hover { background: var(--bg-blue); border-color: #bfdbfe; } .sp-correlati a.sp-correlati-home { background: var(--bg-light); } /* ============================================================ HUB LINK (prima nota — tutte le funzionalità) ============================================================ */ .sp-hub { background: var(--bg-light); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 28px; margin: 0 0 52px; } .sp-hub-title { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 16px; } .sp-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .sp-hub-link { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; transition: box-shadow .15s, transform .13s; } .sp-hub-link:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--navy); } .sp-hub-link.sp-hub-active { background: var(--navy); color: var(--white); border-color: var(--navy); cursor: default; pointer-events: none; } /* ============================================================ NOTE / DISCLAIMER ============================================================ */ .sp-note { font-size: 12px; color: #94a3b8; margin-top: 8px; line-height: 1.5; } /* ============================================================ FOOTER SPOKE ============================================================ */ .sp-footer { background: var(--bg-light); border-top: 1px solid var(--border); padding: 24px; text-align: center; font-size: 13px; color: var(--text-muted); } .sp-footer a { color: var(--navy); text-decoration: none; font-weight: 500; } .sp-footer a:hover { text-decoration: underline; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 680px) { .sp-navbar { padding: 0 16px; } .sp-breadcrumb { padding: 9px 16px; } .sp-page { padding: 0 16px 56px; } .sp-hero { padding: 36px 0 28px; margin-bottom: 36px; } .sp-cta { padding: 32px 20px; } .sp-navbar-links a.sp-nav-back { display: none; } .sp-vantaggi { grid-template-columns: 1fr 1fr; } .sp-badges-grid { grid-template-columns: 1fr 1fr; } .sp-cards-grid { grid-template-columns: 1fr; } } @media (max-width: 440px) { .sp-navbar-links a.sp-nav-wa { display: none; } .sp-flow-steps { flex-direction: column; } .sp-flow-arrow { transform: rotate(90deg); } .sp-vantaggi { grid-template-columns: 1fr; } }