/* ══════════════════════════════════════════════════════════════════════ share.css — "Condividi su…" nel brand-footer ---------------------------------------------------------------------- Pattern di condivisione in stile Designers Italia (non esiste un componente DSI ad-hoc: ricostruito con i token --it-* e l'icona it-share del design system). Il pulsante vive nella .footer-legal, a destra di "Aggiornato a …". Il menu si apre VERSO L'ALTO (il footer è in fondo alla pagina). I contenuti condivisi (titolo, descrizione, immagine OG) sono letti dai meta Open Graph della pagina, così ogni pagina condivide la propria OG card. Markup iniettato da share.js. ════════════════════════════════════════════════════════════════════ */ /* area destra della footer-legal: data + pulsante condividi */ .ie-share-area { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); flex-wrap: wrap; } .ie-share-area > span { white-space: nowrap; } /* wrapper posizionante del pulsante + menu */ .ie-share { position: relative; display: inline-flex; } /* ─── trigger "Condividi" (ghost button bianco su navy) ──────────────── */ .ie-share-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--it-font-sans); font-size: clamp(12px, 0.85vw, 13px); font-weight: var(--it-font-weight-semibold); line-height: 1; color: var(--it-color-white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.40); border-radius: var(--it-radius-smooth); padding: 7px 13px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; -webkit-appearance: none; appearance: none; } .ie-share-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.70); } .ie-share-btn:active { background: rgba(255, 255, 255, 0.18); } .ie-share-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--it-color-blue-20), 0 0 0 4px var(--it-color-white); } .ie-share-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.70); } .ie-share-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; } .ie-share-btn .ie-share-btn-label { letter-spacing: 0.01em; } /* ─── menu (popover) ─────────────────────────────────────────────────── */ /* NB: il menu è figlio diretto di (NON della .page) e usa position:fixed con coordinate calcolate in JS. Questo è obbligatorio: la .page applica mix-blend-mode:multiply, che renderebbe "invisibile" (fuso col fondo) qualsiasi superficie bianca al suo interno. */ .ie-share-menu { position: fixed; z-index: 1200; min-width: 244px; background: var(--it-color-white); border: 1px solid var(--it-color-slate-93); border-radius: var(--it-radius-smooth); box-shadow: var(--it-elevation-high); padding: 8px; display: none; /* stato chiuso */ } .ie-share-menu.is-open { display: block; /* stato aperto */ } /* freccetta che punta al pulsante (posizione orizzontale via --ie-arrow-x) */ .ie-share-menu::after { content: ""; position: absolute; top: 100%; left: var(--ie-arrow-x, 200px); width: 12px; height: 12px; background: var(--it-color-white); border-right: 1px solid var(--it-color-slate-93); border-bottom: 1px solid var(--it-color-slate-93); transform: translate(-50%, -50%) rotate(45deg); } .ie-share-menu.ie-share-menu--below::after { top: -1px; border: none; border-left: 1px solid var(--it-color-slate-93); border-top: 1px solid var(--it-color-slate-93); } .ie-share-menu-head { font-size: 11px; font-weight: var(--it-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--it-color-slate-52); padding: 6px 10px 8px; } .ie-share-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; border-radius: var(--it-radius-smooth); background: transparent; font-family: var(--it-font-sans); font-size: 14px; font-weight: var(--it-font-weight-regular); line-height: 1.2; color: var(--it-color-slate-20); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease; -webkit-appearance: none; appearance: none; } .ie-share-item:hover { background: var(--it-color-gray-96); color: var(--it-color-blue-40); } .ie-share-item:focus-visible { outline: none; background: var(--it-color-gray-96); box-shadow: 0 0 0 2px var(--it-color-blue-40) inset; } .ie-share-item .ie-share-ico { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--it-color-slate-28); transition: color .15s ease; } .ie-share-item:hover .ie-share-ico { color: var(--it-color-blue-40); } .ie-share-item .ie-share-ico svg { width: 20px; height: 20px; fill: currentColor; } /* separatore prima di "Copia link" */ .ie-share-sep { height: 1px; background: var(--it-color-slate-93); margin: 6px 4px; } /* stato "Link copiato" */ .ie-share-copy.is-copied { color: var(--it-color-text-success); } .ie-share-copy.is-copied .ie-share-ico { color: var(--it-color-text-success); } /* ─── responsive: schermi stretti ──────────────────────────────────── */ @media (max-width: 900px) { .ie-share-area { margin-left: 0; width: 100%; justify-content: space-between; } } /* ─── stampa: niente pulsante condividi nel PDF ─────────────────────── */ @media print { .ie-share, .ie-share-menu { display: none !important; } }