/** * Globalny stylesheet quizów portalu wigorżycia.pl — Typeform-style. * Path in child theme: quiz/css/quiz-style.css * * UX: każdy quiz ma intro card embedded w treści. Kliknięcie "Rozpocznij" * przełącza w tryb pełnoekranowy (.is-active) z blokadą scrolla na . * Pytanie wypełnia viewport, opcje pod nim, jedno pytanie = jeden ekran. * JS dodaje/usuwa: .wz-quiz.is-active + .wz-quiz-active na . * * Markup: wyłącznie klasy .wz-quiz / .wz-quiz__*, bez ID. * Każdy quiz ma data-quiz-id="" na kontenerze .wz-quiz. */ /* ─── ROOT TOKENS ───────────────────────────────────────── */ .wz-quiz { --wz-primary: var(--primary, #059669); /* emerald-600 */ --wz-primary-dark: var(--primary-dark, #047857); /* emerald-700 */ --wz-primary-soft: #ecfdf5; /* emerald-50 */ --wz-primary-soft-2: #d1fae5; /* emerald-100 */ --wz-progress: #10b981; /* emerald-500 */ --wz-bg: var(--base-light, #fafaf9); /* stone-50 */ --wz-track: #f5f5f4; /* stone-100 */ --wz-border: #e7e5e4; /* stone-200 */ --wz-border-strong: #d6d3d1; /* stone-300 */ --wz-muted-soft: #a8a29e; /* stone-400 */ --wz-muted: #57534e; /* stone-600 */ --wz-text: #1c1917; /* stone-900 */ --wz-white: var(--white, #ffffff); --wz-success: #15803d; --wz-success-bg: #dcfce7; --wz-error: #b91c1c; --wz-error-bg: #fee2e2; --wz-font-headline: var(--text-headline, 'Lora', Georgia, 'Times New Roman', serif); --wz-font-body: var(--text-body, 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif); /* All radius tokens at 0 — matches the rest of the site (rectangular style) */ --wz-radius-card: 0; --wz-radius-option: 0; --wz-radius-pill: 0; --wz-shadow-card: 0 4px 24px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04); font-family: var(--wz-font-body); line-height: 1.6; color: var(--wz-text); } /* ─── EMBEDDED MODE (before start) ──────────────────────── */ /* * No card chrome — intro is a full-height immersive section. * Only the intro screen renders; topbar, body, result are hidden until is-active. */ .wz-quiz:not(.is-active) .wz-quiz__topbar, .wz-quiz:not(.is-active) .wz-quiz__body, .wz-quiz:not(.is-active) .wz-quiz__result { display: none; } /* ─── INTRO SCREEN (start) ──────────────────────────────── */ /* Full-height immersive intro: vertically + horizontally centered content. */ .wz-quiz__intro { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .wz-quiz__intro-icon { font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; margin-bottom: 1.25rem; } .wz-quiz__title { margin: 0 0 .75rem; color: var(--wz-text); font-family: var(--wz-font-headline); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.15; } .wz-quiz__subtitle { margin: 0 auto 2rem; color: var(--wz-muted); font-size: clamp(0.95rem, 2vw, 1.125rem); line-height: 1.5; max-width: 32rem; } .wz-quiz__intro-hint { margin: 1rem 0 0; color: var(--wz-muted-soft); font-size: .85rem; } /* ─── ACTIVE / FULLSCREEN MODE ──────────────────────────── */ .wz-quiz.is-active { animation: wzQuizFadeIn 0.3s ease; background-color: var(--wz-white); border: 0; border-radius: 0; box-shadow: none; display: flex; /* flex column: topbar takes natural height, body fills rest */ flex-direction: column; inset: 0; margin: 0; max-width: none; overflow-y: auto; position: fixed; z-index: 9999; } .wz-quiz.is-active .wz-quiz__intro { display: none; } @keyframes wzQuizFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* Body class added by JS — locks page scroll behind the overlay */ body.wz-quiz-active { overflow: hidden; } /* ─── TOPBAR (sticky inside fullscreen) ─────────────────── */ .wz-quiz__topbar { align-items: center; background-color: var(--wz-white); border-bottom: 1px solid var(--wz-border); display: flex; gap: 1.5rem; padding: 1rem clamp(1rem, 4vw, 2.5rem); position: sticky; top: 0; z-index: 2; } .wz-quiz__close { background: transparent; border: 0; color: var(--wz-muted); cursor: pointer; flex-shrink: 0; font-size: 1.75rem; height: 2.5rem; line-height: 1; padding: 0; transition: background-color 0.15s, color 0.15s; width: 2.5rem; } .wz-quiz__close:hover, .wz-quiz__close:focus-visible { background-color: var(--wz-track); color: var(--wz-text); outline: none; } .wz-quiz__topbar .wz-quiz__progress { flex-grow: 1; height: 4px; background-color: var(--wz-track); border-radius: var(--wz-radius-pill); overflow: hidden; } .wz-quiz__progress-bar { height: 100%; background-color: var(--wz-progress); width: 0; border-radius: var(--wz-radius-pill); transition: width 0.4s ease; } .wz-quiz__meta { color: var(--wz-muted); flex-shrink: 0; font-size: .875rem; font-weight: 600; letter-spacing: 0.05em; } /* ─── BODY (question + options) ─────────────────────────── */ .wz-quiz.is-active .wz-quiz__body { display: flex; flex: 1; /* fills remaining space after topbar (no hardcoded math) */ flex-direction: column; justify-content: center; margin: 0 auto; max-width: 56rem; padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 2.5rem); width: 100%; } .wz-quiz__body.is-hidden { display: none !important; } .wz-quiz__question { font-family: var(--wz-font-headline); font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; line-height: 1.35; text-align: center; margin: 0 auto clamp(2rem, 4vw, 3rem); max-width: 42rem; color: var(--wz-text); animation: wzQuestionIn 0.45s ease; } /* Optional image above the question text (e.g. flag/painting/portrait quizzes). * Engine appends when question has `image` field. */ .wz-quiz__question-image { display: block; margin: 0 auto clamp(1rem, 2.5vw, 1.75rem); max-width: min(100%, 26rem); max-height: clamp(8rem, 28vh, 10rem); height: auto; width: auto; object-fit: contain; background: var(--wz-white); border: 1px solid var(--wz-border); } .wz-quiz__question-text { display: block; } /* Optional audio player below the question text (e.g. bird-call quizzes). * Engine appends