/*
Theme Name: Farmacia Mocellini
Theme URI: https://www.farmaciamocellini.com
Author: Gruppo Equity Digital
Description: Tema custom per Farmacia Mocellini — Farmacia & Beauty Clinic, Ronchi di Campanile. Replica del sito storico, predisposto per WooCommerce.
Version: 3.45.0
Requires PHP: 7.0
License: Proprietario
Text Domain: farmacia-mocellini
*/
:root {
--fm-green: #51ad32;
--fm-green-dark: #3f8a26;
--fm-green-light: #eaf6e4;
--fm-dark: #111111;
--fm-gray: #999999;
--fm-white: #ffffff;
--fm-radius: 14px;
--fm-header-h: 154px;
--fm-footer-bg: #3a3a38;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: 'Raleway', -apple-system, Segoe UI, sans-serif;
font-size: 15px;
line-height: 1.75;
color: var(--fm-gray);
background: var(--fm-white);
}
img { max-width: 100%; height: auto; }
a { color: var(--fm-green); text-decoration: none; transition: color .2s; }
a:hover { color: var(--fm-green-dark); }
h1, h2, h3, h4 { font-family: 'Raleway', sans-serif; color: var(--fm-dark); line-height: 1.25; margin: 0 0 .6em; font-weight: 800; letter-spacing: .02em; }
h1 { font-size: 40px; text-transform: uppercase; }
h2 { font-size: 30px; text-transform: uppercase; }
h3 { font-size: 21px; }
.fm-container { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.fm-script { font-family: 'Caveat', cursive; font-weight: 700; letter-spacing: .01em; }
/* ---------- Header a due livelli (come il sito storico) ---------- */
/* La testata resta in cima allo schermo ma occupa il suo spazio nel flusso
della pagina: così sotto il menu non può mai comparire una striscia bianca,
qualunque sia la grandezza del logo o della barra di WordPress. */
.fm-header {
position: sticky; top: 0; z-index: 1000;
background: var(--fm-white);
box-shadow: 0 2px 14px rgba(0,0,0,.10);
}
.fm-header-top { border-bottom: 3px solid var(--fm-green); }
.fm-header-top-inner { display: flex; align-items: center; justify-content: space-between; height: 104px; gap: 20px; }
.fm-logo { display: flex; align-items: center; }
.fm-logo img { max-height: 84px; width: auto; }
/* Barra verde: si adatta al contenuto, niente verde vuoto a destra */
.fm-mainbar { display: flex; align-items: center; background: var(--fm-green); padding: 0 12px 0 6px; height: 46px; flex: 0 1 auto; margin-left: 22px; }
.fm-mainbar ul { list-style: none; display: flex; align-items: stretch; margin: 0; padding: 0; flex: 0 1 auto; }
.fm-mainbar li { display: flex; flex: 0 0 auto; justify-content: center; }
.fm-mainbar li + li { border-left: 1px solid rgba(255,255,255,.45); }
.fm-mainbar a {
color: #fff; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .03em;
padding: 0 13px; line-height: 46px; white-space: nowrap; text-align: center;
}
.fm-mainbar a { transition: background .15s, color .15s; }
.fm-mainbar a:hover, .fm-mainbar li.current-menu-item > a { background: var(--fm-green-dark); color: #fff; }
.fm-mainbar-social { display: flex; align-items: center; border-left: 1px solid rgba(255,255,255,.45); margin-left: 0; padding-left: 12px; flex: none; }
.fm-mainbar-social a { color: #fff; display: flex; padding: 0 7px; }
.fm-mainbar-social svg { width: 16px; height: 16px; }
.fm-mainbar-social a:hover { color: #dcffcf; }
/* Riga bianca dei servizi: a tutta larghezza come l'originale, da bordo a bordo */
.fm-subnav { background: var(--fm-white); }
.fm-subnav .fm-container { max-width: 100%; padding: 0; }
.fm-subnav ul { list-style: none; display: flex; justify-content: space-between; flex-wrap: nowrap; margin: 0; padding: 0; width: 100%; }
.fm-subnav li { display: flex; align-items: stretch; flex: 1 1 auto; justify-content: center; }
.fm-subnav li + li { border-left: 1px solid #9a9a9a; }
.fm-subnav a { color: #333; font-size: 17px; font-weight: 600; padding: 13px 8px; line-height: 1.4; white-space: nowrap; transition: background .15s, color .15s; width: 100%; text-align: center; }
.fm-subnav a:hover, .fm-subnav li.current-menu-item > a { background: var(--fm-green); color: #fff; }
.fm-burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.fm-burger span { display: block; width: 26px; height: 3px; background: var(--fm-dark); margin: 5px 0; border-radius: 2px; transition: .25s; }
/* ---------- Testata home (video o foto) ---------- */
/* Nessuno spazio da recuperare: la testata sta già dentro la pagina. */
.fm-main { padding-top: 0; }
/* Con la barra di WordPress in cima la testata si ferma appena sotto. */
body.admin-bar .fm-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .fm-header { top: 46px; }
}
.fm-hometop { position: relative; overflow: hidden; line-height: 0; }
.fm-hometop-media { width: 100%; height: clamp(320px, 46vw, 620px); object-fit: cover; display: block; }
.fm-hometop-yt { position: relative; width: 100%; aspect-ratio: 16/9; max-height: 620px; overflow: hidden; }
.fm-hometop-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Nastro che attraversa la giunzione video/hero: posizionato in assoluto,
metà sopra il video e metà sul verde. Niente fasce bianche, scritta intera. */
.fm-ribbon { position: relative; height: 0; margin: 0; z-index: 3; pointer-events: none; }
.fm-ribbon img { position: absolute; top: -6.4vw; left: 0; width: 100%; height: auto; display: block; transform: scaleY(1.18); transform-origin: center; }
/* Variante SENZA video di testata: l'arco parte pulito in cima (niente rimasugli)
e l'hero verde gli sale dietro; la foto aderisce all'arco senza spazi. */
.fm-ribbon-solo { height: auto; }
.fm-ribbon-solo img { position: static; transform: none; width: 100%; }
.fm-ribbon-solo + .fm-hero { margin-top: -11.5vw; padding-top: calc(11.5vw + 6px); }
.fm-ribbon-solo + .fm-hero .fm-hero-inner { padding-top: 0; }
.fm-ribbon-solo + .fm-hero .fm-hero-img { margin-top: -15vw; }
/* ---------- Hero sotto il nastro (fondo verde chiaro come l'originale) ---------- */
.fm-hero { position: relative; overflow: visible; background: #e9f3e2; margin-top: 0; padding-top: calc(6.8vw + 30px); }
.fm-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding: 0 0 64px; }
.fm-hero-copy { padding-top: 40px; }
.fm-hero h1 { margin: 0 0 26px; line-height: 1.3; }
.fm-hero h1 .line1 { display: block; font-weight: 400; text-transform: none; font-size: 40px; color: #1c1c1c; }
.fm-hero h1 .line2 { display: block; font-weight: 400; text-transform: uppercase; font-size: 40px; color: #1c1c1c; letter-spacing: .01em; }
.fm-hero p { font-size: 17.5px; line-height: 1.8; color: #3b3b3b; max-width: 520px; }
.fm-hero p strong, .fm-hero p b { color: #111; }
/* La foto del team si incastra SOTTO l'arco verde: sale fin dentro la curva,
ma il nastro (z-index più alto) le passa sopra, come nell'originale */
.fm-hero-img { margin-top: -14vw; position: relative; z-index: 2; }
.fm-hero-img img { width: 118%; max-width: 990px; height: auto; display: block; margin-left: -9%; filter: drop-shadow(0 20px 36px rgba(60,120,40,.2)); }
.fm-split-title { line-height: 1.35; margin-bottom: 22px; }
.fm-split-title .line1 { display: block; font-weight: 400; text-transform: none; font-size: 38px; color: #1c1c1c; }
.fm-split-title .line2 { display: block; font-weight: 400; text-transform: uppercase; font-size: 38px; color: #1c1c1c; }
/* Sezione team: decorazioni a goccia sullo sfondo, testo come l'originale */
/* ---------- Due riquadri sopra la sezione TEAM (home) ---------- */
.fm-banner2 { padding: 26px 0 6px; }
.fm-banner2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.fm-banner {
display: grid; grid-template-columns: 46% 1fr; align-items: stretch;
background: #eef0f1; border-radius: 6px; overflow: hidden; min-height: 250px;
box-shadow: 0 10px 26px rgba(0,0,0,.09);
}
.fm-banner-foto { line-height: 0; }
.fm-banner-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-banner-testo { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.fm-banner-tit {
margin: 0; color: var(--fm-green); font-size: 21px; font-weight: 800;
text-transform: uppercase; line-height: 1.2; letter-spacing: .01em;
}
.fm-banner-txt { margin: 0; color: #4a4a48; font-size: 15px; line-height: 1.55; }
.fm-banner-btn {
align-self: flex-start; display: inline-block; background: #fff; color: var(--fm-dark);
border: 2px solid var(--fm-green); border-radius: 40px; padding: 12px 24px;
font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
text-decoration: none; transition: background .2s, color .2s;
/* La scritta va a capo se serve: così un testo lungo non sborda dal riquadro. */
white-space: normal; text-align: center; line-height: 1.25; max-width: 100%;
}
.fm-banner-btn:hover { background: var(--fm-green); color: #fff; }
@media (max-width: 1000px) { .fm-banner2-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
.fm-banner { grid-template-columns: 1fr; min-height: 0; }
.fm-banner-foto img { height: 210px; }
.fm-banner-testo { padding: 22px; }
.fm-banner-btn { align-self: stretch; }
}
/* ---------- Pagina Carta fedeltà ---------- */
.fm-cf-hero { line-height: 0; }
.fm-cf-hero img { width: 100%; height: clamp(250px, 30vw, 420px); object-fit: cover; object-position: center 38%; display: block; }
.fm-cf { padding: 0 0 10px; margin-top: -26px; position: relative; z-index: 2; }
.fm-cf-pannello {
background: #eef0f1; border-radius: 14px; padding: 46px 54px 50px;
box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.fm-cf-tit { margin: 0 0 18px; color: var(--fm-green); font-size: 32px; font-weight: 800; text-transform: uppercase; }
.fm-cf-pannello h2 { color: var(--fm-green); font-size: 22px; font-weight: 800; margin: 30px 0 10px; }
.fm-cf-pannello p { font-size: 17px; line-height: 1.7; color: #3f3f3d; margin: 0 0 14px; }
.fm-cf-intro { font-size: 19px !important; }
.fm-cf-pannello ul { margin: 4px 0 18px; padding-left: 22px; }
.fm-cf-pannello li { font-size: 17px; line-height: 1.7; color: #3f3f3d; margin-bottom: 8px; }
.fm-cf-pannello .fm-banner-btn { margin-top: 12px; }
@media (max-width: 700px) {
/* Sul telefono niente ritaglio: la tessera si vede tutta. */
.fm-cf-hero img { height: auto; min-height: 0; }
.fm-cf { margin-top: -18px; }
.fm-cf-pannello { padding: 30px 24px 34px; border-radius: 10px; }
.fm-cf-tit { font-size: 25px; }
.fm-cf-pannello p, .fm-cf-pannello li { font-size: 16px; }
}
/* ---------- Pagina Prenota un appuntamento ---------- */
.fm-pr { padding: 0 0 26px; }
.fm-pr:first-of-type { margin-top: -26px; position: relative; z-index: 2; }
.fm-pr-pannello {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
background: #eef0f1; border-radius: 14px; padding: 42px 48px 46px;
box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.fm-pr-pannello.stretto { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.fm-pr-testo h1 { margin: 0 0 14px; color: var(--fm-green); font-size: 32px; font-weight: 800; text-transform: uppercase; }
.fm-pr-testo h2 { color: var(--fm-green); font-size: 21px; font-weight: 800; margin: 28px 0 10px; }
.fm-pr-testo p { font-size: 16.5px; line-height: 1.7; color: #3f3f3d; margin: 0 0 12px; }
.fm-pr-form-tit { margin: 0 0 16px; color: var(--fm-green); font-size: 21px; font-weight: 800; }
.fm-pr-scelta select {
width: 100%; padding: 15px 18px; border: 2px solid var(--fm-green); border-radius: 40px;
background: #fff; font-family: inherit; font-size: 15px; color: #3a3a38; margin-bottom: 12px;
}
.fm-pr-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fm-pr-campi input, .fm-pr-campi select, .fm-pr form textarea, .fm-modulo-wa form textarea {
width: 100%; padding: 13px 16px; border: 2px solid var(--fm-green); border-radius: 10px;
background: #fff; font-family: inherit; font-size: 15px; color: #3a3a38;
}
.fm-pr form textarea, .fm-modulo-wa form textarea { display: block; width: 100%; margin-bottom: 12px; resize: vertical; }
.fm-pr-eti { display: block; font-size: 12px; font-weight: 700; color: #6a6a68; text-transform: uppercase; letter-spacing: .04em; }
.fm-pr-eti input, .fm-pr-eti select { margin-top: 5px; }
.fm-pr .fm-ct-privacy, .fm-modulo-wa .fm-ct-privacy { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: #55554f; margin: 6px 0 14px; }
.fm-pr-invia { margin: 0; }
.fm-pr-invia .fm-btn { width: 100%; text-align: center; }
.fm-modulo-wa .fm-pr-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fm-modulo-wa .fm-pr-campi.uno { grid-template-columns: 1fr; }
.fm-modulo-wa .fm-pr-recapito { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: #6a6a68; }
@media (max-width: 860px) { .fm-modulo-wa .fm-pr-campi { grid-template-columns: 1fr; } }
.fm-pr-campi.uno { grid-template-columns: 1fr; }
.fm-pr-recapito { margin: -4px 0 12px; font-size: 13px; line-height: 1.5; color: #6a6a68; }
.fm-pr-recapito strong { color: #3f3f3d; }
.fm-pr-nessuno { background: #fff; border: 2px dashed var(--fm-green); border-radius: 12px; padding: 22px; color: #55554f; }
.fm-pr-eventi { padding-top: 8px; }
.fm-pr-calendario { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; }
.fm-pr-evento { display: flex; gap: 16px; align-items: center; background: #fff; border-left: 5px solid var(--fm-green); border-radius: 10px; padding: 16px 20px; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.fm-pr-data { flex: none; width: 62px; text-align: center; color: var(--fm-green); text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 1.1; }
.fm-pr-data strong { display: block; font-size: 28px; color: var(--fm-dark); }
.fm-pr-evento-testo strong { display: block; font-size: 16px; color: #2c2c2a; }
.fm-pr-evento-testo em { font-style: normal; font-size: 13.5px; color: #6a6a68; }
@media (max-width: 860px) {
.fm-pr-pannello { grid-template-columns: 1fr; gap: 26px; padding: 30px 24px 34px; }
.fm-pr-testo h1 { font-size: 26px; }
.fm-pr-campi { grid-template-columns: 1fr; }
}
/* ---------- Messaggio già pronto per WhatsApp ---------- */
.fm-wa-pronto {
background: #e7f6df; border: 2px solid #25d366; border-radius: 12px;
padding: 20px 22px; margin-bottom: 16px;
}
.fm-wa-pronto strong { display: block; font-size: 18px; color: var(--fm-green); margin-bottom: 6px; }
.fm-wa-pronto p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: #3f3f3d; }
.fm-wa-btn {
display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff;
border-radius: 40px; padding: 14px 26px; font-weight: 800; font-size: 15px;
text-decoration: none; letter-spacing: .02em; box-shadow: 0 8px 20px rgba(37,211,102,.35);
transition: background .2s, transform .15s;
}
.fm-wa-btn::before {
content: ''; width: 20px; height: 20px; flex: none; background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.fm-wa-btn:hover { background: #1eb955; transform: translateY(-1px); }
.fm-wa-nota { margin: 12px 0 0 !important; font-size: 13px !important; color: #6a6a68 !important; }
/* ---------- Fascia "in arrivo l'e-commerce" (home) ---------- */
.fm-ec { padding: 40px 0 58px; }
.fm-ec-box {
position: relative; overflow: hidden; border-radius: 20px;
background: linear-gradient(115deg, #f4fbee 0%, #e6f5d9 55%, #d9f0c8 100%);
border: 1px solid #cfe7bc; box-shadow: 0 18px 40px rgba(60,120,40,.14);
display: grid; grid-template-columns: 1fr 42%; align-items: stretch;
}
.fm-ec-testo { padding: 48px 20px 48px 54px; align-self: center; position: relative; z-index: 3; }
.fm-ec-kicker {
display: inline-block; background: var(--fm-green); color: #fff;
border-radius: 30px; padding: 7px 18px; font-size: 12px; font-weight: 800;
letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.fm-ec-testo h2 {
margin: 0 0 8px; font-size: 34px; font-weight: 800; letter-spacing: .01em;
text-transform: uppercase; color: #2f2f2d; line-height: 1.18;
hyphens: none; -webkit-hyphens: none; overflow-wrap: normal;
}
.fm-ec-testo h2::after {
content: ''; display: block; width: 200px; max-width: 55%; height: 3px;
background: var(--fm-green); margin: 16px 0 18px; border-radius: 2px;
}
.fm-ec-uno { margin: 0 0 6px; font-size: 17.5px; font-weight: 700; color: #33332f; }
.fm-ec-due { margin: 0 0 24px; font-size: 16px; line-height: 1.65; color: #4f4f4a; max-width: 450px; }
.fm-ec-bollino {
display: inline-block; background: var(--fm-green); color: #fff;
border-radius: 40px; padding: 15px 32px; font-size: 14px; font-weight: 800;
letter-spacing: .08em; text-transform: uppercase;
box-shadow: 0 12px 24px rgba(81,173,50,.32);
}
.fm-ec-figura { position: relative; line-height: 0; min-height: 350px; }
.fm-ec-figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; display: block; }
.fm-ec-figura::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, #eaf6df 0%, rgba(234,246,223,0) 24%);
}
.fm-ec-deco, .fm-ec-scintilla { position: absolute; pointer-events: none; z-index: 2; }
.fm-ec-deco {
width: 26px; height: 26px; opacity: .5; background: var(--fm-green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.fm-ec-deco.c1 { top: 22px; left: 26px; width: 20px; height: 20px; }
.fm-ec-deco.c2 { bottom: 26px; left: 58px; width: 28px; height: 28px; opacity: .3; }
/* croci grandi in filigrana, appena accennate */
.fm-ec-filigrana {
position: absolute; z-index: 1; pointer-events: none; background: var(--fm-green);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.fm-ec-filigrana.f1 { top: -34px; left: 8%; width: 150px; height: 150px; opacity: .10; transform: rotate(12deg); }
.fm-ec-filigrana.f2 { bottom: -46px; left: 26%; width: 190px; height: 190px; opacity: .08; transform: rotate(-14deg); }
.fm-ec-filigrana.f3 { top: 34%; left: -30px; width: 120px; height: 120px; opacity: .09; transform: rotate(-8deg); }
.fm-ec-filigrana.f4 { top: 8px; left: 44%; width: 96px; height: 96px; opacity: .11; transform: rotate(18deg); }
.fm-ec-filigrana.f5 { bottom: 18px; left: 4%; width: 76px; height: 76px; opacity: .13; transform: rotate(-6deg); }
.fm-ec-scintilla {
width: 14px; height: 14px; opacity: .5; background: #ffffff;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.fm-ec-scintilla.s1 { top: 40px; left: 50%; }
.fm-ec-scintilla.s2 { bottom: 46px; left: 38%; width: 17px; height: 17px; opacity: .38; }
.fm-ec-scintilla.s3 { top: 52%; left: 14px; width: 10px; height: 10px; opacity: .45; }
@media (max-width: 900px) {
.fm-ec { padding: 30px 0 42px; }
.fm-ec-box { grid-template-columns: 1fr; }
.fm-ec-figura { min-height: 250px; order: -1; }
.fm-ec-figura::after { background: linear-gradient(0deg, #eaf6df 0%, rgba(234,246,223,0) 32%); }
.fm-ec-testo { padding: 22px 26px 34px; text-align: center; }
.fm-ec-testo h2 { font-size: 25px; }
.fm-ec-testo h2::after { margin-left: auto; margin-right: auto; }
.fm-ec-due { margin-left: auto; margin-right: auto; }
.fm-ec-deco.c2, .fm-ec-scintilla.s1, .fm-ec-scintilla.s2 { display: none; }
.fm-ec-filigrana.f2, .fm-ec-filigrana.f4 { display: none; }
.fm-ec-filigrana.f1 { width: 110px; height: 110px; }
}
/* ---------- News in orizzontale (home) ----------
La locandina si vede intera e una volta sola: la sua colonna prende
esattamente la larghezza della locandina, il testo si prende il resto
e si appoggia al lato esterno della pagina. */
.fm-news-blocco {
border-radius: 26px; overflow: hidden; box-shadow: 0 18px 44px rgba(0,0,0,.10);
background: #eef0f1;
}
.fm-news-testata { background: #eef0f1; padding: 38px 46px 32px; }
.fm-news-kicker {
display: block; font-size: 19px; font-weight: 800; letter-spacing: .03em;
text-transform: uppercase; color: #2c2c2a; margin-bottom: 6px;
}
.fm-news-testata h2 {
margin: 0; font-size: 42px; font-weight: 800; letter-spacing: .01em;
text-transform: uppercase; color: var(--fm-green); line-height: 1.12;
}
.fm-news-righe { margin: 0; }
.fm-news-riga { display: flex; align-items: stretch; background: #eef0f1; }
.fm-news-riga.chiara { background: #dfeed4; flex-direction: row-reverse; }
.fm-news-riga-foto {
flex: 0 0 auto; align-self: stretch; display: block; line-height: 0; overflow: hidden;
min-height: clamp(290px, 30vw, 420px); max-width: 46%;
}
.fm-news-riga-foto img {
height: 100%; width: auto; max-width: 100%; object-fit: cover; object-position: center;
display: block; transition: transform .5s ease;
}
.fm-news-riga:hover .fm-news-riga-foto img { transform: scale(1.03); }
.fm-news-riga-foto.senza-img { flex: 0 0 32%; background: var(--fm-green-light); }
.fm-news-riga-testo { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; padding: 38px 46px; }
.fm-news-riga.chiara .fm-news-riga-testo { justify-content: flex-start; }
.fm-news-riga-dentro { width: 100%; max-width: 580px; }
.fm-news-riga-data {
display: block; font-size: 15.5px; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: var(--fm-green); margin-bottom: 14px;
}
.fm-news-riga h3 { margin: 0 0 18px; font-size: 35px; line-height: 1.2; font-weight: 800; text-transform: uppercase; }
.fm-news-riga h3 a { color: #2c2c2a; text-decoration: none; }
.fm-news-riga h3 a:hover { color: var(--fm-green); }
.fm-news-riga p { margin: 0 0 28px; font-size: 21px; line-height: 1.6; color: #3f3f3b; }
.fm-news-riga-btn {
display: inline-block; border: 2px solid #fff; background: #fff; color: #2c2c2a;
border-radius: 40px; padding: 13px 28px; font-size: 13.5px; font-weight: 800;
letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
transition: background .2s, color .2s, border-color .2s;
}
.fm-news-riga.chiara .fm-news-riga-btn { border-color: var(--fm-green); }
.fm-news-riga-btn:hover { background: var(--fm-green); border-color: var(--fm-green); color: #fff; }
.fm-news-tutte { padding-top: 34px; }
.fm-news-vuoto { padding: 40px; margin: 0; }
@media (max-width: 860px) {
.fm-news-riga, .fm-news-riga.chiara { flex-direction: column; }
.fm-news-riga-foto { height: auto; align-self: center; max-width: 100%; }
.fm-news-riga-foto img { width: 100%; height: auto; max-width: 100%; }
.fm-news-riga-foto.senza-img { flex: 0 0 auto; height: 180px; width: 100%; }
.fm-news-riga-testo, .fm-news-riga.chiara .fm-news-riga-testo { padding: 28px 24px 34px; justify-content: flex-start; }
.fm-news-riga h3 { font-size: 25px; }
.fm-news-riga p { font-size: 18px; }
.fm-news-riga-foto { max-width: 100%; }
.fm-news-blocco { border-radius: 18px; }
.fm-news-testata { padding: 24px 24px 20px; }
.fm-news-testata h2 { font-size: 28px; }
.fm-news-kicker { font-size: 15px; }
}
/* ---------- Pulsanti: tutti ovali e con il battito ----------
Il battito è fatto di due movimenti separati, e questo è il motivo per
cui adesso è regolare invece che a scatti:
— il RESPIRO, cioè il pulsante che cresce e torna. Va e viene in modo
simmetrico (metà per crescere, metà per tornare) e rallenta ai due
estremi, quindi non ha strappi al cambio di direzione.
— l'ALONE, cioè il cerchio di luce che si allarga. Si allarga a
velocità costante per tutto il giro, senza pause: prima si allargava
nella prima metà e poi restava fermo, e quella sosta era proprio lo
scatto che si vedeva. */
@keyframes fm-respiro {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.045); }
}
@keyframes fm-alone {
from { box-shadow: 0 0 0 0 rgba(81,173,50,.45), 0 8px 20px rgba(81,173,50,.20); }
to { box-shadow: 0 0 0 15px rgba(81,173,50,0), 0 8px 20px rgba(81,173,50,.20); }
}
@keyframes fm-alone-chiaro {
from { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
to { box-shadow: 0 0 0 15px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: no-preference) {
.fm-btn, .fm-banner-btn, .fm-news-riga-btn, .fm-ec-bollino, .fm-wa-btn, .fm-readmore {
animation: fm-alone 2.4s linear infinite, fm-respiro 2.4s ease-in-out infinite;
}
.fm-btn.white, .fm-locker-band .fm-btn, .fm-news-riga .fm-news-riga-btn {
animation-name: fm-alone-chiaro, fm-respiro;
}
.fm-news-riga.chiara .fm-news-riga-btn { animation-name: fm-alone, fm-respiro; }
.fm-btn:hover, .fm-banner-btn:hover, .fm-news-riga-btn:hover,
.fm-wa-btn:hover, .fm-readmore:hover { animation-play-state: paused; }
}
/* forma ovale anche per i pulsanti nati prima */
.fm-readmore { border-radius: 40px !important; }
.fm-pagination .page-numbers { border-radius: 40px; }
/* ---------- Filigrana di fondo: il marchio e i simboli di pagina ----------
Nascono piccoli, si ingrandiscono e sfumano. Sono sparsi in modo
irregolare, mai in griglia, e restano dietro a tutto: si vedono solo
dove il contenuto e' bianco. */
/* La filigrana sta sotto a tutto e scorre con la pagina.
Non tocca l'ordine di sovrapposizione del resto del sito. */
body { position: relative; }
div.fm-filigrana {
position: absolute; inset: 0; width: 100%; min-height: 100vh;
z-index: -1; pointer-events: none; overflow: hidden;
}
.fm-filigrana span {
position: absolute; display: block; opacity: 0;
background-image: var(--fm-icona);
background-repeat: no-repeat; background-position: center; background-size: contain;
transform: scale(.3) rotate(var(--r, 0deg));
}
@keyframes fm-marchio {
0% { opacity: 0; transform: scale(.28) rotate(var(--r, 0deg)); }
18% { opacity: .13; }
55% { opacity: .13; transform: scale(1) rotate(var(--r, 0deg)); }
100% { opacity: 0; transform: scale(1.3) rotate(var(--r, 0deg)); }
}
@media (prefers-reduced-motion: no-preference) {
.fm-filigrana span { animation-name: fm-marchio; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
}
@media (prefers-reduced-motion: reduce) {
.fm-filigrana span { opacity: .1; transform: scale(1) rotate(var(--r, 0deg)); }
}
.fm-filigrana .s1 { left: 4%; top: 4%; width: 150px; height: 150px; --r: -12deg; animation-duration: 11.2s; animation-delay: 0.0s; }
.fm-filigrana .s2 { left: 23%; top: 9%; width: 96px; height: 96px; --r: 8deg; animation-duration: 13.4s; animation-delay: 2.4s; }
.fm-filigrana .s3 { left: 41%; top: 2%; width: 210px; height: 210px; --r: -5deg; animation-duration: 15.6s; animation-delay: 1.1s; }
.fm-filigrana .s4 { left: 62%; top: 12%; width: 120px; height: 120px; --r: 14deg; animation-duration: 17.8s; animation-delay: 3.6s; }
.fm-filigrana .s5 { left: 81%; top: 5%; width: 170px; height: 170px; --r: -9deg; animation-duration: 20.0s; animation-delay: 0.6s; }
.fm-filigrana .s6 { left: 12%; top: 19%; width: 116px; height: 116px; --r: 6deg; animation-duration: 9.0s; animation-delay: 4.4s; }
.fm-filigrana .s7 { left: 33%; top: 26%; width: 190px; height: 190px; --r: -16deg; animation-duration: 11.2s; animation-delay: 1.9s; }
.fm-filigrana .s8 { left: 55%; top: 21%; width: 104px; height: 104px; --r: 10deg; animation-duration: 13.4s; animation-delay: 5.2s; }
.fm-filigrana .s9 { left: 73%; top: 29%; width: 150px; height: 150px; --r: -4deg; animation-duration: 15.6s; animation-delay: 2.8s; }
.fm-filigrana .s10 { left: 91%; top: 23%; width: 128px; height: 128px; --r: 12deg; animation-duration: 17.8s; animation-delay: 6.1s; }
.fm-filigrana .s11 { left: 7%; top: 35%; width: 176px; height: 176px; --r: -7deg; animation-duration: 20.0s; animation-delay: 3.1s; }
.fm-filigrana .s12 { left: 27%; top: 42%; width: 110px; height: 110px; --r: 15deg; animation-duration: 9.0s; animation-delay: 5.8s; }
.fm-filigrana .s13 { left: 47%; top: 38%; width: 138px; height: 138px; --r: -11deg; animation-duration: 11.2s; animation-delay: 0.9s; }
.fm-filigrana .s14 { left: 66%; top: 46%; width: 200px; height: 200px; --r: 5deg; animation-duration: 13.4s; animation-delay: 4.9s; }
.fm-filigrana .s15 { left: 85%; top: 40%; width: 118px; height: 118px; --r: -14deg; animation-duration: 15.6s; animation-delay: 2.1s; }
.fm-filigrana .s16 { left: 17%; top: 52%; width: 160px; height: 160px; --r: 9deg; animation-duration: 17.8s; animation-delay: 6.6s; }
.fm-filigrana .s17 { left: 37%; top: 57%; width: 104px; height: 104px; --r: -6deg; animation-duration: 20.0s; animation-delay: 1.4s; }
.fm-filigrana .s18 { left: 57%; top: 62%; width: 182px; height: 182px; --r: 13deg; animation-duration: 9.0s; animation-delay: 3.9s; }
.fm-filigrana .s19 { left: 77%; top: 55%; width: 126px; height: 126px; --r: -10deg; animation-duration: 11.2s; animation-delay: 5.5s; }
.fm-filigrana .s20 { left: 95%; top: 60%; width: 142px; height: 142px; --r: 7deg; animation-duration: 13.4s; animation-delay: 0.4s; }
.fm-filigrana .s21 { left: 3%; top: 68%; width: 132px; height: 132px; --r: -15deg; animation-duration: 15.6s; animation-delay: 4.1s; }
.fm-filigrana .s22 { left: 21%; top: 74%; width: 168px; height: 168px; --r: 4deg; animation-duration: 17.8s; animation-delay: 2.6s; }
.fm-filigrana .s23 { left: 43%; top: 79%; width: 110px; height: 110px; --r: -8deg; animation-duration: 20.0s; animation-delay: 6.9s; }
.fm-filigrana .s24 { left: 63%; top: 72%; width: 196px; height: 196px; --r: 11deg; animation-duration: 9.0s; animation-delay: 1.6s; }
.fm-filigrana .s25 { left: 83%; top: 77%; width: 120px; height: 120px; --r: -3deg; animation-duration: 11.2s; animation-delay: 3.4s; }
.fm-filigrana .s26 { left: 10%; top: 86%; width: 154px; height: 154px; --r: 16deg; animation-duration: 13.4s; animation-delay: 5.1s; }
.fm-filigrana .s27 { left: 30%; top: 92%; width: 102px; height: 102px; --r: -13deg; animation-duration: 15.6s; animation-delay: 0.7s; }
.fm-filigrana .s28 { left: 50%; top: 88%; width: 174px; height: 174px; --r: 6deg; animation-duration: 17.8s; animation-delay: 4.6s; }
.fm-filigrana .s29 { left: 70%; top: 95%; width: 128px; height: 128px; --r: -9deg; animation-duration: 20.0s; animation-delay: 2.9s; }
.fm-filigrana .s30 { left: 89%; top: 90%; width: 146px; height: 146px; --r: 10deg; animation-duration: 9.0s; animation-delay: 6.3s; }
.fm-filigrana .s31 { left: 14%; top: 64%; width: 98px; height: 98px; --r: -4deg; animation-duration: 11.2s; animation-delay: 7.4s; }
.fm-filigrana .s32 { left: 52%; top: 7%; width: 112px; height: 112px; --r: 12deg; animation-duration: 13.4s; animation-delay: 7.9s; }
.fm-filigrana .s33 { left: 35%; top: 14%; width: 124px; height: 124px; --r: -7deg; animation-duration: 15.6s; animation-delay: 8.4s; }
.fm-filigrana .s34 { left: 72%; top: 84%; width: 108px; height: 108px; --r: 5deg; animation-duration: 17.8s; animation-delay: 8.9s; }
@media (max-width: 760px) {
/* sul telefono ne restano meno e più piccole: pagina leggera */
.fm-filigrana .s3, .fm-filigrana .s7, .fm-filigrana .s9, .fm-filigrana .s11,
.fm-filigrana .s14, .fm-filigrana .s16, .fm-filigrana .s18, .fm-filigrana .s20,
.fm-filigrana .s22, .fm-filigrana .s24, .fm-filigrana .s26, .fm-filigrana .s28,
.fm-filigrana .s30, .fm-filigrana .s32, .fm-filigrana .s34 { display: none; }
.fm-filigrana span { max-width: 110px; max-height: 110px; }
}
.fm-team { position: relative; overflow: hidden; }
/* Le colonne non si allargano oltre lo schermo per colpa del loro contenuto. */
.fm-two-col > *, .fm-hero-inner > *, .fm-ts-row > *, .fm-an-grid > * { min-width: 0; }
.fm-team-deco { position: absolute; right: -40px; top: 30px; width: 420px; height: 620px; pointer-events: none; z-index: 0; }
.fm-team .fm-two-col { position: relative; z-index: 1; }
.fm-team-copy p { font-size: 17.5px; line-height: 1.8; color: #3b3b3b; }
.fm-team-copy p strong, .fm-team-copy p b { color: #111; }
.fm-team .img-wrap img { width: 112%; max-width: none; margin-top: 46px; }
/* ---------- Titoli con evidenziatore spesso animato da sinistra (come su REI) ----------
Tecnica a sfondo su elemento inline: la banda segue OGNI riga visiva del titolo
e si ferma esattamente a fine parole, anche quando il testo va a capo da solo. */
.fm-hl {
background-image: linear-gradient(#7edb52, #7edb52);
background-repeat: no-repeat;
background-size: 0% 0.42em;
background-position: 0 88%;
transition: background-size .8s ease .15s;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 .08em;
margin: 0 -.08em;
}
.fm-hl.fm-lined { background-size: 100% 0.42em; }
.fm-locker-band .fm-hl { background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)); }
/* ---------- Animazioni: le frasi entrano da sinistra verso destra ---------- */
@media (prefers-reduced-motion: no-preference) {
.fm-reveal { opacity: 0; transform: translateX(-48px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; }
.fm-reveal.fm-visible { opacity: 1; transform: translateX(0); }
/* Le card servizi partono da FUORI dallo schermo e corrono al loro posto */
.fm-service-tile.fm-reveal { opacity: 1; transform: translateX(-110vw); transition: transform .55s cubic-bezier(.2, .8, .3, 1); }
.fm-service-tile.fm-reveal.fm-visible { transform: translateX(0); }
/* Variante: il testo della sezione team entra da DESTRA */
.fm-reveal-right { opacity: 0; transform: translateX(56px); transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; }
.fm-reveal-right.fm-visible { opacity: 1; transform: translateX(0); }
}
.fm-section.alt { overflow-x: hidden; }
/* ---------- Buttons ---------- */
.fm-btn {
display: inline-block; background: var(--fm-green); color: #fff !important;
font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 14px;
padding: 15px 34px; border-radius: 40px; border: 2px solid var(--fm-green);
cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.fm-btn:hover { background: var(--fm-green-dark); border-color: var(--fm-green-dark); }
.fm-btn.ghost { background: #fff; color: var(--fm-green) !important; }
.fm-btn.ghost:hover { background: var(--fm-green); color: #fff !important; }
.fm-btn.white { background: rgba(255,255,255,.14); border-color: #fff; color: #fff !important; }
.fm-btn.white:hover { background: #fff; color: var(--fm-green-dark) !important; }
/* Fascia verde Locker 24h — collegata al fondo del sito */
.fm-locker-band { background: linear-gradient(100deg, #46982a 0%, #6cc23f 48%, #a2da74 100%); color: #fff; padding: 74px 0; margin-top: 30px; }
.fm-locker-band h2 { color: #fff; display: flex; align-items: center; gap: 20px; font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.fm-locker-band h2 strong { font-weight: 800; text-transform: none; }
.fm-locker-band h2 .fm-locker-icon { width: 74px; height: auto; }
.fm-locker-band .fm-locker-copy p { color: #fff; font-size: 20px; line-height: 1.75; }
.fm-locker-band .fm-locker-copy p strong, .fm-locker-band .fm-locker-copy p b { color: #fff; }
.fm-locker-band .img-wrap img {
width: 115%; max-width: none; height: auto; display: block; margin-left: -4%;
/* croce piena e nitida al centro: si dissolvono solo i bordi del rettangolo */
-webkit-mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent 100%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 5%, #000 14%, #000 86%, rgba(0,0,0,.55) 95%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 8%, #000 20%, #000 80%, rgba(0,0,0,.5) 92%, transparent 100%),
linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 5%, #000 14%, #000 86%, rgba(0,0,0,.55) 95%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.fm-locker-band .fm-two-col { align-items: center; }
/* In home la fascia si attacca direttamente al footer scuro */
.home .fm-footer { margin-top: 0; }
/* ---------- Sections ---------- */
.fm-section { padding: 74px 0; }
.fm-section.alt { background: #f6faf3; }
.fm-kicker { color: var(--fm-green); font-weight: 800; text-transform: uppercase; letter-spacing: .18em; font-size: 12px; margin-bottom: 8px; display: block; }
.fm-center { text-align: center; }
.fm-lead { max-width: 760px; margin: 0 auto 40px; }
/* News in home: immagine, titolo centrato, Leggi tutto (come il sito storico) */
.fm-news-heading {
display: inline-block; text-align: center; color: var(--fm-green);
font-style: normal; font-weight: 800; letter-spacing: .06em; font-size: 26px;
margin-bottom: 34px; padding: 14px 40px; line-height: 1.25;
border: 3px solid #39ff14; border-radius: 10px;
}
.fm-news-heading .line1,
.fm-news-heading .line2 { display: block; }
.fm-news-heading .line2 { font-size: .78em; letter-spacing: .1em; }
@media (max-width: 600px) { .fm-news-heading { font-size: 20px; padding: 12px 22px; } }
@media (prefers-reduced-motion: no-preference) {
/* Alone continuo, senza sosta: si allarga sempre alla stessa velocità
per tutto il giro, come quello dei pulsanti. */
.fm-news-heading { animation: fm-pulse 2.4s linear infinite; }
@keyframes fm-pulse {
from { box-shadow: 0 0 0 0 rgba(57, 255, 20, .6), 0 0 14px rgba(57, 255, 20, .45); }
to { box-shadow: 0 0 0 18px rgba(57, 255, 20, 0), 0 0 14px rgba(57, 255, 20, .45); }
}
}
.fm-news-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.fm-news-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.fm-news-card .fm-badge { align-self: flex-start; background: none; color: var(--fm-dark); font-size: 12px; font-weight: 800; letter-spacing: .14em; padding: 0; text-transform: uppercase; }
/* Immagine INTERA, mai tagliata: altezza naturale della grafica */
.fm-news-thumb { width: 100%; display: block; border-radius: 0; border-bottom: 4px solid var(--fm-green); box-shadow: 0 10px 26px rgba(0,0,0,.10); transition: transform .2s; background: var(--fm-green-light); line-height: 0; }
.fm-news-thumb img { width: 100%; height: auto; display: block; }
.fm-news-thumb.senza-img { aspect-ratio: 4/5; }
.fm-news-thumb:hover { transform: translateY(-5px); }
.fm-news-card h3 { margin: 4px 0 0; font-size: 16px; }
.fm-news-card h3 a { color: var(--fm-dark); }
.fm-news-card h3 a:hover { color: var(--fm-green); }
.fm-readmore { font-size: 13.5px; font-weight: 600; text-decoration: underline; color: var(--fm-dark); }
.fm-readmore:hover { color: var(--fm-green); }
/* Archivio News ed eventi (come il sito storico: 2 colonne larghe) */
.fm-news-archive { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 56px; padding: 60px 0 30px; max-width: 1060px; margin: 0 auto; }
.fm-news-archive .fm-news-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.fm-news-archive .fm-badge { align-self: flex-start; background: none; color: var(--fm-green); font-size: 15px; font-weight: 800; letter-spacing: .1em; padding: 0; text-transform: uppercase; }
.fm-news-archive .fm-news-thumb:hover { transform: translateY(-5px); }
.fm-news-archive h3 { margin: 6px 0 0; font-size: 19px; }
.fm-news-archive h3 a { color: var(--fm-dark); }
.fm-news-archive h3 a:hover { color: var(--fm-green); }
.fm-news-excerpt p { margin: 0; font-size: 15px; line-height: 1.7; color: #4a4a4a; }
@media (max-width: 760px) {
.fm-news-archive { grid-template-columns: 1fr; }
}
/* Services grid: etichetta in alto a sinistra, icona in basso a destra (come il sito storico) */
.fm-section.alt { background: #e9f3e2; }
.fm-section .fm-center > h2 { font-weight: 300; font-size: 37px; letter-spacing: .04em; color: #222; margin-bottom: 26px; }
.fm-section.alt .fm-lead p { font-size: 18.5px; line-height: 1.85; color: #2e2e2e; }
.fm-section.alt .fm-lead strong, .fm-section.alt .fm-lead b { color: #111; font-style: italic; }
.fm-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.fm-service-tile {
background: #fff; border-radius: 12px; border: 0;
display: flex; flex-direction: column; justify-content: space-between;
padding: 22px 22px 16px; min-height: 178px;
box-shadow: 0 12px 30px rgba(0,0,0,.14);
transition: transform .25s ease, box-shadow .25s ease;
}
.fm-service-tile:hover { transform: scale(1.06); box-shadow: 0 24px 52px rgba(0,0,0,.24); }
.fm-service-tile .label {
color: #222; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; font-size: 21px; line-height: 1.25;
}
.fm-service-tile img { width: 42%; max-width: 120px; height: auto; align-self: flex-end; }
.fm-service-tile:hover .label { color: var(--fm-green); }
/* Two-col blocks */
.fm-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.fm-two-col .img-wrap img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 34px rgba(0,0,0,.14)); }
/* Wave divider */
.fm-wave { display: block; width: 100%; height: 70px; }
/* ---------- Page content ---------- */
.fm-page-head { background: linear-gradient(150deg, var(--fm-green) 0%, var(--fm-green-dark) 100%); color: #fff; padding: 64px 0 54px; position: relative; }
.fm-page-head h1 { color: #fff; margin: 0; }
.fm-page-head .fm-script { font-size: 24px; opacity: .95; }
.fm-content { padding: 56px 0 30px; }
.fm-content .fm-container { max-width: 920px; }
.fm-content h2 { font-size: 24px; margin-top: 1.6em; }
.fm-content h3 { color: var(--fm-green-dark); margin-top: 1.4em; }
.fm-content ul { padding-left: 22px; }
.fm-content li { margin: 4px 0; }
.fm-content strong { color: var(--fm-dark); }
/* Immagini nei contenuti pagina */
.fm-content .fm-img-right { float: right; max-width: 38%; margin: 0 0 18px 28px; }
.fm-content .fm-img-left { float: left; max-width: 38%; margin: 0 28px 18px 0; }
.fm-content .fm-img-right img, .fm-content .fm-img-left img { width: 100%; height: auto; display: block; }
.fm-content figure { margin: 0 0 18px; }
.fm-content .fm-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 26px 0; clear: both; }
.fm-content .fm-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.fm-content .fm-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--fm-radius); box-shadow: 0 8px 22px rgba(0,0,0,.10); }
.fm-content h2, .fm-content h3 { clear: none; }
.fm-video-embed { position: relative; border-radius: var(--fm-radius); overflow: hidden; }
.fm-video-embed iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
@media (max-width: 640px) {
.fm-content .fm-img-right, .fm-content .fm-img-left { float: none; max-width: 70%; margin: 0 auto 18px; }
.fm-content .fm-gallery, .fm-content .fm-gallery.cols-2 { grid-template-columns: 1fr; }
}
/* Service price-list style */
.fm-content .fm-servizi-block { background: #f6faf3; border-left: 4px solid var(--fm-green); border-radius: 0 var(--fm-radius) var(--fm-radius) 0; padding: 20px 26px; margin: 22px 0; }
.fm-content .fm-servizi-block h3 { margin-top: 0; text-transform: uppercase; font-size: 16px; letter-spacing: .06em; }
/* ---------- Pagina La farmacia (come il sito storico) ---------- */
/* usa il cerchio standard del tema, con i colori verdi di questa pagina
(specificità doppia: deve vincere sul .fm-pf-badge bianco definito più sotto) */
.fm-lf-hero .fm-pf-hero-img { object-position: center 25%; }
.fm-pf-badge.fm-lf-badge { background: var(--fm-green); }
.fm-pf-badge.fm-lf-badge span { color: #fff; font-weight: 700; }
.fm-lf-video1 { padding: 0 0 10px; }
.fm-lf-video1 video { width: 100%; max-width: 560px; display: block; margin: 0 auto; background: #000; }
.fm-lf-intro { padding: 34px 0 8px; }
.fm-lf-claim { font-size: 21px; color: #2c2c2c; margin: 0; }
.fm-lf-claim2 { font-size: 19px; color: #1c1c1c; margin: 4px 0 0; }
.fm-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; padding: 30px 0 10px; max-width: 1000px; margin: 0 auto; }
.fm-svc-card {
background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.09);
padding: 26px 28px;
}
.fm-svc-card .fm-svc-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.fm-svc-card .fm-svc-head img { width: 56px; height: auto; flex: none; }
.fm-svc-card h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: #1c1c1c; line-height: 1.3; }
.fm-svc-card p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #4a4a4a; }
.fm-svc-card p strong { color: #111; }
.fm-svc-center { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; }
.fm-lf-servizi { overflow-x: hidden; background: #fbfdfa; padding-bottom: 30px; }
.fm-lf-finale { padding: 56px 0 20px; }
.fm-lf-finale-testo p { font-size: 15.5px; line-height: 1.9; color: #333; }
.fm-lf-finale-testo strong { color: #111; }
.fm-lf-contatti { padding: 40px 0 10px; }
.fm-lf-contatti-title { text-align: center; color: var(--fm-green); font-weight: 800; font-size: 30px; }
@media (max-width: 760px) {
.fm-svc-grid { grid-template-columns: 1fr; }
}
/* ---------- Pagina Le parafarmacie (come il sito storico) ---------- */
/* overflow visibile: il cerchio sporge sotto, a cavallo dell'immagine */
.fm-pf-hero { position: relative; line-height: 0; overflow: visible; z-index: 5; }
.fm-pf-hero-img { width: 100%; height: clamp(380px, 46vw, 640px); object-fit: cover; display: block; }
.fm-pf-hero::after {
content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 84px;
background: #fff; border-radius: 55% 45% 0 0 / 100% 90% 0 0;
}
/* spazio nella sezione successiva per la parte di cerchio che sporge */
.fm-pf-hero + * { padding-top: 100px; }
.fm-pf-badge {
position: absolute; left: 50%; top: 86%; transform: translate(-50%, -50%);
width: 210px; height: 210px; border-radius: 50%; background: #fff;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
box-shadow: 0 12px 30px rgba(0,0,0,.20); z-index: 6; line-height: 1.2;
}
.fm-pf-badge span { color: #2c2c2c; font-weight: 500; font-size: 20px; text-transform: uppercase; text-align: center; letter-spacing: .03em; }
.fm-pf-badge img { width: 58px; height: auto; display: block; }
.fm-pf-intro { padding: 60px 0 40px; overflow-x: hidden; }
.fm-pf-intro .fm-two-col { align-items: center; }
.fm-pf-intro .img-wrap img { max-width: 420px; margin: 0 auto; display: block; }
.fm-pf-logo img { max-width: 320px; height: auto; }
.fm-pf-testo p { font-size: 17px; line-height: 1.85; color: #333; }
.fm-pf-testo strong { color: #111; }
.fm-pf-trovate { margin-top: 26px; }
.fm-pf-testo ul { padding-left: 22px; font-size: 16.5px; line-height: 2; color: #333; }
/* Mappa */
.fm-pf-mappa { position: relative; }
#fm-mappa { width: 100%; height: clamp(380px, 46vw, 620px); z-index: 1; }
#fm-mappa:fullscreen { height: 100vh; }
.fm-map-full {
position: absolute; top: 14px; right: 14px; z-index: 500;
background: #fff; border: 2px solid var(--fm-green); color: var(--fm-green-dark);
font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 8px; cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.fm-map-full:hover { background: var(--fm-green); color: #fff; }
.fm-marker { background: none; border: none; }
.fm-marker-img { width: 34px; height: auto; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.fm-mappa-google { width: 100%; height: clamp(380px, 46vw, 620px); border: 0; display: block; }
/* Mappa attaccata al footer scuro, senza striscia bianca */
.fm-pagina-parafarmacie .fm-footer { margin-top: 0; }
.fm-pagina-parafarmacie .fm-pf-mappa { line-height: normal; }
/* TELEFONO E TABLET — il cerchio non deve finire a cavallo della riga dove
finisce la fotografia. Lì sotto comincia la sezione seguente, che ha un
fondo di un altro colore: il cerchio, essendo bianco, sembra tagliato a
metà e l'ombra si interrompe di netto.
La riga di taglio si abbassa allungando la fotografia e allungando con
lei la parte bianca sotto l'onda. La cupola e il cerchio restano dove
sono — identici a prima — ma adesso hanno sotto 64 pixel di bianco, che
bastano a contenere tutta l'ombra. */
@media (max-width: 1023px) {
.fm-pf-hero-img { height: calc(clamp(380px, 46vw, 640px) + 63px); }
/* Stessa onda di prima: la curva resta alta 84 pixel, il resto è bianco
pieno che scende fino in fondo alla fotografia. */
.fm-pf-hero::after { height: 147px; border-radius: 55% 45% 0 0 / 84px 76px 0 0; }
/* Agganciato al fondo invece che a una percentuale: così la distanza dal
bordo è sempre la stessa, su qualsiasi schermo. */
.fm-pf-badge {
width: 160px; height: 160px; gap: 6px;
top: auto; bottom: 44px; transform: translateX(-50%);
}
.fm-pf-badge span { font-size: 15px; }
.fm-pf-badge img { width: 44px; }
}
/* ---------- Pagina Tutti i servizi (come il sito storico) ---------- */
.fm-ts { padding: 50px 0 30px; overflow-x: hidden; }
.fm-ts-row { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; padding: 44px 0; }
.fm-ts-badge img { width: 100%; max-width: 280px; height: auto; filter: drop-shadow(0 12px 28px rgba(0,0,0,.15)); }
.fm-ts-content { border-left: 2px solid var(--fm-green); padding-left: 48px; }
.fm-ts-content h3 {
color: var(--fm-green); font-style: italic; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; font-size: 21px; margin: 30px 0 12px;
}
.fm-ts-content h3:first-child { margin-top: 0; }
.fm-ts-content ul { margin: 0; padding-left: 20px; }
.fm-ts-content li { font-size: 14.5px; line-height: 1.7; color: #3d3d3d; margin: 3px 0; }
.fm-ts-content p { font-size: 14.5px; color: #3d3d3d; margin: 4px 0; }
@media (max-width: 860px) {
.fm-ts-row { grid-template-columns: 1fr; gap: 24px; }
.fm-ts-badge img { max-width: 220px; margin: 0 auto; display: block; }
.fm-ts-content { border-left: 0; padding-left: 0; border-top: 2px solid var(--fm-green); padding-top: 24px; }
}
/* ---------- Pagina Contatti (come il sito storico) ---------- */
.fm-ct { padding: 66px 0 30px; overflow-x: hidden; }
.fm-ct-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.fm-ct-logo img { max-width: 360px; height: auto; }
.fm-ct-riga { display: flex; align-items: center; gap: 20px; margin: 30px 0; }
.fm-ct-riga p { margin: 0; font-size: 16.5px; line-height: 1.7; color: #333; }
.fm-ct-riga a { color: #333; }
.fm-ct-riga a:hover { color: var(--fm-green); }
.fm-ct-ico { width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--fm-green); color: #fff; display: flex; align-items: center; justify-content: center; }
.fm-ct-ico svg { width: 30px; height: 30px; }
.fm-ct-title { text-align: center; color: var(--fm-green); font-weight: 300; font-size: 44px; text-transform: none; margin-bottom: 26px; }
.fm-ct-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fm-ct-campi .full { grid-column: 1 / -1; }
.fm-ct-campi input, .fm-ct-campi textarea {
width: 100%; padding: 16px 18px; border: 2px solid var(--fm-green); border-radius: 10px;
font-family: inherit; font-size: 15px; color: #222; background: #f1f1f1;
}
.fm-ct-campi ::placeholder { text-transform: uppercase; font-style: italic; color: #444; opacity: 1; }
.fm-ct-campi input:focus, .fm-ct-campi textarea:focus { outline: 3px solid rgba(81,173,50,.3); }
.fm-ct-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #333; margin: 18px 0 8px; }
.fm-ct-invia { text-align: center; margin-top: 20px; }
.fm-ct-invia .fm-btn { padding: 15px 60px; }
@media (max-width: 860px) {
.fm-ct-grid { grid-template-columns: 1fr; }
.fm-ct-campi { grid-template-columns: 1fr; }
}
/* ---------- Pagina Analisi (come il sito storico) ---------- */
.fm-an-top { padding: 70px 0 40px; overflow-x: hidden; }
.fm-an-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; align-items: start; }
.fm-an-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 34px; text-transform: none; margin: 34px 0 16px; line-height: 1.25; }
.fm-an-testo h2:first-child { margin-top: 0; }
.fm-an-testo p { font-size: 18.5px; line-height: 1.85; color: #3d3d3d; }
.fm-an-testo strong { color: #111; }
/* Pannello verde con il contorno decorativo sfalsato (come l'originale) */
.fm-an-pannello {
position: relative;
background: linear-gradient(160deg, #5fbc3b 0%, #46982a 100%); color: #fff;
border-radius: 70px; padding: 52px 44px; text-align: center;
box-shadow: 0 14px 34px rgba(60,120,40,.25);
}
.fm-an-pannello::before {
content: ''; position: absolute; left: -16px; top: 16px; right: 16px; bottom: -16px;
border: 2px solid #a9d94e; border-radius: inherit; pointer-events: none;
}
.fm-an-cat { font-weight: 700; text-decoration: underline; letter-spacing: .04em; margin: 0 0 16px; font-size: 19px; }
.fm-an-pannello ul { list-style: none; margin: 0 0 32px; padding: 0; }
.fm-an-pannello li { font-size: 19px; line-height: 1.95; letter-spacing: .02em; }
.fm-an-pannello ul:last-child { margin-bottom: 0; }
.fm-an-natrix { display: grid; grid-template-columns: 1.2fr 1fr; gap: 54px; align-items: center; padding: 30px 0 60px; overflow-x: hidden; }
.fm-an-natrix-img { line-height: 0; }
.fm-an-natrix-img img { width: 100%; height: auto; min-height: 680px; object-fit: cover; object-position: center; display: block; }
.fm-an-natrix-testo { padding-right: max(22px, calc((100vw - 1240px) / 2)); }
.fm-an-logo img { max-width: 260px; height: auto; }
.fm-an-natrix-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 36px; text-transform: none; margin: 14px 0 18px; }
.fm-an-natrix-testo h2 strong { font-weight: 800; }
.fm-an-natrix-testo p { font-size: 17.5px; line-height: 1.85; color: #3d3d3d; }
.fm-an-natrix-testo strong { color: #111; }
.fm-an-finale { background: linear-gradient(90deg, #e9f3e2 0%, #e9f3e2 50%, #ececec 50%, #ececec 100%); padding: 54px 0; }
.fm-an-finale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.fm-an-finale-testo p { font-size: 19px; line-height: 1.9; color: #333; }
.fm-an-finale-testo strong { color: var(--fm-green-dark); }
.fm-an-finale .fm-ct-title { font-size: 34px; margin-bottom: 20px; }
@media (max-width: 860px) {
.fm-an-grid, .fm-an-natrix, .fm-an-finale-grid { grid-template-columns: 1fr; }
.fm-an-natrix-testo { padding: 0 22px; }
.fm-an-natrix-img img { min-height: 340px; }
.fm-an-testo h2 { font-size: 27px; }
.fm-an-testo p, .fm-an-finale-testo p { font-size: 16.5px; }
.fm-an-pannello { border-radius: 46px; padding: 40px 26px; }
.fm-an-pannello li, .fm-an-cat { font-size: 16.5px; }
.fm-an-finale { background: #e9f3e2; }
}
/* ---------- Pagina Cosmesi (come il sito storico) ---------- */
.fm-cos-intro { padding: 54px 0 20px; }
.fm-cos-intro p { font-size: 15.5px; line-height: 1.85; color: #3d3d3d; max-width: 900px; margin: 0 auto; }
.fm-cos-intro strong { color: #111; }
.fm-cos { overflow-x: hidden; padding: 20px 0 40px; }
.fm-cos-riga { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; margin: 30px 0; }
.fm-cos-foto { line-height: 0; }
.fm-cos-foto img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.fm-cos-testo { padding: 26px 40px; }
.fm-cos-riga.foto-sx .fm-cos-testo { padding-right: max(40px, calc((100vw - 1180px) / 2)); }
.fm-cos-riga.foto-dx .fm-cos-testo { padding-left: max(40px, calc((100vw - 1180px) / 2)); }
.fm-cos-logo { margin: 0 0 16px; }
.fm-cos-logo img { height: auto; display: block; }
.fm-cos-testo p { font-size: 14.5px; line-height: 1.8; color: #4a4a4a; margin: 0; }
/* Se la descrizione è su più capoversi, fra uno e l'altro resta un po' d'aria. */
.fm-cos-corpo p + p { margin-top: 12px; }
.fm-cos-corpo ul, .fm-cos-corpo ol { margin: 8px 0 0; padding-left: 20px; }
.fm-cos-corpo li { font-size: 14.5px; line-height: 1.7; color: #4a4a4a; margin: 3px 0; }
.fm-cos-corpo h3 {
color: var(--fm-green); font-style: italic; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; font-size: 18px; margin: 0 0 10px;
}
/* Marca senza logo caricato: si scrive il nome, con lo stesso peso del logo. */
.fm-cos-nome { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: #2c2c2a; letter-spacing: .02em; }
.fm-cos-testo strong { color: #111; }
.fm-cos-testo em.verde { color: var(--fm-green); font-style: italic; font-weight: 600; }
@media (max-width: 860px) {
.fm-cos-riga { grid-template-columns: 1fr; }
.fm-cos-riga.foto-dx .fm-cos-foto { order: -1; }
.fm-cos-riga .fm-cos-testo { padding: 22px !important; }
.fm-cos-foto img { max-height: 300px; }
}
/* ---------- Pagina Estetica (come il sito storico) ---------- */
.fm-est-intro { padding: 70px 0 20px; overflow-x: hidden; }
.fm-est-intro-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; align-items: center; }
.fm-est-logo img { max-width: 300px; height: auto; display: block; }
.fm-est-titolo { text-align: center; }
.fm-est-cabina { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; color: #e5007e; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1; margin: 0 0 8px; }
.fm-est-lounge { font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; color: #1d4f7a; text-transform: uppercase; letter-spacing: .18em; margin: 0; }
.fm-est-intro-testo p { font-size: 18.5px; line-height: 1.8; color: #3d3d3d; margin: 0; }
.fm-est-intro-testo strong em { font-style: italic; color: #111; }
.fm-est-corpo { padding: 40px 0 60px; overflow-x: hidden; }
.fm-est-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.fm-est-testo p { font-size: 17.5px; line-height: 1.85; color: #3d3d3d; margin: 0 0 26px; }
.fm-est-testo strong { color: #111; }
.fm-est-testo .verde, .fm-an-finale-testo .verde { color: var(--fm-green); }
.fm-est-testo em.verde { font-style: italic; }
.fm-est-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm-est-gallery img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
@media (max-width: 860px) {
.fm-est-intro-grid, .fm-est-grid { grid-template-columns: 1fr; gap: 28px; }
.fm-est-logo img { margin: 0 auto; }
.fm-est-cabina { font-size: 30px; }
.fm-est-lounge { font-size: 14px; letter-spacing: .14em; }
.fm-est-intro-testo p, .fm-est-testo p { font-size: 16.5px; }
}
/* ---------- Pagina Galenica (come il sito storico) ---------- */
.fm-gal-hero::after { background: #f2faec; }
.fm-gal { background: #f2faec; padding: 30px 0 80px; overflow-x: hidden; }
/* niente striscia bianca tra la sezione e il footer */
.fm-pagina-galenica .fm-footer { margin-top: 0; }
.fm-gal-claim {
color: #7ac143; font-weight: 400; font-size: clamp(34px, 5vw, 62px);
text-transform: none; letter-spacing: .01em; line-height: 1.2; margin: 0 0 34px;
}
/* display:table = la riga (e quindi l'evidenziatore) si ferma a fine parole */
.fm-gal-claim .line1, .fm-gal-claim .line2 { display: table; text-transform: none; font-weight: 400; font-size: inherit; color: inherit; }
/* evidenziatore più tenue, così il titolo resta leggibile */
.fm-gal-claim .fm-hl { background-image: linear-gradient(#d8f0bb, #d8f0bb); }
.fm-gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fm-gal-testo p { font-size: 19px; line-height: 1.75; color: #3d3d3d; margin: 0 0 26px; }
.fm-gal-testo strong { color: #111; }
.fm-gal-testo .verde { color: var(--fm-green); }
.fm-gal-img img { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 860px) {
.fm-gal-grid { grid-template-columns: 1fr; gap: 30px; }
.fm-gal-testo p { font-size: 16.5px; }
}
/* ---------- Pagina Integrazione per sportivi (come il sito storico) ---------- */
.fm-sport-hero::after { background: #f2faec; }
.fm-sport-intro { background: #f2faec; padding: 40px 0 60px; overflow-x: hidden; }
.fm-sport-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.fm-sport-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 37px; text-transform: none; margin: 0 0 22px; }
.fm-sport-testo p { font-size: 19px; line-height: 1.85; color: #3d3d3d; margin: 0 0 22px; }
.fm-sport-testo strong { color: #111; }
.fm-sport-blob img { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
.fm-sport-riga { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; overflow-x: hidden; }
.fm-sport-foto { line-height: 0; }
.fm-sport-foto img { width: 100%; height: 100%; max-height: 430px; object-fit: cover; display: block; }
.fm-sport-riga-testo { padding: 40px max(40px, calc((100vw - 1180px) / 2)) 40px 54px; }
.fm-sport-riga-testo p { font-size: 19px; line-height: 1.85; color: #3d3d3d; margin: 0 0 22px; }
.fm-sport-riga-testo strong { color: #111; }
.fm-sport-banda { background: #5cb531; color: #fff; padding: 46px 0; text-align: center; }
.fm-sport-banda p { margin: 0; font-size: 19px; line-height: 1.9; }
.fm-sport-banda strong { color: #fff; }
@media (max-width: 860px) {
.fm-sport-grid, .fm-sport-riga { grid-template-columns: 1fr; }
.fm-sport-riga-testo { padding: 26px 22px; }
.fm-sport-testo h2 { font-size: 27px; }
.fm-sport-testo p, .fm-sport-riga-testo p, .fm-sport-banda p { font-size: 16px; }
}
/* ---------- Pagina Per mamma e bimbo (come il sito storico) ---------- */
.fm-mb-hero::after { background: #f2faec; }
.fm-mb-mamme { background: #f2faec; padding: 50px 0 60px; overflow-x: hidden; }
.fm-mb-euphidra { background: #fff; padding: 60px 0; overflow-x: hidden; }
.fm-mb-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.fm-mb-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 34px; text-transform: none; margin: 0 0 20px; line-height: 1.25; }
.fm-mb-testo p { font-size: 17px; line-height: 1.8; color: #3d3d3d; margin: 0 0 20px; }
.fm-mb-testo strong { color: #111; }
.fm-mb-testo em { font-style: italic; }
.fm-mb-blob img, .fm-mb-euphidra-img img { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; }
/* Carosello foto a scorrimento continuo (non si ferma mai) */
.fm-mb-carosello { position: relative; padding: 0; background: #fff; overflow: hidden; }
.fm-car-track { display: flex; width: max-content; animation: fm-scorri 60s linear infinite; }
.fm-car-track.fm-indietro { animation-direction: reverse; }
.fm-car-track img { flex: 0 0 24.4vw; width: 24.4vw; margin-right: 4px; aspect-ratio: 3/2; object-fit: cover; display: block; }
@keyframes fm-scorri {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
/* Senza frecce le foto devono scorrere comunque, solo più piano. */
.fm-car-track { animation: fm-scorri 150s linear infinite; }
}
/* Le frecce sono state tolte: le fotografie scorrono da sole.
La regola resta per nascondere quelle rimaste in pagine vecchie. */
.fm-car-prev, .fm-car-next { display: none !important; }
/* Sezione bimbi */
.fm-mb-bimbi { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; overflow-x: hidden; }
.fm-mb-bimbi-img { line-height: 0; }
.fm-mb-bimbi-img img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
.fm-mb-bimbi-testo { padding: 40px max(40px, calc((100vw - 1180px) / 2)) 40px 54px; }
.fm-mb-bimbi-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 34px; text-transform: none; margin: 0 0 18px; }
.fm-mb-bimbi-testo p { font-size: 16.5px; line-height: 1.8; color: #3d3d3d; margin: 0 0 20px; }
.fm-mb-bimbi-testo strong { color: #111; }
@media (max-width: 860px) {
.fm-mb-grid, .fm-mb-bimbi { grid-template-columns: 1fr; gap: 28px; }
.fm-mb-bimbi-testo { padding: 26px 22px; }
.fm-car-track img { flex-basis: 48.5vw; width: 48.5vw; }
.fm-mb-testo h2, .fm-mb-bimbi-testo h2 { font-size: 27px; }
}
/* ---------- Pagina Prodotti naturali (come il sito storico) ---------- */
.fm-nat-hero::after { background: #f2faec; }
.fm-nat-intro { background: #f2faec; padding: 50px 0 70px; overflow-x: hidden; }
.fm-nat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.fm-nat-testo .fm-split-title { margin-bottom: 24px; }
.fm-nat-testo .fm-split-title .line1,
.fm-nat-testo .fm-split-title .line2 { color: var(--fm-green); font-size: 37px; font-weight: 400; }
.fm-nat-testo .fm-split-title .line2 { text-transform: uppercase; }
.fm-nat-testo p { font-size: 18.5px; line-height: 1.8; color: #3d3d3d; }
.fm-nat-testo strong { color: #111; }
.fm-nat-blob img { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
/* Sezione finale: bianco a sinistra, grigio a destra */
.fm-nat-finale { background: linear-gradient(90deg, #fff 0%, #fff 50%, #ececec 50%, #ececec 100%); }
.fm-nat-titolo2 { color: var(--fm-green); font-weight: 400; font-size: 37px; text-transform: none; margin: 0 0 20px; }
@media (max-width: 860px) {
.fm-nat-grid { grid-template-columns: 1fr; gap: 30px; }
.fm-nat-testo .fm-split-title .line1, .fm-nat-testo .fm-split-title .line2,
.fm-nat-titolo2 { font-size: 27px; }
.fm-nat-testo p { font-size: 16.5px; }
.fm-nat-finale { background: #fff; }
}
/* ---------- Pagina Telemedicina (come il sito storico) ---------- */
.fm-tel-uno { padding: 40px 0 30px; overflow-x: hidden; }
.fm-tel-due { padding: 20px 0 60px; overflow-x: hidden; }
.fm-tel-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.fm-tel-due .fm-tel-grid { grid-template-columns: 1.1fr 1fr; }
.fm-tel-testo h2 { color: var(--fm-green); font-weight: 400; font-size: 37px; text-transform: none; margin: 0 0 20px; }
.fm-tel-testo p { font-size: 17px; line-height: 1.8; color: #3d3d3d; margin: 0 0 22px; }
.fm-tel-testo strong { color: #111; }
.fm-tel-testo .verde { color: var(--fm-green); }
.fm-tel-img img { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; }
/* Fascia finale: verde chiaro a sinistra, grigio a destra */
.fm-tel-finale { background: linear-gradient(90deg, #f2faec 0%, #f2faec 50%, #ececec 50%, #ececec 100%); }
.fm-tel-finale .fm-an-finale-testo .verde { color: var(--fm-green); }
@media (max-width: 860px) {
.fm-tel-grid, .fm-tel-due .fm-tel-grid { grid-template-columns: 1fr; gap: 26px; }
.fm-tel-due .fm-tel-img { order: -1; }
.fm-tel-testo h2 { font-size: 27px; }
.fm-tel-testo p { font-size: 16px; }
.fm-tel-finale { background: #f2faec; }
}
/* ---------- Pagina Prodotti per animali (come il sito storico) ---------- */
.fm-ani-hero::after { background: #f2faec; }
.fm-ani { background: #f2faec; padding: 50px 0 80px; overflow-x: hidden; }
.fm-pagina-animali .fm-footer { margin-top: 0; }
.fm-ani-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.fm-ani-testo .fm-split-title { margin-bottom: 26px; }
.fm-ani-testo .fm-split-title .line1,
.fm-ani-testo .fm-split-title .line2 { color: var(--fm-green); font-size: 37px; font-weight: 400; text-transform: none; }
.fm-ani-testo p { font-size: 18.5px; line-height: 1.8; color: #3d3d3d; margin: 0 0 22px; }
.fm-ani-testo strong { color: #111; }
.fm-ani-img img { width: 100%; max-width: 540px; height: auto; display: block; margin: 0 auto; }
@media (max-width: 860px) {
.fm-ani-grid { grid-template-columns: 1fr; gap: 30px; }
.fm-ani-testo .fm-split-title .line1, .fm-ani-testo .fm-split-title .line2 { font-size: 27px; }
.fm-ani-testo p { font-size: 16.5px; }
}
/* ---------- Contact form ---------- */
.fm-form { background: #f6faf3; border-radius: var(--fm-radius); padding: 34px; margin: 40px 0; }
.fm-form h2 { margin-top: 0; }
.fm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fm-form-grid .full { grid-column: 1 / -1; }
.fm-form label { font-weight: 700; color: var(--fm-dark); font-size: 13px; display: block; margin-bottom: 4px; }
.fm-form input[type=text], .fm-form input[type=email], .fm-form input[type=tel], .fm-form textarea {
width: 100%; padding: 12px 14px; border: 1.5px solid #dde7d7; border-radius: 8px;
font-family: inherit; font-size: 14px; background: #fff; color: var(--fm-dark);
}
.fm-form input:focus, .fm-form textarea:focus { outline: 2px solid var(--fm-green); border-color: var(--fm-green); }
.fm-form .privacy { font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; }
.fm-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; width: 1px; overflow: hidden; }
.fm-form-msg { padding: 14px 18px; border-radius: 8px; margin-bottom: 16px; font-weight: 600; }
.fm-form-msg.ok { background: #e7f6df; color: #2f6b1c; }
.fm-form-msg.err { background: #fdeaea; color: #a33; }
/* ---------- Footer scuro (come il sito storico) ---------- */
.fm-footer { background: var(--fm-footer-bg); color: #e6e6e6; margin-top: 70px; font-size: 15.5px; }
.fm-footer-cols { display: grid; grid-template-columns: 1.05fr 1.15fr 1.15fr .85fr; gap: 40px; padding: 64px 0 20px; align-items: start; }
.fm-footer-logo img { max-width: 265px; height: auto; margin-bottom: 14px; }
.fm-footer-logo p { margin: 0; line-height: 1.9; }
.fm-footer h4 { color: var(--fm-green); font-size: 23px; font-weight: 700; margin: 14px 0 24px; text-transform: none; letter-spacing: 0; }
.fm-footer a { color: #e6e6e6; }
.fm-footer a:hover { color: var(--fm-green); }
.fm-footer p { line-height: 2.1; margin: 0; }
.fm-orari { display: grid; grid-template-columns: auto auto; gap: 8px 30px; justify-content: start; }
.fm-orari .full { grid-column: 1 / -1; }
.fm-follow-label { margin: 18px 0 16px; font-size: 16px; }
.fm-social-round { display: flex; gap: 12px; flex-wrap: wrap; }
.fm-social-round a {
width: 42px; height: 42px; border-radius: 50%; background: var(--fm-green); color: var(--fm-footer-bg);
display: flex; align-items: center; justify-content: center;
}
.fm-social-round a:hover { background: #fff; color: var(--fm-footer-bg); }
.fm-social-round svg { width: 20px; height: 20px; }
.fm-footer-bottom { text-align: center; padding: 44px 0 50px; font-size: 16px; }
.fm-footer-bottom a { color: #fff; }
.fm-footer-bottom .sep { margin: 0 10px; color: #bbb; }
/* Floating buttons */
.fm-float { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
.fm-float a {
width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 22px rgba(0,0,0,.25); font-size: 24px; color: #fff !important;
}
.fm-float .tel { background: var(--fm-green-dark); }
.fm-float .wa { background: #25d366; }
.fm-float .wa svg { width: 28px; height: 28px; }
/* ---------- Singola news (come il sito storico) ---------- */
.fm-single { padding-top: 56px; }
.fm-single-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: start; max-width: 1180px !important; }
.fm-single-img img { width: 100%; height: auto; display: block; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.fm-single-title { color: var(--fm-green); font-weight: 800; font-size: 38px; text-transform: none; margin: 0 0 22px; line-height: 1.2; }
.fm-single-text p { font-size: 17.5px; line-height: 1.8; color: #3b3b3b; }
.fm-single-text p strong, .fm-single-text p b { color: #111; }
.fm-share-title { font-size: 27px; font-weight: 800; color: #1c1c1c; margin: 42px 0 16px; text-transform: none; }
.fm-share { display: flex; gap: 4px; }
.fm-share a { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #fff !important; }
.fm-share svg { width: 24px; height: 24px; }
.fm-share .fb { background: #3b5998; }
.fm-share .wa { background: #25d366; }
.fm-share .tg { background: #2ca5e0; }
.fm-share .pin { background: #cb2027; }
.fm-share a:hover { opacity: .85; }
.fm-altre-news { padding-top: 30px; }
.fm-altre-title { text-transform: uppercase; font-weight: 800; font-size: 22px; letter-spacing: .08em; margin-bottom: 26px; }
@media (max-width: 860px) {
.fm-single-grid { grid-template-columns: 1fr; gap: 28px; }
.fm-single-title { font-size: 30px; }
}
/* ---------- News list / single ---------- */
.fm-news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding: 50px 0; }
.fm-single-meta { color: var(--fm-green); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.fm-pagination { text-align: center; padding: 10px 0 50px; }
.fm-pagination .page-numbers { display: inline-block; padding: 8px 15px; border-radius: 8px; background: #f0f5ec; color: var(--fm-dark); font-weight: 700; margin: 0 3px; }
.fm-pagination .page-numbers.current { background: var(--fm-green); color: #fff; }
/* ---------- Responsive ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
/* "clip" taglia quello che sborda ai lati senza creare una seconda area di
scorrimento: serve perché la testata resti agganciata in cima alla pagina. */
@supports (overflow-x: clip) {
html, body { overflow-x: clip; }
}
@media (max-width: 1240px) {
.fm-subnav a { padding: 12px 5px; font-size: 15px; }
.fm-mainbar a { padding: 0 9px; font-size: 13.5px; }
}
@media (max-width: 1120px) {
.fm-mainbar a { padding: 0 6px; font-size: 12px; }
.fm-subnav a { padding: 11px 3px; font-size: 13.5px; }
}
@media (max-width: 980px) {
.fm-hero-inner, .fm-two-col { grid-template-columns: 1fr; }
.fm-services-grid { grid-template-columns: repeat(2, 1fr); }
.fm-news-track, .fm-news-list { grid-template-columns: 1fr 1fr; }
.fm-footer-cols { grid-template-columns: 1fr 1fr; gap: 30px; }
h1 { font-size: 32px; } .fm-hero h1 { font-size: 34px; }
/* Menu mobile: hamburger apre le due barre impilate */
:root { --fm-header-h: 95px; }
.fm-burger { display: block; }
.fm-header-top-inner { height: 92px; }
.fm-mainbar, .fm-subnav { display: none; }
.fm-header.open .fm-mainbar {
display: block; position: static; height: auto; padding: 0;
}
.fm-header.open .fm-mainbar ul { flex-direction: column; align-items: stretch; }
.fm-header.open .fm-mainbar li { flex: none; justify-content: flex-start; }
.fm-header.open .fm-mainbar a { text-align: left; }
.fm-header.open .fm-mainbar li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
.fm-header.open .fm-mainbar a { line-height: 1.4; padding: 13px 24px; display: block; }
.fm-header.open .fm-mainbar-social { border-left: 0; margin: 0; padding: 10px 24px; gap: 10px; }
.fm-header.open .fm-mainbar-social svg { width: 18px; height: 18px; }
.fm-header.open .fm-subnav { display: block; max-height: calc(100vh - 300px); overflow: auto; }
.fm-header.open .fm-subnav ul { flex-direction: column; }
.fm-header.open .fm-subnav li + li { border-left: 0; border-top: 1px solid #eee; }
.fm-header.open .fm-subnav a { padding: 12px 24px; display: block; width: 100%; text-align: left; }
.fm-header.open .fm-subnav li { flex: none; }
.fm-header.open .fm-header-top-inner { flex-wrap: wrap; height: auto; padding-bottom: 0; align-items: flex-start; }
.fm-header.open .fm-logo, .fm-header.open .fm-burger { margin-top: 16px; }
.fm-header.open .fm-mainbar { margin: 10px -22px 0; width: calc(100% + 44px); }
.fm-header.open .fm-header-top { border-bottom: 0; }
.fm-header.open .fm-mainbar { width: calc(100% + 44px); }
}
@media (max-width: 760px) {
.fm-news-track, .fm-news-list, .fm-services-grid, .fm-form-grid { grid-template-columns: 1fr; }
.fm-footer-cols { grid-template-columns: 1fr; }
.fm-logo img { max-height: 62px; }
/* La foto resta agganciata all'onda verde, come sul computer:
sale sotto il nastro e sborda un po' ai lati. */
.fm-hero-inner { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 44px; gap: 14px; }
.fm-hero-img { margin-top: max(-98px, -19vw); order: -1; }
.fm-hero-img img { width: 118%; max-width: none; margin-left: -9%; }
.fm-hero-copy { padding-top: 4px; }
/* Stessa regola quando in cima c'è la foto invece del video. */
.fm-ribbon-solo + .fm-hero .fm-hero-img { margin-top: max(-98px, -19vw); }
.fm-ribbon-solo + .fm-hero { padding-top: 0; margin-top: 0; }
.fm-locker-band h2 { font-size: 27px; }
.fm-locker-band .fm-locker-copy p { font-size: 17.5px; }
/* Titoli su due righe: si rimpiccioliscono invece di uscire dallo schermo. */
.fm-split-title .line1, .fm-split-title .line2 { font-size: 27px; }
.fm-hero h1 .line1, .fm-hero h1 .line2 { font-size: 30px; }
.fm-team .img-wrap img { width: 100%; margin-top: 0; }
.fm-team-deco { display: none; }
.fm-team-copy p { font-size: 16.5px; }
}
/* ---------- Ombre più marcate su riquadri e foto isolate ----------
Tutti i rettangoli e le immagini che "galleggiano" sulla pagina hanno
un'ombra più profonda, così staccano bene dallo sfondo. */
.fm-banner,
.fm-cf-pannello,
.fm-pr-pannello,
.fm-pr-evento,
.fm-news-blocco,
.fm-ec-box,
.fm-pp-punto,
.fm-content .fm-gallery img,
.fm-est-gallery img,
.fm-news-thumb,
.fm-single-img img {
box-shadow: 0 26px 60px rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.12);
}
.fm-service-tile { box-shadow: 0 22px 52px rgba(0,0,0,.24), 0 6px 14px rgba(0,0,0,.12); }
.fm-service-tile:hover { box-shadow: 0 34px 70px rgba(0,0,0,.32), 0 10px 20px rgba(0,0,0,.16); }
.fm-pf-badge { box-shadow: 0 20px 44px rgba(0,0,0,.32); }
/* Foto ritagliate o senza cornice: l'ombra segue il contorno dell'immagine */
.fm-hero-img img { filter: drop-shadow(0 28px 48px rgba(40,90,25,.34)); }
.fm-two-col .img-wrap img,
.fm-pf-intro .img-wrap img,
.fm-mb-blob img, .fm-mb-euphidra-img img,
.fm-sport-blob img,
.fm-gal-img img,
.fm-nat-blob img,
.fm-tel-img img,
.fm-ani-img img,
.fm-ts-badge img,
.fm-an-natrix-img img,
.fm-cos-foto img,
.fm-sport-foto img,
.fm-mb-bimbi-img img,
.fm-news-riga-foto img {
filter: drop-shadow(0 26px 46px rgba(0,0,0,.30));
}
/* La croce 24h no: è già sfumata nel verde, un'ombra la sporcherebbe. */
.fm-locker-band .img-wrap img { filter: none; }
/* La foto dei prodotti delle parafarmacie: angoli morbidi e ombra piena */
.fm-pf-intro .img-wrap img { border-radius: 20px; }
/* ---------- "Leggi tutto": pulsante ovale, grande e ben leggibile ---------- */
.fm-readmore {
display: inline-block; background: #fff; color: var(--fm-dark);
border: 2px solid var(--fm-green); border-radius: 40px !important;
padding: 15px 34px; font-size: 15px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
box-shadow: 0 10px 24px rgba(0,0,0,.16);
transition: background .2s, color .2s;
}
.fm-readmore:hover { background: var(--fm-green); color: #fff; text-decoration: none; }
@media (max-width: 560px) {
.fm-readmore { padding: 13px 26px; font-size: 14px; }
}
/* ---------- Sezioni unite: via le strisce bianche di separazione ----------
Dove una fascia colorata segue una parte bianca, le due si toccano:
niente più striscia vuota fra un blocco e l'altro. */
.fm-section.fm-team { padding-bottom: 0; }
.fm-locker-band { margin-top: 0; }
/* Il piè di pagina scuro parte subito dopo il contenuto, in tutte le pagine. */
.fm-footer { margin-top: 0; }
/* Ultime sezioni: un po' d'aria prima del piè di pagina, senza fascia vuota. */
.fm-ts { padding-bottom: 56px; }
/* Testo introduttivo dei servizi: su una riga sola sui monitor larghi. */
.fm-section.alt .fm-lead { max-width: 1120px; }
.fm-lf-contatti { padding-bottom: 44px; }
.fm-pr:last-of-type { padding-bottom: 46px; }
/* ---------- Banner rotanti ----------
Una fascia larga con le immagini che si susseguono da sole: frecce
tonde ai lati, pallini in basso e pulsante di pausa. */
.fm-rot { padding: 18px 0 16px; }
.fm-rot-telaio { position: relative; }
/* La fascia prende la forma delle immagini caricate (la misura la calcola il
sito da sola) e ogni banner la riempie tutta, senza bordi vuoti. */
.fm-rot-vetrina {
overflow: hidden; border-radius: 18px;
box-shadow: 0 26px 60px rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.12);
background: #fff;
width: 100%; margin: 0 auto;
aspect-ratio: var(--fm-rot-forma, 4 / 1);
transition: height .45s ease;
}
.fm-rot-nastro { display: flex; height: 100%; transition: transform .6s cubic-bezier(.4,.02,.2,1); }
.fm-rot-slide { flex: 0 0 100%; min-width: 100%; height: 100%; line-height: 0; }
/* "contain": l'immagine si vede sempre tutta, non viene mai tagliata. */
.fm-rot-slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.fm-rot-slide a { display: block; line-height: 0; height: 100%; }
/* Dissolvenza: i banner non scorrono, si sfumano uno sull'altro restando
fermi al loro posto. */
.fm-rot-telaio.sfumato .fm-rot-nastro {
display: block; position: relative; height: 100%;
transform: none !important; transition: none;
}
.fm-rot-telaio.sfumato .fm-rot-slide {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%; min-width: 0;
opacity: 0; transition: opacity .8s ease;
}
.fm-rot-telaio.sfumato .fm-rot-slide.attiva { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.fm-rot-nastro { transition: none; }
.fm-rot-telaio.sfumato .fm-rot-slide { transition: opacity .2s linear; }
}
@media (max-width: 700px) {
.fm-rot { padding: 14px 0 12px; }
.fm-rot-vetrina { border-radius: 12px; }
}
/* ---------- Ritocchi finali ---------- */
/* Un po' d'aria sotto la sezione del team, che non tocchi il verde. */
.fm-section.fm-team { padding-bottom: 46px; }
/* Logo in alto a sinistra più grande. */
.fm-header-top-inner { height: 122px; }
.fm-logo img { max-height: 100px; }
@media (max-width: 1120px) {
.fm-header-top-inner { height: 106px; }
.fm-logo img { max-height: 86px; }
}
@media (max-width: 760px) {
.fm-logo img { max-height: 74px; }
}
/* ---------- Striscia notizie salute (tipo "ultim'ora") ----------
Bassa e discreta, nei colori del sito: riquadro verde con la scritta
fissa e i titoli che scorrono lentamente accanto. */
.fm-tic {
background: linear-gradient(100deg, #46982a 0%, #6cc23f 55%, #a2da74 100%);
color: #fff; overflow: hidden;
}
.fm-tic-dentro {
max-width: 1180px; margin: 0 auto; padding: 0 22px;
display: flex; align-items: stretch; gap: 0; height: 62px;
}
.fm-tic-etichetta {
flex: none; display: flex; align-items: center; background: #fff;
color: var(--fm-green-dark); font-size: 14px; font-weight: 800;
letter-spacing: .12em; text-transform: uppercase;
padding: 0 22px; margin: 11px 20px 11px 0; border-radius: 30px; white-space: nowrap;
box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.fm-tic-pista { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; align-items: center; }
.fm-tic-nastro {
display: flex; width: max-content;
animation-name: fm-tic-scorri; animation-timing-function: linear; animation-iteration-count: infinite;
}
.fm-tic-fila { display: flex; align-items: center; }
.fm-tic-voce {
display: inline-flex; align-items: center; gap: 12px;
color: #fff; font-size: 18px; font-weight: 700; white-space: nowrap;
padding: 0 32px 0 0; text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.fm-tic-voce:hover { color: #eaffdc; text-decoration: underline; }
.fm-tic-punto {
width: 9px; height: 9px; border-radius: 50%; background: #fff;
opacity: .9; margin-right: 18px; flex: none;
}
/* Un po' di respiro fra la striscia e i banner della pubblicità. */
.fm-tic + .fm-rot { padding-top: 40px; }
@keyframes fm-tic-scorri {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* Nota: la striscia scorre anche per chi ha chiesto meno animazioni,
solo più lentamente. La regola sta in fondo al foglio. */
@media (max-width: 700px) {
.fm-tic-dentro { height: 52px; padding: 0 12px; }
.fm-tic-etichetta { font-size: 11.5px; padding: 0 13px; margin: 9px 12px 9px 0; letter-spacing: .08em; }
.fm-tic-voce { font-size: 15.5px; padding-right: 24px; }
.fm-tic + .fm-rot { padding-top: 26px; }
}
/* Riga finale del sito (copyright) */
.fm-footer-copy { margin: 16px 0 0; font-size: 14px; color: #cfcfcf; }
/* Fotografie inserite dentro il testo di una news */
.fm-single-text img, .fm-content img {
max-width: 100%; height: auto; display: block;
border-radius: 14px; margin: 22px auto;
box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.fm-single-text .alignleft, .fm-content .alignleft { float: left; margin: 6px 26px 16px 0; max-width: 46%; }
.fm-single-text .alignright, .fm-content .alignright { float: right; margin: 6px 0 16px 26px; max-width: 46%; }
.fm-single-text .aligncenter, .fm-content .aligncenter { margin-left: auto; margin-right: auto; }
.fm-single-text figure, .fm-content figure { margin: 22px 0; }
.fm-single-text figcaption, .fm-content figcaption { font-size: 14px; color: #6a6a68; text-align: center; margin-top: 8px; }
@media (max-width: 700px) {
.fm-single-text .alignleft, .fm-single-text .alignright,
.fm-content .alignleft, .fm-content .alignright { float: none; max-width: 100%; margin: 18px auto; }
}
/* ==========================================================
Pulsanti d'angolo: cookie e accessibilità (in basso a sinistra)
========================================================== */
.fm-angolo { position: fixed; left: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; gap: 12px; }
.fm-angolo-btn {
width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
background: var(--fm-green); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .2s, background .2s;
}
.fm-angolo-btn:hover { background: var(--fm-green-dark); transform: scale(1.08); }
.fm-angolo-btn svg { width: 26px; height: 26px; }
.fm-apri-access { background: #3d4ab8; }
.fm-apri-access:hover { background: #2f3a95; }
/* Finestre (cookie e accessibilità) */
.fm-modale { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fm-modale[hidden] { display: none; }
.fm-modale-fondo { position: absolute; inset: 0; background: rgba(20,30,20,.55); }
.fm-modale-box {
position: relative; background: #fff; border-radius: 18px; width: 100%; max-width: 640px;
max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.fm-modale-box.stretto { max-width: 480px; }
.fm-modale-testa { display: flex; align-items: center; gap: 10px; padding: 20px 22px; border-bottom: 1px solid #eee; }
.fm-modale-testa.verde { background: var(--fm-green); border-bottom: 0; }
.fm-modale-testa.verde h2, .fm-modale-testa.verde .fm-modale-x { color: #fff; }
.fm-modale-testa h2 { margin: 0; flex: 1; font-size: 23px; text-transform: none; color: #16351a; }
.fm-modale-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #5a5a58; padding: 0 6px; }
.fm-modale-corpo { padding: 20px 22px; overflow: auto; }
.fm-modale-intro { margin: 0 0 16px; font-size: 15.5px; color: #444; }
.fm-modale-piede { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid #eee; background: #fafbfa; }
.fm-btn-ck {
flex: 1 1 auto; border-radius: 30px; padding: 13px 18px; font-size: 14px; font-weight: 700;
cursor: pointer; border: 2px solid transparent; transition: filter .2s;
}
.fm-btn-ck:hover { filter: brightness(1.08); }
.fm-btn-ck.chiaro { background: #fff; border-color: #cfe0c6; color: #2c2c2a; }
.fm-btn-ck.scuro { background: #10281c; color: #fff; }
.fm-btn-ck.verde { background: var(--fm-green); color: #fff; }
/* Voci dei cookie */
.fm-ck-voce { background: #f7faf5; border: 1px solid #e4eede; border-radius: 14px; padding: 15px 17px; margin-bottom: 12px; }
.fm-ck-riga { display: flex; align-items: center; gap: 10px; }
.fm-ck-riga strong { font-size: 16.5px; color: #16351a; }
.fm-ck-sempre { background: #dff0d3; color: #3f7a2a; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.fm-ck-voce p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #55554f; }
.fm-ck-lev { margin-left: auto; position: relative; width: 52px; height: 30px; flex: none; display: block; }
.fm-ck-lev input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fm-ck-lev span, .fm-ck-lev.fissa { position: absolute; inset: 0; background: #c9d4c4; border-radius: 30px; transition: background .2s; }
.fm-ck-lev.fissa { position: relative; width: 52px; height: 30px; background: #9fc78e; margin-left: auto; }
.fm-ck-lev span::after, .fm-ck-lev.fissa::after {
content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.fm-ck-lev.fissa::after { transform: translateX(22px); }
.fm-ck-lev input:checked + span { background: var(--fm-green); }
.fm-ck-lev input:checked + span::after { transform: translateX(22px); }
.fm-ck-note { font-size: 13.5px; color: #666; margin: 4px 0 0; }
/* Fascia della prima visita */
.fm-ck-fascia {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100;
background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.28);
padding: 16px 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
max-width: 980px; margin: 0 auto;
}
.fm-ck-fascia[hidden] { display: none; }
.fm-ck-fascia p { margin: 0; flex: 1 1 320px; font-size: 14.5px; line-height: 1.6; color: #3b3b39; }
.fm-ck-fascia-btn { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-ck-fascia .fm-btn-ck { flex: 0 0 auto; padding: 11px 20px; font-size: 13.5px; }
/* Accessibilità: pulsanti degli strumenti */
.fm-ac-gruppo { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #7a7a76; margin: 18px 0 8px; }
.fm-ac-gruppo:first-child { margin-top: 0; }
.fm-ac-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fm-ac-btn {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
background: #f7faf5; border: 2px solid #e4eede; border-radius: 14px; padding: 13px 14px;
font-size: 13.5px; font-weight: 600; color: #2c2c2a; cursor: pointer; text-align: left;
transition: border-color .2s, background .2s; line-height: 1.3;
}
.fm-ac-btn:hover { border-color: var(--fm-green); }
.fm-ac-btn.acceso { background: #e7f6df; border-color: var(--fm-green); }
.fm-ac-riga-lettura { position: fixed; left: 0; right: 0; height: 120px; z-index: 1150; pointer-events: none;
border-top: 3px solid rgba(81,173,50,.9); border-bottom: 3px solid rgba(81,173,50,.9);
box-shadow: 0 -2000px 0 rgba(0,0,0,.55), 0 2000px 0 rgba(0,0,0,.55); }
.fm-ac-riga-lettura[hidden] { display: none; }
/* Regolazioni scelte da chi visita il sito */
body.fm-testo-grande { font-size: 118%; }
body.fm-testo-grande h1, body.fm-testo-grande h2, body.fm-testo-grande h3 { font-size: 118%; }
body.fm-righe-larghe, body.fm-righe-larghe p, body.fm-righe-larghe li { line-height: 2.1 !important; letter-spacing: .02em; }
body.fm-allinea-sinistra * { text-align: left !important; }
body.fm-carattere-leggibile, body.fm-carattere-leggibile * { font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif !important; }
body.fm-contrasto { background: #000 !important; }
body.fm-contrasto .fm-main, body.fm-contrasto section, body.fm-contrasto div, body.fm-contrasto article { background-color: #000 !important; }
body.fm-contrasto, body.fm-contrasto p, body.fm-contrasto span, body.fm-contrasto li, body.fm-contrasto h1,
body.fm-contrasto h2, body.fm-contrasto h3, body.fm-contrasto h4, body.fm-contrasto strong, body.fm-contrasto em { color: #ffea00 !important; }
body.fm-contrasto a { color: #6cf !important; }
body.fm-grigi { filter: grayscale(1); }
body.fm-niente-immagini img, body.fm-niente-immagini video, body.fm-niente-immagini .fm-filigrana { visibility: hidden !important; }
body.fm-niente-animazioni *, body.fm-niente-animazioni *::before, body.fm-niente-animazioni *::after {
animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
body.fm-link-evidenziati a { text-decoration: underline !important; background: #fff59d !important; color: #10281c !important; }
body.fm-cursore-grande, body.fm-cursore-grande * {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 16-13 3-6 13z' fill='%23111' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E") 4 4, auto !important;
}
/* ==========================================================
Assistente della farmacia (in basso a destra, sopra il telefono)
========================================================== */
.fm-ai { position: relative; }
.fm-ai-bolla {
width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
background: var(--fm-green); color: #fff; position: relative;
display: flex; align-items: center; justify-content: center; font-size: 26px;
box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .2s, background .2s;
}
.fm-ai-bolla:hover { background: var(--fm-green-dark); transform: scale(1.06); }
.fm-ai-punto { position: absolute; top: 6px; right: 8px; width: 11px; height: 11px; border-radius: 50%; background: #ffd233; box-shadow: 0 0 0 2px #fff; }
.fm-ai-finestra {
position: fixed; right: 20px; bottom: 92px; left: auto; top: auto;
width: 360px; max-width: calc(100vw - 40px); z-index: 1200;
background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
box-shadow: 0 26px 60px rgba(0,0,0,.32); max-height: min(560px, calc(100vh - 140px));
}
.fm-ai-finestra[hidden] { display: none; }
.fm-ai-testa { display: flex; align-items: center; gap: 11px; background: var(--fm-green); color: #fff; padding: 14px 16px; }
.fm-ai-testa strong { display: block; font-size: 15.5px; }
.fm-ai-testa span { font-size: 12px; opacity: .9; }
.fm-ai-tondo { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.fm-ai-x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.fm-ai-dialogo { flex: 1 1 auto; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f6faf3; }
.fm-ai-msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.fm-ai-msg.farmacia { background: #fff; color: #2c2c2a; border-bottom-left-radius: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.08); align-self: flex-start; }
.fm-ai-msg.cliente { background: var(--fm-green); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.fm-ai-msg.attesa { color: #7a7a76; font-style: italic; }
.fm-ai-msg a { color: inherit; text-decoration: underline; }
.fm-ai-rapide { display: flex; gap: 7px; flex-wrap: wrap; padding: 10px 14px 0; background: #f6faf3; }
.fm-ai-rapida { background: #fff; border: 1.5px solid #cfe7bc; border-radius: 20px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: #2c2c2a; cursor: pointer; }
.fm-ai-rapida:hover { background: var(--fm-green); border-color: var(--fm-green); color: #fff; }
.fm-ai-scrivi { display: flex; gap: 8px; padding: 12px 14px; background: #f6faf3; }
.fm-ai-scrivi input { flex: 1; border: 1.5px solid #d8e6cf; border-radius: 24px; padding: 11px 15px; font-size: 14.5px; font-family: inherit; }
.fm-ai-scrivi input:focus { outline: none; border-color: var(--fm-green); }
.fm-ai-scrivi button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--fm-green); color: #fff; font-size: 17px; cursor: pointer; flex: none; }
.fm-ai-nota { margin: 0; padding: 0 16px 14px; font-size: 11.5px; line-height: 1.5; color: #85857f; background: #f6faf3; }
@media (max-width: 600px) {
.fm-angolo { left: 12px; bottom: 12px; gap: 10px; }
.fm-angolo-btn { width: 46px; height: 46px; }
.fm-angolo-btn svg { width: 22px; height: 22px; }
.fm-ai-finestra { width: auto; left: 12px; right: 12px; max-width: none; bottom: 66px; }
.fm-ck-fascia { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
}
/* ==========================================================
TELEFONO — messa a punto generale
========================================================== */
/* 1) Il sito non si sposta più di lato: quello che sborda viene tagliato
dalla sezione che lo contiene, non lasciato scorrere. */
.fm-main { overflow-x: clip; }
/* Attenzione: il nastro verde NON va tagliato — la sua scritta è un'immagine
appoggiata fuori dal riquadro, che sparirebbe. */
.fm-hero, .fm-hometop, .fm-locker-band, .fm-banner2,
.fm-pf-intro, .fm-pf-hero, .fm-news-home, .fm-rot, .fm-tic, .fm-section,
.fm-header, .fm-footer { overflow-x: clip; }
@supports not (overflow: clip) {
.fm-main, .fm-hero, .fm-locker-band, .fm-banner2 { overflow-x: hidden; }
}
img, video, iframe, table { max-width: 100%; }
@media (max-width: 980px) {
/* 7) Menu aperto: si vedono tutte le voci, verdi e bianche.
Le righe sono più compatte e, se lo schermo è davvero piccolo,
la testata scorre invece di tagliare. */
.fm-header.open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
.fm-header.open .fm-logo img { max-height: 46px; }
.fm-header.open .fm-logo, .fm-header.open .fm-burger { margin-top: 10px; }
.fm-header.open .fm-mainbar a { padding: 10px 18px; font-size: 13.5px; }
.fm-header.open .fm-mainbar-social { padding: 8px 18px; }
.fm-header.open .fm-subnav { max-height: none; overflow: visible; }
.fm-header.open .fm-subnav a { padding: 9px 18px; font-size: 13.5px; }
.fm-header.open .fm-subnav li + li { border-top: 1px solid #ececec; }
}
@media (max-width: 760px) {
/* 6) Riquadri e testi quasi a filo schermo */
.fm-container { padding: 0 12px; }
.fm-banner-testo { padding: 20px 16px; }
.fm-news-testata { padding: 26px 18px 20px; }
.fm-news-riga-testo, .fm-news-riga.chiara .fm-news-riga-testo { padding: 24px 16px 28px; }
.fm-cf-pannello { padding: 26px 18px 30px; }
.fm-pr-pannello { padding: 26px 18px 30px; gap: 26px; }
.fm-ec-box { padding: 26px 18px; }
.fm-modulo-wa, .fm-an-finale-grid { gap: 26px; }
.fm-single-grid { gap: 26px; }
/* 5) Le schede dei servizi: due per riga, più basse */
.fm-services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-service-tile { padding: 14px 14px 10px; min-height: 128px; border-radius: 10px; }
.fm-service-tile .label { font-size: 15px; }
.fm-service-tile img { width: 46%; max-width: 66px; }
/* 3) La foto a cuore resta agganciata all'onda ma non copre più
né la scritta verde né il video che sta sopra. */
.fm-hero-img, .fm-ribbon-solo + .fm-hero .fm-hero-img { margin-top: max(-64px, -16vw); }
.fm-hero-img img { width: 106%; margin-left: -3%; }
/* 4) Striscia delle notizie: etichetta piccola, più spazio ai titoli */
.fm-tic-dentro { height: 46px; padding: 0 10px; }
.fm-tic-etichetta { font-size: 10px; letter-spacing: .05em; padding: 0 11px; margin: 9px 9px 9px 0; }
.fm-tic-voce { font-size: 14.5px; padding-right: 20px; }
.fm-tic-punto { width: 7px; height: 7px; margin-right: 11px; }
.fm-tic + .fm-rot { padding-top: 20px; }
/* 2) Pulsanti d'angolo: tutti uguali, più piccoli e più in basso */
.fm-float { right: 10px; bottom: 10px; gap: 9px; }
.fm-angolo { left: 10px; bottom: 10px; gap: 9px; }
.fm-float a, .fm-ai-bolla, .fm-angolo-btn { width: 44px; height: 44px; font-size: 19px; }
.fm-float .wa svg { width: 23px; height: 23px; }
.fm-angolo-btn svg { width: 21px; height: 21px; }
.fm-ai-punto { width: 9px; height: 9px; top: 4px; right: 5px; }
/* La finestrella dell'assistente resta sempre dentro lo schermo */
.fm-ai-finestra {
position: fixed; left: 8px; right: 8px; bottom: 62px; top: auto;
width: auto; max-width: none;
max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
}
/* 8) Niente parole o loghi tagliati */
.fm-pf-logo img { max-width: 100%; }
.fm-est-logo img, .fm-lf-logo img { max-width: 100%; height: auto; }
.fm-pf-testo p, .fm-pf-testo ul { overflow-wrap: break-word; }
.fm-single-title, .fm-pf-badge span, h1, h2, h3 { overflow-wrap: break-word; }
}
@media (max-width: 420px) {
.fm-container { padding: 0 10px; }
.fm-service-tile .label { font-size: 13.5px; }
.fm-service-tile img { max-width: 56px; }
}
/* ==========================================================
TELEFONO — seconda messa a punto
========================================================== */
/* 5) Il sito resta fermo: nessun elemento può essere più largo dello schermo. */
html, body { width: 100%; max-width: 100%; }
@media (max-width: 760px) {
/* 1) Loghi e immagini a larghezza fissa: mai più larghi della colonna. */
.fm-ct-logo img, .fm-pf-logo img, .fm-est-logo img, .fm-footer-logo img,
.fm-lf-logo img, .fm-cos-logo img { max-width: 100%; height: auto; }
.fm-ct-riga { gap: 14px; margin: 22px 0; }
.fm-ct-riga p { font-size: 15.5px; overflow-wrap: anywhere; }
.fm-ct-grid, .fm-an-finale-grid, .fm-two-col, .fm-ts-row { gap: 26px; }
/* 2) Il nastro verde con la scritta torna in vista: la foto gli sta sotto. */
.fm-hero-img, .fm-ribbon-solo + .fm-hero .fm-hero-img { margin-top: 0; }
.fm-hero { padding-top: calc(4vw + 10px); }
.fm-ribbon-solo + .fm-hero { padding-top: 4px; }
/* 6) Il menu aperto non sborda più di lato (i margini negativi seguono
il nuovo bordo di 12 pixel). */
.fm-header.open .fm-mainbar { margin: 10px -12px 0; width: calc(100% + 24px); }
/* 4) Pulsanti tondi ancora più piccoli e discreti */
.fm-float, .fm-angolo { gap: 8px; bottom: 9px; }
.fm-float { right: 9px; }
.fm-angolo { left: 9px; }
.fm-float a, .fm-ai-bolla, .fm-angolo-btn { width: 38px; height: 38px; font-size: 16px; }
.fm-float .wa svg { width: 20px; height: 20px; }
.fm-angolo-btn svg { width: 18px; height: 18px; }
.fm-ai-punto { width: 8px; height: 8px; top: 3px; right: 4px; }
/* 3) L'assistente si apre a tutto schermo, con la X per tornare al sito. */
.fm-ai-finestra {
position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0;
width: 100%; max-width: none; height: 100%; max-height: none;
border-radius: 0; z-index: 2000;
}
.fm-ai-testa { padding: 16px 14px; padding-top: max(16px, env(safe-area-inset-top)); }
.fm-ai-x { font-size: 34px; width: 44px; height: 44px; line-height: 1; }
.fm-ai-dialogo { padding: 14px; }
.fm-ai-scrivi { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.fm-ai-nota { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
/* Mentre l'assistente è aperto, il resto del sito non si vede né si muove. */
body.fm-ai-aperto { overflow: hidden; }
body.fm-ai-aperto .fm-angolo, body.fm-ai-aperto .fm-float a, body.fm-ai-aperto .fm-ai-bolla { display: none; }
}
/* Il bordo laterale è un valore solo, così i menu che devono arrivare a filo
schermo sanno sempre di quanto uscire: niente sbordi di due o tre pixel. */
:root { --fm-pad: 22px; }
@media (max-width: 760px) { :root { --fm-pad: 12px; } }
@media (max-width: 420px) { :root { --fm-pad: 10px; } }
.fm-container { padding-left: var(--fm-pad); padding-right: var(--fm-pad); }
@media (max-width: 980px) {
.fm-header.open .fm-mainbar {
margin: 10px calc(var(--fm-pad) * -1) 0;
width: calc(100% + var(--fm-pad) * 2);
}
}
/* ==========================================================
TELEFONO — terza messa a punto
========================================================== */
/* Safari su iPhone, di sua iniziativa, ingrandisce il testo di certe parti
della pagina: i riquadri diventano più larghi dello schermo e il sito
comincia a scorrere di lato. Questa riga glielo impedisce. */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
/* La striscia delle notizie non può allargare la pagina nemmeno di un pixel. */
.fm-tic-pista, .fm-tic-dentro { min-width: 0; }
.fm-tic-dentro { max-width: 100%; }
/* Il battito dei pulsanti è definito una volta sola, più in alto:
fm-respiro (cresce e torna) e fm-alone (il cerchio di luce). */
@media (max-width: 760px) {
/* Pagina Tutti i servizi: sul telefono l'ultimo elenco restava troppo
staccato dalla striscia verde delle notizie. Si toglie lo spazio in
fondo all'ultimo blocco e si accorcia quello della sezione. */
.fm-ts { padding-bottom: 40px; }
.fm-ts-row:last-child { padding-bottom: 0; }
/* 1) La foto a cuore: centrata e intera, appoggiata sotto l'onda verde. */
.fm-hero-img img { width: 100%; max-width: 100%; margin-left: 0; }
.fm-hero-img, .fm-ribbon-solo + .fm-hero .fm-hero-img { margin-top: 0; }
/* 3) Mentre l'assistente è aperto la pagina dietro è bloccata del tutto. */
body.fm-ai-aperto { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.fm-ai-finestra { width: 100vw; height: 100vh; height: 100dvh; }
}
/* ==========================================================
Parte alta della home: video → fascia verde → fotografia
Tre pezzi attaccati uno sotto l'altro, uguali su computer e telefono.
========================================================== */
.fm-fascia {
background: var(--fm-green);
margin: 0; padding: 0; width: 100%; display: block; line-height: 0;
}
.fm-fascia img { display: block; width: 100%; height: auto; margin: 0; }
.fm-hero { background: #e9f3e2; padding: 0 0 40px; margin: 0; overflow-x: clip; }
.fm-hero-foto { line-height: 0; margin: 0; padding: 0; }
.fm-hero-foto img { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; }
.fm-hero .fm-container { padding-top: 8px; }
.fm-hero-inner { display: block; padding: 0; }
.fm-hero-copy { padding-top: 0; }
@media (max-width: 760px) {
.fm-hero { padding-bottom: 26px; }
.fm-hero-foto img { max-width: 100%; }
.fm-hero .fm-container { padding-top: 2px; }
}
/* Sul computer la fotografia sta a destra, più piccola, con il testo a fianco.
Sul telefono resta com'è: fascia e foto a tutta larghezza, una sotto l'altra. */
@media (min-width: 761px) {
.fm-hero {
display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center;
padding: 22px max(22px, calc((100% - 1180px) / 2)) 46px;
}
.fm-hero-foto { order: 2; }
.fm-hero-foto img { max-width: 100%; margin: 0 0 0 auto; }
.fm-hero .fm-container { order: 1; max-width: none; width: 100%; padding: 0; }
}
/* La chat non si taglia più: la parte del dialogo può rimpicciolirsi e
scorrere da sola, e le domande pronte spariscono dopo la prima risposta. */
.fm-ai-dialogo { min-height: 0; }
.fm-ai-finestra.fm-ai-avviata .fm-ai-rapide { display: none; }
/* La chat resta della sua misura anche quando arriva una risposta lunga:
le parole vanno a capo e la finestra non può mai superare lo schermo. */
.fm-ai-finestra, .fm-ai-testa, .fm-ai-dialogo, .fm-ai-rapide, .fm-ai-scrivi, .fm-ai-nota { box-sizing: border-box; }
.fm-ai-testa > div { min-width: 0; }
.fm-ai-testa strong, .fm-ai-testa span { overflow-wrap: anywhere; }
.fm-ai-dialogo { overflow-x: hidden; overscroll-behavior: contain; }
.fm-ai-scrivi input { min-width: 0; }
/* Sul computer: fascia verde più bassa e fotografia appoggiata sotto di essa. */
@media (min-width: 761px) {
.fm-fascia img {
height: clamp(70px, 6.6vw, 96px);
object-fit: cover; object-position: center;
}
.fm-hero { align-items: start; padding-top: 0; }
.fm-hero-foto { align-self: start; }
.fm-hero .fm-container { padding-top: clamp(20px, 4vw, 64px); }
}
/* ==========================================================
Audio del video in cima alla home
Il video parte muto perché nessun telefono o computer fa partire
da solo un video che suona: il pulsante accende la voce con un tocco.
========================================================== */
.fm-video-audio {
position: absolute; right: 18px; bottom: 18px; z-index: 5;
display: inline-flex; align-items: center; gap: 8px;
border: 0; cursor: pointer; padding: 10px 16px; border-radius: 30px;
background: rgba(0,0,0,.55); color: #fff; font-family: inherit;
font-size: 14px; font-weight: 700; letter-spacing: .04em;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: background .2s, transform .2s;
}
.fm-video-audio:hover { background: var(--fm-green); transform: scale(1.04); }
.fm-video-audio-icona { font-size: 17px; line-height: 1; }
.fm-video-audio[data-stato="acceso"] { background: var(--fm-green); }
@media (max-width: 760px) {
.fm-video-audio { right: 10px; bottom: 10px; padding: 8px 13px; font-size: 12.5px; gap: 6px; }
.fm-video-audio-icona { font-size: 15px; }
}
/* ==========================================================
Striscia delle notizie: scorrimento sicuro su tutti i telefoni
========================================================== */
/* Il nastro non deve mai essere ristretto dal riquadro che lo contiene:
se si restringe, i titoli si accavallano e sembra fermo. */
.fm-tic-nastro { flex: 0 0 auto; will-change: transform; }
/* Quando è il programma a farlo scorrere, l'animazione del foglio di stile
si spegne: il movimento è uno solo e va alla stessa velocità ovunque. */
.fm-tic-nastro.fm-tic-motore { animation: none !important; }
/* Chi ha chiesto al telefono di ridurre le animazioni non vede la striscia
ferma: scorre, solo più piano. */
@media (prefers-reduced-motion: reduce) {
.fm-tic-nastro { animation: fm-tic-scorri 240s linear infinite; }
}
/* ==========================================================
Cartellino "Aperto adesso"
Si aggiorna da solo con l'ora italiana, anche se la pagina
arriva da una copia salvata.
========================================================== */
.fm-aperto {
display: inline-flex; align-items: center; gap: 9px;
margin-top: 14px; padding: 7px 15px; border-radius: 30px;
font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.28);
}
.fm-aperto-punto { width: 9px; height: 9px; border-radius: 50%; background: #9be27a; flex: none; }
.fm-aperto.no .fm-aperto-punto { background: #ffb4a2; }
.fm-ct-stato .fm-aperto {
margin-top: 0; background: #eef7e6; color: var(--fm-green-dark);
border-color: #cfe7bc;
}
.fm-ct-stato .fm-aperto-punto { background: var(--fm-green); }
.fm-ct-stato .fm-aperto.no .fm-aperto-punto { background: #d98a72; }
/* ==========================================================
Riquadro dei video del sito
Serve a tenere il pulsante dell'audio appoggiato all'angolo
del video e non a quello della colonna che lo contiene.
========================================================== */
.fm-video { position: relative; display: block; line-height: 0; }
.fm-video video { display: block; width: 100%; height: auto; background: #000; }
.fm-video-largo { max-width: 560px; margin: 0 auto; }
/* Dentro un video con i comandi il pulsante sta un po' più in alto,
così non copre la barra di riproduzione. */
.fm-video .fm-video-audio { right: 12px; bottom: 52px; padding: 8px 14px; font-size: 13px; }
@media (max-width: 760px) {
.fm-video .fm-video-audio { right: 8px; bottom: 46px; padding: 7px 12px; font-size: 12px; }
}
/* ==========================================================
Elenchi dei servizi: tutti i titoli hanno lo stesso aspetto
Anche se una voce viene scritta con un titolo di livello
diverso, sulla pagina si vede come le altre: verde, in
corsivo, con le stesse distanze sopra e sotto.
========================================================== */
.fm-ts-content h1,
.fm-ts-content h2,
.fm-ts-content h4,
.fm-ts-content h5,
.fm-ts-content h6 {
color: var(--fm-green); font-style: italic; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; font-size: 21px; margin: 30px 0 12px; line-height: 1.25;
}
.fm-ts-content h1:first-child,
.fm-ts-content h2:first-child,
.fm-ts-content h4:first-child,
.fm-ts-content h5:first-child,
.fm-ts-content h6:first-child { margin-top: 0; }
.fm-ts-content h3 { line-height: 1.25; }
/* Una riga rimasta vuota non deve aprire un buco più grande delle altre. */
.fm-ts-content p:empty { display: none; }
/* ==========================================================
L'app del sito: strisciolina d'invito e guida per iPhone
========================================================== */
.fm-app-bar {
position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1500;
display: flex; align-items: center; gap: 12px;
background: #fff; border-radius: 16px; padding: 12px 14px;
box-shadow: 0 18px 44px rgba(0,0,0,.26); border: 1px solid #e4efdb;
transform: translateY(140%); transition: transform .28s ease;
}
.fm-app-bar.fm-app-dentro { transform: translateY(0); }
.fm-app-bar[hidden] { display: none; }
.fm-app-bar > img { width: 44px; height: 44px; flex: none; border-radius: 11px; }
.fm-app-bar-testo { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.fm-app-bar-testo strong { display: block; font-size: 14px; color: #2c2c2a; letter-spacing: .02em; }
.fm-app-bar-testo span { display: block; font-size: 12.5px; color: #6f6f68; overflow-wrap: anywhere; }
.fm-app-si {
flex: none; border: 0; cursor: pointer; background: var(--fm-green); color: #fff;
font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 24px;
}
.fm-app-si:hover { background: var(--fm-green-dark); }
.fm-app-no {
flex: none; border: 0; background: none; cursor: pointer; color: #9a9a94;
font-size: 24px; line-height: 1; padding: 0 4px;
}
@media (min-width: 761px) {
.fm-app-bar { left: auto; right: 20px; bottom: 20px; max-width: 430px; }
}
@media (max-width: 420px) {
.fm-app-bar { gap: 9px; padding: 10px 11px; }
.fm-app-bar > img { width: 38px; height: 38px; }
.fm-app-si { padding: 9px 14px; font-size: 12.5px; }
}
.fm-app-guida {
position: fixed; inset: 0; z-index: 2100; background: rgba(18,30,14,.66);
display: flex; align-items: flex-start; justify-content: center;
padding: 16px 16px calc(96px + env(safe-area-inset-bottom));
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.fm-app-guida[hidden] { display: none; }
.fm-app-guida-dentro {
position: relative; background: #fff; border-radius: 22px; padding: 22px 20px 20px;
max-width: 420px; width: 100%; box-shadow: 0 26px 60px rgba(0,0,0,.34);
margin: auto; /* centrato nello spazio che resta sopra la freccia */
}
.fm-app-guida-x {
position: absolute; top: 8px; right: 10px; border: 0; background: none; cursor: pointer;
font-size: 30px; line-height: 1; color: #a8a8a2; width: 44px; height: 44px;
}
.fm-app-guida-testa { display: flex; align-items: center; gap: 13px; padding-right: 40px; }
.fm-app-guida-testa img { width: 54px; height: 54px; border-radius: 13px; flex: none; box-shadow: 0 6px 16px rgba(0,0,0,.14); }
.fm-app-guida-testa strong { font-size: 18px; line-height: 1.25; color: #2c2c2a; }
.fm-app-guida-via { margin: 14px 0 4px; font-size: 14.5px; line-height: 1.55; color: #55554f; }
/* I tre passaggi, con il numero nel tondo verde */
.fm-app-passi { list-style: none; margin: 0; padding: 0; }
.fm-app-passi li {
display: flex; align-items: flex-start; gap: 14px;
padding: 15px 0; border-top: 1px solid #eceeea;
}
.fm-app-passi li:first-child { border-top: 0; }
.fm-app-numero {
flex: none; width: 34px; height: 34px; border-radius: 50%;
background: var(--fm-green); color: #fff; font-weight: 800; font-size: 16px;
display: flex; align-items: center; justify-content: center;
}
.fm-app-passo { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.fm-app-passo > strong { font-size: 15.5px; color: #2c2c2a; line-height: 1.3; }
/* Il tasto Condividi si può toccare: apre il menù dell'iPhone. */
.fm-app-tasto {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
border: 1.5px solid #e0e2dd; background: #fff; border-radius: 12px; padding: 5px 12px 5px 5px;
font-family: inherit;
}
.fm-app-tasto svg { display: block; }
.fm-app-tasto-testo { font-size: 13.5px; font-weight: 700; color: var(--fm-green-dark); }
.fm-app-tasto:hover { border-color: var(--fm-green); }
.fm-app-voce {
display: inline-flex; align-items: center; gap: 7px; text-align: left;
background: #fbf3a6; color: #2c2c2a; font-weight: 700; font-size: 14.5px;
padding: 6px 11px; border-radius: 7px; line-height: 1.35; overflow-wrap: anywhere;
border: 1.5px solid #f0e58a;
}
.fm-app-avviso { color: var(--fm-green-dark); font-weight: 600; }
.fm-app-battito { animation: fm-app-battito 1.1s ease-in-out 2; }
@keyframes fm-app-battito {
0%, 100% { box-shadow: 0 0 0 0 rgba(90,168,50,0); }
50% { box-shadow: 0 0 0 7px rgba(90,168,50,.30); }
}
.fm-app-dove { font-size: 13.5px; color: #86867e; line-height: 1.4; }
.fm-app-guida-fine {
margin: 14px 0 0; padding: 13px 15px; border-left: 4px solid var(--fm-green);
background: #eef7e6; border-radius: 0 10px 10px 0;
font-size: 14px; line-height: 1.55; color: #33622a;
}
.fm-app-guida-fine strong { font-weight: 800; }
/* La freccetta che balla verso il tasto Condividi di Safari */
.fm-app-punta {
position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: #fff; pointer-events: none; z-index: 2101;
text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.fm-app-punta-testo { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.fm-app-punta-freccia { display: block; animation: fm-app-salta 1.25s ease-in-out infinite; }
.fm-app-punta-freccia svg { display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
@keyframes fm-app-salta {
0% { transform: translateY(-9px); opacity: .55; }
50% { transform: translateY(6px); opacity: 1; }
100% { transform: translateY(-9px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
.fm-app-punta-freccia { animation-duration: 2.6s; }
}
/* Toccando il disegno del tasto, la freccia si fa notare di più. */
.fm-app-punta-forte { color: #d7ff9e; }
.fm-app-punta-forte .fm-app-punta-testo { text-decoration: underline; }
.fm-app-punta-forte .fm-app-punta-freccia { animation-duration: .7s; }
.fm-app-punta-forte .fm-app-punta-freccia svg { filter: drop-shadow(0 0 10px rgba(215,255,158,.85)); }
/* Schermi piccoli: tutto più compatto, così la freccia resta sempre visibile
e il riquadro non le finisce sopra. */
@media (max-height: 760px) {
.fm-app-guida { padding: 10px 14px calc(74px + env(safe-area-inset-bottom)); }
.fm-app-guida-dentro { padding: 16px 15px 14px; border-radius: 18px; }
.fm-app-guida-testa img { width: 44px; height: 44px; }
.fm-app-guida-testa strong { font-size: 16px; }
.fm-app-guida-via { display: none; }
.fm-app-passi li { padding: 9px 0; gap: 11px; }
.fm-app-numero { width: 29px; height: 29px; font-size: 14.5px; }
.fm-app-passo { gap: 5px; }
.fm-app-passo > strong { font-size: 14.5px; }
.fm-app-voce { font-size: 13.5px; padding: 5px 9px; }
.fm-app-tasto { padding: 4px 10px 4px 4px; }
.fm-app-tasto svg { width: 28px; height: 28px; }
.fm-app-dove { font-size: 12.5px; }
.fm-app-guida-fine { margin-top: 10px; padding: 10px 12px; font-size: 13px; }
.fm-app-punta-testo { font-size: 12.5px; }
.fm-app-punta-freccia svg { width: 24px; height: 34px; }
}
/* Con l'app aperta a tutto schermo non si invita a installarla di nuovo. */
@media (display-mode: standalone) {
.fm-app-bar { display: none !important; }
}
/* ==========================================================
Dentro l'app: la freccia per tornare indietro
Sta attaccata sotto il marchio, dentro la testata: non
occupa una fascia sua e resta ferma in alto come il menù.
Sul sito normale non c'è: il browser ha già i suoi tasti.
========================================================== */
.fm-app-indietro {
display: none; align-items: center; gap: 5px;
margin: 0; padding: 7px var(--fm-pad) 8px;
border: 0; background: none; cursor: pointer; font-family: inherit;
color: var(--fm-green-dark); font-size: 14.5px; font-weight: 700;
line-height: 1; width: 100%; justify-content: flex-start;
}
body.fm-in-app .fm-app-indietro:not([hidden]) { display: flex; }
.fm-app-indietro[hidden] { display: none !important; }
.fm-app-indietro svg { display: block; }
.fm-app-indietro:active { color: var(--fm-green); }
/* Sul telefono le frasi entrano da più vicino: niente testo che parte fuori
schermo. Vale SOLO se il telefono non ha chiesto meno animazioni: altrimenti
lo spostamento resterebbe lì per sempre e i testi verrebbero tagliati. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
.fm-reveal { transform: translateX(-22px); }
.fm-reveal-right { transform: translateX(22px); }
.fm-service-tile.fm-reveal { transform: translateX(-100vw); }
}
/* Rete di sicurezza: con "Riduci movimento" acceso nelle impostazioni del
telefono, niente si sposta e tutto resta al suo posto, ben visibile. */
@media (prefers-reduced-motion: reduce) {
.fm-reveal, .fm-reveal-right,
.fm-reveal.fm-visible, .fm-reveal-right.fm-visible,
.fm-service-tile.fm-reveal, .fm-service-tile.fm-reveal.fm-visible {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
}
/* ==========================================================
Niente rettangolini o spazi vuoti in pagina
Un titolo o un capoverso rimasto senza parole non deve
lasciare segni: né la banda verde, né un buco fra le righe.
========================================================== */
.fm-main h1:empty, .fm-main h2:empty, .fm-main h3:empty,
.fm-main h4:empty, .fm-main p:empty { display: none; }
.fm-hl:empty { display: none; background-image: none; }
/* Un titolo che contiene solo spazi: stessa cosa. */
.fm-main h2 > .fm-hl:only-child:empty { display: none; }
/* ==========================================================
Dentro l'app: si tira giù la pagina per ricaricarla
Il cerchietto segue il dito e, quando è abbastanza in
basso, diventa verde: lasciando, la pagina si ricarica.
========================================================== */
.fm-tira {
position: fixed; top: calc(6px + env(safe-area-inset-top)); left: 50%;
transform: translate(-50%, 0); opacity: 0; z-index: 1350; pointer-events: none;
will-change: transform, opacity;
}
.fm-tira-torna { transition: transform .25s ease, opacity .25s ease; }
.fm-tira-cerchio {
display: block; width: 34px; height: 34px; border-radius: 50%;
background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22);
border: 3px solid #d6e6c9; border-top-color: var(--fm-green);
}
.fm-tira-pronto .fm-tira-cerchio { border-color: var(--fm-green); border-top-color: #fff; }
.fm-tira-gira .fm-tira-cerchio { animation: fm-tira-giro .7s linear infinite; }
@keyframes fm-tira-giro { to { transform: rotate(360deg); } }
/* ==========================================================
Moduli sul telefono: niente campi che escono dallo schermo
Due cose li facevano sbordare, la seconda più della prima.
1) Il campo del giorno ("gg/mm/aaaa") su iPhone ha una sua
larghezza minima e non si restringe: va detto a mano.
2) Se un campo ha caratteri più piccoli di 16 pixel, iPhone
ingrandisce da solo la pagina appena lo tocchi — e la
pagina ingrandita esce dallo schermo. Con 16 pixel non
lo fa più.
========================================================== */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
-webkit-appearance: none; appearance: none;
min-width: 0; max-width: 100%; width: 100%;
min-height: 46px; line-height: 1.2;
}
/* I campi dentro le griglie devono poter rimpicciolire. */
.fm-pr-campi > *, .fm-form-grid > *, .fm-ct-form > * { min-width: 0; }
.fm-pr-eti { min-width: 0; }
@media (max-width: 760px) {
/* 16 pixel esatti: è la misura sotto la quale iPhone ingrandisce da solo. */
.fm-pr-campi input, .fm-pr-campi select, .fm-pr-scelta select,
.fm-pr form textarea, .fm-modulo-wa form textarea,
.fm-form input, .fm-form select, .fm-form textarea,
.fm-ai-scrivi input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"],
select, textarea {
font-size: 16px;
}
/* Un campo per riga: sul telefono ci sta meglio e non stringe le date. */
.fm-pr-campi, .fm-modulo-wa .fm-pr-campi, .fm-form-grid { grid-template-columns: 1fr; }
}
/* ==========================================================
NEGOZIO ONLINE (WooCommerce)
==========================================================
Il negozio deve sembrare la stessa casa del resto del sito:
stesso verde, stesso carattere, stessa intestazione. Qui si
riveste quello che WooCommerce stampa di suo, senza toccare
nessun file del plugin — così i suoi aggiornamenti non
rompono niente.
========================================================== */
/* ---------- Carrello in testa al sito ---------- */
.fm-neg-carrello {
position: relative; margin-left: auto;
display: flex; align-items: center; justify-content: center;
width: 46px; height: 46px; flex: none;
color: var(--fm-green); border-radius: 50%;
border: 2px solid var(--fm-green-light);
transition: background .2s, color .2s, border-color .2s;
}
.fm-neg-carrello:hover { background: var(--fm-green); border-color: var(--fm-green); color: #fff; }
.fm-neg-carrello svg { width: 23px; height: 23px; display: block; }
.fm-neg-carrello-n {
position: absolute; top: -3px; right: -3px;
min-width: 20px; height: 20px; padding: 0 5px;
border-radius: 10px; background: var(--fm-gray); color: #fff;
font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.fm-neg-carrello.pieno .fm-neg-carrello-n { background: #d9482b; }
/* ---------- Cornice delle pagine del negozio ---------- */
.fm-neg-head { padding: 54px 0 44px; }
.fm-neg-head .fm-script { margin: 6px 0 0; }
.fm-neg { padding: 34px 0 60px; }
.fm-neg-corpo { min-width: 0; }
.fm-neg-briciole { font-size: 13px; color: var(--fm-gray); margin: 0 0 18px; }
.fm-neg-briciole a { color: var(--fm-green); }
.fm-neg-briciole .sep { margin: 0 8px; opacity: .6; }
/* ---------- Avviso sui farmaci con ricetta ---------- */
.fm-neg-avviso {
display: flex; gap: 14px; align-items: flex-start;
background: var(--fm-green-light); border-left: 5px solid var(--fm-green);
border-radius: var(--fm-radius); padding: 15px 18px; margin: 0 0 26px;
}
.fm-neg-avviso-segno { font-size: 26px; line-height: 1; color: var(--fm-green); font-weight: 700; flex: none; }
.fm-neg-avviso p { margin: 0; font-size: 14px; line-height: 1.65; color: #444; }
.fm-neg-avviso strong { color: var(--fm-dark); }
/* ---------- Griglia dei prodotti ---------- */
.woocommerce ul.products {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px; margin: 0 0 34px; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
position: relative;
width: auto; margin: 0; padding: 0; float: none; min-width: 0;
background: #fff; border: 1px solid #ececec; border-radius: var(--fm-radius);
overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow .25s, transform .25s, border-color .25s;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 16px 36px rgba(0,0,0,.10); transform: translateY(-4px);
border-color: var(--fm-green-light);
}
.woocommerce ul.products li.product a img {
width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
background: #fafafa; margin: 0; padding: 14px; display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 15px; font-weight: 700; color: var(--fm-dark);
text-transform: none; letter-spacing: 0; line-height: 1.4;
padding: 14px 16px 0; margin: 0;
}
.woocommerce ul.products li.product .price {
display: block; padding: 8px 16px 0; margin: 0 0 auto;
color: var(--fm-green); font-size: 19px; font-weight: 800;
}
.woocommerce ul.products li.product .price del { color: var(--fm-gray); font-size: 15px; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button {
margin: 14px 16px 16px; text-align: center;
}
.woocommerce span.onsale {
position: absolute; align-self: flex-start; z-index: 2;
background: var(--fm-green); color: #fff; border-radius: 20px;
min-width: auto; min-height: auto; line-height: 1; padding: 7px 14px;
font-size: 12px; font-weight: 800; letter-spacing: .04em;
top: 12px; left: 12px; right: auto; margin: 0;
}
/* ---------- Bottoni del negozio ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit {
background: var(--fm-green); color: #fff;
font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 14px;
letter-spacing: .03em; text-transform: uppercase;
border: 0; border-radius: 30px; padding: 12px 24px; line-height: 1.2;
transition: background .2s, box-shadow .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
background: var(--fm-green-dark); color: #fff;
box-shadow: 0 8px 20px rgba(81,173,50,.28);
}
.woocommerce a.button.added::after { display: none; }
.woocommerce .added_to_cart {
display: block; text-align: center; margin: 0 16px 14px;
font-size: 13px; font-weight: 700; color: var(--fm-green-dark);
}
/* ---------- Menu di scelta dell'ordinamento ---------- */
.woocommerce .woocommerce-ordering { margin: 0 0 22px; }
.woocommerce .woocommerce-ordering select {
font-family: 'Raleway', sans-serif; font-size: 14px;
padding: 10px 14px; border: 1px solid #ddd; border-radius: 26px;
background: #fff; color: #444; max-width: 100%;
}
/* ---------- Scheda del prodotto ---------- */
.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; }
.woocommerce div.product div.images { width: auto; float: none; margin: 0; min-width: 0; }
.woocommerce div.product div.summary { width: auto; float: none; margin: 0; min-width: 0; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product div.images img { border-radius: var(--fm-radius); background: #fafafa; }
.woocommerce div.product .product_title {
font-size: 30px; text-transform: none; letter-spacing: 0;
line-height: 1.25; margin: 0 0 12px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
color: var(--fm-green); font-size: 30px; font-weight: 800; margin: 0 0 16px;
}
.woocommerce div.product p.price del { color: var(--fm-gray); font-size: 21px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.woocommerce div.product .woocommerce-product-details__short-description { color: #666; line-height: 1.8; }
.woocommerce div.product form.cart { margin: 22px 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.woocommerce div.product form.cart div.quantity { margin: 0; }
.woocommerce .quantity .qty {
width: 78px; height: 46px; padding: 6px 8px; text-align: center;
border: 1px solid #ddd; border-radius: 26px;
font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 700;
}
.woocommerce div.product .product_meta { font-size: 13px; color: var(--fm-gray); border-top: 1px solid #eee; padding-top: 14px; }
.woocommerce div.product .product_meta a { color: var(--fm-green); }
.woocommerce div.product .stock.in-stock { color: var(--fm-green-dark); font-weight: 700; }
.woocommerce div.product .stock.out-of-stock { color: #c0392b; font-weight: 700; }
/* Linguette (descrizione, informazioni, recensioni) */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: #e6e6e6; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: #f6f6f6; border: 1px solid #e6e6e6; border-radius: 26px 26px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 14px;
text-transform: uppercase; letter-spacing: .03em; color: #666;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--fm-green); }
.woocommerce div.product .woocommerce-tabs h2 { font-size: 21px; }
/* Titoli delle fasce "Prodotti correlati" */
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
font-size: 22px; margin: 34px 0 20px;
}
/* ---------- Riquadro "Come lo ricevi" ---------- */
.fm-neg-modi {
background: var(--fm-green-light); border-radius: var(--fm-radius);
padding: 20px 22px; margin: 8px 0 0;
}
.fm-neg-modi h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--fm-green-dark); margin: 0 0 12px; }
.fm-neg-modi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fm-neg-modi li { display: grid; gap: 1px; }
.fm-neg-modo-t { font-weight: 700; color: var(--fm-dark); font-size: 14px; }
.fm-neg-modo-d { font-size: 13px; color: #666; line-height: 1.55; }
.fm-neg-modi-nota { margin: 14px 0 0; font-size: 13px; color: #666; }
/* ---------- Carrello ---------- */
.woocommerce table.shop_table {
width: 100%; border: 1px solid #ececec; border-radius: var(--fm-radius);
border-collapse: separate; overflow: hidden;
}
.woocommerce table.shop_table th {
font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 13px;
text-transform: uppercase; letter-spacing: .04em; color: var(--fm-dark);
background: #f7f7f7; padding: 14px 12px;
}
.woocommerce table.shop_table td { padding: 16px 12px; border-top: 1px solid #f0f0f0; }
.woocommerce table.shop_table img { width: 62px; border-radius: 8px; }
.woocommerce a.remove { color: #c0392b !important; font-weight: 700; }
.woocommerce a.remove:hover { background: #c0392b; color: #fff !important; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account h2 { font-size: 20px; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; font-size: 15px; }
/* ---------- Cassa e area cliente ---------- */
.woocommerce form .form-row { padding: 0 0 14px; margin: 0; }
.woocommerce form .form-row label { font-weight: 700; color: var(--fm-dark); font-size: 14px; margin-bottom: 5px; display: block; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
font-family: 'Raleway', sans-serif; font-size: 15px;
min-height: 46px; padding: 10px 14px; line-height: 1.4;
border: 1px solid #ddd; border-radius: 10px; background: #fff;
width: 100%; min-width: 0; max-width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: 2px solid var(--fm-green-light); border-color: var(--fm-green); }
.woocommerce-checkout #payment { background: #f7f7f7; border-radius: var(--fm-radius); }
.woocommerce-checkout #payment div.payment_box { background: var(--fm-green-light); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--fm-green-light); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid #e6e6e6; }
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
border-top-color: var(--fm-green); background: var(--fm-green-light);
border-radius: var(--fm-radius); color: #444;
}
.woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before { color: var(--fm-green); }
.woocommerce .woocommerce-error { border-top-color: #c0392b; border-radius: var(--fm-radius); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid #eee; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 11px 4px; font-weight: 700; color: #555; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: var(--fm-green); }
/* ---------- Numeri di pagina ---------- */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 8px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
min-width: 40px; height: 40px; line-height: 40px; padding: 0 12px;
border-radius: 22px; background: #f4f4f4; color: #555; font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--fm-green); color: #fff; }
/* ---------- Telefono ---------- */
@media (max-width: 980px) {
.woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 760px) {
.fm-neg-head { padding: 38px 0 30px; }
.fm-neg { padding: 24px 0 44px; }
.fm-neg-carrello { width: 40px; height: 40px; margin-left: auto; margin-right: 10px; }
.fm-neg-carrello svg { width: 20px; height: 20px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; padding: 11px 12px 0; }
.woocommerce ul.products li.product .price { font-size: 17px; padding: 6px 12px 0; }
.woocommerce ul.products li.product .button { margin: 11px 12px 12px; padding: 11px 14px; font-size: 13px; }
.woocommerce div.product .product_title { font-size: 23px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 25px; }
.fm-neg-avviso { padding: 13px 15px; gap: 11px; }
.fm-neg-avviso p { font-size: 13px; }
/* 16 pixel: sotto questa misura iPhone ingrandisce da solo e la cassa
esce dallo schermo. Vale per tutti i campi del negozio. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce .woocommerce-ordering select { font-size: 16px; }
.woocommerce table.shop_table img { width: 46px; }
}
/* Due prodotti per riga anche sul telefono: con un catalogo lungo,
una colonna sola vuol dire scorrere all'infinito. Sotto i 360 pixel
(telefoni molto piccoli) si passa a uno per riga. */
@media (max-width: 360px) {
.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* Rete di sicurezza per la tabella del carrello sul telefono: se per
qualsiasi motivo non si impila in righe, si può almeno scorrere di
lato invece di restare tagliata. */
@media (max-width: 760px) {
body.woocommerce-cart .fm-content .fm-container,
body.woocommerce-checkout .fm-content .fm-container { overflow-x: auto; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 11px 8px; font-size: 14px; }
}
/* Movimento ridotto: le schede non si sollevano, ma restano visibili. */
@media (prefers-reduced-motion: reduce) {
.woocommerce ul.products li.product { transition: none; }
.woocommerce ul.products li.product:hover { transform: none; }
}
/* ==========================================================
NEGOZIO — LA VETRINA (come da progetto)
==========================================================
Fascia delle promesse, ricerca, reparti, pagina iniziale,
filtri del reparto, scheda prodotto completa e barra in
basso dentro l'app.
========================================================== */
/* ---------- Fascia verde delle promesse ---------- */
.fm-neg-promesse { background: var(--fm-green); color: #fff; font-size: 13px; }
.fm-neg-promesse .fm-container { display: flex; align-items: center; gap: 26px; min-height: 38px; flex-wrap: wrap; }
.fm-neg-promessa { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: .01em; }
.fm-neg-promessa .segno { font-weight: 800; }
/* ---------- Barra di ricerca ---------- */
.fm-neg-cerca { background: #fff; border-bottom: 1px solid #eee; }
.fm-neg-cerca-riga { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; }
.fm-neg-cerca-form { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.fm-neg-lente { position: absolute; left: 16px; width: 19px; height: 19px; color: var(--fm-gray); pointer-events: none; }
.fm-neg-cerca-form input[type="search"] {
width: 100%; min-width: 0; height: 48px; padding: 0 108px 0 44px;
border: 1px solid #ddd; border-radius: 30px; background: #fafafa;
font-family: 'Raleway', sans-serif; font-size: 15px; color: #444;
-webkit-appearance: none; appearance: none;
}
.fm-neg-cerca-form input[type="search"]:focus { outline: none; border-color: var(--fm-green); background: #fff; }
.fm-neg-cerca-form button {
position: absolute; right: 5px; height: 38px; padding: 0 20px;
border: 0; border-radius: 26px; background: var(--fm-green); color: #fff;
font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 13px;
text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.fm-neg-cerca-form button:hover { background: var(--fm-green-dark); }
.fm-neg-cerca-azioni { display: flex; align-items: center; gap: 16px; flex: none; }
.fm-neg-azione { display: inline-flex; align-items: center; gap: 8px; color: #555; font-size: 13px; font-weight: 700; }
.fm-neg-azione svg { width: 22px; height: 22px; color: var(--fm-green); }
.fm-neg-azione:hover { color: var(--fm-green); }
/* ---------- Riga dei reparti ---------- */
.fm-neg-reparti { background: #fff; border-bottom: 1px solid #eee; }
.fm-neg-reparti-riga { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.fm-neg-reparti-riga::-webkit-scrollbar { display: none; }
.fm-neg-reparti-riga a {
white-space: nowrap; padding: 13px 14px; color: #555;
font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
border-bottom: 3px solid transparent;
}
.fm-neg-reparti-riga a:hover { color: var(--fm-green); }
.fm-neg-reparti-riga a.qui { color: var(--fm-green); border-bottom-color: var(--fm-green); }
.fm-neg-marche-link { color: var(--fm-green) !important; }
/* ---------- Riquadro grande della pagina iniziale ---------- */
.fm-neg-hero {
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 0; border-radius: var(--fm-radius); overflow: hidden;
background: linear-gradient(150deg, var(--fm-green) 0%, var(--fm-green-dark) 100%);
margin: 0 0 26px; color: #fff;
}
.fm-neg-hero-testo { padding: 40px 40px 40px 38px; align-self: center; }
.fm-neg-hero-testo h2 { color: #fff; font-size: 30px; margin: 0 0 12px; text-transform: none; letter-spacing: .01em; }
.fm-neg-hero-testo p { margin: 0 0 22px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.94); max-width: 46ch; }
.fm-neg-hero-btn {
display: inline-block; background: #fff; color: var(--fm-green-dark);
font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
padding: 13px 28px; border-radius: 30px;
}
.fm-neg-hero-btn:hover { background: var(--fm-green-light); color: var(--fm-green-dark); }
.fm-neg-hero-foto { position: relative; min-height: 230px; background: rgba(255,255,255,.10); }
.fm-neg-hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Le quattro caselle ---------- */
.fm-neg-caselle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 34px; }
.fm-neg-casella {
background: #f6f6f6; border-radius: var(--fm-radius); padding: 16px 18px;
display: grid; gap: 3px; border: 1px solid #ededed;
}
.fm-neg-casella strong { color: var(--fm-dark); font-size: 14.5px; }
.fm-neg-casella span { color: #777; font-size: 13px; line-height: 1.5; }
/* ---------- Fasce di prodotti (offerte, novità) ---------- */
.fm-neg-fascia { margin: 0 0 34px; }
.fm-neg-fascia-tit { font-size: 22px; margin: 0 0 18px; }
.fm-neg-vuoto { color: var(--fm-gray); font-size: 14px; }
.fm-neg-fascia-lista { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
/* ---------- Reparto a due colonne ---------- */
.fm-neg-griglia { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 34px; align-items: start; }
.fm-neg-filtri { min-width: 0; }
.fm-neg-filtri-det { border: 1px solid #ececec; border-radius: var(--fm-radius); background: #fff; padding: 6px 18px 18px; }
.fm-neg-filtri-det > summary { display: none; }
.fm-neg-filtri-testa { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0 6px; }
.fm-neg-filtri-testa h2 { font-size: 15px; margin: 0; letter-spacing: .06em; }
.fm-neg-azzera { font-size: 12.5px; font-weight: 700; }
.fm-neg-filtro { border-top: 1px solid #f0f0f0; padding: 14px 0 4px; }
.fm-neg-filtro h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #666; margin: 0 0 9px; }
.fm-neg-filtro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.fm-neg-filtro a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #555; }
.fm-neg-filtro a:hover { color: var(--fm-green); }
.fm-neg-filtro .casella {
width: 16px; height: 16px; flex: none; border: 1.5px solid #ccc; border-radius: 4px;
background: #fff; transition: background .15s, border-color .15s;
}
.fm-neg-filtro a.attivo { color: var(--fm-green-dark); font-weight: 700; }
.fm-neg-filtro a.attivo .casella { background: var(--fm-green); border-color: var(--fm-green); }
.fm-neg-filtro .quanti { color: #aaa; font-size: 12px; margin-left: auto; }
.fm-neg-filtri-aiuto { border-top: 1px solid #f0f0f0; margin-top: 14px; padding-top: 14px; font-size: 13px; }
.fm-neg-filtri-aiuto p { margin: 0 0 4px; color: #777; }
.fm-neg-filtri-aiuto a { font-weight: 700; }
/* ---------- Targhette sulle schede del catalogo ---------- */
.fm-neg-card-marca {
display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
text-transform: uppercase; color: var(--fm-gray); padding: 14px 16px 0;
}
.woocommerce ul.products li.product .fm-neg-card-marca + .woocommerce-loop-product__title { padding-top: 3px; }
.fm-neg-disp { display: block; padding: 6px 16px 0; font-size: 12.5px; font-weight: 700; }
.fm-neg-disp.pronta { color: var(--fm-green-dark); }
.fm-neg-disp.attesa { color: #b07d16; }
/* ---------- Scheda prodotto: le parti nuove ---------- */
.fm-neg-marca { font-size: 12.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--fm-gray); margin: 0 0 4px; }
.fm-neg-codici { font-size: 12.5px; color: #aaa; margin: 0 0 14px; }
.fm-neg-sotto-prezzo { font-size: 13px; color: #888; margin: -10px 0 6px; }
.fm-neg-punti {
display: inline-block; background: var(--fm-green-light); color: var(--fm-green-dark);
font-size: 13px; font-weight: 700; padding: 5px 13px; border-radius: 20px; margin: 0 0 14px;
}
.fm-neg-modi-scelta { margin: 4px 0 20px; }
.fm-neg-modi-scelta h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: #666; margin: 0 0 10px; }
.fm-neg-modo {
display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
border: 1.5px solid #e6e6e6; border-radius: var(--fm-radius);
padding: 13px 16px; margin: 0 0 9px; background: #fff;
transition: border-color .15s, background .15s;
}
.fm-neg-modo:hover { border-color: var(--fm-green); }
.fm-neg-modo input[type="radio"] { margin: 3px 0 0; accent-color: #51ad32; width: 17px; height: 17px; flex: none; }
.fm-neg-modo-corpo { display: grid; gap: 2px; min-width: 0; }
.fm-neg-modo:has(input:checked) { border-color: var(--fm-green); background: var(--fm-green-light); }
.fm-neg-modi-nota { font-size: 12.5px; color: #999; margin: 2px 0 0; }
.fm-neg-chiedi {
display: inline-flex; align-items: center; gap: 10px;
border: 1.5px solid var(--fm-green); color: var(--fm-green-dark);
border-radius: 30px; padding: 11px 22px; font-weight: 700; font-size: 14px;
margin: 4px 0 18px;
}
.fm-neg-chiedi:hover { background: var(--fm-green); color: #fff; }
.fm-neg-chiedi svg { width: 20px; height: 20px; }
/* ---------- Barra in basso, solo dentro l'app ---------- */
.fm-neg-barra-app { display: none; }
body.fm-in-app .fm-neg-barra-app {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
background: #fff; border-top: 1px solid #e8e8e8;
padding-bottom: env(safe-area-inset-bottom);
box-shadow: 0 -3px 16px rgba(0,0,0,.07);
}
body.fm-in-app .fm-neg-barra-app a {
flex: 1 1 0; min-width: 0; position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 9px 4px 8px; color: #777; font-size: 11px; font-weight: 700;
}
body.fm-in-app .fm-neg-barra-app a .i { font-size: 19px; line-height: 1; }
body.fm-in-app .fm-neg-barra-app a:hover { color: var(--fm-green); }
body.fm-in-app .fm-neg-barra-app a em {
position: absolute; top: 4px; left: 50%; margin-left: 6px;
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: #d9482b; color: #fff; font-size: 10.5px; font-style: normal;
font-weight: 800; line-height: 17px; text-align: center;
}
body.fm-in-app .fm-footer { padding-bottom: 66px; }
body.fm-in-app .fm-float { bottom: calc(74px + env(safe-area-inset-bottom)); }
/* ---------- Adattamenti su schermi stretti ---------- */
@media (max-width: 1100px) {
.fm-neg-fascia-lista { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
.fm-neg-griglia { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.fm-neg-filtri-det { padding: 0 16px 14px; }
.fm-neg-filtri-det > summary {
display: flex; align-items: center; justify-content: space-between;
list-style: none; cursor: pointer; padding: 14px 0;
font-weight: 800; font-size: 14px; color: var(--fm-dark);
text-transform: uppercase; letter-spacing: .04em;
}
.fm-neg-filtri-det > summary::-webkit-details-marker { display: none; }
.fm-neg-filtri-det > summary::after { content: '⌄'; font-size: 20px; line-height: 1; color: var(--fm-green); }
.fm-neg-filtri-det[open] > summary::after { content: '⌃'; }
.fm-neg-filtri-testa { display: none; }
.fm-neg-hero { grid-template-columns: minmax(0, 1fr); }
.fm-neg-hero-foto { min-height: 190px; order: -1; }
.fm-neg-hero-testo { padding: 28px 24px; }
.fm-neg-caselle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-neg-fascia-lista { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 760px) {
.fm-neg-promesse { font-size: 12px; }
.fm-neg-promesse .fm-container { gap: 14px; min-height: 34px; justify-content: center; text-align: center; }
.fm-neg-promessa-extra { display: none; }
.fm-neg-cerca-riga { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
/* 16 pixel: sotto questa misura iPhone ingrandisce da solo la pagina. */
.fm-neg-cerca-form input[type="search"] { font-size: 16px; height: 44px; padding-right: 16px; }
.fm-neg-cerca-form button { display: none; }
.fm-neg-azione span { display: none; }
.fm-neg-reparti-riga a { padding: 11px 11px; font-size: 13px; }
.fm-neg-hero-testo h2 { font-size: 23px; }
.fm-neg-hero-testo p { font-size: 15px; }
.fm-neg-fascia-tit { font-size: 19px; }
.fm-neg-modo { padding: 12px 14px; }
}
@media (max-width: 420px) {
.fm-neg-caselle { grid-template-columns: minmax(0, 1fr); }
}
/* Ripiego per i browser che non capiscono :has(): la classe la mette il
codice della pagina. Serve sui telefoni più vecchi. */
.fm-neg-modo.scelto { border-color: var(--fm-green); background: var(--fm-green-light); }
/* Etichette che servono solo a chi usa il lettore vocale: ci sono nel
codice ma non si devono vedere. Senza questa regola comparivano
scritte doppie sopra i campi. */
.screen-reader-text {
position: absolute !important; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.screen-reader-text:focus {
position: static !important; width: auto; height: auto;
margin: 0; clip: auto; clip-path: none;
}
/* La scelta di come ricevere il prodotto sta dentro il modulo del
carrello: deve occupare tutta la riga, altrimenti la casella della
quantità le finisce di fianco. */
.woocommerce div.product form.cart .fm-neg-modi-scelta { flex: 1 0 100%; width: 100%; margin-bottom: 4px; }
/* Le linguette restano una fila di etichette anche se il foglio di
stile di WooCommerce tarda a caricarsi. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
list-style: none; display: flex; flex-wrap: wrap; gap: 6px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li { float: none; margin: 0; padding: 0 18px; }
/* ==========================================================
Logo più grande in testa al sito
==========================================================
La barra cresce insieme al logo, così il verde del menu
resta allineato e non si creano strisce bianche.
========================================================== */
.fm-header-top-inner { height: 148px; }
.fm-logo img { max-height: 126px; }
@media (max-width: 1120px) {
.fm-header-top-inner { height: 128px; }
.fm-logo img { max-height: 106px; }
}
@media (max-width: 760px) {
.fm-header-top-inner { height: 106px; }
.fm-logo img { max-height: 88px; }
/* Col menu aperto il logo si fa piccolo, altrimenti mangia lo schermo. */
.fm-header.open .fm-logo img { max-height: 54px; }
}
@media (max-width: 420px) {
.fm-header-top-inner { height: 94px; }
.fm-logo img { max-height: 76px; }
}
/* Il logo tiene la sua misura e non si lascia schiacciare dal menu:
è il menu che stringe un po' le voci, non il marchio che rimpicciolisce. */
.fm-logo { flex: 0 0 auto; }
.fm-logo img { max-height: 100px; }
.fm-mainbar a { padding: 0 10px; font-size: 14px; }
@media (min-width: 1400px) {
.fm-logo img { max-height: 112px; }
}
@media (max-width: 1240px) {
.fm-logo img { max-height: 92px; }
.fm-mainbar a { padding: 0 8px; font-size: 13px; }
}
@media (max-width: 1120px) {
.fm-logo img { max-height: 106px; }
.fm-mainbar a { padding: 0 6px; font-size: 12px; }
}
/* Sul telefono il logo torna a misura di schermo (queste regole devono
restare in fondo, altrimenti vincono quelle dei monitor). */
@media (max-width: 760px) {
.fm-logo img { max-height: 88px; }
.fm-header.open .fm-logo img { max-height: 54px; }
}
@media (max-width: 420px) {
.fm-logo img { max-height: 76px; }
}
/* Un filo d'aria in più nella barra verde, così resta margine se un
giorno si aggiunge una voce al menu. */
.fm-mainbar { padding: 0 8px 0 4px; }
.fm-mainbar-social a { padding: 0 5px; }
/* ==========================================================
Logo grande: misure definitive
==========================================================
Il logo può crescere solo fin dove il menu ci sta senza
tagliarsi. Sugli schermi larghi la riga della testata si
allarga apposta per fargli spazio; le voci del menu
restano un filo più strette per lasciargliene ancora.
Ogni misura qui sotto è stata misurata sul browser, non
scelta a occhio.
========================================================== */
.fm-mainbar a { padding: 0 8px; font-size: 13px; }
.fm-header-top-inner { height: 112px; }
.fm-logo img { max-height: 88px; }
@media (min-width: 1241px) {
.fm-header-top-inner, .fm-subnav .fm-container { max-width: 1240px; }
.fm-header-top-inner { height: 126px; }
.fm-logo img { max-height: 100px; }
}
@media (min-width: 1381px) {
.fm-header-top-inner, .fm-subnav .fm-container { max-width: 1300px; }
.fm-header-top-inner { height: 136px; }
.fm-logo img { max-height: 110px; }
}
@media (min-width: 1500px) {
.fm-header-top-inner, .fm-subnav .fm-container { max-width: 1360px; }
.fm-header-top-inner { height: 146px; }
.fm-logo img { max-height: 120px; }
}
@media (max-width: 1120px) {
.fm-header-top-inner { height: 116px; }
.fm-logo img { max-height: 94px; }
.fm-mainbar a { padding: 0 6px; font-size: 12px; }
}
@media (max-width: 760px) {
.fm-header-top-inner { height: 106px; }
.fm-logo img { max-height: 88px; }
.fm-header.open .fm-logo img { max-height: 54px; }
}
@media (max-width: 420px) {
.fm-header-top-inner { height: 94px; }
.fm-logo img { max-height: 76px; }
}
/* Fra 981 e 1120 pixel (portatili piccoli) lo spazio è il più stretto
di tutti: il menu c'è ancora tutto ma la riga è corta. */
@media (max-width: 1120px) {
.fm-header-top-inner { height: 104px; }
.fm-logo img { max-height: 82px; }
}
/* ==========================================================
Sotto i 1120 pixel il menu passa al pulsante a tre righe
==========================================================
Fra 981 e 1120 pixel (portatili piccoli e tablet in
orizzontale) il menu esteso ci stava solo rimpicciolendo
le scritte a 11 pixel e schiacciando il logo a 58: una
soluzione peggiore del problema. Meglio il pulsante col
menu a scomparsa, come già succede sui telefoni.
Le regole del menu aperto sono ripetute qui perché prima
valevano solo sotto i 980 pixel.
========================================================== */
@media (max-width: 1120px) {
.fm-burger { display: block; }
.fm-mainbar, .fm-subnav { display: none; }
.fm-header-top-inner { height: 118px; }
.fm-logo img { max-height: 96px; }
.fm-header.open .fm-mainbar { display: block; position: static; height: auto; padding: 0; }
.fm-header.open .fm-mainbar ul { flex-direction: column; align-items: stretch; }
.fm-header.open .fm-mainbar li { flex: none; justify-content: flex-start; }
.fm-header.open .fm-mainbar li + li { border-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
.fm-header.open .fm-mainbar a { text-align: left; line-height: 1.4; padding: 13px 24px; display: block; font-size: 15px; }
.fm-header.open .fm-mainbar-social { border-left: 0; margin: 0; padding: 10px 24px; gap: 10px; }
.fm-header.open .fm-mainbar-social svg { width: 18px; height: 18px; }
.fm-header.open .fm-subnav { display: block; max-height: calc(100vh - 300px); overflow: auto; }
.fm-header.open .fm-subnav ul { flex-direction: column; }
.fm-header.open .fm-subnav li { flex: none; }
.fm-header.open .fm-subnav li + li { border-left: 0; border-top: 1px solid #eee; }
.fm-header.open .fm-subnav a { padding: 12px 24px; display: block; width: 100%; text-align: left; }
.fm-header.open .fm-header-top-inner { flex-wrap: wrap; height: auto; padding-bottom: 0; align-items: flex-start; }
.fm-header.open .fm-logo, .fm-header.open .fm-burger { margin-top: 16px; }
.fm-header.open .fm-mainbar { margin: 10px -22px 0; width: calc(100% + 44px); }
.fm-header.open .fm-header-top { border-bottom: 0; }
.fm-header.open .fm-logo img { max-height: 62px; }
}
@media (max-width: 760px) {
.fm-header-top-inner { height: 106px; }
.fm-logo img { max-height: 88px; }
.fm-header.open .fm-logo img { max-height: 54px; }
}
@media (max-width: 420px) {
.fm-header-top-inner { height: 94px; }
.fm-logo img { max-height: 76px; }
}
/* ==========================================================
Dentro l'app: fare posto alla barra in basso
==========================================================
La barra Home/Negozio/Carrello/Profilo sta fissa in fondo
allo schermo e copre tutto quello che prima stava lì.
Quando ho aggiunto la barra avevo alzato solo i pulsanti
tondi di destra: quello di sinistra, la finestra della
chat e la fascia dei cookie erano rimasti sotto, e non si
vedevano più.
========================================================== */
body.fm-in-app .fm-angolo { bottom: calc(74px + env(safe-area-inset-bottom)); }
body.fm-in-app .fm-ai-finestra { bottom: calc(122px + env(safe-area-inset-bottom)); }
body.fm-in-app .fm-ck-fascia { bottom: calc(74px + env(safe-area-inset-bottom)); }
body.fm-in-app .fm-app-guida { bottom: calc(76px + env(safe-area-inset-bottom)); }
body.fm-in-app .fm-main { padding-bottom: 8px; }
/* Il menu a scomparsa arrivava sotto la barra e le ultime voci
restavano nascoste: adesso si ferma sopra e si può scorrere. */
body.fm-in-app .fm-header.open .fm-subnav {
max-height: calc(100vh - 260px - 66px);
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
/* ==========================================================
Il pulsante del menu non deve mai sparire
==========================================================
Sul telefono il logo tiene la sua misura solo finché c'è
posto: se lo spazio finisce si stringe lui, invece di
spingere fuori dallo schermo il pulsante a tre righe.
Sul computer resta come prima, grande e intoccabile.
========================================================== */
@media (max-width: 1120px) {
.fm-logo { flex: 0 1 auto; min-width: 0; }
.fm-logo img { min-width: 0; }
.fm-burger { flex: 0 0 auto; }
.fm-neg-carrello { flex: 0 0 auto; }
}
/* Con il menu aperto dentro l'app: tutta la testata diventa un pannello
che si ferma sopra la barra e si scorre. Così l'ultima voce si
raggiunge sempre, qualunque sia l'altezza dello schermo. */
body.fm-in-app .fm-header.open {
max-height: calc(100vh - 66px - env(safe-area-inset-bottom));
overflow-y: auto; overflow-x: clip;
-webkit-overflow-scrolling: touch;
}
body.fm-in-app .fm-header.open .fm-subnav {
max-height: none; padding-bottom: 10px;
}
/* La barra verde del menu esce a filo dei bordi: la misura deve essere
quella vera del margine laterale, che sul telefono è più stretta. */
.fm-header.open .fm-mainbar {
margin-left: calc(var(--fm-pad) * -1);
margin-right: calc(var(--fm-pad) * -1);
width: calc(100% + var(--fm-pad) * 2);
}
/* ==========================================================
Prodotti ancora senza fotografia
==========================================================
Dove manca la foto WooCommerce mette un segnaposto, e noi
ci mettiamo il marchio della farmacia. Il marchio è un PNG
con lo sfondo trasparente, quindi non deve stare dentro un
riquadro grigio: quello faceva sembrare la foto un errore.
Appare in chiaro, come una filigrana, così si capisce che
la fotografia arriverà.
========================================================== */
.woocommerce img.woocommerce-placeholder,
.woocommerce ul.products li.product a img.woocommerce-placeholder,
.woocommerce div.product div.images img.woocommerce-placeholder {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0;
object-fit: contain;
opacity: .42;
padding: 14%;
mix-blend-mode: multiply;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper:has(img.woocommerce-placeholder),
.woocommerce div.product div.images figure:has(img.woocommerce-placeholder) {
background: transparent; border: 0; box-shadow: none;
}
/* Il riquadro chiaro sotto le foto vere resta, ma solo per quelle. */
.woocommerce ul.products li.product a img { background: #fbfbfb; }
.woocommerce ul.products li.product a img.woocommerce-placeholder { background: transparent !important; }
/* Settimana di turno: il cartellino "Aperto adesso" si distingue,
perché quell'apertura non è quella solita. */
.fm-aperto.guardia { background: rgba(81,173,50,.20); border-color: rgba(81,173,50,.55); }
.fm-aperto.guardia .fm-aperto-punto { box-shadow: 0 0 0 4px rgba(81,173,50,.25); }
/* ==========================================================
Avviso del turno di guardia
==========================================================
Nei dieci giorni prima basta la riga sotto gli orari; mentre
il turno è in corso compare anche la fascia in cima, perché
è l'informazione più utile che il sito possa dare in quel
momento. Dopo, spariscono da sole.
========================================================== */
.fm-guardia-fascia {
background: linear-gradient(100deg, var(--fm-green-dark) 0%, var(--fm-green) 100%);
color: #fff; font-size: 14px;
}
.fm-guardia-fascia .fm-container {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding-top: 11px; padding-bottom: 11px;
}
.fm-guardia-fascia strong { font-size: 14px; letter-spacing: .02em; white-space: nowrap; }
.fm-guardia-fascia span { flex: 1 1 260px; min-width: 0; line-height: 1.5; }
.fm-guardia-fascia a {
color: var(--fm-green-dark); background: #fff; font-weight: 800;
padding: 7px 18px; border-radius: 24px; white-space: nowrap; flex: none;
}
.fm-guardia-fascia a:hover { background: var(--fm-green-light); color: var(--fm-green-dark); }
.fm-guardia-nota {
margin: 10px 0 0; font-size: 13px; line-height: 1.55;
color: #dcdcdc; border-left: 3px solid var(--fm-green); padding-left: 10px;
}
.fm-guardia-nota.adesso { color: #fff; font-weight: 600; }
@media (max-width: 760px) {
.fm-guardia-fascia { font-size: 13.5px; }
.fm-guardia-fascia .fm-container { gap: 9px; padding-top: 10px; padding-bottom: 10px; }
.fm-guardia-fascia a { width: 100%; text-align: center; }
}
/* Il carrello in testa: il disegno stava troppo in alto dentro il tondo
e il manico sfiorava il bordo. Ridisegnato più compatto, riempie meglio
il cerchio senza toccarne i bordi. */
.fm-neg-carrello svg { width: 26px; height: 26px; transform: translateY(1px); }
@media (max-width: 760px) {
.fm-neg-carrello svg { width: 24px; height: 24px; }
}
/* ==========================================================
Carrello e logo sulla stessa linea
==========================================================
Il logo è un'immagine "in linea": il browser le lascia sotto
lo spazio del rigo di testo, così il suo centro non coincide
con quello del carrello e i due sembrano sfalsati.
Basta trattarla come un blocco e tornano allineati.
========================================================== */
.fm-logo a { display: block; line-height: 0; }
.fm-logo img { display: block; }
.fm-neg-carrello { align-self: center; }
/* Il numerino non deve sporgere sopra il bordo del tondo, o in cima
allo schermo viene tagliato. */
/* Il numerino resta leggibile ma non deve mangiarsi il carrello:
più il disegno è grande, più il numerino deve stare al suo posto. */
.fm-neg-carrello-n { top: -1px; right: -1px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10.5px; padding: 0 4px; }
/* ==========================================================
Quanto spazio c'è fra il cerchio bianco in cima alla pagina
e l'inizio del testo.
Sta qui in fondo apposta: ogni pagina imposta il proprio
spazio più sopra (Cosmesi 54, Galenica 30, e così via), e
una regola scritta prima verrebbe ignorata. Qui in fondo
vale per tutte, e lo spazio è finalmente lo stesso ovunque.
Il conto: 56 pixel di bianco sotto al cerchio, che servono a
contenere l'ombra, più questi. In tutto poco più di 70, come
era prima che il cerchio venisse spostato.
========================================================== */
@media (max-width: 1023px) {
/* L'ombra è tarata sul cerchio piccolo di qui — 160 pixel invece dei 210
del computer — quindi stessa forma ma misura proporzionata. Misurata:
si spegne del tutto in 44 pixel invece che in 63. L'ombra resta intera,
è il vuoto che si accorcia.
Sta qui in fondo perché l'ombra grande è scritta più sopra: una regola
messa prima verrebbe ignorata. */
.fm-pf-badge { box-shadow: 0 14px 30px rgba(0,0,0,.30); }
.fm-pf-hero + * { padding-top: 8px; }
}
/* ==========================================================
Prenotazione dentro una pagina normale (Estetica, Analisi).
Usa lo stesso pannello grigio della pagina "Prenota un
appuntamento", ma qui non deve salire sopra la sezione
che ha davanti: quel rialzo serve solo in home, dove il
pannello si appoggia alla fotografia grande.
========================================================== */
.fm-pr-pagina { padding-top: 34px; }
.fm-pr-pagina.fm-pr:first-of-type { margin-top: 0; }
.fm-pr-tit-grande {
margin: 0 0 14px; color: var(--fm-green);
font-size: 32px; font-weight: 800; text-transform: uppercase;
}
.fm-pagina-estetica .fm-pr-disdetta,
.fm-pagina-analisi .fm-pr-disdetta { padding-bottom: 40px; }
@media (max-width: 760px) {
.fm-pr-tit-grande { font-size: 25px; }
.fm-pr-pagina { padding-top: 24px; }
}
/* ==========================================================
Pulsante "Installa l'app" nella barra verde.
Bianco su verde perché si veda subito, e con lo stesso
battito degli altri pulsanti del sito: respiro simmetrico
e alone continuo, senza scatti.
========================================================== */
.fm-app-pill {
display: inline-flex; align-items: center; gap: 7px;
flex: 0 0 auto; margin-left: 12px;
background: #fff; color: var(--fm-green-dark);
border: 0; border-radius: 40px; padding: 7px 15px;
font-family: inherit; font-size: 12.5px; font-weight: 800;
text-transform: uppercase; letter-spacing: .04em;
white-space: nowrap; cursor: pointer;
}
.fm-app-pill svg { width: 15px; height: 15px; flex: none; }
.fm-app-pill:hover { background: #eaffdc; }
@media (prefers-reduced-motion: no-preference) {
.fm-app-pill { animation: fm-alone-chiaro 2.4s linear infinite, fm-respiro 2.4s ease-in-out infinite; }
.fm-app-pill:hover { animation-play-state: paused; }
}
/* Dentro l'app installata il pulsante non ha più senso. */
body.fm-in-app .fm-app-pill,
.fm-app-pill[hidden] { display: none; }
/* Nel codice il pulsante sta per primo, perché sul telefono il menu
che si apre è una colonna e lì deve comparire in cima. Sul computer,
dove la barra è una riga, si rimette al suo posto: dopo le voci del
menu e prima delle iconcine dei social. */
.fm-app-pill { order: 1; }
.fm-mainbar-social { order: 2; }
@media (max-width: 1120px) {
/* Menu aperto: largo quanto le voci, ben staccato, e si vede subito. */
.fm-header.open .fm-app-pill {
display: flex; margin: 12px 18px 14px; justify-content: center;
/* Il pulsante è un