/* ========================================================================== מלונות — עמוד האוסף וכרטיס המלון -------------------------------------------------------------------------- קובץ נפרד ולא תוספת ל-components.css, כדי ששני סוכנים יוכלו לעבוד במקביל בלי להתנגש, ושאפשר יהיה לגלגל את המלונות אחורה בנפרד. כל ערך כאן מגיע מ-tokens.css. אין צבע קשיח, אין גודל קשיח ואין רדיוס מחוץ לשלושת הערכים המוגדרים — זו הסיבה שהאתר הישן הגיע לשנים-עשר רדיוסים שונים וארבעה גדלי H2 כמעט זהים. שקיפות נבנית עם color-mix על טוקן ולא עם rgba קשיח, כדי שהצבע יישאר מוגדר במקום אחד. לכל הצהרה כזו יש הצהרה פשוטה לפניה כגיבוי לדפדפן שלא מכיר color-mix. ========================================================================== */ /* ------------------------------------------------------------- הירו */ .hotel-hub__hero { position: relative; isolation: isolate; margin-block-end: var(--section-y); background: var(--c-navy-900); overflow: hidden; } .hotel-hub__herofig { position: absolute; inset: 0; z-index: -2; } .hotel-hub__herofig img { width: 100%; height: 100%; object-fit: cover; } /* * שכבת הקריאות. * הכיוון הוא מלמטה למעלה ולא אחיד, כי הטקסט יושב בתחתית ההירו * ואפלה אחידה על כל התמונה הורגת אותה בלי צורך. */ .hotel-hub__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c-navy-950) 8%, transparent 78%); background: linear-gradient( to top, var(--c-navy-950) 4%, color-mix(in srgb, var(--c-navy-950) 74%, transparent) 38%, color-mix(in srgb, var(--c-navy-950) 22%, transparent) 78%, transparent 100% ); } .hotel-hub__introwrap { position: relative; padding-block: var(--sp-10) var(--sp-6); color: var(--text-on-dark); } .hotel-hub__hero h1 { color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 var(--sp-3); } .hotel-hub__lede { max-width: var(--w-prose); margin: 0; font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--c-sea-050); } /* ------------------------------------------------------------ מספרים */ /* * שלושה נתונים ולא יותר. כל אחד מהם נגזר מהמאגר בזמן הבנייה * (מספר המלונות, מספר היעדים) או הוא אמירה על השירות — לא הבטחה * שהעמוד לא מקיים. */ .hotel-hub__stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-6) 0 0; padding: 0; } .hotel-hub__stats div { display: flex; flex-direction: column; gap: var(--sp-1); } .hotel-hub__stats dt { order: 2; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-sea-200); } .hotel-hub__stats dd { order: 1; margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; color: var(--c-gold-500); } /* ------------------------------------------------------------- סינון */ /* * הסרגל נדבק לראש המסך בגלילה. ‎top‎ ולא ‎inset-block-start‎ בכוונה: * ‎sticky‎ עם תכונות לוגיות עדיין לא אחיד בין דפדפנים, וכאן זה * ההבדל בין סרגל שעובד לסרגל שנעלם. * * ההיצמדות היא מתחת לכותרת האתר ולא לראש החלון. * ‎.site-header‎ היא עצמה ‎sticky‎ ב-‎top:0‎ עם ‎z-index:100‎, ולכן סרגל * שנצמד ל-‎0‎ נכנס מתחתיה ונעלם — נבדק בדפדפן, הסרגל פשוט לא נראה. * הגובה נמדד בזמן ריצה ונכתב ל-‎--header-h‎, כי אין באתר טוקן * לגובה הכותרת והוא משתנה בין נייד למסך רחב. ‎66px‎ הוא גיבוי למקרה * שהסקריפט לא רץ — גובה הכותרת בפועל הוא ‎65px‎ במסך רחב. */ .hotel-filter { position: sticky; top: var(--header-h, 66px); z-index: var(--z-sticky); display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); margin-block-end: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); } .hotel-filter__search { display: flex; gap: var(--sp-2); align-items: center; } .hotel-filter__q { flex: 1 1 auto; min-width: 0; padding: var(--sp-3) var(--sp-4); font-family: var(--font-body); font-size: var(--fs-md); color: var(--text-strong); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-full); transition: border-color var(--dur-fast) var(--ease); } .hotel-filter__q::placeholder { color: var(--text-muted); } .hotel-filter__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } .hotel-filter__reset { flex: 0 0 auto; padding: var(--sp-2) var(--sp-4); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-body); background: transparent; border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; } .hotel-filter__reset:hover { color: var(--text-strong); border-color: var(--text-muted); } .hotel-filter__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); } /* * שבב סינון. * המצב הנבחר הוא נייבי מלא ולא זהב: הזהב שמור לפעולה הראשית * (הזמנה, פנייה), ושבב סינון אינו פעולה ראשית אלא מצב תצוגה. */ .hotel-filter__chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px var(--sp-3); font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--text-body); background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .hotel-filter__chip:hover { border-color: var(--c-sea-400); color: var(--text-strong); box-shadow: 0 1px 4px rgb(7 39 66 / 0.07); } /* המצב המושבת מוגדר בהמשך הקובץ, יחד עם שאר התנהגות הסרגל */ .hotel-filter__chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hotel-filter__chip[aria-pressed="true"] { color: var(--text-on-dark); background: var(--c-navy-800); border-color: var(--c-navy-800); } /* המונה שעל השבב — מיקרו-תווית, ולכן מתחת ל-14px עם ריווח אותיות */ .hotel-filter__n { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); } .hotel-filter__chip[aria-pressed="true"] .hotel-filter__n { color: var(--c-sea-200); } .hotel-filter__row--stars .hotel-filter__chip span:first-child { color: var(--c-gold-600); letter-spacing: 0.08em; } .hotel-filter__chip[aria-pressed="true"] span:first-child { color: inherit; } /* ------------------------------------------------------------ התוצאות */ .hotel-hub__count { margin: 0 0 var(--sp-5); font-size: var(--fs-xs); color: var(--text-muted); } .hotel-hub__group { margin-block-end: var(--sp-8); } .hotel-hub__group[hidden] { display: none; } .hotel-hub__grouphead { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-strong); } /* מונה המלונות ביעד — תווית ולא כותרת, ולכן גודל וצבע אחרים */ .hotel-hub__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; padding: 0.15em 0.5em; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--c-sea-600); background: var(--c-sea-050); border-radius: var(--r-full); } .hotel-hub__empty { padding: var(--sp-7) var(--sp-5); text-align: center; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--r-md); } .hotel-hub__empty a { color: var(--accent); font-weight: var(--fw-semibold); } /* ------------------------------------------------- תוספת לכרטיס הקיים */ /* * שם היעד על הכרטיס. הוא נוסף כי הרשת המסוננת מערבבת יעדים — * כשמסננים לפי כוכבים בלבד, כרטיס בלי יעד הוא שם של מלון באוויר. */ .tour-card__where { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); } /* ---------------------------------------------------------- מסך רחב */ @media (min-width: 700px) { .hotel-filter { padding: var(--sp-5); } .hotel-hub__introwrap { padding-block: var(--sp-11) var(--sp-8); } .hotel-hub__stats { gap: var(--sp-8); } } /* * בנייד הסרגל הדביק תופס גובה רב מדי אם כל שורות השבבים פתוחות. * שורות היעדים והסוגים נגללות לרוחב במקום להישבר לארבע שורות, * והגלילה היא ברירת המחדל של הדפדפן ולא רכיב שנכתב מחדש. */ @media (max-width: 699px) { .hotel-filter__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-1); scroll-snap-type: x proximity; } .hotel-filter__row::-webkit-scrollbar { display: none; } .hotel-filter__chip { flex: 0 0 auto; scroll-snap-align: start; } .hotel-hub__stats dd { font-size: var(--fs-xl); } } /* ========================================================================== עמוד מלון — סעיפי נתוני העומק -------------------------------------------------------------------------- הסעיפים האלה מופיעים רק כשיש למלון רשומה ב-hotels-rich.json. הם יושבים בתוך .hotel-page__body, שרוחבו מוגבל לעמודת טקסט קריאה — ולכן הרשימות כאן נשארות בעמודה אחת ולא נפרצות לרוחב המסך. עמודה של 72 תווים היא החלטה, לא מגבלה. ========================================================================== */ .hotel-rooms__lede { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); } /* ========================================================= כרטיסי סוגי החדרים תצלום, רצועת תצלומים מתחתיו, ואז הטקסט. הגרסה הראשונה נתנה לכל סוג חדר רוחב מלא, ותשעה כאלה היו שלושה מסכים של גלילה. שתי עמודות מדסקטופ ומעלה חותכות את זה לחצי בלי לשנות את מבנה הכרטיס, ושאר ההקטנה היא בטיפוגרפיה ובגובה התצלום. ========================================================= */ /* ========================================================= ‼️ רשימת החדרים יוצאת מעמודת הקריאה ‎.hotel-page__body‎ מוגבל ל-‎72ch‎, וזו החלטה נכונה לטקסט. אבל רשימת החדרים אינה טקסט — היא גלריה, והיא הייתה כלואה באותה עמודה. מדדתי ב-1440px לפני השינוי: מכולה 567px (מתוך עמודה ראשית של 661px) עמודות 277 × 277 תצלום 275 × 155 ← קטן מהתמונה הממוזערת שלידו 6 נקודות בכל כרטיס, בלי מונה ‼️ **התוכן המרכזי בעמוד הוצג בגודל הקטן ביותר בעמוד.** כשלא היו תצלומים זה לא הפריע; היום יש 1,765 תצלומים על 507 סוגי חדרים, והיחס התהפך. ‼️ **ומה שניסיתי קודם והיה שגוי:** מתחתי את הרצועה אל מעבר לסרגל הצד, בנימוק ש"הוא מסתיים אחרי 719px והמקום ריק". הוא **‎sticky‎** — כלומר הוא נוסע עם הגלילה ויושב על הכרטיסים לאורך כל הרשימה. מדדתי חפיפה: סרגל ב-x=186 ברוחב 352, הרשימה ב-x=280 ברוחב 959 — ‎overlap: true‎. הנימוק "המקום ריק" נכון לזרימת המסמך ושגוי למה שעל המסך. לכן: הרשימה משתחררת מ-‎72ch‎ אל **מלוא העמודה הראשית** ולא מעבר לה. באותה מדידה: 661px, שתי עמודות של ~318, תצלום ~316×211 — פי 1.6 בשטח, ובלי להתנגש בכלום. ‎72ch‎ נשאר כפי שהוא לכל השאר. זו חריגה מוצהרת לרכיב אחד. ========================================================= */ .hotel-page__roomtypes { /* * ‎.hotel-page__body‎ מוגבל ל-72ch. הילד יכול לחרוג ממנו רק * במרווח שלילי, ולכן המרחק מחושב מהפער עצמו: 100% של הילד * הוא רוחב עמודת הקריאה, ו-‎100cqw‎ הוא רוחב העמודה הראשית. */ max-width: none; } @media (min-width: 900px) { .hotel-layout { container-type: inline-size; } .hotel-page__roomtypes { /* מלוא העמודה הראשית: הכל פחות סרגל הצד והמרווח */ width: calc(100cqw - 352px - var(--sp-8)); } } .hotel-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); /* * ‼️ 300 ולא 340, ובגלל מדידה. * * עם 340 יצאה **עמודה אחת** בעמודה ראשית של 661px: * ‎2×340 + gap‎ גדול מ-661, ולכן ‎auto-fit‎ קיפל לאחת. * התצלום יצא 659×439 — יפה, אבל הרשימה קפצה מ-2,283 ל-7,006 * פיקסלים, כלומר שלושה מסכים נוספים של גלילה על 11 חדרים. * * 300 נותן שתי עמודות של ~318 ותצלום ~316×211, ובמסך רחב * יותר שלוש — בלי עוד נקודת שבירה ידנית. */ grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .hotel-rooms__item { padding: var(--sp-3); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); } .hotel-rooms__item--shot { padding: 0; overflow: hidden; } .hotel-rooms__item--shot .hotel-rooms__text { padding: var(--sp-3); } /* * ‼️ 3:2 ולא 16:9. * * 16:9 הוא יחס של וידאו. חדר מלון מצולם כמעט תמיד לרוחב עם * גובה — מיטה, חלון, תקרה — ו-16:9 חותך בדיוק את החלק הזה. * באותו רוחב כרטיס: 471×265 מול 471×314, כלומר **19% יותר * גובה בלי לוותר על שום דבר.** */ .rgal__main { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; background: var(--c-surface); overflow: hidden; padding: 0; border: 0; cursor: zoom-in; } /* * ‼️ מונה תצלומים — "1 / 6" — במקום סמן הגדלה שמופיע ברחיפה. * * הבעיה שהוא פותר: הכרטיס הראה שש נקודות קטנות ולא אמר כמה * תצלומים יש. גולש שלא יודע שיש עוד חמישה לא ילחץ, ואז 1,765 * התצלומים שנאספו נצפים בשיעור של בערך אחד לחדר. * * המונה נוכח תמיד, גם בלי רחיפה ובלי מגע, ולכן הוא גם אומר * "יש כאן עוד" וגם משמש כפתור. הסמן ‎⤢‎ נשאר רק לחדר עם תצלום * אחד, שם אין מה למנות. */ .rgal__count { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); padding: 0.25em 0.6em; border-radius: var(--r-full); background: rgb(4 24 46 / 0.62); backdrop-filter: blur(6px); color: #fff; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.4; pointer-events: none; /* * ‼️ מונה נקרא משמאל לימין גם בעמוד עברי. * * בלי זה הדפדפן מסדר את "1 / 6" לפי כיוון העמוד ומציג * "6 / 1" — מדדתי, הטקסט ב-DOM היה נכון והתצוגה הפוכה. * ‎isolate‎ מונע מהמספר להיגרר לכיוון הטקסט שסביבו. */ direction: ltr; unicode-bidi: isolate; } .rgal__count b { font-weight: 600; } /* סמן ההגדלה. מופיע ברחיפה ותמיד נוכח במגע, שם אין רחיפה */ .rgal__zoom { position: absolute; inset-block-end: var(--sp-2); inset-inline-end: var(--sp-2); width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-full); background: rgb(4 24 46 / 0.55); backdrop-filter: blur(4px); color: #fff; font-size: 0.95rem; opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .rgal__main:hover .rgal__zoom, .rgal__main:focus-visible .rgal__zoom { opacity: 1; } @media (hover: none) { .rgal__zoom { opacity: 1; } } /* ========================================================= קרוסלה: רצועה גוללת עם חצים החצים יושבים מעל הרצועה ולא לצידה, כדי שלא יגזלו ממנה רוחב. הם מוסתרים כשאין לאן לגלול, וכל אחד מהם נעלם בנפרד כשמגיעים לקצה שלו — כך שהחץ קיים רק כשיש לו מה לעשות. ========================================================= */ /* * הריכוך של גלילת הרצועה יושב כאן ולא ב-JavaScript. * * ‎scrollBy‎ עם ‎behavior: "smooth"‎ ואנימציית * ‎requestAnimationFrame‎ שתיהן מפסיקות לרוץ כשהלשונית אינה * גלויה. ‎scroll-behavior‎ מרכך את מה שיש לרכך וקופץ ליעד כשאין * מה, כך שהחצים מזיזים את הרצועה בכל מצב, והוא גם מכבד * ‎prefers-reduced-motion‎ מעצמו. */ .hotel-gal__thumbs, .rgal__strip { scroll-behavior: smooth; } .rail { position: relative; } .rail__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; appearance: none; border: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-full); background: rgb(4 24 46 / 0.62); backdrop-filter: blur(6px); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgb(7 39 66 / 0.3); transition: background var(--dur-fast) var(--ease); } .rail__btn:hover { background: rgb(4 24 46 / 0.85); } .rail__btn[hidden] { display: none; } /* בעברית "הקודם" הוא לכיוון תחילת הקריאה, כלומר ימין */ .rail__btn--prev { inset-inline-start: 2px; } .rail__btn--next { inset-inline-end: 2px; } /* * הדהייה בקצה מופיעה רק כשיש לאן לגלול. * ‎data-more‎ נקבע על ידי הסקריפט שמודד את הרוחב בפועל, ולא * ניחוש לפי מספר התצלומים — רוחב הרצועה תלוי בגודל החלון. */ .rail[data-more] .hotel-gal__thumbs, .rail[data-more] .rgal__strip { mask-image: linear-gradient(to left, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } /* ========================================================= הגדלת תצלום חדר ========================================================= */ .rzoom { border: 0; padding: 0; width: min(1100px, calc(100vw - var(--sp-4))); max-width: 100%; background: var(--c-navy-950); color: var(--c-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .rzoom::backdrop { background: rgb(0 0 0 / 0.82); } .rzoom__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); } /* * הצבע מפורש ולא בירושה. * * ‎.rzoom‎ מגדיר ‎color: white‎, אבל כלל גלובלי על ‎b‎ גובר על * ירושה וצבע את הכותרת בשחור על רקע נייבי — כלומר היא הייתה * שם ולא נראתה. אותה משפחה של תקלות שכבר תפסה אותנו היום * פעמיים: הקוד נראה תקין וההתנהגות אומרת משהו אחר. */ .rzoom__bar b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-white); } .rzoom__x { appearance: none; border: 0; background: none; cursor: pointer; font-size: 1.6rem; line-height: 1; padding: 0 var(--sp-1); color: rgb(255 255 255 / 0.7); } .rzoom__x:hover { color: #fff; } .rzoom__stage { position: relative; aspect-ratio: 16 / 10; max-height: 78vh; background: #000; } /* * ‎contain‎ ולא ‎cover‎: ההגדלה קיימת כדי לראות את התצלום * במלואו. חיתוך בהגדלה מפספס את כל העניין. */ .rzoom__img { display: block; width: 100%; height: 100%; object-fit: contain; } .rzoom__nav { position: absolute; top: 50%; transform: translateY(-50%); appearance: none; border: 0; width: 46px; height: 46px; border-radius: var(--r-full); background: rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; } .rzoom__nav:hover { background: rgb(255 255 255 / 0.28); } .rzoom__nav--prev { inset-inline-start: var(--sp-3); } .rzoom__nav--next { inset-inline-end: var(--sp-3); } .rzoom__count { position: absolute; inset-block-end: var(--sp-3); inset-inline-end: var(--sp-4); padding: 3px 12px; border-radius: var(--r-full); background: rgb(0 0 0 / 0.55); font-size: var(--fs-3xs); font-variant-numeric: tabular-nums; } /* * שתי השורות האלה נראות מיותרות וכל אחת מהן חובה. * * ‎position:absolute‎ — בלעדיה חמשת התצלומים תופסים חמישה * מקומות בזה אחר זה במקום להתחלף באותו מקום. * * ‎img[hidden]‎ — ‎display:block‎ גובר על ברירת המחדל של * ‎[hidden]‎, ולכן התצלומים המוסתרים המשיכו להיות מוצגים. זה * בדיוק מה ששי ראה בדסקטופ: כרטיס שנמתח על גובה חמישה תצלומים * והטקסט נדחף אל מחוץ למסך. */ .rgal__main img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; } .rgal__main img[hidden] { display: none; } /* * הרצועה גוללת לצד במקום להישבר לשתי שורות, ובלי פס גלילה של * המערכת — פס אפור גולמי באמצע גלריה נראה כמו חלק שנשכח. */ .rgal__strip { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; background: var(--bg-card); } .rgal__strip::-webkit-scrollbar { display: none; } .rgal__dot { flex: 0 0 auto; scroll-snap-align: start; appearance: none; border: 2px solid transparent; border-radius: var(--r-sm); padding: 0; background: none; cursor: pointer; overflow: hidden; line-height: 0; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .rgal__dot img { display: block; width: 52px; height: 36px; object-fit: cover; } .rgal__dot:hover, .rgal__dot:focus-visible { opacity: 1; } .rgal__dot[aria-current="true"] { opacity: 1; border-color: var(--accent); } .hotel-rooms__name { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); } /* * השם בעברית קטן יותר ומשני לשם באנגלית, בכוונה: השם האנגלי הוא * מה שיופיע על אישור ההזמנה ובהתכתבות מול המלון, והעברי הוא * ההסבר. היפוך הסדר היה יוצר פער בין מה שקראו לבין מה שקיבלו. */ .hotel-rooms__name span { display: block; margin-block-start: var(--sp-1); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); } .hotel-rooms__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-2); padding: 0; } .hotel-rooms__facts li { padding: 3px var(--sp-2); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--c-navy-800); background: var(--c-sea-050); border-radius: var(--r-full); } .hotel-rooms__note { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-body); } /* * "מה יש במלון" ו"איפה זה בדיוק" זה לצד זה. * * המתקנים מקבלים את העמודה הרחבה כי הם רשת אייקונים שצריכה * רוחב לסריקה, והמיקום את הצרה כי הוא ארבע שורות. ‎align-items: * start‎ כדי שהקופסה הקצרה לא תימתח לגובה השכנה. */ .hotel-page__pair { display: grid; gap: var(--sp-5); align-items: start; } @media (min-width: 56rem) { .hotel-page__pair { grid-template-columns: 1.55fr 1fr; gap: var(--sp-6); } } .hotel-page__pair > section { margin-block: 0; } /* שם החוף מקשר לעמוד החוף שכבר כתוב אצלנו */ .hotel-place__beach { color: var(--accent); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; } .hotel-place__beach:hover { text-decoration-thickness: 2px; } /* ------------------------------------------------------- מתקנים ואוכל */ .hotel-facts { display: grid; gap: var(--sp-5); } .hotel-facts__block h3 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); } .hotel-facts__block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } /* * הסימון הוא קו ולא נקודה או תיבת וי. * וי מרמז על "כלול במחיר", וזו טענה שאנחנו לא יכולים לעמוד * מאחוריה לכל שורה — רשימת מתקנים אינה רשימת מה שכלול. */ .hotel-facts__block li { position: relative; padding-inline-start: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); } .hotel-facts__block li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.72em; width: var(--sp-3); height: 2px; background: var(--c-sea-400); } /* ------------------------------------------------------ מיקום ופרטים */ .hotel-place { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: var(--sp-4); background: var(--c-sea-050); border-radius: var(--r-md); } .hotel-place div { display: grid; gap: var(--sp-1); } .hotel-place dt { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-sea-600); } .hotel-place dd { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-strong); } /* * שורת המקור. * היא קטנה בכוונה — היא לא תוכן שיווקי — אבל היא כן נמצאת: * גולש שרואה מ״ר מדויקים ושמות חדרים זכאי לדעת מאיפה הם הגיעו * ומתי נבדקו. */ .hotel-place__source { margin: 0; font-size: var(--fs-2xs); line-height: var(--lh-relaxed); color: var(--text-muted); } @media (min-width: 700px) { .hotel-facts__block ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); } .hotel-place { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); } } /* ========================================================================== עמוד מלון — פריסה, הירו, כרטיס פנייה ומפה -------------------------------------------------------------------------- הגרסה הקודמת הייתה עמודה אחת של כותרת, תמונה וסעיפים בזה אחר זה. שי הצביע על התוצאה: הכל שטוח ברמה גנרית. השינוי כאן מבני ולא קוסמטי — ההירו נושא את התמונה ואת הנתונים יחד, והפנייה יושבת בצד ונשארת על המסך במקום לחכות בתחתית. ========================================================================== */ /* ------------------------------------------------------------- הירו */ .hotel-hero { position: relative; isolation: isolate; margin-block-end: var(--section-y); background: var(--c-navy-900); overflow: hidden; } .hotel-hero__media { position: absolute; inset: 0; z-index: -2; } .hotel-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* * תמונה מושאלת מהאזור מקבלת רוויה נמוכה יותר. * זו לא אסתטיקה: היא מסמנת בעין שהתצלום אינו של המלון, במקביל * למשפט שאומר זאת במילים. עמוד עם תצלום מלא ומרשים של מקום אחר * מבטיח משהו שהוא לא מספק. */ .hotel-hero--borrowed .hotel-hero__media img { filter: saturate(0.72); } .hotel-hero__media--none { background: linear-gradient(140deg, var(--c-navy-900), var(--c-sea-600)); } .hotel-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--c-navy-950) 12%, transparent 82%); background: linear-gradient( to top, var(--c-navy-950) 6%, color-mix(in srgb, var(--c-navy-950) 82%, transparent) 42%, color-mix(in srgb, var(--c-navy-950) 28%, transparent) 80%, transparent 100% ); } .hotel-hero__inner { position: relative; padding-block: var(--sp-10) var(--sp-6); color: var(--text-on-dark); } .hotel-hero__cat { display: inline-block; margin-block-end: var(--sp-3); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-navy-950); background: var(--c-gold-500); border-radius: var(--r-full); } .hotel-hero h1 { margin: 0 0 var(--sp-3); color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .hotel-hero__where { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: 0; font-size: var(--fs-sm); color: var(--c-sea-050); } /* * תג הדירוג. * הוא מציג כוכבי מלון ואומר זאת במילים לצידם, כי חמישה כוכבים * לבד נקראים גם כציון אורחים — ואין לנו ציון אורחים לאף מלון. */ .hotel-rate { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: color-mix(in srgb, var(--c-white) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 26%, transparent); border-radius: var(--r-full); } .hotel-rate__stars { color: var(--c-gold-500); letter-spacing: 0.06em; } .hotel-rate__text { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--c-white); } .hotel-hero__dest { font-weight: var(--fw-medium); } /* שורת הנתונים המהירים — מה שרוצים לדעת לפני שממשיכים לגלול */ .hotel-hero__quick { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: var(--sp-5) 0 0; padding: 0; } .hotel-hero__quick li { display: flex; flex-direction: column; gap: var(--sp-1); } .hotel-hero__quick b { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1; color: var(--c-gold-500); } .hotel-hero__quick span { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-sea-200); } .hotel-hero__note { margin: var(--sp-4) 0 0; font-size: var(--fs-2xs); color: var(--c-sea-200); } /* ---------------------------------------------------------- הפריסה */ /* * שתי עמודות: התוכן מימין, הפנייה משמאל. * ב-RTL העמודה הראשונה ברשת יושבת מימין, ולכן התוכן מקבל * order 1 והכרטיס order 2. ב-HTML הכרטיס נכתב ראשון כדי שגולש * במקלדת יגיע אליו מוקדם, וב-CSS הוא מוצב במקומו הנכון. */ .hotel-layout { display: grid; gap: var(--sp-7); align-items: start; } .hotel-page__body { min-width: 0; order: 1; } .hotel-aside { min-width: 0; order: 2; } @media (min-width: 900px) { .hotel-layout { grid-template-columns: minmax(0, 1fr) 352px; gap: var(--sp-8); } /* * הכרטיס נשאר על המסך לאורך הגלילה. * ההיצמדות היא מתחת לכותרת האתר, שהיא עצמה sticky ב-top 0 — * אותו באג שתפסתי בסרגל הסינון של עמוד האוסף. */ .hotel-aside { position: sticky; top: calc(var(--header-h, 66px) + var(--sp-4)); } } /* --------------------------------------------------- כרטיס הפנייה */ .bcard { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(155deg, var(--c-navy-900), var(--c-navy-950) 62%); box-shadow: var(--shadow-lg); } /* * הזוהר. * כתם אור אחד בפינה, לא גרדיאנט על כל הכרטיס. הוא נותן עומק בלי * להפוך את הכרטיס לכרטיס גנרי עם צל — בדיוק מה שמנדט העיצוב פוסל. */ .bcard__glow { position: absolute; inset-block-start: -40%; inset-inline-start: -30%; width: 90%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, var(--c-sea-500), transparent 68%); opacity: 0.34; } .bcard__inner { padding: var(--sp-6) var(--sp-5); color: var(--text-on-dark); } .bcard__eyebrow { margin: 0 0 var(--sp-2); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-sea-200); } .bcard__title { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--c-white); } .bcard__lede { margin: 0 0 var(--sp-5); font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--c-sea-050); } .bcard__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-block-end: var(--sp-4); } .bcard__field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; } .bcard__field label { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--c-sea-200); } .bcard__field input { width: 100%; min-width: 0; padding: var(--sp-2) var(--sp-3); font-family: var(--font-body); font-size: var(--fs-xs); color: var(--c-white); background: color-mix(in srgb, var(--c-white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 22%, transparent); border-radius: var(--r-sm); color-scheme: dark; } .bcard__field input:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 1px; } /* הפעולה הראשית — וכאן הזהב במקומו */ .bcard__send { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; color: var(--c-navy-950); background: var(--c-gold-500); border-radius: var(--r-full); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .bcard__send:hover { background: var(--c-gold-600); transform: translateY(-1px); } .bcard__send:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; } /* * תצוגה מקדימה של ההודעה. * הגולש רואה בדיוק מה יישלח לפני שהוא לוחץ על כפתור שפותח * אפליקציה אחרת — אותה החלטה שנעשתה בבורר ההזמנה. */ .bcard__preview { margin: var(--sp-3) 0 0; font-size: var(--fs-3xs); line-height: 1.5; color: var(--c-sea-200); } .bcard__trust { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-block-start: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent); display: grid; gap: var(--sp-2); } .bcard__trust li { position: relative; padding-inline-start: var(--sp-4); font-size: var(--fs-2xs); line-height: var(--lh-relaxed); color: var(--c-sea-050); } .bcard__trust li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; width: var(--sp-3); height: 2px; background: var(--c-sea-400); } .bcard__or { display: flex; flex-direction: column; gap: var(--sp-1); margin-block-start: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent); } /* * מספר הטלפון. * direction: ltr לבדו לא מספיק — הסימן + בתחילת המספר נשבר * באלגוריתם הדו-כיווני ונדחף לסוף, והמספר הוצג כ-72-54-899-2348. * isolate מנתק את המספר מהקשר הטקסט שסביבו ומחזיר אותו שלם. */ .bcard__or a { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-white); text-decoration: none; direction: ltr; unicode-bidi: isolate; text-align: start; } .bcard__or span { font-size: var(--fs-3xs); color: var(--c-sea-200); } /* -------------------------------------------------------------- מפה */ .hotel-map { margin: 0 0 var(--sp-4); } .hotel-map__frame { display: block; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--c-sea-050); } .hotel-map__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-block-start: var(--sp-2); font-size: var(--fs-2xs); color: var(--text-muted); } .hotel-map__cap a { font-weight: var(--fw-semibold); color: var(--accent); } /* ------------------------------------------- רשת מוקטנת בתחתית העמוד */ /* * הבלוקים של מלונות נוספים ואטרקציות בתחתית עמוד המלון. * הם המשך גלישה ולא התוכן, וברוחב של כרטיס ראשי הם תפסו יותר * מסך מהמלון עצמו. שי ביקש להקטין, וזו הסיבה שזה נכון. */ .tour-grid--compact { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--sp-3); } .tour-grid--compact .tour-card__media { aspect-ratio: 4 / 3; } .tour-grid--compact .tour-card__body { padding: var(--sp-3); gap: var(--sp-1); } .tour-grid--compact .tour-card__title { font-size: var(--fs-sm); line-height: var(--lh-snug); } .tour-grid--compact .tour-card__note { display: none; } .tour-grid--compact .tour-card__type, .tour-grid--compact .tour-card__foot { font-size: var(--fs-3xs); } @media (min-width: 700px) { .tour-grid--compact { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } } /* ========================================================================== עמוד יעד — הפירוט שנמצא בעמוד עצמו -------------------------------------------------------------------------- החליף שני כרטיסים שהבטיחו תוכן ומסרו קישור, ובנוסף הצביעו על 404. עכשיו המידע נמצא בעמוד: מי המלונות לזוגות, מי למשפחות, מה הסגנון, מה רמת המחיר, ומה עולים הכרטיסים באזור. הבחירה בפריטים ולא בטבלה היא החלטה ולא קיצור. במקור זו טבלה בת שש עמודות בעברית, וטבלה כזו נשברת בנייד — וכל התנועה שלנו מנייד. אותו מידע בדיוק, במבנה שנקרא במסך צר. ========================================================================== */ /* ========================================================================== עמוד המלונות של יעד — הירו, טאבים ורשת הכותרת שהייתה כאן הגיעה מהאתר הישן: "🌴 מלונות מומלצים בפוקט 🌴". שי ביקש להחליף אותה במשהו שתואם את שאר האתר, ובצדק — העמוד הזה הוא נקודת כניסה מהתפריט הראשי, והוא נראה כאילו נלקח מאתר אחר. ========================================================================== */ /* * הכותרת הראשית של עמוד היעד, אחרי שנוקתה מהאמוג׳י. * אותה טיפוגרפיה כמו בשאר האתר, בלי עיצוב שהגיע מוורדפרס. */ .dest-h1 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--text-strong); text-align: start; } .dhero { margin-block: 0 var(--sp-6); } .dhero__media { position: relative; aspect-ratio: 21 / 9; max-height: 46vh; border-radius: var(--r-lg); overflow: hidden; background: var(--c-navy-800); box-shadow: 0 1px 2px rgb(7 39 66 / 0.08), 0 18px 40px -20px rgb(7 39 66 / 0.5); } .dhero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * הכיסוי נעצר בשליש התחתון. * כיסוי על כל התצלום היה מחשיך בדיוק את מה שבאנו להראות. */ .dhero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 24 46 / 0.10) 0%, rgb(4 24 46 / 0.20) 42%, rgb(4 24 46 / 0.86) 100%); } .dhero__cap { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-5); color: var(--c-white); } .dhero__eyebrow { margin: 0 0 var(--sp-1); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-gold-500); text-transform: none; } .dhero__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-white); text-shadow: 0 1px 14px rgb(4 24 46 / 0.55); } .dhero__sub { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: rgb(255 255 255 / 0.9); max-width: 44ch; } .dhero__credit { margin: var(--sp-2) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); } /* ------------------------------------------------------------- טאבים */ .dtabs { margin-block: var(--sp-6); } /* * סרגל הטאבים גולל לצד במסך צר במקום להישבר לשתי שורות. * "כל המלונות בקו סמוי" הוא טאב ארוך, ושבירה שלו לשתי שורות * מזיזה את כל הסרגל בכל החלפה. */ .dtabs__bar { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-2); border-block-end: 1px solid var(--border); margin-block-end: var(--sp-5); } .dtabs__bar::-webkit-scrollbar { display: none; } .dtabs__tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; appearance: none; padding: 9px var(--sp-4); font: inherit; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-body); background: var(--c-white); border: 1px solid var(--border); border-radius: var(--r-full); cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .dtabs__tab:hover { border-color: var(--c-sea-400); } .dtabs__tab[aria-selected="true"] { background: var(--c-navy-800); border-color: var(--c-navy-800); color: var(--text-on-dark); } .dtabs__n { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--text-muted); } .dtabs__tab[aria-selected="true"] .dtabs__n { color: var(--c-sea-200); } .dtabs__panel[hidden] { display: none; } /* ------------------------------------------------- רשת כל המלונות */ .dgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .dcard a { display: flex; flex-direction: column; height: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .dcard a:hover { border-color: var(--c-sea-400); box-shadow: var(--shadow-md); transform: translateY(-2px); } .dcard__media { display: block; aspect-ratio: 3 / 2; background: var(--c-surface); } .dcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .dcard__body { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); } .dcard__name { font-weight: var(--fw-bold); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-strong); } .dcard__meta { font-size: var(--fs-3xs); color: var(--c-gold-600); font-variant-numeric: tabular-nums; } .dcard__note { font-size: var(--fs-3xs); line-height: var(--lh-snug); color: var(--text-muted); /* שתי שורות לכל היותר, אחרת הכרטיסים יוצאים בגבהים שונים */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 40rem) { .dhero__media { aspect-ratio: 4 / 3; max-height: none; } .dhero__cap { padding: var(--sp-4) var(--sp-3) var(--sp-3); } .dhero__title { font-size: var(--fs-xl); } } .dest-hotels { margin-block: var(--sp-7); } .dest-hotels > h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); } .dest-hotels__lede { max-width: var(--w-prose); margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-body); } .dest-hotels__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); counter-reset: none; } /* ------------------------------------------------------- פריט מלון */ .dest-hotel { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); } /* * מספר הדירוג. * הוא מגיע מהטבלה במקור ולא מומצא כאן, ולכן הוא מוצג. הוא * aria-hidden כי הרשימה היא ol וקורא מסך כבר מקריא מספור משלו — * בלי זה הוא היה אומר "אחת, אחת". */ .dest-hotel__rank { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-navy-800); background: var(--c-sea-050); border-radius: var(--r-full); } .dest-hotel__body { min-width: 0; flex: 1 1 auto; } .dest-hotel__name { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); } .dest-hotel__name a { color: inherit; text-decoration: none; } .dest-hotel__name a:hover { color: var(--accent); text-decoration: underline; } .dest-hotel__tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; } .dest-hotel__tags li { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); color: var(--text-body); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--r-full); } .dest-hotel__stars { color: var(--c-gold-700); letter-spacing: 0.04em; } /* * רמת מחיר. * זו תווית מילולית מהמקור ("יקר מאוד", "בינוני"), לא סכום. היא * נצבעת אחרת כדי שלא תיקרא כמחיר בפועל — מחיר אמיתי נמסר רק * אחרי בדיקה מול הספק. */ .dest-hotel__price { color: var(--c-sea-600); background: var(--c-sea-050); border-color: transparent; } .dest-hotel__fac { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-muted); } .dest-hotels__more { margin: var(--sp-4) 0 0; font-size: var(--fs-xs); } .dest-hotels__more a { color: var(--accent); font-weight: var(--fw-semibold); } /* ------------------------------------------------------ כרטיסים */ .dest-tickets__list { gap: var(--sp-4); } .dest-ticket { padding: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); } .dest-ticket h4 { margin: 0 0 var(--sp-3); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); } .dest-ticket h4 a { color: var(--text-strong); text-decoration: none; } .dest-ticket h4 a:hover { color: var(--accent); text-decoration: underline; } .dest-ticket__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } /* * שורת מחיר: התווית מימין, הסכום משמאל, וקו מנוקד ביניהם. * הסכום מבודד דו-כיוונית — מספר עם סימן מוביל נשבר בעברית, * וזה בדיוק מה שקרה למספר הטלפון בכרטיס הפנייה. */ .dest-ticket__opts li { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-body); } .dest-ticket__opts li span { flex: 1 1 auto; min-width: 0; border-block-end: 1px dotted var(--border); } .dest-ticket__opts li b { flex: 0 0 auto; font-weight: var(--fw-bold); color: var(--text-strong); unicode-bidi: isolate; } .dest-ticket__more { margin: var(--sp-3) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); } @media (min-width: 700px) { .dest-hotels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dest-tickets__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== עמוד מלון — כותרת, גלריה, כרטיס דירוג ומתקנים עם אייקונים -------------------------------------------------------------------------- ההירו ברוחב מלא הוחלף בגלריה ריבועית במרכז, לפי בקשה מפורשת. הסיבה מעשית ולא טעם: תצלומי חדרים ומלונות הם ריבועיים או אנכיים, ותצלום כזה בתוך מסגרת 16:9 נחתך בדיוק במקום המעניין. הדירוג והמפה עברו לעמודה הצדדית. ========================================================================== */ /* ---------------------------------------------------------- הכותרת */ .hotel-head { margin-block-end: var(--sp-5); } .hotel-head__cat { display: inline-block; margin-block-end: var(--sp-3); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--c-navy-950); background: var(--c-gold-200); border-radius: var(--r-full); } .hotel-head h1 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); } .hotel-head__quick { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin: 0; padding: 0; } .hotel-head__quick li { display: flex; flex-direction: column; gap: var(--sp-1); } .hotel-head__quick b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.1; color: var(--text-strong); } .hotel-head__quick span { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); } /* ---------------------------------------------------------- הגלריה */ .hotel-gal { margin: 0 0 var(--sp-7); } /* * התמונה הגדולה ריבועית. * 1:1 ולא 4:3 או 16:9 — זה מה שנבחר, וזה גם מה שמתאים לתצלומי * חדרים. object-fit: cover משאיר את המרכז ולא מותח. */ .hotel-gal__main { aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-sea-050); border-radius: var(--r-md); } .hotel-gal__main img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * אין תצלום. * משטח מעוצב ולא תצלום של מלון אחר, לפי הכלל שמקום ריק שנראה * מכוון עדיף על תמונה שאינה של המוצר. */ .hotel-gal__main--none { background: linear-gradient(140deg, var(--c-navy-900), var(--c-sea-600)); } /* * רצועת התצלומים. * * --------------------------------------------------------------------- * הייתה כאן פס גלילה אפור של המערכת מתחת לתמונות, ושי הצביע * עליו. פס גלילה גולמי באמצע גלריה נראה כמו חלק שנשכח, לא כמו * רכיב מעוצב, והוא גם משנה מראה בין ווינדוס למק. * * הוא מוסתר בשלוש השורות שמתחת, והגלילה עצמה נשארת: אצבע במגע, * גלגלת בדסקטופ, וטאב במקלדת מזיז לתמונה הבאה. במקומו נכנס * ‎scroll-snap‎ שמצמיד כל תמונה למקום, כך שהרצועה נעצרת על * תמונה שלמה ולא באמצע אחת. * * הריבועים הוחלפו במלבנים ביחס 4:3 — זה היחס שבו צולמו * התצלומים עצמם, וחיתוך לריבוע קיצץ מהם בדיוק את מה שמראה * למה התמונה צולמה. * --------------------------------------------------------------------- */ .hotel-gal__thumbs { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; } .hotel-gal__thumbs::-webkit-scrollbar { display: none; } .hotel-gal__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; padding: 0; overflow: hidden; cursor: pointer; background: var(--c-sea-050); border: 2px solid transparent; border-radius: var(--r-sm); transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); opacity: 0.72; } .hotel-gal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .hotel-gal__thumb:hover { opacity: 1; } .hotel-gal__thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); } .hotel-gal__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .hotel-gal figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-2xs); line-height: var(--lh-relaxed); color: var(--text-muted); } /* ------------------------------------------------- כרטיס הדירוג */ .ratecard { padding: var(--sp-4) var(--sp-5); margin-block-end: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); } .ratecard__stars { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); } .ratecard__stars span { font-size: var(--fs-xl); letter-spacing: 0.06em; color: var(--c-gold-500); } .ratecard__stars b { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--text-muted); } /* * אין דירוג. * 23 מתוך 49 המלונות נשמרו בלי star_count, ותג ריק היה נראה * כמו תקלה. השורה אומרת מה חסר במקום להשאיר חור — ומה שהיא לא * עושה הוא להמציא מספר. */ .ratecard__stars--none { display: block; font-size: var(--fs-2xs); line-height: var(--lh-relaxed); color: var(--text-muted); } .ratecard__where { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); } .ratecard__cat { margin: var(--sp-1) 0 0; font-size: var(--fs-2xs); color: var(--c-sea-600); } /* ------------------------------------------- מתקנים עם אייקונים */ .fac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .fac { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); } /* * האייקון. * קו בלבד ובצבע המבטא, בגודל שורת טקסט. הוא aria-hidden — שם * המתקן כתוב לידו במילים, והאייקון לא מוסיף מידע לקורא מסך. */ .fac-icon { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-block-start: 0.1em; fill: none; stroke: var(--c-sea-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ברשימת המתקנים המפורטת הקו שהיה לפני הפריט מיותר */ .hotel-facts__block .fac-list li::before { content: none; } .hotel-facts__block .fac { padding-inline-start: 0; } @media (min-width: 560px) { .fac-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); } .hotel-gal__main { aspect-ratio: 4 / 3; } } @media (min-width: 900px) { /* * בעמודה הצרה של התוכן חזרה לריבוע. * ברוחב 700 פיקסלים תמונה ב-4:3 תופסת 525 פיקסלים גובה ודוחפת * את כל התוכן מתחת לקיפול. ריבוע כאן הוא גם מה שהתבקש. */ .hotel-gal__main { aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; } .hotel-gal__thumbs { max-width: 520px; margin-inline: auto; } } /* * שורת הייחוס לתצלומים. * היא קטנה אבל חובה: CC BY ו-BY-SA מתירים שימוש מסחרי רק כשהיוצר * והרישיון מצוינים. הסרתה הופכת שימוש חוקי להפרת רישיון. */ .hotel-gal__credit { display: block; margin-block-start: var(--sp-2); font-size: var(--fs-3xs); line-height: 1.5; color: var(--text-muted); } .hotel-gal__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .hotel-gal__credit a:hover { color: var(--accent); } /* ========================================================================== עמוד יעד — רשימה מדורגת -------------------------------------------------------------------------- הגרסה הקודמת הייתה עשרים קופסאות לבנות בשתי עמודות. שי פסל אותה, וצדק: רשת כרטיסים באתר הזה היא תמיד כרטיס עם תצלום, ורק אחד או שניים מתוך עשרת המלונות בכל טבלה קיימים אצלנו עם תצלום. כרטיס בלי תמונה בתוך אתר שכולו כרטיסים עם תמונה נקרא כתקלה. מה שיש כאן הוא מה שהמקור באמת: רשימה מדורגת. שורה לכל מלון, עמודות מיושרות במסך רחב, ערימה בנייד. היא לא מתחזה לכרטיס ולכן היא לא נראית ככרטיס שבור. ========================================================================== */ .rank { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--bg-card); } .rankrow { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); align-items: baseline; padding: var(--sp-4); } .rankrow + .rankrow { border-block-start: 1px solid var(--border); } /* שורת הכותרת מוצגת רק במסך רחב, שם העמודות באמת מיושרות */ .rankrow--head { display: none; } /* * מספר הדירוג. * הוא מגיע מהטבלה במקור ולא מומצא כאן. aria-hidden כי הרשימה * היא ol וקורא מסך מקריא מספור משלו — אחרת הוא אומר "אחת, אחת". */ .rankrow__n { grid-row: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--c-navy-800); background: var(--c-sea-050); border-radius: var(--r-full); } .rankrow__name { grid-row: 1; font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--text-strong); } .rankrow__name a { color: var(--accent); text-decoration: none; } .rankrow__name a:hover { text-decoration: underline; } .rankrow__stars { grid-column: 2; font-size: var(--fs-2xs); letter-spacing: 0.04em; color: var(--c-gold-600); } .rankrow__style, .rankrow__price { grid-column: 2; font-size: var(--fs-2xs); color: var(--text-muted); } /* * רמת מחיר היא תווית מילולית מהמקור ("יקר מאוד"), לא סכום. * צבע שונה כדי שלא תיקרא כמחיר בפועל — מחיר אמיתי נמסר רק אחרי * בדיקה מול הספק. */ .rankrow__price { color: var(--c-sea-600); font-weight: var(--fw-semibold); } .rankrow__fac { grid-column: 2; font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-body); } /* ריק נשאר ריק ולא תופס שורה */ .rankrow__stars:empty, .rankrow__style:empty, .rankrow__price:empty { display: none; } @media (min-width: 720px) { /* * במסך רחב העמודות מיושרות וזה נקרא כטבלה — שזה מה שהמקור. * המתקנים יורדים לשורה שנייה ברוחב מלא, כי הם משפט ולא תווית. */ .rankrow { grid-template-columns: 2.25rem minmax(0, 1fr) 6.5rem minmax(0, 9rem) 6rem; gap: var(--sp-2) var(--sp-4); align-items: center; padding-block: var(--sp-3); } .rankrow--head { display: grid; background: var(--bg-page); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); padding-block: var(--sp-2); } .rankrow--head span { color: inherit; font: inherit; } .rankrow__stars, .rankrow__style, .rankrow__price { grid-column: auto; grid-row: 1; } .rankrow__fac { grid-column: 2 / -1; grid-row: 2; font-size: var(--fs-2xs); color: var(--text-muted); } .rankrow--head .rankrow__fac { display: none; } } /* ========================================================= ‼️ הרשימה המדורגת — מטבלה לכרטיסים שי, פעמיים: "העיצוב נראה על הפנים". מה שהיה: שורות שנמתחות על כל רוחב המסך, עם מספר, שם, כוכבים, סגנון וחץ — ובאמצע ריק. **מדריך טלפונים.** ברוחב 1900 השם בצד אחד והכוכבים בצד השני, ובין שניהם אלף פיקסלים של כלום. ‼️ ולמה זה נבנה ככה מלכתחילה: **לא היה מה להראות.** לרוב המלונות לא היה אף תצלום, ורשימה ויזואלית בלי תמונות גרועה מטבלה. היום יש 1,765 תצלומים על 507 סוגי חדרים, והמצב התהפך — בדיוק כמו ברשימת החדרים בעמוד המלון. הכרטיס: תצלום למעלה ביחס אמיתי, מספר הדירוג עליו, ומתחת שם, כוכבים ותווית. אותו דפוס כמו ‎related‎ — הכרטיס שכבר אושר. ========================================================= */ .rank { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--sp-4); border: 0; border-radius: 0; overflow: visible; background: none; } .rankrow, .rankrow + .rankrow { display: block; padding: 0; border: 0; border-block-start: 0; } .rankrow__link { display: flex; flex-direction: column; height: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } a.rankrow__link:hover, a.rankrow__link:focus-visible { border-color: var(--c-sea-300); box-shadow: 0 6px 20px rgb(7 39 66 / 0.10); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .rankrow__link { transition: none; } a.rankrow__link:hover, a.rankrow__link:focus-visible { transform: none; } } .rankrow__shot { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--c-surface); overflow: hidden; } .rankrow__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* מלון בלי תצלום — משטח שקט, לא מסגרת שבורה */ .rankrow__shot--none { background: linear-gradient(135deg, var(--c-sea-050), var(--c-surface)); } /* מספר הדירוג יושב על התצלום, שם הוא נקרא כדירוג ולא כתבליט */ .rankrow .rankrow__n { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); min-width: 1.9rem; height: 1.9rem; font-size: var(--fs-xs); color: #fff; background: rgb(4 24 46 / 0.72); backdrop-filter: blur(4px); grid-row: auto; z-index: 1; } .rankrow__main { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); } .rankrow .rankrow__name { grid-row: auto; font-size: var(--fs-sm); } .rankrow .rankrow__stars, .rankrow .rankrow__meta { grid-column: auto; grid-row: auto; } .rankrow__meta { font-size: var(--fs-2xs); color: var(--text-muted); } /* הכרטיס כולו לחיץ — החץ מיותר */ .rankrow__go { display: none; } @media (min-width: 720px) { .rankrow { grid-template-columns: none; } .rankrow__link { display: flex; } } /* ------------------------------------------------------ כרטיסים */ .dest-tickets__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); } .dest-ticket { padding: var(--sp-4); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md); } .dest-ticket h4 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-snug); } .dest-ticket h4 a { color: var(--text-strong); text-decoration: none; } .dest-ticket h4 a:hover { color: var(--accent); text-decoration: underline; } /* * "החל מ-". * הכרטיס פתח קודם באפשרות היקרה ביותר — השכרת קבאנה ב-52,000 * באט — וגולש הבין שזה מחיר האטרקציה. המחיר הפותח הוא עכשיו * הזול ביותר, והמילים אומרות שזו נקודת הפתיחה. */ .dest-ticket__from { margin: 0 0 var(--sp-3); font-size: var(--fs-2xs); color: var(--text-muted); } .dest-ticket__from b { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-gold-700); unicode-bidi: isolate; } .dest-ticket__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } /* * שורת מחיר: התווית מימין, הסכום משמאל, קו מנוקד ביניהם. * הקו הוא מה שמפריד — בלעדיו נקרא "Maxi Cabana52,000 באט". */ .dest-ticket__opts li { display: flex; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-body); } .dest-ticket__opts li span { flex: 1 1 auto; min-width: 0; border-block-end: 1px dotted var(--border); } .dest-ticket__opts li b { flex: 0 0 auto; font-weight: var(--fw-semibold); color: var(--text-strong); unicode-bidi: isolate; } .dest-ticket__more { margin: var(--sp-3) 0 0; font-size: var(--fs-3xs); color: var(--text-muted); } @media (min-width: 720px) { .dest-tickets__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * ציון אורחים. * גדול וראשון, כי הוא מה שמשפיע על החלטה — בניגוד לכוכבים, * שהם סיווג רמת אירוח. מספר המדרגים מוצג לידו תמיד: ציון בלי * מספר מדרגים הוא חצי עובדה. */ .ratecard__score { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); } .ratecard__score b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; color: var(--c-navy-800); unicode-bidi: isolate; } .ratecard__score span { font-size: var(--fs-2xs); color: var(--text-muted); } /* המפריד בין הציון למספר המדרגים. בלעדיו "4.7" ו-"1,271" נדבקים. */ .ratecard__sep { color: var(--c-ink-400); font-size: var(--fs-sm); } /* ========================================================================== כרטיס הפנייה — רקע תצלום -------------------------------------------------------------------------- התצלום והשכבה מעליו נלקחו מהטופס שכבר קיים בעמוד /מלון-w-קו-סמוי, שנכתב על ידי הסוכנות: תצלום הבריכה עם גרדיאנט טורקיז-כחול מעליו. זה לא עיצוב חדש אלא הרחבה של החלטה שכבר התקבלה באתר, וזו הסיבה שהיא לא מתנגשת איתו. השכבה חובה ולא קישוט: טקסט לבן על תצלום בריכה בהיר אינו קריא, והכרטיס כולו טקסט. ========================================================================== */ .bcard { background: linear-gradient(155deg, color-mix(in srgb, var(--c-navy-900) 92%, transparent) 0%, color-mix(in srgb, var(--c-sea-600) 78%, transparent) 100%), url('/assets/img/Main_Pool3-1-19f847eb6d.webp') center / cover no-repeat; } /* * הזוהר מיותר ברגע שיש תצלום. * שתי שכבות אור על אותו כרטיס הופכות אותו לעכור, והתצלום כבר * נותן את העומק שהזוהר בא לתת. */ .bcard__glow { display: none; } /* הכיתוב מתחת לגלריה — הסתייגות על תמונת אזור */ .hotel-gal__note { display: block; } /* ========================================================================== הידוק העמודה הצדדית ורשתות ההמשך -------------------------------------------------------------------------- שי ביקש: להקטין את כרטיס הדירוג ואת המפה, לקרב את טופס הפנייה למעלה, ולהקטין את כרטיסי "מה יש לעשות בסביבה". הכיוון אחד: מה שמעל הטופס הוא הקשר, והטופס הוא הפעולה. ככל שההקשר תופס פחות גובה, הפעולה נמצאת קרוב יותר לקיפול. ========================================================================== */ .ratecard { padding: var(--sp-3) var(--sp-4); margin-block-end: var(--sp-2); } .ratecard__score { margin-block-end: var(--sp-1); } .ratecard__score b { font-size: var(--fs-xl); } .ratecard__stars { margin-block-end: var(--sp-1); gap: var(--sp-2); } .ratecard__stars span { font-size: var(--fs-md); } .ratecard__where { font-size: var(--fs-sm); } /* * המפה נמוכה יותר. * 16:10 נתן ריבוע כמעט, ובעמודה של 352 פיקסלים זה 220 פיקסלים * של מפה לפני שרואים את הטופס. 16:9 מספיק כדי לזהות את המיקום. */ .hotel-map { margin-block-end: var(--sp-3); } .hotel-map__frame { aspect-ratio: 16 / 9; } .hotel-map__cap { margin-block-start: var(--sp-1); font-size: var(--fs-3xs); } /* ---------------------------------------- רשתות ההמשך, קטנות יותר */ .tour-grid--compact { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-2); } .tour-grid--compact .tour-card__body { padding: var(--sp-2) var(--sp-3); } .tour-grid--compact .tour-card__title { font-size: var(--fs-2xs); } @media (min-width: 700px) { .tour-grid--compact { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); } } /* ------------------------------------------------ שורת הייחוס בתחתית */ /* * חובה לפי תנאי השימוש של Google Places, ולכן היא קיימת — * אבל בתחתית העמוד ובגודל של הערת שוליים. הדרישה היא להציג, * לא להבליט. הסרה מלאה שלה הופכת את השימוש בתצלומים להפרה. */ .hotel-page__credits { margin: var(--sp-6) 0 0; padding-block-start: var(--sp-3); border-block-start: 1px solid var(--border); font-size: var(--fs-3xs); line-height: 1.5; color: var(--text-muted); } .hotel-page__credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== שורת המטא — דירוג, מיקום ומפה מתחת לכותרת -------------------------------------------------------------------------- החליפה כרטיס דירוג ומפה משובצת שישבו בעמודה הצדדית ודחפו את טופס הפנייה מתחת לקיפול. זה מידע מזהה ולא רכיב, ולכן הוא שייך לכותרת של הדבר ולא לעמודה שבה מתבצעת הפעולה. ========================================================================== */ .hmeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: var(--fs-2xs); color: var(--text-muted); } .hmeta__dot { color: var(--c-ink-400); } .hmeta__stars { color: var(--c-gold-600); letter-spacing: 0.04em; font-size: var(--fs-xs); } /* * הציון בולט מעט מהשאר, ומספר המדרגים לידו תמיד. * ציון בלי מספר מדרגים הוא חצי עובדה, וזה נכון גם כששניהם * בשורת טקסט קטנה. */ .hmeta__score b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-strong); unicode-bidi: isolate; } .hmeta__score span { color: var(--text-muted); } .hmeta__where { font-weight: var(--fw-semibold); color: var(--text-body); } /* * הכפתור יושב בתוך שורת טקסט ולכן הוא חייב להיראות כמו קישור * ולא כמו כפתור. ‎