: ה-section נושא
max-inline-size + margin-inline:auto, ורקע עליו היה נעצר ברוחב המכל
ומצייר מלבן כהה באמצע לבן. ה-div הוא ילד ישיר של .sc-campaign, שרץ
ברוחב מלא ב-`sinit-layout--full`. **בלי 100vw** — הוא מודד את המסך
כולל פס הגלילה ומייצר גלילה אופקית.
הצבעים דרך טוקני התבנית עם נפילה מפורשת: הרכיב חייב להיראות שלם גם
בתבנית שאינה sinit_front, שבה --sinit-dark פשוט לא קיים. */
.sc-endorse-band--dark {
background: var(--sinit-dark, #0b2545);
}
.sc-endorse-band--dark .sc-section__head h2 { color: var(--sinit-on-dark, #f8f5ee); }
.sc-endorse-band--dark .sc-section__lead { color: var(--sinit-on-dark-soft, rgba(248, 245, 238, .74)); }
/* המכל מתכווץ בדיוק לתיבת הקלף (fit-content) ולא לרוחב הזמין: העיטורים
ממוקמים באחוזים מהמכל, וכל פיקסל שבו הוא רחב מהתמונה היה מרחיק אותם
מהקלף. */
.sc-endorse__frame {
/*
* שוליים שקופים בתוך קובץ הקלף, כאחוז מהקובץ.
*
* **הקובץ הוחלף ב-2026-08-20 ל-`IMG-20260820-WA0002.jpg`, ושני הערכים
* ירדו ל-0.** הקובץ החדש הוא 1600x956 ב-**24bit JPEG, כלומר בלי ערוץ
* אלפא בכלל**: אין בו שוליים שקופים, והוא פוסטר שלם עם מסגרת שחורה
* של 19px (1.2%) בכל צד. נמדד בסריקת פיקסלים, לא בעין.
*
* הקובץ הקודם, `el8.png` (2082x830), היה ההפך: התיבה האטומה שלו הייתה
* x 537..1583 — הקלף הנראה היה 50.3% מהקובץ בלבד, ומכאן 24%/15%.
* ההיסטוריה נשמרת כאן כי היא מסבירה למה המנגנון קיים.
*
* ⚠️ **שני ערכים שחייבים להשתנות יחד עם הקובץ.** קובץ עם שוליים
* שקופים ⟵ למדוד מחדש את תיבת האטימות ולהחזיר את האחוזים, אחרת
* העיטורים נוחתים באוויר במקום על קצה הקלף.
*/
--sc-letter-trim-inline: 0%;
--sc-letter-trim-block: 0%;
position: relative;
inline-size: fit-content;
max-inline-size: 100%;
margin-inline: auto;
}
/* גודל טבעי עד לרוחב המכל, ולא inline-size:100% — עם מכל fit-content
זו הגדרה מעגלית. */
.sc-endorse__letter {
display: block;
inline-size: auto;
max-inline-size: 100%;
block-size: auto;
}
/* המדליה על הקצה המוביל, החותם על הפינה הנגררת-תחתונה — תכונות לוגיות,
כך שהפריסה מתהפכת נכון בעברית מול אנגלית. כל עיטור **חוצה** את קצה
הקלף (ה-calc מפחית מהשוליים), כמו באתר הייחוס, ולא יושב כולו בפנים. */
.sc-endorse__medal,
.sc-endorse__badge {
position: absolute;
block-size: auto;
/* אינו חוסם את הקלף לבחירת טקסט/לחיצה; עיטור בלבד */
pointer-events: none;
}
/* 11% ולא 8%: המקטע חזר למכל של 1200px (ראו למעלה), ו-8% ממנו הם ~93px —
בחותם יש שתי שורות טקסט קטן, וזה כבר לא נקרא. 11% שומר על ~128px,
הגודל שבו הוא הוצג כשהמקטע היה ברוחב מלא. */
.sc-endorse__medal {
inline-size: 11%;
inset-block-start: 22%;
inset-inline-start: calc(var(--sc-letter-trim-inline) - 4%);
}
.sc-endorse__badge {
inline-size: 5%;
inset-block-end: calc(var(--sc-letter-trim-block) - 4%);
inset-inline-end: calc(var(--sc-letter-trim-inline) - 3%);
}
/* מסך צר: העיטורים יוצאים מהמיקום המוחלט ויורדים לשורה מתחת לקלף.
11% מ-400px זה 44px, וטקסט בתוך חותם בגודל כזה אינו קריא — ובאותה
נשימה הם גם היו מכסים חלק ניכר מהחתימות. מתחת לקלף הם מוצגים עד 84px.
**הבלוק הזה חייב לשבת אחרי כללי הבסיס**: מדיה קווארי אינו מוסיף
ספציפיות, ולכן מיקום מוחלט שהוגדר אחריו היה גובר עליו.
⚠️ **כאן ישבה הגדלה של התמונה ל-190% עם margin-inline: -45%.** היא
נכתבה ב-1.14.0 כדי לפצות על השוליים השקופים של `el8.png` (הקלף הנראה
היה 50.3% מהקובץ). **הקובץ הוחלף בפוסטר מלא ללא אלפא, וההגדלה הפכה
להרס:** היא הייתה חותכת ~24% מכל צד, כולל המסגרת. הוסרה יחד עם
`overflow: hidden` על הפס, שהיה קיים רק כדי לחתוך את אותה גלישה.
קובץ עתידי עם שוליים שקופים ⟵ המנגנון חוזר, יחד עם --sc-letter-trim. */
@media (max-width: 767px) {
.sc-endorse__frame {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
/* fit-content על מסגרת flex עם ילד ב-flex-basis:100% היא הגדרה
מעגלית; כאן הרוחב הזמין מפורש. */
inline-size: 100%;
}
.sc-endorse__letter { flex: 1 0 100%; }
.sc-endorse__medal,
.sc-endorse__badge {
position: static;
inline-size: auto;
max-inline-size: 84px;
}
}
/* ============================================================ עגלה */
.sc-cart__panel {
display: grid;
gap: 1.5rem;
align-items: start;
grid-template-columns: 1fr;
padding: 1.5rem;
background: var(--sc-bg-soft);
border-radius: var(--sc-radius);
}
@media (min-width: 768px) {
.sc-cart__panel { grid-template-columns: 1fr 300px; }
}
.sc-cart__list { margin: 0; padding: 0; list-style: none; }
.sc-cart__row {
display: grid;
gap: .75rem;
grid-template-columns: 64px 1fr auto;
align-items: center;
padding-block: .75rem;
border-block-end: 1px solid var(--sc-line);
}
.sc-cart__row:last-child { border-block-end: 0; }
.sc-cart__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--sc-radius); }
.sc-cart__name { font-weight: 600; }
.sc-cart__name a { color: var(--sc-ink); }
.sc-cart__qty { font-size: .875rem; color: var(--sc-ink-soft); }
.sc-cart__price { font-weight: 700; white-space: nowrap; }
/* מסך צר: שלוש עמודות (תמונה · שם · מחיר) דוחסות את השם לשתי מילים בשורה.
המחיר יורד מתחת לשם, בעמודה שלו. **הבלוק יושב אחרי כללי הבסיס בכוונה** —
אותה ספציפיות בדיוק, ולכן כלל מאוחר יותר גובר גם כשהוא מחוץ למדיה קווארי.
⚠️ מצב `multi` בלבד — המקטע הזה אינו מרונדר כש-campaign_mode הוא single. */
@media (max-width: 480px) {
.sc-cart__row { grid-template-columns: 48px 1fr; }
.sc-cart__thumb img { width: 48px; height: 48px; }
.sc-cart__price { grid-column: 2; }
}
.sc-cart__summary {
padding: 1.25rem;
background: var(--sc-bg);
border: 1px solid var(--sc-line);
border-radius: var(--sc-radius);
text-align: center;
}
.sc-cart__count { margin: 0 0 .25rem; color: var(--sc-ink-soft); }
.sc-cart__total { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 700; }
.sc-cart__checkout { display: block; }
.sc-cart__note { margin: .75rem 0 0; font-size: .8rem; color: var(--sc-ink-soft); }
/* ============================================================ סרגל צף */
.sc-stickybar {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 95;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: .75rem 1rem;
/* בטלפון הסרגל נצמד לתחתית המסך, ושורת הכפתורים נופלת מתחת ל-home
indicator של אייפון. env() מחזיר 0 היכן שאין safe area. */
padding-block-end: max(.75rem, env(safe-area-inset-bottom));
background: var(--sc-bg);
border-block-start: 1px solid var(--sc-line);
box-shadow: 0 -4px 12px rgba(16, 24, 40, .1);
}
.sc-stickybar[hidden] { display: none; }
.sc-stickybar__total { font-weight: 700; }
/* הסרגל צף מעל התוכן. בלי ריווח בתחתית העמוד הוא מכסה את סוף המקטע האחרון,
ובלי הרמת כפתור ״חזרה למעלה״ של התבנית השניים יושבים זה על זה. */
@media (max-width: 767px) {
.sc-campaign:has(.sc-stickybar:not([hidden])) { padding-block-end: 5rem; }
body:has(.sc-stickybar:not([hidden])) .sinit-totop { inset-block-end: 5.5rem; }
}
@media (min-width: 768px) {
.sc-stickybar { inset-inline-start: auto; inset-block-end: 1rem; inset-inline-end: 1rem; border-radius: var(--sc-radius); border: 1px solid var(--sc-line); }
}
/* ============================================================ הודעה */
.sc-toast {
position: fixed;
inset-block-start: 1rem;
inset-inline-end: 1rem;
z-index: 300;
padding: .8rem 1.2rem;
border-radius: var(--sc-radius);
background: #2f9e44;
color: #fff;
font-weight: 600;
box-shadow: var(--sc-shadow);
opacity: 0;
transform: translateY(-8px);
transition: opacity .2s ease, transform .2s ease;
pointer-events: none;
}
.sc-toast.is-visible { opacity: 1; transform: translateY(0); }
.sc-toast.is-error { background: #e03131; }
@media (prefers-reduced-motion: reduce) {
.sc-prize, .sc-toast, .sc-video__play { transition: none; }
}
/* ============================================================ מקטע הרכישה
מצב חד-פרסי: פס כותרת, סולם חבילות, פרטים ותשלום — הכל במסמך אחד.
הפריסה נגזרה מאתר הייחוס (hatzalahraffle.com): מקטע ממורכז ברוחב
מוגבל, פס כותרת כהה ברוחב מלא, ומתחתיו רשת חבילות של עמודה לכל
חבילה. שם זה `#pacs2 { grid-template-columns: 1fr ×5; max-width:
1200px; gap: 20px }` — וכך גם כאן בדסקטופ (ראו .sc-packs). */
/* הרוחב, המרכוז והריפוד עברו ל-.sc-section (שהאלמנט נושא גם אותו), כי כל
המקטעים בעמוד היו זקוקים להם — לא רק זה. כאן נשאר מה שייחודי למקטע. */
.sc-packages { text-align: center; }
/* פס הכותרת. באתר הייחוס: רקע שחור, טקסט לבן, 30px.
כאן הצבע נגזר מטוקן התבנית כדי שהמיתוג יישאר במקום אחד. */
.sc-titlebar {
margin: 0 0 1.5rem;
padding: .75rem 1.25rem;
background: var(--sinit-primary, #0b2545);
color: #fff;
font-size: clamp(1.25rem, 1rem + 1.6vw, 1.9rem);
font-weight: 800;
line-height: 1.25;
}
/* הפס כולו הוא הקישור אל הקלפים: display:block כדי ששטח הלחיצה יהיה הפס
ולא רק רוחב המילים. הצבע יורש מהפס — קישור בכחול ברירת מחדל על רקע
נייבי אינו קריא. */
.sc-titlebar__link {
display: block;
color: inherit;
text-decoration: none;
}
/* על פס מלא בצבע אחד, קו תחתון הוא ההיזון החוזר היחיד שנראה. הוא גם
הסימן היחיד למקלדת, ולכן :focus-visible מקבל גם מתאר. */
.sc-titlebar__link:hover,
.sc-titlebar__link:focus-visible { text-decoration: underline; }
.sc-titlebar__link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
.sc-titlebar__arrow {
margin-inline-start: .5em;
font-weight: 400;
}
/* הפס החוזר, מיד מעל רשת הקלפים. text-align מפורש כי הוא יושב בתוך
.sc-steps שהוא `text-align: start`, בעוד הפס העליון יורש את המרכוז
של .sc-packages — בלי זה שני פסים זהים היו מיושרים אחרת. */
.sc-titlebar--step {
margin-block-start: 0;
text-align: center;
}
.sc-packages .sc-section__lead {
max-width: 60ch;
margin-inline: auto;
margin-block-end: 1.5rem;
color: var(--sc-ink-soft);
}
/* ------------------------------------------------------- טקסט About
בין פס הכותרת לקלפים. .sc-packages הוא text-align:center, וטקסט מאמר
ממורכז אינו קריא — לכן start מפורש כאן.
הקיפול הוא checkbox + label, בלי JavaScript: בלי JS הטקסט נשאר פתוח
וקריא במקום להיחתך ללא דרך לפתוח אותו. */
.sc-about {
max-inline-size: 70ch;
margin-inline: auto;
margin-block-end: 2rem;
text-align: start;
}
/* max-block-size ולא block-size: טקסט קצר מ-11rem לא מקבל רווח מיותר,
והדהייה למטה נשארת גם אז — ראו הכלל שמכבה אותה. */
.sc-about__body {
position: relative;
max-block-size: 11rem;
overflow: hidden;
}
/* הדהייה אומרת "יש כאן עוד", לפני שקוראים את התווית. הרקע נגזר מטוקן
התבנית עם נפילה ללבן, כדי שהמעבר לא יהיה מלבן אפור על רקע צבעוני. */
.sc-about__body::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 4rem;
background: linear-gradient(to bottom, transparent, var(--sc-bg, #fff));
pointer-events: none;
}
.sc-about__state:checked ~ .sc-about__body { max-block-size: none; }
.sc-about__state:checked ~ .sc-about__body::after { content: none; }
/* קישור טקסט ולא כפתור, באותה שפה של .sc-redo: הפעולה כאן היא קריאה,
ולא צריכה להתחרות בכפתורי בחירת החבילה שמיד מתחתיה. */
.sc-about__more {
display: inline-block;
margin-block-start: .5rem;
color: var(--sc-primary);
font-size: .9375rem;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.sc-about__more:hover { filter: brightness(.85); }
/* ה-input הוא .visually-hidden (position:absolute + clip) ולכן עדיין מקבל
פוקוס — אבל אינו נראה. המתאר על התווית הוא הסימן היחיד למשתמש מקלדת. */
.sc-about__state:focus-visible ~ .sc-about__more {
outline: 2px solid var(--sc-primary);
outline-offset: 3px;
}
.sc-about__more-close { display: none; }
.sc-about__state:checked ~ .sc-about__more .sc-about__more-open { display: none; }
.sc-about__state:checked ~ .sc-about__more .sc-about__more-close { display: inline; }
/* ---------------------------------------------------- שלושת השלבים */
/* השלבים יושבים באותו רוחב של פס הכותרת (.sc-packages), לא ב-1000px
משלהם — אחרת הרשת צרה מהפס שמעליה ונראית כמו קופסה בתוך קופסה.
ובלי מסגרת/צל לשלב: הקלפים עצמם הם המסגרות של המקטע, ומסגרת סביבם
הייתה מסגרת סביב מסגרת. ההפרדה בין שלבים היא ריווח + המספר העגול. */
.sc-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
text-align: start;
}
/* בטלפון הריווח בין השלבים הוא גלילה טהורה — הצרה כאן קרובה יותר, ולכן
2rem מספיק להפריד. מהטאבלט ומעלה חוזר הריווח המקורי. */
.sc-step {
margin-block-end: 2rem;
padding: 0;
}
.sc-step:last-child { margin-block-end: 0; }
@media (min-width: 768px) {
/* `.sc-step:last-child` שלמעלה ספציפי יותר וגובר בלי לחזור עליו כאן */
.sc-step { margin-block-end: 2.5rem; }
}
/* חשיפה בבחירה (data-sc-gated): ה-JS מסתיר עם hidden ומגלה עם is-revealed.
[hidden] מפורש — כלל display על .sc-step היה מבטל את ה-UA default בשקט.
scroll-margin: הגלילה לשלב 2 לא נבלעת מתחת לכותרת הנצמדת של התבנית. */
.sc-step[hidden] { display: none; }
.sc-step { scroll-margin-block-start: calc(var(--sinit-header-h, 76px) + 1rem); }
.sc-step.is-revealed { animation: sc-reveal .35s ease-out both; }
@keyframes sc-reveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.sc-step__title {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1.25rem;
font-size: 1.15rem;
}
/* המספר עגול ומודגש — הוא מה שהופך את הטופס לשלושה שלבים ברורים
במקום עמוד ארוך אחד. aria-hidden ב-HTML: הכותרת עצמה כבר אומרת מה זה. */
.sc-step__num {
display: grid;
place-items: center;
inline-size: 2rem;
block-size: 2rem;
flex: none;
border-radius: 50%;
background: var(--sinit-accent, #c8a34a);
color: var(--sc-ink);
font-weight: 800;
font-size: .95rem;
}
.sc-step__body { margin: 0; padding: 0; border: 0; }
/* ---------------------------------------------------- קלפי החבילות */
/* **טלפון: קלף אחד בשורה** (הכרעת המשתמש).
בטלפון הקלף הוא `.sc-pack__art` — טקסט חי, ולכן הוא נשאר קריא בכל רוחב;
העמודה האחת נשארת בכל זאת, כי שתי עמודות של ~155px דוחסות את המספר הגדול
ואת כפתור ה-CTA. תקרה של 22rem כדי שקלף בודד לא יימתח לרוחב טאבלט.
align-items: start — **לא** stretch (ברירת המחדל של grid). הקלפים אינם
באותו גובה (קלף עם תיאור קצר גבוה יותר), ו-stretch מתח כל קלף לגובה
הגבוה שבשורה; ה-outline של הקלף הנבחר צויר אז סביב חלל ריק מתחתיו.
עכשיו כל קלף בגובה התוכן שלו, צמוד לראש השורה. */
.sc-packs {
display: grid;
gap: 1rem;
grid-template-columns: minmax(0, 1fr);
max-inline-size: 22rem;
justify-content: center;
align-items: start;
margin-inline: auto;
margin-block: 0;
padding: 0;
list-style: none;
}
/* מטאבלט ומעלה: התקרה של 220px היא העיקר, לא הרצפה. עם `minmax(150px, 1fr)`
שתי חבילות היו נמתחות לחצי מ-1200px כל אחת — קלף בגובה חצי מסך במקום קלף.
התקרה משאירה אותן בגודל קלף, ו-justify-content ממרכז את השורה החלקית. */
@media (min-width: 576px) {
.sc-packs {
grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
max-inline-size: none;
}
}
/* דסקטופ: חמש עמודות שוות בדיוק, כמו באתר הייחוס (#pacs2). auto-fit
נתן ארבע בשורה ב-1000px, ושורה שנייה שלא יושבת מתחת לראשונה. חמש
עמודות קבועות = כל קלף בשורה השנייה בדיוק מתחת לזה שמעליו.
:has(> :nth-child(5)) — רק כשיש לפחות חמש חבילות; קמפיין עם שתיים־שלוש
נשאר ממורכז ב-auto-fit במקום להידחק לשמאל עם עמודות ריקות.
דפדפן בלי :has נופל ל-auto-fit — עדיין נכון, רק לא בדיוק חמש. */
@media (min-width: 992px) {
.sc-packs:has(> :nth-child(5)) {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1.25rem;
}
}
/* הקלף כולו הוא שטח הלחיצה. הרדיו נשאר ב-DOM (visually-hidden) ולא
display:none — אחרת הוא יוצא מסדר הטאב ומקוראי מסך.
**בלי ריפוד, בלי מסגרת ובלי רקע.** הקלף הוא יצירה גרפית מקצה לקצה — פס
כותרת כהה, גוף בגרדיאנט וכפתור — בין אם היא ה-PNG של המוצר (מ-768px)
ובין אם היא `.sc-pack__art` (טלפון, וגם מוצר בלי תמונה בכל רוחב). כרום
של קלף מסביב היה מצייר מסגרת סביב מסגרת. */
.sc-pack__card {
display: block;
overflow: hidden;
border-radius: var(--sinit-radius, 10px);
cursor: pointer;
text-align: center;
transition: transform .15s ease;
}
/* מצב נבחר, hover ופוקוס: outline ולא border. בקלף בלי ריפוד, border של
2px היה מוסיף 4px לרוחב ומזיז את כל השורה בכל לחיצה; outline לא תופס
מקום בפריסה. הפוקוס יושב על הרדיו המוסתר, ולכן הטבעת מצוירת על הקלף —
בלעדיה ניווט במקלדת לא מראה איפה הוא נמצא. */
.sc-pack__card:hover,
.sc-pack__radio:checked + .sc-pack__card,
.sc-pack__radio:focus-visible + .sc-pack__card {
outline: 3px solid var(--sinit-accent, #c8a34a);
outline-offset: 2px;
}
.sc-pack__radio:checked + .sc-pack__card { transform: translateY(-2px); }
.sc-pack__media img {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: inherit;
}
/* ------------------------------------- קלף החבילה ב-HTML
שחזור של ה-PNG-ים שעל השרת. **הצבעים נדגמו מהקבצים עצמם**, לא נאמדו.
⚠️ **העיצוב הוחלף ב-2026-08-19 והפלטה כאן נמדדה מחדש** מ-150.png שעל
השרת (533x454): פס הכותרת #00113D בגובה 19.6% מהקלף עם טקסט #ECE5E1,
הגוף #ED6F00 **אחיד ולא גרדיאנט**, המספרים והקווים #FEF5ED, הכפתור
#FF0000 עם טקסט לבן. הפלטה הקודמת (#701000 + גרדיאנט כתום-זהב) הייתה
של הסבב הקודם של הקבצים.
ערכים קשיחים ולא משתני התבנית — זו הפלטה של החומר המודפס של הקמפיין,
ואם התבנית תוחלף הקלפים עדיין צריכים להיראות כמו התמונות שלצדם.
**הקלף הזה הוא מה שרואים בטלפון**, ולכן חוסר התאמה בינו לבין ה-PNG
אינו פרט אסתטי: הוא שתי גרסאות שונות של אותה חבילה. */
.sc-pack__art {
display: flex;
flex-direction: column;
background: #ed6f00;
color: #fef5ed;
}
.sc-pack__tickets {
display: block;
padding: .55rem .5rem;
background: #00113d;
color: #ece5e1;
font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem);
font-weight: 800;
line-height: 1.15;
text-transform: uppercase;
}
/* הנקודות שמסגרות את הכותרת ב-PNG. פסאודו ולא טקסט: קישוט שאין סיבה
שקורא מסך יקריא או שיודבק בהעתקה. */
.sc-pack__tickets::before { content: "\2022\00a0"; }
.sc-pack__tickets::after { content: "\00a0\2022"; }
.sc-pack__body {
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem;
padding: 1rem .75rem 1.15rem;
}
/* המספר הגדול הוא **התשלום הבודד**, כמו ב-PNG. ה-X10 שלידו קטן ויושב על
קו הבסיס — הוא מכמת את המספר שלפניו ולא מספר בפני עצמו. */
.sc-pack__amount {
display: block;
font-size: clamp(2.5rem, 1.5rem + 5vw, 3.75rem);
font-weight: 800;
line-height: 1;
color: #fef5ed;
}
.sc-pack__times {
font-size: .3em;
font-weight: 800;
margin-inline-start: .05em;
}
/* קו — סכום — קו, כמו ב-PNG. הקווים הם פסאודו ולא border: כך הם ממלאים
את מה שנשאר אחרי הסכום ומתקצרים יחד איתו, במקום להימתח לרוחב הקלף. */
.sc-pack__price {
display: flex;
align-items: center;
gap: .6rem;
inline-size: 100%;
color: #fef5ed;
font-size: clamp(1rem, .85rem + .6vw, 1.35rem);
font-weight: 800;
line-height: 1.1;
}
.sc-pack__price::before,
.sc-pack__price::after {
content: "";
flex: 1 1 0;
block-size: 2px;
background: #fef5ed;
}
/* התיאור הקצר של המוצר. זה מה שמפריד בין שתי חבילות שנקראות אותו שם. */
.sc-pack__desc {
display: block;
max-inline-size: 24ch;
color: #fef5ed;
font-size: .8125rem;
font-weight: 600;
line-height: 1.35;
}
.sc-pack__bonus {
display: block;
font-size: .8125rem;
font-weight: 700;
color: #fef5ed;
}
/* `span` ולא `button` — ראו ה-layout. `pointer-events: none` כדי שהלחיצה
תמיד תגיע ל-label ולא תיעצר על אלמנט שנראה כמו כפתור אבל אינו כזה. */
.sc-pack__cta {
display: block;
margin-block-start: .55rem;
padding: .5rem 1.5rem;
border-radius: 999px;
background: #ff0000;
box-shadow: 0 3px 6px rgba(0, 17, 61, .3);
color: #fff;
font-size: clamp(1rem, .85rem + .6vw, 1.35rem);
font-weight: 800;
text-transform: uppercase;
pointer-events: none;
}
/* מ-576px הרשת עוברת לעמודות של עד 220px, כלומר הקלף **מצטמצם** דווקא
כשהמסך גדל. clamp שנשען על vw בלבד היה ממשיך להגדיל את המספר ומוציא
״$2,500״ אל מחוץ לקלף. התקרות כאן נגזרו מהמקרה הרחב ביותר (שש תווים). */
@media (min-width: 576px) {
.sc-pack__tickets { font-size: clamp(.95rem, .8rem + .5vw, 1.25rem); }
.sc-pack__amount { font-size: clamp(1.75rem, 1rem + 2.5vw, 2.5rem); }
}
/* ------------------------------------------- טלפון: רצועות במקום קלפים
**בקשת המשתמש: ״סטריפים רחבים ונמוכים״.** הקלף האנכי — פס כותרת, מספר
ענק, מחיר, תיאור וכפתור זה מתחת לזה — לוקח כמעט מסך שלם לכל חבילה,
וחמש חבילות הפכו לחמישה מסכי גלילה לפני שהתורם ראה את הטופס. הרצועה
שמה את אותם רכיבים על ציר האופק: תווית ⟵ מחיר ⟵ כפתור.
**זה מחליף את ״הכפתור לרוחב״ מ-1.12.0**, ולא מתווסף לו: בתוך רצועה
בגובה שורה אחת כפתור מתוח מקצה לקצה היה הרצועה כולה. בלוק אחד ל-767px
ולא שניים מתחרים — שני כללים באותו breakpoint על אותו סלקטור נחתכים
לפי סדר הקובץ, וזה בדיוק סוג הקוד המת שכבר נתפס כאן פעמיים.
עד 767px בדיוק — הסף שבו .sc-pack__card--image מחליף את קלף ה-HTML
בתמונת המוצר, כלומר בדיוק הטווח שבו הרצועה נראית בכלל.
**אחרי כללי הבסיס**: מדיה קווארי אינו מוסיף ספציפיות. */
@media (max-width: 767px) {
/* עמודה אחת ברוחב מלא. התקרה של 22rem היא מה שהחזיק את הקלף בגודל
קלף; רצועה, בהגדרה, נמתחת. */
.sc-packs {
grid-template-columns: minmax(0, 1fr);
max-inline-size: none;
gap: .6rem;
}
/* הציר מתהפך: התווית והגוף זה לצד זה. `stretch` (ברירת המחדל) הוא
מה שמותח את פס הנייבי לכל גובה הרצועה במקום להשאירו כותרת. */
.sc-pack__art { flex-direction: row; align-items: stretch; }
/* התווית היא עכשיו עמודה מובילה ולא פס עליון. הרוחב ב-clamp על אחוז:
״25 TICKETS״ צריך יותר מ״1 TICKET״, ורוחב קבוע היה שובר את הארוך
או מבזבז שליש מהרצועה על הקצר. */
.sc-pack__tickets {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 clamp(5.5rem, 28%, 8.5rem);
padding: .5rem .45rem;
font-size: clamp(.78rem, .55rem + 1.1vw, 1rem);
}
.sc-pack__body {
flex: 1 1 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: .15rem .6rem;
padding: .4rem .65rem;
text-align: start;
}
.sc-pack__amount { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.15rem); }
/* הקווים סביב המחיר הם `flex: 1 1 0` — הם בולעים כל שטח פנוי. בקלף
האנכי זה בדיוק מה שנדרש; ברצועה, שבה המחיר חולק שורה עם הסכום ועם
הכפתור, הם היו דוחפים את הכפתור אל מחוץ לרצועה. */
.sc-pack__price { inline-size: auto; font-size: .9rem; }
.sc-pack__price::before,
.sc-pack__price::after { display: none; }
/* התיאור והבונוס יורדים לשורה משלהם (basis 100%) ובאים אחרי הכפתור
בסדר הפריסה. חבילה בלי שניהם — והן הרוב — היא רצועה בשורה אחת. */
.sc-pack__desc,
.sc-pack__bonus {
flex: 1 0 100%;
order: 2;
max-inline-size: none;
font-size: .75rem;
}
/* `order: 1` מציב את הכפתור אחרי הסכום והמחיר אך לפני התיאור, ו-margin
אוטומטי דוחף אותו לקצה הנגרר של השורה הראשונה. */
.sc-pack__cta {
order: 1;
align-self: center;
margin-block-start: 0;
margin-inline-start: auto;
padding: .4rem 1.05rem;
font-size: clamp(.85rem, .65rem + 1vw, 1.05rem);
white-space: nowrap;
}
}
/* ------------------- טלפון: קלף HTML · דסקטופ: תמונת המוצר
**הכרעת המשתמש: במובייל לא להשתמש בתמונת המוצר.** שני האלמנטים
מרונדרים, וזה כל המתג ביניהם.
`display: none` הוא גם מה שמונע את ההורדה: אלמנט בלי תיבה לא נכנס
ל-viewport, ותמונת `loading="lazy"` שלא נכנסה אליו אינה נטענת — כלומר
הטלפון לא מוריד את ה-PNG כלל.
המתג נשען על המחלקה `--image` שנכתבת בשרת ולא על `:has()`: בדפדפן בלי
תמיכה ב-`:has()` שני הקלפים היו מוצגים זה מעל זה בדסקטופ. */
.sc-pack__media { display: none; }
@media (min-width: 768px) {
.sc-pack__card--image .sc-pack__media { display: block; }
.sc-pack__card--image .sc-pack__art { display: none; }
}
/* ------------------------------------------- תרומה אחרת: סכום חופשי
**שורה משלה מתחת לרשת, לא קלף שישי** (הכרעת המשתמש). קלף היה נקרא
כחבילה במחיר 1$ — שהוא באמת מחיר היחידה שלו — ובדסקטופ הוא היה נופל
לבדו לשורה שנייה מתחת לחמש העמודות.
**הרוחב הוא התיקון העיקרי בשיפוץ.** האלמנט הוא block בתוך fieldset ברוחב
מלא, כלומר בדסקטופ הוא נמתח ל-1200px של פס הכותרת: תיבה ענקית עם שדה
קטן במרכזה. תקרה של 34rem ומרכוז הופכות אותו לפאנל, ו-34rem הוא גם
הרוחב של תיבת דמי התפעול ושל הסה״כ — שלושתם באותו קו.
מסגרת מלאה + צל במקום מקווקוות: אחרי שיש כאן צל וטיפוגרפיה, הקו
המקווקו נקרא כ״שדה טופס לא גמור״ ולא כ״אפשרות אחרת״. */
.sc-custom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .6rem 1rem;
max-inline-size: 34rem;
margin: 1.75rem auto 0;
padding: 1.25rem;
border: 2px solid var(--sc-line);
border-radius: var(--sc-radius);
background: var(--sc-bg);
box-shadow: var(--sc-shadow);
transition: border-color .15s ease;
}
.sc-custom:hover { border-color: var(--sinit-accent, #c8a34a); }
/* הרדיו מוסתר, ולכן הסימון היחיד שהבחירה נקלטה הוא המסגרת של הפאנל כולו —
בדיוק כמו קלף נבחר. דפדפן בלי :has עדיין עובד לגמרי: הסה״כ מתעדכן
ושלבים 2-3 נפתחים, רק בלי ההדגשה. */
.sc-custom:has(.sc-pack__radio:checked) {
border-color: var(--sinit-accent, #c8a34a);
background: color-mix(in srgb, var(--sinit-accent, #c8a34a) 8%, var(--sc-bg));
}
.sc-pack__radio:focus-visible + .sc-custom__label {
outline: 3px solid var(--sinit-accent, #c8a34a);
outline-offset: 3px;
border-radius: 4px;
}
/* שורה משלה: הכותרת היא מה שמסביר את הפאנל, ולא תווית לצד שדה. */
.sc-custom__label {
flex-basis: 100%;
text-align: center;
margin-block-end: .25rem;
font-weight: 800;
font-size: 1.1rem;
color: var(--sc-ink);
cursor: pointer;
}
/* סימן המטבע והשדה כיחידה אחת, כמו שדה סכום בקופה. הפוקוס מצויר על
התיבה (focus-within) ולא על ה-input, אחרת הטבעת נחתכת בתוך המסגרת. */
.sc-custom__box {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .45rem .9rem;
border: 2px solid var(--sc-line);
border-radius: var(--sc-radius);
background: var(--sc-bg);
}
.sc-custom__box:focus-within {
border-color: var(--sinit-accent, #c8a34a);
outline: 2px solid var(--sinit-accent, #c8a34a);
outline-offset: 1px;
}
.sc-custom__symbol {
font-size: 1.5rem;
font-weight: 800;
line-height: 1;
color: var(--sc-ink-soft);
}
.sc-custom__box input {
inline-size: 7.5rem;
padding: .3rem 0;
border: 0;
background: none;
color: var(--sc-ink);
text-align: center;
font: inherit;
/* מתחת ל-16px Safari מקרב את כל העמוד בכל מיקוד. `font:` מאפס
font-size, ולכן ההגדרה חייבת לבוא אחריו. */
font-size: 1.6rem;
font-weight: 800;
line-height: 1.15;
}
.sc-custom__box input:focus-visible { outline: none; }
/* חיצי ה-spinner של type=number הופכים שדה סכום גדול למשהו שנראה כמו
בורר כמות במחסן. המקלדת והחצים עצמם ממשיכים לעבוד. */
.sc-custom__box input::-webkit-outer-spin-button,
.sc-custom__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-custom__box input { -moz-appearance: textfield; appearance: textfield; }
.sc-custom__box input.is-invalid { color: #c92a2a; }
.sc-custom__box:has(input.is-invalid) { border-color: #c92a2a; background: #fff5f5; }
/* הטווח המותר, בשורה משלו מתחת לשדה. */
.sc-custom__range {
flex-basis: 100%;
text-align: center;
font-size: .8125rem;
color: var(--sc-ink-soft);
}
/* ---------------------------------------------------- שדות התורם */
.sc-fields {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.sc-fields { grid-template-columns: 1fr 1fr; }
/* רחוב ומספר / דירה — שורה מלאה, כמו בכל טופס חיוב */
.sc-field--wide { grid-column: 1 / -1; }
}
.sc-field { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.sc-field[hidden] { display: none; }
.sc-field label { font-weight: 600; font-size: .925rem; }
.sc-field__opt {
font-weight: 400;
font-size: .8125rem;
color: var(--sc-ink-soft);
}
/* הסבר **מתחת** לשדה, לא בתווית: ״גורם מפנה״ הוא שדה שרוב התורמים ישאירו
ריק, וההסבר צריך להיות זמין בלי להרחיב את התווית עצמה. `.sc-field` הוא
flex-column, ולכן זה נופל לשורה משלו בלי הצהרה נוספת. */
.sc-field__hint {
font-size: .8125rem;
color: var(--sc-ink-soft);
}
.sc-field input,
.sc-field select {
inline-size: 100%;
padding: .7rem .85rem;
border: 1px solid var(--sc-line);
border-radius: var(--sc-radius);
background: var(--sc-bg);
color: var(--sc-ink);
font: inherit;
/* **מתחת ל-16px Safari מזיז ומקרב את כל העמוד בכל מיקוד בשדה**, והתורם
מוצא את עצמו מוגדל באמצע מילוי טופס חיוב. `font: inherit` לבדו מספיק
כל עוד sinit_front פעילה (body=16px), אבל הרכיב אמור לעמוד גם בלעדיה —
ההגדרה המפורשת מנתקת את התלות. אחרי `font:` בכוונה: הקיצור מאפס
font-size, ולכן הוא חייב לבוא לפניו. */
font-size: 1rem;
}
.sc-field input:focus-visible,
.sc-field select:focus-visible {
outline: 2px solid var(--sinit-accent, #c8a34a);
outline-offset: 1px;
}
/* השדה השגוי מסומן גם בצבע וגם בהודעה. צבע לבדו לא מספיק —
הודעת השגיאה ב-role="alert" היא מה שקורא מסך מקריא. */
.sc-field input.is-invalid,
.sc-field select.is-invalid { border-color: #c92a2a; background: #fff5f5; }
.sc-field--payments { max-width: 22rem; }
/* ------------------------------- השלמת כתובת אוטומטית (Google Places)
הרשימה היא HTML שלנו ולא ווידג׳ט של גוגל, ולכן היא יורשת את הטיפוגרפיה
והצבעים של הטופס במקום להיראות כמו שתל.
ממוקמת מוחלט מתחת לשדה: בזרימת המסמך היא הייתה דוחפת את כל שדות הרשת
למטה בכל הקלדה. `.sc-field` הוא העוגן, ולכן הוא מקבל position:relative —
וההצהרה הזאת יושבת **אחרי** כלל הבסיס של `.sc-field` שלמעלה, כי בספציפיות
זהה רק הסדר בקובץ מכריע. `inset-inline` מטפל ב-RTL וב-LTR כאחד. */
.sc-field { position: relative; }
.sc-places {
position: absolute;
inset-block-start: 100%;
inset-inline: 0;
z-index: 20;
margin-block-start: .25rem;
border: 1px solid var(--sc-line);
border-radius: var(--sc-radius);
background: var(--sc-bg);
box-shadow: var(--sc-shadow);
overflow: hidden;
}
/* מפורש בכוונה: reset של תבנית שמצהיר `display` על span היה מנצח את
`[hidden]` של הדפדפן, והרשימה הייתה נשארת פתוחה גם אחרי שה-JS סגר. */
.sc-places[hidden] { display: none; }
/* span, לא ul — ראו את ההערה ב-layout: תג ul סוגר פתוח בפרסר. */
.sc-places__list {
display: block;
max-block-size: 17rem;
overflow-y: auto;
}
.sc-places__item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .35rem;
padding: .6rem .85rem;
cursor: pointer;
font-size: .95rem;
border-block-end: 1px solid color-mix(in srgb, var(--sc-line) 60%, transparent);
}
.sc-places__item:last-child { border-block-end: 0; }
/* `.is-active` הוא הסימון של ניווט המקלדת, `:hover` של העכבר — שניהם
נראים זהה, כדי שהמקלדת לא תהיה אזרח סוג ב׳. */
.sc-places__item:hover,
.sc-places__item.is-active {
background: color-mix(in srgb, var(--sinit-accent, #c8a34a) 12%, var(--sc-bg));
}
.sc-places__main { font-weight: 600; color: var(--sc-ink); }
.sc-places__sub { font-size: .8125rem; color: var(--sc-ink-soft); }
/* ייחוס — דרישה של גוגל כשמציגים תוצאות Places בלי מפת גוגל בעמוד. */
.sc-places__attr {
display: block;
padding: .35rem .85rem;
border-block-start: 1px solid var(--sc-line);
background: color-mix(in srgb, var(--sc-line) 18%, var(--sc-bg));
font-size: .75rem;
color: var(--sc-ink-soft);
text-align: end;
}
/* ---------------------------------------------------- סה״כ ואישור */
/* הסה״כ נשאר **מספר אחד** (הכרעת המשתמש) ולא סיכום הזמנה מפורט — אבל הוא
הנתון החשוב במסך, ובשורה אחת עם התווית והפיצול הוא נקרא כמשפט. עכשיו:
פאנל משלו באותו רוחב (34rem) של תיבת דמי התפעול, תווית קטנה מעל, הסכום
גדול, והפיצול לתשלומים מתחתיו. */
.sc-total {
max-inline-size: 34rem;
margin: 0 0 1.25rem;
padding: 1rem 1.25rem;
border-radius: var(--sc-radius);
background: var(--sc-bg-soft);
text-align: center;
}
.sc-total__label {
display: block;
font-size: .8125rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sc-ink-soft);
}
.sc-total__value {
display: block;
margin-block-start: .1rem;
font-size: clamp(2rem, 1.65rem + 1.4vw, 2.5rem);
font-weight: 800;
line-height: 1.1;
color: var(--sc-primary);
}
.sc-total__split {
display: block;
margin-block-start: .3rem;
font-size: .9rem;
color: var(--sc-ink-soft);
}
.sc-total__split[hidden] { display: none; }
.sc-consent {
display: flex;
align-items: flex-start;
gap: .75rem;
margin: 0 0 1.25rem;
font-size: .925rem;
}
/* 1.25rem ולא 1.1rem: זו תיבת סימון חובה שבלעדיה VirtueMart דוחה את ההזמנה
בלי לרמוז למה. 17.6px באצבע זו החטאה, והתורם רואה רק שכלום לא קורה. */
.sc-consent input { margin-block-start: .15rem; flex: none; inline-size: 1.25rem; block-size: 1.25rem; }
.sc-consent a { color: var(--sc-primary); }
/* דמי התפעול: **אפשרות שנבחרת**, לא הערה. עד השיפוץ זו הייתה רצועה חיוורת
ברוחב מלא (1200px) עם תיבה קטנה בקצה — היא נקראה כהודעת מערכת מושבתת.
עכשיו היא פאנל באותו רוחב ובאותה שפה של הפאנלים האחרים: מסגרת 2px,
מסגרת זהב במעבר עכבר, ורקע זהב עדין כשהיא מסומנת — כדי שיהיה **ברור
שהסימון נקלט**, במיוחד כשהוא משנה את הסכום שמתחתיו. */
.sc-fee {
max-inline-size: 34rem;
margin-block-end: 1.25rem;
padding: .9rem 1.1rem;
border: 2px solid var(--sc-line);
border-radius: var(--sc-radius);
background: var(--sc-bg);
font-size: 1rem;
transition: border-color .15s ease;
}
.sc-fee:hover { border-color: var(--sinit-accent, #c8a34a); }
.sc-fee:has(input:checked) {
border-color: var(--sinit-accent, #c8a34a);
background: color-mix(in srgb, var(--sinit-accent, #c8a34a) 8%, var(--sc-bg));
}
.sc-fee label { cursor: pointer; }
/* הסכום הוא מה שהתורם באמת צריך לראות בשורה הזאת. */
.sc-fee__amount { font-weight: 800; color: var(--sc-ink); }
/* תיבות הסימון היו כחול ברירת המחדל של הדפדפן על עמוד נייבי-זהב. נייבי
ולא זהב: סימן ה-V לבן, ועל זהב הניגודיות שלו נמוכה מדי.
⚠️ הכלל חל גם על תיבת התקנון — שתי תיבות צמודות בשני צבעים שונים היו
נראות כתקלה. זה השינוי היחיד בשיפוץ שנוגע באלמנט שאינו חדש. */
.sc-consent input { accent-color: var(--sc-primary); }
.sc-submit { inline-size: 100%; }
@media (min-width: 600px) {
.sc-submit { inline-size: auto; min-inline-size: 16rem; }
}
.sc-error {
margin: 1rem 0 0;
padding: .75rem 1rem;
border: 1px solid #c92a2a;
border-radius: var(--sc-radius);
background: #fff5f5;
color: #c92a2a;
font-weight: 700;
}
.sc-error[hidden] { display: none; }
.sc-error__link { color: #c92a2a; text-decoration: underline; }
.sc-error__detail { font-size: .75rem; font-weight: 400; word-break: break-all; direction: ltr; }
.sc-note { margin: 1rem 0 0; font-size: .8125rem; color: var(--sc-ink-soft); }
/* הטופס ננעל אחרי שההזמנה נוצרה: מכאן והלאה שינוי בו לא ישנה את
מה שנגבה, והשארתו פעיל רק מבלבלת. */
.sc-checkout.is-locked { opacity: .55; pointer-events: none; }
/* ------------------------------------------------- חזרה מהתשלום */
/* יושב **מחוץ** ל-.sc-checkout, ולכן `is-locked` (pointer-events: none)
לא נוגע בו.
**שורת טקסט, לא פאנל.** בגרסה הראשונה זו הייתה תיבה עם רקע, מסגרת ושני
כפתורים — והיא יושבת מיד מעל ״Complete your donation״ וטופס האשראי, כלומר
התחרתה בדיוק בפעולה שהתורם בא לעשות. עכשיו: שורה אחת קטנה ומעומעמת עם שני
קישורי טקסט. מי שמחפש אותה מוצא אותה; מי שבא לשלם לא נעצר בה. */
.sc-redo {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: .25rem .9rem;
max-inline-size: 34rem;
margin: .75rem 0 0;
font-size: .8125rem;
color: var(--sc-ink-soft);
}
.sc-redo[hidden] { display: none; }
.sc-redo__note { margin: 0; }
.sc-redo__actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
}
/* מאפס את מראה הכפתור של .sc-btn: כאן זה קישור טקסט. */
.sc-redo__btn {
padding: 0;
border: 0;
background: none;
color: var(--sc-ink-soft);
font-size: inherit;
font-weight: 600;
text-decoration: underline;
}
/* filter: none — .sc-btn:hover מחיל brightness(.96), שעל טקסט בלי רקע
פשוט לא נראה. ההיזון החוזר כאן הוא הכהיית הצבע. */
.sc-redo__btn:hover { color: var(--sc-ink); filter: none; }
/* בלי מראה כפתור, מסגרת המיקוד היא הדבר היחיד שמראה איפה המקלדת נמצאת. */
.sc-redo__btn:focus-visible {
outline: 2px solid var(--sinit-accent, #c8a34a);
outline-offset: 2px;
}
/* ---------------------------------------------------- טופס האשראי */
/* Stripe מזריקה לכאן iframe ברוחב מלא. min-height מונע קפיצת פריסה
בזמן הטעינה, שנראית למשתמש כאילו הלחיצה לא עשתה כלום. */
.sc-pay {
margin-block-start: 1.5rem;
min-block-size: 24rem;
text-align: start;
}
.sc-pay[hidden] { display: none; }
/* ה-layout של תוסף הסליקה (post_payment.php) מקודד dir="rtl" על העטיפה שלו,
כי הוא נכתב לעמוד העגלה של VM. כאן הכיוון הוא של המסמך. CSS גובר על
התכונה — זה כלל ה-UA stylesheet, ולכן זה עובד בלי לגעת בתוסף. */
.sc-pay .sinit-stripe-redirect[dir] { direction: inherit; }
@media (prefers-reduced-motion: reduce) {
.sc-pack__card { transition: none; }
.sc-pack__radio:checked + .sc-pack__card { transform: none; }
.sc-step.is-revealed { animation: none; }
}