bullets (the list-style reset lived in the unavailable common.css) — kill
them at every width, desktop and the mobile collapsed/expanded bar alike. */
#localnav .ln-menu-list { list-style: none; }
#localnav .ln-menu-item { list-style: none; }
#localnav .ln-menu-item::marker { content: none; }
/* #localnav DESKTOP layout for EN: the scraped bar reserves 80–160px side gutters for the
live site's fixed logo (we have none) and lets .ln-title flex-grow, which on the wider EN
labels pushes the menu+CTA onto a clipped second line. Drop the grow, trim the gutters,
tighten the links, keep everything on one centred no-wrap line.
Gated on html:not(.localnav-collapse): on mobile the page toggles `.localnav-collapse`
on , and the scraped collapse rules take over (title+chevron+CTA row, section links
on a 2nd horizontal-scroll row when the chevron is tapped). Without this gate, nowrap +
the inline menu fight the collapse layout and the expanded links overlap the CTA. */
html:not(.localnav-collapse) #localnav .ln-content { flex-wrap: nowrap; }
html:not(.localnav-collapse) #localnav .ln-title { flex-grow: 0; padding-left: 22px; white-space: nowrap; }
html:not(.localnav-collapse) #localnav .ln-menu { flex: 1 1 auto; min-width: 0; justify-content: center; overflow-x: auto; }
html:not(.localnav-collapse) #localnav .ln-menu::-webkit-scrollbar { display: none; }
html:not(.localnav-collapse) #localnav .ln-menu-list { width: auto; }
html:not(.localnav-collapse) #localnav .ln-link { padding: 0 10px; font-size: 12.5px; }
html:not(.localnav-collapse) #localnav .ln-action { margin-left: 10px; padding-right: 22px; }
/* s800 (#s800) — page is black in CN (our wrapper already renders #000); headlines white over
dark, tabnav fits, config CTA hidden — only the hero needed an EN wordmark (was zunjie-s800.svg). */
#s800 .section-hero .hero-wordmark { display: block; width: 30vw; height: auto; margin: 0 auto; }
/* s800 intro slogan ("A Masterpiece for the Era"): the flex .slogan-container centres the box,
but the CN CSS leaves the slogan text-align:start. On one line (desktop) it fills the box so it
looks centred; on mobile/portrait the longer EN wraps to 2 lines and the left-aligned lines
read off-centre. Centre the text (and drop the scraped ~5px left margin) so it centres on every
viewport. */
#s800 .slogan-container .slogan { text-align: center; margin-left: 0; }
/* s800 body copy: the CN template peppers .intro, .stack-item and .slide-copy paragraphs with mobile-only
breaks tuned for short CJK text. On phones the longer EN wraps naturally AND
takes these forced breaks, splitting phrases mid-line ("170 Processes / Crafted", "ultra-wide
front / visibility", etc.) into ragged copy. Hide them page-wide so EN prose wraps naturally.
Scoped to body-copy classes only — heading breaks (.gradient-headline / .slide-title) are left
intact, and the desktop
variants are untouched. CSS-only: these brs are
load-bearing for i18n-apply's tag anchoring, so they can't be deleted from the snapshot. */
#s800 .intro br.xs,
#s800 .stack-item br.xs,
#s800 .slide-copy br.xs { display: none; }
/* s9t (#x4w) — CN page is uniform light grey (#f6f6f8); footnote section dark. All section
headings are white over full-bleed images (our default white text already matches), so only
the page bg + the hero wordmark needed fixing. */
#x4w { background: #f6f6f8; }
#x4w .section-hero .hero-title .hero-wordmark { display: block; width: 26vw; height: auto; margin: 0 auto 1vw; }
/* s9 (#x4a) — scraped already sets the wrapper white (#FFF) and headlines near-black, but the
wrapper has no base text colour so inheriting body text fell back to white (invisible on
white). Restore a dark base; over-image text keeps its explicit white. Hero wordmark added. */
#x4a { color: #1d1d1f; }
#x4a .section-hero .hero-title .hero-wordmark { display: block; width: 26vw; height: auto; margin: 0 auto 1vw; }
/* h5 (#h5) — CN page is white-bodied (one dark section: section-space); base text grey #8E8E8E
from scraped. Flip wrapper white; headlines near-black on the white text-blocks (driving,
safety), white over the image/dark sections (hero, design, highlights, space). Hero wordmark. */
#h5 { background: #fff; }
#h5 .headline { color: #18191a; }
#h5 .section-hero .headline,
#h5 .section-design .headline,
#h5 .section-highlights .headline,
#h5 .section-space .headline { color: #fff; }
#h5 .section-hero .kv-title .hero-wordmark { display: block; width: 26vw; height: auto; margin: 0 auto 1vw; }
/* z7 (#shb) — newer template like m9: wrapper already white with grey base text and black
sections from scraped; tabnav is the swipeable line-x track (leave alone). Two fixes:
the .section-start .start-headline uses width:max-content (tuned for short CN slogans) and
sits off-centre with longer EN text; and the hero needed an EN wordmark. */
#shb .section-start .start-headline { width: auto; max-width: 100%; justify-items: center; opacity: 1 !important; transform: none !important; }
/* z7 hero: left-align the logo + slogan (matches CN top-left layout). */
#shb .section-hero .hero-content { align-items: flex-start; text-align: left; }
#shb .section-hero .hero-wordmark { display: block; width: 19vw; height: auto; margin: 0; }
#shb .section-hero .hero-slogn { text-align: left; margin-left: 0; }
/* z7 nowrap spans: the CN template wraps short CJK clauses in .nowrap to keep them on one
line. Every one on this page now holds a multi-word EN phrase (e.g. "Sit Back and Enjoy
Comfort", "steady all the way."), so forcing no-wrap only risks overflow on narrow viewports
with zero benefit. None wrap a number+unit or indivisible token. Let them wrap naturally. */
#shb .nowrap { white-space: normal; }
/* ══ s9 (#x4a) — manual-QA corrections ══════════════════════════════════════════ */
/* Hero foot disclaimer: EN text (replaces CN xiangjie-s9-key-vision-foot.svg). */
#x4a .section-hero .hero-notes { text-align: center; }
#x4a .section-hero .hero-notes p { font-size: 0.6vw; line-height: 1.5; color: rgba(255,255,255,0.62); max-width: 62vw; margin: 0 auto; }
/* "The Galaxy Unfolds, A Glittering Vista" — long EN heading overran its narrow panel and
clipped; let it wrap and trim a touch so it fits the div. */
#x4a .h3.h3-40 { white-space: normal !important; width: auto !important; max-width: 100% !important; font-size: 1.55vw; line-height: 1.2; }
/* the 1.55vw above is a desktop fix for a narrow panel; it collapses to ~6px on phones, so
restore readable heading sizes on tablet/phone (CN used ~4.5vw at these breakpoints). */
@media (max-aspect-ratio: 11/10) { #x4a .h3.h3-40 { font-size: 4.5vw !important; } }
@media (max-aspect-ratio: 7/10) { #x4a .h3.h3-40 { font-size: 6.8vw !important; } }
/* HUAWEI SOUND body copy: ~2px smaller + tighter line-height per QA. */
#x4a .section-comfortable .text-content p { font-size: 0.86vw; line-height: 1.45; }
/* tabnav rail top padding per QA. */
#x4a .tabnav-content { padding-top: 4.166vw; }
/* ══ s9t (#x4w) — manual-QA corrections ══════════════════════════════════════════ */
/* The wrapper set bg #f6f6f8 but no base text colour, so section headings inherited white
and vanished on the light page. Restore a dark base (over-image captions keep explicit
white) — fixes "Obsidian Presence", "Versatile Space", etc. all at once. */
#x4w { color: #1d1d1f; }
/* Hero KSP line: centre it under the wordmark (was left), and let it wrap (the scraped
white-space:nowrap forced one long line). */
#x4a .section-hero .hero-desc,
#x4w .section-hero .hero-desc { text-align: center; margin-left: auto; margin-right: auto; white-space: normal; }
/* Config variant pills: the .title pill was too narrow for the long EN variant names
("Stelato S9T Extended-Range Max") and clipped — hug the text + trim font. */
#x4w .section-configuration .text-content .title { width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; padding: 0.25em 0.9em; }
#x4w .section-configuration .text-content .title p { position: static; transform: none; width: auto; font-size: 0.8vw; white-space: nowrap; }
/* 0.8vw above is desktop-only; on mobile the pill label was ~5px. Bump to a readable size and
let the long EN labels wrap inside the pill instead of overflowing/colliding between columns. */
@media (max-aspect-ratio: 11/10) {
#x4w .section-configuration .text-content .title p { font-size: 2.4vw; white-space: normal; text-align: center; }
/* auto height so the white pill wraps the full 2-line label (CN gives it a fixed height that
clipped the wrap), plus a gap so it doesn't collide with the range below. */
#x4w .section-configuration .text-content .title { max-width: 44vw; height: auto !important; margin-bottom: 3vw; padding: 1.2vw 2vw; }
}
@media (max-aspect-ratio: 7/10) { #x4w .section-configuration .text-content .title p { font-size: 3vw; } }
/* Audio stat row (Image #46): the big EN numbers (≈3.3vw) made the row span edge-to-edge and
feel cramped. Trim the value (2nd in each item) so the row breathes. DESKTOP ONLY — on
mobile this shrank the value NUMBER below its unit; let the CN mobile sizes apply there. */
@media (min-aspect-ratio: 11/10) {
#x4w .section-comfortable .desc > div > p:last-child { font-size: 2.6vw; }
}
/* Performance stat row (Image #47): same big-number trim (the value is the ). */
#x4w .section-drive .right p span { font-size: 2.6vw !important; }
/* the 2.6vw above is a desktop trim; with no mobile override it shrank the stat NUMBERS to
~10px on phones — smaller than their units. Restore the CN mobile number scale. */
@media (max-aspect-ratio: 11/10) {
#x4w .section-drive .right p span,
#x4w .section-drive-2 .desc .right p span { font-size: 4vw !important; }
}
@media (max-aspect-ratio: 7/10) {
#x4w .section-drive .right p span,
#x4w .section-drive-2 .desc .right p span { font-size: 8.888889vw !important; }
}
/* Performance stat row: right-align the three stat blocks on desktop (CN source sets no
text-align; mobile overrides to left — guard here so we don't fight those rules). */
@media (min-aspect-ratio: 11/10) {
#x4w .section-drive-2 .desc .right-1,
#x4w .section-drive-2 .desc .right-2,
#x4w .section-drive-2 .desc .right-3 { text-align: right; }
}
/* S9 chassis stat row (Image #1): same right-align fix as S9T above, plus the CN source's
3.33vw divider margin was tuned for short CN labels — with the longer EN paragraph on the
left crowding the first stat, tighten the dividers so the three stats cluster together. */
@media (min-aspect-ratio: 11/10) {
#x4a .section-drive-2 .desc .right-1,
#x4a .section-drive-2 .desc .right-2,
#x4a .section-drive-2 .desc .right-3 { text-align: right; }
#x4a .section-drive-2 .desc .right .line { margin: 0.208333vw 1.666667vw 0; }
}
/* Hero tagline: 1em letter-spacing (tuned for short CN) wrapped the EN tagline to 3 awkward
lines — ease it so "Life is a journey, follow your heart" reads cleanly. */
#x4w .section-hero .hero-title-desc { letter-spacing: 0.14em; }
/* Audio stat row (Image #49): the full-width row overlapped the left speaker image — pad it
in evenly so the Subwoofer item clears the image. */
#x4w .section-comfortable-5 .desc { padding-left: 8vw; }
/* S9 audio stat row (Image #2): same overlap as S9T above — the row starts flush left and
"Subwoofer" sits under the leather-seat image edge. */
#x4a .section-comfortable-5 .desc { padding-left: 8vw; }
#x4a .section-comfortable-5 .desc .line { margin: 0 0.9vw; }
/* "The Galaxy Unfolds" taillight panel: CN's 12.5vw top/bottom padding was tuned for a
shorter CN paragraph — the longer EN copy leaves the box looking top-heavy with a lot of
dead space below. Tighten it. */
#x4a .section-appearance-new .content .right { padding: 8.5vw 4.375vw; }
/* Audio section intro copy: CN's 21.875vw width wrapped the longer EN "SUPERIOR sound
system..." intro paragraph awkwardly — widen slightly. */
#x4a .section-comfortable-5 .copy { width: 22.875vw; }
/* desktop 22.875vw above has no mobile override, leaving the copy ~89px wide on phones;
widen it for tablet/phone. */
@media (max-aspect-ratio: 11/10) { #x4a .section-comfortable-5 .copy { width: 72.875vw; } }
/* tabnav-swiper-1 content panel: CN's 8.33vw vertical padding was tuned for short CJK tab
labels — the longer EN labels made the panel too tall. Tighten. */
#x4a .tabnav-swiper-1 .tabnav-content { padding: 3.333333vw 4.166667vw; }
/* section-safety-3 heading: CN's 3.125vw margin-top left too big a gap above the wrapped
(longer) EN heading text. Tighten. */
#x4a .section-safety-3 .h3 { font-size: 1.354167vw; margin-top: 0.125vw; }
/* the 1.354vw above is desktop-only; on phones it collapsed the heading to ~5px (smaller than
its own description). Restore the CN mobile heading scale so it reads as a heading. */
@media (max-aspect-ratio: 11/10) { #x4a .section-safety-3 .h3 { font-size: 2.285714vw; margin-top: 3vw; } }
@media (max-aspect-ratio: 7/10) { #x4a .section-safety-3 .h3 { font-size: 5.555556vw; margin-top: 6vw; } }
/* Safety gallery (Image #50): the content panel (heading + tabnav items) sat right against
the image edge — add left padding so the text clears it. */
#x4w .section-safety-1 .tabnav-content { padding-left: 2.5vw; }
/* s9t section-comfortable-1 .title: drop the fixed 36.5vw width (let it size to content). */
#x4w .section-comfortable-1 .content .title { width: auto; }
/* section-comfortable-2 gallery labels: CN used white-space:nowrap (short CJK labels fit
within the 19.375vw slide). EN labels ("Storage Compartment Behind Center Screen") overflow
and get clipped by overflow:hidden on the slide. Allow wrapping and pin both edges so the
text box stays within the slide at any width. */
#x4w .section-comfortable-2 .text-content { white-space: normal; }
#x4w .section-comfortable-2 .gallery-slide .text-content { right: 1.666667vw; }
@media (max-aspect-ratio: 7/10) {
#x4w .section-comfortable-2 .gallery-slide .text-content { right: auto; max-width: 70vw; }
}
/* Stat odometers (Length/Width/… counters): the count-up digit columns leave faint
adjacent-digit slivers above the number on our static build (no live count-up JS to settle
them). Show the final data-value statically and hide the rolling columns — clean everywhere. */
.stat-value[data-value]::before { content: attr(data-value); }
.stat-value[data-value] > .stat-number { display: none !important; }
/* Decimal stats (e.g. Drag Coefficient) carry the "." in a separate .stat-value-point span the
odometer JS would position mid-number. Statically that span floated to the end → "0239.".
Hide it and fold the decimal into data-value (e.g. "0.239") so ::before renders it correctly. */
.stat-value[data-value] > .stat-value-point { display: none !important; }
/* m6 Intelligent-Driving tab-nav: the 5 long EN labels overflow the centred nowrap row (clipped
both ends). Shrink type + gaps, left-align, and let the rail scroll so every tab is reachable. */
#m6 .tabnav-item { font-size: 0.85vw; }
#m6 .tabnav-item + .tabnav-item { margin-left: 1.6vw; }
#m6 .tabnav-container { overflow-x: auto; overflow-y: hidden; }
#m6 .tabnav-container::-webkit-scrollbar { display: none; }
#m6 .tabnav-list { justify-content: flex-start; width: -moz-max-content; width: max-content; min-width: 100%; }
/* Audio stat dividers: the 2vw side-margins spread the columns too far — tighten. */
#x4w .section-comfortable-5 .desc .line { margin: 0 0.9vw; }
/* Black HIMA button variants (e.g. Maextro hub "Reserve Now" btn-outline-black). The section-2
fix only covered the white variants, so the black ones kept the scraped fixed-width SVG mask
(sized for short CJK) and only snapped to the correct content-fit size on hover. Mirror the
content-fitting hexagon with a dark stroke/fill. */
.hima-btn.btn-solid-black,
.hima-btn.btn-outline-black {
width: auto; min-width: 0; height: auto;
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 32px; font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease;
}
.hima-btn.btn-solid-black::before, .hima-btn.btn-solid-black::after,
.hima-btn.btn-outline-black::before, .hima-btn.btn-outline-black::after { display: none !important; }
.hima-btn.btn-solid-black {
background: #1d1d1f !important; color: #fff !important;
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
.hima-btn.btn-solid-black:hover { background: rgba(29,29,31,0.82) !important; }
.hima-btn.btn-outline-black {
background-color: transparent !important; color: #1d1d1f !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='none' stroke='%231d1d1f' stroke-opacity='0.65' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important; background-repeat: no-repeat !important;
}
.hima-btn.btn-outline-black:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='%231d1d1f' fill-opacity='0.08' stroke='%231d1d1f' stroke-opacity='0.9' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
}
/* s800 picture-buttons (.picture-button-container.button-normal/.button-wide — "Discover
Zero-Gravity Seats", "Storage with Elegance", "Detailed Specifications", etc.): the hexagon is
a fixed-size PNG/width (~10.2vw or ~14vw, sized for short CN), so longer EN labels overflow.
.button-content is absolutely positioned with a nowrap .button-copy, so the overflow isn't
clipped by the container — it spills past the visible border, and .button-arrow (laid out
after the text in the same flex row) ends up rendered outside the button entirely, floating
next to it instead of inside it. Applies to both the modal-trigger variant (.modal-open-button)
and plain link-button variant (e.g. the "Detailed Specifications" .pdp-cta), since both share
the identical fixed-width/absolute-content structure. Hide the PNG layers and recreate the
gold hexagon outline as a content-fitting SVG stroke (matches the #fcecd5 label tone). */
#s800 .picture-button-container.button-normal,
#s800 .picture-button-container.button-wide {
width: -moz-fit-content; width: fit-content !important;
height: auto !important;
padding: 11px 32px;
display: inline-flex; align-items: center; justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='none' stroke='%23fcecd5' stroke-opacity='0.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important; background-repeat: no-repeat !important;
}
#s800 .picture-button-container.button-normal .button-border,
#s800 .picture-button-container.button-wide .button-border,
#s800 .picture-button-container.button-normal .button-picture,
#s800 .picture-button-container.button-wide .button-picture,
#s800 .picture-button-container.button-normal .button-xs,
#s800 .picture-button-container.button-wide .button-xs { display: none !important; }
#s800 .picture-button-container.button-normal .button-content,
#s800 .picture-button-container.button-wide .button-content { position: static !important; display: inline-flex; align-items: center; gap: 0.5em; }
/* s800 safety-4 carousel captions (LiDAR, Collision Avoidance, Angel Seat, etc.): the CN
captions were short enough to sit at full slide width; the longer EN translations run the
full width of the carousel and collide with the absolutely-positioned arrownav buttons on the
right (arrownav-list is 5.42vw wide, pinned to right:0). Symmetric width+margin:auto still let
the wrapped line's right edge touch the arrows at some viewport widths (90% wasn't enough
clearance and wasted matching space on the left, where there's no button to clear). Reserve
the space with padding-right instead, sized past the arrow footprint — this also nudges the
centered text slightly left of true-center, away from the controls, rather than centering
blind to them. */
#s800 .subsection-safety-4 .slide-copy { padding-right: 8vw; box-sizing: border-box; }
/* s800 CLTC range row: 6 EN trim names are far longer than the CN originals and, kept on one
nowrap line each (scraped `.stat-list{white-space:nowrap}`), the row overflows the viewport
and clips at both edges. Fix (desktop only): let captions WRAP with a capped width, reserve a
fixed caption height so the big km values stay on one baseline, and tighten the dividers so
all six columns fit one centred row. Only .list-style-1 in the config section (the CLTC row). */
#s800 .section-configuration .stat-caption { font-size: 0.8vw; }
@media (min-aspect-ratio: 11/10) {
#s800 .section-configuration .stat-list.list-style-1 { align-items: flex-start; }
#s800 .section-configuration .stat-list.list-style-1 .stat-caption {
white-space: normal;
max-width: 9.5vw;
min-height: 2.6vw;
line-height: 1.3;
}
#s800 .section-configuration .stat-list.list-style-1 .stat-line {
margin-left: 1vw;
margin-right: 1vw;
}
}
/* s800 modal detail cards (slide-style-1 — "Cosmos Orbit Sound Mesh", "Star Ring Scattering
Body", etc.): text column is whatever remains after the fixed-width video pane; longer EN
copy can run flush against the modal edge. Pull in 10% for breathing room.
s800-grand-design (#x6sh) shares the identical layout proportions — same fix. */
#s800 .modal-swiper .slide-style-1 .slide-content .slide-intro,
#x6sh .modal-swiper .slide-style-1 .slide-content .slide-intro { width: 90%; }
/* s800-grand-design (#x6sh) intro poem (.section-introduction .text-item): the CN sizes this at
3.33vw in a 50vw column — tuned for three short CJK lines. The longer EN sentences render at
~55px in an 830px column on desktop, wrapping into a huge, narrow ~10-line block. Shrink the
font (clamped so pad stays legible) and widen the column so it reads as an elegant centered
intro. Desktop/pad only — mobile keeps its own 6.7vw / full-width sizing. */
@media (min-width: 768px) {
#x6sh .section-introduction .h3 { width: 64vw !important; max-width: 64vw !important; }
#x6sh .section-introduction .text-item {
font-size: clamp(22px, 1.9vw, 36px) !important;
line-height: 1.5 !important;
}
/* s800-grand-design colour-name captions run vertically (CN vertical-lr) on desktop. Add a
little letter-spacing so the vertical Latin glyphs breathe instead of stacking tightly.
Desktop only — mobile lays these out horizontally (with a comma separator), untouched. */
#x6sh .section-color .color-desc-list span { letter-spacing: 0.1em; }
}
/* s800-grand-design appearance slider (#x6sh .section-appearance): the caption sits absolute
between the media (bottom ~417) and the section's overflow:hidden clip (~507) — a ~90px zone.
The 4-line EN caption (~100px) doesn't fit: bottom-anchored, its top line tucks under the image;
nudging it down instead clips the bottom. Fix by making the caption *shorter* — widen the
column so it wraps to 3 lines and drop the font a touch, so it fits the zone with clearance top
and bottom. Scoped to landscape aspect; portrait/mobile stacks the caption below the image
normally and is untouched. */
@media (min-aspect-ratio: 11/10) {
#x6sh .section-appearance .stack-list { width: 63vw; max-width: 63vw; }
#x6sh .section-appearance .stack-item { font-size: 14px; line-height: 1.45; }
}
/* s800-grand-design tuling tabnav (#x6sh .section-tuling): 7 long EN tab labels in a nowrap flex
row overflow the viewport (2215px wide) and get cut at both edges. Let each label wrap to two
lines within a max-width and shrink the font a touch so all seven fit the row. Landscape-scoped;
mobile has its own tabnav sizing. */
@media (min-aspect-ratio: 11/10) {
#x6sh .section-tuling .tabnav-list { max-width: 98vw; column-gap: 1vw; align-items: flex-start; }
#x6sh .section-tuling .tabnav-item {
white-space: normal !important;
max-width: 13vw;
font-size: 0.9vw !important;
line-height: 1.3;
text-align: center;
}
}
/* s800-grand-design (#x6sh) mobile fixes. */
@media (max-width: 767.9px) {
/* Header title "Maextro S800 Grand Design Signature Collection" is nowrap and overlaps the
Book Test Drive button. Cap its width and ellipsis-truncate so it clears the CTA. */
#x6sh #localnav .ln-link { max-width: 54vw; overflow: hidden; text-overflow: ellipsis; }
/* Colour-name captions: the CN lays the two phrases + comma out as a rigid flex row, which on
mobile splits the longer EN into two cramped edge-to-edge columns. Flow them as one centred,
padded, comma-separated block. */
#x6sh .section-color .color-desc-item { display: block !important; text-align: center; padding: 0 16px; }
#x6sh .section-color .color-desc-item span { display: inline !important; }
/* Section banner headings: .h2 base is width:max-content (one-line, sized for short CJK), so the
longer EN titles ("With Gold as the Vein...", "Meticulously Carved Within...", etc.) overflow
the viewport and get clipped by the section's overflow:hidden. Let every h2 wrap; centre and
pad the animated banner titles so they sit tidily. */
#x6sh .h2 { width: auto !important; max-width: 100%; white-space: normal; }
#x6sh .h2.text-move { text-align: center; padding: 0 16px; box-sizing: border-box; }
}
/* z7 picture-buttons (.modal-button — "Diamond Crystal Cluster Taillights", "Urban Stream
Headlights", etc.): fixed-size SVG hexagon bg (~142px) clips the longer EN labels (~169px).
Hide the fixed hexagon and recreate a content-fitting outline (light stroke over the dark KV). */
#shb .modal-button {
width: -moz-fit-content; width: fit-content !important;
height: auto !important;
padding: 10px 30px;
display: inline-flex; align-items: center; justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important; background-repeat: no-repeat !important;
}
#shb .modal-button .button-background { display: none !important; }
#shb .modal-button .button-content { position: static !important; display: inline-flex; align-items: center; gap: 0.5em; }
/* M7 headings: upstream CJK size (8.888889vw) renders too large for EN strings on phone. */
@media (max-aspect-ratio: 7/10) {
#m7 .section-common h3 { font-size: 7vw; }
#m7 h2.headline { font-size: 7.5vw; }
}
/* M7 + M8 dimension stats: static digit-column positions set in HTML (transforms on each
.stat-number); overflow unlocked so scraped height:1em clip doesn't hide the digits.
Fade-in stagger fires when IntersectionObserver adds .animated to .stat-list. */
#m7 .subsection-design-2 .stat-number,
#m8 .subsection-design-2 .stat-number { width: 1ch; }
#m7 .subsection-design-2 .stat-value .stat-value-point,
#m8 .subsection-design-2 .stat-value .stat-value-point { flex-shrink: 0; }
#m7 .subsection-design-2 .stat-value,
#m8 .subsection-design-2 .stat-value { height: auto !important; overflow: visible !important; }
#m7 .subsection-design-2 .stat-item,
#m8 .subsection-design-2 .stat-item { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
#m7 .subsection-design-2 .stat-list.animated .stat-item,
#m8 .subsection-design-2 .stat-list.animated .stat-item { opacity: 1; transform: none; }
#m7 .subsection-design-2 .stat-list.animated .stat-item-2,
#m8 .subsection-design-2 .stat-list.animated .stat-item-2 { transition-delay: 0.1s; }
#m7 .subsection-design-2 .stat-list.animated .stat-item-3,
#m8 .subsection-design-2 .stat-list.animated .stat-item-3 { transition-delay: 0.2s; }
#m7 .subsection-design-2 .stat-list.animated .stat-item-4,
#m8 .subsection-design-2 .stat-list.animated .stat-item-4 { transition-delay: 0.3s; }
#m7 .subsection-design-2 .stat-list.animated .stat-item-5,
#m8 .subsection-design-2 .stat-list.animated .stat-item-5 { transition-delay: 0.4s; }
/* M5 colour-showcase sticky section: GSAP drives the clip-path wipe (design-1 clips upward
to reveal design-2). Let it run on mobile too — don't cancel sticky or clip-path.
Upstream hardcodes 1026px widths; force full-viewport layout on mobile.
Hide desktop-only bg spacers (.is-pc) everywhere. */
#m5-new .is-pc { display: none !important; }
@media (max-aspect-ratio: 7/10) {
#m5-new .sticky-content,
#m5-new .sticky-content .wrapper,
#m5-new .design-wrapper { width: 100% !important; }
/* Anchor height to viewport so both designs fill the screen */
#m5-new .sticky-content { height: 100svh !important; }
/* wrapper must also carry the height so design-wrapper/design-1 can inherit 100% */
#m5-new .sticky-content .wrapper { height: 100% !important; }
#m5-new .design-wrapper { height: 100% !important; }
/* design-1 fills container (z-index: 2 keeps it above design-2) */
#m5-new .design-1 { position: relative !important; width: 100% !important; height: 100% !important; z-index: 2; }
/* design-2 sits behind design-1, revealed as GSAP clips design-1 upward */
#m5-new .design-2 { position: absolute !important; inset: 0 !important; z-index: 1; }
/* Images fill their container */
#m5-new .design-picture { position: absolute !important; inset: 0 !important; display: block !important; }
#m5-new .design-picture img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Describe text overlays the image at the bottom with proper side padding */
#m5-new .design-describe { position: absolute !important; bottom: 80px !important; left: 0 !important; right: 0 !important; padding: 0 24px !important; z-index: 3; }
}
/* ════════════════════════════════════════════════════════════════════════════
* product-feature-banner (.tabnav-swiper) — GENERIC mobile fix (all 13 models)
*
* Desktop: each model's own vw-based font sizes keep the row centred and fitted.
* Mobile (portrait): those vw values collapse to ~3px; the centred flex overflows
* symmetrically so both ends are unreachable even with overflow:auto. Fix chain:
* 1. Readable font size + left-aligned row (starts from left, scrolls right).
* 2. Make .tabnav-container the scroll surface (the scraped .tabnav-wrapper uses
* a negative-margin/transform trick that escapes the parent's overflow context,
* so scrollWidth on the parent stays equal to its offsetWidth = unscrollable).
* 3. Strip transforms/margins from .tabnav-wrapper so it lays out normally inside
* the now-scrollable container.
* ════════════════════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio: 11/10) {
.product-feature-banner .tabnav-item { font-size: 14px !important; }
.product-feature-banner .tabnav-item + .tabnav-item { margin-left: 20px !important; }
.product-feature-banner .tabnav-content { overflow: visible !important; }
.product-feature-banner .tabnav-container {
overflow-x: auto !important;
overflow-y: hidden !important;
width: 100% !important;
}
.product-feature-banner .tabnav-container::-webkit-scrollbar { display: none; }
.product-feature-banner .tabnav-wrapper {
width: max-content !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
overflow: visible !important;
}
.product-feature-banner .tabnav-list {
justify-content: flex-start !important;
padding-left: 16px !important;
padding-right: 16px !important;
width: max-content !important;
}
/* Hide the left-edge gradient fade (::before on tabnav-content). On desktop it
signals "scroll left is available"; on mobile we always start at the beginning
so the gradient bleaches the first character of the first tab. */
.product-feature-banner .tabnav-content::before { display: none !important; }
}
/* M9 tabnavs with long EN labels — allow 2-line wrap. */
#f2n .subsection-space-04 .tabnav-item,
#f2n .subsection-safety-06 .tabnav-item { max-width: 220px; text-align: center; }
#f2n .subsection-space-04 .tabnav-label,
#f2n .subsection-safety-06 .tabnav-label { white-space: normal !important; line-height: 1.3; }
@media (max-aspect-ratio: 11/10) {
#f2n .subsection-safety-06 .tabnav-item { max-width: 260px; }
}
/* ════════════════════════════════════════════════════════════════════════════
* section-title .txt-80 — mobile font scale (V9 + any future page)
*
* txt-80 computes to ~43px at mobile breakpoints in the scraped CSS. That fits
* CJK titles ("巅峰气度") but EN equivalents ("Summit Grandeur") are ~16px wider
* than the 390px viewport. Clamp to 9.5vw so long EN titles shrink proportionally.
* ════════════════════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio: 11/10) {
.section-title .txt-80 { font-size: clamp(28px, 9.5vw, 43px) !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
* xs-gallery .text-content — left/right padding (V9, S9T)
*
* The xs-gallery (mobile-only image gallery) has no horizontal padding: text
* content starts at x≈1px, flush against the screen edge. Add 24px each side
* and let headlines reflow naturally (strip w-max-content on mobile).
* ════════════════════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio: 11/10) {
.xs-gallery .text-content {
padding-left: 24px !important;
padding-right: 24px !important;
}
.xs-gallery .text-content .headline {
width: auto !important;
max-width: 100% !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* Global: CN JS-animated visibility — make text visible without CN main.js
*
* CN model pages use IntersectionObserver (main.js) to add .animated when
* elements scroll into view, transitioning them from opacity:0/translateY(40px)
* to opacity:1/translate(0). Our scraped main.js either 404s or throws on our
* domain, so every .fadeup element and every .start-headline stays permanently
* invisible. Override the initial hidden state so content reads from first paint.
* faithful-en.css loads AFTER the scraped manifest CSS, so equal-specificity
* rules here win by source order — !important only where CN inline styles fight.
* ════════════════════════════════════════════════════════════════════════════ */
.fadeup,
.lg-fadeup,
.fadeup-02,
.fadeup-03,
.xs-fadeup,
.xs-fadeup-02 {
opacity: 1 !important;
transform: none !important;
}
.section-start .start-headline {
opacity: 1 !important;
transform: none !important;
}
/* M5 stack sections: CN CSS has .stack-item-active { opacity:1 } at line 736 but
.stack-item { opacity:0 } at line 874 — equal specificity (0,1,1,0), later rule wins,
so inactive opacity always defeats active opacity. CN JS uses [data-active='N'] selectors
(higher specificity) to work around this; we use a double-class selector instead. */
#m5-new .stack-item.stack-item-active {
opacity: 1 !important;
z-index: 1;
}
/* Z7 design-02: "More Colors" button has no .button-content wrapper — .button-copy is
position:absolute from CN CSS. The global .modal-button rule (inline-flex) needs an
in-flow child to size correctly; reset .button-copy to static flow. */
/* M7 swiper-style-1 intros (subsection design-3/space-3/space-6/safety-1). The prior override
was 2.5vw !important with no breakpoint — ~36px on desktop (huge, one word per line at zoom).
Split into readable desktop vs mobile sizes; keep wrapping. Covers all four swiper-style-1 blocks. */
#m7 .swiper-style-1 .stack-item .intro { white-space: normal !important; }
@media (min-aspect-ratio: 11/10) {
#m7 .swiper-style-1 .stack-item .intro { font-size: 0.95vw !important; }
}
@media (max-aspect-ratio: 11/10) {
#m7 .swiper-style-1 .stack-item .intro { font-size: 3.5vw !important; }
}
/* M8 swiper-style-2 mobile: content-wrapper uses space-between but arrownav touches the
pagination number with no gap. Add a minimum gap so buttons don't crowd the counter. */
@media (max-aspect-ratio: 11/10) {
#m8 .swiper-style-2 .content-wrapper {
gap: 12px !important;
}
}
/* M8 harmonyos-4 interior selector: CN vw font-size renders at ~3px — override to readable. */
#m8 .subsection-harmonyos-4 .tabnav-item {
font-size: 14px !important;
white-space: normal !important;
}
/* M8: several sections have light backgrounds but CN theme sets white text — override to dark. */
#m8 .subsection-driving-2 h2.headline,
#m8 .subsection-driving-2 h3.title,
#m8 .subsection-driving-3 h2.headline,
#m8 .subsection-driving-3 h3.title,
#m8 .subsection-turing-2 h2.headline,
#m8 .subsection-turing-3 h2.headline,
#m8 .subsection-harmonyos-2 h2.headline,
#m8 .subsection-harmonyos-3 h2.headline,
#m8 .subsection-harmonyos-4 h2.headline {
color: #1d1d1f !important;
}
#shb .subsection-design-02 .modal-button .button-copy {
position: static !important;
top: auto;
left: auto;
transform: none;
white-space: nowrap;
}
/* Stelato S9T (#x4w) "Detailed Specifications" pill in the configuration section: same fixed-
width/absolutely-centered-content bug as s800's picture-buttons — .button-normal is a fixed
10.2vw (sized for short CN), .button-content is centered via position:absolute + transform
with nowrap text, so the longer EN label overflows past the pill on both sides. Recreate the
filled white chevron-hexagon (modal-open-button-bg.svg: fill #fff, opacity 0.845) as a
content-fitting SVG background instead of the fixed-size image. */
#x4w .section-configuration .button-container .button-normal {
width: -moz-fit-content; width: fit-content !important;
height: auto !important;
padding: 11px 32px;
display: inline-flex; align-items: center; justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpolygon points='14,1 186,1 199,22 186,43 14,43 1,22' fill='%23ffffff' fill-opacity='0.845'/%3E%3C/svg%3E") !important;
background-size: 100% 100% !important; background-repeat: no-repeat !important;
}
#x4w .section-configuration .button-container .button-bg { display: none !important; }
#x4w .section-configuration .button-container .button-content {
position: static !important; top: auto; left: auto; transform: none;
display: inline-flex; align-items: center; gap: 0.5em;
}
/* Shangjie H5 hero (kv-title .headline): CN letter-spacing (2vw desktop, up to 5vw at some
mobile breakpoints) was tuned for a ~4-character CN headline; the longer EN translation
("All in One") fans that per-character spacing out across nearly the whole word and
overflows on narrow viewports. The hero .intro line (Huawei Qiankun Intelligent
Driving/HarmonyOS Cockpit/range spec) is explicitly white-space:nowrap at every
breakpoint too, so on mobile it runs off-screen instead of wrapping. */
#h5 .section-hero .section-sticky .sticky-bg .kv-title .headline {
letter-spacing: normal !important;
}
#h5 .section-hero .section-sticky .sticky-bg .intro {
white-space: normal !important;
}
/* Shangjie H5 "Shangjie H5 / Your Everyday Companion / Embrace Comfort in Every Journey"
page-content block: .page-title centers correctly, but .page-slogan relies on
width:fit-content + margin:auto to center itself, and that shrink-to-fit calculation
doesn't resolve correctly with the CN CSS's white-space:nowrap now that the EN text is
longer and has a literal
mid-string — it renders full-width and flush left instead.
Center via text-align directly, which doesn't depend on the box's own width. */
#h5 .section-hero .section-sticky .page-slogan {
width: 100% !important;
text-align: center !important;
}
/* Shangjie H5 "Urban Aesthetics / Style Supreme" exit wipe (.title-content h2.title1/.title2):
the site's own bundled animation slides each word off-screen by a fixed 0.6x-viewport-width
transform, tuned for CN's short glyphs. EN's longer strings ("Urban Aesthetics", "Style
Supreme") don't fully clear that distance, leaving a permanent sliver of the tail end visible
over every later panel in this scroll-jacked section for the rest of the scroll. Clip at the
title's own box instead of fighting the third-party transform value. */
#h5 .subsection-design-1 .title-content {
overflow: hidden;
}
/* Shangjie H5 .move-container-title ("Measured Simplicity...") and .clip-bottom-container
(Vehicle Length/Width/Height/Wheelbase stats): both center themselves via left:50% +
transform:translateX(-50%). The site's generic scroll-reveal utility (.pad-fadeup.animated /
.xs-fadeup.animated) applies `transform: translate(0,0) !important` once revealed, which wins
the cascade and wipes out that centering transform entirely — the box's left edge ends up
sitting AT the 50% mark instead of being centered around it, pushing everything (including the
Wheelbase value) off the right edge of the viewport. This bug exists in the original CN CSS
too; it's invisible there because CN's compact text never reaches the clipped edge. Restore the
centering transform with a more specific selector so it wins over the generic !important rule. */
#h5 .subsection-design-1 .move-container-title.animated,
#h5 .subsection-design-1 .clip-bottom-container.animated {
transform: translateX(-50%) !important;
}
/* Shangjie H5 design-5 (.text-content: "Illuminating the road ahead..." headline + L-shaped
headlights intro): same bug as design-1 above. This block is a flex row centered over the
headlight image via position:absolute; left:50% + transform:translateX(-50%). The generic
.pad-fadeup.animated reveal utility overwrites that with `transform: translate(0,0) !important`
once scrolled into view, so the box's left edge lands AT the 50% mark and the whole block
(headline + intro) spills to the right of centre. Re-assert the centering transform with a
more specific selector so it wins the cascade. */
#h5 .subsection-design-5 .text-content.animated {
transform: translateX(-50%) !important;
}
/* The CN box is 34.9vw wide with the headline + a 16.67vw intro laid out space-between. That
width was tuned for CN's short 8-glyph headline; the longer EN headline (~28vw) eats the row
and shrinks the intro to a ~7vw sliver that wraps one word per line. Widen the box so the
intro can hold its intended 16.67vw, cap the headline so it keeps wrapping instead of
consuming all the extra room, and keep a guaranteed gap between the two columns. */
#h5 .subsection-design-5 .text-content {
width: 54vw;
column-gap: 3vw;
}
#h5 .subsection-design-5 .text-content .headline {
max-width: 32vw;
}
#h5 .subsection-design-5 .text-content p {
flex: 0 0 auto;
}
/* Shangjie H5 driving-6 stats row (.mid-content: 655km / 1360km / 13.4kWh / 4.44L): same
.pad-fadeup.animated transform-wipe bug as design-1/design-5. The row is position:absolute;
left:50% + translateX(-50%), so once the transform is clobbered its left edge sits AT 50% and
the 59.375vw row overflows the right edge, cutting off "4.44 L". And because the four longer EN
labels fill that CN-tuned width edge-to-edge, space-between leaves no gap and the values collide
("1360 km13.4 kWh"). Re-assert the centering transform, widen the row so space-between yields
real gaps, and cap each item so the long "...per 100 km" label keeps wrapping instead of
blowing out to a single wide line. */
#h5 .subsection-driving-6 .mid-content.animated {
transform: translateX(-50%) !important;
}
#h5 .subsection-driving-6 .mid-content {
width: 72vw;
column-gap: 2vw;
}
#h5 .subsection-driving-6 .mid-content .page-item {
max-width: 16vw;
}
/* Stelato S9 (#x4a) configuration trim pills: the CN CSS sizes each white .title pill to a
fixed width (tuned for the short Chinese trim names) and absolutely-centres the at
max-content — so the longer English names ("Stelato S9 Extended-Range Max") spill out of
both ends of the pill on BOTH desktop and mobile. Let the pill grow to fit its text.
padding scales per breakpoint (vw units differ hugely between layouts). */
#x4a .section-configuration .text-content .title {
width: auto;
height: auto;
padding: 0.35vw 0.9vw;
display: inline-block;
}
#x4a .section-configuration .text-content .title p {
position: static;
transform: none;
width: auto;
white-space: nowrap;
text-align: center;
}
/* On tablet/phone the CN layout lays each .item out as a row (short pill | range) sized for
the compact Chinese labels. The longer English pill eats the row and clips the range, so
stack the pill above the range and let each item take the full column width. Applies to
both the 11/10 (tablet) and 7/10 (phone) breakpoints. */
@media (max-aspect-ratio: 11/10) {
#x4a .section-configuration .text-content > div.item {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
#x4a .section-configuration .text-content .title {
padding: 1vw 2.5vw;
margin: 0 0 1.2vw 0;
}
#x4a .section-configuration .text-content .desc { margin-left: 0; }
}
@media (max-aspect-ratio: 7/10) {
#x4a .section-configuration .text-content .title { padding: 1.6vw 4vw; margin: 0 0 2vw 0; }
}
/* Stelato S9 (#x4a) "Detailed Configuration" CTA: same fixed-width CN SVG hexagon problem —
.button-normal is a fixed 10.208vw and the hexagon fills it, but the longer EN
label ("Detailed Configuration") is absolutely centred and overflows both bevel edges with
the arrow spilling out the right. Reuse the proven pattern: hide the SVG, rebuild as a
content-fitting white clip-path bevel, and put the label+arrow back into normal flow so the
button sizes to its text. */
#x4a .section-configuration .button-container .button-normal {
width: fit-content;
padding: 0.7vw 2.6vw;
background: #fff;
clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}
#x4a .section-configuration .button-container .button-bg { display: none; }
#x4a .section-configuration .button-container .button-content {
position: static;
transform: none;
justify-content: center;
align-items: center;
}
@media (max-aspect-ratio: 11/10) {
#x4a .section-configuration .button-container .button-normal { padding: 1.6vw 5vw; }
}
/* Stelato S9 (#x4a) comfortable-6 tabnav description: the CN copy fit the 41.67vw block, but
the longer EN descriptions ("HarmonyOS ALPS Health Cockpit…") wrap to awkward short lines.
Widen to 55vw on desktop. Mobile widths (66.9vw / 72.2vw) left as the CN CSS sets them. */
@media (min-aspect-ratio: 11/10) {
#x4a .section-comfortable-6 .stack-list { width: 55vw; }
}
/* Stelato S9 (#x4a) section-header titles: .section-headline is width:max-content with no
cap, so the longer EN subtitles ("Intelligent Response to Every Change, Effortless
Control", "Omnidirectional Safety, Intelligent Escort", "Huawei Qiankun … ADS 4") stay on
one line and overflow the viewport, getting clipped on both sides. Cap the width so they
wrap and stay centred. */
#x4a .section-header .section-headline { max-width: 92vw; text-align: center; }
/* Stelato S9T (#x4w): same overflowing section-header titles as S9 (#x4a) — cap the
max-content headline so long EN subtitles wrap and stay centred instead of clipping. */
#x4w .section-header .section-headline { max-width: 92vw; text-align: center; }
/* Stelato S9 (#x4a) hero disclaimer: the CN caption was a flattened SVG (key-vision-foot.svg);
replaced with small English text. .hero-notes already positions it (bottom-right, opacity .5)
and sets width per breakpoint, so only typography is needed. */
#x4a .section-hero .hero-content .hero-notes .hero-notes-en { color: #fff; font-size: 0.72vw; line-height: 1.4; text-align: right; margin: 0; }
@media (max-aspect-ratio: 11/10) { #x4a .section-hero .hero-content .hero-notes .hero-notes-en { font-size: 1.5vw; } }
@media (max-aspect-ratio: 7/10) { #x4a .section-hero .hero-content .hero-notes .hero-notes-en { font-size: 2.6vw; } }
/* S9 (#x4a) comfortable-5 audio stats (.desc): on phones the padding-left:8vw pushes the 2x2
grid off-centre and the long EN labels ("Independent Amplifier"/"Surround Sound Field")
collide. Centre it, let items wrap, and reduce the left padding (per QA recommendation). */
@media (max-aspect-ratio: 7/10) {
#x4a .section-comfortable-5 .desc {
justify-content: space-between;
transform: translateY(0);
margin: 0 auto;
flex-wrap: wrap;
width: 78.222vw;
padding-left: 3vw;
}
#x4a .section-comfortable-5 .desc > div:not(.line) { width: 47%; }
#x4a .section-comfortable-5 .desc p { font-size: 3vw; }
}
/* S9 (#x4a) section-drive-4 range stats: the two long EN captions ("CLTC Pure Electric
Range"/"CLTC Combined Range") collide across the 2 columns on phones — shrink to 3vw. */
@media (max-aspect-ratio: 7/10) {
#x4a .section-drive-4 .stat-caption { font-size: 3vw; }
}
/* S9 (#x4a) config section on phones: (1) the h2 "Stelato S9 Configurations" is width:max-content
so it clips — let it wrap; (2) the tall stacked EN trim pills (absolute) cover the cars — drop
.text-content into normal flow (it's already the sibling after the image) so it sits BELOW the
cars, and shrink the button's reserved padding accordingly. */
@media (max-aspect-ratio: 7/10) {
#x4a .section-configuration .h2.text-move { top: 2.722222vw; width: auto; max-width: 90vw; left: 50%; transform: translateX(-50%); white-space: normal; text-align: center; }
/* flow below the image on a dark panel (the trim pills/values are white, designed for the
dark car image behind them; the section's own bg is white). */
#x4a .section-configuration .text-content { position: static; transform: none; bottom: auto; left: auto; width: 100%; margin: 0; background: #151515; padding: 9vw 8vw 2vw; box-sizing: border-box; }
/* crop the KV so it ends in the dark reflection under the cars (not the light floor), so it
meets the dark trim panel cleanly — no visible gradient band. */
#x4a .section-configuration .content { position: relative; overflow: hidden; }
/* the KV has a large light reflective floor; a mostly-solid gradient turns the bottom of
the image fully #151515 (fade sits over the cars' darker lower area, so no light band). */
#x4a .section-configuration .box-shadow { display: block; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 63%; background: linear-gradient(to bottom, rgba(21,21,21,0) 0%, #151515 55%); z-index: 1; }
#x4a .section-configuration .button-container { padding-top: 6vw; }
#x4a .section-configuration, #x4a .section-configuration .configuration-content { background: #151515; }
}
/* S9T (#x4w) appearance-1 "A Galaxy of Stars": the taillight photo's light top sits behind the
white heading (illegible), and the .appearance-1-shadow's viewport-relative -52vw offset
covers it inconsistently across devices. Fix applies to the whole 11/10 mobile+tablet range
(NOT just narrow 7/10 phones — a ~0.8 aspect view failed before): give the section a dark
base so any uncovered area is dark on any device, plus a scrim behind the copy. */
@media (max-aspect-ratio: 11/10) {
#x4w .section-appearance-1 { background-color: #06182f; }
/* CN reserves a big top margin here (28vw / 48vw) that just leaves dead space above the
copy on mobile — trim it. */
#x4w .section-appearance-1 .video-content { margin-top: 13vw; }
#x4w .section-appearance-1 .video-content .copy {
width: 90vw; margin-left: auto; margin-right: auto; box-sizing: border-box;
padding: 5vw 6vw 8vw;
}
#x4w .section-appearance-1 .copy .h3-40 { font-size: 4vw; }
#x4w .section-appearance-1 .copy p { font-size: 2.2vw; line-height: 1.45; }
}
/* narrow phones (<0.7 aspect): vw runs larger at these widths, so scale the copy up a touch. */
@media (max-aspect-ratio: 7/10) {
#x4w .section-appearance-1 .copy .h3-40 { font-size: 6vw; }
#x4w .section-appearance-1 .copy p { font-size: 3.4vw; }
#x4w .section-appearance-1 .video-content .copy { padding: 8vw 8vw 12vw; }
}
/* Config CTA buttons ("Detailed Configuration"/"Detailed Specifications") never navigated:
the .button-content text sits on top of the .pdp-cta overlay and swallows the click.
Let clicks pass through the visual layers to the link, and put the link on top. */
.section-configuration .button-container .button-content,
.section-configuration .button-container .button-bg { pointer-events: none; }
.section-configuration .button-container .pdp-cta { z-index: 5; }