/* ss-theme.css · הפלטה של בית ליוצרים ═══════════════════════════════════════════════════════════ **המקור היחיד לצבע באתר.** עד 3.11.2026 כל עמוד נשא פלטה משלו, ומדידה של עשרים עמודי האתר מצאה **אחד עשר גוונים שונים של רקע**. זה מה שגרם לבעלים לשאול "כל עמוד הוא עמוד אחר? נראה לך הגיוני?". הוא צדק. לכן: עמוד לא מגדיר צבע. הוא מצביע לכאן. הבדיקה _תפריט/_בדיקות/צבע-מקומי.py נופלת על עמוד שמגדיר צבע משלו, כדי שזה לא יחזור בשקט. ── מה שנמדד ולמה הטוקנים הם מה שהם ───────────────────────── **הפלטה הומרה ב-8.11.2026 לכהה חם עם ענבר.** השמנת נפסלה ("אני לא אוהב את השמנת מוקה הזה"), והכיוון נלקח מחבילת עיצוב שהבעלים אהב: רקע 171310, כרטיס 1e1a15, כתב efe7d8 ומבטא ענבר e8a548. **ירוק רק בלוגו.** זאת הוראה מפורשת. --ink ו---accent היו שניהם ירוק הלוגו ועברו לשמנת ולענבר. הירוק שנשאר ב---ok אינו מבטא מותג אלא סימן הצלחה, כמו האדום באזהרה. הדיו הוא אחד משניים: שמנת efe7d8, שנמדדה 14.9 על הרקע, או שמנת עמומה b3a78f, שנמדדה 7.6. שניהם עוברים בנוח, והענבר ככתב נמדד 8.11. כל זוג כאן נמדד ב-_תפריט/_בדיקות/הפלטה.py, שנופל אם טוקן יורד מתחת לרצפה שלו. הרצפה 4.5 לטקסט ו-3.0 לקו ולמסגרת. ═══════════════════════════════════════════════════════════ */ :root{ /* ── משטחים ───────────────────────────────────────────────── **ארבעת הגוונים היו כמעט אותו גוון.** נמדד ב-5.11.2026: כרטיס מול עמוד נבדלו ב-2.34 יחידות L* בלבד, עמוד מול רצועה ב-2.05, והעין פשוט לא רואה את זה. מכאן "אין פה עומק בעיצוב בכלל" ו"הכל בהיר ומטושטש": לא בגלל שהעמוד בהיר, אלא בגלל שכל המשטחים יושבים על אותו מישור. **רקע העמוד לא הוכהה.** הוא נשאר בדיוק כפי שהיה, לפי ההוראה. מה שהשתנה הוא שהכרטיס עלה ללבן נקי, והמשטחים השקועים ירדו, כך שהמדרגות הן 2.8, 4.4 ו-4.4 במקום 2.3, 2.0 ו-3.0. **ומדרגה לבדה אינה עומק.** כרטיס לבן על שמנת נבדל ב-2.8 בלבד, וזה מעט. מה שמרים אותו הוא שלושת אלה יחד: המדרגה, גבול --hair שנמדד מול הרצפה, וצל --shadow בשתי שכבות. עומק.py מודד את שלושתם מהפיקסל ונופל על כרטיס שטוח. */ --bg: #171310; /* רקע העמוד. שחור חם. L* 7.4 */ /* **המשטח הורם ב-0.97 יחידות L*.** בדיקת עומק.py מדדה מדרגה 3.36 מול רצפה 3.5, כלומר כרטיס שמצויר על הדף ולא מורם ממנו. ‎#1e1a15 נתן 3.36 ו-‎#201c16 נותן 4.33. קו השיער נשאר 3.01 והדיו 13.79, כלומר ההרמה לא באה על חשבון שום ניגודיות. */ --surface: #201c16; /* כרטיס, מדרגה מעל הרקע. L* 10.4 */ --surface-2: #26211a; /* רצועה ומשטח שני. L* 13.6 */ --sunk: #2b251d; /* השקוע, לשדות ולהפרדה. L* 15.3 */ /* ── דיו ──────────────────────────────────────────────── **אין כאן דיו בזהב בהיר.** ראו למעלה. */ --ink: #efe7d8; /* כותרות וטקסט חזק. 14.9 על הרקע */ --ink-body: #efe7d8; /* גוף הטקסט. 14.9 */ /* **--ink-soft הוא לטקסט מ-14 נקודות ומעלה.** מוצהר הוא 5.11 על שמנת ועובר בנוח, אבל בגודל 11 עד 13 הגליף כמעט כולו שפה מרוככת ואף פיקסל אינו מגיע לדיו המלא: נמדד 3.20 בכריכת הכתיבה, 3.33 בכריכת ההלחנה ו-3.78 במדריך. בגדלים האלה משתמשים ב---ink-body, ולא מוסיפים עליו שקיפות. */ /* **הוכהה ב-5.11 עם המשטחים.** --sunk ירד ל-L* 88.4 כדי לתת עומק, ו-7a6540 עליו נמדד 4.14 ונפל. 725e3c עובר על כל ארבעת המשטחים, והנמוך ביותר הוא 4.61. */ --ink-soft: #b3a78f; /* משני, מ-14 נקודות. 7.6 */ /* ── זהב: קו ומסגרת בלבד ──────────────────────────────── */ /* **הקו הוכהה ב-5.11**, כי המשטח השקוע ירד. 9d7e4e נמדד 2.82 על --sunk החדש ונפל. 94774a עובר על כל ארבעת המשטחים, והנמוך ביותר הוא 3.12. */ --line: #e8a548; /* הקו הנושא. ענבר. 8.6 */ --line-soft: #6b5c48; /* קו שני, רך. קישוט ולא גבול */ --frame: #756957; /* מסגרות ועיטור. 3.04 מול הכרטיס */ /* **הגבול הוא ההפרדה היחידה, ולכן הוא נמדד כמו קו.** כרטיס שמנת על עמוד שמנת נבדלים ביחס 1.06 בלבד: בלי גבול נראה שהכרטיס אינו קיים. אלפא 22 נמדד 1.41 ונפל, וזאת בדיוק אותה מלכודת כמו קו השיער של הסרגל ב-1.83. 65 הוא הערך הקל ביותר שעובר 3.0, ונבחר כדי שהגבול לא ייראה כמסגרת כבדה. */ /* **הגבול עלה מ-65 ל-78.** ב-65 הוא נמדד 3.17 ועבר את הרצפה בקושי, וזה בדיוק "קצה לא ברור": גבול שעובר מדידה עדיין יכול להיראות כמו רמז. */ --hair: rgba(239,231,216,.37); /* גבול כרטיס. 3.03 */ --hair-on: rgba(239,231,216,.55); /* גבול בריחוף */ /* ── מבטא ──────────────────────────────────────────────── */ --accent: #e8a548; /* ענבר. **ירוק רק בלוגו**, 8.11 */ --on-accent: #171310; /* הרקע הכהה על הענבר. 8.6 */ /* ── מצבים: תקין, אזהרה, שגיאה ─────────────────────────── **שלושה תפקידים ולא שלושה צבעים לנוי.** עמודי המדריכים ולוח הניהול מסמנים "נשמר", "שים לב" ו"נכשל", ועד עכשיו כל אחד מהם המציא את הגוון בעצמו. ההמרה האוטומטית לא ידעה לזהות אותם, ולכן הם נרשמו כ"דורשים עין" והגיעו לכאן. שלושתם נבחרו כהים מספיק כדי לשמש **טקסט** על שמנת ולא רק רקע, כי הודעת שגיאה בצבע בהיר על שמנת היא בדיוק המלכודת שהזהב נפל בה. כל זוג נמדד בהפלטה.py. **והקווים ב-72 אחוז ולא ב-55.** ב-55 שלושתם נמדדו סביב 2.5 ונפלו מול רצפת 3.0, בדיוק כמו גבול הכרטיס שנפל ב-22 אחוז וכמו קו השיער של הסרגל ב-1.83. אלפא נראה חזק יותר ממה שהוא. */ /* **הוכהה ב-5.11.** הוא יושב גם על --ok-bg שמונח על משטח שקוע, וההרכבה הזאת ירדה עם המשטחים: 1d6b3f עליה נמדד 4.29 ונפל. 1a6139 מחזיק 4.92 במקרה הגרוע. */ --ok: #5fbf8d; /* ירוק הצלחה, מואר לרקע כהה */ --ok-bg: rgba(95,191,141,.10); --ok-line: rgba(95,191,141,.72); --warn: #e0a05a; /* כתום מואר לרקע כהה */ --warn-bg: rgba(224,160,90,.10); --warn-line: rgba(224,160,90,.72); --err: #e2706b; /* אדום מואר לרקע כהה */ --err-bg: rgba(226,112,107,.10); --err-line: rgba(226,112,107,.72); --info: #6fb0cf; /* כחול מואר לרקע כהה */ --info-bg: rgba(111,176,207,.10); --info-line: rgba(111,176,207,.72); /* ── מעברים על צילום ────────────────────────────────────── **גם אלה בגיליון ולא בעמוד.** צילום בכרטיס צריך להימס לגוף הכרטיס ולהיות מוכהה בשוליים, ואם כל עמוד יכתוב את הגרדיאנט בעצמו נקבל שוב פלטות מקבילות. שני הטוקנים האלה הם הסיבה שעמוד לא צריך אף צבע כרומטי משלו. */ /* **הדהייה הוחלפה בקצה.** היא נולדה בעיצוב הכהה כדי שטקסט בהיר ייקרא על תחתית הצילום. בעיצוב הבהיר התפקיד הפוך, ואין טקסט על הצילום בכלל: מה שנשאר ממנה הוא פס חיוור שממיס את התמונה לשמנת. הבעלים ראה את זה בטלפון ואמר שהצילום "מטושטש" ו"נגמר בערפל". **צילום צריך קצה, לא מעבר.** אותו טוקן נושא עכשיו קו שיער אחד בתחתית התמונה, ולכן אף עמוד לא צריך לשנות דבר כדי לקבל את ההתנהגות החדשה. */ /* **השכבות חזרו להכהות, כי הקרקע חזרה להיות כהה.** החום ‎rgba(107,81,36) נבחר כדי להבהיר צילום על שמנת; על ‎#171310 הוא מבהיר אותו אל תוך הדף במקום לגדור אותו. */ --photo-fade: linear-gradient(to top, rgba(232,165,72,.70) 0 1px, transparent 1px); --photo-vignette: radial-gradient(118% 100% at 50% 38%, transparent 40%, rgba(0,0,0,.42) 100%); /* **שכבות שמעל צילום, בגרסה הבהירה.** על רקע כהה השכבה הכהתה את הצילום כדי שדיו בהיר ייקרא. כאן היא מבהירה אותו כדי שדיו כהה ייקרא: זה היפוך תפקיד ולא החלפת גוון. הן כאן ולא בעמוד, כדי שאף עמוד לא יצטרך צבע כרומטי משלו. */ /* **הצעיף הצדי הוחלף בהילה.** בכתיב הקודם הוא הגיע ל-97 אחוז שמנת מ-62 אחוז הרוחב והלאה, כלומר שני שלישים מהתצלום נצבעו כמעט לגמרי. נמדד: התצלום הוגש בבהירות 215.5 מול 79.8 בקובץ, ועם 48 אחוז בלבד מהרוויה שלו. **אותו פתרון כמו בטלפון**: הילה מרוכזת מאחורי גוש הטקסט, שיושב בימין כי הדף בעברית, ורעלה כללית חלשה מעליה. הירו.py מודד את שני הצדדים. */ --scrim-side: radial-gradient(68% 128% at 85% 52%, rgba(var(--halo-rgb),.96) 0%, rgba(var(--halo-rgb),.92) 44%, rgba(var(--halo-rgb),.54) 75%, rgba(var(--halo-rgb),0) 100%), linear-gradient(to right, rgba(var(--bg-rgb),0) 0%, rgba(var(--bg-rgb),.10) 55%, rgba(var(--bg-rgb),.20) 100%); --scrim-down: linear-gradient(to bottom, rgba(var(--bg-rgb),.70) 0%, rgba(var(--bg-rgb),.95) 30%, rgba(var(--bg-rgb),.99) 100%); --scrim-up: linear-gradient(to top, rgba(var(--bg-rgb),.96) 12%, rgba(var(--bg-rgb),.62) 52%, rgba(var(--bg-rgb),.12)); --scrim-cap: linear-gradient(to top, rgba(var(--bg-rgb),.97), rgba(var(--bg-rgb),.92) 48%, rgba(var(--bg-rgb),0)); /* ── ההירו: התצלום נראה, והרעלה כהה ─────────────────────── **הרעלה הבהירה הוחלפה ב-8.11.** השמנת כיסתה את התצלום ב-94 אחוז במרכז, והבעלים אמר "התמונה לא צריכה להיות כולה מכוסה". אותה שפה שאושרה בכרטיסיות עוברת לכאן: התצלום נשאר, הרעלה כהה, והכתב עליו בהיר. --photo-dark-rgb הוא אותו חום־שחור של הכרטיסיות, ולכן העמוד מדבר בקול אחד. */ --scrim-hero: radial-gradient(80% 132% at 86% 40%, rgba(var(--photo-dark-rgb),.92) 0%, rgba(var(--photo-dark-rgb),.88) 46%, rgba(var(--photo-dark-rgb),.46) 76%, rgba(var(--photo-dark-rgb),0) 100%), /* רצפה חלשה לאורך הרוחב, מתחת לרדיאלי. הוגדלה ואז הוחזרה ב-8.11: חיזוק שלה לא שינה את המדידה שנותרה, ורק אכל מרקם מהתצלום. */ linear-gradient(to left, rgba(var(--photo-dark-rgb),.44) 0%, rgba(var(--photo-dark-rgb),.30) 52%, rgba(var(--photo-dark-rgb),.18) 100%); --scrim-hero-m: radial-gradient(160% 96% at 50% 36%, rgba(var(--photo-dark-rgb),.92) 0%, rgba(var(--photo-dark-rgb),.86) 50%, rgba(var(--photo-dark-rgb),.40) 79%, rgba(var(--photo-dark-rgb),0) 100%), linear-gradient(to top, rgba(var(--photo-dark-rgb),.48) 0%, rgba(var(--photo-dark-rgb),.24) 46%, rgba(var(--photo-dark-rgb),.16) 100%); /* זהב ככתב על תצלום כהה. הזהב הכהה --ink-body נועד לשמנת ועל תצלום הוא נעלם, וזה בדיוק מה שקרה בכרטיסיות. */ --ink-on-photo-gold: #e8a548; /* ── צל: שתי שכבות, ולא אחת ────────────────────────────── **צל אחד רך ורחב אינו מרים.** 18 פיקסל טשטוש ב-10 אחוז שחור נבלע בשמנת ולא נראה בכלל. מה שמרים אלמנט הוא זוג: **צל מגע** צמוד וחד, שאומר שהכרטיס נוגע בדף, ו**צל סביבה** רחב ודהוי, שאומר כמה הוא גבוה. בלי צל המגע הכרטיס מרחף בלי לגעת, ובלי צל הסביבה הוא מודבק. **והשחור הוחלף בחום.** שחור טהור על שמנת נראה אפור מלוכלך, וחום כהה באותה משפחת גוון של הדיו נראה כמו צל אמיתי. */ --shadow: 0 1px 2px rgba(0,0,0,.10), 0 12px 28px -10px rgba(0,0,0,.26); --shadow-on: 0 2px 4px rgba(0,0,0,.12), 0 22px 46px -14px rgba(0,0,0,.34); --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.20); /* **הירוק גם כשלושה מספרים.** עמוד שרוצה את ירוק הלוגו בשקיפות משתנה כותב rgba(var(--accent-rgb),.18). בלי זה הוא כותב 15,74,53 בעצמו, וזה שוב פלטה מקומית. */ /* **השמנת גם כשלושה מספרים.** רעלה מעל תצלום נכתבת כ-rgba עם שקיפות משתנה, ובלי הטוקן הזה כל עמוד כותב 251,246,234 בעצמו, וזאת שוב פלטה מקומית. */ --bg-rgb: 23,19,16; /* **שמנת ההילה בהירה מהרקע.** הרקע ירד ל-L* 91.6 כדי שהעמוד יהיה שמנת ולא לבן, ואיתו ירדה גם כל רעלה שנגזרה ממנו: שמונה תיבות טקסט בהירו נפלו מתחת לרצפה. ההילה שמתחת לטקסט לוקחת לכן את שמנת הכרטיס, L* 97.6, והדהייה החוצה נשארת על הרקע. */ --halo-rgb: 23,19,16; /* **הרעלה על תצלום הפכה כיוון, ובמדידה.** הרעלה הקודמת נפרסה על הכרטיס כולו: 96 אחוז שמנת בתחתית, ועדיין 62 באמצע. נמדד מול אותו תצלום בלי שום שכבה, לפי פרט מקומי ולא לפי סטיית תקן (מדרון חלק הוא בעצמו שונוּת ודיווח 129 אחוז מהתקרה): **נשארו 72 אחוז מהתצלום**, ובכרטיס התופים 69. שלושת התצלומים כהים מלכתחילה, ולכן שמנת מעליהם מוחקת אותם. רעלה כהה באותה משפחת גוון שומרת 87 אחוז מהפרט ומעלה את הקריאוּת מ-6.7 ל-18.1. **הגוון כאן ולא בעמוד**, אחרת זאת פלטה מקומית וצבע-מקומי.py מפיל אותה. */ --photo-dark-rgb: 23,19,16; --scrim-photo: linear-gradient(to top, rgba(var(--photo-dark-rgb),.88) 0%, rgba(var(--photo-dark-rgb),.64) 34%, rgba(var(--photo-dark-rgb),.20) 68%, rgba(var(--photo-dark-rgb),0) 100%); --ink-on-photo: #efe7d8; /* **הדיו שעל תצלום אינו הדיו של הדף.** b3a78f עובר על משטח כהה אחיד, אבל מתחת לתצלום יש גם כתמים בהירים, ושם הוא נמדד 1.06. על תצלום נשארים בשמנת. */ --ink-on-photo-soft: #e3dbcb; --accent-rgb: 232,165,72; --ok-rgb: 95,191,141; /* **כפתור הרכישה, בשם משלו.** ss-buy.js הוא רכיב משותף: אותו קובץ רץ גם בששת דפי הנחיתה הכהים וגם בעמוד האתגר הבהיר. הוא קורא את הצבע דרך var() עם ערך גיבוי, ולכן בדף כהה שאינו מכיר את הטוקן נשאר הזהב המקורי בדיוק. השמות כאן נבחרו **דווקא כאלה שאינם קיימים ב-ss-kurs.css**, אחרת דפי הנחיתה היו משתנים. */ --btn-bg: var(--accent); --btn-ink: var(--on-accent); /* ── גופני הבית ───────────────────────────────────────── */ --display: 'Frank Ruhl Libre', Georgia, serif; --ui: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --script: 'Cormorant Garamond', Georgia, serif; /* ── מידות ────────────────────────────────────────────── */ --max: 1120px; color-scheme: light; } /* הבסיס. עמוד שמצביע לגיליון מקבל את זה בלי לכתוב כלום. */ html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ margin:0; background: var(--bg); color: var(--ink-body); font-family: var(--ui); font-weight:400; -webkit-font-smoothing: antialiased; } /* ── שדות שתוכנם לטיני ──────────────────────────────────────── **כתובת מייל בעמוד עברית מתהפכת על המסך.** הקובץ אומר placeholder="@gmail.com", והדפדפן מצייר **gmail.com@**: בפסקה שכיוונה rtl הסימן @ הוא תו ניטרלי, ולכן הוא נדבק לסוף השורה במקום להישאר בראש המחרוזת. בקוד הכול תקין, ורק צילום תופס את זה. unicode-bidi:plaintext אומר לדפדפן לגזור את הכיוון **מהתוכן עצמו**: מחרוזת לטינית תצויר ltr ומחרוזת עברית rtl, באותו שדה. text-align:right משאיר את הטקסט בצד שהעין מחפשת אותו בעמוד עברית. זה כאן ולא בעמוד, כי אותו דפוס חוזר בכל טופס באתר: שבעה שדות בחמישה עמודים נמצאו עם אותו placeholder בדיוק. */ input[type="email"], input[type="tel"], input[type="url"], textarea[dir="auto"]{ direction: ltr; text-align: right; unicode-bidi: plaintext; } a{ color: inherit; } img{ display:block; max-width:100%; } /* העיטור של הבית: קו דוהה, מעוין, קו דוהה. הוא כאן כדי שלא יצויר מחדש בכל עמוד. */ .ss-orn{ display:flex; align-items:center; justify-content:center; gap:10px; } .ss-orn i{ width:64px; height:1px; background: linear-gradient(90deg, transparent, var(--line)); } .ss-orn i:last-child{ background: linear-gradient(270deg, transparent, var(--line)); } /* **המעוין הוא תו, ולכן הוא דיו.** הקווים משני צדיו נשארים זהב, כי קו נמדד ברצפת 3.0 ועובר. המעוין עצמו הוא גליף בגודל 11, וזהב בגודל הזה נמדד 3.52 ונופל. */ .ss-orn b{ color: var(--ink-body); font-size:11px; letter-spacing:3px; transform: rotate(45deg); }