@charset "UTF-8"; /* ========================================================================== CarHub — tokens.css Structure only: spacing, radius, type scale, motion, layout. THEME-INDEPENDENT. Nothing in this file changes when the site is reskinned, and for that reason NOT ONE COLOUR VALUE MAY APPEAR HERE. Colour lives in wwwroot/css/themes/*.css and nowhere else — see docs/THEMING.md. Load order in _Layout.cshtml: tokens.css -> themes/theme-.css -> base.css -> components.css ========================================================================== */ :root { /* ---- Spacing scale --------------------------------------------------- An 8px grid — docs/CARHUB_REDESIGN.md section 5 — with 4 and 12 as the two half-steps that a badge and a chip genuinely need. Nine steps, and no value between them. A margin of 10px is a bug, not a decision. --sp-9 is REDESIGN-01's addition and it is the section rhythm: the home page bands are 96px apart on a desktop, which is what stops seven bands reading as one long list. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px; /* ---- Radius ---------------------------------------------------------- docs/CARHUB_REDESIGN.md section 5: 6–8px on small controls, 10–14px on cards, 14–18px on the hero and the search container. --radius-pill is for chips and status badges, and the redesign document is explicit that a pill is for a status and not for a container. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---- Type scale ------------------------------------------------------ docs/CARHUB_REDESIGN.md section 4, in Inter. --fs-3xl hero headline, 48px desktop / 34px mobile (the 44–56 band) --fs-2xl page h1, 32px --fs-xl section heading, 28px (the 28–32 band) --fs-lg sub-heading, 22px --fs-price prices, 20px (the 18–22 band). Its own step because a price is the strongest text after a card title and it must not drift when a heading size is tuned. --fs-md card title / h3, 18px (the 17–19 band) --fs-base body, 16px at --lh-base --fs-sm metadata, 14px (the 13–14 band) --fs-xs the smallest label on a badge */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-price: 20px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 32px; --fs-3xl: 48px; /* Inter carries 400/500/600/700 out of one variable file, so a semibold costs no extra request. Card titles are 600 — docs/CARHUB_REDESIGN.md section 4 says 600–700 and 700 at 18px on a photo card is shouty. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.5; /* ---- Motion ---------------------------------------------------------- Two durations and one curve. docs/DESIGN_TOKENS.md allows animation on the countdown digits and simple hover states, and nowhere else. The redesign document says the same in section 5: "small lift/shadow increase; no dramatic animation". */ --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(.2, .7, .3, 1); /* ---- Layout ---------------------------------------------------------- --header-h is 70px, the middle of the redesign document's 68–72 band. --control-h is 44px because that is the minimum touch target section 14 asks for, and a control that is 40px on a phone is a control that gets missed. --control-h-sm is the desktop-only compact size and is never the only way to reach anything. */ --wrap: 1200px; --pad: 24px; --header-h: 70px; --rail-w: 260px; --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 48px; /* The hero, inside the redesign document's 420–520 band and deliberately NOT full screen — section 8 says so in as many words. TWO HEIGHTS, AND THE SHORTER ONE IS NOT A FALLBACK. REDESIGN-01b Part 1: with the photograph the band is 460px, because there is a picture filling it. With Site:HeroImage unset there is no picture to fill anything, so the band drops to the bottom of the range and the content centres in it — 460px of empty navy is the shape the client rejected, 420px of centred navy is a deliberate dark band. */ --hero-h: 460px; --hero-h-short: 420px; /* THE CITY LISTING'S BAND IS SHORTER, AND THE NUMBER IS A MEASUREMENT. BUILD-12a Part 5 asks for 280-340px and this is the middle of it. The home page's band is 460 because that page's job is to look like somewhere worth searching. A city listing's job is to show cars: at 1366x768 the

, the Filters button, the sort bar and the first row of cards all have to be above the fold, and 460 puts the first card under it. BUILD-12b PUT THE BREADCRUMB AND THE

INSIDE THE BAND, and 300px is still the number: it holds a breadcrumb, a two-line heading and --sp-5 of air above and below with room to spare, and it costs the page nothing, because the heading it now contains used to be stacked underneath it. --hero-h-city-empty is the same band with no photograph behind it, and BUILD-12b raised it from 140 to 220 because it is no longer empty -- it carries the same white breadcrumb and heading and has to look like a deliberate dark band rather than a photograph that failed to arrive. It is still shorter than 300, for the same reason --hero-h-short is shorter than --hero-h: there is no picture for the extra height to be. Lahore ships in that state on purpose: its photograph IS the home page hero. --hero-h-city-page is /leasing/, which carries a headline and a line of copy and no search panel under it. */ --hero-h-city: 300px; --hero-h-city-empty: 220px; --hero-h-city-page: 360px; /* ---- Grid ------------------------------------------------------------ Listing and dealer grids are three across on desktop, and the card image is locked to 4:3 so the page does not shift while photos load. */ --card-aspect: 4 / 3; --grid-gap: var(--sp-5); } /* The one motion override that is not a preference. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; } } /* The hero headline drops to the 34–40 band on a phone, and the page padding with it. docs/CARHUB_REDESIGN.md sections 4 and 14. */ @media (max-width: 640px) { :root { --fs-3xl: 34px; --fs-2xl: 26px; --fs-xl: 22px; --hero-h: 420px; --hero-h-short: 380px; /* A phone screen is 640-850px tall in CSS pixels and the whole point of the shorter band is that the cars are visible. 220 keeps the photograph readable and still leaves the

and the first card in view -- and the heading is inside the band now, so the 220 buys the page a breadcrumb and an

as well as a photograph. It absorbs a two-line heading without growing, which is what "7 Used Cars in Gujranwala" is at 320px and what "1,240 Used Cars in Sheikhupura" is at every width below 768. It is a min-height, so a third line grows the band rather than clipping it. */ --hero-h-city: 220px; --hero-h-city-empty: 170px; --hero-h-city-page: 300px; } }