/* CARBAR — design tokens (Heebo + Israeli color system). Populate with full styles when HTML is supplied. */ :root { --color-bg: #ffffff; --color-surface: #f4f6f9; --color-border: #e2e8f0; --color-primary: #1a56db; --color-primary-dark: #1e40af; --color-accent: #f97316; --color-success: #16a34a; --color-danger: #dc2626; --color-whatsapp: #25D366; --color-plate-yellow: #FCD116; --color-text: #1a202c; --color-text-muted: #64748b; --color-ai-bg: #eff6ff; } html, body { font-family: 'Heebo', sans-serif; direction: rtl; text-align: right; background: var(--color-bg); color: var(--color-text); } /* Never scroll horizontally. The off-canvas mobile menu lives at translateX(100%) (just off the right edge) and any stray full-bleed element would otherwise add a sideways scroll that shoves the whole page over on phones. iOS Safari ignores overflow-x on html alone when a fixed element extends the layout, so we clip on both html and body and also stop the menu from extending the page width. */ /* Clip horizontal overflow WITHOUT making a scroll container. `overflow-x: hidden` forces overflow-y to `auto`, which turns body into a second scroller and can swallow vertical scrolling on phones. `overflow-x: clip` clips the off-canvas menu's sideways spill while leaving vertical scroll alone. */ html { overflow-x: hidden; } body { overflow-x: clip; position: relative; max-width: 100%; } /* ── Native-app feel on touch devices ─────────────────────────────────────── Small, universal touches that make the web shell read like an installed app: no blue tap-flash, no iOS auto text-zoom on rotate. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } @media (max-width: 768px) { /* Inputs at <16px trigger iOS auto-zoom on focus — keep them >=16px. */ input, select, textarea { font-size: max(16px, 1em); } } /* ============================================================ TOP NAV — "מאגרים" dropdown (desktop) ============================================================ */ .nav-dropdown { position: relative; } .nav-dropdown__btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; font: inherit; cursor: pointer; color: inherit; /* Vertical padding extends the trigger's hover area downward, so the cursor never re-enters "no man's land" between button and menu. */ padding: 6px 0; } .nav-dropdown__caret { font-size: 18px !important; transition: transform 0.18s ease; } .nav-dropdown:hover .nav-dropdown__caret, .nav-dropdown:focus-within .nav-dropdown__caret { transform: rotate(180deg); } .nav-dropdown__menu { position: absolute; top: 100%; right: 0; margin-top: 12px; min-width: 280px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 18px 48px -16px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.06); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 60; /* Hide via opacity/visibility (not display) so the transparent bridge stays in the layout and transitions can run. */ opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; } /* Transparent bridge fills the 12px gap so cursor travel from button → menu doesn't break the :hover chain. */ .nav-dropdown__menu::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s; } .nav-dropdown__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #0f172a; transition: background 0.15s ease, color 0.15s ease; } .nav-dropdown__item:hover { background: #f1f5f9; color: #002b80; } .nav-dropdown__item .material-symbols-outlined { font-size: 22px; color: #002b80; flex-shrink: 0; } .nav-dropdown__item span:not(.material-symbols-outlined) { display: flex; flex-direction: column; line-height: 1.2; } .nav-dropdown__item strong { font-weight: 700; font-size: 0.92rem; } .nav-dropdown__item small { font-size: 0.74rem; color: #64748b; margin-top: 2px; } .nav-dropdown__group { display: block; padding: 10px 12px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; border-top: 1px solid #f1f5f9; } .nav-dropdown__group:first-child { padding-top: 4px; border-top: 0; } /* ============================================================ TOP NAV — mobile hamburger sheet ============================================================ */ .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; color: #0f172a; cursor: pointer; } .nav-burger:active { transform: scale(0.96); } .nav-burger .material-symbols-outlined { font-size: 24px; } .nav-sheet { position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0; visibility: hidden; overflow: hidden; /* contain the off-canvas panel's slide-in */ transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .nav-sheet.is-open { pointer-events: auto; opacity: 1; visibility: visible; transition: opacity 0.2s ease; } .nav-sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); } .nav-sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #fff; box-shadow: -16px 0 48px -16px rgba(15,23,42,.25); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(.4,0,.2,1); overflow-y: auto; } .nav-sheet.is-open .nav-sheet__panel { transform: translateX(0); } .nav-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; background: #fff; z-index: 1; } .nav-sheet__title { font-weight: 900; font-size: 1.2rem; color: #002b80; letter-spacing: -0.01em; font-style: italic; } .nav-sheet__close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; } .nav-sheet__body { display: flex; flex-direction: column; padding: 14px; gap: 4px; } .nav-sheet__group-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: #94a3b8; text-transform: uppercase; padding: 14px 12px 6px; } .nav-sheet__link { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 11px; text-decoration: none; color: #0f172a; font-weight: 600; font-size: 0.96rem; transition: background 0.15s ease; } .nav-sheet__link:hover, .nav-sheet__link:active { background: #f1f5f9; } .nav-sheet__link.is-active { background: #eef2ff; color: #002b80; } .nav-sheet__link .material-symbols-outlined { font-size: 22px; color: #002b80; flex-shrink: 0; } .nav-sheet__link-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; } .nav-sheet__link-text small { font-size: 0.74rem; color: #64748b; font-weight: 500; margin-top: 2px; } /* ============================================================ MOBILE RESPONSIVENESS FOUNDATION (site-wide, cross-cutting) ------------------------------------------------------------ Component-specific tweaks live in each feature stylesheet. Canonical breakpoints used across the app: 639.98px → narrow phone (mirrors Tailwind sm=640) 767.98px → phone + small tablet (mirrors Tailwind md=768, the shell pivot) The .98 avoids a 1px double-trigger with Tailwind's >=640/>=768 utilities. ============================================================ */ /* Fluid title scale — scales continuously, so large headings never overflow a 320px phone yet still read big on desktop. Applied to the oversized titles. */ :root { --fluid-hero: clamp(1.5rem, 6vw, 2.25rem); --fluid-section: clamp(1.125rem, 4.5vw, 1.55rem); } @media (max-width: 767.98px) { /* Page side-padding. These custom wrappers bake in 20–24px and don't reduce it on phones. (.mkt2 / .mktd / .thx are already mobile-first; the Tailwind .max-w-* wrappers and the .v-* report use px-4 — all excluded on purpose.) */ .mkt, .mkt-form, .mech, .mech-details, .dir, .c-shell, .pub { padding-left: 16px; padding-right: 16px; } /* Comfortable thumb targets. Scoped to form fields + the small pill/chip/pager controls — NOT bare