/* * MOBILE HOMEPAGE HERO - V6.7.8 * ============================= * * WHY THIS FILE EXISTS * -------------------- * The mobile hero collage has now failed on a real iPhone while measuring * correctly in a desktop browser at the same width. Rather than tune the * previous implementation again, this file replaces the fragile parts of it * outright and is enqueued LAST on the front page, so no later stylesheet can * win on cascade order. * * WHAT WAS FRAGILE * ---------------- * The previous mobile collage relied on TWO rules holding at once: * * 1. a fixed `height: 210px` on the wrapper, and * 2. `position: absolute` on both
children. * * Absolutely positioned children contribute nothing to their parent's height, * so the wrapper's entire size came from rule 1 alone. If that single * declaration was lost for any reason - a stale cached stylesheet, an * optimiser dropping a rule, an engine resolving the flex-item height * differently - the wrapper collapsed to 0px and BOTH images vanished while * still being present, visible and opacity:1 in the DOM. That is exactly the * symptom reported: no images, and the section below riding up into the hero. * * WHAT REPLACES IT * ---------------- * The collage is now built entirely in normal flow: * * - the wrapper is a flex row; its height comes from its own children, * - both figures are in-flow flex items with a real width and aspect-ratio, * - the diagonal comes from margin offsets, not absolute coordinates, * - the overlap comes from a negative margin-left, not z-index stacking. * * There is no single declaration whose loss can zero the wrapper. If every * cosmetic rule here failed and only the markup survived, two images would * still occupy space and still be visible. * * `min-height` is kept as a floor so the layout also survives both images * failing to load. * * SELECTOR NOTE * ------------- * `.wt-home` is a class on
, NOT on . Selectors here are therefore * prefixed `main.wt-home`, which both matches and outranks the existing * `.wt-home ...` rules by one element token, on top of loading last. * * Nothing in this file applies above 767px, so the desktop hero is untouched. */ @media (max-width: 767px) { /* ------------------------------------------------------------------ * 1. HERO BOX * ------------------------------------------------------------------ * Real content height only. No viewport-derived minimum, no reserved * empty space, no large bottom padding. */ main.wt-home .wt-home-hero { display: flex; flex-direction: column; align-items: stretch; height: auto; min-height: 0; padding-top: 0; padding-bottom: 18px; } /* * The inner block carried 100.8px top and 92.8px bottom padding on * mobile. The bottom value was the single largest contributor to the * "large blank area below the trust badges". The top value only needs to * clear the sticky header. */ main.wt-home .wt-home-hero .wt-hero__inner { order: 1; max-width: none; padding-top: 72px; padding-bottom: 22px; } main.wt-home .wt-home-hero .wt-hero__actions { margin-top: 1.05rem; } main.wt-home .wt-home-hero .wt-hero__assurances { gap: 0.35rem; margin-top: 0.75rem; } /* ------------------------------------------------------------------ * 2. COLLAGE WRAPPER - in flow, content-sized * ------------------------------------------------------------------ * Sits after the trust badges (order 2) and before the end of the hero. * `height` is deliberately NOT fixed: the wrapper is sized by the cards * inside it. `min-height` is only a floor for the images-failed case. */ main.wt-home .wt-home-hero .wt-hero__motion-cards { order: 2; position: static; top: auto; right: auto; bottom: auto; left: auto; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; width: 100%; max-width: 100%; height: auto; min-height: 180px; max-height: none; margin: 0; padding: 0 12px; opacity: 1; visibility: visible; overflow: visible; pointer-events: none; } /* ------------------------------------------------------------------ * 3. THE TWO CARDS * ------------------------------------------------------------------ * Both are in-flow flex items. Widths are fixed in px (no vw) so the * composition is identical on every phone from 360px up and cannot be * re-scaled by a viewport-unit rounding difference. * * Geometry at any mobile width: * front (tire) 186 x 139 pushed down 48px * back (shop) 140 x 105 sits at the top, pulled 30px left * * group width = 186 + 140 - 30 = 296px, centred * wrapper height = 48 + 139 = 187px * back card hidden = 30 / 140 = 21% -> 79% visible * * 296px plus the few px the rotations add still leaves ~80px of slack * inside a 390px screen, so horizontal overflow is not possible. */ main.wt-home .wt-home-hero .wt-hero__motion-card { position: static; flex: 0 0 auto; display: block; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 28px rgba(6, 16, 26, .42); /* * experience.css gives the shop card `aspect-ratio: 1 / 1`, which on * mobile rendered it as a 140x140 square holding a 140x104 image and * left a dead strip along its bottom edge. Both cards share one ratio * here so the pair reads as a matched set. */ aspect-ratio: 4 / 3; } main.wt-home .wt-home-hero .wt-hero__motion-card img { display: block; width: 100%; /* * height MUST stay auto. With both width and height set, the browser * ignores aspect-ratio, which rendered the back card as a 140x140 * square next to a 4:3 front card. */ height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* Front card: larger, lower, slight anticlockwise tilt. */ main.wt-home .wt-home-hero .wt-hero__motion-card--tire { width: 186px; margin-top: 48px; transform: rotate(-1.5deg); z-index: 2; } /* Back card: smaller, higher, overlapped by the front card's corner. */ main.wt-home .wt-home-hero .wt-hero__motion-card--shop { width: 140px; margin-top: 0; margin-left: -30px; transform: rotate(2deg); z-index: 1; } /* A third layer would crowd a phone. Desktop keeps it. */ main.wt-home .wt-home-hero .wt-hero__motion-orbit { display: none; } /* ------------------------------------------------------------------ * 4. MOTION * ------------------------------------------------------------------ * +/- 4px only, and the rotation is repeated inside each keyframe so the * animation never cancels the tilt. Reduced motion keeps both images and * only stops the drift. */ @media (prefers-reduced-motion: no-preference) { main.wt-home .wt-home-hero .wt-hero__motion-card--tire { animation: wt-hero-float-a 7s ease-in-out infinite; } main.wt-home .wt-home-hero .wt-hero__motion-card--shop { animation: wt-hero-float-b 8.5s ease-in-out infinite .6s; } } @media (prefers-reduced-motion: reduce) { main.wt-home .wt-home-hero .wt-hero__motion-card--tire, main.wt-home .wt-home-hero .wt-hero__motion-card--shop { animation: none; } } /* ------------------------------------------------------------------ * 5. SECTION BOUNDARY * ------------------------------------------------------------------ * The finder used a negative top margin so it could overlap the hero on * desktop. On a phone that dragged "Find your tires" and its description * onto the dark hero background, which is what produced the unreadable * heading. The finder now starts cleanly after the hero. */ main.wt-home .wt-finder { margin-top: 0; padding-top: 28px; } main.wt-home .wt-finder .wt-container { padding-inline: 0.75rem; } }