/* ============================================================ SMALL SCREENS — phone and tablet ============================================================ This block loads last on purpose. Everything in it corrects something that was measured on a real device width, not something that looked cramped in a narrow browser window — see tests/mobile_test.js, which walks twelve routes at four device sizes and reports the element, not the page. Three faults were found, and each is fixed here rather than at its original rule, so the desktop layout above stays exactly as it was written: 1. A strip of content that was invisible on a phone. `.deep-block--facts` holds the three numbers a dentist is looking for — delivery, rush, revisions — and it is `overflow:hidden`, so when the three columns did not fit they were not pushed off the page where you could scroll to them; the third one was simply cut off and gone. It did not show up as a sideways scroll for exactly that reason. The rule that pinned it to three columns lived on `.svcpair .deep-block--facts` — two classes — and the small-screen rule that was supposed to collapse it had one, so it never applied. Media queries add no specificity; the mobile rule lost every time. 2. Controls too small to hit. A fingertip needs about 44px. The language toggle was 32, the case-dock close 22, the "see a sample case" links 29, and the phone and email links in the footer 21. Where the control could simply grow it grew; where growing it would move the design (a text link with an underline under it, a close button in a corner) the hit area is expanded with an invisible ::after instead, which is what the browser actually tests against on tap. 3. Text under 13px. Latin descenders survive 11px on a phone; Arabic diacritics do not — and half of this site's readers are reading the Arabic. Nothing here is scaled by a ratio, because the ratio would also enlarge headings that are already fine; each offender is given the floor it needed. ============================================================ */ /* ---------- 1. the strip that was being cut off ---------- */ /* auto-fit rather than a breakpoint: the block sits in containers of four different widths across the site, so a fixed column count is a guess about the container, and the guess was wrong once already. This lets the strip answer for itself at any width, and it still shows three columns wherever three fit. Both selectors are listed so this matches the specificity of the `.svcpair` rule it has to beat. */ .deep-block--facts, .svcpair .deep-block--facts{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) } /* ---------- 2. things a finger has to hit ---------- */ @media (max-width:1024px){ /* grew outright — nothing else moves when these get taller. The Arabic button is one character wide, so it needs the width floor as much as the height one; without it, "ع" was a 38px target beside a 44px "EN". */ .lang button{padding:11px 15px;min-height:44px;min-width:44px} .header .logo{display:inline-flex;align-items:center;min-height:44px} /* hit area expanded instead. `.tlink` carries its underline as a border on the element itself, so making the element 44px tall would drop the line 15px below the words it belongs to. The ::after is invisible, adds no layout, and is what a tap is resolved against. */ .tlink{position:relative} .tlink::after{content:"";position:absolute;inset-block:-9px;inset-inline:-6px} /* the close button on the case dock: 22px of glyph in the corner of a card. Same treatment — the cross stays where it is and the tap area doubles. */ .casedock__x::after{content:"";position:absolute;inset:-12px} /* The phone number and the email address are the two things a dentist in Iraq actually taps on this site, and they were the smallest targets on it — a line of 13px text with no padding at all, 21px tall. They live in two places and each needs a different answer. In the utility bar they sit in a 38px strip: there is no room to grow inside it, so the strip itself goes to 46px on a touch screen and the links take the whole height. The expansion is 8px to each side, against a 22px gap, so no two neighbouring links can steal each other's taps. An earlier version of this fix set `a[href^="tel:"]` globally. That also matched the three big contact cards on the contact page — which are `display:grid` — turned them into inline-flex, and pushed 80px of card off the right edge of a phone. Hence the two scoped selectors. */ .utility .wrap{height:46px} .utility a{position:relative} .utility a::after{content:"";position:absolute;inset-block:-15px;inset-inline:-8px} /* in the burger menu there is room, so these simply grow */ .mnav-contact a{min-height:44px;display:flex;align-items:center} } /* ---------- 3. text that was too small to read on glass ---------- The ceiling is 820px, not 560: an iPad held in portrait is 768 wide, and the labels that were 11px on a phone were still 11px there. A tablet is further from the eye than a phone, not closer. */ @media (max-width:820px){ .eyebrow,.hero .eyebrow{font-size:13px} .hero3d__hud .h3tag,.hero3d__meta span{font-size:13px} .hero3d__cap{font-size:13.5px} .qcard__n{font-size:13px} .scanband__note{font-size:13.5px} .fmt__label{font-size:13px} .fmt__chip{font-size:13.5px} .fmt__chip--max{font-size:13.5px} .field-warn{font-size:13.5px} .fact > span{font-size:13px} .meshfile__i,.meshview__hint,.meshview__views button{font-size:13px} .extras-field__t{font-size:13px} .gopen__credit{font-size:13px} .gstep__n,.gcase__k{font-size:13px} .gsoft__c{font-size:13px} .ccard__label{font-size:13px} #draftBadge{font-size:13px} .rail__n,.pick__n,.pay-tag{font-size:13px} /* the rest of the micro-labels, enumerated rather than caught by a blanket rule on `span`, because a blanket rule would also enlarge the numbers inside headings that are already the right size. Each of these was found by walking sixteen routes at 375px and listing every leaf under 13px. */ .casedock__eyebrow{font-size:13px} .adm-brand span,.role-pick span{font-size:13px} .scanband__claims li{font-size:13px} .consent em{font-size:13px} .tile__label{font-size:13px} .subplan__k{font-size:13px} .quote-note__label{font-size:13px} .magnet__tag{font-size:13px} .botpanel__h span{font-size:13px} .scanband__tag span{font-size:13px} .side-note{font-size:13.5px} .demobar p b,.demobar p span{font-size:13px} .chip-status{font-size:13px} .cat__meta{font-size:13px} .offer__tag{font-size:13px} .spk__role,.person__role{font-size:13px} .draft-tag{font-size:13px} .dash-acct{font-size:13px} .trust__reply{font-size:13px} .chip{font-size:13px} /* `.num` is the Latin-digit span used inside Arabic sentences; when it is set smaller than the sentence around it the digits shrink out of the line they belong to, which on a phone reads as a rendering fault rather than a style. */ .num{font-size:inherit} /* the build marker is deliberately quiet, but quiet is not the same as unreadable — it is the one string a person is asked to read back when something is wrong with the site. */ .fver{font-size:13px} } /* ---------- 3a1. the contact cards at 320px ---------- A one-column grid whose single column came out 300px wide inside a 272px box. `1fr` is `minmax(auto, 1fr)`, and `auto` will not go below the item's min-content width — which here was 34px of padding on each side plus "Futureguide.om@gmail.com", twenty-four characters with no space in them for the browser to break at. The grid did exactly what it was told and the page went 4px wide. Both halves are given back: the padding shrinks on a small screen, where 34px of it was generous anyway, and the address is allowed to break mid-string. Breaking an e-mail address across two lines is not pretty; it is considerably better than a page that slides sideways under the thumb every time someone tries to scroll it. */ @media (max-width:560px){ .ccard{padding:24px 20px} .ccard__val,.ccard__note{overflow-wrap:anywhere} } /* ---------- 3a. line length on a tablet ---------- Between about 700 and 900px the two-column layouts have collapsed to one column but the page is still wide, so a paragraph that was 70 characters across on a laptop becomes 110 — past the point where the eye reliably finds the start of the next line and starts re-reading the one it just finished. It is not a bug anyone reports; it is why a page feels tiring. Only the standing-text blocks are capped. Headings, lists and the tables are not, because they are scanned rather than read line by line. */ @media (min-width:640px) and (max-width:900px){ .side-note,.cx__warn,.disclaimer,#hostNote,.lead,.legal-body p{ max-width:62ch } } /* ---------- 3b. the narrowest screen still in use ---------- 320px is an iPhone SE (1st generation) and an Android phone bought cheaply and never replaced. It is easy to leave out of a device list and it is still what some dentists are holding. The header is the only row on the site with a hard minimum: a logo that must stay legible, a language toggle whose two buttons are now 44px wide each because a finger needs that, and a burger. At 320px, minus 48px of wrap padding, there are 272px for all of it — and 88 of those go to the toggle the moment it becomes tappable. So the logo gives up the difference: of the three it is the only one that degrades gracefully rather than becoming unusable. Widening the tap targets and then letting the row push the whole page 27px sideways would have traded one fault for a worse one — a page that will not sit still under the thumb. */ @media (max-width:360px){ .header .wrap{padding-inline:14px;gap:10px} .logo img{width:118px;min-width:118px} .header-cta{gap:8px} .lang button{padding:11px 9px} .burger{padding:9px 8px} } /* ---------- 4. the things only an iPhone does ---------- These cannot be found by resizing a window, and they cannot be found in this container either: WebKit will not install here, so Safari cannot be run. What follows is written against documented WebKit behaviour rather than against an observed failure, and it is listed that way in the report. The gate is `pointer:coarse` — a finger, not a mouse — rather than a width, because an iPad Pro in landscape is 1024px wide and still an iPhone-family browser, while a 900px-wide window on a laptop is neither. */ @media (pointer:coarse){ /* Mobile Safari zooms the entire page when a form field whose computed font-size is under 16px receives focus, and it does not zoom back out afterwards. The reader is left on a page 1.3× too wide with no obvious way back, halfway through filling in a case. It is the single most reported "your site is broken on my iPhone" fault there is, and it never appears in Chrome's device emulation, which is the only place this site could be tested from here. 16px is not a design choice — it is the exact threshold WebKit uses. */ input,select,textarea, .waitlist input,.botask input,.revbox textarea,.role-pick select, .adm-select,.notes-add textarea,.ptable input,.sett input, /* class selectors, because a bare `input` (0,0,1) loses to any rule that styles the field by class — `.dash-search` is one class and outranks it. Each of these was found by reading the computed font-size off every visible field on every route at 390px, not by reading the stylesheet. */ .dash-search,.dash-search input{font-size:16px} /* iOS paints a translucent grey rectangle over anything tapped, on top of whatever :active state the design already defines. The design has its own pressed states; this one is duplicated and off-brand. */ a,button,[role="button"],summary,label{-webkit-tap-highlight-color:transparent} } /* The home indicator on an iPhone occupies the bottom ~34px of the screen and swallows anything sitting there. Both floating controls are pinned to the bottom, so both are lifted clear of it. env() falls back to 0 everywhere the inset does not exist, which is every device except this one, so the desktop and Android positions are unchanged. Not inside the pointer:coarse block: the inset is a property of the screen, not of the input device. */ .bot{inset-block-end:calc(24px + env(safe-area-inset-bottom, 0px))} .casedock{inset-block-end:calc(24px + env(safe-area-inset-bottom, 0px))} @media (max-width:700px){ .casedock{inset-block-end:calc(12px + env(safe-area-inset-bottom, 0px))} }