/* ============================================================ SmartTravel — גיליון סגנון משותף לכל המדריכים כל מדריך עיר טוען את הקובץ הזה. אין CSS בתוך דפי המדריכים. צבע המבטא של העיר נקבע ב- ============================================================ */ :root{ --navy:#0f2b46; --navy-2:#14385c; --teal:#2f9e8f; --teal-2:#38b3a2; --blue:#1f6fb2; --accent:#0a6be0; --accent-d:#0857b8; --ink:#1a1a1a; --gray:#5b6670; --line:#e4e7eb; --bg:#fff; --soft:#f4f6f8; --gold:#febb02; --r:12px; --shadow:0 2px 8px rgba(15,43,70,.08); --shadow-h:0 8px 28px -8px rgba(15,43,70,.22); --city:var(--teal); /* ברירת מחדל — כל עיר יכולה לדרוס */ --city-soft:rgba(47,158,143,.12); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Heebo',system-ui,sans-serif;background:var(--soft);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .container{max-width:820px;margin:0 auto;padding:0 20px} /* --- רצועת דמו (להסיר לפני פרסום) --- */ .demo-ribbon{background:var(--navy);color:#fff;text-align:center;font-size:12px;padding:6px} .demo-ribbon b{color:var(--gold)} /* --- סרגל עליון --- */ .topbar{background:var(--navy);color:#fff} .topbar .container{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:1100px} .brand{display:flex;align-items:center;gap:10px} a.brand{cursor:pointer;transition:opacity .15s} a.brand:hover{opacity:.8} a.brand:focus-visible{outline:2px solid var(--teal-2);outline-offset:4px;border-radius:6px} .brand img{height:38px;filter:brightness(0) invert(1)} .brand .txt{font-weight:800;font-size:19px} .brand .txt b{color:var(--teal-2)} /* nowrap כדי שהקישור לא יישבר לשתי שורות ב-topbar הצר של הטלפון, ו-ellipsis כדי שגם שם ארוך במיוחד יתקצר במקום להרחיב את הפס. */ .backlink{font-size:14px;font-weight:500;color:#fff;opacity:.85; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} .backlink:hover{opacity:1} /* במסך צר מוסתר שם היעד ונשאר "→ חזרה" בלבד. "חזרה לאירופה" נחתך בשלוש נקודות, וזה גרוע משתי מילים שלמות: החץ נותן את הכיוון והשביל שמתחת אומר לאן. השם נשאר ב-DOM וקורא מסך ממשיך להקריא אותו. */ @media(max-width:600px){ .backlink{font-size:13px;max-width:46vw} .backlink .bl-to{display:none} } /* --- כותרת המדריך --- */ .hero{background:linear-gradient(160deg,#eef7f5,#eaf2f9);border-bottom:1px solid var(--line)} .hero .container{padding:32px 20px 26px} .hero .eyebrow{color:var(--city);font-weight:700;font-size:13px;letter-spacing:.05em;margin-bottom:8px} .hero h1{font-size:clamp(28px,6vw,42px);font-weight:900;color:var(--navy);line-height:1.05;margin-bottom:10px} .hero p{font-size:16px;color:var(--gray);max-width:48ch} .hero .meta{display:flex;gap:18px;margin-top:18px;flex-wrap:wrap} .hero .meta span{font-size:13px;color:var(--gray)} .hero .meta b{color:var(--navy)} /* --- ניווט בלוקים (טאבים) --- */ .daynav{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10} .daynav .container{display:flex;overflow-x:auto;max-width:1100px} .dtab{flex:1 0 auto;min-width:104px;border:none;background:none;font-family:'Heebo';cursor:pointer;padding:13px 12px 11px;border-bottom:3px solid transparent;color:var(--gray);text-align:center} .dtab .n{display:block;font-size:11px;font-weight:600;opacity:.7} .dtab .t{display:block;font-size:14.5px;font-weight:700;margin-top:2px} .dtab[aria-selected="true"]{color:var(--city);border-bottom-color:var(--city)} .dtab:focus-visible{outline:2px solid var(--city);outline-offset:-2px} /* --- פאנל --- */ .panel{display:none;padding:26px 0 50px} .panel[data-active="true"]{display:block;animation:fade .3s both} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.panel{animation:none}} /* --- תגית סוג בלוק --- */ .tag{display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;border-radius:100px;margin-bottom:12px;background:var(--city-soft);color:var(--city)} .tag.trust{background:rgba(47,158,143,.12);color:var(--teal)} .tag.money{background:rgba(10,107,224,.1);color:var(--accent)} .tag.flex{background:rgba(31,111,178,.12);color:var(--blue)} .p-head{margin-bottom:18px} .p-head h2{font-size:26px;font-weight:900;color:var(--navy);margin-bottom:5px} .p-head .lede{font-size:15px;color:var(--gray)} /* --- ההחלטה (הרכיב המרכזי של השיטה) --- */ .decision{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 20px;margin:16px 0} .decision .lbl{font-size:12px;color:var(--teal-2);font-weight:700;margin-bottom:5px} .decision .call{font-size:17px;font-weight:700;line-height:1.4} .decision .call b{color:var(--gold)} /* --- כרטיס אפשרות --- */ .opt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow)} .opt.rec{border:1.5px solid var(--city)} .opt .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px} .opt h3{font-size:16px;font-weight:700} .opt .pill{font-size:11px;font-weight:700;color:var(--city);background:var(--city-soft);padding:3px 9px;border-radius:100px;white-space:nowrap} .opt .price{font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap} .opt p{font-size:14px;color:var(--gray)} .opt .why{font-size:13px;color:var(--ink);margin-top:5px} .opt .why b{color:var(--accent)} /* --- סימון "לאימות" --- */ .verify{display:inline-flex;gap:4px;font-size:11px;font-weight:600;color:#946b00;background:rgba(254,187,2,.16);border:1px solid rgba(254,187,2,.5);padding:2px 7px;border-radius:100px;margin-right:5px} /* --- אזהרה --- */ .warn{display:flex;gap:10px;font-size:13.5px;background:#fff8e6;border:1px solid #f5e2a8;border-radius:8px;padding:12px 14px;margin:16px 0;color:#6b5a1e} .warn b{color:var(--ink)} /* --- זרימה ממוספרת (רצף פעולות) --- */ .flow{margin:8px 0} .step{display:flex;gap:14px;padding-bottom:18px;position:relative} .step::before{content:"";position:absolute;right:13px;top:28px;bottom:-2px;width:1.5px;background:var(--line)} .step:last-child::before{display:none} .step .num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;z-index:1} .step h4{font-size:15px;font-weight:700;margin-bottom:2px} .step p{font-size:13.5px;color:var(--gray)} .step .clock{font-size:12px;color:var(--city);font-weight:700} /* --- ציר זמן שעתי (מסלול יום) --- */ .tl{position:relative;margin-top:8px} .stop{display:flex;gap:16px;padding-bottom:20px;position:relative} .stop::before{content:"";position:absolute;right:19px;top:44px;bottom:-4px;width:2px;background:var(--line)} .stop:last-child::before{display:none} .stop .time{flex:0 0 40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--city);color:var(--city);display:grid;place-items:center;font-size:11px;font-weight:700;z-index:1;text-align:center;line-height:1.1} .stop .card{flex:1;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)} .stop .card h3{font-size:16px;font-weight:700;margin-bottom:3px} .stop .card p{font-size:14px;color:var(--gray)} .stop .card .tip{font-size:13px;color:var(--ink);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)} .stop .card .tip b{color:var(--city)} .stop .card .cost{display:inline-block;font-size:12px;font-weight:700;color:var(--navy);background:var(--soft);padding:3px 9px;border-radius:100px;margin-top:8px} /* --- השכבה הישראלית (חובה בכל בלוק) --- */ .il{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .il .h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;margin-bottom:12px;color:var(--navy)} .il .h .dot{width:9px;height:9px;border-radius:50%;background:var(--city)} .il-item{display:flex;gap:11px;font-size:14px;margin-bottom:10px;color:var(--gray)} .il-item:last-child{margin-bottom:0} .il-item .ic{flex:0 0 28px;height:28px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:15px} .il-item b{color:var(--ink);display:block;font-size:13.5px} /* --- כפתור הזמנה (אפיליאייט) --- */ .book{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--accent);color:#fff;border:none;width:100%;cursor:pointer;padding:16px 20px;border-radius:var(--r);font-family:'Heebo';font-size:16px;font-weight:700;margin-top:14px} .book:hover{background:var(--accent-d)} .book-note{font-size:12px;color:var(--gray);text-align:center;margin-top:8px} /* --- כותרת משנה בתוך בלוק --- */ .subhead{font-size:14px;font-weight:700;color:var(--gray);margin:20px 0 12px} @media(max-width:600px){.brand .txt{font-size:16px}} /* ============================================================ התאמה לפי תאריכי הטיול — פס עונה + סינון כרטיסים ============================================================ */ .seasonbar{background:#fff;border-bottom:1px solid var(--line)} .seasonbar .container{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;max-width:1100px} .sb-label{font-size:13.5px;font-weight:700;color:var(--navy)} .seasonbar input[type="date"]{font-family:'Heebo';font-size:13.5px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--ink);cursor:pointer} .seasonbar input[type="date"]:focus{outline:2px solid var(--city);outline-offset:1px} .sb-dash{color:var(--gray);font-size:13px} .sb-clear{font-family:'Heebo';font-size:12.5px;font-weight:600;color:var(--gray);background:none;border:none;cursor:pointer;text-decoration:underline;padding:4px} .sb-clear:hover{color:var(--ink)} .sb-clear[hidden]{display:none} /* סיכום העונה — נדחף לראש הפאנל הפעיל */ .season-note{display:flex;gap:11px;background:#eef7f5;border:1px solid #cfe6e1;border-radius:var(--r);padding:13px 16px;margin-bottom:18px;font-size:13.5px;color:#255a52} .season-note b{color:var(--navy)} .season-note .ic{font-size:17px;line-height:1.2} .season-note[hidden]{display:none} /* כרטיס שלא רלוונטי לתאריכים שנבחרו */ .opt.off{opacity:.42;filter:grayscale(.5)} .opt.off::after{content:"מחוץ לעונה בתאריכים שבחרת";display:block;margin-top:8px;font-size:11.5px;font-weight:700;color:#8a4b00;background:rgba(254,187,2,.18);border:1px solid rgba(254,187,2,.45);border-radius:100px;padding:3px 10px;width:fit-content} .opt.only-season{border-inline-start:3px solid var(--city)} /* ============================================================ תכנון הטיול — רכיב אחיד מעל הניווט ============================================================ */ .planbar{background:linear-gradient(180deg,#f7fbfa,#f2f7f9); border-block:1px solid var(--line)} .planbar .container{max-width:1100px;padding:22px 20px 24px} .planbar h2{font-size:19px;font-weight:900;color:var(--navy);margin-bottom:3px} .planbar h2::before{content:"🧭 ";font-size:17px} .planbar .sub{font-size:13px;color:var(--gray);margin-bottom:16px} .planbar .prow{padding-bottom:2px} .pchip{background:#fff} .pchip-static{display:inline-flex;align-items:center;gap:7px;font-family:'Heebo'; font-size:14px;font-weight:700;color:var(--navy);background:#fff; border:1.5px solid var(--city);border-radius:100px;padding:0 15px;min-height:38px; cursor:default} .pchip-static .cur{font-size:11px;font-weight:600;color:var(--city); background:var(--city-soft);border-radius:100px;padding:2px 8px} .prow{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap} .prow:last-child{margin-bottom:0} .plabel{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--gray);min-width:92px} .pchips{display:flex;gap:7px;flex-wrap:wrap;flex:1 1 auto;min-width:0} .pchip{font-family:'Heebo';font-size:13.5px;font-weight:600;color:var(--gray); background:var(--soft);border:1px solid transparent;border-radius:100px; padding:0 15px;min-height:38px;cursor:pointer;transition:.15s;white-space:nowrap} /* צ׳יפ אורך שיש לו תשובה הוא עוגן ולא כפתור. כפתור ממרכז טקסט מעצמו, עוגן לא — בלי השורה הזאת הוא נצמד לראש הצ׳יפ. */ a.pchip{display:inline-flex;align-items:center;text-decoration:none} .pchip:hover{border-color:rgba(47,158,143,.4);color:var(--ink)} .pchip[aria-pressed="true"]{background:var(--city-soft);border-color:var(--city);color:var(--city)} .pchip[disabled]{opacity:.45;cursor:default} .pchip[disabled]:hover{border-color:transparent;color:var(--gray)} .pchip .soon{font-size:10.5px;font-weight:600;opacity:.75;margin-inline-start:5px} .pdates{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pdates input[type="date"]{font-family:'Heebo';font-size:13.5px;padding:0 12px;min-height:38px; border:1px solid var(--line);border-radius:100px;background:var(--soft);color:var(--ink);cursor:pointer} .pdates input[type="date"]:focus{outline:2px solid var(--city);outline-offset:1px} .pdash{font-size:12.5px;color:var(--gray)} .pclear{font-family:'Heebo';font-size:12.5px;font-weight:600;color:var(--gray); background:none;border:none;cursor:pointer;text-decoration:underline;padding:6px} .pclear[hidden]{display:none} .pnote{display:flex;gap:9px;background:var(--city-soft);border-radius:10px; padding:10px 13px;margin-top:11px;font-size:13px;color:var(--navy)} .pnote[hidden]{display:none} .pnote b{font-weight:700} /* תחנה שאינה מתאימה לבחירה */ .stop.off-plan,.opt.off-plan{opacity:.4} .stop.off-plan .card::after,.opt.off-plan::after{content:attr(data-why);display:block;margin-top:7px; font-size:11.5px;font-weight:700;color:#8a4b00;background:rgba(254,187,2,.18); border:1px solid rgba(254,187,2,.45);border-radius:100px;padding:3px 10px;width:fit-content} /* אינדיקציית גלילה בשורת הימים. כאן היה .daynav{position:relative}. הוא נוסף כדי לתת הקשר מיקום ל-::after, אבל position:sticky כבר נותן אותו — ולכן השורה הזו רק דרסה את sticky שנקבע למעלה. התוצאה: הפס הפסיק להידבק, ו-.daynav{top:51px} שבסקציה B הפך מקיזוז דביקות להזזה ויזואלית של 51px כלפי מטה בלי שתיבת הפריסה זזה — כלומר הפס כיסה 51px מראש התוכן שמתחתיו. זה מה שנראה כמו כותרת חתוכה, ולא בעיית scroll-padding. */ .daynav::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:34px; background:linear-gradient(to right,rgba(255,255,255,.96),rgba(255,255,255,0)); pointer-events:none} html[dir="rtl"] .daynav::after{background:linear-gradient(to left,rgba(255,255,255,.96),rgba(255,255,255,0))} .daynav .container{scrollbar-width:none} .daynav .container::-webkit-scrollbar{display:none} @media(max-width:600px){ .planbar .container{padding:12px 16px 14px} .plabel{min-width:100%;margin-bottom:-2px} .pchips{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px} .pchips::-webkit-scrollbar{display:none} .pchip{min-height:40px;font-size:13px;padding:0 14px} .dtab{min-width:auto;padding:11px 14px 9px} .dtab .t{font-size:13.5px;white-space:nowrap} } /* ============================================================ ניווט מובייל דביק — מוצג רק בטלפון ============================================================ */ .mnav{display:none} @media(max-width:760px){ .mnav{display:block;position:fixed;inset-inline:0;bottom:0;z-index:40; background:rgba(255,255,255,.97);backdrop-filter:blur(10px); border-top:1px solid var(--line);box-shadow:0 -4px 20px -10px rgba(15,43,70,.25)} /* שורת הימים — מופיעה רק כשנמצאים במסלול */ .mnav-days{display:flex;gap:6px;overflow-x:auto;padding:8px 12px 0; scrollbar-width:none;border-bottom:1px solid var(--line)} .mnav-days::-webkit-scrollbar{display:none} .mnav-days[hidden]{display:none} .mday{flex:0 0 auto;font-family:'Heebo';font-size:13px;font-weight:600; color:var(--gray);background:var(--soft);border:1px solid transparent; border-radius:100px;padding:0 14px;min-height:36px;margin-bottom:8px; cursor:pointer;white-space:nowrap} .mday[aria-selected="true"]{background:var(--city-soft);border-color:var(--city);color:var(--city)} /* שורת הסקציות */ .mnav-main{display:flex} .msec{flex:1 1 0;min-width:0;min-height:56px;border:none;background:none; font-family:'Heebo';cursor:pointer;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;padding:6px 2px; color:var(--gray);border-top:3px solid transparent;margin-top:-1px} .msec .mi{font-size:17px;line-height:1} .msec .ml{font-size:11.5px;font-weight:700;white-space:nowrap} .msec[aria-selected="true"]{color:var(--city);border-top-color:var(--city)} .msec:active{background:var(--soft)} /* מרווח כדי שהפס לא יכסה תוכן */ body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))} body.mnav-days-open{padding-bottom:calc(102px + env(safe-area-inset-bottom,0px))} .mnav{padding-bottom:env(safe-area-inset-bottom,0px)} /* שורת הימים העליונה מיותרת במובייל כשיש פס תחתון */ .daynav{display:none} } /* ============================================================ WOW Sprint — Trip Console · ניווט דו-שכבתי · כרטיס יום · הזמנות מראש · למה בסדר הזה · שכבת אמון ============================================================ */ /* --- A · Trip Console: כותרת חיה --- */ .pchead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:3px} .pchead h2{margin:0} .pcsum{font-size:13px;color:var(--gray);font-weight:600} .pcsum b{color:var(--city)} .pcresult{display:none;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:13px 16px;margin-top:14px} .pcresult[data-on="1"]{display:flex} .pcresult .pcr{display:flex;flex-direction:column;gap:1px} .pcresult .pcr .n{font-size:18px;font-weight:900;color:var(--navy);line-height:1.1} .pcresult .pcr .l{font-size:11.5px;color:var(--gray);font-weight:600} .pcresult .pcr.warn-n .n{color:#8a4b00} /* --- B · ניווט סקציות בדסקטופ --- */ .secnav{background:var(--navy);position:sticky;top:0;z-index:11} .secnav .container{display:flex;max-width:1100px;gap:2px} .dsec{border:none;background:none;font-family:'Heebo';font-size:14.5px;font-weight:700; color:rgba(255,255,255,.72);cursor:pointer;padding:14px 20px; border-bottom:3px solid transparent;display:flex;align-items:center;gap:7px} .dsec:hover{color:#fff;background:rgba(255,255,255,.07)} .dsec[aria-selected="true"]{color:#fff;border-bottom-color:var(--teal-2)} .daynav{top:51px} .daynav[hidden]{display:none} /* --- C · כרטיס סיכום יום --- */ .daycard{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px} .dstat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600; color:var(--navy);background:var(--soft);border-radius:100px;padding:6px 13px} .dstat .i{font-size:13px} /* --- D · מה להזמין מראש --- */ .bookcard{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding:15px 18px;margin-top:16px} .bookcard h3{font-size:14.5px;font-weight:800;color:var(--navy);margin-bottom:3px} .bookcard .sub{font-size:12.5px;color:var(--gray);margin-bottom:11px} .bk{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;margin-bottom:7px} .bk:last-child{margin-bottom:0} .bk .dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px} .bk.req .dot{background:#d1453b} .bk.rec .dot{background:var(--gold)} .bk b{color:var(--ink)} .bk .lv{font-size:11.5px;font-weight:700;margin-inline-start:6px} .bk.req .lv{color:#d1453b} .bk.rec .lv{color:#8a6d00} /* --- E · למה בסדר הזה --- */ .whyblock{display:flex;gap:12px;background:linear-gradient(135deg,#eef7f5,#eef3f8); border:1px solid #cfe6e1;border-radius:var(--r);padding:14px 17px;margin-bottom:18px} .whyblock .ic{flex:0 0 auto;font-size:19px;line-height:1.2} .whyblock .h{font-size:12.5px;font-weight:800;color:var(--teal);margin-bottom:3px} .whyblock p{font-size:14px;color:var(--navy);line-height:1.5} /* --- F · שכבת אמון --- */ .tchip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700; padding:2px 8px;border-radius:100px;margin-inline-start:5px;white-space:nowrap} .tchip.tv{color:#1a6b4f;background:rgba(47,158,143,.14);border:1px solid rgba(47,158,143,.4)} .tchip.tu{color:#8a6d00;background:rgba(254,187,2,.16);border:1px solid rgba(254,187,2,.5)} .tchip.te{color:var(--accent);background:rgba(10,107,224,.09);border:1px solid rgba(10,107,224,.28)} /* אזהרה: סיכון ממשי לגוף או לחופש התנועה — גובה, מוקשים, אזור סגור. חייבת להיראות אחרת מ"לבדוק לפני הנסיעה". */ .tchip.tw{background:rgba(224,85,90,.13);color:#a03038;border-color:rgba(224,85,90,.35);font-weight:700} .tlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--gray); padding:10px 0 0;border-top:1px dashed var(--line);margin-top:14px} .tlegend span{display:inline-flex;align-items:center;gap:5px} @media(max-width:760px){ .secnav{display:none} .daynav{display:none} .pcresult{gap:11px;padding:11px 13px} .pcresult .pcr .n{font-size:16px} } /* ============================================================ אילוץ קשיח מול העדפה — שני מצבים ויזואליים שונים ============================================================ */ /* העדפה: מעומעם, עדיין קריא */ .stop.off-plan,.opt.off-plan{opacity:.45} .stop.off-plan .card::after,.opt.off-plan::after{content:attr(data-why);display:block; margin-top:7px;font-size:11.5px;font-weight:700;color:#8a6d00; background:rgba(254,187,2,.16);border:1px solid rgba(254,187,2,.45); border-radius:100px;padding:3px 10px;width:fit-content} /* אילוץ: חסום. לא מוסתר, אבל חד-משמעי */ .stop.blocked,.opt.blocked{opacity:.55;position:relative} .stop.blocked .card,.opt.blocked{border-color:rgba(209,69,59,.45)!important; background:rgba(209,69,59,.035)} .stop.blocked .card::after,.opt.blocked::after{content:"⛔ " attr(data-why) " — לא מתאים למסלול שלכם"; display:block;margin-top:7px;font-size:11.5px;font-weight:700;color:#a3312a; background:rgba(209,69,59,.1);border:1px solid rgba(209,69,59,.35); border-radius:100px;padding:3px 11px;width:fit-content} .pcresult .pcr.block-n .n{color:#a3312a} /* --- שכבת מדינה: מוצגת פעם אחת, נקראת בזמן רינדור --- */ .ctrywrap{background:var(--soft);border-bottom:1px solid var(--line)} .ctrywrap .container{max-width:1100px;padding:16px 20px} .il.ctry{margin-top:0;border-color:rgba(47,158,143,.35)} .il.ctry .h{justify-content:flex-start;flex-wrap:wrap;gap:8px} .csrc{font-size:11px;font-weight:600;color:var(--gray);background:var(--soft); border-radius:100px;padding:2px 9px} /* ============================================================ MOBILE TEMPLATE SPRINT — 15.08.26 תיקוני responsive ברמת התבנית בלבד. אין שינוי תוכן ואין שינוי דסקטופ. כל הכללים כאן חיים מתחת ל-760px ומטה. ============================================================ */ @media(max-width:760px){ /* 1 · iOS Safari מגדיל אוטומטית את הדף כשמתמקדים בשדה עם גופן < 16px. זה גורם לקפיצת זום שממנה קשה לחזור. 16px מונע את זה לחלוטין. */ input,select,textarea, .seasonbar input[type="date"], .pdates input[type="date"]{font-size:16px} /* 2 · יעדי מגע — מינימום 44px לפי הנחיות הנגישות */ .pchip,.pchip-static,.pdates input[type="date"]{min-height:44px} .mday{min-height:44px} .pclear,.sb-clear{min-height:44px;padding-inline:10px} .book{min-height:52px} /* 3 · שורת הניווט התחתונה: תוויות ארוכות ("ספורט בבנגקוק") גלשו מחוץ לכפתור וגררו גלילה אופקית. עכשיו הן מתקצרות בשלוש נקודות. */ .mnav-main{overflow:hidden} .msec{overflow:hidden} .msec .ml{max-width:100%;overflow:hidden;text-overflow:ellipsis} /* 4 · מניעת גלישה אופקית מטקסט ארוך — כתובות אתרים כמו tdac.immigration.go.th שברו את הפריסה ב-320px */ .il-item>div,.stop .card,.opt,.decision,.warn, .whyblock p,.season-note,.pnote{min-width:0;overflow-wrap:break-word} .opt .top{flex-wrap:wrap} .opt h3{min-width:0;flex:1 1 auto} /* 5 · צמצום ריווח חיצוני — במסך צר כל 20px הם 6% מהרוחב */ .hero .container{padding:24px 16px 20px} .container{padding:0 16px} .ctrywrap .container{padding:14px 16px} .il{padding:14px 15px} .decision{padding:14px 16px} .stop .card{padding:13px 14px} .stop{gap:12px} } @media(max-width:380px){ /* מסכים צרים במיוחד (iPhone SE) — התווית מקבלת עוד מקום */ .msec .ml{font-size:10.5px} .msec .mi{font-size:16px} .stop .time{flex:0 0 36px;height:36px} .stop::before{right:17px} .hero .meta{gap:12px} } /* כל היום במפה — מסלול רב־עצירות בגוגל מפס. בכל רוחב מסך. */ .daymap{display:flex;align-items:center;gap:12px;margin:14px 0 10px;padding:13px 16px; background:var(--soft);border:1px solid var(--line);border-radius:12px; text-decoration:none;color:var(--navy);transition:background .15s,border-color .15s} .daymap:hover{background:#fff;border-color:var(--teal)} .daymap .dm-t{font:700 14.5px Heebo,sans-serif;white-space:nowrap} .daymap .dm-t b{font-weight:800} .daymap .dm-s{flex:1;font:500 12.5px Heebo,sans-serif;color:var(--gray)} .daymap .dm-a{font-weight:800;color:var(--teal);font-size:16px} @media(max-width:760px){ .daymap{flex-wrap:wrap;gap:4px 10px;padding:12px 13px} .daymap .dm-s{flex:1 0 100%;font-size:12px} } /* ---------- שאלות נפוצות ---------- נבנה מהשאילתות שישראלים מקלידים בפועל: "כמה ימים בפראג", "צריך רכב", "מתאים לילדים". כל תשובה נגזרת מהנתונים שבמדריך. */ .faq{padding:34px 0 8px} .faq h2{font:800 21px/1.3 Heebo,sans-serif;margin:0 0 14px;color:#0f2b46} .faq-q{background:#fff;border:1px solid rgba(20,50,80,.11);border-radius:12px;margin:0 0 9px;overflow:hidden} .faq-q>summary{cursor:pointer;list-style:none;padding:13px 16px;font:700 15.5px Heebo,sans-serif;color:#14293f} .faq-q>summary::-webkit-details-marker{display:none} .faq-q>summary::after{content:'+';float:left;color:#5b7a99;font-weight:400} .faq-q[open]>summary::after{content:'−'} .faq-q p{margin:0;padding:0 16px 14px;font:400 14.8px/1.75 Heebo,sans-serif;color:#41556e} /* ---------- התאמת אורך המסלול ---------- הביקוש בחיפוש הוא ל-3/4/5/6/7 ימים, ולנו יש מסלול אחד. במקום עמוד מזויף לכל אורך — אומרים כאן מה להוריד ומה להוסיף. */ .adapt{padding:30px 0 4px} .adapt h2{font:800 21px/1.3 Heebo,sans-serif;margin:0 0 4px;color:#0f2b46} .adapt .sub{font:400 14.5px/1.6 Heebo,sans-serif;color:#5b7a99;margin:0 0 14px} .ad-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; background:#fff;border:1px solid rgba(20,50,80,.11);border-radius:12px;padding:13px 16px;margin:0 0 9px} .ad-row b{font:800 15.5px Heebo,sans-serif;color:#0f2b46;white-space:nowrap} .ad-row span{font:400 14.6px/1.75 Heebo,sans-serif;color:#41556e} @media(max-width:640px){.ad-row{grid-template-columns:1fr;gap:5px}} /* ---------- הצילום בראש המדריך ---------- הגרסה הראשונה שמה את הגלריה ברצועה נפרדת מתחת לכותרת, וזה נתן שני בלוקים במקום אחד: כותרת על רקע ריק, ותמונה שמרחפת מתחתיה. הצילום שייך לראש עצמו — הוא מה שאומר "ניו יורק" לפני שקוראים מילה. ללא תמונות הראש נשאר בדיוק כפי שהיה, ולכן 518 המדריכים האחרים לא זזו. */ .hero.has-gal{position:relative;background:#0f2b46;border-bottom:0;overflow:hidden} .hero.has-gal .gstage{position:absolute;inset:0;z-index:0} .hero.has-gal .gshot{margin:0;position:absolute;inset:0} .hero.has-gal .gshot img{width:100%;height:100%;object-fit:cover;display:block} /* right/left מפורש ולא inset-inline: הדף כולו RTL, והתגית הלוגית הייתה מציבה את הקרדיט ואת הפקדים באותו צד. */ .hero.has-gal .gshot figcaption{position:absolute;bottom:6px;right:14px; font-size:10px;color:rgba(255,255,255,.55);z-index:3} .hero.has-gal::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(15,43,70,.34) 0%,rgba(15,43,70,.30) 38%,rgba(15,43,70,.82) 100%)} .hero.has-gal .container{position:relative;z-index:2;padding:130px 20px 26px} .hero.has-gal .eyebrow{color:rgba(255,255,255,.8)} .hero.has-gal h1{color:#fff} .hero.has-gal p{color:rgba(255,255,255,.9)} .gnav{position:absolute;z-index:3;bottom:16px;left:20px; display:flex;align-items:center;gap:12px} .garr{background:rgba(11,33,54,.42);border:0;color:rgba(255,255,255,.9); font-size:20px;line-height:1;cursor:pointer;padding:2px 9px 5px; border-radius:100px;font-family:inherit} .garr:hover{background:rgba(11,33,54,.7)} .gdots{display:flex;gap:7px} .gdot{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.38)} .gdot.on{background:#fff} .gdot:focus-visible,.garr:focus-visible{outline:2px solid #38b3a2;outline-offset:3px} /* JS פעיל — רק הפעילה מוצגת. בלי JS כולן גלויות בערימה, והעליונה נראית. תצוגה תקינה ולא שבורה. */ .js-gal .hero.has-gal .gshot{opacity:0;visibility:hidden;transition:opacity .2s} .js-gal .hero.has-gal .gshot.on{opacity:1;visibility:visible} @media(max-width:640px){ .hero.has-gal .container{padding:96px 16px 22px} .gnav{bottom:12px;left:14px} } /* השם הלועזי מתחת לכותרת. dir=ltr מפורש כי הדף RTL, ו-translate=no כדי שמתרגם הדפדפן לא יתרגם שם מקום בחזרה לעברית. */ .hero .h1en{font-size:clamp(13px,2.2vw,16px);font-weight:600;letter-spacing:.01em; color:var(--gray);margin:-4px 0 8px;opacity:.85} .hero.has-gal .h1en{color:rgba(255,255,255,.72)} /* ---------- קיזוז לפסים הדביקים ---------- .secnav יושב ב-top:0 ו-.daynav ב-top:51px, ויחד הם מכסים כ-98px בראש החלון. כל קפיצה לעוגן — לחיצה על טאב יום, על צ׳יפ אורך מסלול, או על עוגן #ad-N — הנחיתה בדיוק מתחתיהם, וכותרת היום נחתכה מלמעלה. scroll-margin-top פותר את זה בלי JS: הדפדפן משאיר את המרווח בעצמו. הערך גדול ב-8px מגובה הפסים, כדי שהכותרת לא תיצמד להם. במובייל הפסים אינם קיימים (.secnav ו-.daynav מוסתרים מתחת ל-760px), ולכן הקיזוז שם קטן — רק כדי שהכותרת לא תיגע בקצה. */ .panel .p-head, .dayhead, .adapt h2, .faq h2, .ad-row, [id^="ad-"]{scroll-margin-top:106px} h2[id],section[id],div[id].panel{scroll-margin-top:106px} html{scroll-padding-top:106px} @media(max-width:760px){ .panel .p-head,.dayhead,.adapt h2,.faq h2,.ad-row,[id^="ad-"], h2[id],section[id],div[id].panel{scroll-margin-top:16px} html{scroll-padding-top:16px} } /* ---------- שורת אחריות תוכן ---------- מופיעה אחרי ה-FAQ בכל מדריך. שלושה דברים שלא היו באתר עד כאן: מי אחראי לתוכן, מתי נבדק המידע המשתנה, ולאן ללכת כדי לראות איך. התאריך מגיע מ-data/cfacts/.js ולא מזמן הבנייה. אין למדריך תאריך בדיקה משלו ולכן לא נכתב לו אחד — מוצג תאריך שכבת המדינה, שהיא זו שנושאת ויזה, אזהרת מסע ותנאי כניסה. */ .byline{border-top:1px solid var(--line);background:var(--soft); padding:20px 0 24px;margin-top:26px} .byline .container{max-width:1100px} .byline .bl-who{font-size:14px;color:var(--navy);font-weight:600} .byline .bl-who b{font-weight:800} .byline .bl-date{display:block;font-size:13px;color:var(--gray);margin-top:5px} .byline .bl-how{margin-top:9px;font-size:13px} .byline .bl-how a{color:var(--teal);font-weight:700;text-decoration:none} .byline .bl-how a:hover{text-decoration:underline} @media(max-width:600px){.byline{padding:16px 0 20px}}