/* ============================================================================ CORRIDOR v1 — iDrive design layer ---------------------------------------------------------------------------- Loaded LAST in the cascade (after slice32-compat), so it wins on order alone. There is not one `!important` in this file. Removing the require_once for inc/corridor-layer.php in functions.php reverts the site completely. Scope of this tranche: colour, type, spacing, controls, header, hero order, booking shell, sections, footer. Light theme only — the live theme has no dark palette and inventing one over hardcoded colours would break pages. ========================================================================= */ :root{ /* forest ramp, built on the live theme-color #123F2B */ --corr-900:#04110D; --corr-800:#08201A; --corr-700:#0C2C22; --corr-600:#123F2B; --corr-500:#1B5138; --corr-400:#2A6D4B; /* gold — rules, small caps, one outlined action. Never a filled primary. */ --corr-gold:#9C7A3C; --corr-gold-lift:#C9A96A; --corr-gold-wash:#F2EADB; /* action */ --corr-action:#0E4C33; --corr-action-hi:#16613F; --corr-action-ink:#FFFFFF; /* neutrals — cool stone with a green bias */ --corr-ink:#061512; --corr-body:#33443C; --corr-mist:#6A7A72; --corr-faint:#93A199; --corr-hair:#D9E1DB; --corr-rule:#C3CFC7; --corr-stone:#F1F4F1; --corr-surface:#FFFFFF; --corr-sunken:#E8EEE9; /* semantic, held clear of both the gold and the action green */ --corr-ok:#0F6B58; --corr-ok-bg:#DEEFEA; --corr-warn:#8E5417; --corr-warn-bg:#F6E8D8; --corr-crit:#9E2820; --corr-crit-bg:#F7E1DF; --corr-r-sm:5px; --corr-r-md:8px; --corr-r-lg:12px; --corr-sh-1:0 1px 2px rgba(6,21,18,.05); --corr-sh-2:0 2px 6px rgba(6,21,18,.06), 0 14px 34px rgba(6,21,18,.07); --corr-sh-3:0 8px 20px rgba(6,21,18,.09), 0 36px 80px rgba(6,21,18,.13); --corr-gutter:clamp(22px,5.5vw,72px); --corr-measure:68ch; /* Georgia is the fallback and it is a real transitional serif, so the first paint is already correct if Newsreader has not swapped in yet. */ --corr-serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif; --corr-sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --corr-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ── base ─────────────────────────────────────────────────────────────── */ body{ background:var(--corr-stone); color:var(--corr-body); font-family:var(--corr-sans); font-size:1.0625rem; line-height:1.65; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overscroll-behavior-y:none; } h1,h2,h3,h4{ font-family:var(--corr-serif); font-weight:400; color:var(--corr-ink); letter-spacing:-.014em; line-height:1.12; text-wrap:balance; } h1{font-size:clamp(2.5rem,1.85rem + 3.1vw,4.5rem); line-height:1.03; letter-spacing:-.022em} h2{font-size:clamp(1.875rem,1.5rem + 1.7vw,3rem); line-height:1.07; letter-spacing:-.018em} h3{font-size:clamp(1.5rem,1.3rem + .9vw,2.125rem)} h4{font-size:clamp(1.25rem,1.15rem + .45vw,1.625rem); line-height:1.2} h5,h6{font-family:var(--corr-sans); font-weight:600; color:var(--corr-ink); letter-spacing:-.005em} p,li{max-width:var(--corr-measure)} .container{max-width:1280px; padding-inline:var(--corr-gutter)} /* readable focus that is visible on both the stone and the forest grounds */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--corr-gold); outline-offset:3px; border-radius:3px; } ::selection{background:var(--corr-gold-wash); color:var(--corr-ink)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms; animation-iteration-count:1; transition-duration:.001ms; scroll-behavior:auto} } /* ── the small-caps label, the one recurring ornament ─────────────────── */ .eyebrow{ font-family:var(--corr-sans); font-size:.75rem; /* was 11.84px on the hero and failing contrast */ font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--corr-gold); display:flex; align-items:center; gap:14px; line-height:1; } .eyebrow span{width:26px; height:1px; background:currentColor; flex:none; border-radius:0} .eyebrow--light{color:var(--corr-gold-lift)} .menu-kicker{ font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--corr-mist); } /* ── buttons ──────────────────────────────────────────────────────────── */ .button{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:var(--corr-r-sm); font-family:var(--corr-sans); font-weight:600; font-size:.9375rem; letter-spacing:.01em; text-decoration:none; border:1px solid transparent; -webkit-appearance:none; appearance:none; transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .button--primary{background:var(--corr-action); color:var(--corr-action-ink); box-shadow:var(--corr-sh-1)} .button--primary:hover{background:var(--corr-action-hi); box-shadow:var(--corr-sh-2)} .button--ghost{background:transparent; color:var(--corr-ink); border-color:var(--corr-rule)} .button--ghost:hover{background:var(--corr-sunken); border-color:var(--corr-ink)} .button--lime{background:transparent; color:var(--corr-gold); border-color:var(--corr-gold)} .button--lime:hover{background:var(--corr-gold); color:#FFF9EE} .text-link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; font-size:.9375rem; color:var(--corr-ink); text-decoration:none; border-bottom:1px solid var(--corr-gold); padding-bottom:1px; } .text-link:hover{color:var(--corr-gold); border-bottom-color:currentColor} /* ── form controls — C-07: 290x34 at 15px became 52px at 16px ───────────── The real markup is: label.booking-shell__control > span + span.field-control > input so the border and the height belong to .field-control, not to the label. .place-control is the same wrapper with a combobox and a suggestion list. --------------------------------------------------------------------- */ .booking-shell__control{ display:flex; flex-direction:column; gap:7px; min-width:0; background:none; border:0; padding:0; } .booking-shell__control > span:first-child, .booking-shell__field > label{ font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--corr-mist); line-height:1.3; } .field-control{ display:flex; align-items:stretch; width:100%; min-width:0; background:var(--corr-surface); border:1px solid var(--corr-rule); border-radius:var(--corr-r-sm); transition:border-color .16s ease, box-shadow .16s ease; } .field-control:hover{border-color:var(--corr-mist)} .field-control:focus-within{border-color:var(--corr-action); box-shadow:0 0 0 3px var(--corr-gold-wash)} .field-control > input, .field-control > select, .results-tool__control > input, .results-tool__control > select{ width:100%; min-width:0; min-height:52px; padding:0 15px; font-family:var(--corr-sans); font-size:1rem; /* 16px — below this iOS Safari zooms on focus */ line-height:1.3; color:var(--corr-ink); background:transparent; border:0; border-radius:var(--corr-r-sm); -webkit-appearance:none; appearance:none; } .field-control > input:focus, .field-control > select:focus{outline:none} .field-control > input::placeholder{color:var(--corr-faint)} .field-control > select{ padding-inline-end:42px; background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px); background-size:6px 6px,6px 6px; background-repeat:no-repeat; } /* date and time inputs render their own indicator; keep it inside the box */ .field-control > input[type="date"], .field-control > input[type="time"]{padding-inline-end:12px} .place-control{position:relative} .place-suggestions{ background:var(--corr-surface); border:1px solid var(--corr-rule); border-radius:var(--corr-r-sm); box-shadow:var(--corr-sh-2); z-index:40; } .place-suggestions [role="option"]{min-height:48px; display:flex; align-items:center; padding:0 15px; font-size:.9375rem} .field-control > input[aria-invalid="true"]{color:var(--corr-crit)} /* ── header ───────────────────────────────────────────────────────────── */ .site-header__bar{background:var(--corr-900); border-bottom:1px solid rgba(201,169,106,.20)} .site-header__inner{gap:1rem} .brand{min-height:48px; text-decoration:none} .brand strong{font-family:var(--corr-serif); font-weight:400; font-size:1.4375rem; letter-spacing:-.02em; color:#FFFFFF} .brand strong span{color:var(--corr-gold-lift)} .brand small{ display:block; font-family:var(--corr-sans); font-size:.5625rem; /* SLICE 106. Literal pixel-parity with the iDrive.pk heading is not achievable at a readable size -- the tagline is 29 characters vs the headings 9, so matching widths needs either ~4px text or ~-0.2em letter-spacing (overlapping glyphs). Real fix is the redrawn lockup construction (see slice106 plan); this is a legible interim size, down from .75rem/12px. */ font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--corr-gold-lift); margin-top:4px; white-space:nowrap; } /* SLICE 107. Slice 102 put a full-height divider between the mark and the whole text block -- a join, but not the one the mock actually specced: the tagline growing from a hairline tick off the mark, on a shared baseline, while the heading sits free next to the mark with no rule between them. Replaces the divider with that tick, scoped to the tagline row only. */ .brand{ display:flex; align-items:center; gap:.6rem; } .brand > span{ display:grid; } .brand small{ display:flex; align-items:center; gap:.4rem; } .brand small::before{ content:""; width:11px; height:1px; background:rgba(201,169,106,.65); flex:0 0 auto; } @media (max-width:520px){ .brand{ gap:.5rem; } } .desktop-nav a,.nav-explore{ min-height:44px; display:inline-flex; align-items:center; padding:0 12px; font-family:var(--corr-sans); font-size:.875rem; font-weight:500; color:#BCD1C3; text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent; background:transparent; border-radius:0; } .desktop-nav a:hover,.nav-explore:hover{color:#FFFFFF; border-bottom-color:var(--corr-gold)} .header-social a{min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; color:#8FA79A; text-decoration:none} .header-social a:hover{color:var(--corr-gold-lift)} .header-account.button--ghost{color:#E7F0EA; border-color:rgba(231,240,234,.34); min-height:44px; padding-inline:18px} .header-account.button--ghost:hover{background:rgba(231,240,234,.10); border-color:rgba(231,240,234,.65)} .header-book.button--primary{background:#F4F1E9; color:#08201A; border-color:#F4F1E9; min-height:44px; padding-inline:20px} .header-book.button--primary:hover{background:#FFFFFF} .menu-toggle{min-width:44px; min-height:44px} @media (max-width:520px){ .brand small{display:none} .header-account{display:none} } .mega-menu{background:var(--corr-800); border-top:1px solid rgba(201,169,106,.2)} .mega-menu a strong{font-family:var(--corr-serif); font-weight:400; color:#F4F9F5} .mega-menu a span{color:#9BB2A4; font-size:.875rem} /* ── HERO — audit U-01, U-02, U-08 ──────────────────────────────────────── Live: .hero holds .hero__grid (copy + orbiting visual) and then, BELOW it, .hero__booking. On a 390x844 viewport that put the composer's top edge at 846px — one pixel past the fold. Here the hero becomes a flex column and the booking block is ordered first on mobile, so the search form is the first thing under the masthead. On desktop it stays below the copy but rides up over the seam as a full-width bar. --------------------------------------------------------------------- */ .hero{ display:flex; flex-direction:column; background:linear-gradient(172deg,var(--corr-700) 0%,var(--corr-900) 100%); padding-block:clamp(28px,4.5vw,64px) clamp(40px,6vw,88px); position:relative; isolation:isolate; overflow:hidden; } /* the two blurred colour blobs are the single most "template" thing on the page */ .hero__glow{display:none} .hero__grid{order:2; align-items:center; gap:clamp(28px,5vw,64px)} .hero__booking{order:1; margin-bottom:clamp(28px,5vw,48px)} .hero__copy{min-width:0} .hero h1{color:#FFFFFF; margin-block:1.25rem 1.25rem} .hero h1 em{font-style:italic; color:var(--corr-gold-lift)} .hero__lead{font-size:clamp(1.125rem,1.05rem + .32vw,1.3125rem); line-height:1.55; color:#B4CCBE; max-width:46ch} .hero .eyebrow{color:var(--corr-gold-lift)} /* 2.6:1 on the gradient became ~6.9:1 */ .hero__proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.5rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(201,169,106,.26); } .hero__proof span{display:grid; gap:6px; font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8FA79A} .hero__proof strong{font-family:var(--corr-serif); font-weight:400; font-size:2rem; line-height:1; color:#FFFFFF; letter-spacing:-.02em} /* the orbits and the floating badges are decoration that costs layout */ .hero__visual{display:none} /* ── booking shell ────────────────────────────────────────────────────── */ .booking-shell{ background:var(--corr-surface); border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); box-shadow:var(--corr-sh-3); overflow:hidden; } .booking-shell__head{padding:1.5rem 1.5rem 1.25rem; border-bottom:1px solid var(--corr-hair)} .booking-shell__tabs{ display:flex; flex-wrap:wrap; border:1px solid var(--corr-rule); border-radius:var(--corr-r-sm); overflow:hidden; background:var(--corr-surface); gap:0; } .booking-shell__tabs > *{flex:1 1 auto; min-width:0; border-inline-end:1px solid var(--corr-hair)} .booking-shell__tabs > *:last-child{border-inline-end:0} .booking-shell__tabs button{ width:100%; min-height:46px; padding:0 12px; border:0; background:transparent; font-family:var(--corr-sans); font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:var(--corr-mist); cursor:pointer; border-radius:0; white-space:nowrap; transition:background-color .16s ease, color .16s ease; } .booking-shell__tabs button:hover{color:var(--corr-ink); background:var(--corr-sunken)} .booking-shell__tabs button[aria-checked="true"], .booking-shell__tabs button[aria-selected="true"], .booking-shell__tabs button.is-active{background:var(--corr-600); color:#F1F6F2} .booking-shell__tab-icon{opacity:.85} .booking-shell__fields{display:grid; gap:1rem; padding:1.5rem} .booking-shell__field{display:flex; flex-direction:column; gap:7px; min-width:0} .booking-shell__note{ font-size:.8125rem; /* was 10.08px */ color:var(--corr-mist); line-height:1.5; } .booking-shell__route-rail{border-color:var(--corr-hair)} .booking-shell__errors{ background:var(--corr-crit-bg); color:var(--corr-crit); border:1px solid var(--corr-crit); border-radius:var(--corr-r-sm); padding:.875rem 1rem; font-size:.9375rem; } .button--search{min-height:54px; width:100%; font-size:1rem} .booking-shell__check,.booking-shell__return-toggle{min-height:44px; display:inline-flex; align-items:center; gap:10px; font-size:.9375rem} .booking-shell__check input,.booking-shell__return-toggle input{width:20px; height:20px; accent-color:var(--corr-action)} /* ── sections ─────────────────────────────────────────────────────────── */ .section{padding-block:clamp(56px,8vw,116px)} .section-heading{display:grid; gap:1rem; margin-bottom:clamp(32px,5vw,64px)} .section-heading h2{max-width:20ch} .section-heading p{max-width:58ch; font-size:1.0625rem; color:var(--corr-mist); line-height:1.6} .services-section{background:var(--corr-surface)} .destinations-section{background:var(--corr-stone)} .fleet-preview{background:var(--corr-surface)} .how-section{background:var(--corr-800); color:#C6D8CD} .how-section h2,.how-section h3,.how-section h4{color:#F4F9F5} .how-section .eyebrow{color:var(--corr-gold-lift)} .how-section .section-heading p{color:#9BB2A4} /* cards become hairline-separated objects, not stacked pills */ .service-card,.vehicle-card,.search-state-card{ background:var(--corr-surface); border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); box-shadow:none; transition:box-shadow .18s ease, border-color .18s ease; } .service-card:hover,.vehicle-card:hover{box-shadow:var(--corr-sh-2); border-color:var(--corr-rule)} .service-card h3,.vehicle-card h3{font-family:var(--corr-serif); font-weight:400} .service-card--dark{background:var(--corr-700); border-color:transparent; color:#C6D8CD} .service-card--dark h3{color:#F4F9F5} .service-card__number{ font-family:var(--corr-mono); font-size:.8125rem; font-weight:500; letter-spacing:.06em; color:var(--corr-gold); } .service-card__icon,.search-state-card__icon{color:var(--corr-gold)} .vehicle-card__top{border-bottom:1px solid var(--corr-hair)} .trust-strip{background:var(--corr-900); color:#A9C2B3; border-block:1px solid rgba(201,169,106,.2)} .trust-strip__grid{padding-block:1.5rem; gap:2rem} .trust-strip strong{color:#F4F9F5; font-family:var(--corr-sans); font-weight:600; font-size:.9375rem} .steps-list{counter-reset:corr-step; display:grid; gap:0} .steps-list > li{ counter-increment:corr-step; display:grid; grid-template-columns:52px minmax(0,1fr); gap:1rem; padding-block:1.5rem; border-bottom:1px solid rgba(255,255,255,.10); max-width:none; } .steps-list > li::before{ content:"0" counter(corr-step); font-family:var(--corr-mono); font-size:.8125rem; color:var(--corr-gold-lift); letter-spacing:.06em; padding-top:4px; } .global-cta{background:var(--corr-700); color:#C6D8CD} .global-cta h2,.global-cta h3{color:#F4F9F5} .action-row{display:flex; gap:.75rem; flex-wrap:wrap; align-items:center} .global-cta .button--ghost{color:#E7F0EA; border-color:rgba(231,240,234,.34)} .global-cta .button--ghost:hover{background:rgba(231,240,234,.10)} .global-cta .button--primary{background:#F4F1E9; color:#08201A; border-color:#F4F1E9} /* ── long-form editorial pages — the 2,700–3,500 word bodies ──────────── */ .entry-content p,.entry-content li{max-width:var(--corr-measure); line-height:1.78} .entry-content h2{margin-top:2.5em} .entry-content h3{margin-top:1.8em} .entry-content a{color:var(--corr-action); text-decoration-thickness:1px; text-underline-offset:3px} .entry-content a:hover{color:var(--corr-gold)} table{font-variant-numeric:tabular-nums} /* ── footer ───────────────────────────────────────────────────────────── */ .site-footer{background:var(--corr-900); color:#8FA79A} .site-footer a{color:#BCD1C3; text-decoration:none; min-height:40px; display:inline-flex; align-items:center; border-bottom:1px solid transparent; font-size:.9375rem} .site-footer a:hover{color:#FFFFFF; border-bottom-color:var(--corr-gold)} .site-footer h2,.site-footer h3,.site-footer h4,.site-footer strong{ color:var(--corr-gold-lift); font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; } .site-footer small,.site-footer p{font-size:.875rem; line-height:1.6} /* ── mobile drawer ────────────────────────────────────────────────────── */ .mobile-drawer{background:var(--corr-800); color:#C6D8CD} .mobile-drawer nav a{min-height:52px; display:flex; align-items:center; font-family:var(--corr-serif); font-size:1.25rem; color:#F4F9F5; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.10)} .mobile-drawer nav a:hover{color:var(--corr-gold-lift)} .mobile-drawer__head button{min-width:48px; min-height:48px} .drawer-brand strong{font-family:var(--corr-serif); font-weight:400; color:#FFFFFF} /* ── type floor. The audit counted 61 elements under 14px. ────────────── */ small,figcaption,.form-note,.help-note{font-size:.8125rem; line-height:1.55} sup,sub{font-size:.7em} /* ── never let the document scroll sideways ───────────────────────────── */ html,body{max-width:100%; overflow-x:clip} img,video,canvas,svg,table,pre{max-width:100%} .table-wrap,.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch} /* ── measured corrections ───────────────────────────────────────────────── Everything below was found by rendering this exact cascade against the real header, front-page and booking-shell markup at 390x844 and 1440x900, and reading the computed styles back. Each line closes one measured defect. --------------------------------------------------------------------- */ /* header and footer social marks were 10.9px in a 24px box */ .header-social a,.social-links a,.drawer-social a{ font-size:.8125rem; min-height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; } .social-links a,.drawer-social a{padding-inline:10px} /* footer links sat at 28px — raise the specificity so the 40px floor lands */ .site-footer__grid a,.site-footer__bottom a,.site-footer__brand a{ min-height:40px; display:inline-flex; align-items:center; font-size:.9375rem; } /* booking shell micro-copy: 10.9px and 11.5px */ .booking-shell__step{ font-family:var(--corr-mono); font-size:.75rem; letter-spacing:.06em; color:var(--corr-mist); white-space:nowrap; } .booking-shell__tabs small{display:block; font-size:.75rem; color:var(--corr-mist); font-weight:400; letter-spacing:0; text-transform:none} .booking-shell__tabs strong{display:block; font-size:.875rem; font-weight:600; color:inherit} .booking-shell__tabs button[aria-selected="true"] small{color:rgba(241,246,242,.72)} .booking-shell__tab-icon{font-size:.75rem} .booking-shell__check span{font-size:.875rem; color:var(--corr-body)} .booking-shell__check input[type="checkbox"]{width:24px; height:24px; flex:none} /* the numbered step markers in the how-it-works list */ .steps-list b,.steps-list > li > span:first-child,.service-card__number{ font-family:var(--corr-mono); font-size:.75rem; letter-spacing:.06em; } /* ── desktop hero ───────────────────────────────────────────────────────── The composer stays full width below the copy on desktop, which is what the existing booking-shell CSS is built for: forcing it into a 460px column made the route rail and the advanced row overlap. Desktop was never the defect — the fold problem was mobile only, and the flex order above fixes that. --------------------------------------------------------------------- */ @media (min-width:1080px){ .hero{padding-block:clamp(44px,5.5vw,80px)} .hero__grid{order:1; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); align-items:center} .hero__booking{order:2; margin-bottom:0; margin-top:clamp(32px,4vw,56px)} .hero__visual{display:block; position:relative; margin:0} .hero__vehicle{width:100%; height:auto; max-height:380px; object-fit:contain; margin-inline:auto} .orbit{display:none} .hero-badge{ background:rgba(255,255,255,.06); border:1px solid rgba(201,169,106,.34); color:#E7F0EA; font-family:var(--corr-sans); font-size:.8125rem; font-weight:500; border-radius:var(--corr-r-sm); box-shadow:none; backdrop-filter:none; } .hero-badge span{color:var(--corr-gold-lift)} } /* ── booking shell head: the kicker is the label, the h2 is the line ────── */ .booking-shell__head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap} .booking-shell__kicker{ display:block; font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--corr-gold); margin-bottom:.5rem; } .booking-shell__head h2{ font-family:var(--corr-serif); font-weight:400; font-size:1.5rem; line-height:1.15; letter-spacing:-.015em; color:var(--corr-ink); margin:0; } /* the legacy field wrapper carries its own card; with .field-control now drawing the box that produced a box inside a box. Flatten the outer one. */ .booking-shell__field{ background:none; border:0; padding:0; box-shadow:none; display:flex; flex-direction:column; gap:7px; min-width:0; } .booking-shell__field > label{margin:0} .booking-shell__advanced{display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center} /* ═══════════════════════════════════════════════════════════════════════════ TRANCHE 2 — the twenty-six commercial pages --------------------------------------------------------------------------- These are the pages organic search lands on: the city, route and airport families plus the six diaspora corridors. They carry 2,700–3,500 words each and render through page.php or template-city/route/airport.php as .content-hero + .container.prose-layout > article.prose + aside.page-booking-card. Class names below are the ones inc/route-pages.php:526 declares. ════════════════════════════════════════════════════════════════════════ */ /* ── page hero ────────────────────────────────────────────────────────── */ .content-hero{ background:linear-gradient(172deg,var(--corr-700) 0%,var(--corr-900) 100%); color:#C6D8CD; padding-block:clamp(36px,5vw,72px) clamp(40px,6vw,80px); } .content-hero__inner,.idrive-hero__grid{display:grid; gap:clamp(24px,4vw,56px)} @media (min-width:960px){ .idrive-hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center} } .content-hero h1{color:#FFFFFF; margin-block:1.25rem .875rem; max-width:18ch} .content-hero .eyebrow{color:var(--corr-gold-lift)} .content-hero__lead{ font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem); line-height:1.55; color:#B4CCBE; max-width:56ch; } .idrive-hero__media img{border-radius:var(--corr-r-md); border:1px solid rgba(201,169,106,.28)} .idrive-hero__credit{font-size:.75rem; color:#7E9A8A; letter-spacing:.06em; margin-top:.625rem} .idrive-hero__proof{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.5rem; margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid rgba(201,169,106,.26); } .idrive-hero__proof strong{font-family:var(--corr-serif); font-weight:400; font-size:1.875rem; color:#FFFFFF; display:block; line-height:1} .idrive-hero__proof span{font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8FA79A} /* ── breadcrumb ───────────────────────────────────────────────────────── */ .breadcrumb{font-size:.8125rem} .breadcrumb ol,.breadcrumb ul{display:flex; flex-wrap:wrap; align-items:center; gap:.625rem; list-style:none; margin:0; padding:0} .breadcrumb li{max-width:none} .breadcrumb a{ color:inherit; opacity:.78; text-decoration:none; min-height:40px; display:inline-flex; align-items:center; border-bottom:1px solid transparent; } .breadcrumb a:hover{opacity:1; border-bottom-color:var(--corr-gold)} .breadcrumb--banded{background:var(--corr-900); color:#8FA79A; padding-block:.25rem} .breadcrumb [aria-current="page"]{color:var(--corr-ink); opacity:1} .breadcrumb--banded [aria-current="page"]{color:#F4F9F5} /* ── the two-column long-form layout ──────────────────────────────────── */ .prose-layout{ display:grid; gap:clamp(32px,5vw,72px); padding-block:clamp(40px,6vw,88px); align-items:start; } @media (min-width:1080px){ .prose-layout{grid-template-columns:minmax(0,1fr) minmax(300px,340px)} } .prose-layout > *{min-width:0} /* ── the body copy. This is where the 2,700–3,500 words live. ─────────── */ .prose{font-size:1.0625rem; line-height:1.78; color:var(--corr-body)} .prose > *{max-width:var(--corr-measure)} .prose > p + p{margin-top:1.15em} .prose h2{ font-family:var(--corr-serif); font-weight:400; color:var(--corr-ink); font-size:clamp(1.625rem,1.4rem + .95vw,2.25rem); line-height:1.15; letter-spacing:-.018em; margin:2.6em 0 .7em; padding-top:1.6rem; border-top:1px solid var(--corr-hair); max-width:24ch; } .prose h2:first-child{margin-top:0; padding-top:0; border-top:0} .prose h3{ font-family:var(--corr-serif); font-weight:400; color:var(--corr-ink); font-size:clamp(1.25rem,1.15rem + .5vw,1.5rem); line-height:1.25; margin:2em 0 .55em; max-width:30ch; } .prose h4{font-family:var(--corr-sans); font-weight:600; font-size:1.0625rem; color:var(--corr-ink); margin:1.6em 0 .5em} .prose a{color:var(--corr-action); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--corr-rule)} .prose a:hover{color:var(--corr-gold); text-decoration-color:currentColor} .prose strong{color:var(--corr-ink); font-weight:600} .prose ul,.prose ol{padding-inline-start:1.35em; margin:1.15em 0} .prose li{margin-bottom:.5em} .prose li::marker{color:var(--corr-gold)} .prose blockquote{ margin:2em 0; padding:0 0 0 1.5rem; border-inline-start:2px solid var(--corr-gold); font-family:var(--corr-serif); font-size:1.3125rem; line-height:1.45; color:var(--corr-ink); font-style:normal; } .prose table{width:100%; border-collapse:collapse; margin:2em 0; font-size:.9375rem; max-width:none} .prose th{ text-align:start; font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--corr-mist); padding:.75rem 1rem; border-bottom:1px solid var(--corr-rule); background:var(--corr-sunken); } .prose td{padding:.875rem 1rem; border-bottom:1px solid var(--corr-hair)} .prose figure{margin:2.25em 0; max-width:none} .prose figure img{border-radius:var(--corr-r-md); border:1px solid var(--corr-hair)} .prose figcaption{font-size:.8125rem; color:var(--corr-mist); margin-top:.625rem} .prose hr{border:0; border-top:1px solid var(--corr-hair); margin:2.5em 0} /* ── the aside: a real quote rail, sticky on desktop ──────────────────── */ .page-booking-card{ background:var(--corr-surface); border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); box-shadow:var(--corr-sh-2); padding:1.5rem; display:grid; gap:.875rem; } @media (min-width:1080px){ .page-booking-card{position:sticky; top:76px} } .page-booking-card h2{ font-family:var(--corr-serif); font-weight:400; font-size:1.375rem; line-height:1.2; color:var(--corr-ink); margin:0; max-width:none; } .page-booking-card p{font-size:.9375rem; color:var(--corr-mist); margin:0; max-width:none} .page-booking-card .button{width:100%} /* ── FAQ — twelve questions per corridor page ─────────────────────────── */ .faq-list{border-top:1px solid var(--corr-rule); max-width:var(--corr-measure)} .faq-list .result-card__details{border-bottom:1px solid var(--corr-hair); background:none; border-radius:0} .faq-list summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:1.4rem 0; min-height:52px; } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary strong{ font-family:var(--corr-serif); font-weight:400; font-size:1.1875rem; line-height:1.35; color:var(--corr-ink); letter-spacing:-.01em; } .faq-list summary b{ font-family:var(--corr-sans); font-weight:400; font-size:1.5rem; line-height:1; color:var(--corr-gold); flex:none; transition:transform .2s ease; } .faq-list details[open] summary b{transform:rotate(45deg)} .faq-list .result-card__detail-panel{padding-bottom:1.4rem} .faq-list .result-card__detail-panel p{font-size:.9375rem; line-height:1.75; color:var(--corr-body); max-width:var(--corr-measure)} /* ── route facts, notes and groups ────────────────────────────────────── */ .route-facts,.city-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem 2rem; padding-block:1.5rem; } .route-facts strong,.city-facts strong{ font-family:var(--corr-serif); font-weight:400; font-size:1.625rem; line-height:1; display:block; color:inherit; font-variant-numeric:tabular-nums; } .route-facts span,.city-facts span{ font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.78; display:block; margin-top:.4rem; } .route-note{ border-inline-start:2px solid var(--corr-gold); background:var(--corr-gold-wash); color:var(--corr-ink); padding:1rem 1.25rem; border-radius:0 var(--corr-r-sm) var(--corr-r-sm) 0; font-size:.9375rem; line-height:1.65; max-width:var(--corr-measure); } .route-group{border-top:1px solid var(--corr-hair); padding-top:2rem; margin-top:2rem} /* ── related corridors and destination grids ──────────────────────────── */ .destination-grid{display:grid; gap:0; border-top:1px solid var(--corr-rule)} .destination-grid > *{ border-bottom:1px solid var(--corr-hair); padding-block:1.25rem; text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:56px; transition:background-color .18s ease; } .destination-grid > *:hover{background:var(--corr-sunken)} .destination-grid strong{font-family:var(--corr-serif); font-weight:400; font-size:1.1875rem; color:var(--corr-ink)} .destination-grid span{font-size:.875rem; color:var(--corr-mist)} @media (min-width:760px){ .destination-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2.5rem} } /* ── state and boundary cards ─────────────────────────────────────────── */ .search-state-card,.results-boundary{ background:var(--corr-surface); border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); box-shadow:none; padding:1.5rem; } .search-state-card__icon{color:var(--corr-gold)} .city-review{ border-inline-start:2px solid var(--corr-gold); padding-inline-start:1.5rem; font-family:var(--corr-serif); font-size:1.25rem; line-height:1.5; color:var(--corr-ink); } .city-selfdrive__band{background:var(--corr-sunken); border-block:1px solid var(--corr-hair)} .city-airport__lead{font-size:1.0625rem; line-height:1.7; color:var(--corr-body); max-width:var(--corr-measure)} .city-fleet__list{display:grid; gap:0; border-top:1px solid var(--corr-rule)} .city-fleet__list > *{border-bottom:1px solid var(--corr-hair); padding-block:1.25rem} .section-heading--compact{margin-bottom:1.75rem} .screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } /* ── measured corrections, tranche 2 ────────────────────────────────────── Rendered against the real cascade at 390 and 1440 and read back. --------------------------------------------------------------------- */ /* the hero was spacing every child by one grid gap, which read as drift rather than rhythm. Spacing is now set per element, deliberately. */ /* the legacy sheet lays .content-hero__inner out as an auto-fit grid, which put the H1, the lead and the stat row into 200px tracks. The hero is a single column of stacked blocks; spacing is set per element below. */ /* SLICE 81. justify-items MUST be reset with the display, not left behind. tranche1-v03.css sets `.content-hero__inner{display:grid; justify-items:start}`. Flipping the box to block above left justify-items:start in place, where it was inert for as long as browsers applied box alignment only to grid and flex. Chrome now honours it on BLOCK containers too, so every in-flow child was given justify-self:start and shrink-wrapped to its content instead of filling the column. Measured on /cars/minibus-coach/full-size-54-seat-coach/ at 390: the content box is 311px, the hero rail rendered 249px - a 20% narrow column, and an empty probe div appended to the same parent measured 0px, which is shrink-to-fit and cannot happen to a normal block child. Stretch is the initial value; it is stated because an earlier sheet took it away. */ .content-hero__inner{display:block; gap:0; justify-items:stretch} .content-hero__inner > *{max-width:none} .content-hero .breadcrumb{margin-bottom:1.75rem} .content-hero .eyebrow{margin-bottom:1.25rem} .content-hero h1{margin-block:0 1rem} .content-hero__lead{margin:0} /* breadcrumb sat at 11.8px from a legacy rule */ .breadcrumb,.breadcrumb li,.breadcrumb a,.breadcrumb span{font-size:.8125rem} /* .route-facts is a
in a body section, not in the hero: a wrapper div per fact holding
label and
value with an optional note. The legacy sheet gives each one a rounded card and a drop shadow. Corridor turns the set into one hairline-divided table — a 1px grid gap over a hairline ground, which reads as a printed figure block rather than a row of pills. */ .route-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px; margin:0; padding:0; background:var(--corr-hair); border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); overflow:hidden; } .route-facts > div{ background:var(--corr-surface); border:0; border-radius:0; box-shadow:none; padding:1.5rem; display:grid; gap:.4rem; align-content:start; } .route-facts dt{ font-family:var(--corr-sans); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--corr-mist); } .route-facts dd{ font-family:var(--corr-serif); font-weight:400; font-size:1.5rem; line-height:1.15; color:var(--corr-ink); margin:0; font-variant-numeric:tabular-nums; letter-spacing:-.015em; } .route-facts dd small{ display:block; margin-top:.5rem; font-family:var(--corr-sans); font-size:.8125rem; font-weight:400; line-height:1.6; color:var(--corr-mist); letter-spacing:0; } .route-facts a{color:var(--corr-action); font-weight:600; text-decoration-color:var(--corr-rule)} .route-facts a:hover{color:var(--corr-gold)} /* ── measured on production, 3 September ────────────────────────────────── app.css carries `.hero h1{font-size:clamp(2.8rem,5.4vw,5.4rem); line-height:.98}` at specificity 0,1,1, which beat the bare `h1` rule above. That is the audit's U-02 defect verbatim: at 430px it resolves to 2.55rem over a 0.98 line box, so a four-line mobile headline collides with its own descenders. Matched here at the same specificity, and Corridor loads after app.css. --------------------------------------------------------------------- */ .hero h1, .content-hero h1, .idrive-hero__copy h1{ font-size:clamp(2.5rem,1.7rem + 3.4vw,4.25rem); line-height:1.04; letter-spacing:-.022em; } @media (max-width:430px){ .hero h1, .content-hero h1, .idrive-hero__copy h1{font-size:2.375rem; line-height:1.06} } /* ── the last four sub-12px elements, found on the live corridor page ───── Identified by reading computed styles on /islamabad-airport-to-mirpur-taxi/ after the first Corridor deploy. The inline inside a sentence is left alone: WCAG 2.5.8 exempts a link in a block of text, and padding one out breaks the line box. --------------------------------------------------------------------- */ small{font-size:max(12px,.8125rem); line-height:1.5} .booking-shell small, .booking-shell__tabs small, .button small, .button > span > small{font-size:12px; line-height:1.4} a > b, button b{font-size:max(12px,.75rem)} .idrive-contextual-help__trigger{min-width:28px; min-height:28px; border-radius:50%} .idrive-contextual-help__trigger > span{font-size:.8125rem} /* Two rules outranked the ones above on specificity, read straight off the live page: app.css `.booking-shell__tabs button small` (0,1,2) at 0.68rem, and tranche1-v03--editorial.css `.route-links b` (0,1,1) at 0.66rem. Matched exactly; Corridor loads after both. */ .booking-shell__tabs button small{font-size:12px; line-height:1.4} .route-links b{font-size:12px; letter-spacing:.08em} /* app.css `.trust-strip b {font-size:.72rem}` (0,1,1) — the last sub-12px text on the homepage, read off production 3 September. */ .trust-strip b{font-size:12px; letter-spacing:.08em} /* tranche1-v03--account.css `.page-booking-card .eyebrow {.66rem}` (0,2,0) — the last sub-12px text on the account family, read off /sign-in/. */ .page-booking-card .eyebrow{font-size:.75rem} /* app.css:258 `.booking-shell__advanced > label, .booking-shell__return label` (0,1,1) at .64rem = 10.24px — the last sub-12px VISIBLE text in the booking composer, read off /book/ on 3 September. Specificity matched exactly. */ .booking-shell__advanced > label, .booking-shell__return label{font-size:.75rem; letter-spacing:.07em} /* app.css:259 sets `.booking-shell__advanced select` (0,1,1) to min-height 2.05rem = 32.8px. A native select is not reliably opened by clicking its wrapping label, so the select itself must carry the touch target. 44px is the WCAG 2.5.5 AAA / iOS HIG floor; the checkbox rows keep their 62px label as the target, which does activate on click. */ .booking-shell__advanced select{min-height:44px} /* ==== REPAIR BLOCK v1 START ============================================== Everything below repairs defects the owner reported on 4 September 2026. The whole programme reverts by deleting between this sentinel and its END. Each step is its own named sub-fence and reverts on its own. Why here and not a seventh stylesheet: this file is enqueued last, at priority 200 (inc/corridor-layer.php:113). At equal specificity it already wins. The original mistake was restating only colour and leaving app.css owning geometry, so each block below restates position, grid, min-height, padding and background EXPLICITLY rather than assuming it inherits them. ======================================================================== */ /* --- RB-0 tokens (consumed by later blocks; nothing uses them yet) ------ */ :root{ /* Accessible replacements. --corr-mist #6A7A72 measures 4.08:1 on --corr-stone and is used as a text colour 14 times; this clears AA. */ --rp-muted:#5A6B63; /* 5.10:1 on #F1F4F1 */ --rp-gold-ink:#6E5426; /* 7.10:1 on #FFFFFF — eyebrows/small caps on light */ /* --corr-gold #9C7A3C stays for rules, borders and text on dark grounds. */ --rp-section:clamp(56px,4.5vw,72px); --rp-header-h:5.35rem; /* One stacking scale. Three sheets currently invent their own numbers. */ --z-raised:10; --z-header:20; --z-popover:30; --z-backdrop:45; --z-modal:50; --z-skip:70; } /* --- RB-1 header buttons stop wrapping -------------------------------- app.css:50 makes .site-header__inner a flex row. .brand is flex:0 0 auto (app.css:54) and every nav item is white-space:nowrap (corridor:207), so the two header buttons were the only shrinkable children and absorbed all the overflow. .button here (corridor:108) sets neither white-space nor line-height, so button{font:inherit} (app.css:31) pulled body line-height:1.65 and the wrapped text also grew taller than its 44px siblings. Three declarations; fixes every button on the site. */ .button{white-space:nowrap; line-height:1.2} .header-account.button--ghost, .header-book.button--primary{flex:0 0 auto} .desktop-nav a,.nav-explore{padding-inline:9px} /* --- RB-1 END --- */ /* --- RB-2 destination cards: readable ink on a brand surface ----------- Correction to the written plan. The plan assumed .destination-grid was a long link list and proposed flattening it to hairline rows. The markup says otherwise: every one of the seven call sites emits - front-page.php:218, template-route-index.php:111, page-vehicle-class.php:441, template-city.php:268/352/631, inc/route-pages.php:1074. It is a card. So the fix is to make the card legible and make it look deliberate, not to delete the component. The defect: corridor-v1.css:644 paints --corr-ink #061512 onto the tile, but the tile surface is still app.css:217's linear-gradient(145deg,#1e4332,#08130e) because corridor's replacement selector .destination-grid > * is (0,1,0) and loses to app.css's .destination-grid a at (0,1,1). Measured 1.11:1 - the city name is gone, while .destination-grid small (app.css:221, #b8c7c0, never restated) stays readable. That split is the tell. Contrast on the new gradient, lightest stop --corr-600 #123F2B: #FFFFFF 11.75:1 · --corr-gold-lift #C9A96A 5.19:1 · #C6D8CD 7.88:1. On the darkest stop --corr-900: 17.9 / 7.9 / 12.0:1. */ .destination-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap:clamp(12px,1.4vw,20px); border-top:0; } @media (min-width:760px){ .destination-grid--compact{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(12px,1.4vw,20px); } } .destination-grid > a, .destination-grid > *{ position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:.35rem; min-height:clamp(11.5rem,17vw,14rem); padding:1.5rem; border:1px solid rgba(201,169,106,.22); border-radius:var(--corr-r-lg); background:linear-gradient(160deg,var(--corr-600) 0%,var(--corr-800) 55%,var(--corr-900) 100%); color:#C6D8CD; text-decoration:none; overflow:hidden; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .destination-grid--compact > a, .destination-grid--compact > *{ min-height:clamp(9rem,13vw,11rem); padding:1.25rem; } .destination-grid > a:hover, .destination-grid > *:hover{ background:linear-gradient(160deg,var(--corr-500) 0%,var(--corr-700) 55%,var(--corr-900) 100%); border-color:rgba(201,169,106,.55); transform:translateY(-2px); box-shadow:0 14px 30px rgba(4,17,13,.22); } .destination-grid > a:focus-visible{ outline:2px solid var(--corr-gold-lift); outline-offset:3px; } /* app.css:218's decorative ring is rgba(141,221,63,.3) - lime, a colour retired with the old palette - and it paints over the text. Gold, behind. */ .destination-grid > a::before{border-color:rgba(201,169,106,.30); z-index:0} .destination-grid > a > *{position:relative; z-index:1} /* app.css:219 pins the airport code absolutely at top:1.2rem/left:1.2rem, outside the padding box. Back into flow, pushed to the top by auto margin. */ .destination-grid span{ position:static; top:auto; left:auto; margin-bottom:auto; font-family:var(--corr-sans); font-size:.6875rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--corr-gold-lift); } .destination-grid strong{ font-family:var(--corr-serif); font-weight:400; font-size:clamp(1.35rem,2.2vw,1.65rem); line-height:1.15; color:#FFFFFF; } .destination-grid small{color:#C6D8CD; font-size:.8125rem; line-height:1.45} @media (prefers-reduced-motion:reduce){ .destination-grid > a, .destination-grid > *{transition:none} .destination-grid > a:hover, .destination-grid > *:hover{transform:none} } /* --- RB-2 END --- */ /* --- RB-3a one palette: retire the lime ------------------------------- The site currently renders as two brands. corridor-v1.css introduced the forest/gold system but never retired --idrive-lime #8DDD3F (app.css:6), which is still consumed 33 times across app.css, tranche1-v03.css, tranche2-v01.css and slice33-editorial.css. Redefining the token here - same specificity, later in source - flips all 33 at once instead of restating 33 rules. Where lime was a FILLED primary, gold is the wrong answer (corridor's own rule: gold is for rules, small caps and one outlined action, never a filled primary), so those few are restated below to --corr-action. */ :root{ --idrive-lime:#C9A96A; } /* == --corr-gold-lift */ /* Lime as a mark on a LIGHT ground was already failing SC 1.4.11 at 1.67:1 and gold-lift only reaches 2.04:1 there. --corr-gold #9C7A3C is 3.60:1 on --corr-stone and 4.83:1 on --corr-900: one value, both grounds. */ .eyebrow > span, .prose ul > li::before, .article-reading-meta span + span::before{background:var(--corr-gold)} .prose blockquote, .legal-identity{border-inline-start-color:var(--corr-gold)} .results-assumptions li::before{border-color:var(--corr-gold)} .result-card::before{background:linear-gradient(var(--corr-gold),var(--corr-action))} .cta-intent__check input[type="radio"], .booking-shell__check input{accent-color:var(--corr-action)} /* --- RB-3a END --- */ /* --- RB-3b controls that cannot be seen at all ------------------------ Measured on production, 1440x900, each against its own composited backdrop. Every ratio below is the number the walker returned. */ /* 1:1. .button--primary paints --corr-action on --corr-action, so the only primary call to action on every corridor page is invisible. White on #0E4C33 is 10.0:1. */ .button--primary{ color:var(--corr-action-ink); background:var(--corr-action); border:1px solid var(--corr-action); } .button--primary:hover{background:var(--corr-action-hi); border-color:var(--corr-action-hi)} .button--primary:focus-visible{outline:2px solid var(--corr-gold-lift); outline-offset:2px} /* 1.10:1. corridor:375 flipped the drawer to --corr-800 but re-inked only nav a and .drawer-brand strong; the ghost Sign in kept corridor:118's --corr-ink. 2.73:1 for .pk and the social row (app.css --idrive-green). */ .mobile-drawer .button--ghost{color:#E7F0EA; border-color:rgba(255,255,255,.32)} /* 14.7:1 */ .mobile-drawer .button--ghost:hover{background:rgba(255,255,255,.08); border-color:#E7F0EA} .mobile-drawer__head button{background:rgba(255,255,255,.10); color:#E7F0EA} .drawer-brand, .drawer-brand strong span{color:#E7F0EA} .drawer-social a{color:var(--corr-gold-lift)} /* 8.50:1 */ /* 1.17:1 and 1.42:1. The help strip is the one line telling a first-time visitor which service to pick, and it is invisible on white. */ .idrive-booking-help-strip span, .idrive-booking-help-strip--advanced span{color:var(--corr-body)} /* 8.19:1 */ /* 1.57:1. corridor:334 paints --corr-gold onto app.css:192's --idrive-green disc, and 1.02:1 onto the service card's. Both cards render as a blank circle. Gold wash ground, gold ink glyph: 6.02:1. */ .service-card__icon,.search-state-card__icon{ background:var(--corr-gold-wash); color:var(--rp-gold-ink); border:1px solid var(--corr-gold); width:3rem; margin:0 0 auto; } .service-card--dark .service-card__icon{border-color:var(--corr-gold-lift)} /* 1.94:1 / 2.57:1 / 2.97:1 — labels a user has to read to complete a booking. */ .booking-shell__advanced > label > span, .booking-shell__return label > span{color:var(--corr-body)} .header-social a{color:var(--rp-muted)} .header-social a:hover{color:var(--corr-action)} .booking-shell__tabs button > span > small{color:var(--rp-muted)} /* 3.08:1 at 12px — the trust figures, on --corr-900 since corridor:336. */ .trust-strip b{color:var(--corr-gold-lift)} /* 8.50:1 */ /* 3.76:1 / 3.99:1 / 4.08:1 — gold used as small text. --corr-gold is a rule and border colour; on text it needs --rp-gold-ink on light grounds and --corr-gold-lift on dark ones. */ .booking-shell__kicker, .service-card__number, .page-booking-card .eyebrow{color:var(--rp-gold-ink)} /* 7.10:1 */ .service-card--dark .service-card__number, .page-booking-card--dark .eyebrow, .button--lime{color:var(--corr-gold-lift)} .eyebrow{color:var(--rp-muted)} /* 5.10:1 */ .eyebrow--light,.how-section .eyebrow,.global-cta .eyebrow{color:var(--corr-gold-lift)} .results-boundary{color:var(--corr-body)} .results-boundary strong{color:var(--corr-action)} .mega-menu a{color:#C6D8CD} /* --- RB-3b END --- */ /* --- RB-3c the consent banner ---------------------------------------- Shipped by the idrive-conversion-tracking plugin, not the theme, so it never received the corridor palette: it carries a third green (rgba(142,224,0,.12)) and a lime Accept all that is the loudest element on the home page. The three choices are given equal visual weight - a bright Accept beside two quiet buttons is a dark pattern, and the fix here is honesty as much as palette. */ .idrive-consent{background:rgba(4,17,13,.97); border-top:1px solid var(--corr-gold)} .idrive-consent .idrive-consent__essential, .idrive-consent .idrive-consent__analytics, .idrive-consent .idrive-consent__accept{ color:#E7F0EA; background:rgba(255,255,255,.06); border:1px solid rgba(231,240,234,.42); font-weight:600; } .idrive-consent .idrive-consent__essential:hover, .idrive-consent .idrive-consent__analytics:hover, .idrive-consent .idrive-consent__accept:hover{ background:rgba(255,255,255,.14); border-color:var(--corr-gold-lift); } /* --- RB-3c END --- */ /* --- RB-3d the search button stops being lime ------------------------- app.css:166 fills the primary submit with linear-gradient(#9bed46, --idrive-lime). Redefining the token would make it a filled gold, which corridor forbids. Action green, white ink, gold hairline: 10.0:1. */ .button--search{ color:var(--corr-action-ink); background:var(--corr-action); border:1px solid var(--corr-gold); box-shadow:0 10px 26px rgba(4,17,13,.24); } .button--search:hover{ background:var(--corr-action-hi); border-color:var(--corr-gold-lift); box-shadow:0 14px 32px rgba(4,17,13,.30); } .button--search small{color:rgba(255,255,255,.78)} .button--search b{background:rgba(255,255,255,.14); color:var(--corr-action-ink)} .button--lime{ background:transparent; border:1px solid var(--corr-gold-lift); } .button--lime:hover{background:rgba(201,169,106,.12); border-color:var(--corr-gold-lift)} /* --- RB-3d END --- */ /* --- RB-3e two (0,1,1) rules that outrank every component ------------ Verified with CSS.getMatchedStylesForNode, not inferred. Both are the same mistake corridor made with .destination-grid: a descendant rule quietly owning a property a component thinks it owns. */ /* .prose a is (0,1,1); every .button rule is (0,1,0). So a button placed inside prose - which is exactly where every corridor page puts its only call to action - gets painted --corr-action on --corr-action: 1:1, an invisible primary CTA on 22 published pages. A button is not a prose link; put each variant back out of that rule's reach. */ .prose a.button{text-decoration:none} .prose a.button--primary, .prose a.button--search{color:var(--corr-action-ink)} .prose a.button--ghost{color:var(--corr-ink)} .prose a.button--lime{color:var(--corr-gold-lift)} .prose a.button--primary:hover{color:var(--corr-action-ink)} /* .section-heading p is (0,1,1) and the eyebrow is a

, so the heading rule was overriding the eyebrow's colour (4.08:1), its font-size (17px instead of 12px), its line-height and its max-width. Every section eyebrow on the site has been rendering as body copy. */ .section-heading p.eyebrow{ color:var(--rp-muted); font-size:.75rem; line-height:1.3; max-width:none; } .hero .section-heading p.eyebrow, .hero p.eyebrow, .how-section .section-heading p.eyebrow,.how-section p.eyebrow, .global-cta .section-heading p.eyebrow, .global-cta p.eyebrow, .content-hero .section-heading p.eyebrow,.content-hero p.eyebrow, .results-header p.eyebrow, .page-booking-card--dark p.eyebrow, .section-heading p.eyebrow--light, p.eyebrow--light{color:var(--corr-gold-lift)} /* --- RB-3e END --- */ /* --- RB-4 one stacking scale ----------------------------------------- Measured on production, four independent invented scales: 2147483000 .idrive-consent (plugin) 2147482000 .appx-sheet 100000 .idrive-contextual-help__panel 1000 .skip-link 210 .mobile-drawer / 200 .drawer-backdrop 100 .site-header 40 .place-suggestions Two of those numbers are wrong in a way a user feels: the destination autocomplete (40) sits BELOW the sticky header (100), so suggestions disappear behind the bar once the page is scrolled; and the help popovers (100000) paint over everything including the header. RB-0 already declared the scale - this consumes it. */ .site-header{z-index:var(--z-header)} /* 20 */ .place-suggestions, .idrive-contextual-help__panel{z-index:var(--z-popover)} /* 30 - above the bar */ .idrive-consent{z-index:var(--z-backdrop)} /* 45 - above content, below the drawer */ .drawer-backdrop{z-index:var(--z-backdrop)} .mobile-drawer,.appx-sheet{z-index:var(--z-modal)} /* 50 */ .skip-link{z-index:var(--z-skip)} /* 70 - always reachable */ /* .booking-shell{overflow:hidden} clips both popovers to the form box, so the autocomplete list and every help panel are cut off at the edge of the card they open from. The radius that clip was protecting belongs on the elements that actually have one. */ .booking-shell{overflow:visible} .booking-shell__tabs{border-radius:var(--corr-r-md); overflow:hidden} /* --- RB-4 END --- */ /* --- RB-6 section headings stop being left-jammed --------------------- app.css:182 splits every section heading 1.4fr / .7fr, so an h2 with a 20ch measure sits in 58% of the container and the "Explore ..." link floats alone in a 360px track with a 360px-wide underline beneath a 180px-wide word. app.css:185 then centres the link against a two-line heading on --compact and ends it on the others: two different vertical relationships for the same component on one page. The link needs exactly its own width; the heading should have the rest, and a hairline ties the pair together instead of leaving the link adrift. One relationship, every section. */ .section-heading{ grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(24px,4vw,64px); row-gap:1rem; padding-bottom:1.15rem; border-bottom:1px solid var(--corr-hair); } .section-heading--compact{align-items:end} .section-heading > .text-link, .section-heading .text-link{justify-self:end; white-space:nowrap; text-align:end} .how-section .section-heading, .global-cta .section-heading, .hero .section-heading{border-bottom-color:rgba(255,255,255,.16)} @media (max-width:760px){ .section-heading{grid-template-columns:minmax(0,1fr); align-items:start} .section-heading .text-link{justify-self:start; text-align:start} } /* .trust-strip carried padding:8.5rem 0 2.4rem - 136px of empty band at the top against 38px at the bottom - to make room for a composer that corridor already stopped overlapping it (transform:none, corridor:246). The band is now just a hole in the page. */ .trust-strip{padding-block:clamp(40px,4vw,56px) clamp(32px,3vw,44px)} /* --- RB-6 END --- */ /* --- RB-7 close the holes inside the cards ---------------------------- .service-card is min-height:23rem (368px) holding ~214px of content, and the icon carries margin:3rem 0 auto, so every card renders with a 120-130px hole between the glyph and the heading. Three of those side by side is most of what reads as "empty and unfinished" above the fold. The card keeps its floor - equal heights matter in a row - but the floor is set from the content, not from a round number. */ .service-card{ min-height:clamp(15rem,22vw,18rem); padding:clamp(1.25rem,2vw,1.75rem); gap:0; } .service-card__icon{margin:0 0 auto} .service-card h3{margin-top:clamp(1.25rem,2vw,1.75rem)} .service-card p{margin-bottom:clamp(.75rem,1.4vw,1rem)} .vehicle-card{padding:clamp(1rem,1.6vw,1.25rem)} /* The section hairline already ties the link to the heading; the link's own rule underneath it reads as two rules 25px apart. Keep it for hover, where it means something. */ .section-heading .text-link{border-bottom-color:transparent} .section-heading .text-link:hover{border-bottom-color:currentColor} /* --- RB-7 END --- */ /* --- RB-8 the fonts come home ---------------------------------------- Measured on production: 3 font requests, 224.8 KB - more than the CSS, the JS and the images on the page put together. Two causes, both in the Google Fonts request rather than in the hosting: opsz 6..72 makes Google serve a variable Newsreader carrying the optical-size axis: 128 KB for the latin subset alone. Every serif rule in this file sets an explicit font-size, so the axis was never doing anything. 3 weights Newsreader was requested at 300, 400 and 500. All 19 serif call sites here set font-weight:400. latin subset: 225 KB -> 56 KB (80 KB on a page that renders the italic) Newsreader (Production Type) and Archivo (Omnibus Type) are both SIL Open Font Licence 1.1; the licence text ships beside the files in assets/fonts. The enqueue and the fonts.gstatic preconnect are gone from inc/corridor-layer.php in the same change. latin-ext keeps its own unicode-range and is fetched only by a page that contains those characters. font-display:swap, and the fallback stack still leads with Georgia, so the page is correct before the swap. */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url('../fonts/archivo-roman-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url('../fonts/archivo-roman-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/newsreader-roman-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/newsreader-roman-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/newsreader-italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap; src:url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- RB-8 END --- */ /* --- RB-9 the corridor page's own components get their width back ----- Measured on /islamabad-to-lahore-taxi/: .prose-layout gives its first column 828px, and article.prose then caps ITSELF at 684px. That cap is right for running text - 68ch is a readable measure - but it also squeezes seven structured components that are not running text: .idrive-facts the journey in figures .idrive-compare a seven-row competitor table with four columns .idrive-fleet the vehicle list .idrive-steps how booking works .idrive-fares the published fare ladder .faq-list thirteen questions .travel-panel the connection panel The comparison table is the clearest casualty: at 684px its first column renders 66px wide and "Bus, FM Bilal or Skyways" wraps to three lines. Nothing structural changes here - the measure moves to the text that needs it instead of to the container. */ .prose-layout > .prose{max-width:none} .prose-layout > .prose > p, .prose-layout > .prose > ul, .prose-layout > .prose > ol, .prose-layout > .prose > dl, .prose-layout > .prose > h2, .prose-layout > .prose > h3, .prose-layout > .prose > h4, .prose-layout > .prose > blockquote, .prose-layout > .prose > figure > figcaption{max-width:68ch} /* Section rhythm inside the article. Nine components stacked with paragraph spacing read as one column of text; they are separate answers to separate questions and should be spaced like it. */ .prose-layout > .prose > section{ margin-block:clamp(40px,5vw,72px); padding-top:clamp(24px,3vw,36px); border-top:1px solid var(--corr-hair); } .prose-layout > .prose > section:first-child{margin-top:0; padding-top:0; border-top:0} .prose-layout > .prose > section > h2{margin-top:0} /* Correction to the above, after measuring rather than assuming. max-width was never the constraint: .container is 1240px BORDER box with 72px of padding each side, so the grid has 1096px of content, and minmax(0,1fr) + 72px gap + 340px aside resolves the article to exactly the 684px observed. Releasing max-width changed nothing. The article's left edge stays at 172px, aligned with the hero and every other section above it - moving it would trade one alignment complaint for another - so the width comes out of the gutter and the aside instead: 1096 - 44 - 312 = 740px. */ @media (min-width:1024px){ .prose-layout{ column-gap:clamp(28px,3vw,44px); grid-template-columns:minmax(0,1fr) minmax(280px,312px); } } /* The comparison table is the strongest thing on a corridor page - seven real operators with cited fares - and its row headers were wrapping to three lines in a 66px column. The scroller around it already carries tabindex and role=region, so letting the table take the width it needs and scroll is both the honest fix and the accessible one. */ .idrive-compare__table th[scope="row"]{white-space:nowrap} .idrive-compare__table td, .idrive-compare__table th{padding-block:.85rem} .idrive-compare__scroll{ border:1px solid var(--corr-hair); border-radius:var(--corr-r-md); overscroll-behavior-x:contain; } /* --- RB-9 END --- */ /* --- RB-10 the masthead ---------------------------------------------- Replaces the flat-gradient hero. Three ideas, in priority order: 1. THE SEAM. The photograph ends on a line. Every text node below that line sits on solid --corr-800, so the contrast argument holds for any photograph an editor uploads next year without anyone re-running an audit. Only the eyebrow and the h1 sit over the image, and both are computed against the worst pixel a photograph can produce. 2. READING ORDER. eyebrow -> headline -> search form. A visitor booking from Manchester three weeks before they fly is told what this is before being asked to type an arrival time. 3. THE CAR PARKS. The Land Cruiser keeps its place but stands on the seam with a contact ellipse under the tyres, instead of hovering with an all-round drop shadow and a six-second float loop. SCRIM MATHS. Two layers, both --corr-900 #04110D, never black - the brand's darkest ramp tints a photograph into the palette instead of greying it. Same RGB in both, so the stack collapses to one number: a_eff = 1 - (1 - a1)(1 - a2) Contrast is computed against pure #FFFFFF, a blown-out sky, which is the worst case any upload can produce. Compositing #04110D over white at alpha a gives R = 255-251a, G = 255-238a, B = 255-242a. a_eff 0.804 -> rgb(53,64,60) : #FFFFFF 10.78:1 · #C9A96A 4.98:1 a_eff 0.844 -> rgb(43,54,51) : #FFFFFF 12.51:1 · #C9A96A 5.78:1 --corr-gold #9C7A3C is BANNED as text over the photograph - it peaks at 3.2:1. Gold text over the image is always --corr-gold-lift. */ .hero{ /* OVERRIDES corridor-v1.css:234 (flex column + padding-block). The band supplies its own top padding; the order swap retires with the markup .hero__grid / .hero__booking belonged to. */ display:block; padding-block:0 clamp(40px,6vw,72px); background:var(--corr-800); position:relative; isolation:isolate; overflow:hidden; } .hero__band{ --hero-photo-h:260px; position:relative; isolation:isolate; overflow:hidden; padding-block:20px 0; background:var(--corr-700); /* paints before the photo lands, and if it 404s */ border-bottom:1px solid rgba(201,169,106,.34); /* THE SEAM */ } .hero__media{position:absolute; inset:0 0 auto 0; height:var(--hero-photo-h); z-index:0} .hero__band .hero__img{ width:100%; height:100%; object-fit:cover; object-position:54% 46%; display:block; max-width:none; } .hero__band-inner{position:relative; z-index:3} .hero__band::before{ content:""; position:absolute; inset:0 0 auto 0; height:var(--hero-photo-h); z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(4,17,13,.56) 0%, rgba(4,17,13,.42) 30%, rgba(4,17,13,.40) 56%, rgba(4,17,13,.58) 84%, rgba(4,17,13,.70) 100%); } .hero__band::after{ content:""; position:absolute; inset:0 0 auto 0; height:var(--hero-photo-h); z-index:2; pointer-events:none; background:linear-gradient(180deg, rgba(4,17,13,.74) 0%, rgba(4,17,13,.74) 74%, rgba(4,17,13,.36) 90%, rgba(4,17,13,.24) 100%); } @media (forced-colors:active){ .hero__band::before,.hero__band::after{background:Canvas} .hero__media{display:none} } /* Metric-matched fallback. The self-hosted faces are preloaded and swap fast, but the h1 is the largest text on the page and a swap without this is a visible reflow. */ @font-face{ font-family:"Newsreader Metric Fallback"; src:local("Georgia"), local("Times New Roman"), local("Tinos"); size-adjust:103.4%; ascent-override:88%; descent-override:24%; line-gap-override:0%; font-display:swap; } .hero__eyebrow{ font-size:.75rem; font-weight:600; letter-spacing:.18em; line-height:1.3; gap:0; margin:0 0 14px; color:var(--corr-gold-lift); } .hero .hero__copy h1{ /* OVERRIDES corridor-v1.css:728 clamp and its :736 max-width partner. Specificity (0,3,1) beats both. */ font-family:"Newsreader","Newsreader Metric Fallback",Georgia,serif; font-size:clamp(2rem, 1.1rem + 2.5vw, 2.75rem); line-height:1.06; letter-spacing:-.022em; font-weight:400; color:#FFFFFF; margin:0 0 14px; max-width:none; text-wrap:balance; overflow-wrap:break-word; } .hero .hero__copy h1 em{ /* corridor-v1.css:249 already sets italic + gold-lift. Two refinements: Newsreader's italic runs small on the x-height against its roman, and italics need the tracking relaxed. The full stop is OUTSIDE the in the markup, set upright and white - a slanted terminal stop is the tell that emphasis was applied to a string rather than typeset. */ font-size:1.05em; letter-spacing:-.010em; } /* ── the ground, below the seam ──────────────────────────────────────── No photograph here, so these are fixed numbers: #FFFFFF on --corr-800 is 17.04:1, --corr-stone 15.38:1, --corr-gold-lift 7.87:1. */ .hero__ground{position:relative; z-index:3; padding-top:clamp(28px,3vw,40px)} .hero__lead{ font-size:1.0625rem; line-height:1.55; color:var(--corr-stone); max-width:52ch; margin:0; } .hero__proof{ /* OVERRIDES corridor-v1.css:252-258. The 2rem serif numeral treatment retires with the markup: there is no here and no numeral anywhere in this hero. */ list-style:none; padding:0; border-top:0; margin:clamp(26px,3vw,38px) 0 0; display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,32px); } .hero__proof li{ max-width:34ch; padding-top:13px; border-top:2px solid var(--corr-gold); font-family:var(--corr-sans); font-size:.9375rem; line-height:1.5; color:var(--corr-stone); } .hero__proof span{ display:block; margin-bottom:6px; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--corr-gold-lift); } /* ── the composer, scoped to .hero ───────────────────────────────────── /book/ and every landing page keep the shell they have. */ .hero .booking-shell{ background:var(--corr-stone); border:0; border-top:2px solid var(--corr-gold); border-radius:4px; overflow:visible; box-shadow:0 28px 64px -24px rgba(4,17,13,.62), 0 2px 6px rgba(4,17,13,.16); backdrop-filter:none; /* refused deliberately: a compositing layer over a full-bleed image delays first paint on the mid-range Android this market actually uses */ } .hero .booking-shell::before{display:none} /* The head is taken out of layout and LEFT IN the accessibility tree. Its only content is "Journey composer / Where are you going? / Step 1 of 3"; with the site's own

14px above the slab that is duplicate framing costing 117px of fold. The

stays as the form's accessible name. */ .hero .booking-shell__head{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; white-space:nowrap; clip-path:inset(50%); } .hero .booking-shell__tabs{ margin:12px 14px; padding:0; gap:0; border:0; border-bottom:1px solid var(--corr-rule); border-radius:0; background:none; overflow:visible; } .hero .booking-shell__tab-icon{display:none} .hero .booking-shell__fields{gap:10px; padding:0 14px 14px} .hero .booking-shell__route-rail{display:none} .hero .booking-shell__control, .hero .booking-shell__field{ min-height:0; gap:6px; padding:0; background:none; border:0; box-shadow:none; color:var(--corr-body); } .hero .booking-shell__control > span:first-child, .hero .booking-shell__field > label{ /* An inherited defect, not a preference: these micro-labels resolve to --idrive-muted / --corr-mist, 4.09:1 on stone at 12px. --corr-body on --corr-stone is 9.33:1. */ color:var(--corr-body); font-size:.75rem; line-height:1.2; letter-spacing:.12em; } .hero .field-control{ border-radius:4px; border:1px solid var(--corr-rule); background:var(--corr-surface); } .hero .field-control > input, .hero .field-control > select{ min-height:48px; /* clears SC 2.5.5; font-size stays 1rem because below 16px iOS Safari zooms the page on focus */ color:var(--corr-ink); } .hero .booking-shell__field:hover, .hero .booking-shell__control:hover, .hero .field-control:hover{transform:none; border-color:var(--corr-mist)} .hero .booking-shell__field:focus-within, .hero .booking-shell__control:focus-within, .hero .field-control:focus-within{ /* OVERRIDES app.css:270's lime ring - a 1.4.11 failure and off-palette. */ transform:none; border-color:var(--corr-action); box-shadow:0 0 0 2px var(--corr-action); } .hero .button--search{ align-self:end; min-height:50px; width:100%; border-radius:4px; background:var(--corr-action); color:var(--corr-action-ink); border:0; box-shadow:none; justify-content:center; gap:10px; padding:0 18px; font-size:.9375rem; } .hero .button--search:hover{background:var(--corr-action-hi); box-shadow:none} .hero .button--search small{display:none} .hero .button--search b{background:rgba(255,255,255,.16); color:inherit; width:1.5rem} .hero .booking-shell__note{ /* The disclosure is required and is never hidden or set below 12px. */ margin:0; padding:8px 14px; background:none; border-top:1px solid var(--corr-hair); color:var(--corr-body); font-size:.8125rem; line-height:1.5; } .hero .booking-shell__note span{color:var(--corr-gold)} .hero .idrive-booking-help-strip{margin:0 14px 8px} /* ── the Land Cruiser ────────────────────────────────────────────────── Hidden below 761 exactly as today. */ .hero__vehicle-wrap{display:none} .hero__vehicle{ position:relative; z-index:3; width:100%; height:auto; display:block; right:auto; bottom:auto; inset:auto; /* OVERRIDES app.css:114. A drop shadow floats; a contact shadow sits. The colour filter is what defuses the mismatch between a studio cut-out and a road photograph. */ filter:brightness(.94) saturate(.96) contrast(1.03); animation:none; } .hero__vehicle-shade{ position:absolute; z-index:2; inset-inline:12% 12%; inset-block-end:2px; height:14px; border-radius:50%; background:radial-gradient(closest-side, rgba(4,17,13,.58), rgba(4,17,13,0)); } /* One thing moves, once, and stops. A loop on a hero is a screensaver. */ @media (prefers-reduced-motion:no-preference){ .hero__img{animation:idHeroSettle 1800ms cubic-bezier(.22,.61,.36,1) both} } @keyframes idHeroSettle{from{transform:scale(1.045)} to{transform:none}} @media (prefers-reduced-motion:reduce){ /* corridor-v1.css:84 sets a global animation-duration:.001ms, which would flash the START state. Kill the animation, keep the end state. */ .hero__img{animation:none; transform:none} } /* ── 430 · the one !important ────────────────────────────────────────── app.css:426 forces grid-column:1/-1 !important on every field at <=430, which makes a six-row stack and puts the submit below any phone fold. Specificity cannot beat !important; nothing else can undo it. */ @media (max-width:430px){ .hero .booking-shell__fields{grid-template-columns:1fr 1fr} .hero .booking-shell__fields > .booking-shell__control--date, .hero .booking-shell__fields > .booking-shell__control--time{grid-column:auto !important} } /* ── 761 · tablet and small desktop ────────────────────────────────────*/ @media (min-width:761px){ .hero__band{--hero-photo-h:320px; padding-block:24px 0} .hero__band .hero__img{object-position:58% 54%} .hero .booking-shell__tabs{margin:14px 20px 12px} .hero .booking-shell__fields{padding:0 20px 16px; gap:12px} .hero .booking-shell__note{padding:8px 20px} .hero .idrive-booking-help-strip{margin:0 20px 8px} .hero__proof{grid-template-columns:repeat(3,minmax(0,1fr))} .hero__vehicle-wrap{ display:block; position:relative; width:min(62vw,460px); margin:clamp(24px,3.5vw,40px) calc(var(--corr-gutter) * -1) 0 auto; } } /* ── 1200 · the split ────────────────────────────────────────────────── Copy and composer hold the left 58%; the photograph and the car own the right. The photograph now fills the band and its bottom edge IS the seam the car stands on. */ @media (min-width:1200px){ .hero__band{--hero-photo-h:100%; padding-block:24px 40px} .hero__band .hero__img{object-position:62% 56%} /* Layer 2 turns horizontal: a hard hold across the copy column, released across the right where the photograph is the point. copy column: a1 >= 0.30, a2 = 0.72 -> a_eff = 1 - (0.70 x 0.28) = 0.804 -> #FFFFFF 10.78:1 · #C9A96A 4.98:1, both AA at any size. Past x = 88% the wash is 0.30-0.66 and no text lives there. */ .hero__band::before{ background:linear-gradient(180deg, rgba(4,17,13,.55) 0%, rgba(4,17,13,.34) 24%, rgba(4,17,13,.30) 46%, rgba(4,17,13,.52) 78%, rgba(4,17,13,.70) 100%); } .hero__band::after{ background:linear-gradient(90deg, rgba(4,17,13,.72) 0%, rgba(4,17,13,.72) 58%, /* text MUST terminate before here */ rgba(4,17,13,.44) 70%, rgba(4,17,13,.14) 82%, rgba(4,17,13,0) 92%); } .hero__copy, .hero__composer{width:58%; max-width:58%} .hero__vehicle-wrap{ position:absolute; z-index:1; bottom:0; inset-inline-end:-24px; width:clamp(320px,34vw,500px); margin:0; } .hero__ground{padding-top:clamp(32px,3vw,44px)} } /* --- RB-10 END --- */ /* --- RB-11 the composer inside the masthead -------------------------- Corrective, measured after RB-10 shipped. Moving the composer into a 636px column exposed two faults that a 1096px-wide form had hidden. 1. THE HELP BUTTONS WERE SITTING ON THE INPUTS. .booking-shell__field > .idrive-contextual-help is position:absolute inside the field, and at 97px of field width its 44px trigger landed at x=240 inside an input spanning 192-289 - directly over the placeholder. Anchored to the label row instead, where there is room, at 24px so it still clears SC 2.5.8. 2. FROM AND TO WERE THE NARROWEST FIELDS ON THE FORM. app.css:144 sizes six tracks - 1.3fr 1.3fr .82fr .68fr .7fr minmax(11rem,.8fr) - written for a full-width bar. In 636px the submit's 11rem floor takes 176px and the two address fields end up at 97px each, narrower than the date. Origin and destination are the two things a visitor actually types; here they get a row each. */ .hero .booking-shell__field > label, .hero .booking-shell__control > span:first-child{ min-height:24px; display:flex; align-items:center; gap:.4rem; } .hero .booking-shell__field > .idrive-contextual-help, .hero .booking-shell__control > .idrive-contextual-help{ position:absolute; inset:0 0 auto auto; z-index:var(--z-raised); } /* The winning rule for this trigger's size is `.booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger` in the plugin's contextual-help.css - specificity (0,3,0), setting 2.75rem. A 44px target cannot fit a 24px label row, which is why the button was sitting across the top of the input. Matched at (0,4,0). 24px still clears WCAG 2.2 SC 2.5.8's 24x24 minimum. */ .hero .booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger, .hero .booking-shell__control > .idrive-contextual-help .idrive-contextual-help__trigger, .hero .idrive-booking-help-strip .idrive-contextual-help__trigger{ width:24px; height:24px; min-width:24px; min-height:24px; padding:0; font-size:.6875rem; line-height:1; border:1px solid var(--corr-rule); background:var(--corr-surface); color:var(--corr-body); border-radius:50%; } .hero .booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger:hover, .hero .booking-shell__control > .idrive-contextual-help .idrive-contextual-help__trigger:hover, .hero .idrive-booking-help-strip .idrive-contextual-help__trigger:hover{ border-color:var(--corr-action); color:var(--corr-action); } .hero .idrive-contextual-help__panel{z-index:var(--z-popover)} /* One field per idea, two ideas per row. 636/2 = 313px each, enough for "Islamabad International Airport (ISB)" to stay readable while typing - which the six-track row could not do. */ .hero .booking-shell__fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; } /* Scoped to .booking-shell__fields, the LEGACY container. The v2 composer renames it to .booking-shell__row, so every rule below stops matching there on its own - which is what lets both renders share one stylesheet. Without this scope these (0,2,0) rules beat RB-14's (0,1,0) placement and force the new grid into the old one's shape. Measured: that is exactly what broke the first RB-14 deploy. */ .hero .booking-shell__fields > .booking-shell__field--from, .hero .booking-shell__fields > .booking-shell__control--date, .hero .booking-shell__fields > .booking-shell__control--passengers{grid-column:1} .hero .booking-shell__fields > .booking-shell__field--to, .hero .booking-shell__fields > .booking-shell__control--time{grid-column:2} .hero .booking-shell__fields > .button--search{grid-column:2; align-self:end} /* Below 430 app.css:426 forces grid-column:1/-1 !important on every child, so the two-column row cannot survive there - and should not: one field per line is right on a phone. Only date and time are paired back up. */ @media (max-width:430px){ .hero .booking-shell__fields{grid-template-columns:repeat(2,minmax(0,1fr))} .hero .booking-shell__fields > .booking-shell__control--date, .hero .booking-shell__fields > .booking-shell__control--time{grid-column:auto !important} } /* Two service choices side by side, reading as a choice rather than as two stacked rows. app.css:132 declares display:flex AND grid-template-columns, so its tracks were never applied and the buttons stacked full-width. */ .hero .booking-shell__tabs{display:grid; grid-template-columns:1fr 1fr; gap:0} .hero .booking-shell__tabs button{ display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:8px 10px; background:none; border:0; border-bottom:2px solid transparent; color:var(--rp-muted); text-align:center; cursor:pointer; } .hero .booking-shell__tabs button > span:not(.booking-shell__tab-icon){display:block} /* RB-10 hid the tab chips; the rule above must not hand them back. */ .hero .booking-shell__tabs button > .booking-shell__tab-icon{display:none} .hero .booking-shell__tabs button strong{ font-family:var(--corr-sans); font-size:.875rem; font-weight:600; display:block; } .hero .booking-shell__tabs button small{display:none} .hero .booking-shell__tabs button[aria-checked="true"], .hero .booking-shell__tabs button[aria-selected="true"]{ color:var(--corr-ink); border-bottom-color:var(--corr-action); background:none; } .hero .booking-shell__tabs button:focus-visible{ outline:2px solid var(--corr-action); outline-offset:-2px; } .hero .idrive-booking-help-strip{ display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--corr-body); } /* .booking-shell__step is --corr-mist at 12px: 4.08:1 on stone. It is clipped out of view inside the hero, but it is still rendered text on /book/ and it is still read aloud everywhere. Colour it once. */ .booking-shell__step{color:var(--rp-muted)} /* --- RB-11 END --- */ /* --- RB-12 the help buttons come off the inputs, everywhere ---------- RB-11 fixed this inside .hero only. Measured on /book/ - the page a search actually lands on - the same defect is live and worse: .booking-shell__field--from 197..392 (195px) its 44x44 help trigger 342..386 overlapping the control by 29px A 44px round button parked over the right third of a 195px address input is not a help affordance, it is an obstruction, and it is on the one page where someone is trying to type an address. The winning size rule is the plugin's `.booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger` at (0,3,0). Matched at (0,4,0) with .booking-shell in front. 24px still clears WCAG 2.2 SC 2.5.8's 24x24 minimum, and the label row is grown to 24px so the button sits in it rather than across the field. */ .booking-shell .booking-shell__field > label, .booking-shell .booking-shell__control > span:first-child{ min-height:24px; display:flex; align-items:center; gap:.4rem; } .booking-shell .booking-shell__field > .idrive-contextual-help, .booking-shell .booking-shell__control > .idrive-contextual-help{ position:absolute; inset:0 0 auto auto; z-index:var(--z-raised); } .booking-shell .booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger, .booking-shell .booking-shell__control > .idrive-contextual-help .idrive-contextual-help__trigger{ width:24px; height:24px; min-width:24px; min-height:24px; padding:0; font-size:.6875rem; line-height:1; border:1px solid var(--corr-rule); background:var(--corr-surface); color:var(--corr-body); border-radius:50%; } .booking-shell .booking-shell__field > .idrive-contextual-help .idrive-contextual-help__trigger:hover, .booking-shell .booking-shell__control > .idrive-contextual-help .idrive-contextual-help__trigger:hover{ border-color:var(--corr-action); color:var(--corr-action); } .booking-shell .idrive-contextual-help__panel{z-index:var(--z-popover)} /* --- RB-12 END --- */ /* --- RB-13 the autocomplete can leave the band ------------------------ RB-4 released overflow on .booking-shell and stopped there. Walking the real ancestor chain from .place-suggestions upward on production shows the clip was never on the form: form.booking-shell isolate .hero__band-inner z-index 3 .hero__band overflow:hidden <- clips at y=670 section.hero overflow:hidden The From control's bottom edge is y=484 and the band ends at y=670, so a suggestions list longer than ~186px is cut off mid-option on the page where someone is typing an address. Releasing .booking-shell alone did nothing about it. The band's clip exists for one reason: .hero__img carries a scale(1.045) settle animation and would otherwise spill 2.25% each side during it. That clip belongs on the media box, not on the whole band. The vehicle's 24px overhang at the frame edge is still cropped, by section.hero, which is where a page-level overflow guard belongs. */ .hero__band{overflow:visible} .hero__media{overflow:hidden} /* --- RB-13 END --- */ /* --- RB-16 how-it-works: one marker, and a band that uses the measure --- Measured on production at 1440x900 before this block: .how-grid grid-template-columns: 392.32px 588.484px ol.steps-list 588px wide, 2559px tall li grid-template-columns: 52px 520.484px grid-template-rows: 41.59px 350.74px li children ::before col 1 row 1 (RB-8, corridor-v1:344) span col 2 row 1 (markup, all four templates) div col 1 row 2 <- 52px wide, 351px tall RB-8 gave the step a ::before counter without noticing that every template already ships 01 in the markup. Three items in a two-column grid puts the text wrapper in the 52px marker column on the second row, so four steps carrying ~100 characters each measured 457, 888, 626 and 588px tall and the section ran 2,789px. The visible number was the markup span, sitting in column two beside an empty column one. Two corrections. One marker: the span is removed and ::before is it. And the steps read across the full 1,096px measure as a process band rather than down a 588px gutter beside a 392px intro - which is what made the section read as narrow on desktop. The markup is identical in front-page.php, template-how-it-works.php, template-supply-index.php and page-self-drive-car-rental-pakistan.php, so all four are corrected by this block and none of them is edited. */ .how-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:start; } .how-grid > div:first-child{ display:grid; gap:1rem; justify-items:start; max-width:none; } .how-grid > div:first-child > p:not(.eyebrow){max-width:62ch; margin:0} @media (min-width:1000px){ /* eyebrow on its own line, then headline and lead as an editorial pair sharing a baseline rule, then the CTA. Basis in px, not ch: the two children set type at 55px and 17px, so ch means different things to each of them and the pair would not balance. */ .how-grid > div:first-child{ display:flex; flex-wrap:wrap; align-items:flex-end; column-gap:clamp(40px,5vw,88px); row-gap:1.25rem; padding-bottom:clamp(24px,2.6vw,36px); border-bottom:1px solid rgba(255,255,255,.16); } /* flex-basis:100% is not enough on its own: corridor's own p,li{max-width:var(--corr-measure)} caps this paragraph at 469px, so the eyebrow shared row one with the headline. */ .how-grid > div:first-child > .eyebrow{flex:0 0 100%; max-width:none; margin:0} .how-grid > div:first-child > h2{flex:1 1 420px; margin:0} .how-grid > div:first-child > p:not(.eyebrow){flex:1 1 340px; max-width:56ch} /* The CTA needs its own line. flex:0 0 auto let it share the headline row and pin itself to the right edge at 1440; flex-basis:100% with max-width:fit-content does not break the line either, because the hypothetical main size a flex line is measured against is the clamped one - 177px - so it still fits. A zero-height full-basis ::after ordered between them is the break. */ .how-grid > div:first-child::after{content:""; order:1; flex:0 0 100%; height:0} .how-grid > div:first-child > .button{order:2; flex:0 0 auto} } /* 1 / 2 / 4 across. auto-fit was the obvious call and the wrong one: at the 1024-1180 band it resolves to three tracks and orphans step 04. */ .steps-list{grid-template-columns:minmax(0,1fr); gap:0} @media (min-width:620px){ .steps-list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,3vw,40px); row-gap:clamp(28px,3vw,40px); } } @media (min-width:1180px){ .steps-list{grid-template-columns:repeat(4,minmax(0,1fr))} } .steps-list > li{ grid-template-columns:minmax(0,1fr); gap:.45rem; align-content:start; padding-block:clamp(16px,1.6vw,20px) 0; border-top:1px solid rgba(201,169,106,.42); border-bottom:0; } .steps-list > li > span{display:none} .steps-list > li::before{padding-top:0; margin-bottom:.4rem} .steps-list h3{ font-family:var(--corr-serif); font-weight:400; font-size:clamp(1.0625rem,1.25vw,1.1875rem); line-height:1.28; letter-spacing:-.01em; margin:0; text-wrap:balance; } .steps-list p{font-size:.9375rem; line-height:1.62} /* --- RB-16 END --- */ /* --- RB-17 the corridor "how booking works" strip --------------------- Measured on /islamabad-to-lahore-taxi/ at 1440x900: ol.idrive-steps__list 741px wide, tracks 175.6px x 4 li.idrive-steps__item 176px box, 138.4px of text measure, 361px tall, carrying 166-244 characters slice32-compat:278 switches this list to four columns at a VIEWPORT width of 56rem. The list is not viewport-sized: it sits in the article column of .prose-layout, which RB-9 resolves to 741px. So the breakpoint fires on every desktop and hands each step 138px of measure - about eighteen characters a line - and a 361px column for four lines of copy. Nine templates render this section. The count now follows the container the list is actually in, which is what that breakpoint was reaching for. Engines without container queries land on the two-column arrangement rather than the broken one: slice32's own note names 4, 2x2 and 1 as the arrangements that keep a four-step sequence legible, and 2x2 is one of them. Four columns are restored the moment the component is given 68rem to work with. */ .idrive-steps{container-type:inline-size; container-name:idrive-steps} /* Reset to one track, then let the container add columns. Leaving slice32's 33rem viewport rule in place kept the same fault at 1024, where .prose-layout resolves the article to 522px: two tracks of 254px and 217px of measure. */ .idrive-steps__list{grid-template-columns:minmax(0,1fr)} @supports not (container-type:inline-size){ @media (min-width:56rem){ .idrive-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))} } } @container idrive-steps (min-width:34rem){ .idrive-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))} } @container idrive-steps (min-width:68rem){ .idrive-steps__list{grid-template-columns:repeat(4,minmax(0,1fr))} } /* --- RB-17 END --- */ /* --- RB-19: fleet browse + catalogue carousel --------------------------- Two new surfaces, one problem each. (1) The browse grid. .vehicle-grid is a 4-track grid from app.css. With 38 cards of unequal name length that produced ragged rows, so the browse variant switches to auto-fill tracks with a floor: cards keep a readable width at every viewport and the row count follows the container instead of a hardcoded 4/2/1 breakpoint ladder. (2) The carousel. A scroll-snap track, not a JS carousel. The whole interaction - drag, swipe, shift-scroll, arrow keys, Tab, screen-reader reading order - is native, so it works on first paint and costs no script. scroll-padding-inline matches the container gutter so a snapped slide is never flush against the viewport edge, and overscroll-behavior-inline contains the scroll chain so a horizontal swipe cannot trigger a browser back gesture. -------------------------------------------------------------------- */ /* -- shared card additions ------------------------------------------------ */ .vehicle-card{display:flex; flex-direction:column; gap:.55rem} .vehicle-card > p{margin:0} .vehicle-card h3{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem} .vehicle-card h3 > a{color:inherit; text-decoration:none; background-image:linear-gradient(var(--corr-gold),var(--corr-gold)); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .18s ease} .vehicle-card h3 > a:hover{background-size:100% 1px} .vehicle-card h3 em{font-family:var(--corr-sans); font-style:normal; font-size:.68rem; letter-spacing:.07em; text-transform:uppercase; color:var(--corr-mist)} .vehicle-card__top{display:flex; align-items:center; justify-content:space-between; gap:.5rem} .vehicle-card__top small{font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--corr-mist)} /* Capacity is the one fact a traveller scans for, so it is set apart from the secondary fact list rather than sharing its muted grey. */ .vehicle-card__capacity{display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center} .vehicle-card__capacity > span{ font-size:.72rem; font-weight:600; letter-spacing:.02em; padding:.22rem .5rem; border-radius:999px; color:var(--corr-600); background:var(--corr-sunken); border:1px solid var(--corr-hair); } .vehicle-card__capacity--unset > span{color:var(--corr-mist); background:transparent; border-style:dashed} .vehicle-card__action{margin-top:auto; padding-top:.35rem} .vehicle-card__action .text-link{font-size:.78rem} /* -- (1) browse grid ------------------------------------------------------ */ .vehicle-grid--browse{ grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)); gap:clamp(14px,1.6vw,20px); align-items:stretch; } .vehicle-grid--browse > .results-empty{grid-column:1 / -1} .fleet-browse .results-overview{margin-bottom:clamp(18px,2vw,26px)} /* -- (2) carousel --------------------------------------------------------- */ .fleet-slider__shell{position:relative} .fleet-slider__track{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min(78vw,15rem),15rem); gap:clamp(14px,1.6vw,20px); margin:0; padding:2px 2px clamp(10px,1.4vw,16px); list-style:none; overflow-x:auto; overflow-y:hidden; /* proximity, NOT mandatory. Measured on production: with `mandatory`, a programmatic scrollTo from the prev/next buttons is cancelled by the snap engine and the track never moves at all - ten reads over two seconds all returned scrollLeft 0. Under `proximity` the same call lands within 200ms, and a touch swipe still snaps to a card, which is the gesture the snap behaviour actually exists for. */ scroll-snap-type:x proximity; scroll-padding-inline:2px; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--corr-rule) transparent; } .fleet-slider__track::-webkit-scrollbar{height:6px} .fleet-slider__track::-webkit-scrollbar-thumb{background:var(--corr-rule); border-radius:999px} .fleet-slider__track::-webkit-scrollbar-track{background:transparent} .fleet-slider__track:focus-visible{outline:2px solid var(--corr-gold); outline-offset:4px; border-radius:var(--corr-r-md)} .fleet-slider__slide{scroll-snap-align:start; display:flex} .fleet-slider__slide > .vehicle-card{width:100%} .vehicle-card--slide{gap:.45rem} .vehicle-card--slide h3{font-size:1rem; line-height:1.25} /* Hidden until app.js binds them: a control that scrolls nothing is worse than no control, and this also keeps them out of the tab order. */ .fleet-slider__controls{display:none} .fleet-slider__controls--ready{display:flex; gap:.4rem; justify-content:flex-end; margin-bottom:.6rem} .fleet-slider__controls[hidden]{display:none} .fleet-slider__nav{ inline-size:40px; block-size:40px; display:grid; place-items:center; border:1px solid var(--corr-rule); border-radius:999px; background:var(--corr-surface); color:var(--corr-600); font-size:1rem; cursor:pointer; transition:border-color .16s ease, color .16s ease, background .16s ease; } .fleet-slider__nav:hover:not(:disabled){border-color:var(--corr-gold); color:var(--corr-900)} .fleet-slider__nav:disabled{opacity:.35; cursor:default} .fleet-slider__more{margin:clamp(14px,1.8vw,22px) 0 0} /* Touch targets stay at 44px+ and the arrows move under the thumb, not into the far corner, on the devices where a thumb is the pointer. */ @media (max-width:719px){ .fleet-slider__controls--ready{justify-content:space-between; margin-top:.6rem; margin-bottom:0} .fleet-slider__nav{inline-size:44px; block-size:44px} .fleet-slider__shell{display:flex; flex-direction:column-reverse} .fleet-slider__track{ grid-auto-columns:minmax(min(82vw,17rem),17rem); margin-inline:calc(var(--corr-gutter) * -1); padding-inline:var(--corr-gutter); scroll-padding-inline:var(--corr-gutter); } } @media (prefers-reduced-motion:reduce){ .fleet-slider__track{scroll-behavior:auto} .vehicle-card h3 > a{transition:none} } /* --- RB-19 END --- */ /* --- RB-20: the premium pass — palette, hero light, elevation ------------ THE DIAGNOSIS, measured on production at 1440. The home hero photograph is the Karakoram Highway: warm, hazy, beige-grey, pixel-sampled mid-tone. RB-10 then multiplied it by TWO stacked scrims of #04110D to an effective alpha of 0.80-0.84 across the WHOLE frame. A warm hazy image under a cold near-black full-frame wash composites to dead grey-green sludge. RB-10's contrast arithmetic was right; the picture was the casualty. THE EVIDENCE. Measured teardowns of Blacklane, Addison Lee, Wheely, Aman, Ferrari, Lamborghini, Bugatti, Linear, Raycast and Runway agree on three things, and all three contradict what this stylesheet was doing: 1. NO full-frame scrim. Blacklane runs NO overlay at all - the darkness is baked into the photograph. Addison Lee's scrim is edge-anchored: opaque only in the top and bottom ~25%, and 0% through the middle half of the frame. 2. Depth on dark comes from a near-black SURFACE LADDER plus 1px hairlines, never from shadows, glows, grain or blur. Bugatti, Linear, Raycast and Runway all state it outright: no drop shadows on dark. 3. The accent appears ONCE, as a SURFACE, not as chrome. Addison Lee is black + white + one yellow, and the yellow is a button. Gold used only as hairlines - what this site did - is the Carey failure mode. WHAT THIS BLOCK DOES. - Warms the neutral ramp. #F1F4F1 is a cool mint-grey; against gold it reads clinical and slightly dirty. Linen makes the gold look chosen. - Replaces the two full-frame washes with ONE edge-anchored vertical gradient plus a left-anchored column hold, so the middle and right of the photograph are finally visible while the copy column keeps a GUARANTEED floor. - Grades the photograph instead of drowning it. - Promotes gold to a surface, once per view, in the masthead. - Replaces the 64px-blur elevation with a hairline-first scale. THE CONTRAST ARITHMETIC IS UNCHANGED IN KIND, ONLY IN PLACE. Compositing #04110D over pure white - a blown-out sky, the worst case any upload can produce - at alpha a gives R = 255-251a, G = 255-238a, B = 255-242a. a = 0.88 -> rgb(34,45,42) -> #FFFFFF 14.2:1 · #C9A96A 6.3:1 Both clear AA at any size, and 0.88 across the copy column is a HIGHER floor than RB-10's 0.804. The picture gets brighter and the text gets safer, because the darkness is spent where the words are instead of spread evenly over a photograph nobody could see. -------------------------------------------------------------------- */ :root{ /* ── neutrals, re-judged ────────────────────────────────────────────── Only the NEUTRALS move. The forest ramp and the golds are the brand and are untouched; #04110D…#2A6D4B and #9C7A3C/#C9A96A/#F2EADB are exactly as they were. */ --corr-stone:#F4F1EA; /* was #F1F4F1 — cool mint-grey to warm linen */ --corr-sunken:#EAE5D9; /* was #E8EEE9 — same move, same 4-unit delta */ --corr-hair:#E3DDD1; /* was #D9E1DB — decorative rules, re-warmed */ --corr-body:#333B36; /* was #33443C — drops the green cast; 10.1:1 on white */ /* ── one token per job, so the ramp stops sprawling ────────────────── The stylesheet had accumulated nine hand-written text colours and nine border colours on dark (#C6D8CD, #B4CCBE, #9BB2A4, #8FA79A, #A9C2B3, #7E9A8A…). These are the replacements; the old literals stay valid where they are already tuned, but nothing new should invent one. */ --corr-muted:#5F6B63; /* the ONLY secondary text on light — 5.6:1 on white */ --corr-hair-strong:#8C877B; /* the ONLY structural border on light — 3.6:1, clears 1.4.11 */ --corr-on-dark:#FFFFFF; --corr-on-dark-2:rgba(242,234,219,.74); /* the ONE secondary on dark — 8.1:1 on --corr-800 */ --corr-hair-dark:rgba(242,234,219,.14); /* the ONLY hairline on dark. Warm, not white. */ --corr-veil:rgba(4,17,13,.88); /* the deterministic copy hold — see the arithmetic above */ /* ── elevation: hairline first, shadow only where a thing floats ───── Retires --corr-sh-3 and the composer's `0 28px 64px -24px`. A 64px blur is the tell of a card that does not know why it is raised. */ --corr-e1:0 0 0 1px var(--corr-hair); --corr-e2:0 1px 2px rgba(6,21,18,.06), 0 8px 24px -12px rgba(6,21,18,.10); --corr-e3:0 2px 8px rgba(6,21,18,.10), 0 24px 48px -32px rgba(6,21,18,.26); } /* ══ 1. THE HOME HERO ═══════════════════════════════════════════════════ */ /* Grade the photograph rather than drowning it. The source is hazy - low contrast, desaturated, a flat beige mid-tone - so it needs the grade a colourist would give it, not more black on top. Kept modest: a filter on the LCP element is composited on the GPU and costs no layout. */ .hero__band .hero__img{ filter:contrast(1.14) saturate(1.06) brightness(.94); } /* ONE scrim, edge-anchored. RB-10's ::before and ::after were two full-frame washes; ::before now holds ONLY the top and bottom edges - the masthead needs a dark top, the seam needs a dark bottom - and releases completely through the middle, which is where the road and the mountains are. */ .hero__band::before{ background:linear-gradient(180deg, rgba(4,17,13,.82) 0%, rgba(4,17,13,.46) 14%, rgba(4,17,13,.10) 32%, rgba(4,17,13,.10) 58%, rgba(4,17,13,.50) 82%, rgba(4,17,13,.86) 100%); } /* ::after becomes the COLUMN HOLD, not a second wash: a hard 0.88 across the copy column, feathered out before the right third. Below 1200 the copy spans the full width, so the hold does too. */ .hero__band::after{ background:linear-gradient(180deg, rgba(4,17,13,.88) 0%, rgba(4,17,13,.88) 62%, rgba(4,17,13,.72) 82%, rgba(4,17,13,.62) 100%); } @media (min-width:1200px){ /* The photograph is the point on the right; the words are the point on the left. 0.88 to 58% - where the copy column ends - then feathered to nothing by 88%. Text MUST terminate before 58%, which .hero__copy's own width:58% guarantees. */ .hero__band::after{ /* The hold runs to 60% - PAST the copy column's 58% - so every glyph sits on the full 0.88 and none of it lands in the feather. Then it clears completely by 90%, which is where the photograph earns its place. */ /* 0.82, not 0.88. Pixel-sampled at 1440 with 0.88 the copy column composited to rgb(13,27,24) - 17.7:1 for white, and a photograph completely invisible across 60% of the frame, which is the fault this block exists to fix. 0.82 over a blown-out sky still gives rgb(49,60,57): #FFFFFF 11.4:1 and #C9A96A 5.1:1, both clear AA at any size, and the terrain reads through the left again. */ background:linear-gradient(90deg, rgba(4,17,13,.82) 0%, rgba(4,17,13,.82) 60%, rgba(4,17,13,.52) 72%, rgba(4,17,13,.16) 82%, rgba(4,17,13,0) 90%); } .hero__band::before{ background:linear-gradient(180deg, rgba(4,17,13,.60) 0%, rgba(4,17,13,.24) 18%, rgba(4,17,13,0) 38%, rgba(4,17,13,0) 62%, rgba(4,17,13,.30) 84%, rgba(4,17,13,.58) 100%); } } /* The seam. One gold hairline, and it is the only gold line in the hero. */ .hero__band{border-bottom-color:rgba(201,169,106,.42)} /* Display type. Every premium reference measured sits at weight 300-500 and takes negative tracking; emphasis comes from size and air, never bold. */ .hero .hero__copy h1{ font-size:clamp(2.25rem, 1.05rem + 3.4vw, 3.75rem); line-height:1.02; letter-spacing:-.024em; /* 18ch, not 15: at 15ch this headline set in THREE lines and 187px tall. Every premium reference measured runs its display line to one or two - Blacklane one, Addison Lee two. 18ch lands it on two and keeps the measure inside the copy column, which is what the contrast hold below is sized against. */ max-width:18ch; } .hero__eyebrow{ /* The eyebrow's rule is tied to its own width - a structural tick, not a decorative dash floating at a fixed length. */ display:inline-block; padding-bottom:9px; margin-bottom:18px; border-bottom:2px solid var(--corr-gold-lift); } .hero__eyebrow > span{display:none} /* the loose leading dash retires with it */ /* Lead + proof, on the solid ground below the seam. */ .hero__lead{color:var(--corr-on-dark-2); font-size:1.125rem; max-width:54ch} .hero__proof li{color:var(--corr-on-dark-2)} /* ══ 2. GOLD AS A SURFACE, ONCE ═════════════════════════════════════════ Addison Lee is black + white + one yellow, and the yellow is a BUTTON. Gold used only as hairlines reads as trim on a rental car. One surface, in the masthead, where the single most valuable action lives. #061512 on #C9A96A is 8.3:1. The 1px #9C7A3C boundary is what clears SC 1.4.11 (3:1 for a non-text UI component) where the button sits on a light ground - #C9A96A alone against white is only 2.0:1. The booking SUBMIT stays --corr-action green: two gold surfaces in one view is one too many, and the deep green is the correct "go". */ .site-header__actions .button--primary, .site-header .button--primary{ background:var(--corr-gold-lift); color:#061512; border:1px solid var(--corr-gold); box-shadow:none; font-weight:600; } .site-header__actions .button--primary:hover, .site-header .button--primary:hover{ background:#D8BC85; border-color:var(--corr-gold); box-shadow:none; } /* ══ 3. THE CONTENT HERO ════════════════════════════════════════════════ Used by roughly eighty pages. It was a FLAT slab with the whole right half empty. The gradient now steps DOWN the surface ladder rather than running 700 -> 900 across the diagonal, which is what made it read as a single dead colour, and the seam gets the same gold hairline the home hero has so the two families are visibly one system. */ .content-hero{ background:linear-gradient(180deg, var(--corr-700) 0%, var(--corr-800) 58%, var(--corr-900) 100%); border-bottom:1px solid rgba(201,169,106,.34); color:var(--corr-on-dark-2); } .content-hero h1{ font-size:clamp(2rem, 1.1rem + 2.6vw, 3.25rem); line-height:1.06; letter-spacing:-.018em; max-width:19ch; margin-block:1.125rem .875rem; } .content-hero__lead{color:var(--corr-on-dark-2); max-width:58ch} .content-hero .eyebrow{ display:inline-block; padding-bottom:9px; border-bottom:2px solid var(--corr-gold-lift); } .content-hero .eyebrow > span{display:none} /* ══ 4. SURFACES AND ELEVATION ══════════════════════════════════════════ */ /* On linen, a white card needs no shadow at all - the surface delta does the work. This retires --corr-sh-1 on resting cards. */ .service-card,.vehicle-card,.search-state-card,.result-card{ box-shadow:none; border-color:var(--corr-hair); } .service-card:hover,.vehicle-card:hover{ box-shadow:var(--corr-e2); border-color:var(--corr-hair-strong); } /* The composer. `0 28px 64px -24px` is a 64px blur - the tell of a card that does not know why it is raised. It sits ON the hero band, so it needs to read as a solid object one step off the surface, not a cloud. */ .hero .booking-shell{ box-shadow:var(--corr-e3); border-top-color:var(--corr-gold-lift); border-radius:6px; } /* On dark, shadows are invisible and elevation is a step up the ramp plus a hairline. This is the rule every dark reference measured agrees on. */ .how-section .service-card, .global-cta .service-card, .trust-strip .service-card{ background:var(--corr-700); border:1px solid var(--corr-hair-dark); box-shadow:none; } .trust-strip{border-block-color:var(--corr-hair-dark)} /* ══ 5. THE CUT-OUT ═════════════════════════════════════════════════════ A cut-out with no ground contact is the single most common tell of a composited hero. The existing contact shadow is 14px tall and 76% wide; widened, softened and warmed so it reads as the vehicle sitting on the seam rather than hovering above it, and the grade is pulled closer to the road photograph behind it. */ .hero__vehicle{filter:brightness(.92) saturate(.92) contrast(1.06)} .hero__vehicle-shade{ inset-inline:6% 6%; height:22px; background:radial-gradient(closest-side, rgba(4,17,13,.62), rgba(4,17,13,0) 78%); } /* ══ 6. GUARDS ══════════════════════════════════════════════════════════ */ @media (prefers-contrast:more){ /* The hold goes solid and the secondary token goes to full white. Nothing here depends on a gradient surviving. */ :root{ --corr-veil:#04110D; --corr-on-dark-2:#FFFFFF; --corr-hair-dark:rgba(242,234,219,.38); } .hero__band::after{background:rgba(4,17,13,.94)} } @media (forced-colors:active){ /* background-image is dropped in forced colours, so anything whose contrast depends on a gradient loses it. RB-10 already blanks the scrims to Canvas and hides the photo; the eyebrow ticks and the gold button surface must fall back to system colours too. */ .hero__eyebrow,.content-hero .eyebrow{border-bottom-color:CanvasText} .site-header__actions .button--primary, .site-header .button--primary{ background:ButtonFace; color:ButtonText; border-color:ButtonBorder; } } /* --- RB-20 END --- */ /* --- RB-21: the hero fact rail, and the off-palette lime ----------------- TWO things. (1) THE EMPTY HALF. .content-hero is used by roughly eighty pages and drew its right half as nothing at all. The research is unambiguous that the slop answer is a pattern, a ghost monogram or a decorative map SVG; the honest answer is the facts the page already holds. idrive_platform_hero_ledger() renders them, drops any row whose value is not published, and suppresses itself entirely below two rows - so a page with nothing to say keeps a full-width copy column instead of rendering an empty rail. (2) THE LIME. app.css seeds rgba(141,221,63,…) - a bright lime - into the result-card mark, the vehicle-card token, the post-card mark and the results overview, and a 31rem lime circle behind .search-page. Lime is not in this brand. Against the forest ramp and the gold it is the single most off-key colour on the site, and it is why the token blocks read as clip art. Replaced with the ramp, and the loose circle deleted: a decorative blob that means nothing is exactly the ornament the reference set does not have. -------------------------------------------------------------------- */ /* ══ 1. THE FACT RAIL ═══════════════════════════════════════════════════ */ @media (min-width:900px){ .content-hero--split .content-hero__inner{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(32px,4vw,64px); align-items:end; } /* The rail is bottom-aligned to the copy so the last row and the lead sit on the same baseline - the ledger reads as the page's footer facts, not as a floating box. */ .hero-ledger{align-self:end} } .content-hero--split .content-hero__copy{min-width:0} /* THE EMPTY-RAIL GUARD. idrive_platform_hero_ledger() suppresses itself below two published facts - /cars/luxury-sedan/ is the live case: it is the page that says iDrive does not run that class, so it has no vehicles and no capacity to state. Without this the grid still reserved its 4fr column and the hero rendered 507px of nothing to the right of the copy, which is the exact fault this whole block exists to remove. :only-child is the right test and needs no :has(). */ .content-hero--split .content-hero__copy:only-child{grid-column:1 / -1; max-width:72ch} .hero-ledger{ margin:0; min-width:0; border-top:1px solid var(--corr-hair-dark); } .hero-ledger > div{ display:flex; align-items:baseline; justify-content:space-between; gap:clamp(16px,2vw,28px); padding-block:clamp(10px,1.1vw,13px); border-bottom:1px solid var(--corr-hair-dark); } .hero-ledger > div:last-child{border-bottom:0} .hero-ledger dt{ font-family:var(--corr-sans); font-size:.6875rem; font-weight:600; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--corr-gold-lift); /* 8.5:1 on --corr-800 */ margin:0; } .hero-ledger dd{ margin:0; text-align:end; font-family:var(--corr-sans); font-size:clamp(1rem,.94rem + .18vw,1.1875rem); font-weight:500; line-height:1.25; color:var(--corr-on-dark); font-variant-numeric:tabular-nums; } @media (max-width:899px){ .hero-ledger{ margin-top:clamp(26px,4vw,34px); border-top:1px solid var(--corr-hair-dark); } } /* ══ 2. THE LIME, AND THE BLOB ══════════════════════════════════════════ */ /* A 31rem lime circle bled behind the search page and the fleet index heading for no reason anyone could state. Deleted, not tinted. */ .search-page::before{display:none} /* The token block a vehicle falls back to when it has no photograph. It should read as a considered placeholder in the brand, not as a lime chip. */ .vehicle-card__media--token, .result-card__mark, .post-card__mark{ background:linear-gradient(150deg,var(--corr-600) 0%,var(--corr-800) 62%,var(--corr-900) 100%); border-color:var(--corr-hair-dark); box-shadow:none; color:var(--corr-gold-lift); } /* The results overview slab on the search and fleet pages. Same lime, plus a 28px/75px shadow; both go. */ .results-overview{ background:linear-gradient(150deg,var(--corr-700) 0%,var(--corr-800) 58%,var(--corr-900) 100%); border-color:var(--corr-hair-dark); box-shadow:none; } /* ══ 3. THE BREADCRUMB ON A DARK HERO ═══════════════════════════════════ A real 1.4.3 failure, found by measuring the render rather than reading the stylesheet. The CURRENT (last) crumb resolves to --corr-ink #061512 - near-black - and sits on the content hero's #0C2C22. That is about 1.3:1: the visitor's own position in the site is the least legible text on the page. The links beside it are #64716C, also short of AA on this ground. Scoped to .content-hero so the light-ground breadcrumbs elsewhere, which are correct, are untouched. */ .content-hero .breadcrumb a{color:var(--corr-on-dark-2)} /* 8.1:1 on --corr-800 */ .content-hero .breadcrumb a:hover{color:var(--corr-on-dark)} .content-hero .breadcrumb li, .content-hero .breadcrumb span, .content-hero .breadcrumb [aria-current]{color:var(--corr-gold-lift)} /* 8.5:1, and it marks position */ .content-hero .breadcrumb li::after, .content-hero .breadcrumb__sep{color:rgba(242,234,219,.42)} /* --- RB-21 END --- */ /* --- RB-22: the landing hero's proof row ------------------------------- THE FAULT. Two stylesheets style .idrive-hero__proof and neither matches the markup idrive_platform_landing_hero_render() actually emits. corridor-v1.css:498 lays it out as a GRID of repeat(auto-fit,minmax(140px, 1fr)) and styles `strong` and `span` children - a numeric stat treatment. The markup has no and no ; it is three plain
  • . Those two rules have never matched anything. slice32-compat.css:107 styles the same
  • as pill chips with a ::before tick - written for a flex row. Both apply. The pill styling lands inside the grid, so each chip is stretched to a full 227px column cell and the three stack vertically down the copy column instead of sitting in a row. Measured on the live corridor page at 1440. Worse, the chip colours are the lime again - rgba(21,148,75,.07) fill and rgba(21,148,75,.18) border, written for a WHITE landing page. On the dark hero a 7% lime tint is invisible and the border is nearly so, which is why the three read as empty outlines. THE FIX. One row, wrapped, in the brand. The dead strong/span rules retire with the markup they were written for, exactly as the home hero's did. -------------------------------------------------------------------- */ .idrive-hero__proof{ /* OVERRIDES corridor-v1.css:498's auto-fit grid. A three-item row of short phrases is a row, not a data grid: flex lets each chip be its own width and wrap when it runs out, instead of every chip inheriting a column. */ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .55rem; grid-template-columns:none; margin-top:clamp(22px,2.6vw,32px); padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--corr-hair-dark); list-style:none; } .idrive-hero__proof li{ /* OVERRIDES slice32-compat.css:108. That rule's lime fill and lime border were written for a white landing page; on --corr-700/800 they vanish. */ padding:.4rem .8rem .4rem .68rem; font-family:var(--corr-sans); font-size:.8125rem; line-height:1.3; color:var(--corr-on-dark-2); background:rgba(242,234,219,.055); border:1px solid var(--corr-hair-dark); border-radius:999px; } .idrive-hero__proof li::before{ /* OVERRIDES slice32-compat.css:109's --idrive-green-deep tick, which is 3.0:1 on this ground. Gold-lift is 8.5:1 and is the accent this hero already uses for its eyebrow. */ content:"\2713"; margin-inline-end:.45rem; color:var(--corr-gold-lift); font-weight:600; } /* The photograph. It was vertically centred against a much taller copy column, so it floated with dead space above and below it. Top-aligned it sits with the headline, which is where the eye goes first. */ @media (min-width:960px){ .idrive-hero__grid{align-items:start} .idrive-hero__media{position:sticky; top:clamp(84px,10vh,120px)} } .idrive-hero__media img{ border-color:var(--corr-hair-dark); border-radius:var(--corr-r-md); } .idrive-hero__credit{color:var(--corr-on-dark-2); opacity:.82} .idrive-hero__credit a{color:inherit} /* Breathing room at the foot of the hero, so a composer that begins immediately below can never sit on the last chip. */ .idrive-hero,.content-hero.idrive-hero{padding-bottom:clamp(44px,6vw,80px)} @media (max-width:959px){ /* The photograph leads on a phone: a picture above the fold does more than a chip row does, and the chips still follow the copy. */ .idrive-hero--split .idrive-hero__grid{display:flex; flex-direction:column} .idrive-hero--split .idrive-hero__media{order:-1; margin-bottom:clamp(18px,3vw,26px)} } /* --- RB-22 END --- */ /* --- RB-23: the landing composer, off-grid and sitting on the hero ------ Measured on /islamabad-to-lahore-taxi/ at 1440, and true of every landing page that carries the injected composer. TWO FAULTS, ONE ELEMENT. (1) IT IS OFF THE GRID. slice32-compat.css:82 sets .idrive-landing-composer { margin: 0 0 2rem; } a SHORTHAND, on an element whose other class is .container. The shorthand writes margin-left and margin-right to 0, which destroys the `margin-inline:auto` that centres every other container on the site. Measured: the hero's .container sits at x=93 and this one at x=0 - the composer is 93px out of alignment with the headline directly above it, on every one of these pages. (2) IT SITS ON THE HERO'S LAST LINE. slice32-compat.css:133 pulls it up by clamp(-5.5rem,-7vw,-3.25rem) = -88px at 1440, which is a deliberate and good pattern - the reference set pins the booking widget over the image rather than below it. But the hero was never given clearance for it, so the card's top edge landed at y=606 with the last proof chip running to y=613: the card covered the bottom 7px of "A person to answer your questions". Both are fixed here rather than in slice32-compat.css, which is the legacy layer this design layer exists to correct without editing. -------------------------------------------------------------------- */ .idrive-landing-composer{ /* Restores what the shorthand wiped. Explicit, not a shorthand, so it cannot silently take the block margins with it again. */ margin-inline:auto; } /* Clearance for the pull-up. Expressed with the SAME clamp that creates the overlap, so the two can never drift apart: whatever the composer takes, the hero gives back, plus a gap. */ .content-hero, .idrive-hero, .content-hero.idrive-hero{ padding-bottom:calc(clamp(3.25rem, 7vw, 5.5rem) + clamp(22px, 2.6vw, 34px)); } /* A hero with no composer under it does not need the clearance and should not carry the extra air. :has() is the right test and is universally supported in the browsers this market uses; where it is not, the page simply keeps the roomier hero, which is a cosmetic difference, not a broken layout. */ @supports selector(:has(*)){ .content-hero:not(:has(+ .idrive-landing-composer)):not(:has(~ .idrive-landing-composer)){ padding-bottom:clamp(40px, 6vw, 80px); } } /* --- RB-23 END --- */ /* --- RB-24: images that land right on the first paint ------------------- THE RULE THIS BLOCK ENFORCES. A card's picture box occupies exactly the same space whether it holds a photograph, a photograph that has not arrived yet, or the token block that stands in when no photograph is published. If those three differ by a single pixel, a page reflows as its images arrive - which is the "doesn't load smoothly" fault, and it is a layout fault, not a network one. Three separate stylesheets had opinions about this box and none of them agreed: app.css:204 .vehicle-card img aspect-ratio:16/9, object-fit:contain tranche1-v03:392 .vehicle-card__media aspect-ratio:16/9, margin:1rem 0 tranche1-v03:393 .vehicle-card__media img aspect-ratio:auto, object-fit:contain The renderer puts .vehicle-card__media on the IMG itself in one path and on a DIV in the other, so which rule won depended on which branch ran. object-fit is `cover`, not `contain`. contain letterboxes a photograph inside the box and leaves bands of card colour above and below it - right for a logo, wrong for a vehicle, and it makes two adjacent cards look different heights even when they are not. -------------------------------------------------------------------- */ .vehicle-card__media{ display:block; width:100%; margin:0; aspect-ratio:16/9; /* ONE box, whatever fills it */ overflow:hidden; border-radius:var(--corr-r-md); background:var(--corr-800); /* what shows for the instant before paint */ object-fit:cover; object-position:center; } /* The wrapper form of the same box, for the path that emits a div. */ div.vehicle-card__media > img{ width:100%; height:100%; margin:0; aspect-ratio:auto; object-fit:cover; object-position:center; display:block; } /* The token stands in the SAME box - so a card that gains a photograph later does not change height, and a grid of mixed cards is not ragged. */ .vehicle-card__media--token{ display:grid; place-items:center; aspect-ratio:16/9; background:linear-gradient(150deg,var(--corr-600) 0%,var(--corr-800) 62%,var(--corr-900) 100%); color:var(--corr-gold-lift); border:1px solid var(--corr-hair-dark); } .vehicle-card__media--token > span{ font-family:var(--corr-sans); font-size:1.15rem; font-weight:600; letter-spacing:.14em; } /* A decoded image should not fade in from nothing: the browser has already painted the box, so any transition here is a second visible change. */ .vehicle-card__media{transition:none} @media (prefers-reduced-motion:reduce){ .vehicle-card__media{transition:none} } /* --- RB-24 END --- */ /* --- RB-25: the vehicle, on the page about the vehicle ------------------- The model detail hero carried copy and a fact rail and no vehicle. The shot now sits at the top of that rail, above the ledger, so the picture and the figures read as one column of evidence about this model rather than two competing objects. The rail is ONE grid child. The split hero is 7fr / 4fr and its collapse to a single column keys on .content-hero__copy:only-child; a second sibling would both break that test and give the grid a third item to wrap. Every addition goes inside .content-hero__rail. The shot reuses .vehicle-card__media - the 16:9 box primitive from RB-24 - rather than defining a second aspect box that would be free to drift from it. Only the things that genuinely differ at this size are set here: a hairline, a larger monogram for the token, and the caption. -------------------------------------------------------------------- */ .content-hero__rail{ min-width:0; display:flex; flex-direction:column; gap:clamp(18px,2.4vw,26px); } @media (min-width:900px){ /* The rail was bottom-aligned when it held only the ledger, so its last row shared a baseline with the lead. With a photograph above it, bottom alignment would push the shot down and open a gap under the heading; the shot should start where the copy starts. */ .content-hero--split .content-hero__inner:has(.hero-shot){align-items:start} .content-hero__rail .hero-ledger{align-self:stretch} } .hero-shot{margin:0; min-width:0} .hero-shot .vehicle-card__media{ border:1px solid var(--corr-hair-dark); } /* The hero token carries the FULL make, not the card's three-letter monogram, so it is set to wrap and to fit the box rather than to be scaled up. A long make ("VARIOUS", "MITSUBISHI") must not push the 16:9 box or clip. */ .hero-shot .vehicle-card__media--token > span{ font-size:clamp(1rem,.72rem + 1.05vw,1.6rem); letter-spacing:.16em; line-height:1.2; text-align:center; text-wrap:balance; padding-inline:clamp(12px,4%,28px); max-width:100%; overflow-wrap:anywhere; } .hero-shot__note{ margin:clamp(9px,1vw,12px) 0 0; font-family:var(--corr-sans); font-size:.8125rem; line-height:1.5; color:var(--corr-on-dark-2); /* 7.4:1 on --corr-900 */ text-wrap:pretty; } .hero-shot__credit{color:var(--corr-hair-strong)} .hero-shot__credit a{color:inherit; text-underline-offset:2px} @media (max-width:899px){ /* Below 900 the grid collapses and the rail follows the copy, so the order is name, description, picture, facts. The name identifies the vehicle and the picture confirms it; a photograph above the H1 would be a picture of something not yet named. The ledger's own top margin is dropped because the rail already spaces its children. */ .content-hero__rail{margin-top:clamp(24px,4vw,32px)} .content-hero__rail .hero-ledger{margin-top:0} } /* --- RB-25 END --- */ /* --- RB-26: what the price covers --------------------------------------- Two columns of plain fact, on the light ground the lower page already uses. The "charged separately" column is NOT styled as a warning: these are normal parts of a hire - a night surcharge, a driver's bed on a three-day job - and colouring them as risk would misrepresent them. The only emphasis is a hairline rule between the columns, which is the same device the fact rail uses, so the two read as one family. -------------------------------------------------------------------- */ .inclusions{ margin-block:clamp(40px,6vw,72px); padding-block:clamp(28px,3.4vw,40px); border-top:1px solid var(--corr-hair); border-bottom:1px solid var(--corr-hair); } .inclusions__title{ margin:0 0 .5rem; font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem); line-height:1.15; } .inclusions__day{ margin:0 0 clamp(20px,2.4vw,30px); max-width:60ch; color:var(--corr-muted); } .inclusions__grid{ display:grid; gap:clamp(24px,3.2vw,48px); grid-template-columns:1fr; } @media (min-width:820px){ .inclusions__grid{grid-template-columns:1fr 1fr} /* The rule sits on the second column so it never hangs under a single column at narrow widths. */ .inclusions__col--out{ padding-inline-start:clamp(24px,3.2vw,48px); border-inline-start:1px solid var(--corr-hair); } } .inclusions__col h3{ margin:0 0 .75rem; font-family:var(--corr-sans); font-size:.6875rem; font-weight:600; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; color:var(--corr-gold); } .inclusions__col ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.7rem; } .inclusions__col li{ position:relative; padding-inline-start:1.4rem; max-width:52ch; line-height:1.55; text-wrap:pretty; } .inclusions__col li::before{ position:absolute; inset-inline-start:0; top:.05em; font-family:var(--corr-sans); font-weight:600; color:var(--corr-hair-strong); } .inclusions__col--in li::before{content:"\2713"; color:var(--corr-action)} .inclusions__col--out li::before{content:"\002B"} /* The results panel's own version of the same two lists, inside the already-dark "what moves it" drawer. */ .rp-moves__in{ margin:.9rem 0 0; font-size:.8125rem; line-height:1.55; color:var(--corr-muted); } /* --- RB-26 END --- */ /* ==== REPAIR BLOCK v1 END ================================================ */ /* ==== SLICE 111. RTL-specific overrides ================================= Everything above this line that could be expressed as a logical-property swap (padding-inline-*, text-align:start/end, border-inline-*, inset-inline-start) was converted in place -- those are no-ops in the dir="ltr" document every visitor gets today and only start differing once Polylang actually serves a dir="rtl" page (WordPress's own language_attributes() call in header.php already emits that attribute automatically once an Arabic or Urdu translation exists -- slice112). The handful of things below genuinely can't be expressed as a logical property -- a background-image-drawn arrow, an off-canvas panel's anchor edge, a hover underline's growth direction -- so they are scoped under [dir="rtl"] instead. Every rule here matches nothing at all on a dir="ltr" page, which is 100% of live traffic until slice112 ships a translated page, so this block carries zero regression risk to the current site. ==========================================================================*/ /* The