/* =========================================================== נגישות — תפריט התאמות + מצבי תצוגה בהתאם לתקנות שוויון זכויות לאנשים עם מוגבלות (התאמות נגישות לשירות), תשע"ג-2013, ולת"י 5568 (WCAG 2.0 רמה AA). =========================================================== */ /* ---- דילוג לתוכן ---- */ .skip-link { position: absolute; right: 16px; top: -100px; z-index: 3000; background: #14181a; color: #fff; font-family: var(--font-display); font-weight: 600; padding: 13px 22px; border-radius: 0 0 10px 10px; transition: top 0.2s ease; } .skip-link:focus { top: 0; } /* ---- מיקוד מקלדת גלוי בכל האתר ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #0a58ca; outline-offset: 3px; border-radius: 4px; } /* ---- כפתור פתיחת התפריט ---- */ .a11y-toggle { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; border: none; background: #0a58ca; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 22px rgba(10, 88, 202, 0.42); z-index: 1500; transition: transform 0.2s ease, background 0.2s ease; } .a11y-toggle:hover { background: #0847a6; transform: scale(1.07); } .a11y-toggle svg { width: 30px; height: 30px; } /* ---- חלונית ההתאמות ---- */ .a11y-panel { position: fixed; bottom: 92px; right: 24px; width: 310px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; color: #14181a; border: 1px solid #d9d2cb; border-radius: 16px; box-shadow: 0 18px 48px rgba(20, 24, 26, 0.24); padding: 18px; z-index: 1600; display: none; } .a11y-panel.open { display: block; } .a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #ece5de; } .a11y-head h2 { font-size: 1.15rem; margin: 0; font-family: var(--font-display); } .a11y-close { width: 34px; height: 34px; border-radius: 50%; border: none; background: #f1ece7; color: #14181a; font-size: 1.4rem; line-height: 1; cursor: pointer; } .a11y-close:hover { background: #e2dad2; } .a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .a11y-opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 76px; padding: 10px 6px; border: 1px solid #e2dad2; border-radius: 11px; background: #fff; color: #14181a; font-family: var(--font-body); font-size: 0.83rem; font-weight: 600; line-height: 1.25; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .a11y-opt svg { width: 22px; height: 22px; } .a11y-opt:hover { border-color: #0a58ca; background: #f5f9ff; } .a11y-opt[aria-pressed="true"] { background: #0a58ca; border-color: #0a58ca; color: #fff; } .a11y-opt-wide { grid-column: span 2; flex-direction: row; min-height: 46px; } .a11y-reset { grid-column: span 2; margin-top: 4px; padding: 11px; border: 1px solid #d9d2cb; border-radius: 11px; background: #f7f3ef; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; cursor: pointer; } .a11y-reset:hover { background: #ece5de; } .a11y-statement { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ece5de; font-size: 0.86rem; text-align: center; color: #0a58ca; font-weight: 600; } .a11y-statement:hover { text-decoration: underline; } /* =========================================================== מצבי תצוגה — מוחלים על =========================================================== */ /* ---- הגדלת טקסט (כל הגדלים באתר ב-rem) ---- */ html.a11y-font-1 { font-size: 112.5%; } html.a11y-font-2 { font-size: 125%; } html.a11y-font-3 { font-size: 140%; } /* ---- מרווח שורות מוגדל ---- */ html.a11y-spacing body { line-height: 2; letter-spacing: 0.05em; } html.a11y-spacing p, html.a11y-spacing li, html.a11y-spacing h1, html.a11y-spacing h2, html.a11y-spacing h3 { line-height: 1.9; } /* ---- פונט קריא ---- */ html.a11y-readable body, html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3, html.a11y-readable .btn, html.a11y-readable input, html.a11y-readable select { font-family: Arial, 'Segoe UI', Tahoma, sans-serif !important; font-weight: 500; } /* ---- הדגשת קישורים ---- */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed #0a58ca; outline-offset: 2px; } /* ---- עצירת אנימציות ---- */ html.a11y-no-anim *, html.a11y-no-anim *::before, html.a11y-no-anim *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-no-anim .reveal { opacity: 1 !important; transform: none !important; } /* ---- סמן גדול ---- */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L17 30 L23 43 L30 40 L24 27 L36 27 Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important; } /* ---- גווני אפור / ניגודיות הפוכה ---- הפילטר מוחל על אזורי התוכן בלבד ולא על : פילטר על אב יוצר containing block ושובר position:fixed של תפריט הנגישות. */ html.a11y-grayscale .site-header, html.a11y-grayscale main, html.a11y-grayscale .site-footer, html.a11y-grayscale .whatsapp-float, html.a11y-grayscale .lightbox { filter: grayscale(100%); } html.a11y-invert .site-header, html.a11y-invert main, html.a11y-invert .site-footer, html.a11y-invert .whatsapp-float, html.a11y-invert .lightbox { filter: invert(100%) hue-rotate(180deg); } html.a11y-invert body { background: #14181a; } /* התמונות עצמן חוזרות לצבען המקורי כדי שיישארו קריאות */ html.a11y-invert img { filter: invert(100%) hue-rotate(180deg); } /* ---- ניגודיות גבוהה ---- */ html.a11y-contrast body, html.a11y-contrast .hero, html.a11y-contrast .services, html.a11y-contrast .portfolio, html.a11y-contrast .about, html.a11y-contrast .contact, html.a11y-contrast .cta-band, html.a11y-contrast .site-header, html.a11y-contrast .site-footer { background: #000 !important; background-image: none !important; color: #fff !important; } html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast p, html.a11y-contrast span, html.a11y-contrast li, html.a11y-contrast label, html.a11y-contrast strong { color: #fff !important; } html.a11y-contrast .eyebrow, html.a11y-contrast .stat-num, html.a11y-contrast .accent { color: #ffd400 !important; } html.a11y-contrast a { color: #ffd400 !important; text-decoration: underline !important; } html.a11y-contrast .btn, html.a11y-contrast .card, html.a11y-contrast .stat, html.a11y-contrast .contact-form, html.a11y-contrast .contact-list li, html.a11y-contrast .card-cta { background: #000 !important; background-image: none !important; border: 2px solid #ffd400 !important; color: #ffd400 !important; } html.a11y-contrast .btn *, html.a11y-contrast .card-cta * { color: #ffd400 !important; } html.a11y-contrast .card-icon, html.a11y-contrast .ci { background: #000 !important; color: #ffd400 !important; } html.a11y-contrast input, html.a11y-contrast select { background: #000 !important; color: #fff !important; border: 2px solid #ffd400 !important; } html.a11y-contrast .shot::after { background: none !important; } html.a11y-contrast .shot-cap { background: #000; color: #ffd400 !important; padding: 4px 10px; border-radius: 6px; } /* הלוגו שחור-על-לבן ונבלע ברקע השחור — מחליפים לגרסה הבהירה */ html.a11y-contrast .logo img, html.a11y-contrast .hero-logo { content: url('../images/logo-light.png'); } /* חלונית הנגישות עצמה נשארת קריאה בכל מצב */ html.a11y-contrast .a11y-panel { background: #000 !important; border-color: #ffd400 !important; } html.a11y-contrast .a11y-panel h2 { color: #fff !important; } html.a11y-contrast .a11y-opt, html.a11y-contrast .a11y-reset { background: #000 !important; color: #fff !important; border-color: #ffd400 !important; } html.a11y-contrast .a11y-opt[aria-pressed="true"] { background: #ffd400 !important; color: #000 !important; } /* ---- מובייל ---- */ @media (max-width: 620px) { .a11y-toggle { width: 52px; height: 52px; bottom: 18px; right: 18px; } .a11y-toggle svg { width: 27px; height: 27px; } .a11y-panel { bottom: 80px; right: 16px; } } /* ---- הדפסה ---- */ @media print { .a11y-toggle, .a11y-panel, .whatsapp-float, .skip-link { display: none !important; } }