/* ========================================================================== MOBILE POLISH -------------------------------------------------------------------------- WHY THIS IS ITS OWN FILE, AND NOT MORE OF theme.css The colour scheme is applied and undone by tools\apply-logo-colours.ps1, which restores theme.css wholesale from a backup. Anything appended to theme.css after that point disappears the next time somebody rolls the colours back. These are layout and accessibility fixes, not colour, so they must survive a rollback. Separate file, loaded last. EVERY NUMBER HERE CAME FROM MEASURING A RENDERED PAGE at 390px and 360px, not from guessing. What the audit found: - trip pills were 32px tall -> below the 44px tap minimum - footer links were 17px tall -> same - "Add Stops" was 25px tall -> same - admin inputs were 14px -> iOS Safari zooms the page on focus under 16px - admin form fields measured 385px wide -> inside a 358px column - .booking-step reached 461px -> past a 390px viewport - the logo tagline was 9px -> too small to read ========================================================================== */ /* ============================ TAP TARGETS ============================== */ /* 44px is the figure Apple's HIG and WCAG 2.5.5 both land on. Below it, thumbs miss - and every one of these controls is on the path to a booking. Padding is used rather than height where the element is inline, so the text stays where it is and only the hit area grows. */ @media (max-width: 900px) { /* One Way / Round Trip / Local Trip / Airport Trip. Measured 32px. */ body.gogo .trip-pill { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* Add Stops. Measured 25px. */ body.gogo .add-stop-btn, body.gogo #btnAddStop { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* The header phone pill and the Modify Search link. Measured 42px. */ body.gogo .gogo-phone, body.gogo .phone-btn, body.gogo .modify-search { min-height: 44px; display: inline-flex; align-items: center; } /* Footer link columns. Measured 17px - the worst offenders on the site. Vertical padding also separates them, which matters when eight links sit in a column and a mis-tap opens the wrong page. */ body.gogo .gogo-footer a, body.gogo .footer-col ul li a { display: inline-block; min-height: 44px; padding-top: 11px; padding-bottom: 11px; line-height: 1.35; } /* Cabs / Packages tiles. */ body.gogo .book-mode { min-height: 48px; } } /* ============================ LEGIBLE TEXT ============================= */ /* 9px is not a font size, it is a rumour. The logo tagline and the results summary labels were both under 11px on a phone. */ @media (max-width: 900px) { body.gogo .rc-logo-lockup .l2, body.gogo .rc-wordmark-tag { font-size: 11px; letter-spacing: .04em; } /* Results page trip summary: FROM / TO / PICKUP DATE and their values. */ body.gogo .summary-item span, body.gogo .summary-content span, body.gogo .trip-info-box span, body.gogo .route-box span { font-size: 11.5px; } body.gogo .summary-item strong, body.gogo .summary-content strong { font-size: 14px; } /* "Starting From" on the routes page, category chips on booking. */ body.gogo .rt-from, body.gogo .cab-category, body.gogo .starting-from { font-size: 11.5px; } } /* ======================= THE BOOKING STEP STRIP ======================== */ /* .booking-step reached 461px inside a 390px viewport. It did not scroll the page - an ancestor clips it - but the last step was simply cut off, so the customer could not see where they were in the flow. Wrapping is the fix rather than shrinking: three steps at a readable size on two lines beats three steps on one line that nobody can read. */ @media (max-width: 620px) { body.gogo .booking-steps, body.gogo .booking-progress { flex-wrap: wrap; justify-content: center; gap: 8px 10px; max-width: 100%; overflow: hidden; } body.gogo .booking-step { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: 12px; white-space: normal; } /* The connecting line between steps assumes a single row; it looks broken once they wrap. */ body.gogo .booking-step::after, body.gogo .booking-step::before { display: none; } } /* ===================== ADMIN PANEL ON A PHONE ========================== */ /* The client will open this on a phone - it is the tool he uses to change a price while standing next to a customer. Two real problems were measured: 1. INPUTS AT 14px MAKE iOS SAFARI ZOOM THE WHOLE PAGE on focus, then leave it zoomed. 16px is the threshold; there is no way to opt out of the behaviour other than meeting it. 2. Form fields measured 385px inside a 358px column. A grid track without minmax(0, ...) refuses to shrink below its content, and long hint text plus the unit-prefixed inputs pushed it wider than the screen. */ @media (max-width: 900px) { .adm-f input[type="text"], .adm-f input[type="password"], .adm-f input[type="file"], .adm-f select, .adm-f textarea, .adm-login-card input { font-size: 16px; } /* The buttons are not inputs, but at 13.5px they read as small next to 16px fields. */ .adm .adm-btn { font-size: 14.5px; } .adm .adm-btn.sm { font-size: 13.5px; min-height: 40px; } } @media (max-width: 860px) { /* Stop any grid track from being wider than the space it has. */ .adm-grid { grid-template-columns: minmax(0, 1fr); } .adm-grid > * { min-width: 0; max-width: 100%; } .adm-f, .adm-f > *, .adm-f .with-unit, .adm-f .with-unit input { min-width: 0; max-width: 100%; } /* A nested .adm-grid - the terms editor - must not re-establish three columns inside a single-column parent. */ .adm-grid .adm-grid { grid-template-columns: minmax(0, 1fr); } /* The image box is a flex row of a 104px thumbnail plus a file input, which together exceed a narrow column. */ .adm-imgbox { flex-wrap: wrap; } .adm-imgbox img { width: 88px; height: 60px; } /* Sidebar entries: 36px measured, and they are the primary navigation. */ .adm-sub a { min-height: 44px; display: flex; align-items: center; } .adm-nav a.lnk, .adm-nav .lnk { min-height: 48px; } /* Sign out sat at 34px. */ .adm-who .adm-btn.sm { min-height: 44px; padding: 8px 14px; } /* Row actions in the tables. */ .adm-tbl td.act .adm-btn { min-height: 40px; } /* The section labels in the sidebar were 10px. */ .adm-nav .sect { font-size: 11px; } .adm-brandbar .bs { font-size: 11px; } .adm-side-foot { font-size: 11.5px; } .adm-sep span { font-size: 11px; } .adm-stat .k { font-size: 11px; } } /* ==================== WIDE TABLES: SCROLL, DO NOT CLIP ================= */ /* The admin tables are genuinely wider than a phone - the car list is 842px of real columns. Squeezing eight columns into 390px would make all of them unreadable, so they scroll sideways inside their own card instead. That is a deliberate choice, but it only works if the customer can tell there is more to see. Hence the shadow hint and the momentum scrolling. */ @media (max-width: 860px) { .adm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(21, 26, 33, .14), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(21, 26, 33, .14), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .adm-tbl { min-width: 560px; } .adm-tbl th, .adm-tbl td { padding: 11px 12px; } } /* ========================================================================== SECOND PASS -------------------------------------------------------------------------- From re-measuring after the fixes above. Everything here was still failing. ========================================================================== */ /* The results page trip summary. The real class is .summary-box, not the .summary-item I guessed at first - so the labels were still rendering at 10px and the values at 10px alongside them. FROM / TO / PICKUP DATE and the place names under them are the first thing a customer checks after searching. */ @media (max-width: 900px) { body.gogo .summary-box span { font-size: 11.5px; letter-spacing: .04em; } body.gogo .summary-box h4 { font-size: 14.5px; line-height: 1.35; } } /* Tap targets still short of 44px by a few pixels. Each was measured, not assumed: Book Now was 42, the swap control 40, the floating Call 42, and the admin row actions 40. */ @media (max-width: 900px) { body.gogo .book-btn, body.gogo .cab-card .book-btn, body.gogo .confirm-btn, body.gogo .btn-search, body.gogo .search-cta .btn-search { min-height: 46px; } /* The From/To swap button. 40x40 measured - and it is a small circle with an icon, which is the hardest kind of target to hit. */ body.gogo .swap-btn { width: 46px; height: 46px; min-width: 46px; } /* The floating WhatsApp and Call actions. */ body.gogo .rc-fab, body.gogo .rc-fab-call, body.gogo .rc-fab-whatsapp { min-width: 48px; min-height: 48px; } /* Short footer links such as "FAQ" measured 24px wide. Tall enough after the first pass, but still a narrow target. */ body.gogo .gogo-footer a, body.gogo .footer-col ul li a { padding-left: 2px; padding-right: 2px; min-width: 44px; } } @media (max-width: 860px) { /* Edit / Remove / Sign out in the admin tables: 40px measured. These delete vehicles and revoke sessions, so a mis-tap is expensive. */ .adm .adm-btn.sm, .adm-tbl td.act .adm-btn { min-height: 44px; } /* Save vehicle came in at 43px - one pixel short is still short. */ .adm .adm-btn { min-height: 46px; } /* Stack the form's action bar so Save and Remove cannot sit side by side and be mistaken for each other on a narrow screen. */ .adm-actions { flex-direction: column; align-items: stretch; } .adm-actions .adm-btn { width: 100%; } .adm-actions .adm-btn.danger { margin-top: 4px; } } /* ========================================================================== A NOTE ON WHAT WAS DELIBERATELY NOT CHANGED The audit also flagged submit buttons and checkboxes at 13-14.5px under an "iOS will zoom" heading. That was my own check being too broad: Safari zooms on focus of TEXT-ENTRY fields - input[type=text], textarea, select - and not on buttons or checkboxes, which cannot be typed into. Inflating button labels to 16px to satisfy a rule that does not apply to them would make the admin toolbar look clumsy for no benefit. The text fields themselves are at 16px, which is the part that matters. The admin data tables are still wider than a phone - the car list is 812px of genuine columns. They scroll sideways inside their own card, with a shadow hint at each edge, rather than being crushed into 390px where none of the eight columns would be readable. ========================================================================== */ /* ========================================================================== THIRD PASS - MATCHING THE SELECTORS THAT WERE WINNING -------------------------------------------------------------------------- Four fixes above did nothing, and computed styles showed why. In each case an existing rule carried more specificity than mine: .gogo .summary-box span:first-child (0,3,1) beat body.gogo .summary-box span (0,2,2) .gogo .cab-summary-info .cab-category (0,3,0) beat body.gogo .cab-category (0,2,1) And two were simply the wrong selector: the 42px "Call" button is .rc-call-mobile, not one of the .rc-fab floats, and the 42px "Book Now" on the fare cards is .fr-book, which I left out of the tap-target list. This is the third round on the same file, which is the cost of a stylesheet grown by appending: nothing can be changed without first finding out what is already winning. ========================================================================== */ @media (max-width: 900px) { /* Results page trip summary. The label is the :first-child span. */ body.gogo .summary-box span, body.gogo .summary-box span:first-child { font-size: 11.5px; letter-spacing: .04em; } body.gogo .summary-box h4, body.gogo .search-summary-card .summary-box h4 { font-size: 14.5px; line-height: 1.35; } /* The category chip on the booking page's selected-cab panel. */ body.gogo .cab-summary-info .cab-category, body.gogo .cab-summary .cab-category { font-size: 11.5px; } /* "Starting From" on the routes page is a bare . Small is meant to be smaller, not unreadable. */ body.gogo small { font-size: 11.5px; } /* The mobile Call button in the header. 71x42 measured - it is not one of the floating actions, which is why the earlier rule missed it. */ body.gogo .rc-call-mobile { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } /* Book Now on the fare cards. */ body.gogo .fr-book, body.gogo .fare-row .fr-act .fr-book { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; } } /* ========================================================================== RESULTS CARDS: SMALLER -------------------------------------------------------------------------- Kept in mobile.css rather than theme.css for the same reason as everything else here - a colour rollback restores theme.css and would take these with it. The cards were tall enough that only one and a bit fitted on a laptop screen, so comparing prices meant scrolling. Every dimension below is reduced; nothing is removed. The full vehicle name now leads the card, so the heading carries more text in less height. ========================================================================== */ body.gogo .cab-card { border-radius: 11px; margin-bottom: 14px; } body.gogo .cab-top { padding: 12px 16px 10px; gap: 10px; } body.gogo .cab-card .cab-left h3 { font-size: 16.5px; margin-top: 5px; line-height: 1.25; } body.gogo .cab-tag { padding: 2px 9px; font-size: 10px; } body.gogo .cab-icons { gap: 13px; } body.gogo .cab-icons span { font-size: 11.5px; } body.gogo .cab-body { grid-template-columns: 158px minmax(0, 1fr); gap: 14px; padding: 12px 16px 14px; } body.gogo .cab-image { height: 88px; } body.gogo .cab-image img { max-height: 88px; } body.gogo .cab-features h5 { font-size: 12px; font-weight: 500; margin-bottom: 7px; color: #6b7484; } body.gogo .cab-features li { padding: 2px 0; font-size: 12.5px; gap: 8px; } body.gogo .cab-features li i { margin-top: 2px; font-size: 11.5px; } body.gogo .cab-offer { padding: 8px 16px; font-size: 12px; } body.gogo .cab-card .price-card { padding: 12px 15px 14px; } body.gogo .cab-card .top-rating { margin-bottom: 9px; } body.gogo .cab-card .price-card h4 { font-size: 11.5px; margin-bottom: 5px; } body.gogo .cab-card .billing-basis { margin-bottom: 7px; font-size: 11px; } body.gogo .cab-card .old-price { font-size: 12.5px; } body.gogo .cab-card .new-price { font-size: 25px; letter-spacing: -.8px; } /* 11.5px, not 11px. This is the "+ ₹166 Charges and Taxes" line - the one that explains why the total is higher than the fare printed above it, so it is the wrong line to shrink. An earlier pass here set 11px and, being more specific than a later plain ".price-card p" rule, it won that fight silently. Corrected at source rather than by stacking another override on top. */ body.gogo .cab-card .price-card > p { font-size: 11.5px; } body.gogo .cab-card .book-btn { margin-top: 10px; padding: 10px 14px; font-size: 14px; min-height: 42px; } body.gogo .cab-card .cab-seemore, body.gogo .cab-card .see-more-btn, body.gogo .price-card .see-more-btn { margin-top: 7px; padding: 9px 14px; font-size: 12.5px; min-height: 38px; } /* On a phone the tap targets win over the density: back up to 44px+. */ @media (max-width: 900px) { body.gogo .cab-card .book-btn { min-height: 46px; font-size: 15px; } body.gogo .cab-card .cab-seemore, body.gogo .cab-card .see-more-btn, body.gogo .price-card .see-more-btn { min-height: 44px; font-size: 13.5px; } body.gogo .cab-body { grid-template-columns: minmax(0, 1fr); } body.gogo .cab-image { height: 132px; } body.gogo .cab-image img { max-height: 132px; } body.gogo .cab-card .cab-left h3 { font-size: 16px; } } /* ========================================================================== POLICY AND FAQ PAGES -------------------------------------------------------------------------- Long-form reading, so the measure is capped: a line of text much wider than about 70 characters is hard to track back to the start of. Everything else is about making a wall of policy scannable - clear headings, breathing room, and lists that are obviously lists. ========================================================================== */ body.gogo .policy-page .policy-body { max-width: 760px; margin: 0 auto; color: #3f4855; font-size: 15px; line-height: 1.75; } body.gogo .policy-page .policy-updated { display: inline-block; margin: 0 0 26px; padding: 5px 12px; border-radius: 999px; background: #eef2f8; color: #6b7484; font-size: 12px; font-weight: 500; } body.gogo .policy-page .policy-body h3 { margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid #e7ebef; font-size: 17px; font-weight: 600; color: #111111; line-height: 1.35; } body.gogo .policy-page .policy-body h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } body.gogo .policy-page .policy-body p { margin: 0 0 14px; } body.gogo .policy-page .policy-body ul { margin: 0 0 16px; padding-left: 20px; } body.gogo .policy-page .policy-body li { margin-bottom: 7px; } body.gogo .policy-page .policy-body b { color: #111111; font-weight: 600; } body.gogo .policy-page .policy-body a { font-weight: 500; } /* The cancellation windows table. */ body.gogo .policy-table { width: 100%; border-collapse: collapse; margin: 4px 0 20px; font-size: 14px; } body.gogo .policy-table th { text-align: left; padding: 10px 12px; background: #eef2f8; border-bottom: 1px solid #dde4ee; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: #4b5563; } body.gogo .policy-table td { padding: 10px 12px; border-bottom: 1px solid #eef1f5; } body.gogo .policy-table tr:last-child td { border-bottom: 0; } /* ---- FAQ: native details/summary, no script ---- */ body.gogo .faq-list details { border: 1px solid #e4e8ee; border-radius: 10px; margin-bottom: 10px; background: #ffffff; overflow: hidden; } body.gogo .faq-list details[open] { border-color: #fcc808; box-shadow: 0 6px 18px rgba(4, 60, 92, .07); } body.gogo .faq-list summary { padding: 15px 44px 15px 16px; font-size: 15px; font-weight: 500; color: #111111; cursor: pointer; position: relative; list-style: none; min-height: 44px; display: flex; align-items: center; transition: color .16s ease, background .16s ease; } body.gogo .faq-list summary::-webkit-details-marker { display: none; } body.gogo .faq-list summary:hover { color: #8a6600; background: #fffdf5; } /* The chevron, rotated when open. Drawn rather than an icon font, so it cannot be missing if Font Awesome fails to load. */ body.gogo .faq-list summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #8b95a4; border-bottom: 2px solid #8b95a4; transform: rotate(45deg); transition: transform .2s ease, border-color .2s ease; } body.gogo .faq-list details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; border-color: #043c5c; } body.gogo .faq-list details > p { margin: 0; padding: 0 16px 15px; font-size: 14.5px; line-height: 1.7; color: #4b5563; } body.gogo .faq-list details > p + p { padding-top: 0; } body.gogo .faq-list h3 { margin-top: 34px; } body.gogo .faq-foot { margin-top: 26px; padding: 15px 18px; border-radius: 10px; background: #eef2f8; font-size: 14.5px; } @media (max-width: 700px) { body.gogo .policy-page .policy-body { font-size: 14.5px; } body.gogo .policy-page .policy-body h3 { font-size: 16px; margin-top: 26px; } body.gogo .faq-list summary { font-size: 14.5px; padding-right: 40px; } /* The vehicle column can be long; let the table scroll rather than squash. */ body.gogo .policy-table { font-size: 13.5px; } body.gogo .policy-table th, body.gogo .policy-table td { padding: 9px 10px; } } /* ========================================================================== MOBILE HEADER: THE CALL BUTTON WAS STRANDED IN THE MIDDLE -------------------------------------------------------------------------- MEASURED, at 390px and 360px, before this block: logo x 22 -> 111 CALL x 183 -> 254 margin-left: 59.59px burger x 336 -> 376 margin-left: 59.59px Everything was correctly centred VERTICALLY - every centreY read 38 - so the fault was horizontal. Two separate rules each set "margin-left: auto" on a flex child of .bar: gogo.css:353 .gogo-burger { margin-left: auto; } gogo.css:2592 .rc-call-mobile { margin-left: auto; margin-right: 10px; } When two flex items both have an auto start margin, flexbox SPLITS the free space between them instead of pushing them together - hence the identical 59.59px on each, and a Call button floating in no-man's-land between the logo and the burger, aligned to nothing. The fix is to have exactly ONE auto margin. Keeping it on the Call button sends all the free space to the left of it, so Call and burger sit together as a group on the right, which is what the layout was always meant to be. The logo's own 8px left margin also goes, so the brand mark lines up with the bar's 14px gutter rather than sitting 22px in. That was the other thing that read as "not aligned". Lives in mobile.css, not theme.css, because the palette rollback restores theme.css from a backup and this is a layout fix, not a colour one. ========================================================================== */ @media (max-width: 991px) { /* The one auto margin: pushes the Call+burger group to the right edge. */ body.gogo .gogo-header .bar .rc-call-mobile { margin-left: auto; margin-right: 8px; } /* Beaten into place: .gogo-burger's own "margin-left: auto" is what split the free space. Zeroing it is the whole fix. */ body.gogo .gogo-header .bar .gogo-burger { margin-left: 0; margin-right: 0; } /* Brand mark flush with the bar gutter. */ body.gogo .gogo-header .bar .rc-logo { margin-left: 0; } } /* Very narrow phones: the word "Call" is the first thing that can go, since the icon alone is understood and the number is also in the menu. Keeps the logo from being squeezed on a 320px screen. */ @media (max-width: 340px) { body.gogo .gogo-header .bar .rc-call-mobile .label { display: none; } body.gogo .gogo-header .bar .rc-call-mobile { padding-left: 12px; padding-right: 12px; } } /* The "+ ₹X Charges and Taxes" line is handled at its source above, in the .cab-card block - see the note on ".cab-card .price-card > p". A second rule here would have lost the specificity fight anyway, which is exactly how the 11px slipped in unnoticed the first time. */ /* ========================================================================== INSTANT CAB PILL: THE NUMBER RODE HIGH, WITH A LINE FLOATING UNDER IT -------------------------------------------------------------------------- MEASURED at 390px, before this block: pill h 56 (37 at desktop) label y 182 h 21 <- one line number y 170 h 44 <- TWO lines The pill is 204px wide but its contents need about 216, so "+91 8983783279" broke at its space and became two line boxes. Three consequences, which together are exactly what the screenshot showed: 1. The number's box is twice the label's height. ".instant-cab" is "align-items: center", so that taller box is centred against a single-line label - putting the visible digits ABOVE the word "Instant cab" rather than beside it. Nothing was misaligned in the CSS; one item had silently become twice as tall as its neighbour. 2. The underline is a "border-bottom", and a border on a block draws at the bottom of the WHOLE box - below both line boxes. That is the rule floating in space well under the digits. 3. centresAgree still measured 0, which is why this needed measuring rather than eyeballing: the boxes really were centred on each other. The fault was the box, not the alignment. THE FIX, all three causes: - a phone number must never break, so "white-space: nowrap"; - the underline becomes "text-decoration", which hugs the text instead of the box, so even if anything ever wraps again the line stays with the digits; - the pill is allowed to wrap as a WHOLE, so on a narrow screen the number drops to its own centred row instead of overflowing. Tightening the gaps and type first means it usually still fits on one row. ========================================================================== */ body.gogo .instant-cab .ic-number { /* Beats theme.css's border-bottom: same selector, and mobile.css loads after it - including after a palette rollback restores theme.css. The underline is text-decoration rather than a border so it hugs the text. A border draws on the BOX, which is how the original ended up drawing a rule 30px below the digits once the box was inflated to 44px. */ border-bottom: 0; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; /* Belt and braces. These are spans now, not anchors, so gogo.css's blanket "min-height: 44px" on ".gogo a" no longer reaches them - but stating it means the alignment cannot silently break again if the markup is ever changed back to a nested link. */ min-height: 0; } body.gogo .instant-cab:hover .ic-number, body.gogo .instant-cab:focus-visible .ic-number { text-decoration-color: #ffffff; } body.gogo .instant-cab .ic-label { white-space: nowrap; min-height: 0; } /* The pill is the anchor now, so it is the thing that should be a comfortable tap target - which the blanket rule already gives it below 900px. Wrapping is allowed so a very narrow screen drops the number to its own centred row rather than overflowing the card. */ body.gogo .instant-cab { flex-wrap: wrap; row-gap: 2px; text-decoration: none; } /* Narrow phones: shave the gap, padding and type so all three parts still fit on ONE row. Saves roughly 14px, which is what was missing at 390px. */ @media (max-width: 430px) { body.gogo .instant-cab { gap: 6px; padding: 6px 12px; font-size: 12px; } body.gogo .instant-cab i { font-size: 12px; } } /* ========================================================================== RESULTS CARD: "Exclusive Discount" WAS BEING COVERED BY THE PRICE PANEL -------------------------------------------------------------------------- MEASURED at 390px, before this block: .cab-offer y 1040 -> 1077 margin: 14px -16px -18px .price-card y 1059 -> 1469 overlap: 18px vertically, 320px horizontally document.elementFromPoint at the offer's midpoint -> DIV.price-card So the discount band really was underneath the white price panel, with the bottom of its text painted over. Not a z-index problem and not a clipping problem: ".cab-offer" carries a NEGATIVE 18px bottom margin. That negative margin is correct on desktop. There the card is two columns ("710px 268px" measured at 1440), the offer is the last thing in the left column, and -18px bottom with -16px sides bleeds the band out to the card's own edges instead of leaving it floating inside the padding. Desktop measured clean - elementFromPoint returns DIV.cab-offer there, nothing covers it. The card collapses to ONE column at max-width: 1000px (theme.css:5029). From that point the price panel is no longer beside the band, it is directly beneath it - so a -18px bottom margin drags an opaque panel up over the text. The band also pushed 18px out of the bottom of its own parent, .cab-info. Fix: keep the sideways bleed, which is what makes it a full-width band, and drop only the negative BOTTOM margin once the layout has stacked. ========================================================================== */ @media (max-width: 1000px) { body.gogo .cab-offer { /* Was -18px. Nothing below it to tuck under any more. */ margin-bottom: 0; } } /* While measuring the above: on desktop the band's -16px RIGHT bleed carries it 22px into the price column, where the opaque panel paints over that sliver. The text ends long before it so nothing is unreadable, which is why it was never reported - but a band running under an adjacent opaque column is not deliberate either. Stopping it at the column edge costs one line. */ @media (min-width: 1001px) { body.gogo .cab-offer { margin-right: 0; } } /* ========================================================================== MOBILE CALCULATOR, REBUILT TO THE REFERENCE'S PROPORTIONS -------------------------------------------------------------------------- Measured both sites in headless Chrome at 390px. gocabish.com fits its whole booking widget in 505px of height; ours took 801px - 60% taller - and the difference was three specific things, not styling in general: 1. our four trip pills WRAPPED onto two rows (80/94/89px, then a fourth at y=290) because each carries a radio ring in a ::before that eats width. Theirs sit four across in one row at 82px each; 2. our Departure / Return / Pickup Time / Return Time fields were each FULL WIDTH and stacked. Theirs pair up two to a row, 160px each; 3. our field boxes are 62px tall against their 48px. Their other choices, adopted here: a 16px page gutter, the form as a white card with a 16px radius and 12px padding, 12-14px field labels, ~14px corner radius on controls, and a full-width submit rather than a centred pill. COLOURS ARE OURS THROUGHOUT - navy #043c5c for the selected state, logo yellow #fcc808 for the action. Nothing of theirs is copied but the measurements. ONE DELIBERATE DEPARTURE: their inputs are 14px. Ours stay at 16px, because iOS Safari zooms the whole page when a focused input is under 16px and the customer then finds themselves on a cropped, side-scrolling form. The 48px box height is matched; only the type inside it differs. ========================================================================== */ @media (max-width: 760px) { /* ---- page gutter: 16px each side, as theirs ---- */ body.gogo .gogo-search { padding-left: 16px; padding-right: 16px; padding-top: 20px; padding-bottom: 26px; } /* ---- the form becomes a card ---- */ body.gogo .search-card { padding: 12px; border: 1px solid #e6eaf0; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 22px rgba(4, 60, 92, .08); } /* ---- trip types: FOUR ACROSS, one row ---- */ body.gogo .trip-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; } body.gogo .trip-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 7px 3px; border: 1px solid #e2e6ec; border-radius: 10px; background: #ffffff; color: #3f4855; font-size: 11.5px; line-height: 1.15; text-align: center; white-space: normal; } /* THE RING IS WHY THEY WRAPPED. .trip-pill is a radio-style control whose circle is drawn in ::before; at four across there is no room for both a circle and a word. The selected state is carried by the navy fill instead, which is what the reference does too. */ body.gogo .trip-pill::before, body.gogo .trip-pill::after { display: none !important; } body.gogo .trip-pill i { font-size: 14px; line-height: 1; } body.gogo .trip-pill span { font-size: 11.5px; } body.gogo .trip-pill.active { background: #043c5c; border-color: #043c5c; color: #ffffff; } body.gogo .trip-pill.active i, body.gogo .trip-pill.active span { color: #ffffff; } /* ---- airport sub-types: same treatment, wrapping row ---- */ body.gogo .airport-strip { display: flex; flex-wrap: wrap; gap: 6px; } body.gogo .airport-chip { flex: 1 1 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 10px; font-size: 12px; text-align: center; } /* ---- fields: two to a row ---- DOM order is From, To, Departure, Return, Pickup Time, Return Time. From and To span the full width; the four date/time boxes take one column each, so a one-way trip pairs Departure with Pickup Time and a round trip pairs Departure with Return and Pickup Time with Return Time. The hidden return fields are skipped by grid auto-placement, so no gaps are left behind. */ body.gogo .search-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.gogo .search-grid > .field:nth-child(1), body.gogo .search-grid > .field:nth-child(2) { grid-column: 1 / -1; } /* ---- 48px boxes, not 62px ---- */ body.gogo .search-grid .field label { font-size: 12px; margin-bottom: 4px; } body.gogo .search-grid .control { height: 48px; border-radius: 12px; padding: 0 12px; } body.gogo .search-grid .control i { font-size: 13px; } body.gogo .search-grid .booking-input { height: 46px; /* 16px stays - see the note at the top of this block. */ font-size: 16px; } /* ---- submit: full width, as theirs ---- */ body.gogo .search-cta { margin-top: 12px; padding: 0; display: block; } body.gogo .btn-search { width: 100%; min-height: 48px; border-radius: 14px; font-size: 16px; justify-content: center; } /* ---- the bits below the form, tightened to match ---- */ body.gogo .add-stop-btn { border-radius: 12px; font-size: 13px; } body.gogo .route-strip { gap: 8px; flex-wrap: wrap; } body.gogo .route-chip { border-radius: 10px; font-size: 12.5px; } } /* ========================================================================== CORRECTIONS TO THE BLOCK ABOVE - specificity, and a child I had not counted -------------------------------------------------------------------------- Three of the rules above silently lost, and one targeted the wrong element. Measured, not guessed - every winning selector below was read back out of document.styleSheets: 1. FIELD HEIGHT stayed 62px. theme.css has @media (max-width: 900px) body.gogo .search-grid .field .control -> 62px at (0,4,0). Mine was ".search-grid .control" at (0,3,0) and lost, even though mobile.css loads later - a media query adds no specificity. Fixed by matching their chain, ".field" included. 2. INPUT HEIGHT stayed 58px, same story: body.gogo .search-grid .field .control input -> 58px 3. THE SEARCH BUTTON stayed 262px wide and pill-shaped. theme.css sets body.gogo .search-cta .btn-search -> width 293px, radius 999px then narrows it to 262px under 900px. Mine was plain ".btn-search". 4. ".swap-cell" IS CHILD 2 of .search-grid - the From/Drop swap button. So the earlier "nth-child(2)" rule made the SWAP CELL full width and left the To field in a half-width column. Order is: From, swap, To, Departure, Return, Pickup Time, Return Time. Targeting by :has() instead of position, so inserting anything else into the grid later cannot silently break it again. Confirmed supported in the rendering engine before relying on it. ========================================================================== */ @media (max-width: 760px) { /* ---- full-width rows, by content rather than by index ---- */ body.gogo .search-grid > .field:has(#txtFrom), body.gogo .search-grid > .field:has(#txtTo), body.gogo .search-grid > .swap-cell { grid-column: 1 / -1; } /* The swap control is a 40px affordance between two fields, not a form row. */ body.gogo .search-grid > .swap-cell { display: flex; align-items: center; justify-content: center; min-height: 0; margin: -2px 0; } /* ---- 48px boxes: same chain theme.css uses, so this actually wins ---- */ body.gogo .search-grid .field .control { height: 48px; border-radius: 12px; padding: 0 12px; } body.gogo .search-grid .field .control input, body.gogo .search-grid .field .control select, body.gogo .search-grid .field .control .booking-input { height: 46px; /* 16px deliberately: under 16px iOS Safari zooms the page on focus. */ font-size: 16px; } /* ---- the submit, matching theme.css's own chain ---- */ body.gogo .search-cta .btn-search { width: 100%; min-height: 48px; height: auto; border-radius: 14px; font-size: 16px; } } /* ========================================================================== TWO LAST CORRECTIONS - and neither was a specificity fight -------------------------------------------------------------------------- Measured after the previous block landed: 1. THE SUBMIT stayed 262px wide even though my "width: 100%" was the winning declaration. The container was the constraint: ".search-cta" itself measured 262px, so 100% of it is 262px. Widening the button was never going to work while its parent was narrow. The parent gets the width instead. 2. THE FIELD BOX stayed 62px tall even though my "height: 48px" was last with equal specificity. height is not the only thing that sets a box's height - a larger min-height beats it, and I had only queried "height" when hunting for the winner. Setting both removes the ambiguity. Worth recording because theme.css carries SEVEN separate height declarations for ".control" and EIGHT width declarations for the search button, from successive rounds of appending. Anything changed here has to be measured afterwards rather than assumed, which is how both of these were caught. ========================================================================== */ @media (max-width: 760px) { /* 1. the container, not the button */ body.gogo .search-cta { width: 100%; max-width: none; display: block; } body.gogo .search-cta .btn-search { width: 100%; max-width: none; } /* 2. height AND min-height, or the taller of the two wins */ body.gogo .search-grid .field .control { height: 48px; min-height: 48px; max-height: 48px; } /* The swap control sits between From and Drop. It keeps a 44px tap target - it is a real button and shrinking it would undo earlier accessibility work - but the row around it is tightened so it costs as little height as possible. */ body.gogo .search-grid > .swap-cell { margin-top: -4px; margin-bottom: -4px; } } /* ========================================================================== MOBILE APP SHELL, PASS 1 - THE CALCULATOR AND THE HERO -------------------------------------------------------------------------- Everything in this block is mobile-only unless the comment says otherwise, and it is here rather than in theme.css for the usual reason: a palette rollback restores theme.css from a backup and would take it with it. The requests, and what each one turned out to be: - THE FROM/DROP SWAP ARROWS come out on a phone. They cost a whole grid row (44px plus two gaps) to save a customer retyping two fields they have usually only half filled in. On desktop they stay: there the button sits between two side-by-side fields where it costs nothing. - THE THREE AIRPORT CHIPS come out on a phone. The "two selected at once" was real and is fixed at its source in index.aspx - one chip was marked active in the markup while the hidden field was still empty, so the strip and the server disagreed from the first paint. With the default now set in script, hiding the strip does not lose the value. - THE GAP between Pickup Time and Add Stops, and between Add Stops and Search. Measured: .stops-block carried the form's full section spacing even though it is a single 44px button, and .search-cta added its own margin on top of the grid's row gap. - TRIP PILL ICONS were in the markup and rendering at 14px - but invisible. theme.css:2847 sets "body.gogo .trip-pill i { display: none }" as part of the radio-mark redesign, and the mobile block only ever set font-size, so display:none was never overridden. One declaration fixes it. - THE HERO WOULD NOT ZOOM on a phone because the animation is bound to ":hover", which a touch screen never delivers. It now runs on its own wherever hover is unavailable. ========================================================================== */ /* ---------------- swap arrows and airport chips: gone on mobile ---------- */ @media (max-width: 760px) { /* display:none rather than visibility, so the grid row goes too. The button is still in the DOM on purpose - index.aspx's applyTripType() sets swapCell.style.display for Local Trip, and removing the element would make that a null dereference. An inline style beats a stylesheet, so this rule is written with !important: applyTripType sets display:'' for every non-local trip type, which would otherwise re-show it on a phone. */ body.gogo .search-grid > .swap-cell { display: none !important; } /* Same reasoning: applyTripType toggles a "show" class on this strip, so it is hidden here regardless of that class. The sub-type still reaches the server - pickAirportType() defaults it to Airport Pickup. */ body.gogo .airport-strip, body.gogo .airport-strip.show { display: none !important; } } /* ---------------- trip pills: the icons are back, and legible ------------ */ @media (max-width: 760px) { /* Beats theme.css:2847's display:none - same specificity (0,2,1), and mobile.css loads after theme.css even following a palette rollback. */ body.gogo .trip-pill i { display: block; font-size: 15px; line-height: 1; color: inherit; } body.gogo .trip-pill.active i { color: #ffffff; } /* A little more room for the icon now that it is visible. */ body.gogo .trip-pill { min-height: 58px; gap: 5px; } } /* ---------------- the gaps below the fields, tightened ------------------- */ @media (max-width: 760px) { /* Search sits directly under the last field row. 12px was the value from the reference measurement; 8px reads as "part of the form" rather than as a separate block, which is what the reference does. */ body.gogo .search-cta { margin-top: 8px; } /* Add Stops is one 44px button. It does not need a section's worth of space above it, and it certainly does not need one below it when Search is next. DOM order is: grid, search-cta, local packages, stops-block - so this gap is the one between Search and Add Stops. */ body.gogo .stops-block { margin-top: 8px; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } body.gogo .add-stop-btn { margin-top: 0; margin-bottom: 0; min-height: 44px; } body.gogo .stops-hint { display: block; margin-top: 4px; font-size: 11.5px; } /* The route readout under it. */ body.gogo .route-strip { margin-top: 8px; } } /* ---------------- page gutter: the 16px that was still 10px -------------- */ /* Left over from the calculator rebuild. theme.css:2150 sets @media (max-width: 380px) body.gogo .gogo-search.at-top { padding-left: 10px } and the earlier rule here was ".gogo-search" without ".at-top", so it lost on specificity at the narrow end. Matching the chain, and covering the whole phone range rather than only the narrowest. */ @media (max-width: 760px) { body.gogo .gogo-search, body.gogo .gogo-search.at-top { padding-left: 16px; padding-right: 16px; } } /* ---------------- the watermark, as the reference uses it ---------------- */ /* A single very large, very quiet word behind the lead copy. Their version is the brand name at about 4x the heading size in near-transparent white; ours is the same idea in our own type. NO "overflow: hidden" ON THE BAND. That would have been the obvious way to keep the oversized text inside it, but the pickup and drop autocomplete lists are absolutely positioned inside .field and can extend past the band's bottom edge - clipping them would hide the suggestions, which is the one thing on this form that must never be hidden. The text is sized and positioned to stay inside instead, and the band keeps its own left/right padding as the limit. pointer-events: none is not optional here: the word sits over the top of the band, and without it the first tap on the lead area would hit the watermark. */ @media (max-width: 760px) { body.gogo .gogo-search.at-top { position: relative; overflow-x: clip; /* clips sideways only - vertical overflow still shows */ } body.gogo .gogo-search.at-top::before { content: "RC TRAVELS"; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 0; font-family: 'Barlow', 'Segoe UI', sans-serif; /* 40px, down from 62. At 62 the word ran nearly the full width of a 390px screen and read as a second heading competing with the real one instead of as a watermark behind it. Smaller also means it no longer reaches the gutters, which is what made it look like content. */ font-size: 40px; font-weight: 800; line-height: .9; letter-spacing: -1px; white-space: nowrap; /* Outlined, not filled: a filled word this size would compete with the heading sitting on top of it. */ color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); opacity: .9; pointer-events: none; user-select: none; } /* Everything real sits above it. */ body.gogo .gogo-search.at-top > * { position: relative; z-index: 1; } } /* The watermark is decoration; anyone who has asked for less motion or a high-contrast rendering does not need a ghost word behind their heading. */ @media (prefers-contrast: more) { body.gogo .gogo-search.at-top::before { display: none; } } /* ---------------- the logo, bigger on a phone ---------------------------- */ /* The header bar has room for it: measured at 390px the logo lockup ended at x=111 with the Call button not starting until x=183, so 70px of the bar was empty. The mark goes from 34px to 44px and the wordmark up with it. */ @media (max-width: 991px) { body.gogo .gogo-header .bar .rc-logo-img { width: auto; height: 44px; max-height: 44px; } body.gogo .gogo-header .bar .rc-logo-lockup .l1 { font-size: 17px; letter-spacing: .01em; } body.gogo .gogo-header .bar .rc-logo-lockup .l2 { font-size: 10.5px; } } /* Below 360px the tagline is the first thing to go rather than shrinking the mark back down - the brand name still reads, and the strapline is repeated in the footer. */ @media (max-width: 360px) { body.gogo .gogo-header .bar .rc-logo-lockup .l2 { display: none; } body.gogo .gogo-header .bar .rc-logo-img { height: 40px; max-height: 40px; } } /* ---------------- the hero actually zooms now ---------------------------- */ /* theme.css binds rcHeroBreathe to ".rc-original-hero:hover", which a touch screen never fires - so on a phone the Kumbh Mela banner sat perfectly still. "(hover: none)" is the honest test for that: it asks whether the primary pointer can hover at all, rather than guessing from screen width. */ @media (hover: none) { body.gogo .rc-original-hero .rc-original-hero-bg { animation: rcHeroBreathe 14s ease-in-out infinite; } } @media (hover: none) and (prefers-reduced-motion: reduce) { body.gogo .rc-original-hero .rc-original-hero-bg { animation: none; transform: scale(1.04); } } /* ========================================================================== INSTANT CAB: FROM A LINE OF TEXT TO SOMETHING WORTH TAPPING -------------------------------------------------------------------------- The pill was a flat navy capsule with an icon, a word and a number in a row. It now reads as an open switchboard: the icon gets its own translucent disc, a live dot pulses beside the label, the number sits under the label rather than after it, and a chevron on the right says the whole thing is a control. This applies at EVERY width, not just on a phone - the desktop version had the same problem, it was just less cramped. The gradient is our own two colours, navy into the lighter navy already used for the header hover state. The chevron and the disc borrow the logo yellow at low alpha so nothing new enters the palette. ========================================================================== */ body.gogo .instant-cab { align-items: center; gap: 11px; padding: 8px 14px 8px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: linear-gradient(135deg, #075275 0%, #043c5c 62%); box-shadow: 0 6px 18px rgba(4, 60, 92, .30), inset 0 1px 0 rgba(255, 255, 255, .10); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.gogo .instant-cab:hover, body.gogo .instant-cab:focus-visible { border-color: rgba(252, 200, 8, .55); box-shadow: 0 10px 24px rgba(4, 60, 92, .38), inset 0 1px 0 rgba(255, 255, 255, .14); transform: translateY(-1px); } /* ---- the icon disc ---- */ body.gogo .instant-cab .ic-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(252, 200, 8, .16); box-shadow: inset 0 0 0 1px rgba(252, 200, 8, .38); } /* (0,4,1) - beats theme.css's "body.gogo .instant-cab i" at (0,2,1), which sets 13px and would otherwise leave a tiny glyph inside a 30px disc. */ body.gogo .instant-cab .ic-ico i { font-size: 13px; color: #fcc808; line-height: 1; } /* ---- label over number ---- */ body.gogo .instant-cab .ic-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; } body.gogo .instant-cab .ic-label { display: inline-flex; align-items: center; gap: 6px; opacity: 1; font-size: 10.5px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: rgba(255, 255, 255, .70); line-height: 1.2; } /* The "we are answering" dot. Two rings so it reads as live rather than as a bullet point, and it is the only thing here that moves. */ body.gogo .instant-cab .ic-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .70); animation: rcLivePulse 2s ease-out infinite; } @keyframes rcLivePulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .70); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } @media (prefers-reduced-motion: reduce) { body.gogo .instant-cab .ic-live { animation: none; } } /* The number is the point of the pill, so it is the biggest thing in it. The underline that the previous pass added is dropped: the pill is now obviously a control, and an underline inside a button reads as a second link. */ body.gogo .instant-cab .ic-number { border-bottom: 0; text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; color: #ffffff; white-space: nowrap; font-variant-numeric: tabular-nums; } body.gogo .instant-cab:hover .ic-number, body.gogo .instant-cab:focus-visible .ic-number { color: #fcc808; text-decoration: none; } /* ---- the chevron ---- */ body.gogo .instant-cab .ic-go { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; border-radius: 50%; background: rgba(255, 255, 255, .10); transition: background .18s ease, transform .18s ease; } body.gogo .instant-cab .ic-go i { font-size: 10px; color: #ffffff; line-height: 1; } body.gogo .instant-cab:hover .ic-go, body.gogo .instant-cab:focus-visible .ic-go { background: #fcc808; transform: translateX(2px); } body.gogo .instant-cab:hover .ic-go i, body.gogo .instant-cab:focus-visible .ic-go i { color: #043c5c; } /* ---- phones: it now has two lines of content, so it is allowed to be wider than "max-content" and it must not wrap into a third ---- */ @media (max-width: 760px) { body.gogo .instant-cab { width: auto; max-width: 100%; margin: 0 auto 14px; padding: 8px 12px 8px 8px; flex-wrap: nowrap; } body.gogo .instant-cab .ic-number { font-size: 15.5px; } body.gogo .instant-cab .ic-label { font-size: 10px; letter-spacing: .08em; } } @media (max-width: 340px) { body.gogo .instant-cab .ic-go { display: none; } body.gogo .instant-cab .ic-number { font-size: 14.5px; } } /* ========================================================================== TAP FEEDBACK - NOTHING RESPONDED TO A TOUCH -------------------------------------------------------------------------- Two separate faults, and only one of them is "no :active state": 1. NO PRESSED STATE. Every interactive style on the site was written for ":hover", which a touch screen does not have. A tap therefore produced no visual change at all until the next page arrived - which on a slow connection is a second or more of the customer wondering whether they hit it, and tapping again. 2. STICKY HOVER, which is the other half of the airport-chip report. A mobile browser applies :hover to the last element tapped and LEAVES IT THERE until something else is tapped. So a chip that had been tapped kept its hover styling while a second chip carried the real "active" class - two highlighted chips, no bug in the class handling at all. Under "(hover: none)" the hover styles are neutralised, which removes the ghost. -webkit-tap-highlight-color is set rather than removed: the browser's default grey flash is inconsistent between elements, so it is replaced with one deliberate brand-tinted flash and a real pressed state underneath it. ========================================================================== */ @media (hover: none) { /* One consistent flash instead of the browser's default. */ body.gogo a, body.gogo button, body.gogo .trip-pill, body.gogo .book-mode, body.gogo .airport-chip, body.gogo .fleet-tab, body.gogo .local-pkg { -webkit-tap-highlight-color: rgba(252, 200, 8, .22); } /* ---- the pressed state ---- */ body.gogo .trip-pill:active, body.gogo .book-mode:active, body.gogo .airport-chip:active, body.gogo .fleet-tab:active, body.gogo .add-stop-btn:active, body.gogo .swap-btn:active, body.gogo .ac-list .ac-item:active { transform: scale(.97); filter: brightness(.96); transition: transform .06s ease-out; } /* Buttons that commit to something get a firmer press: a shorter shadow as well as the scale, so the button visibly sinks. */ body.gogo .btn-search:active, body.gogo .book-btn:active, body.gogo .confirm-btn:active, body.gogo .fr-book:active, body.gogo .rc-login-btn:active, body.gogo .rc-modal-btn:active, body.gogo .gc-fare-btn:active, body.gogo .rc-fab:active, body.gogo .instant-cab:active, body.gogo .rc-hero-wa:active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 6px rgba(4, 60, 92, .22); transition: transform .06s ease-out, box-shadow .06s ease-out; } /* Plain links and list rows: a tint rather than a squash, since scaling a line of text inside a paragraph looks like a glitch. */ body.gogo .gogo-nav .links a:active, body.gogo .gogo-footer a:active, body.gogo .policy-body a:active, body.gogo .faq-list summary:active { background: rgba(252, 200, 8, .14); border-radius: 6px; } /* ---- and the ghost hover states, neutralised ---- */ body.gogo .trip-pill:hover, body.gogo .airport-chip:hover, body.gogo .book-mode:hover, body.gogo .fleet-tab:hover { transform: none; } /* The chips are the specific case that was reported. Their hover rule paints a yellow ring identical in weight to the selected ring, so a stale hover was indistinguishable from a selection. The ring is reserved for the real thing. */ body.gogo .trip-pill:hover::before, body.gogo .trip-pill.active:hover::before { box-shadow: none; } body.gogo .airport-chip:hover { background: inherit; border-color: inherit; color: inherit; } /* .active is set by script and must still win, so it is restated after the neutralising rules above. */ body.gogo .airport-chip.active { background: #043c5c; border-color: #043c5c; color: #ffffff; } } /* ========================================================================== THE GAP BELOW THE FIELDS WAS NOT A MARGIN - THE SEARCH BUTTON IS ABSOLUTE -------------------------------------------------------------------------- MEASURED at 390px, after the margin changes above had landed: .search-grid y 348 -> 512 .stops-block y 520 -> 578 margin-top 8px (mine, and applied) .search-cta y 603 -> 651 margin-top 8px (mine, and applied) Search renders BELOW Add Stops while sitting ABOVE it in the markup, and a margin-top of 8px produced a 25px gap. Both are explained by the same thing: .search-cta is absolutely positioned. theme.css lifts it out of the flow to centre it on the card's lower edge - the comment in index.aspx says as much - and .search-body carries 46px of bottom padding to leave room for it. A margin on an absolutely positioned box is measured from its own offset position, so tightening it moves the button by 8px inside a 46px reservation and nothing else changes. Chasing the number would have meant re-tuning the padding, the offset and the margin together, and re-tuning all three again the next time anything in the card changed height. SO THE MOBILE CARD PUTS IT BACK IN THE FLOW. .search-body becomes a flex column and every child is given an explicit order, which is what finally makes the sequence say what the reference's does: fields -> local package chooser -> Add Stops -> distance readout -> Search Add Stops sits directly under the fields as a quiet secondary action and Search is the last thing in the card, full width. The gap between any two of them is now one number - the column's row-gap - instead of an interaction between a reservation, an offset and a margin. ORDER IS SET ON EVERY CHILD, not just the two being moved. An unset child defaults to order 0, which would place it ahead of everything numbered - and .search-body also holds fourteen hidden inputs, which are display:none and so are not flex items at all, but a future visible one would be. ========================================================================== */ @media (max-width: 760px) { body.gogo .search-body { display: flex; flex-direction: column; row-gap: 10px; /* The 46px was the reservation for the absolute button. Nothing is reserved any more. */ padding: 14px 14px 16px; } /* Back into the flow. static, not relative: theme.css also sets left/bottom on it, and those still apply to a relatively positioned box. */ body.gogo .search-body .search-cta { position: static; order: 5; margin: 2px 0 0; transform: none; } body.gogo .search-body .search-grid { order: 1; margin: 0; } body.gogo .search-body .local-pkg-block { order: 2; margin: 0; } body.gogo .search-body .stops-block { order: 3; margin: 0; } body.gogo .search-body .route-strip { order: 4; margin: 0; } body.gogo .search-body .search-foot { order: 6; margin: 0; } /* Add Stops is a secondary action sitting between two primary ones, so it is shrunk to look like one: text-weight, not button-weight. It keeps its 44px tap target, which is why the height and the visual weight are set separately. */ body.gogo .stops-block { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } body.gogo .add-stop-btn { align-self: flex-start; padding: 10px 12px; font-size: 13px; } } /* ========================================================================== INSTANT CAB: A PILL, NOT A BANNER -------------------------------------------------------------------------- MEASURED: 358px wide at a 390px viewport - the full content width - with the icon starting at x=97 and 80px of empty navy either side of the content. The earlier "width: auto" did that: .instant-cab is a block-level flex container, so auto fills the line, and "justify-content: center" then floated the contents in the middle of an over-wide capsule. fit-content sizes it to what is in it, which is what theme.css's "max-content" was doing before this pass widened it. max-width keeps it inside the gutter on a narrow screen. ========================================================================== */ @media (max-width: 760px) { body.gogo .instant-cab { width: fit-content; max-width: 100%; } } /* ========================================================================== MOBILE DENSITY PASS -------------------------------------------------------------------------- One theme runs through all of this: a phone screen is about 740px of usable height after the header, and every section on the homepage was taller than that on its own. The fixes are not "make everything smaller" - they are structural, because shrinking type only buys tens of pixels while changing a one-column list into two columns halves the height outright. MOBILE ONLY. Nothing here applies above 760px except where a comment says so. ========================================================================== */ /* ============ 1. FIELD LABELS AND PLACEHOLDERS ============================ Requested: the placeholder text ("Enter pickup location", the date and time formats) very small and very transparent, and the From / Drop labels picked out. THE INPUT'S OWN FONT-SIZE STAYS AT 16px. That is not an oversight - iOS Safari zooms the whole page when a focused field is under 16px and then leaves it zoomed, which turns the form into a side-scrolling mess. So the SIZE COMES DOWN ON THE PLACEHOLDER ONLY, via ::placeholder, which iOS does not read when deciding whether to zoom. The typed value stays comfortably readable at 16px, which is also the text the customer actually needs to check. ========================================================================== */ @media (max-width: 760px) { /* ---- the labels: small, spaced, and picked out in navy ---- */ body.gogo .search-grid .field label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #043c5c; margin-bottom: 3px; } /* From and Drop are the two fields a booking cannot happen without, so they get a yellow marker the date and time fields do not. :has() targets by content rather than by position - .swap-cell used to sit between them and any nth-child rule broke the moment it was hidden. */ body.gogo .search-grid > .field:has(#txtFrom) > label, body.gogo .search-grid > .field:has(#txtTo) > label { display: inline-flex; align-items: center; gap: 5px; color: #043c5c; } body.gogo .search-grid > .field:has(#txtFrom) > label::before, body.gogo .search-grid > .field:has(#txtTo) > label::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: #fcc808; } /* ---- the placeholders: tiny and faint ---- */ body.gogo .search-grid .field .control input::placeholder, body.gogo .search-grid .field .control .booking-input::placeholder { font-size: 11px; font-weight: 400; letter-spacing: .01em; color: #9aa3b0; opacity: .55; } /* ---- the native date and time text ---- An renders its own "dd-mm-yyyy" hint, which is not a placeholder and cannot be reached with ::placeholder. The WebKit shadow parts below are the only handle on it. Shrinking the PART rather than the input keeps the field itself at 16px, so the iOS zoom is still avoided. */ body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit, body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-text, body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-day-field, body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-month-field, body.gogo .search-grid .field .control input[type="date"]::-webkit-datetime-edit-year-field { font-size: 11.5px; color: #6b7484; } /* An empty date field is the faint state; once a date is chosen the value is real information and stays legible. */ body.gogo .search-grid .field .control input[type="date"]:not(:valid)::-webkit-datetime-edit { opacity: .5; } body.gogo .search-grid .field .control input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; padding: 0; margin-left: 0; } /* The time dropdown's own text. A . All three are now 11.5px in the same grey at the same opacity, so the row reads as one set of empty fields rather than four unrelated ones. THE FIELDS THEMSELVES STAY AT 16px. iOS Safari zooms the page when a focused input is under 16px and leaves it zoomed. A renders "dd/mm/yyyy" as shadow-DOM text, reachable only through ::-webkit-datetime-edit. Two rules earlier in this file were landing on it together: 11.5px in #8b95a4, and then opacity .7 over the top. On Chrome for Android the result was not faint, it was invisible. WHY NOT JUST DARKEN IT. Because how that shadow part renders when the value is empty differs between browsers and versions - Android Chrome in particular is inconsistent about drawing it at all - so tuning it is a fix that holds on the phone it was tested on and nowhere else. Ordinary text on the wrapper renders the same everywhere. HOW IT LINES UP. The control carries `padding: 0 14px` at this width and the input has no left padding of its own, so 14px puts our text exactly where the real value will appear. Nothing shifts when a date is picked. pointer-events: none is what keeps the field usable - the placeholder sits over the input, and without it the tap would land on the text instead of opening the date picker. The `date-empty` class is set by markDateState() in index.aspx, from the value itself. Not from :valid: an EMPTY date input matches :valid, which is the trap documented further up this file. ========================================================================== */ @media (max-width: 760px) { body.gogo .search-grid .field .control.date-empty { position: relative; } body.gogo .search-grid .field .control.date-empty::after { content: "DD/MM/YYYY"; position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11.5px; font-weight: 400; color: #8b95a4; letter-spacing: .3px; white-space: nowrap; pointer-events: none; z-index: 1; } /* Hide the native hint only while ours is showing, so the two never stack. More specific than the rules above by the extra class, so no !important. */ body.gogo .search-grid .field .control.date-empty input[type="date"]::-webkit-datetime-edit { opacity: 0; } }