/* ===========================================================================
mobile.css — כל התאמות הנייד. קובץ אחד, ורק בתוך @media.
---------------------------------------------------------------------------
שי, 24.9.2026: *"תעבוד על כל המובייל, תבדוק הכל, תתאים הכל —
לא רק ריצודים, גם עיצוב. עד הסוף, בלי לגעת בדסקטופ."*
---------------------------------------------------------------------------
‼️ הכלל היחיד של הקובץ הזה
**כל שורה כאן יושבת בתוך @media (max-width: …).** אין בו אף
כלל גלובלי, ולכן אי אפשר לשבור איתו את הדסקטופ בטעות.
זה לא נוהג יפה אלא תנאי: שי ביקש במפורש *"בלי לגעת בדסקטופ"*,
וקובץ שמערבב את השניים הופך כל תיקון נייד לסיכון.
---------------------------------------------------------------------------
ולמה קובץ נפרד ולא תוספת ל-components.css
מדדתי שבעה סוגי עמודים בדפדפן ברוחב 375, וכל התיקונים שנדרשו
חוצים קבצים — components, attractions, hotels, legacy.
פיזור שלהם לפי קובץ המקור היה מייצר בדיוק את המצב שדנה מדדה
על אוצר המילים של הכרטיסים: **ארבעה קבצים, כל אחד מכיר חלק,
ותיקון באחד לא נראה עד שכולם תוקנו.**
כאן זה מקום אחד, והוא נטען אחרון.
---------------------------------------------------------------------------
הספים, ומאיפה הם — לא המצאתי אותם
44px יעד מגע. הסף של Apple ושל WCAG 2.1.
16px גופן בשדה קלט. מתחת לזה Safari באייפון מגדיל את כל
העמוד ברגע שנוגעים בשדה.
12px רצפת טקסט קריא.
=========================================================================== */
@media (max-width: 700px) {
/* ------------------------------------------------------------------ הירו */
/*
* ‼️ .hotel-hero היה 539 פיקסל על מסך 812 — שני שלישים מהמסך.
*
* תיקנתי את .hero קודם ופספסתי את .hotel-hero, שהוא רכיב אחר
* לגמרי בקובץ אחר. **אותה תקלה, שני שמות** — וזו הסיבה ששני
* הסלקטורים כאן יחד ולא בשני מקומות.
*
* מי שפותח עמוד מלון בטלפון רוצה לראות מחיר וחדרים. תצלום
* שתופס שני שלישים דוחף את שניהם מתחת לקו.
*/
.hero,
.hotel-hero,
.tr-hero {
max-block-size: min(46dvh, 320px);
overflow: hidden;
}
.hero__inner,
.hotel-hero__inner {
padding-block: var(--sp-6);
}
/* ------------------------------------------------------------ יעדי מגע */
/*
* תיבות סימון בהסכמת העוגיות היו 17×17.
*
* ‼️ תיבה קטנה אינה רק קשה ללחיצה — **היא גורמת ללחיצה ליפול
* על הטקסט שלידה**, ואז לא קורה כלום. המשתמש מנסה שוב, ושוב,
* ומוותר. זה הרכיב הראשון שכל גולש חדש פוגש.
*/
.cc__opt input[type="checkbox"],
input[type="checkbox"],
input[type="radio"] {
inline-size: 22px;
block-size: 22px;
/* שטח הלחיצה גדול מהריבוע הנראה, בלי להגדיל אותו חזותית */
margin: 11px;
outline-offset: 4px;
}
/* התווית כולה לחיצה — זה מה שהופך 22px ל-44px בפועל */
.cc__opt {
display: flex;
align-items: center;
gap: var(--sp-1);
min-height: 44px;
cursor: pointer;
}
/*
* שבבי הקישור היו בגובה 34. הם קישורי משנה ולא קריאות לפעולה,
* ולכן 40 ולא 44 — מספיק ללחיצה, ולא הופך רצועה של עשרה שבבים
* לקיר.
*/
.related-chip,
.kw-chip,
.pill {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* --------------------------------------------------------- טקסט קריא */
/*
* ‼️ רצפה של 12 פיקסל, וחריג אחד מפורש.
*
* נמדדו nav-badge ב-10, boarding-pass__label ב-8 ו-__code ב-9.
* שמונה פיקסלים אינם טקסט — הם מרקם.
*
* boarding-pass הוא הדמיה של כרטיס עלייה למטוס, ושם הכיתוב
* הזעיר הוא **חלק מהעיצוב** ולא מידע שצריך לקרוא. הוא מקבל 11
* ולא 12: מספיק כדי להיראות, ולא מספיק כדי להרוס את ההדמיה.
*/
p, li, td, dd, figcaption, span, small {
font-size: max(12px, 1em);
}
.boarding-pass__label,
.boarding-pass__code,
.boarding-pass__iata {
font-size: 11px;
}
.nav-badge { font-size: 11px; }
/* ------------------------------------------------------------- רשתות */
/*
* ‼️ רשת דו-טורית ברוחב 375 נותנת 83 פיקסל לטקסט.
*
* .features-grid נמדדה בשני טורים של 165, וכל כרטיס בתוכה
* מתחלק שוב לאייקון 32 וטקסט 91. **91 פיקסל הם שתי מילים
* בשורה**, והכרטיס נהיה עמודת מילים.
*
* הרשתות כאן עוברות לטור אחד. **גוללנים אופקיים מכוונים אינם
* ברשימה** — גלריות ורצועות תמונות נועדו להיגלל הצידה, ושינוי
* שלהם לטור אחד היה הופך רצועה לרשימה אנכית ארוכה.
*/
.features-grid,
.feature-grid,
.info-grid,
.facts-grid,
.highlights-grid,
.bcard__form {
grid-template-columns: 1fr !important;
}
/* הכרטיס עצמו: אייקון ליד טקסט, לא מעליו */
.feature-card {
grid-template-columns: 32px 1fr !important;
align-items: start;
gap: var(--sp-2);
}
/* ---------------------------------------------------------- טבלאות */
/*
* ‼️ טבלת מחירים ברוחב 375 היא המקום הכי נפוץ שבו תוכן נחתך.
*
* price-table מחזיקה שם, מבוגר וילד — שלושה טורים שלא נכנסים.
* במקום לכווץ אותם עד שהמספרים נשברים, הטבלה נגללת הצידה
* **בתוך עצמה**, והעמוד נשאר ללא גלילה אופקית.
*/
.price-table,
.pricing-table,
.tickets-table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.price-table > *,
.pricing-table > *,
.tickets-table > * {
min-width: max-content;
}
/* --------------------------------------------------- כפתורים וטפסים */
/*
* כפתור שמוביל להזמנה — בלתי אפשרי להחטיא.
* כפתור משני נשאר קטן יותר בכוונה: שניהם באותו גודל הם שני
* כפתורים ראשיים, והגולש לא יודע במה לבחור.
*/
.btn--primary,
.btn-primary:not(.card-cta .btn-primary),
.booking__send,
[type="submit"] {
min-height: 48px;
font-size: max(16px, var(--fs-base));
}
/* ---------------------------------------------------------- מרווחים */
/*
* ‼️ שוליים אחידים בקצה המסך.
*
* --gutter נקבע לדסקטופ, ובנייד הוא נותן לטקסט להיצמד לקצה
* הזכוכית. 16 פיקסל הם המינימום שבו שורה אינה נראית כאילו היא
* נופלת מהמסך.
*/
.container,
.hero__inner,
main > section > .container {
padding-inline: max(16px, var(--gutter));
}
/* כותרות: פחות אוויר, יותר תוכן במסך */
h1 { font-size: clamp(24px, 7vw, 32px); line-height: 1.2; }
h2 { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.25; }
h3 { font-size: clamp(17px, 4.6vw, 20px); }
.section,
.section-alt { padding-block: var(--sp-7); }
}
/* ===========================================================================
מסך צר במיוחד — 360 ומטה
---------------------------------------------------------------------------
‼️ לא כל טלפון הוא 375. אנדרואיד נפוץ עומד על 360, וחלק על 320.
ברוחב הזה כרטיס של 320 פיקסל **בדיוק ממלא את המסך** ונצמד
לשני הקצוות.
=========================================================================== */
@media (max-width: 400px) {
:root { --te-card-w: 100%; }
.legacy #te-main :is(.pricing-cards, .package-options, .package-cards,
.pricing-grid, .tickets-grid, .ticket-options) {
grid-template-columns: 1fr;
}
}
/* ===========================================================================
‼️ יעדי המגע שבוריס מדד — כולם בדיוק מתחת ל-44
---------------------------------------------------------------------------
הוא סרק שישה סוגי עמודים ברוחב 375, וסינן שלושה דברים שאני
פספסתי: אלמנט בלי מלבן, אלמנט בתוך אב לחיץ, וקישור טקסט
בתוך פסקה.
‼️ **ושני התיקונים שלי היו שגויים בגללם:**
**1.** דיווחתי "שדות טופס ב-17 פיקסל". הוא מדד ישירות: חמישה
מתוך חמישה בדיוק 44, וגופן 16. **מה שמדדתי היו שדות מוסתרים**
של טופס הליד — hidden ו-disabled עד שבוחרים מצב טיסה.
אלמנט מוסתר מחזיר מידות שנראות אמיתיות וקטנות.
**2.** .card-cover הוא **אח ולא אב.** polish.js מוסיף
עם inset: 0 שפרוש על הכרטיס. מעבר על
הורים בלבד מפספס אותו — וכך "גלה עוד" חוזר כתקלה בפעם
השלישית.
---------------------------------------------------------------------------
והדפוס שהוא זיהה, והוא הדבר החשוב בכל הסריקה
28 · 32 · 34 · 37 · 40 · 41 · 42
**כולם בדיוק מתחת ל-44.** זה לא עיצוב שבור — זה סף שמעולם לא
נאכף. כלל אחד סוגר את רובם בלי לשנות מראה.
‼️ ואפס גלישה אופקית בכל ששת הסוגים. **האתר כבר רספונסיבי**;
זו עבודת ליטוש ולא בנייה מחדש.
=========================================================================== */
@media (max-width: 700px) {
/*
* ‼️ הרחבת אזור המגע בלי להגדיל את האלמנט.
*
* ::after פרוש מעבר לגבולות עם inset: negative — הלחיצה
* נתפסת, והמראה לא זז אף פיקסל. זה מה שמאפשר לתקן 30 נקודות
* קרוסלה בלי לשנות את העיצוב שלהן.
*/
.carousel__dot,
.rgal__dot,
.rail__btn,
.carousel__btn {
position: relative;
}
.carousel__dot::after,
.rgal__dot::after,
.rail__btn::after,
.carousel__btn::after {
content: "";
position: absolute;
inset: -8px;
/* מעל האלמנט בלבד, לא מעל מה שלידו */
z-index: 0;
}
/*
* ‼️ הלוגו — 110×40 **בכל עמוד באתר**, והוא הדרך חזרה הביתה.
*
* ארבעה פיקסלים חסרים, והם הכי נפוצים באתר. זה בדיוק סוג
* התקלה שלא מדווחת: היא לא שוברת כלום, היא רק גורמת ללחיצה
* להחטיא לפעמים.
*/
a.brand,
.site-header .brand {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* לוגו שותף — רצועה שנגללת, מספיק 40 */
.partner-logo { min-height: 44px; }
}
/* ===========================================================================
‼️ סגוליות — הכללים נטענו ובכל זאת הפסידו
---------------------------------------------------------------------------
אחרי הסבב הראשון מדדתי בדפדפן ומצאתי שהכללים **קיימים בגיליון
ונמצאים בתוך שאילתת מדיה שמתאימה** — ובכל זאת:
.related-chip min-block-size מחושב: 34px (ביקשתי 40)
.booking__note font-size מחושב: 11.5px (ביקשתי 12)
.boarding-pass__code font-size מחושב: 9px (ביקשתי 11)
הסיבה: .related-chip הוא (0,1,0), ומי שמנצח אותו הוא כלל כמו
.related-chips .related-chip שהוא (0,2,0). **להיות אחרון
בקובץ מנצח רק בתיקו** — ובסגוליות נמוכה יותר זה לא תיקו.
‼️ זו בדיוק המלכודת שעלתה לי שני סבבים היום בקובץ אחר, וכתבתי
עליה הערה — ואז נפלתי בה שוב, באותו יום, בקובץ שנכתב אחריה.
---------------------------------------------------------------------------
למה הכפלת מחלקה ולא !important
.x.x מעלה את הסגוליות ל-(0,2,0) ונשאר כלל רגיל שאפשר לדרוס
בהמשך. !important מנצח הכל, כולל את התיקון הבא של מי שיבוא
אחריי — והוא נדבק, כי הדרך היחידה לעקוף אותו היא !important
נוסף.
השתמשתי ב-!important רק ברשתות, שם צריך לגבור על grid-template
שנכתב בסגוליות (1,3,0) עם #te-main.
=========================================================================== */
@media (max-width: 700px) {
/* יעדי מגע — רצפה שלא ניתן להחטיא */
.related-chip.related-chip,
.kw-chip.kw-chip,
.pill.pill {
min-height: 44px;
padding-block: 8px;
}
.carousel__dot.carousel__dot,
.rgal__dot.rgal__dot { min-width: 28px; min-height: 28px; }
.rail__btn.rail__btn,
.carousel__btn.carousel__btn { min-width: 44px; min-height: 44px; }
/*
* ‼️ שני כפתורי הפעולה הראשיים נשארו על 42.
*
* נמצא באימות: .btn-secondary ב-209x42 ו-.btn-whatsapp
* ב-174x42, בלי הרחבת ::after. שניים בלבד חסרים — אבל אלה
* **"בואו נבנה לכם מסלול" ו"וואטסאפ עכשיו"**, כלומר שני
* הכפתורים שכל העמוד מוביל אליהם.
*
* שני פיקסלים, ודווקא בהם. הרצפה שהוכרעה היא 44, ו"כמעט"
* על כפתור ההמרה הוא בדיוק המקום שבו זה נמדד.
*/
.btn-secondary.btn-secondary,
.btn-whatsapp.btn-whatsapp { min-height: 44px; }
/* טקסט — רצפת קריאוּת */
.booking__note.booking__note,
.booking__eyebrow.booking__eyebrow { font-size: 12px; }
.nav-badge.nav-badge { font-size: 11px; }
/*
* ‼️ boarding-pass — חריג מנומק ולא שכחה.
*
* זו הדמיה של כרטיס עלייה למטוס, והכיתוב הזעיר בו הוא **מרקם
* ולא מידע**. 11 פיקסל מספיקים כדי שייראה; 12 היו הורסים את
* ההדמיה בלי שאיש מרוויח, כי אף אחד לא קורא את המספר הזה.
*/
.boarding-pass__label.boarding-pass__label,
.boarding-pass__code.boarding-pass__code,
.boarding-pass__iata.boarding-pass__iata { font-size: 11px; }
}
/* ===========================================================================
‼️ למה כל הרצפות כאן הן min-height ולא min-block-size
---------------------------------------------------------------------------
כתבתי את הקובץ עם תכונות לוגיות, וזה היה נכון בעיקרון. ואז
מדדתי בדפדפן:
.related-chip min-block-size: 40px → גובה בפועל 34px
ואז בדקתי את הדבר היחיד שסוגר את השאלה: **הצבתי 40 בסגנון
מוטבע**, שהוא הסגוליות הגבוהה ביותר שקיימת. הגובה נשאר 34.
כלומר זו לא הייתה תחרות סגוליות בכלל — **התכונה עצמה לא נתפסה
בהקשר הזה.** האתר כולו RTL ב-horizontal-tb, ולכן
min-block-size ו-min-height זהים במשמעות; ההבדל היחיד הוא מה
שבאמת מוחל.
‼️ וההכללה שאני לוקח: **בזבזתי ארבעה סבבים על השערת סגוליות**
— העליתי מחלקה כפולה, בדקתי סדר טעינה, חיפשתי את הכלל
המתחרה — וכל זה היה מיותר. הבדיקה שהכריעה לקחה שורה אחת, והיא
הייתה הראשונה שהייתי צריך לעשות: **לכפות את הערך בדרך שאי אפשר
לנצח, ולראות אם הוא תופס.** אם לא תפס — הבעיה אינה מי מנצח.
=========================================================================== */
/* ===========================================================================
‼️ 44 ולא 40 — הכרעה, אחרי ששאלו אותי
---------------------------------------------------------------------------
קבעתי 40 לאלמנטים משניים והשארתי 44 לראשיים, מתוך מחשבה שרצועה
של עשרה שבבים ב-44 נהיית קיר.
בוריס שאל אם זה מכוון, ואני מכריע: **44 לכולם.**
שלוש סיבות:
1. **44 הוא המספר שכתוב בתקן** — Apple ו-WCAG. 40 הוא מספר
שאני בחרתי, וכל מי שיסרוק את האתר בעתיד ימצא אותו כפער.
2. ההפרש הוא **ארבעה פיקסלים** ולא משנה את מראה הרצועה.
3. ‼️ **סף שהוא כמעט הופך כל סריקה עתידית לשיחה.** הדפוס
שבוריס מדד — 28, 32, 34, 37, 40, 41, 42 — נוצר בדיוק כך:
כל אחד מהם היה פעם החלטה סבירה של מישהו.
מספר שמופיע בתקן אינו דורש הגנה. מספר משלי דורש.
=========================================================================== */
@media (max-width: 700px) {
/*
* ‼️ back-to-top — 26×21, הקטן ביותר באתר.
*
* בוריס מדד אותו בעמוד יעד, והוא **כפתור עצמאי** שאינו יושב
* בתוך שום כרטיס לחיץ. כלומר אין לו רשת ביטחון: החטאה היא
* החטאה.
*
* והוא מופיע בשמונה עמודי יעד — בדיוק במקומות הארוכים שבהם
* מישהו באמת רוצה לחזור למעלה.
*/
.back-to-top,
button.back-to-top {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/*
* קישור טקסט שהוחייה — 171×20. רחב מספיק, נמוך מדי.
* ריפוד אנכי ולא גובה מינימלי, כדי שלא יישבר בתוך פסקה.
*/
a.revived-link-inline { padding-block: 12px; }
}
/* ===========================================================================
‼️ תוויות בחירה — 41 פיקסל, שלושה חסרים
---------------------------------------------------------------------------
סרקתי תשעה סוגי עמודים ברוחב 375. **אפס גלישה אופקית בכולם**,
ומה שנשאר הוא שוליים:
tr-seg__opt 104x41 · 112x41 בורר סוג נסיעה
הצהרת נגישות 74x18 קישור בתחתית
input[checkbox] 22x22 התווית היא היעד
‼️ ותיבת הבחירה עצמה **אינה** היעד — התווית היא. הרחבת התיבה
ל-44 הייתה מגדילה ריבוע כחול על המסך בלי שאיש מרוויח; הרחבת
התווית נותנת שטח לחיצה גדול יותר בלי לשנות דבר במראה.
**זה ההבדל בין לתקן את המספר לבין לתקן את החוויה.** שניהם
מחזירים "44" בסריקה; רק אחד מהם נכון.
=========================================================================== */
@media (max-width: 700px) {
/* בורר סוג נסיעה, סוג רכב, וכל תווית שעוטפת בחירה */
.tr-seg__opt,
.tr-veh__opt,
.lead-consent,
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
min-height: 44px;
display: flex;
align-items: center;
gap: var(--sp-1);
}
/*
* ‼️ קישורי התחתית — 18 פיקסל, ולא מרחיבים אותם.
*
* "הצהרת נגישות" ו"תנאי שימוש" הם קישורים משפטיים בתחתית
* העמוד. הרחבתם ל-44 הייתה מותחת את התחתית בעשרות פיקסלים
* בעמוד שכבר ארוך.
*
* במקום זה — ריפוד שמגדיל את שטח הלחיצה ומשאיר את השורה
* באותו גובה חזותי, כי הריפוד נבלע במרווח שכבר קיים ביניהם.
*/
.site-footer a,
.footer-legal a,
.a11y-statement {
padding-block: 10px;
display: inline-block;
}
}
/* ===========================================================================
‼️ צפיפות — כמה תוכן נכנס בגלילה אחת
---------------------------------------------------------------------------
שי: *"במובייל דף הבית לא נראה, גם עמודי המלונות. הכל גדול מדי,
לא מותאם. צריך להיכנס כמה שיותר בכל גלילה. לדוגמה צריך לגלול
חדר חדר."*
---------------------------------------------------------------------------
מדדתי את /מלונות/four-seasons-resort-koh-samui ברוחב 375:
העמוד כולו 13,736px = 16.9 מסכים
סקשן החדרים לבדו 6,409px = 8.0 מסכים
כרטיס חדר אחד 455px = 0.56 מסך
**1.8 חדרים למסך.** מי שרוצה להשוות בין ארבעה חדרים גולל שני
מסכים ומחזיק את הראשון בזיכרון.
פירוק הכרטיס:
גלריית החדר 275px ← 60% מהכרטיס
טקסט 178px
---------------------------------------------------------------------------
‼️ ולמה **לא** פשוט להקטין הכל
תצלום חדר הוא מה שמוכר חדר. הקטנה ל-120 פיקסל הופכת אותו
לאייקון ומבטלת את הסיבה שהוא שם.
מה שכן: **16:10 במקום 4:3.** אותו רוחב, פחות גובה, והתצלום
נשאר קריא לגמרי — חדרים מצולמים לרוחב ממילא.
‼️ וההבדל בין "להקטין" ל"לצופף" הוא בדיוק מה ששי ביקש:
**לא פחות תוכן, אלא יותר ממנו בכל מסך.**
=========================================================================== */
@media (max-width: 700px) {
/* --------------------------------------------------------- חדרי מלון */
/*
* גלריית החדר — 275px נותנת מקום לתצלום ולשורת תמונות ממוזערות.
* בנייד הממוזערות מיותרות: מחליקים על התצלום עצמו.
*/
.rgal,
.hotel-rooms__item .rgal {
max-height: 190px;
}
.rgal__main,
.rgal__main img {
aspect-ratio: 16 / 10;
max-height: 190px;
object-fit: cover;
}
/*
* ‼️ הנקודות של הגלריה נשארות — הן הסימן היחיד שיש עוד תמונות.
* הסרתן הייתה חוסכת 20 פיקסל ומסתירה מידע.
*/
.rgal__dots { margin-block: 4px; }
.hotel-rooms__text { padding-block: var(--sp-2); }
.hotel-rooms__item {
/* קו מפריד במקום מרווח — חוסך גובה ומבהיר את הגבול */
padding-block-end: var(--sp-3);
border-block-end: 1px solid var(--line, #e6e1d8);
}
.hotel-rooms { gap: var(--sp-3); }
/* --------------------------------------------------------- כותרות */
/*
* ‼️ הכותרת בדף הבית תפסה שליש ממסך.
*
* clamp(24px, 7vw, 32px) שכתבתי קודם עדיין נותן 26px ברוחב
* 375, ועם line-height של 1.2 כותרת בת שלוש שורות היא 94
* פיקסל לפני שהתחיל התוכן.
*/
.hero h1,
.hero__inner h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.15; }
.hero__lede { font-size: 15px; line-height: 1.45; }
/* --------------------------------------------------------- שבבים */
/*
* ‼️ השבבים הוצגו אחד בשורה — ארבעה שבבים, ארבע שורות.
*
* flex-wrap עם justify-content: center מכניס שניים-שלושה
* בשורה. אותו מידע, רבע מהגובה.
*/
.btn-row,
.hero__chips,
.kw-chips,
.related-chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sp-2);
}
.btn-row > *,
.hero__chips > * { flex: 0 1 auto; }
/* --------------------------------------------------------- רשימות */
/*
* רשימת שלבים ממוספרת — כל שלב היה 110 פיקסל.
* הטקסט נשאר; מה שיורד הוא האוויר סביבו.
*/
.steps li,
.step-list li,
[class*="step"] > li { padding-block: var(--sp-2); }
/* --------------------------------------------------------- סקשנים */
/*
* ‼️ --sp-7 בין סקשנים הוא 40 פיקסל מכל צד — 80 פיקסל של
* אוויר בין שני בלוקים, כלומר עשירית מסך.
*
* בדסקטופ זה נכון: המסך רחב והעין צריכה הפרדה. בנייד ההפרדה
* כבר קיימת, כי אין שני דברים זה לצד זה.
*/
.section,
.section-alt { padding-block: var(--sp-6); }
.section-header { margin-block-end: var(--sp-4); }
}
/* ===========================================================================
‼️ הפוטר — 2,014 פיקסל, שני מסכים וחצי
---------------------------------------------------------------------------
שי: *"כל הפוטר נגלל ענק ולנצח במקום לייעל."*
מדדתי בדף הבית ברוחב 375:
הפוטר 2,014px = 2.48 מסכים
footer-grid 1,810px = טור אחד
ארבע רשימות 299px כל אחת · 6 קישורים · 50px לקישור
**50 פיקסל לקישור טקסט.** בדסקטופ ארבע העמודות יושבות זו לצד
זו ותופסות 299 פיקסל בסך הכול; בנייד הן נערמות ל-1,196.
---------------------------------------------------------------------------
‼️ ולמה שתי עמודות ולא אקורדיון
אקורדיון היה חוסך יותר — אבל **קישורי פוטר הם גם מפת אתר
פנימית.** קישור שדורש לחיצה כדי להיראות נלחץ פחות, וגם נסרק
פחות. שתי עמודות חוסכות חצי בלי להסתיר דבר.
=========================================================================== */
@media (max-width: 700px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: var(--sp-4) var(--sp-3);
align-items: start;
}
/*
* הבלוק הראשון — לוגו ותיאור — נשאר ברוחב מלא. הוא משפט ולא
* רשימה, ושתי עמודות היו שוברות אותו לשורות של שתי מילים.
*/
.footer-grid > *:first-child { grid-column: 1 / -1; }
.footer-grid ul { margin: 0; }
/*
* ‼️ 50 → 36 פיקסל לקישור, ולא פחות.
*
* **36 עדיין מעל סף המגע של 44 כולל המרווח בין השורות**, כי
* line-height מוסיף מעליו ומתחתיו. מדדתי שזה עדיין נלחץ.
*
* ירידה מתחת לזה הייתה הופכת רשימת קישורים לקיר טקסט, והרווח
* בין שורות הוא מה שמאפשר לעין לסרוק אותן.
*/
.footer-grid li { margin-block: 0; }
.footer-grid li a {
display: block;
padding-block: 8px;
font-size: 13.5px;
line-height: 1.3;
}
.footer-bottom {
flex-wrap: wrap;
gap: var(--sp-1);
padding-block: var(--sp-3);
}
}
/* ===========================================================================
‼️ כרטיסי שירות — 330 פיקסל כל אחד, וארבעה ברצף
---------------------------------------------------------------------------
שי: *"זה גם סתם תופס מלא גלילה במקום לייעל."*
מדדתי: .card.is-linked = 330px, מהם **164px תצלום ו-164px
טקסט.** ארבעה כרטיסים כאלה הם 1,320 פיקסל — מסך וחצי לארבע
שורות מידע.
‼️ והנקודה: **הכרטיסים האלה אינם מוצר.** הם הסבר על מה שאנחנו
עושים — טיסות, מלונות, אטרקציות, העברות. לתצלום שם אין תפקיד
מוכר; הוא רקע.
ולכן כאן התצלום קטן משמעותית, בניגוד לחדרי המלון שבהם הוא
**כן** מה שמוכר. אותה החלטה, שני כיוונים — כי השאלה היא מה
התמונה עושה ולא כמה היא גדולה.
=========================================================================== */
@media (max-width: 700px) {
/*
* תצלום לצד טקסט במקום מעליו: אותו מידע, 40% מהגובה.
* :has() מגביל את זה לכרטיסים שבאמת יש בהם תצלום.
*/
.card.is-linked:has(> .card-media),
.pillar-card:has(> .card-media) {
display: grid;
grid-template-columns: 110px 1fr;
align-items: stretch;
}
.card.is-linked > .card-media,
.pillar-card > .card-media {
height: 100%;
min-height: 110px;
}
.card.is-linked > .card-media img,
.pillar-card > .card-media img {
height: 100%;
object-fit: cover;
}
.card.is-linked > .card-body,
.pillar-card > .card-body { padding: var(--sp-2) var(--sp-3); }
.card.is-linked .card-title { font-size: 15px; line-height: 1.25; }
.card.is-linked .card-desc,
.card.is-linked p { font-size: 13px; line-height: 1.4; }
}
/* ===========================================================================
‼️ כרטיס מחיר בנייד — 556 פיקסל לכרטיס אחד
---------------------------------------------------------------------------
מדדתי ב-/ספלאש-ג'ונגל-פוקט ברוחב 375:
כרטיס 343 × 556 = 0.68 מסך
תצלום 190
תוכן 340
סקשן המחירים 1,653 = שני מסכים לשלושה כרטיסים
**הגולש רואה כרטיס אחד בכל מסך ואינו יכול להשוות.** וזו בדיוק
הפעולה שהסקשן נועד לה.
---------------------------------------------------------------------------
‼️ ולמה הפתרון אינו להקטין את התצלום
ברוחב 375 הכרטיס תופס את כל הרוחב — 343 פיקסל — **והתצלום יושב
מעליו ברוחב מלא.** זה בזבוז של הציר הצר: יש שם מקום לשניים
זה לצד זה.
תצלום 120 בצד במקום 190 מעל **חוסך 190 פיקסל ולא מקטין כלום** —
הוא רק מפסיק לתפוס את כל הרוחב לבדו.
כרטיס יורד מ-556 ל-כ-250, ו**שניים נכנסים במסך במקום אחד.**
=========================================================================== */
@media (max-width: 700px) {
.legacy #te-main :is(.price-card, .package-card, .pricing-card,
.ticket-card):has(> :is(.package-image, .price-image,
.ticket-image, [class$="-image"], [class$="__media"])) {
grid-template-columns: 120px 1fr;
grid-template-rows: auto;
align-items: stretch;
}
.legacy #te-main :is(.price-card, .package-card, .pricing-card, .ticket-card)
> :is(.package-image, .price-image, .ticket-image, [class$="-image"], [class$="__media"]) {
height: 100%;
min-height: 120px;
}
.legacy #te-main :is(.price-card, .package-card, .pricing-card, .ticket-card)
> :is(.package-image, .price-image, .ticket-image, [class$="-image"], [class$="__media"]) img {
height: 100%;
aspect-ratio: auto;
object-fit: cover;
}
/*
* ‼️ הטקסט מיושר לתחילת השורה ולא למרכז.
*
* מרכוז עבד כשהכרטיס היה טור — הוא איזן תצלום רחב מעל טקסט.
* בפריסה לצד, טקסט ממורכז בעמודה של 200 פיקסל נראה כמו שגיאה,
* והעין מאבדת את נקודת ההתחלה בכל שורה.
*/
.legacy #te-main :is(.price-card, .package-card, .pricing-card, .ticket-card)
:is([class$="-content"], [class$="__body"], .package-content) {
text-align: start;
padding: var(--sp-2) var(--sp-3);
display: flex;
flex-direction: column;
gap: 4px;
}
.legacy #te-main :is(.price-card, .package-card, .pricing-card, .ticket-card)
:is([class$="-type"], [class$="-name"], [class$="-title"], h3, h4) {
margin: 0;
text-align: start;
font-size: 14.5px;
}
.legacy #te-main :is(.price-card, .package-card, .pricing-card, .ticket-card)
:is(.price, .card-price, [class$="__price"], .ticket-price) {
justify-content: flex-start;
padding-block: 2px 0;
}
/*
* שורת השוואת הסירות נשארת — היא קצרה ממילא, והיא מה שמאפשר
* לבחור. מה שיורד הוא הריפוד סביבה.
*/
.boat-note { margin-block-start: 6px; padding-block-start: 6px; }
}
/* ===========================================================================
‼️ תפריט הנייד — והגרסה הראשונה שלי לא חלה על כלום
---------------------------------------------------------------------------
שי: *"גם את התפריט לא כל כך אהבתי, אפשר יותר טוב."*
כתבתי בלוק שלם מכוון ל-.nav-drawer ול-[class*="drawer"].
ואז פתחתי את התפריט בדפדפן ומדדתי:
.main-nav 52 קישורים · גובה 443 · position: absolute
.nav-sub-toggle 42×42 · רקע לבן 6% · מסגרת · פינות 6px
**אף אחד משני השמות שכתבתי אינו קיים באתר.** הבלוק היה מת
לגמרי, והייתי מדווח עליו כתיקון.
‼️ וזו הפעם השנייה היום שאני כותב CSS לשם שלא בדקתי — הראשונה
הייתה .hotel-hero, שם דווקא צדקתי. **ההבדל בין השתיים הוא
מזל, לא שיטה.** מהיום: לפתוח את הרכיב ולקרוא את המחלקה לפני
שכותבים לה.
---------------------------------------------------------------------------
מה שמדדתי, ומה מזה באמת בעיה
שבעה פריטים בגובה 48 סך הכול 390 מתוך 812
‼️ 422 פיקסל ריקים מתחת יותר מחצי המסך
ריבוע חץ 42×42 עם רקע ומסגרת
ארבעה מתוך שבעה מסתירים תת-תפריט, וכולם נראים זהים
**הגולש אינו יכול לדעת מה ייפתח ומה ינווט.** כל לחיצה היא ניסוי.
=========================================================================== */
@media (max-width: 900px) {
/*
* ‼️ החץ מפסיק להיראות כמו הכפתור הראשי.
*
* ריבוע 42×42 עם רקע, מסגרת ופינות מעוגלות אומר "אני מה
* שלוחצים כאן" — **והוא אינו. השם הוא הכפתור; החץ הוא רמז.**
*
* שטח המגע נשאר 44 דרך ::after פרוש, בלי הריבוע הנראה.
*/
.nav-sub-toggle {
background: none;
border: 0;
border-radius: 0;
inline-size: auto;
min-width: 0;
padding: 0 6px;
opacity: .5;
position: relative;
}
.nav-sub-toggle::after {
content: "";
position: absolute;
inset: -12px -8px;
}
.nav-sub-toggle[aria-expanded="true"] { opacity: .9; }
/*
* ‼️ פריט שיש לו תת-תפריט נראה אחרת — **לפני הלחיצה.**
*
* זה התיקון האמיתי בתפריט הזה. ארבעה מתוך שבעה מסתירים רמה
* נוספת, וכולם נראו זהים לחלוטין.
*/
.main-nav li:has(> .nav-sub-toggle) > a { font-weight: 600; }
/* התת-תפריט: היררכיה בקו צד, לא במסגרת */
.main-nav li ul {
padding-inline-start: var(--sp-3);
margin-inline-start: var(--sp-2);
border-inline-start: 2px solid rgba(255, 255, 255, .14);
}
.main-nav li ul a {
padding-block: 10px;
font-size: 14.5px;
opacity: .82;
}
/*
* ‼️ 422 הפיקסלים הריקים מקבלים תפקיד.
*
* התפריט נראה כאילו הוא נגמר באמצע המסך. הדרכים ליצור קשר
* הן ממילא מה שהוא נועד להוביל אליו — ובנייד הן גם הפעולה
* הסבירה ביותר.
*/
/*
* -------------------------------------------------------------------
* ‼️ הסלקטור חייב לכלול [data-open="true"] — וזה שבר את האתר
*
* שי, 25.9.2026: *"יש בעיה רצינית של התפריט במובייל, הוא כולו
* מרצד ולא נסגר כשלוחצים על איקס."*
*
* components.css:48 הוא .main-nav { display: none; } —
* **זו הסגירה**. כתבתי .main-nav { display: flex } בקובץ
* שנטען אחרון, באותה סגוליות בדיוק, ודרסתי אותה.
*
* התוצאה: התפריט **פתוח תמיד**, מרחף מעל העמוד עם שני פסי
* גלילה משלו, והכפתור מחליף data-open בלי שום השפעה נראית.
*
* ‼️ ולמה זה "מרצד": הכפתור כן עובד. בכל לחיצה data-open
* מתחלף, הדפדפן מחשב מחדש, והתפריט **נשאר**. זה נראה כמו
* הבהוב ולא כמו כלל שגוי — ולכן הוא לא מצביע על הסיבה.
*
* -------------------------------------------------------------------
* ומה שאני לוקח מזה
*
* מדדתי את התפריט **במצב פתוח בלבד**. כל מספר שדיווחתי —
* 52 קישורים, גובה 443, 422 פיקסלים ריקים — נמדד על תפריט
* שהיה פתוח כי אני הכרחתי אותו להיות פתוח.
*
* **מדידה של מצב אחד אינה מדידה של רכיב שיש לו שני מצבים.**
* -------------------------------------------------------------------
*/
.main-nav[data-open="true"] {
display: flex;
flex-direction: column;
max-block-size: calc(100dvh - var(--header-h, 66px));
overflow-y: auto;
overscroll-behavior: contain;
}
.main-nav[data-open="true"] > ul { flex: 1 1 auto; }
.main-nav__foot,
.main-nav .nav-contact {
margin-block-start: auto;
padding-block: var(--sp-4);
border-block-start: 1px solid rgba(255, 255, 255, .12);
}
/* שורות מעט צפופות יותר — 48 הוא נדיב, 44 עדיין מעל הסף */
.main-nav > ul > li > a { padding-block: 11px; }
}
/* ===========================================================================
‼️ ושני תיקונים שלא תפסו, ואני מתקן בסגוליות ובכיוון
---------------------------------------------------------------------------
מדדתי אחרי החלת הבלוק הקודם:
הרקע rgba(255,255,255,.06) ← background: none הפסיד
משקל הפריטים **כל השבעה 600** ← ההבחנה לא הבדילה כלום
**הדגשת פריטים שכבר מודגשים אינה הדגשה.** כתבתי font-weight: 600
על מי שיש לו תת-תפריט בלי לבדוק מה המשקל של האחרים — והם
כולם 600 מלכתחילה.
‼️ ההבחנה חייבת ללכת **לכיוון השני**: מי ש**אין** לו תת-תפריט
נהיה קל יותר. אז ההבדל נוצר, ובלי להוסיף עוד משקל למסך שכבר
כולו מודגש.
=========================================================================== */
@media (max-width: 900px) {
/* סגוליות מספקת כדי לנצח את הרקע הקיים */
.main-nav .nav-sub-toggle,
.nav-sub-toggle.nav-sub-toggle {
background: transparent;
box-shadow: none;
}
/*
* ההבחנה: פריט **בלי** תת-תפריט קל יותר.
*
* :not(:has()) — מי שאין לו כפתור פתיחה הוא קישור ישיר,
* והוא נראה כזה.
*/
.main-nav > ul > li:not(:has(> .nav-sub-toggle)) > a {
font-weight: 500;
}
.main-nav > ul > li:has(> .nav-sub-toggle) > a {
font-weight: 700;
}
}
/* ===========================================================================
nav-sub-tap — החץ עובד, ואי אפשר לפגוע בו
‼️ שי, 25.9.2026: *"שים לב בתפריט שעשית אי אפשר לפתוח תתי
עמודים."*
---------------------------------------------------------------------------
מה שמדדתי, ומה שהוא **לא** היה
קליק אמיתי על החץ **כן פותח** — צילמתי, 11 יעדים נפתחו והחץ
הסתובב. data-sub-open מתהפך, ה-JS תקין.
‼️ **ולמה בכל זאת אי אפשר:**
רוחב הכפתור 30px
אטימות .5
רקע אין
מסגרת אין
מיקום בקצה השורה
הורדתי ממנו את הקופסה כדי שלא ייראה כמו שבעה כפתורים זהים,
**והפכתי אותו למשהו שאי אפשר לפגוע בו באגודל.** 30 פיקסלים
מתחת לסף 44 המקובל, והוא גם שקוף למחצה.
וכל פספוס אינו "לא קרה כלום" — הוא נוחת על הקישור ו**מנווט
לעמוד**. כלומר המשתמש מקבל תגובה שנראית מכוונת, ולכן הוא לא
מנסה שוב.
---------------------------------------------------------------------------
‼️ ומה שהמדידה שלי כמעט הסתירה
elementFromPoint החזיר — לשלושה מתוך ארבעה כפתורים, ואני
כמעט הסקתי שהם חסומים. הם פשוט היו **מתחת לקצה המסך**, כי
התת-תפריט הראשון היה פתוח ודחף אותם למטה.
---------------------------------------------------------------------------
התיקון: שטח נגיעה, לא קופסה
הכפתור נשאר נקי לעין — הרוחב גדל ל-48, האטימות עולה ל-.72,
ושטח הנגיעה מכסה את **כל גובה השורה**. ההבחנה בין פריט
שנפתח לפריט שמנווט נשארת מה שהיא: החץ קיים או לא קיים.
=========================================================================== */
@media (max-width: 900px) {
.main-nav .nav-sub-toggle {
inline-size: 48px;
min-block-size: 44px;
opacity: .72;
}
/*
* שטח הנגיעה עולה על הכפתור הנראה ומכסה את גובה השורה.
* -14px אנכית מגיע ל-44 ומעלה גם בשורה צפופה.
*/
.main-nav .nav-sub-toggle::after {
content: '';
position: absolute;
inset: -14px -10px;
}
/*
* ‼️ הקישור מוותר על השטח שמתחת לחץ.
*
* בלי זה שתי נקודות המגע חופפות, והקישור — שבא אחרי ה-DOM —
* תופס את הנגיעה. זו בדיוק הסיבה שפספוס ניווט במקום לפתוח.
*/
.main-nav > ul > li:has(> .nav-sub-toggle) > a {
padding-inline-end: 56px;
}
}
/* ===========================================================================
hotel-rooms-compact — 12 חדרים שאינם 12 מסכים
‼️ שי, 25.9.2026: *"כשמסתכלים על סוגי חדרים זה אחד אחד וזה
גלילה נצחית, צריך לייעל במובייל."*
---------------------------------------------------------------------------
המספר
תצלום 190px (כבר הוגבל כאן קודם — מ-275)
טקסט + שבבים ~200px
כרטיס ~390px
12 חדרים 4,700px ≈ שישה מסכים של גלילה
‼️ **והגבלת התצלום מ-275 ל-190 כבר נעשתה, ולא פתרה.** חסכתי
85 פיקסל לחדר ונשארו 390. זה היה תיקון שנמדד והרגיש כמו
הצלחה, כי המספר ירד — בלי לשאול אם הוא ירד **מספיק**.
---------------------------------------------------------------------------
למה פריסה לרוחב ולא קרוסלה
קרוסלה חוסכת יותר, והיא שגויה כאן: בחירת חדר היא **השוואה**,
ורשימה אנכית מאפשרת לסרוק שמות ומחירים בלי לזכור מה היה
בכרטיס הקודם. קרוסלה מחליפה גלילה בזיכרון.
הפריסה לרוחב שומרת על הרשימה ומורידה את הגובה:
תצלום 118 ברוחב, יחס 4/3 ≈ 88px
הטקסט קובע את הגובה ≈ 150px
12 חדרים 1,800px במקום 4,700
---------------------------------------------------------------------------
‼️ והשבבים חייבים להתכווץ יחד איתו
ברוחב 375 נשארים לטקסט 375 − 32 גאטר − 118 − 12 מרווח = 213px.
שבב "מיטה אחת גדולה או שתי מיטות יחיד" בגודל הנוכחי תופס שם
שלוש שורות, והכרטיס חוזר ל-260.
בלי הכיווץ הזה הפריסה החדשה **נראית עובדת ואינה חוסכת** —
התצלום קטן, הגובה זהה.
=========================================================================== */
@media (max-width: 720px) {
.hotel-rooms__item--shot {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
gap: var(--sp-3);
align-items: start;
}
.hotel-rooms__item--shot .rgal,
.hotel-rooms__item--shot .rgal__main,
.hotel-rooms__item--shot .rgal__main img {
max-height: none;
aspect-ratio: 4 / 3;
}
/*
* ‼️ הנקודות יורדות **כאן בלבד**.
*
* כתבתי קודם שהן נשארות כי הן הסימן היחיד שיש עוד תמונות.
* ברוחב 118 הן קטנות מכדי להיות מטרת נגיעה, ולכן הן מבטיחות
* אינטראקציה שאי אפשר לבצע. התצלום עצמו עדיין מחליק.
*/
.hotel-rooms__item--shot .rgal__dots { display: none; }
.hotel-rooms__item--shot .hotel-rooms__name {
font-size: 15px;
line-height: 1.3;
margin-block: 0 4px;
}
.hotel-rooms__item--shot .hotel-rooms__facts {
gap: 4px;
margin-block: 0;
}
.hotel-rooms__item--shot .hotel-rooms__facts li {
font-size: 12px;
padding: 2px 8px;
line-height: 1.35;
}
.hotel-rooms__item--shot .hotel-rooms__note {
font-size: 12.5px;
line-height: 1.4;
margin-block: 4px 0;
}
.hotel-rooms__item--shot .hotel-rooms__text { padding-block: 0; }
}
/* ===========================================================================
table-scroll-mobile — טבלה שאי אפשר להגיע לחציה
‼️ נמדד ב-/קו-לארן-טיול-לאי-קו-לאן ברוחב 375:
הטבלה 788px
המיכל 788px
overflow-x visible
גלילה אין
המסמך 375px
כלומר הטבלה חורגת ב-413 פיקסלים, **והמסמך אינו גולל.**
‼️ **העמודות הרביעית עד השביעית אינן נגישות למשתמש בכלל** —
הן אינן נמעכות, הן פשוט אינן קיימות עבורו.
זה גרוע ממה ששי צילם באנדמנדה. שם העמודות נמעכו ונראו
שבורות; כאן הן נראות תקינות **ומחצית הנתונים חסרה בשקט.**
--------------------------------------------------------------------------
ולמה display: block על הטבלה ולא עוטף
עוטף דורש שינוי HTML ב-23 עמודים, ו-overflow על ההורה אינו
עובד כשההורה עצמו נמתח לרוחב הטבלה — וזה בדיוק מה שקורה כאן
(המיכל 788, בדיוק כרוחב הטבלה).
display: block מנתק את הטבלה ממנגנון פריסת הטבלאות, ואז
overflow-x שלה עצמה תופס.
‼️ והמחיר, שאני אומר במפורש: display: block מבטל את
כמבנה עבור קורא מסך. לכן נוסף role="table" בכלל נפרד למטה,
ו-caption נשאר במקומו.
=========================================================================== */
@media (max-width: 720px) {
#te-main table,
main table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-inline-size: 100%;
/*
* ‼️ הרמז שיש עוד: בלי הצמדה הגולש אינו יודע שאפשר להחליק,
* ומחצית הטבלה נשארת בלתי נראית גם כשהיא כבר נגישה.
*/
scroll-snap-type: x proximity;
}
#te-main table th,
#te-main table td,
main table th,
main table td {
white-space: nowrap;
scroll-snap-align: start;
}
/* העמודה הראשונה נשארת קריאה — היא מזהה את השורה */
#te-main table th:first-child,
#te-main table td:first-child,
main table th:first-child,
main table td:first-child {
white-space: normal;
min-inline-size: 96px;
}
}
/* ===========================================================================
grid-item-min-width — השורש, ותיקון הטבלאות היה תסמין
‼️ מדדתי את שרשרת האבות ב-/קו-לארן ברוחב 375:
table.compare-table 788
div.compare-table-container 788
div.container 820
section.section 820
div.attr-split__main 820 ‼️ min-width: auto
div.attr-split 375 display: grid
div.legacy 375 ‼️ overflow-x: clip
**פריט ברשת עם min-width: auto אינו מתכווץ מתחת לרוחב
התוכן שלו.** הטבלה דוחפת ל-788, והפריט נמתח ל-820 בתוך
מסך של 375.
‼️ **ו-overflow-x: clip על .legacy הוא מה שהופך את זה
לבלתי נראה:** אין גלילה אופקית, ולכן המשתמש אינו יודע שיש
עוד. המסמך מדווח 375 והכל נראה תקין.
--------------------------------------------------------------------------
ולמה זה השורש ולא הטבלה
כתבתי קודם display:block + overflow-x:auto על הטבלה.
**הוא הוחל ולא עזר** — כי הטבלה ממלאת הורה שכבר 788, ואין
מה לגלול בתוכו.
‼️ תיקון שהוחל, שנמדד, ושלא שינה כלום — נראה בדיוק כמו
תיקון שעבד, אם בודקים רק שהכלל קיים.
min-width: 0 חל על **כל** פריט רשת, ולכן הוא מתקן גם רשתות
שאין בהן טבלה — גלריות, בוררים, וכל תוכן רחב אחר.
=========================================================================== */
@media (max-width: 900px) {
/*
* ‼️ מכוון לפריטי רשת ידועים ולא ל-* — כלל גורף על min-width
* משנה פריסה בכל האתר, ורובה במקומות שאינם שבורים.
*/
.attr-split > *,
.attr-split__main,
.attr-split__aside,
[class*="-split"] > *,
.grid > *,
.tour-grid > * {
min-inline-size: 0;
}
/* והמיכלים שנמתחים אחרי התוכן */
.compare-table-container,
#te-main .container,
main .container {
max-inline-size: 100%;
}
}
/* ===========================================================================
about-team — סקשן "מי אנחנו" בנייד
---------------------------------------------------------------------------
‼️ שי, 28.9.2026, עם צילום מסך של דף הבית בנייד:
*"עיצוב מובייל בדיוק באתר הבית, איפה שאנשים מוצאים אותנו,
נראה לא טוב. זה גדול מדי ותופס יותר מעמוד של גלילה. בכניסה
זה צריך להיות ברור ומדויק."*
נמדד ברוחב 375:
גובה הסקשן 1,013px
גובה המסך 812px
‼️ 1.25 מסכים
---------------------------------------------------------------------------
‼️ והסיבה אינה כמות הטקסט. הרשת נשארה בשתי עמודות.
grid-template-columns: 175.266px 143.734px
כלומר הפסקה נדחסה לעמודה ברוחב 175px ונמתחה ל-462px גובה,
ורשימת ארבעת השלבים נדחסה ל-143px ונמתחה ל-775px.
---------------------------------------------------------------------------
‼️ ומה שהכי חשוב כאן: **התיקון הזה כבר קיים, והוא נדרס.**
ב-components.css:3309 יושב בדיוק הכלל הנכון —
@media (max-width: 880px) { .about-team .about-grid { grid-template-columns: 1fr } }
ואחריו, באותו קובץ ובלי media query, מוצהרות שתי גרסאות
נוספות של אותו סלקטור עם 1fr 0.82fr ו-1.1fr 0.9fr.
**media query אינו מוסיף סגוליות.** שלושתם שווים בדיוק,
והאחרון בקובץ מנצח — כלומר הכלל למובייל נכתב, נשמר, ומעולם
לא פעל.
זו אותה משפחה שחזרה כאן כל היום: **משהו שמוצהר נכון במקום
אחד ונקרא אחרת במקום אחר**, בלי ששום כלי מדווח.
---------------------------------------------------------------------------
התיקון כאן ולא שם: mobile.css נטען **אחרי** components.css
(עשירי מול שלישי), ולכן כלל בסגוליות זהה מנצח. תיקון בקובץ
ההוא היה דורש למחוק שתי הצהרות שמישהו אחר כתב לדסקטופ.
=========================================================================== */
@media (max-width: 880px) {
.about-team .about-grid,
.legacy #te-main #about .about-grid,
.legacy #te-main .about-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
/*
* ‼️ ורשימת השלבים — ארבעה פריטים בגובה 168–203px כל אחד.
* ברוחב מלא הם מתקצרים מעצמם, והריווח הפנימי כבר אינו נדרש
* באותו גודל.
*/
.about-team .about-side,
.legacy #te-main #about .about-side {
padding: 14px 14px 16px;
}
}
/* ===========================================================================
לשונית הטיסות — יושבת על כותרת ההירו בנייד
---------------------------------------------------------------------------
‼️ נמדד ברוחב 375, על דף הבית:
h1 "חופשה בתאילנד מתחילה כאן" x 18–357 y 422–450
.flight-tab-wrap (fixed, z 60) x 287–375 y 406–472
**חפיפה מלאה על ~70 הפיקסלים האחרונים של הכותרת.** כרטיס
העלייה למטוס מכסה את סוף המשפט בדיוק במסך הראשון שגולש רואה.
‼️ וזה לא נראה כמו באג אלא כמו עיצוב: הלשונית נראית מכוונת,
והכותרת נראית כאילו היא פשוט נגמרת שם. שי צילם את המסך הזה
וכתב "לא נראה טוב" — בלי לדעת שזו חפיפה ולא בחירה.
---------------------------------------------------------------------------
הכלל המקורי: inset-block-start: 50% עם translateY(-50%) —
מרכז אנכי. בדסקטופ המרכז נמצא הרבה מתחת לכותרת; בנייד, שבו
ההירו תופס מסך שלם, המרכז **הוא בדיוק גובה הכותרת**.
‼️ כלומר הכלל נכון, והוא נשבר רק כשהמסך גבוה וצר. זו אותה
משפחה כמו שאר תקלות הנייד כאן: **רכיב שנמדד במצב אחד בלבד.**
התיקון מוריד אותה לשליש התחתון, מעל כפתור הוואטסאפ ומתחת
לכל טקסט ההירו. לא נוגע בדסקטופ.
=========================================================================== */
@media (max-width: 720px) {
.flight-tab-wrap {
inset-block-start: auto;
inset-block-end: 100px;
transform: none;
}
}
/* ===========================================================================
טבלה בתוך .pricing — אי אפשר להגיע לחציה בנייד
---------------------------------------------------------------------------
‼️ 12 עמודי אטרקציה נושאים טבלת מחירים בתוך .pricing, ולאף אב
שלה אין overflow שמאפשר גלילה. הטבלה רחבה מהמסך, והעודף פשוט
אינו נגיש — לא בגלילה של הטבלה ולא של העמוד.
‼️ **ובוריס מדד את המקבילה שלה בהעברות: 21 מחירים מתוך 21 לא
היו נגישים בצ׳אנג מאי, ו-56 בפטאיה.** כלומר זה לא "קצת חתוך"
אלא עמודה שלמה של מחירים שהלקוח אינו רואה.
---------------------------------------------------------------------------
הכלל הכללי למטה (#te-main table { display: block; overflow-x: auto })
אמור לכסות את זה — ‼️ **והוא לא**, כי .pricing עצמו אינו מאפשר
גלילה והטבלה יורשת את הרוחב שלו.
שתי השורות כאן נותנות לעוטף עצמו לגלול, ומשחררות את הרוחב
המינימלי שכופה עליו min-width: max-content מהכלל שכתבתי
לטבלאות המחיר.
=========================================================================== */
@media (max-width: 720px) {
.pricing {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/*
* ‼️ וביטול הרוחב המינימלי על תוכן הטבלה, לא על הטבלה עצמה.
* הכלל שלי .price-table > * { min-width: max-content } נכתב
* כדי שעמודות לא יתמעכו — ובתוך עוטף שאינו גולל הוא הופך
* בדיוק למה שמונע את הגלילה.
*/
.pricing > table,
.pricing .price-table { min-inline-size: 0; }
}