/* ========================================================================== ספיר סבאג · דף 360 · v5 (יונתן, 2.10.26) מקור כל ערך: ספר המותג בפיגמה YBL0L8rWLXSIzcsfoRx2yb (פרקים 02, 03, 04, 07, 08, 09, 11). לוולאד: כל ערך ויזואלי יושב במשתנה על :root. שמות המשתנים = שמות המשתנים בפיגמה (bg/default -> --bg-default). ========================================================================== */ /* Noto Sans Hebrew, ציר משקל 300-600 בלבד (ספר 3.1: 300 גוף, 500 תוויות, 600 כותרות). בשרת: להחליף את ה-data URI ב-url('../fonts/noto-hebrew-300-600.woff2'). כאן הוא מוטמע כי file:// חוסם פונטים חיצוניים. */ /* WordPress (ולאד, 2.10.26): הפונט מהתוסף - Noto Sans Hebrew המלא (עברית + לטינית, ציר 300-700), כי תוכן מהאדמין יכול להכיל תווים שאין בתת-הקבוצה של 20KB. במקום ה-data URI שיונתן הטמיע לצורכי file://. שאר הקובץ כמו שהוא. */ @font-face { font-family: "Noto Sans Hebrew"; src: url("../../v2/fonts/noto-sans-hebrew-hebrew.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: "Noto Sans Hebrew"; src: url("../../v2/fonts/noto-sans-hebrew-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---- צבע · ספר 2.1, 2.2 ---- ולאד, 7.10.26: --white, --wine-950, --wine-700, --ruby-500, --ruby-600, --cream-50 ו---radius-control / --radius-button-* מגיעים ממערכת העיצוב (ds-tokens.css, נטען לפני הקובץ הזה; מקור: sapir-admin packages/brand). לא מגדירים אותם כאן. */ /* סולם היין (2.2) */ --rose-clay-200: #EAD2CC; --cream-100: #EFE9E4; --ruby-300: #E8607F; --wine-400: #6B2D3C; --wine-500: #5A2433; --wine-600: #4A1B2B; --wine-800: #2E111A; --wine-900: #22101A; /* ---- סמנטי · משתני הרכיבים בפרק 09 ---- */ --bg-default: var(--white); --bg-breath: var(--cream-50); --bg-dark: var(--wine-950); --text-primary: var(--wine-950); --text-on-dark: var(--cream-50); --text-accent: var(--ruby-500); /* על לבן/שמנת: 5.2 / 4.8 */ --text-accent-on-dark: var(--ruby-300); /* על יין-לילה: 5.9 */ --bg-raised: #EFE9E4; /* שדה, ריחוף משני · על לבן */ --bg-raised-dark: #2E111A; /* שדה, ריחוף משני · על כהה */ --border-subtle: #E2D8D3; --border-subtle-dark: #5A2433; --line-strong: var(--wine-950); --line-strong-dark: var(--cream-50); --state-focus: var(--ruby-500); --state-focus-dark: var(--ruby-300); --state-error: var(--ruby-600); /* #B12649 על לבן */ --state-error-dark: var(--ruby-300); --action-primary-from: #C92F55; --action-primary-to: #9E1F40; --action-primary-hover-from: #B12649; --action-primary-hover-to: #9E1F40; --action-on-primary: var(--cream-50); --effect-primary-shadow: rgba(201, 47, 85, .28); --effect-primary-highlight: rgba(255, 255, 255, .28); /* ---- רדיוס · פרק 09: חתוך-רך לכפתור ראשי, תגיות, מיכלים, מסגרות. מעוגל לשדה, תיבה, אקורדיון, משני ---- */ --fs-fine: 12px; /* טקסט הסכמה ופוטר */ --radius-checkbox: 6px; --radius-pill: 999px; /* cut-shapes:start - GENERATED by dev/tools/cut-shapes.mjs (geometry). The brand's cut corners, slightly rounded. --cut-soft is the ONE knob for how soft every cut is (buttons, tags, images, cards, banners); the sizes follow it. */ --cut-soft: 12px; --cut-r-sm: calc(var(--cut-soft) * .67); --cut-r-md: var(--cut-soft); --cut-r-lg: calc(var(--cut-soft) * 1.25); --cut-sm: polygon(0 calc(14px + 0.4142 * var(--cut-r-sm)), calc(0.0192 * var(--cut-r-sm)) calc(14px + 0.2191 * var(--cut-r-sm)), calc(0.0761 * var(--cut-r-sm)) calc(14px + 0.0315 * var(--cut-r-sm)), calc(0.1685 * var(--cut-r-sm)) calc(14px - 0.1414 * var(--cut-r-sm)), calc(0.2929 * var(--cut-r-sm)) calc(14px - 0.2929 * var(--cut-r-sm)), calc(14px - 0.2929 * var(--cut-r-sm)) calc(0.2929 * var(--cut-r-sm)), calc(14px - 0.1414 * var(--cut-r-sm)) calc(0.1685 * var(--cut-r-sm)), calc(14px + 0.0315 * var(--cut-r-sm)) calc(0.0761 * var(--cut-r-sm)), calc(14px + 0.2191 * var(--cut-r-sm)) calc(0.0192 * var(--cut-r-sm)), calc(14px + 0.4142 * var(--cut-r-sm)) 0, calc(100% - 14px - 0.4142 * var(--cut-r-sm)) 0, calc(100% - 14px - 0.2191 * var(--cut-r-sm)) calc(0.0192 * var(--cut-r-sm)), calc(100% - 14px - 0.0315 * var(--cut-r-sm)) calc(0.0761 * var(--cut-r-sm)), calc(100% - 14px + 0.1414 * var(--cut-r-sm)) calc(0.1685 * var(--cut-r-sm)), calc(100% - 14px + 0.2929 * var(--cut-r-sm)) calc(0.2929 * var(--cut-r-sm)), calc(100% - 0.2929 * var(--cut-r-sm)) calc(14px - 0.2929 * var(--cut-r-sm)), calc(100% - 0.1685 * var(--cut-r-sm)) calc(14px - 0.1414 * var(--cut-r-sm)), calc(100% - 0.0761 * var(--cut-r-sm)) calc(14px + 0.0315 * var(--cut-r-sm)), calc(100% - 0.0192 * var(--cut-r-sm)) calc(14px + 0.2191 * var(--cut-r-sm)), 100% calc(14px + 0.4142 * var(--cut-r-sm)), 100% calc(100% - 14px - 0.4142 * var(--cut-r-sm)), calc(100% - 0.0192 * var(--cut-r-sm)) calc(100% - 14px - 0.2191 * var(--cut-r-sm)), calc(100% - 0.0761 * var(--cut-r-sm)) calc(100% - 14px - 0.0315 * var(--cut-r-sm)), calc(100% - 0.1685 * var(--cut-r-sm)) calc(100% - 14px + 0.1414 * var(--cut-r-sm)), calc(100% - 0.2929 * var(--cut-r-sm)) calc(100% - 14px + 0.2929 * var(--cut-r-sm)), calc(100% - 14px + 0.2929 * var(--cut-r-sm)) calc(100% - 0.2929 * var(--cut-r-sm)), calc(100% - 14px + 0.1414 * var(--cut-r-sm)) calc(100% - 0.1685 * var(--cut-r-sm)), calc(100% - 14px - 0.0315 * var(--cut-r-sm)) calc(100% - 0.0761 * var(--cut-r-sm)), calc(100% - 14px - 0.2191 * var(--cut-r-sm)) calc(100% - 0.0192 * var(--cut-r-sm)), calc(100% - 14px - 0.4142 * var(--cut-r-sm)) 100%, calc(14px + 0.4142 * var(--cut-r-sm)) 100%, calc(14px + 0.2191 * var(--cut-r-sm)) calc(100% - 0.0192 * var(--cut-r-sm)), calc(14px + 0.0315 * var(--cut-r-sm)) calc(100% - 0.0761 * var(--cut-r-sm)), calc(14px - 0.1414 * var(--cut-r-sm)) calc(100% - 0.1685 * var(--cut-r-sm)), calc(14px - 0.2929 * var(--cut-r-sm)) calc(100% - 0.2929 * var(--cut-r-sm)), calc(0.2929 * var(--cut-r-sm)) calc(100% - 14px + 0.2929 * var(--cut-r-sm)), calc(0.1685 * var(--cut-r-sm)) calc(100% - 14px + 0.1414 * var(--cut-r-sm)), calc(0.0761 * var(--cut-r-sm)) calc(100% - 14px - 0.0315 * var(--cut-r-sm)), calc(0.0192 * var(--cut-r-sm)) calc(100% - 14px - 0.2191 * var(--cut-r-sm)), 0 calc(100% - 14px - 0.4142 * var(--cut-r-sm))); --cut-md: polygon(0 calc(24px + 0.4142 * var(--cut-r-md)), calc(0.0192 * var(--cut-r-md)) calc(24px + 0.2191 * var(--cut-r-md)), calc(0.0761 * var(--cut-r-md)) calc(24px + 0.0315 * var(--cut-r-md)), calc(0.1685 * var(--cut-r-md)) calc(24px - 0.1414 * var(--cut-r-md)), calc(0.2929 * var(--cut-r-md)) calc(24px - 0.2929 * var(--cut-r-md)), calc(24px - 0.2929 * var(--cut-r-md)) calc(0.2929 * var(--cut-r-md)), calc(24px - 0.1414 * var(--cut-r-md)) calc(0.1685 * var(--cut-r-md)), calc(24px + 0.0315 * var(--cut-r-md)) calc(0.0761 * var(--cut-r-md)), calc(24px + 0.2191 * var(--cut-r-md)) calc(0.0192 * var(--cut-r-md)), calc(24px + 0.4142 * var(--cut-r-md)) 0, calc(100% - 24px - 0.4142 * var(--cut-r-md)) 0, calc(100% - 24px - 0.2191 * var(--cut-r-md)) calc(0.0192 * var(--cut-r-md)), calc(100% - 24px - 0.0315 * var(--cut-r-md)) calc(0.0761 * var(--cut-r-md)), calc(100% - 24px + 0.1414 * var(--cut-r-md)) calc(0.1685 * var(--cut-r-md)), calc(100% - 24px + 0.2929 * var(--cut-r-md)) calc(0.2929 * var(--cut-r-md)), calc(100% - 0.2929 * var(--cut-r-md)) calc(24px - 0.2929 * var(--cut-r-md)), calc(100% - 0.1685 * var(--cut-r-md)) calc(24px - 0.1414 * var(--cut-r-md)), calc(100% - 0.0761 * var(--cut-r-md)) calc(24px + 0.0315 * var(--cut-r-md)), calc(100% - 0.0192 * var(--cut-r-md)) calc(24px + 0.2191 * var(--cut-r-md)), 100% calc(24px + 0.4142 * var(--cut-r-md)), 100% calc(100% - 24px - 0.4142 * var(--cut-r-md)), calc(100% - 0.0192 * var(--cut-r-md)) calc(100% - 24px - 0.2191 * var(--cut-r-md)), calc(100% - 0.0761 * var(--cut-r-md)) calc(100% - 24px - 0.0315 * var(--cut-r-md)), calc(100% - 0.1685 * var(--cut-r-md)) calc(100% - 24px + 0.1414 * var(--cut-r-md)), calc(100% - 0.2929 * var(--cut-r-md)) calc(100% - 24px + 0.2929 * var(--cut-r-md)), calc(100% - 24px + 0.2929 * var(--cut-r-md)) calc(100% - 0.2929 * var(--cut-r-md)), calc(100% - 24px + 0.1414 * var(--cut-r-md)) calc(100% - 0.1685 * var(--cut-r-md)), calc(100% - 24px - 0.0315 * var(--cut-r-md)) calc(100% - 0.0761 * var(--cut-r-md)), calc(100% - 24px - 0.2191 * var(--cut-r-md)) calc(100% - 0.0192 * var(--cut-r-md)), calc(100% - 24px - 0.4142 * var(--cut-r-md)) 100%, calc(24px + 0.4142 * var(--cut-r-md)) 100%, calc(24px + 0.2191 * var(--cut-r-md)) calc(100% - 0.0192 * var(--cut-r-md)), calc(24px + 0.0315 * var(--cut-r-md)) calc(100% - 0.0761 * var(--cut-r-md)), calc(24px - 0.1414 * var(--cut-r-md)) calc(100% - 0.1685 * var(--cut-r-md)), calc(24px - 0.2929 * var(--cut-r-md)) calc(100% - 0.2929 * var(--cut-r-md)), calc(0.2929 * var(--cut-r-md)) calc(100% - 24px + 0.2929 * var(--cut-r-md)), calc(0.1685 * var(--cut-r-md)) calc(100% - 24px + 0.1414 * var(--cut-r-md)), calc(0.0761 * var(--cut-r-md)) calc(100% - 24px - 0.0315 * var(--cut-r-md)), calc(0.0192 * var(--cut-r-md)) calc(100% - 24px - 0.2191 * var(--cut-r-md)), 0 calc(100% - 24px - 0.4142 * var(--cut-r-md))); --cut-lg: polygon(0 calc(33px + 0.4142 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(33px + 0.2191 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(33px + 0.0315 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(33px - 0.1414 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(33px - 0.2929 * var(--cut-r-lg)), calc(33px - 0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(33px - 0.1414 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(33px + 0.0315 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(33px + 0.2191 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(33px + 0.4142 * var(--cut-r-lg)) 0, calc(100% - 33px - 0.4142 * var(--cut-r-lg)) 0, calc(100% - 33px - 0.2191 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(100% - 33px - 0.0315 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(100% - 33px + 0.1414 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(100% - 33px + 0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(33px - 0.2929 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(33px - 0.1414 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(33px + 0.0315 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(33px + 0.2191 * var(--cut-r-lg)), 100% calc(33px + 0.4142 * var(--cut-r-lg)), 100% calc(100% - 33px - 0.4142 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(100% - 33px - 0.2191 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(100% - 33px - 0.0315 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(100% - 33px + 0.1414 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(100% - 33px + 0.2929 * var(--cut-r-lg)), calc(100% - 33px + 0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(100% - 33px + 0.1414 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(100% - 33px - 0.0315 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(100% - 33px - 0.2191 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(100% - 33px - 0.4142 * var(--cut-r-lg)) 100%, calc(33px + 0.4142 * var(--cut-r-lg)) 100%, calc(33px + 0.2191 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(33px + 0.0315 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(33px - 0.1414 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(33px - 0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(100% - 33px + 0.2929 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(100% - 33px + 0.1414 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(100% - 33px - 0.0315 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(100% - 33px - 0.2191 * var(--cut-r-lg)), 0 calc(100% - 33px - 0.4142 * var(--cut-r-lg))); --cut-md-in: polygon(1px calc(24px + 0.4142 * var(--cut-r-md)), calc(0.98px + 0.0192 * var(--cut-r-md)) calc(24.2px + 0.2191 * var(--cut-r-md)), calc(0.92px + 0.0761 * var(--cut-r-md)) calc(24.38px + 0.0315 * var(--cut-r-md)), calc(0.83px + 0.1685 * var(--cut-r-md)) calc(24.56px - 0.1414 * var(--cut-r-md)), calc(0.71px + 0.2929 * var(--cut-r-md)) calc(24.71px - 0.2929 * var(--cut-r-md)), calc(24.71px - 0.2929 * var(--cut-r-md)) calc(0.71px + 0.2929 * var(--cut-r-md)), calc(24.56px - 0.1414 * var(--cut-r-md)) calc(0.83px + 0.1685 * var(--cut-r-md)), calc(24.38px + 0.0315 * var(--cut-r-md)) calc(0.92px + 0.0761 * var(--cut-r-md)), calc(24.2px + 0.2191 * var(--cut-r-md)) calc(0.98px + 0.0192 * var(--cut-r-md)), calc(24px + 0.4142 * var(--cut-r-md)) 1px, calc(100% - 24px - 0.4142 * var(--cut-r-md)) 1px, calc(100% - 24.2px - 0.2191 * var(--cut-r-md)) calc(0.98px + 0.0192 * var(--cut-r-md)), calc(100% - 24.38px - 0.0315 * var(--cut-r-md)) calc(0.92px + 0.0761 * var(--cut-r-md)), calc(100% - 24.56px + 0.1414 * var(--cut-r-md)) calc(0.83px + 0.1685 * var(--cut-r-md)), calc(100% - 24.71px + 0.2929 * var(--cut-r-md)) calc(0.71px + 0.2929 * var(--cut-r-md)), calc(100% - 0.71px - 0.2929 * var(--cut-r-md)) calc(24.71px - 0.2929 * var(--cut-r-md)), calc(100% - 0.83px - 0.1685 * var(--cut-r-md)) calc(24.56px - 0.1414 * var(--cut-r-md)), calc(100% - 0.92px - 0.0761 * var(--cut-r-md)) calc(24.38px + 0.0315 * var(--cut-r-md)), calc(100% - 0.98px - 0.0192 * var(--cut-r-md)) calc(24.2px + 0.2191 * var(--cut-r-md)), calc(100% - 1px) calc(24px + 0.4142 * var(--cut-r-md)), calc(100% - 1px) calc(100% - 24px - 0.4142 * var(--cut-r-md)), calc(100% - 0.98px - 0.0192 * var(--cut-r-md)) calc(100% - 24.2px - 0.2191 * var(--cut-r-md)), calc(100% - 0.92px - 0.0761 * var(--cut-r-md)) calc(100% - 24.38px - 0.0315 * var(--cut-r-md)), calc(100% - 0.83px - 0.1685 * var(--cut-r-md)) calc(100% - 24.56px + 0.1414 * var(--cut-r-md)), calc(100% - 0.71px - 0.2929 * var(--cut-r-md)) calc(100% - 24.71px + 0.2929 * var(--cut-r-md)), calc(100% - 24.71px + 0.2929 * var(--cut-r-md)) calc(100% - 0.71px - 0.2929 * var(--cut-r-md)), calc(100% - 24.56px + 0.1414 * var(--cut-r-md)) calc(100% - 0.83px - 0.1685 * var(--cut-r-md)), calc(100% - 24.38px - 0.0315 * var(--cut-r-md)) calc(100% - 0.92px - 0.0761 * var(--cut-r-md)), calc(100% - 24.2px - 0.2191 * var(--cut-r-md)) calc(100% - 0.98px - 0.0192 * var(--cut-r-md)), calc(100% - 24px - 0.4142 * var(--cut-r-md)) calc(100% - 1px), calc(24px + 0.4142 * var(--cut-r-md)) calc(100% - 1px), calc(24.2px + 0.2191 * var(--cut-r-md)) calc(100% - 0.98px - 0.0192 * var(--cut-r-md)), calc(24.38px + 0.0315 * var(--cut-r-md)) calc(100% - 0.92px - 0.0761 * var(--cut-r-md)), calc(24.56px - 0.1414 * var(--cut-r-md)) calc(100% - 0.83px - 0.1685 * var(--cut-r-md)), calc(24.71px - 0.2929 * var(--cut-r-md)) calc(100% - 0.71px - 0.2929 * var(--cut-r-md)), calc(0.71px + 0.2929 * var(--cut-r-md)) calc(100% - 24.71px + 0.2929 * var(--cut-r-md)), calc(0.83px + 0.1685 * var(--cut-r-md)) calc(100% - 24.56px + 0.1414 * var(--cut-r-md)), calc(0.92px + 0.0761 * var(--cut-r-md)) calc(100% - 24.38px - 0.0315 * var(--cut-r-md)), calc(0.98px + 0.0192 * var(--cut-r-md)) calc(100% - 24.2px - 0.2191 * var(--cut-r-md)), 1px calc(100% - 24px - 0.4142 * var(--cut-r-md))); --cut-lg-in: polygon(1px calc(33px + 0.4142 * var(--cut-r-lg)), calc(0.98px + 0.0192 * var(--cut-r-lg)) calc(33.2px + 0.2191 * var(--cut-r-lg)), calc(0.92px + 0.0761 * var(--cut-r-lg)) calc(33.38px + 0.0315 * var(--cut-r-lg)), calc(0.83px + 0.1685 * var(--cut-r-lg)) calc(33.56px - 0.1414 * var(--cut-r-lg)), calc(0.71px + 0.2929 * var(--cut-r-lg)) calc(33.71px - 0.2929 * var(--cut-r-lg)), calc(33.71px - 0.2929 * var(--cut-r-lg)) calc(0.71px + 0.2929 * var(--cut-r-lg)), calc(33.56px - 0.1414 * var(--cut-r-lg)) calc(0.83px + 0.1685 * var(--cut-r-lg)), calc(33.38px + 0.0315 * var(--cut-r-lg)) calc(0.92px + 0.0761 * var(--cut-r-lg)), calc(33.2px + 0.2191 * var(--cut-r-lg)) calc(0.98px + 0.0192 * var(--cut-r-lg)), calc(33px + 0.4142 * var(--cut-r-lg)) 1px, calc(100% - 33px - 0.4142 * var(--cut-r-lg)) 1px, calc(100% - 33.2px - 0.2191 * var(--cut-r-lg)) calc(0.98px + 0.0192 * var(--cut-r-lg)), calc(100% - 33.38px - 0.0315 * var(--cut-r-lg)) calc(0.92px + 0.0761 * var(--cut-r-lg)), calc(100% - 33.56px + 0.1414 * var(--cut-r-lg)) calc(0.83px + 0.1685 * var(--cut-r-lg)), calc(100% - 33.71px + 0.2929 * var(--cut-r-lg)) calc(0.71px + 0.2929 * var(--cut-r-lg)), calc(100% - 0.71px - 0.2929 * var(--cut-r-lg)) calc(33.71px - 0.2929 * var(--cut-r-lg)), calc(100% - 0.83px - 0.1685 * var(--cut-r-lg)) calc(33.56px - 0.1414 * var(--cut-r-lg)), calc(100% - 0.92px - 0.0761 * var(--cut-r-lg)) calc(33.38px + 0.0315 * var(--cut-r-lg)), calc(100% - 0.98px - 0.0192 * var(--cut-r-lg)) calc(33.2px + 0.2191 * var(--cut-r-lg)), calc(100% - 1px) calc(33px + 0.4142 * var(--cut-r-lg)), calc(100% - 1px) calc(100% - 33px - 0.4142 * var(--cut-r-lg)), calc(100% - 0.98px - 0.0192 * var(--cut-r-lg)) calc(100% - 33.2px - 0.2191 * var(--cut-r-lg)), calc(100% - 0.92px - 0.0761 * var(--cut-r-lg)) calc(100% - 33.38px - 0.0315 * var(--cut-r-lg)), calc(100% - 0.83px - 0.1685 * var(--cut-r-lg)) calc(100% - 33.56px + 0.1414 * var(--cut-r-lg)), calc(100% - 0.71px - 0.2929 * var(--cut-r-lg)) calc(100% - 33.71px + 0.2929 * var(--cut-r-lg)), calc(100% - 33.71px + 0.2929 * var(--cut-r-lg)) calc(100% - 0.71px - 0.2929 * var(--cut-r-lg)), calc(100% - 33.56px + 0.1414 * var(--cut-r-lg)) calc(100% - 0.83px - 0.1685 * var(--cut-r-lg)), calc(100% - 33.38px - 0.0315 * var(--cut-r-lg)) calc(100% - 0.92px - 0.0761 * var(--cut-r-lg)), calc(100% - 33.2px - 0.2191 * var(--cut-r-lg)) calc(100% - 0.98px - 0.0192 * var(--cut-r-lg)), calc(100% - 33px - 0.4142 * var(--cut-r-lg)) calc(100% - 1px), calc(33px + 0.4142 * var(--cut-r-lg)) calc(100% - 1px), calc(33.2px + 0.2191 * var(--cut-r-lg)) calc(100% - 0.98px - 0.0192 * var(--cut-r-lg)), calc(33.38px + 0.0315 * var(--cut-r-lg)) calc(100% - 0.92px - 0.0761 * var(--cut-r-lg)), calc(33.56px - 0.1414 * var(--cut-r-lg)) calc(100% - 0.83px - 0.1685 * var(--cut-r-lg)), calc(33.71px - 0.2929 * var(--cut-r-lg)) calc(100% - 0.71px - 0.2929 * var(--cut-r-lg)), calc(0.71px + 0.2929 * var(--cut-r-lg)) calc(100% - 33.71px + 0.2929 * var(--cut-r-lg)), calc(0.83px + 0.1685 * var(--cut-r-lg)) calc(100% - 33.56px + 0.1414 * var(--cut-r-lg)), calc(0.92px + 0.0761 * var(--cut-r-lg)) calc(100% - 33.38px - 0.0315 * var(--cut-r-lg)), calc(0.98px + 0.0192 * var(--cut-r-lg)) calc(100% - 33.2px - 0.2191 * var(--cut-r-lg)), 1px calc(100% - 33px - 0.4142 * var(--cut-r-lg))); --shape-slab: polygon(0 calc(1 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(0.8049 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(0.6173 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(0.4444 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(0.4444 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(0.6173 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(0.8049 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(1 * var(--cut-r-lg)) 0, calc(100% - 52px - 0.4142 * var(--cut-r-lg)) 0, calc(100% - 52px - 0.2191 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(100% - 52px - 0.0315 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(100% - 52px + 0.1414 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(100% - 52px + 0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(52px - 0.2929 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(52px - 0.1414 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(52px + 0.0315 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(52px + 0.2191 * var(--cut-r-lg)), 100% calc(52px + 0.4142 * var(--cut-r-lg)), 100% calc(100% - 1 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(100% - 0.8049 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(100% - 0.6173 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(100% - 0.4444 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(100% - 0.4444 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(100% - 0.6173 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(100% - 0.8049 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(100% - 1 * var(--cut-r-lg)) 100%, calc(52px + 0.4142 * var(--cut-r-lg)) 100%, calc(52px + 0.2191 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(52px + 0.0315 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(52px - 0.1414 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(52px - 0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(100% - 52px + 0.2929 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(100% - 52px + 0.1414 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(100% - 52px - 0.0315 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(100% - 52px - 0.2191 * var(--cut-r-lg)), 0 calc(100% - 52px - 0.4142 * var(--cut-r-lg))); --shape-slab-alt: polygon(0 calc(52px + 0.4142 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(52px + 0.2191 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(52px + 0.0315 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(52px - 0.1414 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(52px - 0.2929 * var(--cut-r-lg)), calc(52px - 0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(52px - 0.1414 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(52px + 0.0315 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(52px + 0.2191 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(52px + 0.4142 * var(--cut-r-lg)) 0, calc(100% - 1 * var(--cut-r-lg)) 0, calc(100% - 0.8049 * var(--cut-r-lg)) calc(0.0192 * var(--cut-r-lg)), calc(100% - 0.6173 * var(--cut-r-lg)) calc(0.0761 * var(--cut-r-lg)), calc(100% - 0.4444 * var(--cut-r-lg)) calc(0.1685 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(0.2929 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(0.4444 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(0.6173 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(0.8049 * var(--cut-r-lg)), 100% calc(1 * var(--cut-r-lg)), 100% calc(100% - 52px - 0.4142 * var(--cut-r-lg)), calc(100% - 0.0192 * var(--cut-r-lg)) calc(100% - 52px - 0.2191 * var(--cut-r-lg)), calc(100% - 0.0761 * var(--cut-r-lg)) calc(100% - 52px - 0.0315 * var(--cut-r-lg)), calc(100% - 0.1685 * var(--cut-r-lg)) calc(100% - 52px + 0.1414 * var(--cut-r-lg)), calc(100% - 0.2929 * var(--cut-r-lg)) calc(100% - 52px + 0.2929 * var(--cut-r-lg)), calc(100% - 52px + 0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(100% - 52px + 0.1414 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(100% - 52px - 0.0315 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(100% - 52px - 0.2191 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(100% - 52px - 0.4142 * var(--cut-r-lg)) 100%, calc(1 * var(--cut-r-lg)) 100%, calc(0.8049 * var(--cut-r-lg)) calc(100% - 0.0192 * var(--cut-r-lg)), calc(0.6173 * var(--cut-r-lg)) calc(100% - 0.0761 * var(--cut-r-lg)), calc(0.4444 * var(--cut-r-lg)) calc(100% - 0.1685 * var(--cut-r-lg)), calc(0.2929 * var(--cut-r-lg)) calc(100% - 0.2929 * var(--cut-r-lg)), calc(0.1685 * var(--cut-r-lg)) calc(100% - 0.4444 * var(--cut-r-lg)), calc(0.0761 * var(--cut-r-lg)) calc(100% - 0.6173 * var(--cut-r-lg)), calc(0.0192 * var(--cut-r-lg)) calc(100% - 0.8049 * var(--cut-r-lg)), 0 calc(100% - 1 * var(--cut-r-lg))); --shape-shield: polygon(0 calc(22px + 0.4142 * var(--cut-r-md)), calc(0.0192 * var(--cut-r-md)) calc(22px + 0.2191 * var(--cut-r-md)), calc(0.0761 * var(--cut-r-md)) calc(22px + 0.0315 * var(--cut-r-md)), calc(0.1685 * var(--cut-r-md)) calc(22px - 0.1414 * var(--cut-r-md)), calc(0.2929 * var(--cut-r-md)) calc(22px - 0.2929 * var(--cut-r-md)), calc(22px - 0.2929 * var(--cut-r-md)) calc(0.2929 * var(--cut-r-md)), calc(22px - 0.1414 * var(--cut-r-md)) calc(0.1685 * var(--cut-r-md)), calc(22px + 0.0315 * var(--cut-r-md)) calc(0.0761 * var(--cut-r-md)), calc(22px + 0.2191 * var(--cut-r-md)) calc(0.0192 * var(--cut-r-md)), calc(22px + 0.4142 * var(--cut-r-md)) 0, calc(100% - 22px - 0.4142 * var(--cut-r-md)) 0, calc(100% - 22px - 0.2191 * var(--cut-r-md)) calc(0.0192 * var(--cut-r-md)), calc(100% - 22px - 0.0315 * var(--cut-r-md)) calc(0.0761 * var(--cut-r-md)), calc(100% - 22px + 0.1414 * var(--cut-r-md)) calc(0.1685 * var(--cut-r-md)), calc(100% - 22px + 0.2929 * var(--cut-r-md)) calc(0.2929 * var(--cut-r-md)), calc(100% - 0.2929 * var(--cut-r-md)) calc(22px - 0.2929 * var(--cut-r-md)), calc(100% - 0.1685 * var(--cut-r-md)) calc(22px - 0.1414 * var(--cut-r-md)), calc(100% - 0.0761 * var(--cut-r-md)) calc(22px + 0.0315 * var(--cut-r-md)), calc(100% - 0.0192 * var(--cut-r-md)) calc(22px + 0.2191 * var(--cut-r-md)), 100% calc(22px + 0.4142 * var(--cut-r-md)), 100% 80%, calc(50% + 7px) calc(100% - 1px), calc(50% - 7px) calc(100% - 1px), 0 80%); --cut-tab: polygon(0 calc(1 * var(--cut-r-sm)), calc(0.0192 * var(--cut-r-sm)) calc(0.8049 * var(--cut-r-sm)), calc(0.0761 * var(--cut-r-sm)) calc(0.6173 * var(--cut-r-sm)), calc(0.1685 * var(--cut-r-sm)) calc(0.4444 * var(--cut-r-sm)), calc(0.2929 * var(--cut-r-sm)) calc(0.2929 * var(--cut-r-sm)), calc(0.4444 * var(--cut-r-sm)) calc(0.1685 * var(--cut-r-sm)), calc(0.6173 * var(--cut-r-sm)) calc(0.0761 * var(--cut-r-sm)), calc(0.8049 * var(--cut-r-sm)) calc(0.0192 * var(--cut-r-sm)), calc(1 * var(--cut-r-sm)) 0, calc(100% - 1 * var(--cut-r-sm)) 0, calc(100% - 0.8049 * var(--cut-r-sm)) calc(0.0192 * var(--cut-r-sm)), calc(100% - 0.6173 * var(--cut-r-sm)) calc(0.0761 * var(--cut-r-sm)), calc(100% - 0.4444 * var(--cut-r-sm)) calc(0.1685 * var(--cut-r-sm)), calc(100% - 0.2929 * var(--cut-r-sm)) calc(0.2929 * var(--cut-r-sm)), calc(100% - 0.1685 * var(--cut-r-sm)) calc(0.4444 * var(--cut-r-sm)), calc(100% - 0.0761 * var(--cut-r-sm)) calc(0.6173 * var(--cut-r-sm)), calc(100% - 0.0192 * var(--cut-r-sm)) calc(0.8049 * var(--cut-r-sm)), 100% calc(1 * var(--cut-r-sm)), 100% calc(100% - 16px - 0.4142 * var(--cut-r-sm)), calc(100% - 0.0192 * var(--cut-r-sm)) calc(100% - 16px - 0.2191 * var(--cut-r-sm)), calc(100% - 0.0761 * var(--cut-r-sm)) calc(100% - 16px - 0.0315 * var(--cut-r-sm)), calc(100% - 0.1685 * var(--cut-r-sm)) calc(100% - 16px + 0.1414 * var(--cut-r-sm)), calc(100% - 0.2929 * var(--cut-r-sm)) calc(100% - 16px + 0.2929 * var(--cut-r-sm)), calc(100% - 16px + 0.2929 * var(--cut-r-sm)) calc(100% - 0.2929 * var(--cut-r-sm)), calc(100% - 16px + 0.1414 * var(--cut-r-sm)) calc(100% - 0.1685 * var(--cut-r-sm)), calc(100% - 16px - 0.0315 * var(--cut-r-sm)) calc(100% - 0.0761 * var(--cut-r-sm)), calc(100% - 16px - 0.2191 * var(--cut-r-sm)) calc(100% - 0.0192 * var(--cut-r-sm)), calc(100% - 16px - 0.4142 * var(--cut-r-sm)) 100%, calc(1 * var(--cut-r-sm)) 100%, calc(0.8049 * var(--cut-r-sm)) calc(100% - 0.0192 * var(--cut-r-sm)), calc(0.6173 * var(--cut-r-sm)) calc(100% - 0.0761 * var(--cut-r-sm)), calc(0.4444 * var(--cut-r-sm)) calc(100% - 0.1685 * var(--cut-r-sm)), calc(0.2929 * var(--cut-r-sm)) calc(100% - 0.2929 * var(--cut-r-sm)), calc(0.1685 * var(--cut-r-sm)) calc(100% - 0.4444 * var(--cut-r-sm)), calc(0.0761 * var(--cut-r-sm)) calc(100% - 0.6173 * var(--cut-r-sm)), calc(0.0192 * var(--cut-r-sm)) calc(100% - 0.8049 * var(--cut-r-sm)), 0 calc(100% - 1 * var(--cut-r-sm))); /* cut-shapes:end */ --shape-gem: polygon(40px 0, calc(100% - 40px) 0, calc(100% - 1px) calc(50% - 7px), calc(100% - 1px) calc(50% + 7px), calc(100% - 40px) 100%, 40px 100%, 1px calc(50% + 7px), 1px calc(50% - 7px)); /* ---- טיפוגרפיה · ספר 3.2 (דסקטופ) + 3.3 (מובייל: כותרת 34, גוף 17, כותרת לא מתחת ל-28) ---- */ --font: "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif; --fs-h1: 34px; --lh-h1: 1.18; /* מובייל H1 34/118% */ --fs-h2: 28px; --lh-h2: 1.2; /* מובייל H2 28/120% (סגנון 'ספיר 2026/מובייל/H2') */ --fs-h3: 22px; --lh-h3: 1.3; /* מובייל H3 */ --fs-body: 17px; --lh-body: 1.6; /* גוף מובייל 17 Light */ --fs-quote: 22px; /* ציטוט (ספר: 'דסקטופ/ציטוט' Regular 32/1.4) */ --fs-small: 15px; --lh-small: 1.5; /* Small 15 Light */ --fs-label: 14px; --lh-label: 1.4; /* Label 14 Medium */ --fs-button: 17px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-body: 400; /* גוף רץ: Regular לקריאות (הספר: Light) - פער מתועד ב-03c */ /* ---- ריווח · סולם 8 ---- */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-128: 128px; --gutter: 24px; --section-y: 88px; /* סבב 9: מובייל נושם (היה 72) */ /* ריווח סמנטי (סבב 9). מובייל וטאבלט רחבים יותר; מ-1200 חוזרים לערכי הדסקטופ הקודמים */ --space-head: 24px; --space-para: 20px; --space-media: 40px; --space-cta: 40px; --space-tiles: 20px; --space-block: 56px; --measure: 34em; /* אורך שורת גוף */ --container: 1248px; /* ---- תנועה · ספר 9.1: לחוץ = scale 0.98 עם spring; 9.4: פתיחה ב-spring ---- */ --ease-spring: cubic-bezier(.16, 1, .3, 1); --ease-press: cubic-bezier(.34, 1.42, .64, 1); --dur-fast: 200ms; --dur-base: 300ms; --dur-open: 460ms; /* ---- הדגשה בטקסט (מכשיר אחד לכל סקשן): מרקר רובי שקוף מאחורי חצי השורה התחתון ---- */ --hl: rgba(201, 47, 85, .22); --hl-dark: rgba(232, 96, 127, .30); } @media (min-width: 768px) { :root { --fs-h1: 48px; --lh-h1: 1.12; --fs-h2: 36px; --lh-h2: 1.18; --fs-h3: 26px; --lh-h3: 1.28; --fs-body: 18px; --gutter: 48px; --section-y: 104px; --space-tiles: 24px; } } @media (min-width: 1200px) { :root { --fs-h1: 64px; --lh-h1: 1.1; /* H1 64/110% */ --fs-quote: 28px; --fs-h2: 48px; --lh-h2: 1.15; /* H2 48/115% */ --fs-h3: 32px; --lh-h3: 1.25; /* H3 32/125% */ --fs-body: 18px; --lh-body: 1.6; /* ספר 5.2: גוף 18/160% */ --gutter: 96px; /* ספר 11.1: ריפוד 96 ב-1440 */ --section-y: 128px; --space-head: 16px; --space-para: 16px; --space-media: 40px; --space-cta: 32px; --space-tiles: 24px; --space-block: 48px; } } /* hidden תמיד מנצח: כלל display של רכיב (flex/grid) לא יחזיר אלמנט מוסתר (באג שולאד מצא ב"הצג עוד", 3.10.26) */ [hidden] { display: none !important; } /* ========================================================================== בסיס ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.js-smooth { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html.js-smooth { scroll-behavior: auto; } } html.fonts-wait body { visibility: hidden; } body { margin: 0; font-family: var(--font); font-weight: var(--fw-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--bg-default); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; } /* בלי יתומים: כותרות balance; פסקאות wrap רגיל + NBSP בין שתי המילים האחרונות (ידני + lp360.js) */ h1, h2, h3 { text-wrap: balance; } p, li, label { text-wrap: wrap; } strong, b { font-weight: var(--fw-semibold); } .skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 50; background: var(--cream-50); color: var(--wine-950); padding: 12px 16px; border-radius: var(--radius-control); font-weight: var(--fw-medium); } .skip-link:focus { top: 16px; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* טבעת פוקוס גלובלית - לא על פקדי טקסט (להם מצב משלהם, ספר 9.2) */ :focus-visible { outline: 2px solid var(--state-focus); outline-offset: 3px; } .on-dark :focus-visible { outline-color: var(--state-focus-dark); } input:not([type=checkbox]):not([type=radio]):focus-visible, textarea:focus-visible { outline: none; } /* ========================================================================== פריסה ========================================================================== */ .wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .s { position: relative; padding-block: var(--section-y); } .s--white { background: var(--bg-default); } .s--breath { background: var(--bg-breath); } .s--dark, .on-dark { background: var(--bg-dark); color: var(--text-on-dark); } .s > .wrap { position: relative; z-index: 1; } .measure { max-width: 34em; } /* טקסטורת פאות · ספר 7.2: 3%, פינה עליונה שמאלית, רק בעמודים לבנים */ .texture { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .texture img { position: absolute; top: 0; left: 0; width: 720px; max-width: none; height: auto; } @media (min-width: 1200px) { .texture img { width: 1920px; } } /* גריד שתי עמודות: טקסט + ויזואל. ב-RTL העמודה הראשונה מימין */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-media); align-items: center; } /* explicit track (an implicit auto column spilled 5-10px at 320) */ @media (min-width: 1200px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 96px; } .split--top { align-items: start; } } /* ========================================================================== טיפוגרפיה · שלוש רמות לכל היותר בסקשן: כותרת, גוף, הדגשה אחת ========================================================================== */ .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); } .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); } .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); } .t-small { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-body); } .t-accent { color: var(--text-accent); } .on-dark .t-accent { color: var(--text-accent-on-dark); } .stack > * + * { margin-top: var(--space-para); } .head-gap { margin-top: var(--space-head); } .block-gap { margin-top: var(--space-block); } /* הדגשה בטקסט (חדש, מתועד לספר): אותו גודל, SemiBold, ומרקר רובי שקוף בחצי השורה התחתון. פעם אחת בסקשן. עובד על בהיר ועל כהה; עובר שבירת שורה (box-decoration-break). */ .hl { font-weight: var(--fw-semibold); background-image: linear-gradient(transparent 50%, var(--hl) 50%, var(--hl) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 3px; margin-inline: -3px; } .on-dark .hl { background-image: linear-gradient(transparent 50%, var(--hl-dark) 50%, var(--hl-dark) 96%, transparent 96%); } /* ========================================================================== לוגו ========================================================================== */ .logo { display: block; width: 130px; height: auto; } .logo-link { display: inline-flex; align-items: center; min-height: 44px; } @media (min-width: 1200px) { .logo { width: 180px; } } /* ========================================================================== כפתור ראשי · ספר 9.1. ריחוף: ברק אור שחוצה את הפאה + הצל מעמיק (300ms). בלי חצים ואייקונים. צורה (גיא, 7.10.26): עגול ברדיוס יחסי לגובה, 56 -> 24 (--radius-button-56 ממערכת העיצוב), במקום הפאה החתוכה. ========================================================================== */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding-inline: 32px; border: 0; background: none; cursor: pointer; text-decoration: none; font-family: var(--font); font-size: var(--fs-button); font-weight: var(--fw-semibold); line-height: 1; color: var(--action-on-primary); white-space: nowrap; -webkit-tap-highlight-color: transparent; /* box-shadow ולא filter: drop-shadow - ב-WebKit הפילטר צייר ריבוע שחור בפינת המסך */ border-radius: var(--radius-button-56); box-shadow: 0 12px 22px -8px rgba(201, 47, 85, .42); --btn-from: var(--action-primary-from); --btn-to: var(--action-primary-to); --sheen-x: 135%; transition: transform var(--dur-fast) var(--ease-press), box-shadow var(--dur-base) ease; } .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%) var(--sheen-x) 0 / 260% 100% no-repeat, linear-gradient(var(--effect-primary-highlight), var(--effect-primary-highlight)) top / 100% 1px no-repeat, linear-gradient(180deg, var(--btn-from), var(--btn-to)); transition: background-position 320ms var(--ease-spring); } @media (hover: hover) { .btn:hover { --btn-from: var(--action-primary-hover-from); --btn-to: var(--action-primary-hover-to); --sheen-x: -35%; box-shadow: 0 16px 30px -10px rgba(201, 47, 85, .55); } } .btn:active { transform: scale(.98); box-shadow: 0 5px 10px -4px rgba(201, 47, 85, .3); } .btn:focus-visible { outline: none; } .btn::after { content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: calc(var(--radius-button-56) + 5px); box-shadow: inset 0 0 0 2px var(--state-focus); opacity: 0; pointer-events: none; } .on-dark .btn::after { box-shadow: inset 0 0 0 2px var(--state-focus-dark); } .btn:focus-visible::after, .btn.is-focus::after { opacity: 1; } .btn .btn__label { transition: opacity var(--dur-fast) ease; } .btn .btn__loading { position: absolute; inset: 0; margin: auto; width: 48px; height: 12px; opacity: 0; pointer-events: none; } .btn.is-loading { cursor: progress; } .btn.is-loading .btn__label { opacity: 0; } .btn.is-loading .btn__loading { opacity: 1; } .btn.is-loading .btn__loading path { animation: facet-pulse 900ms var(--ease-spring) infinite; } .btn.is-loading .btn__loading path:nth-child(2) { animation-delay: 150ms; } .btn.is-loading .btn__loading path:nth-child(3) { animation-delay: 300ms; } @keyframes facet-pulse { 0%, 100% { opacity: .35; } 40% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .btn, .btn:active, .btn::before { transition: none; transform: none; } .btn:hover { --sheen-x: 135%; } .btn.is-loading .btn__loading path { animation: none; } } .btn--block { width: 100%; } .cta-row { margin-top: var(--space-cta); } @media (max-width: 767px) { .cta-row .btn { width: 100%; } } /* כפתור משני · ספר 9.1: קו מתאר בלי מילוי. צורה כמו הראשי (גאגו לפי גיא, 7.10.26): רדיוס יחסי לגובה, 56 -> 24 */ .btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding-inline: 32px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-button-56); background: transparent; cursor: pointer; font-size: var(--fs-button); font-weight: var(--fw-semibold); line-height: 1; color: var(--text-primary); transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-press); } @media (hover: hover) { .btn-ghost:hover { background: var(--bg-raised); } } .btn-ghost:active { transform: scale(.98); } .btn-ghost:focus-visible { outline: none; border-width: 2.5px; border-color: var(--state-focus); } /* ========================================================================== מיכל פאה · פינות חתוכות-רכות עם קו ========================================================================== */ .facet-box { position: relative; isolation: isolate; -webkit-clip-path: var(--box-cut, var(--cut-lg)); clip-path: var(--box-cut, var(--cut-lg)); } /* סבב 9: החיתוך על המיכל עצמו, כך שגם רקע או ילד לא בולטים מעבר לפינה */ .facet-box::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--box-cut, var(--cut-lg)); background: var(--box-stroke, var(--border-subtle-dark)); } .facet-box::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--box-cut-in, var(--cut-lg-in)); background: var(--box-fill, var(--bg-dark)); } .photo-frame { clip-path: var(--cut-md); overflow: hidden; background: var(--bg-raised); } .photo-frame img, .photo-frame video { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1200px) { .photo-frame--lg { clip-path: var(--cut-lg); } } /* ויזואל צדדי: צילום שלם במיכל חתוך + שברי פאות מהיהלום מאחוריו (לא מסכה, לא פריסה על פאות) */ .visual { position: relative; isolation: isolate; } .visual .photo-frame { position: relative; z-index: 1; aspect-ratio: 3 / 2; } .visual__frag { position: absolute; z-index: 0; pointer-events: none; overflow: visible; } .visual--a .visual__frag { width: 40%; top: -18%; left: -9%; } .visual--b .visual__frag { width: 34%; bottom: -20%; left: -8%; } .visual--c .visual__frag { width: 30%; top: -24%; left: -6%; } .visual--d .visual__frag { width: 32%; bottom: -26%; left: -9%; } @media (max-width: 1199px) { .visual { width: calc(100% - 28px); margin-inline: 14px; margin-block: 28px; } } /* אייקון מהשפה (פרק 06) */ .ic { width: 40px; height: 40px; flex: none; } /* אריח · כמו בדף הפתיחה בפולדר (ספר 13.4): פינות חתוכות, קו דק, אייקון, טקסט */ .tile { --box-cut: var(--cut-md); --box-cut-in: var(--cut-md-in); --box-fill: var(--white); --box-stroke: var(--border-subtle); padding: 24px 24px 26px; display: grid; gap: 14px; align-content: start; } .on-dark .tile { --box-fill: var(--wine-800); --box-stroke: var(--border-subtle-dark); } .tiles { display: grid; gap: var(--space-tiles); } @media (min-width: 768px) { .tiles--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } } /* חלופה B לבדיקה (?list=marker): בלי מסגרת, רק האייקון כסימון */ html.list-marker .tiles--morning .tile { padding: 0; } html.list-marker .tiles--morning .tile::before, html.list-marker .tiles--morning .tile::after { display: none; } /* רשימה עם אייקון כסימון (מתאים / לא מתאים / רגע זה לא הכול) */ .icon-list { display: grid; gap: var(--space-para); } .icon-list li { display: flex; gap: 14px; align-items: flex-start; } .icon-list .ic { width: 32px; height: 32px; margin-top: -2px; } /* ציטוט · ספר "ציטוט אחיד" (13 פרינט, 10.3): פאה רובי, טקסט Regular, ייחוס ברובי */ .quote { display: grid; gap: 12px; align-content: start; } .quote__facet { width: 26px; height: auto; } .quote__by { font-size: var(--fs-label); line-height: 1.4; font-weight: var(--fw-medium); color: var(--text-accent); } .on-dark .quote__by { color: var(--text-accent-on-dark); } .quote__text { font-size: var(--fs-quote); line-height: 1.4; font-weight: var(--fw-regular); } /* ========================================================================== 1 · הירו · ספר 11.1 ========================================================================== */ .hero { padding-top: 28px; padding-bottom: 56px; overflow: hidden; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 20px; } /* one explicit track: the implicit auto column took a child's min-content (the logo) and spilled 5-29px at 320 */ .hero__art { position: relative; width: min(100%, 400px); margin-inline: auto; aspect-ratio: 636 / 731; } .hero__diamond { position: absolute; left: 0; top: 16.47%; width: 100%; height: auto; } /* תבנית 98:2188: התמונה 72% רוחב, נחתכת ב-V רך בחוד היהלום (המסכה של התבנית, באחוזים) */ .hero__person { position: absolute; left: 15.44%; right: 12.56%; top: .87%; bottom: 3.4%; clip-path: polygon(-20.2% -1%, 110.8% -1%, 110.8% 39.4%, 57.8% 86.6%, 32.8% 86.6%, -20.2% 39.4%); } .hero__person img { width: 100%; height: 100%; object-fit: cover; } .hero__text { margin-top: 12px; } .hero__kicker { font-size: var(--fs-body); line-height: 1.4; font-weight: var(--fw-medium); } .hero__title { margin-top: 12px; } .hero__sub { margin-top: 12px; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); color: var(--text-accent-on-dark); } .hero .cta-row { margin-top: 28px; } @media (min-width: 1200px) { .hero { padding-top: 48px; padding-bottom: 0; } .hero__grid { grid-template-columns: minmax(0, 1fr) 560px; grid-template-areas: "text art"; align-items: center; column-gap: 64px; margin-top: 0; } .hero__text { grid-area: text; margin-top: 0; padding-bottom: 40px; } .hero__art { grid-area: art; width: 560px; } .hero__title { margin-top: 16px; } .hero__sub { margin-top: 16px; } .hero .cta-row { margin-top: 40px; } } /* ========================================================================== 2 · הוכחה: ציטוטים + גלריית הודעות ========================================================================== */ .quotes { margin-top: var(--sp-40); display: grid; gap: var(--space-tiles); } .quotes .quote { --box-cut: var(--cut-md); --box-cut-in: var(--cut-md-in); --box-fill: var(--cream-50); --box-stroke: var(--cream-50); padding: 28px 24px 30px; } @media (min-width: 768px) { .quotes { grid-template-columns: 1fr 1fr; gap: 24px; } .quotes .quote { padding: 36px 36px 38px; } } /* פתיח גלריית הוואטסאפ (גיא, 5.10.26): כותרת משנה ב-H3 של הספר, עם מרווח של תת-סקשן מעל העדויות (48 / 64 / 80) כדי שהגלריה תיקרא כחלק נפרד בתוך הסקשן. בלי קו - ההפרדה ברווח בלבד. מתחת: 24 עד הגלריה (.gallery) */ .msgs__lead { margin-top: var(--sp-48); text-wrap: balance; } @media (min-width: 768px) { .msgs__lead { margin-top: var(--sp-64); } } @media (min-width: 1200px) { .msgs__lead { margin-top: var(--sp-80); } } /* גלריית וואטסאפ (גיא, 5.10.26): כל צילום בפרופורציה המקורית שלו - בלי פאה, בלי חיתוך לגובה אחיד, בלי רקע ובלי מסגרת. פינות 12 וצל עדין מאוד. טור אחד עד 767 (רוחב מלא, הגובה המקורי), 2 טורים מ-768, 3 מ-1200, ברווח 16 / 24. הגובה ידוע מראש (width/height מהמדיה), אז אין CLS. לחיצה פותחת לייטבוקס עם הצילום המלא. בלי JS: CSS columns (הסדר יורד לאורך כל טור). עם JS (lp360.js): גריד שמסתדר לפי הגבהים ושומר על הסדר שספיר קבעה - כל צילום נכנס לטור הנמוך ביותר, מימין לשמאל. */ .gallery { --gal-gap: 16px; margin-top: var(--sp-24); position: relative; } .gallery__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gal-gap); align-items: start; position: relative; } .gallery__item { margin: 0; min-width: 0; } @media (max-width: 767px) { /* מובייל (גיא, 10.10.26): טור אחד, ממורכז ובערך 80% מהרוחב - הטקסט נשאר קריא והגלילה קצרה יותר */ .gallery__item { width: 80%; margin-inline: auto; } } @media (min-width: 768px) { .gallery { --gal-gap: 24px; } .gallery__grid { display: block; columns: 2; column-gap: var(--gal-gap); } .gallery__item { break-inside: avoid; margin-bottom: var(--gal-gap); } .gallery__grid.is-masonry { display: grid; columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1px; grid-auto-flow: row dense; gap: 0 var(--gal-gap); margin-bottom: calc(-1 * var(--gal-gap)); } .gallery__grid.is-masonry .gallery__item { margin-bottom: 0; } } @media (min-width: 1200px) { .gallery__grid { columns: 3; } .gallery__grid.is-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .shot { display: block; border-radius: 12px; overflow: hidden; cursor: zoom-in; box-shadow: 0 1px 3px rgba(22, 11, 15, .08); -webkit-tap-highlight-color: transparent; } .shot img { display: block; width: 100%; height: auto; } .shot:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 3px; } .js .gallery[data-reveal] .gallery__item { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease-spring), transform 500ms var(--ease-spring); } .js .gallery[data-reveal] .gallery__item.is-in { opacity: 1; transform: none; } .gallery__item[hidden] { display: none; } /* פייד: השורה האחרונה נמוגה לצבע הרקע של הסעיף, והכפתור יושב על קצה הפייד */ .gallery.is-collapsed .gallery__grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 112px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--gal-bg, #fff) 92%); } .gallery__more { display: flex; justify-content: center; margin-top: -24px; position: relative; z-index: 2; transition: opacity 280ms ease; } .gallery__more.is-gone { opacity: 0; pointer-events: none; } .gallery__btn { position: relative; min-width: 156px; justify-content: center; } .gallery__btn-label { transition: opacity var(--dur-fast) ease; } .gallery__btn .gal-loader { position: absolute; inset: 0; margin: auto; width: 30px; height: 27px; opacity: 0; transition: opacity var(--dur-fast) ease; } .gal-loader path { fill: var(--wine-950); opacity: .14; } .gal-loader path.is-ruby { fill: var(--ruby-500); } .gallery__btn.is-loading { cursor: progress; } .gallery__btn.is-loading .gallery__btn-label { opacity: 0; } .gallery__btn.is-loading .gal-loader { opacity: 1; } .gallery__btn.is-loading .gal-loader path { animation: gal-facet 900ms var(--ease-spring) infinite; } .gallery__btn.is-loading .gal-loader path:nth-child(2) { animation-delay: 110ms; } .gallery__btn.is-loading .gal-loader path:nth-child(3) { animation-delay: 220ms; } .gallery__btn.is-loading .gal-loader path:nth-child(4) { animation-delay: 330ms; } .gallery__btn.is-loading .gal-loader path:nth-child(5) { animation-delay: 440ms; } @keyframes gal-facet { 0% { opacity: .14; } 35% { opacity: 1; } 100% { opacity: .14; } } .js .gallery[data-reveal] .gallery__item.is-pending { opacity: 0; transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { .js .gallery[data-reveal] .gallery__item { opacity: 1; transform: none; transition: none; } .gallery__btn.is-loading .gal-loader path { animation: none; } } /* לייטבוקס: הצילום המלא בגודל קריא, בתוך המסך, בלי גלילה פנימית */ html.lb-open, html.lb-open body { overflow: hidden; } .lb { position: fixed; inset: 0; z-index: 10050; display: grid; grid-template-rows: 1fr auto; background: rgba(22, 11, 15, .94); color: var(--text-on-dark); padding: 72px 16px 16px; opacity: 0; transition: opacity 200ms ease; overscroll-behavior: contain; touch-action: pan-y; } .lb[hidden] { display: none; } .lb.is-open { opacity: 1; } .lb__stage { min-height: 0; display: grid; place-items: center; } .lb__img { display: block; width: auto; height: auto; max-width: min(100%, 720px); max-height: calc(100svh - 168px); object-fit: contain; clip-path: var(--cut-md); transform: scale(.97); transition: transform 280ms var(--ease-spring); } .lb.is-open .lb__img { transform: none; } .lb__bar { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 64px; } .lb__count { font-size: var(--fs-label); font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; } .lb__btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(247, 244, 241, .35); border-radius: var(--radius-control); background: rgba(247, 244, 241, .06); color: var(--text-on-dark); cursor: pointer; transition: background-color var(--dur-fast) ease; } .lb__btn svg { width: 20px; height: 20px; } @media (hover: hover) { .lb__btn:hover { background: rgba(247, 244, 241, .14); } } .lb__btn:focus-visible { outline: 2px solid var(--state-focus-dark); outline-offset: 2px; } .lb__close { position: absolute; top: 12px; left: 12px; } @media (min-width: 768px) { .lb { padding: 72px 96px 16px; } .lb__img { max-height: calc(100svh - 168px); } } @media (prefers-reduced-motion: reduce) { .lb, .lb__img { transition: none; } .lb__img { transform: none; } } /* ========================================================================== 3 · מוכנה גם? ========================================================================== */ .ready__no { margin-top: var(--sp-16); } /* ========================================================================== הסיפור של ספיר (במקור סעיף 10, הוזז למעלה בהחלטת גיא) ========================================================================== */ .story__grid { display: grid; gap: var(--sp-40); } .story__photo { position: relative; isolation: isolate; } .story__photo .photo-frame { aspect-ratio: 4 / 5; position: relative; z-index: 1; } .story { overflow-x: clip; } .story__frag { position: absolute; z-index: 0; width: 56%; bottom: 6%; left: -40%; pointer-events: none; } .story__body > * + * { margin-top: calc(var(--space-para) + 8px); } .story__quote { margin-block: var(--sp-40) !important; } .story__quote .quote__text { font-size: var(--fs-h3); line-height: 1.4; } .story__close { margin-top: var(--sp-64) !important; } @media (max-width: 1199px) { .story__photo { width: min(78%, 360px); margin-inline-end: auto; margin-bottom: 24px; } } @media (min-width: 1200px) { .story__grid { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 112px; align-items: start; } .story__photo { grid-column: 2; grid-row: 1; position: sticky; top: 72px; } .story__body { grid-column: 1; grid-row: 1; max-width: 640px; } } /* ========================================================================== 4 · הבוקר שאחרי · אריחים ========================================================================== */ .morning .tiles { margin-top: calc(var(--space-head) + 8px); } .morning__last { margin-top: var(--sp-32); } /* ========================================================================== 5 · הגישה ========================================================================== */ .approach .tiles { margin-top: var(--space-block); } .tile__name { font-weight: var(--fw-semibold); } .approach__more { margin-top: var(--sp-48); max-width: 46em; } .approach__more p + p { margin-top: var(--space-para); } /* ========================================================================== 6 · מה כוללת התוכנית · במה מרכזית ========================================================================== */ .program__title { text-align: center; } .method { position: relative; margin: var(--sp-40) auto 0; width: 100%; max-width: 342px; } .method__fig { position: relative; width: 300px; height: 288px; margin-inline: auto; } .method__svg { position: absolute; width: 258px; left: 21px; top: 26px; height: auto; overflow: visible; } .method__num { position: absolute; font-size: 17px; line-height: 1; font-weight: var(--fw-regular); color: var(--text-accent-on-dark); } .method__axes { margin-top: var(--sp-32); display: grid; gap: var(--sp-24); } .axis { display: flex; align-items: center; gap: 14px; } .axis__icon { width: 40px; height: 40px; display: grid; place-items: center; flex: none; } .axis__icon img { max-width: 34px; max-height: 32px; width: auto; height: auto; } .axis__num { font-size: 17px; font-weight: var(--fw-regular); color: var(--text-accent-on-dark); min-width: 22px; } .axis__name { font-size: 22px; line-height: 1.3; font-weight: var(--fw-semibold); } @media (min-width: 1200px) { .method { width: 680px; max-width: none; height: 600px; } .method__fig { position: absolute; inset: 0; width: auto; height: auto; } .method__svg { width: 380px; left: 150px; top: 112px; } .method__num { display: none; } .method__axes { position: absolute; inset: 0; margin: 0; display: block; } .axis { position: absolute; flex-direction: column; gap: 6px; text-align: center; width: 160px; margin-left: -80px; } .axis__num { min-width: 0; font-size: 15px; } .axis__name { font-size: 20px; } .axis--01 { left: 452px; top: 0; } .axis--02 { left: 228px; top: 0; } .axis--03 { left: 82px; top: 180px; } .axis--05 { left: 612px; top: 180px; } .axis--04 { left: 340px; top: 490px; } } /* הנפשת כניסה: הפאות אחת אחרי השנייה, הצירים ב-stagger, DNA אחרון. פעם אחת, רק transform/opacity */ .method .m-f, .method .m-dna, .method .m-dna-t { transform-box: fill-box; transform-origin: center; } .js .method.will-anim .m-f { opacity: 0; transform: scale(.82); } .js .method.will-anim .m-dna, .js .method.will-anim .m-dna-t { opacity: 0; transform: scale(.7); } .js .method.will-anim .axis, .js .method.will-anim .method__num { opacity: 0; transform: translateY(10px); } .js .method.will-anim.is-in .m-f { opacity: 1; transform: none; transition: opacity 420ms var(--ease-spring) calc(var(--i) * 55ms), transform 520ms var(--ease-spring) calc(var(--i) * 55ms); } .js .method.will-anim.is-in .axis, .js .method.will-anim.is-in .method__num { opacity: 1; transform: none; transition: opacity 420ms var(--ease-spring) calc(700ms + var(--a) * 110ms), transform 520ms var(--ease-spring) calc(700ms + var(--a) * 110ms); } .js .method.will-anim.is-in .m-dna, .js .method.will-anim.is-in .m-dna-t { opacity: 1; transform: none; transition: opacity 500ms var(--ease-spring) 1350ms, transform 640ms var(--ease-press) 1350ms; } @media (prefers-reduced-motion: reduce) { .js .method.will-anim * { opacity: 1 !important; transform: none !important; transition: none !important; } } .rhythm { margin-top: var(--sp-64); display: grid; gap: var(--sp-40); align-items: center; } @media (min-width: 1200px) { .rhythm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 96px; } } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .stat { display: grid; justify-items: start; gap: 8px; } .stat .ic { width: 40px; height: 40px; } .stat__num { font-size: 48px; line-height: 1; font-weight: var(--fw-semibold); color: var(--text-accent-on-dark); } .stat__label { font-size: var(--fs-body); line-height: 1.35; } @media (min-width: 1200px) { .stats { gap: 32px; } .stat__num { font-size: 64px; } .stat .ic { width: 48px; height: 48px; } } .sessions { margin-top: var(--sp-64); } .acc { margin-top: var(--space-head); } @media (min-width: 1200px) { .acc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; } .acc__col { min-width: 0; } } .acc__item { position: relative; } .acc__item::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--border-subtle); } .on-dark .acc__item::after { background: var(--border-subtle-dark); } .acc__item.is-open::after { height: 2px; background: var(--ruby-500); } .acc__q { margin: 0; font: inherit; } .acc__btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 24px 0; border: 0; background: none; cursor: pointer; text-align: start; font-size: 22px; line-height: 1.3; font-weight: var(--fw-semibold); color: inherit; border-radius: var(--radius-control); -webkit-tap-highlight-color: transparent; } .acc__btn:focus-visible { outline: 2px solid var(--state-focus); outline-offset: 2px; } .on-dark .acc__btn:focus-visible { outline-color: var(--state-focus-dark); } @media (hover: hover) { .acc__btn:hover .acc__title { color: var(--text-accent); } .on-dark .acc__btn:hover .acc__title { color: var(--text-accent-on-dark); } } .acc__title { flex: 1 1 auto; transition: color var(--dur-fast) ease; } .acc__icon { flex: none; width: 24px; height: 24px; position: relative; order: 2; } /* שברון בלי קו (גיא, 3.10.26): סגור = למטה, פתוח = למעלה */ .acc__icon img { position: absolute; inset: 3px; width: 18px; height: 18px; transition: transform var(--dur-open) var(--ease-spring); } .acc__item.is-open .i-chev { transform: rotate(180deg); } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-open) var(--ease-spring); } .acc__item.is-open .acc__panel { grid-template-rows: 1fr; } .acc__inner { overflow: hidden; } .acc__body { padding-bottom: 24px; } @media (prefers-reduced-motion: reduce) { .acc__panel, .acc__icon img { transition: none; } } .more { margin-top: var(--sp-64); } .more .icon-list { margin-top: var(--sp-40); } /* Two white sections in a row (ready + msgs): one gap, not two (Guy, 8.10.26) */ .ready + .msgs { padding-top: 0; } /* פס הפרדה עדין ברוחב התוכן (יין עמוק, גיא 8.10.26) ויותר אוויר מעליו ומתחתיו: הסוכנת היא רגע נפרד, לא המשך של "רגע, זה לא הכול" */ /* סאפ (גיא 8.10.26): סעיף לבן משלה אחרי "מה כוללת התוכנית", ובו מלבן יין ברוחב התוכן: חיתוך ארוך רק בפינה הימנית העליונה והשמאלית התחתונה (בקצוות מעוגלים), ושתי הפינות האחרות מעוגלות */ .sapsec { padding-block: var(--sp-64); } /* Guy 28.10.26: softer joints where the cut meets the edges, site-wide - each joint is a 56px circle arc tangent to the edge and the 45deg cut (8 steps; was ~22px). The bottom corner is the top one turned 180deg. */ /* The cut-corner shapes, shared by Sap's card and the site tiles (Yonatan 29.10.26): --sapclip cuts two corners, --sapclip-one only the top one. Declared on the element so each one's own --cut resolves. */ .sapcard, .sx-tile { --sapclip: polygon(0 0, calc(100% - var(--cut) - 23.20px) 0, calc(100% - var(--cut) - 17.71px) 0.27px, calc(100% - var(--cut) - 12.27px) 1.08px, calc(100% - var(--cut) - 6.94px) 2.41px, calc(100% - var(--cut) - 1.77px) 4.26px, calc(100% - var(--cut) + 3.20px) 6.61px, calc(100% - var(--cut) + 7.92px) 9.44px, calc(100% - var(--cut) + 12.33px) 12.71px, calc(100% - var(--cut) + 16.40px) 16.40px, calc(100% - 16.40px) calc(var(--cut) - 16.40px), calc(100% - 12.71px) calc(var(--cut) - 12.33px), calc(100% - 9.44px) calc(var(--cut) - 7.92px), calc(100% - 6.61px) calc(var(--cut) - 3.20px), calc(100% - 4.26px) calc(var(--cut) + 1.77px), calc(100% - 2.41px) calc(var(--cut) + 6.94px), calc(100% - 1.08px) calc(var(--cut) + 12.27px), calc(100% - 0.27px) calc(var(--cut) + 17.71px), calc(100% + 0.00px) calc(var(--cut) + 23.20px), 100% 100%, calc(var(--cut) + 23.20px) calc(100% + 0.00px), calc(var(--cut) + 17.71px) calc(100% - 0.27px), calc(var(--cut) + 12.27px) calc(100% - 1.08px), calc(var(--cut) + 6.94px) calc(100% - 2.41px), calc(var(--cut) + 1.77px) calc(100% - 4.26px), calc(var(--cut) - 3.20px) calc(100% - 6.61px), calc(var(--cut) - 7.92px) calc(100% - 9.44px), calc(var(--cut) - 12.33px) calc(100% - 12.71px), calc(var(--cut) - 16.40px) calc(100% - 16.40px), 16.40px calc(100% - var(--cut) + 16.40px), 12.71px calc(100% - var(--cut) + 12.33px), 9.44px calc(100% - var(--cut) + 7.92px), 6.61px calc(100% - var(--cut) + 3.20px), 4.26px calc(100% - var(--cut) - 1.77px), 2.41px calc(100% - var(--cut) - 6.94px), 1.08px calc(100% - var(--cut) - 12.27px), 0.27px calc(100% - var(--cut) - 17.71px), 0.00px calc(100% - var(--cut) - 23.20px)); --sapclip-one: polygon(0 0, calc(100% - var(--cut) - 23.20px) 0, calc(100% - var(--cut) - 17.71px) 0.27px, calc(100% - var(--cut) - 12.27px) 1.08px, calc(100% - var(--cut) - 6.94px) 2.41px, calc(100% - var(--cut) - 1.77px) 4.26px, calc(100% - var(--cut) + 3.20px) 6.61px, calc(100% - var(--cut) + 7.92px) 9.44px, calc(100% - var(--cut) + 12.33px) 12.71px, calc(100% - var(--cut) + 16.40px) 16.40px, calc(100% - 16.40px) calc(var(--cut) - 16.40px), calc(100% - 12.71px) calc(var(--cut) - 12.33px), calc(100% - 9.44px) calc(var(--cut) - 7.92px), calc(100% - 6.61px) calc(var(--cut) - 3.20px), calc(100% - 4.26px) calc(var(--cut) + 1.77px), calc(100% - 2.41px) calc(var(--cut) + 6.94px), calc(100% - 1.08px) calc(var(--cut) + 12.27px), calc(100% - 0.27px) calc(var(--cut) + 17.71px), calc(100% + 0.00px) calc(var(--cut) + 23.20px), 100% 100%, 0 100%); } .sapcard { position: relative; isolation: isolate; overflow: clip; --cut: 64px; border-radius: 28px; padding: var(--sp-48) var(--sp-24); clip-path: var(--sapclip); color: var(--text-on-dark); background: radial-gradient(rgba(255, 224, 232, .07) 1px, transparent 1.3px) 0 0 / 26px 26px, url("../brand/facet-texture-on-dark-v1.svg") center / cover no-repeat, radial-gradient(120% 130% at 24% 55%, #20111A 0%, #170C12 55%, #110A0E 100%); } /* חלק ה-AI נבדל (גיא 8.10.26): טקסטורת הפאות של המותג בגוון בהיר, רשת נקודות, זוהר מטושטש נע לאט וגרעיניות. בקטנה גם אור צהוב-חם כמו מנורה מהפינה (זהב מותר במסמכי 360). הכל מאחורי התוכן, ופחות בורדו */ .sapcard::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; filter: blur(30px); background: radial-gradient(26% 34% at 25% 19%, rgba(255, 200, 100, .52), rgba(255, 168, 70, .16) 52%, transparent 76%), radial-gradient(34% 38% at 30% 62%, rgba(232, 96, 127, .08), transparent 70%), radial-gradient(30% 36% at 82% 40%, rgba(70, 60, 120, .2), transparent 72%), radial-gradient(36% 34% at 64% 90%, rgba(201, 47, 85, .08), transparent 70%); } .sapcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .companion__badge { display: flex; margin-bottom: var(--sp-24); } .companion__badge img { display: block; width: 72px; height: 72px; filter: drop-shadow(0 0 16px rgba(255, 198, 120, .38)); } @keyframes sap-aurora { from { transform: translate3d(-2%, -1%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08); } } @media (prefers-reduced-motion: no-preference) { .sapcard::before { animation: sap-aurora 18s ease-in-out infinite alternate; } } @media (min-width: 768px) { .sapsec { padding-block: var(--sp-80); } .sapcard { --cut: 88px; padding: var(--sp-64) var(--sp-48); } } @media (min-width: 1200px) { .sapsec { padding-block: var(--sp-96); } .sapcard { --cut: 120px; padding: var(--sp-64) var(--sp-96); } } .companion .measure { text-wrap: pretty; } .companion { display: grid; grid-template-columns: minmax(0, 1fr); } .companion__copy { grid-row: 2; } .companion__fig { grid-row: 1; margin: 0 0 var(--sp-40); display: flex; flex-direction: column; align-items: center; gap: var(--sp-24); } .companion__fig figcaption { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--text-on-dark); } /* סאפ (גיא 8.10.26): הקארה בעיגול גדול ומאוורר, חלונית הודעה מעליה, טבעות יין סביבה ואייקונים מהשפה של ספיר שצפים, נושמים, נעלמים וחוזרים (תחושת AI). הדמות כולה בתוך העיגול. החלונית בהירה כמו בועת הוואטסאפ בסעיפים שמעל. */ .sap { position: relative; } /* הבועה עוגנת בקצה התחתון שלה, צמוד לראש העיגול, ולכן היא גדלה כלפי מעלה (גיא 8.10.26). במובייל ממורכזת מעל העיגול */ .sap__bubblebox { position: absolute; z-index: 3; inset-inline: 0; bottom: calc(100% - 66px); display: flex; justify-content: center; align-items: flex-end; pointer-events: none; } .sap__bubble { position: relative; max-width: 300px; --bw: auto; --bh: auto; padding: 14px 18px 15px; border-radius: 20px; color: var(--text-on-dark); text-align: start; border: 1px solid rgba(232, 96, 127, .55); background: #5E2539; box-shadow: 0 12px 30px rgba(0, 0, 0, .35), 0 0 24px rgba(232, 96, 127, .2), inset 0 1px 0 rgba(255, 255, 255, .12); } /* בועה ביין עם מסגרת רובי (גיא 8.10.26), לא לבנה */ .sap__bubble::after { content: ""; position: absolute; bottom: -7px; inset-inline-start: 50%; margin-inline-start: -8px; width: 16px; height: 16px; border-radius: 0 0 4px 0; background: #5E2539; border: 0 solid rgba(232, 96, 127, .55); border-right-width: 1px; border-bottom-width: 1px; transform: rotate(45deg); } /* שם השולחת: לבן וקטן מתחת להודעה, בפינה, כמו השעה בוואטסאפ (בלי שעה) - גיא 8.10.26 */ .sap__name { display: block; margin-top: 6px; text-align: end; font-size: 12px; line-height: 1.3; font-weight: var(--fw-regular); color: rgba(255, 255, 255, .88); } .sap__bubble p { margin: 0; font-size: 15.5px; line-height: 1.45; text-wrap: balance; } .sap__stage { --stage: min(300px, 100%); position: relative; width: var(--stage); aspect-ratio: 1; display: grid; place-items: center; overflow: clip; } .sap__stage::before, .sap__stage::after { content: ""; position: absolute; border-radius: 50%; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px)); } /* טבעות חיות (גיא 8.10.26): טבעת יין דקה עם קשת זוהרת שמסתובבת, ניאון רך בקטנה - כמו הילת סירי. הפנימית בכיוון אחד, החיצונית בנגדי */ .sap__stage::before { inset: 15%; background: conic-gradient(from 20deg, transparent 0 50%, rgba(232, 96, 127, .5) 74%, #FF8FAA 95%, #FFE3EA 99%, transparent 100%), linear-gradient(rgba(90, 36, 51, .75), rgba(90, 36, 51, .75)); filter: drop-shadow(0 0 5px rgba(232, 96, 127, .6)); } .sap__stage::after { inset: 6%; background: conic-gradient(from 200deg, transparent 0 58%, rgba(232, 96, 127, .3) 82%, rgba(255, 214, 224, .8) 98%, transparent 100%), linear-gradient(rgba(90, 36, 51, .5), rgba(90, 36, 51, .5)); filter: drop-shadow(0 0 4px rgba(232, 96, 127, .4)); } .sap__avatar { position: relative; z-index: 1; width: 58%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 28%, rgba(74, 27, 43, .6) 0%, rgba(46, 17, 26, .46) 72%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* שקוף למחצה, מתמזג עם הרקע (גיא 8.10.26) */ box-shadow: 0 0 0 1.5px rgba(232, 96, 127, .55), 0 0 26px rgba(232, 96, 127, .2), 0 14px 36px rgba(0, 0, 0, .3); } .sap__avatar img { width: 86%; height: auto; flex: none; } /* כל הדמות בתוך העיגול, עם אוויר מסביב (גיא 8.10.26) */ .sap__orbit { position: absolute; z-index: 2; border-radius: 50%; pointer-events: none; } .sap__orbit--in { inset: 15%; } .sap__orbit--out { inset: 6%; } .sap__spark { position: absolute; inset: 0; opacity: 0; transform: rotate(var(--a)); } .sap__orbit--in .sap__spark:first-child { opacity: .85; } .sap__spark img { position: absolute; left: 50%; top: 0; display: block; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); } @media (min-width: 768px) { .sap__stage { --stage: 340px; } } @media (min-width: 1200px) { .companion { grid-template-columns: minmax(0, 1fr) auto; column-gap: 112px; align-items: center; } .companion__copy { grid-row: 1; grid-column: 1; max-width: 34em; } .companion__fig { grid-row: 1; grid-column: 2; justify-self: center; margin: 0; gap: var(--sp-32); } .sap__bubblebox { inset-inline: auto; left: 58%; bottom: 76%; justify-content: flex-start; } .sap__bubble { max-width: 214px; text-align: start; } .sap__bubble::after { inset-inline-start: auto; left: 30px; margin-inline-start: 0; } .sap.is-in .sap__bubble { transform-origin: 14% 112%; } .sap__stage { --stage: 410px; } } /* כניסה (גיא 8.10.26): מגיעים לסעיף, היא קורצת (lp360.js מחליף ל-SVG הקורץ), אחריה הבועה קופצת, הטבעות נושמות והאייקונים צפים ונעלמים וחוזרים, כל אחד בקצב משלו. בלי JS או בהפחתת תנועה: הכל גלוי ועומד במקום. */ .js .sap:not(.is-in) .sap__bubble, .js .sap:not(.is-in) .sap__spark { opacity: 0; } .sap.is-in .sap__bubble { transform-origin: 50% 100%; animation: sap-pop 640ms var(--ease-spring) 1.3s both; } @keyframes sap-pop { from { opacity: 0; transform: translateY(34px) scale(.35); } 55% { opacity: 1; transform: translateY(-3px) scale(1.04); } to { opacity: 1; transform: none; } } /* בועת צ'אט (גיא 8.10.26): קופצת מצד הדמות כבועה קטנה עם שלוש נקודות מקלידות, מתרחבת, וההודעה נכתבת בתוכה. lp360.js מודד את הגודל המלא ומוסיף sap--chat; בלי JS או בהפחתת תנועה: הבועה המלאה מיד */ /* איקס קטן בפינה העליונה של הבועה, חצי מחוץ לה כדי שלא יתנגש בטקסט (גיא 8.10.26): רק עם JS ורק עם ההודעה. אחרי לחיצה הבועה לא חוזרת עד רענון */ .sap__x { display: none; position: absolute; top: -10px; inset-inline-end: -10px; width: 24px; height: 24px; padding: 0; border: 1px solid rgba(232, 96, 127, .6); border-radius: 50%; background: #4D1D2E; color: rgba(255, 255, 255, .85); cursor: pointer; place-items: center; pointer-events: auto; } .sap--chat .sap__x { display: grid; opacity: 0; pointer-events: none; transition: opacity 160ms ease; } .sap--chat.is-grown .sap__x { opacity: 1; pointer-events: auto; transition: opacity 420ms ease 700ms; } /* עולה בפייד כשנייה אחרי ההודעה, במקומו בדיוק, בלי תזוזה */ @media (hover: hover) { .sap__x:hover { background: #6A2A40; color: #fff; } } .sap__x:focus-visible { outline: 2px solid #FFD6E0; outline-offset: 1px; } .sap--dismissed .sap__bubblebox { opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s 220ms; } .sap__probe .sap__x { display: none !important; } .sap__dots { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 5px; } .sap__dots i { width: 7px; height: 7px; border-radius: 50%; background: #FFD6E0; opacity: .4; } .sap--chat .sap__dots { display: flex; } .sap--chat .sap__bubble { overflow: hidden; width: 66px; height: 40px; padding: 0; transition: width 460ms var(--ease-spring), height 460ms var(--ease-spring), padding 460ms var(--ease-spring); } .sap--chat .sap__msg { opacity: 0; transform: translateY(5px); white-space: normal; min-width: calc(var(--bw) - 38px); } .sap--chat .sap__bubble::after { display: none; } .sap--chat.is-typed .sap__bubble { width: var(--bw); height: var(--bh); padding: 14px 18px 15px; } .sap--chat.is-typed .sap__msg { opacity: 1; transform: none; transition: opacity 380ms ease 200ms, transform 380ms var(--ease-spring) 200ms; } .sap--chat.is-typed .sap__dots { opacity: 0; transition: opacity 160ms ease; } .sap--chat.is-grown .sap__bubble { overflow: visible; } .sap--chat.is-grown .sap__bubble::after { display: block; } /* בועת מדידה נסתרת (lp360.js): אותו מראה בגודל המלא, כדי למדוד כל הודעה */ .sap__probe { position: absolute; left: -9999px; top: 0; visibility: hidden; pointer-events: none; width: auto !important; height: auto !important; max-width: 214px; padding: 14px 18px 15px !important; transition: none !important; animation: none !important; } .sap__probe .sap__msg { opacity: 1 !important; transform: none !important; min-width: 0 !important; } .sap__probe .sap__dots { display: none !important; } .sap--chat.is-in:not(.is-typed) .sap__dots i { animation: sap-dot 1s ease-in-out infinite; } .sap--chat.is-in:not(.is-typed) .sap__dots i:nth-child(2) { animation-delay: .18s; } .sap--chat.is-in:not(.is-typed) .sap__dots i:nth-child(3) { animation-delay: .36s; } @keyframes sap-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } } .sap.is-in .sap__stage::before { animation: sap-spin 16s linear 1.8s infinite, sap-breathe 4.4s ease-in-out 2.2s infinite; } .sap.is-in .sap__stage::after { animation: sap-spin 26s linear 1.8s infinite reverse, sap-breathe 4.4s ease-in-out 3.3s infinite; } .sap.is-in .sap__avatar { animation: sap-glow 4.4s ease-in-out 2.2s infinite; } @keyframes sap-spin { to { transform: rotate(360deg); } } @keyframes sap-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.05; } } @keyframes sap-glow { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(232, 96, 127, .55), 0 0 22px rgba(232, 96, 127, .14), 0 14px 36px rgba(0, 0, 0, .45); } 50% { box-shadow: 0 0 0 1.5px rgba(232, 96, 127, .7), 0 0 38px rgba(232, 96, 127, .32), 0 14px 36px rgba(0, 0, 0, .45); } } /* כוכב רוכב על חישוק אחד (גיא 8.10.26): הוא בתוך מסלול שמסתובב בדיוק כמו הטבעת (אותה מהירות, אותו כיוון ואותה נשימה), מופיע בפייד, מתגלגל איתה בעדינות, נעלם בפייד, ואז כוכב אחר מופיע על החישוק השני. מחזור של 18 שניות, ארבעה כוכבים בתורות */ .sap.is-in .sap__orbit--in { animation: sap-spin 16s linear 1.8s infinite, sap-breathe 4.4s ease-in-out 2.2s infinite; } .sap.is-in .sap__orbit--out { animation: sap-spin 26s linear 1.8s infinite reverse, sap-breathe 4.4s ease-in-out 3.3s infinite; } .sap.is-in .sap__spark { opacity: 0; animation: sap-spark 18s ease-in-out calc(1.9s + var(--d)) infinite both; } .sap.is-in .sap__spark img { animation: sap-twinkle 2.2s ease-in-out calc(var(--d) * -1) infinite alternate; } @keyframes sap-spark { 0% { opacity: 0; } 4% { opacity: 1; } 21% { opacity: 1; } 25%, 100% { opacity: 0; } } @keyframes sap-twinkle { from { scale: .92; } to { scale: 1.06; } } @media (prefers-reduced-motion: reduce) { .js .sap:not(.is-in) .sap__bubble { opacity: 1; } .sap--chat .sap__dots { display: none; } .sap.is-in .sap__bubble, .sap.is-in .sap__stage::before, .sap.is-in .sap__stage::after, .sap.is-in .sap__avatar, .sap.is-in .sap__orbit, .sap.is-in .sap__spark, .sap.is-in .sap__spark img { animation: none; } .js .sap:not(.is-in) .sap__orbit--in .sap__spark:first-child, .sap.is-in .sap__orbit--in .sap__spark:first-child { opacity: .85; } .js .sap:not(.is-in) .sap__orbit--in .sap__spark:not(:first-child), .js .sap:not(.is-in) .sap__orbit--out .sap__spark, .sap.is-in .sap__orbit--in .sap__spark:not(:first-child), .sap.is-in .sap__orbit--out .sap__spark { opacity: 0; } } @media (min-width: 1200px) { .more .icon-list { grid-template-columns: repeat(3, 1fr); column-gap: 96px; margin-top: var(--sp-48); } /* קו עומד קטן ועדין בין הפריטים (גיא 8.10.26), באמצע הרווח שביניהם */ .more .icon-list li { position: relative; } .more .icon-list li + li::before { content: ""; position: absolute; top: 50%; inset-inline-start: -48px; width: 1px; height: 36px; transform: translateY(-50%); background: linear-gradient(to bottom, transparent, rgba(255, 214, 224, .3) 30%, rgba(255, 214, 224, .3) 70%, transparent); } } /* ========================================================================== 7 · הזמנה וטופס · מלבן ארוך ברוחב התוכן, רכיבי פרק 9 בגרסה הבהירה ========================================================================== */ .invite__copy { max-width: 46em; } .invite__copy p { margin-top: var(--space-para); } .formbox { --box-fill: var(--white); --box-stroke: var(--border-subtle); margin-top: var(--sp-48); padding: 32px 24px; position: relative; } @media (min-width: 768px) { .formbox { padding: 40px 48px 44px; } } .form__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); max-width: 30em; } .form { margin-top: var(--sp-24); display: grid; gap: var(--sp-24); } .form__fields { display: grid; gap: var(--sp-24); } .form__foot { display: grid; gap: var(--sp-16); align-items: center; } @media (min-width: 1200px) { .form__fields { grid-template-columns: repeat(3, 1fr); align-items: start; } .form__foot { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 48px; } } /* B: נגיעת מש בלור (לבחירת גיא, ?v=b). רדיאלים מהפלטה בלבד, מאחורי הטופס, בלי תמונה */ .formwrap { position: relative; isolation: isolate; } .formwrap__mesh { display: none; } html.v-b .formwrap__mesh { display: block; position: absolute; z-index: -1; inset: 8% -6% -14% -6%; pointer-events: none; background: radial-gradient(40% 55% at 82% 70%, rgba(201, 47, 85, .22), transparent 70%), radial-gradient(38% 50% at 18% 78%, rgba(232, 96, 127, .20), transparent 70%), radial-gradient(45% 60% at 55% 100%, rgba(107, 45, 60, .14), transparent 72%); filter: blur(24px); } .field { display: grid; gap: 8px; } .field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-medium); color: var(--text-primary); } .field__input { width: 100%; height: 56px; padding: 0 16px; font-family: var(--font); font-size: 18px; font-weight: var(--fw-light); line-height: 1.6; color: var(--text-primary); background: var(--bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); appearance: none; -webkit-appearance: none; outline: none; caret-color: var(--text-primary); box-shadow: inset 0 0 0 1px transparent; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .field__input:focus, .field__input.is-focus { border-color: var(--state-focus); box-shadow: inset 0 0 0 1px var(--state-focus); } .field.is-error .field__input { border-color: var(--state-error); box-shadow: inset 0 0 0 1px var(--state-error); } .field__input[type=tel], .field__input[type=email] { direction: rtl; text-align: right; } .field__error { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-body); color: var(--state-error); text-wrap: balance; } /* no word alone on the last line, also for wording from the admin (Yonatan 21.10.26) */ .field__error:empty { display: none; } .on-dark .field__label { color: var(--text-on-dark); } .on-dark .field__input { color: var(--text-on-dark); background: var(--bg-raised-dark); border-color: var(--border-subtle-dark); caret-color: var(--text-on-dark); } .on-dark .field__input:focus, .on-dark .field__input.is-focus { border-color: var(--state-focus-dark); box-shadow: inset 0 0 0 1px var(--state-focus-dark); } .on-dark .field.is-error .field__input { border-color: var(--state-error-dark); box-shadow: inset 0 0 0 1px var(--state-error-dark); } .on-dark .field__error { color: var(--state-error-dark); } textarea.field__input { height: auto; min-height: 112px; padding: 14px 16px; resize: vertical; line-height: 1.6; } .check { display: flex; gap: 12px; align-items: flex-start; padding-block: 10px; cursor: pointer; position: relative; min-height: 44px; } .check__input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; inset-inline-start: 0; top: 10px; cursor: pointer; } .check__box { flex: none; width: 24px; height: 24px; margin-top: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-checkbox); position: relative; transition: background-color var(--dur-fast) ease; } .check__box::before { content: ""; position: absolute; inset: -5.5px; border: 2px solid var(--state-focus); border-radius: 9px; opacity: 0; } .check__box::after { content: ""; position: absolute; inset: -1.5px; border-radius: var(--radius-checkbox); background: url("../icons/checkbox-on.svg") center / 24px 24px no-repeat; opacity: 0; transform: scale(.8); transition: opacity var(--dur-fast) ease, transform var(--dur-base) var(--ease-press); } .check__text { font-size: var(--fs-fine); line-height: 1.55; font-weight: var(--fw-body); padding-top: 3px; } .check__text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } @media (hover: hover) { .check:hover .check__box { background: var(--bg-raised); } .on-dark .check:hover .check__box { background: var(--bg-raised-dark); } } .check__input:checked + .check__box::after, .check.is-checked .check__box::after { opacity: 1; transform: none; } .check__input:focus-visible + .check__box::before, .check.is-focus .check__box::before { opacity: 1; } .on-dark .check__box { border-color: var(--line-strong-dark); } .on-dark .check__box::before { border-color: var(--state-focus-dark); } .check-field.is-error .check__box { border-color: var(--state-error); border-width: 2px; } .on-dark .check-field.is-error .check__box { border-color: var(--state-error-dark); } .check-field .field__error { margin-top: 4px; padding-inline-start: 36px; } .form__status { font-size: var(--fs-small); } /* לוח מצבים (?states) */ .states { display: none; } html.show-states .states { display: block; } .states__grid { display: grid; gap: var(--sp-32); margin-top: var(--sp-32); } @media (min-width: 1200px) { .states__grid { grid-template-columns: 1fr 1fr; } } .states__panel { --box-fill: var(--white); --box-stroke: var(--border-subtle); padding: 32px 24px; } .states__cap { font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text-accent); margin-bottom: 8px; } .states__panel .field, .states__panel .check-field, .states__panel .btn { margin-top: 20px; } /* ========================================================================== 9 · למי זה מתאים ========================================================================== */ .fit__open { max-width: 40em; } .fit__grid { margin-top: var(--sp-48); display: grid; gap: var(--sp-48); } @media (min-width: 1200px) { .fit__grid { grid-template-columns: 1fr 1fr; column-gap: 96px; } } .fit__grid .icon-list { margin-top: var(--space-head); } /* ========================================================================== פוטר ========================================================================== */ /* גיא 3.10.26: הפוטר בלי צבע משלו. הוא ממשיך את המשטח של מה שמעליו (כהה, לבן או שמנת), בלי קו הפרדה; ההפרדה ברווח בלבד. בלי עוסק מורשה ומייל (אלה רק במיילים ובמדיניות). המשטח נקבע בתבנית: .on-dark / .foot--white / .foot--breath. */ /* ========================================================================== תודה ושאלון ========================================================================== */ .cut-diamond { position: absolute; pointer-events: none; z-index: 0; } .cut-diamond img { width: 100%; height: auto; } .solo { min-height: 100svh; display: flex; flex-direction: column; position: relative; overflow: hidden; } .solo .wrap { position: relative; z-index: 1; } .solo__top { padding-top: 28px; } .solo__main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-block: 64px 240px; } .solo .cut-diamond { width: 560px; left: 50%; transform: translateX(-34%); bottom: -330px; } .thanks__title { font-size: 80px; line-height: 1; font-weight: var(--fw-semibold); } .thanks__text { margin-top: var(--sp-24); max-width: 22em; font-size: var(--fs-h3); line-height: 1.4; font-weight: var(--fw-light); } @media (min-width: 1200px) { .solo__top { padding-top: 48px; } .solo__main { padding-block: 96px 160px; } .solo .cut-diamond { width: 820px; left: -300px; transform: none; bottom: -380px; } .thanks__title { font-size: 96px; } } .quiz-head { padding-block: 28px 48px; } .quiz-head__mark { margin-top: 32px; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); } @media (min-width: 1200px) { .quiz-head { padding-block: 48px 64px; } } .quiz-page .wrap { max-width: calc(760px + 2 * var(--gutter)); } /* ========================================================================== שאלון נקי · 15 (יונתן, 3.10.26). מחליף את בלוק .quiz ב-lp360.css. שדות לבנים עם קו דק, תוויות בגודל תווית, שאלות בכותרת במידה, תשובות כשורות נקיות עם רדיו בצורת פאה. ========================================================================== */ .quiz { --q-line: #A08B8A; /* קו שדה על לבן, במנוחה: 3:1 מול לבן (הכרעת גיא 3.10.26, הגרסה הכהה) */ --q-line-hover: #8C7579; /* ריחוף: צעד אחד כהה יותר (4.3:1) */ --q-radio: #8C7579; /* מסגרת רדיו במנוחה (4.3:1) */ --q-row-hover: rgba(58, 21, 32, .04); --q-row-on: rgba(201, 47, 85, .06); --q-muted: rgba(22, 11, 15, .64); /* טקסט משני ניטרלי: "(לא חובה)", הפרטיות · 5.9:1 על לבן */ --q-fs: 20px; --q-lh: 1.4; /* שאלה · מובייל */ --q-gap: 48px; /* בין שאלות */ --q-head: 12px; /* מהשאלה לשדה שלה */ padding: 0; /* בלי מיכל: הטופס יושב ישירות על הרקע (הכרעת גיא 3.10.26) */ } @media (min-width: 768px) { .quiz { --q-fs: 22px; --q-lh: 1.36; --q-gap: 56px; } } @media (min-width: 1200px) { .quiz { --q-fs: 24px; --q-lh: 1.33; } } /* --- הפרטים: שם, טלפון, מייל --- */ .quiz__details { display: grid; gap: 20px; } @media (min-width: 768px) { .quiz__details { gap: 24px; } } .quiz .quiz__details .field.quiz__q { gap: 8px; } .quiz .quiz__details .quiz__q + .quiz__q { margin-top: 0; } .quiz .quiz__details .field__error { margin-top: 0; } /* ה-gap של 8px כבר מפריד */ .quiz__details + .quiz__q { margin-top: var(--q-gap); } /* --- שאלה --- */ .quiz .quiz__q + .quiz__q { margin-top: var(--q-gap); } .quiz fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .quiz .field.quiz__q { gap: 0; } .quiz .quiz__legend { display: block; padding: 0; margin: 0 0 var(--q-head); font-size: var(--q-fs); line-height: var(--q-lh); font-weight: var(--fw-semibold); color: var(--text-primary); text-wrap: balance; } .quiz .quiz__hint { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--q-muted); white-space: nowrap; } /* --- שדה: לבן, קו דק. המצבים מהספר (פוקוס רובי, שגיאה רובי כהה), "מלא" = רגיל עם טקסט --- */ .quiz .field__input { background: var(--white); border: 1px solid var(--q-line); box-shadow: inset 0 0 0 1px transparent; color: var(--text-primary); } @media (hover: hover) { .quiz .field__input:hover { border-color: var(--q-line-hover); } } .quiz .field__input:focus { border-color: var(--state-focus); box-shadow: inset 0 0 0 1px var(--state-focus); } .quiz .is-error .field__input, .quiz .is-error .field__input:hover { border-color: var(--state-error); box-shadow: inset 0 0 0 1px var(--state-error); } .quiz textarea.field__input { min-height: 128px; padding: 14px 16px; resize: vertical; } .quiz .field__error { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--state-error); } .quiz .field__error:empty { display: none; } /* --- תשובת בחירה: שורה נקייה, בלי מסגרת. כל השורה לחיצה (52px), הרדיו מיושר לקו השאלה --- */ .quiz .choices { display: grid; gap: 2px; margin-top: -4px; } /* שורת הבחירה באותו רוחב בדיוק כמו השדות; -4px מאזן את ריפוד השורה מול המרווח לשדה טקסט */ .quiz .choice { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 16px; margin: 0; /* 16 = ריפוד השדה: הרדיו בקו של הטקסט בשדות */ border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-press); } .quiz .choice + .choice { margin-top: 0; } .quiz .choice__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .quiz .choice__text { font-size: var(--fs-body); line-height: 1.5; font-weight: var(--fw-body); color: var(--text-primary); } @media (hover: hover) { .quiz .choice:hover { background: var(--q-row-hover); } } .quiz .choice:active { transform: scale(.99); } .quiz .choice:has(.choice__input:checked) { background: var(--q-row-on); border: 0; box-shadow: none; } .quiz .choice:has(.choice__input:focus-visible) { outline: 2px solid var(--state-focus); outline-offset: 0; } /* רדיו בשפת הפאות: מתומן 20px (ריבוע עם פינות חתוכות), טבעת 1.5px, נקודה פנימית שנכנסת ב-spring */ .quiz .choice__dot { flex: none; width: 20px; height: 20px; position: relative; border: 0; border-radius: 0; background: var(--q-radio); clip-path: polygon(6px 0, 14px 0, 20px 6px, 20px 14px, 14px 20px, 6px 20px, 0 14px, 0 6px); transition: background-color var(--dur-fast) ease; } .quiz .choice__dot::before { content: ""; position: absolute; inset: 1.5px; background: var(--white); clip-path: polygon(5.4px 0, 11.6px 0, 17px 5.4px, 17px 11.6px, 11.6px 17px, 5.4px 17px, 0 11.6px, 0 5.4px); } .quiz .choice__dot::after { content: ""; position: absolute; inset: 5px; border-radius: 0; background: var(--ruby-500); clip-path: polygon(3px 0, 7px 0, 10px 3px, 10px 7px, 7px 10px, 3px 10px, 0 7px, 0 3px); transform: scale(0); transition: transform var(--dur-base) var(--ease-press); } .quiz .choice__input:checked + .choice__dot { background: var(--ruby-500); } .quiz .choice__input:checked + .choice__dot::after { transform: scale(1); } /* --- סולם 1-10: תאים עם קו דק (כאן המסגרת עושה עבודה: אזור לחיצה ברור לכל מספר) --- */ .quiz .scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; } @media (min-width: 768px) { .quiz .scale { grid-template-columns: repeat(10, 1fr); } } .quiz .scale .choice { justify-content: center; min-height: 52px; padding: 0; gap: 0; border: 1px solid var(--q-line); border-radius: var(--radius-control); background: var(--white); transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-press); } @media (hover: hover) { .quiz .scale .choice:hover { border-color: var(--q-line-hover); background: var(--white); } } .quiz .scale .choice:active { transform: scale(.96); } .quiz .scale .choice__dot { display: none; } .quiz .scale .choice__text { font-size: 18px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; transition: color var(--dur-fast) ease; } .quiz .scale .choice:has(.choice__input:checked) { background: var(--ruby-500); border-color: var(--ruby-500); box-shadow: none; } .quiz .scale .choice:has(.choice__input:checked) .choice__text { color: var(--cream-50); } .quiz .scale .choice:has(.choice__input:focus-visible) { outline-offset: 2px; } /* --- שגיאה בשאלת בחירה: הטבעות והתאים ברובי כהה + ההודעה מתחת --- */ .quiz fieldset.is-error .choice__dot { background: var(--state-error); } .quiz fieldset.is-error .scale .choice { border-color: var(--state-error); } .quiz fieldset.is-error .field__error { margin-top: 8px; } /* --- סוף הטופס --- */ .quiz .quiz__privacy { margin-top: var(--q-gap); color: var(--q-muted); } .quiz .quiz__privacy bdi { white-space: nowrap; } /* קיים כבר ב-lp360-wp.css */ .quiz .quiz__submit { margin-top: 24px; } .quiz .form__status:not(.sr-only) { margin-top: 12px; color: var(--state-error); text-align: center; } /* --- כניסה בגלילה: כל בלוק פעם אחת, opacity ו-transform בלבד. בלי JS ובלי תנועה: הכול גלוי --- */ .js .quiz .q-rv { opacity: 0; transform: translate3d(0, 10px, 0); } .js .quiz .q-rv.is-in { opacity: 1; transform: none; transition: opacity 420ms var(--ease-calm), transform 520ms var(--ease-calm); } .js .quiz .q-rv.is-now { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { .quiz .choice, .quiz .scale .choice, .quiz .choice__dot, .quiz .choice__dot::after, .quiz .scale .choice__text { transition: none; } .quiz .choice:active, .quiz .scale .choice:active { transform: none; } .js .quiz .q-rv { opacity: 1 !important; transform: none !important; transition: none !important; } } @media (max-width: 1199px) { .visual .visual__frag { width: 34%; } .visual--a .visual__frag, .visual--c .visual__frag { top: -14%; } .visual--b .visual__frag, .visual--d .visual__frag { bottom: -16%; } } /* ---- סבב 3: סדר של נאור ---- */ .hero__cap { position: absolute; left: 0; right: 0; top: calc(100% + 4px); text-align: center; font-size: var(--fs-label); line-height: 1.4; font-weight: var(--fw-medium); color: var(--text-on-dark); } .hero__art { margin-bottom: 28px; } .s--breath .quotes .quote { --box-fill: var(--white); --box-stroke: var(--white); } .invite__date { margin-top: var(--sp-16); } .invite__copy .t-h3 + p { margin-top: var(--sp-24); } @media (min-width: 1200px) { .hero { padding-bottom: 56px; } .hero__art { margin-bottom: 32px; } } /* ---- סבב 4: מובייל - כותרת קודם, אחר כך התמונה (הירו והסיפור) ---- */ @media (max-width: 1199px) { .hero__text { margin-top: 0; } .hero__art { margin-top: 36px; } .story__grid { display: flex; flex-direction: column; gap: 0; } .story__body { display: contents; } .story__body > * { order: 2; } .story__body > h2:first-child { order: 0; } .story__photo { order: 1; margin-top: var(--space-head); margin-bottom: var(--space-media); } } /* למי זה מתאים, מובייל: הכותרות והרשימות קודם, הצילום אחריהן */ @media (max-width: 1199px) { .fit > .wrap { display: flex; flex-direction: column; } .fit .split { display: contents; } .fit .visual, .fit .shape { order: 5; margin-top: var(--space-media); } .fit .cta-row { order: 6; } .fit__grid { margin-top: var(--sp-40); } } /* ---- סבב 5: מריחת מרקר (אישור גיא) ---- הרצועה היא רקע בלבד: background-size עולה מ-0 ל-100% מימין לשמאל, פעם אחת, כשהמשפט ב-60% מהמסך. בלי clone: כשהמשפט נשבר, הרקע רציף על פני השורות ולכן נמרח שורה אחרי שורה. הטקסט גלוי כל הזמן. בלי JS / reduced-motion: המחלקה will-mark לא מתווספת והרצועה מלאה. */ .hl { -webkit-box-decoration-break: slice; box-decoration-break: slice; background-repeat: no-repeat; background-position: 100% 0; background-size: 100% 100%; } .js .hl.will-mark { background-size: 0% 100%; transition: background-size 850ms cubic-bezier(.33, 0, .2, 1); } .js .hl.will-mark.is-marked { background-size: 100% 100%; } @media (prefers-reduced-motion: reduce) { .js .hl.will-mark { background-size: 100% 100%; transition: none; } } /* ---- סבב 5: שיטת היהלום במובייל - התוויות ליד הפינות, היהלום קטן יותר ---- */ @media (max-width: 1199px) { .method { width: 100%; max-width: 440px; height: auto; aspect-ratio: 342 / 352; margin-inline: auto; } .method__fig { position: absolute; inset: 0; width: auto; height: auto; } .method__svg { width: 42%; left: 29%; top: 25%; } .method__num { display: none; } .method__axes { position: absolute; inset: 0; margin: 0; display: block; } .axis { position: absolute; width: 25%; margin-left: -12.5%; flex-direction: column; align-items: center; gap: 3px; text-align: center; } .axis__icon { width: 28px; height: 28px; } .axis__icon img { max-width: 24px; max-height: 22px; } .axis__num { min-width: 0; font-size: 14px; line-height: 1.2; } .axis__name { font-size: 15px; line-height: 1.25; text-wrap: balance; } .axis--01 { left: 64%; top: 0; } .axis--02 { left: 36%; top: 0; } .axis--03 { left: 12.5%; top: 36%; } .axis--05 { left: 87.5%; top: 36%; } .axis--04 { left: 50%; top: 70%; } } /* ---- סבב 5: שלושת הנתונים - ממורכזים, קטנים יותר, באריחים חתוכים, ספירה בכניסה ---- */ .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; } .stat { justify-items: center; text-align: center; gap: 6px; align-content: start; --box-cut: var(--cut-md); --box-cut-in: var(--cut-md-in); --box-fill: var(--wine-800); --box-stroke: var(--border-subtle-dark); position: relative; isolation: isolate; padding: 18px 6px 16px; } .stat::before { content: ""; position: absolute; inset: 0; z-index: -2; clip-path: var(--box-cut); background: var(--box-stroke); } .stat::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--box-cut-in); background: var(--box-fill); } html.stats-plain .stat::before, html.stats-plain .stat::after { display: none; } .stat .ic { width: 30px; height: 30px; } .stat__num { font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; } .stat__label { font-size: 15px; line-height: 1.3; } @media (min-width: 768px) { .stats { gap: 16px; } .stat { padding: 24px 12px 20px; } .stat .ic { width: 36px; height: 36px; } .stat__num { font-size: 44px; } .stat__label { font-size: 17px; } } @media (min-width: 1200px) { .stats { gap: 24px; } .stat .ic { width: 40px; height: 40px; } .stat__num { font-size: 52px; } .stat__label { font-size: 18px; } } .js .stats.will-anim .stat { opacity: 0; transform: translateY(12px); } .js .stats.will-anim.is-in .stat { opacity: 1; transform: none; transition: opacity 500ms var(--ease-spring) calc(var(--s) * 140ms), transform 600ms var(--ease-spring) calc(var(--s) * 140ms); } @media (prefers-reduced-motion: reduce) { .js .stats.will-anim .stat { opacity: 1; transform: none; transition: none; } } .stat:nth-child(1) { --s: 0; } .stat:nth-child(2) { --s: 1; } .stat:nth-child(3) { --s: 2; } @media (max-width: 1199px) { .axis > * { max-width: 100%; } .axis__name { display: block; } } /* ---- סבב 6: הירו - הכפתור מתחת לתמונה במובייל; בדסקטופ מתחת לטקסט ---- */ .hero .hero__cta { margin-top: 64px; } @media (min-width: 1200px) { .hero__grid { grid-template-areas: "text art" "cta art"; grid-template-rows: auto auto; align-items: end; } .hero__text { padding-bottom: 0; } .hero .hero__cta { grid-area: cta; align-self: start; margin-top: 40px; padding-bottom: 72px; } } /* ---- סבב 10 (גיא): ההירו = ההרכב של ספר המותג (פרק 11, "ספיר יוצאת מהיהלום"): ספיר מלאה על השרפרף. מסכת הדמות מהספר (600x690): מלבן עד y=281.6, ואז V עד 242.7-357.3 ב-y=612, בקואורדינטות של תיבת הדמות. ---- */ .hero__person { left: 15.44%; right: 12.56%; top: .87%; bottom: 3.4%; height: auto; clip-path: polygon(-21.44% -0.91%, 117.45% -0.91%, 117.45% 41.72%, 61.26% 91.74%, 34.74% 91.74%, -21.44% 41.72%); } .hero__person img { object-fit: cover; object-position: 50% 0; } /* ---- סבב 6: תמונה בתוך צורה אחת מהיהלום (חיתוך אמיתי, בלי שברים מסביב) ---- table = הפאה המרכזית (מחומש "DNA עסקי"), point = החוד התחתון, side = פאת צד. נגזרו מנתיבי הסמל. */ .shape { position: relative; margin: 0; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; } .shape img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); } /* סבב 9: שלוש צורות רחבות בשפת הפאות (גיא: "כל זווית שתרגיש בשפה"). במובייל נמוכות ורחבות 16:9, מ-768 ב-3:2. */ .shape--slab { -webkit-clip-path: var(--shape-slab); clip-path: var(--shape-slab); } .shape--slab-alt { -webkit-clip-path: var(--shape-slab-alt); clip-path: var(--shape-slab-alt); } .shape--shield { -webkit-clip-path: var(--shape-shield); clip-path: var(--shape-shield); } .shape--gem { -webkit-clip-path: var(--shape-gem); clip-path: var(--shape-gem); } @media (min-width: 768px) { .shape { aspect-ratio: 3 / 2; } } .story__photo.shape { aspect-ratio: 3 / 2; max-width: none; --focal: 50% 4%; } @media (min-width: 1200px) { .story__photo.shape { aspect-ratio: 4 / 5; --focal: 50% 40%; } } /* ---- סבב 6: הטופס על יין עמוק (אישור גיא), שדות נקיים ---- מיכל: יין-לילה עם קו עדין ופינות חתוכות. שדה: מילוי bg/raised-dark וקו --border-field-dark (3.1:1 מול המילוי, 3.4:1 מול המיכל). */ :root { --border-field-dark: #8A5A68; } .formbox { --box-fill: var(--bg-dark); --box-stroke: var(--border-subtle-dark); color: var(--text-on-dark); } /* שדה בטופס, מצב רגיל (גיא 8.10.26): מילוי שקוף ושקט במקום יין מלא שצועק. הגבול נשאר (3:1 לנגישות), והמילוי מתעורר קלות בריחוף ובפוקוס */ .formbox .field__input { background: rgba(255, 244, 247, .035); border-color: var(--border-field-dark); color: var(--text-on-dark); caret-color: var(--text-on-dark); } .formbox .field__input:hover { border-color: #A7808B; background: rgba(255, 244, 247, .05); } .formbox .field__input:focus, .formbox .field__input.is-focus { border-color: var(--state-focus-dark); box-shadow: inset 0 0 0 1px var(--state-focus-dark); background: rgba(255, 244, 247, .06); } .formbox .field.is-error .field__input { border-color: var(--state-error-dark); box-shadow: inset 0 0 0 1px var(--state-error-dark); } .formbox .check__box { border-color: #A7808B; } .formbox .form__title { color: var(--text-on-dark); } .formbox .check__text a { text-decoration-color: rgba(247, 244, 241, .6); } /* Every page is one column at least a screen tall, so the footer closes it at the bottom even on a short page. While the cookie banner is open its room is kept inside the footer, not as body padding under it, so the footer's own colour runs to the bottom edge - no strip of page colour below it (Guy 1.11.26: "הפוטר לא במקום"). */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > footer:last-of-type { margin-block-start: auto; } body > footer:last-of-type::after { content: ""; display: block; block-size: var(--rc-banner-h, 0px); } body:not(:has(> footer)) { padding-bottom: var(--rc-banner-h, 0px); } /* סבב 7 (גיא, 2.10 בלילה): הירו ממורכז כשהוא בעמודה אחת (מובייל וטאבלט). דסקטופ נשאר מיושר לימין. */ @media (max-width: 1199px) { .hero__top .logo { margin-inline: auto; } .hero__text { text-align: center; } .hero__title, .hero__sub, .hero__kicker { text-wrap: balance; } .hero .hero__cta { display: flex; justify-content: center; margin-top: 48px; } } /* יהלום השיטה במובייל: הצירים בצדדים רחבים יותר, כדי ש"שימור לקוחות" לא יישבר למילה בשורה */ @media (max-width: 767px) { .axis--03, .axis--05 { width: 30%; margin-left: -15%; } } /* סבב 9 (גיא): בלוק "שבוע אחד..." ממורכז מעל אריחי הנתונים, כשהם בעמודה אחת. בדסקטופ נשאר בשתי עמודות */ @media (max-width: 1199px) { .rhythm > div { text-align: center; } .rhythm .t-h3 { text-wrap: balance; } .rhythm .measure { margin-inline: auto; text-wrap: balance; } } /* סבב 9 (גיא): יהלום השיטה - קווי חיבור מהפאה לתווית, והפאה של כל ציר נצבעת ברובי עמוק כשהציר מופיע. הקווים מצוירים ב-JS לפי המיקום האמיתי (מתאים לכל רוחב). בלי JS: התוויות גלויות כמו קודם. */ .method__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; } .method__lines path { fill: none; stroke: rgba(232, 96, 127, .72); stroke-width: 1.25; stroke-linecap: round; } .method__lines circle { fill: var(--ruby-300); } .method.has-lines .m-f:nth-of-type(-n+6) { fill: #7A1F37; } .js .method.will-anim:not(.is-in) .m-f:nth-of-type(-n+6) { fill: #4A1B2B; } .js .method.will-anim .method__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; } .js .method.will-anim .method__lines circle { opacity: 0; } .js .method.will-anim.is-in .method__lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 480ms var(--ease-spring) calc(760ms + var(--a) * 110ms); } .js .method.will-anim.is-in .method__lines circle { opacity: 1; transition: opacity 240ms ease calc(700ms + var(--a) * 110ms); } .js .method.will-anim.is-in .m-f:nth-of-type(-n+6) { transition: opacity 420ms var(--ease-spring) calc(var(--i) * 55ms), transform 520ms var(--ease-spring) calc(var(--i) * 55ms), fill 360ms ease calc(820ms + (var(--i) - 1) * 110ms); } /* מובייל וטאבלט: יהלום במרכז, 02 ו-01 מעליו בצדדים, 03 ו-05 בגובה הפאות הצדדיות, 04 מתחת */ @media (max-width: 1199px) { .method { aspect-ratio: 342 / 340; } .method__svg { width: 40%; left: 30%; top: 30%; } .axis, .axis--03, .axis--05 { width: 28%; margin-left: -14%; } .axis__name { font-size: 14px; } .axis__num { font-size: 13px; } .axis--01 { left: 70%; top: 0; } .axis--02 { left: 30%; top: 0; } .axis--03 { left: 14%; top: 33.5%; } .axis--05 { left: 86%; top: 33.5%; } .axis--04 { left: 50%; top: 75%; } } /* סבב 9ב: .shape מאפס margin ודרס את המרווח של צילום הסיפור (כותרת צמודה לתמונה). סלקטור חזק יותר */ @media (max-width: 1199px) { .story__photo.shape { margin-top: var(--space-head); margin-bottom: calc(var(--space-media) - var(--space-para) - 8px); } } /* הפסקה שאחריה מוסיפה para+8, סך הכול media */ /* ========================================================================== סבב 11 (גיא): תנועה שנותנת אמון. רגועה, פעם אחת, רק כניסה, רק opacity/transform. ========================================================================== */ :root { --ease-calm: cubic-bezier(.22, .61, .36, 1); --rv-dur: 700ms; --rv-shift: 14px; } /* הירו: רצף כניסה בסדר הקריאה. מופעל רק כשה-head סימן hero-motion (JS + בלי reduced-motion), ומתחיל רק כשהגופנים מוכנים (אחרי fonts-wait). keyframes עם fill both, כך שאין תלות ב-JS כדי להסתיים. */ /* Text never starts invisible (Gago 31.10.26: the hero was empty for ~2s on mobile): the headline, the lines and the CTAs are readable from the first frame and only rise into place. Fades stay for the bar, the art and the caption. */ @keyframes hero-up { from { transform: translate3d(0, 16px, 0); } to { transform: none; } } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes hero-art { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } html.hero-motion:not(.fonts-wait) .hero__top { animation: hero-fade 600ms var(--ease-calm) 0ms both; } html.hero-motion:not(.fonts-wait) .hero__kicker, html.hero-motion:not(.fonts-wait) .hero__mark { animation: hero-up var(--rv-dur) var(--ease-calm) 80ms both; } html.hero-motion:not(.fonts-wait) .hero__tag { animation: hero-up var(--rv-dur) var(--ease-calm) 160ms both; } html.hero-motion:not(.fonts-wait) .hero__title { animation: hero-up var(--rv-dur) var(--ease-calm) 160ms both; } html.hero-motion:not(.fonts-wait) .hero__title--long { animation-delay: 240ms; } html.hero-motion:not(.fonts-wait) .hero__sub { animation: hero-up var(--rv-dur) var(--ease-calm) 280ms both; } html.hero-motion:not(.fonts-wait) .hero__art { animation: hero-art 900ms var(--ease-calm) 360ms both; } html.hero-motion:not(.fonts-wait) .hero__cap { animation: hero-fade 600ms var(--ease-calm) 560ms both; } html.hero-motion:not(.fonts-wait) .hero__cta { animation: hero-up var(--rv-dur) var(--ease-calm) 600ms both; } /* גלילה: בלוקים (כותרת עם הפסקאות שלה, אריחים, ציטוטים, תמונה, טופס) נכנסים ב-85% מהמסך, פעם אחת. המחלקה rv מתווספת רק מ-JS ורק בלי reduced-motion, כך שבלי JS הכול גלוי. */ .js .rv { opacity: 0; transform: translate3d(0, var(--rv-shift), 0); } .js .rv.is-rv { opacity: 1; transform: none; transition: opacity var(--rv-dur) var(--ease-calm) var(--rv-d, 0ms), transform 800ms var(--ease-calm) var(--rv-d, 0ms); } .js .rv.rv-now { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { html.hero-motion .hero__top, html.hero-motion .hero__kicker, html.hero-motion .hero__mark, html.hero-motion .hero__tag, html.hero-motion .hero__title, html.hero-motion .hero__sub, html.hero-motion .hero__art, html.hero-motion .hero__cap, html.hero-motion .hero__cta { animation: none !important; } .js .rv { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== סבב 12 (גיא): תת-לוגו התוכנית, מסע המפגשים, הטופס בשורה אחת, הודעת הפרטיות ========================================================================== */ /* מבנה מותג: "360 לבעלות עסקים" ראשי בדף התוכנית, "SAPIR SABAG." משני (למעלה בקטן ובפוטר) */ .logo--secondary { width: 104px; } @media (min-width: 1200px) { .logo--secondary { width: 120px; } } .logo360 { display: block; height: auto; } .hero__brand { margin: 0; } .hero__brand .logo360 { width: 132px; } .hero__brand--display .logo360 { width: 176px; } @media (min-width: 768px) { .hero__brand .logo360 { width: 152px; } .hero__brand--display .logo360 { width: 216px; } } @media (min-width: 1200px) { .hero__brand .logo360 { width: 172px; } .hero__brand--display .logo360 { width: 240px; } } @media (max-width: 1199px) { .hero__brand .logo360 { margin-inline: auto; } } .hero .hero__title { margin-top: 20px; } @media (min-width: 1200px) { .hero .hero__title { margin-top: 28px; } } html.hero-motion:not(.fonts-wait) .hero__brand { animation: hero-up var(--rv-dur) var(--ease-calm) 80ms both; } @media (prefers-reduced-motion: reduce) { html.hero-motion .hero__brand { animation: none !important; } } /* מסע המפגשים: טור אחד ממורכז, קו דק שמחבר צמתים, אייקון מפגש מהספר, מספר ברובי. פתוח: הצומת נדלק ומסגרת חתוכה קלה */ .acc--journey { position: relative; display: block; max-width: 820px; margin-inline: auto; } @media (min-width: 1200px) { .acc.acc--journey { display: block; } } .acc--journey::before { content: ""; position: absolute; right: 22.25px; width: 1.5px; top: var(--line-top, 40px); bottom: var(--line-bottom, 40px); background: var(--border-subtle-dark); } .acc--journey .acc__item { padding-inline: 16px; transition: background-color var(--dur-open) var(--ease-spring); } .acc--journey .acc__item::after { display: none; } .acc--journey .acc__item.is-open { background: rgba(46, 17, 26, .9); -webkit-clip-path: var(--cut-md); clip-path: var(--cut-md); } .acc--journey .acc__btn { gap: 12px; padding: 16px 0; font-size: 18px; line-height: 1.35; } .acc__node { flex: none; width: 14px; height: 14px; position: relative; z-index: 1; } .acc__node::before { content: ""; position: absolute; inset: 2px; transform: rotate(45deg); border-radius: 2px; background: var(--bg-dark); box-shadow: inset 0 0 0 1.5px rgba(232, 96, 127, .65); transition: background-color 300ms ease, box-shadow 300ms ease; } @media (hover: hover) { .acc--journey .acc__btn:hover .acc__node::before { box-shadow: inset 0 0 0 1.5px var(--ruby-300); } } .acc--journey .acc__item.is-open .acc__node::before { background: var(--ruby-500); box-shadow: 0 0 0 5px rgba(201, 47, 85, .22); } .acc__ic { flex: none; width: 32px; height: 32px; } .acc__ic img { width: 100%; height: 100%; display: block; } .acc__num { color: var(--text-accent-on-dark); } .acc--journey .acc__body { padding-inline-start: 26px; padding-bottom: 20px; } @media (min-width: 768px) { .acc--journey .acc__btn { gap: 16px; padding: 18px 0; font-size: 20px; } .acc__ic { width: 40px; height: 40px; } .acc--journey .acc__body { padding-inline-start: calc(14px + 16px + 40px + 16px); padding-bottom: 24px; } } /* חלופה B להשוואה (?acc=cards): כרטיסים חתוכים דקים, בלי קו */ html.acc-cards .acc--journey::before, html.acc-cards .acc__node { display: none; } html.acc-cards .acc--journey { display: grid; gap: 12px; } html.acc-cards .acc--journey .acc__item { box-shadow: inset 0 0 0 1px var(--border-subtle-dark); -webkit-clip-path: var(--cut-md); clip-path: var(--cut-md); } html.acc-cards .acc--journey .acc__item.is-open { box-shadow: inset 0 0 0 1px var(--ruby-500); } html.acc-cards .acc--journey .acc__body { padding-inline-start: 56px; } /* הטופס: בדסקטופ שלושת השדות והכפתור בשורה אחת, ההסכמה והודעת הפרטיות מתחת */ .form__legal { font-size: var(--fs-fine); line-height: 1.6; color: var(--text-on-dark); max-width: 72em; text-wrap: pretty; } .form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .nowrap { white-space: nowrap; } @media (min-width: 1200px) { .form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; column-gap: 16px; row-gap: 16px; align-items: start; } .form__fields, .form__foot { display: contents; } .form__submit { grid-column: 4; grid-row: 1; margin-top: calc(var(--fs-label) * var(--lh-label) + 8px); } .form .check-field { grid-column: 1 / -1; grid-row: 2; } .form__legal { grid-column: 1 / -1; grid-row: 3; margin-top: -4px; } .form .btn--form { width: auto; padding-inline: 28px; } } /* דפי תודה ושאלון: לוגו התוכנית בכותרת העליונה */ .logo360--bar { width: 150px; } @media (min-width: 1200px) { .logo360--bar { width: 190px; } } .ig-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-on-dark); font-size: var(--fs-body); text-decoration: underline; text-decoration-color: rgba(247, 244, 241, .45); text-underline-offset: 4px; transition: text-decoration-color var(--dur-fast) ease; } @media (hover: hover) { .ig-link:hover { text-decoration-color: var(--ruby-300); } } .ig-link:focus-visible { outline: 2px solid var(--state-focus-dark); outline-offset: 4px; } .ig-link__icon { width: 24px; height: 24px; flex: none; } .quiz-head__mark .logo360 { width: 140px; } @media (min-width: 1200px) { .quiz-head__mark .logo360 { width: 172px; } } @media (max-width: 1199px) { .quiz-head .hero__top .logo, .quiz-head__mark .logo360 { margin-inline: auto; } .quiz-head { text-align: center; } } /* הכותרת "שבעת המפגשים" יושבת באותו טור ממורכז של המסע */ .sessions > .t-h3 { max-width: 820px; margin-inline: auto; } html.acc-cards .acc.acc--journey { grid-template-columns: 1fr; } /* ========================================================================== סבב 14 (גיא, 3.10.26) ========================================================================== */ /* מסע המפגשים עם נוכחות: רחב יותר (10 מתוך 12 עמודות), כותרות ואייקונים גדולים, יותר אוויר בין מפגש למפגש. הכותרת "שבעת המפגשים" ממורכזת ומרווחת מהרכיב. הגדלים במשתנים, והקו והטקסט הפתוח נגזרים מהם. */ .sessions > .t-h3 { max-width: none; text-align: center; text-wrap: balance; } .sessions > .acc--journey { margin-top: var(--sp-32); } .acc--journey { --j-pad: 16px; --j-node: 14px; --j-ic: 36px; --j-gap: 14px; max-width: 1040px; } .acc--journey::before { right: calc(var(--j-pad) + var(--j-node) / 2 - .75px); } .acc--journey .acc__item { padding-inline: var(--j-pad); } .acc--journey .acc__btn { gap: var(--j-gap); padding: 20px 0; font-size: 19px; line-height: 1.35; } .acc--journey .acc__node { width: var(--j-node); height: var(--j-node); } .acc--journey .acc__ic { width: var(--j-ic); height: var(--j-ic); } /* הטקסט הפתוח: במובייל מתחת לאייקון, מ-768 מתחת לכותרת. עד כ-70 תווים בשורה (30em) */ .acc--journey .acc__body { padding-inline-start: calc(var(--j-node) + var(--j-gap)); padding-bottom: 24px; max-width: calc(var(--j-node) + var(--j-gap) + 30em); text-wrap: pretty; } @media (min-width: 768px) { .acc--journey { --j-pad: 24px; --j-node: 16px; --j-ic: 48px; --j-gap: 20px; } .acc--journey .acc__btn { gap: var(--j-gap); padding: 24px 0; font-size: 22px; line-height: 1.3; } .acc--journey .acc__body { padding-inline-start: calc(var(--j-node) + 2 * var(--j-gap) + var(--j-ic)); padding-bottom: 28px; max-width: calc(var(--j-node) + 2 * var(--j-gap) + var(--j-ic) + 30em); } } @media (min-width: 1200px) { .sessions { margin-top: var(--sp-96); } .sessions > .acc--journey { margin-top: var(--sp-48); } .acc--journey { --j-pad: 32px; --j-node: 18px; --j-ic: 56px; --j-gap: 24px; } .acc--journey .acc__btn { padding: 28px 0; font-size: 24px; } .acc--journey .acc__body { padding-bottom: 36px; } .acc--journey .acc__item.is-open .acc__node::before { box-shadow: 0 0 0 6px rgba(201, 47, 85, .22); } } /* ---- סבב 16: תמונות אמיתיות (מפרט 16 של יונתן, 3.10.26) ---- הזמנה: הטקסט מימין והצילום משמאל (.split). במובייל הצילום אחרי הטקסט. (16ב, גיא: בהזמנה הצילום הקבוצתי, הדיוקן בסיפור.) .shape--portrait נשאר מוגדר, כרגע בלי שימוש. דיוקן: משושה בשפת הפאות (משפחת gem), באחוזים כי המקור הוא עיגול: כל קודקוד נשאר בתוך העיגול, אז אין לבן בפינות. */ :root { --shape-portrait: polygon(28% 0, 72% 0, 100% 50%, 72% 100%, 28% 100%, 0 50%); } .shape.shape--portrait { aspect-ratio: 1; width: min(64%, 260px); margin-inline-start: 0; -webkit-clip-path: var(--shape-portrait); clip-path: var(--shape-portrait); } @media (min-width: 1200px) { .shape.shape--portrait { width: 100%; max-width: 400px; margin-inline: auto; } } /* ---- 16ג (גיא, 4.10.26): בסעיפים הלבנים עם טקסט ותמונה (מוכנה גם, הגישה) התמונה מימין והטקסט משמאל, כדי שלא כל התמונות בדף יהיו בצד אחד. CSS בלבד: סדר ה-HTML (כותרת, טקסט, תמונה) לא משתנה, וקורא המסך שומע קודם את הכותרת. רק כשיש שתי עמודות (מ-1200); מתחת לזה הסדר נשאר כותרת, טקסט, תמונה. הכהים, השמנת והטופס - כמו שהיו. הצורות כאן (shield, gem) סימטריות, ולכן אין צורך במראה. */ @media (min-width: 1200px) { .ready .split, .approach .split { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); } .ready .split > .shape, .approach .split > .shape { grid-column: 1; grid-row: 1; } .ready .split > :not(.shape), .approach .split > :not(.shape) { grid-column: 2; grid-row: 1; } } /* ========================================================================== 18 · למי זה מתאים, יישור (יונתן, 4.10.26 · גיא: "לא מיושרים ולא נראים טוב") מערכת אחת: שני מסלולי ה-split של הדף (טקסט 1fr מימין, צילום 520 משמאל, רווח 96) מחזיקים את כל הסעיף. 03: כותרת, שורת הפתיחה כמשפט-משנה מתחת לכותרת, רשימת "מתאים" - ליד הצילום. "לא מתאים" בשורה מלאה מתחת, והרשימה שלה בשני טורים שיושבים בדיוק על שני המסלולים. CSS בלבד, ה-HTML של fit.php לא משתנה. ========================================================================== */ /* אייקון (03 ו-03s): תא קבוע 32, ממורכז על השורה הראשונה בכל גודל גוף. שורה שנשברת נשארת בקו הטקסט (ה-span). */ .fit .icon-list { gap: 16px; } .fit .icon-list li { gap: 16px; } .fit .icon-list .ic { width: 32px; height: 32px; margin-top: calc((1em * var(--lh-body) - 32px) / 2); } /* ה-X ממלא 68% מהתיבה שלו והוי רק 48% בגובה: מקטינים את ה-X פנימה (26px) כדי ששני הסימנים ישקלו אותו דבר */ .fit .icon-list .ic[src*="close-on-light"] { padding: 4px 3px 2px; } /* 26px פנימי, ופיקסל אחד למטה: מרכז הוי יושב ב-52% מהתיבה, מרכז ה-X ב-50% */ /* פריט שנשבר לשתי שורות נשבר מאוזן, בלי זוג מילים יתום בשורה השנייה */ .fit .icon-list li > span { text-wrap: balance; } /* 03 · סדר הקריאה בכל הרוחבים: כותרת, שורת הפתיחה, הרשימה, "לא מתאים", הצילום (במובייל הצילום בסוף, כמו קודם) */ .fit > .wrap:has(> .fit__grid) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "open" "yes" "no" "photo"; } .fit > .wrap:has(> .fit__grid) > .split, .fit .fit__grid, .fit .fit__grid > div:first-child { display: contents; } .fit .fit__grid > div:first-child > .t-h2 { grid-area: title; } .fit .fit__open { grid-area: open; margin-top: var(--space-head); max-width: 36em; text-wrap: balance; } .fit .fit__grid > div:first-child > .icon-list { grid-area: yes; margin-top: var(--sp-24); } .fit .fit__grid > div:last-child { grid-area: no; margin-top: var(--sp-48); } .fit > .wrap:has(> .fit__grid) .shape { grid-area: photo; margin-top: var(--space-media); } @media (min-width: 1200px) { .fit > .wrap:has(> .fit__grid) { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 96px; grid-template-rows: auto auto 1fr auto; grid-template-areas: "title photo" "open photo" "yes photo" "no no"; } .fit > .wrap:has(> .fit__grid) .shape { margin-top: 0; align-self: center; } .fit .fit__grid > div:first-child > .icon-list { align-self: start; } .fit .fit__grid > div:last-child { margin-top: var(--sp-64); } /* "לא מתאים": שני טורים על אותם שני מסלולים - הטור הימני בקו הטקסט שמעליו, השמאלי בדיוק ברוחב הצילום */ .fit .fit__grid > div:last-child > .icon-list { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 96px; } } /* ---- "מוכנה גם" בלי צילום (ספיר, 4.10.26): טור טקסט אחד ברוחב הקריאה, על קו הטקסט של שאר הסעיפים (הקצה הימני של .wrap). בלי חצי מסך ריק ובלי טקסט שנמתח לכל הרוחב. הכותרת ברוחב של עמודת הטקסט של .split (1fr ליד 520+96). */ .ready--solo .ready__text { max-width: 40em; } /* 4.10.26 (גיא: "שיתפרס יותר ברוחב התוכן"): מ-1200, אותם שני מסלולים כמו בשאר הסעיפים - הכותרת (ושורת המשנה ב-03s) במסלול הימני (1fr), הפסקאות והכפתור במסלול השמאלי (520), מיושרים לראש הכותרת. במובייל - טור אחד כמו קודם. */ @media (min-width: 1200px) { .ready--solo .ready__text { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 96px; align-items: start; } .ready--solo .ready__text > .t-h2, .ready--solo .ready__text > .ready__sub { grid-column: 1; } .ready--solo .ready__text > .t-h2 { max-width: 14em; } .ready--solo .ready__text > .stack, .ready--solo .ready__text > .cta-row { grid-column: 2; } .ready--solo .ready__text > .stack { grid-row: 1 / span 2; margin-top: 0; max-width: none; } .ready--solo .ready__text > .cta-row { grid-row: 3; } } /* ========================================================================== thanks.css · דפי התודה (03b אחרי הטופס, 04b אחרי השאלון) · יונתן, 4.10.26, מפרט 19 נטען אחרי lp360.css ומשתמש בטוקנים ובקיפריימים שלו (hero-up, hero-fade, --ease-calm, --rv-dur). מסך אחד: הלוגו למעלה, טקסט ויהלום שנבנה, פוטר. בלי כרטיס, בלי קו, בלי letter-spacing. (הוחלף בפרודקשן 4.10.26: כללי .thanks הישנים נמחקו מכאן ומ-lp360-wp.css.) ========================================================================== */ /* ---- מסך אחד: הגוף הוא עמודה, ה-main ממלא, הפוטר נכנס למסך הראשון בדסקטופ ---- */ .thanks-page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg-dark); } .thanks-page .solo.thanks { min-height: 0; flex: 1 0 auto; overflow: visible; } .thanks-page .foot { flex: none; } /* ---- הבמה: מובייל - יהלום קטן מעל הכותרת, מיושר לימין. מ-1024 - טקסט מימין, יהלום משמאל ---- */ .thanks .solo__main { padding-block: 40px 56px; justify-content: center; } .thanks__grid { display: grid; grid-template-areas: "stage" "copy"; align-items: center; } .thanks__copy { grid-area: copy; min-width: 0; max-width: 680px; } .thanks__stage { grid-area: stage; justify-self: start; width: 88px; margin-bottom: 28px; } .thanks__dia { display: block; width: 100%; height: auto; overflow: visible; } /* ---- טיפוגרפיה: כותרת שמחזיקה כל אורך (שדה של ספיר) - balance, ואורך שורה מוגבל ב-ch ---- */ .thanks .thanks__title { font-size: 34px; line-height: 1.18; font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; max-width: 16em; overflow-wrap: break-word; } .thanks .thanks__text { margin-top: 20px; max-width: 30em; font-size: 18px; line-height: 1.6; font-weight: var(--fw-light); color: var(--text-on-dark); text-wrap: wrap; /* לא pretty: ב-WebKit הוא מקצר את כל השורות. היתום נמנע ב-NBSP של lpt() */ } .thanks .thanks__note { margin-top: 12px; max-width: 34em; font-size: var(--fs-small); line-height: 1.5; font-weight: var(--fw-regular); color: var(--text-on-dark); } .thanks .thanks__go { margin-top: 32px; } .thanks .thanks__ig { margin-top: 24px; } .thanks .thanks__go[hidden], .thanks .thanks__ig[hidden] { display: none !important; } /* מה קורה עכשיו (Grok A3, 1.11.26): שלושה צעדים ממוספרים וכפתור משני להדרכה. הכפתור הראשי נשאר "לשאלון". */ .thanks .thanks__next { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-subtle-dark); max-width: 34em; color: var(--text-on-dark); } .thanks .thanks__next-t { font-size: 22px; line-height: 1.3; font-weight: var(--fw-semibold); text-wrap: balance; } .thanks .thanks__steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: tstep; display: grid; gap: 12px; } .thanks .thanks__steps li { counter-increment: tstep; display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.55; font-weight: var(--fw-light); } .thanks .thanks__steps li::before { content: counter(tstep); font-weight: var(--fw-semibold); font-size: 17px; color: var(--ruby-300, var(--text-on-dark)); } .thanks .thanks__next-line { margin-top: 16px; font-size: 16px; line-height: 1.55; font-weight: var(--fw-regular); } .thanks .thanks__next-go { margin-top: 20px; } .thanks .thanks__next-btn { color: var(--text-on-dark); border-color: var(--border-strong-dark, var(--text-on-dark)); text-decoration: none; } @media (hover: hover) { .thanks .thanks__next-btn:hover { background: rgba(255, 255, 255, .06); } } .thanks .thanks__next-btn:focus-visible { border-color: var(--state-focus-dark); } @media (max-width: 767px) { .thanks .thanks__next-btn { width: 100%; } } @media (max-width: 767px) { .thanks .thanks__go .btn { width: 100%; } } @media (min-width: 768px) { .thanks .solo__main { padding-block: 56px 72px; } .thanks__stage { width: 112px; margin-bottom: 36px; } .thanks .thanks__title { font-size: 44px; line-height: 1.14; } .thanks .thanks__text { margin-top: 24px; font-size: 20px; } } @media (min-width: 1024px) { .thanks__grid { grid-template-areas: "copy stage"; grid-template-columns: minmax(0, 680px) minmax(0, 1fr); column-gap: 64px; } .thanks__stage { justify-self: center; width: 232px; margin-bottom: 0; } } @media (min-width: 1200px) { .thanks .solo__main { padding-block: 64px 96px; } .thanks__grid { column-gap: 96px; } .thanks__stage { width: 272px; } .thanks .thanks__title { font-size: 56px; line-height: 1.12; } .thanks .thanks__text { font-size: 22px; line-height: 1.55; } } /* ---- כותרת ארוכה (מעל 44 תווים, בלי תגיות ובלי [[ ]]): התבנית מוסיפה .thanks__title--long, והגודל יורד מדרגה. כך כותרת של 3 מילים וכותרת של 20 מילים יושבות באותו מסך בלי להפוך לקיר. ---- */ .thanks .thanks__title--long { font-size: 30px; line-height: 1.2; } @media (min-width: 768px) { .thanks .thanks__title--long { font-size: 38px; line-height: 1.16; } } @media (min-width: 1200px) { .thanks .thanks__title--long { font-size: 46px; line-height: 1.14; } } /* ========================================================================== תנועה: "הגעת, הכול בסדר". הפאות מתכנסות למקום (כל אחת מהכיוון שלה), הרובי נוחתת אחרונה, והיהלום נושם פעם אחת ונרגע. בלי לולאות. רק opacity ו-transform, רק תחת hero-motion (JS ובלי reduced-motion) ואחרי שער הגופנים. בלי JS או ב-reduced-motion: מצב סופי, סטטי, מההתחלה. ========================================================================== */ .thanks__dia .f { transform-box: fill-box; transform-origin: center; } .thanks__dia { transform-origin: 50% 47%; } @keyframes thx-facet { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.9); } to { opacity: 1; transform: none; } } @keyframes thx-settle { 0%, 100% { transform: none; } 45% { transform: scale(1.03); } } html.hero-motion:not(.fonts-wait) .thanks .solo__top { animation: hero-fade 600ms var(--ease-calm) 0ms both; } html.hero-motion:not(.fonts-wait) .thanks__dia .f { animation: thx-facet 900ms var(--ease-calm) calc(150ms + var(--i) * 60ms) both; } html.hero-motion:not(.fonts-wait) .thanks__dia { animation: thx-settle 1000ms ease-in-out 1600ms both; } html.hero-motion:not(.fonts-wait) .thanks__title { animation: hero-up var(--rv-dur) var(--ease-calm) 120ms both; } html.hero-motion:not(.fonts-wait) .thanks__text { animation: hero-up var(--rv-dur) var(--ease-calm) 240ms both; } html.hero-motion:not(.fonts-wait) .thanks__note { animation: hero-up var(--rv-dur) var(--ease-calm) 340ms both; } html.hero-motion:not(.fonts-wait) .thanks__go { animation: hero-up var(--rv-dur) var(--ease-calm) 440ms both; } html.hero-motion:not(.fonts-wait) .thanks__ig { animation: hero-up var(--rv-dur) var(--ease-calm) 520ms both; } @media (prefers-reduced-motion: reduce) { html.hero-motion .thanks .solo__top, html.hero-motion .thanks__dia, html.hero-motion .thanks__dia .f, html.hero-motion .thanks__title, html.hero-motion .thanks__text, html.hero-motion .thanks__note, html.hero-motion .thanks__go, html.hero-motion .thanks__ig { animation: none !important; } } /* דפי התודה נשארים מסך אחד בטלפון גם עם הריווח של כפתור הנגישות: 24 פחות מתחת לטקסט (רק עד 767) */ @media (max-width: 767px) { .thanks-page .thanks .solo__main { padding-bottom: 32px; } } /* הודעת הפרטיות מתחת לטופס (גיא, 4.10.26: "תפרוס את זה לאורך"): בדסקטופ על כל רוחב הטופס, מהשדות עד הכפתור. pretty שומר שהשורה האחרונה לא תהיה מילה לבד. במובייל - כמו קודם. 03 ו-03s. */ @media (min-width: 1024px) { .form .form__legal { max-width: none; } } /* ========================================================================== פוטר - מפרט 20 (יונתן, 4.10.26). מחליף את כל כללי הפוטר הקודמים. שלוש רמות, כל אחת שקטה מקודמתה: 1. הלוגו של התוכנית (360) 2. הלינקים 3. הזכויות והקרדיט. "SAPIR SABAG." הוא מותג-העל: יושב בנפרד מ-360 (בצד השני בדסקטופ, מתחת ללינקים במובייל), קטן ושקט - חותם, לא מתחרה. בעמודים בלי 360 (תודה, מדיניות) הוורדמרק לבד במקום הלוגו (.foot__master--solo). בלי קווים, בלי רקע משלו (ממשיך את המשטח שמעליו), בלי קו תחתון קבוע, בלי letter-spacing. ========================================================================== */ .foot { --foot-link: var(--text-primary); /* Guy 21.10.26: no gray text. The levels differ by size and weight only */ --foot-link-hover: var(--text-primary); --foot-fine: var(--text-primary); color: var(--text-primary); padding-block: var(--sp-64) var(--sp-32); border-top: 0; } .foot--white { background: var(--bg-default); } .foot--breath { background: var(--bg-breath); } .foot.on-dark { --foot-link: var(--text-on-dark); --foot-link-hover: var(--text-on-dark); --foot-fine: var(--text-on-dark); background: var(--bg-dark); color: var(--text-on-dark); } /* מובייל וטאבלט (עד 1023): טור אחד ממורכז, אותה היררכיה */ .foot__row { display: grid; justify-items: center; text-align: center; } .foot__program .logo360 { display: block; width: 96px; height: auto; } .foot__master .logo { display: block; width: 96px; height: auto; } .foot__master { margin-top: 20px; } /* 20 + 12 מרווח המגע של הלינקים = 32 נראה */ .foot__master--solo { margin-top: 0; } .foot__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; row-gap: 0; margin-top: 12px; } /* 12 + 12 = 24 נראה מהלוגו */ .foot__links a, .foot__manage { display: inline-flex; align-items: center; min-height: 44px; /* אזור מגע 44, הטקסט 20 */ font-family: inherit; font-size: 14px; line-height: 20px; font-weight: var(--fw-regular); color: var(--foot-link); text-decoration: none; text-underline-offset: 4px; text-decoration-thickness: 1px; background: none; border: 0; padding: 0; cursor: pointer; transition: color .15s ease; } .foot__links a:hover, .foot__links a:focus-visible, .foot__manage:hover, .foot__manage:focus-visible { color: var(--foot-link-hover); text-decoration-line: underline; } .foot__copy, .foot__credit { margin: 0; font-size: var(--fs-fine); line-height: 18px; font-weight: var(--fw-regular); color: var(--foot-fine); text-wrap: balance; } .foot__copy { margin-top: 16px; } /* מהוורדמרק 16; בעמוד בלי 360 (אחרי הלינקים) 16 + 12 = 28 */ .foot__credit { margin-top: 4px; } .foot__credit a { color: inherit; text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-block; padding-block: 4px; margin-block: -4px; } /* אזור מגע 26 בלי להזיז את הקו. כל המשפט הוא הקישור, לא מילה בתוך טקסט */ .foot__credit a:hover, .foot__credit a:focus-visible { color: var(--foot-link-hover); text-decoration-line: underline; } .foot__row:not(:has(> .foot__links)) > .foot__credit { margin-top: 0; } /* דף הבית בקרוב: קרדיט בלבד */ @media (max-width: 1199px) { .foot { padding-bottom: 88px; } } /* מקום לכפתור הנגישות (16+48+24). עד 1199 הריפוד הצידי 48 או 24, והכפתור (x 16-64) יושב על הקרדיט. מ-1200 הריפוד 96 והקרדיט פנוי */ /* דסקטופ (מ-1024): 360 מימין, SAPIR SABAG. משמאל על אותו קו תחתון. הלינקים מתחת ל-360. בשורה התחתונה הזכויות מימין והקרדיט משמאל - אותם שני קצוות כמו הלוגואים. */ @media (min-width: 1024px) { .foot__row:has(> .foot__links) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "program master" "links links" "copy credit"; justify-items: start; text-align: start; } .foot__row:has(> .foot__links) > .foot__program { grid-area: program; } .foot__program .logo360 { width: 120px; } .foot__row:has(> .foot__links) > .foot__master { grid-area: master; align-self: end; justify-self: end; margin-top: 0; } /* קו תחתון משותף עם 360 */ .foot__master .logo { width: 112px; } .foot__row:has(> .foot__links) > .foot__master--solo { grid-area: program; align-self: start; justify-self: start; } .foot__row:has(> .foot__links) > .foot__links { grid-area: links; justify-content: flex-start; flex-wrap: nowrap; column-gap: 28px; white-space: nowrap; margin-top: 20px; } /* 20 + 12 = 32 נראה מתחתית הלוגו */ .foot__row:has(> .foot__links) > .foot__copy { grid-area: copy; margin-top: 36px; } /* 36 + 12 = 48 נראה מהלינקים */ .foot__row:has(> .foot__links) > .foot__credit { grid-area: credit; margin-top: 36px; justify-self: end; } } /* "SAPIR SABAG." בפוטר מקשר לעמוד הבית (הכרעה 4.10.26) */ .foot__home { display: block; line-height: 0; } /* block: the wordmark's box is the image only, so its bottom meets 360's */ .foot__home:focus-visible { outline: 2px solid var(--foot-link-hover); outline-offset: 4px; } .approach { overflow-x: clip; } /* הפאות שיוצאות מהצדדים נחתכות בגבול הסקשן, לא בגוף העמוד; בלי גלילה אופקית */ .approach .split > .shape { overflow: visible; -webkit-clip-path: none; clip-path: none; isolation: isolate; } .approach .split > .shape img { position: relative; z-index: 1; -webkit-clip-path: var(--shape-gem); clip-path: var(--shape-gem); } .approach__facets { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .approach__facets .fx { position: absolute; height: auto; max-width: none; overflow: visible; } .approach__facets .fx1, .approach__facets .fx2 { aspect-ratio: 178.5 / 154; } .approach__facets .fx3 { aspect-ratio: 142.9 / 123.3; } .approach__facets .f-deep { fill: var(--wine-700); } .approach__facets .f-w50 { fill: var(--rose-clay-200); } .approach__facets .f-ruby { fill: var(--ruby-500); } /* מובייל וטאבלט: מהצדדים, קטנות, מציצות מעט */ .approach__facets .fx1 { left: -12%; top: 44%; width: 30%; } .approach__facets .fx2 { left: 86%; top: 8%; width: 24%; } .approach__facets .fx3 { left: 92%; top: 64%; width: 10%; } .approach .tiles { margin-top: var(--space-block); } @media (min-width: 1200px) { .approach__facets .fx1 { left: -11%; top: 36%; width: 50%; } .approach__facets .fx2 { left: 74%; top: 6%; width: 32%; } .approach__facets .fx3 { left: 62%; top: -15%; width: 15%; } .approach .tiles { margin-top: calc(var(--space-block) + 24px); } } /* כניסה (~900ms, פעם אחת): כל טריז מחליק החוצה מאחורי הצילום לכיוון שלו, עם סיבוב קטן שמתיישר; הרובי אחרון, בנקישה. transform ו-opacity בלבד. בלי JS (אין .js) הכול גלוי; reduced-motion - גלוי בלי תנועה. */ .approach__facets .fx1 { --from: translate(38%, -4%) rotate(9deg); } .approach__facets .fx2 { --from: translate(-42%, 6%) rotate(-9deg); } .js .approach__facets.will-anim .fx { opacity: 0; transform: var(--from) scale(.92); transform-origin: 50% 50%; } .js .approach__facets.will-anim.is-in .fx1, .js .approach__facets.will-anim.is-in .fx2 { animation: lp360-facet-out 560ms var(--ease-spring) var(--d) both; } @keyframes lp360-facet-out { 0% { opacity: 0; transform: var(--from) scale(.92); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } } .approach__facets .fx1 { --d: 0ms; } .approach__facets .fx2 { --d: 140ms; } .js .approach__facets.will-anim.is-in .fx3 { animation: lp360-facet-click 460ms var(--ease-spring) 420ms both; } @keyframes lp360-facet-click { 0% { opacity: 0; transform: translate(-30%, 40%) scale(.5) rotate(-14deg); } 55% { opacity: 1; transform: scale(1.12) rotate(3deg); } 78% { transform: scale(.97) rotate(-1deg); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js .approach__facets.will-anim .fx, .js .approach__facets.will-anim.is-in .fx { opacity: 1; transform: none; transition: none; animation: none; } } /* ========================================================================== 22 · כפתור הצטרפות צף (יונתן, 5.10.26 · בקשת גיא, סבב 2 של גיא באותו ערב) אותו רכיב .btn של הספר (רובי, פאה חתוכה, ברק בריחוף). מתחיל: במובייל (עד 1023) אחרי שגללו את כל הסקשן של ה-CTA הראשון אחרי ההירו (03: הסיפור, 03s: "מוכנה גם"), בדסקטופ אחרי שכפתור ההירו יצא מהמסך. מרגע שהתחיל הוא נשאר, ומסתתר רק כשהטופס בפריים או כשבאנר העוגיות פתוח. transform ו-opacity בלבד; reduced-motion: opacity בלבד. שני כיוונים: .join-float--quiet (א, שקט) ו-.join-float--facets (ב, הפאות מתחברות לכפתור). ========================================================================== */ .join-float { position: fixed; z-index: 9000; /* מתחת לבאנר העוגיות (9200), לנגישות (9500) וללייטבוקס (10050) */ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* מובייל: רוחב מלא, 16 מכל צד. כפתור הנגישות כבר לא בתחתית (באמצע הגובה, lp360-widgets.css) */ inset-inline: 16px; display: flex; justify-content: center; pointer-events: none; opacity: 0; visibility: hidden; transform: translate3d(0, 20px, 0); transition: opacity 180ms ease-in, transform 180ms ease-in, visibility 0s linear 180ms; } .join-float.is-shown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 320ms var(--ease-spring), transform 460ms var(--ease-spring), visibility 0s; } .join-float__btn { width: 100%; padding-inline: 20px; } /* הצל: box-shadow של .btn הוא מלבן מעוגל, ובכפתור צף מעל טקסט הוא נראה כ"רוח" בהירה בפינות החתוכות. כאן הצל הוא שכבה מטושטשת צרה מהכפתור, מתחת לגוף (z -2 בתוך ה-isolation של .btn), כך שלא מציץ בפינות */ .join-float__btn, .join-float__btn:hover, .join-float__btn:active { box-shadow: none; } .jf-shadow { position: absolute; inset: 12px 18px 0; z-index: -2; border-radius: 16px; background: rgba(150, 26, 58, .55); filter: blur(12px); transform: translateY(8px); pointer-events: none; } /* מסגרת פוקוס: הרובי הרגיל של .btn (--state-focus) - 4.77 על שמנת ו-3.69 על יין-לילה, כלומר עובר 3:1 מעל שני סוגי המשטחים שהכפתור צף מעליהם. (רובי-בהיר נפסל: 2.99 על שמנת.) לא מגדירים כאן כלום, רק מתעדים. */ @media (min-width: 768px) { /* טאבלט ודסקטופ: מרכז תחתון, ברוחב התווית. רחוק מכפתור הנגישות בשמאל, ולא על תחילת השורות בימין */ .join-float { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; } .join-float__btn { width: auto; padding-inline: 32px; } } /* 22 · דסקטופ (גיא, 5.10.26): לא במרכז. מ-1024 הכפתור יושב משמאל למטה, מימין לכפתור הנגישות ובאותו גובה (המרכזים מיושרים: הכפתור 56 ב-bottom 12, הנגישות 48 ב-bottom 16, שניהם במרכז 40), במרווח 16 ממנו (16 + 48 + 16 = 80). מתיישר לקצה השמאלי של עמודת התוכן כשהוא רחוק מספיק מכפתור הנגישות (1440: 96, 1920: 336). 100% ב-fixed = רוחב ה-viewport בלי פס הגלילה, בדיוק כמו ה-.wrap. כפתור הנגישות לא זז. */ @media (min-width: 1024px) { .join-float { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); inset-inline: auto; left: 24px; /* גיא 8.10.26: בפינה השמאלית של המסך ולא בקצה עמודת התוכן; כפתור הנגישות עבר לימין (lp360-widgets.css) */ } } /* הלייטבוקס של הגלריה מעל הכול: הכפתור יוצא מהדרך */ html.lb-open .join-float { visibility: hidden; } /* הצף נשאר גם ליד הפוטר (גיא, סבב 2), אז לפוטר יש ריפוד תחתון בגובה הכפתור (12 + 56) ועוד מרווח, כדי שהקרדיט והקישורים לא יישבו מתחתיו. בכל רוחב: בדסקטופ הקרדיט בשמאל למטה, בדיוק איפה שהכפתור. רק בדפים שיש בהם הצף */ .join-float ~ .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* מובייל (עד 1023, גיא 5.10.26): מרגע שהצף התחיל (html.jf-on), כפתורי ה-CTA בתוך הסקשנים עוברים לסגנון המשני של הספר (9.1: קו דק, בלי מילוי, רדיוס יחסי 48 -> 20 מ-7.10.26) ובקטן יותר, כדי שלא יתחרו בו. הם עדיין שם. כפתור ההירו נשאר ראשי. 48 + 4 + 4 = אותם 56 של הכפתור הראשי, כך שהשורה לא משנה גובה ושום דבר בדף לא זז (CLS 0). */ @media (max-width: 1023px) { html.jf-on main .cta-row:not(.hero__cta) .btn { width: auto; height: 48px; margin-block: 4px; padding-inline: 24px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-button-48); color: var(--text-primary); font-size: 16px; box-shadow: none; } html.jf-on main .on-dark .cta-row:not(.hero__cta) .btn { border-color: var(--line-strong-dark); color: var(--text-on-dark); } html.jf-on main .cta-row:not(.hero__cta) .btn::before, html.jf-on main .cta-row:not(.hero__cta) .btn::after { display: none; } html.jf-on main .cta-row:not(.hero__cta) .btn:focus-visible { border-width: 2.5px; border-color: var(--state-focus); } html.jf-on main .on-dark .cta-row:not(.hero__cta) .btn:focus-visible { border-color: var(--state-focus-dark); } } @media (max-width: 1023px) and (hover: hover) { html.jf-on main .cta-row:not(.hero__cta) .btn:hover { background: var(--bg-raised); box-shadow: none; } html.jf-on main .on-dark .cta-row:not(.hero__cta) .btn:hover { background: var(--bg-raised-dark); } } /* ---------- ב · הפאות מתחברות לכפתור (כניסה ראשונה בלבד, ~900ms) ---------- שלוש פאות קטנות (rose-clay-200, רובי-בהיר, רובי-כהה) עפות מבחוץ ונוחתות בתוך העיקול של הכפתור, ממלאות אותו לרגע, ונבלעות פנימה בזמן שברק האור של הכפתור חוצה אותו. אחרי זה: הכפתור הרגיל. כניסות חוזרות = הכניסה של א. יונתן 7.10.26 (13, פריט 2; צילום 15-join-float-facets-frames): מאז שהכפתור עגול (רדיוס 24) הפינה הישרה כבר לא שייכת לו, והפאות נראו לרגע כמשולשים חדים מחוץ לצורה. עכשיו הן בתוך עטיפה ברדיוס של הכפתור עם overflow: hidden, כך שהקו העגול חותך אותן כשהן עפות פנימה, ונוחתות בתוך העיקול (14 במקום 20, 7 מהקצה ו-12 מהצד). התזמון, הצבעים, הברק ו-reduced-motion לא השתנו. */ .jf-facets { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; } .jf-facet { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0; } .jf-facet--1 { top: 7px; inset-inline-start: 12px; background: var(--rose-clay-200); clip-path: polygon(0 0, 100% 0, 100% 100%); --fly: translate(26px, -22px) rotate(-24deg); } /* ימין-למעלה */ .jf-facet--2 { bottom: 7px; inset-inline-end: 12px; background: var(--ruby-300); clip-path: polygon(0 0, 0 100%, 100% 100%); --fly: translate(-26px, 22px) rotate(24deg); } /* שמאל-למטה */ .jf-facet--3 { top: 7px; inset-inline-end: 12px; background: var(--ruby-600); clip-path: polygon(0 0, 100% 0, 0 100%); --fly: translate(-22px, -20px) rotate(18deg); } /* שמאל-למעלה */ .join-float--facets.is-first .jf-facet { animation: jf-facet 860ms var(--ease-spring) both; } .join-float--facets.is-first .jf-facet--2 { animation-delay: 70ms; } .join-float--facets.is-first .jf-facet--3 { animation-delay: 140ms; } @keyframes jf-facet { 0% { opacity: 0; transform: var(--fly) scale(.6); } 45% { opacity: 1; transform: none; } 68% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.4); } } /* הכפתור עצמו בכניסה הראשונה: עולה וגדל קצת אחרי שהפאות כבר בדרך */ .join-float--facets.is-first.is-shown { transition: opacity 320ms var(--ease-spring) 60ms, transform 520ms var(--ease-spring) 60ms, visibility 0s; } .join-float--facets.is-first.is-shown .join-float__btn { animation: jf-rise 520ms var(--ease-spring) 60ms both; } @keyframes jf-rise { from { transform: scale(.94); } to { transform: none; } } /* ברק: הפס של הריחוף (--sheen-x) חוצה פעם אחת כשהפאות נבלעות (520ms), ופעם אחת נוספת 6 שניות אחרי ההופעה הראשונה */ .join-float--facets.is-first .join-float__btn::before, .join-float--facets.is-glint .join-float__btn::before { animation: jf-glint 700ms var(--ease-spring) both; } .join-float--facets.is-first .join-float__btn::before { animation-delay: 520ms; } @keyframes jf-glint { from { background-position: 135% 0, 50% 0, 0 0; } to { background-position: -35% 0, 50% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .join-float, .join-float.is-shown, .join-float--facets.is-first.is-shown { transform: none; transition: opacity 150ms linear, visibility 0s linear 150ms; } .join-float.is-shown { transition: opacity 150ms linear, visibility 0s; } .join-float .jf-facet { display: none; } .join-float .join-float__btn, .join-float .join-float__btn::before { animation: none !important; } }