/* ========================================================================== style.css - עיצוב הדף הציבורי (עמוד הבית). כלל הפרויקט: כל העיצוב חי כאן. אין CSS inline בקבצי ה-PHP. ========================================================================== */ :root { --bg-1: #0f1830; --bg-2: #131b2f; --bg-3: #1a2542; --card: rgba(255, 255, 255, 0.04); --card-border: rgba(255, 255, 255, 0.08); --card-hover: rgba(255, 255, 255, 0.07); --text: #eaeefb; --text-dim: #9cacd8; --accent: #ff9933; --accent-soft: #fcefc7; --radius: 14px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --gap-section: 28px; /* רווח תקני בין ה-header/footer לתוכן */ --ctl-h: 40px; /* גובה אחיד לכל פקדי הסרגל העליון (חיפוש + כפתורים) */ --fancy-col: 240px; /* רוחב עמודה בתצוגה המעוצבת (מספיק לשני טורי קישורים) */ --wrap-max: 2600px; /* התוכן ממלא מסכים רחבים במקום להיתקע ברוחב קבוע */ --col-width: 146px; /* רוחב עמודה צר (~90%) - כדי שהכול ייכנס לעמוד אחד */ /* חוק הפרויקט: כל הגופנים הם של Google. גוף - Heebo, כותרות - Rubik. */ --font: "Heebo", sans-serif; --font-head: "Rubik", "Heebo", sans-serif; } * { box-sizing: border-box; } /* ============================ מצב בהיר (Light) ============================ ברירת המחדל היא כהה. data-theme="light" על מחליף למצב בהיר. */ :root[data-theme="light"] { --bg-1: #eef1f9; --bg-2: #e6ecf6; --bg-3: #dbe3f1; --card: #ffffff; --card-border: rgba(24, 40, 80, 0.14); --card-hover: #f2f6fd; --text: #1a2544; --text-dim: #5b6a8d; --accent: #dd7a00; --accent-soft: #8a5a08; --shadow: 0 8px 22px rgba(30, 45, 85, 0.12); } :root[data-theme="light"] body::before { background: linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); } :root[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.88); } :root[data-theme="light"] .site-footer { background: rgba(255, 255, 255, 0.55); } :root[data-theme="light"] .filter-input { background: #ffffff; border-color: var(--card-border); } :root[data-theme="light"] .toggle-all { background: #ffffff; border-color: var(--card-border); color: var(--text-dim); } :root[data-theme="light"] .link-item a { color: var(--text); } :root[data-theme="light"] .link-item a:hover, :root[data-theme="light"] .link-item a:focus-visible { background: rgba(24, 40, 80, 0.05); color: var(--accent); } :root[data-theme="light"] .card { background: var(--card); } :root[data-theme="light"] .no-results { color: var(--text-dim); } :root[data-theme="light"] * { scrollbar-color: rgba(221, 122, 0, 0.7) rgba(24, 40, 80, 0.08); } :root[data-theme="light"] ::-webkit-scrollbar-track { background: rgba(24, 40, 80, 0.06); } /* חוק הפרויקט: פס גלילה מעוצב מותאם לאתר - אף פעם לא סקרולבר ברירת מחדל */ * { scrollbar-width: thin; scrollbar-color: rgba(255, 153, 51, 0.65) rgba(255, 255, 255, 0.05); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 999px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffb056, var(--accent)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } ::-webkit-scrollbar-corner { background: transparent; } /* מגע: ביטול השהיית 300ms והדגשת-הקשה גסה בכל האלמנטים האינטראקטיביים */ a, button, input, textarea, select, [role="button"], .card-title, .link-item { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html { scroll-behavior: smooth; background: var(--bg-1); } body { margin: 0; min-height: 100vh; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); font-family: var(--font); color: var(--text); background: var(--bg-1); /* חובה ביחידת rem ולא px: כלי "הגדלת טקסט" בתפריט הנגישות משנה את font-size של , וערך px קבוע כאן היה מנטרל אותו עבור כל מה שיורש מ-body (WCAG 1.4.4). 0.9375rem = 15px בגודל ברירת המחדל. */ font-size: 0.9375rem; line-height: 1.5; } /* רקע ה-gradient על שכבה קבועה נפרדת במקום background-attachment: fixed. כך הדפדפן לא מצייר מחדש את ה-gradient היקר בכל פריים גלילה (composited layer), והגלילה נשארת חלקה - אותו מראה בדיוק. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 600px at 85% -10%, rgba(255, 153, 51, 0.10), transparent 60%), radial-gradient(1000px 700px at 0% 0%, rgba(76, 110, 245, 0.12), transparent 55%), linear-gradient(160deg, var(--bg-1), var(--bg-2) 55%, var(--bg-3)); } .wrap { max-width: var(--wrap-max); margin: 0 auto; /* padding-inline בלבד - כדי לא לדרוס את padding-block של main (הרווח התקני). */ padding-inline: clamp(16px, 2.2vw, 48px); } /* ========================================================================== נגישות (ת"י 5568 / WCAG 2.1 AA) - כללי בסיס החלים על כל הדף ========================================================================== */ /* קישור נגישות לדילוג לתוכן */ .skip-link { position: absolute; right: -999px; top: 8px; background: var(--accent); color: #1a1200; padding: 8px 16px; border-radius: 8px; z-index: 100; font-weight: 700; } .skip-link:focus { right: 12px; } /* טקסט לקוראי מסך בלבד - נשמע, לא נראה. clip-path ולא display:none, כי אלמנט מוסתר לגמרי אינו קיים בעץ הנגישות. */ .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ה-header דביק (sticky) ומכסה את ראש המסך. בלי scroll-margin, אלמנט שמקבל פוקוס בגלילת Tab נעצר מתחתיו ולא נראה (WCAG 2.4.11 / 2.4.7). */ :where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: calc(var(--hdr-h, 76px) + 12px); scroll-margin-bottom: 24px; } /* מסגרת פוקוס ברירת מחדל לכל רכיב שאין לו כלל משלו - אין להשאיר שום עצירת Tab בלי סימון גלוי. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* כיבוד העדפת המערכת "צמצום תנועה". כפתור "עצירת הנפשות" בתפריט הנגישות נשאר לשליטה ידנית; כאן מכבדים את מי שכבר הגדיר זאת במכשיר שלו. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ------------------------------ Header ------------------------------ */ .site-header { position: sticky; top: 0; z-index: 20; /* אין backdrop-filter: הוא הופך את ה-header ל-containing block ושובר את position:fixed של פאנל הנגישות במובייל (היה נחתך מעל המסך). רקע אטום יותר מפצה על הבלר. */ background: rgba(13, 20, 40, 0.96); border-bottom: 1px solid var(--card-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 8px; flex-wrap: wrap; } .brand-title { margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.3px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-tagline { margin: 2px 0 0; color: var(--text-dim); font-size: 0.9rem; } .header-search { flex: 1 1 320px; max-width: 780px; display: flex; align-items: center; gap: 10px; } /* min-width: 0 - כדי ששדה החיפוש יוכל להצטמצם ולא ידחוף את הכפתורים מחוץ למסך */ .header-search .filter-input { flex: 1; min-width: 0; } /* כל פקדי הסרגל בגובה זהה בדיוק (כולל כפתור הנגישות שמגיע מרכיב נפרד) */ .header-search .filter-input, .header-search .view-toggle, .header-search .toggle-all, .header-search .search-zoom, .header-search .theme-toggle, .header-search .a11y-fab { height: var(--ctl-h); min-height: var(--ctl-h); } /* כפתור גלובלי: כווץ / הרחב את כל הפאנלים */ .toggle-all { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; font-family: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; } .toggle-all:hover { color: var(--accent-soft); border-color: rgba(255, 153, 51, 0.4); background: rgba(255, 153, 51, 0.08); } .toggle-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .toggle-all-icon { width: 8px; height: 8px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); margin-bottom: 2px; transition: transform .28s ease; } /* כשהכול מכווץ - החץ מתהפך */ .toggle-all[aria-pressed="true"] .toggle-all-icon { transform: rotate(135deg); margin-bottom: -2px; } /* ------------------ מתג תצוגה: רשימה / מעוצב ------------------ */ .view-toggle { position: relative; display: inline-flex; align-items: center; flex: none; padding: 3px; border: 1px solid var(--card-border); border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-family: inherit; cursor: pointer; transition: border-color .15s, background .15s; } .view-toggle:hover { border-color: rgba(255, 153, 51, 0.45); } .view-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-theme="light"] .view-toggle { background: #ffffff; } /* "בורר" נע שמסמן את התצוגה הפעילה */ .view-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; inset-inline-start: 3px; width: calc(50% - 3px); border-radius: 999px; background: linear-gradient(180deg, #ffb056, var(--accent)); box-shadow: 0 2px 9px rgba(255, 153, 51, 0.32); transition: transform .28s cubic-bezier(.4, 0, .2, 1); } .view-toggle[aria-pressed="true"]::before { transform: translateX(-100%); } /* שתי האפשרויות ברוחב זהה - כדי שהבורר (50%) יתיישר בדיוק על כל אחת מהן */ .view-toggle-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 76px; padding: 0 10px; font-size: 0.8rem; font-weight: 700; line-height: 1; color: var(--text-dim); white-space: nowrap; transition: color .2s ease; } .view-toggle-opt svg { width: 14px; height: 14px; flex: none; } .view-toggle[aria-pressed="false"] .view-toggle-opt[data-view="list"], .view-toggle[aria-pressed="true"] .view-toggle-opt[data-view="fancy"] { color: #241500; } /* זכוכית מגדלת — מתג "הגדלת קישור במעבר עכבר" */ .search-zoom { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h); flex: none; border-radius: 999px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.06); color: var(--accent); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; } .search-zoom-ico { transition: transform .18s ease; } .search-zoom:hover { border-color: rgba(255, 153, 51, 0.45); background: rgba(255, 153, 51, 0.12); } .search-zoom:hover .search-zoom-ico { transform: scale(1.18); } .search-zoom:active { transform: scale(0.92); } .search-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-theme="light"] .search-zoom { background: #ffffff; } /* מצב דלוק: המתג פעיל */ .search-zoom[aria-pressed="true"] { background: rgba(255, 153, 51, 0.18); border-color: rgba(255, 153, 51, 0.65); box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15); } .search-zoom[aria-pressed="true"] .search-zoom-ico { transform: scale(1.12); } :root[data-theme="light"] .search-zoom[aria-pressed="true"] { background: rgba(255, 153, 51, 0.18); } /* כשהמתג דלוק: מעבר עכבר על קישור מגדיל את הטקסט כמו זכוכית מגדלת (בנוסף לאפקט הרגיל) */ :root.link-zoom .link-item a { transform-origin: right center; transition: background .12s, color .18s, padding-inline-start .12s, transform .22s cubic-bezier(.34, 1.56, .64, 1), text-shadow .18s; /* הקופסה נצמדת לטקסט (במקום להימתח על כל רוחב העמודה), אחרת ההגדלה מותחת גם את פס הרקע והוא גולש כפס רחב על הכרטיסים השכנים. חשוב שזה יחול תמיד ולא רק ב-:hover: כשהרוחב משתנה יחד עם הריחוף הוא קופץ מיידית בחזרה למלוא העמודה בזמן שההגדלה עוד מתכווצת (ומהבהב פס רחב), ובכניסה הוא מצטמצם מתחת לסמן ומייצר ריצוד hover בשוליים. */ width: max-content; max-width: 100%; } /* עוגן הקופסה תואם ל-transform-origin: ברירת המחדל נצמדת לימין (RTL) */ :root.link-zoom .link-item[data-align="center"] a { transform-origin: center; margin-inline: auto; } :root.link-zoom .link-item[data-align="left"] a { transform-origin: left center; margin-inline-start: auto; } :root.link-zoom .link-item a:hover, :root.link-zoom .link-item a:focus-visible { transform: scale(1.7); position: relative; z-index: 3; color: var(--accent); text-shadow: 0 2px 14px rgba(255, 153, 51, 0.55), 0 0 2px rgba(255, 153, 51, 0.4); letter-spacing: 0.2px; } /* מבטלים את הזזת-הריפוד שבריחוף רגיל: כשהקופסה נצמדת לטקסט היא מרחיבה את הפס עצמו (ולא רק מזיזה את הטקסט בתוכו), וזה מוסיף רעד רוחב מיותר להגדלה. */ @media (min-width: 641px) { :root.link-zoom .link-item a:hover, :root.link-zoom .link-item a:focus-visible { padding-inline-start: 7px; } } :root[data-theme="light"].link-zoom .link-item a:hover, :root[data-theme="light"].link-zoom .link-item a:focus-visible { text-shadow: 0 2px 12px rgba(221, 122, 0, 0.35); } /* הטקסט המוגדל רחב מהעמודה שלו, ובלי זה הוא נחתך ע"י ה-overflow של הכרטיס ושל רשימת הקישורים. פותחים את החיתוך רק ברגע שהעכבר/הפוקוס על קישור - כך אנימציית הקיפול (שמסתמכת על אותו overflow) נשארת תקינה. */ :root.link-zoom .card:has(.link-item a:hover, .link-item a:focus-visible) { overflow: visible; position: relative; z-index: 5; /* הטקסט המוגדל עובר מעל הכרטיסים השכנים */ } :root.link-zoom .card-body > .link-list:has(a:hover, a:focus-visible) { overflow: visible; } /* בטלפון (מסך צר ללא עכבר/עט) אין ריחוף — הזכוכית המגדלת מוסתרת והאפקט מנוטרל. בטאבלט/אייפד עם עט או בדסקטופ עם עכבר הכפתור נשאר. */ @media (max-width: 640px) and (hover: none) { .search-zoom { display: none; } :root.link-zoom .link-item a:hover, :root.link-zoom .link-item a:focus-visible { transform: none; text-shadow: none; letter-spacing: normal; } } /* מתג מצב בהיר/כהה */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h); height: var(--ctl-h); flex: none; border-radius: 999px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.06); color: var(--accent); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; } .theme-toggle:hover { border-color: rgba(255, 153, 51, 0.45); background: rgba(255, 153, 51, 0.12); } .theme-toggle:active { transform: scale(0.92); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :root[data-theme="light"] .theme-toggle { background: #ffffff; } .theme-moon { display: none; } .theme-sun { display: block; } :root[data-theme="light"] .theme-sun { display: none; } :root[data-theme="light"] .theme-moon { display: block; } .filter-input { width: 100%; padding: 0 16px; font-size: 0.95rem; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--card-border); border-radius: 999px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s; font-family: inherit; } .filter-input::placeholder { color: var(--text-dim); } .filter-input:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15); } /* ------------------------------ Grid ------------------------------ */ /* רווח תקני: מרווח קבוע בין ה-header לתוכן ובין התוכן ל-footer. */ main { padding-block: var(--gap-section) var(--gap-section); } /* פריסת עמודות עיתון: אורזת את כל הקטגוריות בצפיפות בעמוד אחד, כמו המקור. רוחב העמודה גדל במסכים רחבים כך שהתוכן מתרחב וגדל בהתאם. */ .grid { columns: var(--col-width); column-gap: 12px; } .card { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 11px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 9px 11px 10px; /* פס עליון בצבע הקטגוריה - מוצג רק כשנבחר צבע (ברירת מחדל: transparent = ללא). */ box-shadow: var(--shadow), inset 0 3px 0 0 var(--cat-color, transparent); overflow: hidden; transition: border-color .16s ease, background .16s ease; } /* אפקטי hover רק במכשירים עם עכבר - כדי שבמובייל לא תישאר מסגרת כתומה "דבוקה" אחרי הקשה */ @media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--cat-color, rgba(255, 153, 51, 0.4)); /* בצבע הקטגוריה שנבחר (או עדין כברירת מחדל) */ background: var(--card-hover); } } /*

עוטף בלבד - נושא את דרגת הכותרת עבור קוראי מסך (ניווט לפי כותרות), בלי להוסיף שום מרווח או גודל משלו. הכפתור שבתוכו נושא את כל העיצוב. */ .card-head { margin: 0; font: inherit; display: block; } .card-title { /* איפוס ברירות המחדל של