/* ============================================================ K-Tours · מערכת העיצוב המשותפת ============================================================ שני מצבים, לפי השעה המקומית במכשיר של הגולש: יום (06:00–18:00) — תכלת, טורקיז, אור שמש, לבן לילה (18:00–06:00) — נייבי עמוק וזהב הבחירה נעשית ב-site.js ונכתבת כ-data-theme על . הגולש יכול לעקוף אותה בכפתור, והבחירה נשמרת. טיפוגרפיה: Heebo לעברית, Inter ללטינית — הזיווג ה"מודרני ומקצועי" מתוך מערכת העיצוב הישראלית. ============================================================ */ :root{ --font-he: Heebo, 'Noto Sans Hebrew', system-ui, sans-serif; --font-lat: Inter, system-ui, sans-serif; --r: 16px; --r-lg: 24px; --pad: clamp(20px, 5vw, 40px); /* התפר בין שני מקטעים היה 244px בדסקטופ, בזמן שהמרווח *בתוך* מקטע — מהכותרת לתוכן — היה 60px. יחס של פי ארבע גורם לכל מקטע להיראות כמו שקופית נפרדת ולא כמו חלק ממסמך אחד, ומייצר חללים ריקים באמצע העמוד. שני המרווחים מוגדרים עכשיו כזוג. */ --gap: clamp(48px, 6.4vw, 88px); /* ריפוד אנכי של מקטע */ --gap-2: clamp(28px, 3.4vw, 48px); /* מכותרת המקטע לתוכן */ --max: 1180px; --ease: cubic-bezier(.22,.61,.36,1); --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .3 1.9.6 2.8a2 2 0 01-.4 2.1L8 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.4c.9.3 1.8.5 2.8.6a2 2 0 011.7 2z'/%3E%3C/svg%3E"); } /* ---------- לילה ---------- */ :root, html[data-theme="night"]{ --bg: #060F1C; --surface: #0B1A2B; --raise: #102A42; --tx: #ECF2F8; --tx-2: #9CB3C9; --tx-3: #6B839B; --accent: #F0C88A; /* זהב */ --accent-2:#D3A868; --accent-3:#A8845C; --on-accent:#2A1B08; --line: rgba(240,200,138,.16); --line-2: rgba(236,242,248,.10); --shadow: 0 40px 90px -40px rgba(0,0,0,.9); --glow: 0 0 60px -12px rgba(240,200,138,.35); --field: rgba(6,15,28,.55); /* רקע שדות קלט */ --soft-1: rgba(236,242,248,.04); /* משטח מורם עדין */ --soft-2: rgba(236,242,248,.10); /* שמות ותיקים, נשמרים כדי שסגנונות ברמת העמוד ימשיכו לעבוד */ --ink:#060F1C; --ink-2:#0B1A2B; --ink-3:#102A42; --ink-4:#17384F; --gold:#F0C88A; --gold-2:#D3A868; --gold-3:#A8845C; /* ההירו נמס אל תוך רקע העמוד: הכהות גדלה כלפי מטה ונוחתת בדיוק על --bg, כך שאין מדרגה בין התמונה למקטע שאחריה. */ --scrim: linear-gradient(to bottom, rgba(6,15,28,.55) 0%, rgba(6,15,28,.16) 38%, rgba(6,15,28,.55) 62%, rgba(6,15,28,.86) 76%, #060F1C 86%, #060F1C 100%); --hero-tx: #FFFFFF; --hero-sub: #D3E0EC; --hero-eyebrow:#FFE6BC; --hero-em: #F0C88A; --hero-mark: #F0C88A; --hero-line: rgba(255,255,255,.18); --hero-shadow: 0 4px 40px rgba(0,20,40,.55); --hero-shadow-sm: 0 2px 20px rgba(0,20,40,.55); /* צבע השגיאה היה מוטבע בשלושה עמודים כ-#F0928A. בערכת הלילה הוא תקין (8.4:1), אבל במצב יום הוא ירד ל-2.1:1 — כלומר ההודעה היחידה שהמשתמש *חייב* לקרוא הייתה הכי קשה לקריאה בעמוד. */ /* וגם בלילה הוא היה בעייתי מסיבה אחרת: #F0928A ו-#F0C88A הם אותה משפחת גוון באותה בהירות, ולכן הודעת השגיאה נקראה כזהב דקורטיבי ולא כתקלה. אדום-אלמוג שאינו גוון חם של הזהב. */ --danger: #FF6B5A; /* נקודת האור בגרדיאנט הזהוב. היה מוטבע כ-#FCE0B4 בארבעה מקומות, ולכן במצב יום נוצר כפתור בגוון קרם עם טקסט לבן — 1.3:1. */ --accent-hi:#FCE0B4; color-scheme: dark; } /* ---------- יום ---------- */ html[data-theme="day"]{ --bg: #EDF7FA; --surface: #FFFFFF; --raise: #FFFFFF; --tx: #08283F; --tx-2: #4A6B82; --tx-3: #546F82; /* היה #7A97AB — 2.82:1, מתחת ל-AA */ --danger: #B3261E; /* אדום כהה, 6.3:1 על רקע יום */ --accent: #0A7A8E; /* טורקיז. היה #0E8FA6 — 3.5:1 בקישורים */ --accent-2:#0A7A8E; --accent-3:#0A6577; --on-accent:#FFFFFF; --line: rgba(14,143,166,.24); --line-2: rgba(8,40,63,.11); --shadow: 0 30px 70px -38px rgba(10,60,86,.42); --glow: 0 14px 34px -14px rgba(14,143,166,.5); --field: #FFFFFF; --soft-1: #F3FAFC; --soft-2: #E4F2F7; --ink:#EDF7FA; --ink-2:#FFFFFF; --ink-3:#FFFFFF; --ink-4:#E4F2F7; --gold:#0E8FA6; --gold-2:#0A7A8E; --gold-3:#0A6577; /* ביום לא מכהים אלא מלבינים. טקסט כהה על אובך בהיר קריא יותר מעל תמונה מוארת, והתחתית נוחתת על אותו --bg שממשיך בהמשך העמוד — ובלי זה נוצרה בדיוק המדרגה ללבן שהפריעה. */ /* ההלבנה הייתה מתחילה כבר ב-55% ובעוצמה של .44, ובלעה את הים ואת הצבע של התצלום — נשאר חלב. עכשיו התמונה נשארת נקייה עד קרוב לשני שליש, וההמסה אל צבע העמוד קורית מהר בתחתית. */ --scrim: linear-gradient(to bottom, rgba(4,32,52,.34) 0%, rgba(4,32,52,.04) 20%, rgba(237,247,250,0) 34%, rgba(237,247,250,.08) 60%, rgba(237,247,250,.46) 76%,rgba(237,247,250,.86) 85%, #EDF7FA 92%, #EDF7FA 100%); --hero-tx: #08283F; --hero-sub: #2C5C79; --hero-eyebrow:#0A6577; --hero-em: #0A6577; --hero-mark: #0E8FA6; --hero-line: rgba(8,40,63,.17); --hero-shadow: none; --hero-shadow-sm: none; /* גזור מהטורקיז עצמו. קודם רצו כאן שלושה טורקיזים לא קשורים (#0A7A8E, #3FC6D8, #45CBDC), כלומר לערכת היום לא היה צבע מותג. */ --accent-hi:#3FA9BC; color-scheme: light; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;background:var(--bg);color:var(--tx); /* 1.72 הוא ערך של סריף לטיני. ל-Heebo יש גובה-x גדול ולעברית אין צורות יורדות, ולכן שורות רחוקות כל כך לא מתגבשות לפסקה. */ font-family:var(--font-he);font-weight:400;font-size:16.5px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease); } h1,h2,h3,h4{font-family:var(--font-he);font-weight:700;line-height:1.14;margin:0; letter-spacing:-.022em} h1{font-size:clamp(35px,6vw,72px);font-weight:800} /* balance מונע מילה בודדת בשורה אחרונה — "מכם" ב״שלושה צעדים, בערך שתי דקות מכם״ ועוד שלוש כותרות. */ h2{font-size:clamp(26px,3.8vw,44px);text-wrap:balance} h3{font-size:clamp(18px,1.9vw,22px);line-height:1.38;font-weight:700} p{margin:0 0 16px} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-2)} img{max-width:100%;display:block} .num{font-family:var(--font-lat);font-variant-numeric:tabular-nums} .eyebrow{font-family:var(--font-lat);font-weight:600;letter-spacing:.22em; text-transform:uppercase;font-size:11.5px;color:var(--accent-3); display:block;margin-bottom:15px} /* אותו כלל הופעל גם על עברית — "הרכב הנוסעים", "ניווט", "יצירת קשר" — ואז שלוש תקלות נערמות: העברית נופלת לפונט לטיני ולכן לא תואמת לשאר העמוד, uppercase לא עושה כלום, ומרווח של .22em בין אותיות עבריות שובר את לכידות המילה. שם המחלקה מסמן איזו גרסה זו. */ .eyebrow.he,.foot-col h4{font-family:var(--font-he);letter-spacing:.02em; text-transform:none;font-size:12.5px;font-weight:700} .gold{color:var(--accent)} .muted{color:var(--tx-2)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:var(--on-accent)} /* ---------- פריסה ---------- */ .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} .section{padding-block:var(--gap);position:relative} /* נחיתה על עוגן. scroll-padding-top מפצה על הכותרת הקבועה, ואז מתווסף לו הריפוד העליון של המקטע עצמו — יחד 218px, שרובם אזור ריק שדוחף את הכותרת אל מחוץ למסך הראשון. הערך השלילי כאן מקזז את הריפוד, כך שהכותרת נוחתת ממש מתחת לכותרת העמוד. */ .section{scroll-margin-top:calc(26px - var(--gap))} .section-head{max-width:660px;margin-bottom:var(--gap-2)} .section-head p{color:var(--tx-2);font-size:17px;margin:16px 0 0} /* ---------- כותרת ---------- */ .site-header{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;padding-block:14px; border-block-end:1px solid transparent; transition:background .35s var(--ease),backdrop-filter .35s,border-color .35s,padding .35s} .site-header.solid{ background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(16px) saturate(150%); border-block-end-color:var(--line-2);padding-block:8px} .hdr{display:flex;align-items:center;gap:clamp(14px,2.6vw,36px)} .brand{display:flex;align-items:center;flex:none} .brand img{height:clamp(50px,6vw,70px);width:auto;transition:height .35s var(--ease)} .site-header.solid .brand img{height:clamp(42px,4.6vw,56px)} /* ---------- הסימן ---------- קודם היו כאן שני קבצים: logo.png המקורי, ו-logo-light.png שהוא גרסה מולבנת שלו, שהוצגה מעל ההירו ובערכת הלילה. כלומר במחצית מהמצבים המבקר ראה סימן בצבע אחר מזה של המותג. עכשיו מוצג תמיד הקובץ המקורי, ומה שמשתנה הוא *הרקע* שמאחוריו: על רקע כהה מונח לוח בהיר עדין שמפריד בין הסימן לרקע, בלי לגעת בצבע של הסימן עצמו. */ /* בלי לוח לבן מאחוריו: פנים ה-K הוא ממילא שמיים וים בהירים, ולכן הסימן נקרא היטב גם על נייבי. מה שכן נחוץ מעל תצלום הוא צל רך, שמפריד אותו מרקע בהיר בלי לגעת בצבעים. */ html[data-theme="night"] .brand img, .site-header:not(.solid) .brand img{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))} .nav{display:flex;align-items:center;gap:clamp(12px,2vw,27px);margin-inline-start:auto} .nav a{color:var(--tx);font-size:14.5px;font-weight:500;position:relative; padding-block:6px;white-space:nowrap} .nav a::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:0; height:1.5px;background:var(--accent);transition:width .3s var(--ease)} .nav a:hover{color:var(--accent)} .nav a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:9px;flex:none} /* "בקשת הצעה" מופיע גם ככפתור הזהוב. בדסקטופ מציגים רק אותו, ובנייד רק את הקישור — כי שם הכפתור מוסתר. */ .nav a[data-nav="request"]{display:none} /* מעל ההירו יושבת תמונה, ולכן פריטי הכותרת מקבלים צבע קבוע — אבל לא לבן בשתי הערכות. בערכת היום התצלום הוא שמיים בהירים וים תכלת, ולבן עליהם הוא לבן על לבן: ההמבורגר נעלם. בלילה התצלום כהה ולבן הוא הצבע הנכון. */ /* background-color מוחל רק על פסי ההמבורגר, שהם אלמנטים מצוירים. בגרסה קודמת הוא נכלל גם ב-.theme-btn, ומכיוון שהעליתי כאן את הספציפיות הוא גבר על ה-background-color:transparent שמתחת — והכפתור הפך לריבוע לבן מלא בלי אייקון. */ html[data-theme="night"] .site-header:not(.solid) .nav a, html[data-theme="night"] .site-header:not(.solid) .theme-btn{color:#fff} html[data-theme="night"] .site-header:not(.solid) .burger span, html[data-theme="night"] .site-header:not(.solid) .burger span::before, html[data-theme="night"] .site-header:not(.solid) .burger span::after{ background-color:#fff} html[data-theme="day"] .site-header:not(.solid) .nav a, html[data-theme="day"] .site-header:not(.solid) .theme-btn{color:#08283F} html[data-theme="day"] .site-header:not(.solid) .burger span, html[data-theme="day"] .site-header:not(.solid) .burger span::before, html[data-theme="day"] .site-header:not(.solid) .burger span::after{ background-color:#08283F} .site-header:not(.solid) .nav a, .site-header:not(.solid) .theme-btn{background-color:transparent} html[data-theme="night"] .site-header:not(.solid) .nav a, html[data-theme="night"] .site-header:not(.solid) .theme-btn{ text-shadow:0 1px 12px rgba(0,20,40,.55)} html[data-theme="night"] .site-header:not(.solid) .theme-btn, html[data-theme="night"] .site-header:not(.solid) .burger{ border-color:rgba(255,255,255,.34)} /* ביום: דיו כהה על לוח בהיר שקוף למחצה, כדי שהפקדים ייקראו גם על שמיים בהירים וגם על ים תכלת. */ html[data-theme="day"] .site-header:not(.solid) .theme-btn, html[data-theme="day"] .site-header:not(.solid) .burger{ border-color:rgba(8,40,63,.22);background-color:rgba(255,255,255,.62); backdrop-filter:blur(6px)} .site-header:not(.solid) .nav a:hover, .site-header:not(.solid) .theme-btn:hover{color:var(--accent)} /* מתג יום/לילה */ .theme-btn{width:42px;height:42px;border-radius:12px;flex:none;cursor:pointer; background:transparent;border:1px solid var(--line-2);color:var(--tx); display:flex;align-items:center;justify-content:center; transition:border-color .25s,color .25s,background .25s} .theme-btn:hover{border-color:var(--accent);color:var(--accent)} .theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .theme-btn .i-sun{display:none} html[data-theme="night"] .theme-btn .i-sun{display:block} html[data-theme="night"] .theme-btn .i-moon{display:none} .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:12px; width:42px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none} .burger span{display:block;width:18px;height:1.6px;background:var(--tx);position:relative} .burger span::before,.burger span::after{content:'';position:absolute;inset-inline-start:0; width:18px;height:1.6px;background:var(--tx)} .burger span::before{inset-block-start:-6px} .burger span::after{inset-block-start:6px} /* ---------- סגירת התפריט ---------- כשהמגירה נפתחה, הכפתור נשאר שלושה קווים זהים ולא היה שום דבר אחר ללחוץ עליו: אין X, אין רקע מסביב, והכפתורים שלידו נבלעים מתחת למגירה. מי שפתח פשוט לא ידע איך לצאת. */ .burger span,.burger span::before,.burger span::after{ transition:transform .28s var(--ease), opacity .18s} .nav.open ~ .nav-cta .burger span, .nav-cta .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} /* הכפתור נשאר מעל המגירה ונגיש למגע גם כשהיא פתוחה */ .burger{position:relative;z-index:3} /* רקע כהה שסוגר בלחיצה — הדרך שכל אחד מנסה קודם */ .nav-scrim{ position:fixed;inset:0;z-index:1;border:0;padding:0; background:rgba(3,8,15,.55);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .28s var(--ease); } .nav-scrim.on{opacity:1;pointer-events:auto} /* תחתית מגירת הנייד. נבנית ב-site.js ומוצגת רק בתוך המגירה. */ .nav-foot{display:none} /* ---------- כפתורים ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-he);font-size:15.5px;font-weight:700;line-height:1; padding:16px 30px;border-radius:12px;border:1px solid transparent;cursor:pointer; white-space:nowrap;text-decoration:none; transition:transform .2s var(--ease),background .25s,border-color .25s,box-shadow .25s} .btn:active{transform:translateY(1px)} .btn-gold{background:var(--accent);color:var(--on-accent);box-shadow:var(--glow)} html[data-theme="night"] .btn-gold{ background:linear-gradient(150deg,var(--accent-hi),var(--accent) 45%,var(--accent-2))} .btn-gold:hover{transform:translateY(-2px);background:var(--accent-2);color:var(--on-accent)} .btn-line{background:transparent;border-color:var(--line-2);color:var(--tx)} .btn-line:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .btn-sm{padding:11px 19px;font-size:14px;border-radius:10px} .btn svg{width:18px;height:18px;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center} /* ---------- יצירות / תמונות ---------- */ .scene{position:absolute;inset:0;overflow:hidden;background:var(--surface)} .scene svg{width:100%;height:100%;display:block} .scene.is-photo{background-size:cover;background-position:center; animation:kenburns 32s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}} @keyframes kt-shimmer{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.6);opacity:.5}} @keyframes kt-breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} .kt-glint{transform-box:fill-box;transform-origin:center;animation:kt-shimmer 7s ease-in-out infinite} .kt-halo{transform-box:fill-box;transform-origin:center;animation:kt-breathe 11s ease-in-out infinite} /* נתיבי הטיסה — האלמנט החתימתי, נלקח מהשובל שמעל ה-K בלוגו. הקו נמתח לאט, נקודת האור רצה בקצהו, ואז שניהם נמוגים ומתחילים מחדש. ההנפשה מוגדרת כאן; המסלולים עצמם ב-scenes.js. */ .kt-routes{opacity:.6} .kt-route{stroke-dasharray:1;stroke-dashoffset:1; animation:kt-draw linear infinite} .kt-jet{animation:kt-jet linear infinite} /* המטוס נעלם ב-66% והשובל המשיך להיראות עד 78%, כלומר בכל סיבוב היו 12% שבהם יש קו בשמיים בלי שום דבר שמצייר אותו — ומי שתפס את תחילת הלולאה ראה שובל ואחריו מטוס. עכשיו שניהם נדלקים ונכבים באותם אחוזים בדיוק, כך שהשובל אף פעם לא קיים לבדו. */ @keyframes kt-draw{ 0% {stroke-dashoffset:1; opacity:0} 4% { opacity:0} 9% { opacity:.7} 55% {stroke-dashoffset:.38; opacity:.7} 74% {stroke-dashoffset:.38; opacity:0} 100% {stroke-dashoffset:.38; opacity:0} } @keyframes kt-jet{ 0%{opacity:0} 3%{opacity:1} 55%{opacity:1} 74%{opacity:0} 100%{opacity:0} } /* השובל בשכבת הרקע נמשך עד 0.62 בזמן שהמטוס הגיע כבר ל-0.66 — הפרש שנראה על המסך כמרווח של כ-50px בין זנב המטוס לקצה הקו, כאילו הקו שייך למשהו אחר. כאן הוא מגיע בדיוק לאותה נקודה ובאותו תזמון שבהם נמצא המטוס. */ /* המטוס נדלק ראשון והשובל מגיע אחריו. קודם שניהם עלו יחד, ומכיוון שהקו כבר באורך של עשרות פיקסלים ברגע שהוא מופיע בעוד שהמטוס הוא נקודה, העין קלטה קודם את הקו. */ @keyframes pb-draw{ 0% {stroke-dashoffset:1; opacity:0} 4% { opacity:0} 9% { opacity:.62} 60% {stroke-dashoffset:.28; opacity:.62} 76% {stroke-dashoffset:.28; opacity:0} 100% {stroke-dashoffset:.28; opacity:0} } @keyframes pb-jet{ 0%{opacity:0} 3%{opacity:1} 60%{opacity:1} 76%{opacity:0} 100%{opacity:0} } /* ---------- הירו ---------- התמונה לא נגמרת בקו — היא נמסה. שתי מסכות שרצות בזו אחר זו, וזה הסדר שחשוב: התצלום נעלם עד 88%, ורק אחר כך מתחילה שכבת הצבע להתפוגג. אם שתיהן היו מתפוגגות יחד, התצלום היה מבצבץ שוב באמצע הדעיכה כי הכהות שמעליו נחלשת מהר יותר ממנו. בסדר הזה הכל יורד באופן מונוטוני: תצלום → צבע העמוד → שכבת הזוהר הקבועה שממשיכה למטה. */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; padding-block:150px clamp(66px,11vh,124px);overflow:hidden} .hero .scene{ -webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 88%); mask-image:linear-gradient(to bottom,#000 66%,transparent 88%)} .hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:var(--scrim); -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%); mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)} .hero .wrap{position:relative;z-index:2;width:100%} /* ---------- הלוח שמתחת לכותרת ---------- בשתי התמונות השמש יושבת במרכז-ימין, והטקסט מיושר לימין — כלומר כל שורה נוחתת בדיוק על הפיקסלים הבהירים ביותר בפריים. "אנחנו מגשימים", שתי המילים החשובות באתר, נמדדו ב-1.89:1 בטלפון. --hero-shadow הוא טשטוש של 40px ולכן לא מוסיף ניגודיות קצה, וביום הוא כבוי לגמרי. לוח רך מתחת לטקסט מייצב את הרקע בלי לחתוך את התמונה בקו. */ /* הלוח יושב על ההירו עצמו ולא על .wrap. על .wrap הקופסה מסתיימת ברוחב התוכן, והגרדיאנט נחתך באמצע הדעיכה — כלומר נוצר מלבן בהיר עם קצה חד על גבי התצלום. ההירו הוא ברוחב מלא, ולכן אין דופן שאפשר להיחתך עליה. */ .hero::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(54% 46% at 70% 56%, rgba(6,15,28,.6) 0%, rgba(6,15,28,.34) 46%, transparent 78%)} html[data-theme="day"] .hero::before{ background:radial-gradient(54% 46% at 70% 56%, rgba(237,247,250,.8) 0%, rgba(237,247,250,.4) 46%, transparent 78%)} .hero .eyebrow{color:var(--hero-eyebrow);text-shadow:var(--hero-shadow-sm)} .hero h1{max-width:15ch;color:var(--hero-tx);text-shadow:var(--hero-shadow)} .hero h1 em{font-style:normal;color:var(--hero-em);display:block} .hero .lead{max-width:52ch;font-size:clamp(16px,1.75vw,19.5px);color:var(--hero-sub); margin:24px 0 32px;text-shadow:var(--hero-shadow-sm)} .hero-marks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;padding-top:25px; border-top:1px solid var(--hero-line)} .hero-marks span{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--hero-sub)} .hero-marks svg{width:15px;height:15px;flex:none;fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round;stroke:var(--hero-mark)} html[data-theme="night"] .hero .btn-line{border-color:rgba(255,255,255,.4);color:#fff} html[data-theme="night"] .hero .btn-line:hover{border-color:#fff; background:rgba(255,255,255,.1);color:#fff} /* ---------- כרטיסים ---------- */ /* המרווח בין כרטיסים היה קטן ב-32%–43% מהריפוד שבתוך כרטיס, ולכן שישה כרטיסים נקראו כגוש אחד במקום כשישה עצמים. */ .grid{display:grid;gap:clamp(16px,2.2vw,28px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} .card{background:var(--raise);border:1px solid var(--line-2);border-radius:var(--r); padding:clamp(20px,2.2vw,26px);position:relative;overflow:hidden; transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s} html[data-theme="night"] .card{ background:linear-gradient(165deg,var(--raise),var(--surface))} html[data-theme="day"] .card{box-shadow:0 2px 14px -8px rgba(10,60,86,.3)} .card:hover{border-color:var(--line);transform:translateY(-4px)} html[data-theme="day"] .card:hover{box-shadow:0 22px 44px -26px rgba(10,60,86,.45)} .card h3{margin-bottom:9px} .card p{color:var(--tx-2);font-size:15px;margin:0} .card-ico{width:44px;height:44px;border-radius:12px;margin-bottom:17px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--line)} .card-ico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ---------- צעדים ---------- */ .steps{counter-reset:s;display:grid;gap:clamp(18px,2.3vw,27px)} .step{position:relative;padding-inline-start:74px;counter-increment:s} .step::before{content:counter(s);position:absolute;inset-inline-start:0;inset-block-start:-3px; width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--font-lat);font-size:18px;font-weight:600;color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line)} /* בלי תקרה השורה הגיעה ל-108 תווים בדסקטופ. הטווח הנוח הוא 45–75. */ .step p{color:var(--tx-2);font-size:15px;margin:7px 0 0;max-width:64ch} /* ---------- שאלות ותשובות ---------- */ /* בלי תקרה, הסימן נצמד לקצה השמאלי של 1100px והשאלה לקצה הימני — 876px של ריק ביניהם, ושום דבר לא מקשר בין השניים. */ .faq-list{border-top:1px solid var(--line-2);max-width:760px} .faq-list details{border-bottom:1px solid var(--line-2)} .faq-list summary{cursor:pointer;list-style:none;padding:23px 0;padding-inline-end:44px; position:relative;font-size:17px;font-weight:600;color:var(--tx);transition:color .2s} .faq-list summary::-webkit-details-marker{display:none} .faq-list summary:hover{color:var(--accent)} /* בעברית border-inline-end הוא הגבול ה*שמאלי*. שמאל+תחתון בסיבוב 45° מציירים "<", כלומר חץ חזרה — הכיוון ההפוך מ"פתחו אותי". הקוד נכתב ונבדק ב-LTR ומעולם לא נבדק שוב אחרי המעבר ל-RTL. */ .faq-list summary::after{content:'';position:absolute;inset-inline-end:6px;inset-block-start:29px; width:10px;height:10px;border-inline-start:1.9px solid var(--accent); border-block-end:1.9px solid var(--accent);transform:rotate(-45deg); transition:transform .3s var(--ease)} .faq-list details[open] summary::after{transform:rotate(135deg)} .faq-list details p{color:var(--tx-2);font-size:15px;padding-block-end:23px;margin:0;max-width:74ch} /* ---------- רצועת סיום ---------- */ /* אותו עיקרון של ההירו: הרצועה נכנסת ויוצאת בהדרגה במקום להיחתך בקו. שתי השכבות מקבלות את אותה מסכה כדי שיישארו מסונכרנות. */ .band{position:relative;overflow:hidden} .band .scene, .band::after{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)} .band .scene{opacity:.55} .band::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--bg) 6%,color-mix(in srgb,var(--bg) 74%,transparent) 56%, color-mix(in srgb,var(--bg) 46%,transparent))} .band .wrap{position:relative;z-index:2} /* ---------- פוטר ---------- */ .site-footer{background:var(--surface);border-top:1px solid var(--line-2); padding-block:var(--gap) 24px} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px;padding-bottom:36px; border-bottom:1px solid var(--line-2)} .foot-top img{height:62px;width:auto;margin-bottom:15px} .foot-top .brand-mark{display:inline-block;margin-bottom:15px} .foot-top .brand-mark img{height:62px;width:auto;margin:0} html[data-theme="night"] .foot-top .brand-mark img{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))} .foot-top p{color:var(--tx-2);font-size:14.5px;max-width:34ch} .foot-col h4{color:var(--tx-3);margin-bottom:15px} .foot-col a,.foot-col span{display:block;color:var(--tx-2);font-size:14.5px; margin-bottom:9px;transition:color .2s} .foot-col a:hover{color:var(--accent)} .foot-bot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between; align-items:center;padding-top:23px;font-size:12.5px;color:var(--tx-3)} .foot-bot nav{display:flex;flex-wrap:wrap;gap:8px 20px} .foot-bot a{color:var(--tx-3)} .foot-bot a:hover{color:var(--accent)} /* ---------- וואטסאפ צף ---------- */ .wa-float{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:90; width:56px;height:56px;border-radius:50%;background:#25D366; display:flex;align-items:center;justify-content:center; box-shadow:0 14px 34px -10px rgba(0,0,0,.5);transition:transform .25s var(--ease)} .wa-float:hover{transform:scale(1.09)} /* בטלפון הכפתור הזה יושב בדיוק מעל "המשך" ומעל כפתור השליחה בוואטסאפ שבמסך הכישלון — כלומר לחיצה שמכוונת להעביר את הליד פותחת במקומה צ׳אט ריק, והפרטים אובדים. הרחקה כלפי מעלה, ומרווח בתחתית הגוף כדי ששום פקד לא יסתתר מתחתיו. */ @media (max-width:560px){ /* הפעולות בטופס יושבות עכשיו בפס דביק, ולכן הבועה חוזרת לפינה ובמקום ריווח על שני אלמנטים בודדים יש מרווח לכל העמודים — קודם היא נמצאה חופפת פסקה בדף הבית וכרטיס בעמוד המלונות. */ .wa-float{inset-block-end:calc(16px + env(safe-area-inset-bottom))} body{padding-block-end:84px} .done{padding-block-end:24px} } .wa-float svg{width:31px;height:31px;fill:#fff} /* מטרות מגע. צ׳יפים, מונים ותיבות סימון היו 38px ו-18px — מתחת למינימום המקובל של 44px, ודווקא תיבות הסימון (תאריכים גמישים, עדיין לא החלטנו, אישור יצירת קשר) הן שפותחות את המסלולים המשתלמים ביותר. */ @media (pointer:coarse){ .chip,.opt{min-height:44px} .pm button{width:44px;height:44px} .check{min-height:44px;display:flex;align-items:center;gap:10px} .check input[type=checkbox]{width:22px;height:22px;flex:0 0 auto} /* מדידה בטלפון: כפתור "בקשת הצעה" בכותרת 34px גובה, קישורי הפוטר 25px ו-22px, "הוספת חדר" 25px. הכפתור בכותרת הוא בדיוק זה שהערה ב-CSS מסבירה שהושאר בנייד *כי הוא חשוב*. */ .nav-cta .btn{padding-block:13px;font-size:14px} .theme-btn,.burger{width:44px;height:44px} .foot-col a{padding-block:9px;margin-bottom:0} .foot-bot a{padding-block:8px} .link-btn{padding:11px 12px} } /* תיבת סימון מקורית של הדפדפן היא ~18px, והיא הפקד היחיד שחוסם שליחה. גם בעכבר היא צריכה להיראות כחלק מהטופס. */ .check input[type=checkbox]{appearance:none;-webkit-appearance:none; width:22px;height:22px;border-radius:6px;flex:none;cursor:pointer; border:1.5px solid var(--line-2);background:var(--field); transition:background .2s,border-color .2s} /* הוי מצויר כתמונת רקע ולא כ-::after: פסאודו-אלמנטים על נתמכים באופן חלקי, ותיבה שמתמלאת בלי סימן היא מצב מבלבל. */ .check input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-7' fill='none' stroke='%232A1B08' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:15px;background-position:center;background-repeat:no-repeat} /* בלילה הסימן כהה על זהב, ביום לבן על טורקיז — כמו --on-accent */ html[data-theme="day"] .check input[type=checkbox]:checked{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.6l3 3 6.2-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* ספרות בשדה RTL מתהפכות חזותית כשיש בהן מקפים, והסמן מתחיל בצד הלא נכון. הכיוון לטיני, היישור נשאר ימני כמו שאר הטופס. */ input[type=tel],input[type=email],input[type=number],input[inputmode=numeric]{ direction:ltr;text-align:right} /* ---------- רקע העמוד ---------- מתחת להירו העמוד היה שטוח והמעבר הרגיש כמו נפילה. השכבה הקבועה הזאת יושבת מאחורי כל התוכן ונותנת המשכיות. כתמי האור הם גרדיאנטים רדיאליים ולא filter:blur — גרדיאנט כבר רך מטבעו, ומסנן טשטוש על אלמנט בגודל חצי מסך יקר מאוד בנייד. */ .page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; opacity:.85;transition:opacity .5s var(--ease)} html[data-theme="day"] .page-bg{opacity:.72} .pb-glow{position:absolute;border-radius:50%;will-change:transform} .pb-1{width:74vw;height:74vw;inset-block-start:6%;inset-inline-end:-22%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent) 0%,transparent 62%); animation:pb-a 82s ease-in-out infinite alternate} .pb-2{width:62vw;height:62vw;inset-block-end:-16%;inset-inline-start:-18%; background:radial-gradient(circle,color-mix(in srgb,var(--accent-hi) 22%,transparent) 0%,transparent 64%); animation:pb-b 96s ease-in-out infinite alternate} .pb-3{width:48vw;height:48vw;inset-block-start:42%;inset-inline-start:34%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent) 0%,transparent 66%); animation:pb-c 118s ease-in-out infinite alternate} @keyframes pb-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(-6vw,7vh,0)}} @keyframes pb-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(8vw,-6vh,0)}} @keyframes pb-c{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5vw,-8vh,0) scale(1.15)}} /* מטוס בודד שחוצה את המסך גבוה למעלה, פעם ב-52 שניות */ .pb-sky{position:absolute;inset-block-start:0;inset-inline:0;height:min(62vh,620px); width:100%;color:var(--accent);opacity:.3} /* משך המחזור מגיע מ-scenes.js דרך animation-duration, כדי ששני הנתיבים יוכלו לרוץ בקצב שונה בלי לשכפל כאן כללים. */ .pb-trail{stroke-dasharray:1;stroke-dashoffset:1; animation:pb-draw 52s linear infinite} .pb-jet{animation:pb-jet 52s linear infinite} /* המטוס השני רחוק יותר, ולכן גם דהוי יותר — פרספקטיבה אטמוספרית */ .pb-far{opacity:.55} /* התוכן חייב לשבת מעל השכבה */ main,.site-footer,.wrap.page{position:relative;z-index:1} @media(max-width:780px){ /* המטוס היה מוסתר לגמרי בנייד מטעמי ביצועים, ושם נמצא רוב התנועה — כלומר האלמנט החתימתי של האתר לא נראה כמעט אף פעם. נשאר המטוס הראשי בלבד: זה נתיב SVG אחד עם שתי הנפשות, זול בהרבה משלושת כתמי האור שכן הוצגו שם כל הזמן. */ /* המטוס נשאר בשכבת הרקע ואינו עובר על תצלום ההירו — בדיוק כמו במחשב, שם רואים אותו רק אחרי ההירו. */ .pb-3{display:none} } /* ---------- שדה תאריך ---------- הפורמט של input[type=date] נקבע לפי שפת הדפדפן ואי אפשר לכפות אותו מ-CSS או מ-lang. אצל גולש עם דפדפן באנגלית מופיע 08/22/2026, והקורא הישראלי מבין 8 באוגוסט. לכן מסתירים את הטקסט המקורי — השדה נשאר שדה תאריך אמיתי על כל היתרונות שלו — ומציירים מעליו את אותו ערך בדיוק בצורה יום.חודש.שנה. */ .datefield{position:relative} .datefield input[type=date]{color:transparent} .datefield input[type=date]::-webkit-datetime-edit{opacity:0} /* אייקון הלוח של הדפדפן יושב בצד ההתחלה, ולכן הטקסט שלנו יושב בצד הסיום — בדיוק במקום שבו הדפדפן מצייר את התאריך המקורי. */ .dateshow{position:absolute;inset:0;display:flex;align-items:center; justify-content:flex-end;padding-inline-end:15px; font-family:var(--font-lat);font-size:15.5px; color:var(--tx);pointer-events:none;letter-spacing:.01em} /* ---------- הופעה בגלילה ---------- */ .rise{opacity:0;transform:translateY(24px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .rise.in{opacity:1;transform:none} /* ---------- רספונסיביות ---------- */ @media(max-width:1000px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr 1fr} .foot-top > :first-child{grid-column:1/-1} } @media(max-width:780px){ html{scroll-padding-top:78px} .burger{display:flex} .nav{position:fixed;inset-block-start:0;inset-inline-end:0;height:100svh;width:min(62vw,248px); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px; background:var(--surface);border-inline-start:1px solid var(--line-2); padding:92px 20px calc(22px + env(safe-area-inset-bottom));margin:0;transform:translateX(100%); overflow-y:auto; transition:transform .4s var(--ease);box-shadow:-30px 0 60px -30px rgba(0,0,0,.45)} .nav-foot{display:block;margin-block-start:auto;padding-block-start:18px; border-block-start:1px solid var(--line-2)} .nav-foot .btn{padding-inline:14px;font-size:14.5px} .nav-tel{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700; color:var(--tx);margin-bottom:11px;padding-block:8px} .nav-tel::before{content:'';width:17px;height:17px;flex:none;background:var(--accent); -webkit-mask:var(--ico-tel) center/contain no-repeat;mask:var(--ico-tel) center/contain no-repeat} .nav-foot .btn{width:100%} /* הקישור מודגש כבר ככפתור בתחתית המגירה, ולכן אין טעם בשורה נוספת שנראית בדיוק כמו "שאלות". */ .nav a[data-nav="request"]{display:none} html[dir=rtl] .nav{transform:translateX(-100%)} .nav.open{transform:none!important} .nav a{font-size:18px;font-weight:600;padding-block:12px} /* "בקשת הצעה" הופיע בכותרת בזמן שאותו כפתור בדיוק יושב כמה עשרות פיקסלים מתחתיו בהירו, ושוב בתחתית המגירה. בלעדיו נשארים בקצה רק ההמבורגר ומתג התצוגה. */ .nav-cta .btn{display:none} /* ---------- ההירו בנייד ---------- התצלום הוא 16:9, וקופסת הירו מלא-מסך בטלפון היא בערך 1:2. עם cover רואים 470px מתוך 1672 — 28% מהתצלום — והדקל, החוף והשמש נחתכים החוצה. לכן התמונה מוצגת כאן ביחס האמיתי שלה, כרצועה עליונה מלאה, והטקסט יורד מתחתיה. ניסיתי בסבב הקודם להחזיר הירו מלא-מסך עם חיתוך מוטב, וזו הייתה טעות: עידן ביקש תמונה שלמה, וכל חיתוך הוא חיתוך. */ /* בעמודים הפנימיים אין הירו, ולכן הריפוד העליון של .page הוא כל מה שיש בין הכותרת הדביקה לתוכן — 104px של רצועה ריקה, שבערכת היום נראית כפס לבן שתופס רבע ממסך הטלפון. הכותרת גבוהה 79px, ולכן 92px מספיקים כדי לפנות לה מקום. */ .wrap.page{padding-block-start:92px} .hero{min-height:auto;display:block;padding-block:0 clamp(34px,6vh,58px)} .hero .scene{position:relative;inset:auto;aspect-ratio:1672/941; animation:none; -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%); mask-image:linear-gradient(to bottom,#000 74%,transparent 100%)} /* שתי השכבות האלה קיימות כדי שטקסט יהיה קריא *מעל* תצלום. כאן הטקסט כבר לא מעליו, ולכן הן רק מעכירות אותו. */ .hero::after,.hero::before{display:none} /* הכותרת והסלוגן יושבים על התצלום, והפסקה מתחילה בדיוק בקצה שלו — כלומר בתחילת הרקע הבהיר. 136px אינו מספר שרירותי: זה בדיוק גובה הבלוק שמעל הפסקה (כותרת-על + h1), ולכן הזזה בגובה הזה מניחה את הפסקה על קו הסיום של התמונה. הוא קבוע בכל רוחב טלפון כי h1 יושב על המינימום של ה-clamp שלו (35px) עד 583px. */ .hero .wrap{margin-block-start:-136px} .hero .eyebrow{font-size:11px;letter-spacing:.02em} .hero h1,.hero .lead,.hero .eyebrow{text-shadow:none} } @media(max-width:560px){ /* עמודה אחת הפכה שישה כרטיסים ל-1400px של גלילה, וגם ניתקה את הפריסה מזו שבמחשב. שתי עמודות שומרות על אותה קומפוזיציה בקטן, והריפוד יורד כדי שיישאר מקום לטקסט. */ .g-2,.g-3,.g-4{grid-template-columns:repeat(2,1fr)} .grid{gap:11px} .card{padding:15px 14px} .card h3{font-size:16px} .card p{font-size:13.5px} .card-ico{width:36px;height:36px;margin-bottom:12px;border-radius:10px} .card-ico svg{width:19px;height:19px} /* הפוטר נערם לטור אחד ותפס מסך שלם. שתי רשימות הקישורים יושבות זו לצד זו, והבלוק העליון נשאר ברוחב מלא. */ .foot-top{grid-template-columns:1fr 1fr;gap:22px 18px;padding-bottom:24px} .foot-top > :first-child{grid-column:1/-1} .foot-top .brand-mark img{height:46px} .foot-top p{font-size:13.5px;max-width:none;margin-bottom:0} .foot-col h4{margin-bottom:9px} .foot-col a,.foot-col span{font-size:13.5px;margin-bottom:0} .site-footer{padding-block:34px 18px} .foot-bot{padding-top:16px;font-size:11.5px;gap:6px 16px} .btn{width:100%} .btn-row .btn{width:auto;flex:1 1 auto} .step{padding-inline-start:56px} .step::before{width:42px;height:42px;font-size:15px} .section-head p{font-size:15.5px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition-duration:.01ms!important} .rise{opacity:1;transform:none} }