/* =========================================================================== home-ref.css — the landing page, built to the supplied reference. =========================================================================== Loaded ONLY by index.html, and every rule is scoped to `body.home-ref`, so the seven other pages that share main.css are untouched by it. WHAT THE REFERENCE CHANGES, top to bottom: - a two-line icon nav of ten products. It was a WHITE bar at first, which is what the reference draws; the business asked for the shared header's behaviour back instead, so the bar is clear over the hero and fades to black on scroll (section 1) and only the nav layout is the reference's. - a taller hero with an eyebrow, a two-tone headline and a four-item trust row carrying icons and sub-lines - the "Travel More / Worry Less" script mark at the top right - a wider, flatter search card: bigger tabs, a special-fare row and one large centred call to action - a four-card offer strip on cream - a six-tile destination grid with its own pager IMAGERY IS THE ONE THING IT CANNOT SUPPLY. The reference is carried by photographs — a sunset coastline behind the hero, six destination tiles, four offer illustrations — and none of them are in this repository (design-templates/assets/img is empty; the only photographs on disk are the eleven hotel shots under assets/hotels). Every slot that wants one is built to take a real file and falls back to a warm gradient in the meantime, rather than sitting empty or stretching a placeholder. See the `--hr-shot-*` custom properties: dropping a file in and setting one is the whole change. =========================================================================== */ body.home-ref { --hr-cream: #F5EFE9; /* Named -gold from when the accent was gold; they are the ACCENT family and follow whatever main.css says the accent is. Renaming them would touch every rule below for no behavioural gain. */ --hr-gold: var(--coral); --hr-gold-dk: var(--coral-dark); --hr-gold-ink: var(--coral-dark); --hr-ink: var(--ink, #12253F); --hr-muted: var(--muted, #6B7A90); --hr-line: var(--line, #E4E9F0); --hr-navy: var(--navy, #0C1E3A); /* Header ink. The bar is clear over the dark hero and near-black once scrolled (section 1), so nothing in it can use --hr-ink. One pair of tokens for both states, because both states are dark. */ --hr-onhero: rgba(255,255,255,.92); --hr-onhero-dim: rgba(255,255,255,.70); /* THE HERO PHOTOGRAPH. The slot below (.hero-bg) falls back to a dusk gradient when this is unset, which is what the page shipped with while there was no asset. Supplied 2026-09-11 as a 1983x793 PNG and converted to WebP at q86: 1704 KB -> 117 KB, which is the difference between a hero that paints on a phone connection and one that does not. The original PNG is not in the repo; re-export from it if a wider crop is ever needed. */ --hr-shot-hero: url('../images/hero-sunset.webp'); background: #fff; } /* THE CARD IS NO LONGER ONLY THE LANDING PAGE'S. ------------------------------------------------------------------------- search-strip.js's Modify button opens this same BookingCard underneath the results-page search row, because the row cannot edit a multi-city itinerary, a special fare or Group Deals and the card can. Mounted there it arrived UNSTYLED: every rule that dresses it — the tab row, the fare tiles, the enquiry panel — was scoped to `body.home-ref`, which only index.html sets, so the fare tiles came out as a run-on line of text. So the CARD sections (3, 4, 8, 10 and the card lines of 7) match either scope, and this class carries the tokens they read. The PAGE sections (1, 2, 5, 6, 9 — header, hero, offers, destinations, nav fitting) are still `body.home-ref` alone, which is what lets flights/hotels/packages load this stylesheet without taking the landing page's chrome with it. */ .hr-card-scope { --hr-cream: #F5EFE9; --hr-gold: var(--coral); --hr-gold-dk: var(--coral-dark); --hr-gold-ink: var(--coral-dark); --hr-ink: var(--ink, #12253F); --hr-muted: var(--muted, #6B7A90); --hr-line: var(--line, #E4E9F0); --hr-navy: var(--navy, #0C1E3A); --hr-onhero: rgba(255,255,255,.92); --hr-onhero-dim: rgba(255,255,255,.70); } /* ========================================================================== 1. HEADER — clear over the hero, dark once you scroll -------------------------------------------------------------------------- THE BAR IS NOT PAINTED IN THIS FILE, deliberately. main.css starts it at rgba(0,0,0,0) and hero-shell's bindScrollFade() writes background-color, backdrop-filter and box-shadow as INLINE styles on every scroll event, taking the bar from fully clear over the hero photograph to near-black by 600px down. This block used to override all three with `!important` — which is exactly why the landing page wore a white bar from the first frame and never darkened, while every other page kept the fade. Two things follow from letting the fade run again, and both are handled here: POSITION IS `fixed`, NOT `sticky`. A sticky bar occupies flow space, so the hero began 128px BELOW it. A transparent bar has to overlay the thing it is transparent to, so it leaves the flow and .hero takes the padding instead (section 2). z-index matches main.css's 100 rather than the 70 a flow-occupying bar could afford. EVERY LABEL IN IT IS LIGHT. Its backdrop is the dark hero and then the dark bar — never white — so the ink, the icons, the partner pill and the login link all invert below. That is the whole reason the white bar existed: get the colours wrong and the nav vanishes into the sky. ========================================================================== */ body.home-ref header#siteHeader, body.home-ref header.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } body.home-ref header#siteHeader nav.wrap { min-height: 64px; gap: 18px; } /* THE LOGO IS NEVER THE THING THAT GIVES WAY. .navlinks carries flex:1 and there are ten of them; the logo's default `flex: 0 1 auto` let it be squeezed toward nothing as the bar filled up, and at a narrow window it collapsed out of sight entirely. It is the brand mark — the nav scrolls instead (section 7). */ body.home-ref header#siteHeader .logo { flex: none; } body.home-ref header#siteHeader .logo-mark-img { height: 70px; width: auto; } /* The nav is a row of ICON-OVER-LABEL cells in the reference, not a row of words. The icon comes from jp-icons (one family for the whole site); a link with no icon simply renders its label, so nothing breaks if one is added without one. */ /* THE ROW STARTS AT THE LOGO, it does not centre in what is left. It was `safe center` — chosen because plain `center` overflows at BOTH ends when the row does not fit, and the end that overflows first is the one the header clips against the logo, which is how Flights stopped being visible on a full-screen window. `safe` fixed the clipping but kept the centring, and with only five cells left in the nav that put 288px of empty bar between the mark and the first link on a 1600px window. `flex-start` solves both: the row begins a fixed gutter after the logo at every width (main.css sets that gutter), and when it does not fit it scrolls from the left rather than hiding its own first link. */ /* A grid item takes neither `flex` nor `justify-content` — nav.wrap is a three-column grid now (main.css) and the centre track is what positions this. Both were dropped rather than left to read as if the row still stretched; `flex: 1` here was also what out-specified main.css and kept the nav filling the bar. */ body.home-ref .navlinks { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; } body.home-ref .navlinks::-webkit-scrollbar { display: none; } body.home-ref .navlinks a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 12px 7px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--hr-onhero); text-align: center; white-space: nowrap; position: relative; } /* `:not(.nav-caret)` is load-bearing. This rule paints the PRODUCT GLYPH — the icon that sits above each label — and "any icon inside a nav link" used to be a safe way to say that, because the glyph was the only one in there. The "More" chevron is an icon too, and it was being inflated to a 20x20 square and repainted in the glyph's dim colour, so it read as a second icon rather than as a caret. IT MATCHES ON .jpi, NOT ON svg. Every nav icon is a jp-icons drawing now, so the class that says "this is the caret" sits on the hydrated — a selector reaching through to the inner would no longer see it, and the caret would be back to 20px. Size comes from .jpi-nav; this sets colour. */ body.home-ref .navlinks a .jpi:not(.nav-caret) { color: var(--hr-onhero-dim); } /* Hover is a wash of light, not the cream tile — cream on a clear bar is a pale block floating on the photograph. */ body.home-ref .navlinks a:hover { background: rgba(255,255,255,.12); color: #fff; } body.home-ref .navlinks a:hover .jpi { color: #fff; } /* The current page: accent label, accent icon, accent underline. --coral-light rather than --coral-dark: the deepened shade is for white backgrounds and goes muddy against the hero. */ body.home-ref .navlinks a[aria-current="page"] { color: var(--coral-light); } body.home-ref .navlinks a[aria-current="page"] .jpi, body.home-ref .navlinks a[aria-current="page"] svg { color: var(--coral-light); } body.home-ref .navlinks a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--hr-gold); border-radius: 2px; } /* main.css draws a sliding underline on hover; the current-page rule above is the reference's treatment, so the sliding one is switched off. */ body.home-ref .navlinks a::before { display: none; } body.home-ref .nav-actions { gap: 12px; } body.home-ref .nav-actions .nav-icon-btn, body.home-ref .nav-actions .hr-wish { color: var(--hr-onhero); } /* MY BOOKINGS AND NOTIFICATIONS ARE ACCOUNT CONTROLS, so they are not offered to somebody who has not signed in. Both open the Account Center, which needs a session — to a first-time visitor they were two buttons whose only possible answer was "sign in first", sitting next to the Login button that would have been the answer. HIDDEN BY DEFAULT AND REVEALED BY THE CLASS, not the other way round: the class is set by profile-menu.js's markSession() once the session has been read, and the reverse rule would show both icons on every first paint and then snatch them away. `jp-signed-in` covers an admin on the shared session too, which is the other case where the Account Center opens. The landing page only. Every other page's header is hero-shell's, and this stylesheet's page rules do not reach it. */ body.home-ref .nav-actions .nav-icon-btn { display: none; } html.jp-signed-in body.home-ref .nav-actions .nav-icon-btn { display: inline-grid; } /* THE B2B DOOR IS OPEN ON EVERY PAGE, including this one. It used to be disabled here — `pointer-events: none`, `aria-disabled` and `tabindex="-1"` on the two copies in index.html — so that the front page advertised the partner portal without letting a B2C visitor walk into a B2B login. The owner has since asked for it to be clickable everywhere, so the disabling is gone from both the markup and this file, and the pill is an ordinary link to partner-login.html wherever it appears. */ /* The partner pill is an OUTLINE on the hero, not a white lozenge. A white fill here reads as a button pasted over the photograph, and it is the one control in the bar that is a link to somewhere else rather than an action. */ body.home-ref .nav-partner-mark { color: var(--hr-onhero); border: 1px solid rgba(255,255,255,.34); background: transparent; border-radius: 999px; padding: 7px 14px; } body.home-ref .nav-partner-mark:hover { border-color: var(--hr-gold); background: rgba(255,255,255,.12); } /* Wishlist and the currency chip — both in the reference's utility row. */ body.home-ref .hr-wish { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--hr-onhero); } /* The heart keeps its red — it is the one deliberate spot of colour in the utility row, and #E24B4A still clears the hero and the dark bar. */ /* Sized by .jpi-btn; this sets the one colour that is not inherited — the heart is red on a bar where everything else is white. Matching on .jpi rather than svg keeps the host box and the drawing the same size. */ body.home-ref .hr-wish .jpi { color: #E24B4A; } body.home-ref .hr-cur { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--hr-onhero); background: transparent; } body.home-ref .hr-cur .hr-flag { font-size: 14px; line-height: 1; } body.home-ref .pm-login { color: var(--hr-onhero); font-weight: 600; } body.home-ref .pm-signup { background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-dk)); color: var(--on-accent, #fff); border: none; padding: 10px 22px; border-radius: 999px; font-weight: 800; font-size: 14px; } /* ========================================================================== 2. HERO -------------------------------------------------------------------------- `--hr-shot-hero` is the photograph slot. Set it to a real file and the gradient underneath stops showing: body.home-ref { --hr-shot-hero: url('../images/hero-sunset.webp'); } Until then the band is a warm dusk gradient in the reference's own colours, which reads as a deliberate treatment rather than a missing asset. ========================================================================== */ /* THE TOP PADDING REPLACES THE SPACE THE HEADER USED TO OCCUPY. The bar was `sticky`, so it took 128px of flow and the hero began beneath it. It is `fixed` now (section 1) and overlays instead, so the hero reserves that height itself and the sky shows through the clear bar. 128px is main.css's `nav.wrap { height: 128px }` — the two have to agree, and this page never gets `.is-solid`, which is the only thing that shortens it. */ /* The bottom padding came down with the trust row: 48px was air under a four-row block, and under a headline, one line of copy and the card it was a gap for its own sake. */ /* 104px, down from 128. The header is 128px tall and this used to clear it exactly; it does not have to, because .hero-inner adds its own padding and the eyebrow's cap height leaves air above it anyway. Every pixel taken here lifts the search card by the same amount. */ body.home-ref .hero { min-height: 0; padding: 104px 0 34px; } /* THE SCRIM FOLLOWS THE TEXT, NOT THE OLD PLACEHOLDER. This was a 90deg wash, .86 opaque at the left edge — right when the hero was a flat gradient and the headline was set hard left. Both of those changed: the headline is centred now, and behind it is a photograph whose own left side is the darkest thing in the frame (a night coastline) and whose right is the sun. Kept as it was, it buried the coastline and the city lights under near-black while adding nothing where the text actually sits. Top-down instead, and much lighter. Heaviest across the top, where the clear header and the headline sit; almost open through the middle, where the photograph is worth seeing; and lifting again at the foot so the card's top edge has something to sit against rather than floating on bright cloud. */ body.home-ref .hero-overlay { background: linear-gradient(180deg, rgba(6,14,28,.62) 0%, rgba(6,14,28,.42) 26%, rgba(6,14,28,.16) 52%, rgba(6,14,28,.38) 100%); } body.home-ref .hero-bg { background-image: var(--hr-shot-hero, linear-gradient(120deg, #08303C 0%, #14515F 34%, #9C4632 72%, #E8604C 100%)); background-size: cover; background-position: center; } /* The reference's hero is a still photograph. The video layer stays in the DOM — booking-card.js switches it per product tab and removing it would break that — but it is not what this page shows. */ body.home-ref .hero-video-layer { display: none; } /* 46px of it was clearance for a headline that ran to two rows, then 26 for a one-row headline with a sub-line under it. Neither is the shape any more: the sub-line is gone and the headline is smaller, so 14 is the whole of what is needed between the header and the eyebrow. Every pixel taken here lifts the search card by the same amount — the card is what this page is for and it should not start below the fold. */ body.home-ref .hero-inner { padding-top: 14px; max-width: var(--max, 1280px); } /* THE HERO HEADLINE IS THE ONLY PLACE TWO EXTRA FACES ARE USED. "Travel More" is Playfair Display — a high-contrast serif that reads as premium print rather than as UI. "Worry Less" is Yellowtail, a slanted brush script, in the warm coral. The pair is the whole point: an elegant statement and a handwritten aside, belonging to one sentence. YELLOWTAIL, NOT PACIFICO, AND THE DIFFERENCE IS THE SLANT. Pacifico is a round, near-upright brush face; the supplied design is a strongly slanted calligraphic one whose letters connect and whose 'y' carries its descender into the next word. Set beside them, Great Vibes / Alex Brush / Allura are too light to hold up at this size against the sky, Kaushan Script is close but sits too upright, and Yellowtail is the one that matches the weight and the lean. NEITHER FACE LEAVES THIS HEADLINE. Navigation, buttons, field labels, field values and body copy all stay on Montserrat — a script face on a control is what makes an interface look costume rather than considered, and main.css's --ff-head is deliberately NOT touched so every other heading on every other page is unchanged. THE TWO ARE OPTICALLY MATCHED, NOT NOMINALLY. A script's lowercase is small for its em and it carries a long descender, so set at the serif's nominal size it reads as the smaller of the two and sits high. Yellowtail needs more of a correction than Pacifico did — it is the more slanted face and its x-height is smaller still — hence 1.18em rather than 1.06, and a deeper baseline nudge. Re-measure these two numbers if the face changes again; they belong to it, not to the layout. `font-display: swap` (in the Google URL) means the headline paints in Montserrat first and re-flows — acceptable for two words, and the alternative is invisible text. FALLBACKS ARE REAL FACES, not just `serif`/`cursive`: a headline that falls back to the browser's default cursive is unreadable on some machines, so Georgia and Segoe Script are named ahead of the generics. */ body.home-ref .hero .eyebrow { /* Smaller, and the tracking with it. At 14px on .34em this ran 580px wide — a line of spaced capitals as long as the headline underneath, which made two headlines competing rather than a label over a statement. At 12px/.3em it reads as the kicker it is. */ font-size: clamp(10.5px, .82vw, 12px); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 13px; /* `.eyebrow` is `display:flex` in main.css (it carries a rule before the text). A flex container does not read `text-align`, so the centring the hero block sets travelled to the headline and the sub-line and stopped dead here — the eyebrow alone stayed flush left. `justify-content` is the flex spelling of the same instruction. */ justify-content: center; } body.home-ref .hero .eyebrow::before { display: none; } body.home-ref .hero h1 { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; /* 62px at the top, down from 76. The headline is the loudest thing on the page and it was pushing the search card towards the fold; this keeps it the largest type on screen by a wide margin and gives ~15px back to the card. The floor moves 40 -> 34 in step, which also lets the line hold one row down to a narrower window than before. */ font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; font-weight: 700; color: #fff; letter-spacing: -.015em; margin: 0; /* main.css caps `.hero h1` at 16ch, which is right for a headline meant to break across two rows and wrong for one meant to read as a single line: "Travel More Worry Less" is 22 characters, so it wrapped after "Worry" and left "Less" stranded on a row of its own. */ max-width: none; } body.home-ref .hero h1 .accent { font-family: 'Yellowtail', 'Segoe Script', 'Brush Script MT', cursive; font-weight: 400; font-size: 1.18em; letter-spacing: 0; color: var(--coral-light); display: inline; position: relative; top: .1em; /* A slanted script's strokes thin out against a dark sky at this size; the shadow is contrast, not decoration, and is too tight to read as a glow. */ text-shadow: 0 2px 18px rgba(0,0,0,.28); /* The face leans right, so its last glyph overhangs its own advance width and the flourish that follows would otherwise start inside the 's'. */ padding-right: .06em; } /* ========================================================================== THE HERO FLIGHT PATH -------------------------------------------------------------------------- A decorative route drawn out of the end of "Worry Less": a smooth run right, one loop, then a climb to an aeroplane at the top right. It replaced a much smaller swoosh that sat inline in the headline. SIZED IN em SO IT TRACKS THE HEADLINE, capped in vw so it cannot reach the window edge on a 1366 screen, where the centred headline already ends about 330px from it. `.hero` clips its own overflow (main.css, for the film and the parallax), so an over-long path would be cut rather than scroll — the cap is what keeps it whole. THE COLOUR IS THE HEADLINE'S. --coral-light is what `.accent` uses for "Worry Less"; the line, the loop and the aircraft all inherit it through `currentColor`, so the route reads as part of that phrase rather than as a second decoration that happens to sit nearby. ========================================================================== */ body.home-ref .hero h1 .hr-accent-wrap { position: relative; display: inline-block; } body.home-ref .hr-flightpath { position: absolute; left: 100%; bottom: -.06em; /* 4.4em IS 3.6em's LENGTH, HELD THROUGH A SMALLER HEADLINE. The route is sized in em so it tracks the type, which is right — but the headline just dropped from 76px to 62px, and at 3.6em that would have quietly taken the route from 274px back down to 223px, undoing the restore that was asked for one change earlier. 4.4 x 62 = 273px: the same route, beside smaller words. Re-derive this multiplier if the headline size changes again; it belongs to that size, not to the drawing. 18vw IS NOT DECORATION HERE, unlike at the smaller sizes. At 3.6em the route is wider than the gutter beside the headline on everything below about 1520px, so the vw term is what actually decides the width from there down — 246px at 1366, 198px at 1100, 138px at 768. It is the reason the route fits at all on a laptop, and it is why the breakpoints below could be re-derived rather than reverted along with the size. THE 6px IS MEASURED SLACK, NOT A FUDGE. 18vw tracks that gutter closely — too closely once the route is shown below 1100, where it ships now: the aeroplane cleared the window edge by 6px at 768 and 9px at 900, which is three stroke widths and one font-metric difference away from being clipped. Taking 6px off the vw term buys that margin back at every width the vw term governs, and costs NOTHING at the size this change was about: above 1520 the em term wins and the route is 274px either way. */ width: min(4.4em, calc(18vw - 6px)); height: auto; overflow: visible; pointer-events: none; color: var(--coral-light); } body.home-ref .hr-fp-line { fill: none; stroke: currentColor; /* THE PEN IS THE SAME WIDTH AT EVERY SIZE. A plain stroke-width is in viewBox units and shrinks with the box: 2.6 over a 412-unit box came out at 1.7px on a 1920 screen but 0.7px once the route was down to tablet size, which is a hairline losing a fight with a sunset photograph — the line was there and could not be seen. `non-scaling-stroke` takes the stroke out of that scaling, so 1.9px is 1.9px from 700px up. 1.9 because it matches what the old 3.6em route measured on a full screen: the weight is unchanged where it was already right, and only the small end gains. */ vector-effect: non-scaling-stroke; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; /* pathLength NORMALISES THE DASH MATHS TO 100 UNITS, so the draw works without measuring the real length in script and stays correct at every size the svg scales to. */ /* THE TRAIL IS THE AEROPLANE'S POSITION MINUS A FIXED DISTANCE, and it is written that way rather than raced towards it. WHAT WAS WRONG. The trail and the aeroplane had separate animations over the same curve, and the gap between them was made out of TIME - a later start, a shorter run. Time is not distance. The curve carries a loop, the easing is not linear, and through the middle the trail closed on the aeroplane and passed it. A route drawing itself ahead of the aircraft flying it is the one thing this must never show. WHAT HOLDS IT NOW. Both are the same eased function of the same clock - identical delay, identical duration, identical curve - and the gap is put in SPACE instead, by starting the dash five path-units further back: plane L(t) = 100 * f(t) (offset-distance, %) trail drawn(t) = 100 - dashoffset(t) = 100 - (105 - 100 * f(t)) = L(t) - 5 That is the brief's own formula, curveProgress = planeProgress - GAP, with GAP in path length. It cannot drift, because there is nothing to drift: one clock, one easing, a constant subtracted from it. Not at the start, not through the loop, not on a dropped frame, and not if the tab is backgrounded and both resume together. WHY `100 200` AND NOT `100`. A bare dasharray of 100 repeats every 200 units, so an offset above 100 wraps a second dash onto the front of the path. With a 300-unit period there is one dash, the offset may run past 100, and nothing is drawn at all until the aeroplane is five units out. THE LAST FIVE UNITS ARE THE TAIL. At 3.2s the aeroplane lands with the trail five units short of it; the second keyframe segment closes that in 260ms. Short on purpose - the route should complete immediately behind the aircraft, not pause and then finish with a flourish. */ stroke-dasharray: 100 200; stroke-dashoffset: 105; animation: hr-fp-draw 3.46s .35s forwards; } /* 92.486% is 3.2s of 3.46s: the exact moment the aeroplane lands. The first segment carries the aeroplane's own easing so the two track to the unit; the tail gets its own, because it is a different movement. */ @keyframes hr-fp-draw { 0% { stroke-dashoffset: 105; animation-timing-function: cubic-bezier(.45,.05,.35,1); } 92.486% { stroke-dashoffset: 5; animation-timing-function: cubic-bezier(.33,0,.2,1); } 100% { stroke-dashoffset: 0; } } /* THE AIRCRAFT RIDES THE PATH, it does not fly to a guessed end point, and it IS THE CLOCK. Its delay, duration and easing are what the trail above is written against: the trail is this position minus five path-units, exactly, at every frame. Change the timing here and the trail follows it; change it in only one of the two places and they come apart, which is the fault that note exists to describe. `offset-rotate: auto` is what turns it into the corners and leaves it pointing up-right at the end, because that is where the route ends. */ body.home-ref .hr-fp-plane { fill: currentColor; offset-path: path("M 6 198 C 60 214, 120 214, 176 196 C 216 190, 229.5 171.2, 264.8 157.2 C 285.3 149, 295.3 125.7, 287.2 105.2 C 279 84.7, 255.7 74.7, 235.2 82.8 C 214.7 91, 204.7 114.3, 212.8 134.8 C 221 155.3, 244.3 165.3, 264.8 157.2 C 318.7 135.7, 328.8 90.4, 388 46"); offset-rotate: auto; offset-distance: 0%; opacity: 0; animation: hr-fp-fly 3.2s cubic-bezier(.45,.05,.35,1) .35s forwards; } @keyframes hr-fp-fly { /* UP TO FULL OPACITY IN THE FIRST 3%, which is 96ms of 3.2s. That lands just inside the 100ms the aeroplane has to itself, so what the eye catches first is a solid aeroplane starting to move — not an aeroplane and a line fading up together, which is what a longer ramp would give. */ 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } } /* Without motion paths the aeroplane would sit at the viewBox origin, which is the top left corner and nowhere near the route. Parked at the end instead, turned to the path's closing bearing (0.80, -0.60 => -36.87deg). */ @supports not (offset-path: path("M 0 0")) { body.home-ref .hr-fp-plane { animation: none; opacity: 1; transform: translate(388px, 46px) rotate(-36.87deg); } } /* REDUCED MOTION GETS THE DESTINATION, NOT THE JOURNEY: the finished route and the aeroplane parked at the end of it, drawn in full with nothing moving. */ @media (prefers-reduced-motion: reduce) { body.home-ref .hr-fp-line { animation: none; stroke-dashoffset: 0; } body.home-ref .hr-fp-plane { animation: none; offset-distance: 100%; opacity: 1; } } /* WHERE THE ROUTE RUNS OUT OF WINDOW — one band, measured, not a guess. RE-MEASURED FOR THE SMALLER HEADLINE, and it moved a long way. Dropping the headline to 62/34px narrowed the line itself, which WIDENS the gutter beside it at every width — so the band where the route cannot fit shrank from 481-699 to 441-599, and the bottom cutoff went away almost entirely. These numbers belong to that headline size: change it again and re-measure, the way this had to be. Clearance is between the last of the INK — the aeroplane, not the box, which carries 24 empty units on its right — and the clipping edge, scrollbar already out of it: 900px one row 156px route clears by 63px 700px one row 120px route clears by 47px 640px one row 109px route clears by 27px 600px one row 102px route clears by 14px 580px one row 98px route clears by 8px 560px one row 95px route clears by 2px <- the edge 460px one row 77px route OVERFLOWS by 31px THE SQUEEZE IS NOT THE WRAP, IT IS THE ROW BEFORE IT. Between roughly 440 and 570 the headline is still ONE row, held at the 34px floor of its clamp, and it very nearly fills the screen — 46px of gutter at 460, 39px at 446 — while the route is still 74-95px wide. BELOW THE WRAP THE ROOM COMES BACK, and now it does not run out again: the route clears by 56px at 430, 43px at 390, 27px at 340 and 21px at 320, the narrowest viewport anything still ships. The lower rule is a backstop at 279, past which the headline's 34px floor stops the line shrinking while the window keeps going and the gutter collapses under the route. No real device reaches it. BOTH BOUNDS ARE BIASED TOWARDS HIDING. The wrap is a cliff — 39px of gutter one pixel wide of it, 127px the other side — and exactly where it falls depends on font metrics this stylesheet does not control, as does every number above. So the band starts at 599 rather than the 560 that still fitted by 2px, and ends at 441 rather than the ~435 where the wrap was measured. The margin is spent hiding a few widths that would have been fine, which costs nothing, rather than showing one that is not, which clips the aeroplane. */ @media (max-width: 599px) and (min-width: 441px) { body.home-ref .hr-flightpath { display: none; } } @media (max-width: 279px) { body.home-ref .hr-flightpath { display: none; } } body.home-ref .hero .sub { margin-top: 18px; font-size: clamp(16px, 1.3vw, 20px); color: rgba(255,255,255,.86); max-width: 46ch; line-height: 1.6; } /* A headline that changes face mid-word is exactly what a reduced-motion or low-bandwidth reader does not need re-flowing twice; nothing here animates, so there is no motion to reduce. Left as a note so it is not "fixed". */ /* The hero's trust row is gone with its markup — see index.html. `.hr-trust` is NOT free to reuse: hotel.css styles a different component of the same name (`.hr-trust-row` inside it) for the hotel booking screens, and only these `body.home-ref` rules were the landing page's. */ /* THE SCRIPT MARK IS NOW THE HEADLINE. These rules styled a "Travel More / Worry Less" flourish for the top right corner that no markup ever rendered — the phrase is the

instead. Kept rather than deleted only as long as it takes to say so: if the corner mark is wanted BESIDE the headline one day it wants writing against the headline, not resurrecting against nothing. DEAD — no element carries `hr-script`. */ body.home-ref .hr-script { position: absolute; right: clamp(16px, 4vw, 74px); top: 84px; text-align: center; pointer-events: none; z-index: 2; } body.home-ref .hr-script b { display: block; font-family: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', cursive; font-size: clamp(24px, 3vw, 38px); font-weight: 400; color: #fff; line-height: 1.16; text-shadow: 0 2px 14px rgba(0,0,0,.35); } body.home-ref .hr-script svg { display: block; margin: 2px auto 0; width: clamp(130px, 15vw, 190px); } @media (max-width: 1100px) { body.home-ref .hr-script { display: none; } } /* ========================================================================== 3. SEARCH CARD ========================================================================== */ :is(body.home-ref, .hr-card-scope) .search-dock { max-width: var(--max, 1280px); margin-top: 20px; } /* THE CARD NARROWS ONLY WHERE THERE IS ROOM TO SPARE. The design puts the card at about 70% of the window with a gutter either side, and a label in the right one. Taken literally at every width that is a six-field search row squeezed into 700px, so the trade is made once, at 1400px: above it the card gives up 420px of the window, and below it nothing changes and the label is not rendered at all. 1500 RATHER THAN 1300, and there is no floor. Both earlier attempts were worse: a 1020px floor at 1300 left a 172px gutter for a label that needs about 190 and they overlapped, and taking 420px at 1400 left the card at 916px, which wrapped the five special-fare chips onto a second row. 1500 is where 400px can come off and still leave a card (~1036px) that holds the six-field row and the fare chips on one line each. `min()` with --max stops the card growing past the page's own content width, so past about 1700 the cap is doing the narrowing on its own and the gutter only gets wider. */ @media (min-width: 1500px) { body.home-ref .search-dock { max-width: min(var(--max, 1280px), calc(100vw - 400px)); } } /* The label itself. Absolutely placed against `.hero`, which is the nearest positioned ancestor (main.css sets `position: relative` on it for the film and the overlay). Hidden by default and switched on with the gutter, so the two can never disagree about whether there is space for it. */ body.home-ref .hr-discover { display: none; } /* 1500 HERE TOO. This breakpoint and the one narrowing .search-dock above are one decision, not two: the label only has a gutter to sit in because the card gave the width up. Left at 1400 while the card moved to 1500, the label appeared over a card that was still full width. */ @media (min-width: 1500px) { body.home-ref .hr-discover { display: block; position: absolute; z-index: 4; /* 210px is half of the 420 the card gives up, so this sits in the middle of the gutter the rule above creates. Anything derived from vw instead drifts out of that gutter as the window grows, because the card stops growing at --max and the gutter does not. */ right: max(28px, calc((100vw - min(var(--max, 1280px), calc(100vw - 400px))) / 2 - 176px)); /* CLEAR OF THE FLOATING MENU, which is the reason this is not lower. The quick-actions control is `position: fixed` and is a 60x252 STRIP down the right edge, not the small round button it looks like — its top lands around 65% of the first screen. Sitting the label at the card's lower-middle, where the design has it, put it inside that strip. 44% keeps it above, and the two only share a screen at all near scroll 0: the label scrolls with the hero and the strip does not. */ bottom: 44%; color: #fff; text-align: left; pointer-events: none; text-shadow: 0 1px 14px rgba(6,14,28,.55); } body.home-ref .hr-discover b, body.home-ref .hr-discover span { display: block; font-weight: 500; font-size: 17px; line-height: 1.35; letter-spacing: .01em; white-space: nowrap; } /* The rule under it, as in the design — short, and the same white at a fraction of the strength so it reads as a flourish and not a divider. */ body.home-ref .hr-discover::after { content: ''; display: block; margin-top: 12px; width: 62px; height: 1px; background: rgba(255,255,255,.55); } } :is(body.home-ref, .hr-card-scope) .search-card { border-radius: 14px; box-shadow: 0 2px 8px rgba(12,30,58,.08), 0 34px 70px -30px rgba(12,30,58,.5); padding: 0; overflow: visible; } /* the product tab row */ :is(body.home-ref, .hr-card-scope) .bc-tabs { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--hr-line); overflow-x: auto; scrollbar-width: none; } :is(body.home-ref, .hr-card-scope) .bc-tabs::-webkit-scrollbar { display: none; } :is(body.home-ref, .hr-card-scope) .bc-tab { display: flex; align-items: center; gap: 8px; flex: none; padding: 12px 18px; border-radius: 8px 8px 0 0; border: none; background: none; font-size: 13.5px; font-weight: 600; color: var(--hr-ink); cursor: pointer; white-space: nowrap; } :is(body.home-ref, .hr-card-scope) .bc-tab .jpi, :is(body.home-ref, .hr-card-scope) .bc-tab svg { width: 18px; height: 18px; color: var(--hr-muted); } :is(body.home-ref, .hr-card-scope) .bc-tab:hover { background: var(--hr-cream); } :is(body.home-ref, .hr-card-scope) .bc-tab.is-on { background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-dk)); color: var(--on-accent, #fff); font-weight: 800; } :is(body.home-ref, .hr-card-scope) .bc-tab.is-on .jpi, :is(body.home-ref, .hr-card-scope) .bc-tab.is-on svg { color: var(--on-accent, #fff); } /* the One Way / Round Trip / Multi City row */ :is(body.home-ref, .hr-card-scope) .bc-trip { display: flex; align-items: center; gap: 26px; padding: 14px 20px 0; flex-wrap: wrap; } :is(body.home-ref, .hr-card-scope) .bc-trip label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--hr-ink); cursor: pointer; } :is(body.home-ref, .hr-card-scope) .bc-trip input { accent-color: var(--hr-gold-dk); width: 17px; height: 17px; } :is(body.home-ref, .hr-card-scope) .bc-trip-note { margin-left: auto; font-size: 13px; color: var(--hr-muted); font-weight: 500; } /* ========================================================================== 4. SPECIAL FARES -------------------------------------------------------------------------- THE FIVE FARE NAMES ARE REAL; THE DISCOUNTS IN THE REFERENCE ARE NOT. flight-filters.js already models this axis — a `fareCategory` filter, with Regular / Student / Senior Citizen / Armed Forces / Corporate named in its own header — and renders it the day rows carry the field. So the control is the one the application is already built for. What the reference prints under each name ("Up to Rs 600 off", "Extra discounts/baggage") is a commercial claim, and no fare rule, coupon or supplier response in this application produces those figures. The tiles carry the name alone until something does; the sub-line slot is styled and waiting, so a real entitlement drops straight in. ========================================================================== */ :is(body.home-ref, .hr-card-scope) .hr-fares { display: flex; align-items: flex-start; gap: 26px; padding: 16px 20px 0; flex-wrap: wrap; } :is(body.home-ref, .hr-card-scope) .hr-fares-group { flex: 1; min-width: 0; } :is(body.home-ref, .hr-card-scope) .hr-fares-lab { display: block; font-size: 13px; font-weight: 700; color: var(--hr-ink); margin-bottom: 9px; } :is(body.home-ref, .hr-card-scope) .hr-fare-row { display: flex; gap: 9px; flex-wrap: wrap; } :is(body.home-ref, .hr-card-scope) .hr-fare { display: flex; align-items: center; gap: 9px; padding: 9px 14px; min-width: 104px; border: 1px solid var(--hr-line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; text-align: left; } :is(body.home-ref, .hr-card-scope) .hr-fare-txt { display: grid; gap: 1px; min-width: 0; } :is(body.home-ref, .hr-card-scope) .hr-fare > .jpi { color: var(--hr-muted); } :is(body.home-ref, .hr-card-scope) .hr-fare.is-on > .jpi { color: var(--hr-gold-ink); } :is(body.home-ref, .hr-card-scope) .hr-fare b { font-size: 13.5px; font-weight: 700; color: var(--hr-ink); } :is(body.home-ref, .hr-card-scope) .hr-fare span { font-size: 11.5px; color: var(--hr-muted); } :is(body.home-ref, .hr-card-scope) .hr-fare:hover { border-color: var(--hr-gold-dk); background: var(--coral-hover, #FDF3E2); } :is(body.home-ref, .hr-card-scope) .hr-fare.is-on { border-color: var(--hr-gold); background: var(--coral-hover, #FDF3E2); box-shadow: inset 0 0 0 1px var(--hr-gold); } :is(body.home-ref, .hr-card-scope) .hr-fare.is-on b { color: var(--hr-gold-ink); } /* the single large call to action */ :is(body.home-ref, .hr-card-scope) .hr-go-row { display: grid; place-items: center; padding: 20px 20px 24px; } :is(body.home-ref, .hr-card-scope) .search-go, :is(body.home-ref, .hr-card-scope) .hr-go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 336px; padding: 17px 40px; border: none; border-radius: 999px; background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-dk)); color: var(--on-accent, #fff); font-size: 15.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 26px -10px rgba(217,163,44,.62); } :is(body.home-ref, .hr-card-scope) .search-go:hover, :is(body.home-ref, .hr-card-scope) .hr-go:hover { filter: brightness(1.04); } /* Sized off the label rather than fixed, so it holds its proportion when the button shrinks to full width on a phone. */ :is(body.home-ref, .hr-card-scope) .search-go .search-go-arrow { width: 18px; height: 18px; flex: none; } /* The arrow's hover nudge went with the arrow. A magnifier that slides to the right on hover reads as a drag handle, not as search. */ /* =========================================================================== 5 AND 6 ARE GONE — OFFER STRIP and POPULAR DESTINATIONS --------------------------------------------------------------------------- The four-card promo strip and the six-tile destination band were removed from the landing page, and every rule that dressed them went with them: .hr-offers, .hr-offer, .hr-offer-cta, .hr-offer-art, .hr-dest, .hr-dest-in, .hr-dest-head, .hr-dest-nav, .hr-dest-all, .hr-dest-arrow, .hr-dest-grid and .hr-tile. None of them is referenced by any other page — checked across every .html and .js in frontend/ before deleting. What replaced both is one API-driven section, and its styles live in main.css beside the rest of the page-level furniture rather than here: this file is the landing page reference skin, and the Destinations shelf is not part of that reference. See .jw-dest there. =========================================================================== */ /* ========================================================================== 7. RESPONSIVE ========================================================================== */ @media (max-width: 1180px) { body.home-ref .navlinks { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; } body.home-ref .navlinks::-webkit-scrollbar { display: none; } } @media (max-width: 900px) { :is(body.home-ref, .hr-card-scope) .hr-fares { flex-direction: column; } } /* THE DRAWER IS THE NAV ON A PHONE, AND ONLY THE DRAWER. main.css hides `header .navlinks` at this width, but `body.home-ref .navlinks` above carries two classes to its one and won — so the landing page was the one page that showed the icon strip AND the hamburger together all the way down to 320px. Same rule, same breakpoint, enough specificity to actually apply. */ @media (max-width: 860px) { body.home-ref .navlinks { display: none; } } @media (max-width: 640px) { body.home-ref .hero-inner { padding-top: 18px; } :is(body.home-ref, .hr-card-scope) .search-go, :is(body.home-ref, .hr-card-scope) .hr-go { min-width: 0; width: 100%; } } /* ========================================================================== 8. THE ENQUIRY PANEL -------------------------------------------------------------------------- What Villas & Homestays, Trains, Buses, Cabs and Visa show instead of a search form. Deliberately plain: it is a sentence and a link, sized to the same height as the search panels so the card does not jump when a tab is clicked, and carrying nothing that looks like a field. ========================================================================== */ :is(body.home-ref, .hr-card-scope) .bc-enquire { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; min-height: 108px; padding: 22px 20px 4px; } :is(body.home-ref, .hr-card-scope) .bc-enquire p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hr-ink); max-width: 62ch; } :is(body.home-ref, .hr-card-scope) .bc-enquire-go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: linear-gradient(135deg, var(--hr-gold), var(--hr-gold-dk)); color: var(--on-accent, #fff); font-size: 14px; font-weight: 800; } :is(body.home-ref, .hr-card-scope) .bc-enquire-go:hover { filter: brightness(1.04); } /* ========================================================================== 9. FITTING FIVE PRODUCTS AND THE UTILITY CLUSTER ON ONE BAR -------------------------------------------------------------------------- This section was written when the bar carried TEN nav cells beside a six-item utility cluster, which genuinely overflowed and wrapped Login / Sign Up onto two rows. The nav is now five cells — Flights, Hotels, Tour Packages, Gaming Packages, More — so most of the emergency tightening it used to do is not only unnecessary, it is what kept the bar looking cramped next to the reference. WHAT WAS REMOVED AND WHY: * `nav.wrap { gap: 10px; padding-inline: clamp(10px,2vw,24px) }` was UNCONDITIONAL here. main.css applies exactly those numbers, but only below 1100px, where they are a taper. Repeating them without a query pinned every desktop width to the narrow-window spacing and fought the shared header's own gutter. * `.hr-wish span { display:none }` was unconditional too, with a `min-width: 1500px` rule putting the word back. main.css hides that label below 1150 and shows it above, and an unconditional rule out-specifies a media-query rule at the same weight regardless of width — so "Wishlist" was missing at 1150-1499 on the landing page alone. The reference draws the word at ~1450. main.css governs it now; there is no copy here. * The `.navlinks a` cell metrics were a duplicate of main.css's defaults with a wide-screen bump bolted on at 1500. Five cells can afford the roomier metrics from the width the labels appear at, so the bump moves to 1151 — the same boundary main.css uses to bring the labels back. What stays is what is still true: the utility cluster must not wrap, and the nav gap collapses to zero because each cell carries its own padding. */ body.home-ref .navlinks { gap: 0; } body.home-ref .nav-actions { gap: 9px; flex: none; flex-wrap: nowrap; white-space: nowrap; } body.home-ref .nav-partner-mark { padding: 6px 11px; font-size: 12.5px; } body.home-ref .pm-signup { padding: 9px 17px; font-size: 13px; } body.home-ref .pm-login { font-size: 13px; } @media (min-width: 1151px) { /* From the width the labels come back, the cells breathe. 1151 pairs with main.css's `max-width: 1150` icon-only block: one boundary, not two. */ body.home-ref .navlinks a { padding: 9px 12px 7px; font-size: 12.5px; } } /* ========================================================================== 10. A SMALLER SEARCH CARD -------------------------------------------------------------------------- The card was reading as oversized against the hero. Everything below is one step down — tabs, fields, fare tiles, the action row — for roughly a 12% reduction in height. The FIELD VALUES are deliberately untouched at 15px: they are what the traveller reads back to check the trip is right, and they were already the smallest thing worth shrinking. ========================================================================== */ :is(body.home-ref, .hr-card-scope) .search-card { border-radius: 12px; } :is(body.home-ref, .hr-card-scope) .bc-tabs { padding: 7px 9px 0; } :is(body.home-ref, .hr-card-scope) .bc-tab { padding: 9px 14px; font-size: 12.5px; } :is(body.home-ref, .hr-card-scope) .bc-tab .jpi { width: 16px; height: 16px; } :is(body.home-ref, .hr-card-scope) .bc-trip { padding: 11px 16px 0; gap: 20px; } :is(body.home-ref, .hr-card-scope) .bc-trip label { font-size: 13px; } :is(body.home-ref, .hr-card-scope) .search-panel .search-fields { gap: 8px; padding: 10px 16px 0; } :is(body.home-ref, .hr-card-scope) .search-panel .field { padding: 9px 12px; } :is(body.home-ref, .hr-card-scope) .search-panel .field label { font-size: 9.5px; letter-spacing: .05em; } :is(body.home-ref, .hr-card-scope) .search-panel .field input, :is(body.home-ref, .hr-card-scope) .search-panel .field select { font-size: 15px; } :is(body.home-ref, .hr-card-scope) .fld-sub { font-size: 11px; } :is(body.home-ref, .hr-card-scope) .hr-fares { padding: 12px 16px 0; gap: 20px; } :is(body.home-ref, .hr-card-scope) .hr-fares-lab { font-size: 12px; margin-bottom: 7px; } :is(body.home-ref, .hr-card-scope) .hr-fare { padding: 7px 12px; min-width: 94px; } :is(body.home-ref, .hr-card-scope) .hr-fare b { font-size: 12.5px; } :is(body.home-ref, .hr-card-scope) .hr-fare span { font-size: 10.5px; } :is(body.home-ref, .hr-card-scope) .hr-go-row { padding: 15px 16px 18px; } :is(body.home-ref, .hr-card-scope) .search-go, :is(body.home-ref, .hr-card-scope) .hr-go { min-width: 288px; padding: 14px 32px; font-size: 14.5px; } :is(body.home-ref, .hr-card-scope) .bc-enquire { min-height: 92px; padding: 18px 16px 2px; } /* THE CALL TO ACTION IS CENTRED, AND THE TRUST STRIP SITS UNDER IT. .search-foot is a flex ROW — trust marks on the left, button on the right — which put SEARCH FLIGHTS 450px right of the card's centre. The reference centres it under the whole card and treats the trust marks as a quiet footnote, so the row becomes a column and the button is ordered first. */ :is(body.home-ref, .hr-card-scope) .search-foot { flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px 16px; } :is(body.home-ref, .hr-card-scope) .search-foot .search-go { order: -1; } :is(body.home-ref, .hr-card-scope) .search-foot > *:not(.search-go) { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 11.5px; opacity: .8; } /* margin-left:auto is what pushed SEARCH FLIGHTS to the right in the original .search-foot ROW. Turning the row into a column left that margin in place, and in a column it resolves against the full width — 879px of it — so the button ignored align-items:center and sat hard right. Reset explicitly. */ :is(body.home-ref, .hr-card-scope) .search-foot .search-go { margin: 0 auto; } /* ========================================================================== 11. THE GUEST LINE ON THE SIGN-IN DIALOG -------------------------------------------------------------------------- `.modal-switch` is a one-line row; this one carries a second line under it saying what continuing as a guest does and does not get you. Scoped to the landing page because that is the only page carrying the dialog. ========================================================================== */ body.home-ref .modal-guest { margin-top: 10px; } body.home-ref .modal-guest small { display: block; margin-top: 5px; max-width: 42ch; margin-inline: auto; font-size: 12px; line-height: 1.5; color: var(--hr-muted); } /* ========================================================================== 11. THE HERO COPY, ABOVE THE CARD AND FLUSH WITH ITS LEFT EDGE -------------------------------------------------------------------------- The copy sits ABOVE the search card, which is the DOM order in index.html, so there is no `order` here — an earlier pass moved it below with one and that has been taken out rather than left overriding itself. WHY THE TEXT DID NOT LINE UP WITH THE CARD. .hero is a column flex container, and .wrap — which both the copy block and the search dock wear — carries `margin: 0 auto`. Auto margins on the CROSS axis absorb the free space, so a flex item that has them stops stretching and centres at its content width instead. .search-dock escapes that with `width: 100%` (main.css); .hero-inner had nothing, so it shrank to the width of its headline and centred: measured at 1500px, the card's left edge sat at 134 and the text began at 371. `width: 100%` is the same escape the dock already uses. Both blocks are then 1280 wide with the same 32px padding, so the eyebrow, the headline and the sub-line all start exactly where the card starts. The text was never centre-ALIGNED — `text-align` computes to `start` — it was a centred box with left-aligned text in it, which is why only the box needed fixing. */ /* THE HERO COPY IS CENTRED, AND FULL WIDTH. `width: 100%` is still needed: .hero is a column flex container and .wrap carries `margin: 0 auto`, so auto margins on the CROSS axis stop the block stretching and size it to its content instead. Without it the block is only as wide as its headline, and centring text inside a box that is itself floating mid-hero centres it against the wrong thing. `text-align: center` is the change the reference asks for. An earlier pass had this block flush-LEFT with the search card's edge, on request; the supplied image centres all three lines over the card instead, so that is what they do now. The sub-line keeps a max-width and takes auto margins so it wraps to a readable measure and stays centred rather than running the full 1280. */ body.home-ref .hero .hero-inner { width: 100%; text-align: center; } body.home-ref .hero .sub { margin-left: auto; margin-right: auto; }