/* ---------- צבעי המותג כמשתני CSS ---------- מקור האמת הוא THEME_PALETTES ב-app.js; applyThemeColor() דורס את המשתנים האלה על בכל החלפת ערכת נושא. הערכים כאן הם ברירת המחדל (yellow), כדי שהעיצוב יהיה נכון עוד לפני ש-JS רץ ולא תהיה הבהוב צבע בטעינה. כל שימוש למטה כולל fallback, למקרה ש-app.css חדש נטען מול app.js ישן מהמטמון. */ :root { --gold: #B8912A; --gold-soft: #8A7530; --gold-text: #1A1608; --gold-deep: #B8963A; --gold-rgb: 184,145,42; /* rgb הבסיס למשטחי glass, כדי ש-html.dark (למטה) יוכל להפוך אותם לכהים בלי לשכפל את כל שאר הכללים. מקור האמת למצב תצוגה (בהיר/כהה/לפי המערכת) הוא recomputeC() ב-app.js - html.dark נכתב שם (syncThemeCssVars), לא כאן. */ --surface-rgb: 255,255,255; } html, body { margin: 0; } body { background-color: #F4F5F3; background-image: radial-gradient(1000px 650px at 10% -10%, rgba(var(--gold-rgb, 184,145,42),0.12), transparent 60%), radial-gradient(900px 600px at 110% 5%, rgba(124,163,110,0.10), transparent 55%); background-size: 100% 100%, 100% 100%; background-attachment: fixed, fixed; min-height: 100vh; } /* מצב כהה: הרקע עצמו (color-scheme/הצבעים ה"נייטרליים" של C) נקבע ב-JS דרך syncThemeCssVars, כי body לא יכול לקרוא C.bg. שני הצללים כאן מוחלשים בכוונה - על רקע כהה הם בולטים גם בעוצמה נמוכה בהרבה מאשר על הרקע הבהיר המקורי. */ html.dark body { background-color: #14170F; background-image: radial-gradient(1000px 650px at 10% -10%, rgba(var(--gold-rgb, 184,145,42),0.07), transparent 60%), radial-gradient(900px 600px at 110% 5%, rgba(124,163,110,0.05), transparent 55%); } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } :focus-visible { outline: 2px solid var(--gold, #B8912A); outline-offset: 2px; border-radius: 4px; } /* מחליף את הקלאס focus:border-[#B8912A] של Tailwind, שהיה זהב קשיח ולא עקב אחרי ערכת הנושא. בלי !important בכוונה - חלק מהשדות מגדירים borderColor ב-style inline שגובר על קלאס, בדיוק כמו שהיה קודם. המטרה כאן היא התאמת הצבע לערכה, לא שינוי ההתנהגות הקיימת. */ .focus-gold:focus { border-color: var(--gold, #B8912A); } /* ---------- glass surfaces (signature of the redesign) ---------- */ .glass { background: rgba(var(--surface-rgb, 255,255,255),0.62); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(var(--gold-rgb, 184,145,42),0.16); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 26px rgba(30,36,32,0.07); } .glass-strong { background: rgba(var(--surface-rgb, 255,255,255),0.78); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(var(--gold-rgb, 184,145,42),0.20); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 34px rgba(30,36,32,0.09); } /* --surface-rgb הופך כהה תחת html.dark; box-shadow ה-inset גם הוא מוחלף כי הבהוב לבן-כמעט- שקוף (שנועד לדמות מקור אור עליון על משטח בהיר) הופך לקו לבן בולט ולא רצוי על משטח כהה. */ html.dark .glass, html.dark .glass-strong { --surface-rgb: 34,43,27; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 26px rgba(0,0,0,0.35); } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } } @keyframes popIn { 0% { opacity: 0; transform: scale(.85) } 70% { opacity: 1; transform: scale(1.03) } 100% { transform: scale(1) } } @keyframes balloonRise { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 25% { transform: translate(-10px, -25vh) rotate(-2deg); } 50% { transform: translate(8px, -55vh) rotate(2deg); } 75% { transform: translate(-6px, -85vh) rotate(-1deg); opacity: 1; } 100% { transform: translate(0, -115vh) rotate(0deg); opacity: 0; } } .anim-balloon-rise { animation: balloonRise 6.5s ease-in-out forwards; } @keyframes sheetUp { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: translateY(0) } } @keyframes softPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(var(--gold-rgb, 184,145,42),.30) } 50% { box-shadow: 0 6px 26px rgba(var(--gold-rgb, 184,145,42),.50) } } @keyframes starPop { 0% { transform: scale(1) } 40% { transform: scale(1.35) } 100% { transform: scale(1) } } .anim-fade-in { animation: fadeIn .35s ease both; } .anim-fade-up { animation: fadeUp .4s cubic-bezier(.22,.61,.36,1) both; } .anim-pop { animation: popIn .45s cubic-bezier(.34,1.56,.64,1) both; } .anim-star-pop { animation: starPop .35s cubic-bezier(.34,1.56,.64,1) both; } .recipe-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .recipe-card:hover, .recipe-card:focus-visible { transform: translateY(-3px); border-color: rgba(var(--gold-rgb, 184,145,42),0.4); } .fab-btn { animation: softPulse 2.6s ease-in-out infinite; transition: transform .15s ease; } .fab-btn:active { transform: scale(.95); } .dropzone { transition: background-color .15s ease, border-color .15s ease; } .tab-btn { transition: color .2s ease, transform .15s ease; } .tab-btn:active { transform: scale(.96); } /* sliding indicator under the active category chip */ .cat-indicator { transition: transform .32s cubic-bezier(.22,.61,.36,1), width .32s cubic-bezier(.22,.61,.36,1); } .step-item { transition: opacity .2s ease; cursor: pointer; } .step-item.done { opacity: .55; } .step-item.done .step-text { text-decoration: line-through; } .sheet-panel { animation: sheetUp .3s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* עמודי השער/מפרידי הקטגוריה של ספר הבישול. מוגדר גם מחוץ ל-@media print בכוונה: ה-.cookbook-print נראה גם על המסך (כתצוגה מקדימה), והתמונות ברוחב 1054px היו גולשות בלי הרסן. Tailwind Preflight אמנם מגביל img ל-max-width:100%, אבל הוא מגיע מ-CDN חיצוני ולא נכון להישען עליו בשביל זה. */ .cookbook-image-page img { display: block; width: 100%; } @media print { body * { visibility: hidden; } .cookbook-print, .cookbook-print * { visibility: visible; } .cookbook-print { position: absolute; top: 0; right: 0; left: 0; width: 100%; background: #fff !important; } .cookbook-page { page-break-after: always; padding: 18px; } .cookbook-page:last-child { page-break-after: auto; } .cookbook-image-page { padding: 0; } /* בלי זה, תמונת השער/מפריד הקטגוריה נדפסת ברוחב מלא בלי הגבלת גובה - כשהיחס שלה גבוה יותר מיחס A4 (297/210) היא נשפכת לעמוד נוסף כמעט ריק, ומשבשת את הספירה של page-break-after מכאן והלאה. aspect-ratio+object-fit קוצצים אותה לגודל עמוד אחד בלי תלות בשוליים המדויקים של המדפסת/דפדפן. */ .cookbook-image-page img { aspect-ratio: 210 / 297; object-fit: cover; } .no-print { display: none !important; } } /* ---------- utilities לוגיים לכיווניות (RTL/LTR) ---------- האפליקציה נכתבה RTL-first עם קלאסים פיזיים (pr/pl/mr/ml/right/left). אלה לא מתהפכים לבד ב-/en, ולכן הוחלפו בקלאסים הלוגיים שלמטה. מוגדרים כאן ולא נשענים על Tailwind, כדי לא להיות תלויים בגרסה שה-Play CDN במקרה מגיש. start/end מתהפכים אוטומטית לפי dir. */ .start-0 { inset-inline-start: 0; } .start-1\.5 { inset-inline-start: 0.375rem; } .start-2 { inset-inline-start: 0.5rem; } .start-5 { inset-inline-start: 1.25rem; } .start-6 { inset-inline-start: 1.5rem; } .end-0 { inset-inline-end: 0; } .end-3 { inset-inline-end: 0.75rem; } .-end-0\.5 { inset-inline-end: -0.125rem; } .-end-1 { inset-inline-end: -0.25rem; } .-end-2 { inset-inline-end: -0.5rem; } .ps-1 { padding-inline-start: 0.25rem; } .ps-4 { padding-inline-start: 1rem; } .pe-1 { padding-inline-end: 0.25rem; } .pe-7 { padding-inline-end: 1.75rem; } .pe-11 { padding-inline-end: 2.75rem; } .ms-1 { margin-inline-start: 0.25rem; } .ms-2 { margin-inline-start: 0.5rem; } .ms-6 { margin-inline-start: 1.5rem; } .me-2 { margin-inline-end: 0.5rem; } /* תיקון ל-iOS Safari: min-h-screen (Tailwind) = min-height:100vh, וב-Safari עם ה-toolbar הדינמי 100vh לפעמים גדול מהגובה הנראה בפועל, מה שדוחף תוכן ממורכז אנכית (flex items-center) יותר מדי כלפי מטה עם רווח ריק מעל. dvh פותר את זה; שתי השורות יחד = fallback תקין לדפדפנים שלא תומכים ב-dvh (הם פשוט מתעלמים מהשורה השנייה ונשארים עם 100vh הרגיל). */ .min-h-screen { min-height: 100vh; min-height: 100dvh; }