/* bm.css — דף בר המצווה. נבנה אוטומטית מ-site/ (tools/build-wp-plugin.mjs). לא לערוך כאן. */ /* ============================================================ MWM · "בת מצווה עם (א)מהות" — design tokens (single source) נגזר מ-Elementor Global Kit של mwm.org.il + חמשת דוחות המחקר. כל ערך בדף חייב להיות הפניה לטוקן מכאן. ערך מספרי ישיר בתוך transition/animation/border-radius/color = FAIL בביקורת. ============================================================ */ #bm { /* ---- צבע: 9 hex בדיוק. אין עשירי. ---- */ --pink: #E8466C; /* accent יחיד: H1/H2, כפתור ראשי, קישורים, קו קצר. טקסט ≥24px בלבד */ --pink-deep: #C9284F; /* ורוד לטקסט קטן (<24px) ולשגיאות: 5.4:1 על לבן, 4.5:1 על אפרסק (AA) */ --peach: #FEE7DE; /* משטח חם: Hero panel, ערכה, מחיר. לא יותר מ-2 סקשנים צמודים */ --peach-deep: #FCB087; /* קו/פרט קטן בלבד, לעולם לא משטח */ --paper: #FFFFFF; /* משטח 0 */ --paper-2: #F9F9F9; /* משטח 2: FAQ, טופס */ --ink: #414141; /* גוף (kit text) */ --muted: #666666; /* משני. מחליף את #848484 של ה-kit שנכשל ב-AA על אפרסק */ --line: #DDDDDD; /* קווים, מפרידים, גבול שדה במנוחה */ /* ---- טיפוגרפיה: Heebo בלבד, 400/600/700 בלבד ---- */ --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fs-display: clamp(2.125rem, 1.4rem + 3.6vw, 4rem); /* 34→64 H1 (700) */ --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); /* 28→40 H2 (600) — חתימת האתר */ --fs-h3: clamp(1.3125rem, 1.15rem + .8vw, 1.625rem); /* 21→26 H3 (600) */ --fs-lead: clamp(1.125rem, 1rem + .8vw, 1.5rem); /* 18→24 מבוא */ --fs-body: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); /* 17→19 גוף */ --fs-small: .9375rem; /* 15 הערות (לא פחות) */ --fs-price: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); /* 32→44 מחיר (700) */ --fs-quote: clamp(1.375rem, 1.1rem + 1.3vw, 1.75rem); /* 22→28 ציטוט-תצוגה (400) */ --lh-heading: 1.15; --lh-h2: 1.2; --lh-lead: 1.45; --lh-body: 1.65; --measure: 34ch; /* רוחב שורה מקסימלי לגוף עברי */ /* letter-spacing על עברית: תמיד 0. אין טוקן כי אין ערך. */ /* ---- מרווחים ---- */ --s-section: clamp(56px, 8vw, 128px); /* ריפוד סקשן. מתחלף 128/96 בדסקטופ */ --s-section-sm: clamp(40px, 5vw, 96px); --s-block: clamp(32px, 4vw, 64px); /* בין בלוקים בתוך סקשן */ --s-stack: 1rem; /* קצב אנכי בתוך בלוק */ --gutter: 16px; /* מובייל */ --gutter-lg: 32px; /* דסקטופ */ --overlap: 64px; /* חפיפה אסימטרית (Hero panel, ערכה). 0 במובייל */ /* ---- רוחבים ---- */ --container: 1200px; /* טקסט וסקשנים */ --container-wide: 1600px; /* תמונות full-bleed / פריסות */ --container-text: 720px; /* עמודת קריאה */ --container-form: 600px; /* ---- רדיוס: 3 ערכים. כרטיסים = 0. ---- */ --r-pill: 9999px; /* כפתורים בלבד */ --r-img: 4px; /* תמונות ושדות טופס */ --r-circle: 50%; /* מסכת-עיגול אחת לתמונה + badge מספר. פעם-פעמיים בדף */ /* ---- צל: אחד, על אלמנט אחד (כפתור WhatsApp צף) ---- */ --shadow-fab: 0 6px 20px rgba(65, 65, 65, .18); /* ---- תנועה: 3 משכים, 3 עקומות, 3 מרחקים ---- */ --t-fast: 150ms; /* משוב מיידי: צבע כפתור, מסגרת שדה, קו תחתון */ --t-base: 220ms; /* שינוי מצב: FAQ, הופעת WhatsApp */ --t-slow: 320ms; /* כניסה: חשיפה בגלילה. המקסימום. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-settle: cubic-bezier(0.2, 0.8, 0.2, 1); --d-reveal: 12px; --d-rise: 8px; --d-press: 1px; /* ---- בקרים ---- */ --btn-h: 52px; --btn-h-lg: 56px; --btn-px: 28px; --field-h: 52px; --field-fs: 17px; /* ≥16px מונע zoom ב-iOS */ --tap-min: 44px; --focus-ring: 0 0 0 3px var(--paper), 0 0 0 5px var(--pink); } #bm { direction: rtl; font-family: var(--font); color: var(--ink); background: var(--paper); } #bm { overflow-x: clip; } #bm { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; } #bm h1 { font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-heading); color: var(--pink); } #bm h2 { font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--pink); text-align: start; } #bm h3 { font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); } #bm p { max-width: var(--measure); } #bm small, #bm .muted { color: var(--muted); font-size: var(--fs-small); } @media (prefers-reduced-motion: reduce) { #bm { --t-fast: 100ms; --t-base: 120ms; --t-slow: 120ms; --d-reveal: 0px; --d-rise: 0px; --d-press: 0px; } html { scroll-behavior: auto; } #bm *, #bm *::before, #bm *::after { transition-property: opacity, background-color, color, border-color, grid-template-rows, visibility !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; } #bm .reveal { transform: none; } } /* ---- מגן: ברירות מחדל של הדפדפן בתוך הדף, לא של ערכת העיצוב של האתר ---- */ #bm { display: block; font-weight: 400; font-style: normal; font-variant: normal; text-transform: none; text-align: start; text-decoration: none; text-indent: 0; text-shadow: none; word-spacing: normal; white-space: normal; -webkit-text-size-adjust: 100%; } #bm :where(*:not(svg, svg *, img, picture, source)) { all: revert; } /* (svg/img יוצאים מהאיפוס: width/height/fill כמאפייני HTML הם "רמזי תצוגה" ש-revert היה מוחק) */ #bm :where(img, picture) { opacity: revert; filter: revert; box-shadow: revert; border: revert; margin: revert; padding: revert; transition: revert; transform: revert; } /* Chrome מממש את hidden כרמז תצוגה — revert מבטל אותו, אז מחזירים במפורש */ #bm :where([hidden]) { display: none; } /* ============================================================ page.css — "בת מצווה עם (א)מהות · לכיתות ולקבוצות" (v2) מבנה וקופי לפי גרסת הלקוחה (index_1.html, 22.9.2026); שפה חזותית של האתר: Heebo, ורוד המותג, אפרסק, pill. כל ערך = טוקן מ-tokens.css. Mobile-first. Logical properties בלבד. אין transition: all. ============================================================ */ /* ---------- פונטים (מקומי, 3 משקלים) ---------- */ @font-face { font-family: "Heebo"; src: url("../fonts/heebo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Heebo"; src: url("../fonts/heebo-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Heebo"; src: url("../fonts/heebo-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Heebo Fallback"; src: local("Arial"), local("Roboto"), local("Noto Sans Hebrew"); size-adjust: 101%; ascent-override: 108%; descent-override: 32%; line-gap-override: 0%; } #bm { --font: "Heebo", "Heebo Fallback", system-ui, Arial, sans-serif; } /* ---------- בסיס ---------- */ #bm *, #bm *::before, #bm *::after { box-sizing: border-box; } #bm { margin: 0; -webkit-font-smoothing: antialiased; } #bm img, #bm picture, #bm svg { display: block; max-width: 100%; } #bm img { height: auto; border-radius: var(--r-img); } #bm h1, #bm h2, #bm h3, #bm p, #bm ul, #bm ol, #bm figure { margin: 0; } #bm ul, #bm ol { padding: 0; } #bm a, #bm button, #bm summary, #bm label, #bm input, #bm select, #bm textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #bm a, #bm button, #bm input, #bm select, #bm textarea, #bm option { color: inherit; } #bm option:disabled { color: var(--muted); } #bm [id] { scroll-margin-top: 24px; } #bm :focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } #bm .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } /* בלי היסט -9999px: ב-RTL הוא דוחף את הדף הצידה */ #bm .nowrap { white-space: nowrap; } #bm strong { font-weight: var(--fw-semibold); } /* ---------- מכולות וסקשנים ---------- */ #bm .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } #bm .wrap--text { max-width: var(--container-text); } #bm .s { padding-block: var(--s-section); } #bm .s--hero, #bm .s--kit, #bm .s--price { background: var(--peach); } #bm .s--faq { background: var(--paper-2); } #bm p + p { margin-block-start: var(--s-stack); } #bm p, #bm li { text-wrap: pretty; } /* בלי מילה בודדת בשורה אחרונה (הוראות §14) */ #bm h2 + p { margin-block-start: var(--s-stack); } #bm .lead { font-size: var(--fs-lead); line-height: 1.55; } #bm .muted { color: var(--muted); font-size: var(--fs-small); } #bm .muted-lead { color: var(--muted); } #bm .cv { content-visibility: auto; contain-intrinsic-size: auto 520px; } #bm .s--faq.cv { contain-intrinsic-size: auto 800px; } @media (min-width: 1025px) { #bm .cv { contain-intrinsic-size: auto 420px; } #bm .s--faq.cv { contain-intrinsic-size: auto 700px; } } /* קו ורוד קצר מעל H2 — חתימת MWM, במקום eyebrow */ #bm .h2--rule::before { content: ""; display: block; width: 44px; height: 2px; background: var(--pink); margin-block-end: var(--s-stack); } #bm h2 { max-width: 24ch; } /* ---------- כפתורים ---------- */ #bm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h-lg); padding: 0 var(--btn-px); border-radius: var(--r-pill); border: 1px solid var(--pink); font-family: var(--font); font-weight: var(--fw-semibold); font-size: 1.125rem; line-height: 1.2; text-decoration: none; cursor: pointer; user-select: none; transition: background-color var(--t-fast) var(--ease-in-out), color var(--t-fast) var(--ease-in-out), transform var(--t-fast) var(--ease-settle); } #bm .btn--primary { background: var(--pink); color: var(--paper); } #bm .btn--ghost { background: transparent; color: var(--pink-deep); } @media (hover: hover) and (pointer: fine) { #bm .btn--primary:hover { background: var(--pink-deep); } #bm .btn--ghost:hover { background: var(--pink); color: var(--paper); } } #bm .btn:active { transform: translateY(var(--d-press)) scale(0.98); transition-duration: 0ms; } #bm .btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } #bm .btn--block { width: 100%; } #bm .btn .ico { flex: none; } /* ---------- קישורי טקסט ---------- */ #bm .link { color: var(--pink-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pink-deep) 45%, transparent); transition: text-decoration-color var(--t-fast) var(--ease-in-out), text-underline-offset var(--t-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { #bm .link:hover { text-decoration-color: var(--pink-deep); text-underline-offset: 5px; } } #bm .link:active { text-underline-offset: 5px; } #bm .link:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 2px; } /* ---------- חשיפה בגלילה (≤12 בדף; בפועל 8) ---------- */ html.js #bm .reveal { opacity: 0; transform: translateY(var(--d-reveal)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } html.js #bm .reveal.is-in { opacity: 1; transform: none; } html.js #bm .reveal.is-in.no-anim { transition: none; } /* ---------- צילום עם מסגרת לבנה (הערכה, ירושלים) ---------- */ #bm .framed img { border: 8px solid var(--paper); border-radius: var(--r-img); } /* ============================================================ 1 · HERO — טקסט ליד צילום, על אפרסק ============================================================ */ #bm .s--hero { padding-block: var(--s-section-sm) var(--s-section); } #bm .hero { display: grid; gap: var(--s-block); } #bm .hero__badge img { width: 120px; height: 120px; border-radius: 0; } @media (min-width: 980px) { #bm .hero__badge img { width: 168px; height: 168px; } } #bm .hero__text h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.15; color: var(--ink); max-width: 16ch; } #bm .hero__text h1 .hero__badge { display: block; margin-block-end: var(--s-stack); } #bm .hero__title { display: block; } #bm .hero__intro { margin-block-start: var(--s-stack); font-size: var(--fs-lead); line-height: 1.55; max-width: 30ch; } #bm .hero__intro strong { font-weight: var(--fw-semibold); } #bm .hero__why { margin-block-start: 8px; max-width: 36ch; } #bm .hero__yours { margin-block-start: var(--s-stack); font-weight: var(--fw-semibold); font-size: var(--fs-lead); } #bm .hero__yours::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--pink); vertical-align: middle; margin-inline-end: 10px; } #bm .hero__actions { display: flex; flex-direction: column; gap: 12px; margin-block-start: var(--s-block); } #bm .hero__media { margin-inline: calc(-1 * var(--gutter)); } #bm .hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; border-radius: 0; } @media (min-width: 720px) { #bm .hero__actions { flex-direction: row; flex-wrap: wrap; } } @media (min-width: 980px) { #bm .hero { grid-template-columns: 1.05fr 1fr; column-gap: var(--s-block); align-items: center; } #bm .hero__media { margin-inline: 0; } #bm .hero__media img { border-radius: var(--r-img); } } /* ============================================================ 2 · המפגשים — ארבעה בלוקים עם קו עליון (לא כרטיסים), 2×2 בדסקטופ ============================================================ */ #bm .ws-intro { margin-block-start: var(--s-stack); max-width: 46ch; } #bm .choose { margin-block-start: var(--s-block); padding: 16px 20px; background: var(--peach); border-inline-start: 4px solid var(--pink); font-size: var(--fs-lead); line-height: 1.55; max-width: 40ch; } #bm .choose strong { color: var(--pink-deep); } #bm .ws-grid { list-style: none; margin-block-start: var(--s-block); display: grid; gap: var(--s-block); } #bm .ws { border-block-start: 3px solid var(--pink); padding-block-start: 20px; } #bm .ws h3 { font-size: var(--fs-h3); margin-block-end: 12px; } #bm .ws p { color: var(--muted); } @media (min-width: 720px) { #bm .ws-grid { grid-template-columns: 1fr 1fr; gap: 56px var(--s-block); } } /* ============================================================ 3 · הערכה — טקסט + שני צילומים ממוסגרים, השני חופף ============================================================ */ #bm .kit { display: grid; gap: var(--s-block); } #bm .kit__sub { font-size: var(--fs-lead); color: var(--pink-deep); font-weight: var(--fw-semibold); margin-block-start: 8px; } #bm .kit__text p { max-width: 44ch; } /* גיליון הערכה — טיפוגרפי, על לבן: כותרת קטנה ורודה + נושאים כתוכן עניינים */ #bm .kit__sheet { background: var(--paper); padding: var(--s-block) calc(var(--s-block) * .75); border-block-start: 4px solid var(--pink); } #bm .kit__title { font-size: var(--fs-h3); line-height: 1.3; color: var(--pink); max-width: 22ch; } #bm .kit__themes { list-style: none; margin-block-start: var(--s-block); display: flex; flex-wrap: wrap; gap: 0; } #bm .kit__themes li { font-weight: var(--fw-semibold); font-size: var(--fs-lead); line-height: 1.55; padding-block: 6px; padding-inline-end: 18px; margin-inline-end: 18px; border-inline-end: 1px solid var(--line); } #bm .kit__themes li:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; } #bm .kit__inside { margin-block-start: var(--s-block); padding-block-start: 18px; border-block-start: 1px solid var(--line); max-width: 40ch; } @media (min-width: 980px) { #bm .kit { grid-template-columns: 0.9fr 1.1fr; column-gap: 72px; align-items: center; } } /* ============================================================ 4 · ירושלים — צילום רחב, ציטוט-שיא, "לא עוד טיול", זוג צילומים, ירושלים שלי ============================================================ */ #bm .jlm__wide { margin-block-start: var(--s-block); } #bm .jlm__wide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } #bm .jlm__peak { margin-block-start: var(--s-block); padding-inline-start: 20px; border-inline-start: 4px solid var(--pink); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: 1.3; max-width: 24ch; } #bm .jlm__peak span { color: var(--pink); display: block; } #bm .jlm__body { margin-block-start: var(--s-block); display: grid; gap: var(--s-block); } #bm .jlm__text { max-width: 44ch; } #bm .jlm__not { font-size: var(--fs-lead); line-height: 1.6; font-weight: var(--fw-semibold); } #bm .jlm__not p { margin: 0; } #bm .jlm__build { margin-block-start: 14px; color: var(--pink-deep); font-weight: var(--fw-semibold); } #bm .jlm__pair { margin-block-start: var(--s-block); display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; } #bm .jlm__pair img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } #bm .jlm__pair figure:nth-child(2) { margin-block-start: 40px; } #bm .jlm__mine { margin-block-start: var(--s-block); max-width: 60ch; } #bm .jlm__mine strong { color: var(--pink-deep); font-weight: var(--fw-bold); } #bm .jlm__logo { margin-block-start: var(--s-stack); height: 64px; width: auto; border-radius: 0; } @media (min-width: 720px) { #bm .jlm__wide img { aspect-ratio: 16 / 9; } #bm .jlm__pair { gap: 20px; } } @media (min-width: 980px) { #bm .jlm__body { grid-template-columns: 1.3fr 1fr; column-gap: 72px; } } /* ============================================================ 7 · אמון — כותרת, משפט, שורת לוגואים רשמיים (כשיגיעו) ============================================================ */ #bm .s--trust { padding-block: var(--s-section-sm); } #bm .trust { font-size: var(--fs-lead); line-height: 1.6; max-width: 40ch; } #bm .trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; margin-block-start: var(--s-block); } #bm .trust__logos img { width: auto; object-fit: contain; border-radius: 0; } #bm .trust__logo--hot { height: 80px; } /* ריבוע מול לוגו רחב: 80 מול 48 = משקל חזותי דומה */ #bm .trust__logo--bgu { height: 48px; max-width: 60vw; } /* ============================================================ 8 · בונות את זה יחד — טקסט בלבד, הרבה לבן (התמונה הוסרה לבקשת הלקוחה, 23.9.2026) ============================================================ */ #bm .zoom__close { font-size: var(--fs-lead); line-height: 1.55; max-width: 40ch; } /* ============================================================ 7 · מחיר — בלוק אחד שמצטלם ============================================================ */ #bm .price { max-width: 560px; } #bm .price__main { margin-block-start: var(--s-stack); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } #bm .price__num { font-weight: var(--fw-bold); font-size: var(--fs-price); color: var(--pink); line-height: 1.1; white-space: nowrap; } #bm .price__for { font-size: var(--fs-lead); font-weight: var(--fw-semibold); } #bm .price__who { margin-block-start: 4px; font-size: var(--fs-lead); } #bm .price__incl { margin-block-start: var(--s-block); } #bm .price__list { list-style: none; margin-block-start: 8px; } #bm .price__list li { padding-block: 10px; border-block-start: 1px solid var(--line); } #bm .price__list li:last-child { border-block-end: 1px solid var(--line); } #bm .price__min { margin-block-start: var(--s-stack); font-weight: var(--fw-semibold); } /* מודגש לפי ההוראות */ #bm .price__actions { display: flex; flex-direction: column; gap: 12px; margin-block-start: var(--s-block); max-width: 560px; } @media (min-width: 720px) { #bm .price__actions { flex-direction: row; flex-wrap: wrap; max-width: none; } } /* ============================================================ 8 · CTA + טופס — כותרת וצילום מימין, טופס משמאל (דסקטופ) ============================================================ */ #bm .cta { display: grid; gap: var(--s-block); align-items: start; } #bm .cta__text .lead { margin-block-start: var(--s-stack); max-width: 34ch; } #bm .cta__note { margin-block-start: 8px; color: var(--muted); max-width: 40ch; } #bm .cta__photo { margin-block-start: var(--s-block); } #bm .cta__photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; } @media (min-width: 980px) { #bm .cta { grid-template-columns: 1fr 1.1fr; column-gap: 72px; } #bm .cta__photo img { aspect-ratio: 1 / 1; } } #bm .lead-form { display: grid; gap: 4px; } #bm .field { display: grid; gap: 6px; padding-block-end: 22px; } #bm .field.has-error { padding-block-end: 0; } #bm .field label, #bm .field legend { font-weight: var(--fw-semibold); font-size: 1rem; line-height: 1.3; color: var(--ink); } #bm .field input, #bm .field select, #bm .field textarea { width: 100%; min-height: var(--field-h); padding: 12px 16px; font-family: var(--font); font-size: var(--field-fs); line-height: 1.4; color: var(--ink); background: var(--paper); border: 1.5px solid var(--muted); border-radius: var(--r-img); outline: none; } #bm .field select { appearance: none; background-image: none; } #bm .field input[type="tel"], #bm .field input[type="email"] { direction: rtl; unicode-bidi: plaintext; text-align: start; } #bm .field textarea { min-height: 96px; resize: vertical; } #bm .field input:focus-visible, #bm .field select:focus-visible, #bm .field textarea:focus-visible { border-color: var(--pink); outline: 3px solid color-mix(in srgb, var(--pink) 30%, transparent); outline-offset: 0; } #bm .field input::placeholder, #bm .field textarea::placeholder { color: var(--muted); opacity: 1; } #bm .field__help { font-size: var(--fs-small); color: var(--muted); } #bm .field__msg { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-small); line-height: 1.4; color: var(--pink-deep); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); } #bm .field.has-error .field__msg { opacity: 1; } #bm .field.has-error input, #bm .field.has-error select { border-color: var(--pink-deep); } #bm .field--checks { border: 0; padding-inline: 0; margin: 0; } #bm .field--checks label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--fw-regular); font-size: var(--field-fs); } #bm .field--checks input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--pink); } #bm .form__optional { margin-block: var(--s-stack) 4px; font-weight: var(--fw-semibold); color: var(--muted); } #bm .lead-form .btn--block { margin-block-start: 8px; } #bm .form__no-commit { text-align: center; font-weight: var(--fw-semibold); } #bm .form__alt { margin-block-start: var(--s-stack); text-align: center; font-weight: var(--fw-semibold); } #bm .form__error { margin-block-start: var(--s-stack); color: var(--pink-deep); } #bm .form__success { background: var(--peach); padding: var(--s-block); } #bm .form__success .form__thanks { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.3; color: var(--ink); max-width: none; } /*

