/* ========================================================================= FORTOP HTML CLEANUP · stylesheet di compatibilità Stila i tag introdotti dalla bonifica (details, fortop-faq, key-point, callout) sul tema legacy dark di fortop.it. Caricato dal plugin nel del frontend. ========================================================================= */ /* ---- Variabili dark (compat col tema legacy) ---- */ .fortop-faq, .fortop-article-wrapper details, .fortop-article-wrapper .key-point, .fortop-article-wrapper .callout { --ftp-green: #20D81C; --ftp-dark: #0a0a0a; --ftp-line: rgba(255,255,255,0.1); --ftp-text: #e5e7eb; --ftp-text-strong: #fff; --ftp-mute: #9ca3af; } /* ============================================================ ACCORDION FAQ —
+ ============================================================ */ details.fortop-detail, .fortop-faq details, article details { background: var(--ftp-dark, #0a0a0a); border: 1px solid var(--ftp-line, rgba(255,255,255,0.1)); border-radius: 4px; margin: 12px 0; overflow: hidden; transition: border-color 0.2s ease; } article details:hover, .fortop-faq details:hover { border-color: var(--ftp-green, #20D81C); } article details[open], .fortop-faq details[open] { border-color: var(--ftp-green, #20D81C); } article details summary, .fortop-faq details summary { cursor: pointer; padding: 18px 22px; font-size: 1.05rem; font-weight: 600; color: var(--ftp-text-strong, #fff); list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; transition: color 0.2s ease; } article details summary::-webkit-details-marker, .fortop-faq details summary::-webkit-details-marker { display: none; } /* Icona + */ article details summary::after, .fortop-faq details summary::after { content: ''; flex-shrink: 0; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320D81C' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform 0.2s ease; margin-top: 2px; } article details[open] summary::after, .fortop-faq details[open] summary::after { transform: rotate(45deg); } article details summary:hover, .fortop-faq details summary:hover { color: var(--ftp-green, #20D81C); } article details > *:not(summary), .fortop-faq details > *:not(summary) { padding: 0 22px 18px; } article details p, .fortop-faq details p { font-size: 1rem; line-height: 1.7; color: var(--ftp-text, #e5e7eb); margin: 0 0 12px; } article details p:last-child, .fortop-faq details p:last-child { margin-bottom: 0; } /* Wrapper FAQ group */ .fortop-faq { margin: 32px 0; } .fortop-faq__title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ftp-green, #20D81C); margin-bottom: 16px; } /* ============================================================ KEY-POINT BOX ============================================================ */ article .key-point, .fortop-article-wrapper .key-point { border-left: 3px solid var(--ftp-green, #20D81C); padding: 12px 0 12px 20px; margin: 24px 0; background: linear-gradient(90deg, rgba(32, 216, 28, 0.05) 0%, transparent 100%); } article .key-point h4, .fortop-article-wrapper .key-point h4 { color: var(--ftp-green, #20D81C); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 700; margin: 0 0 6px; } article .key-point p, .fortop-article-wrapper .key-point p { margin: 0; color: var(--ftp-text, #e5e7eb); } /* ============================================================ CALLOUT BOX ============================================================ */ article .callout, .fortop-article-wrapper .callout { background: var(--ftp-dark, #0a0a0a); border: 1px solid var(--ftp-line, rgba(255,255,255,0.1)); border-left: 3px solid var(--ftp-green, #20D81C); padding: 20px 24px; margin: 28px 0; border-radius: 4px; font-size: 1rem; line-height: 1.8; color: var(--ftp-text-strong, #fff); font-style: normal; } article .callout p, .fortop-article-wrapper .callout p { margin: 0 0 12px; color: inherit; } article .callout p:last-child, .fortop-article-wrapper .callout p:last-child { margin-bottom: 0; } /* ============================================================ HELPER CLASSES (compat) ============================================================ */ article .green, article .text-fortop-green, article .text-brand, .fortop-article-wrapper .green, .fortop-article-wrapper .text-fortop-green, .fortop-article-wrapper .text-brand { color: var(--ftp-green, #20D81C); } article .text-muted, .fortop-article-wrapper .text-muted { color: var(--ftp-mute, #9ca3af); } /* Linea verde decorativa */ article hr.green-bar, article .green-bar, .fortop-article-wrapper hr.green-bar, .fortop-article-wrapper .green-bar { display: block; width: 80px; height: 4px; background: var(--ftp-green, #20D81C); border: none; margin: 32px 0; }