/** Repair Center — Hero (module 1). Self-contained: no shared CSS file. * * HOTFIX — full rebuild ("Làm lại hero theo dạng FULL-WIDTH SLIDER... * tách riêng 3 phần"). `.vnt39-rc-hero__inner` is now a 3-column grid — * copy (text) / art (image slider, own sub-module) / side (cards+stats) — * instead of the old 2-column copy/art split. Nothing here reaches into * another Repair Center module's own CSS; this file only ever styles * elements under `.vnt39-rc-hero`. */ .vnt39-rc-hero { background: linear-gradient(115deg, #8f0b18, #a30d1b 55%, #6e0812); color: #fff; overflow: hidden; } /* HOTFIX — "ảnh slider giữa phải là banner full, không phải card": vertical * padding moved OFF this shared container and onto `.copy`/`.side` * individually (see those 2 rules below) so `.art` — the only child left * with no padding of its own — stretches (align-items:center is still * `stretch` for that one column via its own align-self, see below) all * the way from this row's top edge to its bottom edge with zero red * margin above/below it; art's fr-share also bumped up so it reads as the * dominant visual, not one of three equal boxes. */ .vnt39-rc-hero__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr) minmax(0, .75fr); align-items: center; gap: 28px; padding: 0 20px; min-width: 0; } /* --------------------------------------------------------------------- * 1. COPY (left) — eyebrow / two-line title / description / benefits / CTAs. * Every piece here is real text, nothing is baked into an image. * --------------------------------------------------------------------- */ .vnt39-rc-hero__copy { min-width: 0; padding: 48px 0; } .vnt39-rc-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #ffd9dc; font-size: 13px; font-weight: 700; letter-spacing: .12em; } /* The short rule beside the eyebrow in the mockup — a plain gradient line, * not an image; `flex:1 1 auto` lets it fill whatever width the eyebrow * text leaves, at any column width. */ .vnt39-rc-hero__eyebrow::after { content: ''; flex: 1 1 auto; height: 1px; max-width: 120px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); } .vnt39-rc-hero__copy h1 { margin: 0 0 16px; color: #fff; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.12; text-wrap: balance; } /* Second title line reads as its own block (mockup: 2 visually distinct * lines, 2nd one in a warm accent tone) — a real second admin field * (title_line2), not a manual line-break inside one string. */ .vnt39-rc-hero__title-line2 { display: block; color: #f0c896; } .vnt39-rc-hero__desc { margin: 0 0 26px; max-width: 42ch; color: #f6dcdd; font-size: 15.5px; line-height: 1.65; } /* CTAs — up to 2, independent buttons (admin can fill either/both/neither; * template.php only renders the wrapper at all when at least one has * text). Primary = solid white fill (matches the old single-CTA look * exactly); secondary = outline, so two buttons next to each other read * as "main action" + "secondary action", not two equally-loud buttons. * The small icon on each is fixed presentation (not a per-CTA admin * field — the ask was only "text + URL" per button), same idea as a * button's own icon anywhere else in this plugin. */ .vnt39-rc-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; } .vnt39-rc-hero__cta { display: inline-flex; min-width: 0; min-height: 0; align-items: center; gap: 8px; border-radius: 8px; padding: 13px 22px; font-size: 14px; font-weight: 800; line-height: 1.3; text-decoration: none; text-transform: none; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .vnt39-rc-hero__cta .vnt39-rc-icon { flex-shrink: 0; width: 18px; height: 18px; } .vnt39-rc-hero__cta--primary { border: 1.5px solid #fff; background: #fff; color: #a30d1b; } .vnt39-rc-hero__cta--secondary { border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; } /* Benefits — icon LEFT, title+description stacked RIGHT (was icon+one- * line label before this rebuild; now icon+title+description per the new * admin field shape — see class-repair-settings.php's defaults_hero()). */ .vnt39-rc-hero__benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; margin: 0; padding: 0; list-style: none; } .vnt39-rc-hero__benefits li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .vnt39-rc-hero__benefits .vnt39-rc-icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; color: #fff; background: transparent; } /* A global theme rule paints every inside a
  • grey and beats the SVG fill="none" attribute — pin the line icon: no fill, white stroke only. */ .vnt39-rc-hero__benefits .vnt39-rc-icon { fill: none !important; stroke: currentColor !important; background: transparent !important; } .vnt39-rc-hero__benefits li > span { display: flex; flex-direction: column; min-width: 0; } .vnt39-rc-hero__benefits b { overflow-wrap: anywhere; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.35; } .vnt39-rc-hero__benefits em { overflow-wrap: anywhere; color: #f2c3c6; font-size: 12px; font-weight: 500; font-style: normal; line-height: 1.35; } /* --------------------------------------------------------------------- * 2. ART (center) — image-only slider, own sub-module. No text/button of * its own ever renders inside a slide (see template.php). * --------------------------------------------------------------------- */ /* HOTFIX — full-bleed banner, not a card floating in the row: `align-self: * stretch` (the row's own `align-items:center` above is per-item * overridable) plus the container no longer having its own vertical * padding (moved to `.copy`/`.side`) means this now spans the row's FULL * height with nothing above/below it — the image touches the hero * section's own top/bottom edges directly. `padding-bottom` here (not on * the viewport) is what keeps the dots from sitting flush against the * very bottom edge, without eating into the image's own height — the * viewport itself still gets 100% of whatever's left. */ .vnt39-rc-hero__art { position: relative; display: flex; flex-direction: column; min-width: 0; align-self: stretch; gap: 8px; padding-bottom: 18px; } /* min-height bumped way up (was 320px, sized for a "card") and border- * radius all but removed (was 18px) — a slider that's meant to read as * one continuous banner can't have rounded-card corners; the little that's * left (6px) just keeps the sharp corners from looking like a rendering * glitch, not a "boxed" look. */ .vnt39-rc-hero__art-viewport { position: relative; flex: 1 1 auto; min-height: 460px; border-radius: 6px; overflow: hidden; touch-action: pan-y; } .vnt39-rc-hero__art-track { display: flex; height: 100%; transition: transform .5s ease; } .vnt39-rc-hero__art-slide { flex: 0 0 100%; min-width: 0; height: 100%; } .vnt39-rc-hero__art-slide-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* HOTFIX — "check tất cả slider banner, card nào chưa có button tiến lùi * thì thêm vào" — cùng "near-invisible tại chỗ, đậm khi hover" như * matched-services/case-search's slider-nav, chỉ đổi tông sang trắng-trên- * nền-tối (nền ở đây luôn là ảnh) thay vì đỏ-trên-nền-trắng của 2 module * kia. `.art-viewport` ở hero CHỈ bọc ảnh (không bọc chữ như 2 module * kia) nên top:50% đã tự đúng tâm ảnh ở MỌI breakpoint — không cần kỹ * thuật anchor riêng cho mobile. z-index:2 để nổi trên `.art::after` * (gradient overlay, z-index:1) — nếu không sẽ bị gradient phủ mờ lên. */ /* margin: -18px 0 0 (không phải margin-top riêng) — Flatsome có * `button{margin-right:1em}` áp lên MỌI button; chỉ set margin-top thôi * thì margin-right:1em kế thừa vẫn đẩy lệch riêng nút --next (định vị * bằng `right`) so với --prev (định vị bằng `left`, không bị ảnh hưởng) * — đúng bug vừa bị báo "button không canh giữa, lệch". */ .vnt39-rc-hero__art-nav { display: grid; position: absolute; top: 50%; z-index: 2; min-width: 0; min-height: 0; place-items: center; width: 36px; height: 36px; margin: -18px 0 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; padding: 0; background: rgba(0, 0, 0, .22); color: #fff; cursor: pointer; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .vnt39-rc-hero__art-nav:hover, .vnt39-rc-hero__art-nav:focus-visible { background: rgba(0, 0, 0, .45); border-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .vnt39-rc-hero__art-nav .vnt39-rc-icon { width: 18px; height: 18px; } .vnt39-rc-hero__art-nav .vnt39-rc-icon svg { display: block; } .vnt39-rc-hero__art-nav--prev { left: 8px; } .vnt39-rc-hero__art-nav--next { right: 8px; } .vnt39-rc-hero__art-dots { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; } /* Real