/* ============================================================================
בא לי כשר — שפת עיצוב
כל הערכים חולצו מהמוקאפ ומהלוגו במדידת פיקסלים, לא בהערכה.
============================================================================ */
:root {
/* נייבי — הצבע הראשי. פוטר, כפתורים ראשיים, כותרות */
--navy-900: #0B3151;
--navy-800: #123A5A;
--navy-700: #244460;
--navy-600: #043355;
/* טורקיז — פעולה ותגיות */
--teal-800: #045C69;
--teal-700: #026C7D;
--teal-600: #017A8E;
--teal-500: #02B3BC;
--teal-200: #B0DEE9;
--teal-100: #DCF0F4;
--teal-50: #F0FAFB;
/* זהב — הדגשה, כוכבים, "קרוב אליי" */
--gold-600: #B8863C;
/* ⚠️ גרסה כהה של gold-600 לטקסט בלבד (4.57:1 על לבן). gold-600
עצמו נותן 3.22:1 — מספיק לאייקון (הסף לרכיב לא-טקסטואלי הוא
3:1) ונכשל לטקסט. הופרד ולא הוכהה, כדי שחותם התעודה יישאר
בצבע שנמדד מהמוקאפ. */
--gold-text: #976E31;
--gold-500: #D09F52;
--gold-400: #E0B56D;
--gold-100: #F7EEDD;
/* נייטרלים */
--cream: #F7F2E8;
--paper: #FFFFFF;
--bg: #F8F9FA;
--ink-900: #12212E;
--ink-700: #33475B;
--ink-500: #5B6B7C;
/* ⚠️ הוכהה מ-#8A98A6 ל-#69747E ב-22.8.2026. המקורי נתן 2.95:1 על
לבן — נכשל ב-AA שדורש 4.5:1 — והוא צבע הטקסט של .hint, .crumbs,
.cert-note ופירורי-לחם, כלומר טקסט אמיתי בכל דף. עכשיו 4.77:1
על לבן ו-4.53:1 על --bg. נמדד, לא הוערך. */
--ink-400: #69747E;
--line: #E3E9EE;
--line-soft:#EFF3F6;
/* מצב תעודה — תמיד עם טקסט לצד הצבע */
--ok: #1E7A4F;
--ok-bg: #E8F4ED;
--ok-line: #C8E3D5;
/* ⚠️ הוכהה מ-#A66A12: נתן 4.06:1 על --warn-bg ונכשל. זו התגית
של "התעודה פגה בקרוב" — בדיוק המידע שאסור שיהיה קשה לקריאה. */
--warn: #9A6311;
--warn-bg: #FCF3E2;
--warn-line:#EFDCB6;
--danger: #A8342B;
--danger-bg:#FBEBE9;
--danger-line:#F0D2CE;
/* סוג כשרות */
--meat: #8C2F39; --meat-bg: #F8EAEC; --meat-line: #EBCCD1;
--milk: #2C5F8A; --milk-bg: #E9F0F7; --milk-line: #CFE0EE;
/* ⚠️ #3F7A55 נתן 4.50:1 בדיוק — נופל על הסף, כי AA דורש 4.5 ומעלה
וחישוב הוא לא בדיוק 4.500. הוכהה מעט ל-4.62:1, עם מרווח. */
--parve: #3E7854; --parve-bg: #EAF3EE; --parve-line: #CFE3D6;
--heart: #E8514F;
--star: #F5B301;
--r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-pill: 999px;
--sh-1: 0 1px 2px rgba(18,33,46,.05);
--sh-2: 0 4px 14px -4px rgba(18,33,46,.12);
--sh-3: 0 12px 32px -10px rgba(11,49,81,.22);
--wrap: 1240px;
--nav-h: 68px;
}
*, *::before, *::after { box-sizing: border-box; }
/* ─── מלכודת ספאם (honeypot) ─────────────────────────────────────────────
🛑🛑 **לא** `position:absolute; left:-9999px`. באתר RTL הזחה שלילית
כזו מרחיבה את שטח הגלילה האופקי: נמדד `scrollWidth=10484` מול חלון
של 485 פיקסלים בכל ארבעת דפי הטפסים.
התוצאה במובייל: הדף נפתח על אזור ריק, בלי תפריט ובלי תוכן, וצריך
לגלול הצידה כדי למצוא את הטופס. זה נראה בדיוק כמו עמוד לבן שבור —
וכך אכן דווח.
⚠️ המלכודת חייבת להישאר ב-DOM וניתנת למילוי כדי שבוטים ימלאו אותה,
ולכן לא `display:none`. תבנית ה-clip מסתירה בלי לתפוס מקום ובלי
ליצור גלילה. */
.hp {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
/* 🛑🛑 **אין כאן `direction: rtl`**, ובכוונה גמורה.
הכיוון מגיע מ-`` שנקבע לפי השפה (`lang_dir()` ב-i18n.php).
`direction: rtl` קשיח כאן **דרס** אותו, ולכן דפי אנגלית וצרפתית
נשארו מיושרים לימין למרות ש-`dir="ltr"` היה נכון ב-HTML.
נתפס אצל רוני, 31.8.2026. */
font-family: 'Rubik', 'Heebo', 'Assistant', 'Segoe UI', system-ui, sans-serif;
background: var(--paper);
color: var(--ink-900);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.22; font-weight: 700; color: var(--navy-900); letter-spacing: -.01em; }
h1 { font-size: clamp(28px, 4.6vw, 44px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1em; }
a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-800); text-decoration: underline; }
img, svg { max-width: 100%; }
img { height: auto; }
/* מיקוד נראה — נגישות. אסור להסתיר outline בלי תחליף. */
:focus-visible {
outline: 3px solid var(--teal-500);
outline-offset: 2px;
border-radius: 4px;
}
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; inset-inline-end: 12px; top: -60px; z-index: 200;
background: var(--navy-900); color: #fff; padding: 12px 20px;
border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
transition: top .15s;
}
.skip-link:focus { top: 0; text-decoration: none; }
/* ─── כפתורים ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 46px; padding: 11px 22px;
border-radius: var(--r-sm); border: 1.5px solid transparent;
font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1;
cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-navy { background: var(--navy-900); color: #fff; }
.btn-navy:hover { background: var(--navy-700); color: #fff; }
.btn-teal { background: var(--teal-600); color: #fff; }
.btn-teal:hover { background: var(--teal-800); color: #fff; }
.btn-ghost { background: #fff; color: var(--teal-700); border-color: var(--teal-500); }
.btn-ghost:hover { background: var(--teal-50); color: var(--teal-800); }
.btn-line { background: #fff; color: var(--ink-700); border-color: var(--line); }
.btn-line:hover { border-color: var(--ink-400); color: var(--ink-900); }
.btn-gold { background: #fff; color: var(--gold-600); border-color: var(--gold-400); }
.btn-gold:hover { background: var(--gold-100); color: var(--gold-600); }
.btn-block { width: 100%; }
.btn-lg { min-height: 54px; font-size: 17px; padding: 14px 30px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* ─── תגיות ───────────────────────────────────────────────────────────────── */
.tag {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 11px; border-radius: var(--r-pill);
font-size: 13px; font-weight: 600; line-height: 1.5;
border: 1px solid var(--line); background: #fff; color: var(--ink-500);
white-space: nowrap;
}
.tag-meat { background: var(--meat-bg); color: var(--meat); border-color: var(--meat-line); }
.tag-milk { background: var(--milk-bg); color: var(--milk); border-color: var(--milk-line); }
.tag-parve { background: var(--parve-bg); color: var(--parve); border-color: var(--parve-line); }
.tag-mehadrin { background: var(--gold-100); color: var(--gold-600); border-color: var(--gold-400); }
.tag-ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.tag-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.tag-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
/* ⚠️ תגית **ניטרלית** ולא אזהרה: "פורסם ע״י המועצה הדתית תל אביב-יפו"
אינו ספק שצריך להזהיר ממנו אלא מקור אחר מהמאגר הממשלתי. צבע אזהרה
כאן היה אומר לגולש בדיוק את ההפך ממה שנכון. */
.tag-src { background: var(--teal-50); color: var(--teal-700, var(--teal-600)); border-color: var(--teal-200, var(--line)); }
.tag-cat {
position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
background: var(--teal-800); color: #fff; border-color: var(--teal-800);
z-index: 2;
}
/* ⚠️ תג "מומלץ" ממומן — צבע מובחן מכל תגי הכשרות (סגול-אינדיגו ניטרלי,
לא זהב/טורקיז/ענבר), כדי שלא ייקרא כהמלצת כשרות. ר' docs/PACKAGES.md §4. */
.tag-sponsored {
background: #ede9fe; color: #5b21b6; border-color: #c4b5fd;
font-weight: 700; margin-bottom: 6px;
}
.tag-sponsored-note { font-weight: 400; opacity: .8; }
.sponsored-disclosure {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; color: var(--ink-500); margin: 10px 0 0;
}
/* ─── ניווט ───────────────────────────────────────────────────────────────── */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(255,255,255,.94);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 22px; min-height: var(--nav-h); }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 42px; height: 42px; }
.brand-name { font-size: 20px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
/* ⚠️ `nowrap` על הקישורים: בלעדיו קישור דו-מילי ("לבעלי עסק", "צור
קשר") נשבר לשתי שורות ברגע שהשורה צפופה, במקום שהתפריט כולו יקרוס
להמבורגר. זה מה שנראה שבור, ולא הצפיפות עצמה. */
.nav-links { display: flex; align-items: center; gap: 4px; flex-grow: 1; }
.nav-links a { white-space: nowrap; }
.nav-links a {
padding: 9px 13px; border-radius: var(--r-sm);
font-size: 15.5px; font-weight: 500; color: var(--ink-700);
}
.nav-links a:hover { background: var(--teal-50); color: var(--teal-800); text-decoration: none; }
.nav-links a[aria-current="page"] {
color: var(--teal-700); font-weight: 700;
box-shadow: inset 0 -3px 0 var(--teal-600);
border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* ⚠️ flex-shrink: 0 חובה. בלעדיו הפלקסבוקס מעך את הכפתור לרוחב אפס
כשהשורה גלשה, והאייקון שבתוכו נעלם — הכפתור נראה ריק לגמרי. */
.nav-toggle { display: none; flex-shrink: 0; }
.nav-toggle svg { flex-shrink: 0; }
/* ─── כרטיס עסק ───────────────────────────────────────────────────────────── */
.card {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-1); overflow: hidden;
display: flex; flex-direction: column;
/* ⚠️ עוגן ל-stretched link שמתחתיו. בלעדיו ה-::after היה נמתח
ביחס לעמוד כולו ומכסה את כל המסך. */
position: relative;
transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--sh-2); border-color: var(--teal-200); }
.card-media { position: relative; aspect-ratio: 16 / 10; background: var(--teal-50); overflow: hidden; }
/* ⚠️ `object-position` מוטה כלפי מעלה: הכרטיס הוא 16:10, וצילום
לאורך נחתך אליו. חיתוך מהמרכז מראה בדיוק את החלק המשעמם — בפודטראק
זה יצא הגלגלים. השליש העליון הוא כמעט תמיד השלט, המנה או הפנים. */
.card-media img, .card-media svg {
width: 100%; height: 100%; object-fit: cover;
object-position: center 32%; display: block;
}
.card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }
.card-title { font-size: 19px; font-weight: 700; color: var(--navy-900); line-height: 1.28; }
.card-title a { color: inherit; }
.card-meta { font-size: 13.5px; color: var(--ink-500); }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-kashrut {
display: flex; align-items: center; gap: 8px;
padding: 11px 16px; border-top: 1px solid var(--line-soft);
background: var(--teal-50); font-size: 13.5px; color: var(--navy-800);
}
.card-kashrut svg { flex-shrink: 0; color: var(--teal-600); }
/* ─── כל הכרטיס לחיץ ──────────────────────────────────────────────────────
⚠️ רוני, 25.8.2026: *"אני צריך שכל הקוביה תהיה לחיצה בשביל להגיע
לדף הפנימי של המסעדה — לא רק השם."*
🛑 מיושם כשכבה שקופה מעל **הקישור הקיים** ולא כ- שעוטף את הכרטיס
ולא כ-onclick ב-JS:
· שעוטף כותרת, תגיות וכפתורים הוא HTML לא חוקי (עיגון בתוך
עיגון) והוא גם מקריא לקורא מסך את כל תוכן הכרטיס כשם הקישור.
· onclick ב-JS אינו קישור: אי אפשר לפתוח בלשונית חדשה, אי אפשר
להעתיק כתובת, וגוגל לא עוקבת אחריו.
כאן נשאר **קישור אחד** עם שם נגיש תקין, והשטח הלחיץ הוא כל הכרטיס. */
.card-title a::after {
content: ''; position: absolute; inset: 0; z-index: 1;
}
/* ⚠️ כל מה שאינטראקטיבי חייב לצוף מעל השכבה, אחרת הוא מפסיק לעבוד.
🛑 **בלי `.fav-btn` כאן.** הוא כבר `position: absolute` עם `z-index: 2`
משלו, והוספתו לרשימה הזו דרסה לו את המיקום ב-`relative` — הספציפיות
של `.card .fav-btn` גבוהה מזו של `.fav-btn`. התוצאה: הלב נשמט מהפינה
וישב על תגית הקטגוריה. נתפס מצילום מסך של רוני.
⚠️ כלל שנועד "רק להרים z-index" לא צריך לגעת ב-position בכלל. */
.card .card-actions,
.card .card-actions .btn { position: relative; z-index: 2; }
/* ⚠️ המצביע על כל הכרטיס, כדי שיהיה ברור שהוא לחיץ ולא רק הכותרת. */
.card { cursor: pointer; }
.card .card-actions .btn { cursor: pointer; }
/* ─── מצב פתיחה על הכרטיס ────────────────────────────────────────────────
⚠️ בולט בכוונה: זו השורה שעונה על השאלה "אפשר ללכת לשם עכשיו?".
⚠️ המילה עצמה נושאת את המידע — הצבע רק מחזק. נקודה צבעונית **ו**טקסט,
לא צבע לבד. */
.card-hours {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border-top: 1px solid var(--line-soft);
font-size: 14px; font-weight: 700;
}
.card-hours .dot {
width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
background: currentColor;
}
.card-hours.is-open { color: #1B7F4B; background: #EAF6EF; }
.card-hours.is-closing_soon { color: #8A5A00; background: #FCF3E2; }
.card-hours.is-closed { color: #A8342B; background: #FBEBE9; }
/* ⚠️ רק החריג מסומן על הכרטיס. ר' ההסבר ב-business_card.php. */
.card-unofficial {
display: flex; align-items: center; gap: 7px;
padding: 8px 16px; border-top: 1px solid var(--line-soft);
background: #FDF6E7; color: #6B4E12;
font-size: 12.5px; font-weight: 600;
}
.card-unofficial svg { flex-shrink: 0; color: #C98A17; }
/* 🛑 רשות מכשירה שמפרסמת בעצמה — טורקיז ולא ענבר. ענבר אומר לגולש
"היזהר", וכאן אין ממה: יש מקור אחר, לא מקור חלש יותר. */
.card-unofficial.card-src { background: var(--teal-50); color: var(--teal-700); border-top-color: var(--teal-200); }
.card-unofficial.card-src svg { color: var(--teal-600); }
/* 🛑 שורת הפעולות בכרטיס — נחתכה באנגלית ובצרפתית (31.8.2026).
השורש: `.btn` יורש `padding: 11px 22px` (44px ריפוד אופקי) ו-
`white-space: nowrap`, בכרטיס שרוחבו ~180px בשני טורים בטלפון.
"נווט" תופס 30px ונכנס; "Directions" תופס 75px ונחתך.
⚠️ הפתרון אינו לוותר על שני הטורים (החלטת רוני, 25.8) אלא לתת
לשורה לעטוף: ריפוד צר, גופן קטן יותר, ו-min-width שגורם לכפתור
שלישי (משגיח) לרדת לשורה שנייה במקום להידחס. */
.card-actions { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-soft); }
.card-actions .btn {
flex: 1 1 auto; min-width: 78px; border-radius: 0; border: none;
border-inline-end: 1px solid var(--line-soft);
border-top: 1px solid var(--line-soft); margin-top: -1px;
background: #fff; color: var(--navy-800); font-size: 13px; min-height: 46px;
padding-inline: 6px; gap: 5px;
/* רשת ביטחון: שם ארוך במיוחד ייחתך בשלוש נקודות ולא יגלוש מהכרטיס. */
overflow: hidden; text-overflow: ellipsis;
}
.card-actions .btn:last-child { border-inline-end: none; }
.card-actions .btn:hover { background: var(--teal-50); }
.fav-btn {
position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2;
width: 38px; height: 38px; border-radius: var(--r-pill);
background: rgba(255,255,255,.94); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center; cursor: pointer;
color: var(--ink-400); transition: color .15s, transform .15s;
}
.fav-btn:hover { color: var(--heart); transform: scale(1.07); }
.fav-btn[aria-pressed="true"] { color: var(--heart); }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.stars { display: inline-flex; gap: 1px; color: var(--star); vertical-align: middle; }
.stars svg { width: 15px; height: 15px; }
.stars .off { color: #D8DEE4; }
/* ─── רשתות ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ─── פאנל / קופסה ────────────────────────────────────────────────────────── */
.panel {
background: #fff; border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-1);
}
.panel-cream { background: var(--cream); border-color: #EADFC9; }
.panel-title { font-size: 18px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
/* ─── טפסים ───────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-700); }
.input, .select, textarea.input {
width: 100%; min-height: 48px; padding: 12px 14px;
border: 1.5px solid var(--line); border-radius: var(--r-sm);
font-family: inherit; font-size: 16px; color: var(--ink-900); background: #fff;
}
.input:focus, .select:focus { border-color: var(--teal-500); outline: none; box-shadow: 0 0 0 3px var(--teal-100); }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.6; }
.hint { font-size: 13px; color: var(--ink-500); }
.err { font-size: 13.5px; color: var(--danger); font-weight: 600; }
.alert { padding: 13px 16px; border-radius: var(--r-sm); font-size: 15px; border: 1px solid; margin-bottom: 16px; }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert-err { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
/* ─── פוטר ────────────────────────────────────────────────────────────────── */
.footer { background: var(--navy-900); color: #C6D3DF; margin-top: 56px; }
.footer a { color: #C6D3DF; }
.footer a:hover { color: #fff; }
/* ⚠️⚠️ padding-block ולא padding.
`.footer-top` הוא **עצמו** ה-.wrap (class="wrap footer-top"), ו-.wrap
נותן `padding-inline: 20px`. shorthand של `padding: 40px 0` דרס את זה
לאפס — כלומר לפוטר לא היה שום ריפוד צדדי, אף פעם.
בדסקטופ זה לא נראה כי ה-max-width השאיר שוליים לבנים ממילא; במובייל
הטקסט נצמד לקצה המסך בדיוק ונראה חתוך. אותה טעות ב-.footer-bottom. */
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-block: 40px 30px; }
.footer h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12); padding-block: 16px;
display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
font-size: 13.5px; color: #8FA3B6;
}
/* ─── מובייל ──────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-top { grid-template-columns: 1fr 1fr; }
}
/* ⚠️⚠️ קריסת התפריט להמבורגר ב-**1100px** ולא ב-760.
*
* 🛑 רוני, 31.8.2026: *"התפריט לא נראה טוב עכשיו שיש שפות."* — וצדק.
* בורר השפה הוסיף שלושה פריטים לשורה שכבר הכילה לוגו, שמונה קישורי
* ניווט ושני כפתורים. נמדד בצילום ברוחב 1280: **ארבעה קישורים נשברו
* לשתי שורות** ("דף הבית", "לבעלי עסק", "צור קשר") והכותרת התנפחה.
*
* ⚠️ הקריסה ב-760 נקבעה כשהיו פחות פריטים בשורה. הוספת פריט לכותרת
* מחייבת לבדוק מחדש את הנקודה שבה היא כבר לא נכנסת — זה לא נשאר נכון
* מעצמו.
*
* ⚠️ **1240 ולא 1100.** הניסיון הראשון היה 1100, וצילום ב-1150 הראה
* שהשורה עדיין גולשת: הלוגו נחתך ל-"לי כשר" וכפתור "הוסף עסק" יצא
* מהמסך. הנקודה נקבעה במדידה של הרוחב שבו הפריט האחרון עוד נכנס,
* ולא בהערכה.
*/
@media (max-width: 1240px) {
.nav-links {
display: none;
position: absolute; inset-inline: 0; top: var(--nav-h);
background: #fff; border-bottom: 1px solid var(--line);
flex-direction: column; align-items: stretch; gap: 0;
padding: 8px; box-shadow: var(--sh-2);
}
.nav-links.open { display: flex; }
.nav-links a { padding: 14px; border-radius: var(--r-sm); }
.nav-links a[aria-current="page"] { box-shadow: none; background: var(--teal-50); border-radius: var(--r-sm); }
.nav-toggle {
display: flex; align-items: center; justify-content: center;
width: 44px; min-width: 44px; height: 44px; padding: 0;
border: 1px solid var(--line);
border-radius: var(--r-sm); background: #fff; cursor: pointer; color: var(--navy-900);
}
}
@media (max-width: 760px) {
:root { --nav-h: 60px; }
/* ⚠️ מה שמתח את הדף: השורה כולה לא הצליחה להיכנס ל-390px.
שלוש ההתאמות ביחד פותרות את זה — לוגו מתכווץ עם חיתוך, מרווח
קטן יותר, וכפתור התחברות קומפקטי. */
.nav-in { gap: 8px; }
.brand { min-width: 0; flex-shrink: 1; gap: 7px; }
.brand img { width: 34px; height: 34px; flex-shrink: 0; }
.brand-name {
font-size: 17px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.nav-actions { gap: 6px; }
.nav-actions .btn-hide-sm { display: none; }
.nav-actions .btn { padding: 10px 14px; font-size: 14.5px; gap: 6px; }
/* מתחת ל-380px אין מקום לטקסט מלא — משאירים "התחבר" בלבד */
.btn-label-sm { display: none; }
}
/* ⚠️⚠️ הבאג שהיה כאן: קריסה לעמודה אחת הוגדרה רק מתחת ל-**380px**.
כמעט אין טלפון כזה — iPhone 12+ הוא 390, גלקסי 360-412. כלומר על
כל טלפון מודרני `.grid-5` נשאר בשלוש עמודות ו-`.footer-top` בשתיים,
הטקסט נשבר אות-אות ("info @ka sher. info"), והדף נמתח לרוחב.
הסולם למטה מדורג לפי גדלים אמיתיים של מכשירים. */
/* טאבלט לאורך / חלון צר */
@media (max-width: 900px) {
.grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ⚠️ 25.8.2026: תג מצב-התעודה ("בפיקוח · התעודה אינה מפורסמת") הוא
בהרבה התג הארוך ביותר על הכרטיס (עד 26 תווים, מול "מהדרין"/"בשרי"
הקצרים) - ברוחב כרטיס-חצי (2 טורים, מאז התיקון למעלה) הוא נחתך
ע"י `.card { overflow: hidden }` במקום `.tag { white-space: nowrap }`
הרגיל. תפס רוני בצילום מסך אמיתי. שני שינויים ביחד, לא אחד בלבד:
פונט קטן יותר (רוני ביקש) **וגם** `white-space: normal` - קטנת
פונט לבד לא הייתה מספיקה (התג עדיין ~180px בעוד יש לו ~113px),
חייבים לאפשר שבירת שורה כדי שבאמת לא ייחתך, לא רק שייחתך פחות. */
.card-tags .tag-ok, .card-tags .tag-warn, .card-tags .tag-danger, .card-tags .tag-src {
font-size: 11.5px; white-space: normal; text-align: center; line-height: 1.35;
}
}
/* טלפון — כאן הכל יורד לעמודה אחת */
@media (max-width: 620px) {
.grid-5, .grid-4, .grid-2 { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; gap: 26px; }
.stats { grid-template-columns: 1fr; }
}
/* ⚠️ 25.8.2026: `.grid-3` בכוונה **לא** ברשימה למעלה - כרטיסי בית עסק
(business_card.php) נשארים ב-2 טורים גם בטלפון (יורש את הערך מ-900px
למעלה), לא קורס לעמודה אחת כמו שאר הרשתות. אותו שינוי בדיוק כמו ב-
pea.co.il (`.listings-grid`, ר' ה-CLAUDE.md שם) - נראה מודרני יותר,
ונבדק ויזואלית (Playwright, 390/360/320px) עם כרטיס מלא (3 תגיות,
דירוג, שורת שעות, שורת כשרות, 3 כפתורי פעולה) לפני שהוחלט שזה מחזיק
מעמד גם במסך הכי צר - כן. **לא** לגעת ב-`.grid-4`/`.grid-5` - אלה
עמודות שירות/אמון (index.php), לא כרטיסי עסק, ולא התבקש שינוי שם. */
@media (max-width: 380px) {
.brand-name { font-size: 16px; }
.nav-actions .btn { padding: 10px 12px; font-size: 14px; }
}
/* ⚠️ רשת ביטחון: שום דבר לא מותח את הדף לרוחב.
`overflow-x: clip` ולא `hidden` — hidden על שובר את
`position: sticky` של התפריט והפאנלים. clip לא. */
@media (max-width: 900px) {
html, body { overflow-x: clip; }
/* ⚠️ מחרוזות ארוכות בלי רווח (אימייל, כתובת) הן הגורם הקלאסי
לגלישה אופקית שקשה לאתר. */
.svc-list strong, .bc-item strong, .cc-alt, .footer p { overflow-wrap: anywhere; }
}
/* טבלאות רחבות לא שוברות את הדף */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
.nav, .footer, .btn, .fav-btn, #onagish-widget { display: none !important; }
body { background: #fff; }
}
/* ─── מודעות ──────────────────────────────────────────────────────────────── */
/* ⚠️ כל יחידה מסומנת ותחומה. מודעה שנראית כמו כרטיס עסק בתוך רשימת
תוצאות עלולה להיקרא כהמלצה על מקום כשר - וזה בדיוק מה שאסור. */
.ad {
display: block; position: relative; overflow: hidden;
border: 1px dashed var(--line); border-radius: var(--r-md);
background: var(--bg); padding: 22px 12px 12px; min-height: 110px;
}
.ad-label {
position: absolute; inset-block-start: 6px; inset-inline-start: 10px;
font-size: 11px; letter-spacing: .06em; color: var(--ink-400); font-weight: 600;
}
.ad-feed { grid-column: 1 / -1; }
.ad-inarticle { margin: 28px 0 4px; }
.ad-sidebar { min-height: 260px; }
/* דירוג בכרטיס — שורה משלו, מתחת לתגיות הכשרות ולא בתוכן */
.card-rating { margin-top: 8px; display: flex; align-items: center; font-size: 13.5px; }
/* ─── קרוסלה ─────────────────────────────────────────────────────────────────
מחליפה את `.scroll-x` הישן — רצועה עם פס גלילה של מערכת ההפעלה, שנראה
כמו חלון מוטמע ולא כמו רכיב של האתר, ובדסקטופ אין בכלל רמז שיש עוד
תוכן מימין.
⚠️ הגלילה עצמה נשארת גלילה אמיתית ולא transform: החלקה באצבע, גלגלת
אופקית ו-scroll-snap ממשיכות לעבוד בדיוק כמו קודם, והחיצים רק מוסיפים
דרך נוספת. קרוסלה מבוססת transform הייתה שוברת את כל אלה.
⚠️ בלי ספריות. jQuery או קרוסלה מוכנה היו ~90KB עבור מה שעושות כאן
עשרים שורות, ובאתר שנטען על 3G בסופר זה משנה. */
.carousel { position: relative; }
.carousel-track {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* ⚠️ בלי scroll-behavior: smooth כאן. הוא הופך כל השמה ל-scrollLeft
לאנימציה — כלומר גרירה בעכבר הופכת לאיטית ומקרטעת, וקריאה מיד
אחרי כתיבה מחזירה את הערך הישן. ההחלקה מוגדרת נקודתית בקריאות
scrollIntoView שב-site.js, שם היא באמת רצויה. */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
cursor: grab;
}
.carousel-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
/* ⚠️ בזמן גרירה חייבים לבטל scroll-snap, אחרת הרצועה "נצמדת" חזרה
בכל תזוזה קטנה והגרירה מרגישה שבורה. */
.carousel-track::-webkit-scrollbar { display: none; }
.car-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-2);
cursor: pointer; z-index: 3; padding: 0;
display: flex; align-items: center; justify-content: center;
color: var(--navy-900);
transition: background .15s, border-color .15s;
}
.car-nav:hover { background: var(--teal-50); border-color: var(--teal-500); }
.car-nav:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.car-nav[hidden] { display: none; }
/* ⚠️ גבולות **פיזיים** ולא לוגיים. הגרסה הקודמת השתמשה ב-
border-inline-start, שב-RTL מתפרש כ-border-right — כלומר צורת הזווית
מתהפכת, וזוויות ה-rotate שחושבו עבור left הצביעו למעלה. בפועל שני
החיצים נראו כמו "^". כשמסובבים ידנית חייבים גבול פיזי. */
.car-nav::before {
content: ""; width: 10px; height: 10px;
border-top: 2px solid currentColor; border-left: 2px solid currentColor;
}
/* מוסכמה עברית: הבא = שמאלה, הקודם = ימינה */
/* ⚠️ מיקום **לוגי**: "הקודם" בצד תחילת הקריאה ו"הבא" בסופה, בשני
הכיוונים. `right`/`left` פיזיים היו הופכים את החיצים באנגלית. */
.car-prev { inset-inline-start: 6px; }
.car-prev::before { transform: rotate(135deg); margin-inline-end: 4px; }
.car-next { inset-inline-end: 6px; }
.car-next::before { transform: rotate(-45deg); margin-inline-start: 4px; }
/* ⚠️ חץ ה-CSS עצמו בנוי מגבולות ולכן חייב להתהפך ידנית ב-LTR —
`transform` אינו מושפע מ-`direction`. */
html[dir="ltr"] .car-prev::before { transform: rotate(-45deg); }
html[dir="ltr"] .car-next::before { transform: rotate(135deg); }
/* ⚠️ ריווח פנימי ברוחב החץ, אחרת הכרטיס הראשון והאחרון יושבים מתחתיו */
.carousel-track { padding-inline: 4px; }
.carousel:has(.car-nav:not([hidden])) .carousel-track { padding-inline: 52px; }
/* ⚠️ החיצים מוסתרים רק במגע אמיתי. הגרסה הקודמת הסתירה אותם גם ב-
max-width:760px, אבל בשילוב עם הסתרת פס הגלילה זה השאיר מסכים צרים
בלי שום דרך להגיע לתוכן. */
/* ⚠️ הריפוד הוסר גם ממסכים צרים ולא רק ממכשירי מגע. דפדפן במחשב
בחלון של 400px מדווח hover — ואז הריפוד של 52px משני הצדדים נשאר
ומותח את הדף. הרוחב הוא מה שקובע כאן, לא סוג הקלט. */
@media (max-width: 620px) {
.carousel:has(.car-nav:not([hidden])) .carousel-track { padding-inline: 4px; }
.car-nav { width: 38px; height: 38px; }
}
@media (hover: none) and (pointer: coarse) {
.car-nav { display: none !important; }
.carousel:has(.car-nav:not([hidden])) .carousel-track { padding-inline: 4px; }
/* שם מחליקים באצבע — ופס גלילה דק חוזר כרמז שיש עוד */
.carousel-track { scrollbar-width: thin; }
.carousel-track::-webkit-scrollbar { display: block; height: 3px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
}
}
/* ─── בישול ישראל ────────────────────────────────────────────────────────────
⚠️ שלושה מצבים ושלושה צבעים שונים, ולא "יש/אין". ההבדל בין בית יוסף
לרמ״א הוא ההבדל שבגללו מקפיד מעדות המזרח ייכנס או לא ייכנס — ואסור
שייראו אותו דבר במבט חטוף. */
.tag-bishul-by { background: #E9F2EC; border-color: #C3DBCC; color: #1F5C3A; font-weight: 700; }
.tag-bishul-rama { background: #FCF3E2; border-color: #EFDCB6; color: #7A4E0C; }
.tag-bishul-no { background: var(--bg); border-color: var(--line); color: var(--ink-500); }
/* ─── סקשנים ──────────────────────────────────────────────────────────────── */
/* ⚠️ כאן ולא ב-home.css. הם היו שם, שנטען רק בדף הבית — ולכן בדף
העסק הכותרת "עסקים כשרים בסביבה" נדבקה לכפתור הדירוג שמעליה.
מחלקה שמשמשת יותר מדף אחד שייכת לגיליון המשותף. */
.sec { padding: 42px 20px 10px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.sec-more { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
/* ─── צ'יפים ─────────────────────────────────────────────────────────────── */
/* ⚠️ משמשים גם ב-search.php, שלא טוען home.css. היו מוגדרים שם
בלבד — כלומר צ'יפים לא מעוצבים בכל דף החיפוש. */
/* 🛑🛑 הצ׳יפים היו **בלתי-נגישים לחלוטין** במובייל: `display:flex` בלי
* `flex-wrap` ובלי `overflow-x`, ו-`html, body` הם `overflow-x: clip` —
* כלומר הם גלשו מחוץ למסך ולא הייתה **שום** דרך להגיע אליהם. בעכו רק
* שלוש מתוך שמונה קטגוריות נכנסו למסך.
*
* ⚠️ **רצועת גלילה ולא שבירה לשורות — החלטת רוני, 31.8.2026.**
* הגרסה הראשונה שלי הייתה `flex-wrap: wrap`, בנימוק שרצועה מסתירה
* אפשרויות. רוני ראה את התוצאה: *"זה נורא! עדיף סקרולר."* וצדק —
* שמונה צ׳יפים בארבע שורות אכלו חצי מסך ודחפו את התוכן עצמו מתחת
* לקו הקיפול. הנימוק שלי היה נכון בתיאוריה ושגוי במסך.
*
* ⚠️ **המרכוז דרך `margin-inline: auto` ולא `justify-content: center`.**
* `center` על מכולה גוללת חותך את הפריטים בקצה ההתחלתי ו**אי אפשר
* לגלול אליהם חזרה** — כלומר בדיוק אותו באג בצורה אחרת. הצירוף
* `width: fit-content` + `max-width: 100%` ממרכז כשנכנס וגולל כשלא.
*/
.chips {
display: flex; gap: 9px;
margin-top: 16px; padding: 4px 2px 6px;
}
.chips:not(.chips-hero) {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* פיירפוקס */
scroll-snap-type: x proximity;
width: fit-content; max-width: 100%; margin-inline: auto;
}
.chips:not(.chips-hero)::-webkit-scrollbar { display: none; }
.chips:not(.chips-hero) > .chip { scroll-snap-align: start; }
.chip {
display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
padding: 10px 16px; border-radius: var(--r-pill);
background: #fff; border: 1.5px solid var(--line); color: var(--ink-700);
font-size: 14.5px; font-weight: 600; min-height: 44px;
}
.chip:hover { border-color: var(--teal-500); color: var(--teal-800); text-decoration: none; }
.chip-on { border-color: var(--teal-500); color: var(--teal-700); background: var(--teal-50); }
.chip-n { color: var(--ink-400); font-weight: 500; font-size: 13px; }
/* ─── מפריד "או" ────────────────────────────────────────────────────────── */
/* ⚠️ משמש ב-login.php, שטוען auth.css ולא home.css. */
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-400); font-size: 13.5px; margin: 10px 0 2px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); flex-grow: 1; }
/* ⚠️ נשאר צמוד להגדרה למעלה ולא ב-home.css: search.php משתמש בצ'יפים
ולא טוען את הגיליון ההוא, ובלי זה הם נשארים ממורכזים במובייל
בזמן שהם צריכים להתחיל מהצד. */
@media (max-width: 900px) { .chips { justify-content: flex-start; } }
/* ─── השלמה אוטומטית ─────────────────────────────────────────────────────── */
/* ⚠️ ב-brand.css ולא בגיליון של דף מסוים — הרכיב אמור לעבוד בכל
שדה שנושא data-city-suggest. זה הלקח מ-.sec ו-.chips, שהיו
מוגדרים ב-home.css ונשברו בכל דף אחר. */
/* ⚠️ עוגן על ההורה הקיים ולא על עוטף חדש — עטיפה הייתה שוברת את
ה-flex של סרגל החיפוש. */
.ac-host { position: relative; }
.ac-list {
/* ⚠️ המיקום המדויק נקבע ב-JS לפי מיקום ה**שדה** בתוך ההורה, כי
ההורה הוא סרגל החיפוש כולו וכולל את הכפתורים. הערכים כאן הם
נפילה-לאחור סבירה בלבד. */
position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px);
z-index: 60; margin: 0; padding: 6px; list-style: none;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
box-shadow: var(--sh-3); max-height: 320px; overflow-y: auto;
}
.ac-list[hidden] { display: none; }
.ac-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
/* ⚠️ 44px גובה מינימלי — יעד מגע תקני. הפריטים האלה נלחצים באצבע
על מסך קטן, וזו הייתה הערה חוזרת בבדיקת הנגישות. */
min-height: 44px; padding: 8px 12px;
border-radius: var(--r-sm); cursor: pointer;
font-size: 15px; color: var(--navy-900);
}
.ac-item b { color: var(--teal-700); font-weight: 700; }
.ac-item.is-on { background: var(--teal-50); }
.ac-n {
flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-500);
background: var(--bg); border-radius: var(--r-pill); padding: 2px 9px;
}
/* ⚠️ הרשימה נפתחת מעל תוכן, ובתוך סרגל סינון עם overflow היא נחתכת.
הכלל הזה מוודא שההורה לא גוזר אותה. */
.f-grp:has(.ac-host), .ac-host { overflow: visible; }
/* ─── חיווי איתור מיקום ──────────────────────────────────────────────────── */
/* ⚠️ position: fixed בראש המסך ולא ליד הכפתור. במובייל הכפתור עצמו
מוסתר לעיתים ע"י המקלדת, ובמסלול השקט של דף הבית אין כפתור בכלל.
מקום קבוע וגלוי הוא כל הרעיון. */
.loc-wait {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 12px 18px; font-size: 15px; font-weight: 600;
background: var(--navy-900); color: #fff;
box-shadow: 0 3px 14px rgba(11, 49, 81, .28);
/* ⚠️ מתחיל מוסתר **ומחוץ למסך**, לא רק שקוף: פס שקוף עדיין תופס
מקום ל-hit-testing וחוסם לחיצות על הניווט שמתחתיו. */
transform: translateY(-100%); opacity: 0;
transition: transform .22s ease, opacity .22s ease;
}
.loc-wait.is-on { transform: translateY(0); opacity: 1; }
.loc-wait.is-done { background: var(--teal-700); }
.loc-wait.is-err { background: var(--danger); }
.loc-spin {
width: 17px; height: 17px; flex-shrink: 0;
border: 2.5px solid rgba(255, 255, 255, .35);
border-block-start-color: #fff;
border-radius: 50%;
animation: loc-spin .8s linear infinite;
}
.loc-wait.is-done .loc-spin,
.loc-wait.is-err .loc-spin { display: none; }
@keyframes loc-spin { to { transform: rotate(360deg); } }
/* ⚠️ מכבדים העדפת מערכת. ספינר מסתובב הוא בדיוק סוג האנימציה
שגורמת סחרחורת למי שהגדיר prefers-reduced-motion, והמידע כאן
עובר גם בלי הסיבוב. */
@media (prefers-reduced-motion: reduce) {
.loc-spin { animation: none; border-block-start-color: rgba(255,255,255,.9); }
.loc-wait { transition: none; }
}
/* ─── מפריד בין מקומות לאכול לשאר בתי העסק ──────────────────────────────── */
/* ⚠️ `grid-column: 1 / -1` — בלעדיו הכותרת נכנסת כתא בודד בגריד
ודוחפת כרטיס לשורה הבאה, במקום להפריד בין שני חלקי הרשימה. */
.grid-sep {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 14px;
margin: 14px 0 2px;
font-size: 16px; font-weight: 700; color: var(--ink-500);
}
.grid-sep::before, .grid-sep::after {
content: ""; height: 1px; background: var(--line); flex-grow: 1;
}
/* ═══ ניקוי הכותרת בטלפון ═══
רוני: ״לא יושב לי טוב בעין העיצובית החלק העליון״.
⚠️ הבעיה לא הייתה אף אלמנט בפני עצמו אלא **שניים ממוסגרים זה
לצד זה**: ההמבורגר בתיבה לבנה עם מסגרת, וכפתור ״התחבר״ מלא
בנייבי. שתי צורות תחומות באותו גובה מתחרות, והכפתור הכהה ניצח
את הלוגו — כלומר הדבר הבולט ביותר בכותרת היה פעולה משנית.
הפתרון: **צורה תחומה אחת בלבד.** ההמבורגר הופך לאייקון נקי,
והכפתור נשאר היחיד עם נוכחות. */
@media (max-width: 860px) {
.nav-toggle {
/* ⚠️ המסגרת והרקע יורדים — **לא** שטח הנגיעה. 44×44 נשאר,
כי זה הרף שמתחתיו כפתור בטלפון קשה לפגיעה. */
border: 0;
background: transparent;
color: var(--navy-700);
}
.nav-toggle:active { background: rgba(11, 49, 81, .06); border-radius: var(--r-sm); }
/* הכפתור מעט קליל יותר, כדי שלא ידרוס את הלוגו */
.nav-actions .btn-navy {
padding: 9px 13px;
font-weight: 600;
box-shadow: none;
}
/* ⚠️ קצת אוויר בין הלוגו לשאר — בלעדיו השלושה נראים כגוש אחד */
.nav-in { gap: 10px; }
.brand { margin-inline-end: auto; }
}
/* ─── קישורי יישובים קבועים בפוטר (26.8.2026) ─────────────────────────────
בקשת רוני: קישורים קבועים "מסעדות כשרות - חיפה" בכל דף, כדי שדפי
היישובים — שכבר היו קיימים וב-sitemap — יקבלו קישור פנימי אמיתי ולא
רק דרך cities.php.
⚠️ `padding-block` ולא `padding`: .footer-cities הוא **עצמו** ה-.wrap,
ו-shorthand דורס את ה-padding-inline שלו לאפס. בדיוק אותה טעות
שתועדה למעלה על .footer-top, ושבמובייל מצמידה את הטקסט לקצה המסך. */
.footer-cities { border-top: 1px solid rgba(255,255,255,.12); padding-block: 22px 8px; }
.footer-cities h4 { margin-bottom: 12px; }
/* ⚠️ דריסת `.footer ul` שהוא flex-column — 19 קישורים בעמודה אחת הופכים
את הפוטר לעמוד שלם. כאן שורות שנשברות. */
.footer-cities ul {
flex-direction: row; flex-wrap: wrap; gap: 8px 10px; font-size: 13.5px;
}
.footer-cities li { display: inline-flex; }
.footer-cities a {
display: inline-block; padding: 5px 11px; border-radius: 999px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
color: #C9D8E6; text-decoration: none; line-height: 1.4;
}
.footer-cities a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.footer-cities .fc-all { background: transparent; border-color: transparent; color: var(--teal-300, #6FD3DD); }
@media (max-width: 620px) {
/* ⚠️ במובייל שם היישוב לבדו — "מסעדות כשרות - " בכל תגית גורם לכל
קישור לתפוס שורה שלמה, והרשימה נעשית ארוכה מכל שאר הפוטר יחד.
טקסט העוגן המלא נשאר ב-HTML לגוגל דרך aria-label. */
.footer-cities a { font-size: 13px; padding: 4px 9px; }
}
/* ─── פס ההסכמה לעוגיות (27.8.2026) ──────────────────────────────────────────
⚠️ מגדר את AdSense בלבד. עוגיית ההתחברות ועוגיית המיקום פונקציונליות
ולבקשת המשתמש — ר' includes/consent.php. */
.consent {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1200;
background: var(--navy-900, #0B3151); color: #fff;
box-shadow: 0 -6px 24px rgba(0,0,0,.22);
/* ⚠️ מרווח למכשירים עם סרגל תחתון, אחרת הכפתורים יושבים מתחתיו. */
padding-block-end: env(safe-area-inset-bottom, 0);
}
.consent-in {
max-width: 1180px; margin-inline: auto;
padding: 14px 20px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.consent-txt { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.55; }
.consent-txt a { color: var(--teal-300, #6FD3DD); }
/* ⚠️ **בתוך הפאנל הנפתח** שני הכפתורים באותו גודל בכוונה: "רק ההכרחי"
קטן או חיוור מ"אישור" הוא בדיוק דפוס הכהיית-הבחירה שהרגולציה אוסרת.
ההיררכיה נמצאת בשורה הראשונה (אישור בולט מול קישור), לא בין שתי
האפשרויות עצמן. */
.consent-btns { display: flex; gap: 9px; flex-shrink: 0; align-items: center; }
/* ⚠️ `button` ולא ``: זו פעולה בדף ולא ניווט, וקורא מסך
צריך לשמוע "כפתור". החזות היא של קישור. */
.btn-link-plain {
background: none; border: 0; padding: 6px 4px; cursor: pointer;
color: var(--teal-300, #6FD3DD); font: inherit; text-decoration: underline;
}
.btn-link-plain:hover { color: #fff; }
.btn-link-plain:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.consent-opts { border-top: 1px solid rgba(255,255,255,.18); }
.consent-opts .consent-txt { font-size: 13px; opacity: .92; }
.consent-btns .btn { min-width: 116px; justify-content: center; }
.consent-btns .btn-line { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.consent-btns .btn-line:hover { background: rgba(255,255,255,.12); }
@media (max-width: 620px) {
.consent-in { padding: 12px 16px; gap: 10px; }
.consent-txt { font-size: 13px; }
.consent-btns { width: 100%; }
.consent-btns .btn { flex: 1 1 0; min-width: 0; }
}
/* ═══ יישור שדות טופס ב-RTL ═══ 27.8.2026
*
* 🛑 דווח: שדות טופס יצירת הקשר מיושרים לשמאל.
*
* ⚠️ הסיבה אינה חסרה `text-align` אלא **`type` של השדה**: דפדפנים
* כופים `direction: ltr` על `email`, `url` ו-`tel`, כי הערכים שלהם
* הם תמיד לטיניים. התוצאה בעמוד עברי: הטקסט נדבק לשמאל, והתחלת
* הכתובת נחתכת מחוץ לשדה — בדיוק מה שנראה בצילום.
*
* ⚠️ הפתרון אינו `direction: rtl` עליהם: זה היה הופך את סדר התווים
* של כתובת מייל. משאירים LTR **לתוכן** ומיישרים את הבלוק ימינה.
*
* ⚠️ `right` מפורש ולא `start`: תחת `direction: ltr` הערך `start`
* פירושו שמאל, כלומר בדיוק הבעיה שאנחנו מתקנים.
*
* ⚠️⚠️ **והיישור חייב לעקוב אחרי שפת הדף ולא להיות קבוע.** הכלל נכתב
* כשהאתר היה עברי בלבד; באנגלית ובצרפתית `text-align: right` על שדה
* מייל הוא בדיוק הבאג ההפוך. לכן שני כללים לפי `html[dir]`.
*/
.input,
.cc-row input,
.cc-row textarea { text-align: start; }
input[type="email"].input,
input[type="url"].input,
input[type="tel"].input,
.cc-row input[type="email"],
.cc-row input[type="url"],
.cc-row input[type="tel"] {
direction: ltr;
}
html[dir="rtl"] input[type="email"].input,
html[dir="rtl"] input[type="url"].input,
html[dir="rtl"] input[type="tel"].input,
html[dir="rtl"] .cc-row input[type="email"],
html[dir="rtl"] .cc-row input[type="url"],
html[dir="rtl"] .cc-row input[type="tel"] { text-align: right; }
html[dir="ltr"] input[type="email"].input,
html[dir="ltr"] input[type="url"].input,
html[dir="ltr"] input[type="tel"].input,
html[dir="ltr"] .cc-row input[type="email"],
html[dir="ltr"] .cc-row input[type="url"],
html[dir="ltr"] .cc-row input[type="tel"] { text-align: left; }
/* ⚠️ ה-placeholder נכתב בשפת הדף, ולכן הכיוון שלו הוא כיוון הדף —
לא RTL קבוע. באנגלית placeholder באנגלית שמיושר לימין נראה שבור. */
html[dir="rtl"] input[type="email"].input::placeholder,
html[dir="rtl"] input[type="tel"].input::placeholder,
html[dir="rtl"] .cc-row input[type="email"]::placeholder,
html[dir="rtl"] .cc-row input[type="tel"]::placeholder { direction: rtl; text-align: right; }
html[dir="ltr"] input[type="email"].input::placeholder,
html[dir="ltr"] input[type="tel"].input::placeholder,
html[dir="ltr"] .cc-row input[type="email"]::placeholder,
html[dir="ltr"] .cc-row input[type="tel"]::placeholder { direction: ltr; text-align: left; }
/* ─── בורר שפה ─────────────────────────────────────────────────────── */
/* ⚠️ פקד מקוטע ("segmented") ולא שלושה קישורים מרחפים. שלושה פריטים
נפרדים בשורת כותרת עמוסה נקראים כעוד שלושה פריטי ניווט; מסגרת אחת
סביבם אומרת "זו בחירה אחת מתוך שלוש" ותופסת פחות רוחב, כי המרווחים
בין הפריטים נעלמים. */
.lang-switch {
display: inline-flex; align-items: center; flex-shrink: 0;
border: 1px solid var(--line); border-radius: 999px;
padding: 2px; background: #fff; overflow: hidden;
}
.lang-switch a {
font-size: 12px; font-weight: 700; color: var(--ink-500);
padding: 4px 8px; border-radius: 999px; line-height: 1;
text-decoration: none; letter-spacing: .01em;
}
.lang-switch a.is-active { background: var(--navy-900); color: #fff; }
.lang-switch a:hover:not(.is-active) { background: var(--teal-50); color: var(--teal-700); }
/* ─── כותרת במסך צר: בורר השפה דחק את שם המותג ────────────────────────────────
🛑 נמדד 31.8.2026 ב-390px מול האתר החי: `.brand-name` דורש 71px
ומקבל 43 — "בא לי כשר" הוצג כ**"בא ..."** בכל דף באתר.
⚠️ החיתוך עצמו **תוכנן** (`text-overflow: ellipsis` בבלוק של 760px),
מהתקופה שבכותרת היו לוגו + המבורגר + כפתור כניסה בלבד. מה שהפך אותו
ממקרה-קצה למצב הרגיל הוא **בורר השפה שנוסף ב-30-31.8** ותופס 101px.
כלומר זו לא תקלה בבורר ולא בשם — זו שורה שקיבלה דייר רביעי.
⚠️ **מצמצמים ולא מסתירים.** להעלים את הבורר במובייל היה קובר את כל
עבודת התרגום דווקא במכשיר שרוב הגולשים מגיעים ממנו; להסתיר את שם
המותג היה מוחק את הזהות. ריפוד אופקי בלבד — **הגובה נשאר** ואיתו
שטח הנגיעה. */
@media (max-width: 480px) {
.nav-in { gap: 6px; }
.lang-switch a { padding: 4px 4px; font-size: 11.5px; letter-spacing: 0; }
.nav-actions { gap: 5px; }
.nav-actions .btn { padding: 10px 11px; }
/* 🛑 הניסיון הראשון שחרר 27px ונתן לשם 70px כשהוא דורש 71 — והפער
של **פיקסל אחד** הדליק את ה-`ellipsis`, שאכל שלוש אותיות. כלומר
"כמעט נכנס" נראה בדיוק כמו "לא נכנס בכלל".
⚠️ ולכן `min-width` מפורש ולא עוד קיצוץ ועוד מדידה: הוא אומר
לפלקסבוקס שהשם אינו הדבר שמתכווץ, ומעביר את הלחץ למי שיש לו
ריפוד לוותר עליו. `text-overflow` נשאר כרשת ביטחון לשם ארוך
יותר בעתיד. */
.brand-name { min-width: 5.2em; }
}