/** * Quiz Naturopatia Pro - Frontend Styles * Versione: 3.9.4 — Apple-style redesign * * Design language: * - Tipografia: SF Pro stack (-apple-system, BlinkMacSystemFont) * - Container: card con gradient grigio sottile, border 1px rgba(0,0,0,.06), * shadow multi-layer (0 1px 3px close + 0 12px 40px far) * - Differenziazione quiz: didattico = warm gray (amber undertone), * valutativo = cool gray (slate undertone) * - Pulsanti primari: gradient nero Apple (#1d1d1f → #0a0a0a) * - Input: focus ring blu sistema (#007aff), border rgba sottile * - Transition: cubic-bezier(.4,0,.2,1) — Apple's "smooth" easing * - Border-radius: 16px cards, 12px buttons, 12px input, 14px badges */ /* =================================================================== FOCUS MODE — durante un quiz attivo nasconde tutto il resto della pagina =================================================================== */ /* * Quando un quiz è in corso (.qnp-focus-mode su ) nascondiamo * TUTTO il contenuto della lezione tranne il container del quiz attivo. * * Selettore robusto: body.qnp-focus-mode * sceglie ogni elemento; * poi escludiamo tramite :not() la catena padre→figlio del quiz attivo. * * - .qnp-quiz-container.qnp-quiz-active: il container del quiz attivo * - .qnp-quiz-active *: tutto il contenuto interno (visible) * - .qnp-quiz-active.qnp-quiz-container ascendants: gli antenati restano * "visibili" come scheletro (siamo dentro un article, body, ecc). * * Approccio scelto: hide via display:none su sibling specifici del quiz * attivo, dato che far diventare invisibili tutti gli antenati con un solo * selettore robusto è fragile. Quindi nascondiamo a CASCATA: * 1. Altri .qnp-quiz-container nello stesso parent (l'altro quiz) * 2. Tutti gli element SIBLING di quegli antenati che NON sono il path * verso il quiz attivo (PDF, autovalutazione, navigazione, commenti) * * Per semplicità + robustezza usiamo una tecnica :has() moderna come * primaria + fallback statico via JS (vedi qnp-quiz.js che aggiunge * .qnp-quiz-hidden ai sibling al momento dell'attivazione). */ body.qnp-focus-mode { overflow: hidden; background: #f5f5f7 !important; } /* L'intera pagina viene oscurata, con un overlay morbido che copre qualunque sfondo del tema (anche colori pieni come blu/nero) */ body.qnp-focus-mode::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, #f5f5f7 0%, #ebebed 100%); z-index: 99990; pointer-events: none; } /* Dark mode: overlay scuro */ @media (prefers-color-scheme: dark) { body.qnp-focus-mode { background: #000000 !important; } body.qnp-focus-mode::before { background: linear-gradient(180deg, #000000 0%, #1c1c1e 100%); } } /* Il container del quiz attivo viene "promosso" sopra l'overlay */ body.qnp-focus-mode .qnp-quiz-container.qnp-quiz-active { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; max-width: 100%; margin: 0; padding: 32px 20px 60px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: transparent; } /* Wrapping interno: full width con respiro laterale */ body.qnp-focus-mode .qnp-quiz-container.qnp-quiz-active > * { max-width: 1100px; margin-left: auto; margin-right: auto; } /* Bottone "✕ Esci dal quiz" flottante in alto a destra (iniettato via JS) */ .qnp-focus-exit-btn { position: fixed; top: 16px; right: 20px; z-index: 100000; padding: 8px 16px; background: rgba(0, 0, 0, 0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 500; color: #1d1d1f; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.08); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; } .qnp-focus-exit-btn:hover { background: rgba(0, 0, 0, 0.1); transform: translateY(-1px); } @media (prefers-color-scheme: dark) { .qnp-focus-exit-btn { background: rgba(255, 255, 255, 0.08); color: #f5f5f7; border-color: rgba(255, 255, 255, 0.12); } .qnp-focus-exit-btn:hover { background: rgba(255, 255, 255, 0.14); } } @media (max-width: 640px) { .qnp-focus-exit-btn { top: 12px; right: 12px; padding: 6px 12px; font-size: 12px; } } /* Mobile: padding ridotto */ @media (max-width: 640px) { body.qnp-focus-mode .qnp-quiz-container.qnp-quiz-active { padding: 50px 16px 40px; } } /* =================================================================== STILE BASE (continua) =================================================================== */ .qnp-quiz-container { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; max-width: 100%; margin: 24px 0; padding: 0; color: #1d1d1f; line-height: 1.55; letter-spacing: -0.01em; font-size: 18px; } .qnp-quiz-container *, .qnp-quiz-container *::before, .qnp-quiz-container *::after { box-sizing: border-box; } /* =================================================================== LOGIN/START CARD — la prima schermata con form Nome+Email =================================================================== */ .qnp-quiz-container .qnp-login-form { position: relative; padding: 36px 32px; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.06); background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06); max-width: 100%; margin: 0; overflow: hidden; } /* Differenziazione: didattico = warm tone (paglia delicato) */ .qnp-quiz-container[data-quiz-type="didattico"] .qnp-login-form { background: linear-gradient(180deg, #fafaf9 0%, #f3eee5 100%); } /* Differenziazione: valutativo = cool tone (slate delicato) */ .qnp-quiz-container[data-quiz-type="valutativo"] .qnp-login-form { background: linear-gradient(180deg, #fafbfc 0%, #e8edf2 100%); } .qnp-login-form h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.022em; color: #1d1d1f; } .qnp-login-form > p { margin: 8px 0; color: #424245; font-size: 15px; } .qnp-login-form > p strong { font-weight: 600; color: #1d1d1f; font-size: 17px; } /* Riga info "📝 N domande | ⏱️ tempo" */ .qnp-login-form > p[style*="color: #666"], .qnp-login-form > p[style*="color:#666"] { display: inline-flex; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(0, 0, 0, 0.035); border-radius: 10px; color: #424245 !important; font-size: 13px !important; font-weight: 500; margin: 14px 0 20px; } /* =================================================================== BADGE TIPO QUIZ — DIDATTICO / VALUTATIVO =================================================================== */ .qnp-quiz-type-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin: 4px 0 12px; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .qnp-type-didattico { background: linear-gradient(135deg, #fef9e6 0%, #fef3c7 100%); color: #78350f; border-color: rgba(146, 64, 14, 0.12); } .qnp-type-valutativo { background: linear-gradient(135deg, #eef2ff 0%, #dbe5ff 100%); color: #1e3a8a; border-color: rgba(30, 58, 138, 0.12); } /* =================================================================== DESCRIZIONE TIPO QUIZ (v3.9.6) — spiega didattico vs valutativo =================================================================== */ .qnp-quiz-description { margin: 16px 0 20px; padding: 16px 18px; border-radius: 14px; border: 1px solid transparent; font-size: 13.5px; line-height: 1.55; } .qnp-quiz-description p { margin: 0 0 8px; color: inherit; } .qnp-quiz-description p:last-child { margin-bottom: 0; } .qnp-quiz-description-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .qnp-quiz-description-note { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 13px; } .qnp-quiz-description-note strong { font-weight: 600; } /* Didattico — warm amber, coerente con il badge */ .qnp-desc-didattico { background: linear-gradient(180deg, rgba(254, 249, 230, 0.5) 0%, rgba(254, 243, 199, 0.4) 100%); border-color: rgba(146, 64, 14, 0.1); color: #5a2d0c; } .qnp-desc-didattico .qnp-quiz-description-title { color: #78350f; } .qnp-desc-didattico .qnp-quiz-description-note { border-top-color: rgba(146, 64, 14, 0.1); color: #78350f; } /* Valutativo — cool blue, coerente con il badge */ .qnp-desc-valutativo { background: linear-gradient(180deg, rgba(238, 242, 255, 0.5) 0%, rgba(219, 229, 255, 0.4) 100%); border-color: rgba(30, 58, 138, 0.1); color: #1e3a8a; } .qnp-desc-valutativo .qnp-quiz-description-title { color: #1e3a8a; } .qnp-desc-valutativo .qnp-quiz-description-note { border-top-color: rgba(30, 58, 138, 0.1); color: #1e3a8a; } /* Dark mode */ @media (prefers-color-scheme: dark) { .qnp-desc-didattico { background: linear-gradient(180deg, rgba(120, 53, 15, 0.18) 0%, rgba(120, 53, 15, 0.1) 100%); border-color: rgba(254, 243, 199, 0.15); color: #fef3c7; } .qnp-desc-didattico .qnp-quiz-description-title, .qnp-desc-didattico .qnp-quiz-description-note { color: #fef3c7; } .qnp-desc-valutativo { background: linear-gradient(180deg, rgba(30, 58, 138, 0.2) 0%, rgba(30, 58, 138, 0.12) 100%); border-color: rgba(219, 229, 255, 0.15); color: #dbe5ff; } .qnp-desc-valutativo .qnp-quiz-description-title, .qnp-desc-valutativo .qnp-quiz-description-note { color: #dbe5ff; } } /* =================================================================== FORM INPUT — stile iOS =================================================================== */ .qnp-login-form form, #qnp-start-form { margin-top: 8px; } .qnp-login-form input[type="text"], .qnp-login-form input[type="email"], #qnp-start-form input { display: block; width: 100%; padding: 14px 16px; margin-bottom: 12px; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 16px; font-family: inherit; color: #1d1d1f; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); } .qnp-login-form input[type="text"]:focus, .qnp-login-form input[type="email"]:focus, #qnp-start-form input:focus { outline: none; border-color: #007aff; background: #ffffff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 0 0 4px rgba(0, 122, 255, 0.12); } .qnp-login-form input::placeholder, #qnp-start-form input::placeholder { color: #86868b; opacity: 1; } /* =================================================================== PULSANTI — stile Apple system black =================================================================== */ .qnp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; border: none; border-radius: 14px; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; line-height: 1; user-select: none; -webkit-user-select: none; } .qnp-btn-primary { background: linear-gradient(180deg, #1d1d1f 0%, #0a0a0a 100%); color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.14); } .qnp-btn-primary:hover { background: linear-gradient(180deg, #2c2c2e 0%, #1d1d1f 100%); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14), 0 8px 20px rgba(0, 0, 0, 0.18); } .qnp-btn-primary:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.14); } .qnp-btn-primary:disabled { background: linear-gradient(180deg, #d2d2d7 0%, #c7c7cc 100%); color: #ffffff; cursor: not-allowed; transform: none; box-shadow: none; } .qnp-btn-secondary { background: linear-gradient(180deg, #f5f5f7 0%, #ebebed 100%); color: #1d1d1f; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .qnp-btn-secondary:hover { background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); transform: translateY(-1px); } .qnp-btn-secondary:disabled { background: #f5f5f7; color: #c7c7cc; cursor: not-allowed; transform: none; } .qnp-btn-success { background: linear-gradient(180deg, #1d8348 0%, #166434 100%); color: #ffffff; box-shadow: 0 1px 2px rgba(22, 100, 52, 0.2), 0 4px 12px rgba(22, 100, 52, 0.22); } .qnp-btn-success:hover { background: linear-gradient(180deg, #22965a 0%, #1d8348 100%); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(22, 100, 52, 0.22), 0 8px 20px rgba(22, 100, 52, 0.28); } /* Form bottone "Inizia Quiz" full-width sotto i field */ #qnp-start-form .qnp-btn, #qnp-start-form button[type="submit"] { width: 100%; margin-top: 8px; padding: 16px; font-size: 17px; } /* =================================================================== QUIZ HEADER (durante il quiz) =================================================================== */ .qnp-quiz-header { background: linear-gradient(180deg, #fbfbfd 0%, #ececed 100%); color: #1d1d1f; padding: 28px 32px; border-radius: 22px; margin-bottom: 22px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 36px rgba(0, 0, 0, 0.07); } .qnp-quiz-header h2 { margin: 0; color: #1d1d1f; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; } /* Riga "Domanda X di Y" / "Corrette" sotto il titolo */ .qnp-quiz-header > div:nth-of-type(2) { font-size: 16px; font-weight: 500; color: #6e6e73; } .qnp-quiz-header > div:nth-of-type(2) span span { color: #1d1d1f; font-weight: 600; } .qnp-quiz-header .qnp-quiz-type-badge { background: rgba(0, 0, 0, 0.06); color: #424245; border-color: rgba(0, 0, 0, 0.08); box-shadow: none; } .qnp-timer { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; font-size: 17px; font-weight: 600; color: #1d1d1f; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .qnp-progress { margin-top: 18px; height: 8px; background: rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; } .qnp-progress-bar { height: 100%; background: linear-gradient(90deg, #0071e3 0%, #42a5ff 100%); border-radius: 4px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* =================================================================== QUESTION CARD =================================================================== */ .qnp-question-card { background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 22px; padding: 36px; margin-bottom: 22px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06); } .qnp-question-number { display: inline-block; padding: 6px 14px; background: rgba(0, 122, 255, 0.1); color: #007aff; border-radius: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 16px; } .qnp-question-text { font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: #1d1d1f; margin: 0 0 26px; } /* =================================================================== ANSWERS =================================================================== */ .qnp-answers { display: flex; flex-direction: column; gap: 12px; } .qnp-answer { display: flex; align-items: center; padding: 18px 20px; background: #ffffff; border: 1.5px solid rgba(0, 0, 0, 0.08); border-radius: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 18px; color: #1d1d1f; } .qnp-answer:hover { border-color: rgba(0, 122, 255, 0.4); background: rgba(0, 122, 255, 0.03); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); } .qnp-answer.selected { border-color: #007aff; background: rgba(0, 122, 255, 0.06); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08); } .qnp-answer.correct { border-color: #1d8348; background: #eaf6ee; color: #14532d; } .qnp-answer.incorrect { border-color: #c7c7cc; background: #f5f5f7; color: #6e6e73; } .qnp-answer input[type="radio"], .qnp-answer input[type="checkbox"] { margin-right: 14px; accent-color: #007aff; width: 22px; height: 22px; flex-shrink: 0; } .qnp-answer-letter { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: 14px; background: rgba(0, 0, 0, 0.04); border-radius: 9px; font-weight: 700; font-size: 15px; color: #1d1d1f; flex-shrink: 0; } .qnp-answer.selected .qnp-answer-letter { background: #007aff; color: #ffffff; } .qnp-answer.correct .qnp-answer-letter { background: #1d8348; color: #ffffff; } .qnp-answer.incorrect .qnp-answer-letter { background: #aeaeb2; color: #ffffff; } /* =================================================================== TOOLTIP DIDATTICO (mostrato dopo risposta in modalità didattico) =================================================================== */ .qnp-tooltip { margin-top: 18px; padding: 16px 18px; border-radius: 14px; font-size: 16px; font-weight: 500; line-height: 1.5; border: 1px solid transparent; } .qnp-tooltip.correct { background: #eaf6ee; border-color: #cfe9d8; color: #14532d; } .qnp-tooltip.incorrect { background: #f5f5f7; border-color: #e0e0e5; color: #424245; } /* =================================================================== NAVIGATION BUTTONS =================================================================== */ .qnp-nav-buttons { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; } /* =================================================================== RESULTS SCREEN =================================================================== */ .qnp-results { background: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); padding: 40px 32px; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.06); text-align: center; } .qnp-score { display: inline-block; font-size: 72px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 24px 0 16px; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .qnp-score.passed { background-image: linear-gradient(135deg, #1d8348 0%, #166434 100%); } .qnp-score.failed { background-image: linear-gradient(135deg, #0071e3 0%, #0058b9 100%); } /* =================================================================== RESUME BANNER (Quiz interrotto trovato) =================================================================== */ .qnp-resume-banner { margin: 0 0 20px; padding: 18px 22px; background: linear-gradient(180deg, #fff8e7 0%, #fef3c7 100%); border: 1px solid rgba(180, 83, 9, 0.18); border-radius: 16px; color: #78350f; font-size: 14px; line-height: 1.5; box-shadow: 0 1px 3px rgba(180, 83, 9, 0.06), 0 8px 24px rgba(180, 83, 9, 0.08); } .qnp-resume-banner strong { display: block; margin-bottom: 4px; font-weight: 600; font-size: 15px; color: #5a2d0c; letter-spacing: -0.01em; } .qnp-resume-banner span { display: block; font-size: 13.5px; color: #78350f; } .qnp-resume-banner input[type="email"], .qnp-resume-banner input[type="text"] { margin-top: 10px; padding: 10px 14px; border: 1px solid rgba(180, 83, 9, 0.2); border-radius: 10px; background: rgba(255, 255, 255, 0.7); font-size: 14px; font-family: inherit; color: #1d1d1f; } .qnp-resume-banner input:focus { outline: none; border-color: #d97706; background: #ffffff; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); } /* =================================================================== LOADING SPINNER =================================================================== */ .qnp-loading { text-align: center; padding: 48px 20px; color: #86868b; font-size: 14px; } .qnp-spinner { width: 36px; height: 36px; border: 3px solid rgba(0, 0, 0, 0.08); border-top-color: #1d1d1f; border-radius: 50%; animation: qnp-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; margin: 0 auto 16px; } @keyframes qnp-spin { to { transform: rotate(360deg); } } /* =================================================================== SPACING TRA DUE QUIZ NELLA STESSA LEZIONE =================================================================== */ .qnp-quiz-container + .qnp-quiz-container { margin-top: 32px; } /* Separatore visivo iniettato dal JS di riposizionamento */ .qnp-relocated-separator { margin: 32px 0 24px !important; padding: 0 !important; border: none !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; height: 0; background: none !important; } /* H3 dei titoli "Quiz Didattico / Valutativo" inseriti dal plugin */ .qnp-quiz-auto-block h3, .qnp-fallback-render h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #86868b; text-transform: uppercase; letter-spacing: 0.04em; margin: 20px 0 12px; } /* =================================================================== DISPENSA LATERALE (solo quiz DIDATTICO, solo desktop ≥1024px) Split view: quiz a sinistra, dispensa in iframe a destra. =================================================================== */ /* Pulsante "Apri dispensa" sotto la domanda */ .qnp-open-dispensa-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 11px 18px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; color: #0071e3; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .qnp-open-dispensa-btn:hover { background: #f5f9ff; border-color: rgba(0, 122, 255, 0.4); transform: translateY(-1px); } /* Su viewport stretti il pulsante split non ha senso: nascosto. (un link "apri in nuova scheda" viene mostrato al suo posto via JS) */ @media (max-width: 979px) { .qnp-open-dispensa-btn { display: none; } } /* Quando il drawer è aperto, il contenitore quiz si restringe a sinistra */ body.qnp-dispensa-open .qnp-quiz-container.qnp-quiz-active { right: min(44vw, 720px); transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* Il pulsante "Esci" resta cliccabile: si sposta a sinistra del drawer */ body.qnp-dispensa-open .qnp-focus-exit-btn { right: calc(min(44vw, 720px) + 20px); transition: right 0.32s cubic-bezier(0.4, 0, 0.2, 1); } /* Pannello dispensa: fisso a destra, ~44% schermo */ .qnp-dispensa-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 44vw; max-width: 720px; min-width: 380px; z-index: 100002; background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%); border-left: 1px solid rgba(0, 0, 0, 0.08); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .qnp-dispensa-drawer.open { transform: translateX(0); } /* Header del pannello: titolo + azioni */ .qnp-dispensa-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-shrink: 0; } .qnp-dispensa-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qnp-dispensa-title small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #86868b; margin-bottom: 1px; } .qnp-dispensa-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: pointer; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; white-space: nowrap; } .qnp-dispensa-iconbtn:hover { background: rgba(0, 0, 0, 0.09); } .qnp-dispensa-close { width: 34px; height: 34px; padding: 0; font-size: 18px; line-height: 1; border-radius: 50%; } /* Corpo iframe */ .qnp-dispensa-body { flex: 1; position: relative; overflow: hidden; } .qnp-dispensa-body iframe { width: 100%; height: 100%; border: 0; background: #ffffff; } /* Avviso fallback se l'iframe non carica (X-Frame-Options) */ .qnp-dispensa-fallback { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; background: #ffffff; color: #424245; font-size: 15px; line-height: 1.5; } .qnp-dispensa-fallback.show { display: flex; } @media (prefers-color-scheme: dark) { .qnp-open-dispensa-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #0a84ff; } .qnp-dispensa-drawer { background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%); border-left-color: rgba(255, 255, 255, 0.1); } .qnp-dispensa-head { background: rgba(28, 28, 30, 0.7); border-bottom-color: rgba(255, 255, 255, 0.1); } .qnp-dispensa-title { color: #f5f5f7; } .qnp-dispensa-iconbtn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .qnp-dispensa-iconbtn:hover { background: rgba(255, 255, 255, 0.14); } .qnp-dispensa-fallback { background: #1c1c1e; color: #aeaeb2; } } @media (max-width: 640px) { .qnp-quiz-container { margin: 16px 0; padding: 0 14px; font-size: 17px; } .qnp-quiz-container .qnp-login-form, .qnp-question-card, .qnp-results { padding: 24px 20px; border-radius: 18px; } .qnp-question-text { font-size: 21px; line-height: 1.35; } .qnp-answer { font-size: 17px; padding: 16px 16px; } .qnp-answer-letter { width: 30px; height: 30px; font-size: 14px; margin-right: 12px; } .qnp-btn { font-size: 17px; padding: 16px 24px; } .qnp-score { font-size: 60px; } .qnp-nav-buttons { flex-direction: column; } .qnp-nav-buttons .qnp-btn { width: 100%; } .qnp-quiz-header { padding: 22px 20px; border-radius: 18px; } .qnp-quiz-header h2 { font-size: 22px; } .qnp-quiz-header > div[style*="flex"] { flex-direction: column; align-items: flex-start !important; gap: 12px; } } /* =================================================================== DARK MODE — segue le preferenze di sistema =================================================================== */ @media (prefers-color-scheme: dark) { .qnp-quiz-container { color: #f5f5f7; } .qnp-quiz-container .qnp-login-form { background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%); border-color: rgba(255, 255, 255, 0.08); } .qnp-quiz-container[data-quiz-type="didattico"] .qnp-login-form { background: linear-gradient(180deg, #1c1c1e 0%, #2a261f 100%); } .qnp-quiz-container[data-quiz-type="valutativo"] .qnp-login-form { background: linear-gradient(180deg, #1c1c1e 0%, #1f242a 100%); } .qnp-login-form h2, .qnp-login-form > p strong, .qnp-question-text { color: #f5f5f7; } .qnp-login-form > p { color: #aeaeb2; } .qnp-login-form input, #qnp-start-form input { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .qnp-login-form input:focus, #qnp-start-form input:focus { background: rgba(255, 255, 255, 0.08); border-color: #0a84ff; box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18); } .qnp-question-card { background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%); border-color: rgba(255, 255, 255, 0.08); } .qnp-answer { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .qnp-answer:hover { background: rgba(10, 132, 255, 0.1); border-color: rgba(10, 132, 255, 0.5); } .qnp-answer-letter { background: rgba(255, 255, 255, 0.1); color: #f5f5f7; } .qnp-answer.correct { background: rgba(48, 209, 88, 0.14); border-color: rgba(48, 209, 88, 0.5); color: #d6f5e0; } .qnp-answer.correct .qnp-answer-letter { background: #248a4d; color: #ffffff; } .qnp-answer.incorrect { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); color: #aeaeb2; } .qnp-answer.incorrect .qnp-answer-letter { background: #636366; color: #ffffff; } .qnp-tooltip.correct { background: rgba(48, 209, 88, 0.14); border-color: rgba(48, 209, 88, 0.35); color: #d6f5e0; } .qnp-tooltip.incorrect { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #d2d2d7; } .qnp-quiz-header { background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%); border-color: rgba(255, 255, 255, 0.08); color: #f5f5f7; } .qnp-quiz-header h2 { color: #f5f5f7; } .qnp-quiz-header > div:nth-of-type(2) { color: #aeaeb2; } .qnp-quiz-header > div:nth-of-type(2) span span { color: #f5f5f7; } .qnp-quiz-header .qnp-quiz-type-badge { background: rgba(255, 255, 255, 0.12); color: #f5f5f7; border-color: rgba(255, 255, 255, 0.16); } .qnp-timer { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); color: #f5f5f7; } .qnp-progress { background: rgba(255, 255, 255, 0.14); } .qnp-btn-secondary { background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%); color: #f5f5f7; border-color: rgba(255, 255, 255, 0.1); } .qnp-results { background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%); border-color: rgba(255, 255, 255, 0.08); } }