/** * Repair Center page shell (category-sua-chua.php) — ONLY cross-module * page-composition CSS. Every module's own look/spacing lives in its own * stylesheet inside vnt39-repair-core/modules//style.css; this file must * stay limited to how independent modules sit next to each other on this * one page, so it doesn't turn into a second place to style any module. * * Booking-form (module 5) and warranty-lookup (module 6) are two separate * shortcode modules with no shared parent inside the plugin — the mockup * puts them side by side on desktop, so this wrapper (added only in * category-sua-chua.php) is the one place that layout decision belongs. * Same reasoning again below for modules 7/8/9/10. */ /* A REAL 2x2 grid — row 1 is the two top cards (booking-form, * warranty-lookup), row 2 is the two banners underneath. This needs * align-items:stretch (grid's own default, stated explicitly) PLUS * explicit grid-column/grid-row placement on each of the 4 children: * two independent flex-column stacks (one per side) can only equalize * an ENTIRE side's total height against the other, never keep row 1 * matched independently from row 2 — try that and whichever side is * taller could dump its extra height into ITS OWN banner instead of its * top card, un-leveling the banners even though the columns end at the * same total height. A real grid's row tracks size independently (each * row = the tallest item IN that row), which is what rows 1 and 2 below * actually need. * * (Earlier version here used align-items:start specifically because * Step 4's locked-preview clamp made warranty-lookup much shorter than * booking-form, and a flex-grow banner filling that whole gap ballooned * into an oversized red box; that's resolved now by stretching the TOP * CARDS to match instead of stretching the banner — the banner stays its * own natural size, see .vnt39-rc-sidebanner's flex:0 0 auto below, * completely separate from row 1's stretch.) */ .vnt39-rc-row-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0; } .vnt39-rc-row-2col > * { min-width: 0; } /* DOM order (category-sua-chua.php) is booking, banner, warranty, banner — * the natural MOBILE reading order (each card immediately followed by its * own banner) — so desktop can't rely on grid auto-placement (which would * read that same order as row1:[booking,banner] row2:[warranty,banner], * wrong). Explicit placement maps DOM position to the actual desktop grid * cell instead; mobile's media query below just resets these back to * `auto` so the 1-column layout falls back to plain DOM order. * * :nth-of-type, NOT :nth-child — confirmed live that each module's own * enqueued lands as an actual sibling * element right here in the row (Assets::enqueue() prints it inline at * the point the shortcode runs, not batched into ), so plain * position-in-DOM counting (:nth-child) was picking those up as "items" * too and threw every index off by one or two — booking-form and * warranty-lookup ended up hundreds of pixels apart instead of aligned. * All 4 real items are
tags and the stray items aren't, so * :nth-of-type(N) — which counts only same-tag siblings — skips the * s automatically without needing to touch how those get printed. */ .vnt39-rc-row-2col > section:nth-of-type(1) { grid-column: 1; grid-row: 1; } /* booking-form */ .vnt39-rc-row-2col > section:nth-of-type(2) { grid-column: 1; grid-row: 2; } /* its banner */ .vnt39-rc-row-2col > section:nth-of-type(3) { grid-column: 2; grid-row: 1; } /* warranty-lookup */ .vnt39-rc-row-2col > section:nth-of-type(4) { grid-column: 2; grid-row: 2; } /* its banner */ /* Row 1 stretch (align-items:stretch above) reaches the SECTION each * module renders (.vnt39-rc-booking / .vnt39-rc-warranty) — that's the * grid item — but the actual visible white card is nested a level or two * inside it (booking-form: section > .container > .card; warranty-lookup: * section > .container.card, one level). Without propagating flex:1 down * through every one of those levels, only the section's own invisible * padding would grow while the bordered card inside stayed its natural * (shorter) height — the exact "equal outer box, unequal visible card" * bug this rule exists to avoid. */ .vnt39-rc-row-2col > .vnt39-rc-booking, .vnt39-rc-row-2col > .vnt39-rc-warranty { display: flex; flex-direction: column; } .vnt39-rc-row-2col > .vnt39-rc-booking > .container { display: flex; flex-direction: column; flex: 1 1 auto; } .vnt39-rc-row-2col > .vnt39-rc-booking .vnt39-rc-booking__card, .vnt39-rc-row-2col > .vnt39-rc-warranty .vnt39-rc-warranty__card { flex: 1 1 auto; } /* Banners stay their own natural size — row 2's height is just whichever * banner happens to be taller (both render identical mock slides, so in * practice they're already equal without this even mattering); this is * only a belt-and-suspenders override in case anything upstream tries to * stretch them again later, same as before. */ .vnt39-rc-row-2col .vnt39-rc-sidebanner { flex: 0 0 auto; } /* * why-vnt39 (7) + case-studies (8) + community-contact (10) + course-cta * (9) — four separate modules the mockup arranges as one composite: 7 * full width on top of a left column, 8+10 paired underneath it, and 9 as * one tall card on the right beside all of it. Four independent * full-width sections (what each module renders on its own) can't do * that shape, so this page-level grid does — same reasoning as * .vnt39-rc-row-2col above. */ .vnt39-rc-row-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr); align-items: stretch; gap: 20px; padding: 20px; background: #f7f7f8; } .vnt39-rc-row-grid__left { display: flex; min-width: 0; flex-direction: column; gap: 20px; } /* align-items:start (not stretch) — case-studies naturally runs much * taller than community-contact (a 2x2 photo grid vs one short card + * 3 buttons), and stretching the shorter one to match left a big dead * white gap inside its own card. Same fix already applied to the * booking-form/warranty-lookup pair above, same reasoning. */ .vnt39-rc-row-grid__pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 20px; flex: 1 1 auto; } .vnt39-rc-row-grid__pair > * { min-width: 0; } /* Right column opts back INTO stretching (overriding the pair's own * align-items:start) so its sidebar-banner filler can grow to match * case-studies' height — community-contact itself still only takes its * own natural height inside this stretched column, same idea as * .vnt39-rc-row-2col__right above. gap so community-contact and the * banner underneath it don't sit flush against each other. */ .vnt39-rc-row-grid__pair-right { display: flex; flex-direction: column; min-width: 0; align-self: stretch; gap: 20px; } /* The banner's own stylesheet gives it a 20px margin on every side except * the top (breathing room from whatever sits around it in the OTHER * placement, the booking-form/warranty-lookup pair). Here it's a direct * child of an already-narrower, already-gapped column, so that extra * margin only made it narrower AND shorter than community-contact's card * above it instead of matching its width and levelling with case-studies/ * course-cta's bottom — zero it out only in this spot. */ .vnt39-rc-row-grid__pair-right .vnt39-rc-sidebanner { margin: 0; } /* * matched-services + case-search ("Tra cứu bệnh án tương tự") share this * row (see category-sua-chua.php) so case-search sits BESIDE the service * card — case-search used to be its own standalone section between * Device Picker and the Wizard; moved here on request, reusing the same * module/search endpoint unchanged (see that module's own script.js top * comment). * * ALWAYS this 2-column layout at desktop width now — case-search is no * longer gated on Device+Model+Issue being picked (on request: visitors * should be able to browse real repair cases and self-diagnose BEFORE * committing to register a service, not only after finishing the * wizard). script.js still reads VNT39RepairState to personalize the * panel once a selection exists; without one it shows a sensible default * instead of nothing (see that file's own comment) — either way the * layout itself doesn't change, so no class-toggling is needed here * anymore. * * display:contents on matched-services' OWN section + its .container is * what lets its head ("Dịch vụ phù hợp / Xem tất cả dịch vụ") span the * FULL row width while its card grid sits ONLY in the left column, * matching the approved mockup — without touching matched-services' * template.php or style.css at all (display:contents removes an * element's own box only, not its children; this project's rule against * redesigning the service card is about the CARD, not this kind of * structural pass-through). Because display:contents drops the section's * own background/padding too, this row takes over that shared grey * backdrop + page-margin padding instead; case-search's own padding is * zeroed to match (see that module's style.css comment) so the two * columns don't end up with doubled insets between them. */ @media (min-width: 850px) { .vnt39-rc-services-row { display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr); /* Row 2 is a DEFINITE 260px, not auto — matches matched-services' * own service-card min-height (that module's own style.css, * untouched here). Has to stay a real length, not e.g. * minmax(260px, auto): case-search spans rows 2+3 (grid-row-end: * span 2 below), and with row 2 left as `auto` the browser's * row-spanning distribution algorithm shares case-search's own * intrinsic height across BOTH rows — so any change to * case-search's height, or even to payment-offers' own height in * row 3, reshuffles where row 2 ends and row 3 starts, in ways * that don't move 1:1 with any single property (confirmed live — * payment-offers' margin-top and padding-top each moved "Ưu đãi * thanh toán"'s title by only about half a pixel per pixel * changed, and dropping payment-offers from 3 banners to 2 alone * shifted the row2/row3 boundary, breaking a margin value already * tuned against it). Pinning row 2 to a real length removes it * from that negotiation — case-search's overflow past 260px only * spills into row 3 (still `auto`, so its related-cards can still * run as tall as they need), and row 3's start becomes a fixed, * predictable 260px + the row gap. * Tradeoff: if the SERVICE CARD itself ever renders taller than * 260px (a real matched result with enough text can, per a live * test — the placeholder and short results don't), it will * overflow this fixed row visually instead of the row growing to * fit it, like it used to. Not fixed here — this round is * payment-offers' header alignment specifically, and the service * card's own rendering is explicitly out of scope ("KHÔNG sửa * service card"); flagged for whoever picks that up next. */ grid-template-rows: auto 260px auto; align-items: start; gap: 10px 24px; padding: 8px 20px 44px; background: #f7f7f8; } .vnt39-rc-services-row > .vnt39-rc-services, .vnt39-rc-services-row > .vnt39-rc-services > .container { display: contents; } /* Grid row-gap above (10px) is the ONLY thing controlling the head→row2 * gap now — matched-services__head's own margin-bottom:20px (its file, * untouched) would otherwise ADD to the row-gap instead of being * replaced by it (margins on a grid item don't collapse into `gap`), * stacking up to 40px total. Zeroed here, scoped to this row only, so * matched-services' own standalone rendering elsewhere is unaffected. */ .vnt39-rc-services-row .vnt39-rc-services__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; } .vnt39-rc-services-row .vnt39-rc-services__grid { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); } .vnt39-rc-services-row > [data-vnt39-repair-module="case-search"] { grid-column: 2; grid-row: 2; grid-row-end: span 2; padding: 8px 0 0; } /* Own explicit row (3), left column only — sits right under the * service card. align-self:stretch (overriding the row's own * align-items:start) + the flex chain below (module → card → list) * make this card stretch to match case-search's own bottom edge — * "bằng đầu bằng đít" with the right column, on request. (An earlier * request tried and reverted this same stretch when there were 3 * banners — "nhìn nặng"; now explicitly asked for again with 2, so * back on.) Each banner keeps its own flex:1 1 0 (payment-offers/ * style.css), so the extra height splits evenly between the two of * them instead of piling into just one. * * margin-top:-5px + padding-top:0 (both override payment-offers' own * module defaults — 8px margin, 16px card padding, both kept for its * standalone/mobile rendering — SCOPED to this row only) are what land * "Ưu đãi thanh toán"'s title within ~8px of "Các bệnh án thực tế liên * quan"'s title on the same Y (visually flush — verified live, not * just calculated). Split across TWO properties instead of one bigger * margin because pushing margin-top alone far enough to fully close * the gap runs the card into the service card above it — with row 2 * now pinned to 260px (see grid-template-rows above), the clear space * between the service card's bottom and this row's own natural start * is a hard 10px (the row's own row-gap) + however far margin eats * into it; -5px leaves 5px of it as a real, visible gap (screenshot- * verified: two cards flush with margin:-10px/padding-top:0 rendered * fine with zero visible seam too, if that's ever preferred over the * small gap — but a thin visible gap reads more intentional than an * edge-to-edge touch). padding-top:0 makes up the rest for free (it * only moves the title inside its OWN card, doesn't touch the card's * outer box, so it never affects that clearance). * * case-search itself is UNTOUCHED here on purpose (this round's edits * are scoped to payment-offers only). If payment-offers' own banner * count/sizing/padding changes again, re-measure BOTH numbers live — * this row's track sizing isn't simple addition (see * grid-template-rows' own comment on why row 2 is now a fixed 260px * specifically to make this relationship linear/predictable). */ .vnt39-rc-services-row > [data-vnt39-repair-module="payment-offers"] { grid-column: 1; grid-row: 3; margin-top: -5px; align-self: stretch; display: flex; flex-direction: column; } .vnt39-rc-services-row > [data-vnt39-repair-module="payment-offers"] .vnt39-rc-payment-offers__card { padding-top: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .vnt39-rc-services-row > [data-vnt39-repair-module="payment-offers"] .vnt39-rc-payment-offers__list { flex: 1 1 auto; } } @media (max-width: 849px) { /* Phase 11.7 — mobile reading order only: Matched Services → Tra cứu * bệnh án tương tự → Ưu đãi thanh toán (was matched-services → * payment-offers → case-search, the plain DOM order from * category-sua-chua.php — below 850px none of the desktop grid rules * above apply, so children stacked in that raw order with no override * until now). flex+order here, not a DOM move: desktop's own * display:grid + explicit grid-column/grid-row placement (scoped to * min-width:850px) is completely untouched, and no markup/module * template changed — matched-services keeps rendering as one full * section on mobile (its `display:contents` override is desktop-only * too), same card, same content. */ .vnt39-rc-services-row { display: flex; flex-direction: column; } .vnt39-rc-services-row > [data-vnt39-repair-module="case-search"] { order: 2; } .vnt39-rc-services-row > [data-vnt39-repair-module="payment-offers"] { order: 3; } .vnt39-rc-row-2col { grid-template-columns: minmax(0, 1fr); } /* Undo desktop's explicit 2x2 placement — single column now, so every * item just falls back to plain DOM order (booking, its banner, * warranty, its banner), which is already the natural mobile reading * order (see category-sua-chua.php). Nothing here forces equal * height: each item gets its own grid row sized to its own content, * same as ordinary block stacking — no blank gap, no stretch. */ .vnt39-rc-row-2col > section:nth-of-type(1), .vnt39-rc-row-2col > section:nth-of-type(2), .vnt39-rc-row-2col > section:nth-of-type(3), .vnt39-rc-row-2col > section:nth-of-type(4) { grid-column: auto; grid-row: auto; } .vnt39-rc-row-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; } .vnt39-rc-row-grid__pair { grid-template-columns: minmax(0, 1fr); } .vnt39-rc-row-grid__pair-right { gap: 16px; } } /* ========================================================================== SLIDER CONTROLS — ONE VISUAL STANDARD for every dot row and arrow pair on /sua-chua/ (presentation only; each slider keeps its own engine, timing, data and swipe). Audited on the page: hero image slider (dots + arrows), sidebar promo banners ×3 (dots + arrows), matched-services card slider (arrows), case-search related slider (arrows), device picker row (arrows, hscroll.js), payment offers on phones (dots). (The warranty "dot"s are timeline nodes, not slider controls; the wizard arrows are step connectors — neither is touched.) `.vnt39-repair-page.vnt39-repair-page` doubles the specificity so this wins over the module stylesheets whatever their load order. ========================================================================== */ .vnt39-repair-page { --rc-ctl-arrow: 34px; --rc-ctl-arrow-bg: rgba(17, 19, 24, .42); --rc-ctl-arrow-border: rgba(255, 255, 255, .6); --rc-ctl-dot-off: rgba(255, 255, 255, .5); --rc-ctl-dot-on: #fff; } /* ---- DOTS: bottom-centre INSIDE the banner / card; inactive = 6px circle, active = 20×6 pill; light/dark only changes the colour vars ---- */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dots, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__dots, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-payment-offers__dots { position: absolute; left: 50%; right: auto; top: auto; bottom: 10px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; padding: 0; width: auto; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dot, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__dot, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-payment-offers__dot { display: block; flex: 0 0 auto; min-width: 0; min-height: 0; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--rc-ctl-dot-off); cursor: pointer; transition: width .2s ease, background-color .2s ease; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dot.is-active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__dot.is-active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-payment-offers__dot.is-active { width: 20px; border-radius: 999px; background: var(--rc-ctl-dot-on); } /* hero art below 1024px keeps its bottom padding (18px tablet / 12px phone): the dots sit just above it, still inside the image */ @media (max-width: 1023px) { .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dots { bottom: 28px; } } @media (max-width: 767px) { .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dots { bottom: 22px; } } /* sidebar banners: the dots no longer take a row of their own — the slide text just clears them */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__slide { padding-bottom: 24px; padding-left: 46px; padding-right: 46px; } /* side room so the arrows never sit on the text */ @media (prefers-reduced-motion: reduce) { .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-dot, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__dot, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-payment-offers__dot { transition: none; } } /* ---- ARROWS: same circle, border, ‹ › glyph (drawn in CSS so every engine's own icon markup is hidden), overlaid INSIDE the slider ---- */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn { display: grid; place-items: center; box-sizing: border-box; min-width: 0; min-height: 0; width: var(--rc-ctl-arrow); height: var(--rc-ctl-arrow); padding: 0; border: 1px solid var(--rc-ctl-arrow-border); border-radius: 50%; background: var(--rc-ctl-arrow-bg); color: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .22); cursor: pointer; opacity: .18; transition: opacity .22s ease, background-color .22s ease; -webkit-tap-highlight-color: transparent; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav > *, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav > *, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav > *, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav > *, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn > * { display: none; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav::before, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav::before, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav::before, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav::before, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn::before { content: ''; display: block; width: 8px; height: 8px; border: solid #fff; border-width: 2px 0 0 2px; transform: rotate(-45deg); margin-left: 3px; } .vnt39-repair-page.vnt39-repair-page [class*="nav--next"]::before, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn--next::before { border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 0; margin-right: 3px; } /* position: arrows centred on the banner height, 8px in from the edge (the two card sliders keep the image-centred anchor they already have) */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav { top: 50%; margin: 0; transform: translateY(-50%); } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav--prev, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav--prev { left: 8px; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav--next, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav--next { right: 8px; } /* matched-services cards are full of content edge to edge (photo left, price / meta / button below), so edge-hugging arrows would sit on the photo or the price: this one pair is parked together in the empty top-right corner of the card, level with the service name (which ends well before it) */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav { top: 15px; margin: 0; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav--prev { left: auto; right: calc(var(--rc-ctl-arrow) + 14px); } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav--next { right: 8px; } /* hscroll arrows are [hidden] while a row does not overflow — the display rule above must not undo that */ .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn[hidden] { display: none; } /* states */ .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav:disabled, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav:disabled, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav:disabled, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav:disabled, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn:disabled { opacity: .07; pointer-events: none; cursor: default; } /* DESKTOP (real hover): near-invisible at rest, fade in while the pointer is over the slider, fade out on leave */ @media (hover: hover) and (pointer: fine) { .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art:hover .vnt39-rc-hero__art-nav:not(:disabled), .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner:hover .vnt39-rc-sidebanner__nav:not(:disabled), .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-viewport:hover .vnt39-rc-services__slider-nav:not(:disabled), .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-viewport:hover .vnt39-rc-case-search__related-nav:not(:disabled), .vnt39-repair-page.vnt39-repair-page .vnt39-hs:hover .vnt39-hs__btn:not(:disabled), .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn:focus-visible { opacity: 1; } } /* PHONES / TOUCH (no hover): always there but light, a little smaller, clearer while touched or focused */ @media (hover: none), (max-width: 767px) { .vnt39-repair-page { --rc-ctl-arrow: 30px; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn { opacity: .55; } .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav:not(:disabled):active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav:not(:disabled):active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav:not(:disabled):active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav:not(:disabled):active, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn:not(:disabled):active, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav:focus-visible, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn:focus-visible { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .vnt39-repair-page.vnt39-repair-page .vnt39-rc-hero__art-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-sidebanner__nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-services__slider-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-rc-case-search__related-nav, .vnt39-repair-page.vnt39-repair-page .vnt39-hs__btn { transition: none; } }