/* =====================================================================
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;
}
/* ---- כיווץ ההדר בגלילה: מצב מינימלי (body.scrolled מ-JS) ---- */
header { transition: min-height .25s var(--ease), padding .25s var(--ease), box-shadow .25s var(--ease); }
.moduletable.logo img { transition: max-height .25s var(--ease); }
.moduletable.menu,
.moduletable.tel { transition: margin .25s var(--ease); }
body.scrolled header {
min-height: 0;
padding-block: 3px;
box-shadow: var(--shadow);
}
body.scrolled .moduletable.logo img { max-height: 60px; width: auto; }
body.scrolled .moduletable.menu { margin-top: 6px; }
body.scrolled .moduletable.tel { margin-top: 6px; }
/* תפריט ראשי */
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; }
/* ---- הירו: סליידר jQuery מודרני (fade) ---- */
.hero {
position: relative;
width: 100%;
height: clamp(360px, 56vw, 620px);
overflow: hidden;
background: #0b1f2b;
line-height: normal;
}
.hero-track { position: absolute; inset: 0; }
.hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity .9s var(--ease);
will-change: opacity;
}
.hero-slide.is-active { opacity: 1; }
/* שכבת מעבר כהה בתחתית — לקריאוּת הכפתור/כותרת */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgba(7,31,43,.6), rgba(7,31,43,0) 48%);
z-index: 2;
}
.hero-overlay {
position: absolute;
inset-inline: 0;
bottom: clamp(38px, 7vw, 80px);
z-index: 3;
text-align: center;
padding-inline: 20px;
}
.hero-title {
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: clamp(1.7rem, 4vw, 3rem);
margin: 0 0 18px;
text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hero-cta {
display: inline-block;
background: var(--green);
color: #fff;
font-family: var(--font-head);
font-weight: 800;
font-size: 1.15rem;
padding: 14px 36px;
border-radius: var(--r-pill);
text-decoration: none;
box-shadow: var(--shadow-lg);
transition: transform .18s var(--ease), background .18s var(--ease);
}
.hero-cta:hover { background: var(--green-deep); color: #fff; transform: translateY(-2px); }
/* חצים */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
cursor: pointer;
background: rgba(255,255,255,.85);
color: var(--ink);
font-size: 1.9rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
transition: background .18s var(--ease);
}
.hero-arrow:hover { background: #fff; }
.hero-prev { inset-inline-start: 18px; }
.hero-next { inset-inline-end: 18px; }
/* נקודות */
.hero-dots {
position: absolute;
inset-inline: 0;
bottom: 16px;
z-index: 4;
display: flex;
gap: 10px;
justify-content: center;
}
.hero-dots button {
width: 11px;
height: 11px;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
background: rgba(255,255,255,.5);
transition: background .18s var(--ease), transform .18s var(--ease);
}
.hero-dots button.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 600px) {
.hero-arrow { width: 38px; height: 38px; font-size: 1.4rem; }
.hero-prev { inset-inline-start: 10px; }
.hero-next { inset-inline-end: 10px; }
}
/* באנר "יחד בבית" — הוסר לפי בקשה.
(אפשר גם לבטל פרסום המודול ב-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. חדשות אחרונות — רשת "קוביות" מיושרות עם תמונה גדולה
--------------------------------------------------------------------- */
/* רשת 2 קוביות בשורה — על האלמנט שמכיל *ישירות* את ה-.nws-item,
בין אם זה המודול עצמו ובין אם wrapper פנימי (:has פותר את שניהם) */
.moduletable.newsflash.st1:has(> .nws-item),
.moduletable.newsflash.st1 :has(> .nws-item) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 20px;
align-items: stretch;
}
/* אם הפריטים ילדים ישירים — כותרת/"עוד" משתרעים על כל הרוחב */
.moduletable.newsflash.st1 > h3,
.moduletable.newsflash.st1 > .morenews { grid-column: 1 / -1; }
.nws-item {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin: 0;
padding: 0;
width: auto;
float: none;
box-sizing: border-box;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.nws-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* תמונה גדולה בראש הקובייה (יחס אחיד → יישור מושלם).
specificity + !important כדי לגבור על width/height/margin שהתבנית כופה ב-media */
img.news-img,
.moduletable.newsflash.st1 img.news-img {
width: 100% !important;
aspect-ratio: 16 / 10;
height: auto !important;
max-height: none !important;
object-fit: cover;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0 !important;
float: none;
display: block;
}
.nws-item h4 { margin: 0; padding: 16px 20px 6px; text-align: start; }
.nws-item p {
margin: 0;
padding: 0 20px 4px;
color: var(--muted);
font-size: .98rem;
line-height: 1.55;
text-align: start; /* עברית → ימין, אנגלית → שמאל (לפי dir) */
}
h4.newsflash-title a,
h4.newsflash-title,
.moduletable_latestNews h4 a {
color: var(--brand);
font-weight: 700;
font-size: 1.1rem;
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: auto 0 0;
padding: 10px 16px 14px;
font-size: .82rem;
color: var(--muted);
text-align: start; /* התאריך מיושר לקצה הקריאה — ימין בעברית, שמאל באנגלית */
}
/* קישור "לחדשות נוספות" */
.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. גלריות וידאו/תמונות + קופסת תרומה ("יחד בבית")
--------------------------------------------------------------------- */
/* הקונטיינר → רשת אחידה של 3 בשורה (במקום float מבולגן) */
.custom.third.st1.photogallery,
.custom.third.st1.videogallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: start;
}
/* כל תמונה ממוזערת = אריח בעל יחס אחיד → כל האריחים באותו גודל */
.custom.third.st1.photogallery a,
.custom.third.st1.videogallery a {
position: relative;
display: block;
width: auto !important;
margin: 0 !important;
float: none !important;
aspect-ratio: 1 / 1;
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);
}
/* התמונה ממלאת את האריח (cover) — מבטל את ה-absolute/width הישן מ-template.css */
.custom.third.st1.photogallery img,
.custom.third.st1.videogallery img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
object-fit: cover;
display: block;
}
/*
/רווחים בין הקישורים לא ייצרו תאים ריקים ברשת */
.custom.third.st1.photogallery br,
.custom.third.st1.videogallery br { display: none; }
/* קופסת "הצטרפות למיזם" (slide) — ניקוי חפיפת הכותרת והפיכה לכרטיס קריא */
.moduletableslide.user { height: auto; margin: 0 0 24px; }
.moduletableslide { max-height: none; }
.moduletableslide.user:after { display: none; } /* הסרת מסכת ה-newsletter הישנה */
.customslide.user { position: static; height: auto; width: 100%; }
.moduletableslide h3 {
position: static;
right: auto;
width: auto;
height: auto;
font-size: 1.3rem;
margin: 0;
padding: 12px 16px 4px;
text-align: start;
}
.customslide.user > div {
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
}
/* כפתור תרומה */
.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; }
/* חדשות — קובייה אחת בשורה */
.moduletable.newsflash.st1:has(> .nws-item),
.moduletable.newsflash.st1 :has(> .nws-item) { grid-template-columns: 1fr; }
}
/* טלפון */
@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; }
}
/* =====================================================================
19. עמוד תרומות — עיצוב ידידותי (כרטיסים + טופס תרומה מוטמע)
---------------------------------------------------------------------
כל הכללים תחת .donate-page בלבד → לא נוגעים בשאר העמודים.
ה-HTML יושב בגוף המאמר (CMS); כאן רק העיצוב.
האייקונים = SVG ממוסך (mask) מתוך CSS — ה-HTML נשאר נקי, ולא נחתך
ע"י מסנני הטקסט של Joomla. הצבע נשלט ב-currentColor.
===================================================================== */
/* ---- אייקונים (mask) ---- */
.donate-page .di {
display: inline-block;
width: 1em;
height: 1em;
flex: none;
background-color: currentColor;
vertical-align: -0.14em;
-webkit-mask: var(--di) center / contain no-repeat;
mask: var(--di) center / contain no-repeat;
}
.di-lock { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'11'%20width%3D'18'%20height%3D'11'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M7%2011V7a5%205%200%200%201%2010%200v4'%2F%3E%3C%2Fsvg%3E"); }
.di-card { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'2'%20y%3D'5'%20width%3D'20'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M2%2010h20'%2F%3E%3C%2Fsvg%3E"); }
.di-wallet { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2012V7H5a2%202%200%200%201%200-4h14v4'%2F%3E%3Cpath%20d%3D'M3%205v14a2%202%200%200%200%202%202h16v-5'%2F%3E%3Cpath%20d%3D'M18%2012a2%202%200%200%200%200%204h4v-4Z'%2F%3E%3C%2Fsvg%3E"); }
.di-globe { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M2%2012h20'%2F%3E%3Cpath%20d%3D'M12%202a15%2015%200%200%201%204%2010%2015%2015%200%200%201-4%2010%2015%2015%200%200%201-4-10%2015%2015%200%200%201%204-10z'%2F%3E%3C%2Fsvg%3E"); }
.di-bank { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2021h18'%2F%3E%3Cpath%20d%3D'M3%2010h18'%2F%3E%3Cpath%20d%3D'M5%206l7-3%207%203'%2F%3E%3Cpath%20d%3D'M4%2010v11'%2F%3E%3Cpath%20d%3D'M20%2010v11'%2F%3E%3Cpath%20d%3D'M8%2014v3'%2F%3E%3Cpath%20d%3D'M12%2014v3'%2F%3E%3Cpath%20d%3D'M16%2014v3'%2F%3E%3C%2Fsvg%3E"); }
.di-mail { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'3'%20y%3D'5'%20width%3D'18'%20height%3D'14'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'm3%207%209%206%209-6'%2F%3E%3C%2Fsvg%3E"); }
.di-check { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%206%209%2017l-5-5'%2F%3E%3C%2Fsvg%3E"); }
.di-shield { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z'%2F%3E%3Cpath%20d%3D'm9%2012%202%202%204-4'%2F%3E%3C%2Fsvg%3E"); }
.di-heart { --di: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.8%204.6a5.5%205.5%200%200%200-7.8%200L12%205.6l-1-1a5.5%205.5%200%200%200-7.8%207.8l1%201L12%2021l7.8-7.6%201-1a5.5%205.5%200%200%200%200-7.8z'%2F%3E%3C%2Fsvg%3E"); }
/* ---- מעטפת העמוד ---- */
.donate-page {
max-width: 980px;
margin-inline: auto;
}
.donate-page,
.donate-page * { box-sizing: border-box; }
/* ---- פתיח חם (מכתב תודה) ---- */
.donate-intro {
text-align: center;
margin: 0 0 clamp(26px, 4vw, 42px);
}
.donate-intro .donate-heart {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--green-deep);
font-size: 30px;
margin-bottom: 14px;
}
.donate-intro p { margin: 0 auto 8px; max-width: 60ch; color: var(--ink); }
.donate-intro .donate-sign { margin-top: 14px; color: var(--muted); font-weight: 700; line-height: 1.5; }
.donate-intro .donate-sign small { display: block; font-weight: 400; font-size: .9rem; }
/* ---- כפתורי pill משותפים ---- */
.donate-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
font-family: var(--font-head);
font-weight: 800;
font-size: 1.05rem;
line-height: 1.2;
padding: 13px 28px;
border-radius: var(--r-pill);
text-decoration: none;
box-shadow: var(--shadow);
cursor: pointer;
transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.donate-btn .di { width: 1.15em; height: 1.15em; }
.donate-btn--green { background: var(--green); color: #fff; }
.donate-btn--green:hover { background: var(--green-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.donate-btn--brand { background: var(--brand); color: #fff; }
.donate-btn--brand:hover { background: var(--brand-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.donate-btn--ghost { background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
.donate-btn--ghost:hover { background: var(--brand); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow); }
/* ---- פאנל ראשי: טופס תרומה מוטמע ---- */
.donate-primary {
background: var(--brand-soft);
border: 1px solid var(--line);
border-top: 4px solid var(--green);
border-radius: var(--r);
box-shadow: var(--shadow);
padding: clamp(18px, 3vw, 30px);
margin: 0 0 clamp(30px, 4.5vw, 46px);
}
.donate-primary h2 {
font-family: var(--font-head);
color: var(--brand-deep);
font-weight: 800;
font-size: clamp(1.4rem, 3vw, 1.95rem);
margin: 0 0 4px;
text-align: center;
border: 0;
}
.donate-primary .donate-sub { text-align: center; color: var(--muted); margin: 0 auto 18px; max-width: 52ch; }
/* מסגרת רספונסיבית לטופס המוטמע */
.donate-embed {
position: relative;
width: 100%;
height: clamp(680px, 86vh, 900px);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.donate-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* שורת אבטחה + כפתור פתיחה בחלון חדש (גם נפילה אם ההטמעה נחסמת) */
.donate-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 18px;
margin-top: 16px;
}
.donate-secure {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--green-deep);
font-weight: 700;
font-size: .98rem;
}
.donate-secure .di { width: 18px; height: 18px; }
/* ---- כותרת מקטע "דרכים נוספות" ---- */
.donate-section-title {
text-align: center;
font-family: var(--font-head);
color: var(--ink);
font-weight: 800;
font-size: clamp(1.3rem, 2.6vw, 1.7rem);
margin: 0 0 6px;
border: 0;
}
.donate-section-sub { text-align: center; color: var(--muted); margin: 0 0 22px; }
/* ---- כרטיסי דרכי תרומה ---- */
.donate-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
margin: 0 0 clamp(28px, 4vw, 44px);
}
.donate-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r);
box-shadow: var(--shadow-sm);
padding: 28px 22px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.donate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.donate-ico {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 50%;
background: var(--brand-soft);
color: var(--brand);
margin-bottom: 14px;
}
.donate-ico .di { width: 28px; height: 28px; }
.donate-card h3 {
font-family: var(--font-head);
color: var(--brand-deep);
font-weight: 800;
font-size: 1.2rem;
margin: 0 0 6px;
}
.donate-card p { color: var(--muted); font-size: .98rem; line-height: 1.55; margin: 0 0 18px; }
.donate-card .donate-btn { margin-top: auto; } /* כפתור נדבק לתחתית → כרטיסים מיושרים */
/* ---- "דרכים נוספות" (בנק/צ'ק) — disclosure מתקפל ---- */
.donate-more {
border: 1px solid var(--line);
border-radius: var(--r);
background: var(--surface);
margin: 0 0 clamp(24px, 4vw, 40px);
overflow: hidden;
}
.donate-more > summary {
cursor: pointer;
list-style: none;
padding: 16px 22px;
font-family: var(--font-head);
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
display: flex;
align-items: center;
gap: 10px;
}
.donate-more > summary::-webkit-details-marker { display: none; }
.donate-more > summary .di { color: var(--brand); width: 20px; height: 20px; }
.donate-more > summary .donate-more-x {
margin-inline-start: auto;
font-weight: 800;
font-size: 1.4rem;
color: var(--brand);
line-height: 1;
}
.donate-more[open] > summary .donate-more-x::after { content: '\2212'; } /* − כשפתוח */
.donate-more:not([open]) > summary .donate-more-x::after { content: '+'; } /* + כשסגור */
.donate-more-body { padding: 2px 22px 18px; }
.donate-detail {
display: grid;
grid-template-columns: 150px 1fr;
gap: 2px 14px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.donate-detail:first-child { border-top: 0; }
.donate-detail .donate-k { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.donate-detail .donate-k .di { color: var(--brand); width: 18px; height: 18px; }
.donate-detail .donate-v { margin: 0; color: var(--muted); line-height: 1.7; }
/* ---- שורת אמון (פטור ממס / מאובטח) ---- */
.donate-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 0 0 clamp(20px, 3vw, 30px);
}
.donate-trust span {
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 8px 16px;
font-weight: 700;
font-size: .92rem;
color: var(--ink);
}
.donate-trust .di { width: 16px; height: 16px; color: var(--green-deep); }
/* ---- שורת עזרה ---- */
.donate-help { text-align: center; color: var(--muted); font-size: .98rem; margin: 0; }
.donate-help a { color: var(--brand); font-weight: 700; }
/* ---- מובייל ---- */
@media (max-width: 600px) {
.donate-detail { grid-template-columns: 1fr; gap: 4px; }
.donate-embed { height: clamp(640px, 90vh, 840px); }
.donate-actions { flex-direction: column; }
.donate-actions .donate-btn { width: 100%; }
}