/* pages/landing/computer-3d/css/textsize.css נגישות, הגדלת טקסט (29/5/2026). בקשת עומר אחרי שאמא שלו (75, לא טכנולוגית) לא הצליחה לקרוא את הטקסט הקטן. שלוש רמות, רגיל / גדול / גדול מאוד. הפקד מופיע רק במובייל (בדסקטופ הטקסט גדול מספיק). עיצוב segmented control בסגנון iOS, קונצנזוס/עיצוב Gemini 3.5. הרמות משנות font-size על והדף מבוסס rem, אז כל הטקסט גדל. הבחירה נשמרת ב-localStorage (textsize.js). */ /* רמות ההגדלה, על כי הדף מבוסס rem. */ html.fs-large { font-size: 115%; } html.fs-huge { font-size: 132%; } /* ── סרגל הגדלת טקסט, מובייל בלבד ── */ .textsize-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 18px; background: #fff3e6; border-bottom: 1px solid #f0d9bf; font-family: 'Rubik', sans-serif; } /* בדסקטופ אין צורך, הטקסט גדול מספיק. מסתירים לגמרי. */ @media (min-width: 768px) { .textsize-bar { display: none !important; } } /* שורה עליונה, אייקון + תווית, ממורכז. */ .textsize-header { display: flex; align-items: center; justify-content: center; gap: 8px; } .textsize-icon { display: inline-flex; align-items: center; justify-content: center; color: #e8854a; } .textsize-icon svg { display: block; } .textsize-label { font-size: 15px; font-weight: 700; color: #1a4a6b; } /* בורר המקטעים, קפסולה רוחבית. */ .textsize-toggle-group { display: flex; gap: 4px; width: 100%; max-width: 420px; background: rgba(26, 74, 107, 0.05); border: 1px solid rgba(26, 74, 107, 0.08); border-radius: 50px; padding: 4px; box-shadow: inset 0 2px 4px rgba(26, 74, 107, 0.03); box-sizing: border-box; } /* כל כפתור, רוחב שווה, גובה נדיב לאצבע. */ .textsize-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 48px; border: none; background: transparent; border-radius: 50px; color: #1a4a6b; font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } /* אינדיקטור האות א', גדל לפי הרמה (רמז ויזואלי אינטואיטיבי). */ .size-indicator { display: inline-flex; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; line-height: 1; color: rgba(26, 74, 107, 0.6); transition: transform 0.2s ease, color 0.25s ease; } .indicator-normal { font-size: 11px; font-weight: 400; } .indicator-large { font-size: 15px; font-weight: 600; } .indicator-huge { font-size: 19px; font-weight: 800; } /* הנבחר, קפסולה נייבי מלאה עם טקסט לבן ו-א' כתום מותגי. */ .textsize-btn[aria-pressed="true"] { background: #1a4a6b; color: #ffffff; box-shadow: 0 4px 12px rgba(26, 74, 107, 0.18); } .textsize-btn[aria-pressed="true"] .size-indicator { color: #e8854a; transform: scale(1.1); } /* פידבק פיזי קל בלחיצה. */ .textsize-btn:active { transform: scale(0.96); } /* אנגלית קטנה בסוגריים בשמות הרכיבים (עברית ראשית, אנגלית לזיהוי בלבד). */ .component-name .en { font-size: 0.82em; font-weight: 600; opacity: 0.6; }