/* * theme.css — מבנה ופריסה, אתגר עשרה הימים LeviLife * ============================================================================ * כל כלל כאן משתמש ב-var(--token) שמוגדר ב-brand.css. אין כאן צבע גולמי * (hex) אחד — כדי שהחלפת מותג תהיה עריכת קובץ אחד קטן, לא חיפוש-והחלפה. * מובייל-first. נבדק מנטלית ברוחב 390px. שום grid-template-columns:1fr — * ראה feedback_rtl_grid_1fr_blank_mobile: ב-RTL זה בורח שמאלה למסך לבן. * ============================================================================ */ * { box-sizing: border-box; } /* * ---------- שכבת רקע + זכוכית (glassmorphism), אחידה בכל עמוד ---------- * כלל אחד כאן = כל עמוד שטוען את הקובץ הזה מקבל אותו רקע ואת אותו מראה * כרטיס-זכוכית. אין הבדל בין index/day/survey/register — זה בכוונה. * ראו assets/community/*.jpg — נכסים אמיתיים מהפנקס (17.8), לא כתמי CSS. */ html, body { margin: 0; padding: 0; background: linear-gradient(180deg, rgba(36,27,71,.72) 0%, rgba(62,28,150,.55) 60%, var(--bg) 100%), url('../assets/community/hero_bg_v1.jpg') center/cover fixed; color: var(--text); font-family: var(--font); direction: rtl; /* 100dvh **אחרי** 100vh, לא במקומו: 100vh ב-standalone כולל את פס הבית של האייפון, ולכן החלק התחתון נופל מחוץ לאזור הנגיש. דפדפן ישן שלא מכיר dvh פשוט מתעלם מהשורה השנייה ונשאר על vh. */ min-height: 100vh; min-height: 100dvh; -webkit-text-size-adjust: 100%; } /* * ---------- סקאלת טיפוגרפיה (27.8.2026) ---------- * הלקוח על הטלפון: "רואים את הטקסט ממש בקטן". התיקון רוחבי, לא נקודתי — * בסיס 17px + כל גודל בקובץ הועלה ב-15%-45%. כל שדה קלט הועלה ל-16px+ * כי מתחת ל-16px ספארי במובייל מזנק זום על focus ושובר את הפריסה. * גדלי מגע: מינימום 48px לכל אזור לחיץ (מעל תקן 44px של אפל). */ body { /* env(safe-area-inset-bottom): ב-standalone פס הבית של האייפון יושב מעל 60px האלה ובולע את הכפתור האחרון במסך. */ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); font-size: 17px; line-height: 1.6; } .glass { background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); } .bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .5; pointer-events: none; } .badge-icon { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.35); } a { color: inherit; } .wrap { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 16px; } /* ---------- כותרת עליונה ---------- */ .head { text-align: center; padding: 30px 0 18px; } .head .logo { max-width: 195px; height: auto; margin: 0 auto 12px; display: block; } /* שינוי F-003 (18.8.2026): הוגדל 30% (150→195px) לפי החלטת אפיון. */ .head .eyebrow { font-size: 12.5px; letter-spacing: 3px; color: var(--gold-soft); font-weight: 700; text-transform: uppercase; margin-bottom: 9px; } /* * הכותרת בזהב, לא בלבן — בקשה מפורשת של אייל בפגישת 27.8 (סעיף 4 ברשימת * התיקונים). ניגודיות #FDBF04 על הרקע הסגול הכהה ≈ 10:1, מעל AAA. */ .head h1 { font-size: 34px; font-weight: 800; color: var(--gold); letter-spacing: -.4px; line-height: 1.2; margin: 0; text-shadow: 0 2px 12px rgba(0,0,0,.45); } .head .sub { font-size: 16px; color: var(--text-dim); margin-top: 10px; line-height: 1.55; } /* ---------- דובר-בר: מתויג תמיד data-placeholder דרך התוכן עצמו ---------- */ .devbar { background: #1c1440; border: 1px solid var(--surface-3); color: var(--gold-soft); font-size: 13px; text-align: center; padding: 9px 12px; border-radius: 9px; margin: 12px auto 0; max-width: var(--maxw); } /* ---------- מצבי טעינה / שגיאה / ריק, בכל מסך ---------- */ .state-box { max-width: var(--maxw); margin: 40px auto 0; text-align: center; border-radius: var(--radius-card); padding: 38px 22px; background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); } .state-box .ic { font-size: 42px; line-height: 1; } .state-box h2 { font-size: 22px; font-weight: 800; color: var(--text-strong); margin: 16px 0 0; } .state-box p { font-size: 16.5px; color: var(--text-dim); margin: 10px 0 0; line-height: 1.65; } .state-box .actions { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: sk-loop 1.4s ease infinite; border-radius: 12px; } @keyframes sk-loop { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton.line { height: 14px; margin: 8px 0; } .skeleton.block { height: 90px; margin: 14px 0; } .skeleton-wrap { max-width: var(--maxw); margin: 30px auto 0; padding: 0 18px; } .banner { max-width: var(--maxw); margin: 14px auto 0; padding: 14px 16px; border-radius: 12px; font-size: 15.5px; line-height: 1.55; display: flex; align-items: flex-start; gap: 10px; } .banner[hidden] { display: none; } .banner.error { background: var(--danger-bg); color: #FCA5A5; border: 1px solid #5c2530; } .banner.success { background: var(--done-bg); color: #86efac; border: 1px solid #275c3c; } .banner .ic { flex-shrink: 0; } /* ---------- כפתורים ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 800; font-size: 17.5px; cursor: pointer; border-radius: var(--radius-pill); border: none; min-height: 56px; padding: 0 24px; width: 100%; line-height: 1.2; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--btn-bg); color: var(--btn-text); } .btn-primary:hover:not(:disabled) { background: var(--btn-bg-hover); } .btn-secondary { background: transparent; color: var(--text-dim); border: 1px solid var(--line); font-weight: 600; font-size: 15.5px; min-height: 48px; } .btn-block { display: flex; } /* שני כפתורים ברצף נגעו זה בזה במובייל — הפרדה קבועה, לא לכל דף בנפרד. */ .btn + .btn { margin-top: 12px; } /* * ---------- יציאה מפורשת לכלים הפנימיים: body class="tools-ui" (1.9.2026) ---------- * `.btn` למעלה הוא **כפתור של עמוד תלמיד במובייל**: רוחב מלא, 56px גובה, * ושני כפתורים נערמים זה מעל זה. זה נכון ומכוון שם (89% מהמשתמשים בטלפון) * ואין לשנות אותו. * * אבל admin.html ו-mentor.html טוענים את theme.css כמו כל עמוד אחר, ושם * `.btn` הוא כפתור פעולה בתוך שורת טבלה, בשורת ייצוא או בכרטיס משתתף. * שני הקבצים מגדירים `.btn` משלהם אחרי theme.css, אבל הם לא הצהירו על * `width` ולא על `min-height` — ולכן ירשו רוחב מלא וגובה 56px בשקט: * · mentor.js מרנדר שני כפתורים בשורת משתתף → נערמו במקום להיות זה לצד זה. * · שורת הייצוא (CSV/JSON) → כל כפתור נשבר לשורה משלו. * · admin.js מרנדר כפתור בתוך → כל שורת טבלה התנפחה ל-56px. * הראיה שזו הייתה תאונה ולא כוונה: שני הקבצים מוסיפים `style="width:100%"` * ידנית על כפתור הכניסה, כלומר מי שכתב אותם הניח ש-.btn איננו רוחב-מלא. * * הפתרון: הכלי הפנימי מצהיר על עצמו פעם אחת ב-, * וכל הכפתורים בתוכו חוזרים לגודלם הטבעי — כולל כפתורים שנוצרים ב-JS, * כי ההיקוף הוא לפי אב ולא לפי מחלקה על הכפתור עצמו (אין צורך לגעת * ב-admin.js / mentor.js). הסלקטור (0,2,0) גובר על `.btn` (0,1,0) בלי * תלות בסדר הטעינה, ולכן זה לא יישבר שוב בסבב הבא. * * ⚠️ הבלוק הזה לא נוגע באף עמוד תלמיד: אין `tools-ui` בשום עמוד אחר. * ⚠️ `style="width:100%"` המוטבע על כפתורי הכניסה עדיין גובר (inline) — * טופס הכניסה נשאר רוחב מלא, כמו שנועד. * ⚠️ 44px הוא רצפת אזור המגע של אפל. אין לרדת מתחתיו — אייל ועדי * מתחברים לכלים האלה מהטלפון. */ .tools-ui .btn { width: auto; min-height: 44px; } .tools-ui .btn + .btn { margin-top: 0; } /* ---------- מפת עשרת הימים ---------- */ .progress-box { border-radius: var(--radius-card); padding: 18px 18px; background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); } .progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; } /* min-width:0 — פריט flex לא מתכווץ מתחת ל-min-content כברירת מחדל, ולכן תווית עברית ארוכה יכולה לדחוף את השורה מעבר לרוחב המסך ב-390px. עם min-width:0 היא נשברת בתוך המכל במקום לגלוש. */ .progress-top .label { font-size: 15px; color: var(--text-dim); font-weight: 500; min-width: 0; } .progress-top .val { font-size: 16px; color: var(--text-strong); font-weight: 700; min-width: 0; } .bar { height: 11px; background: var(--input-bg); border-radius: var(--radius-pill); overflow: hidden; } .bar > span { display: block; height: 100%; width: 0; background: var(--btn-bg); border-radius: var(--radius-pill); transition: width .5s; } .map-title { font-size: 21px; font-weight: 800; color: var(--text-strong); margin: 26px 0 14px; } /* * 🗑️ נמחק 1.9.2026: `.day-grid` / `.day-cell` (רשת הריבועים הממוספרים). * הרשת הוחלפה בשורות עם כותרות שיעור (`.day-row` ב-home.css) לבקשת הלקוח, * והכללים נשארו יתומים. חיפוש חוזר על **כל** public/ (HTML + JS + CSS) * החזיר אפס הפניות מחוץ ל-theme.css עצמו — כולל portal.js אחרי שהסוכן * שערך אותו סיים. נמחקו גם שתי ההמשכיות ב-media queries שבסוף הקובץ * ובכלל prefers-reduced-motion. אין להחזיר: מפת הימים חיה ב-home.css. */ .today-cta { border-radius: var(--radius-card); padding: 16px 18px; margin-bottom: 20px; background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); } .today-cta .lbl { font-size: 13px; color: var(--gold); font-weight: 700; margin-bottom: 7px; letter-spacing: .5px; } .today-cta h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.4; color: var(--text-strong); font-weight: 800; } .today-cta .countdown { display: block; font-size: 14px; color: var(--gold-soft); margin-bottom: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .today-cta .btn { margin-top: 14px; } .credit { text-align: center; color: var(--text-faint); font-size: 13.5px; margin-top: 28px; } /* ---------- מסך יום — day.html ---------- */ .day-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px auto 0; } .day-tags .tag-day { font-size: 14px; font-weight: 700; color: var(--btn-text); background: var(--btn-bg); padding: 6px 14px; border-radius: var(--radius-pill); } .day-tags .tag-status { font-size: 14px; font-weight: 600; color: var(--text-dim); } .day-title { font-size: 30px; font-weight: 800; color: var(--text-strong); letter-spacing: -.3px; margin: 16px 0 4px; line-height: 1.25; } .day-dur { font-size: 15px; color: var(--text-dim); margin-bottom: 18px; } .video { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--input-bg); border: 1px solid var(--line); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video.ph { display: grid; place-items: center; border: 2px dashed var(--surface-3); } .video.ph .phtxt { color: var(--text-dim); font-size: 16px; text-align: center; padding: 0 24px; line-height: 1.6; } /* קישור-מוצא לנגן — היה טקסט זעיר בלי אזור מגע. עכשיו 48px גובה לחיץ. */ .video-fallback { display: block; text-align: center; font-size: 14.5px; color: var(--gold-soft); margin-top: 4px; text-decoration: none; font-weight: 600; min-height: 48px; line-height: 48px; } .video-fallback:hover { text-decoration: underline; } .card { margin: 20px auto 0; border-radius: var(--radius-card); padding: 22px 20px; background: rgba(255,255,255,.07); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12); } .card h3 { font-size: 18.5px; font-weight: 800; color: var(--text-strong); margin: 0 0 12px; line-height: 1.35; } /* overflow-wrap:anywhere — תשובת תרגיל או קישור שהתלמיד הדביק הם מחרוזת אחת בלי רווחים, וב-390px היא דוחפת את הכרטיס מעבר לרוחב המסך. */ .card p { font-size: 17px; color: var(--text); line-height: 1.75; margin: 0; overflow-wrap: anywhere; } .success-story { border-inline-start: 3px solid var(--gold); } .success-story .author { font-size: 14.5px; color: var(--gold-soft); font-weight: 700; margin-top: 12px; } .authority { border-inline-start: 3px solid var(--teal, var(--gold-soft)); } .card .video { margin-bottom: 12px; } .mission-card { border-color: rgba(205,172,88,.5); } .mission-card h3 { color: var(--gold-soft); } /* ---------- טופס תרגיל / שאלון, נבנה דינמית מ-schema ---------- */ .form-field { margin: 22px auto 0; } .form-field > label { display: block; font-size: 17px; font-weight: 700; color: var(--text-strong); margin-bottom: 10px; line-height: 1.45; } .form-field .req { color: var(--gold); margin-inline-start: 3px; } /* היה --text-faint: כ-3:1 מול הכרטיס, לא קריא בטלפון. הועלה ל---text-dim. */ .form-field .hint { font-size: 13.5px; color: var(--text-dim); margin-top: 7px; line-height: 1.5; } /* font-size 16.5px ולא פחות: מתחת ל-16px ספארי מזנק זום אוטומטי על focus. */ .f-text, .f-textarea, .f-select { width: 100%; background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; color: var(--text); font-family: var(--font); font-size: 16.5px; outline: none; min-height: 52px; } .f-text:focus, .f-textarea:focus, .f-select:focus { border-color: var(--gold-soft); } .f-textarea { min-height: 132px; resize: vertical; line-height: 1.65; } .f-text::placeholder, .f-textarea::placeholder { color: var(--text-faint); } .f-options { display: flex; flex-direction: column; gap: 10px; } .f-option { display: flex; align-items: center; gap: 12px; background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; min-height: 56px; } /* * הריבוע/העיגול עצמו 24px, אבל **אזור המגע הוא ה-label כולו** — `.f-option` * הוא