/* ════════════════════════════════════════════════════════════════════════ NOTA DI REPARTO — blocco SEO condiviso (pagine categoria + pagine prodotto) ════════════════════════════════════════════════════════════════════════ Il trattamento del testo SEO nato sulle pagine categoria: filetto verticale accanto al testo, occhiello "● Nota di reparto · ", titolo display, corpo con i contatti in evidenza, e l'accordion FAQ a lato. Le regole stavano in css/categoria-stampa.css (scoped .vb-cat); dal 03/08/2026 vivono QUI e da nessun'altra parte, perche' le usano due pagine: · pagina categoria — includes/pagina-categoria.php (sezione .cat-seo) · pagina prodotto — templates/stampa-config.php (griglia .prod-seo-grid) Le 7 pagine prodotto statiche (.html) sono segnaposto destinati al motore dinamico: quando verranno convertite, caricando questo file il trattamento arriva da solo — non si riscrive. COSA STA QUI E COSA NO qui → il COMPONENTE: colonna testo (.cat-seo-inner e figli) e accordion FAQ (.cat-seo-faq e figli). Tutto pilotato da --cat-accent. NO → la cornice di pagina: sezione .cat-seo (padding, border-top, gradiente) e griglia .cat-seo-grid restano in categoria-stampa.css; il separatore e la griglia .prod-seo-grid restano in prodotto-vb-2.css. Le due cornici hanno misure diverse per scelta: non sono copie. --cat-accent lo imposta la pagina: la categoria sul , il prodotto sul wrapper della griglia (colore della categoria del prodotto, stessa fonte: ivac_categoria_accento). Senza accento il filetto sparirebbe: le due pagine lo garantiscono sempre, con il ripiego di includes/categoria-dati.php. I token (--f-mono/--f-display/--f-ui, --text-*, --border*, --bg-card, --r-sm) vengono dal :root globale di css/style.css, caricato prima di questo file. ════════════════════════════════════════════════════════════════════════ */ /* ─── Colonna testo: filetto, occhiello, titolo, corpo ─────────────────── */ .cat-seo-inner { position: relative; padding-left: 1.6rem; } .cat-seo-inner::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--cat-accent), transparent); } .cat-seo-eyebrow { display: flex; align-items: center; gap: .55rem; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .9rem; } .cat-seo-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cat-accent); flex: 0 0 auto; } .cat-seo-title { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.55rem, 3.6vw, 2.25rem); line-height: 1.08; letter-spacing: .01em; color: #fff; margin: 0 0 1.1rem; } .cat-seo-body p { font-family: var(--f-ui); font-size: .95rem; line-height: 1.72; color: var(--text-2); margin: 0 0 1rem; max-width: 70ch; } .cat-seo-body p:last-child { margin: 0; } /* I contatti in evidenza: telefono ed email nel corpo sono (scritti nel testo o auto-linkati da ivac_seo_autolink) e prendono questa veste. */ .cat-seo-body a { font-family: var(--f-mono); font-size: .9em; letter-spacing: .02em; color: var(--cat-accent); text-decoration: none; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--cat-accent) 38%, transparent); transition: border-color .15s; } @media (hover: hover) { .cat-seo-body a:hover { border-bottom-color: var(--cat-accent); } } /* ─── FAQ: accordion

nativi (zero JS), accento = --cat-accent ─── */ .cat-seo-faq { align-self: start; } .cat-seo-faq-label { display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); border-left: 3px solid var(--cat-accent); padding: .3rem 0 .3rem .7rem; margin: 0 0 1.1rem; } .cat-seo-faq-item { background: var(--bg-card); border: 1px solid var(--border-2); border-radius: var(--r-sm, 6px); margin-bottom: .6rem; transition: border-color .18s; } .cat-seo-faq-item:last-child { margin-bottom: 0; } .cat-seo-faq-item[open] { border-color: var(--cat-accent); } @media (hover: hover) { .cat-seo-faq-item:hover { border-color: var(--cat-accent); } } .cat-seo-faq-item summary { display: flex; align-items: center; gap: .7rem; list-style: none; cursor: pointer; padding: .85rem .95rem; font-family: var(--f-ui); font-size: .86rem; font-weight: 600; line-height: 1.35; color: #fff; transition: color .18s; } .cat-seo-faq-item summary::-webkit-details-marker { display: none; } .cat-seo-faq-item[open] summary { color: var(--cat-accent); } @media (hover: hover) { .cat-seo-faq-item summary:hover { color: var(--cat-accent); } } .cat-seo-faq-item summary:focus-visible { outline: 2px solid var(--cat-accent); outline-offset: -2px; border-radius: var(--r-sm, 6px); } /* Marker +/× : il "+" ruota di 45° in stato [open] */ .cat-seo-faq-item summary::after { content: '+'; margin-left: auto; flex-shrink: 0; font-family: var(--f-mono); font-size: 1.15rem; font-weight: 400; line-height: 1; color: var(--cat-accent); transition: transform .22s ease; } .cat-seo-faq-item[open] summary::after { transform: rotate(45deg); } .cat-seo-faq-answer { margin: 0 .95rem; padding: .8rem 0 .9rem; border-top: 1px solid var(--border); font-family: var(--f-ui); font-size: .82rem; line-height: 1.6; color: var(--text-2); } /* MOBILE (≤767): il filetto si stringe col resto della pagina */ @media (max-width: 767px) { .cat-seo-inner { padding-left: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .cat-seo-faq-item summary::after { transition: none; } }