/* ═══════════════════════════════════════════════════════════ ONE ACCENT SYSTEM — brand gold, nothing else. Light sections : ink text on cream, gold = FILLS Dark sections : cream text on ink, gold = TEXT (gold text on cream is 2.1:1 — never used) ═══════════════════════════════════════════════════════════ */ :root{ --paper:#F5F0E4; --paper-2:#EBE4D3; --paper-3:#E1D8C2; --ink:#141210; --ink-2:#575046; /* Sampled from the company logo (48,941 gold pixels). #BE9941 is the single most common colour in the mark. */ --gold:#BE9941; /* brand gold — borders, accents, fills 6.96:1 w/ ink */ --gold-fill:#BE9941; /* fill blocks (ink text sits on top) */ --gold-dp:#A07F31; /* deeper — hover / pressed states */ --gold-lt:#E4C169; /* gold as TEXT on dark 10.79:1 on ink */ --bd:2.5px; --sh:6px; --ease:cubic-bezier(.2,.9,.3,1); /* 1240, not 1440. Going wide to fix the alignment also removed ~100px of side margin on each edge, which reads as the whole page zoomed in. The alignment fix was making every section share ONE value -- the value itself should be the narrower one. */ --maxw:1340px; /* Must include the border: the header is .nav-in (70px) PLUS its 2.5px bottom border. Pulling the hero up by only 70px left a 2px strip of cream page background showing above the transparent bar. */ --navh:calc(70px + var(--bd)); --pad:clamp(1.1rem,3.5vw,2.6rem); --gap:clamp(2.8rem,6vw,5.2rem); --f-xl:clamp(2.5rem,1.1rem + 6.1vw,5.4rem); --f-lg:clamp(1.9rem,1.3rem + 2.8vw,3.6rem); --f-md:clamp(1.3rem,1.12rem + 1vw,1.9rem); --f-bd:clamp(1rem,.97rem + .2vw,1.12rem); --f-sm:clamp(.8rem,.77rem + .15vw,.88rem); } *{box-sizing:border-box} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--paper);color:var(--ink); font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;font-size:var(--f-bd);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} p{margin:0}a{color:inherit;text-decoration:none}img{display:block;max-width:100%} h1,h2,h3,h4{font-family:Syne,ui-sans-serif,system-ui,sans-serif;font-weight:800;margin:0;line-height:1;letter-spacing:-.03em} .tnum{font-variant-numeric:tabular-nums} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} /* ═══════════ LARGE-SCREEN SCALE ═══════════ On a 1920px monitor at 100% browser zoom the design sat too small -- the client was browsing at 110% zoom and asked for that to be the default. `zoom` on reproduces browser zoom exactly, including px values the nav height, borders and the docket depend on; scaling --maxw and the root font-size instead would leave every px-based dimension behind. Verified against the real thing: client's 110% view (viewport 1745 rendered at 1.1) vs this at viewport 1920 -- column 1474/1474, side margin 223/223, nav 79/79, h1 145/144. Sticky nav, shrink behaviour and hit testing all still correct; no horizontal scroll from 1700 to 2560. 1700px is the floor, not a round number: zoom divides the usable width by 1.1, so the side margin is (W/1.1 - 1340)/2. Below ~1700 that margin drops under 110px and the page starts to look cramped rather than larger. Every width under 1700 keeps the unscaled design, which is the one the gates at 1440 and 390 already cover. NOTE getBoundingClientRect() already returns zoomed values -- do not multiply by the zoom factor when measuring, or every number comes out 10% high. */ @media(min-width:1700px){html{zoom:1.1}} .sec{padding-block:var(--gap)} /* The deposit block and the closing CTA are
and
-- neither carries .sec, so neither got the page's vertical rhythm. Measured content gaps were 85px and 11px against a 166px standard everywhere else. */ section.dk:not(.sec):not(.hero):not(.px),section.close{padding-block:var(--gap)} /* gold used as a BLOCK on light ground */ .gblock{background:var(--gold-fill);border:var(--bd) solid var(--ink);padding:0 .16em;display:inline-block; box-shadow:5px 5px 0 var(--ink);transform:rotate(-1.4deg)} .rule{height:var(--bd);background:var(--ink);border:0;margin:0} .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:var(--f-sm); text-transform:uppercase;letter-spacing:.1em} .eyebrow::before{content:"";width:13px;height:13px;background:var(--gold-fill);border:2px solid var(--ink);flex:none} .tag{display:inline-block;font-weight:700;font-size:.74rem;letter-spacing:.02em;border:var(--bd) solid var(--ink); background:var(--gold-fill);color:var(--ink);padding:.3rem .7rem;box-shadow:3px 3px 0 var(--ink)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer; font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:var(--f-bd);line-height:1; padding:1rem 1.5rem;border:var(--bd) solid var(--ink);background:var(--gold-fill);color:var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink);transition:transform .1s var(--ease),box-shadow .1s var(--ease);min-height:52px} .btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink);background:var(--gold-dp)} .btn.ghost:hover,.btn.dark:hover{background:transparent} .dk .btn.ghost:hover{background:#F5F0E4} .btn:active{transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--ink)} .btn.ghost{background:transparent} .btn.dark{background:var(--ink);color:var(--paper)} .btn svg{width:18px;height:18px;flex:none} @media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}} .sh{max-width:60ch;margin-bottom:clamp(1.5rem,3vw,2.4rem)} .sh .eyebrow{margin-bottom:.9rem} .sh h2{font-size:var(--f-lg)} .sh p{color:var(--ink-2);margin-top:.9rem;font-size:1.05rem;line-height:1.6;max-width:50ch} .sh .job{font-weight:700;font-size:var(--f-sm);color:var(--ink-2)} /* ═══════════ DARK PANELS (cinematic beats) ═══════════ */ .dk{--paper:#141210;--paper-2:#1F1B16;--ink:#F5F0E4;--ink-2:#B9B1A2; background:#141210;color:#F5F0E4;position:relative;overflow:hidden;border-block:var(--bd) solid #141210} .dk .eyebrow::before{background:var(--gold)} .dk .tag{background:var(--gold-fill);color:#141210;border-color:#F5F0E4;box-shadow:3px 3px 0 #F5F0E4} .dk .btn{border-color:#F5F0E4;box-shadow:var(--sh) var(--sh) 0 #F5F0E4} .dk .btn:hover{box-shadow:4px 4px 0 #F5F0E4} .dk .btn.ghost{background:transparent;color:#F5F0E4} .dk .btn.ghost:hover{background:#F5F0E4;color:#141210} .dk .sh p{color:#B9B1A2} /* on dark, gold becomes TEXT */ .dk .gtext{color:var(--gold-lt)} .dk .bg{position:absolute;inset:0;z-index:0} .dk .bg img{width:100%;height:100%;object-fit:cover} .dk .scrim{position:absolute;inset:0;z-index:1} .dk .wrap{position:relative;z-index:2} /* ═══════════ GOOGLE RATING BADGE ═══════════ Renders only when a real rating is set (see tcrc-design.php). Nothing here invents a score: an unverified star rating is a fabricated review signal and a manual-action risk, so the fallback is an honest link with no number. */ /* Solid cream, not a translucent outline. At 6% opacity on a dark photograph the badge was there but nobody saw it, which defeats the point of social proof. It is now the brightest object in the left column after the H1. */ /* Literal colours throughout: this badge sits inside .dk, which flips --ink to cream, so var(--ink) here painted cream text on a cream badge and the 4.9 was invisible. Fifth .dk collision on this project. */ .gbadge{position:relative;display:inline-flex;align-items:center;gap:.7rem; padding:.56rem .95rem .56rem .7rem;text-decoration:none; border:2.5px solid #141210;background:#F5F0E4; box-shadow:4px 4px 0 #BE9941; transition:transform .14s var(--ease),box-shadow .14s var(--ease)} .gbadge:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #BE9941} /* This is the only third-party proof above the fold and it was being missed against the photograph. It emits a slow gold ping rather than changing colour, so it draws the eye without adding a hue the palette does not have. The ring is a pseudo-element, so it cannot affect layout or the badge's tap target. */ .gbadge::after{content:"";position:absolute;inset:-3px;border:2.5px solid #E4C169; pointer-events:none;opacity:0;animation:gbping 3s cubic-bezier(.22,.61,.36,1) infinite} @keyframes gbping{0%{transform:scale(1);opacity:.9} 65%{transform:scale(1.14);opacity:0}100%{transform:scale(1.14);opacity:0}} @media(prefers-reduced-motion:reduce){.gbadge::after{animation:none}} .gbadge:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .gb-g{width:26px;height:26px;flex:none;display:block} .gb-txt{display:flex;flex-direction:column;line-height:1.15} .gb-top{display:flex;align-items:center;gap:.42rem} .gb-score{font-family:Syne,sans-serif;font-weight:800;font-size:1.34rem;color:#141210; font-variant-numeric:tabular-nums} .gb-stars{display:inline-flex;gap:1px} .gb-stars svg{width:15px;height:15px;color:#A07F31} .gb-sub{font-size:.79rem;color:#575046;letter-spacing:.02em;font-weight:600} .gb-sub u{text-decoration:none;border-bottom:1px solid rgba(20,18,16,.4)} /* ═══════════ INSTAGRAM REELS ═══════════ Static self-hosted covers, not Instagram's embed script. The embed pulls ~400KB of third-party JS per post and sets cookies before anyone opts in; a 37KB image that links out does the same job. */ .reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem} /* 1fr, filling the column. This is the ORIGINAL treatment and the client's verdict is final: "the first attempt you created, that was the perfect size for that section". Caps of 250 and 320 were both tried and both rejected as too small. Do NOT cap these again. A reel cover is 9:16, so the height simply follows the column width. */ @media(min-width:760px){.reels{grid-template-columns:repeat(3,1fr);gap:1.2rem}} .reel{position:relative;display:block;aspect-ratio:9/16;overflow:hidden; border:var(--bd) solid var(--ink);background:var(--paper-3);text-decoration:none; box-shadow:var(--sh) var(--sh) 0 var(--ink); transition:transform .18s var(--ease),box-shadow .18s var(--ease)} .reel:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)} .reel:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .reel img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s var(--ease)} .reel:hover img{transform:scale(1.045)} .reel::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(8,7,6,.92) 6%,rgba(8,7,6,.25) 42%,transparent 68%)} .reel-play{position:absolute;top:.7rem;right:.7rem;z-index:2;width:34px;height:34px; display:grid;place-items:center;background:var(--gold-fill);color:#141210; border:2px solid #141210} .reel-play svg{width:17px;height:17px} .reel-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.85rem .8rem .9rem; font-weight:600;font-size:.86rem;line-height:1.35;color:#F5F0E4} .reels-foot{display:flex;justify-content:center;margin-top:1.4rem} .reels-foot .btn{display:inline-flex;align-items:center;gap:.5rem} @media(prefers-reduced-motion:reduce){ .reel,.reel img{transition:none} .reel:hover{transform:none} .reel:hover img{transform:none}} /* Tagline. Demoted from the H1 so the H1 can carry the head term ("car rental in chandigarh", 9,900/mo) -- the line is still the brand's, it just is not doing the SEO work any more. */ /* Cream, not gold. Counting the gold block, the badge shadow, the button, the trust bar and the docket rule, a gold tagline was the seventh gold thing in one screen. The accent has to be rationed to mean anything. */ .tagline{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em; font-size:clamp(1.02rem,.9rem + .55vw,1.28rem);line-height:1.2; color:rgba(245,240,228,.82);margin:1rem 0 0} /* ═══════════ GOOGLE REVIEWS ═══════════ */ .rv-card{margin:0;padding:1.1rem 1.15rem 1.2rem;background:rgba(245,240,228,.055); border:2px solid rgba(245,240,228,.16);display:flex;flex-direction:column;gap:.65rem} .rv-stars{display:inline-flex;gap:2px} .rv-stars svg{width:15px;height:15px;color:var(--gold-lt)} .rv-card blockquote{margin:0;font-size:.92rem;line-height:1.55;color:#D6CFC2} .rv-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.1rem; padding-top:.55rem;border-top:1px solid rgba(245,240,228,.14)} .rv-card figcaption b{font-family:Syne,sans-serif;font-weight:800;font-size:.95rem;color:#F5F0E4} .rv-card figcaption span{font-size:.74rem;color:#9B9284} .rv-foot{display:flex;justify-content:center;margin-top:1.5rem} /* Brand mark inside a section eyebrow, for the Instagram and Google blocks. A logo next to the label is what makes those two read as sourced rather than as claims we typed ourselves. */ /* The eyebrow already draws a gold square via ::before. With a brand logo beside it that is two markers on one label, so the square is dropped here. */ .eb-mark{display:inline-flex;align-items:center;gap:.5rem} .eb-mark::before{display:none} .brandmark{width:17px;height:17px;flex:none;display:block} /* The Instagram mark is the real app icon -- filled rounded square in the brand gradient with a white camera cutout -- not a monochrome outline. An outline in currentColor is not recognised at 17px, and recognition is the whole point of putting the logo there. Slightly larger than a plain glyph so the cutout reads. */ .igmark{width:20px;height:20px} .eb-mark .brandmark{color:currentColor} /* ═══════════ REVIEW MARQUEE ═══════════ The track holds two identical copies of the eight cards and slides exactly -50%, so the loop closes on itself with no visible seam and no JS. Pauses on hover and on focus so nobody has to chase a moving link, and stops dead under prefers-reduced-motion, where it becomes a plain scrollable row. */ .rv-marquee{position:relative;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .rv-track{display:flex;gap:1rem;width:max-content; animation:rvslide 66s linear infinite} .rv-marquee:hover .rv-track,.rv-marquee:focus-within .rv-track{animation-play-state:paused} @keyframes rvslide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rv-card{margin:0;padding:1.1rem 1.15rem 1.2rem;background:rgba(245,240,228,.055); border:2px solid rgba(245,240,228,.16);display:flex;flex-direction:column;gap:.65rem; width:310px;flex:none} .rv-stars{display:inline-flex;gap:2px} .rv-stars svg{width:15px;height:15px;color:var(--gold-lt)} .rv-card blockquote{margin:0;font-size:.9rem;line-height:1.55;color:#D6CFC2} .rv-card figcaption{margin-top:auto;display:flex;flex-direction:column;gap:.1rem; padding-top:.55rem;border-top:1px solid rgba(245,240,228,.14)} .rv-card figcaption b{font-family:Syne,sans-serif;font-weight:800;font-size:.95rem;color:#F5F0E4} .rv-card figcaption span{font-size:.74rem;color:#9B9284} .rv-foot{display:flex;justify-content:center;margin-top:1.5rem} /* The heading block only fills the left half of the column, so the arrows sit in the space beside it rather than floating over the cards -- it uses dead space and keeps the controls clear of the review text. */ .rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem; margin-bottom:1.6rem} .rv-head .sh{margin-bottom:0} /* Hover-reveal, per the client: the arrows appear when the cursor is over the reviews section, not permanently. Touch devices have no hover, so they get them always -- otherwise the control would be unreachable on a phone. NOTE the nav must NOT carry the .rv scroll-reveal class. .rv.in sets opacity:1 at specificity (0,2,0), which outranks .rv-nav (0,1,0), so the arrows stayed visible no matter what this rule said. It is a control, not content; it does not need a reveal. */ .rv-nav{gap:.6rem;flex:none;padding-bottom:.25rem;opacity:0;pointer-events:none; transition:opacity .2s var(--ease)} .rv-nav[hidden]{display:none} .rv-nav:not([hidden]){display:flex} #reviews:hover .rv-nav,#reviews:focus-within .rv-nav{opacity:1;pointer-events:auto} @media(hover:none){.rv-nav{opacity:1;pointer-events:auto}} .rvbtn{width:50px;height:50px;flex:none;display:inline-flex;align-items:center; justify-content:center;cursor:pointer;padding:0;background:transparent;color:#F5F0E4; border:var(--bd) solid rgba(245,240,228,.34); transition:background .14s var(--ease),border-color .14s var(--ease), color .14s var(--ease),transform .1s var(--ease)} .rvbtn:hover{background:var(--gold-fill);border-color:#F5F0E4;color:#141210} .rvbtn:active{transform:translate(2px,2px)} .rvbtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .rvbtn svg{width:21px;height:21px} @media(max-width:720px){.rv-head{flex-direction:column;align-items:flex-start;gap:1.1rem}} /* The marquee keeps running -- it was never meant to become a stepped rail. The arrows apply an EXTRA offset on a wrapper while the animation continues underneath, so pressing one nudges the row without stopping the drift. Because the track is two identical copies, the content is periodic with period = half the track, so the offset is wrapped into (-half, 0] and never runs out of cards. */ .rv-shift{width:max-content;transform:translateX(var(--sx,0px)); transition:transform .55s cubic-bezier(.22,.61,.36,1)} @media(prefers-reduced-motion:reduce){.rv-shift{transition:none}} @media(prefers-reduced-motion:reduce){ .rv-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none} .rv-track{animation:none}} /* ═══════════ INNER-PAGE HERO ═══════════ Deliberately NOT the homepage .hero. That one carries a full-bleed photograph, a scrim and the glass docket, and it exists to sell. A service page is landed on from a search with a specific question, so its hero states the answer and gets out of the way -- eyebrow, H1, lede, then the jump row. */ .phero{position:relative} /* Smaller than the homepage H1. This one is a descriptive sentence rather than a three-word statement, so at hero scale it filled three lines and pushed the lede and the jump row below the fold. */ .phero h1{font-size:clamp(2.05rem,1.3rem + 2.9vw,3.35rem);max-width:19ch} .phero .lede{max-width:56ch;font-size:var(--f-md);line-height:1.55;color:var(--ink-2); margin-top:1rem} .phero .lede a{color:inherit;text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1px;text-decoration-color:var(--gold)} .phero .lede a:hover{color:var(--gold-lt)} .phero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem} /* The jump row. 27 cards is a long scroll, and this is what stops the bounce -- four taps straight into the class the visitor came for. */ .jump{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem} .btn.sm{padding:.6rem .95rem;min-height:44px;font-size:.85rem;box-shadow:3px 3px 0 var(--ink)} .btn.sm:hover{box-shadow:2px 2px 0 var(--ink)} /* ═══════════ FLEET PAGE — every category, every dock ═══════════ The homepage shows one category at a time behind tabs, so site.css hides the others with `.js .fb-group{display:none}`. This page has no tabs and every category is on the page, so that rule has to be overridden -- by specificity (0,3,0 beats 0,2,0), not by !important. */ .js .fb-all .fb-group{display:block} /* NO --dkw override here, deliberately. Squeezing the strips to 118px so the 8-car group would fit turned every car into a sliver you cannot recognise -- fitting the row was the wrong thing to optimise for. The homepage's 150px is the width at which a strip reads as a car, and the overflow is handled the way the homepage handles it: the JS-injected arrows and the edge fade. */ .fb-all + .fb-all{margin-top:clamp(1.6rem,3.5vw,2.6rem)} .fb-all{scroll-margin-top:96px} /* ═══════════ SERVICE-PAGE HERO ═══════════ The generic one, used by every service page that is not the fleet page: a photograph, a wash, and a text column. Deliberately smaller than the homepage hero — someone lands here from a specific search and wants the answer, not a poster. Note .shero .wrap h1, not .shero h1: the latter ties with .hero h1 at (0,1,1) and .hero h1 is declared later, so it would silently win. */ .shero{position:relative;overflow:hidden} .shero .scrim{background:linear-gradient(100deg, rgba(20,18,16,.97) 0%,rgba(20,18,16,.93) 34%,rgba(20,18,16,.7) 58%,rgba(20,18,16,.5) 100%)} @media(max-width:900px){.shero .scrim{background:linear-gradient(180deg, rgba(20,18,16,.9) 0%,rgba(20,18,16,.8) 45%,rgba(20,18,16,.95) 100%)}} .shero .wrap{position:relative;z-index:2;min-height:clamp(280px,32vw,380px); display:flex;flex-direction:column;justify-content:center} .shero .wrap h1{max-width:20ch;font-size:clamp(1.75rem,1rem + 2.3vw,2.8rem);line-height:1.04} .shero .wrap .lede{max-width:52ch;font-size:1rem;line-height:1.55;margin-top:1rem} .shero .hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem} /* ═══════════ ROUTE / RATE ROWS ═══════════ Used where a page lists journeys rather than cars. Distance and drive time are facts we have; the FARE is not published anywhere, so the row ends in a quote link rather than an invented number. */ .rts{display:grid;grid-template-columns:1fr;gap:.6rem} .rt2{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap; padding:.9rem 1.05rem;background:var(--paper);border:var(--bd) solid var(--ink); box-shadow:4px 4px 0 var(--ink); transition:transform .14s var(--ease),box-shadow .14s var(--ease)} .rt2:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gold)} .rt2 b{font-family:Syne,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em; min-width:11ch} .rt2 .m{display:flex;gap:1.1rem;margin-left:auto;flex-wrap:wrap} .rt2 .m span{font-size:.8rem;color:var(--ink-2)} .rt2 .m span i{font-style:normal;display:block;font-size:.62rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);opacity:.75} .rt2 .m span b{font-family:Syne,sans-serif;font-size:.95rem;min-width:0;display:block} .rt2 .go{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.8rem; text-decoration:none;color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold); display:inline-flex;align-items:center;min-height:44px;white-space:nowrap} .rt2 .go:hover{box-shadow:inset 0 -2px 0 var(--ink)} /* ═══════════ FLEET-PAGE HERO — the wall ═══════════ Every car in the fleet, tiled behind the headline. The scale of the fleet is the argument this page exists to make, so it is shown rather than claimed. THE BUG THAT SURVIVED FOUR REDESIGNS, recorded so it is not reintroduced: .phero h1{max-width:19ch} was what forced the headline onto three lines, and .hero .lede caps at 46ch. Everything in this hero was capped narrow, so no change of font size could ever make it reach the right edge. And the override has to be .phero-2 .wrap h1, not .phero-2 h1 -- the latter ties with .hero h1 at (0,1,1) and loses on source order, which is why the first attempt at the size fix did nothing at all. */ .phero-2{position:relative;overflow:hidden} .wall{position:absolute;inset:0;display:grid;gap:2px;background:#241F19; grid-template-columns:repeat(4,1fr)} @media(min-width:600px){.wall{grid-template-columns:repeat(7,1fr)}} @media(min-width:1100px){.wall{grid-template-columns:repeat(9,1fr)}} .wall span{overflow:hidden;background:var(--ink)} /* .48, not .6: several cars are photographed on white studio grounds, and at .6 those tiles washed out the nav row sitting over them. */ .wall img{width:100%;height:100%;object-fit:cover;display:block;opacity:.48} /* The scrim is a radial from the headline's corner, so the tiles stay legible on the far side while the type sits on near-solid ground. */ /* A horizontal wash, not a radial. The radial fell off by 44% of the width while the text column runs to about 48%, so the gold half of the headline sat on lit car tiles and lost contrast. This holds near-solid ground under the whole text column and only opens up past it. */ /* Two layers: a horizontal wash that holds the text column, plus a short vertical one so the sticky nav always has dark ground under it whatever car happens to tile behind it. */ .phero-2 .scrim{background: linear-gradient(180deg,rgba(20,18,16,.9) 0,rgba(20,18,16,.5) 78px,rgba(20,18,16,0) 130px), linear-gradient(100deg,rgba(20,18,16,.985) 0%,rgba(20,18,16,.965) 30%, rgba(20,18,16,.88) 46%,rgba(20,18,16,.6) 62%,rgba(20,18,16,.42) 100%)} @media(max-width:900px){.phero-2 .scrim{background:linear-gradient(180deg, rgba(20,18,16,.93) 0%,rgba(20,18,16,.82) 46%,rgba(20,18,16,.95) 100%)}} .phero-2 .wrap{position:relative;z-index:2; min-height:clamp(320px,42vw,440px);display:flex;flex-direction:column;justify-content:center} .phero-2 .wrap h1{max-width:21ch;font-size:clamp(1.75rem,1rem + 2.35vw,2.85rem);line-height:1.03} .phero-2 .wrap .lede{max-width:48ch;font-size:1rem;line-height:1.55;margin-top:1rem} /* Jump chips. Four, so a 26-car page can be skipped straight into. */ .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem} .chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px; padding:.5rem .8rem;text-decoration:none;color:#F5F0E4; border:var(--bd) solid #F5F0E4;background:rgba(20,18,16,.6); font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.82rem; transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease)} .chip b{font-family:Syne,sans-serif;font-weight:800;color:var(--gold-lt)} .chip:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold); background:rgba(20,18,16,.45)} .chip:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* Inside .dk, --ink resolves to CREAM, so the ticker's border has to be pinned back to ink or it gains two pale rules against the gold. */ .phero-2 > .tick{position:relative;z-index:2;border-block-color:#141210} /* ═══════════ THE 4x4 ROW ═══════════ This block used to be three paragraphs of prose ending 804px into a 1474px column. Seven cars exist, with photographs, and they are the highest-intent models on the site -- so they go in, full width, in price order. */ .fx-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-top:1.6rem} @media(min-width:640px){.fx-row{grid-template-columns:repeat(4,1fr)}} @media(min-width:1080px){.fx-row{grid-template-columns:repeat(7,1fr);gap:.8rem}} .fx{position:relative;display:block;text-decoration:none;color:var(--ink); border:var(--bd) solid var(--ink);background:var(--paper-2);overflow:hidden; transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .fx:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--gold)} .fx:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .fx-img{display:block;aspect-ratio:4/5;overflow:hidden;background:#EDEBE6} .fx-img img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .3s var(--ease)} .fx:hover .fx-img img{transform:scale(1.06)} .fx-b{display:block;padding:.55rem .6rem .5rem;border-top:var(--bd) solid var(--ink)} .fx-b b{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:.86rem; line-height:1.15;letter-spacing:-.01em} .fx-b i{display:block;font-style:normal;font-size:.66rem;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-top:.15rem} .fx-p{position:absolute;top:0;right:0;background:var(--gold-fill);color:#141210; border-left:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink); font-family:Syne,sans-serif;font-weight:800;font-size:.8rem;padding:.28rem .45rem} .fx-p small{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.62rem} /* Heading and prose sit side by side so the copy stops being a lonely column. */ .fx-intro{display:grid;grid-template-columns:1fr;gap:1.2rem 2.6rem} @media(min-width:900px){.fx-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end}} .fx-intro p{color:var(--ink-2);line-height:1.6;margin:0} .fx-intro p + p{margin-top:.8rem} /* ═══════════ FACT GRID — replaces the 11-row terms table ═══════════ Same verified content; a spreadsheet was the dullest possible rendering of what is actually this page's trust argument. */ .facts{display:grid;grid-template-columns:1fr;gap:0; border:var(--bd) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink); background:var(--paper)} /* minmax(0,1fr), never plain 1fr. A grid track's default floor is min-content, so one unbreakable string -- contact.thecarrentcompany@gmail.com -- widened its column, then every card with it, then the body, and finally the drawer (width:100%) reported as the overflow. 255px of horizontal scroll at 390px from one email address. */ @media(min-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1000px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}} .fact{padding:1rem 1.1rem 1.1rem;border-bottom:var(--bd) solid var(--ink); border-right:var(--bd) solid var(--ink)} @media(min-width:640px){.fact:nth-child(2n){border-right:0}} @media(min-width:1000px){ .fact:nth-child(2n){border-right:var(--bd) solid var(--ink)} .fact:nth-child(3n){border-right:0}} .fact:last-child{border-bottom:0} .fact dt{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.7rem; text-transform:uppercase;letter-spacing:.09em;color:var(--gold-dp);margin-bottom:.4rem} .fact dd{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2); overflow-wrap:anywhere} .fact dd b{font-family:Syne,sans-serif;font-weight:800;font-size:1.15rem; color:var(--ink);display:block;letter-spacing:-.02em;margin-bottom:.15rem} /* ═══════════ FAQ, TWO COLUMNS ═══════════ One column left 670px of the row empty. details/summary flows fine in columns as long as an open item is not allowed to break across them. */ @media(min-width:900px){ /* .faq caps itself at 920px for a single readable column. In two-column mode that cap is what left 416px of the row empty, so it is lifted here. */ .faq.two{max-width:none;display:block;column-count:2;column-gap:2.2rem} .faq.two details{break-inside:avoid;margin-bottom:.7rem}} /* ═══════════ HERO TICKER ═══════════ 27 cars and their rates running through the hero. The page's proposition shown rather than claimed. Same technique as the reviews marquee: a doubled track translated by exactly -50%, so the loop closes on itself with no seam and no JS. Paused on hover, and stopped dead under reduced motion. */ .tick{position:relative;overflow:hidden;border-block:var(--bd) solid var(--ink); background:var(--gold-fill);padding:.7rem 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .tick-track{display:flex;gap:2.2rem;width:max-content;animation:tickslide 70s linear infinite} .tick:hover .tick-track{animation-play-state:paused} @keyframes tickslide{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tick span{display:inline-flex;align-items:baseline;gap:.45rem;white-space:nowrap; font-family:"Space Grotesk",sans-serif;font-size:.9rem;font-weight:600;color:#3A3128} .tick span b{font-family:Syne,sans-serif;font-weight:800;font-size:1rem;color:#141210} @media(prefers-reduced-motion:reduce){ .tick-track{animation:none} .tick{overflow-x:auto;-webkit-mask-image:none;mask-image:none}} /* ═══════════ .terms-table — what the day rate includes ═══════════ A real table, not a card grid: these are paired facts and a table is what both a reader and a parser expect. overflow-x on the wrapper, never on the page -- a wide table must scroll inside its own container. */ .tt-wrap{overflow-x:auto;border:var(--bd) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink);background:var(--paper)} .terms-table{width:100%;border-collapse:collapse;min-width:min(560px,100%);font-size:.94rem} .terms-table th,.terms-table td{text-align:left;padding:.85rem 1.05rem; border-bottom:2px solid var(--ink-2);vertical-align:top;line-height:1.5} .terms-table thead th{background:var(--gold-fill);color:#141210; font-family:Syne,sans-serif;font-weight:800;font-size:.8rem;letter-spacing:.08em; text-transform:uppercase;border-bottom:var(--bd) solid var(--ink)} .terms-table tbody th{font-weight:700;width:38%;color:var(--ink)} .terms-table tbody tr:last-child th,.terms-table tbody tr:last-child td{border-bottom:0} .terms-table td{color:var(--ink-2)} .terms-table b{color:var(--ink)} /* ═══════════ SERVICES ═══════════ Six tiles, ordered by the search volume behind each page rather than by how important they feel. Self-drive leads because it is the bulk of the business AND the head term; monthly sits third on 3,600/mo. */ .svc-grid{display:grid;grid-template-columns:1fr;gap:0; border:var(--bd) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink)} @media(min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}} @media(min-width:1010px){.svc-grid{grid-template-columns:repeat(3,1fr)}} .svc{position:relative;display:block;padding:1.25rem 1.35rem 1.4rem;text-decoration:none; color:inherit;background:var(--paper);border-bottom:var(--bd) solid var(--ink); transition:background .16s var(--ease)} .svc:last-child{border-bottom:0} @media(min-width:640px){ .svc{border-right:var(--bd) solid var(--ink)} .svc:nth-child(2n){border-right:0} .svc:nth-last-child(-n+2){border-bottom:0}} @media(min-width:1010px){ .svc{border-right:var(--bd) solid var(--ink);border-bottom:var(--bd) solid var(--ink)} .svc:nth-child(2n){border-right:var(--bd) solid var(--ink)} .svc:nth-child(3n){border-right:0} .svc:nth-last-child(-n+3){border-bottom:0}} .svc:hover{background:var(--gold-fill)} .svc-n{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:1.16rem; letter-spacing:-.02em;margin-bottom:.35rem} .svc-d{display:block;font-size:.93rem;line-height:1.5;color:var(--ink-2);max-width:34ch} .svc:hover .svc-d{color:var(--ink)} .svc-go{position:absolute;right:1.1rem;top:1.15rem;font-weight:700;font-size:1.1rem; opacity:0;transform:translateX(-5px);transition:opacity .16s var(--ease),transform .16s var(--ease)} .svc:hover .svc-go,.svc:focus-visible .svc-go{opacity:1;transform:none} .svc:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} /* ═══════════ COVERAGE ═══════════ */ .cov{display:grid;grid-template-columns:1fr;gap:1.6rem} @media(min-width:720px){.cov{grid-template-columns:1fr 1fr;gap:2.4rem}} .cov-col h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.76rem; text-transform:uppercase;letter-spacing:.12em;color:var(--gold-lt);margin:0 0 .7rem} .cov-list{list-style:none;margin:0;padding:0} .cov-list li{border-top:1px solid rgba(245,240,228,.16);padding:.72rem 0; font-family:Syne,sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.01em} .cov-list li:last-child{border-bottom:1px solid rgba(245,240,228,.16)} /* min-height 32: the anchors were 28px tall from the line box alone and failed the tap-target gate. The li padding does not count -- the gate measures the link itself, which is what a thumb actually has to hit. */ .cov-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem; min-height:32px;text-decoration:none;color:inherit;transition:color .14s var(--ease)} .cov-links li{padding:.55rem 0} .cov-links a::after{content:"\2192";font-size:.95rem;opacity:.45;transition:opacity .14s var(--ease),transform .14s var(--ease)} .cov-links a:hover{color:var(--gold-lt)} .cov-links a:hover::after{opacity:1;transform:translateX(3px)} .cov-links a:focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ═══════════ NAV ═══════════ */ /* ── Top state ── Transparent, floating on the hero photograph rather than cutting a cream band across the top of the page. The hero is pulled up under the nav by exactly --navh and pads its content back down by the same amount, so nothing moves; the hero's .bg and .scrim are inset:0 so they fill the space behind the bar. */ header.nav{position:sticky;top:0;z-index:60;background:transparent; border-bottom:var(--bd) solid transparent; transition:background .28s var(--ease),border-color .28s var(--ease), -webkit-backdrop-filter .28s var(--ease),backdrop-filter .28s var(--ease)} .hero{margin-top:calc(-1 * var(--navh));padding-top:var(--navh)} /* Nav content sits on the dark photograph while at the top. */ .nav ul a,.nav .tel{color:#F5F0E4} .nav .tel svg{color:var(--gold-lt)} .nav ul a::after{background:var(--gold-lt)} /* .nav-scoped, not just .brand: `.brand .lg{display:block}` is declared LATER in this file, and at equal specificity the later rule wins -- both lockups rendered side by side, so the wordmark and car mark appeared twice. */ .nav .brand .lg-light{display:none} /* ── Scrolled: the cream ground returns, at every width ── This has to apply on phones too. Gating it behind the desktop breakpoint left the mobile nav transparent over the cream sections lower down the page, i.e. cream text on cream. */ .nav.shrunk{background:rgba(245,240,228,.72); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border-bottom-color:var(--ink)} .nav.shrunk ul a,.nav.shrunk .tel{color:var(--ink)} .nav.shrunk .tel svg{color:var(--ink)} .nav.shrunk ul a::after{background:var(--gold-dp)} .nav.shrunk .brand .lg-dark{display:none} .nav.shrunk .brand .lg-light{display:block} .nav-in{display:flex;align-items:center;gap:1.3rem;height:70px; transition:height .28s var(--ease),background .28s var(--ease), border-color .28s var(--ease),box-shadow .28s var(--ease), padding .28s var(--ease),margin .28s var(--ease)} /* ── Scrolled state ── Past 40px the full-width bar dissolves and the contents re-form as a centred floating slab: translucent cream over a blur, 2.5px ink border, the same hard offset shadow every other block on this page carries. Deliberately NOT a rounded glass pill -- nothing else here has a radius, and one would read as borrowed from a different site. Two hazards, both load-bearing: 1. The outer strip keeps its full width while transparent, so it MUST be pointer-events:none or it swallows every click across the page. The slab puts pointer-events back. 2. .brand keeps an explicit min-height. Letting it collapse with the bar drops the logo link under the 32px tap-target floor. */ @media(min-width:1010px){ /* The filter must be cleared too, not just the background. The base .shrunk rule sets backdrop-filter for the phone's full-width bar; leaving it on here frosted the entire page-wide strip, so a blurred band hung either side of the slab. The slab carries its own blur. */ .nav.shrunk{background:transparent;border-bottom-color:transparent;pointer-events:none; -webkit-backdrop-filter:none;backdrop-filter:none} .nav.shrunk .nav-in{ pointer-events:auto; width:fit-content;margin:.55rem auto 0;height:58px; padding-inline:1.15rem;gap:1.15rem; /* .70, not .80. At .80 the blur was doing work nobody could see. Even over pure ink the blended ground stays ~9:1 against the ink text, so this is well clear of the legibility floor. */ background:rgba(245,240,228,.70); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border:var(--bd) solid var(--ink); box-shadow:6px 6px 0 var(--ink)} .nav.shrunk .brand{min-height:40px} .nav.shrunk .brand .lg{height:27px} .nav.shrunk .sp{display:none} .nav.shrunk .btn{padding:.55rem .9rem;min-height:38px;box-shadow:3px 3px 0 var(--ink)} .nav.shrunk ul a,.nav.shrunk .tel{min-height:38px} } @media(prefers-reduced-motion:reduce){ header.nav,.nav-in,.brand .lg{transition:none} } /* The real company logo. Its gold averages 1.86:1 on cream and 8.85:1 on ink, so it sits on an ink block -- which is also the system's own idiom (the mark it replaces was a bordered colour block). The lockup carries the company name, so the separate "The Car Rent Co." text is gone: two wordmarks read as a mistake. */ /* The logo sits directly on the cream bar -- no block behind it. A dark box read as a patch stuck onto the header. This uses the light-ground version of the lockup: wordmark in ink, car outline in --gold-dp, which holds up on cream where the lighter brand gold washes out to 1.86:1. */ .brand{display:inline-flex;align-items:center;flex:none;min-height:44px} .brand .lg{display:block;height:32px;width:auto;transition:height .28s var(--ease)} @media(max-width:520px){.brand .lg{height:27px}} .drawer .dr-brand{min-height:0} .drawer .dr-brand .lg{height:26px} .nav ul{display:none;list-style:none;gap:1.4rem;margin:0 0 0 .7rem;padding:0} /* The underline wipes in from the left rather than a border snapping on -- the old version also shifted nothing but read as a hard on/off flicker. */ .nav ul a{position:relative;font-weight:600;font-size:.93rem;min-height:44px; display:inline-flex;align-items:center;transition:color .15s var(--ease)} .nav ul a::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2.5px; background:var(--gold-dp);transform:scaleX(0);transform-origin:left; transition:transform .22s var(--ease)} .nav ul a:hover::after,.nav ul a:focus-visible::after{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){.nav ul a::after{transition:none}} .nav .sp{flex:1} .nav .tel{display:none;font-weight:700;font-size:.93rem;min-height:44px;align-items:center;gap:.4rem} .nav .btn{display:none;padding:.7rem 1.1rem;min-height:44px;box-shadow:4px 4px 0 var(--ink)} .burger{margin-left:auto;width:46px;height:46px;display:grid;place-items:center;background:var(--gold-fill); border:var(--bd) solid var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink)} .burger svg{width:22px;height:22px} @media(min-width:1010px){.nav ul{display:flex}.nav .tel{display:inline-flex}.nav .btn{display:inline-flex}.burger{display:none}} .drawer{position:fixed;inset:0;z-index:100;background:var(--paper);transform:translateX(100%); transition:transform .35s var(--ease);display:flex;flex-direction:column;padding:1.2rem var(--pad); /* MUST scroll. The flat six-link menu always fitted; four accordions do not. With every group open on a 360x640 phone the lower half of the menu was simply unreachable -- Playwright could not even click it ("element is outside of the viewport"). overscroll-behavior stops the page behind scrolling once the drawer hits its end. */ overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain; padding-bottom:calc(1.2rem + env(safe-area-inset-bottom))} /* The CTA pair must not be pushed off by a long list, and must not float over the last link either -- it simply ends the scrollable column. */ .drawer .dcta{margin-top:1.4rem;flex:none} .drawer.open{transform:none} .drawer .top{display:flex;justify-content:space-between;align-items:center} .drawer .x{width:46px;height:46px;background:var(--gold-fill);border:var(--bd) solid var(--ink);cursor:pointer; display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)} .drawer nav{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem} .drawer nav a{font-family:Syne,sans-serif;font-weight:800;font-size:1.55rem;border:var(--bd) solid var(--ink); background:var(--paper);padding:.65rem .85rem;box-shadow:4px 4px 0 var(--ink)} .drawer nav a:nth-child(2n){background:var(--paper-2)} .drawer .dcta{display:grid;gap:.6rem;margin-top:1.3rem} /* ═══════════ 1. HERO — job: desire + start booking ═══════════ */ .hero{position:relative;overflow:hidden} .hero .bg img{object-position:66% 48%} @media(max-width:900px){.hero .bg img{object-position:58% 42%}} /* The scrim decides whether the docket can look like glass AT ALL. Measured with the panel hidden: the old stops left the backdrop behind it solid #141210 -- Michelson modulation 0.000 on mobile -- so no panel alpha and no blur radius could ever have made it translucent. It was compositing against flat ground colour. There was nothing behind it to see. These stops keep the H1 side dark (the headline needs the contrast) and open the band the docket actually occupies: the right third on desktop, 46-92% down on mobile. If the hero must fade to solid ground at its bottom edge, add a separate short strip below the docket rather than extending this gradient. */ .hero .scrim{background: linear-gradient(96deg,#141210 4%,rgba(20,18,16,.94) 30%,rgba(20,18,16,.55) 50%,rgba(20,18,16,.22) 66%,rgba(20,18,16,.25) 92%,rgba(20,18,16,.42) 100%), linear-gradient(0deg,#141210 1%,rgba(20,18,16,.28) 14%,transparent 38%)} @media(max-width:900px){.hero .scrim{background:linear-gradient(180deg, rgba(20,18,16,.88) 0%,rgba(20,18,16,.82) 34%,rgba(20,18,16,.45) 46%, rgba(20,18,16,.45) 92%,rgba(20,18,16,.72) 100%)}} .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.1rem,2.4vw,1.6rem); padding-block:clamp(1.6rem,3.4vw,2.6rem) clamp(1.4rem,2.8vw,2.1rem)} /* The left column gets the larger share: the H1 is the tallest thing on the page and every extra 100px of width takes a line off it. The docket is floored at 420px so the calendar never gets squeezed. */ @media(min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.16fr) minmax(376px,.74fr);align-items:center}} /* Capped below the global --f-xl. At 5.4rem the gold highlight on "Chandigarh" spanned the column and read as a bar, not a highlight. */ .hero h1{font-size:clamp(2.4rem,1.2rem + 4.4vw,4.15rem);line-height:.96} .hero h1 .gb{background:var(--gold-fill);color:#141210;border:var(--bd) solid #141210;padding:0 .15em; box-shadow:5px 5px 0 rgba(245,240,228,.92);display:inline-block;transform:rotate(-1.5deg)} .hero h1 .ul{border-bottom:8px solid var(--gold);padding-bottom:.04em} .hero .lede{color:#A79E90;font-size:clamp(.98rem,.94rem + .3vw,1.1rem);margin-top:1rem;max-width:46ch;line-height:1.6} .hero .lede b{color:#F5F0E4} .hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem} .hero-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem} /* Badge shares the eyebrow's line. Inside .hero-chips it wrapped them to three rows and cost 181px; here it costs nothing and social proof is read first. */ .hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.1rem;margin-bottom:1.4rem} .hero-chips span{border:var(--bd) solid #F5F0E4;padding:.5rem .75rem;font-weight:700;font-size:.88rem} /* ═══ HERO DOCKET ═══ The root class is .docket, NEVER .dk. The hero element itself is
-- .dk is this design's dark-section modifier. Naming the form .dk applied its max-width:466px to the whole hero section, which shrank the entire left column and wrapped every headline. Fourth collision with a short class name on this project: grep the markup first. Option 3's rental-slip visual carrying the enquiry widget from the sister site's contact page: an inline range calendar, city, car, a live estimate in the button and a WhatsApp handoff. No name or phone fields -- WhatsApp already supplies both, which is why that form converts. The panel is translucent like the nav. Cream at .80 over the hero leaves ink text at roughly 10:1, so the small monospaced labels stay safe. */ .hero-side{display:flex;align-items:center;justify-content:flex-end} .docket{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --stamp:#B3261E; --paper:#141210;--paper-2:#1F1B16;--paper-3:#2A241C;--ink:#F5F0E4;--ink-2:#C9C1B0; position:relative;width:100%;max-width:388px;color:var(--ink); background:linear-gradient(180deg,rgba(245,240,228,.10),rgba(245,240,228,0) 42%),rgba(20,18,16,.32); /* blur 11px, not 18. The RADIUS, not the alpha, decides whether the Defender is recognisable through the panel -- and recognisable structure is what the eye reads as glass. At 18px only 7.7% of 50px-scale detail survives and 0% of 25px; at 11px it is ~45% and ~4%. Measured cost of the change: none. 17.07 vs 16.74 ms/frame at 4x CPU throttle, both vsync-locked. Never animate it. */ -webkit-backdrop-filter:blur(11px) saturate(1.15);backdrop-filter:blur(11px) saturate(1.15); border:var(--bd) solid var(--ink); /* the hard shadow and border MUST invert too: #141210 on a dark panel measures 1.47:1 against the hero and vanishes; cream measures 11.19:1, well over the 3:1 WCAG 1.4.11 asks for a UI component boundary. */ box-shadow:var(--sh) var(--sh) 0 rgba(245,240,228,.92), inset 0 1px 0 rgba(245,240,228,.28),0 26px 60px -20px rgba(0,0,0,.75)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .docket{background:rgba(20,18,16,.88)}} .dk-hd{display:flex;align-items:center;justify-content:space-between;gap:12px; background:var(--ink);padding:9px 13px 8px} .dk-hd .t{display:flex;align-items:center;gap:9px;font-family:Syne,sans-serif;font-weight:800; font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#141210} .dk-hd .t i{width:8px;height:8px;background:var(--gold-dp);flex:none} .dk-hd .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em; color:rgba(20,18,16,.62);white-space:nowrap} .dk-rule{height:5px;background:var(--gold)} /* The body must stay transparent or it would paint over the panel's blur. The hairline ruling is what still reads it as paper. */ .dk-body{position:relative;overflow:hidden;padding:11px 12px 10px; background-image:repeating-linear-gradient(0deg,rgba(245,240,228,.045) 0 1px,transparent 1px 4px)} .dk-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px} .dk-cap h2{margin:0;font-family:Syne,sans-serif;font-weight:800;font-size:15px; text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)} .dk-cap span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2);white-space:nowrap} .docket .lab{display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase; color:var(--ink-2);margin:0 0 5px} .docket .lab b{font-family:"Space Grotesk",sans-serif;letter-spacing:0;font-size:12px; font-weight:700;color:var(--ink);white-space:nowrap} /* calendar */ /* The calendar cannot exist without JS, and an empty 7-column grid reads as a broken component. It stays hidden until the module renders, and a line of copy takes its place -- the city, car and WhatsApp submit all still work. */ /* 9px was not enough clearance: the '02 Delivered to' label sat hard against the calendar's bottom border and read as a collision. */ .dkcal{border:var(--bd) solid var(--ink);background:rgba(245,240,228,.07);margin-bottom:18px} .docket:not(.ready) .dkcal,.docket:not(.ready) .lab b{display:none} .dk-nojs{display:none} .docket:not(.ready) .dk-nojs{display:block;margin:0 0 12px;padding:9px 10px; border:var(--bd) solid var(--ink);background:rgba(245,240,228,.07); font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .dkcal-hd{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:6px 7px;border-bottom:2px solid rgba(245,240,228,.20)} .dkcal-hd b{font-family:Syne,sans-serif;font-weight:800;font-size:12.5px; text-transform:uppercase;letter-spacing:.01em} .dkcal-nav{width:32px;height:32px;flex:none;border:2px solid var(--ink);background:var(--paper-3); color:var(--ink);font:700 15px/1 "Space Grotesk",sans-serif;cursor:pointer; display:grid;place-items:center;padding:0} .dkcal-nav:hover:not(:disabled){background:var(--gold);color:#141210} .dkcal-nav:disabled{opacity:.28;cursor:default} .dkcal-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:6px 5px 0;text-align:center; font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:var(--ink-2)} .dkcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:4px} /* 32px is the floor, not a suggestion: at 30 all 31 day cells failed the tap-target gate at once. Height on this element is not negotiable. */ .dkcal-grid button{height:32px;min-width:0;border:0;padding:0;background:transparent;cursor:pointer; font:600 12.5px "Space Grotesk",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums} .dkcal-grid button.off{opacity:.24;cursor:default} .dkcal-grid button.today{box-shadow:inset 0 0 0 2px rgba(245,240,228,.45)} .dkcal-grid button.mid{background:var(--gold);color:#141210} .dkcal-grid button.sel{background:var(--ink);color:var(--paper);font-weight:700} .dkcal-grid button:focus-visible,.dkcal-nav:focus-visible,.dkcal-clr:focus-visible{ outline:2.5px solid var(--gold-dp);outline-offset:-2px} .dkcal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:5px 8px;border-top:2px dashed rgba(245,240,228,.28); font-family:var(--mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)} .dkcal-clr{border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline; cursor:pointer;min-height:32px;padding:0 4px;flex:none} /* One field per row. Side by side, the car option labels ("Toyota Fortuner · ₹8,000/day") were clipped mid-price in a half-width cell. */ .docket .rows{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px} /* Breathing room under each numbered label so the select does not crowd it. */ .docket .rows .lab{margin-bottom:5px} .docket .f{min-width:0} /* The worst offender in the old panel. rgba(251,248,239,.62) OVER a .58 panel composited to 84% effective opacity: measured Michelson 0.045 desktop, 0.007 mobile -- below the visual detection threshold, i.e. provably not glass. The cells are most of what anyone looks at, so THEY were the "solid cream slab", and tuning .docket while they stayed could never have worked. On dark glass they go subtractive: a hairline and a faint wash instead of a fill. */ .docket .cell{position:relative;border:var(--bd) solid rgba(245,240,228,.55); background:rgba(245,240,228,.07);display:flex} .docket .cell:focus-within{background:rgba(245,240,228,.12);border-color:var(--gold-lt)} .docket select option{background:#141210;color:#F5F0E4} .docket .cell::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:6px;margin-top:-3px; background:var(--ink);clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none} .docket select{font-family:"Space Grotesk",sans-serif;font-size:12.5px;font-weight:600;color:var(--ink); background:transparent;border:0;border-radius:0;width:100%;min-width:0;height:40px; padding:0 24px 0 8px;-webkit-appearance:none;appearance:none;outline:0;cursor:pointer} .docket select:focus-visible{outline:2.5px solid var(--gold-dp);outline-offset:-2.5px} .docket .meta{margin:13px 0 0;border-top:2px dashed rgba(245,240,228,.30);padding-top:10px; display:flex;flex-wrap:wrap;gap:5px 14px;max-width:56%} .docket .meta div{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-2)} .docket .meta div b{font-family:"Space Grotesk",sans-serif;letter-spacing:0;font-size:12px; color:var(--ink);font-weight:700} /* stamp — only appears once there is something to stamp */ .stamp{position:absolute;right:14px;bottom:8px;max-width:calc(100% - 30px); padding:8px 10px 7px;text-align:center;color:var(--stamp); border:3px solid var(--stamp);outline:1.5px solid var(--stamp);outline-offset:3px; background:rgba(179,38,30,.05);mix-blend-mode:multiply;pointer-events:none; transform:rotate(-9deg) scale(1.5);transform-origin:60% 60%;opacity:0} .stamp span{display:block} .stamp .s1{font-family:var(--mono);font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.9;white-space:nowrap} .stamp .s2{font-family:Syne,sans-serif;font-weight:800;font-size:18px;line-height:1; text-transform:uppercase;letter-spacing:-.02em;margin:3px 0;white-space:nowrap; border-top:1.5px solid var(--stamp);border-bottom:1.5px solid var(--stamp);padding:3px 0 4px} .stamp .s3{font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase; opacity:.92;white-space:nowrap;overflow:hidden} .stamp.on{animation:thump .34s var(--ease) forwards} @keyframes thump{ 0%{opacity:0;transform:rotate(-9deg) scale(1.5)} 60%{opacity:.95;transform:rotate(-9deg) scale(.94)} 100%{opacity:.9;transform:rotate(-9deg) scale(1)}} /* perforation + stub */ .perf{height:0;border-top:2px dashed rgba(245,240,228,.42); background:radial-gradient(circle at 6px 50%,transparent 0 3.5px,rgba(245,240,228,.18) 3.5px 4.2px,transparent 4.2px) repeat-x left center/14px 8px} .dk-stub{padding:11px 13px 12px} /* The docket sits inside
, and `.dk .btn` gives every button a CREAM border and shadow for use on the dark ground. On this cream panel that is invisible, so both go back to ink here. */ /* .btn takes its colour from --ink, which .docket now redefines to cream -- cream on the gold fill fails AA. Pin the submit explicitly. */ .docket .btn{color:#141210;border-color:var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink)} .docket .btn:hover{box-shadow:4px 4px 0 var(--ink)} .dk-go{width:100%;justify-content:center;min-height:46px;font-size:.96rem} .dk-go .est{font-family:var(--mono);font-weight:700;margin-left:.5rem;font-variant-numeric:tabular-nums} .dk-fine{margin:.55rem 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-2);text-align:center} @media(max-width:960px){.hero-side{justify-content:flex-start}.docket{max-width:470px}} @media(prefers-reduced-motion:reduce){.stamp.on{animation:none;opacity:.9;transform:rotate(-9deg)}} .hero-chips span b{font-family:Syne,sans-serif;color:var(--gold-lt)} /* The original .hero-side (column flex for the three stickers) lived here and was declared AFTER the deck's own rule, so it silently won. Removed with the stickers it existed for. */ /* ═══════════ 2. TRUST BAR — job: kill doubt immediately ═══════════ */ .trust{background:var(--gold-fill);border-bottom:var(--bd) solid var(--ink)} .trust-in{display:grid;grid-template-columns:repeat(2,1fr);gap:0} @media(min-width:820px){.trust-in{grid-template-columns:repeat(4,1fr)}} .trust-in div{padding:1rem clamp(.8rem,2vw,1.4rem);border-right:var(--bd) solid var(--ink)} .trust-in div:last-child{border-right:0} @media(max-width:819px){.trust-in div:nth-child(2n){border-right:0} .trust-in div:nth-child(-n+2){border-bottom:var(--bd) solid var(--ink)}} .trust-in b{display:block;font-family:Syne,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:-.02em} .trust-in span{font-size:.84rem;font-weight:500} /* ═══════════ 3. FLEET BROWSER — job: find your car (transitions) ═══════════ */ .fb-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem} .fb-tab{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.92rem;cursor:pointer; border:var(--bd) solid var(--ink);background:var(--paper);padding:.6rem 1.05rem;min-height:46px; box-shadow:3px 3px 0 var(--ink);transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .18s} .fb-tab:hover{transform:translate(1.5px,1.5px);box-shadow:1.5px 1.5px 0 var(--ink)} .fb-tab.on{background:var(--gold-fill)} .fb-tab .n{opacity:.5;font-weight:600;margin-left:.25rem} @media(prefers-reduced-motion:reduce){.fb-tab:hover{transform:none}} /* the stage */ .fb-stage{border:var(--bd) solid var(--ink);background:var(--paper-2);box-shadow:var(--sh) var(--sh) 0 var(--ink);overflow:hidden;position:relative} /* Right-edge fade, added by JS only while the row really does continue. */ .fb-stage.more::after{content:'';position:absolute;top:0;bottom:0;right:0;width:64px; pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(235,228,211,0),var(--paper-2))} .fb-head{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:baseline;justify-content:space-between; padding:1.1rem clamp(1rem,2.5vw,1.5rem);border-bottom:var(--bd) solid var(--ink);background:var(--paper)} .fb-head h3{font-size:clamp(1.3rem,1.1rem + 1.1vw,1.9rem)} .fb-head .meta{display:flex;gap:1.2rem;font-weight:700;font-size:.88rem} .fb-head .meta i{font-style:normal;display:block;font-weight:600;font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em} .fb-head .meta b{font-family:Syne,sans-serif;font-size:1.05rem} .fb-blurb{padding:.8rem clamp(1rem,2.5vw,1.5rem) 0;font-size:.96rem;color:var(--ink-2);max-width:62ch} /* rail of cars — horizontal, snappy, no endless grid */ /* ═══ MAGNETIC FLEET DOCK ═══ NB: the strips are .dcar, NOT .dk -- `.dk` is already this design's dark-section modifier and it REDEFINES --paper/--ink. Naming the strips .dk made "cream" resolve to near-black and rendered the car name invisible against its own backdrop. Tall image strips that magnify toward the cursor, macOS-dock style. The row is RENORMALISED every frame so it always fits its container: as the focused strip grows the others give up width. A free-growing dock would push the row past the page edge on the 8-car group, which is why the widths are scaled rather than simply added. */ /* These numbers are chosen against the photos, not by eye. The car shots are 1200x750 landscape, so a tall narrow strip crops out most of the car. With cover-fit the visible fraction of the car is (stripW/stripH)/1.6, so the FOCUSED strip has to get wide without getting much taller: at 313x300 that is ~65% of the car, against ~43% when it grew to 268x386. The tight influence (165 not 230) is what buys that width - fewer neighbours inflate, so more of the row's fixed width goes to the one you are pointing at. */ /* The fleet row needs a wider column than the site's standard 1240px. At that width seven strips rest at 149px and the eight-car group at only 102px -- too narrow to make out a car. Widening THIS section to 1440px puts them at ~186px and ~163px. Heading, tabs and stage all widen together, so the section still lines up with itself rather than the stage jutting out. */ /* per-section width overrides removed: --maxw is one value everywhere (1340) */ /* Strip width is FIXED, not divided between however many cars the category holds. Dividing made 5 cars read well at 250px and 8 cars read badly at 154px -- one design, four different qualities. Every category now gets the 250px that actually works, and a row longer than the panel scrolls sideways. The 5-car group still fits exactly, so it shows no scrollbar at all. */ .dock{--dkw:250;--dkwh:380;--dkinf:200; display:flex;gap:10px;align-items:center;justify-content:flex-start; height:336px;padding:1.1rem clamp(1rem,2.5vw,1.5rem) 1.4rem; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-padding-inline:clamp(1rem,2.5vw,1.5rem); /* The row scrolls but shows NO scrollbar. A native bar renders with OS arrow buttons on Windows and reads as a stray browser widget dropped into a hand-built layout. Discovery is carried by the right-edge fade, the cursor-edge glide and the hint line instead. */ scrollbar-width:none;-ms-overflow-style:none} .dock::-webkit-scrollbar{display:none;width:0;height:0} /* Scroll arrows. Hidden until the panel is hovered, and each appears only when there is actually something that way -- an arrow that does nothing is worse than no arrow. Same vocabulary as every other control here: square, 2.5px ink border, hard offset shadow, gold on hover. Never on touch, where the row is dragged directly. */ .dockwrap{position:relative} .dnav{position:absolute;top:50%;z-index:4;width:46px;height:46px;padding:0; border:var(--bd) solid var(--ink);background:var(--paper);cursor:pointer; display:grid;place-items:center; box-shadow:3px 3px 0 var(--ink);transform:translateY(-50%); opacity:0;pointer-events:none; transition:opacity .18s var(--ease),background .14s var(--ease), transform .14s var(--ease),box-shadow .14s var(--ease)} .fb-stage:hover .dnav.can,.dnav.can:focus-visible{opacity:1;pointer-events:auto} .dnav.can:hover{background:var(--gold-fill); transform:translateY(-50%) translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)} .dnav:focus-visible{outline:3px solid var(--gold);outline-offset:2px} .dnav svg{width:19px;height:19px;display:block} .dnav.prev{left:16px} .dnav.next{right:16px} @media(prefers-reduced-motion:reduce){ .dnav,.dnav.can:hover{transition:none;transform:translateY(-50%)}} @media(max-width:900px){.dnav{display:none}} .dcar{position:relative;display:block;flex:none;width:150px; height:calc(256px + 46px*var(--f,0)); border:var(--bd) solid var(--ink);background:var(--paper-3); overflow:hidden;text-decoration:none;color:inherit; box-shadow:inset 0 0 0 calc(3px*var(--f,0)) var(--gold)} .dcar img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(calc(1 + .05*var(--f,0)))} /* The info strip. Visible by default so it is readable with JS off; once JS boots it fades in with the magnify instead. */ .dcar-i{position:absolute;left:0;right:0;bottom:0;padding:.85rem .7rem .7rem; background:linear-gradient(rgba(20,18,16,0),rgba(20,18,16,.72) 26%, rgba(20,18,16,.94) 58%,rgba(20,18,16,.97)); color:var(--paper);pointer-events:none; text-shadow:0 1px 3px rgba(20,18,16,.85)} /* Only the focused strip shows its info. Fading it in on every neighbour in proportion to --f put half-visible text on three cards at once and read as noise. opacity clamps to 0-1 on its own, so no clamp() needed. */ .js .dcar-i{opacity:calc(var(--f,0)*2.4 - 1.15)} /* colour must be restated here: a global `b` rule sets ink and beats the colour inherited from .dcar-i, which rendered the car name black on black. */ .dcar-i b{display:block;color:var(--paper);font-family:Syne,sans-serif;font-weight:800; font-size:1rem;line-height:1.15;letter-spacing:-.01em;white-space:nowrap} .dcar-i i{display:block;font-style:normal;margin-top:.22rem;font-size:.78rem; font-weight:600;color:var(--gold-lt);white-space:nowrap} .dcar-i small{font-family:"Space Grotesk",sans-serif;font-size:.66rem;opacity:.85} .dcar:focus-visible{outline:3px solid var(--gold);outline-offset:2px} /* transition states on category swap */ .dock.out .dcar{opacity:0;transform:translateY(14px)} .dock .dcar{transition:opacity .26s var(--ease),transform .26s var(--ease)} .dock.in .dcar{animation:carIn .4s var(--ease) both} @keyframes carIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .dock.in .dcar{animation:none}.dock.out .dcar{opacity:1;transform:none} .dcar img{transform:none}} /* No hover on touch: become a snap-scrolling rail with the info always shown. */ @media(max-width:900px){ .dock{height:auto;overflow-x:auto;justify-content:flex-start;gap:.7rem; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scroll-padding-left:clamp(1rem,2.5vw,1.5rem)} .dcar{width:190px!important;height:252px!important;scroll-snap-align:start;box-shadow:none} .dcar img{transform:none} .dcar-i,.js .dcar-i{opacity:1}} /* progressive enhancement: without JS every category is shown, so all 26 cars stay in the DOM for readers and crawlers */ .fb-group + .fb-group{border-top:var(--bd) solid var(--ink)} .js .fb-group{display:none} .js .fb-group.on{display:block} .js .fb-group + .fb-group{border-top:0} .fb-hint{margin-top:.8rem;font-size:.84rem;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:.4rem} .fb-hint svg{width:15px;height:15px} .hint-m{display:none} @media(max-width:900px){.hint-d{display:none}.hint-m{display:inline}} /* ═══════════ 4. PREMIUM SCATTER — job: aspiration ═══════════ */ /* overflow MUST stay visible here. This section carries .dk, and .dk sets overflow:hidden -- which makes the section its own scroll container, so the position:sticky pin inside it can never stick. The scatter then finished in the first fifth of the track and left ~1,800px of empty scrolling behind it. Clipping the scattered cards is .px-pin's job (it has its own overflow:hidden), not this element's. */ .px{position:relative;overflow:visible} .px-pin{padding-block:clamp(2rem,4vw,3rem)} .px-head{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); display:flex;justify-content:space-between;align-items:flex-end;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.2rem} /* Deliberately smaller than --f-lg (3.6rem), which the other section headings use. Those are short punchy lines; this one is descriptive and carries a price, so at the shared size it filled three lines and swamped the car scatter that is the actual point of the section. */ .px-head h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem);max-width:20ch} .px-head .hint{font-weight:700;font-size:var(--f-sm);text-transform:uppercase;letter-spacing:.08em; color:#B9B1A2;display:flex;align-items:center;gap:.5rem;transition:opacity .3s} .px-head .hint svg{width:16px;height:16px;color:var(--gold-lt);animation:bob 1.8s var(--ease) infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} @media(prefers-reduced-motion:reduce){.px-head .hint svg{animation:none}} .px-stage{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad); display:grid;grid-template-columns:1fr;gap:.9rem} @media(min-width:600px){.px-stage{grid-template-columns:repeat(2,1fr)}} .pc{position:relative;overflow:hidden;border:var(--bd) solid #F5F0E4;background:#0E0C0A;aspect-ratio:16/10; box-shadow:0 24px 50px -24px rgba(0,0,0,.9)} .pc img{width:100%;height:100%;object-fit:cover} .pc .v{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,6,.95) 3%,rgba(8,7,6,.35) 42%,transparent 68%)} .pc .flag{position:absolute;top:0;left:0;background:var(--gold-fill);color:#141210;font-weight:700; font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;padding:.24rem .55rem} .pc .cap{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem;display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem} /* Both must be display:block. They are s, so the .sb margin-top did nothing and the two ran together as one string -- "Toyota HiluxUnstoppable". */ .pc .nm{display:block;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.02rem;line-height:1.15;color:#F5F0E4} .pc .sb{display:block;font-size:.74rem;color:#B9B1A2;margin-top:.18rem} .pc .pz{font-family:Syne,sans-serif;font-weight:800;color:var(--gold-lt);white-space:nowrap;font-size:1.05rem} /* scatter mode */ .is-px .px-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:84px} .is-px .px-stage{display:block;flex:1;min-height:0;width:100%;max-width:none;padding:0} .is-px .pc{position:absolute;top:50%;left:50%;width:var(--cw,320px);margin:0} .is-px .pc .cap{opacity:var(--co,1)} .px-cta{position:relative;z-index:2;max-width:var(--maxw);margin:1.4rem auto 0;padding-inline:var(--pad);display:flex;justify-content:center} /* Inside the pin, not after it. As a sibling of .px-pin the CTA kept its own place in the flow and scrolled up THROUGH the pinned stage, crossing the heading on the way. It belongs to the pinned composition. */ /* width:100% is load-bearing. .px-pin is a column flex container, and an auto margin on the cross axis cancels align-self:stretch -- so .px-head shrank to its own content (1065px) and its heading sat 87px right of every other heading on the page. */ .is-px .px-head,.is-px .px-cta{width:100%} .is-px .px-cta{flex:none;margin:.9rem auto 0} /* ═══════════ MATCHER ═══════════ */ .mx{border:var(--bd) solid var(--ink);background:var(--paper-2);box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:clamp(1.2rem,3vw,2.1rem)} .mx-prog{display:flex;gap:.4rem;margin-bottom:1.3rem} .mx-prog i{height:11px;flex:1;border:2.5px solid var(--ink);background:var(--paper)} .mx-prog i.on{background:var(--gold-fill)} .mx-q{display:none}.mx-q.on{display:block;animation:qin .4s var(--ease) both} @keyframes qin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} .mx-q .qn{font-weight:700;font-size:var(--f-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin-bottom:.45rem} .mx-q h3{font-size:var(--f-md);margin-bottom:1rem} .mx-opts{display:grid;grid-template-columns:1fr;gap:.6rem} @media(min-width:640px){.mx-opts{grid-template-columns:repeat(3,1fr)}} .mx-opt{text-align:left;cursor:pointer;border:var(--bd) solid var(--ink);background:var(--paper); padding:.95rem 1.05rem;min-height:70px;display:flex;flex-direction:column;gap:.2rem; font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1rem;color:var(--ink); box-shadow:4px 4px 0 var(--ink);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background .15s} .mx-opt small{font-weight:500;font-size:.78rem;color:var(--ink-2)} .mx-opt:hover{background:var(--gold-fill);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)} @media(prefers-reduced-motion:reduce){.mx-opt:hover{transform:none}} .mx-back{margin-top:.9rem;background:none;border:0;font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:var(--f-sm);cursor:pointer;color:var(--ink-2);min-height:36px;padding:0} .mx-res{display:none} .mx-res.on{display:grid;grid-template-columns:1fr;gap:1.2rem;animation:qin .45s var(--ease) both} @media(min-width:760px){.mx-res.on{grid-template-columns:1fr 1fr;align-items:center}} .mx-res .shot{border:var(--bd) solid var(--ink);box-shadow:5px 5px 0 var(--ink);aspect-ratio:4/3;overflow:hidden;position:relative} .mx-res .shot img{width:100%;height:100%;object-fit:cover} .mx-res .shot .tag{position:absolute;top:10px;left:10px;transform:rotate(-4deg)} .mx-res h3{font-size:clamp(1.6rem,1.25rem + 1.9vw,2.6rem);margin:.4rem 0 .25rem} .mx-res .pr{font-family:Syne,sans-serif;font-weight:800;font-size:1.45rem} .mx-res .pr small{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.82rem;color:var(--ink-2)} .mx-res p{color:var(--ink-2);margin:.6rem 0 1rem;line-height:1.6;max-width:38ch} .mx-res .acts{display:flex;flex-wrap:wrap;gap:.6rem} /* ═══════════ CALCULATOR ═══════════ */ .calc{display:grid;grid-template-columns:1fr;border:var(--bd) solid var(--ink);box-shadow:var(--sh) var(--sh) 0 var(--ink);background:var(--paper)} @media(min-width:900px){.calc{grid-template-columns:1.05fr .95fr}} .calc .in{padding:clamp(1.2rem,3vw,2rem)} .calc .out{padding:clamp(1.2rem,3vw,2rem);background:var(--ink);color:var(--paper);display:flex;flex-direction:column} @media(min-width:900px){.calc .out{border-left:var(--bd) solid var(--ink)}} @media(max-width:899px){.calc .out{border-top:var(--bd) solid var(--ink)}} .cf{margin-bottom:1.3rem}.cf:last-child{margin-bottom:0} .cf > label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-weight:700; font-size:var(--f-sm);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:.55rem} .cf > label b{font-family:Syne,sans-serif;font-size:1.08rem;color:var(--ink);letter-spacing:-.02em;text-transform:none} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:38px;background:transparent;cursor:pointer;display:block} input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--paper-3);border:2.5px solid var(--ink)} input[type=range]::-moz-range-track{height:10px;background:var(--paper-3);border:2.5px solid var(--ink)} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px; background:var(--gold-fill);border:2.5px solid var(--ink);margin-top:-11px;box-shadow:2px 2px 0 var(--ink);transition:transform .1s var(--ease)} input[type=range]::-moz-range-thumb{width:28px;height:28px;background:var(--gold-fill);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink)} input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)} .cticks{display:flex;justify-content:space-between;font-weight:600;font-size:.76rem;color:var(--ink-2)} .crow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.6rem 0; border-bottom:2px solid rgba(245,240,228,.18);font-size:1rem} .crow span{opacity:.8}.crow b{font-family:Syne,sans-serif;font-weight:800} .ctot{margin-top:auto;padding-top:1rem} .ctot .lab{font-weight:700;font-size:var(--f-sm);text-transform:uppercase;letter-spacing:.08em;opacity:.75} .ctot .amt{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(2.4rem,1.9rem + 3.4vw,4.2rem); line-height:.95;color:var(--gold-lt);letter-spacing:-.03em;display:block;margin:.12rem 0 .3rem;font-variant-numeric:tabular-nums} .ctot .dep{font-size:.88rem;opacity:.82;line-height:1.55} .ctot .dep b{color:var(--gold-lt)} .calc .out .btn{margin-top:1rem;width:100%;box-shadow:5px 5px 0 var(--paper)} .calc .out .btn:hover{box-shadow:3px 3px 0 var(--paper)} .cnote{margin-top:.75rem;font-size:.79rem;opacity:.7;line-height:1.6} .fill{border-bottom:2px dashed currentColor;cursor:help;white-space:nowrap} /* ═══════════ GUARANTEE (dark) ═══════════ */ .gua{text-align:center} .gua h2{font-size:clamp(2rem,1.35rem + 4.2vw,4.8rem);max-width:19ch;margin-inline:auto} .gua h2 .gb2{background:var(--gold-fill);color:#141210;border:var(--bd) solid #141210;padding:0 .15em; display:inline-block;box-shadow:5px 5px 0 rgba(245,240,228,.9);transform:rotate(-1.3deg)} .gua .sub{margin:1.2rem auto 0;max-width:48ch;font-size:1.05rem;line-height:1.6;color:#B9B1A2} .gua-3{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:clamp(1.5rem,3.2vw,2.4rem);text-align:left} @media(min-width:800px){.gua-3{grid-template-columns:repeat(3,1fr)}} .gua-3 .c{border:var(--bd) solid #F5F0E4;background:#1F1B16;padding:1.15rem 1.25rem} .gua-3 .c .n{font-family:Syne,sans-serif;font-weight:800;font-size:1.9rem;line-height:1;margin-bottom:.4rem;color:var(--gold-lt)} .gua-3 .c h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:.35rem} .gua-3 .c p{color:#B9B1A2;font-size:.93rem;line-height:1.55} .gua-note{margin-top:1.1rem;font-size:.86rem;line-height:1.6;max-width:62ch;margin-inline:auto;color:#B9B1A2} /* ═══════════ ROUTES (dark) ═══════════ */ .rmap{border:var(--bd) solid #F5F0E4;background:rgba(20,18,16,.55);box-shadow:var(--sh) var(--sh) 0 rgba(245,240,228,.5); padding:clamp(.7rem,1.8vw,1.2rem);margin-bottom:1.2rem;backdrop-filter:blur(3px)} .rmap svg{width:100%;height:auto;display:block;overflow:visible} .rmap .rp{fill:none;stroke:#F5F0E4;stroke-width:2.5;opacity:.3;stroke-dasharray:var(--L);stroke-dashoffset:var(--L)} .rmap.go .rp{animation:draw 1.4s var(--ease) forwards} .rmap .rp.hot{stroke:var(--gold-lt);opacity:1;stroke-width:4} @keyframes draw{to{stroke-dashoffset:0}} .rmap .hub{fill:var(--gold-fill);stroke:#F5F0E4;stroke-width:2.5} .rmap .dot{fill:#141210;stroke:#F5F0E4;stroke-width:2.5;cursor:pointer;transition:fill .2s} .rmap .dot.hot{fill:var(--gold-fill)} .rmap text{font-family:"Space Grotesk",sans-serif;font-size:13px;font-weight:700;fill:#F5F0E4} .rmap text.km{font-weight:600;font-size:11px;fill:#B9B1A2} @media(prefers-reduced-motion:reduce){.rmap .rp{stroke-dashoffset:0!important;animation:none!important}} .rt{border:var(--bd) solid #F5F0E4;background:rgba(20,18,16,.72);box-shadow:4px 4px 0 rgba(245,240,228,.45); margin-bottom:.65rem;cursor:pointer;backdrop-filter:blur(3px)} .rt-h{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem 1.1rem;align-items:center;padding:.85rem 1rem} .rt-h .code{font-weight:700;font-size:.78rem;color:#B9B1A2} .rt-h h3{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(1.2rem,1.05rem + 1vw,1.75rem)} .rt-h h3 small{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:.78rem;color:#B9B1A2;margin-top:.18rem;letter-spacing:0} .rt-d{display:flex;gap:clamp(.7rem,2.2vw,1.8rem);font-weight:700;font-size:.83rem;text-align:right} .rt-d span{color:#B9B1A2;font-weight:600;font-size:.7rem;display:block} .rt-d b{font-family:Syne,sans-serif;font-size:1.02rem;color:var(--gold-lt)} .rt-p{width:22px;height:22px;position:relative;flex:none} .rt-p::before,.rt-p::after{content:"";position:absolute;inset:0;margin:auto;background:#F5F0E4} .rt-p::before{width:16px;height:3px} .rt-p::after{width:3px;height:16px;transition:transform .25s var(--ease)} .rt.open .rt-p::after{transform:scaleY(0)} .rt-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s var(--ease)} .rt.open .rt-body{max-height:400px;opacity:1} .rt-inner{padding:1rem 1rem 1.1rem;border-top:2px dashed rgba(245,240,228,.35);display:flex;flex-wrap:wrap;gap:1rem 1.8rem} .rt-inner .b{min-width:min(100%,200px)} .rt-inner .bh{font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:#B9B1A2;margin-bottom:.35rem} .rt-inner p{font-size:.93rem;line-height:1.55;max-width:40ch;color:#B9B1A2} .rt-cars{display:flex;flex-wrap:wrap;gap:.32rem} .rt-cars i{font-style:normal;font-weight:700;font-size:.76rem;border:2px solid #F5F0E4;padding:.2rem .45rem;color:#F5F0E4} .rt-inner .est{font-family:Syne,sans-serif;font-weight:800;font-size:1.25rem;color:var(--gold-lt)} /* ═══════════ STEPS ═══════════ */ .steps{display:grid;grid-template-columns:1fr;gap:.9rem} @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}} .step{border:var(--bd) solid var(--ink);background:var(--paper);box-shadow:5px 5px 0 var(--ink);padding:1.2rem 1.3rem;position:relative} .step .n{font-family:Syne,sans-serif;font-weight:800;font-size:2.6rem;line-height:.9;margin-bottom:.4rem; -webkit-text-stroke:2px var(--ink);color:var(--gold-fill)} .step h3{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.1rem;margin-bottom:.35rem} .step p{font-size:.95rem;line-height:1.55;color:var(--ink-2)} .kyc{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.5rem} .kyc .k{border:var(--bd) solid var(--ink);background:var(--paper-2);padding:.45rem .75rem;font-weight:700;font-size:.86rem} /* ═══════════ FAQ ═══════════ */ .faq{display:grid;gap:.6rem;max-width:920px} /* SCOPED to .faq. These were bare `details` and `summary` selectors, so every
added anywhere on the site since inherited a cream background, a 2.5px border and a drop shadow. On the dark docket that rendered as an empty bordered strip between the calendar and the city selects, which is what the client circled. 121 of the 123
on the site are FAQ items inside .faq; the two that are not are exactly the ones that should never have had this styling. */ .faq details{border:var(--bd) solid var(--ink);background:var(--paper);box-shadow:4px 4px 0 var(--ink)} .faq details[open]{background:var(--paper-2)} .faq summary{list-style:none;cursor:pointer;padding:.95rem 1.15rem;display:flex;justify-content:space-between;gap:1rem; align-items:center;font-weight:700;font-size:1.03rem} summary::-webkit-details-marker{display:none} .faq summary .p{width:20px;height:20px;position:relative;flex:none} .faq summary .p::before,.faq summary .p::after{content:"";position:absolute;inset:0;margin:auto;background:var(--ink)} .faq summary .p::before{width:15px;height:3px} .faq summary .p::after{width:3px;height:15px;transition:transform .25s var(--ease)} .faq details[open] .p::after{transform:scaleY(0)} .ans{padding:0 1.15rem 1.05rem;color:var(--ink-2);line-height:1.65;max-width:68ch} /* ═══════════ CLOSING (dark) + FOOTER ═══════════ */ .close{text-align:center} .close h2{font-size:clamp(2.2rem,1.4rem + 4.8vw,5.4rem);max-width:16ch;margin-inline:auto} .close p{margin:1.1rem auto 1.6rem;max-width:44ch;font-size:1.05rem;line-height:1.6;color:#B9B1A2} /* .hero-cta as well as .row. The closing section centres its heading and paragraph, but only `.row` was centred -- and every page except the homepage uses `.hero-cta` for that button pair, so the buttons sat hard left under centred text on 23 of 24 pages. */ .close .row,.close .hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center} footer.ft{background:var(--ink);color:var(--paper);padding-block:clamp(2.2rem,4.4vw,3.2rem) 1.5rem} .ft-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:start} @media(min-width:760px){.ft-grid{grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:2rem}} /* The first column led with a gold tag and the other three with an h4, so the four headings sat on different baselines and the row read as unaligned. The tag now uses the h4's exact metrics and every column starts at the same line. */ .ft-grid > div > .tag:first-child{display:inline-block;margin-bottom:.85rem; font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.78rem; text-transform:uppercase;letter-spacing:.1em;line-height:1.35;padding:.2rem .5rem} .ft h4{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:.78rem;text-transform:uppercase; letter-spacing:.1em;color:var(--gold-lt);margin-bottom:.85rem} .ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem} /* A bare
  • -- a place we deliver to that has no page -- inherited the body font size while .ft a is .94rem. "Chandigarh - Mohali" therefore rendered visibly LARGER than the linked cities under it and the column read as broken. Size and height are set on the li so linked and unlinked rows match; the anchor keeps its own min-height for the tap target. */ .ft ul li{font-size:.94rem;line-height:1.5;min-height:32px;display:flex;align-items:center} .ft ul li:not(:has(a)){opacity:.72} .ft a{opacity:.85;font-size:.94rem;min-height:32px;display:inline-flex;align-items:center} .ft a:hover{opacity:1;color:var(--gold-lt)} /* Footer ground is ink, so the lockup needs no block behind it. */ .ft .bm{margin-top:.7rem;line-height:0} .ft .bm img{height:40px;width:auto;display:block} .ft .ab{opacity:.8;font-size:.93rem;margin-top:.6rem;line-height:1.6;max-width:32ch} .ft .nap{opacity:.85;font-size:.93rem;line-height:1.75} .ft-bot{border-top:2px solid rgba(245,240,228,.2);margin-top:1.8rem;padding-top:1.1rem;display:flex; flex-wrap:wrap;gap:.4rem 1.3rem;justify-content:space-between;font-size:.8rem;opacity:.7} /* reveal — fail-safe */ .anim .rv{opacity:0;transform:translateY(15px)} .anim .rv.in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)} @media(prefers-reduced-motion:reduce){.anim .rv{opacity:1;transform:none}} :focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ── Mobile legibility ──────────────────────────────────────────────────── Found by auditing the live site at 360px and 390px. The docket's instruction line and its terms line render at 9-9.5px, which is genuinely hard to read on a phone -- and one of them tells the user how to operate the calendar, so it is not decoration. Raised at phone widths only; the desktop composition is untouched. Deliberately NOT changed: .s1, .s3 and .n (7-10.5px). Those are the ticket stamp's serial number and verification mark. They are texture, nobody has to read them, and enlarging them would break the stamp. */ @media (max-width:560px){ .dkcal-foot span, .dk-fine, .docket .lab span, .dk-cap span{font-size:12px;letter-spacing:.04em;line-height:1.35} } /* ── Full menu: dropdowns ───────────────────────────────────────────────── Seven top-level items, mirroring the old site. No JavaScript: the panels open on :hover and on :focus-within, so a keyboard tab through the bar opens each one, and every link is in the HTML for crawlers. .nv is the desktop bar. Below 1180px it is replaced by the drawer, which uses
    and therefore also needs no script. */ .nv .has{position:relative} .nv .has > a{display:inline-flex;align-items:center;gap:.34rem} .cv{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);opacity:.75;transition:transform .18s var(--ease)} .nv .has:hover .cv,.nv .has:focus-within .cv{transform:rotate(225deg) translate(-3px,-3px)} .dd{position:absolute;top:100%;left:-1rem;min-width:16.5rem;display:grid;text-align:left; background:var(--paper);border:var(--bd) solid var(--ink); box-shadow:var(--sh) var(--sh) 0 var(--ink);padding:.4rem;z-index:60; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s} .nv .has:hover > .dd,.nv .has:focus-within > .dd{opacity:1;visibility:visible;transform:none} /* A gap between the trigger and the panel would close it as the pointer crosses; this bridges it without moving anything visually. */ .dd::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px} /* `.nav .dd a`, not `.dd a`. The bar's own rule is `.nav ul a` at specificity (0,1,2), which beats (0,1,1) -- so `align-items:center` from that rule won and every dropdown link rendered centred inside its column flexbox. Adding the `.nav` class takes this to (0,2,1), which wins on class count. */ .nav .dd a{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem; padding:.5rem .7rem;min-height:38px;justify-content:center;text-align:left; font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none; border:0;transition:background .13s var(--ease)} .nav .dd a:hover,.nav .dd a:focus-visible{background:var(--gold-fill)} .nav .dd a b{font-weight:800} .nav .dd a span{font-size:.76rem;font-weight:500;color:var(--ink-2);letter-spacing:.01em} .nav .dd a:hover span{color:var(--ink)} .dd-h{padding:.55rem .7rem .2rem;font-size:.68rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ink-2)} .dd-h:not(:first-child){border-top:1px solid var(--paper-3);margin-top:.25rem} .dd-wide{min-width:14rem} /* The bar is dark over the hero and cream once shrunk; the panel is always cream, so its own colours must not inherit either state. */ .nav .dd a{color:var(--ink)} .nav .dd a::after{display:none} @media (prefers-reduced-motion:reduce){.dd{transition:none}.cv{transition:none}} /* ── Full menu: mobile drawer ───────────────────────────────────────────── */ .drawer nav{gap:.45rem} .dr-top,.dr-g > summary{font-family:Syne,sans-serif;font-weight:800;font-size:1.2rem; border:var(--bd) solid var(--ink);padding:.62rem .85rem;background:var(--paper); color:var(--ink);text-decoration:none;display:flex;align-items:center; justify-content:space-between;min-height:44px;cursor:pointer;list-style:none} .dr-g > summary::-webkit-details-marker{display:none} .dr-g > summary::after{content:'';width:9px;height:9px;flex:none; border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor; transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s var(--ease)} .dr-g[open] > summary{background:var(--gold-fill)} .dr-g[open] > summary::after{transform:rotate(225deg) translate(-4px,-4px)} .dr-g > div{display:grid;padding:.35rem 0 .1rem .55rem;border-left:var(--bd) solid var(--gold)} .dr-g > div a{font-family:var(--body,inherit);font-weight:600;font-size:1rem; padding:.5rem .6rem;min-height:40px;display:flex;align-items:center; border:0;background:none;color:var(--ink);text-decoration:none} .dr-g > div a:active{background:var(--paper-2)} /* Seven items plus a phone number and a button do not fit a 1024 bar. The drawer takes over earlier than the old 980px breakpoint, and the phone number loses its digits before that rather than wrapping the bar. */ @media (max-width:1320px){.tel .tel-n{display:none}} @media (max-width:1180px){ .nav ul.nv{display:none} .burger{display:inline-flex} } /* ── Floating contact widget ────────────────────────────────────────────── Desktop: two pills bottom-right, above everything. Phone: a full-width bar pinned to the bottom, because a floating circle covers the content you are trying to read and gets hit by accident with a thumb. z-index 90 keeps it under the mobile drawer (100), which must cover it. */ .tcrc-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90; display:flex;flex-direction:column;gap:.55rem;align-items:flex-end} .tcrc-fab a{display:inline-flex;align-items:center;gap:.5rem; padding:.62rem .95rem;min-height:46px;border:var(--bd) solid var(--ink); font-weight:700;font-size:.9rem;letter-spacing:.01em;text-decoration:none; box-shadow:4px 4px 0 var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .tcrc-fab a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .tcrc-fab .fab-wa{background:var(--gold-fill);color:var(--ink)} .tcrc-fab .fab-tel{background:var(--ink);color:var(--paper)} @media (max-width:760px){ .tcrc-fab{right:0;left:0;bottom:0;flex-direction:row;gap:0} .tcrc-fab a{flex:1;justify-content:center;min-height:52px;border-radius:0; box-shadow:none;border-width:0;border-top:var(--bd) solid var(--ink)} .tcrc-fab a:hover{transform:none;box-shadow:none} .tcrc-fab .fab-wa{border-right:var(--bd) solid var(--ink)} /* The bar covers the last 52px of every page. This was `body{padding-bottom}` and it silently did nothing: tcrc_strip() in the mu-plugin sets `body{padding:0 !important}` to kill the theme's own spacing, and that !important wins. Putting the space on the FOOTER instead sidesteps it, and the footer is the last element on every page so the effect is identical. env() adds the iPhone home-indicator inset on top. */ footer.ft{padding-bottom:calc(52px + 1.2rem + env(safe-area-inset-bottom))} } @media (prefers-reduced-motion:reduce){.tcrc-fab a{transition:none}} /* ── Mobile type scale ──────────────────────────────────────────────────── Measured on the live homepage at 390px: the display headings were coming out at 32-41px, and Syne at 800 weight fits roughly 11 characters on a 342px line. "Your deposit comes back. Full stop." rendered as FIVE lines with one word per line, which is what made the page read as broken on a phone. The vw term was doing the damage, not the floor: --f-xl resolved to 41px at 390px because 1.1rem + 6.1vw already exceeds its 2.5rem minimum. So the tokens are re-declared for small screens with a gentler slope. Desktop is untouched -- above 560px the original clamps still apply. Result at 390px: h1 ~32px, section h2 ~25px, which fits 3-4 words a line. */ @media (max-width:560px){ :root{ --f-xl:clamp(1.85rem, .85rem + 4.3vw, 2.45rem); --f-lg:clamp(1.5rem, .95rem + 2.2vw, 1.95rem); --f-md:clamp(1.12rem, .98rem + .7vw, 1.35rem); } /* Headings this large need tighter leading or the lines drift apart. */ h1,h2{line-height:1.06;letter-spacing:-.015em} .sh h2{margin-bottom:.5rem} /* Stop a long word forcing a horizontal overflow at the narrowest widths. */ h1,h2,h3{overflow-wrap:break-word} /* Three headings set their own clamp and so ignored the token override above. Measured at 390px they came out at 38px, 41px and 28px, which put one word on a line: .gua h2 "Your deposit comes back. Full stop." 38px, FIVE lines .close h2 "Ready when you are." 41px, three lines .px-head h2 "Luxury SUVs and 4x4s, from Rs 5,500" 28px, four lines Their `max-width` in `ch` was also lying: 19ch assumes 19 characters fit, and at 38px only about 11 do. Sizes and measures both corrected. */ .gua h2{font-size:clamp(1.65rem,1rem + 3vw,2.3rem);max-width:15ch} .close h2{font-size:clamp(1.75rem,1.05rem + 3.2vw,2.4rem);max-width:14ch} .px-head h2{font-size:clamp(1.3rem,.95rem + 1.6vw,1.7rem);max-width:17ch} } /* ── Docket: collapse the calendar on phones ────────────────────────────── Measured at 390x844 before this: the docket was 646px of an 844px screen and the calendar was 320px of that, so the city, the car and the send button all sat below the fold. The is hidden on desktop and the panel forced open, so nothing about the desktop docket changes. */ .dksum{display:none} .dkwrap{margin:0} @media (max-width:760px){ .dksum{display:flex;align-items:center;justify-content:space-between;gap:.6rem; padding:.7rem .85rem;margin-bottom:.55rem;cursor:pointer;list-style:none; border:2px solid var(--gold);background:rgba(190,153,65,.10); font-size:.82rem;letter-spacing:.05em;text-transform:uppercase; font-weight:700;color:var(--gold-lt);min-height:44px} .dksum::-webkit-details-marker{display:none} .dksum b{font-weight:600;text-transform:none;letter-spacing:0; font-size:.82rem;color:var(--paper);opacity:.85;text-align:right} .dksum::after{content:"";width:9px;height:9px;flex:none; border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)} .dkwrap[open] > .dksum::after{transform:rotate(225deg) translate(-3px,-3px)} /* The docket header and the dates row both wrapped to two lines at 390px: "QUOTE & HOLD" broke mid-phrase, and "PICK YOUR DATES" fought "Tap to open the calendar" for the same row. Both are cramped rather than broken, which is exactly the clutter being complained about. */ .dk-cap{flex-wrap:wrap;gap:.15rem .6rem} .dk-cap h2{font-size:1.16rem;white-space:nowrap} .dk-cap span{font-size:.73rem} /* .66rem computed to 10.56px, under the floor */ .dksum{flex-wrap:nowrap} .dksum > span{white-space:nowrap;font-size:.76rem} .dksum b{font-size:.76rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Tighter grid so the open state costs less too. */ .dkcal{margin-top:0} .dkcal-grid button,.dkcal-grid span{min-height:34px} } @media (prefers-reduced-motion:reduce){.dksum::after{transition:none}} /* ── Footer: mobile ─────────────────────────────────────────────────────── 1,200px tall at 390px before this, because four desktop columns stack into one and each link took a full-width 65px row. Two columns for the link lists, tighter rows, and the tap target comes from padding so 44px is kept while the visual gap shrinks. */ @media (max-width:760px){ .ft-grid{gap:1.15rem} .ft h4{margin-bottom:.35rem} /* Two columns. `.ft ul` is a flex column by default, so it is re-declared as a grid rather than patched. */ .ft ul{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem;align-items:start} /* min-height must STAY. Setting it to 0 and relying on padding produced ~30px rows -- under the 32px tap floor -- and failed all 24 pages. The height comes from min-height; the padding just controls how tight the rows look inside it. */ .ft ul li{min-height:34px;padding:.1rem 0;font-size:.9rem;line-height:1.35} .ft a{min-height:34px;padding:.1rem 0;font-size:.9rem;line-height:1.35} .ft .ab{margin-top:.45rem;font-size:.89rem;line-height:1.5;max-width:38ch} .ft .nap{font-size:.89rem;line-height:1.6} /* The address block is prose, not a list: one column. */ .ft-grid > div:last-child ul{grid-template-columns:1fr} .ft-bot{margin-top:1.15rem;padding-top:.85rem;font-size:.82rem} .ft .bm img{height:34px} } /* ── Oversized wordmark strip ───────────────────────────────────────────── Purely decorative, so it is aria-hidden: a screen reader already has the company name from the footer address block and does not need it twice. clip-path as well as overflow:hidden -- the text is deliberately wider than the viewport, and overflow alone lets it widen the document on some mobile browsers, which is exactly the horizontal-scroll bug the gate checks for. */ .ft-mark{margin-top:clamp(1.6rem,4vw,2.8rem);overflow:hidden;clip-path:inset(0); line-height:.78;user-select:none;pointer-events:none} .ft-mark span{display:block;white-space:nowrap;font-family:Syne,sans-serif; font-weight:800;letter-spacing:-.03em; /* MEASURED, not estimated. Two wrong guesses first: 15.5vw fitted only "THE CA", and 7.4vw was still 69% too wide. Syne 800 is far wider than the ~0.62em rule of thumb -- the real figure here is about 1.06em a character. At 4.35vw the 20-character phrase spans the 1257px strip with a couple of percent clipped at each edge, which is the effect the reference has. The phone gets the SHORT form. Twenty characters at 390px means 17px type, which is not a statement, it is a caption. */ font-size:min(4.35vw,60px); color:transparent;-webkit-text-stroke:1.5px rgba(245,240,228,.16); text-align:center} @supports not ((-webkit-text-stroke: 1px red)){ .ft-mark span{color:rgba(245,240,228,.09);-webkit-text-stroke:0} } /* `.ft-mark .fm-*`, not `.fm-*`. The base rule is `.ft-mark span` at (0,1,1), which beats a bare class at (0,1,0), so `display:none` was ignored and BOTH wordmarks rendered on top of each other. This is the third time this exact trap has cost time on this project; when overriding anything set by `.parent element`, match the parent too. */ .ft-mark .fm-sm{display:none} @media (max-width:760px){ .ft-mark{margin-top:1.3rem} .ft-mark span{-webkit-text-stroke-width:1px;font-size:7.7vw} .ft-mark .fm-lg{display:none} .ft-mark .fm-sm{display:block} } /* ── Floating Google rating ─────────────────────────────────────────────── Sits directly above the call/WhatsApp widget as part of the same stack. 4.9 from 158 is the strongest proof this business has and it otherwise only appeared once, in the hero, where it scrolls away in the first screen. Deliberately NOT a third button in the phone bottom bar: that bar is for actions, and a rating is not one. */ .tcrc-gr{position:fixed;right:1.1rem;bottom:calc(1.1rem + 104px);z-index:90; display:inline-flex;align-items:center;gap:.55rem; padding:.5rem .8rem .5rem .6rem;min-height:46px; background:var(--paper);color:var(--ink);text-decoration:none; border:var(--bd) solid var(--ink);box-shadow:4px 4px 0 var(--ink); transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .tcrc-gr:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .gr-g{flex:none;width:22px;height:22px;display:block} .gr-g svg{width:100%;height:100%;display:block} .gr-txt{display:flex;flex-direction:column;gap:1px;line-height:1} .gr-top{display:flex;align-items:center;gap:.35rem} .gr-top b{font-family:Syne,sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-.01em} .gr-stars{display:inline-flex;gap:1px;color:#A07F31} .gr-stars svg{width:11px;height:11px;display:block} .gr-sub{font-size:.7rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em} /* Phone: the bottom bar is full width and 52px, so the badge sits just above it, left-aligned away from the thumb, and drops the review line to stay small. */ @media (max-width:760px){ .tcrc-gr{right:auto;left:.7rem;bottom:calc(52px + .7rem); padding:.4rem .65rem .4rem .5rem;min-height:40px;gap:.45rem; box-shadow:3px 3px 0 var(--ink)} .gr-g{width:18px;height:18px} .gr-top b{font-size:.92rem} .gr-stars svg{width:10px;height:10px} /* 0.64rem computes to 10.24px, under the 11px floor, and this line is real information -- it is the sample size behind the 4.9. Raised rather than exempted. */ .gr-sub{font-size:.7rem} } /* Very small phones: the stars alone carry it. */ @media (max-width:360px){ .gr-sub{display:none} } .tcrc-gr.gr-hide{opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none} @media (prefers-reduced-motion:reduce){.tcrc-gr{transition:none}} /* ═══════════ MOBILE DENSITY ═══════════ Benchmarked against selfdrivecarinchandigarh.com at 390px, which the client rates as reading well. That page runs 10px of height per word with 97px of section padding; this one ran 6px per word with 69px. Same content, half the air. Everything below is phone-only -- desktop is untouched. */ @media (max-width:760px){ /* ── Air ────────────────────────────────────────────────────────────── 69px of combined vertical padding was the single biggest contributor to the page feeling packed. The reference sits near 97px. */ /* 9vw computes to 35px a side at 390px -- 70px combined, barely above the 69px we started from. The reference sits at 97px, so 12.5vw (49px a side) is the figure that actually matches it. */ /* :not(.hero) matters. #top on /our-cars/ is
    , so this rule replaced its padding-top:var(--navh) and dropped the eyebrow 24px BEHIND the sticky header -- measured, not guessed. The hero sets its own vertical rhythm and must keep the nav clearance. */ section.sec,section.dk:not(.hero),section.close{padding-block:clamp(2.9rem,12.5vw,4rem)} .sh{margin-bottom:1.35rem} .sh p{margin-top:.55rem} /* ── The hero headline ──────────────────────────────────────────────── 38.4px against the reference's 32px, and it is the first thing anyone judges the page by. */ .hero h1,.phero h1,.shero h1{font-size:clamp(1.72rem,8.1vw,2.1rem);line-height:1.04} .hero .lede,.phero .lede{font-size:.97rem;line-height:1.55} /* Body copy down ~3%. Measured against the reference: TCRC is 15.5px against its 16px, so the type is already SMALLER. What makes it read as bigger is the typeface -- Space Grotesk averages 7.39px a glyph against the reference's 6.87px, so it is 7.6% wider per character at a 3% smaller size. Both pages land at 46-48 characters a line, so line length is not the problem. The face is the locked brand, so this is a small compensation, not a fix: going further would trade real readability for a perception. */ /* The section body copy is `.sh p` and `.sub` at 1.05rem, which computes to 16.8px -- BIGGER than the reference's 16px, and Space Grotesk is 7.6% wider per glyph on top of that. This is the "fonts are too big" the client kept reporting; a bare `p` rule never reached it because both selectors are more specific. 0.96rem = 15.4px, which lands the effective width on the reference. */ .sh p,.sub,.gua .sub{font-size:.96rem;line-height:1.58;max-width:none} .lede{font-size:.97rem} /* ── Premium cars: 7 stacked cards were 1,554px ─────────────────────── A snap carousel instead. Every card stays in the DOM and in the markup order, so a mobile-first crawler still sees all seven -- which is why this was chosen over hiding the last three. scroll-padding matches the wrap padding so a snapped card lines up with the text above it rather than sitting flush to the screen edge. */ .px-stage{display:flex;gap:.75rem;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; padding-bottom:.5rem} .px-stage::-webkit-scrollbar{height:0} .px-stage > .pc{flex:0 0 82%;scroll-snap-align:start} /* A carousel with no visible affordance reads as a broken grid. */ .px-head::after{content:"Swipe for all seven \2192";display:block;margin-top:.6rem; font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; color:var(--gold-lt);opacity:.85} /* ── Video reels: 3 stacked 9:16 cards were 903px ─────────────────────── */ .reels{display:flex;gap:.7rem;overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:.4rem} .reels::-webkit-scrollbar{height:0} .reels > .reel{flex:0 0 62%;scroll-snap-align:start} /* ── Six service cards, one per row, were 744px ───────────────────────── */ .svc-grid{grid-template-columns:1fr 1fr} .svc{padding:.85rem .8rem} /* .68rem computed to 10.88px -- and this is the service NAME, the thing a visitor taps. Shrinking a card title to fit two columns is the wrong trade; the padding gives back the room instead. */ .svc-n{font-size:.8rem;line-height:1.25} .svc-d{display:none} /* the card title carries it; the blurb is the third line down */ /* ── Trust strip ─────────────────────────────────────────────────────── Two columns, but the labels are Syne 800 at 1.05rem and every one of the four wrapped to two lines, which turned a one-line reassurance strip into a block. Syne is wide; at 0.92rem they fit. */ .trust-in{grid-template-columns:1fr 1fr} .trust-in div{padding:.8rem .85rem} .trust-in b{font-size:.92rem;line-height:1.15} .trust-in span{font-size:.78rem;line-height:1.3} /* ── Page heroes: text over a photo mosaic ───────────────────────────── /our-cars/ carries an inline scrim that is only 50% opaque in the middle (`radial-gradient(... rgba(20,18,16,.5) ...)`). On a wide screen the text sits in the dark left third; on a phone it sits right over the brightest part of a tiled grid of car photos and the lede was barely legible. !important is needed because the gradient is an inline style attribute and nothing else can outrank it. Scoped to phones only. */ .phero .scrim,.phero-2 .scrim{ background:linear-gradient(180deg,rgba(20,18,16,.93) 0%,rgba(20,18,16,.9) 40%, rgba(20,18,16,.96) 100%)!important} /* The measured text contrast against the scrim base is 7:1, which is fine. What broke legibility was the PHOTO showing through at 80% opacity: a tiled mosaic of cars behind body copy. At phone size that image cannot carry detail anyway, so it becomes atmosphere and the words win. */ /* A two-sentence hero headline at one size runs five lines. Dropping the second sentence a step gives it hierarchy and buys back a line. */ .phero h1 .gtext,.shero h1 .gtext{font-size:.84em} .phero h1{max-width:none} } /* A horizontally scrolling child must never widen the document. Both of these are inside .wrap, which is already padded, so the carousel scrolls within its own box and the page does not move sideways. */ @media (max-width:760px){ .px,.reels,.px-stage{max-width:100%} } /* ── Docket: slimmer, and actually translucent ──────────────────────────── Client: "too big, not transparent enough". Measured at 1440 it was 612px of a 900px viewport. The rgba(20,18,16,.32) ground was already translucent but every row inside it was opaque, so the panel read as a solid slab. backdrop-filter does the work: the hero photo stays visible THROUGH the panel instead of being covered by it. Guarded by @supports, because without the blur a 32% ground over a busy photo is unreadable -- the fallback is a more opaque ground, not a transparent one. */ .docket{backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .docket{background:rgba(20,18,16,.86)} } /* Tighter rows. Measured breakdown of the 612px panel before this: calendar 293 (grid 187, header 38, day names 20, footer 44) stub 98 (the 51px button plus its fine print) rows 64 (the two selects) header 35 The calendar was half the panel, and its own chrome -- month nav, day initials, hint line -- was 102px of that for 187px of actual dates. That chrome is what got cut, not the dates. */ .dk-hd{padding-block:.45rem} .dk-body{padding:.75rem .85rem} .dkcal-grid button{height:26px} .dkcal-grid{padding:3px} .dkcal-hd{padding:3px 6px} .dkcal-nav{width:26px;height:26px} .dkcal-dow{padding:4px 5px 0} .dkcal-foot{padding:4px 8px} .dk-stub{padding:.6rem .85rem} .dk-go{min-height:46px} .docket .lab{margin-bottom:3px} .dkcal{margin-bottom:12px} /* ── Phone: the form leaves the hero ────────────────────────────────────── The hero was eyebrow + badge + h1 + tagline + lede + CTA + a 378px form, about 1.2 screens before the page makes its case. The form is MOVED, not hidden -- see .dk-move below -- so nothing leaves the DOM. */ @media (max-width:760px){ /* :empty, NOT display:none on the form. The first draft of this hid `.hero .docket` and relied on JS to move it -- which meant a phone with JS disabled lost the form completely, the exact failure this whole approach exists to avoid. Hiding the WRAPPER only once it is empty means: JS ran and moved the form, so collapse the gap; JS did not run, so leave the form exactly where it has always been. */ .hero-side:empty{display:none} } /* ── /contact/ enquiry section: two columns on desktop ──────────────────── The form is ~390px in a 1340px wrap, so it left roughly 950px of empty dark to its right. Copy on the left, form on the right -- the same arrangement the homepage hero uses, so it reads as the same component rather than a stray panel. One column below 900px, where stacking is correct anyway. */ @media (min-width:900px){ #enquiry .wrap{display:grid;grid-template-columns:minmax(0,1fr) 420px; gap:clamp(2rem,4vw,4rem);align-items:start} #enquiry .sh{margin-bottom:0;align-self:center} #enquiry .sh p{max-width:44ch} #enquiry .dockwrap{justify-self:end;width:100%} } /* ── Calendar month arrows: back above the tap floor on phones ──────────── The docket-slimming pass took .dkcal-nav to 28px (26px measured, the border is inside the box), which is under the 32px minimum and failed / and /contact/ on the mobile gate. Desktop keeps the slim 28px -- these are mouse targets there. On a phone they are thumb targets, so 32px, and the month header row grows by 4px, which is nothing next to the 60px the slimming pass took out of the panel overall. */ @media (max-width:760px){ .dkcal-nav{width:32px;height:32px;min-width:32px;min-height:32px} } /* ── Trust strip: the sub-line was inheriting the wrong strut ───────────── .trust-in span is inline, so its line boxes are sized by the PARENT's strut -- 16px x 1.6 = 25.6px -- not by its own 12.48px x 1.3. On a phone these wrap to two lines and the 25.6px gap between them read as a spacing bug. Making it a block gives it its own strut. */ .trust-in span{display:block;line-height:1.35;margin-top:.15rem} /* ── Floating rating on phones: score only ──────────────────────────────── Measured at 390px the badge was 145px wide -- 37% of the screen -- and it sat over body copy in the deposit section, hiding most of a line. It already yields to forms and to the opening screen, but no rule can stop a fixed element crossing plain prose, so the answer is to make it small enough that it stops mattering: the Google G and the score, no stars, no sub-line. ~70px, 18% of the screen, and still a 34px tap target. The stars stay on desktop, where there is room for them, and the full claim including the review count stays in the aria-label either way. */ @media (max-width:760px){ .tcrc-gr{padding:.35rem .55rem .35rem .45rem;min-height:34px;gap:.35rem; box-shadow:2px 2px 0 var(--ink)} .gr-g{width:16px;height:16px} .gr-top b{font-size:.85rem} .gr-stars{display:none} .gr-sub{display:none} } /* ══════════ /our-cars/ — banner + category carousels ══════════ .phero-2, .wall and .tick are used on this page ONLY (grepped across pages/*.html), so everything here is scoped by construction. */ /* ── The ticker sits flush to the bottom of the banner ──────────────────── It is the hero's last child, so the hero's own padding-bottom left a 48px band of dead black under the gold strip. The spacing the copy needs moves onto .wrap, where it belongs. */ .phero-2{padding-bottom:0} .phero-2 .wrap{padding-bottom:clamp(1.1rem,4vw,1.7rem)} @media (max-width:900px){ /* ── The photo wall was fighting the words ───────────────────────────── Tiles render at opacity .48 on a #241F19 grid; under a 90% scrim that still leaves the grid lines and car shapes tracking through the h1 and the lede. Dropping the tiles and lifting the middle of the scrim keeps the wall as texture -- which is its job -- without it competing with the text on top of it. */ .wall img{opacity:.26} .phero-2 .scrim{background:linear-gradient(180deg, rgba(20,18,16,.94) 0%,rgba(20,18,16,.90) 42%,rgba(20,18,16,.97) 100%)!important} } @media (max-width:760px){ /* ── Category carousels, in the homepage premium-fleet language ──────── Cars were 190x252 portrait cards with white-space:nowrap captions, so every name clipped mid-word -- "Maruti S-Press", "Toyota Fo". The fix is the geometry the client already approved on the homepage: one landscape card at a time at 82% of the screen, 16:10, the next one peeking, and a caption that is allowed to wrap. Scoped to .fb-all, which only /our-cars/ uses. The homepage fleet section shares .dock and .dcar and must not change. !important on width/height: the dock's magnify script writes an inline width onto every .dcar, and the existing 190px rule only wins because it shouts. Same reason here. */ .fb-all .dock{gap:.75rem;height:auto; padding:1rem clamp(1rem,2.5vw,1.5rem) 1.15rem; scroll-snap-type:x mandatory;scroll-padding-inline:clamp(1rem,2.5vw,1.5rem)} .fb-all .dcar{flex:0 0 82%!important;width:auto!important;height:auto!important; aspect-ratio:16/10;scroll-snap-align:start} .fb-all .dcar img{position:absolute;inset:0;width:100%;height:100%} /* The caption, matching .pc .cap on the homepage: name on top, spec under, both allowed to wrap now that there is room for them. */ .fb-all .dcar-i{padding:.9rem 1rem .85rem} .fb-all .dcar-i b{white-space:normal;font-size:1.02rem;line-height:1.15} .fb-all .dcar-i i{white-space:normal;font-size:.76rem;margin-top:.2rem;line-height:1.3} /* ── Swipe affordance, one per category ──────────────────────────────── A carousel with no visible cue reads as a broken grid -- the same reason the homepage premium row carries "Swipe for all seven". The count comes from data-n on the stage so it can never disagree with the row. */ .fb-all .fb-swipe{display:block;margin:.55rem 0 0; padding:0 clamp(1rem,2.5vw,1.5rem);font-size:.72rem;letter-spacing:.09em; text-transform:uppercase;font-weight:700;color:var(--gold-dp)} } .fb-swipe{display:none}