/* * טופס הבדיקה החינמית — CSS מובייל-first (סעיף 2 עקרון 8 בארכיטקטורה): * ברירת המחדל היא רוחב מובייל, ומורחבים באמצעות min-width בלבד. */ /* * גופנים — התאמה לגופן שאר האתר. **v0.10.24 לא הספיק בפועל** (אותו * ניחוש חלקי כמו ב-paid-check.css/v0.10.23 — `font-family: inherit` * בלבד על אלמנטי טופס, בלי אב עם font-family מוגדר לרשת ממנו במקרים * רבים). **תוקן ב-v0.10.25**, אחרי שניר אישר בפועל דרך DevTools שגופן * האתר הוא **Assistant** (Google Font, נטען דרך Elementor/התבנית): * במקום להסתמך על ירושה, נקבע `font-family: 'Assistant', ...` במפורש * על כל אלמנט עם id/class בקידומת `myresume-` (סלקטור attribute גורף, * עמיד לשינויי מבנה DOM עתידיים) — ראה ההסבר המלא ב-paid-check.css. * `button/input/select/textarea { font-family: inherit }` נשאר, כרשת * ביטחון לאלמנטים בודדים בלי class/id של myresume- משלהם. * * **גודל גופן 20px (v0.10.26, לפי בקשה מפורשת), כברירת מחדל לטקסט * תוכן/גוף** — ראה ההסבר המלא (כולל ההחלטה הפרשנית לא לשנות כותרות/ * ציון/כפתורים/טקסט משני קטן) ב-paid-check.css. */ [id^="myresume-"], [class*="myresume-"] { font-family: 'Assistant', Arial, sans-serif; font-size: 20px; } button, input, select, textarea { font-family: inherit; } .myresume-free-check-form { max-width: 100%; margin: 1.5rem auto; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; } .myresume-free-check-form * { box-sizing: border-box; } .myresume-field { margin: 0 0 1.25rem; } .myresume-field label { display: block; margin-bottom: 0.4rem; font-weight: 600; } /* * v0.10.38 — הודעת סטטוס קטנה מתחת לשדה (כרגע: "ממיר תמונת iPhone * ל-JPG..." בזמן המרת HEIC בדפדפן, ראה maybeConvertHeicFile ב- * free-check.js/paid-check.js). מוצג/מוסתר דינמית ב-JS — לא קיים * ב-DOM כברירת מחדל בכל שדה, רק element ריק שממתין לתוכן. */ .myresume-field-note { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: #555; } .myresume-field textarea, .myresume-field input[type="url"], .myresume-field input[type="file"] { width: 100%; padding: 0.6rem; font-size: 20px; border: 1px solid #ccc; border-radius: 6px; } /* מטרות מגע ≥44×44px (סעיף 2 עקרון 8) */ #myresume-submit-btn { width: 100%; min-height: 44px; padding: 0.75rem 1rem; font-size: 1.05rem; font-weight: 600; border: none; border-radius: 6px; background: #1a73e8; color: #fff; cursor: pointer; } #myresume-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } #myresume-submit-btn:focus-visible, .myresume-cta:focus-visible, .myresume-field textarea:focus-visible, .myresume-field input:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; } /* * v0.10.30 — שורש בעיית גלילה אופקית בדף הבדיקה החינמית (דסקטופ ומובייל * כאחד), לפי דיווח מפורש + צילום מסך: `left: -9999px` (ביחד עם * `position: absolute`) מרחיב את שטח הגלילה האופקי הניתן-לגלילה של * ``/`` ב-9999px נוספים — גם כשהאלמנט בלתי נראה ויזואלית, * דפדפנים עדיין סופרים את מיקומו לצורך חישוב ה-scrollWidth הכולל של * העמוד. זה בדיוק מסביר גלילה מקצה-לקצה, בלי קשר ל-RTL/LTR או לגודל * מסך. **לא נפתר עם `overflow: hidden` על קונטיינר-אב** (התבקש במפורש * לא להשתמש בזה כפלסטר) — אלא בהחלפת שיטת ההסתרה עצמה לטכניקת * "visually hidden" הנגישה הסטנדרטית (זהה בעיקרון ל-`.screen-reader-text` * של ליבת וורדפרס, `.sr-only` של Bootstrap וכו'): האלמנט נשאר בגודל * 1x1 פיקסל בזרימת המסמך הרגילה (לא מוזז אלפי פיקסלים הצידה), ונחתך * ויזואלית לגמרי דרך `clip`+`overflow: hidden` **על האלמנט עצמו** — * כך ה-honeypot ממשיך למלא בדיוק את אותו תפקיד (בלתי נראה למשתמש * אנושי, עדיין קיים ב-DOM וניתן למילוי ע"י בוטים גסים שממלאים כל שדה * טקסט בעיוורון), בלי שום השפעה על רוחב הגלילה של העמוד. */ .myresume-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .myresume-alert { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 6px; font-size: 0.95rem; } .myresume-alert-error { background: #fdecea; color: #611a15; border: 1px solid #f5c2bb; } .myresume-result { margin-top: 1.25rem; } .myresume-result:empty { margin-top: 0; } .myresume-result-card { padding: 1rem; border-radius: 8px; border: 1px solid #ddd; } .myresume-result-card.is-success { background: #eaf6ea; border-color: #b9dfb9; } .myresume-result-card.is-warning { background: #fff8e6; border-color: #f0d98c; } .myresume-result-card.is-error { background: #fdecea; border-color: #f5c2bb; } .myresume-score { font-size: 2.5rem; font-weight: 700; line-height: 1; margin-bottom: 0.5rem; } .myresume-score-out-of { font-size: 1.1rem; font-weight: 400; color: #555; } /* .myresume-explanation ו-.myresume-tier-message הן עכשיו DIV עטיפה שמכילות כמה

(ראה appendAsParagraphs ב-JS) — לא טקסט ישיר. */ .myresume-explanation { margin: 0.75rem 0 0; } .myresume-explanation p { margin: 0 0 0.5rem; line-height: 1.6; color: #333; } .myresume-explanation p:last-child { margin-bottom: 0; } .myresume-tier-message { margin: 0.75rem 0 0; padding: 0.65rem 0.9rem; border-radius: 6px; } .myresume-tier-message p { margin: 0 0 0.5rem; font-weight: 600; line-height: 1.5; } .myresume-tier-message p:last-child { margin-bottom: 0; } .myresume-tier-message.is-low { background: #fdecea; color: #B8433A; border: 1px solid #f5c2bb; } .myresume-tier-message.is-mid { background: #fff8e6; color: #B8791A; border: 1px solid #f0d98c; } .myresume-tier-message.is-high { background: #eaf6ea; color: #3E8E5C; border: 1px solid #b9dfb9; } .myresume-tier-message.is-neutral { background: #eaf1f7; color: #2A5C8A; border: 1px solid #b8cede; } .myresume-cta, .myresume-cta:link, .myresume-cta:visited, .myresume-cta:hover, .myresume-cta:active, .myresume-cta:focus { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; margin-top: 1rem; padding: 0.75rem 1rem; min-height: 44px; background: #1a73e8; /* !important: עוקף עיצוב ברירת מחדל של קישורים בתבנית/Elementor שעלול "לתפוס" צבע טקסט/סמן שונה לכפתור הזה. */ color: #fff !important; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 1.05rem; text-align: center; } /* מרחב עבודה רחב יותר (טאבלט ומעלה) — min-width, לא max-width */ @media (min-width: 640px) { .myresume-free-check-form { max-width: 560px; padding: 1.5rem; } } /* * אנימציית טעינה עם "שלבים" (v0.10.33, לפי בקשה מפורשת: "יש לנו פופאפ * שמציג את התהליך... תעשה את זה גם עבור הבדיקה החינמית") — אותו רכיב * בדיוק כמו בבדיקה בתשלום (זהה ל-class/id names ולערכים ב-paid-check.css * #myresume-loading-overlay/.myresume-loading-box וכו', כולל אותו צבע * רקע #2A5C8A — "אחיד בכל השלבים השונים" כפי שהתבקש במפורש). משוכפל * כאן במקום קובץ CSS משותף, עקבי עם האופן שבו שני קבצי ה-CSS של הפלאגין * כבר חולקים דפוסים זהים (למשל כלל הגופן הגורף) בלי import אמיתי. * נוצר/מוסר דינמית ב-JS (showLoadingOverlay ב-free-check.js) — לא קיים * ב-DOM כברירת מחדל. */ #myresume-loading-overlay { position: fixed; inset: 0; background: rgba(20, 20, 20, 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 9999; } .myresume-loading-box { background: #2A5C8A; color: #fff; border-radius: 12px; padding: 2rem 1.75rem; max-width: 360px; width: 100%; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .myresume-loading-spinner { width: 42px; height: 42px; margin: 0 auto 1.25rem; border: 4px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: myresume-spin 0.9s linear infinite; } @keyframes myresume-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .myresume-loading-spinner { animation: none; } } .myresume-loading-text { margin: 0 0 0.5rem; font-size: 1.1rem; font-weight: 600; /* גובה מינימלי — מונע "קפיצת" גודל הקופסה כשהטקסט מתחלף בין הודעות * באורך שונה. */ min-height: 2.6em; } .myresume-loading-note { margin: 0; font-size: 0.85rem; opacity: 0.85; }