/* * overrides.css — Geely. HAND-WRITTEN. Loaded after brand.css. * * brand.css next door is machine-generated: download-assets.cjs merges the four * stylesheets the capture pulled down into one file and rewrites every url() to a * local asset. Re-capturing the brand rewrites it wholesale, so an edit made there * does not survive. This file is what the generators do not touch, and it is wired * in via BrandDemo.overrides so scaffold.cjs re-emits the reference every time it * regenerates index.ts. * * --------------------------------------------------------------------------- * 1. The base typography, restored. * * geely.nz is a Next.js site using next/font, which emits one class per typeface * whose only job is to DEFINE a custom property: * * .__variable_ac33b3 { --font-inter: "Inter", "Inter Fallback" } * * and then sets the page's base font from it on the document element itself: * * html { font-family: var(--font-inter), sans-serif; font-size: 16px; ... } * * On the live site both land on , so the variable is in scope where it is * read. In the mock they are split: the snapshot is body inner HTML, so * sanitise.cjs carries the captured html/body classes onto a wrapper
INSIDE * the app's own body — while `html { … }` in brand.css still matches the app's real * , an ancestor of that wrapper. The property is defined below the element * that reads it, and a var() that resolves to nothing makes the whole declaration * invalid at computed-value time, so font-family falls back to the initial value. * * The result is not subtle and not local: EVERY line of body copy on the page * renders in Times New Roman. The wrong metrics re-wrap every paragraph, which is * what put the visual diff at 10.5% against a 3% gate — the fonts themselves are * fine and already local (see the @font-face block in brand.css). * * So define the variable at :root, where the rule that reads it can see it. This * restates nothing about the design — the site's own `html { … }` rule is left to * do its job, which is why the base font-size, weight and line-height are not * repeated here. * * --font-geely-bold needs no such help: it is read by `.font-geelyBold`, a class * inside the snapshot and therefore under the wrapper that defines it. * ------------------------------------------------------------------------ */ :root { --font-inter: "Inter", "Inter Fallback"; } /* --------------------------------------------------------------------------- * 2. The four model panels, visible on mobile. * * Each full-screen model panel (EX2, EX5, Starray, Riddara) hides its artwork * below 768px: `hidden … md:block` is display:none there. Three panels hide a bare * ; the Starray panel hides the wrapper
around its video poster, which * is why both selectors are needed to cover four panels. The live site * fills that gap by inserting a portrait-cropped mobile image with JavaScript at * mobile widths, and that image is in no capture we take: capture.cjs serialises * the DOM once, at the DESKTOP viewport, and the mobile pass only re-screenshots * it. The live mobile PNG therefore shows art the captured DOM never contained. * * Left alone the panels do not merely lose their pictures. Their copy is * `text-white` over what is supposed to be a photograph, so with no photograph * each panel renders as a blank white screen with invisible headings — four * screens of nothing, which on a phone is most of the demo. * * So show the desktop image below md as well. `object-fit: cover` centre-crops the * landscape shot to the portrait viewport, which frames the vehicle rather than * matching the live site's own mobile crop — the honest approximation of art * direction we cannot see. It is also why mobile will not close the last of its * pixel gap against the capture; desktop is the fidelity claim here. * * Both selectors are qualified with `.absolute`, which is what distinguishes a * panel's positioned backdrop from everything else in the snapshot that merely * carries `overflow-hidden`. Between them they match four elements, one per panel, * and nothing in the header or the footer. * ------------------------------------------------------------------------ */ @media screen and (max-width: 767px) { [data-demo-root] main img.absolute.hidden.object-cover, [data-demo-root] main div.absolute.hidden.h-screen { display: block; } }