/* ========================================================================= ACCESSIBILITY CSS – Shoval Haifa Font increase / decrease support for the "Ally" (pojo-accessibility) plugin, legacy toolbar mode. HOW THE PLUGIN WORKS -------------------- app.min.js keeps a counter that starts at 120 (= normal size) and moves in steps of 10 between 120 and 200. Every time the value is above 120 it puts a class on the : pojo-a11y-resize-font-130 ... pojo-a11y-resize-font-200 "A+" adds 10, "A-" removes 10, and at 120 no class is left on the body, which is how the decrease button returns the site to its normal size. There is no class below 130, so decreasing never goes under 100%. WHY THIS FILE IS NEEDED ----------------------- The plugin stylesheet applies "font-size: 130%..200% !important" to a fixed list of tags (p, li, span, label, input, select, h1-h6 ...). On this theme that causes three problems: 1. Percentages are relative to the PARENT, so a span inside a li inside a p is multiplied three times (200% x 200% x 200% = 8x). 2. Tags the plugin does not list - a, button, td, th, .btn, .nav-link - never grow, so the menu, the search buttons and the price table stay small while the rest of the page explodes. 3. Every p/li/span is forced to the same size, so the theme's typographic hierarchy (18px body text vs 44px headings) is flattened. WHAT THIS FILE DOES ------------------- Each body class is translated into one variable, --a11y-font-scale, and the theme's real font sizes are re-declared multiplied by that variable. Every element therefore keeps its designed proportion and grows exactly once, and px line-heights are re-declared as ratios so they grow with the text. Rules are prefixed with "html body[class*=...]" so they always outrank the plugin's own !important declarations, whatever order the stylesheets load. THE TOOLBAR ----------- Section 0 sizes the menu item labels and section 7 holds the panel still. The plugin ships a fixed 180px box parked at left:-180px with the round toggle sitting at left:180px, and those three numbers stay exactly as they are at every step of the setting and on every screen: A+ and A- move the text inside the panel, never the panel. The longer labels wrap onto a second line at the top of the range, which is what section 7 makes room for. Structure: 0. Toolbar menu item labels 1. Scale steps 2. Neutralise the plugin's compounding rules 3. Base + headings 4. Theme font sizes x scale (mirrors assets/css/style.css) 5. Responsive font sizes x scale (mirrors assets/css/responsive.css) 6. Layout protection at large sizes 7. Toolbar panel - fixed width, text only grows ========================================================================= */ /* ========================================================================= 0. TOOLBAR MENU ITEM LABELS The plugin sizes the item links at 80% (12.8px), but the theme's global "span" rule in style.css (".fils-for-downlaod a, span { font-size: 16px }") reaches inside the widget and pushes every label back up to 16px, so the menu reads as large as the body text around it. The label span is pinned to 13px so the list sits clearly below the 18px "כלי נגישות" title. Only .pojo-a11y-toolbar-text is touched. The icon span keeps its 16px, because the icons are

, so section 3's heading size lands on the bar itself - 32px x 1.8 = 57.6px on a phone. nothing in the bar is a heading visually (the question is a
inside it), and that size was driving the bar's own line box and leading. pinned back to the row's own text size. / html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-header { font-size: calc(20px * var(--a11y-ui-scale)) !important; line-height: 1.3 !important; } html body[class][class="pojo-a11y-resize-font-"] .accordian-mortgage .accordion-header { font-size: calc(16px var(--a11y-ui-scale)) !important; line-height: 1.3 !important; } /* --- price list --- / html body[class][class="pojo-a11y-resize-font-"] .price-list h2 { font-size: calc(72px * var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list p { font-size: calc(25px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list input[type='text'] { font-size: calc(14px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list ::placeholder { font-size: calc(14px var(--a11y-font-scale)) !important; } /* --- apartments table --- / html body[class][class="pojo-a11y-resize-font-"] .table-head-title :is(p, span) { font-size: calc(16px * var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .nav-tabs .nav-link { font-size: calc(19px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] table, html body[class][class="pojo-a11y-resize-font-"] table thead > tr > th, html body[class][class="pojo-a11y-resize-font-"] table td { font-size: calc(16px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .sale-property-strip p { font-size: calc(19px var(--a11y-font-scale)) !important; } /* --- downloads, footer, menu --- / / the download chips sit in a fixed 160px li, so a file name on the full ramp broke into three lines inside it / html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod a { font-size: calc(16px * var(--a11y-ui-scale)) !important; line-height: 1.35 !important; } /* the contact line carries an email address, which is one unbreakable word. on the full ramp it grew wider than a phone screen and hung off the edge - the gentler ramp brings it back inside, and section 6 lets it break if the address is longer still / html body[class][class="pojo-a11y-resize-font-"] .footer-social a { font-size: calc(17px * var(--a11y-ui-scale)) !important; line-height: 1.4 !important; } html body[class][class="pojo-a11y-resize-font-"] .footer-social h2 { font-size: calc(24px var(--a11y-ui-scale)) !important; line-height: 1.3 !important; } html body[class][class="pojo-a11y-resize-font-"] .main-menu li a { font-size: calc(16.52px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .floor-dropdown-menu li a { font-size: calc(18px var(--a11y-font-scale)) !important; line-height: 1.3 !important; } /* ========================================================================= 5. RESPONSIVE FONT SIZES x SCALE Mirrors assets/css/responsive.css. Without these blocks the desktop rules above (which carry !important) would also apply on phones and break the mobile typography while the toolbar is in use. ========================================================================= / / tablet: the gallery column and the project heading are already reduced here, so the desktop sizes above would over-inflate them / @media (min-width: 768px) and (max-width: 1200px) { html body[class][class="pojo-a11y-resize-font-"] .project-content h2 { font-size: calc(34px * var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .gallery-content h2 { font-size: calc(24px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .gallery-description p { font-size: calc(16px var(--a11y-font-scale)) !important; } } @media (max-width: 767px) { html body[class][class="pojo-a11y-resize-font-"] p { font-size: calc(16px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] h2 { font-size: calc(32px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .sub-heading { font-size: calc(20px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .table-head-title :is(p, span) { font-size: calc(16px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .thumbnail-gallery-content h2 { font-size: calc(50px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .thumbnail-gallery-content h3 { font-size: calc(40px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .thumbnail-gallery-content p { font-size: calc(15px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-button p { font-size: calc(16px var(--a11y-ui-scale)) !important; } /* the theme already shrinks the tile label to 12px here / html body[class][class="pojo-a11y-resize-font-"] .gallery-tag { font-size: calc(12px * var(--a11y-ui-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod span { font-size: calc(14px var(--a11y-ui-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .developer-title { font-size: calc(32px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .developer-subtitle { font-size: calc(22px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .developer-description, html body[class][class="pojo-a11y-resize-font-"] .project-description { font-size: calc(16px * var(--a11y-font-scale)) !important; line-height: 1.75 !important; } html body[class][class="pojo-a11y-resize-font-"] .project-content h2 { font-size: calc(32px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .gallery-content h2 { font-size: calc(24px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .map-chart-wrap h2 { font-size: calc(42px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .developer-description p, html body[class][class="pojo-a11y-resize-font-"] .project-description p, html body[class][class="pojo-a11y-resize-font-"] .gallery-description p { font-size: calc(16px var(--a11y-font-scale)) !important; line-height: 1.6 !important; } /* the FAQ answer follows its own header, on the gentler ramp / html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-body p { font-size: calc(16px * var(--a11y-ui-scale)) !important; line-height: 1.6 !important; } html body[class][class="pojo-a11y-resize-font-"] .spread-payment p { font-size: calc(16px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .map-chart-wrap a { font-size: calc(20px var(--a11y-ui-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list h2 { font-size: calc(50px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list p { font-size: calc(20px var(--a11y-font-scale)) !important; } } @media (max-width: 400px) { html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-button p { font-size: calc(16px var(--a11y-ui-scale)) !important; line-height: 1.4 !important; } } @media (max-width: 365px) { html body[class][class="pojo-a11y-resize-font-"] .price-form label { font-size: calc(14px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .thumbnail-gallery-content h2 { font-size: calc(46px var(--a11y-font-scale)) !important; } html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-button p { font-size: calc(16px var(--a11y-ui-scale)) !important; } } /* ========================================================================= 6. LAYOUT PROTECTION AT LARGE SIZES Only active while a resize class is on the body. Fixed heights, fixed widths and clipping containers are released so enlarged text stays readable instead of being cut off. ========================================================================= / / The two filter bars line their selects and their search button up on one shared height (--filter-control-h in style.css). The selects grow with the text because their padding sits around a scaled font, while the button only ever had the fixed 43px to go on, so it ended up shorter than the fields it sits next to. Scaling the variable keeps the whole row on one height. / html body[class][class="pojo-a11y-resize-font-"] { --filter-control-h: calc(43px * var(--a11y-font-scale)); } /* boxes that clip or lock their height around text. keep overflow hidden on .project-block - it is what clips the image to the rounded corner; releasing min-height alone is enough to stop text clipping / html body[class][class="pojo-a11y-resize-font-"] .project-block, html body[class][class="pojo-a11y-resize-font-"] .project-block-wrap { min-height: auto !important; } html body[class][class="pojo-a11y-resize-font-"] .project-block .project-image { min-height: auto !important; } html body[class][class="pojo-a11y-resize-font-"] .thumbnail-gallery-content { min-height: auto !important; height: auto !important; padding-bottom: 40px !important; background-size: 100% 100% !important; } html body[class][class="pojo-a11y-resize-font-"] .thumb { min-height: auto !important; } html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-header .accordion-button { max-height: none !important; height: auto !important; / background-size: cover !important; / } html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod span, html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod li { overflow: visible !important; } / the li is a fixed 160px, so a long file name still has to break mid-word rather than push out of the row. break-word, not anywhere: "anywhere" also shrinks the element's min-content width, which collapsed the chip to its narrowest possible column and stacked a short name like "dummy-pdf" four letters to a line. break-word only kicks in on text that genuinely does not fit. / html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod a { overflow-wrap: break-word !important; } /* the tile label is nowrap + overflow hidden + ellipsis, which chopped the longer project names off mid-word as soon as the text grew. let it use the full width of its tile and run onto a second line instead of being cut. / html body[class][class="pojo-a11y-resize-font-"] .gallery-tag { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: 100% !important; } /* the FAQ answer contains free text from the CMS, which can hold a URL or a long unbroken string / html body[class][class="pojo-a11y-resize-font-"] .faqs .accordion-body p, html body[class][class="pojo-a11y-resize-font-"] .faqs-bottom p { overflow-wrap: break-word !important; } / the contact line is an email address - one word the browser will not break on its own, so at any size wide enough it hangs off the side of the screen. min-width:0 stops the flex parents from sizing themselves to it. / html body[class][class="pojo-a11y-resize-font-"] .footer-social a { overflow-wrap: anywhere !important; word-break: break-word !important; } html body[class][class="pojo-a11y-resize-font-"] .footer-wrap, html body[class][class="pojo-a11y-resize-font-"] .footer-group, html body[class][class="pojo-a11y-resize-font-"] .footer-group > div, html body[class][class="pojo-a11y-resize-font-"] .footer-social, html body[class][class="pojo-a11y-resize-font-"] .footer-social li { min-width: 0 !important; max-width: 100% !important; } / the icon and its label stay on one line. this rule used to say "flex-wrap: wrap; justify-content: center", which meant that once the email address outgrew the row the ICON broke onto a line of its own and centred above the text - the round envelope floating over the address. the pair is kept together instead and the address itself is what wraps, which it can do because of the overflow-wrap rule above. / html body[class][class="pojo-a11y-resize-font-"] .footer-social li a { display: inline-flex !important; align-items: flex-start !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 8px !important; text-align: start !important; } html body[class][class="pojo-a11y-resize-font-"] .footer-social li a img { flex: 0 0 auto !important; } / the two footer columns are desktop percentages (47% / 33%) set to nowrap. as the contact text grows it fills its column and the "צור עמנו קשר" heading ends up hard against the grofit logo sitting beside it - the two read as one run-together word. let the columns wrap and size to content, with a gap so the pieces separate instead of colliding. / html body[class][class="pojo-a11y-resize-font-"] .footer-sec-1, html body[class][class="pojo-a11y-resize-font-"] .footer-sec-2 { flex-wrap: wrap !important; gap: 16px 28px !important; width: auto !important; max-width: 100% !important; align-items: center !important; } / the map / site-plan pills. the 56px of padding on each side is dead space the label cannot use, so it is pulled in as the text grows. that plus the gentler font ramp puts the longest label back on one line at every step. it is left wrapping rather than forced to nowrap, so a longer label entered in the CMS later breaks onto a second line instead of off the screen. / html body[class][class="pojo-a11y-resize-font-"] .map-chart-wrap a { padding-right: clamp(20px, calc(56px / var(--a11y-font-scale)), 56px) !important; padding-left: clamp(20px, calc(56px / var(--a11y-font-scale)), 56px) !important; max-width: 100% !important; } /* The gallery arrows are 30x30 boxes with a "‹" / "›" glyph drawn as text, so they were being scaled along with the body copy: 16px -> 28.8px inside a box that never changed, which pushed the chevron out of its own button and over the thumbnails beside it. They carry no reading text - they are icons - so they are pinned and simply opt out of the setting entirely. / html body[class][class="pojo-a11y-resize-font-"] :is(.gallery-prev, .gallery-next) { font-size: 16px !important; line-height: 1 !important; width: 30px !important; height: 30px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* The search row is a plain block with inline-block controls held apart by per-element margins, so once the text grew the pieces wrapped wherever they happened to land - the "חיפוש" button dropping onto its own line, out of line with the fields and the checkbox. As a flex row it wraps in whole items, keeps everything on one baseline, and the gap replaces the ad-hoc margins so the spacing stays even after a wrap. Desktop only. On a phone the controls are full width and already stack one per line on their own; turning the row into a flex container there changed a layout that was not broken, so the phone keeps the theme's own behaviour. / @media (min-width: 768px) { html body[class][class="pojo-a11y-resize-font-"] .searchbox { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 12px 14px !important; } html body[class][class="pojo-a11y-resize-font-"] .searchbox > { margin-left: 0 !important; margin-right: 0 !important; } } /* rows of controls that must be allowed to wrap / html body[class][class="pojo-a11y-resize-font-"] .top-filter-wrap, html body[class][class="pojo-a11y-resize-font-"] .searchbox, html body[class][class="pojo-a11y-resize-font-"] .main-menu-ul, html body[class][class="pojo-a11y-resize-font-"] .table-setting-ads, html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod, html body[class][class="pojo-a11y-resize-font-"] .footer-social ul { flex-wrap: wrap !important; } html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod li { max-width: 100% !important; } html body[class][class="pojo-a11y-resize-font-"] .floor-dropdown-menu li a { white-space: normal !important; } html body[class][class="pojo-a11y-resize-font-"] .floor-dropdown-menu { min-width: 0 !important; max-width: 90vw !important; } /* form controls with a fixed pixel width / html body[class][class="pojo-a11y-resize-font-"] .price-form select { width: auto !important; min-width: 139px !important; max-width: 100% !important; } html body[class][class="pojo-a11y-resize-font-"] .price-list input[type='text'] { width: auto !important; min-width: 180px !important; max-width: 100% !important; } html body[class][class="pojo-a11y-resize-font-"] .table-head-title { width: auto !important; min-width: calc(100% / 4 - 4px) !important; } /* the apartments table gets wider than its container, let it scroll / html body[class][class="pojo-a11y-resize-font-"] .main-table, html body[class][class="pojo-a11y-resize-font-"] #myTabContent, html body[class][class="pojo-a11y-resize-font-"] #myTabContent2 { overflow-x: auto !important; } /* keep the layout of the phone version intact / @media (max-width: 767px) { html body[class][class="pojo-a11y-resize-font-"] .price-form select, html body[class][class="pojo-a11y-resize-font-"] .price-list input[type='text'] { width: 48% !important; min-width: 0 !important; } html body[class][class="pojo-a11y-resize-font-"] .table-head-title { width: calc(100% / 3 - 3px) !important; min-width: 0 !important; } /* the download chips are three-to-a-row at 31% here, which is ~104px on a 360px phone - not enough for a file name once the text grows, so it was breaking into four stacked fragments. two to a row instead. / html body[class][class="pojo-a11y-resize-font-"] .fils-for-downlaod li { width: 48% !important; } } /* ========================================================================= 7. TOOLBAR PANEL - FIXED WIDTH, TEXT ONLY GROWS The plugin lays the widget out as a fixed 180px box: #pojo-a11y-toolbar width: 180px; left: -180px .pojo-a11y-toolbar-open left: 0 .pojo-a11y-toolbar-toggle left: 180px (flush to the panel edge) Those three numbers are left exactly as the plugin ships them, at every step of the setting and on every screen. Only the text inside the panel changes size - A+ and A- move the labels, never the box. This section used to scale the width by the same factor as the text, so the longer labels ("ניגודיות גבוהה", "קו תחתון בקישורים") could stay on one line. That is what made the panel take over a phone screen: 180 x 1.8 = 324px on a 360px device, which is the whole viewport. The panel is a control, not content, so it now keeps its footprint and the labels wrap instead - the three long ones run onto a second line at the top of the range, which costs height inside a panel that has room for it rather than width the screen does not have. Two consequences of a fixed width have to be handled, and are, below: - the labels must be allowed to wrap and the rows to grow with them, otherwise the enlarged text is simply clipped by the 180px edge; - nine rows at two lines each are taller than a phone screen, so the panel scrolls internally instead of running items off the bottom where they cannot be reached. The round toggle keeps its own size and its 180px offset - it carries no text, and it is the control used to get back out of the setting. ========================================================================= / / the panel and both of its offsets stay on the plugin's own 180px, whatever the font setting is. declared here so that any future rule that tries to size the panel from the scale is overridden rather than inherited. / html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar, html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay { width: 180px !important; max-width: 180px !important; } / --- left hand position (the setting this site uses) --- / html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left { left: -180px !important; } html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left.pojo-a11y-toolbar-open { left: 0 !important; } html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-left .pojo-a11y-toolbar-toggle { left: 180px !important; } /* --- right hand position, in case the plugin setting is changed --- / html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right { right: -180px !important; } html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right.pojo-a11y-toolbar-open { right: 0 !important; } html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar.pojo-a11y-toolbar-right .pojo-a11y-toolbar-toggle { right: 180px !important; } /* the rows are laid out for one 13px line. with the width pinned, the longer labels need a second line, so the row has to grow instead of clipping them and the label has to be allowed to break. / html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item, html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-item a { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-text, html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-title { white-space: normal !important; overflow-wrap: break-word !important; } / nine rows on two lines outgrow a phone screen. the panel is fixed-position, so anything past the bottom edge would be unreachable - let it scroll. -webkit-overflow-scrolling keeps that momentum-scrolled on ios. / html body[class][class="pojo-a11y-resize-font-"] #pojo-a11y-toolbar .pojo-a11y-toolbar-overlay { max-height: 100vh !important; max-height: 100dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }