/* ========================================================================== Studio Pisciavino & Partners — foglio di stile unico Nessun framework, nessun build. Mobile-first. Palette: avorio + verde bosco + ambra. NIENTE NERO (veto del cliente). ========================================================================== */ /* --- 1. TOKEN ------------------------------------------------------------ */ :root { /* colore — tema chiaro */ --c-bg: #FBF8F3; --c-bg-2: #F4EFE5; --c-surface: #FFFFFF; --c-surface-2: #F3EEE4; --c-text: #16241F; --c-muted: #5C6C66; --c-border: #E4DBCC; --c-brand: #0E5C46; --c-brand-2: #14785B; --c-brand-soft: #DEEDE6; --c-accent: #D9971B; --c-accent-soft:#FAEBCC; --c-on-brand: #FBF8F3; /* tipografia */ --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; --font-num: ui-rounded, "SF Pro Rounded", -apple-system, Segoe UI, Roboto, sans-serif; --step--1: clamp(.82rem, .79rem + .12vw, .89rem); --step-0: clamp(1rem, .96rem + .2vw, 1.12rem); --step-1: clamp(1.15rem, 1.08rem + .35vw, 1.4rem); --step-2: clamp(1.4rem, 1.26rem + .7vw, 1.95rem); --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.7rem); --step-4: clamp(2.1rem, 1.65rem + 2.25vw, 3.8rem); --step-5: clamp(2.6rem, 1.8rem + 3.9vw, 5.4rem); /* spazio */ --space-1: .375rem; --space-2: .75rem; --space-3: 1.25rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --space-7: 6.5rem; --space-8: 9rem; /* forma */ --radius-s: 8px; --radius-m: 14px; --radius-l: 24px; --radius-full: 999px; /* ombre */ --shadow-1: 0 1px 2px rgba(22,36,31,.05), 0 4px 14px rgba(22,36,31,.05); --shadow-2: 0 10px 24px rgba(22,36,31,.09), 0 2px 6px rgba(22,36,31,.05); --shadow-3: 0 24px 60px rgba(14,92,70,.16); /* moto */ --dur-fast: .18s; --dur-base: .32s; --dur-slow: .7s; --ease-out: cubic-bezier(.22,.68,.32,1); --wrap: 1160px; --nav-h: 72px; } :root[data-theme="dark"] { --c-bg: #0C1A16; --c-bg-2: #0F211B; --c-surface: #122A22; --c-surface-2: #16332A; --c-text: #EFEDE5; --c-muted: #9DB4AB; --c-border: #23443A; --c-brand: #43C79A; --c-brand-2: #6FDCB6; --c-brand-soft: #14382C; --c-accent: #EFB44E; --c-accent-soft:#3A2E14; --c-on-brand: #08130F; --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.28); --shadow-2: 0 10px 26px rgba(0,0,0,.4); --shadow-3: 0 24px 60px rgba(0,0,0,.5); } /* --- 1b. PALETTE ALTERNATIVE -------------------------------------------- Il cliente sceglie: il selettore in basso a sinistra scrive data-palette su . Quella di default (bosco) sta nei :root qui sopra. Nessuna palette usa il nero: il cliente lo ha escluso. */ /* Notte — blu profondo + rame */ :root[data-palette="notte"] { --c-bg:#F7F8FC; --c-bg-2:#EEF1F8; --c-surface:#FFFFFF; --c-surface-2:#EDF0F7; --c-text:#17203A; --c-muted:#5A6480; --c-border:#DCE1EE; --c-brand:#1B3A6B; --c-brand-2:#27528F; --c-brand-soft:#E1E9F6; --c-accent:#C25F2C; --c-accent-soft:#FAE3D6; --c-on-brand:#F7F8FC; } :root[data-theme="dark"][data-palette="notte"] { --c-bg:#0D1424; --c-bg-2:#101A2E; --c-surface:#141F36; --c-surface-2:#18263F; --c-text:#EDEFF6; --c-muted:#9AA6C2; --c-border:#26334F; --c-brand:#6C9FE8; --c-brand-2:#93BCF3; --c-brand-soft:#17253F; --c-accent:#F0925C; --c-accent-soft:#3A2418; --c-on-brand:#0A1120; } /* Bordeaux — vinaccia + oro */ :root[data-palette="bordeaux"] { --c-bg:#FCF7F6; --c-bg-2:#F6EDEC; --c-surface:#FFFFFF; --c-surface-2:#F5ECEB; --c-text:#2A161B; --c-muted:#6E5B5F; --c-border:#EBDCD9; --c-brand:#6E2038; --c-brand-2:#8C2C4A; --c-brand-soft:#F5E3E8; --c-accent:#A8801F; --c-accent-soft:#F7EBCE; --c-on-brand:#FCF7F6; } :root[data-theme="dark"][data-palette="bordeaux"] { --c-bg:#170D11; --c-bg-2:#1D1116; --c-surface:#23151B; --c-surface-2:#2B1A21; --c-text:#F2EAEA; --c-muted:#BCA3A9; --c-border:#3D2630; --c-brand:#E0728F; --c-brand-2:#EE96AC; --c-brand-soft:#351D26; --c-accent:#E5BC4F; --c-accent-soft:#3A2E14; --c-on-brand:#17090E; } /* Prugna — viola profondo + ambra */ :root[data-palette="prugna"] { --c-bg:#FAF8FC; --c-bg-2:#F1EDF8; --c-surface:#FFFFFF; --c-surface-2:#F1ECF8; --c-text:#1E1830; --c-muted:#605A75; --c-border:#E4DDF0; --c-brand:#4A2A80; --c-brand-2:#603AA3; --c-brand-soft:#EAE2F7; --c-accent:#C6871F; --c-accent-soft:#FAECD1; --c-on-brand:#FAF8FC; } :root[data-theme="dark"][data-palette="prugna"] { --c-bg:#120D1E; --c-bg-2:#171126; --c-surface:#1C152E; --c-surface-2:#231B39; --c-text:#EFEBF7; --c-muted:#A79FC0; --c-border:#322747; --c-brand:#A688E8; --c-brand-2:#C0A8F3; --c-brand-soft:#241A3C; --c-accent:#EFC169; --c-accent-soft:#372B14; --c-on-brand:#0D0916; } /* --- 2. RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--font-text); font-size: var(--step-0); line-height: 1.62; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.022em; font-weight: 800; text-wrap: balance; } p { text-wrap: pretty; } ul { list-style: none; padding: 0; } ::selection { background: var(--c-accent); color: #16241F; } :focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; } /* --- 3. UTILITY ---------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } @media (min-width: 700px) { .wrap { width: min(100% - 4rem, var(--wrap)); } } .sezione { padding-block: var(--space-6); } @media (min-width: 800px) { .sezione { padding-block: var(--space-7); } } .occhiello { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-brand); } .occhiello::before { content: ""; width: 26px; height: 2px; background: var(--c-accent); border-radius: 2px; } .titolo-sezione { font-size: var(--step-3); max-width: 22ch; } .sottotitolo { font-size: var(--step-1); color: var(--c-muted); max-width: 60ch; margin-top: var(--space-2); font-weight: 400; letter-spacing: -.01em; } .evid { background-image: linear-gradient(var(--c-accent-soft), var(--c-accent-soft)); background-repeat: no-repeat; background-size: 100% .3em; background-position: 0 .82em; padding-inline: .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } :root[data-theme="dark"] .evid { background-image: linear-gradient( color-mix(in srgb, var(--c-accent) 42%, transparent), color-mix(in srgb, var(--c-accent) 42%, transparent)); } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--c-brand); color: var(--c-on-brand); padding: .8rem 1.2rem; border-radius: 0 0 var(--radius-s) 0; } .skip:focus { left: 0; } /* --- 4. PULSANTI --------------------------------------------------------- */ .btn { --btn-bg: var(--c-brand); --btn-fg: var(--c-on-brand); --btn-bd: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius-full); font-weight: 700; font-size: var(--step-0); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); } .btn:active { transform: translateY(0); } .btn svg { width: 20px; height: 20px; flex: none; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-text); --btn-bd: var(--c-border); } .btn--ghost:hover { --btn-bd: var(--c-brand); --btn-fg: var(--c-brand); box-shadow: var(--shadow-2); } .btn--su-scuro { --btn-bg: var(--c-accent); --btn-fg: #221806; --btn-bd: var(--c-accent); } .btn--su-scuro-ghost { --btn-bg: transparent; --btn-fg: #FBF8F3; --btn-bd: rgba(251,248,243,.4); } .btn--su-scuro-ghost:hover { --btn-bd: #FBF8F3; } .btn--sm { padding: .6rem 1.1rem; font-size: var(--step--1); } .gruppo-btn { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* --- 5. NAV -------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 90; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--c-bg) 82%, transparent); border-bottom: 1px solid transparent; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .nav.scrolled { background: var(--c-bg); border-bottom-color: var(--c-border); box-shadow: var(--shadow-1); } .nav__in { display: flex; align-items: center; gap: var(--space-3); width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } @media (min-width: 700px) { .nav__in { width: min(100% - 4rem, var(--wrap)); } } .marchio { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; } .marchio__sigla { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--c-brand); color: var(--c-on-brand); display: grid; place-items: center; font-weight: 800; font-size: .95rem; letter-spacing: -.03em; box-shadow: var(--shadow-1); position: relative; overflow: hidden; } .marchio__sigla::after { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 70%; background: var(--c-accent); opacity: .9; transform: rotate(-14deg) translateY(42%); transition: transform var(--dur-base) var(--ease-out); } .marchio:hover .marchio__sigla::after { transform: rotate(-14deg) translateY(20%); } .marchio__sigla span { position: relative; z-index: 1; } .marchio__testo { display: flex; flex-direction: column; line-height: 1.15; } .marchio__nome { font-weight: 800; letter-spacing: -.028em; font-size: 1.02rem; } .marchio__ruolo { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; } @media (max-width: 420px) { .marchio__ruolo { display: none; } } .nav__link { display: none; } @media (min-width: 900px) { .nav__link { display: inline-block; text-decoration: none; font-weight: 600; font-size: .97rem; padding: .4rem .1rem; position: relative; color: var(--c-text); } .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--c-accent); border-radius: 2px; transition: right var(--dur-base) var(--ease-out); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { right: 0; } } .nav__azioni { display: flex; align-items: center; gap: .5rem; } .nav .btn--sm { display: none; } @media (min-width: 700px) { .nav .btn--sm { display: inline-flex; } } .tema { width: 42px; height: 42px; border-radius: var(--radius-full); background: transparent; border: 1.5px solid var(--c-border); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .tema:hover { border-color: var(--c-brand); transform: rotate(-18deg); } .tema svg { width: 19px; height: 19px; } .tema .i-luna { display: none; } :root[data-theme="dark"] .tema .i-luna { display: block; } :root[data-theme="dark"] .tema .i-sole { display: none; } .burger { width: 42px; height: 42px; border-radius: var(--radius-full); background: transparent; border: 1.5px solid var(--c-border); cursor: pointer; position: relative; padding: 0; } @media (min-width: 900px) { .burger { display: none; } } .burger span { position: absolute; left: 50%; top: 50%; width: 17px; height: 1.8px; margin-left: -8.5px; background: var(--c-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .burger span:nth-child(1) { transform: translateY(-6px); } .burger span:nth-child(2) { transform: translateY(0); } .burger span:nth-child(3) { transform: translateY(6px); } .burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); } .menu { position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 89; background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: var(--space-3) 0 var(--space-4); transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); box-shadow: var(--shadow-2); } .menu.aperto { transform: none; opacity: 1; visibility: visible; pointer-events: auto; } @media (min-width: 900px) { .menu { display: none; } } .menu a { display: block; text-decoration: none; font-size: var(--step-1); font-weight: 700; padding: .7rem 0; border-bottom: 1px solid var(--c-border); } /* .menu a è display:block: il pulsante va riportato a flex, altrimenti icona e testo si impilano */ .menu a.btn { display: inline-flex; width: 100%; margin-top: var(--space-3); padding: .95rem 1rem; border-bottom: 0; white-space: normal; text-align: center; } /* --- 6. HERO ------------------------------------------------------------- */ .hero { position: relative; padding-block: var(--space-6) var(--space-6); overflow: hidden; } @media (min-width: 800px) { .hero { padding-block: var(--space-7) var(--space-7); } } .hero__fondo { position: absolute; inset: -20% -10% auto -10%; height: 130%; z-index: -1; pointer-events: none; background: radial-gradient(46% 42% at 78% 12%, color-mix(in srgb, var(--c-brand) 16%, transparent) 0%, transparent 70%), radial-gradient(40% 40% at 8% 78%, color-mix(in srgb, var(--c-accent) 16%, transparent) 0%, transparent 72%); } .hero__griglia { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, color-mix(in srgb, var(--c-border) 70%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--c-border) 70%, transparent) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%); } .hero h1 { font-size: var(--step-5); margin-top: var(--space-3); max-width: 15ch; } .hero__sub { font-size: var(--step-1); color: var(--c-muted); max-width: 54ch; margin-top: var(--space-3); font-weight: 400; } .hero .gruppo-btn { margin-top: var(--space-4); } .hero__nota { margin-top: var(--space-4); font-size: var(--step--1); color: var(--c-muted); display: flex; align-items: flex-start; gap: .7rem; } .hero__nota .punto { width: 7px; height: 7px; border-radius: 50%; background: var(--c-brand); flex: none; margin-top: .55em; box-shadow: 0 0 0 4px var(--c-brand-soft); } /* --- 7. BARRA CREDENZIALI ------------------------------------------------ */ .credenziali { border-block: 1px solid var(--c-border); background: var(--c-bg-2); } .credenziali__g { display: grid; gap: var(--space-3); padding-block: var(--space-4); grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .credenziali__g { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } } .cred__k { font-family: var(--font-num); font-size: var(--step-2); font-weight: 800; color: var(--c-brand); letter-spacing: -.03em; display: block; } .cred__v { font-size: var(--step--1); color: var(--c-muted); margin-top: .2rem; } /* --- 8. PROBLEMA --------------------------------------------------------- */ .problema { background: var(--c-bg); } .problema__lista { margin-top: var(--space-4); display: grid; gap: .1rem; max-width: 74ch; } .problema__lista li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-border); } .problema__lista li:first-child { border-top: 1px solid var(--c-border); } .problema__lista .x { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--c-accent); } .intro-problema { margin-top: var(--space-3); font-size: var(--step-1); max-width: 52ch; color: var(--c-muted); } .domanda-ponte { margin-top: var(--space-4); font-weight: 800; font-size: var(--step-1); } /* --- 9. SOLUZIONE -------------------------------------------------------- */ .soluzione { background: var(--c-bg-2); border-block: 1px solid var(--c-border); } .soluzione__g { display: grid; gap: var(--space-5); } @media (min-width: 950px) { .soluzione__g { grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } } .punti { display: grid; gap: var(--space-3); } .punto-b { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--space-3); box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .punto-b:hover { transform: translateX(4px); box-shadow: var(--shadow-2); } .punto-b h3 { font-size: var(--step-1); } .punto-b p { color: var(--c-muted); font-size: .97rem; margin-top: .35rem; } /* --- 10. SERVIZI --------------------------------------------------------- */ .servizi__g { display: grid; gap: var(--space-3); margin-top: var(--space-5); } @media (min-width: 640px) { .servizi__g { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .servizi__g { grid-template-columns: repeat(3, 1fr); } } .card-serv { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: var(--space-4) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: .5rem; text-decoration: none; position: relative; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); } .card-serv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--c-brand), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } .card-serv:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--c-brand) 40%, var(--c-border)); } .card-serv:hover::before { transform: scaleX(1); } .card-serv__i { width: 40px; height: 40px; border-radius: 12px; background: var(--c-brand-soft); color: var(--c-brand); display: grid; place-items: center; } .card-serv__i svg { width: 21px; height: 21px; } .card-serv h3 { font-size: var(--step-1); margin-top: .4rem; } .card-serv p { color: var(--c-muted); font-size: .95rem; } .card-serv__vai { margin-top: auto; padding-top: var(--space-2); font-weight: 700; color: var(--c-brand); font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; } .card-serv__vai svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-out); } .card-serv:hover .card-serv__vai svg { transform: translateX(4px); } /* --- 11. PREZZI ---------------------------------------------------------- */ .prezzi { background: var(--c-bg-2); border-block: 1px solid var(--c-border); } .prezzi__g { display: grid; gap: var(--space-3); margin-top: var(--space-5); } @media (min-width: 640px) { .prezzi__g { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .prezzi__g { grid-template-columns: repeat(4, 1fr); } } .card-prezzo { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; position: relative; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-prezzo:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } .card-prezzo--top { border-color: var(--c-brand); box-shadow: var(--shadow-2); } .card-prezzo__tag { position: absolute; top: -11px; left: var(--space-3); background: var(--c-brand); color: var(--c-on-brand); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .7rem; border-radius: var(--radius-full); } .card-prezzo h3 { font-size: var(--step-1); min-height: 2.2em; } .card-prezzo p { color: var(--c-muted); font-size: .93rem; margin-top: var(--space-2); } .card-prezzo p.card-prezzo__n { font-family: var(--font-num); font-weight: 800; letter-spacing: -.04em; font-size: var(--step-3); color: var(--c-brand); margin-top: var(--space-2); line-height: 1; } .card-prezzo__n small { font-size: .4em; font-weight: 700; color: var(--c-muted); letter-spacing: 0; display: block; margin-top: .5rem; line-height: 1.2; } .prezzo-costituzione { margin-top: var(--space-3); display: grid; gap: var(--space-3); background: var(--c-brand); color: var(--c-on-brand); border-radius: var(--radius-l); padding: var(--space-4) var(--space-3); } @media (min-width: 900px) { .prezzo-costituzione { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-5); padding: var(--space-4); } } .prezzo-costituzione h3 { font-size: var(--step-2); } .prezzo-costituzione p { color: color-mix(in srgb, var(--c-on-brand) 82%, transparent); margin-top: .5rem; } .prezzo-costituzione p.prezzo-costituzione__n { font-family: var(--font-num); font-size: var(--step-4); font-weight: 800; letter-spacing: -.04em; color: var(--c-accent); line-height: 1; margin-top: 0; } .prezzo-costituzione__n small { display: block; font-size: .26em; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c-on-brand) 75%, transparent); margin-top: .7rem; font-weight: 700; } .prezzo-costituzione b { color: var(--c-accent); } .nota-inclusa { margin-top: var(--space-4); padding: var(--space-3); border: 1.5px dashed color-mix(in srgb, var(--c-brand) 45%, var(--c-border)); border-radius: var(--radius-m); background: var(--c-brand-soft); display: flex; gap: var(--space-2); align-items: flex-start; } .nota-inclusa svg { width: 22px; height: 22px; flex: none; color: var(--c-brand); margin-top: 2px; } .nota-inclusa p { font-size: .97rem; } :root[data-theme="dark"] .nota-inclusa p { color: var(--c-text); } /* --- 12. PERCHÉ ME ------------------------------------------------------- */ .perche__g { display: grid; gap: var(--space-4); margin-top: var(--space-5); } @media (min-width: 700px) { .perche__g { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } } .perche-b { display: flex; gap: var(--space-3); align-items: flex-start; } .perche-b__i { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--c-accent-soft); color: var(--c-accent); display: grid; place-items: center; } :root[data-theme="dark"] .perche-b__i { color: var(--c-accent); } .perche-b__i svg { width: 22px; height: 22px; } .perche-b h3 { font-size: var(--step-1); } .perche-b p { color: var(--c-muted); margin-top: .3rem; font-size: .97rem; } /* --- 13. PASSI ----------------------------------------------------------- */ .passi { background: var(--c-bg-2); border-block: 1px solid var(--c-border); } .passi__g { display: grid; gap: var(--space-4); margin-top: var(--space-5); counter-reset: p; } @media (min-width: 800px) { .passi__g { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } } .passo { position: relative; padding-top: var(--space-4); } .passo::before { counter-increment: p; content: counter(p); position: absolute; top: -.4rem; left: 0; font-family: var(--font-num); font-size: var(--step-4); font-weight: 800; color: color-mix(in srgb, var(--c-brand) 22%, transparent); letter-spacing: -.05em; line-height: 1; } .passo h3 { font-size: var(--step-1); position: relative; } .passo p { color: var(--c-muted); margin-top: .35rem; font-size: .97rem; } /* --- 14. FAQ ------------------------------------------------------------- */ .faq__lista { margin-top: var(--space-5); max-width: 78ch; } .faq-item { border-bottom: 1px solid var(--c-border); } .faq-item:first-child { border-top: 1px solid var(--c-border); } .faq-item__q { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; display: flex; gap: var(--space-3); align-items: flex-start; justify-content: space-between; padding: var(--space-3) 0; font-weight: 700; font-size: var(--step-1); letter-spacing: -.02em; transition: color var(--dur-fast) var(--ease-out); } .faq-item__q:hover { color: var(--c-brand); } .faq-item__segno { flex: none; width: 26px; height: 26px; position: relative; margin-top: 4px; } .faq-item__segno::before, .faq-item__segno::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 2.2px; background: var(--c-brand); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out); } .faq-item__segno::after { transform: rotate(90deg); } .faq-item__q[aria-expanded="true"] .faq-item__segno::after { transform: rotate(0deg); } .faq-item__r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); } .faq-item__q[aria-expanded="true"] + .faq-item__r { grid-template-rows: 1fr; } .faq-item__r > div { overflow: hidden; } .faq-item__r p { color: var(--c-muted); padding-bottom: var(--space-3); max-width: 68ch; } /* --- 15. BANDA CTA ------------------------------------------------------- */ .banda { background: var(--c-brand); color: var(--c-on-brand); position: relative; overflow: hidden; } .banda::after { content: ""; position: absolute; inset: auto -5% -60% auto; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 42%, transparent) 0%, transparent 68%); pointer-events: none; } .banda__in { position: relative; z-index: 1; padding-block: var(--space-6); } .banda h2 { font-size: var(--step-3); max-width: 20ch; } .banda p { color: color-mix(in srgb, var(--c-on-brand) 80%, transparent); margin-top: var(--space-2); max-width: 52ch; font-size: var(--step-1); } .banda .gruppo-btn { margin-top: var(--space-4); } /* --- 16. PAGINE INTERNE -------------------------------------------------- */ .hero-int { padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--c-border); position: relative; overflow: hidden; } .hero-int__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 130% at 82% 0%, color-mix(in srgb, var(--c-brand) 14%, transparent) 0%, transparent 70%); } .hero-int h1 { font-size: var(--step-4); margin-top: var(--space-2); } .briciole { font-size: var(--step--1); color: var(--c-muted); display: flex; gap: .5rem; flex-wrap: wrap; } .briciole a { text-decoration: none; } .briciole a:hover { color: var(--c-brand); text-decoration: underline; } .blocco-serv { padding-block: var(--space-5); border-bottom: 1px solid var(--c-border); } .blocco-serv:last-of-type { border-bottom: 0; } .blocco-serv__g { display: grid; gap: var(--space-3); } @media (min-width: 900px) { .blocco-serv__g { grid-template-columns: 1fr 1.15fr; gap: var(--space-6); align-items: start; } } .blocco-serv h2 { font-size: var(--step-2); } .blocco-serv > .wrap > .blocco-serv__g > div > p { color: var(--c-muted); margin-top: var(--space-2); } .elenco-check { display: grid; gap: var(--space-2); } .elenco-check li { display: flex; gap: .7rem; align-items: flex-start; } .elenco-check svg { width: 21px; height: 21px; flex: none; color: var(--c-brand); margin-top: 2px; } .elenco-check b { font-weight: 700; } .tabella-prezzi { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: .97rem; } .tabella-prezzi th, .tabella-prezzi td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--c-border); vertical-align: top; } .tabella-prezzi th { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); } .tabella-prezzi td:last-child { text-align: right; white-space: nowrap; font-family: var(--font-num); font-weight: 800; color: var(--c-brand); letter-spacing: -.02em; } .tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card-canale { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: .6rem; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card-canale:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); } .card-canale h2 { font-size: var(--step-1); } .card-canale p { color: var(--c-muted); font-size: .96rem; } .card-canale .btn { margin-top: auto; align-self: flex-start; } .canali__g { display: grid; gap: var(--space-3); } @media (min-width: 800px) { .canali__g { grid-template-columns: repeat(2, 1fr); } } .studi__g { display: grid; gap: var(--space-3); margin-top: var(--space-4); } @media (min-width: 640px) { .studi__g { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .studi__g { grid-template-columns: repeat(3, 1fr); } } .studio-b { border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: var(--space-3); background: var(--c-surface); display: flex; align-items: center; gap: var(--space-2); } .studio-b h3 { font-size: var(--step-1); } .studio-b span { font-size: var(--step--1); color: var(--c-muted); display: block; margin-top: .1rem; } .studio-b--presto { background: transparent; border-style: dashed; } .studio-b__i { width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--c-brand-soft); color: var(--c-brand); display: grid; place-items: center; } .studio-b__i svg { width: 19px; height: 19px; } .testo-lungo { max-width: 72ch; } .testo-lungo h2 { font-size: var(--step-2); margin-top: var(--space-5); } .testo-lungo h2:first-child { margin-top: 0; } .testo-lungo p, .testo-lungo ul { margin-top: var(--space-3); color: var(--c-muted); } .testo-lungo ul { display: grid; gap: .5rem; padding-left: 1.1rem; list-style: disc; } .testo-lungo a { color: var(--c-brand); } /* --- 17. FOOTER ---------------------------------------------------------- */ .footer { background: var(--c-bg-2); border-top: 1px solid var(--c-border); padding-block: var(--space-6) var(--space-4); } .footer__g { display: grid; gap: var(--space-4); } @media (min-width: 760px) { .footer__g { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-5); } } .footer h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); font-weight: 700; } .footer ul { margin-top: var(--space-2); display: grid; gap: .5rem; } .footer li { color: var(--c-muted); font-size: .95rem; } .footer a { text-decoration: none; color: var(--c-muted); font-size: .95rem; } .footer a:hover { color: var(--c-brand); } .footer__desc { color: var(--c-muted); font-size: .95rem; margin-top: var(--space-2); max-width: 34ch; } .footer__legale { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--c-border); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); justify-content: space-between; font-size: var(--step--1); color: var(--c-muted); } .footer__legale nav { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* --- 18. WHATSAPP FLOTTANTE --------------------------------------------- */ .wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.22); text-decoration: none; transition: transform var(--dur-base) var(--ease-out); } .wa-float:hover { transform: scale(1.08); } .wa-float svg { width: 29px; height: 29px; } @media (min-width: 900px) { .wa-float { display: none; } } /* --- 18b. SELETTORE PALETTE --------------------------------------------- Serve al cliente per scegliere i colori. Quando ha scelto si toglie (basta cancellare il blocco .palette dalle pagine). */ .palette { position: fixed; left: 14px; bottom: 14px; z-index: 81; display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: color-mix(in srgb, var(--c-surface) 92%, transparent); border: 1px solid var(--c-border); border-radius: var(--radius-full); box-shadow: var(--shadow-2); -webkit-backdrop-filter: saturate(1.4); backdrop-filter: saturate(1.4); } .palette__et { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); padding-left: .15rem; } @media (max-width: 460px) { .palette__et { display: none; } } .palette__p { width: 26px; height: 26px; padding: 0; cursor: pointer; border-radius: 50%; border: 2px solid var(--c-border); background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%); transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .palette__p:hover { transform: scale(1.16); } .palette__p[aria-pressed="true"] { border-color: var(--c-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-text) 16%, transparent); transform: scale(1.1); } /* --- 19. BANNER COOKIE --------------------------------------------------- */ .cookie { /* su mobile sta sopra il selettore palette e il pulsante WhatsApp */ position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 100; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); box-shadow: var(--shadow-3); padding: var(--space-3); display: grid; gap: var(--space-2); transform: translateY(140%); transition: transform .45s var(--ease-out); } .cookie.visibile { transform: none; } @media (min-width: 800px) { .cookie { left: auto; right: 20px; bottom: 20px; max-width: 420px; padding: var(--space-4) var(--space-3); } } .cookie p { font-size: .93rem; color: var(--c-muted); } .cookie__azioni { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .cookie a { color: var(--c-brand); font-size: .9rem; } /* --- 20. REVEAL ---------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: .07s; } .reveal:nth-child(3) { transition-delay: .14s; } .reveal:nth-child(4) { transition-delay: .2s; } /* --- 21. 404 ------------------------------------------------------------- */ .p404 { min-height: 68vh; display: grid; place-items: center; text-align: center; padding-block: var(--space-6); } .p404 h1 { font-size: var(--step-3); margin-top: var(--space-2); } .p404 p { color: var(--c-muted); margin-top: var(--space-2); max-width: 44ch; margin-inline: auto; } .p404 p.p404__n { font-family: var(--font-num); font-size: clamp(5rem, 18vw, 11rem); font-weight: 800; color: var(--c-brand); letter-spacing: -.06em; line-height: 1; margin-top: 0; } .p404 .gruppo-btn { margin-top: var(--space-4); justify-content: center; } /* --- 21b. CORREZIONI TEMA SCURO ----------------------------------------- In tema scuro il verde del marchio diventa menta chiara: tutto ciò che ci sta sopra deve tornare scuro, altrimenti il contrasto crolla. */ :root[data-theme="dark"] .prezzo-costituzione p.prezzo-costituzione__n, :root[data-theme="dark"] .prezzo-costituzione b { color: #073125; } :root[data-theme="dark"] .btn--su-scuro { --btn-bg: #0A1F19; --btn-fg: #EFB44E; --btn-bd: #0A1F19; } :root[data-theme="dark"] .btn--su-scuro-ghost { --btn-fg: #08130F; --btn-bd: rgba(8,19,15,.42); } :root[data-theme="dark"] .btn--su-scuro-ghost:hover { --btn-bd: #08130F; } :root[data-theme="dark"] .banda::after { background: radial-gradient(circle, rgba(8,19,15,.28) 0%, transparent 68%); } /* --- 22. STAMPA ---------------------------------------------------------- */ @media print { .nav, .menu, .wa-float, .cookie, .banda, .btn { display: none !important; } body { background: #fff; color: #000; } .reveal { opacity: 1 !important; transform: none !important; } }