/* ═══════════════════════════════════════════════════════════════════ os-tablet.css — the band between the phone and the desk. Everything the OS build has been given so far was written for one of two machines. os.css and os-page.css describe a desktop: a pointer that hovers, a bar 38px tall, twelve grid columns. os-chrome.css §"ONE WINDOW BOX" and os.css §33/§34 describe a phone: the menubar goes, the launcher replaces it, every control is 44px and every grid is one column. A tablet is neither, and it was being served the desktop sheet with the phone's touch block bolted on top. Two separate failures, and it matters that they are separate because they break at different widths: 701-860 — THE OVERLAP. os.css §33 raises .mb-chip to `min-height:44px` below 860px. Below 700px the menubar is `display:none`, so that declaration has never once been visible on a phone. Between 701 and 860 the bar IS on screen and 38px tall, so the chips render at y = -3 and the search chip, the cart and the appearance toggle are clipped by the top of the screen. Measured live at 834x1194 and 768x1024, on BOTH surfaces. 861-1200 — THE HOLE. os.css's own reflow stops at 900px. Above it the bento keeps all twelve desktop columns in a window less than half a desktop's width, and every complaint about the tablet build comes out of that one fact. Measured live at 1024x1366: .t-hero span-6 -> 467px, so .hero-copy is 238px, so the two calls to action STACK and the cloud is 157px instead of 250 .t-price span-2 -> 148px for a card with a price in it .t-toggles span-4 -> 308x551 holding ~300px of content, which is where the "huge gaps above and below the add-ons" come from — the bento is `min-height:100%` and grid rows stretch .ladder-wrap -> two columns, so Free sits alone beside an empty cell and Pro/Ultra drop a row .rig-cols -> ONE column below 1100px, so the 3D render is 495px tall before anything else is reachable And a third failure that has no width at all: on a touch screen a tap sets :hover and LEAVES it set. `.mb-logo:hover{background:var(--tile-2)}` is why there is a white box behind the mark after you touch it. So the band is written out rather than inherited, in three parts: 701-900 the narrow tablet. os.css's own ≤900 reflow is right here (full-width hero, halves for the rest); this file only repairs the phone answers it also hands out. 901-1200 the wide tablet, portrait and landscape. Hero full width, everything else in THIRDS — 305px at 1024, 365px at 1180. The ceiling is 1200 and not os.css's own 1180 because an iPad Pro 11 in landscape is 1194 CSS px: at 1180 the band missed the single most common tablet landscape size and the two calls to action stacked there again. Measured. coarse (min-width:701px) and (pointer:coarse). Input, not layout: hover, tooltips and target sizes. Loaded LAST on both surfaces (see hostna_os_assets), so a rule written at the same specificity as the one it corrects wins the tie on source order. Where that was not enough the selector carries body.hostna-os — the class both surfaces print — and nothing here needs !important. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. the menubar's own height ───────────────────────────────────── The fix is not to shrink the chips back to 24px — that would hand a tablet a 24px tap target, and the 44px rule was right about the finger. The bar grows instead. 40px chips inside a 48px bar leave 4px of air top and bottom, clear WCAG 2.5.8 with room to spare, and --bar-h is already the single number .stage's inset, .win's floor and .toasts' offset are all derived from, so raising it moves the whole surface down by itself. */ @media (min-width: 701px) and (max-width: 860px) { body.hostna-os { --bar-h: 48px; } body.hostna-os .menubar { padding: 0 14px; } /* (0,2,1) against os.css's (0,1,0) — this wins on specificity as well as on order, so it holds even if the sheets are ever concatenated. */ body.hostna-os .mb-chip { height: 40px; min-height: 40px; padding: 0 13px; font-size: 12.5px; border-radius: 20px; } body.hostna-os .mb-chip .i { width: 15px; height: 15px; } /* the toggle was 26x44 — a target twice as tall as it is wide reads as a mistake and misses about as often as a small one */ body.hostna-os .mb-theme { width: 40px; padding: 0; } body.hostna-os .mb-logo { width: 34px; height: 34px; } body.hostna-os .mb-logo svg { width: 21px; height: 21px; } body.hostna-os .mb-clock { font-size: 12.5px; } } /* ── 2. the same bar, for a wide screen being touched ──────────────── 861-1200 by width is a desktop, so §1 does not fire there and the chips stay at their 24px desktop height. On an iPad Pro in portrait (1024) or any tablet in landscape that is a 24px target under a fingertip. Same treatment, gated on the pointer instead of the width — a mouse at 1024px is unaffected. */ @media (min-width: 861px) and (pointer: coarse) { body.hostna-os { --bar-h: 48px; } body.hostna-os .menubar { padding: 0 14px; } body.hostna-os .mb-chip { height: 40px; min-height: 40px; padding: 0 13px; border-radius: 20px; } body.hostna-os .mb-chip .i { width: 15px; height: 15px; } body.hostna-os .mb-theme { width: 40px; padding: 0; } body.hostna-os .mb-logo { width: 34px; height: 34px; } body.hostna-os .mb-logo svg { width: 21px; height: 21px; } } /* ── 3. a keyboard hint on a machine with no keyboard ──────────────── The search chip carries ⌘K. It is an instruction the reader cannot follow and 30px of a chip that would rather be a tap target. */ @media (min-width: 701px) and (pointer: coarse) { body.hostna-os .mb-chip kbd { display: none; } } /* ── 4. hover is not an input a tablet has ─────────────────────────── A tap on a touch screen sets :hover and leaves it set until something else is tapped. Three consequences, and all three read as bugs: THE STUCK BACKGROUND, which is the one that gets reported. The mark in the menubar is `.mb-logo:hover{background:var(--tile-2)}`, so after you touch it there is a pale box sitting behind the logo for as long as you stay on that screen. Same mechanism on the dock buttons and on every tile. Restated base values rather than `background:none`, because "none" is not what these elements are when they are at rest. THE STUCK LIFT. Every card and button rises 1-3px on :hover and never comes back down, so a row of plans ends up with one card permanently out of line and no way to put it back. THE TOOLTIP. .rail-btn[data-label]::before opens over the dock and stays open after the screen it named has already loaded. os-page.css already turns the page dock's copy of this off — but only below 700px, the one width where it could not be reached anyway. :active is deliberately left alone: the press-in scale is the right feedback for a finger, and it ends when the finger does. The :not() guards are load-bearing — .rail-btn.on, .chip.on and .mb-cart.has-items are lit STATES declared later in os.css than their own :hover rules, so a flat override here would put them out. */ @media (min-width: 701px) and (pointer: coarse) { /* the tooltips */ body.hostna-os .rail-btn[data-label]::before, body.hostna-os-page .os-pagedock__btn[data-os-label]::before { display: none; } /* the chrome, restored to what it looks like at rest */ body.hostna-os .mb-logo:hover { background: transparent; } body.hostna-os .mb-chip:not(.has-items):hover { background: var(--tile); } body.hostna-os .rail-btn:not(.on):hover { background: transparent; color: var(--ink-2); transform: none; } body.hostna-os .nav-btn:hover:not(:disabled) { background: transparent; color: var(--ink-2); } body.hostna-os-page .os-pagedock__btn:hover { background: transparent; color: var(--ink-2); transform: none; } /* the content cards */ body.hostna-os .tile:hover { background: var(--tile); transform: none; box-shadow: inset 0 1px 0 var(--spec), 0 10px 24px -20px rgba(0, 0, 0, .7); } body.hostna-os .mini:hover { background: var(--tile); transform: none; } body.hostna-os .chip:not(.on):hover { background: var(--tile); color: var(--ink-2); transform: none; } /* everything else keeps its hover colour and loses only the lift */ body.hostna-os :is( .lad, .xcard, .rack, .vplan, .pkg, .lic, .metal, .route, .mod, .legal-card, .wp, .qa-btn, .prime-btn, .ghost-btn, .stepper button, .contact-card .c-btn, .sitemap a ):hover { transform: none; } body.hostna-os .lights b:hover { transform: none; } body.hostna-os-page .os-siblings a:hover, body.hostna-os-page .os-siblings a:focus-visible, body.hostna-os-page .os-cta__go:hover, body.hostna-os-page .enquiry-form button[type="submit"]:hover { transform: none; } } /* ── 5. targets above 860, for the same finger ─────────────────────── os.css already has `(pointer:coarse) and (min-width:861px)`, and it is the right idea with too short a list: six selectors out of the ~30 the phone block covers. A tablet in landscape gets the desktop's 29px chips, 26px page-dock buttons and 24px segmented controls. This is the phone block's list at the wide-screen block's sizes — 40px rather than 44, because at this width the layout does not have to reflow to hold them and 44 everywhere reads as a phone blown up. */ @media (min-width: 861px) and (pointer: coarse) { body.hostna-os :is( .chip, .cat, .opt, .swt, .sw-head, .mb-chip, .tk, .route, .loc, .a-add, .pk-cta, .cc-sm, .ad-btn, .seg button, .tool-tabs button, .wt-tabs button, .os-row .os ) { min-height: 40px; } body.hostna-os :is(.seg, .tool-tabs, .os-row, .chips) { gap: 9px; } body.hostna-os .chips { flex-wrap: wrap; } body.hostna-os .text-btn { min-height: 34px; padding-inline: 8px; } /* the dock is the one bar a thumb is always aiming at */ body.hostna-os .rail-btn { min-width: 44px; min-height: 44px; } body.hostna-os .rail { gap: 7px; } body.hostna-os-page .os-pagedock__btn { width: 44px; height: 44px; } /* A 44px button makes the bar 60 rather than 56, and the strip the window leaves underneath it has to grow by the same 4px or the dock climbs back onto the window. Saying the height here is the whole fix: --os-edge is derived from it in os.css and follows on its own. :root, not body.hostna-os — see the note there. */ :root { --os-dock-h: 60px; } /* nothing tappable flush against the next tappable thing */ body.hostna-os :is( .tile-row, .opt-grid, .cc-acts, .rig-actions, .wiz-nav, .ca-btns ) { gap: 9px; } } /* ── 5b. the window bar's own three controls ───────────────────────── The traffic lights are 11px dots and the back chevron is 26px square. os-chrome.css already decided these are controls rather than ornament and gave each light a 34px hit area — inside `max-width:700px`, so a tablet never sees it, and a tablet is exactly the machine that needs it: close, fullscreen and back are the three most consequential buttons on the surface and they are the smallest. Not a copy of the phone's numbers. 34px areas on the phone's 10px gap overlap by 13px, which is survivable when a mis-tap costs a window you can reopen; the answer here is to space them instead. Dots at 14px with a 14px gap put 28px between centres, so a 26px hit area clears WCAG 2.5.8's 24px floor and still cannot reach its neighbour. */ @media (min-width: 701px) and (pointer: coarse) { body.hostna-os .lights { gap: 14px; } body.hostna-os .lights b { position: relative; width: 14px; height: 14px; } body.hostna-os .lights b::after { content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); } body.hostna-os .nav-btn { width: 36px; height: 36px; } body.hostna-os .nav-btn svg { width: 19px; height: 19px; } } /* ── 6. the phone answers a 701-900px tablet should not be given ───── os.css's ≤900 reflow is mostly RIGHT for this width — full-width hero, halves for the rest. What it also does at 900 is hide things, and each of those hides was written against a 390px screen. */ @media (min-width: 701px) and (max-width: 900px) { /* .plan-grid resolves to auto-fit/220px on its own, which is already tablet-safe. The count-N variants are not: .count-3 is a hard `repeat(3,...)`, which at 768px is three 225px columns holding a price, an icon, a feature list and a button. */ body.hostna-os .plan-grid.count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* THE SERVICES LIST. os.css:759 drops it to `auto 1fr auto` and hides .svc span outright — the description of every service the customer owns, removed. There is room for it here: the middle track comes back at 120px instead of the desktop's 150. Four auto/fixed tracks degrade harmlessly to three if a row ever carries fewer children. */ body.hostna-os .svc li { grid-template-columns: auto 120px 1fr auto; } body.hostna-os .svc li span { display: block; font-size: 11px; } /* THE WINDOW BAR'S SECOND ACTION. os.css:747 hides .wt-act .ghost-btn below 900 because the bar ran out of room — the tab strip is centred with `margin:0 auto` and at its natural width refuses to shrink. Make the strip shrinkable and scrollable and the room is there: 47px of lights + 26px of chevron + the two buttons is ~303px of a 722px bar at 768, and the tabs take what is left instead of pushing an action off the end. */ body.hostna-os .wt-tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } body.hostna-os .wt-tabs::-webkit-scrollbar { width: 0; height: 0; display: none; } body.hostna-os .wt-act .ghost-btn { display: inline-flex; } /* os.css:743 turns .t-hero into a column and centres the art under the sentence. It does not need to: the same ≤900 block promotes span-5..9 to span 12, so the hero already has the full 700-880px of the window — the copy takes 374 of it and the art 190. Measured at 834: the column was choosing to be 472px tall to do what the row does in 264. */ body.hostna-os .t-hero { flex-direction: row; align-items: center; text-align: left; } body.hostna-os .hero-art { align-self: auto; width: min(32%, 200px); } } /* ── 7. the ladder at 701-860: two columns, free on its own row ────── os.css:1522 gives the ladder `1fr 1fr` below 1180 and os.css:1528 takes it back to `1fr` below 900. The second is the phone's answer: measured at 834, six plan cards in one 776px track ran to 2.4 screens of scrolling. Two tracks of ~343px is the same card the bento draws beside it at 383px, so this is not a new size to design for. Three-across (§12) needs ~255px a card and cannot have it below 861, so this band folds to two — and the free card takes the whole first row rather than sitting beside the empty cell the full-width OR divider leaves behind. That is not a workaround for the hole: the free tier is the odd one out, the divider says so, and the two paid plans then compare side by side, which is the point of the screen. */ @media (min-width: 701px) and (max-width: 860px) { body.hostna-os .ladder-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.hostna-os .ladder-wrap > .lad-free { grid-column: 1 / -1; } } /* ── 8. the document hero, back on two columns ─────────────────────── os-page.css:459 collapses .os-hero to one column below 860 and gives the art `order:-1` — so a 240px illustration is the first thing on the page and the

, the lead and the only call to action all start below it. These are the pages search sends people to. Measured on /vps-hosting/ at 834x1194: the art occupied 130-370px of the viewport and the H1 did not begin until y=600. Half the screen before the page said what it was selling. */ @media (min-width: 701px) and (max-width: 860px) { body.hostna-os-page .os-hero { grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr); align-items: center; } body.hostna-os-page .os-hero__art { order: 0; max-width: 210px; } body.hostna-os-page .os-hero__lead { max-width: 46ch; font-size: 15.5px; } } /* ═══════════════════════════════════════════════════════════════════ 901-1180 — THE HOLE. os.css's reflow stops at 900 and the desktop grid runs unchanged from there to 1440+. Everything below is about that one gap. ═══════════════════════════════════════════════════════════════════ */ /* ── 9. the bento: hero full width, everything else in thirds ──────── Twelve columns in a 944px window is what produced every symptom reported from an iPad. Measured at 1024x1366 before this block: .t-hero 467px -> .hero-copy 238px -> the two calls to action stacked, and .hero-art resolved to `min(38%, 250px)` of 467 = 157px, which is why the cloud read as small and cramped rather than as the piece it is on the phone and the desk .t-price 148px -> a card whose whole job is to hold a price .t-toggles 308x551 holding ~300px of content Thirds rather than the halves os.css uses below 900, and the reason is the landscape tablet: at 1180x820 halves overflow the window by 342px and thirds by 168. Portrait tolerates either. One number for the whole band beats two that disagree at the seam. Measured after: 1024x1366 -> hero 954 full width, art back to 250, both buttons on one row, tiles 311px, nothing overflowing. */ @media (min-width: 901px) and (max-width: 1200px) { body.hostna-os .span-2, body.hostna-os .span-3, body.hostna-os .span-4 { grid-column: span 4; } body.hostna-os .span-5, body.hostna-os .span-6, body.hostna-os .span-7, body.hostna-os .span-8, body.hostna-os .span-9 { grid-column: span 12; } } /* ── 10. rows that stop stretching, in portrait only ───────────────── `.bento{min-height:100%}` plus auto rows means the grid stretches to fill the window and the surplus is handed to the rows. On a desktop there is no surplus. On a 1024x1366 tablet there are ~300 spare pixels, and they come out as air inside the cards — the reported "huge gap above and below the add-ons" is exactly this, and §9 alone only shrinks it (551px holding 300px of content becomes 423 holding 335). Packing the rows removes it. Portrait only, and the orientation query is not shorthand for a device: in LANDSCAPE there is no surplus to distribute — the grid already overflows — so `min-height:100%` is doing nothing there and turning it off would be a change with no cause. */ @media (min-width: 901px) and (max-width: 1200px) and (orientation: portrait) { body.hostna-os .bento { min-height: 0; align-content: start; } } /* ── 11. the ladder, three across ──────────────────────────────────── os.css:1522 folds the ladder to `1fr 1fr` below 1180 AND turns the OR into a full-width horizontal divider. The two go together: a divider that spans the row forces a row break, so Free ends up alone beside an empty cell with Pro and Ultra a row below it. At 901-1180 there is room for the desktop shape — free | OR | pro | ultra on one row — as long as the divider goes back to being a vertical rule. Measured at 1024: 259 / 37 / 288 / 328 against a 220px floor for a plan card, and the ladder's own height falls from 1210px to 770 — the whole comparison on one screen, which is what a comparison is for. The interior comes with it. os.css compacts .lad inside `max-height:880px`, which a 1366px-tall portrait tablet never matches, so the cards would otherwise keep desktop type in two-thirds of the desktop's width. */ @media (min-width: 901px) and (max-width: 1200px) { body.hostna-os .ladder-wrap { grid-template-columns: minmax(0, .9fr) auto minmax(0, 1fr) minmax(0, 1.14fr); gap: 11px; } body.hostna-os .or { flex-direction: column; grid-column: auto; padding: 8px 0; } body.hostna-os .or i { width: 1px; height: auto; background: linear-gradient(var(--stroke), transparent); } body.hostna-os .or i:last-child { background: linear-gradient(transparent, var(--stroke)); } body.hostna-os .lad { padding: 13px 15px; gap: 7px; } body.hostna-os .lad header h3 { font-size: 15.5px; } body.hostna-os .lad header p { font-size: 11px; } body.hostna-os .lad-price b { font-size: 27px; } body.hostna-os .lad-feats { font-size: 11.5px; gap: 4px; } } /* ── 12. the VDS builder, back on two columns ──────────────────────── os.css:2202 turns the builder into a stacked document below 1100px, and it is right to: at phone widths the two columns cannot both fit. At 901-1100 they can, and stacking them is what put the 3D render at 495px tall above everything else — measured at 1024x1366, the whole builder ran to 1248px and the machine you are sizing was the only thing on screen. Two columns and a CEILING on the stage. The ceiling is the point: .rig-stage is `flex:1 1 auto` so that "the machine is as large as the window allows", which on a 1366px-tall tablet means 880px of render and the sizing panel pushed under the dock — measured, when the desktop's fitted layout was tried here instead. A document with a capped render puts the machine, the sliders, the software and the price all above the fold: 550px against 1248. */ @media (min-width: 901px) and (max-width: 1100px) { body.hostna-os .rig-cols { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 11px; align-items: start; } body.hostna-os .rig-stage { min-height: 240px; max-height: clamp(260px, 30vh, 380px); } body.hostna-os .rig-scene { min-height: 0; } } /* ── 13. what is NOT in this file ──────────────────────────────────── Two defects surfaced while measuring the tablet and turned out not to be tablet defects at all. Both are fixed at source in os.css rather than patched into a band they are not confined to: .price-badge was `position:absolute; left:calc(100% - 4px)` inside an `overflow:hidden` tile 148-221px wide. Clipped at 834, 1024, 1280 AND 1440 — it rendered as "NV" on every screen the site has. Now inline after the price, with .or-price allowed to wrap. .mb-chip is a