/* ============================================================ PharmaCare · FOGLIO DI STILE UNICO Tutto il CSS del sito vive qui: le pagine .php non ne hanno. Ordine del file, da non cambiare: 1 · TOKEN i valori, unica fonte di verita' 2 · COMPONENTI quello che vale su piu' di una pagina 3 · PAGINE quello che vale su una pagina sola, sotto la classe .p- che include/head.php mette sul Regola: se una regola serve a due pagine, sale nei componenti. Regole vincolanti: docs/REGOLE.md. Halyard (Typekit) e Remix Icon restano a parte in include/head.php: sono fogli di terze parti, non nostri. ============================================================ */ /* ############################################################ 1 · TOKEN ############################################################ */ /* ============================================================ PharmaCare · Design system Impronta · TOKENS Fase 2 (agosto 2026). Due livelli: 1. PRIMITIVE: la tavolozza. Scala corta per scelta deliberata (decisione di Andrea: pochi step, non 9). Le scelte NUOVE si fanno da qui. 2. SEMANTICHE: il significato. I componenti usano SOLO queste. I valori sono quelli congelati della homepage: dove un valore non cade su uno step primitivo resta letterale (taratura fine congelata, non un invito a crearne altri). Regole vincolanti: docs/REGOLE.md parte II.1. ============================================================ */ :root { /* ---------- 1 · PRIMITIVE ---------- */ /* Neutri violati (hue 315, chroma bassa) */ --n-100: oklch(0.99 0.003 315); /* quasi bianco */ --n-300: oklch(0.94 0.02 315); /* superficie */ --n-500: oklch(0.87 0.014 315); /* righe */ --n-700: oklch(0.55 0.04 315); /* righe forti */ --n-900: oklch(0.45 0.05 315); /* testo attenuato */ /* Prugna (hue 315): la firma */ --plum-100: oklch(0.92 0.025 315); /* tinta chiara */ --plum-200: oklch(0.88 0.04 315); /* tinta media */ --plum-300: oklch(0.84 0.06 315); /* tinta profonda */ --plum-500: oklch(0.34 0.09 315); /* superficie scura */ --plum-700: oklch(0.29 0.095 315); /* firma e azioni */ --plum-900: oklch(0.26 0.12 315); /* inchiostro */ /* Segnale acido (hue 128): marca, non decora */ --acid-300: oklch(0.9 0.16 128); --acid-500: oklch(0.86 0.17 128); --acid-700: oklch(0.82 0.17 128); /* Bianco pieno (solo dentro superfici, mai come fondo pagina) */ --white: oklch(1 0 0); /* Stati (contrasti AA calcolati il 7 agosto 2026: tutti > 6:1) */ --red-500: oklch(0.45 0.17 27); --red-100: oklch(0.95 0.02 27); --green-500: oklch(0.44 0.12 150); --green-100: oklch(0.95 0.03 150); --amber-500: oklch(0.46 0.08 70); --amber-100: oklch(0.955 0.025 85); /* ---------- 2 · SEMANTICHE · colore ---------- */ /* Fondi e superfici chiare */ --bg: oklch(0.977 0.006 315); /* fondo pagina (fuori scala, congelato) */ --bg-2: var(--n-100); /* superfici in rilievo: card chiare, header */ --bg-3: var(--n-300); /* bande e superfici tinte */ --paper: var(--white); /* Testi su chiaro */ --ink: var(--plum-900); /* titoli e testo forte */ --ink-2: oklch(0.31 0.07 315); /* corpo (congelato) */ --ink-3: var(--n-900); /* attenuato, didascalie */ /* Righe */ --line: var(--n-500); --line-strong: var(--n-700); /* Azione primaria (prugna) */ --accent: var(--plum-700); --accent-hover: oklch(0.35 0.1 315); /* stato (congelato) */ --accent-down: oklch(0.24 0.09 315); /* stato (congelato) */ --accent-ring: oklch(0.29 0.095 315 / 0.35); --on-accent: oklch(0.968 0.01 315); /* testo su prugna */ --on-accent-soft: oklch(0.89 0.02 315); --on-accent-body: oklch(0.91 0.015 315); /* Superfici scure */ --card-dark: var(--plum-500); --line-dark: oklch(1 0 0 / 0.15); --line-dark-2: oklch(1 0 0 / 0.32); --line-dark-3: oklch(1 0 0 / 0.5); --wash-dark: oklch(1 0 0 / 0.12); /* Segnale acido */ --accent-2: var(--acid-500); --accent-2-hover: var(--acid-300); --accent-2-down: var(--acid-700); --on-accent-2: oklch(0.24 0.08 315); /* inchiostro su acido (congelato) */ /* Tinte dei segni amorfi */ --tint-1: var(--plum-100); --tint-2: var(--plum-200); --tint-3: var(--plum-300); /* Velature */ --wash: oklch(0.26 0.12 315 / 0.06); --wash-strong: oklch(0.26 0.12 315 / 0.12); /* Mappe e diagrammi */ --map-dot: oklch(0.78 0.04 315); --map-line: oklch(0.82 0.03 315); /* Stati: testo/bordo e fondo. Mai da soli: sempre con icona o etichetta */ --err: var(--red-500); --err-bg: var(--red-100); --ok: var(--green-500); --ok-bg: var(--green-100); --warn: var(--amber-500); --warn-bg: var(--amber-100); /* ---------- 2 · SEMANTICHE · tipografia ---------- */ /* Halyard Display, unica famiglia: 700 titoli, 600 UI, 400 corpo */ --font-display: "halyard-display", "Helvetica Neue", Arial, sans-serif; --font-text: "halyard-display", "Helvetica Neue", Arial, sans-serif; /* Scala tipografica, rapporto 1.2 (1.25 ammesso sui display). I display riprendono i clamp congelati della homepage. */ --text-xs: 0.74rem; /* etichette, kicker */ --text-s: 0.9rem; /* didascalie, note */ --text-m: 1rem; /* corpo */ --text-l: 1.2rem; /* titoli di card e voci */ --text-xl: clamp(1.45rem, 2vw, 1.75rem); /* titoli minori */ --text-2xl: clamp(1.8rem, 3.4vw, 2.6rem); /* titoli di sezione */ --text-3xl: clamp(2rem, 4.4vw, 3.4rem); /* display */ --text-4xl: clamp(2.3rem, 5.2vw, 4.3rem); /* hero */ /* ---------- 2 · SEMANTICHE · spazio ---------- */ /* Griglia 8pt con mezzo passo da 4 per tipografia e icone */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Respiro delle sezioni (white space attivo) */ --sec-pad: clamp(72px, 10vw, 130px); --sec-pad-lg: clamp(96px, 12vw, 160px); /* ---------- 2 · SEMANTICHE · materia ---------- */ --radius-s: 6px; /* CTA, hover menu, chip, social. MAI pillola sulle azioni */ --radius-m: 10px; /* card e superfici */ --shadow-1: 0 4px 12px oklch(0.22 0.05 315 / 0.08); --shadow-2: 0 12px 26px oklch(0.22 0.05 315 / 0.12); /* ---------- 2 · SEMANTICHE · motion ---------- */ --pace: 180ms; /* micro-transizioni */ --pace-slow: 0.5s; /* corse lunghe (riempimento stepper) */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ############################################################ 2 · COMPONENTI ############################################################ */ /* ============================================================ PharmaCare · Design system Impronta · COMPONENTI Fase 2 (agosto 2026). Usa i token della sezione 1 qui sopra. Ordine (docs/REGOLE.md II.2): base, bottoni, header, ritmo sezioni, segni della famiglia, componenti, footer, motion, reduced-motion. I valori dei componenti estratti dalla homepage sono CONGELATI: ritoccarli qui cambia tutte le pagine. Le pagine devono aggiungere la classe .js sull'html via script perché i reveal additivi si attivino. ============================================================ */ /* ---------- Base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink-2); font-family: var(--font-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-wrap: balance; letter-spacing: -0.015em; } p { text-wrap: pretty; } img, svg { max-width: 100%; } /* Icone Remix: il font ha un solo peso. Dentro bottoni, link bold o strong erediterebbero il grassetto e il faux bold le impasta: mai bold (12 agosto) */ [class^="ri-"], [class*=" ri-"] { font-weight: normal; } .wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-5); } [id] { scroll-margin-top: 88px; } .svg-defs { position: absolute; width: 0; height: 0; } .logo-link { display: flex; } .skip { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: var(--radius-s); font-weight: 600; } .skip:focus-visible { left: 12px; } /* ---------- Bottoni ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-text); font-size: 0.95rem; font-weight: 600; padding: var(--space-3) var(--space-5); min-height: 46px; border-radius: var(--radius-s); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--pace) var(--ease), border-color var(--pace) var(--ease), color var(--pace) var(--ease), translate var(--pace) var(--ease); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); translate: 0 -1px; } .btn-primary:active { background: var(--accent-down); translate: 0 0; } .btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-secondary:hover { background: var(--wash); translate: 0 -1px; } .btn-secondary:active { background: var(--wash-strong); } .btn-acid { background: var(--accent-2); color: var(--on-accent-2); } .btn-acid:hover { background: var(--accent-2-hover); translate: 0 -1px; } .btn-acid:active { background: var(--accent-2-down); } .btn-ghost-light { background: transparent; color: var(--on-accent); border-color: var(--line-dark-3); } .btn-ghost-light:hover { background: var(--wash-dark); } .btn-ghost-light:focus-visible, .btn-acid:focus-visible { outline-color: var(--accent-2); } .btn .ri-send-plane-line { transition: translate var(--pace) var(--ease), rotate var(--pace) var(--ease); } .btn:hover .ri-send-plane-line { translate: 5px -3px; rotate: 8deg; } /* Stati disabled e loading (fase 2). Il disabled toglie l'azione, non l'etichetta: il testo resta leggibile. */ .btn[disabled], .btn[aria-disabled="true"] { background: var(--bg-3); color: var(--ink-3); border-color: transparent; cursor: not-allowed; pointer-events: none; } .btn-secondary[disabled], .btn-secondary[aria-disabled="true"] { background: transparent; color: var(--ink-3); border-color: var(--line); } /* Loading: etichetta visibile + anello che gira. Usare con aria-busy="true". */ .btn.is-loading { pointer-events: none; } .btn.is-loading::after { content: ""; width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { rotate: 360deg; } } /* ---------- Header ---------- */ .site-head { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); } .site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; } .logo { height: 26px; width: auto; flex: none; } .logo .word { color: var(--ink); } .logo .mark { color: var(--accent); } /* Nav a sinistra accanto al logo, azioni sole a destra */ .site-nav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-4); } .site-nav a, .nav-dd > button { display: inline-block; padding: 10px var(--space-3); color: var(--ink-2); text-decoration: none; font-size: 1rem; font-weight: 500; border-radius: var(--radius-s); } .site-nav a:hover, .nav-dd > button:hover { color: var(--ink); background: var(--wash); } .site-nav a:focus-visible, .nav-dd > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Tendine di navigazione: la voce principale è un BOTTONE, apre il menu e non porta a nessuna pagina. Stato unico in [data-open], governato dallo script dell'header (click, tastiera, hover); nel drawer mobile l'elenco è piatto e sempre visibile. */ .nav-dd { position: relative; display: inline-flex; } /* Il bottone è flex: l'icona non entra nel line box del testo e l'altezza resta identica a quella delle voci senza freccia */ .nav-dd > button { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-text); border: none; background: none; cursor: pointer; } .nav-dd > button > i { font-size: 1.05em; line-height: 1; translate: 0 1px; /* aggancia il glifo al centro ottico del testo, misurato sull'ink */ transition: rotate var(--pace) var(--ease); } .nav-dd[data-open] > button { color: var(--ink); background: var(--wash); } .nav-dd[data-open] > button > i { rotate: 180deg; } .dd-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 250px; padding: var(--space-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); display: grid; gap: 2px; visibility: hidden; opacity: 0; translate: 0 -4px; transition: opacity var(--pace) var(--ease), translate var(--pace) var(--ease), visibility 0s linear var(--pace); } .nav-dd[data-open] > .dd-panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; } .dd-wide { min-width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .dd-panel a { display: block; padding: 10px var(--space-3); color: var(--ink-2); text-decoration: none; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-s); } .dd-panel a:hover { color: var(--ink); background: var(--wash); } .dd-panel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Menu Accedi (12 agosto): tendina delle tre porte agganciata al bottone della testata. Stessa gestione di stato delle tendine di navigazione ([data-open] dal JS dell'header per click, tastiera e hover); il trigger è un button perché apre e non naviga. Sul mobile non esiste: nel drawer la voce Accedi resta un link alla pagina. */ .acc-dd { position: relative; display: inline-flex; } .acc-dd[data-open] > .btn { background: var(--wash); } .acc-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 320px; padding: var(--space-2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); display: grid; gap: 2px; visibility: hidden; opacity: 0; translate: 0 -6px; transition: opacity var(--pace) var(--ease), translate var(--pace) var(--ease), visibility 0s linear var(--pace); } .acc-dd[data-open] > .acc-panel { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; } .acc-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-s); text-decoration: none; font-size: 0.98rem; font-weight: 600; color: var(--ink); } .acc-row:hover { background: var(--wash); } .acc-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .acc-row .punto { width: 42px; height: 42px; font-size: 1.15rem; } .acc-row:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; } .acc-row:nth-child(3) .punto { background: var(--tint-3); animation-delay: -3s; } .acc-row > i:last-child { margin-left: auto; color: var(--accent); font-size: 1.05rem; } .acc-note { margin-top: var(--space-1); padding: 10px var(--space-3) 6px; border-top: 1px solid var(--line); font-size: 0.78rem; line-height: 1.5; font-weight: 400; color: var(--ink-3); } .nav-cta { display: none; } .head-cta { display: flex; align-items: center; gap: 14px; margin-left: auto; } .lang { font-size: 0.74rem; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-1) var(--space-2); } .head-cta .btn { padding: 9px 18px; min-height: 40px; font-size: 0.88rem; } .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg-2); cursor: pointer; position: relative; } .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .menu-btn i, .menu-btn::before, .menu-btn::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: translate var(--pace) var(--ease), rotate var(--pace) var(--ease), opacity var(--pace) var(--ease); } .menu-btn::before { top: 15px; } .menu-btn i { top: 21px; } .menu-btn::after { top: 27px; } .menu-btn[aria-expanded="true"]::before { translate: 0 6px; rotate: 45deg; } .menu-btn[aria-expanded="true"] i { opacity: 0; } .menu-btn[aria-expanded="true"]::after { translate: 0 -6px; rotate: -45deg; } @media (max-width: 1020px) { .menu-btn { display: block; } .acc-dd { display: none; } .site-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-5) var(--space-4); display: none; } .site-head[data-open] .site-nav { display: flex; } .site-nav a, .nav-dd > button { padding: 13px var(--space-2); border-bottom: 1px solid var(--line); border-radius: 0; } .site-nav a:last-of-type { border-bottom: none; } .nav-dd { display: contents; } .nav-dd > button { width: 100%; } .nav-dd[data-open] > button { background: none; } .nav-dd > button > i { display: none; } .dd-panel, .dd-wide { position: static; min-width: 0; visibility: visible; opacity: 1; translate: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 0 var(--space-4); background: transparent; border: none; border-radius: 0; box-shadow: none; transition: none; } .dd-panel a { padding: 11px var(--space-2); border-bottom: 1px solid var(--line); border-radius: 0; } .nav-cta { display: flex; gap: 12px; padding-top: var(--space-4); } /* I bottoni sono dentro .site-nav: si riprendono colore, radius e padding che le regole dei link di menu vincerebbero per specificità */ .nav-cta .btn { flex: 1; justify-content: center; padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-s); } .nav-cta .btn-primary, .nav-cta .btn-primary:hover { color: var(--on-accent); } .nav-cta .btn-primary:hover { background: var(--accent-hover); } .nav-cta .btn-secondary, .nav-cta .btn-secondary:hover { color: var(--ink); } .nav-cta .btn-secondary { border: 1px solid var(--ink); } .head-cta { margin-left: 0; } .head-cta .btn { display: none; } } /* ---------- Sezioni: ritmo ---------- */ section { position: relative; } .clip { overflow: clip; } .pad { padding-block: var(--sec-pad); } .pad-lg { padding-block: var(--sec-pad-lg); } .sec-title { font-size: var(--text-2xl); line-height: 1.15; max-width: 26ch; } .sec-lead { margin-top: var(--space-4); max-width: 62ch; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; } /* Riga che chiude una sezione, col grassetto che porta il senso. Piena sotto un blocco a tutta larghezza; .stretta quando sta in una colonna accanto a un rail o a una figura; .staccata quando segue una griglia, che ha bisogno di piu' aria sopra. */ .sec-close { margin-top: clamp(24px, 3vw, 34px); max-width: 68ch; font-size: 1.05rem; color: var(--ink-2); } .sec-close.stretta { max-width: 46ch; } .sec-close.staccata { margin-top: clamp(32px, 4vw, 48px); } .sec-close b { color: var(--ink); font-weight: 600; } .band { border-block: 1px solid var(--line); background: var(--bg-2); } /* Banda piu' marcata: la usano le sezioni che raccontano il metodo o la piattaforma, quelle che devono staccare dal resto */ .band-alt { border-block: 1px solid var(--line); background: var(--bg-3); } /* Sezione a due colonne: testo da una parte, figura o elenco dall'altra. Il peso sta a sinistra; .peso-dx lo sposta a destra, .in-alto allinea in cima invece che al centro. Il punto in cui collassa lo dichiara la pagina: oggi vale 900, 980 o 1000 a seconda del contenuto. */ .due-col { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } /* I modificatori stanno dentro :where() apposta: cosi' pesano come la classe base e una regola di pagina con una classe sola resta in grado di correggerli. Senza, .due-col.peso-dx (due classi) batterebbe .rete-grid e la sezione non collasserebbe piu'. */ .due-col:where(.peso-dx) { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } .due-col:where(.in-alto) { align-items: start; } /* Valore in grassetto che e' testo, non numero: niente tabular-nums */ b.txt { font-variant-numeric: normal; } /* Micro etichetta maiuscola dentro le finestre */ .microlabel { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } /* Banda scura: titolo e lead si adattano da soli */ .sols-band { background: var(--accent); } .sols-band .sec-title { color: var(--on-accent); } .sols-band .sec-lead { color: var(--on-accent-soft); } /* ---------- Segni della famiglia: masse, marcatore, punto ---------- */ .masse { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .masse svg { position: absolute; inset: 0; width: 100%; height: 100%; } .masse ~ .wrap { position: relative; z-index: 2; } /* Riempimenti SVG: solo classi, mai colori nel markup (fill-opacity libera per istanza) */ .f-accent { fill: var(--accent); } .f-acid { fill: var(--accent-2); } .f-paper { fill: var(--paper); } .f-ink-deep { fill: var(--on-accent-2); } .f-line { fill: var(--line); } .f-dot { fill: var(--map-dot); } .s-line { stroke: var(--map-line); } .drift { animation: drift 7s ease-in-out infinite alternate; } .drift.d2 { animation-duration: 9s; animation-delay: -4s; } @keyframes drift { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(34px, -24px) rotate(2.5deg) scale(1.05); } } @keyframes morph { from { border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%; } to { border-radius: 40% 60% 36% 64% / 62% 40% 60% 38%; } } @keyframes breathe { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.06) rotate(2.2deg); } } @keyframes bloom { from { opacity: 0; scale: 0.94; } } /* Blob dell'hero: la massa amorfa dietro la figura di destra. Geometria e andatura sono le stesse ovunque (drift 8s, non i 7s di .drift): le poche pagine che deviano correggono top, right e width sotto la propria classe, non ricopiano la regola. */ .blob { position: absolute; top: -10%; right: -12%; width: 115%; height: auto; z-index: 0; animation: bloom 0.8s var(--ease) 120ms backwards, drift 8s ease-in-out 1s infinite alternate; } .marker { padding: 0 0.08em; background: linear-gradient(var(--accent-2), var(--accent-2)) no-repeat 0 86%; background-size: 100% 0.32em; } .punto { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; font-size: 1.4rem; color: var(--accent); background: var(--tint-1); border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%; animation: morph 4.5s ease-in-out infinite alternate; } /* ---------- Badge, chip, card ---------- */ .pill { background: var(--accent-2); color: var(--on-accent-2); border-radius: 999px; padding: 3px var(--space-3); font-size: 0.74rem; font-weight: 600; white-space: nowrap; } .pill.soft { background: var(--wash-dark); color: var(--on-accent); } .pill.ok { background: var(--accent-2); color: var(--on-accent-2); } .pill.mut { background: var(--bg-3); color: var(--ink-2); } .chip { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 13px 14px; font-size: 0.72rem; color: var(--ink-3); } .chip b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; } .chip b.txt { font-size: 1rem; padding-top: var(--space-1); } /* Card chiara del kit (stessa ricetta della card contatti) */ .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding: clamp(26px, 3.4vw, 40px); } /* ---------- Card scure (griglia Soluzioni) ---------- */ .sols { margin-top: clamp(36px, 5vw, 56px); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } .sol { background: var(--card-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-m); padding: 26px; display: grid; gap: var(--space-3); align-content: start; text-decoration: none; transition: translate var(--pace) var(--ease), border-color var(--pace) var(--ease); } .sol:hover { translate: 0 -2px; border-color: var(--line-dark-2); } .sol i.ri { font-size: 1.5rem; color: var(--on-accent-soft); } .sol h3 { font-size: 1.18rem; color: var(--on-accent); } .sol p { font-size: 1rem; line-height: 1.6; color: var(--on-accent-body); max-width: 48ch; } .sol:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } .sol-link { margin-top: var(--space-1); width: fit-content; display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 600; color: var(--accent-2); } .sol-link i { transition: translate var(--pace) var(--ease); } .sol:hover .sol-link span, .sol:focus-visible .sol-link span { text-decoration: underline; text-underline-offset: 3px; } .sol:hover .sol-link i { translate: 3px 0; } .sol-cta { background: transparent; border: 1px solid var(--line-dark-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) 28px; } .sol-cta:hover { border-color: var(--line-dark-3); } .sol-cta p { margin-top: 6px; } @media (min-width: 680px) { .sols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sol-cta { grid-column: 1 / -1; } } @media (min-width: 960px) { .sols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Stepper (rail delle fasi) ---------- */ /* Pattern vincolante (docs/REGOLE.md II.4): binario continuo, riempimento a durata fissa, pulse agganciato al transitionend dal JS della pagina. Il centro del dot sta a 58px dall'inizio dello step (62 nel JS). */ .rail { list-style: none; margin-top: clamp(30px, 4vw, 44px); display: grid; position: relative; } .rail::before, .rail::after { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: var(--track, 100%); } .rail::before { background: var(--line); } .rail::after { background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform var(--pace-slow) var(--ease); } .rail li { position: relative; z-index: 1; } .rail li::before { content: ""; position: absolute; left: -3px; top: 58px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background-color var(--pace) var(--ease); } .rail li.done::before, .rail li.active::before { background: var(--accent); } .rail li.active.pulse::before { animation: pulse 1.6s var(--ease) infinite; } @keyframes pulse { from { box-shadow: 0 0 0 0 var(--accent-ring); } to { box-shadow: 0 0 0 9px transparent; } } .rail button { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 10px; width: 100%; text-align: left; background: none; border: none; font-family: var(--font-text); cursor: pointer; padding: 26px 0 10px 18px; } .rail button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rail .n { grid-column: 1; grid-row: 2; align-self: baseline; font-size: 0.78rem; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; } .rail b { grid-column: 2; grid-row: 1; font-size: 1rem; font-weight: 600; color: var(--ink-3); transition: color var(--pace) var(--ease); } .rail li.active b, .rail li.done b { color: var(--ink); } .rail span:not(.n) { grid-column: 2; grid-row: 2; align-self: baseline; font-size: 0.9rem; color: var(--ink-3); } /* ---------- Striscia numeri ---------- */ .nums { margin-top: clamp(40px, 6vw, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); } .nums > div { border-right: 1px solid var(--line); padding: 26px var(--space-5) 30px; } .nums > div:last-child { border-right: none; } .nums i { display: block; font-size: 1.35rem; color: var(--accent); margin-bottom: 10px; } .nums b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .nums span { display: block; margin-top: var(--space-2); font-size: 0.92rem; color: var(--ink-3); } @media (max-width: 900px) { .nums > div { border-right: none; border-bottom: 1px solid var(--line); } .nums > div:last-child { border-bottom: none; } } /* Nota sotto la striscia: da dove vengono i numeri */ .nums-note { margin-top: var(--space-4); font-size: 0.92rem; color: var(--ink-3); } /* ---------- Elenco con punti amorfi ---------- */ .qlist { display: grid; } .qitem { display: flex; gap: 20px; padding-block: var(--space-5); border-bottom: 1px solid var(--line); } .qitem:first-child { border-top: 1px solid var(--line); } .qitem:last-child { border-bottom: none; } .qitem .punto { width: 48px; height: 48px; font-size: 1.25rem; } .qitem:nth-child(2n) .punto { background: var(--tint-2); } .qitem:nth-child(2) .punto, .qitem:nth-child(5) .punto { animation-delay: -1.5s; } .qitem:nth-child(4) .punto { animation-delay: -3s; } .qitem h3 { font-size: 1.05rem; } .qitem p { margin-top: var(--space-1); font-size: 0.92rem; color: var(--ink-2); max-width: 48ch; } /* ---------- Form ---------- */ .contact { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding: clamp(26px, 3.4vw, 40px); } .contact h3 { font-size: 1.35rem; } .form-hint { margin-top: var(--space-2); margin-bottom: var(--space-5); font-size: 0.93rem; color: var(--ink-2); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { width: 100%; margin-top: 7px; padding: var(--space-3) 14px; font: inherit; font-size: 0.95rem; line-height: 1.4; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-s); } .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); } .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: var(--err); } .field textarea { resize: vertical; min-height: 120px; } .contact [type="submit"] { width: 100%; margin-top: var(--space-1); } .form-note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-3); } .form-ok { display: grid; justify-items: start; gap: 10px; padding-block: 6px; } .form-ok[hidden] { display: none; } .form-ok .punto { color: var(--accent); background: var(--tint-1); } .form-ok h3 { font-size: 1.25rem; } .form-ok p { font-size: 0.95rem; color: var(--ink-2); max-width: 40ch; } /* Select: wrapper con freccia Remix nel markup
*/ .select { position: relative; margin-top: 7px; } .select select { margin-top: 0; appearance: none; padding-right: 40px; cursor: pointer; } .select > i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--ink-3); font-size: 1.1rem; } /* Checkbox (consenso privacy e simili) */ .check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; cursor: pointer; } .check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; } .check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .check span { font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); } /* Stati dei campi via classe (validazione JS). Mai solo colore: il messaggio porta icona e testo. */ .field.err input, .field.err textarea, .field.err select { border-color: var(--err); } .field.ok input, .field.ok textarea, .field.ok select { border-color: var(--ok); } .field-msg { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-size: 0.82rem; } .field-msg.err { color: var(--err); } .field-msg.ok { color: var(--ok); } /* ---------- Alert ---------- */ /* Bordo pieno e fondo tinto: mai striscia laterale. Icona obbligatoria. */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid; border-radius: var(--radius-s); padding: 14px var(--space-4); font-size: 0.92rem; line-height: 1.5; } .alert i { flex: none; font-size: 1.15rem; margin-top: 1px; } .alert b { display: block; font-weight: 600; } .alert p { color: var(--ink-2); } .alert.err { background: var(--err-bg); border-color: var(--err); } .alert.err i, .alert.err b { color: var(--err); } .alert.warn { background: var(--warn-bg); border-color: var(--warn); } .alert.warn i, .alert.warn b { color: var(--warn); } .alert.ok { background: var(--ok-bg); border-color: var(--ok); } .alert.ok i, .alert.ok b { color: var(--ok); } /* ---------- Kicker e breadcrumb ---------- */ /* Un kicker per pagina (nel page-hero), non uno per sezione. */ .kicker { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: 0.82rem; color: var(--ink-3); } .crumbs a { color: var(--ink-3); text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .crumbs i { font-size: 0.95rem; } .crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; } /* ---------- Hero interno ---------- */ .page-hero { border-bottom: 1px solid var(--line); } .page-hero .wrap { padding-block: clamp(56px, 8vw, 104px); display: grid; gap: 18px; justify-items: start; } .page-hero h1 { font-size: var(--text-3xl); line-height: 1.08; letter-spacing: -0.02em; max-width: 20ch; } .page-hero .lead { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; } /* Coppia di CTA sotto il testo dell'hero. La homepage stacca di piu' perche' il suo hero e' piu' alto: corregge solo il margine */ .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--space-3); } /* Hero interno a due colonne: testo a sinistra, figura a destra. Sotto i 900px la figura scende sotto e si allinea a sinistra. Chi ha una figura piu' larga o piu' stretta corregge la sola width di .fig-col. L'hero della homepage NON usa questo componente: e' piu' alto e non collassa. */ .hero-2col .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .hero-2col .lseq { display: grid; gap: 18px; justify-items: start; } .fig-col { position: relative; justify-self: end; width: min(100%, 440px); } @media (max-width: 900px) { .hero-2col .wrap { grid-template-columns: minmax(0, 1fr); } .fig-col { justify-self: start; } } /* ---------- Sezione col rail delle fasi ---------- */ /* Testo a sinistra, stepper a destra: cinque pagine raccontano cosi' un processo. Il rail e' gia' un componente a se'. */ .flow .wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .flow .rail { margin-top: var(--space-2); } @media (max-width: 1000px) { .flow .wrap { grid-template-columns: minmax(0, 1fr); } } /* ---------- Capacita': griglia con filetto in testa ---------- */ /* Icona, titolo, riga di testo: il modo standard di elencare cosa sappiamo fare. Tre colonne, in colonna singola sotto gli 860px. Chi ne ha bisogno cambia il numero di colonne, non la scheda. */ .cap-grid { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) clamp(20px, 3vw, 40px); } .cap { border-top: 1px solid var(--line); padding-top: var(--space-4); } .cap i { font-size: 1.35rem; color: var(--accent); } /* Se l'icona sta dentro un punto amorfo (pagina ISO) la misura la detta il punto, non la scheda */ .cap .punto i { font-size: inherit; } .cap h3 { margin-top: var(--space-3); font-size: 1.05rem; } .cap p { margin-top: var(--space-1); max-width: 44ch; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; } @media (max-width: 860px) { .cap-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .cap { padding-block: var(--space-4) var(--space-5); } } /* ---------- Finestra della piattaforma ---------- */ /* Il frammento di prodotto che compare in cinque pagine: barra in testa, corpo, elenco di appuntamenti. Brand sempre anonimizzato (docs/REGOLE: i portali dei progetti non si mostrano mai). */ /* Dove la finestra sta sopra un blob va alzata con position e z-index: lo fanno le due pagine interessate, non tutte */ .app { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: clip; } .app-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 20px; border-bottom: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); } .app-bar > span:first-child { color: var(--ink-2); } .app-body { padding: var(--space-5) 22px; display: grid; gap: 22px; } .app-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .app-cols { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-4); } .app-list { display: grid; gap: 0; align-content: start; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: clip; } .app-list header { padding: var(--space-3) 14px; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--bg); } .appt { display: flex; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); font-size: 0.82rem; } .appt:last-child { border-bottom: none; } .appt time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; flex: none; } .appt .who { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appt .pill { margin-left: auto; } .app-map { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--bg); position: relative; overflow: clip; min-height: 190px; } .app-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .app-map figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 0.7rem; color: var(--ink-3); } .app-rep { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 15px 14px; font-size: 0.82rem; color: var(--ink-2); } .app-rep i { color: var(--accent); font-size: 1.05rem; } .app-rep .who { flex: 1; min-width: 0; } /* Evidenziazione sincronizzata col rail delle fasi */ .lit { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .app-bar.lit { outline-offset: -3px; } /* ---------- Scheda prugna (mockup dell'hero) ---------- */ .mockup { position: relative; z-index: 1; width: min(100%, 380px); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-m); padding: var(--space-5); box-shadow: var(--shadow-2); } .mockup h2 { font-family: var(--font-text); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--on-accent-soft); } .mockup .row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line-dark); font-size: 0.9rem; } .mockup .row:last-child { border-bottom: none; padding-bottom: 0; } .mockup .row b { font-weight: 600; text-align: right; } /* ---------- Trio di pilastri ---------- */ /* Tre colonne con filetto in testa e punto amorfo, impilate sotto i 900px col filetto che passa sotto */ .trio { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); } .trio > div { border-top: 1px solid var(--line); padding-top: var(--space-5); } .trio > div:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; } .trio > div:nth-child(3) .punto { animation-delay: -3s; } .trio h3 { font-size: 1.15rem; margin-top: var(--space-4); } .trio p { margin-top: var(--space-2); font-size: 0.95rem; color: var(--ink-2); max-width: 38ch; } @media (max-width: 900px) { .trio { grid-template-columns: minmax(0, 1fr); gap: 0; } .trio > div { padding-block: 22px; border-top: none; border-bottom: 1px solid var(--line); } .trio > div:first-child { border-top: 1px solid var(--line); } } /* ---------- Sezione qualita': testo a sinistra, chip a destra ---------- */ .qual .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .qual .sec-lead { max-width: 52ch; } .qual .btn { margin-top: var(--space-6); } /* Griglie di chip: due o quattro per riga, le quattro si dimezzano sotto i 900px */ .chips-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .chips-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } @media (max-width: 900px) { .qual .wrap { grid-template-columns: minmax(0, 1fr); } .chips-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Banda "hai bisogno di aiuto" ---------- */ .help .wrap { display: grid; justify-items: center; text-align: center; } .help h2 { font-size: var(--text-xl); max-width: 30ch; } .help p { margin-top: var(--space-4); max-width: 62ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); } .help-tel { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); color: var(--ink); text-decoration: none; } .help-tel i { color: var(--accent); font-size: 1.2em; } .help-tel:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .help-tel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Banda finale acida ---------- */ /* La homepage ne fa una versione a due colonne col form: tiene il suo layout in pagina. .centrata e' la chiusura con una sola CTA. */ .final { background: var(--accent); } .final.centrata .wrap { padding-block: clamp(72px, 10vw, 132px); } .final.centrata .wrap > div { display: grid; gap: 18px; justify-items: center; text-align: center; margin-inline: auto; } .final.centrata h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 20ch; } .final.centrata p { max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); } .final.centrata .btn { margin-top: var(--space-3); } /* ---------- Tabella ---------- */ .table-wrap { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th { text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 14px var(--space-4); border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; } .table td { padding: 13px var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink-2); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--wash); } .table .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; } /* ---------- Corpo testo pagine legali/interne ---------- */ .doc { max-width: 68ch; } .doc h2 { font-size: var(--text-xl); margin-top: var(--space-7); } .doc h2:first-child { margin-top: 0; } .doc p { margin-top: var(--space-4); color: var(--ink-2); line-height: 1.6; } .doc p:first-child { margin-top: 0; } .doc ul { margin-top: var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); color: var(--ink-2); line-height: 1.6; } .doc ul li::marker { color: var(--accent); } .doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .doc a:hover { color: var(--accent-hover); } .doc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .doc .table-wrap { margin-top: var(--space-5); } .doc .acc-list { margin-top: var(--space-6); } .doc .alert { margin-top: var(--space-5); } .doc .qlist { margin-top: var(--space-6); } /* ---------- Accordion (details/summary nativo) ---------- */ .acc { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg-2); } .acc + .acc { margin-top: 10px; } .acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 18px 20px; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; color: var(--ink); border-radius: var(--radius-m); } .acc summary::-webkit-details-marker { display: none; } .acc summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .acc summary i { flex: none; color: var(--ink-3); transition: rotate var(--pace) var(--ease); } .acc[open] summary i { rotate: 45deg; } .acc-body { padding: 0 20px 20px; font-size: 0.95rem; line-height: 1.6; color: var(--ink-2); max-width: 65ch; } .acc[open] .acc-body { animation: rise 0.3s var(--ease) backwards; } /* ---------- Tab ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); } .tabs [role="tab"] { border: none; background: none; cursor: pointer; font-family: var(--font-text); font-size: 0.95rem; font-weight: 600; color: var(--ink-3); padding: var(--space-3) var(--space-4); margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: var(--radius-s) var(--radius-s) 0 0; transition: color var(--pace) var(--ease), background-color var(--pace) var(--ease); } .tabs [role="tab"]:hover { color: var(--ink); background: var(--wash); } .tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tab-panel { padding-block: 20px; } .tab-panel[hidden] { display: none; } /* ---------- Banda di contatto condivisa ---------- */ /* Chiude le pagine Soluzioni (include/form-contatto.php, 12 agosto): stessa ricetta a due colonne della sezione finale della homepage, mai il solo testo centrato. Il form .contact è definito sopra. */ .form-band { background: var(--accent); } .form-band .wrap { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; padding-block: clamp(72px, 10vw, 132px); } .form-band h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 18ch; } .form-band .wrap > div > p { margin-top: 18px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); } @media (max-width: 980px) { .form-band .wrap { grid-template-columns: minmax(0, 1fr); } } /* ---------- Footer ---------- */ .site-foot { border-top: 1px solid var(--line); background: var(--bg); } .foot-main { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 0.7fr)); gap: var(--space-6); padding-block: clamp(40px, 6vw, 64px); } .foot-main .logo { height: 22px; } .foot-claim { margin-top: 14px; font-size: 0.9rem; color: var(--ink-3); max-width: 34ch; } .foot-tel { margin-top: var(--space-4); } .foot-tel a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.02rem; } .foot-tel a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .foot-tel a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .foot-tel i { font-size: 1.1em; color: var(--accent); } .foot-legal { margin-top: var(--space-3); font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); max-width: 34ch; } .foot-col h3 { font-family: var(--font-text); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); margin-bottom: var(--space-3); } .foot-col > a { display: block; padding: 6px 0; color: var(--ink-2); text-decoration: none; font-size: 0.92rem; } .foot-col > a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .foot-col > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .socials { display: flex; gap: 10px; } .socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius-s); color: var(--ink-2); text-decoration: none; font-size: 1.15rem; } .socials a:hover { color: var(--accent); border-color: var(--accent); } .socials a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); border-top: 1px solid var(--line); padding-block: 20px; font-size: 0.82rem; color: var(--ink-3); } .foot-base a { color: var(--ink-2); text-decoration: none; } .foot-base a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .foot-base a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 1080px) { .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-main > :first-child { grid-column: 1 / -1; } } @media (max-width: 620px) { .foot-main { grid-template-columns: 1fr; gap: 26px; } } /* ---------- Motion: reveal additivo ---------- */ @keyframes rise { from { opacity: 0; translate: 0 22px; } } .js [data-reveal].in { animation: rise 0.6s var(--ease) backwards; } .js [data-stagger].in > * { animation: rise 0.5s var(--ease) backwards; } .js [data-stagger].in > *:nth-child(2) { animation-delay: 110ms; } .js [data-stagger].in > *:nth-child(3) { animation-delay: 220ms; } .js [data-stagger].in > *:nth-child(4) { animation-delay: 330ms; } .js [data-stagger].in > *:nth-child(5) { animation-delay: 440ms; } .js [data-stagger].in > *:nth-child(6) { animation-delay: 550ms; } .js [data-stagger].in > *:nth-child(7) { animation-delay: 660ms; } .form-ok.in { animation: rise 0.45s var(--ease) backwards; } /* Sequenza di carico (hero e teste di pagina) */ .lseq > * { animation: rise 0.55s var(--ease) backwards; } .lseq > *:nth-child(2) { animation-delay: 90ms; } .lseq > *:nth-child(3) { animation-delay: 180ms; } /* Entrata dell'hero, uguale su tutte le pagine: il marcatore acido che si riempie, la figura di destra che scorre da fuori, la quarta riga della sequenza (le CTA) che chiude. Il blob sta coi segni della famiglia perche' la sua geometria e la sua andatura sono una cosa sola. */ @keyframes markerGrow { from { background-size: 0 0.32em; } } @keyframes slidein { from { opacity: 0; translate: 34px 0; } } .hero .marker, .page-hero .marker { animation: markerGrow 0.6s var(--ease) 500ms backwards; } /* La figura dell'hero sta sempre sopra il blob: position e z-index qui, non ripetuti da ogni finestra */ .hero-in { position: relative; z-index: 1; animation: slidein 0.65s var(--ease) 220ms backwards; } .hero .lseq > :nth-child(4), .page-hero .lseq > :nth-child(4) { animation-delay: 270ms; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal].in, .js [data-stagger].in > * { animation: none; } .lseq > *, .form-ok.in { animation: none !important; } .drift, .punto, .blob, .hero-in { animation: none !important; } .hero .marker, .page-hero .marker { animation: none !important; } .btn, .sol, .btn .ri-send-plane-line, .sol-link i { transition: none; } .nav-dd > button > i, .dd-panel { transition: none; } .acc-panel { transition: none; } .rail::after, .rail li::before { transition: none; } .rail li.active.pulse::before { animation: none; } .btn.is-loading::after { animation: none; } .acc[open] .acc-body { animation: none; } .acc summary i { transition: none; } .tabs [role="tab"] { transition: none; } } /* ############################################################ 3 · PAGINE ############################################################ */ /* ------------------------------------------------------------ .p-accedi (accedi.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Accedi (smistamento) Niente hero (tolto il 12 agosto): la pagina si apre subito sulle tre porte e risolve il compito in pochi secondi. Sul desktop lo smistamento vive anche nella tendina Accedi della testata (.acc-dd): questa pagina resta l'atterraggio per Google, footer e menu mobile. Niente metriche, niente reveal: zero JS di pagina oltre a quello dell'header. I portali dei singoli progetti non si linkano MAI (riservatezza, 10 agosto). Design system: token e componenti nelle sezioni 1 e 2. ============================================================ */ /* ---------- Testata compatta ---------- */ .p-accedi .doors-head .wrap { padding-block: clamp(40px, 6vw, 72px) 0; display: grid; gap: 14px; justify-items: start; } .p-accedi .doors-head h1 { font-size: var(--text-2xl); line-height: 1.12; } /* ---------- Le tre porte ---------- */ .p-accedi .doors { padding-block: clamp(28px, 4vw, 48px) var(--sec-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 32px); } /* Colonna: card che si allunga più rimando sotto. Le tre card restano di pari altezza (stretch della griglia) e le frecce allineate in fondo */ .p-accedi .doors > div { display: flex; flex-direction: column; } /* Card interamente cliccabile, pattern delle card Soluzioni ma su chiaro */ .p-accedi .door { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1); padding: clamp(24px, 3vw, 32px); text-decoration: none; transition: translate var(--pace) var(--ease), box-shadow var(--pace) var(--ease), border-color var(--pace) var(--ease); } .p-accedi .door:hover { translate: 0 -2px; box-shadow: var(--shadow-2); border-color: var(--line-strong); } .p-accedi .door:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .p-accedi .door .punto { width: 76px; height: 76px; font-size: 2rem; } .p-accedi .doors > div:nth-child(2) .punto { background: var(--tint-2); animation-delay: -1.5s; } .p-accedi .doors > div:nth-child(3) .punto { background: var(--tint-3); animation-delay: -3s; } .p-accedi .door h2 { font-size: 1.35rem; } .p-accedi .door p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); max-width: 40ch; } .p-accedi .door-go { margin-top: auto; padding-top: var(--space-2); width: fit-content; display: inline-flex; align-items: center; gap: 6px; font-size: 0.95rem; font-weight: 600; color: var(--accent); } .p-accedi .door-go i { transition: translate var(--pace) var(--ease); } .p-accedi .door:hover .door-go span { text-decoration: underline; text-underline-offset: 3px; } .p-accedi .door:hover .door-go i { translate: 3px 0; } .p-accedi .door-alt { margin-top: var(--space-3); font-size: 0.9rem; color: var(--ink-2); } .p-accedi .door-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .p-accedi .door-alt a:hover { color: var(--accent-hover); } .p-accedi .door-alt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Nota PSP e aiuto ---------- */ .p-accedi .psp-note .wrap { padding-block: clamp(28px, 4vw, 44px); } .p-accedi .psp-note p { max-width: 68ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); } /* Chiusura centrata: allineata a sinistra lasciava mezza banda vuota */ /* ------------------------------------------------------------ .p-chi-siamo (chi-siamo.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Chi siamo Azienda e modello, senza cronologia autoreferenziale (MD 09). La sezione team resta uno slot: solo figure reali e autorizzate alla pubblicazione. Chiude col form condiviso. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Hero con la scheda dell'azienda ---------- */ /* Specchietto proprio della pagina (12 agosto): niente scheda dati, la composizione di maschere amorfe: è la pagina dell'identità */ .p-chi-siamo .cs-fig { aspect-ratio: 44 / 36; } .p-chi-siamo .cs-fig svg { position: absolute; width: 56%; height: auto; overflow: visible; } .p-chi-siamo .cs-fig svg path { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite alternate; } .p-chi-siamo .cs-m1 { left: 2%; top: 2%; } .p-chi-siamo .cs-m2 { right: 0; top: 24%; } .p-chi-siamo .cs-m2 path { animation-delay: -1.8s; } .p-chi-siamo .cs-m3 { left: 16%; bottom: 0; } .p-chi-siamo .cs-m3 path { animation-delay: -3.4s; } .p-chi-siamo .cs-dot { position: absolute; right: 14%; bottom: 16%; z-index: 1; width: 42px; height: 42px; background: var(--accent-2); border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%; animation: morph 4.5s ease-in-out infinite alternate; } @media (max-width: 900px) { .p-chi-siamo .cs-fig { max-width: 340px; } } /* ---------- Perché esiste ---------- */ .p-chi-siamo .perche .sec-lead { max-width: 68ch; } .p-chi-siamo .perche-close { margin-top: clamp(28px, 4vw, 44px); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.25; color: var(--ink); max-width: 32ch; text-wrap: balance; } /* ---------- Ecosistema: gli attori ---------- */ .p-chi-siamo .eco-chips { margin-top: clamp(24px, 3vw, 34px); max-width: 980px; } /* Chiusura piu' corta: sta accanto ai chip */ .p-chi-siamo .eco-close { max-width: 62ch; } /* ---------- Piattaforma cresciuta coi progetti ---------- */ /* Testo a sinistra, finestra dei flussi a destra: il solo testo col bottone lasciava metà sezione vuota */ .p-chi-siamo .crescita .sec-lead { max-width: 52ch; } .p-chi-siamo .crescita .btn { margin-top: var(--space-6); } .p-chi-siamo .cre-win { justify-self: end; width: min(100%, 400px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: clip; } .p-chi-siamo .cre-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; color: var(--ink-2); } .p-chi-siamo .cre-row { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); } .p-chi-siamo .cre-row:last-child { border-bottom: none; } .p-chi-siamo .cre-row i { flex: none; font-size: 1.05rem; color: var(--accent); } @media (max-width: 900px) { .p-chi-siamo .crescita .wrap { grid-template-columns: minmax(0, 1fr); } .p-chi-siamo .cre-win { justify-self: start; } } /* ---------- Motion di pagina ---------- */ .p-chi-siamo .cs-fig svg, .p-chi-siamo .cs-dot { animation-name: bloom; animation-duration: 0.8s; animation-timing-function: var(--ease); animation-fill-mode: backwards; } /* Il respiro vive sui path (entrata sul contenitore, ciclo sul figlio: così non si sovrascrivono nella stessa shorthand) */ .p-chi-siamo .cs-fig .cs-m1 { animation-delay: 120ms; } .p-chi-siamo .cs-fig .cs-m2 { animation-delay: 240ms; } .p-chi-siamo .cs-fig .cs-m3 { animation-delay: 360ms; } .p-chi-siamo .cs-dot { animation: bloom 0.6s var(--ease) 640ms backwards, morph 4.5s ease-in-out 1.4s infinite alternate; } @media (prefers-reduced-motion: reduce) { /* Le maschere non sono un blob: qui il fermo va dichiarato a parte */ .p-chi-siamo .cs-fig svg, .p-chi-siamo .cs-fig svg path, .p-chi-siamo .cs-dot { animation: none !important; } } /* ------------------------------------------------------------ .p-clinical-operations (clinical-operations.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Clinical Operations Quarta pagina Soluzioni: il metodo dietro i programmi educazionali e territoriali. Il rail delle 5 fasi accende le zone della finestra piattaforma, come nella sezione piattaforma della homepage (variazione dentro il sistema). Design system: token e componenti nelle sezioni 1 e 2. Qui vive SOLO il CSS specifico di questa pagina. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Hero con scheda del programma ---------- */ /* Nella finestra dell'hero la barra e' tutta in ink-2 */ .p-clinical-operations .hero-in .app-bar { color: var(--ink-2); } /* Figura più larga della base */ .p-clinical-operations .co-fig { width: min(100%, 470px); } /* Specchietto proprio della pagina (12 agosto): l'agenda della settimana con le sessioni pianificate sui centri */ .p-clinical-operations .co-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); padding: 18px 20px 10px; } .p-clinical-operations .co-day { display: grid; gap: 6px; align-content: start; } .p-clinical-operations .co-ses { padding: 7px 8px; border-radius: var(--radius-s); background: var(--tint-1); font-size: 0.72rem; line-height: 1.3; color: var(--ink); } .p-clinical-operations .co-ses b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; } .p-clinical-operations .co-ses.t2 { background: var(--tint-2); } .p-clinical-operations .co-ses.t3 { background: var(--tint-3); } .p-clinical-operations .co-ses.now { background: var(--accent-2); color: var(--on-accent-2); } .p-clinical-operations .co-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px 16px; font-size: 0.8rem; color: var(--ink-3); } .p-clinical-operations .co-foot i { color: var(--accent); } /* ---------- Il metodo: rail + finestra con zone ---------- */ /* Stessa ricetta della sezione piattaforma della homepage */ @media (max-width: 1000px) { .p-clinical-operations .metodo .wrap { grid-template-columns: minmax(0, 1fr); } .p-clinical-operations .app-cols { grid-template-columns: minmax(0, 1fr); } } /* ---------- Scenario reale e numeri ---------- */ .p-clinical-operations .scen .sec-lead { max-width: 68ch; } /* ------------------------------------------------------------ .p-contatti (contatti.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Contatti SOLO per aziende e organizzazioni (Andrea, 12 agosto): i professionisti sanitari si candidano da Lavora con noi e avranno il form dedicato su pro.pharmacare.srl. Il form qui è quello commerciale completo (area di interesse, ruolo, territorio); invio simulato, backend da collegare. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Percorsi + form ---------- */ .p-contatti .cont { padding-block: clamp(40px, 6vw, 72px) var(--sec-pad); } /* Colonne piu' distanti del solito */ .p-contatti .cont .wrap { gap: clamp(36px, 5vw, 80px); } .p-contatti .vie h2 { font-size: var(--text-xl); max-width: 26ch; } .p-contatti .vie .qlist { margin-top: clamp(20px, 3vw, 32px); } .p-contatti .vie .qitem { padding-block: var(--space-4); } .p-contatti .vie .qitem .punto { width: 44px; height: 44px; font-size: 1.15rem; } .p-contatti .vie .qitem h3 { font-size: 1rem; } .p-contatti .vie .qitem p { font-size: 0.9rem; } .p-contatti .vie .qitem a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .p-contatti .vie .qitem a:hover { color: var(--accent-hover); } .p-contatti .vie .qitem a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .p-contatti .addr { margin-top: clamp(24px, 3vw, 36px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px; } .p-contatti .addr b { display: block; font-size: 1rem; color: var(--ink); } .p-contatti .addr p { margin-top: var(--space-1); font-size: 0.92rem; line-height: 1.6; color: var(--ink-2); } .p-contatti .addr a { margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; } .p-contatti .addr a i { color: var(--accent); } .p-contatti .addr a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .p-contatti .addr a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 980px) { .p-contatti .cont .wrap { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------ .p-corporate-welfare (corporate-welfare.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Corporate welfare e prevenzione Pagina breve di capacità (ARGOMENTI sez. 5: verticale storico fortissimo nella stagione screening, oggi riattivabile). Niente prezzi: fee e consumi si definiscono fuori dal sito. Chiude col form condiviso. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Hero con scheda della giornata ---------- */ /* Nella finestra dell'hero la barra e' tutta in ink-2 */ .p-corporate-welfare .hero-in .app-bar { color: var(--ink-2); } /* Specchietto proprio della pagina (12 agosto): gli slot della giornata della prevenzione che si riempiono di prenotazioni */ .p-corporate-welfare .cw-body { padding: 18px 20px; } .p-corporate-welfare .cw-slots { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); } .p-corporate-welfare .cw-slot { padding: 8px 4px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .p-corporate-welfare .cw-slot.full { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .p-corporate-welfare .cw-slot.now { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent-2); font-weight: 600; } .p-corporate-welfare .cw-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); } .p-corporate-welfare .cw-foot i { color: var(--accent); } .p-corporate-welfare .cw-foot b { color: var(--ink); } /* ------------------------------------------------------------ .p-home-care (home-care.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Home Care Terza pagina Soluzioni: servizio organizzato B2B2C per laboratori, farmacie, strutture e aziende, non marketplace per privati (i cittadini hanno servizi-a-domicilio.php). Design system: token e componenti nelle sezioni 1 e 2. Qui vive SOLO il CSS specifico di questa pagina. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Hero con scheda della richiesta ---------- */ /* Nella finestra dell'hero la barra e' tutta in ink-2 */ .p-home-care .hero-in .app-bar { color: var(--ink-2); } /* Figura più larga della base */ .p-home-care .hc-fig { width: min(100%, 460px); } /* Specchietto proprio della pagina (12 agosto): la mappa di assegnazione in finestra chiara, con la richiesta appoggiata */ .p-home-care .hc-map { position: relative; min-height: 250px; background: var(--bg); } .p-home-care .hc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; } .p-home-care .hc-map figcaption { position: absolute; right: 12px; bottom: 8px; font-size: 0.7rem; color: var(--ink-3); } .p-home-care .hc-req { display: flex; align-items: center; gap: var(--space-3); padding: 15px 20px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-2); } .p-home-care .hc-req i { flex: none; font-size: 1.1rem; color: var(--accent); } .p-home-care .hc-req b { display: block; font-size: 0.95rem; color: var(--ink); } .p-home-care .hc-req .det { display: block; margin-top: 1px; font-size: 0.8rem; color: var(--ink-3); } .p-home-care .hc-req .pill { margin-left: auto; flex: none; } /* ---------- Reti di punti fisici: il flusso B2B2C ---------- */ .p-home-care .b2b-band .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } /* Diagramma: punto di accesso, coordinamento, casa del paziente */ .p-home-care .b2b-fig { justify-self: end; display: grid; gap: var(--space-4); width: min(100%, 380px); } .p-home-care .b2b-step { display: flex; align-items: center; gap: var(--space-4); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) 20px; } .p-home-care .b2b-step .punto { flex: none; } .p-home-care .b2b-step:nth-child(3) .punto { background: var(--tint-2); animation-delay: -1.5s; } .p-home-care .b2b-step:nth-child(5) .punto { background: var(--tint-3); animation-delay: -3s; } .p-home-care .b2b-step b { display: block; font-size: 1rem; color: var(--ink); } .p-home-care .b2b-step span { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--ink-3); } .p-home-care .b2b-arrow { justify-self: center; color: var(--accent); font-size: 1.3rem; line-height: 1; } @media (max-width: 1000px) { .p-home-care .b2b-band .wrap { grid-template-columns: minmax(0, 1fr); } .p-home-care .b2b-fig { justify-self: start; } } /* ---------- Copertura e numeri ---------- */ .p-home-care .rete .coverage { margin-top: 22px; font-size: 1.05rem; color: var(--ink-2); max-width: 56ch; } /* ------------------------------------------------------------ .p-home (index.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Homepage Design system: Kit 7 "Impronta", token e componenti nelle sezioni 1 e 2 di questo file. Qui vive SOLO il CSS specifico di questa pagina. Regole vincolanti: docs/REGOLE.md. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Hero ---------- */ .p-home .hero { border-bottom: 1px solid var(--line); } .p-home .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(64px, 9vw, 124px); } .p-home .hero h1 { font-size: var(--text-4xl); line-height: 1.06; letter-spacing: -0.02em; max-width: 17ch; } .p-home .hero .sub { margin-top: 20px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); } /* L'hero della home e' piu' alto: le CTA staccano di piu' */ .p-home .hero-cta { margin-top: var(--space-6); } /* Collage: maschera amorfa (segnaposto foto) + scheda progetto + punto */ .p-home .hero-fig { position: relative; justify-self: end; width: min(100%, 470px); } .p-home .hero-blob { top: -9%; right: -14%; width: 112%; } .p-home .hero-dot { position: absolute; left: -26px; bottom: 34px; z-index: 2; width: 46px; height: 46px; background: var(--accent-2); border-radius: 58% 42% 62% 38% / 55% 48% 52% 45%; } /* ---------- Posizionamento: pilastri ---------- */ /* Chiude i tre pilastri: stacca piu' delle altre */ .p-home .pos-close { margin-top: clamp(36px, 5vw, 56px); } /* ---------- Piattaforma + 5 fasi ---------- */ .p-home .platform .btn { margin-top: var(--space-5); } @media (max-width: 1000px) { .p-home .platform .wrap { grid-template-columns: minmax(0, 1fr); } .p-home .app-cols { grid-template-columns: minmax(0, 1fr); } } /* ---------- Ecosistema: maschere amorfe ---------- */ .p-home .eco-grid { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .p-home .eco-fig { position: relative; max-width: 340px; } .p-home .eco-fig svg { display: block; width: 100%; height: auto; overflow: visible; } .p-home .eco-fig path { transform-box: fill-box; transform-origin: center; animation: breathe 5s ease-in-out infinite alternate; } .p-home .eco-tile:nth-child(2n) .eco-fig path { animation-delay: -1.8s; } .p-home .eco-tile:nth-child(3n) .eco-fig path { animation-delay: -3.4s; } .p-home .eco-tile h3 { font-size: 1.12rem; margin-top: 18px; } .p-home .eco-tile p { margin-top: var(--space-2); font-size: 0.93rem; color: var(--ink-2); max-width: 40ch; } .p-home .eco-tile p b { color: var(--ink); font-weight: 600; } @media (min-width: 1000px) { .p-home .eco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- Rete: mappa + numeri ---------- */ .p-home .coverage { margin-top: 22px; font-size: 1.05rem; color: var(--ink-2); max-width: 46ch; } .p-home .net { position: relative; justify-self: end; width: min(100%, 440px); } .p-home .net svg { display: block; width: 100%; height: auto; } @media (max-width: 900px) { .p-home .rete-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- Qualità ---------- */ .p-home .quality .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 88px); align-items: start; } .p-home .quality .btn { margin-top: 28px; } @media (max-width: 980px) { .p-home .quality .wrap { grid-template-columns: minmax(0, 1fr); } } /* ---------- CTA finale ---------- */ /* Colonne piu' distanti e banda piu' alta */ .p-home .final .wrap { gap: clamp(36px, 5vw, 80px); padding-block: clamp(72px, 10vw, 132px); } .p-home .final h2 { color: var(--on-accent); font-size: var(--text-3xl); line-height: 1.1; max-width: 18ch; } .p-home .final .wrap > div > p { margin-top: 18px; max-width: 56ch; font-size: 1.08rem; line-height: 1.6; color: var(--on-accent-soft); } @media (max-width: 980px) { .p-home .final .wrap { grid-template-columns: minmax(0, 1fr); } } /* ---------- Motion di pagina: coreografia del hero ---------- */ .p-home .hero-dot { animation: rise 0.5s var(--ease) 640ms backwards, morph 4s ease-in-out 1.4s infinite alternate; } @media (prefers-reduced-motion: reduce) { .p-home .hero-dot, .p-home .eco-fig path { animation: none !important; } } /* Numeri allineati come nella striscia dei contatori */ .p-home .mockup .row b { text-align: start; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ .p-iso-9001-27001 (iso-9001-27001.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Politica integrata ISO 9001 e ISO 27001 Design system: token e componenti nelle sezioni 1 e 2. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Copertura del sistema ---------- */ /* La banda segue il page-hero, che ha già la sua riga di chiusura */ .p-iso-9001-27001 .page-hero + .band { border-top: none; } /* ------------------------------------------------------------ .p-lavora-con-noi (lavora-con-noi.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Lavora con noi SOLO per i professionisti sanitari della rete (Andrea, 12 agosto: niente team interno né posizioni d'ufficio). NIENTE form di registrazione sul sito vetrina: si compila tutto sulla piattaforma dei professionisti (pro.pharmacare.srl/index.php/ site/Create, URL che Andrea ripulirà più avanti). Design system: token e componenti nelle sezioni 1 e 2. Qui vive SOLO il CSS specifico di questa pagina. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Hero con scheda del profilo in rete ---------- */ /* Il telefono è stretto e sta al centro della colonna */ .p-lavora-con-noi .lcn-fig { width: min(100%, 400px); display: grid; justify-items: center; } .p-lavora-con-noi .lcn-blob { top: -8%; right: -10%; width: 108%; } /* Specchietto proprio della pagina (12 agosto): lo schermo dell'app con la notifica push in evidenza, il momento vero della vita in rete */ .p-lavora-con-noi .lcn-phone { position: relative; z-index: 1; width: min(100%, 270px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: clip; } .p-lavora-con-noi .lcn-pbar { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; color: var(--ink-3); } /* Il tabular serve solo all'orologio: sul testo allarga gli spazi */ .p-lavora-con-noi .lcn-pbar span:last-child { font-variant-numeric: tabular-nums; } .p-lavora-con-noi .lcn-push { margin: 14px; padding: 14px; background: var(--accent); color: var(--on-accent); border-radius: var(--radius-s); box-shadow: var(--shadow-1); display: flex; gap: 10px; align-items: flex-start; } .p-lavora-con-noi .lcn-push i { flex: none; color: var(--accent-2); font-size: 1.1rem; margin-top: 1px; } .p-lavora-con-noi .lcn-push b { display: block; font-size: 0.85rem; } .p-lavora-con-noi .lcn-push span { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--on-accent-body); } .p-lavora-con-noi .lcn-rows { padding: 0 14px 12px; display: grid; gap: 8px; } .p-lavora-con-noi .lcn-row { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 0.75rem; color: var(--ink-2); } .p-lavora-con-noi .lcn-row time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .p-lavora-con-noi .lcn-tabs { display: flex; justify-content: space-around; border-top: 1px solid var(--line); padding: 10px 0; color: var(--ink-3); font-size: 1.05rem; } .p-lavora-con-noi .lcn-tabs i.on { color: var(--accent); } /* ---------- Requisiti ---------- */ /* Due colonne piene, specchiate rispetto alla sezione registrazione che segue: lista a sinistra, titolo e chiusura a destra */ .p-lavora-con-noi .req .req-testo { grid-column: 2; grid-row: 1; } .p-lavora-con-noi .req .qlist { grid-column: 1; grid-row: 1; margin-top: var(--space-2); } @media (max-width: 1000px) { .p-lavora-con-noi .req .wrap { grid-template-columns: minmax(0, 1fr); } .p-lavora-con-noi .req .req-testo { grid-column: 1; } .p-lavora-con-noi .req .qlist { grid-row: 2; margin-top: var(--space-3); } } /* ---------- App per professionisti ---------- */ .p-lavora-con-noi .app-band .pill { margin-bottom: var(--space-4); } /* Schermata dell'app: stessa ricetta della finestra piattaforma, in verticale */ /* La finestra dell'app è più stretta */ .p-lavora-con-noi .app-fig { width: min(100%, 320px); } /* La finestra sta sopra il blob */ .p-lavora-con-noi .app { position: relative; z-index: 1; } .p-lavora-con-noi .app-blob { top: -12%; right: -16%; width: 120%; } @media (max-width: 1000px) { .p-lavora-con-noi .app-band .wrap { grid-template-columns: minmax(0, 1fr); } .p-lavora-con-noi .app-fig { justify-self: start; } } /* ---------- Registrazione: banda finale verso pro.pharmacare ---------- */ /* NIENTE form sul sito vetrina (Andrea, 12 agosto): la registrazione si compila sulla piattaforma dei professionisti */ /* Chiusura centrata: senza il form la colonna sinistra da sola lasciava mezza banda vuota */ /* La finestra e' larga 320px: righe piu' comode e nessun troncamento */ .p-lavora-con-noi .appt { padding: 14px 20px; } .p-lavora-con-noi .appt .who { overflow: visible; text-overflow: clip; white-space: normal; } .p-lavora-con-noi .appt .pill { margin-bottom: 0; } /* ------------------------------------------------------------ .p-patient-support-program (patient-support-program.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Patient Support Program Prima pagina Soluzioni della fase 3: il suo hero con kicker e scheda è il modello per le altre cinque (le pagine legali restano sul pattern crumbs della pagina ISO). Design system: token e componenti nelle sezioni 1 e 2. Qui vive SOLO il CSS specifico di questa pagina. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Processo: i tre pilastri del modello ---------- */ .p-patient-support-program .proc-close { margin-top: clamp(36px, 5vw, 56px); max-width: 68ch; font-size: 1.05rem; color: var(--ink-2); } /* ---------- Piattaforma: i moduli del programma ---------- */ /* Stessa ricetta della finestra piattaforma della homepage */ .p-patient-support-program .mods { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .p-patient-support-program .mod { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; } .p-patient-support-program .mod i { font-size: 1.2rem; color: var(--accent); } .p-patient-support-program .mod b { display: block; margin-top: var(--space-2); font-size: 0.85rem; font-weight: 600; color: var(--ink); } .p-patient-support-program .mod span { display: block; margin-top: 2px; font-size: 0.75rem; line-height: 1.45; color: var(--ink-3); } @media (max-width: 1000px) { .p-patient-support-program .mods-band .wrap { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .p-patient-support-program .mods { grid-template-columns: minmax(0, 1fr); } } /* ---------- Compliance della rete ---------- */ .p-patient-support-program .comp-chips { margin-top: clamp(24px, 3vw, 34px); max-width: 460px; } /* Valori testuali multi-parola: il tabular-nums del chip di sistema allarga anche gli spazi alla larghezza cifra, qui non serve */ .p-patient-support-program .comp .btn { margin-top: var(--space-6); } .p-patient-support-program .doss { justify-self: end; width: min(100%, 460px); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); overflow: clip; } .p-patient-support-program .doss header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) 20px; border-bottom: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); } .p-patient-support-program .doss-row { display: flex; align-items: center; gap: var(--space-3); padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-2); } .p-patient-support-program .doss-row i { flex: none; font-size: 1.1rem; color: var(--accent); } .p-patient-support-program .doss-row .who { flex: 1; min-width: 0; } .p-patient-support-program .doss-row .pill { margin-left: auto; flex: none; } .p-patient-support-program .doss-note { display: flex; align-items: flex-start; gap: var(--space-3); padding: 15px 20px; font-size: 0.85rem; line-height: 1.5; color: var(--ink-2); background: var(--bg); } .p-patient-support-program .doss-note i { flex: none; font-size: 1.05rem; color: var(--accent); margin-top: 1px; } @media (max-width: 980px) { .p-patient-support-program .comp .wrap { grid-template-columns: minmax(0, 1fr); } .p-patient-support-program .doss { justify-self: start; } } /* ---------- Esperienza e numeri ---------- */ /* Testo e scenari su due colonne piene: la lista a 860px lasciava un terzo di sezione vuoto a destra. I numeri sotto, a tutta riga. */ .p-patient-support-program .exp .exp-testa { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .p-patient-support-program .exp .sec-lead { max-width: 44ch; } .p-patient-support-program .exp .qlist { margin-top: var(--space-2); } @media (max-width: 1000px) { .p-patient-support-program .exp .exp-testa { grid-template-columns: minmax(0, 1fr); } .p-patient-support-program .exp .qlist { margin-top: var(--space-3); } } /* ------------------------------------------------------------ .p-piattaforma (piattaforma.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Piattaforma La pagina più importante dopo homepage e PSP: assorbe "Come lavoriamo" (le 5 fasi come spina dorsale, col pannello di fase sincronizzato al rail). Non è un SaaS standalone: è l'infrastruttura con cui PharmaCare esegue i progetti. Qui vive SOLO il CSS specifico di questa pagina. Ordine: sezioni nell'ordine di pagina, motion, reduced-motion. ============================================================ */ /* ---------- Hero con finestra operations ---------- */ /* Colonne uguali invece di 1.05/0.95: la finestra operations e' larga. Solo sopra i 900px, sotto vale il collasso del componente */ @media (min-width: 901px) { .p-piattaforma .pl-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Figura più larga della base */ .p-piattaforma .pl-fig { width: min(100%, 500px); } .p-piattaforma .pl-blob { top: -10%; right: -10%; width: 112%; } /* La finestra sta sopra il blob */ .p-piattaforma .app { position: relative; z-index: 1; } /* ---------- Costruita per eseguire ---------- */ .p-piattaforma .exe .sec-lead { max-width: 68ch; } /* ---------- Le cinque fasi: rail + pannello di fase ---------- */ /* Il pannello resta agganciato mentre il rail avanza */ .p-piattaforma .fase-card { position: sticky; top: 100px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); padding: clamp(26px, 3.4vw, 40px); } .p-piattaforma .fase-card .fase-n { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .p-piattaforma .fase-card h3 { margin-top: var(--space-2); font-size: 1.35rem; } .p-piattaforma .fase-card .fase-label { display: block; margin-top: var(--space-5); font-size: 0.8rem; font-weight: 600; color: var(--ink-3); } .p-piattaforma .fase-card p { margin-top: var(--space-2); font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 48ch; } .p-piattaforma .fase-card.in { animation: rise 0.45s var(--ease) backwards; } @media (max-width: 1000px) { .p-piattaforma .modello .wrap { grid-template-columns: minmax(0, 1fr); } .p-piattaforma .fase-card { position: static; } } /* ---------- Oltre il workflow ---------- */ /* Registro su due colonne piene: in colonna singola a 860px restava un terzo di sezione vuoto a destra */ .p-piattaforma .oltre .qlist { margin-top: clamp(32px, 4vw, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); } .p-piattaforma .oltre .qitem:nth-child(2) { border-top: 1px solid var(--line); } @media (max-width: 900px) { .p-piattaforma .oltre .qlist { grid-template-columns: minmax(0, 1fr); } .p-piattaforma .oltre .qitem:nth-child(2) { border-top: none; } } /* ---------- Integrazione e ambienti dedicati ---------- */ .p-piattaforma .silos .sec-lead { max-width: 68ch; } /* ---------- Sicurezza e proof ---------- */ /* Testo a sinistra, chips a destra su due colonne piene: impilati in colonna unica lasciavano un terzo di sezione vuoto */ /* Valori testuali multi-parola: senza tabular-nums (nota in HANDOFF) */ .p-piattaforma .nums .anno { font-variant-numeric: normal; } .p-piattaforma .sicurezza .btn { margin-top: var(--space-6); } @media (max-width: 900px) { .p-piattaforma .sicurezza .sic-testa { grid-template-columns: minmax(0, 1fr); } } /* ---------- Motion di pagina ---------- */ @media (prefers-reduced-motion: reduce) { .p-piattaforma .fase-card.in { animation: none; } } /* ------------------------------------------------------------ .p-ricerca-clinica-rwe (ricerca-clinica-rwe.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Ricerca clinica e Real World Evidence La pagina più prudente (ARGOMENTI sez. 5: nessun modulo dedicato, capacità reali sì): PharmaCare NON si presenta come CRO, il ruolo resta circoscritto alle operations territoriali. Chiude col form condiviso. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Hero con scheda delle attività ---------- */ /* Nella finestra dell'hero la barra e' tutta in ink-2 */ .p-ricerca-clinica-rwe .hero-in .app-bar { color: var(--ink-2); } /* Specchietto proprio della pagina (12 agosto): survey completate per centro, dataviz sobrio su finestra chiara */ .p-ricerca-clinica-rwe .rc-body { padding: 18px 20px; } .p-ricerca-clinica-rwe .rc-rows { margin-top: 12px; display: grid; gap: 12px; } .p-ricerca-clinica-rwe .rc-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) 36px; gap: 10px; align-items: center; } .p-ricerca-clinica-rwe .rc-row b { font-size: 0.78rem; font-weight: 600; color: var(--ink); } .p-ricerca-clinica-rwe .rc-track { display: block; height: 8px; background: var(--bg-3); border-radius: var(--radius-s); overflow: hidden; } .p-ricerca-clinica-rwe .rc-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; } .p-ricerca-clinica-rwe .rc-fill.w1 { width: 82%; } .p-ricerca-clinica-rwe .rc-fill.w2 { width: 64%; } .p-ricerca-clinica-rwe .rc-fill.w3 { width: 58%; } .p-ricerca-clinica-rwe .rc-fill.w4 { width: 41%; } .p-ricerca-clinica-rwe .rc-row .val { text-align: right; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .p-ricerca-clinica-rwe .rc-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-2); } .p-ricerca-clinica-rwe .rc-foot i { color: var(--accent); } .p-ricerca-clinica-rwe .rc-foot .pill { margin-left: auto; } /* ---------- Quando lo studio esce dal centro ---------- */ .p-ricerca-clinica-rwe .fuori .sec-lead { max-width: 68ch; } /* ------------------------------------------------------------ .p-servizi-a-domicilio (servizi-a-domicilio.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Servizi a domicilio (la pagina per i cittadini) Presidio, non acquisizione (decisione del 10 agosto): la pagina serve a chi sente "viene un infermiere di PharmaCare" e cerca il nome. FUORI dal menu: si raggiunge da Accedi, dal footer e dai motori di ricerca. NIENTE prezzi (vivono in piattaforma), NIENTE form e niente telefono come CTA (Andrea, 12 agosto): il cittadino si registra e accede in autonomia dalla piattaforma, il telefono resta solo nel blocco assistenza in fondo. Design system: token e componenti nelle sezioni 1 e 2. ============================================================ */ /* ---------- Prestazioni ---------- */ /* Registro su due colonne piene: in colonna singola a 820px restava un terzo di sezione vuoto a destra */ .p-servizi-a-domicilio .serv .qlist { margin-top: clamp(32px, 4vw, 48px); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); } .p-servizi-a-domicilio .serv .qitem:nth-child(2) { border-top: 1px solid var(--line); } .p-servizi-a-domicilio .serv .qitem:nth-last-child(2) { border-bottom: none; } @media (max-width: 900px) { .p-servizi-a-domicilio .serv .qlist { grid-template-columns: minmax(0, 1fr); } .p-servizi-a-domicilio .serv .qitem:nth-child(2) { border-top: none; } .p-servizi-a-domicilio .serv .qitem:nth-last-child(2) { border-bottom: 1px solid var(--line); } } .p-servizi-a-domicilio .serv-close { margin-top: clamp(24px, 3vw, 34px); max-width: 62ch; font-size: 1.02rem; color: var(--ink-2); } /* ---------- Chi viene a casa tua ---------- */ /* Testo a sinistra, chips a destra: impilati in colonna unica lasciavano mezza sezione vuota */ @media (max-width: 900px) { .p-servizi-a-domicilio .chi .wrap { grid-template-columns: minmax(0, 1fr); } } /* ---------- Piattaforma e aiuto ---------- */ /* Chiusura centrata: la colonna sinistra da sola lasciava mezza banda vuota */ /* Banda un filo piu' bassa e testo un filo piu' piccolo */ .p-servizi-a-domicilio .final.centrata .wrap { padding-block: clamp(64px, 9vw, 116px); } .p-servizi-a-domicilio .final.centrata p { font-size: 1.05rem; } /* ------------------------------------------------------------ .p-strutture-sanitarie (strutture-sanitarie.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Servizi per strutture sanitarie Pagina breve di capacità (ARGOMENTI sez. 5: volumi correnti marginali, si racconta la capacità senza promesse generiche di fornitura personale). Chiude col form condiviso. Qui vive SOLO il CSS specifico di questa pagina. ============================================================ */ /* ---------- Hero con scheda del servizio ---------- */ /* Nella finestra dell'hero la barra e' tutta in ink-2 */ .p-strutture-sanitarie .hero-in .app-bar { color: var(--ink-2); } /* Figura più larga della base */ .p-strutture-sanitarie .sol-fig { width: min(100%, 460px); } /* Specchietto proprio della pagina (12 agosto): l'agenda operativa dei turni, il visual suggerito dal file contenuti */ .p-strutture-sanitarie .st-row { display: flex; align-items: center; gap: var(--space-3); padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); } .p-strutture-sanitarie .st-row b { flex: none; width: 108px; font-size: 0.82rem; color: var(--ink); font-weight: 600; } .p-strutture-sanitarie .st-row .who { flex: 1; min-width: 0; } .p-strutture-sanitarie .st-row .pill { margin-left: auto; flex: none; } .p-strutture-sanitarie .st-note { display: flex; align-items: center; gap: 10px; padding: 13px 20px; background: var(--bg); font-size: 0.8rem; color: var(--ink-3); } .p-strutture-sanitarie .st-note i { color: var(--accent); } /* ---------- Ambiti di supporto ---------- */ /* Quattro voci, non sei: due colonne su misura ridotta, e la griglia regge fino a 720px invece degli 860 del componente */ .p-strutture-sanitarie .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; } @media (max-width: 860px) { .p-strutture-sanitarie .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) clamp(20px, 3vw, 40px); } .p-strutture-sanitarie .cap { padding-block: var(--space-4) 0; } } @media (max-width: 720px) { .p-strutture-sanitarie .cap-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .p-strutture-sanitarie .cap { padding-block: var(--space-4) var(--space-5); } } /* ---------- Selezione e coordinamento ---------- */ /* Due colonne piene: senza, la lista a 820px lasciava un terzo di sezione vuoto a destra */ .p-strutture-sanitarie .sel .sec-lead { max-width: 48ch; } .p-strutture-sanitarie .sel .qlist { margin-top: var(--space-2); } @media (max-width: 1000px) { .p-strutture-sanitarie .sel .wrap { grid-template-columns: minmax(0, 1fr); } .p-strutture-sanitarie .sel .qlist { margin-top: var(--space-3); } } /* ------------------------------------------------------------ .p-termini (termini.php) ------------------------------------------------------------ */ /* ============================================================ PharmaCare · Termini di utilizzo del sito Pagina legale sul pattern crumbs (come privacy e cookie). BOZZA EDITORIALE da Struttura_pagine_MD/12: le clausole restano da validare con il legale prima della pubblicazione, l'alert in testa lo dice apertamente. Design system: token e componenti nelle sezioni 1 e 2. ============================================================ */ .p-termini .doc .addr { margin-top: var(--space-4); }