/* Eleven Home website ยท tablet + touch layer (2026-10-16) Link it LAST in on every page: (folder pages like /gadi/ and /limor/ use ../assets/tablet.css) Only touch screens change, and the layout stays the same: it's sizes, not a redesign. 1. Anything you tap is at least 44 px 2. Small tracked labels readable at arm's length on a tablet 3. Forms don't zoom and their choices are easy to hit 4. Elvy's window sized for a tablet */ /* ---------- 1 + 3. touch screens (phones and tablets) ---------- */ @media (pointer: coarse) { html nav .cta, html nav .menu-btn { min-height: 44px; display: inline-flex; align-items: center; } html footer li > a, html footer .bot a, html footer .bot span > a { display: inline-block; padding: 8px 0; } html .see a, html .rv a.link, html .chk a.link, html .acts a.link, html .trust a.hire, html .geo-acts a, html .ar-cta a, html .pal-b a.pal-pick, html .fr-weeks button, html .ar-tabs button, html article.rgc button.rgo, html article.role a.btn { min-height: 44px; display: inline-flex; align-items: center; } /* form choices: bigger boxes, the whole row is the target */ html label.ck, html label.opt, html label.agree, html fieldset label { min-height: 44px; display: flex; align-items: center; gap: 12px; } html label.ck input, html label.opt input, html label.agree input, html input[type=checkbox], html input[type=radio] { width: 22px !important; height: 22px !important; flex: none; } /* 16 px in fields stops iOS zooming the page on tap */ html input, html select, html textarea { font-size: 16px !important; } html input:not([type=checkbox]):not([type=radio]), html select { min-height: 48px; } /* Elvy */ html .ev-inp button, html .ev-inp .mic, html #ev-pop .x, html .bar .x, html button.x, html #ev-pop-skip, html .ev-vt, html .ic button, html .ft-sw button { min-width: 44px; min-height: 44px; } html #ev-pop-skip { padding: 10px 14px; } /* service-areas city list */ html li > button[data-c] { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } } /* ---------- 2 + 4. tablets (portrait and landscape) ---------- */ @media (pointer: coarse) and (min-width: 701px) and (max-width: 1366px) { html .eyebrow { font-size: 12px !important; } html footer h5, html .sec h4, html div > h5 { font-size: 11.5px !important; } html nav .cta { font-size: 11.5px !important; } html nav .menu-btn em { font-size: 12px !important; } html footer .bot span, html footer .bot a, html .trust span { font-size: 11.5px !important; } html label > span, html fieldset > legend, html .chk small { font-size: 11.5px !important; } html a.pc > span, html .rv a, html .see a { font-size: 12px !important; } html .ev-pw, html .ev-vt b, html .qs em, html .pnote, html .hd .live { font-size: 11px !important; } html .fr-weeks button, html .ar-tabs button, html article.rgc button.rgo, html article.role a.btn, html .rgl h3, html figcaption b { font-size: 12px !important; } /* body copy a touch larger and easier to follow on a tablet held at arm's length */ html p { line-height: 1.65; } /* Elvy's window: roomy on a tablet instead of a phone-sized card in the middle */ html #ev-pop { width: min(620px, 88vw); } } /* ---------- 5. Elvy's chat panel and the menu on tablets ---------- */ @media (pointer: coarse) and (min-width: 701px) and (max-width: 1366px) { html #ev-panel { width: min(480px, calc(100vw - 40px)) !important; } html #ev-panel .ft .ft-sw { flex-wrap: wrap; row-gap: 8px; } html #ev-panel .ft .ev-pw { display: block; clear: both; } } /* landscape tablet: the menu fits on one screen in two columns instead of running off the bottom */ @media (pointer: coarse) and (min-width: 900px) and (max-height: 900px) { html #menu { align-items: flex-start; overflow-y: auto; padding-top: 96px; } html #menu .menu-in { max-width: 920px; } html #menu ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; } html #menu li a { font-size: clamp(22px, 3.4vh, 30px); padding: 12px 0; } } /* ---------- 6. v3.9.1 footer: contrast + "Powered by AIasOS" at the right end ---------- */ footer .bot { color: #8E8A7E; } /* was #7B776C (3.7:1); now 4.8:1 on the footer background, WCAG AA */ footer .bot .pw { margin-left: auto; text-align: right; } @media (max-width: 560px) { footer .bot .pw { margin-left: 0; text-align: left; } } /* ---------- 7. v3.9.1 accessibility (keyboard + screen reader), no visual change for mouse users ---------- */ .sk-link { position: absolute; left: 12px; top: -120px; z-index: 300; background: #1E1F1C; color: #F4EFE7; padding: 12px 18px; font: 500 13px/1.2 Jost, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; border: 1px solid #C9A45A; } .sk-link:focus { top: 12px; } main:focus { outline: none; } /* fields that hide the browser ring get a clear one for keyboard users */ html .form input:focus-visible, html .form textarea:focus-visible, html .form select:focus-visible, html .chk-row input:focus-visible { outline: 2px solid #C9A45A; outline-offset: 2px; } html .lamap .pt:focus-visible .dot { stroke: #1E1F1C; stroke-width: 3; } html .lamap .pt:focus-visible .ring { opacity: 1; } /* links inside running text must not rely on colour alone (WCAG 1.4.1): underline them */ html .body p a, html .body li a { text-decoration: underline; text-underline-offset: 3px; } /* v3.9.1 accessibility (Gadi, 2026-10-20): gold TEXT (headings and small labels) on light backgrounds is #7F6020 for AA contrast. The brand gold stays on buttons, lines, the logo and decoration, and on the dark sections. */ section.s:not(.ink) > div.wrap > div.eyebrow, section:not(.ink) div.wrap > h1.display > em.k, section.s:not(.ink) > div.trust > a.hire, div.wrap.grid > div.sticky > div.eyebrow, div.sticky > h2.display > em.k, ol > li > span.n, div.hd > div > small, div.report > div.sec > h4, div.report > div.sig > em, section.partners2 > div.wrap > div.eyebrow, div.wrap > div.box > div.eyebrow, div.box > h2.display > em.k, ol.steps > li > span.n, section:not(.ink) div.wrap > h2.display > em.k, section.ig > div.wrap > div.eyebrow, section.ig > div.wrap > div.handle, div.wrap > div.hb-l > div.eyebrow, div.hb-l > h2 > em.k, div.box > h1.display > em.k, section:not(.ink) div.wrap.split > div > div.eyebrow, section:not(.ink) ul.steps > li > span.n, div.roles > article.role > div.n, figure > figcaption > b, div.wrap.see-grid > a.see-card > div.eyebrow, a.jcard > div > div.eyebrow, a.jcard > div > span, section.s:not(.ink) > div.wrap.narrow > div.eyebrow, section.s:not(.ink) > div.wrap.narrow > h2, div.wrap.narrow > div.qq > span.n, details.ln > summary > span.no, details.ln.al > summary > span.no, aside.prop-side > div.ps > h3, div.ar-lists > div.rgl > h3, section.s.ar-regions > div.wrap > div.eyebrow, div.rgs > article.rgc > div.eyebrow, section.s.ar-faq > div.wrap > div.eyebrow{color:#7F6020!important} /* v3.9.1 accessibility (Gadi, 2026-10-20): the light-grey small labels (the "stone" grey, 2.6 to 2.9:1 on cream) are the darker site grey #6F6C64 (4.6:1 or better). Elvy's widget included. Dark sections keep the light grey; "Online" green is darker too. */ :root{--stone:#6F6C64} html .ev{--ev-stone:#6F6C64} .ink{--stone:#BDB8A8} .ev .invite .sw{color:#6F6C64!important} .write>span>small{color:#6F6C64!important} .ev .hd .who b i{color:#3A6B37!important} .st>div>small,.report .sig,#cc .inp>div,#cc .skip,#cc .pw,#vt>div>small,.prop-hd>div>small,.prop-ft>div>small,.chk-grid .chk>small,.partners2 .pnote{color:#6F6C64!important} form .geo-note{color:#BDB8A8!important} /* ---------- 5. phones: keep the nav button hidden (2026-11-13) ---------- The touch rule at the top gives nav .cta display:inline-flex, which beat the page's own "hide it under 700px" rule, so "Talk to Elvy" sat on top of the name on phones. The same link is inside the menu and in the hero. */ @media (pointer: coarse) and (max-width: 700px) { html nav .cta { display: none; } }