/* >>> apb-core */ /* ═══════════════════════════════════════════════════════════════════════════ Aérobus — Paris-Beauvais (tenant 101). Written by scripts/cms-scripts/aerobus/*.ts. Every selector is opt-in via a class on a node's styles.classes; nothing here applies to an unpatched page. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Section gutters ──────────────────────────────────────────────────── Container contentWidth:"boxed" resolves to max-width:1360px + margin-inline: auto and nothing else, so below 1360px a section sits flush against both screen edges. Left unconditional on purpose: above 1360px the column is already centred with room to spare, so desktop is provably unchanged while 768–1360px gains the gutter it was also missing. */ .apb-gutter { padding-inline: 24px; } @media (min-width: 62em) { .apb-gutter { padding-inline: 32px; } } /* ─── 2. Hero ─────────────────────────────────────────────────────────────── Hero renders an outer box (min-height 325px, grows with content) and an absolutely positioned inner box pinned at height:325px; max-height:325px that carries the photo. The visual band is therefore always exactly 325px and the bus — which sits on the image's bottom edge — is clipped, while the rest of the hero shows plain #FAFAFA below it. Both numbers are released here and the band is given the image's own aspect ratio instead, so the artwork is shown complete at every width with no crop at all. What used to be the #FAFAFA gap becomes the image's own bottom colour: 9543's bottom row is a uniform #1c2451 across the full 2847px, so a flat fill continues it seamlessly, and 12142's lower half is solid #233676. Hero copy is white, which only works over those. */ .apb-hero { background: #233676 !important; /* Start the copy just below where the drawing ends — not below the whole band. The band is the full image so the bus is never cropped, but its bottom 59% is flat navy, and clearing all of it would leave ~190px of empty colour above the headline. */ padding-top: calc(31.73vw + 1.5rem) !important; } .apb-hero > :first-child { height: 77.57vw !important; max-height: none !important; } /* The band is position:absolute inside a hero with overflow:visible, so a band taller than the box spills over whatever follows. It stayed hidden while the heroes carried a search widget (542px of content against a 354px band); with the widget gone the guide pages were 334px tall and the band overhung the first section by exactly 20px. Pinning the box to the band's own height is what makes that structurally impossible rather than merely unlikely. */ .apb-hero { min-height: 77.57vw !important; } @media (min-width: 48em) { .apb-hero { background: #1c2451 !important; padding-top: var(--mantine-spacing-s1050, 4rem) !important; } /* Between 1139px and 2847px the height tracks the width exactly, so the crop is zero rather than merely small. Outside that range cover crops horizontally instead — off the left, because media 9543 carries a focal point of 100%/50% — and the left of that image is empty gradient while the bus sits hard against the right edge. So the bus is whole at every width. */ .apb-hero > :first-child { height: clamp(280px, 24.59vw, 700px) !important; } .apb-hero { min-height: clamp(280px, 24.59vw, 700px) !important; } } /* The hero copy sits in the right-hand column (the inner Container is direction: row-reverse from sm up) and the bus occupies x 66–89% of the same band, so the last lines of a four-line

land on the bus's white flank — white on white. It predates this work; showing the bus whole only makes it easier to see. A shadow is the one fix that does not cost the artwork: showOverlay would grey out the whole image, and there is no width for the headline that clears the bus without setting it in eight lines. / .apb-hero h1 { text-shadow: 0 1px 2px rgba(10, 14, 40, 0.55), 0 6px 24px rgba(10, 14, 40, 0.65); } / ─── 3. Long-form copy ───────────────────────────────────────────────────── The migrated Text blocks are one wall of
at the full 1296px column, with

used as the only spacing. Rewritten blocks drop those spacers and get real margins; the :has() rule catches any that survive elsewhere. / .apb-prose { max-width: 74ch; } .apb-prose h2 { margin: 0 0 1rem; } .apb-prose h3 { margin: 2rem 0 0.5rem; font-size: 1.0625rem; letter-spacing: 0.02em; } .apb-prose h3:first-child { margin-top: 0; } .apb-prose p { margin: 0 0 1rem; line-height: 1.65; } .apb-prose ul, .apb-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; } .apb-prose li { margin-bottom: 0.5rem; line-height: 1.6; } .apb-prose li:last-child { margin-bottom: 0; } .apb-prose > :last-child { margin-bottom: 0; } .apb-prose p:has(> br:only-child) { display: none; } .apb-prose a { text-decoration: underline; text-underline-offset: 2px; } / A wide column of body copy is hard to read even when the copy is short, so the two-column pages keep the same measure without the hard cap. / .apb-prose--wide { max-width: 90ch; } / (.apb-prose--center used to live here, centring the measure on the Text node. It is gone: patch-apb-guides.ts now strips the class, because the measure belongs on the section — see below. The removeClass call stays so nodes patched by the earlier version shed it on the next run.) / / The guide-page section card. It spans the full boxed column, exactly like every other section on this tenant, and the reading measure lives on the prose inside it (.apb-prose, 74ch) — which is also how the INFORMATIONS block on the line pages is built: a 787px column of text, left-aligned inside a 1232px card. An earlier version put the measure on this element instead. That centred the card itself at 747px, so the guide pages were the only ones whose sections did not line up with the rest of the site; and before that the measure sat on the Text node alone, which left the CTA buttons at x=32 while their copy started at x=339. Both children now start at the card's own padding edge. / .apb-article { width: 100%; } .apb-article .puck-container__content { width: 100%; } / Heading rhythm inside an article card. Without this every

