/* site/phone.css - the phone view of the website, the client portal and the signing page (2026-10-24, CONTRACT.md 22.phone). A phone gets each page's own phone layout at the screen width (the viewport switch in every page's ); these rules only finish it: small print never under 12 px, body text 14 px, tap targets at least 40 px, the close button of a long window stays on the screen. Only below 760 px (the pages' own "narrow" layout) - computers never see them. Since 2026-10-25 (22.polish) a touch tablet is laid out at 750 px (or its window, if less: 1:1 - x1.8 on its screen) by the same head switch, so it gets these rules too (22.last: a large tablet in landscape gets its computer layout and only the touch sizes - the block at the end). The pages mark the elements with these classes; nothing here is data. */ @media (max-width: 759px) { .ph-fs12 { font-size: 12px !important; } /* small print: eyebrows, badges, counters */ .ph-fs14 { font-size: 14px !important; line-height: 1.5 !important; } /* body text */ /* body text: every 12.5 - 13.5 px text of the pages (card details, notes under a form, secondary lines - and the clamp()s that end there on a narrow screen) is 14 px on a phone; 12 px and less stays small print (badges, eyebrows). .ph-keep opts out. */ [style*="font-size: 12.5px"]:not(.ph-keep), [style*="font-size: 13px"]:not(.ph-keep), [style*="font-size: 13.5px"]:not(.ph-keep), [style*="font-size: clamp(12.5px"]:not(.ph-keep), [style*="font-size: clamp(13px"]:not(.ph-keep), [style*="font-size: clamp(13.5px"]:not(.ph-keep) { font-size: 14px !important; } /* small print: every 10 - 11.5 px text of the pages (and the clamp()s that start there) is 12 px on a phone */ [style*="font-size: 10px"]:not(.ph-keep), [style*="font-size: 10.5px"]:not(.ph-keep), [style*="font-size: 11px"]:not(.ph-keep), [style*="font-size: 11.5px"]:not(.ph-keep), [style*="font-size: clamp(10px"]:not(.ph-keep), [style*="font-size: clamp(10.5px"]:not(.ph-keep), [style*="font-size: clamp(11px"]:not(.ph-keep), [style*="font-size: clamp(11.5px"]:not(.ph-keep) { font-size: 12px !important; } .ph-tap { min-height: 40px !important; } /* buttons, chips, tabs */ .ph-tapsq { min-width: 40px !important; min-height: 40px !important; } /* icon buttons */ .ph-link { min-height: 40px !important; display: inline-flex !important; align-items: center !important; } /* stand-alone text links */ .ph-hit { position: relative; } /* a small checkbox: a 40 px touch area around it */ .ph-hit::after { content: ''; position: absolute; inset: -10px; } .ph-hit13::after { inset: -13px; } /* (a 15 px slider handle) */ .ph-stack { flex-direction: column-reverse !important; align-items: stretch !important; } /* side by side -> under each other */ .ph-hrow { flex-direction: row !important; overflow-x: auto; scrollbar-width: none; } /* a column of thumbnails -> a row */ .ph-wrap { flex-wrap: wrap !important; } /* a row of buttons wraps instead of running off the screen */ .ph-nobr { display: none; } /* a line break the computer layout needs, a phone does not */ /* Housing map: a price pin's card opens above the place search box (on a phone the box covers the top of the small map) */ [data-hs-map] .leaflet-popup-pane { z-index: 1002; } [data-hs-map] .leaflet-control-zoom a { width: 40px !important; height: 40px !important; line-height: 40px !important; font-size: 20px !important; } /* the map's + / - */ /* the close button of a long window stays on the screen: the window becomes one column (as it already is on a phone), the button goes first and sticks to the top while the window scrolls. Review 2026-10-25: floating over the content it covered the right end of form fields and text lines while the window scrolled (a tap at the end of "E-mail" hit Close). Now it has a band of its own across the top of the window: the button's own space (the content starts under it) and a strip in the window's colour (its box-shadow, cut to the button's height + its margins by the clip-path), so whatever scrolls up passes under the band, never under the bare button. */ .ph-col { display: flex !important; flex-direction: column !important; } .ph-col > * { flex-shrink: 0; } .ph-xs { position: sticky !important; top: 12px !important; right: auto !important; order: -1; align-self: flex-end; flex-shrink: 0 !important; z-index: 6; box-shadow: 0 0 0 100vmax #fcfbf8 !important; clip-path: inset(-12px -100vmax -12px -100vmax); } .ph-x12 { margin: 12px 12px 12px auto !important; background: #f1efeb !important; } /* window without padding, button 40 px at 12 px: band 64 px */ .ph-x14 { margin: 14px 14px 14px auto !important; clip-path: inset(-14px -100vmax -14px -100vmax); } /* window without padding, button 40 px at 14 px: band 68 px */ .ph-xpad { margin: -8px -8px 0 auto !important; top: -8px !important; } /* window with 20 px padding + 14-16 px gap, button 38-40 px at 12 px: band 64 px (a sticky offset counts from the padding: -8 px = 12 px from the edge) */ } /* 2026-10-25 (22.last): a LARGE touch window - a tablet in landscape 1100 px and wider (1180x820, 1366x1024) - shows the pages' computer layout, laid out at the window / 1.25 by the head switch (, the media query above does not match). Its text is readable there as it is (measured: 12.5 px and more on the screen, body 16 - 17.5 px); only the controls the phone view marked as too small for a finger get the touch size: 32 px = 40 px on the screen (the same elements, the same touch areas). */ html[data-tablet="wide"] .ph-tap { min-height: 32px !important; } html[data-tablet="wide"] .ph-tapsq { min-width: 32px !important; min-height: 32px !important; } html[data-tablet="wide"] .ph-link { min-height: 32px !important; display: inline-flex !important; align-items: center !important; } html[data-tablet="wide"] .ph-hit { position: relative; } html[data-tablet="wide"] .ph-hit::after { content: ''; position: absolute; inset: -10px; } html[data-tablet="wide"] .ph-hit13::after { inset: -13px; }