/* ============================================================================= Farmacia Ciacco — stile del sito (refresh 2026, design system Farmacia Ciacco v2) Foglio scritto a mano, caricato per ultimo dai layout. Ogni selettore ha davanti html.fc (la classe sul di Base.astro e HomeLayout.astro): gli altri fogli del sito hanno la stessa guardia sulle regole del tema scuro, quindi a parità di specificità vince questo foglio perché arriva dopo. Le regole nuove vanno scritte con lo stesso prefisso. Colori per ruolo (--tema-*): valori chiari in :root, scuri sotto prefers-color-scheme: dark. Regola: niente tinte verdi tenui sulla carta; su carta gli stati usano i toni carta. Riferimento: design system Farmacia Ciacco (Claude Design), guidelines/marchio.md. ============================================================================= */ /* ---- Caratteri: Nunito (titoli, cifre) + Nunito Sans (testi), OFL ---- */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/css/fonts/nunito-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("/css/fonts/nunito-latin-wght-italic.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/css/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("/css/fonts/nunito-sans-latin-wght-italic.woff2") format("woff2"); } /* ---- Token del refresh + token del sito riallineati ---- */ :root.fc { --fc-verde-50: #ebfbf7; --fc-verde-100: #d5f5ec; --fc-verde-200: #b0eadd; --fc-verde-300: #7fdec9; --fc-verde-400: #48cbb5; --fc-verde-500: #23b59f; --fc-verde-600: #128f80; --fc-verde-700: #0d746b; --fc-verde-800: #005b56; --fc-verde-900: #074544; --fc-verde-950: #052d2d; --fc-carta-50: #fcfaf4; --fc-carta-100: #f7f2e7; --fc-carta-200: #ede6d6; --fc-carta-300: #dfd5c0; --fc-carta-400: #c9bda1; --fc-carta-500: #a99d84; --fc-inchiostro-100: #ebf2f0; --fc-inchiostro-200: #d9e2e0; --fc-inchiostro-300: #c2cdcb; --fc-inchiostro-400: #a0aeac; --fc-inchiostro-500: #7a8a87; --fc-inchiostro-600: #5b6d6a; --fc-inchiostro-700: #435451; --fc-inchiostro-800: #2f3e3b; --fc-inchiostro-900: #1d2927; --fc-inchiostro-950: #0e1817; --fc-corallo-100: #ffe7de; --fc-corallo-400: #f98c6c; --fc-corallo-500: #ef5f3b; --fc-corallo-600: #d43f22; --fc-corallo-700: #b43220; --fc-sole-100: #fff4c7; --fc-sole-300: #fddf69; --fc-sole-400: #fbd32c; --fc-sole-500: #f8ca10; --fc-sole-700: #b7810f; --fc-viola-light: #8e60ba; --fc-viola-base: #7c4ea6; --fc-arancio-light: #cb4a10; --fc-arancio-base: #b13d04; --fc-lampone-light: #c94761; --fc-lampone-base: #b43350; --fc-indaco-light: #5b6fc9; --fc-indaco-base: #4b5db5; --fc-azzurro-light: #067dac; --fc-azzurro-base: #076a93; --fc-ambra-light: #a7660f; --fc-ambra-base: #915702; --fc-prato-light: #36852f; --fc-prato-base: #21731a; --fc-rosa-light: #b1577f; --fc-rosa-base: #9d466d; --fc-gradient-brand: linear-gradient(160deg, color-mix(in oklab, var(--fc-verde-600) 50%, var(--fc-verde-700)), var(--fc-verde-700)); --fc-gradient-deep: linear-gradient(160deg, var(--fc-verde-800), var(--fc-verde-900)); --fc-gradient-accent: linear-gradient(135deg, var(--fc-corallo-600), var(--fc-corallo-700)); --fc-font-display: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fc-font-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fc-tracking-label: 0.08em; --fc-radius-sm: 8px; --fc-radius-md: 16px; --fc-radius-lg: 24px; --fc-shadow-soft: 0 1px 2px rgba(14, 24, 23, 0.06), 0 8px 24px rgba(14, 24, 23, 0.08); --fc-shadow-lifted: 0 2px 4px rgba(14, 24, 23, 0.08), 0 18px 40px rgba(14, 24, 23, 0.14); /* token del sito */ --c-brand: var(--fc-verde-500); --c-brand-bright: var(--fc-verde-400); --c-brand-deep: var(--fc-verde-700); --c-brand-grad: var(--fc-verde-600); --c-accent-red: var(--fc-corallo-600); --c-black: var(--fc-inchiostro-950); --c-gray: var(--fc-inchiostro-800); --c-gray-light: var(--fc-inchiostro-300); --c-border-line: rgba(14, 24, 23, 0.1); --ff-ui: var(--fc-font-text); } /* ---- Ruoli di tema: chiaro ---- */ :root.fc { --tema-pagina: var(--fc-carta-50); --tema-superficie: #ffffff; --tema-pannello: var(--fc-carta-100); --tema-riquadro: var(--fc-carta-100); --tema-hover-carta: var(--fc-carta-200); --tema-bordo: var(--fc-carta-200); --tema-bordo-forte: var(--fc-carta-300); --tema-testo: var(--fc-inchiostro-900); --tema-testo-2: var(--fc-inchiostro-800); --tema-testo-muto: var(--fc-inchiostro-600); --tema-verde-testo: var(--fc-verde-700); --tema-verde-forte: var(--fc-verde-800); /* niente tinte verdi tenui: sulla carta calda il menta stona, i fondi morbidi restano toni carta e il verde compare solo pieno (600-800), nei testi, nelle icone e nei bordi dei giorni di turno */ --tema-tinta: var(--fc-carta-100); --tema-tinta-2: var(--fc-carta-200); --tema-bordo-accento: var(--fc-carta-300); --tema-bordo-turno: var(--fc-verde-600); --tema-fondo-turno: var(--fc-carta-100); /* i loghi dei marchi hanno bisogno di un fondo chiaro anche nel tema scuro */ --tema-tessera-logo: var(--fc-carta-50); --tema-tessera-logo-hover: #ffffff; --tema-sottolineatura: rgba(13, 116, 107, 0.35); --tema-chip: var(--fc-inchiostro-800); --tema-corallo-testo: var(--fc-corallo-700); --tema-corallo-bordo: rgba(180, 50, 32, 0.4); --tema-corallo-tinta: var(--fc-corallo-100); --tema-ombra: var(--fc-shadow-soft); --tema-ombra-su: var(--fc-shadow-lifted); --tema-ombra-riquadro: 0 1px 2px rgba(14, 24, 23, 0.08), 0 6px 16px rgba(14, 24, 23, 0.08); --tema-alone: var(--fc-carta-50); --tema-evento: var(--fc-corallo-600); /* token del sito legati ai ruoli */ --c-page: var(--tema-pagina); --page-bg: var(--tema-pagina); --page-surface: var(--tema-pagina); --c-surface: var(--tema-superficie); --surface: var(--tema-superficie); --panel: var(--tema-superficie); --c-surface-2: var(--tema-riquadro); --c-border-soft: var(--tema-bordo); --panel-border: var(--tema-bordo); --line: var(--tema-bordo); --text: var(--tema-testo); --text-main: var(--tema-testo); --c-ink-strong: var(--tema-testo); --c-ink: var(--tema-testo-2); --c-ink-muted: var(--tema-testo-muto); --muted: var(--tema-testo-muto); --shadow-sm: var(--tema-ombra); --shadow-md: var(--tema-ombra); --shadow-lg: var(--tema-ombra); --shadow-soft: var(--tema-ombra); --shadow-card: var(--tema-ombra); --shadow-tile-rest: var(--tema-ombra-riquadro); --shadow-tile-hover: var(--tema-ombra-su); color-scheme: light; } /* ---- Ruoli di tema: scuro (inchiostro profondo, testi freddi, verdi schiariti) ---- */ @media (prefers-color-scheme: dark) { :root.fc { --tema-pagina: #0e1817; --tema-superficie: #1d2927; --tema-pannello: #1d2927; --tema-riquadro: #2a3835; --tema-hover-carta: rgba(235, 242, 240, 0.08); --tema-bordo: rgba(235, 242, 240, 0.09); --tema-bordo-forte: rgba(235, 242, 240, 0.16); --tema-testo: #ebf2f0; --tema-testo-2: #d9e2e0; --tema-testo-muto: #a0aeac; --tema-verde-testo: #7fdec9; --tema-verde-forte: #b0eadd; --tema-tinta: rgba(35, 181, 159, 0.14); --tema-tinta-2: rgba(35, 181, 159, 0.22); --tema-bordo-accento: rgba(72, 203, 181, 0.35); --tema-bordo-turno: rgba(72, 203, 181, 0.55); --tema-fondo-turno: rgba(35, 181, 159, 0.22); --tema-tessera-logo: #dfe7e4; --tema-tessera-logo-hover: #ebf2f0; --tema-sottolineatura: rgba(127, 222, 201, 0.4); --tema-chip: #435451; --tema-corallo-testo: #f98c6c; --tema-corallo-bordo: rgba(249, 140, 108, 0.45); --tema-corallo-tinta: rgba(239, 95, 59, 0.14); --tema-ombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25); --tema-ombra-su: 0 2px 4px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.35); --tema-ombra-riquadro: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px rgba(0, 0, 0, 0.2); --tema-alone: #354541; --tema-evento: #f98c6c; color-scheme: dark; } } /* ---- Base ---- */ html.fc, html.fc body { background: var(--tema-pagina); } html.fc body { font-family: var(--fc-font-text); color: var(--tema-testo); font-feature-settings: "kern"; } html.fc h1, html.fc h2, html.fc h3, html.fc h4 { font-family: var(--fc-font-display); letter-spacing: -0.005em; text-wrap: balance; } html.fc :where(a, button, [role="button"], input, select, textarea):focus-visible { outline: 2px solid var(--tema-verde-testo); outline-offset: 2px; box-shadow: 0 0 0 2px var(--tema-pagina); } /* ---- Barra di navigazione: verde 800 piena, voce attiva a pillola carta ---- */ html.fc .topnav, html.fc .topnav:hover, html.fc .topnav:focus-within { background: var(--fc-verde-800); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(14, 24, 23, 0.1), 0 10px 26px rgba(14, 24, 23, 0.16); border-radius: 16px; } html.fc .topnav::before, html.fc .topnav::after, html.fc .topnav a.active::before, html.fc .topnav a.active::after, html.fc .topnav a[aria-current="page"]::before, html.fc .topnav a[aria-current="page"]::after { display: none !important; } /* logo 9 + 32 + 9 = 50px: la barra è alta 50 e logo, pillole e menu stanno al centro */ html.fc #logo { padding-top: 9px; padding-bottom: 9px; } html.fc #logo-pic { height: 32px !important; width: auto; } html.fc .topnav a { color: var(--fc-carta-50); font-family: var(--fc-font-display); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-shadow: none; } html.fc .topnav a:hover { color: #ffffff; text-shadow: none; } html.fc .topnav a:not(#logo):not(.icon) { margin: 8px 3px; padding: 4px 14px; line-height: 26px; border-radius: 999px; } html.fc .topnav a:not(#logo):not(.icon):hover, html.fc .topnav a:not(#logo):not(.icon):focus-visible { background: rgba(252, 250, 244, 0.14); box-shadow: none; } html.fc .topnav a.active, html.fc .topnav a[aria-current="page"], html.fc .topnav a[aria-current="page"]:hover { background: var(--fc-carta-50); color: var(--fc-verde-800); border: 0; box-shadow: none; text-shadow: none; } /* niente contorno di focus dopo un tocco o un clic: resta per la tastiera (:focus-visible) */ html.fc .topnav a:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Tra 801 e 900px le voci delle lingue più lunghe (tagalog, spagnolo) andrebbero a capo: pillole un po' più strette e testo a 13px. L'altezza resta 34px, quindi restano gli 8px di respiro. */ @media (min-width: 801px) and (max-width: 900px) { html.fc .topnav a:not(#logo):not(.icon) { margin-left: 2px; margin-right: 2px; padding-left: 10px; padding-right: 10px; font-size: 13px; letter-spacing: 0.05em; } } /* Su desktop la pillola della voce attiva respira uguale sopra, sotto e a destra: 8px (8 + 34 + 8 = 50, come il logo). Le voci stanno a destra in float: la prima dopo il logo è l'ultima a destra. */ @media (min-width: 801px) { html.fc .topnav #logo + a:not(.icon) { margin-right: 8px; } } @media (max-width: 800px) { html.fc .topnav.responsive a:not(#logo):not(.icon) { margin: 2px 8px; width: calc(100% - 16px); border-top: 0; padding: 10px; } html.fc .topnav.responsive a#logo { margin-bottom: 8px; /* 9 di padding + 8: sotto il logo, a menu aperto, lo stesso spazio di prima */ } } @supports (-webkit-touch-callout: none) { @media (hover: none) and (pointer: coarse) { html.fc .topnav { background: var(--fc-verde-800); -webkit-backdrop-filter: none; backdrop-filter: none; } } } /* ---- Piè di pagina: pannello carta, etichette maiuscole spaziate ---- */ html.fc .footer { background: var(--tema-pannello); border: 0; border-radius: 24px; box-shadow: none; color: var(--tema-testo-2); padding: 28px 0 22px; } html.fc .title-footer { font-family: var(--fc-font-display); font-size: 12.5px; font-weight: 900; letter-spacing: var(--fc-tracking-label); color: var(--tema-verde-forte); margin-bottom: 8px; } html.fc .footer-a, html.fc .footer-b { width: auto; margin-left: clamp(20px, 4.5vw, 50px); margin-right: clamp(20px, 4.5vw, 50px); } html.fc .footer-text, html.fc .link-footer { color: var(--tema-testo-2); font-size: 15px; font-variant-numeric: tabular-nums; } html.fc .footer-a .link-footer { text-decoration: underline; text-decoration-color: var(--tema-sottolineatura); text-underline-offset: 3px; } html.fc .footer-a .link-footer:hover { color: var(--tema-verde-forte); text-decoration-color: currentColor; } html.fc .footer-b { border-top-color: var(--tema-bordo); margin-top: 16px; padding-top: 16px; } /* Riga in fondo: tasti (cookie, notifiche) a sinistra, social a destra; su schermi stretti vanno a capo senza sovrapporsi (prima i tasti erano posizionati in assoluto sopra la riga dei social) */ html.fc .footer-b .footer-column-b.fc-cookie-managed-row { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 24px; min-height: 0; } html.fc .footer-b .fc-cookie-manage-wrap { position: static; transform: none; width: auto; margin: 0 auto 0 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; } html.fc .footer-social-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; } @media (max-width: 720px) { html.fc .footer-b .footer-column-b.fc-cookie-managed-row { justify-content: flex-start; } html.fc .footer-b .fc-cookie-manage-wrap { width: 100%; } } /* Icone Lucide (le stesse del design system) al posto del biscotto e della campana disegnati a mano */ html.fc .footer-b .fc-cookie-manage-btn::before { -webkit-mask-image: url("/immagini/icone/cookie.svg"); mask-image: url("/immagini/icone/cookie.svg"); } html.fc #fc-push-container .fc-push-bell-icon svg { display: none; } html.fc #fc-push-container .fc-push-bell-icon { background: currentColor; -webkit-mask: url("/immagini/icone/bell.svg") center / contain no-repeat; mask: url("/immagini/icone/bell.svg") center / contain no-repeat; } html.fc #fc-push-container .fc-push-widget--active .fc-push-bell-icon { -webkit-mask-image: url("/immagini/icone/bell-ring.svg"); mask-image: url("/immagini/icone/bell-ring.svg"); } html.fc #fc-push-container .fc-push-widget--denied .fc-push-bell-icon { -webkit-mask-image: url("/immagini/icone/bell-off.svg"); mask-image: url("/immagini/icone/bell-off.svg"); } /* notifiche bloccate: corallo del marchio invece del rosso generico */ html.fc .footer-b #fc-push-container .fc-push-widget--denied .fc-push-toggle { border-color: var(--tema-corallo-bordo); color: var(--tema-corallo-testo); } html.fc .footer-b #fc-push-container .fc-push-widget--denied .fc-push-toggle:hover { background: var(--tema-corallo-tinta); } html.fc .footer-b .link-footer, html.fc .footer-pill { background: var(--tema-superficie); border: 1px solid var(--tema-bordo); box-shadow: none; } html.fc .footer-pill { color: var(--tema-verde-forte); font-family: var(--fc-font-display); font-weight: 800; font-size: 13px; } html.fc .footer-b .link-footer::before { background: var(--tema-verde-testo); } html.fc .footer-b .link-footer:hover, html.fc .footer-b .link-footer:focus-visible, html.fc .footer-pill:hover, html.fc .footer-pill:focus-visible { /* su carta niente menta: lo stato attivo è un tono carta più scuro */ background: var(--tema-hover-carta); border-color: var(--tema-bordo-forte); box-shadow: none; transform: none; } /* Selettore della lingua (lo aggiunge i18n.js in fondo alla riga): a destra accanto ai social, come nel design system (SiteFooter); se la riga va a capo resta a destra. Qui si annullano la posizione assoluta e i colori menta che lo script gli dà nel suo