/* =========================================================================== UNICCO — Base ריסט, טיפוגרפיה, ותשתית דו-כיוונית (RTL/LTR). עיקרון מרכזי: אין גיליון סגנון נפרד ל-RTL. כל המרווחים והמיקומים משתמשים ב-CSS Logical Properties (margin-inline, padding-inline, inset-inline, border-inline) — ולכן החלפת dir="rtl"/dir="ltr" על הופכת את הפריסה כולה אוטומטית. זה מה שמאפשר עברית ואנגלית מאותו קוד. =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* [hidden] הוא display:none מה-UA stylesheet בלבד, ולכן כל מחלקה עם display מפורש (כמו .badge{display:inline-flex}) גוברת עליו והאלמנט נשאר גלוי. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* מרווח לסרגל התחתון הדביק במובייל — רק כשהוא באמת מוצג. קודם הריווח היה קבוע על body, מתוך הנחה שהסרגל גלוי לאורך כל הקנייה. מרגע שהוא מופיע רק בקרבת סף המשלוח החינם, ריווח קבוע היה משאיר 62px ריקים בתחתית כל עמוד. renderMobileBar מחליף את המחלקה הזו יחד עם הצגת הסרגל. */ body.has-mobilebar { padding-block-end: calc(var(--mobilebar-h) + env(safe-area-inset-bottom, 0px)); } img, svg, video { max-width: 100%; height: auto; display: block; } img { background: var(--paper-2); } /* ------------------------------------------------------------- typography */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); margin: 0 0 var(--s-4); letter-spacing: -0.01em; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); } h3 { font-size: var(--t-xl); } h4 { font-size: var(--t-lg); font-family: var(--font-body); font-weight: 600; } p { margin: 0 0 var(--s-4); } a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } small { font-size: var(--t-sm); } /* מחירים ומספרים — ספרות ברוחב אחיד כדי שהמחירים יתיישרו בגריד */ .num, .price, td.num, input[type="number"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* מחירים תמיד נקראים משמאל לימין, גם בעברית */ .price, .money { direction: ltr; unicode-bidi: isolate; } .eyebrow { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; } :root[dir="rtl"] .eyebrow { letter-spacing: .06em; } .prose { max-width: var(--maxw-prose); } .prose h2 { margin-block-start: var(--s-10); } .prose h3 { margin-block-start: var(--s-8); } .prose ul, .prose ol { padding-inline-start: var(--s-6); margin-block: 0 var(--s-4); } .prose li { margin-block-end: var(--s-2); } .prose a { text-decoration-color: var(--cedar-300); } /* ----------------------------------------------------------------- layout */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--s-12); } @media (min-width: 900px) { .section { padding-block: var(--s-20); } } .stack > * + * { margin-block-start: var(--s-4); } .row { display: flex; align-items: center; gap: var(--s-3); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } .spacer { flex: 1; } /* ------------------------------------------------------------ forms/focus */ button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } /* טבעת פוקוס נראית בכל אלמנט אינטראקטיבי — נגישות מקלדת. באתר הקיים אין מצבי פוקוס כלל. */ :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } /* ------------------------------------------------------------ a11y utils */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4); z-index: var(--z-toast); background: var(--cedar); color: #fff; padding: var(--s-3) var(--s-5); border-radius: 0 0 var(--r-md) var(--r-md); font-weight: 600; text-decoration: none; transition: inset-block-start var(--d-fast) var(--e-out); } .skip-link:focus { inset-block-start: 0; } /* ---------------------------------------------------------------- scrollers */ /* גלילה אופקית מבודדת — טבלאות ורצועות רחבות לא גורמות לעמוד לגלוש */ .scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-snap-type: x proximity; } .scroller::-webkit-scrollbar { height: 4px; } .scroller::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); } .scroller > * { scroll-snap-align: start; } /* העמוד עצמו לעולם לא גולש אופקית */ html, body { overflow-x: clip; }