/* ===== CSS-only area ticker ===== */ .me-ticker{ --me-gap:24px; --me-speed:40s; overflow:hidden; width:100%; min-width:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .me-ticker > .me-ticker__track{ display:flex!important; flex-wrap:nowrap!important; width:max-content!important; max-width:none!important; gap:0!important; padding:0!important; animation:me-marquee var(--me-speed) linear infinite; } .me-ticker--right > .me-ticker__track{ animation-direction:reverse; } .me-ticker .me-ticker__group{ display:flex!important; flex-wrap:nowrap!important; flex:0 0 auto!important; width:max-content!important; max-width:none!important; gap:var(--me-gap)!important; padding:0 var(--me-gap) 0 0!important; margin:0!important; } /* pills: never shrink, never wrap text */ .me-ticker .me-ticker__group > .elementor-element{ flex:0 0 auto!important; width:auto!important; max-width:none!important; margin:0!important; } .me-ticker .elementor-icon-list-item, .me-ticker .elementor-icon-list-text, .me-ticker .elementor-heading-title{ white-space:nowrap!important; } .me-ticker:hover > .me-ticker__track{ animation-play-state:paused; } @keyframes me-marquee{ from{ transform:translateX(0); } to { transform:translateX(-50%); } } .live-chat .elementor-button-icon .e-font-icon-svg { height: 1em; color: #00a896; fill: #00a896; } @media (max-width:767px){ .me-ticker{ --me-gap:12px; --me-speed:30s; } } @media (prefers-reduced-motion:reduce){ .me-ticker{ --me-speed:90s; } } /* editor: no animation, scroll sideways to edit pills */ .elementor-editor-active .me-ticker{ overflow-x:auto; } .elementor-editor-active .me-ticker > .me-ticker__track{ animation:none; } /* Reviews: custom arrows under the left-column text drive the Trustindex slider */ .me-rev-nav{ display:flex; gap:12px; margin-top:8px; } .me-rev-nav button{ width:44px; height:44px; padding:0; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#14A79D; color:#fff; cursor:pointer; transition:background .2s ease, opacity .2s ease; } .me-rev-nav button:hover, .me-rev-nav button:focus-visible{ background:#0f8a81; } .me-rev-nav button:disabled{ opacity:.35; cursor:default; } .me-rev-nav svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* hide Trustindex's own arrows, only in the section that has our buttons */ .e-parent:has(.me-rev-nav) .ti-controls{ display:none !important; } /* ==== Transparent header on the home page ==== */ body.home .wvh-header { position: absolute; /* no "top": stays below the WP admin bar when logged in */ left: 0; right: 0; } /* banner starts at the top, behind the header — push its content down by the header height */ body.home { --wvh-header-h: 111px; } @media (max-width: 1199.98px) { body.home { --wvh-header-h: 106px; } } @media (max-width: 991.98px) { body.home { --wvh-header-h: 86px; } } @media (max-width: 767.98px) { body.home { --wvh-header-h: 56px; } } body.home > .elementor > .elementor-element:first-child > .e-con:only-child, body.home > .elementor > .elementor-element:first-child:not(:has(> .e-con:only-child)) { padding-top: var(--wvh-header-h); } /* ------------------------------------------------------------------ Custom CSS & JS snippet #44 "CustomCSS" Select lines 96-99 ONLY and paste this over them. Line 100 (.wvh-logo img) and line 101 (.wvh-toggler .wvh-bar) stay exactly as they are — do not include or delete them. The four lines you are replacing: 96 | the "white text + white logo while the header sits on the banner" comment 97 | body.home .wvh-main .wvh-menu > li > a:not(.wvh-phone) { color: #fff; } 98 | body.home .wvh-main .wvh-menu > li > a:not(.wvh-phone):hover, 99 | body.home .wvh-main .wvh-menu > li.current-menu-item > a:not(.wvh-phone) { color: #024D78; } ------------------------------------------------------------------ */ /* white text + white logo while the header sits on the banner (sticky bar keeps its colours) */ /* readability scrim: the banner rotates between photos, so without this the contrast behind the menu swings with whichever image is showing */ body.home .wvh-main { position: relative; } body.home .wvh-main::before { content: ""; position: absolute; inset: -12px 0 -36px; background: linear-gradient(180deg, rgba(6, 16, 25, .82) 0%, rgba(6, 16, 25, .72) 52%, rgba(6, 16, 25, .30) 82%, rgba(6, 16, 25, 0) 100%); pointer-events: none; } body.home .wvh-main .wvh-inner { position: relative; z-index: 1; } body.home .wvh-main .wvh-menu > li > a:not(.wvh-phone) { color: #fff; } /* current page / hover: stay white, mark it with the brand teal underline. The old #024D78 was navy on a dark photo - 1.9:1, effectively invisible. */ body.home .wvh-main .wvh-menu > li > a:not(.wvh-phone):hover, body.home .wvh-main .wvh-menu > li.current-menu-item > a:not(.wvh-phone) { color: #fff; box-shadow: 0 3px 0 -1px #14a79d; } body.home .wvh-main .wvh-logo img { filter: brightness(0) invert(1); } body.home .wvh-main .wvh-toggler .wvh-bar { background: #fff; } /* .banner-cards { height: 100px !important; } */ .banner-cards.elementor-shape-circle.elementor-position-block-start.elementor-mobile-position-block-start.elementor-widget.elementor-widget-icon-box:hover span.elementor-icon{ fill: #14A79D!important; color: #14A79D!important; border-color: #14A79D!important; } .rtl .wvh-nav .wvh-menu { display: flex; justify-content: end; } .elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title{ border-radius: 10px 10px 0px 0px !important; } span a{ color: #05a9b7; } p.wvf-address, .phone p{ direction: ltr!important; text-align: end; } /* .me-veh__card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .me-veh__img { transition: transform 0.5s ease; } @media (hover: hover) { .me-veh__card:hover, .me-veh__card:focus-within { transform: translateY(-8px); box-shadow: 0 22px 40px -10px rgba(16, 42, 67, 0.32); } .me-veh__card:hover .me-veh__img { transform: scale(1.20); } } @media (prefers-reduced-motion: reduce) { .me-veh__card:hover, .me-veh__card:focus-within, .me-veh__card:hover .me-veh__img { transform: none; } } */ /* ---- card pops up + photo zooms — every device and setting ---- */ .me-veh .me-veh__card { transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .me-veh .me-veh__img { transition: transform 0.5s ease !important; } .me-veh .me-veh__card:hover, .me-veh .me-veh__card:focus-within, .me-veh .me-veh__card:active { transform: translateY(-8px); box-shadow: 0 22px 40px -10px rgba(16, 42, 67, 0.32); } .me-veh .me-veh__card:hover .me-veh__img, .me-veh .me-veh__card:active .me-veh__img { transform: scale(1.2); } ------------------------------------------------------------ /* Home FAQ: answers always open, so no +/- icon and no hand cursor */ .elementor-element-60fe500 .e-n-accordion-item-title-icon, .elementor-element-f4563df .e-n-accordion-item-title-icon { display: none !important; } .elementor-element-60fe500 .e-n-accordion-item-title, .elementor-element-f4563df .e-n-accordion-item-title { cursor: default; } /* ========================================================================== test.mobilityexpress.ae — responsive fixes Append to hello-elementor-child/assets/css/me-hero-fullscreen.css ========================================================================== */ /* 1. HEADER GUTTER. .wvh-container had `padding: 0 0px` and its 1320px max-width only centres above ~1330px, so from 1280px down to 768px the logo and phone pill sat at x=0. Growing max-width by exactly the padding keeps the CONTENT box at 1320px, so desktop is pixel-identical (logo left 292 @1920, 52 @1440). Scoped to the visible bars: the off-canvas panel must not be padded. */ .wvh-main .wvh-container, .wvh-sticky .wvh-container { max-width: calc(var(--wvh-container) + 40px); padding-inline: 20px; } /* 3. HERO H1 GREW ON TABLET. post-47.css: 48px desktop, 40px <=1200, *50px* <=1024, 40px <=767 — the tablet value was typed larger than desktop. Selector matches Elementor's own 4-class specificity or it loses. Cleaner fix: page 47 -> heading widget f539192 -> Tablet -> size 38. */ @media (max-width: 1024px) { .elementor[data-elementor-type="wp-page"] .elementor-element.elementor-element-f539192 .elementor-heading-title { font-size: 38px; line-height: 1.15; } /* .banner-cards { height: 85px !important; } */ } @media (max-width: 767px) { .elementor[data-elementor-type="wp-page"] .elementor-element.elementor-element-f539192 .elementor-heading-title { font-size: 28px; } } /* 4. FOOTER. .wvf-top is a Bootstrap-style row with `margin: 0 -15px` and its wrapper has no compensating padding, so below ~1350px the row hung 15px off the left edge and its right edge fell outside the viewport. .wvf-bottom has `padding: 26px 0` and hugged the edge the same way. Dropping the negative margins and adding 5px lands the columns' own 15px padding on a 20px gutter — the same gutter as the header. */ @media (max-width: 1360px) { .wvf-top { margin-inline: 0; padding-inline: 5px; } .wvf-bottom { padding-inline: 20px; } } /* 5. QUICK LINKS two-column only when the column is wide enough. At 1009px the sub-columns were ~158px and every link wrapped. */ @media (min-width: 992px) and (max-width: 1199.98px) { .wvf-col-menu-1 { flex: 0 0 25%; max-width: 25%; padding-left: 15px; } .wvf-col-menu-2 { flex: 0 0 25%; max-width: 25%; } .wvf-col-menu-2 .wvf-menu { column-count: 1; } } /* Turn the vehicle features list into a 2-column grid */ ul.me-veh-features { display: grid!important; grid-template-columns: repeat(2, minmax(0, 1fr))!important; gap: 8px 12px!important; /* Row gap and Column gap */ list-style: none!important; padding: 0!important; margin: 0!important; } /* ---- Elementor image gallery: make it obvious the images open --------- */ .elementor-widget-image-gallery .gallery-icon{ position:relative; display:block; overflow:hidden; /* clips the zoom */ border-radius:14px; transition:box-shadow .3s ease, transform .3s ease; } .elementor-widget-image-gallery .gallery-icon a{ display:block; position:relative; cursor:zoom-in; } .elementor-widget-image-gallery .gallery-icon img{ display:block; width:100%; height:auto; transition:transform .45s cubic-bezier(.2,.6,.2,1); } @media (hover:hover){ .elementor-widget-image-gallery .gallery-icon:hover{ box-shadow:0 0 0 3px #00a896, 0 18px 30px -16px rgba(16,32,45,.45); transform:translateY(-3px); } .elementor-widget-image-gallery .gallery-icon:hover img{ transform:scale(1.06); } .elementor-widget-image-gallery .gallery-icon:hover a::after{ opacity:1; transform:scale(1); } } /* keyboard users get the same cue */ .elementor-widget-image-gallery .gallery-icon a:focus-visible{ outline:3px solid #00a896; outline-offset:3px; } .elementor-widget-image-gallery .gallery-icon a:focus-visible::after{ opacity:1; transform:scale(1); } /* touch screens have no hover: keep a quiet badge in the corner instead */ @media (hover:none){ .elementor-widget-image-gallery .gallery-icon a::after{ top:auto; left:auto; right:10px; bottom:10px; margin:0; width:38px; height:38px; background-size:19px 19px; opacity:.92; transform:none; } } @media (prefers-reduced-motion:reduce){ .elementor-widget-image-gallery .gallery-icon img, .elementor-widget-image-gallery .gallery-icon{ transition:none; } .elementor-widget-image-gallery .gallery-icon:hover img, .elementor-widget-image-gallery .gallery-icon:hover{ transform:none; } } /* ========================================================================== Site-specific override (not needed on test.mobilityexpress.ae). ========================================================================== */ :where(body.me-ported .elementor[data-elementor-type="wp-page"]) p { margin-block-end: 0.9rem; } /* NOTE: no :last-child exception here. Elementor puts exactly one

inside each .elementor-widget-container, so every paragraph is also :last-child — an exception would cancel the rule for all 35 of them. Test has no such exception either. */ :where(body.me-ported .elementor[data-elementor-type="wp-page"]) h2 { font-size: 2rem; } /* Classless tables. */ body.me-ported table:not([class]) td, body.me-ported table:not([class]) th { border: 0; } /* ========================================================================== Comparison matrix — site-specific override (not needed on test). ========================================================================== */ .me-matrix th, .me-matrix td { border: 0 !important; } .me-matrix tbody tr { border-top: 1px solid #f1f5f9 !important; } .me-matrix tbody tr:first-child { border-top: 0 !important; } /* HERO TRUST BAR — one section, two layouts. */ @media (max-width: 767px) { /* the bar stops being a bar — cards sit apart on the photo */ .e-grid:has(> .e-con > .banner-cards) { --e-con-grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none; } /* each cell becomes its own card */ .e-grid:has(> .e-con > .banner-cards) > .e-con { padding: 12px 10px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(16, 32, 45, 0.35); } .e-grid:has(> .e-con > .banner-cards) .elementor-icon-box-title { font-size: 13px; line-height: 1.3; } .elementor-element.elementor-element-fe13207.e-grid.e-con-full.e-con.e-child { background-color: transparent !important; } }