ולא

: מוסתר עד השליחה, שלא ייראה לגוגל כותרת ריקה */ #bm .form__success ol { margin-block: 8px var(--s-stack); padding-inline-start: 1.2em; } #bm .form__success:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } /* ============================================================ 9 · FAQ —
נייטיב ============================================================ */ #bm .faq { margin-block-start: var(--s-block); border-block-start: 1px solid var(--line); } #bm .faq__item { border-block-end: 1px solid var(--line); interpolate-size: allow-keywords; } #bm .faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 4px; cursor: pointer; font-weight: var(--fw-semibold); font-size: 1.1875rem; line-height: 1.35; color: var(--ink); } #bm .faq__item summary::-webkit-details-marker { display: none; } #bm .faq__item summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline-end: 6px; border-inline-start: 2px solid var(--pink); border-block-end: 2px solid var(--pink); transform: translateY(-3px) rotate(-45deg); transition: transform var(--t-base) var(--ease-in-out); } #bm .faq__item[open] summary { color: var(--pink-deep); } #bm .faq__item[open] summary::after { transform: translateY(3px) rotate(135deg); } @media (hover: hover) and (pointer: fine) { #bm .faq__item summary:hover { color: var(--pink-deep); } } #bm .faq__item summary:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; } #bm .faq__item::details-content { height: 0; overflow: hidden; overflow-clip-margin: content-box; transition: height var(--t-base) var(--ease-in-out), content-visibility var(--t-base) allow-discrete; } #bm .faq__item[open]::details-content { height: auto; } #bm .faq__inner { padding: 0 4px 16px; padding-inline-end: 36px; } #bm .faq__more { margin-block-start: var(--s-block); font-weight: var(--fw-semibold); } /* ============================================================ 10 · התוכנית האישית — קטן ============================================================ */ #bm .s--personal { padding-block: var(--s-section-sm); } #bm .s--personal h3 { font-size: var(--fs-h3); color: var(--ink); } #bm .personal__btn { margin-block-start: var(--s-stack); } /* ============================================================ WhatsApp צף — הצל היחיד בדף ============================================================ */ #bm .wa-fab { position: fixed; inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 56px; height: 56px; border-radius: var(--r-circle); display: grid; place-items: center; background: var(--pink); color: var(--paper); box-shadow: var(--shadow-fab); opacity: 0; transform: translateY(var(--d-rise)); pointer-events: none; visibility: hidden; transition: opacity var(--t-base) var(--ease-settle), transform var(--t-base) var(--ease-settle), background-color var(--t-fast) var(--ease-in-out), visibility 0s linear var(--t-base); } #bm .wa-fab[hidden] { display: grid; } #bm .wa-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; } #bm .wa-fab:active { transform: scale(0.96); transition-duration: 0ms; } #bm .wa-fab:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { #bm .wa-fab:hover { background: var(--pink-deep); } } /* ============================================================ site chrome — חיקוי ה-header/footer של האתר (באב-טיפוס בלבד) ============================================================ */ @media (max-width: 767px) { } /* ============================================================ תמונות עגולות — ה-DNA של mwm.org.il (עיגול "נעים להכיר" בדף הבית, listing 1941): תמונה במסכת עיגול + עיגול צבע סטטי מאחוריה שמוזז הצידה, בלי PNG, בלי תנועה ============================================================ */ #bm .circle { position: relative; isolation: isolate; display: block; } #bm .circle img { width: 100%; aspect-ratio: 1 / 1 !important; object-fit: cover; border-radius: var(--r-circle) !important; } #bm .circle::before { content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1 / 1; border-radius: var(--r-circle); background: var(--peach); inset-block-start: -5%; inset-inline-start: -7%; } #bm .circle--on-peach::before { background: var(--paper); } /* Hero: עיגול גדול שפורץ מעט את העמודה (כמו margin -23% באתר, בגרסה מרוסנת) */ #bm .hero__media.circle { margin-inline: 0; } #bm .hero__media.circle img { object-position: 50% 38%; } @media (min-width: 980px) { #bm .hero__media.circle { margin-inline-end: -6%; } } /* ירושלים: שני עיגולים, השני קטן ומוזז */ #bm .jlm__pair .circle img { aspect-ratio: 1 / 1; } #bm .jlm__pair .circle:nth-child(2) { width: 82%; justify-self: end; } /* CTA ליד הטופס */ #bm .cta__photo.circle { max-width: 420px; } /* ============================================================ bar-mitzvah.css — "בר מצווה עם מהות בירושלים" (ירושלים שלי) נשען על tokens.css + page.css (רכיבי האתר). כאן רק מה שהדף הזה צריך בנוסף. כל ערך = טוקן. Logical properties בלבד. מנפישים רק opacity/transform. ============================================================ */ #bm { background: var(--paper); } /* ---------- קצב משטחים: אפרסק = רגע חשוב ---------- */ #bm .bm-aish, #bm .bm-included { background: var(--peach); } #bm .bm-place { background: var(--paper-2); } #bm .s--sm { padding-block: var(--s-section-sm); } #bm .bm-lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 36ch; } #bm .bm-note { padding-inline-start: 20px; border-inline-start: 4px solid var(--pink); max-width: 40ch; } #bm .bm-note strong { color: var(--ink); } /* שדה ה-honeypot המוסתר: בלי מסגרת ברירת המחדל של הדפדפן (צבע עשירי) */ #bm .hp input { border: 0; } /* ============================================================ א · פתיחה — כמו בשאר דפי האתר: התמונה קודם (בנייד מעל הכותרת, בדסקטופ מימין) ============================================================ */ #bm .bm-hero__grid { display: grid; gap: var(--s-block); } #bm .bm-h1 { font-size: var(--fs-display); line-height: var(--lh-heading); color: var(--ink); max-width: 14ch; } #bm .bm-hero__sub { margin-block-start: var(--s-stack); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.6; color: var(--pink-deep); max-width: none; } #bm .bm-hero__intro { margin-block-start: var(--s-stack); font-size: var(--fs-lead); line-height: 1.55; max-width: 36ch; } #bm .bm-hero__meta { margin-block-start: var(--s-stack); max-width: none; } #bm .bm-sep { color: var(--peach-deep); padding-inline: 4px; } #bm .bm-hero__media { order: -1; } @media (min-width: 980px) { #bm .bm-hero__grid { grid-template-columns: 1.15fr 1fr; column-gap: var(--s-block); align-items: center; } } /* ---------- כניסה של הפתיחה (פעם אחת, אחרי שהפונט נטען) ---------- מילים נכנסות שלמות, בתנועה קצרה למעלה + opacity. בלי מסכה (חותכת ראשי אותיות). */ html.js #bm .bm-h1[data-words] .w { display: inline-block; opacity: 0; transform: translateY(var(--d-reveal)); } html.js #bm [data-enter] { opacity: 0; transform: translateY(var(--d-rise)); } html.js #bm .is-entered .bm-h1 .w, html.js #bm .is-entered [data-enter] { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-settle); transition-delay: calc(var(--i, 0) * 70ms); } /* ============================================================ תמונות ממוספרות (1–6) — עגולות כמו בשאר דפי האתר ("נעים להכיר"): מסכת עיגול + עיגול צבע מאחור (.circle מ-page.css). אפרסק על לבן, לבן על אפרסק. כשהקובץ עוד לא הגיע: עיגול מקווקו עם מספר התמונה. ============================================================ */ #bm .bm-photo { margin: 0; } #bm .bm-photo.circle img { height: auto; object-position: var(--op, 50% 50%); } /* כל תמונה מכוונת לאנשים שבה */ #bm .bm-ph { display: grid; place-content: center; gap: 6px; text-align: center; aspect-ratio: 1 / 1; padding: 14%; border-radius: var(--r-circle); border: 2px dashed var(--line); background: var(--paper-2); } #bm .bm-ph__n { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.1; color: var(--pink); } #bm .bm-ph__l { color: var(--muted); font-size: var(--fs-small); line-height: 1.4; } /* בלי JS: הדפדפן מסמן is-missing דרך onerror, ומוצג לפחות מספר התמונה */ #bm .bm-photo.is-missing:not(:has(.bm-ph))::after { content: "תמונה " attr(data-num); display: grid; place-content: center; aspect-ratio: 1 / 1; border-radius: var(--r-circle); border: 2px dashed var(--line); background: var(--paper-2); font-weight: var(--fw-bold); color: var(--pink); } #bm .bm-photo figcaption { margin-block-start: 14px; text-align: center; font-size: var(--fs-small); color: var(--muted); } #bm .bm-photo figcaption strong { color: var(--ink); } /* גדלים: עיגול גדול בפתיחה, בינוני ליד טקסט, קטן בציר היום */ #bm .bm-hero__media.circle { width: min(100%, 560px); justify-self: center; } #bm .bm-split .circle { width: min(100%, 480px); justify-self: center; } #bm .bm-stop .circle { width: min(100%, 340px); } @media (min-width: 980px) { #bm .bm-hero__media.circle { margin-inline-end: -6%; } } /* פורץ מעט את העמודה, כמו בדף הקבוצות */ /* ---------- טקסט + תמונה זה לצד זה ---------- */ #bm .bm-split { display: grid; gap: var(--s-block); align-items: center; } #bm .bm-split__text > * + * { margin-block-start: var(--s-stack); } #bm .bm-split__text .bm-note { margin-block-start: var(--s-block); } @media (min-width: 980px) { #bm .bm-split { grid-template-columns: 1fr 1fr; column-gap: 72px; } #bm .bm-split--flip .bm-photo { order: -1; } } /* ============================================================ ב · הסרטון — נגן לרוחב, מופעל רק בלחיצה ============================================================ */ #bm .bm-video { position: relative; margin-block-start: var(--s-block); aspect-ratio: 16 / 9; background: var(--ink); border-radius: var(--r-img); overflow: hidden; } #bm .bm-video video, #bm .bm-video iframe { width: 100%; height: 100%; display: block; border: 0; background: var(--ink); } #bm .bm-video__play { all: unset; position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; cursor: pointer; color: var(--paper); background-size: cover; background-position: center; } #bm .bm-video__btn { display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--r-circle); background: var(--pink); color: var(--paper); transition: transform var(--t-fast) var(--ease-settle), background-color var(--t-fast) var(--ease-in-out); } #bm .bm-video__btn svg { transform: translateX(2px); } /* מרכז אופטי של המשולש */ @media (hover: hover) and (pointer: fine) { #bm .bm-video__play:hover .bm-video__btn { transform: scale(1.06); background: var(--pink-deep); } } #bm .bm-video__play:active .bm-video__btn { transform: scale(.96); transition-duration: 0ms; } #bm .bm-video__play:focus-visible .bm-video__btn { outline: 3px solid var(--paper); outline-offset: 4px; } #bm .bm-video__note { margin-block-start: 12px; max-width: 60ch; } /* ============================================================ ה · מהלך היום — ציר אנכי. הקו הוורוד מתמלא עם הגלילה. ============================================================ */ #bm .bm-day { list-style: none; position: relative; margin-block-start: var(--s-block); padding-inline-start: 36px; display: grid; gap: var(--s-block); } #bm .bm-day__track { position: absolute; inset-block: 10px 10px; inset-inline-start: 8px; width: 2px; background: var(--line); } #bm .bm-day__fill { position: absolute; inset: 0; background: var(--pink); transform-origin: top; transform: scaleY(var(--p, 0)); } #bm .bm-stop { position: relative; display: grid; gap: var(--s-stack); } #bm .bm-stop::before { content: ""; position: absolute; inset-inline-start: -36px; inset-block-start: 6px; width: 18px; height: 18px; border-radius: var(--r-circle); background: var(--paper); border: 2px solid var(--line); transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } #bm .bm-stop.is-on::before { background: var(--pink); border-color: var(--pink); } #bm .bm-stop h3 { margin-block-end: 6px; } #bm .bm-day__after { margin-block-start: var(--s-block); max-width: 52ch; color: var(--muted); } @media (min-width: 980px) { #bm .bm-day { padding-inline-start: 48px; } #bm .bm-day__track { inset-inline-start: 12px; } #bm .bm-stop::before { inset-inline-start: -48px; } #bm .bm-stop:has(.bm-photo) { grid-template-columns: 1fr 1fr; column-gap: 72px; align-items: start; } } /* ============================================================ ו · שתי אפשרויות לעלייה לתורה ============================================================ */ #bm .bm-options { list-style: none; margin-block-start: var(--s-block); display: grid; gap: var(--s-block); } #bm .bm-option { border-block-start: 3px solid var(--pink); padding-block-start: 20px; } #bm .bm-option h3 { margin-block-end: 12px; } #bm .bm-extra { color: var(--pink-deep); white-space: nowrap; } @media (min-width: 720px) { #bm .bm-options { grid-template-columns: 1fr 1fr; column-gap: var(--s-block); } } /* ============================================================ ח · מה כלול — רשימה לסריקה, בלי כרטיסים ============================================================ */ #bm .bm-list { list-style: none; margin-block-start: var(--s-block); } #bm .bm-list li { position: relative; padding-block: 12px; padding-inline-start: 28px; border-block-start: 1px solid var(--peach-deep); } #bm .bm-list li:last-child { border-block-end: 1px solid var(--peach-deep); } #bm .bm-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: calc(12px + .55em); width: 12px; height: 2px; background: var(--pink); } /* ============================================================ ט · תוספות — לבן, מובחן מהרשימה של מה שכלול ============================================================ */ #bm .bm-addons__btn { margin-block-start: var(--s-block); } /* ============================================================ יא · טופס וסיום ============================================================ */ #bm .bm-contact__grid { display: grid; gap: var(--s-block); align-items: start; } #bm .bm-contact__any { margin-block-start: var(--s-stack); font-weight: var(--fw-semibold); } #bm .bm-contact__wa { margin-block-start: var(--s-block); } #bm .bm-contact__form { max-width: var(--container-form); } #bm .bm-privacy { text-align: center; margin-block-start: 4px; } @media (min-width: 980px) { #bm .bm-contact__grid { grid-template-columns: 1fr 1.1fr; column-gap: 72px; } } /* ============================================================ WhatsApp צף — מוצג כל הזמן, בצד ימין (inline-start ב-RTL). סמל הנגישות של האתר יושב משמאל למטה, וחץ "חזרה למעלה" מימין למטה (~40–70px מהתחתית), לכן הכפתור עולה מעליו. הצל היחיד בדף. ============================================================ */ #bm .bm-fab { position: fixed; z-index: 40; inset-inline-start: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: 56px; height: 56px; border-radius: var(--r-circle); display: grid; place-items: center; background: var(--pink); color: var(--paper); box-shadow: var(--shadow-fab); transition: background-color var(--t-fast) var(--ease-in-out), transform var(--t-fast) var(--ease-settle); } #bm .bm-fab svg { border-radius: 0; } @media (hover: hover) and (pointer: fine) { #bm .bm-fab:hover { background: var(--pink-deep); } } #bm .bm-fab:active { transform: scale(.96); transition-duration: 0ms; } #bm .bm-fab:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } @media (min-width: 980px) { #bm .bm-fab { inset-inline-start: 24px; } } /* ---- WordPress בלבד ---- */ #bm [id] { scroll-margin-top: 110px; }