/* ═══════════════════════════════════════ Spreekangst Test – style.css v8.0 ═══════════════════════════════════════ */ /* ── Scoped reset ── */ #st-overlay *, #st-overlay *::before, #st-overlay *::after { box-sizing: border-box; } /* ── No-scroll ── */ body.st-no-scroll { overflow: hidden !important; } /* ══════════════════════ SHORTCODE TRIGGER KNOP Kleuren komen via inline style vanuit PHP shortcode. Hier alleen structurele stijlen. ══════════════════════ */ .st-open-btn { display: inline-block; padding: 15px 32px; /* achtergrond + kleur komen via inline style */ background: #e2a4f8; color: #05444f; border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; letter-spacing: 0.01em; line-height: 1.2; text-decoration: none !important; } .st-open-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.18); filter: brightness(1.06); text-decoration: none !important; } /* ══════════════════════ POPUP OVERLAY BELANGRIJK: De overlay wordt via JS naar verplaatst (moveOverlayToBody) zodat er geen getransformde parent meer is die position:fixed kan breken (CSS-spec issue met transforms). De !important op position/inset/z-index voorkomt dat theme-CSS dit alsnog overschrijft. ══════════════════════ */ #st-overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 999999 !important; /* hoger dan Salient (10000), WPBakery (100000) */ background: rgba(10, 10, 20, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 100px 16px 32px; overflow-y: auto; animation: stOverlayIn 0.25s ease; /* Zorg dat transform op parent de overlay niet beïnvloedt */ transform: none !important; will-change: auto; } .st-overlay-closing { animation: stOverlayOut 0.2s ease forwards !important; } @keyframes stOverlayIn { from { opacity: 0; } to { opacity: 1; } } @keyframes stOverlayOut { from { opacity: 1; } to { opacity: 0; } } /* ── Popup box ── */ .st-popup { position: relative; width: 100%; max-width: 580px; border-radius: 28px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,0.22); animation: stPopupIn 0.3s cubic-bezier(.22,1,.36,1); flex-shrink: 0; /* voorkomt dat flexbox de popup platdrukt */ } @keyframes stPopupIn { from { opacity: 0; transform: scale(0.94) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ── Sluit-knop ── */ .st-close-btn { position: absolute; top: 16px; right: 16px; z-index: 10; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f0f0f5; color: #6b6b8a; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; line-height: 1; padding: 0; } .st-close-btn:hover { background: #e2a4f8; color: #05444f; } /* ══════════════════════ APP WRAPPER ══════════════════════ */ #st-app { font-family: 'DM Sans', sans-serif; color: #1a1a2e; } .st-card { background: #ffffff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; } /* ══════════════════════ INTRO ══════════════════════ */ #st-intro { padding: 44px 40px 40px; } .st-intro-icon { text-align: center; } .st-intro-icon img { width: 65px !important; margin: 0 auto 16px !important; display: block; } .st-intro-title { font-size: 1.55rem; color: #1a1a2e; text-align: center; line-height: 1.35; font-weight: 600; letter-spacing: -0.5px; margin-bottom: 8px; } .st-intro-subtitle { text-align: center; font-size: 16px; font-weight: 600; color: #05444f; padding-bottom: 10px; margin: 0; } .st-intro-desc { display: flex; flex-direction: column; gap: 0; } .st-intro-desc p { font-size: 15px; color: #4a4a6a; line-height: 1.75; margin: 0 0 10px; } .st-intro-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 20px 0; } .st-pill { background: #f2f5f5; color: #05444f; font-size: 13px; font-weight: 600; padding: 4px 14px; border-radius: 99px; } /* ══════════════════════ QUIZ HEADER ══════════════════════ */ .st-header { padding: 20px 28px 18px; border-bottom: 1px solid #f0f0f0; background: #fff; } .st-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; } .st-title { font-size: 17px; color: #05444f; font-weight: 700; line-height: 1.2; } .st-subtitle { font-size: 13px; color: #8888a4; margin-top: 3px; } .st-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-right: 30px; } .st-timer-pill { display: flex; align-items: center; gap: 5px; background: #f2f5f5; border-radius: 99px; padding: 6px 13px; font-size: 13px; font-weight: 600; color: #05444f; white-space: nowrap; } .st-counter { font-size: 13px; font-weight: 700; color: #05444f; background: #e2a4f8; border-radius: 99px; white-space: nowrap; min-width: 44px; min-height: 44px; display: flex; justify-content: center; align-items: center; } .st-progress-track { height: 6px; background: #eeeef5; border-radius: 99px; overflow: hidden; } .st-progress-fill { height: 100%; background: #05444f; border-radius: 99px; transition: width 0.45s cubic-bezier(.4,0,.2,1); } /* ══════════════════════ QUIZ BODY ══════════════════════ */ .st-body { padding: 25px 32px 24px; } .st-question-text { font-size: 1.1rem; font-weight: 600; color: #1a1a2e; line-height: 1.6; margin-bottom: 28px; } /* Options */ .st-options { display: flex; flex-direction: column; gap: 12px; } .st-option { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 2px solid #eeeef5; border-radius: 16px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; background: #fafafa; user-select: none; } .st-option:hover { border-color: #e2a4f8; background: #f8f0ff; transform: translateY(-1px); } .st-option.selected { border-color: #e2a4f8; background: #f8f0ff; } .st-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d0d0e0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s ease; background: #fff; } .st-option.selected .st-radio { border-color: #e2a4f8; } .st-radio-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2a4f8; opacity: 0; transition: opacity 0.15s ease; } .st-option.selected .st-radio-dot { opacity: 1; } .st-option-label { font-size: 0.95rem; color: #3a3a5c; font-weight: 500; } .st-option.selected .st-option-label { color: #1a1a2e; font-weight: 600; } /* ══════════════════════ FOOTER / BUTTONS ══════════════════════ */ .st-footer { padding: 16px 32px 32px; } .st-btn-row { display: flex; gap: 12px; } .st-btn { padding: 15px 24px; border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; line-height: 1; width: 50%; } .st-btn-prev { background: #f4f4f8; color: #6b6b8a; border: 2px solid #eeeef5; } .st-btn-prev:hover:not(:disabled) { background: #eeeef5; color: #3a3a5c; } .st-btn-prev:disabled { opacity: 0.35; cursor: not-allowed; } .st-btn-next { background: #e2a4f8; color: #05444f; } .st-btn-next:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(75,109,116,0.35); } .st-btn-next:disabled { background: #e8e8f0; color: #b0b0c0; cursor: not-allowed; } .st-btn-start { width: 100%; padding: 16px; background: #e2a4f8; color: #05444f; border-radius: 14px; border: none; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; margin-top: 8px; } .st-btn-start:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(75,109,116,0.35); } /* ══════════════════════ EMAIL GATE ══════════════════════ */ #st-email-screen { padding: 44px 40px 40px; align-items: center; text-align: center; } .st-email-icon { font-size: 3rem; margin-bottom: 10px; animation: stBounceIn 0.5s cubic-bezier(.22,1,.36,1); } @keyframes stBounceIn { from { transform: scale(0.6); opacity:0; } to { transform:scale(1); opacity:1; } } .st-email-title { font-size: 1.4rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; } .st-email-sub { font-size: 15px; color: #6b6b8a; margin: 0 0 22px; line-height: 1.5; } .st-email-field-wrap { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; } .st-email-input { width: 100%; padding: 14px 18px; border: 2px solid #eeeef5; border-radius: 14px; font-family: 'DM Sans', sans-serif; font-size: 1rem; color: #1a1a2e; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .st-email-input:focus { border-color: #e2a4f8; } .st-btn-email-submit { width: 100%; padding: 14px 24px; background: #e2a4f8; color: #05444f; border: none; border-radius: 14px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s; } .st-btn-email-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(75,109,116,.3); } .st-btn-email-submit:disabled { opacity: 0.6; cursor: not-allowed; } .st-email-privacy { font-size: 12px; color: #b0b0c8; margin: 12px 0 0; } .st-email-error { font-size: 13px; color: #e05252; margin-top: 8px; font-weight: 600; } /* ══════════════════════ /* ══════════════════════ INLINE SHORTCODE WRAP ══════════════════════ */ .st-inline-wrap { width: 100%; max-width: 680px; margin: 0 auto; font-family: 'DM Sans', sans-serif; } .st-card--inline { border-radius: 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.10); background: #fff; overflow: hidden; border: 1px solid #eeeef5; } /* ══════════════════════ RESULT SCREEN v12 – volledig herbouwde UI Alle classes beginnen met .str- ══════════════════════ */ #st-result-screen { overflow: hidden; background: #fff; } /* ── Hero banner ── */ .str-hero { padding: 32px 32px 28px; color: #fff; position: relative; overflow: hidden; } .str-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.08); } .str-hero::after { content: ''; position: absolute; bottom: -20px; left: 20px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.06); } .str-hero-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .str-hero-label { font-size: 12px; font-weight: 600; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px; } .str-hero-title { font-size: 1.55rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; } /* ── Score cards ── */ .str-scores { display: flex; flex-direction: column; gap: 10px; padding: 20px 28px 16px; background: #f7f8fc; border-bottom: 1px solid #eeeef5; } .str-score-card { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #eeeef5; } .str-score-icon { font-size: 1.4rem; flex-shrink: 0; width: 32px; text-align: center; } .str-score-info { flex: 1; min-width: 0; } .str-score-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b8a; margin-bottom: 6px; } .str-score-track { height: 8px; background: #eeeef5; border-radius: 99px; overflow: hidden; } .str-score-fill { height: 100%; border-radius: 99px; width: 0%; } .str-score-fill--spanning { background: linear-gradient(90deg, #f6a623, #e67e22); } .str-score-card--spanning { border-left: 3px solid #f6a623; } .str-score-fill--vaard { background: linear-gradient(90deg, #3ecf8e, #27ae73); } .str-score-card--vaard { border-left: 3px solid #3ecf8e; } .str-score-num { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; flex-shrink: 0; min-width: 44px; text-align: right; } .str-score-num span { font-size: 0.75rem; font-weight: 500; color: #9a9ab0; } /* ── Advies tekst ── */ .str-advies { padding: 20px 28px 8px; display: flex; flex-direction: column; gap: 12px; } .str-advies-block { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; } .str-advies-block--meaning { background: #fdfbff; border: 1px solid #f0e6ff; } .str-advies-block--advice { background: #f0fbf6; border: 1px solid #c3eed9; } .str-advies-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .str-advies-block p { margin: 0; font-size: 14px; line-height: 1.7; color: #3a3a5c; } /* ── CTA knop ── */ .str-cta-wrap { padding: 16px 28px 8px; } .str-cta-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; border-radius: 14px; font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; text-decoration: none !important; color: #fff !important; background: linear-gradient(135deg, #e2a4f8, #a259e6); box-shadow: 0 6px 24px rgba(162,89,230,0.3); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; letter-spacing: -0.1px; } .str-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(162,89,230,0.4); filter: brightness(1.05); } .str-cta-arrow { font-size: 1.1rem; transition: transform 0.2s ease; } .str-cta-btn:hover .str-cta-arrow { transform: translateX(4px); } /* ── Nieuwsbrief opt-in ── */ .str-newsletter { margin: 0 28px 8px; padding: 16px 20px; background: linear-gradient(135deg, #fdf4ff, #f5f0ff); border: 1px solid #e8d5fb; border-radius: 14px; } .str-newsletter-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .str-newsletter-icon { font-size: 1.2rem; flex-shrink: 0; } .str-newsletter-label { font-size: 13px; font-weight: 600; color: #4a2d6a; line-height: 1.4; } .str-newsletter-form { display: flex; gap: 8px; } .str-email-input { flex: 1; padding: 11px 16px; border: 2px solid #e0ccf8; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #1a1a2e; outline: none; transition: border-color 0.2s; background: #fff; min-width: 0; } .str-email-input:focus { border-color: #a259e6; } .str-email-btn { padding: 11px 20px; background: #a259e6; color: #fff; border: none; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; white-space: nowrap; flex-shrink: 0; } .str-email-btn:hover:not(:disabled) { background: #8a3dcc; transform: translateY(-1px); } .str-email-btn:disabled { opacity: 0.6; cursor: not-allowed; } .str-newsletter-success { font-size: 14px; color: #2d7a52; font-weight: 600; padding: 4px 0; } /* ── Social sharing ── */ .str-share { padding: 12px 28px 8px; } .str-share-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #9a9ab0; margin-bottom: 10px; } .str-share-row { display: flex; gap: 8px; flex-wrap: wrap; } .str-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; flex-shrink: 0; color: #fff; } .str-share-btn svg { flex-shrink: 0; } .str-share-btn:hover { transform: translateY(-2px); opacity: 0.9; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .str-share-wa { background: #25D366; } .str-share-li { background: #0077B5; } .str-share-fb { background: #1877F2; } .str-share-copy { background: #f0f0f8; color: #4a4a6a; } .str-share-copy svg { stroke: #4a4a6a; } .str-share-btn--copied { background: #3ecf8e !important; color: #fff !important; } /* ── Retry ── */ .str-retry-wrap { padding: 4px 28px 20px; text-align: center; } .str-retry-btn { background: none; border: none; color: #b0b0c8; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600; padding: 8px 12px; cursor: pointer; transition: color 0.2s; } .str-retry-btn:hover { color: #6b6b8a; } /* ══════════════════════ ANIMATIES ══════════════════════ */ .st-slide-out { animation: stSlideOut 0.22s ease forwards; } .st-slide-in { animation: stSlideIn 0.28s ease forwards; } @keyframes stSlideOut { to { opacity:0; transform:translateX(-24px); } } @keyframes stSlideIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } } @keyframes stFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } /* ══════════════════════ RESPONSIVE ══════════════════════ */ @media (max-width: 600px) { #st-overlay { padding: 0 !important; align-items: flex-end !important; } .st-popup { top: -10vh; max-width: 92%; border-radius: 23px; max-height: 90vh; /* overflow-y: auto; */ -webkit-overflow-scrolling: touch; } .st-intro-desc p { margin-bottom: 0px; padding-bottom: 0px; } #st-intro, #st-email-screen { padding: 32px 20px 28px; } .st-header { padding: 16px 20px 14px; } .st-body { padding: 22px 20px 16px; } .st-footer { padding: 10px 20px 24px; } .st-question-text { font-size: 1rem; } /* Result v12 responsive */ .str-hero { padding: 24px 20px 20px; } .str-hero-title { font-size: 1.25rem; } .str-scores { padding: 16px 20px 12px; } .str-advies { padding: 16px 20px 8px; } .str-cta-wrap { padding: 12px 20px 8px; } .str-newsletter { margin: 0 20px 8px; } .str-newsletter-form { flex-direction: column; } .str-share { padding: 10px 20px 6px; } .str-retry-wrap { padding: 4px 20px 16px; } /* vragen */ .st-option { padding: 5px 10px; } .st-option .st-option-label { font-size: 14.5px; } } @media (max-width: 380px) { .str-share-btn span { display: none; } .str-share-btn { padding: 10px 12px; } } /* ══ EMAIL GATE SCHERM ══ */ .stg-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 32px 40px; gap: 0; } .stg-icon { font-size: 3rem; margin-bottom: 16px; } .stg-title { font-family: 'DM Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: #1a1a2e; margin: 0 0 10px; line-height: 1.25; } .stg-desc { font-size: 1rem; color: #555; margin: 0 0 24px; line-height: 1.55; max-width: 380px; } .stg-field { width: 100%; max-width: 400px; margin-bottom: 14px; } .stg-email-input { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1.5px solid #d0d0e0; border-radius: 10px; font-size: 1rem; font-family: 'DM Sans', sans-serif; color: #1a1a2e; background: #fafafa; outline: none; transition: border-color 0.2s; } .stg-email-input:focus { border-color: #7c4dff; background: #fff; } .stg-error { color: #e05252; font-size: 0.85rem; margin-top: 6px; text-align: left; } .stg-checkbox-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; max-width: 400px; width: 100%; text-align: left; margin-bottom: 22px; -webkit-user-select: none; user-select: none; } .stg-checkbox { position: absolute; opacity: 0; width: 0; height: 0; } .stg-checkbox-custom { flex-shrink: 0; width: 20px; height: 20px; border: 2px solid #c0c0d0; border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: border-color 0.2s, background 0.2s; } .stg-checkbox:checked + .stg-checkbox-custom { background: #7c4dff; border-color: #7c4dff; } .stg-checkbox:checked + .stg-checkbox-custom::after { content: ''; display: block; width: 5px; height: 9px; border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg) translate(-1px, -1px); } .stg-checkbox-text { font-size: 0.9rem; color: #444; line-height: 1.45; } .stg-btn { width: 100%; max-width: 400px; padding: 14px 20px; background: linear-gradient(135deg, #7c4dff, #5e35b1); color: #fff; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: opacity 0.2s, transform 0.15s; margin-bottom: 14px; } .stg-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); } .stg-btn:disabled { opacity: 0.6; cursor: not-allowed; } .stg-privacy { font-size: 0.78rem; color: #aaa; margin: 0; max-width: 340px; } @media (max-width: 480px) { .stg-wrap { padding: 32px 20px 28px; } .stg-title { font-size: 1.25rem; } }