/* ===================================================================== Ayelet HaShachar — Clean & Modern refresh (2026) --------------------------------------------------------------------- שכבת עיצוב חדשה שמתלבשת מעל template.css / ahen.css הקיימים. נטענת אחרונה ב- ולכן מנצחת ב-cascade ללא שכתוב התבנית. הסרה: מוחקים את שורת ה- ל-redesign.css ב-index.php → חוזר הישן. עקרונות: רקע לבן, כחול/ירוק רעננים, טיפוגרפיה sans נקייה, הרבה אוויר, כרטיסים עם צללים עדינים. RTL-first עם logical properties. ===================================================================== */ /* --------------------------------------------------------------------- 1. Design tokens --------------------------------------------------------------------- */ :root { --bg: #ffffff; --surface: #f4f7f9; /* מקטעים מתחלפים / רקע כרטיסים */ --surface-2: #eef3f6; --brand: #0a6fa8; /* כחול ראשי */ --brand-deep: #08567e; /* כחול כהה ל-hover/כותרות */ --brand-soft: #e7f1f8; /* רקע תכלת עדין */ --green: #6fb95e; /* ירוק מבטא */ --green-deep: #4f9a3f; --ink: #16242e; /* טקסט ראשי */ --muted: #5e6b73; /* טקסט משני */ --line: #e4e9ed; /* קווי הפרדה דקיקים */ --r: 16px; /* רדיוס כרטיסים */ --r-sm: 10px; --r-pill: 999px; --shadow-sm: 0 1px 3px rgba(16,42,67,.06); --shadow: 0 6px 24px rgba(16,42,67,.08); --shadow-lg: 0 14px 40px rgba(16,42,67,.14); --ease: cubic-bezier(.2,.6,.2,1); --container: 1180px; --gutter: clamp(16px, 4vw, 32px); --font-body: 'Assistant', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: 'Heebo', 'Assistant', system-ui, sans-serif; } /* --------------------------------------------------------------------- 2. Base & typography --------------------------------------------------------------------- */ html { overflow-y: scroll; } body { font-family: var(--font-body); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; } p { font-size: 1.0625rem; /* ~17px */ line-height: 1.75; color: var(--ink); } a { transition: color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } img { max-width: 100%; height: auto; } /* --------------------------------------------------------------------- 3. Layout — container & sections --------------------------------------------------------------------- */ .wrapper { width: auto; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } /* גוף התוכן: רקע בהיר נקי במקום אפור שטוח, עם אוויר */ article { background: var(--bg); padding-block: clamp(32px, 5vw, 64px); } /* --------------------------------------------------------------------- 4. Header & navigation --------------------------------------------------------------------- */ header { height: auto; min-height: 84px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); padding-block: 10px; position: sticky; /* תפריט עליון סטיקי */ top: 0; z-index: 900; } header .wrapper { display: block; } /* clearfix — מכיל את המודולים הצפים (לוגו/תפריט/טלפון) כדי שההדר יקבל גובה אמיתי והסליידר ירד מתחתיו (תיקון: לוגו שעלה על הסליידר) */ header .newheader::after, header .wrapper::after { content: ''; display: table; clear: both; } /* תפריט ראשי */ header ul.nav.menu { margin: 0; padding: 0; } header ul.nav.menu li { display: inline-block; padding: 0 14px; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; } .moduletable.menu a { color: var(--ink); padding-bottom: 6px; position: relative; } .moduletable.menu a:hover { color: var(--brand); } /* קו תחתון דק וירוק לפריט הפעיל (במקום 8px עבים) */ header ul.nav.menu li.current a, header ul.nav.menu li.active a, header ul.nav.menu li:hover a, header ul.nav.menu li:focus a { border-bottom: 3px solid var(--green); } /* טלפון/יצירת קשר */ .moduletable.tel, .moduletable.tel p, .moduletable.tel p a, .tel a { color: var(--brand) !important; font-weight: 700; } /* אייקוני רשתות חברתיות — הוסרו לפי בקשה */ .moduletable.social { display: none !important; } /* מתג שפה EN */ ul.lang-inline li { border-color: var(--line); transition: all .18s var(--ease); } ul.lang-inline li:hover, ul.lang-inline li:focus { background: var(--brand); border-color: var(--brand); } /* --------------------------------------------------------------------- 5. Hero / slider + פס "יחד בבית" + כותרת ראשית --------------------------------------------------------------------- */ /* מבטל את ה-margin hacks של התבנית הישנה — ההדר הסטיקי שומר את מקומו */ .slider { margin: 0 !important; line-height: 0; } .slider img { width: 100%; display: block; } /* באנר "יחד בבית" — הוסר לפי בקשה. (אפשר גם לבטל פרסום המודול ב-Joomla במקום להסתיר ב-CSS) */ .moduletable.bg1 { display: none !important; } /* כותרת ראשית (h1) — בלי המסגרת העליונה/תחתונה הישנה */ h1 { font-family: var(--font-head); color: var(--brand-deep); border: 0; text-align: center; font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.75rem); letter-spacing: -.01em; padding: 0; margin: 0 0 .4em; } /* כותרת מאמר */ h2.item-title, h2.item-title a { color: var(--brand-deep) !important; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 3.5vw, 2.5rem); letter-spacing: -.01em; } /* --------------------------------------------------------------------- 6. כותרות מקטעים (.moduletable h3) — "חדשות אחרונות" וכו' --------------------------------------------------------------------- */ .moduletable h3, .moduletable h3 a { font-family: var(--font-head); color: var(--ink); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); text-align: start; } /* מבטא ירוק קצר מתחת לכותרת מקטע */ .moduletable h3 { display: inline-block; padding-bottom: 8px; position: relative; } .moduletable h3:after { content: ''; position: absolute; inset-inline-start: 0; bottom: 0; width: 48px; height: 4px; border-radius: 4px; background: var(--green); font-size: 0; padding: 0; color: transparent; } h3 { color: var(--brand); } /* --------------------------------------------------------------------- 7. שלושת כפתורי הקישור המהירים (ניוזלטר / תרמו / פרויקטים) .moduletable.links — שומרים על צבעי הפריטים, מעצבים ככרטיסים --------------------------------------------------------------------- */ .moduletable.links { margin-block: 24px; } .moduletable.links ul.nav.menu { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; } .moduletable.links li { flex: 1 1 0; min-width: 200px; width: auto; margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .moduletable.links li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .moduletable.links li a { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: auto; min-height: 86px; padding: 18px 22px; margin: 0; color: #fff; font-size: 1.375rem; font-weight: 700; text-align: center; line-height: 1.3; box-sizing: border-box; } /* החץ הישן (monospace '>') מיותר בכרטיס נקי — מוסתר */ .moduletable.links li:after { display: none; } /* --------------------------------------------------------------------- 8. חדשות אחרונות — רשימה נקייה עם תמונות ממוזערות --------------------------------------------------------------------- */ .moduletable.newsflash.st1, .moduletable_latestNews { /* ראה גם media queries בתבנית */ } .nws-item { display: flex; gap: 16px; align-items: flex-start; padding-block: 16px; border-bottom: 1px solid var(--line); margin: 0; float: none; width: 100%; box-sizing: border-box; } .nws-item:last-child { border-bottom: 0; } img.news-img { width: 116px; height: 84px; object-fit: cover; border: 0; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); margin: 0; flex: 0 0 auto; float: none; } .nws-item h4 { margin: 0 0 4px; } h4.newsflash-title a, h4.newsflash-title, .moduletable_latestNews h4 a { color: var(--brand); font-weight: 700; font-size: 1.125rem; line-height: 1.4; text-decoration: none; } h4.newsflash-title a:hover, .moduletable_latestNews h4 a:hover { color: var(--brand-deep); } .nws-created { float: none; display: block; margin-top: 6px; font-size: .82rem; color: var(--muted); } /* קישור "לחדשות נוספות" */ .morenews a, a.mod-articles-category-title { color: var(--green-deep); font-weight: 700; font-size: 1.05rem; } .morenews:after, a.mod-articles-category-title:after { content: '‹'; font-family: var(--font-head); color: var(--green-deep); font-weight: 700; font-size: 1.2rem; padding-inline-start: 6px; } /* --------------------------------------------------------------------- 9. גלריות וידאו/תמונות + קופסת תרומה ("יחד בבית") --------------------------------------------------------------------- */ .custom.third.st1.photogallery a, .custom.third.st1.videogallery a { border: 0; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .custom.third.st1.photogallery a:hover, .custom.third.st1.videogallery a:hover { transform: translateY(-3px); box-shadow: var(--shadow); } /* כפתור תרומה */ .btn.btn-donate a { background: var(--green); color: #fff; font-weight: 700; border-radius: var(--r-pill); box-shadow: var(--shadow); padding: 12px 28px; transition: all .2s var(--ease); } .btn.btn-donate a:hover { background: var(--green-deep); transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* --------------------------------------------------------------------- 10. אריחי הפרויקטים בתחתית (section#bottom) רקע תכלת זועק → משטח בהיר רגוע + כרטיסים אמיתיים --------------------------------------------------------------------- */ section#bottom { background: var(--surface); padding-block: clamp(36px, 5vw, 64px); margin-top: 0; } #bottom figure, #bottom .moduletable { border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } #bottom figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } #bottom img { border-radius: 0; display: block; width: 100%; } /* כיתוב/קישור מתחת לתמונה */ #bottom figcaption { position: static; background: var(--brand); color: #fff; line-height: 1.4; padding: 12px 14px; font-size: 1.05rem; text-shadow: none; } /* כותרת המקטע ("לחדשות נוספות") על משטח בהיר */ section#bottom .morenews a { color: var(--green-deep); } /* --------------------------------------------------------------------- 11. Aside — תפריט צד צבעוני (עמודים פנימיים) --------------------------------------------------------------------- */ aside ul.nav.menu li a { border-radius: var(--r-sm); font-weight: 700; font-size: 1.4rem; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease); } aside li { margin-bottom: 10px; } aside ul.nav.menu li a:hover { transform: translateX(-4px); box-shadow: var(--shadow); filter: saturate(1.1); } /* --------------------------------------------------------------------- 12. Footer --------------------------------------------------------------------- */ footer { background: #16242e; color: #cdd6dd; border-top: 4px solid var(--green); padding-block: 8px 24px; } footer a { color: #cdd6dd; } footer a:hover { color: #fff; } footer h3 { color: #fff; font-weight: 700; } .footer1 { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: 16px; margin-bottom: 24px; } .footer2 { border-top: 1px solid rgba(255,255,255,.12); margin-top: 24px; padding-top: 16px; color: #9fb0ba !important; } .footer2 p { color: #9fb0ba; } .moduletable_footermenu li, ul.weblinks_weblinks li { line-height: 2; } footer textarea, footer input { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-sm); color: #fff; padding: 8px 10px; box-sizing: border-box; } /* --------------------------------------------------------------------- 13. Breadcrumbs, טבלאות קטגוריה, pagination --------------------------------------------------------------------- */ ul.breadcrumb { color: var(--muted); font-weight: 600; } ul.breadcrumb a { color: var(--brand); } td.list-title a { color: var(--brand); font-weight: 600; } table.category.table tbody { border-color: var(--line); } tr.cat-list-row0 { background: var(--surface); } tr.cat-list-row0, tr.cat-list-row1 { transition: background .15s var(--ease); } tr.cat-list-row0:hover, tr.cat-list-row1:hover { background: var(--brand-soft); } ul.pagination-list li { transition: all .15s var(--ease); } /* נקודות רשימה בתוכן */ .item-page li:before { color: var(--green); } /* --------------------------------------------------------------------- 16. רובריקת מספרים (Impact) — פס נתונים מתחת לסליידר --------------------------------------------------------------------- */ .impact-stats { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff; padding-block: clamp(28px, 4vw, 48px); } .impact-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0; padding: 0; text-align: center; } .impact-list li { padding: 6px 14px; } .impact-list li + li { border-inline-start: 1px solid rgba(255,255,255,.22); } .impact-num { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -.02em; } .impact-label { display: block; margin-top: 6px; font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,.92); } /* --------------------------------------------------------------------- 17. תרומות — כפתור צף קבוע (CTA ראשי) + הדגשת קישורי תרומה --------------------------------------------------------------------- */ .donate-fab { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 1000; display: inline-flex; align-items: center; gap: 9px; background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; padding: 14px 24px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); text-decoration: none; transition: transform .18s var(--ease), background .18s var(--ease); } .donate-fab:hover { background: var(--green-deep); color: #fff; transform: translateY(-2px); } .donate-fab::before { content: '\2665'; font-size: 1.1em; line-height: 1; } /* הדגשת קישורי "תרומה/תרמו" קיימים בתפריט (ירוק בולט) */ .moduletable.menu a[href*="donat"], .moduletable.menu a[href*="תרומ"], .moduletable.menu a[href*="תרמו"] { background: var(--green); color: #fff !important; padding: 7px 16px; border-radius: var(--r-pill); font-weight: 800; } .moduletable.menu a[href*="donat"]:hover, .moduletable.menu a[href*="תרומ"]:hover, .moduletable.menu a[href*="תרמו"]:hover { background: var(--green-deep); } /* --------------------------------------------------------------------- 18. הבלטת הפרויקטים (section#bottom) — כרטיסים גדולים ומזמינים --------------------------------------------------------------------- */ #bottom figure img, #bottom .moduletable img { transition: transform .45s var(--ease); display: block; } #bottom figure:hover img, #bottom .moduletable:hover img { transform: scale(1.06); } #bottom figcaption { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; } /* מבטא ירוק עליון לכל כרטיס פרויקט */ #bottom figure, #bottom .moduletable { border-top: 4px solid var(--green); } /* --------------------------------------------------------------------- 14. Responsive — מובייל --------------------------------------------------------------------- */ /* טאבלט ומטה */ @media (max-width: 767px) { body { font-size: 16px; } /* שלושת הכפתורים — אחד מתחת לשני, רוחב מלא */ .moduletable.links ul.nav.menu { flex-direction: column; } .moduletable.links li { width: 100%; min-width: 0; } /* חדשות — תמונה קומפקטית */ .nws-item { gap: 12px; } img.news-img { width: 92px; height: 70px; } } /* פאבלט / מסכים בינוניים-קטנים */ @media (max-width: 600px) { /* אריחי מספרים — 2 בשורה */ .impact-list { grid-template-columns: repeat(2, 1fr); gap: 22px 8px; } .impact-list li + li { border-inline-start: 0; } /* כפתור תרומה צף — קומפקטי */ .donate-fab { inset-block-end: 14px; inset-inline-end: 14px; font-size: 1rem; padding: 12px 18px; } /* פרויקטים — כרטיס מלא ברוחב, אחד מתחת לשני */ #bottom figure, #bottom .moduletable.third, #bottom .span12 { float: none; width: 100%; margin: 0 0 16px; } } /* טלפון */ @media (max-width: 479px) { article { padding-block: 24px; } /* מאפשר sticky header למרות overflow-x:hidden של התבנית הישנה */ html { overflow-x: clip; } /* ---- תפריט המבורגר: פתיחה נקייה (פריטים אחד מתחת לשני) ---- */ header ul.nav.menu li { display: block; padding: 0; background: transparent; } header ul.nav.menu li a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink); } /* ביטול הקו הירוק העבה בתוך התפריט הנפתח */ header ul.nav.menu li.current a, header ul.nav.menu li.active a, header ul.nav.menu li:hover a, header ul.nav.menu li:focus a { border-bottom: 1px solid var(--line); color: var(--brand); } .moduletable.menu.open ul.nav.menu { background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding: 6px 4px; margin-top: 50px; } /* אייקון ההמבורגר בצבע המותג */ .moduletable.menu:before { color: var(--brand); border-color: var(--brand); } } /* --------------------------------------------------------------------- 15. נגישות — פוקוס נראה + כיבוד reduce-motion --------------------------------------------------------------------- */ a:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }