/* public/assets/css/common.css */ /* ========================================= 1. הגדרות גלובליות (Base) ========================================= */ html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; margin: 0; padding: 0; font-family: var(--font-main, 'Rubik', sans-serif); scroll-behavior: smooth; color: var(--dark-color, #444); /* Direction comes from the attribute (per-site: he/rtl vs en/ltr), so this one stylesheet serves both Hebrew RTL and English LTR storefronts. text-align:start resolves to right in RTL (unchanged for Hebrew) and left in LTR. */ text-align: start; } /* לוגו בהדר – במצב עריכה לחיצה פותחת החלפת לוגו (תבנית Modern וכו') */ a.navbar-logo-link-editable, button.navbar-logo-link-editable { cursor: pointer; pointer-events: auto !important; } a.navbar-logo-link-editable img, button.navbar-logo-link-editable img { pointer-events: auto !important; } /* ========================================= 2. טיפוגרפיה (Typography) ========================================= */ h1, h2, h3, h4, h5 { color: #1a1a1a; letter-spacing: -0.5px; } /* ========================================= 3. טפסים וקלט (Forms) ========================================= */ input, textarea, select, .form-control { text-align: start !important; /* direction inherited from the document's dir attribute (he/rtl vs en/ltr) */ border: 1px solid #e0e0e0; padding: 12px 15px; border-radius: 12px !important; background: #ffffff; transition: all 0.3s ease; font-size: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.02) inset; } input:focus, textarea:focus, select:focus, .form-control:focus { background: #fff; border-color: var(--primary-color, #3b82f6); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color, #3b82f6), transparent 80%) !important; outline: none; } ::placeholder { text-align: start !important; opacity: 0.6; } /* ========================================= Centered header layout (logo centered above a centered menu) Only applied when header_layout = 'centered' (opt-in per site). ========================================= */ .header-centered .navbar-brand { margin: 0 auto; } .header-centered .navbar-collapse { flex-grow: 0; width: 100%; justify-content: center; } .header-centered .navbar-nav { margin-inline: auto !important; } /* ========================================= 4. כפתורים (Buttons) ========================================= */ .btn-primary { background: var(--primary-color, #3b82f6) !important; border: none !important; color: white !important; padding: 12px 35px !important; font-weight: 700 !important; border-radius: 50px !important; letter-spacing: 0.5px; transition: all 0.3s ease !important; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .btn-primary:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important; filter: brightness(1.1); } /* ========================================= 5. כרטיסים ורקעים (Cards & Backgrounds) ========================================= */ .card, .p-4.bg-white, .accordion-item { border: 1px solid rgba(0,0,0,0.05) !important; border-radius: 16px !important; background: #ffffff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; transition: all 0.3s ease !important; } .card:hover, .p-4.bg-white:hover { transform: translateY(-5px) !important; border-color: var(--primary-color, #3b82f6) !important; box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1) !important; } .bg-light-custom { background-color: #f8f9fa !important; background-image: radial-gradient(#cbd5e0 1.5px, transparent 1.5px) !important; background-size: 24px 24px !important; } .bg-dark-custom { background: #111 !important; background: radial-gradient(circle at center, #222 0%, #000 100%) !important; color: white !important; } .bg-dark-custom h2, .bg-dark-custom p, .bg-dark-custom i { color: white !important; } /* --- הוסף את זה בסוף הקובץ public/assets/css/common.css --- */ /* ========================================= 6. Hero Section (עיצוב בסיסי לכולם) ========================================= */ .hero-section, .video-hero-section { position: relative; padding: 180px 0 100px 0; text-align: center; background-size: cover; background-position: center; min-height: 600px; display: flex; align-items: center; justify-content: center; color: white; } /* מסכה כהה על הרקע כדי שהטקסט יבלוט */ .hero-section::before, .video-hero-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%); z-index: 0; pointer-events: none; } .hero-section .container, .video-hero-section .container { position: relative; z-index: 1; } .hero-section h1, .video-hero-section h1 { color: #ffffff !important; text-shadow: 0 10px 30px rgba(0,0,0,0.5); font-weight: 800; margin-bottom: 25px; } .hero-section p, .video-hero-section p { color: rgba(255,255,255,0.9) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.8); font-size: 1.25rem; } /* ========================================= 7. כפתורים צפים (WhatsApp + נגישות) ========================================= */ .access-widget-btn, .whatsapp-float { position: fixed; bottom: 30px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 20px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.2s; border: 3px solid white; z-index: var(--z-max); /* משתמש במשתנה שהגדרנו */ } .access-widget-btn { left: 20px; background: #0056b3; color: white; font-size: 24px; } .whatsapp-float { right: 20px; background: #25d366; color: white; font-size: 28px; text-decoration: none; } .access-widget-btn:hover, .whatsapp-float:hover { transform: scale(1.1); } /* התאמה למובייל - הרמה מעל הסרגל התחתון */ @media (max-width: 992px) { .access-widget-btn, .whatsapp-float { bottom: 90px !important; } } /* תפריט הנגישות עצמו */ .access-menu { position: fixed; bottom: 100px; left: 20px; width: 300px; max-width: 90vw; background: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.1); display: none; flex-direction: column; overflow: hidden; z-index: var(--z-modal); } .access-menu.open { display: flex; } /* ========================================= Text+Video section: prevent RTL text overflow (wrap instead of cut off) ========================================= */ .content-fix { min-width: 0 !important; max-width: 100%; } .content-fix .lead, .content-fix [data-field="text"] { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; max-width: 100%; } /* Mobile: force text column to full width and wrap (fix RTL cutoff) */ @media (max-width: 991px) { .content-fix { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; padding-left: var(--bs-gutter-x, 12px) !important; padding-right: var(--bs-gutter-x, 12px) !important; } .content-fix .lead, .content-fix [data-field="text"], .content-fix .lead p, .content-fix [data-field="text"] p { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .section-wrapper .container .row { min-width: 0 !important; } } /* Text+Video section: mobile – row inside container, no overflow (RTL wrap fix) */ @media (max-width: 991px) { .section-text-video { overflow-x: hidden !important; } .section-text-video .container { overflow-x: hidden !important; max-width: 100% !important; } .section-text-video .text-video-row { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } .section-text-video .content-fix { padding-left: 15px !important; padding-right: 15px !important; } .section-text-video .text-video-body, .section-text-video .text-video-body p { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; } } .access-header { background: #f8f9fa; padding: 15px; font-weight: bold; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; } .access-body { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 400px; overflow-y: auto; } .access-footer { padding: 10px; background: #f8f9fa; border-top: 1px solid #eee; } /* פריטי תפריט הנגישות */ .access-item { background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 80px; } .access-item:hover { border-color: var(--primary-color, #3b82f6); color: var(--primary-color, #3b82f6); } .access-item.active { background: var(--primary-color, #3b82f6); color: white; } .skip-link { position: absolute; top: -100px; /* מסיט את האלמנט מחוץ למסך */ right: 10px; background: #000; color: #fff !important; padding: 10px 20px; z-index: 100000; transition: top 0.3s; } .skip-link:focus { top: 0; /* מציג אותו רק כשלוחצים Tab והוא מקבל פוקוס */ } /* --- תיקון רספונסיביות ל-Hero --- */ @media (max-width: 768px) { } /* --- לוגו: הגדלה ויזואלית (ללא שינוי זרימה) --- */ .logo-boost { transform: scale(1.2); } /* ========================================= 8. Store Grid – Premium Product Cards ========================================= */ /* ── Card shell ── */ .sg-card { border: none !important; border-radius: 14px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important; transition: transform 0.32s ease, box-shadow 0.32s ease !important; overflow: hidden; background: #fff !important; } .sg-card:hover { transform: translateY(-3px) !important; border-color: transparent !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11) !important; } /* ── Image wrapper – strict 4:5 aspect ratio ── */ .sg-img-wrap { aspect-ratio: 4 / 5; background: #fcfcfc; overflow: hidden; display: flex; align-items: center; justify-content: center; } .sg-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fcfcfc; } /* ── Card body ── */ .sg-card-body { padding: 1rem 1.125rem 1.25rem !important; } /* ── Product title – refined weight, 2-line clamp ── */ .sg-title { font-weight: 500; font-size: 0.875rem; line-height: 1.45; color: #1a1a1a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.5rem; } /* ── Price – clean, primary color ── */ .sg-price { font-size: 1rem; font-weight: 600; color: var(--primary-color, #3b82f6); letter-spacing: 0.2px; } /* ── Best-seller badge – dark luxury ── */ .sg-badge-bestseller { background: #1a1a1a !important; color: #c9a84c !important; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.6px; padding: 4px 10px; border-radius: 20px; text-transform: uppercase; } /* ========================================= 9. Accessibility Actions (WCAG) Classes are toggled on by main.js ========================================= */ html.access-grayscale { filter: grayscale(100%) !important; } html.access-high-contrast { filter: contrast(125%) !important; } html.access-high-contrast body { background-color: #000 !important; color: #fff !important; } html.access-high-contrast *:not(.access-widget-btn):not(.access-menu *):not(.access-menu) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; } html.access-large-font { font-size: 115% !important; } html.access-readable-font body, html.access-readable-font * { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.5px !important; } html.access-highlight-links a { text-decoration: underline !important; background-color: #ffeb3b !important; color: #000 !important; font-weight: bold !important; } html.access-stop-animations *, html.access-stop-animations *::before, html.access-stop-animations *::after { animation: none !important; transition: none !important; }