/* ============================================================================ Ali&Magia — Alice Ferro · DESIGN SYSTEM CONDIVISO File: assets/css/stile.css (unico foglio di stile, condiviso da TUTTE le pagine) Stile: pastello femminile, luminoso, sacro, elegante. Nero puro VIETATO. I font (Cormorant Garamond, Cinzel, Crimson Pro, Mulish) vanno caricati nel di ogni pagina via con preconnect + display=swap. ========================================================================== */ /* ---------------------------------------------------------------------------- 1) TOKEN — Custom properties (:root) ------------------------------------------------------------------------- */ :root{ /* --- Sfondi e neutri --- */ --colore-crema: #FBF6EF; /* sfondo base, avorio/crema */ --colore-avorio: #F4ECE0; /* superfici/sezioni alternate */ --colore-bianco: #FFFFFF; /* --- Colori brand pastello --- */ --colore-rosa-cipria: #E7C6C6; /* rosa cipria/antico chiaro */ --colore-rosa-profondo: #C98B86; /* rosa antico saturo (accenti/hover) */ --colore-salvia: #B6CDBD; /* verde acqua/salvia */ --colore-salvia-scuro: #7FA48C; /* salvia per testo/bordi */ --colore-lavanda: #C9BFE0; /* lavanda-viola chiaro */ --colore-viola: #8E7AB0; /* viola per accenti */ /* --- Accento oro (usalo con misura) --- */ --colore-oro: #C9A24B; /* oro principale DECORATIVO: bordi, icone, filetti */ --colore-oro-chiaro: #E3CB8E; /* oro luminoso per hover/gradienti */ /* --- Testo --- */ --colore-inchiostro: #4A3F45; /* testo principale, prugna scurissimo caldo */ --colore-testo-soft: #7A6B70; /* testo secondario (solo testo grande/dettagli) */ /* --- CTA e stati --- NOTA CONTRASTO AA: il bianco su oro #C9A24B raggiunge solo ~2.4:1 (non conforme). Per garantire WCAG AA su QUALSIASI dimensione di testo, il bottone primario usa un oro PROFONDO (#8C6E28) con testo bianco => ~4.8:1 (conforme). L'oro brillante #C9A24B resta come accento decorativo (bordi/icone/filetti). */ --cta-bg: #8C6E28; /* bottone primario: oro profondo (AA con bianco) */ --cta-bg-hover: #6F571F; --cta-testo: #FFFFFF; --colore-whatsapp: #25D366; /* solo per icona/bordo WhatsApp */ --colore-whatsapp-scuro:#1FA851; /* verde WhatsApp scuro per testo accessibile */ --colore-ombra: rgba(74,63,69,.12); /* --- Tipografia: famiglie --- */ --font-titolo: 'Cormorant Garamond', Georgia, serif; --font-occhiello: 'Cinzel', Georgia, serif; --font-corpo: 'Crimson Pro', Georgia, serif; --font-ui: 'Mulish', system-ui, sans-serif; /* --- Tipografia: scala fluida con clamp() --- */ --fs-h1: clamp(2.6rem, 1.85rem + 3.4vw, 4.4rem); --fs-h2: clamp(2rem, 1.55rem + 2.1vw, 3rem); --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.05rem); --fs-h4: clamp(1.25rem, 1.12rem + 0.55vw, 1.55rem); --fs-eyebrow: clamp(0.82rem, 0.76rem + 0.18vw, 0.95rem); --fs-body: clamp(1.05rem, 1rem + 0.22vw, 1.2rem); --fs-small: clamp(0.85rem, 0.82rem + 0.1vw, 0.94rem); --lh-corpo: 1.7; --lh-titolo: 1.12; /* --- Spaziatura (base 8) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; /* --- Raggi morbidi --- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* --- Ombre soffuse (mai dure) --- */ --sh-soft: 0 8px 30px rgba(74,63,69,.08); --sh-card: 0 12px 40px rgba(201,162,75,.12); --sh-hover: 0 18px 50px rgba(201,162,75,.18); /* --- Layout --- */ --larghezza-contenuto: 1140px; --padding-lato: clamp(16px, 4vw, 40px); /* --- Gradiente d'atmosfera "aurora dolce" (riutilizzabile) --- */ --aurora: linear-gradient(135deg, rgba(231,198,198,.55) 0%, rgba(201,191,224,.50) 48%, rgba(182,205,189,.55) 100%); --altezza-header: 76px; } /* ---------------------------------------------------------------------------- 2) RESET / NORMALIZE leggero ------------------------------------------------------------------------- */ *, *::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; } } body{ font-family: var(--font-corpo); font-size: var(--fs-body); line-height: var(--lh-corpo); color: var(--colore-inchiostro); background-color: var(--colore-crema); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } :focus-visible{ outline: 3px solid var(--colore-viola); outline-offset: 3px; border-radius: 4px; } /* ---------------------------------------------------------------------------- 3) TIPOGRAFIA base ------------------------------------------------------------------------- */ h1, h2, h3, h4{ font-family: var(--font-titolo); font-weight: 600; line-height: var(--lh-titolo); color: var(--colore-inchiostro); text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -.5px; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { text-wrap: pretty; } p + p { margin-top: var(--sp-3); } strong { font-weight: 700; color: var(--colore-inchiostro); } /* Occhiello / eyebrow — Cinzel maiuscoletto. Usato come TESTO GRANDE o piccolo decorativo: colore scuro per leggibilità. */ .occhiello{ font-family: var(--font-occhiello); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #9E4F4A; /* rosa profondo scurito: AA su crema (~5:1) anche per testo piccolo */ display: inline-flex; align-items: center; gap: var(--sp-2); } .occhiello--oro{ color: #7E6020; } /* variante oro profondo, AA su piccolo (~5.4:1) */ /* Claim-firma del brand (payoff breve) */ .claim-firma{ font-family: var(--font-occhiello); font-weight: 600; letter-spacing: .12em; color: #5E4E7C; /* viola scurito: AA su chiaro (~6.9:1) anche per testo piccolo */ text-transform: uppercase; } .testo-soft{ color: var(--colore-testo-soft); } /* SOLO testo grande/secondario */ .lead{ font-size: clamp(1.15rem, 1.05rem + .4vw, 1.45rem); color: var(--colore-inchiostro); } /* Affermazione (chip-citazione gentile, tono brand) */ .cammino{ list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); position: relative; } .cammino__tappa{ display: flex; gap: var(--sp-4); align-items: flex-start; position: relative; } .cammino__num{ flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-occhiello); font-weight: 700; font-size: 1.1rem; color: #6F571F; background: linear-gradient(135deg, rgba(227,203,142,.5), rgba(241,226,190,.5)); border: 1px solid var(--colore-oro); position: relative; z-index: 1; } .cammino__tappa:not(:last-child)::before{ content: ""; position: absolute; left: 27px; top: 54px; bottom: calc(-1 * var(--sp-5)); width: 2px; background: linear-gradient(180deg, var(--colore-oro), rgba(201,162,75,.25)); } .cammino__corpo{ padding-top: 4px; } .cammino__titolo{ font-family: var(--font-occhiello); font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--colore-viola); margin-bottom: var(--sp-2); } .cammino__corpo p{ color: var(--colore-inchiostro); } @media (max-width: 560px){ .cammino__num{ width: 46px; height: 46px; font-size: 1rem; } .cammino__tappa:not(:last-child)::before{ left: 23px; top: 46px; } } .affermazione{ font-family: var(--font-titolo); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; font-style: italic; color: var(--colore-inchiostro); background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-left: 4px solid var(--colore-oro); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); box-shadow: var(--sh-soft); } /* ---------------------------------------------------------------------------- 4) LAYOUT — container, sezioni, utility ------------------------------------------------------------------------- */ .contenitore{ width: 100%; max-width: var(--larghezza-contenuto); margin-inline: auto; padding-inline: var(--padding-lato); } .contenitore--stretto{ max-width: 820px; } .sezione{ padding-block: clamp(var(--sp-6), 6vw, var(--sp-8)); } .sezione--crema{ background: var(--colore-crema); } .sezione--avorio{ background: var(--colore-avorio); } .sezione--bianco{ background: var(--colore-bianco); } .sezione--aurora{ background: var(--aurora), var(--colore-crema); } .intestazione-sezione{ max-width: 720px; margin-bottom: var(--sp-6); } .intestazione-sezione--centro{ margin-inline: auto; text-align: center; } .intestazione-sezione p{ margin-top: var(--sp-3); color: var(--colore-inchiostro); } .griglia{ display: grid; gap: var(--sp-4); } .griglia--2{ grid-template-columns: repeat(2, 1fr); } .griglia--3{ grid-template-columns: repeat(3, 1fr); } .griglia--auto{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Coppia (testo+media o due colonne): 2 col da desktop, impila su mobile. Usata al posto degli stili inline grid-template-columns, così la media query funziona. */ .griglia--coppia{ grid-template-columns: 1fr 1fr; } @media (max-width: 820px){ .griglia--coppia{ grid-template-columns: 1fr; } } .flex{ display: flex; gap: var(--sp-3); } .flex--wrap{ flex-wrap: wrap; } .flex--centro{ align-items: center; justify-content: center; } .flex--col{ flex-direction: column; } .visivamente-nascosto{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------------- 5) SKIP LINK (salta al contenuto) ------------------------------------------------------------------------- */ .salta-contenuto{ position: absolute; left: 50%; top: -100px; transform: translateX(-50%); background: var(--cta-bg); color: #fff; padding: 12px 22px; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 700; z-index: 2000; transition: top .2s ease; } .salta-contenuto:focus{ top: 12px; } /* ---------------------------------------------------------------------------- 6) ESTETICA ACQUERELLO / decori ------------------------------------------------------------------------- */ /* Macchie acquerello in puro CSS (radial-gradient sfumati). */ .acquerello{ position: relative; isolation: isolate; overflow: hidden; } .acquerello::before, .acquerello::after{ content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; } .acquerello::before{ width: 46vw; height: 46vw; max-width: 560px; max-height: 560px; top: -8%; right: -6%; background: radial-gradient(circle at 30% 30%, var(--colore-rosa-cipria), transparent 70%); } .acquerello::after{ width: 40vw; height: 40vw; max-width: 480px; max-height: 480px; bottom: -10%; left: -8%; background: radial-gradient(circle at 60% 40%, var(--colore-lavanda), transparent 70%); } .macchia-salvia::after{ background: radial-gradient(circle at 60% 40%, var(--colore-salvia), transparent 70%); } /* Divider line-art oro (SVG inline messo nell'HTML) */ .divider-oro{ display: flex; align-items: center; justify-content: center; margin: var(--sp-5) auto; color: var(--colore-oro); } .divider-oro svg{ width: clamp(120px, 28vw, 220px); height: auto; } /* Filetto orizzontale decorativo */ .filetto{ height: 1px; border: 0; max-width: 120px; margin: var(--sp-4) 0; background: linear-gradient(90deg, var(--colore-oro), transparent); } .filetto--centro{ margin-inline: auto; background: linear-gradient(90deg, transparent, var(--colore-oro), transparent); } /* ---------------------------------------------------------------------------- 7) BOTTONI (.btn) ------------------------------------------------------------------------- */ .btn{ font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 14px 26px; border-radius: var(--r-pill); border: 2px solid transparent; min-height: 48px; /* hit target accessibile */ text-align: center; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease; will-change: transform; } .btn svg{ width: 20px; height: 20px; flex: none; } /* Primario — oro profondo, testo bianco (AA ~4.8:1) */ .btn--oro{ background: linear-gradient(135deg, var(--cta-bg), #76591D); color: var(--cta-testo); box-shadow: 0 10px 26px rgba(140,110,40,.30); } .btn--oro:hover{ background: linear-gradient(135deg, var(--cta-bg-hover), #5E4818); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(140,110,40,.38); } /* Secondario — contorno salvia */ .btn--outline{ background: var(--colore-bianco); color: var(--colore-inchiostro); border-color: var(--colore-salvia-scuro); } .btn--outline:hover{ background: rgba(127,164,140,.12); border-color: var(--salvia, var(--colore-salvia-scuro)); transform: translateY(-2px); } /* WhatsApp */ .btn--whatsapp{ background: var(--colore-bianco); color: var(--colore-whatsapp-scuro); border-color: var(--colore-whatsapp); } .btn--whatsapp:hover{ background: rgba(37,211,102,.10); transform: translateY(-2px); } .btn--whatsapp svg{ color: var(--colore-whatsapp-scuro); } /* Dimensioni */ .btn--sm{ padding: 10px 18px; min-height: 42px; font-size: .94rem; } .btn--lg{ padding: 17px 34px; min-height: 56px; font-size: 1.12rem; } .btn--blocco{ width: 100%; } /* Coppia CTA (Calendly + WhatsApp affiancati) */ .coppia-cta{ display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* Micro-rassicurazione sotto le CTA */ .rassicurazione{ font-family: var(--font-ui); font-size: var(--fs-small); color: var(--colore-testo-soft); display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); } .rassicurazione .punto{ width: 4px; height: 4px; border-radius: 50%; background: var(--colore-oro); display: inline-block; } @media (max-width: 768px){ .rassicurazione--centro-mob{ justify-content: center; text-align: center; width: 100%; } } /* ---------------------------------------------------------------------------- 8) NAVBAR sticky (.site-header) ------------------------------------------------------------------------- */ .site-header{ position: sticky; top: 0; z-index: 1000; background: rgba(251,246,239,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,162,75,.18); transition: box-shadow .3s ease, background-color .3s ease; } .site-header.scrolled{ box-shadow: var(--sh-soft); background: rgba(251,246,239,.96); } .site-header__inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--altezza-header); } .brand{ display: inline-flex; align-items: center; gap: var(--sp-3); } .brand__logo{ width: 44px; height: 44px; color: var(--colore-oro); flex: none; } .brand__nome{ font-family: var(--font-occhiello); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; color: var(--colore-inchiostro); line-height: 1; } .brand__nome small{ display: block; font-family: var(--font-ui); font-weight: 600; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--colore-testo-soft); margin-top: 3px; } .nav-principale{ display: flex; align-items: center; gap: var(--sp-5); } .nav-principale__lista{ display: flex; align-items: center; gap: var(--sp-4); } .nav-principale__lista li{ display: flex; align-items: center; } .nav-principale__lista a{ font-family: var(--font-ui); font-weight: 600; font-size: .98rem; color: var(--colore-inchiostro); padding: 6px 2px; position: relative; text-align: center; line-height: 1.25; transition: color .2s ease; } .nav-principale__lista a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--colore-oro); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-principale__lista a:hover{ color: #7E6020; } .nav-principale__lista a:hover::after, .nav-principale__lista a[aria-current="page"]::after{ transform: scaleX(1); } .nav-principale__lista a[aria-current="page"]{ color: #7E6020; } /* Hamburger */ .nav-toggle{ display: none; width: 48px; height: 48px; border-radius: var(--r-sm); align-items: center; justify-content: center; color: var(--colore-inchiostro); } .nav-toggle__barre, .nav-toggle__barre::before, .nav-toggle__barre::after{ content: ""; display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease; } .nav-toggle__barre::before{ transform: translateY(-7px); } .nav-toggle__barre::after{ transform: translateY(5px); } .nav-toggle[aria-expanded="true"] .nav-toggle__barre{ background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__barre::before{ transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__barre::after{ transform: rotate(-45deg); } /* ---------------------------------------------------------------------------- 9) BREADCRUMB ------------------------------------------------------------------------- */ .breadcrumb{ background: var(--colore-avorio); border-bottom: 1px solid rgba(201,162,75,.14); } .breadcrumb__lista{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-small); padding-block: var(--sp-3); color: var(--colore-inchiostro); } .breadcrumb__lista a{ color: var(--colore-inchiostro); } .breadcrumb__lista a:hover{ color: #7E6020; text-decoration: underline; } .breadcrumb__sep{ color: var(--colore-oro); } .breadcrumb__lista [aria-current="page"]{ color: var(--colore-testo-soft); } /* ---------------------------------------------------------------------------- 10) CARD SERVIZIO ------------------------------------------------------------------------- */ .card-servizio{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.20); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-card); height: 100%; display: flex; flex-direction: column; gap: var(--sp-3); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-servizio__footer{ margin-top: auto; } .card-servizio > .coppia-cta{ margin-top: var(--sp-2); } /* Blocco prezzo+azioni ancorato in basso: badge sempre alla stessa altezza */ .card-servizio__pb{ margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-3); } .card-servizio__pb .card-servizio__footer{ margin-top: 0; } .card-servizio__pb .coppia-cta{ margin-top: 0; } /* Bottoni card sempre su una riga di metà uguali → altezza fissa, prezzi allineati */ .card-servizio .coppia-cta{ flex-wrap: nowrap; } .card-servizio .coppia-cta .btn{ flex: 1 1 0; min-width: 0; padding-inline: 10px; } /* Link "Vedi trattamento →" ancorato in basso → allineato tra le card */ /* Link "Scopri di più" dentro card cliccabile → aspetto chiaramente cliccabile */ .card-servizio[data-modale] .card-servizio__link .claim-firma{ cursor: pointer; border-bottom: 1px solid transparent; transition: border-color .2s ease; } .card-servizio[data-modale]:hover .card-servizio__link .claim-firma{ border-bottom-color: currentColor; } .card-servizio__link{ margin-top: auto; } /* Card servizio banner a tutta larghezza (evita la card isolata) */ .card-servizio--banner{ grid-column: 1 / -1; } @media (min-width: 760px){ .card-servizio--banner{ flex-direction: row; align-items: center; gap: var(--sp-5); } .card-servizio--banner .card-servizio__icona{ margin: 0; flex: none; } .card-servizio--banner__corpo{ display: flex; flex-direction: column; gap: var(--sp-2); } } /* Griglia "Il mio approccio": 4 card senza lasciarne una isolata */ .griglia--approccio{ grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px){ .griglia--approccio{ grid-template-columns: 1fr 1fr; } } @media (max-width: 520px){ .griglia--approccio{ grid-template-columns: 1fr; } } .card-servizio:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); border-color: var(--colore-oro); } .card-servizio__icona{ width: 56px; height: 56px; color: var(--colore-oro); } .card-servizio__icona svg{ width: 100%; height: 100%; } .card-servizio h3{ font-size: var(--fs-h4); } .card-servizio p{ color: var(--colore-inchiostro); font-size: 1.02rem; } .card-servizio__footer{ margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; } /* Badge prezzo (in evidenza) */ .badge-prezzo{ font-family: var(--font-ui); font-weight: 800; font-size: 1.15rem; color: var(--colore-inchiostro); background: linear-gradient(135deg, var(--colore-oro-chiaro), #F1E2BE); border: 1px solid var(--colore-oro); padding: 6px 16px; border-radius: var(--r-pill); display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; } .badge-prezzo small{ font-size: .72rem; font-weight: 700; color: #6F571F; } .prezzo-secondario{ font-family: var(--font-ui); font-size: var(--fs-small); color: var(--colore-testo-soft); } .prezzo-richiesta{ font-family: var(--font-ui); font-weight: 800; font-size: 1.02rem; color: var(--colore-viola); background: rgba(142,122,176,.12); border: 1px solid var(--colore-lavanda); padding: 6px 16px; border-radius: var(--r-pill); display: inline-block; } /* Nota-box: piccolo riquadro informativo dentro le schede */ .nota-box{ display: flex; gap: var(--sp-2); align-items: flex-start; background: rgba(127,164,140,.12); border: 1px solid var(--colore-salvia-scuro); border-radius: var(--r-md); padding: var(--sp-3); font-family: var(--font-ui); font-size: .9rem; color: var(--colore-inchiostro); line-height: 1.5; } .nota-box svg{ width: 20px; height: 20px; color: var(--colore-salvia-scuro); flex: none; margin-top: 2px; } .nota-box a{ color: #3F5E4B; } .nota-box--larga{ font-size: 1rem; padding: var(--sp-4); } /* Callout sacro (Essenza in Viaggio) */ .callout-sacro{ text-align: center; margin: var(--sp-6) 0; padding: var(--sp-5); border-top: 1px solid rgba(201,162,75,.3); border-bottom: 1px solid rgba(201,162,75,.3); } .callout-sacro p:last-child{ font-family: var(--font-titolo); font-size: clamp(1.4rem,1.1rem+1.4vw,2rem); color: var(--colore-inchiostro); margin-top: var(--sp-2); } /* Mini-valore (icona + titolo + testo, centrato) */ .mini-valore{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .mini-valore svg{ width: 40px; height: 40px; margin-bottom: var(--sp-1); } .mini-valore h3{ font-size: var(--fs-h4); } .mini-valore p{ color: var(--colore-inchiostro); } /* Meta-card (Prossima Meta) */ .meta-card{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.25); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-card); } /* Box Telegram */ .box-telegram{ display: flex; gap: var(--sp-5); align-items: center; background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.25); border-radius: var(--r-lg); padding: clamp(var(--sp-4), 4vw, var(--sp-6)); box-shadow: var(--sh-card); } .box-telegram__icona{ flex: none; color: var(--colore-oro); } .box-telegram__icona svg{ width: 88px; height: 88px; } @media (max-width: 640px){ .box-telegram{ flex-direction: column; text-align: center; } } /* ---- CONTATTI ---- */ .contatto-box{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-radius: var(--r-lg); padding: clamp(var(--sp-4), 4vw, var(--sp-5)); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: var(--sp-3); } .contatto-box__icona{ width: 54px; height: 54px; color: var(--colore-oro); } .contatto-box__icona svg{ width: 100%; height: 100%; } .contatto-box__icona--whatsapp{ color: var(--colore-whatsapp-scuro); } .contatto-box .btn{ margin-top: var(--sp-2); } .contatto-box--whatsapp{ background: linear-gradient(180deg,#fff,#F6FBF7); border-color: rgba(37,211,102,.35); } .numero-tel{ font-family: var(--font-ui); font-weight: 800; font-size: 1.1rem; color: var(--colore-whatsapp-scuro); text-align: center; } .numero-tel:hover{ text-decoration: underline; } /* Calendly embed */ .calendly-wrap{ width: 100%; height: 560px; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(201,162,75,.25); background: var(--colore-avorio); } @media (max-width: 768px){ .calendly-wrap{ height: 640px; } } /* Social contatto */ .contatto-social{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-soft); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .contatto-social:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); border-color: var(--colore-oro); } .contatto-social svg{ width: 36px; height: 36px; color: var(--colore-oro); } .contatto-social__nome{ font-family: var(--font-ui); font-weight: 800; font-size: 1.05rem; } /* ---- FORM CONTATTI ---- */ .form-contatti{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-radius: var(--r-lg); padding: clamp(var(--sp-4), 4vw, var(--sp-6)); box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: var(--sp-4); } .campo{ display: flex; flex-direction: column; gap: var(--sp-2); } .campo label{ font-family: var(--font-ui); font-weight: 700; font-size: .96rem; color: var(--colore-inchiostro); } .obbligatorio{ color: var(--colore-rosa-profondo); } .campo input, .campo textarea{ font-family: var(--font-corpo); font-size: 1.05rem; color: var(--colore-inchiostro); background: var(--colore-crema); border: 1.5px solid rgba(74,63,69,.22); border-radius: var(--r-sm); padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; } .campo textarea{ resize: vertical; min-height: 120px; } .campo input:focus, .campo textarea:focus{ outline: none; border-color: var(--colore-oro); box-shadow: 0 0 0 3px rgba(201,162,75,.18); } .campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"]{ border-color: #b3433d; box-shadow: 0 0 0 3px rgba(201,139,134,.22); } .campo__errore{ font-family: var(--font-ui); font-size: .84rem; font-weight: 700; color: #9b3b36; display: flex; align-items: center; gap: 6px; } .campo__errore::before{ content: "⚠"; } .campo--checkbox{ flex-direction: row; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; } .campo--checkbox input{ width: 22px; height: 22px; margin-top: 3px; accent-color: var(--cta-bg); flex: none; } .campo--checkbox label{ flex: 1; font-weight: 400; line-height: 1.5; } .campo--checkbox .campo__errore{ flex-basis: 100%; } /* Honeypot: nascosto agli umani, fuori schermo */ .honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Esito form */ .form-esito{ font-family: var(--font-ui); font-weight: 700; border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); } .form-esito--ok{ background: rgba(127,164,140,.18); color: #2f6b45; border: 1px solid var(--colore-salvia-scuro); } .form-esito--ko{ background: rgba(201,139,134,.16); color: #9b3b36; border: 1px solid var(--colore-rosa-profondo); } /* ---- FAQ ---- */ .faq{ display: flex; flex-direction: column; gap: var(--sp-3); } .faq__voce{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-radius: var(--r-md); box-shadow: var(--sh-soft); overflow: hidden; } .faq__voce summary{ cursor: pointer; list-style: none; padding: var(--sp-4); font-family: var(--font-titolo); font-size: var(--fs-h4); color: var(--colore-inchiostro); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .faq__voce summary::-webkit-details-marker{ display: none; } .faq__voce summary::after{ content: "+"; font-family: var(--font-ui); color: var(--colore-oro); font-size: 1.6rem; line-height: 1; transition: transform .25s ease; } .faq__voce[open] summary::after{ transform: rotate(45deg); } .faq__risposta{ padding: 0 var(--sp-4) var(--sp-4); } .faq__risposta p{ color: var(--colore-inchiostro); } /* ---------------------------------------------------------------------------- 11) BADGE CATEGORIA (pill) e BADGE GRADINO ------------------------------------------------------------------------- */ .pill{ font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; } .pill--one-to-one{ background: rgba(142,122,176,.16); color: #5E4E7C; border-color: var(--colore-lavanda); } .pill--trattamento{ background: rgba(127,164,140,.18); color: #3F5E4B; border-color: var(--colore-salvia-scuro); } .pill--gruppo{ background: rgba(201,139,134,.18); color: #8A4B47; border-color: var(--colore-rosa-profondo); } .pill--percorso{ background: rgba(74,63,69,.08); color: var(--colore-inchiostro); border-color: rgba(74,63,69,.25); } .badge-gradino{ font-family: var(--font-ui); font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; gap: 8px; color: #6F571F; background: linear-gradient(135deg, rgba(227,203,142,.5), rgba(241,226,190,.5)); border: 1px solid var(--colore-oro); padding: 6px 14px; border-radius: var(--r-pill); } .badge-gradino .num{ width: 22px; height: 22px; border-radius: 50%; background: var(--cta-bg); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex: none; } /* ---------------------------------------------------------------------------- 12) SCHEDA PERCORSO ------------------------------------------------------------------------- */ .card-percorso{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.22); border-radius: var(--r-lg); padding: clamp(var(--sp-4), 4vw, var(--sp-6)); box-shadow: var(--sh-card); height: 100%; display: flex; flex-direction: column; gap: var(--sp-3); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .card-percorso:hover{ transform: translateY(-4px); box-shadow: var(--sh-hover); border-color: var(--colore-oro); } .card-percorso__top{ display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } .card-percorso h3{ font-size: var(--fs-h3); margin-top: var(--sp-1); } .card-percorso__payoff{ font-family: var(--font-occhiello); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; color: #5E4E7C; } .card-percorso__meta{ display: flex; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-small); color: var(--colore-inchiostro); } .card-percorso__meta span{ display: inline-flex; align-items: center; gap: 6px; } .card-percorso__meta svg{ width: 16px; height: 16px; color: var(--colore-oro); flex: none; } .card-percorso__include{ display: flex; flex-direction: column; gap: var(--sp-2); } .card-percorso__include li{ display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 1.02rem; } .card-percorso__include li svg{ width: 18px; height: 18px; color: var(--colore-salvia-scuro); flex: none; margin-top: 5px; } .card-percorso__prezzo{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding-top: var(--sp-2); margin-top: auto; } .card-percorso__footer{ margin-top: 0; display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid rgba(201,162,75,.16); } /* quando il prezzo ancora in basso, il footer lo segue senza spinta extra */ .card-percorso__prezzo + .card-percorso__footer{ margin-top: var(--sp-3); } .card-percorso--evidenza{ border-color: var(--colore-oro); box-shadow: var(--sh-hover); background: linear-gradient(180deg, #fff, #FFFDF8); } .card-percorso--banner{ grid-column: 1 / -1; } /* Griglia 2 colonne bilanciata (evita la 4ª card isolata) */ @media (min-width: 760px){ .griglia--due-bilanciata{ grid-template-columns: 1fr 1fr; } } @media (min-width: 760px){ .card-percorso--banner{ flex-direction: row; align-items: center; gap: var(--sp-6); } .card-percorso--banner__testo{ flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); } .card-percorso--banner__azioni{ flex: none; display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; } } /* Connettore "scala di crescita" tra i due gradini */ .scala-crescita{ display: grid; gap: var(--sp-4); position: relative; } @media (min-width: 880px){ .scala-crescita{ grid-template-columns: 1fr auto 1fr; align-items: stretch; } } .scala-crescita__freccia{ display: flex; align-items: center; justify-content: center; color: var(--colore-oro); font-family: var(--font-occhiello); font-weight: 700; } .scala-crescita__freccia svg{ width: 46px; height: 46px; } /* ---------------------------------------------------------------------------- 13) BLOCCO CTA RICORRENTE (.cta-conversione) + FASCIA CTA FINALE ------------------------------------------------------------------------- */ .cta-conversione{ background: var(--aurora), var(--colore-avorio); border: 1px solid rgba(201,162,75,.25); border-radius: var(--r-lg); padding: clamp(var(--sp-5), 5vw, var(--sp-7)); text-align: center; box-shadow: var(--sh-soft); } .cta-conversione h2{ margin-bottom: var(--sp-3); } .cta-conversione p{ max-width: 620px; margin-inline: auto; } .cta-conversione .coppia-cta{ justify-content: center; margin-top: var(--sp-5); } .cta-conversione .rassicurazione{ justify-content: center; } .fascia-cta{ background: var(--colore-avorio); } .fascia-cta .cta-conversione{ background: var(--colore-bianco); } /* ---------------------------------------------------------------------------- 14) TESTIMONIANZA ------------------------------------------------------------------------- */ .testimonianza{ background: var(--colore-bianco); border: 1px solid rgba(201,162,75,.18); border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-soft); display: flex; flex-direction: column; gap: var(--sp-3); } .testimonianza__stelle{ color: var(--colore-oro); display: flex; gap: 3px; } .testimonianza__stelle svg{ width: 18px; height: 18px; } .testimonianza blockquote{ font-family: var(--font-titolo); font-size: 1.3rem; line-height: 1.5; color: var(--colore-inchiostro); font-style: italic; } .testimonianza__autore{ font-family: var(--font-ui); font-weight: 700; font-size: var(--fs-small); color: var(--colore-testo-soft); margin-top: auto; } .testimonianza__placeholder{ color: var(--colore-rosa-profondo); font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .04em; } /* Chip "Guarda l'originale" (miniatura screenshot testimonianza) */ .testimonianza__prova{ display: inline-flex; align-items: center; gap: 10px; margin-top: var(--sp-3); padding: 5px 14px 5px 5px; border: 1px solid rgba(201,162,75,.35); border-radius: var(--r-pill); background: var(--colore-crema); cursor: zoom-in; font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: #6F571F; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; align-self: flex-start; } .testimonianza__prova img{ width: 38px; height: 38px; object-fit: cover; object-position: 50% 78%; border-radius: 50%; border: 1px solid var(--colore-oro); flex: none; } .testimonianza__prova:hover{ background: #fff; box-shadow: var(--sh-soft); transform: translateY(-1px); } /* Lightbox */ .lightbox{ position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(42,37,48,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .lightbox.aperto{ display: flex; animation: lb-fade .2s ease; } @keyframes lb-fade{ from{ opacity: 0; } to{ opacity: 1; } } .lightbox img{ max-width: min(92vw, 480px); max-height: 88vh; width: auto; height: auto; border-radius: var(--r-md); border: 3px solid #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .lightbox__chiudi{ position: absolute; top: 16px; right: 18px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 2rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease; } .lightbox__chiudi:hover{ background: rgba(255,255,255,.28); } /* ---------------------------------------------------------------------------- 15) SLOT IMMAGINE (.img-slot) ------------------------------------------------------------------------- */ .img-slot{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; background: var(--aurora), var(--colore-avorio); border: 1.5px dashed var(--colore-oro); border-radius: var(--r-lg); color: #6F571F; padding: var(--sp-5); min-height: 240px; overflow: hidden; } .img-slot svg{ width: 48px; height: 48px; color: var(--colore-oro); opacity: .9; } .img-slot__etichetta{ font-family: var(--font-ui); font-weight: 800; font-size: .9rem; color: #6F571F; } .img-slot__hint{ font-family: var(--font-ui); font-size: .8rem; color: var(--colore-testo-soft); max-width: 280px; } .img-slot--alta{ min-height: 420px; } .img-slot--ritratto{ aspect-ratio: 4/5; min-height: 0; } .img-slot--larga{ aspect-ratio: 16/9; min-height: 0; } /* ---------------------------------------------------------------------------- 15b) RIQUADRO VIDEO (segnaposto + futuro embed YouTube/Vimeo o