in these articles renders at 32px with margin-top:0 — the base .apb-prose rule was written for the line pages, where a block holds exactly one

. These hold four to seven, so the article title and every section heading looked identical and a section heading sat 16px under the paragraph above it with nothing to separate them. The treatment is the one the INFORMATIONS blocks use, one level up: a rule above each heading, brand navy, generous space before and little after, so a heading binds to the text beneath it rather than floating between two paragraphs. Written with :is(h2, h3) because the migration is not consistent about which level a section title uses — /bus-vs-taxi leads its sections with

, /how-early with

— and the shape should not depend on that. / .apb-article .apb-prose :is(h2, h3) { color: var(--mantine-color-brand-7, #000066); font-size: 1.375rem; line-height: 1.3; font-weight: 700; margin: 2.25rem 0 0.75rem; padding-top: 1.75rem; border-top: 1px solid var(--mantine-color-gray-2, #DEDDE3); } / An

under an

is a sub-point, not a new section: no rule, smaller. / .apb-article .apb-prose h2 + h3, .apb-article .apb-prose h3 + h3 { font-size: 1.0625rem; color: var(--mantine-color-gray-9, #282638); margin-top: 1.5rem; padding-top: 0; border-top: 0; } / The first heading of a card is its title — nothing above it to rule off. / .apb-article .apb-prose > :first-child:is(h2, h3) { font-size: 1.625rem; margin-top: 0; padding-top: 0; border-top: 0; } .apb-article .apb-prose ul, .apb-article .apb-prose ol { margin-bottom: 1.25rem; } / Q&A sub-heads (the numbered questions on /bus-vs-taxi) — a heading for the document outline, but a quiet one: they sit under a section title, not beside it. / .apb-article .apb-prose h4 { font-size: 1.0625rem; font-weight: 700; color: var(--mantine-color-gray-9, #282638); margin: 1.75rem 0 0.5rem; } / Text is a block, but as a flex child under alignItems:start it would shrink to its longest unbreakable run; the button beside it must not stretch. / .apb-article .payload-richtext { width: 100%; } / These CTA labels are whole sentences ("Achetez votre billet de navette officielle Aérobus Paris-Beauvais maintenant"), and a Mantine Button keeps its label on one line at a fixed height — so on a 312px column the button ran off the screen and took the document with it. Letting it wrap self-disables on desktop, where the longest of them is 637px inside a 747px column. / .apb-article .mantine-Button-root { max-width: 100%; height: auto; min-height: 42px; padding-block: 0.55rem; white-space: normal; } .apb-article .mantine-Button-root .mantine-Button-label { white-space: normal; text-align: left; } / ─── 3b. Stop comparison table (/how-to-reach-aerobus-stop-from-paris) ────── Eight rows of "area / best stop / why" that the migration flattened into
-separated paragraphs. Restored as a real table; the header labels are the source's own words ("Meilleur arrêt", "Pourquoi"), and the first column has no header in the source so its stays empty rather than inventing French for it. / .apb-table table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; } .apb-table th, .apb-table td { padding: 0.7rem 0.9rem; text-align: left; vertical-align: top; line-height: 1.5; } .apb-table thead th { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mantine-color-gray-7, #5C5C62); border-bottom: 2px solid var(--mantine-color-gray-2, #DEDDE3); } .apb-table tbody tr { border-bottom: 1px solid var(--mantine-color-gray-1, #EEEEF0); } .apb-table tbody th { font-weight: 600; color: var(--mantine-color-brand-7, #000066); } / Below the sm breakpoint the three columns cannot hold their content, and a horizontal scroller on a comparison table is worse than no table. Each row becomes a card and the column labels move into the cells via data-label — which is why they are written as attributes rather than only in . / @media (max-width: 47.99em) { .apb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .apb-table tbody tr { display: block; margin-bottom: 0.75rem; padding: 0.75rem 0.9rem; border: 1px solid var(--mantine-color-gray-2, #DEDDE3); border-radius: 8px; } .apb-table tbody th, .apb-table tbody td { display: block; padding: 0.15rem 0; } .apb-table tbody td::before { content: attr(data-label) " : "; font-weight: 600; color: var(--mantine-color-gray-7, #5C5C62); } } / ─── 4. Spec blocks (INFORMATIONS / INFORMATION, and the /tarifs fare specs) ─ These sections are label/value pairs — FRÉQUENCES, DURÉE DU TRAJET, HORAIRES, TICKETS, PRIX, ADRESSE, CONNEXIONS — which the migration flattened into LABEL: value paragraphs with no visual difference between a label and the sentence it introduces. The patch promotes each label to an

; this styles it as a heading with its content directly beneath. A two-column layout (labels left, values right) was tried here first and rejected: several values run to a paragraph plus a list, which left the label column empty for whole rows, and the heading stopped reading as part of the text it introduced. The classic stacked shape keeps the pair together and degrades to the same thing at every width. / .apb-info { max-width: 78ch; } .apb-info > h2 { margin: 0 0 1.5rem; } / No text-transform: the INFORMATIONS labels are already capitals in the source, and /tarifs reuses this block with sentence-case headings that must stay so. / .apb-info > h3 { color: var(--mantine-color-brand-7, #000066); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 0.5rem; padding-top: 1.5rem; margin-top: 1.75rem; border-top: 1px solid var(--mantine-color-gray-2, #DEDDE3); } / The first pair needs no rule above it — the

already separates it. / .apb-info > h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .apb-info > ul, .apb-info > ol { margin-top: 0; } / Trailing advisories that are not part of the label/value list. / .apb-note { max-width: 1040px; margin-top: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--mantine-color-brand-7, #000066); background: var(--mantine-color-gray-0, #F8F8F8); border-radius: 0 8px 8px 0; } .apb-note p { margin: 0 0 0.5rem; line-height: 1.6; } .apb-note > :last-child { margin-bottom: 0; } / ─── 5. Figures ──────────────────────────────────────────────────────────── Hand-written inside an HtmlBlock, used wherever a Media node would be laid out wider than the 640px file OptimizedImage insists on requesting. The wrapper also carries .payload-richtext, which brings type styles this block has no text to use — hence the margin reset. / .apb-figure { width: 100%; margin-inline: auto; } .apb-figure > img { margin: 0 auto; border-radius: 12px; } / Each cap is the image's own native width, or the boxed column (1296px at 1360px+), whichever is smaller — past its native width the file is being upscaled again, which is the bug this whole path exists to avoid. / .apb-figure--full { max-width: 1296px; } .apb-figure--banner { max-width: 1200px; } .apb-figure--wide { max-width: 1040px; } / 9579's native width. It is the smallest asset on the tenant and the only one where the cap is the image rather than the column — laid out any wider it is upscaled, and no srcSet helps because no larger file exists. / .apb-figure--inline { max-width: 512px; } / The line map is 1080x1080 line art with small station labels; anything wider than its native width is upscaling, which is what made it soft. / .apb-figure--map { max-width: 1080px; } .apb-figure--map > img { border-radius: 0; } / On a phone the map gets 263px of column, at which its station names render about 3px tall — invisible, not merely small. Nothing about the artwork is fixable by scaling: the labels only become legible somewhere around 700px, which no phone has. So below that it stops shrinking to fit and pans instead. min-width is a different property from the width:100% in the img's inline style, so it wins without !important. It also self-disables: the used width is max(column, 700px), and any column at or above 700px renders identically — no scroll box, no scrollbar. The breakpoint is where the column reaches 700px: 700 + 112px of gutter and card padding. / @media (max-width: 50.74em) { .apb-figure--map { overflow-x: auto; overscroll-behavior-x: contain; } .apb-figure--map > img { min-width: 700px; } } / Caption/copy that belongs under its figure rather than beside it. / .apb-figure-text { max-width: 1040px; margin-inline: auto; } .apb-figure-text > :last-child { margin-bottom: 0; } / ─── 6. Line cards ───────────────────────────────────────────────────────── These replace the two TravelCard nodes. Overriding TravelCard's inline aspect-ratio in CSS looked like the cheap fix and was actively worse: OptimizedImage also runs pickCoverSource(media, boxAspect), and with TravelCard's hard-coded aspectRatio="1/1" that resolves to Payload's square 500x500 centre crop — so the card would have been fed a pre-cropped 500px file, stretched into a 616x406 box and re-cropped by the CSS, losing both the sides of the photo and half the resolution. Hand-built, the image is an in an HtmlBlock with the landscape variants on its srcSet, and the ratio is set here so it can differ per breakpoint: 325x214 desktop, 400x214 mobile — ratios, not pixel widths, because the card width comes from the grid (616px at 1440px) and a literal 325px image inside it, or a 400px one on a 375px phone, would both look broken. / .apb-linecard { height: 100%; } .apb-card-img > img { width: 100% !important; height: auto !important; aspect-ratio: 400 / 214; object-fit: cover; border-radius: var(--mantine-radius-md, 8px); } @media (min-width: 48em) { .apb-card-img > img { aspect-ratio: 325 / 214; } } .apb-card-body h3 { margin: 0 0 0.5rem; } .apb-card-body p { margin: 0 0 0.75rem; line-height: 1.6; color: var(--mantine-color-gray-8, #3F3E49); } .apb-card-body > :last-child { margin-bottom: 0; } / The TravelCard link was brand-coloured text plus a chevron, not a filled button; "subtle" is the nearest Mantine variant, stripped of its inset. / .apb-card-cta { align-self: flex-start; margin-top: auto; } .apb-card-cta .mantine-Button-root { padding-inline: 0 !important; } .apb-card-cta .mantine-Button-label::after { content: " ›"; font-size: 1.25em; line-height: 1; } / ─── 7. FAQ ──────────────────────────────────────────────────────────────── Outer accordion = theme, inner accordion = question. Mantine keeps open-state per instance, so the two levels do not interfere. Accordion/index.tsx draws a 1px gray-2 border on every item regardless of variant; the inner level drops its side borders so the nesting reads as indentation rather than as a second set of cards. / / Capped for reading: the boxed column is 1360px, which is far too long a line for an answer paragraph. The questions still scan at any width. / .apb-faq { width: 100%; max-width: 1040px; margin-inline: auto; } .apb-faq .mantine-Accordion-panel .mantine-Accordion-item { border-right: 0 !important; border-top: 0 !important; } .apb-faq .mantine-Accordion-panel .mantine-Accordion-item:last-of-type { border-bottom: 0 !important; } .apb-faq .mantine-Accordion-panel .mantine-Accordion-label { font-size: 1rem; font-weight: 600; } / Indent the question level so it reads as nested under its theme, and give the answer the same left edge as the question it belongs to. Both selectors are depth-specific on purpose. An earlier version zeroed "padding-inline" on .mantine-Accordion-panel .mantine-Accordion-content, which also matches the outer content (it is inside the outer panel too) — so it removed Mantine's own 16px theme inset as well, and every question and answer ended up flush against the card border. ".panel .panel .content" can only be the inner one, because the inner content has two panels above it. / .apb-faq .mantine-Accordion-panel .mantine-Accordion-control { padding-inline: 16px !important; } .apb-faq .mantine-Accordion-panel .mantine-Accordion-panel .mantine-Accordion-content { padding-inline: 16px !important; } / A hairline down the nested list, so the indent reads as structure. / .apb-faq .mantine-Accordion-panel .mantine-Accordion-item { border-left: 2px solid var(--mantine-color-gray-1, #EEEEF0) !important; } .apb-faq .payload-richtext p { margin: 0 0 0.75rem; line-height: 1.6; } .apb-faq .payload-richtext > :last-child { margin-bottom: 0; } .apb-faq .payload-richtext ul { margin: 0.25rem 0 0.75rem; padding-left: 1.25rem; } .apb-faq .payload-richtext li { margin-bottom: 0.35rem; } .apb-faq .payload-richtext a { text-decoration: underline; text-underline-offset: 2px; } / ─── 8. Call to action under a figure ────────────────────────────────────── InfoBlock lays out icon-left via .infoBlocklayout (flex-direction: row) and puts the author's classes on that same element. Used where the button moved from beside the image to under it. / .infoBlocklayout.apb-cta { flex-direction: column; align-items: center; text-align: center; width: 100%; } .apb-cta .infoBlockdescription { max-width: 74ch; } / The rule above is not enough on its own, and it looks as though it should be. .infoBlocklayout has exactly one child — .infoBlockcontentWrap, a full-width block — so "align-items: center" has nothing to act on, and the element that actually lays the link out is the Mantine Stack inside that wrapper, which defaults to align-items: flex-start. Centring has to reach that Stack. Specificity (0,3,0) beats Mantine's own single class, so no !important is needed. / .apb-cta .infoBlockcontentWrap > .mantine-Stack-root { align-items: center; } / ─── 9. Section rhythm ───────────────────────────────────────────────────── The migrated Grids carry margin:20px auto, which is too tight once sections stop being uniform slabs. / .apb-sec { padding-block: 2.5rem; } @media (min-width: 62em) { .apb-sec { padding-block: 3.5rem; } } .apb-sec--tight { padding-block: 1.5rem; } / <<< apb-core */ @media (min-width: 768px) { .search-min-mobile { min-width: 375px; } }

हमारे मार्गों का नक्शा