/* ===================================================================== Mirchen Group — modern UI overlay (local dev, loaded last in ) Safe, reversible modernization on top of Journal3. Brand accent #FF9800. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ --mg-brand:#ff9800; /* Mirchen amber */ --mg-brand-strong:#f57c00; /* deeper — better contrast on buttons */ --mg-brand-050:#fff4e6; --mg-ink:#181b21; /* near-black */ --mg-ink-2:#3c424e; --mg-muted:#727884; --mg-line:#e9ebef; --mg-bg:#ffffff; --mg-bg-soft:#f6f7f9; --mg-radius:14px; --mg-radius-sm:10px; --mg-shadow-sm:0 1px 2px rgba(20,22,28,.05), 0 6px 18px rgba(20,22,28,.06); --mg-shadow-md:0 12px 34px rgba(20,22,28,.12); --mg-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, Roboto, sans-serif; } /* ---- 1. Typography ------------------------------------------------- */ body, input, select, textarea, button, .btn, .button, h1,h2,h3,h4,h5,h6, .module-title, .title-module, .product-thumb, .price, [class*="module"] { font-family: var(--mg-font) !important; } body{ -webkit-font-smoothing:antialiased; letter-spacing:.1px; } /* NOTE: never force heading/body COLOR globally — it breaks text on dark sections (counters, footer, hero). Only tune weight + rhythm. */ h1,h2,h3,h4{ letter-spacing:-.015em; line-height:1.18; font-weight:700; } p{ line-height:1.7; } /* ---- 2. Buttons ---------------------------------------------------- */ .btn, .button, button.btn, a.btn{ border-radius:var(--mg-radius-sm) !important; font-weight:600 !important; letter-spacing:.2px; padding:12px 26px; border:1px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; box-shadow:none; } .btn:hover, .button:hover, a.btn:hover{ transform:translateY(-2px); } .btn-primary, .button-primary, .btn.btn-primary{ background:var(--mg-brand-strong) !important; border-color:var(--mg-brand-strong) !important; color:#fff !important; box-shadow:0 6px 18px rgba(245,124,0,.28) !important; } .btn-primary:hover, .btn.btn-primary:hover{ background:#e06f00 !important; border-color:#e06f00 !important; box-shadow:0 10px 26px rgba(245,124,0,.34) !important; } /* secondary / default buttons */ .btn-default, .btn-secondary{ background:#fff !important; color:var(--mg-ink) !important; border:1px solid var(--mg-line) !important; } .btn-default:hover{ border-color:var(--mg-brand) !important; color:var(--mg-brand-strong) !important; } /* ---- 3. Header + search ------------------------------------------- */ .search-input, .search .search-input{ border-radius:var(--mg-radius-sm) !important; border:0; height:42px; font-size:15px; } .search-wrapper, .search-box{ border-radius:var(--mg-radius-sm) !important; overflow:hidden; } .search-trigger, .search button[type="submit"]{ transition:background-color .18s ease; } /* the search pill sits on a WHITE header — make it a clearly defined, cohesive control (was a faint, broken-looking gray outline) */ .header-search{ border:1.5px solid #cdd3dd !important; background:#fff !important; border-radius:30px !important; box-shadow:0 1px 2px rgba(20,22,28,.06), inset 0 0 0 1px rgba(255,255,255,.6) !important; transition:border-color .2s ease, box-shadow .2s ease; } .header-search:hover{ border-color:#aeb6c4 !important; box-shadow:0 2px 6px rgba(20,22,28,.10) !important; } .header-search:focus-within{ border-color:var(--mg-brand-strong) !important; box-shadow:0 0 0 3px rgba(255,152,0,.18) !important; } /* one crisp inner divider after the "All" chip — kill any stray child borders */ .header-search .search-categories{ border-right:1px solid #dfe3ea !important; } .header-search .search-button, .header-search .twitter-typeahead, .header-search .search-input{ border:0 !important; box-shadow:none !important; } /* make the magnifier read clearly as the search action */ .header-search .search-button{ color:var(--mg-brand-strong) !important; transition:color .18s ease; } .header-search .search-button:hover{ color:#e06f00 !important; } .header-search .search-button i, .header-search .search-button svg, .header-search .search-button .fa{ color:inherit !important; } /* refine header spacing + sticky feel */ .header-main, .header-container{ box-shadow:0 1px 0 var(--mg-line); } /* ---- 4. Section / module rhythm ----------------------------------- */ .module-title .title-text, .title-module .title-text{ font-weight:800; letter-spacing:-.02em; } .module-title:after{ background:var(--mg-brand) !important; } /* soft section separation */ #content .module{ margin-bottom:6px; } /* ---- 5. Product & category cards (inner pages) -------------------- */ .product-thumb, .product-layout .product-thumb{ border:1px solid var(--mg-line) !important; border-radius:var(--mg-radius) !important; overflow:hidden; background:#fff; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; box-shadow:var(--mg-shadow-sm); } .product-thumb:hover{ transform:translateY(-6px); box-shadow:var(--mg-shadow-md); border-color:#dfe2e7 !important; } .product-thumb .caption h4 a{ color:var(--mg-ink); font-weight:700; } .product-thumb .price-new, .product-thumb .price{ color:var(--mg-brand-strong); font-weight:800; } /* ---- 6. Hero — full-bleed photo, frosted-glass text panel (35%) --- */ .mg-hero-module{ overflow:visible !important; width:100%; height:auto !important; min-height:0 !important; } .mg-hero.mg-hero-split{ position:relative; isolation:isolate; display:flex; align-items:stretch; min-height:clamp(500px, 54vw, 640px); background:#0d0e12; color:var(--mg-ink); overflow:hidden; } .mg-hero-left{ /* solid white panel; right edge blends into the photo */ position:relative; z-index:2; overflow:hidden; flex:0 0 43%; max-width:43%; display:flex; align-items:center; background:var(--mg-bg); } .mg-hero-right::before{ /* white fade on the photo's left edge -> reads as one continuous image */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to right, var(--mg-bg) 0%, rgba(255,255,255,0) 26%); } /* copy crossfade: all slides share one grid cell -> auto-height, no jump */ .mg-hero-copy-stage{ display:grid; } .mg-hero-copy{ grid-area:1 / 1; opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; pointer-events:none; } .mg-hero-copy.is-active{ opacity:1; transform:none; pointer-events:auto; } .mg-hero-left .mg-hero-inner{ position:relative; z-index:2; width:100%; padding:clamp(30px,3.4vw,52px) clamp(24px,2.4vw,42px); } .mg-hero-right{ /* the clear photo — the hero visual */ position:relative; flex:1 1 65%; overflow:hidden; background:#0d0e12; } .mg-hero-photo{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .9s ease; } .mg-hero-photo.is-active{ opacity:1; } .mg-hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--mg-brand-strong); margin:0 0 16px; } .mg-hero-eyebrow::before{ content:""; width:30px; height:2px; background:var(--mg-brand-strong); } /* NOTE: theme root font-size is 10px, so rem here is half-size — use px. */ .mg-hero-title{ font-size:clamp(34px,3.7vw,58px); font-weight:800; line-height:1.06; letter-spacing:-.028em; text-transform:none; margin:0 0 20px; color:var(--mg-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mg-hero-sub{ font-size:clamp(16px,1.35vw,21px); line-height:1.6; color:#2f343c; margin:0 0 30px; max-width:48ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mg-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; } /* modern buttons (extra specificity beats theme .btn.btn-primary) */ .mg-hero-actions .mg-hero-cta{ background:var(--mg-ink) !important; color:#fff !important; border:0 !important; border-radius:999px !important; padding:15px 30px !important; font-weight:600 !important; display:inline-flex !important; align-items:center; gap:9px; box-shadow:none !important; letter-spacing:.01em; transition:background-color .28s ease, gap .28s ease, transform .28s ease; } .mg-hero-actions .mg-hero-cta::after{ content:"\2192"; font-size:1.05em; transition:transform .28s ease; } .mg-hero-actions .mg-hero-cta:hover{ background:var(--mg-brand-strong) !important; gap:13px; transform:translateY(-2px); } .mg-hero-actions .mg-hero-ghost{ background:transparent !important; color:var(--mg-ink) !important; border:1.5px solid rgba(21,23,29,.32) !important; border-radius:999px !important; padding:15px 28px !important; font-weight:600 !important; letter-spacing:.01em; transition:background-color .28s ease, color .28s ease, border-color .28s ease; } .mg-hero-actions .mg-hero-ghost:hover{ background:var(--mg-ink) !important; color:#fff !important; border-color:var(--mg-ink) !important; } @media (max-width:768px){ .mg-hero.mg-hero-split{ flex-direction:column; align-items:stretch; } .mg-hero-left{ flex:none; max-width:none; border-right:0; } .mg-hero-right{ flex:none; min-height:280px; } .mg-hero-title{ text-transform:none; } .mg-hero-actions .btn{ flex:1 1 auto; text-align:center; justify-content:center; } } /* ---- 6b. Hero slider arrows (bottom-right, over the photo) -------- */ .mg-hero-nav{ position:absolute; z-index:4; display:flex; gap:10px; right:clamp(18px, 2.4vw, 34px); bottom:clamp(16px, 2.2vw, 28px); } .mg-hero-arrow{ width:46px; height:46px; border-radius:50%; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:#fff; background:rgba(13,14,18,.35); border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background-color .25s ease, border-color .25s ease, transform .25s ease; } .mg-hero-arrow:hover{ background:var(--mg-brand-strong); border-color:var(--mg-brand-strong); transform:translateY(-2px); } .mg-hero-arrow svg{ width:22px; height:22px; display:block; } /* ---- 6c. Orange block (container width) w/ 3 white boxes, over hero */ .mg-band-wrap{ /* = theme .container (matches site content width) */ position:relative; z-index:6; margin-top:clamp(-52px, -3vw, -38px); /* pull up ~30% of the block into the hero */ margin-bottom:26px; } .mg-band{ background:linear-gradient(180deg, #1b1d24 0%, #0d0e12 100%); /* black */ border-radius:0; overflow:hidden; padding:0; /* no radius; boxes fill it -> dividers full height */ box-shadow:0 24px 50px rgba(0,0,0,.34); } .mg-band-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0; /* boxes touch; separated by dividers */ align-items:stretch; } .mg-wbox{ display:flex; align-items:flex-start; gap:20px; /* big icon left, multi-line text right */ background:transparent; border:0; border-radius:0; box-shadow:none; padding:clamp(26px,2.8vw,36px) clamp(22px,2.6vw,32px); } .mg-wbox:not(:last-child){ border-right:1px solid rgba(255,255,255,.22); } /* full-height vertical divider */ .mg-wbox-ic{ /* no background — just a big orange icon */ flex:none; color:var(--mg-brand); line-height:0; margin-top:2px; transition:transform .28s ease; } .mg-wbox:hover .mg-wbox-ic{ transform:scale(1.08); } .mg-wbox-ic svg{ width:54px; height:54px; display:block; } .mg-wbox-tx h3{ margin:0 0 8px; font-size:1.4rem; font-weight:800; letter-spacing:-.01em; color:#fff; } .mg-wbox-tx p{ margin:0; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.82); } @media (max-width:768px){ .mg-hero-right::before{ display:none; } /* no photo-edge fade when stacked */ .mg-band-wrap{ margin-top:24px; } /* no overlap on stacked mobile */ .mg-band-grid{ grid-template-columns:1fr; } .mg-wbox:not(:last-child){ border-right:0; border-bottom:1px solid rgba(255,255,255,.22); } /* horizontal divider when stacked */ } /* ---- 7. Footer polish -------------------------------------------- */ .footer, #footer{ background:var(--mg-ink) !important; } .footer a, #footer a{ transition:color .16s ease; } .footer a:hover, #footer a:hover{ color:var(--mg-brand) !important; } /* ---- 7b. Service banners (homepage grid) ------------------------- */ .module-banners .module-item{ border-radius:var(--mg-radius) !important; overflow:hidden; background:#fff; box-shadow:var(--mg-shadow-sm); transition:transform .25s ease, box-shadow .25s ease; } .module-banners .module-item:hover{ transform:translateY(-6px); box-shadow:var(--mg-shadow-md); } .module-banners .module-item img{ display:block; width:100%; transition:transform .5s ease; } .module-banners .module-item:hover img{ transform:scale(1.045); } /* ---- 7c. Hide unconfigured demo notification placeholder --------- */ .module-notification-137{ display:none !important; } /* ---- 7d. Remove the 6-image promo strip under the hero ----------- */ .module-banners-132{ display:none !important; } /* ---- 8. Global niceties + responsive ----------------------------- */ a{ transition:color .16s ease; } ::selection{ background:var(--mg-brand); color:#fff; } img{ max-width:100%; } @media (max-width:767px){ h1{ font-size:1.7rem !important; } h2{ font-size:1.4rem !important; } .btn, .button{ padding:11px 20px; } } /* ---- 9. Services — boxes, 2 per row (arrow-button hover only) ------ */ /* Two cards per row, equal height. On hover ONLY the arrow button animates (fills amber + nudges) — no dark background. Scoped to .service-section so no other columns are affected. */ .service-section .row.flexed-323{ display:flex !important; flex-wrap:wrap !important; align-items:stretch !important; } .service-section .row.flexed-323 > [class*="col-"]{ flex:0 0 50% !important; max-width:50% !important; width:50% !important; display:flex !important; margin-bottom:24px !important; } .service-section .features-item{ width:100%; display:grid !important; grid-template-columns:74px 1fr 46px; grid-template-rows:auto auto; align-items:center; column-gap:20px; row-gap:4px; text-align:left !important; background:#fff !important; border:1px solid var(--mg-line) !important; border-radius:16px !important; padding:28px 26px !important; margin:0 !important; box-shadow:none !important; overflow:visible !important; } .service-section .features-item::before{ content:none !important; } /* kill old accent bar */ .service-section .features-item i{ display:none !important; } /* broken flaticon */ .service-section .feature-count{ grid-row:1 / span 2; grid-column:1; align-self:center; position:static !important; opacity:1 !important; margin:0 !important; width:auto !important; height:auto !important; background:none !important; border-radius:0 !important; font-family:var(--mg-font) !important; font-weight:800 !important; font-size:34px !important; line-height:1 !important; color:transparent !important; -webkit-text-stroke:1.5px var(--mg-brand); font-variant-numeric:tabular-nums; } .service-section .feature-title{ grid-row:1; grid-column:2; align-self:end; margin:0 !important; } .service-section .feature-title a{ font-weight:700; color:var(--mg-ink); } .service-section .features-item p{ grid-row:2; grid-column:2; align-self:start; margin:0 !important; color:var(--mg-muted); font-size:14.5px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .service-section .features-item::after{ /* arrow button — the only hover animation */ content:"\2192"; grid-row:1 / span 2; grid-column:3; align-self:center; justify-self:end; width:46px; height:46px; border-radius:50%; border:1px solid var(--mg-line); background:#fff; display:grid; place-items:center; color:var(--mg-ink); font-size:18px; transition:background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; } .service-section .features-item:hover::after{ background:var(--mg-brand-strong); border-color:var(--mg-brand-strong); color:#fff; transform:translateX(3px); } @media (max-width:767px){ .service-section .row.flexed-323 > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; } } @media (max-width:479px){ .service-section .features-item{ grid-template-columns:52px 1fr; column-gap:14px; padding:22px 18px !important; } .service-section .features-item::after{ display:none; } .service-section .feature-count{ font-size:30px !important; } } /* ---- 10. News — immersive overlay cards (chosen: Option A) --------- */ /* Also repairs the broken carousel: slides ship with a mangled "post-layoutswiper-slide" class, so Swiper sized them at random widths. We force a uniform grid, then float text over the image. */ .module-blog_posts-40 .swiper-wrapper{ display:grid !important; grid-template-columns:repeat(2, 1fr); gap:22px; transform:none !important; } .module-blog_posts-40 .swiper-wrapper > *{ /* .post-layoutswiper-slide = the card */ position:relative; width:auto !important; height:400px !important; margin:0 !important; border:0 !important; border-radius:16px !important; overflow:hidden; background:var(--mg-ink); box-shadow:var(--mg-shadow-sm); } .module-blog_posts-40 .post-thumb{ height:100%; display:block !important; } .module-blog_posts-40 .image{ position:absolute !important; inset:0; width:100%; height:100% !important; overflow:hidden; margin:0 !important; } .module-blog_posts-40 .image a{ display:block; height:100%; } .module-blog_posts-40 .image img{ width:100% !important; height:100% !important; object-fit:cover; display:block; transition:transform .6s ease; } .module-blog_posts-40 .swiper-wrapper > *:hover .image img{ transform:scale(1.06); } .module-blog_posts-40 .image::after{ /* dark gradient + amber glow */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(21,23,29,0) 26%, rgba(21,23,29,.55) 60%, rgba(21,23,29,.95) 100%), radial-gradient(90% 70% at 90% 6%, rgba(255,152,0,.30), transparent 60%); } .module-blog_posts-40 .p-date, .module-blog_posts-40 .p-date-image{ /* floating date chip, top-left */ position:absolute !important; top:15px; left:15px; z-index:3; margin:0 !important; display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:6px 10px; color:#fff !important; font-weight:700; font-size:12px; line-height:1; } .module-blog_posts-40 .caption{ /* content overlaid at the bottom */ position:absolute !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; z-index:3; padding:22px !important; background:none !important; display:block !important; } .module-blog_posts-40 .post-stats, .module-blog_posts-40 .description{ display:none !important; } /* clean immersive look */ .module-blog_posts-40 .name{ margin:0 0 12px !important; } .module-blog_posts-40 .name a{ color:#fff !important; font-weight:700; font-size:1.12rem; line-height:1.3; } .module-blog_posts-40 .button-group{ margin:0 !important; } .module-blog_posts-40 .btn-read-more{ background:none !important; border:0 !important; padding:0 !important; color:#fff !important; font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:8px; transition:gap .25s ease, color .25s ease; } .module-blog_posts-40 .btn-read-more::after{ content:"\2192"; color:var(--mg-brand); font-size:1.05em; } .module-blog_posts-40 .swiper-wrapper > *:hover .btn-read-more{ color:var(--mg-brand); gap:12px; } .module-blog_posts-40 .swiper-buttons, .module-blog_posts-40 .swiper-pagination{ display:none !important; } @media (max-width:575px){ .module-blog_posts-40 .swiper-wrapper{ grid-template-columns:1fr; } } /* ---- 11. Light header — white top bar (logo area) ----------------- */ /* Header shipped black with near-white text; flip to white and darken text/icons so nothing goes invisible. */ .header-classic{ background:#fff !important; border-bottom:1px solid var(--mg-line); } /* very-top social bar → dark, full-width, taller */ .header-classic .top-bar{ background:#15171d !important; border-bottom:0 !important; box-sizing:border-box !important; width:100vw !important; max-width:100vw !important; flex:none !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:12px calc(50vw - 50%) !important; min-height:54px !important; } .header-classic .top-bar a, .header-classic .top-bar span, .header-classic .top-bar i, .header-classic .top-bar .links-text, .header-classic .top-bar .language-title, .header-classic .top-bar .language-flag-title, .header-classic .top-bar .symbol{ color:#fff !important; } .header-classic .top-bar a:hover{ color:var(--mg-brand) !important; } .header-classic a, .header-classic span, .header-classic i, .header-classic .links-text, .header-classic .language-title, .header-classic .language-flag-title, .header-classic .symbol, .header-classic .nav-link, .header-classic #menu > li > a{ color:var(--mg-ink) !important; } .header-classic a:hover, .header-classic .nav-link:hover, .header-classic #menu > li > a:hover{ color:var(--mg-brand-strong) !important; } .header-classic .count-badge{ background:var(--mg-brand-strong) !important; color:#fff !important; } /* ---- 12. Dark FULL-WIDTH menu bar (white header, dark nav) -------- */ /* Break the menu row out to the full viewport width (negative-margin full-bleed) while padding keeps the items inside the container. Labels live in inner s, so colour those white too. */ .desktop-main-menu-wrapper{ background:#15171d !important; box-sizing:border-box !important; width:100vw !important; max-width:100vw !important; flex:none !important; align-items:center !important; min-height:60px !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; padding:10px calc(50vw - 50%) !important; } .desktop-main-menu-wrapper .main-menu-item > a, .desktop-main-menu-wrapper .main-menu-item > a span, .desktop-main-menu-wrapper .main-menu-item > a .links-text, .desktop-main-menu-wrapper .main-menu-item > a i{ color:#fff !important; } .desktop-main-menu-wrapper .main-menu-item > a:hover, .desktop-main-menu-wrapper .main-menu-item > a:hover span, .desktop-main-menu-wrapper .main-menu-item > a:hover .links-text{ color:var(--mg-brand) !important; } /* ===================================================================== 8. Homepage section enhancements (Services, Bienvenue, News, Footer) ===================================================================== */ /* ---- 8a. Services "We Provide Best Service" — clickable cards ----- */ .features-item{ position:relative; cursor:pointer; border-radius:16px; transition:transform .3s ease, box-shadow .3s ease; } .features-item:hover{ transform:translateY(-8px); box-shadow:0 20px 46px rgba(20,22,28,.12); } /* make the WHOLE card clickable via the title's existing link (stretched link) */ .features-item .feature-title a::after{ content:""; position:absolute; inset:0; z-index:3; } /* the number grows on hover */ .features-item .feature-count{ display:inline-block; transform-origin:left center; transition:transform .3s ease, color .3s ease; } .features-item:hover .feature-count{ transform:scale(1.28); color:var(--mg-brand-strong); } /* directional arrow cue — appears and grows on hover */ .features-item::after{ content:"\2192"; position:absolute; right:20px; bottom:16px; z-index:1; pointer-events:none; font-family:var(--mg-font); font-weight:800; font-size:22px; line-height:1; color:var(--mg-brand-strong); opacity:0; transform:translateX(-10px); transition:opacity .3s ease, transform .3s ease; } .features-item:hover::after{ opacity:1; transform:translateX(0) scale(1.35); } /* ---- 8b. "Bienvenue chez Mirchen" — 3 orange boxes: equal height + icons */ .about-section .row.flex323:not(.flexwraped){ display:flex; flex-wrap:wrap; align-items:stretch; } .about-section .row.flex323:not(.flexwraped) > [class*="col"]{ display:flex; } .about-section .row.flex323:not(.flexwraped) > [class*="col"] .funfact{ width:100%; } /* the theme's flaticon glyphs don't render locally -> inject reliable white SVG icons */ .about-section .funfact .icon [class*="flaticon"], .about-section .funfact .icon i{ display:none !important; } .about-section .funfact .icon{ display:inline-flex; align-items:center; justify-content:center; } .about-section .funfact .icon::before{ content:""; display:block; width:54px; height:54px; background:center/contain no-repeat; } .about-section .row.flex323:not(.flexwraped) > [class*="col"]:nth-child(1) .funfact .icon::before{ background-image:url("data:image/svg+xml,"); } .about-section .row.flex323:not(.flexwraped) > [class*="col"]:nth-child(2) .funfact .icon::before{ background-image:url("data:image/svg+xml,"); } .about-section .row.flex323:not(.flexwraped) > [class*="col"]:nth-child(3) .funfact .icon::before{ background-image:url("data:image/svg+xml,"); } /* ---- 8c. "Nos news" — bigger text + styled read-more w/ arrow ----- */ .module-blog_posts .name, .module-blog_posts .name a{ font-size:19px !important; font-weight:800 !important; line-height:1.3 !important; } .module-blog_posts .description{ font-size:15px !important; line-height:1.62 !important; } .module-blog_posts .btn-read-more{ font-size:13px !important; font-weight:700 !important; letter-spacing:.05em; text-transform:uppercase; color:var(--mg-brand-strong) !important; background:transparent !important; border:0 !important; padding:6px 0 !important; box-shadow:none !important; display:inline-flex !important; align-items:center; gap:9px; transition:color .25s ease, gap .25s ease; } .module-blog_posts .btn-read-more::after{ content:"\2192"; font-size:1.2em; transition:transform .28s ease; } .module-blog_posts .btn-read-more:hover{ color:var(--mg-ink) !important; gap:12px; } .module-blog_posts .btn-read-more:hover::after{ transform:translateX(6px); } /* ---- 8d. Footer — bigger, styled subscribe ----------------------- */ footer{ padding-top:74px !important; padding-bottom:30px !important; } footer .links-menu .links-text{ font-size:14px; } footer .module-newsletter .newsletter-text{ font-size:14.5px; } .module-newsletter .input-group{ border-radius:10px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.28); background:#fff; } .module-newsletter .input-group input.form-control, .module-newsletter input[type="text"], .module-newsletter input[type="email"]{ height:52px !important; border:0 !important; padding:0 18px !important; font-size:15px !important; color:var(--mg-ink) !important; background:#fff !important; } .module-newsletter .input-group-btn > .btn, .module-newsletter .input-group .btn, .module-newsletter button.btn{ height:52px !important; padding:0 24px !important; border:0 !important; border-radius:0 !important; background:var(--mg-brand-strong) !important; color:#fff !important; font-weight:700 !important; letter-spacing:.04em; transition:background-color .25s ease; } .module-newsletter .btn:hover{ background:#e06f00 !important; } /* ===================================================================== 13. UX FIXES (2026-09-02) — menu separators, click focus, gallery, and a full responsive/mobile pass. ===================================================================== */ /* ---- 13a. Menu item separators: red -> brand orange --------------- */ /* The Journal skin paints the vertical dividers between nav items (and the menu container edges) a dark red (rgb(168,8,27)). Recolor to brand. */ .desktop-main-menu-wrapper .main-menu, .desktop-main-menu-wrapper .main-menu > *, .desktop-main-menu-wrapper .main-menu a, .main-menu[class*="main-menu-"], .main-menu[class*="main-menu-"] a, .main-menu-item > a{ border-color:var(--mg-brand) !important; } /* ---- 13b. Kill the ugly click "border"/outline (keep keyboard a11y) */ /* Removes the focus ring on mouse/touch, but restores a clean brand ring for keyboard users via :focus-visible. Also removes mobile tap flash. */ *{ -webkit-tap-highlight-color:transparent; } a, button, .btn, .button, input, select, textarea, [tabindex], [role="button"], .main-menu-item > a, .feature-title a, .features-item, .mg-hero-arrow, .swiper-slide, .product-thumb a{ outline:none !important; } a:focus, button:focus, .btn:focus, .button:focus, [tabindex]:focus, [role="button"]:focus, .main-menu-item > a:focus, .features-item:focus{ outline:none !important; box-shadow:none; } a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible{ outline:2px solid var(--mg-brand-strong) !important; outline-offset:2px !important; } /* inputs keep a visible border on focus, not an outline box */ input:focus, select:focus, textarea:focus{ outline:none !important; } /* ---- 13c. Gallery page — responsive image grid ------------------- */ .mg-gallery{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:8px 0 12px; } .mg-gallery figure{ position:relative; margin:0; border-radius:14px; overflow:hidden; box-shadow:var(--mg-shadow-sm); background:var(--mg-bg-soft); aspect-ratio:4 / 3; } .mg-gallery a{ display:block; width:100%; height:100%; } .mg-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .mg-gallery figure:hover img{ transform:scale(1.06); } .mg-gallery figcaption{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px 16px 12px; color:#fff; font-weight:600; font-size:14px; background:linear-gradient(180deg, rgba(21,23,29,0), rgba(21,23,29,.82)); opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; } .mg-gallery figure:hover figcaption{ opacity:1; transform:none; } .mg-gallery-lead{ font-size:16px; color:var(--mg-muted); line-height:1.7; max-width:70ch; margin:0 0 26px; } @media (max-width:768px){ .mg-gallery{ grid-template-columns:repeat(2, 1fr); gap:14px; } } @media (max-width:479px){ .mg-gallery{ grid-template-columns:1fr; } } /* ===================================================================== 14. RESPONSIVE / MOBILE PASS — make every page behave < 992px. ===================================================================== */ /* never let anything cause a horizontal scrollbar on small screens */ @media (max-width:991px){ html, body{ max-width:100%; overflow-x:hidden; } img, video, iframe, table{ max-width:100%; } } /* ---- 14a. Hero on tablet & phone --------------------------------- */ @media (max-width:991px){ .mg-hero.mg-hero-split{ min-height:0; } .mg-hero-left{ flex:0 0 46%; max-width:46%; } .mg-hero-title{ font-size:clamp(28px,4.4vw,42px); } .mg-hero-sub{ font-size:16px; max-width:100%; } } @media (max-width:768px){ .mg-hero.mg-hero-split{ flex-direction:column; } .mg-hero-left{ flex:1 1 auto !important; max-width:100% !important; width:100%; order:2; } .mg-hero-right{ flex:1 1 auto !important; width:100%; min-height:320px; order:1; } .mg-hero-left .mg-hero-inner{ padding:26px 20px 30px; } .mg-hero-title{ font-size:clamp(26px,6vw,36px); margin-bottom:14px; } .mg-hero-sub{ font-size:15px; margin-bottom:22px; } .mg-hero-eyebrow{ font-size:12px; } .mg-hero-actions{ gap:10px; } .mg-hero-actions .mg-hero-cta, .mg-hero-actions .mg-hero-ghost{ flex:1 1 46%; justify-content:center; padding:13px 18px !important; } /* arrows now live INSIDE the photo -> keep them bottom-right of the image */ .mg-hero-nav{ right:12px; bottom:12px; top:auto; } .mg-hero-arrow{ width:40px; height:40px; } } /* ---- 14b. Info band (24/7 / delivery / network) on phone --------- */ @media (max-width:768px){ .mg-band-wrap{ margin-top:22px !important; padding-left:14px; padding-right:14px; } .mg-wbox{ padding:15px 15px; gap:13px; } .mg-wbox-ic svg{ width:36px; height:36px; } .mg-wbox-tx h3{ font-size:1.55rem; margin-bottom:5px; } .mg-wbox-tx p{ font-size:1.25rem; line-height:1.5; } } /* ---- 14c. Generic Journal columns: stack under 768 --------------- */ /* Many theme rows use fixed col widths that don't collapse well. Force the common homepage flex rows to wrap to a single column on phones. */ @media (max-width:768px){ /* welcome "funfact" boxes stack 1-up; the logo grid (.flexwraped) goes 2-up */ .about-section .row.flex323:not(.flexwraped) > [class*="col"], .about-section .dispflex > [class*="col"], .dispflex{ flex:0 0 100% !important; max-width:100% !important; } .about-section .row.flex323.flexwraped > [class*="col"]{ flex:0 0 50% !important; max-width:50% !important; /* Our companies: 2 logos per row */ } .about-section .dispflex{ display:block !important; } .flexedd{ flex-direction:column !important; } .funfact{ margin-bottom:16px; } } /* ---- 14d. Headings / spacing scale down -------------------------- */ @media (max-width:768px){ .module-title .title-text, .title-module .title-text{ font-size:2.4rem !important; line-height:1.2; } #content .module{ margin-bottom:10px; } .container{ padding-left:16px !important; padding-right:16px !important; } } @media (max-width:575px){ .module-title .title-text, .title-module .title-text{ font-size:2.1rem !important; } } /* ---- 14e. News cards: 1-up earlier + product grids --------------- */ @media (max-width:768px){ .module-blog_posts-40 .swiper-wrapper{ grid-template-columns:1fr !important; } .module-blog_posts-40 .swiper-wrapper > *{ height:300px !important; } .product-layout{ width:50% !important; } } @media (max-width:479px){ .product-layout{ width:100% !important; } } /* ---- 14f. Footer columns stack cleanly on phone ------------------ */ @media (max-width:768px){ footer{ padding-top:44px !important; } footer .grid-cols, footer .grid-rows{ display:block !important; } footer [class*="grid-col"], footer .footer-block{ width:100% !important; max-width:100% !important; flex:none !important; margin-bottom:18px !important; } .module-newsletter .input-group{ display:flex; } } /* ---- 14g. Category subcategory "refine" carousel — fix overlap ---- */ /* The subcategory tiles ship with a mangled "refine-itemswiper-slide" class, so Swiper sizes the slides at random widths and they overlap (same bug as the news carousel). Force a clean responsive grid and neutralize Swiper's inline transform/width. */ .swiper-wrapper:has(> [class*="refine-item"]){ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 14px !important; transform:none !important; width:100% !important; } [class*="refine-item"][class*="swiper-slide"]{ width:auto !important; height:auto !important; margin:0 !important; left:auto !important; right:auto !important; } [class*="refine-item"][class*="swiper-slide"] > a{ display:block; text-align:center; } .refine-name, [class*="refine-item"] .refine-name{ display:block; margin-top:8px; color:var(--mg-ink); font-weight:600; font-size:14px; line-height:1.35; white-space:normal !important; } /* the swiper's carousel arrows/pagination are meaningless once it's a grid */ .swiper-container:has([class*="refine-item"]) .swiper-buttons, .swiper-container:has([class*="refine-item"]) .swiper-pagination{ display:none !important; } @media (max-width:479px){ .swiper-wrapper:has(> [class*="refine-item"]){ grid-template-columns:repeat(2, 1fr); } } /* ---- 14h. Hero: tighten the copy/button gap on phones ------------- */ /* All slides share one crossfade cell, so its height = the tallest copy (the long China caption). Cap sub lines on phones so shorter slides don't leave a big empty band above the buttons. */ @media (max-width:768px){ .mg-hero-sub{ -webkit-line-clamp:2; margin-bottom:18px; } .mg-hero-copy-stage{ margin-bottom:6px; } } /* ===================================================================== 15. Header tweaks + social icons (2026-09-02 round 2). ===================================================================== */ /* ---- 15a. Social icons — bigger, spaced, not overlapping ---------- */ .icons-menu ul{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; padding-left:8px; margin:0; list-style:none; } .icons-menu .icons-menu-item{ width:auto !important; margin:0 !important; padding:0 !important; font-size:20px !important; line-height:1; } .icons-menu .icons-menu-item a{ display:inline-flex; align-items:center; justify-content:center; font-size:20px !important; line-height:1; width:auto !important; height:auto !important; } .icons-menu .icons-menu-item i, .icons-menu .icons-menu-item svg, .icons-menu .icons-menu-item span, .icons-menu .icons-menu-item [class*="flaticon"], .icons-menu .icons-menu-item [class*="webexflaticon"]{ font-size:20px !important; width:auto !important; height:auto !important; line-height:1; } /* ---- 15b. Mobile header: LOGO left, HAMBURGER right, no refresh --- */ @media (max-width:991px){ .mobile-bar{ display:flex !important; align-items:center !important; } .mobile-logo-wrapper{ order:1 !important; margin-right:auto !important; margin-left:0 !important; justify-content:flex-start !important; text-align:left !important; } .mobile-cart-wrapper{ order:2 !important; } .menu-trigger{ order:3 !important; margin-left:auto !important; } /* the decorative "refresh"/category shortcut icon in the mobile bar */ .mobile-bar .mobile-custom-menu{ display:none !important; } /* language text was dark on the dark mobile top bar -> make it white. Needs .header-classic prefix to beat §11's dark override. */ .header-classic .language-title, .header-classic .language-flag-title, .header-classic .language-flag-title .language-title, .header-classic .language a, .header-classic .language span, .header-classic .language i, .header-classic .language .symbol, .language .language-title, .top-bar .language-title{ color:#fff !important; } /* search pill: shorter (same full width) on phones */ .search-input, .search .search-input{ height:36px !important; font-size:14px !important; } .mobile-search-wrapper .header-search, .mobile-search-wrapper .search-input{ min-height:0 !important; } .mobile-search-wrapper .header-search{ padding:0 !important; } .header-search .search-button, .header-search .search-categories{ padding-top:0 !important; padding-bottom:0 !important; } } /* ===================================================================== 16. Round 3 (2026-09-02): testimonial video, logo, mobile counters, and an app-drawer BOTTOM-SHEET mobile menu. ===================================================================== */ /* ---- 16a. Testimonial video bg must COVER the section --------------- */ /* The theme centres the video with position:50%/50% + translate(-50%,-50%). We pin it to top/left 0 and size it 100%×100% with object-fit:cover, so the theme's translate MUST be neutralised or the video is shoved up-left and the bottom-right of the section is left uncovered (the "not covering" bug). */ .video-bg, video.video-bg, .module-testimonials video, [class*="video-bg"] video, .video-bg-holder video{ object-fit:cover !important; width:100% !important; height:100% !important; top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; min-width:100% !important; min-height:100% !important; transform:none !important; } /* ---- 16b. Logo: remove excess left space on mobile (user request) --- */ @media (max-width:991px){ .mobile-header-active #logo a, .mobile-bar #logo a, .mobile-logo-wrapper a, .mobile-logo-wrapper #logo{ padding:0 !important; margin-left:-11px !important; } /* search pill height on mobile (user rule) */ .mobile-header-active #search .header-search{ height:50px; max-height:40px; } } /* ---- 16c. Counters "450 Projects…" — cleaner mobile stat cards ------ */ @media (max-width:768px){ /* keep them 3-across (they were forced 1-up by §14c) and style as cards */ .about-section .row.flex323 > [class*="col"]:has(.counter){ flex:0 0 33.333% !important; max-width:33.333% !important; margin-bottom:0 !important; padding-left:9px !important; padding-right:9px !important; /* more space between cards */ } .about-section [class*="col"]:has(.counter) .funfact{ border-radius:10px; padding:18px 8px !important; text-align:center; width:100%; margin:0 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; box-shadow:0 8px 20px rgba(245,124,0,.26); min-height:118px; } .about-section [class*="col"]:has(.counter) .funfact .icon{ display:none !important; } .about-section [class*="col"]:has(.counter) .counter, .about-section [class*="col"]:has(.counter) .funfact .number{ font-size:28px !important; font-weight:800 !important; color:#fff !important; line-height:1; } .about-section [class*="col"]:has(.counter) .funfact .title, .about-section [class*="col"]:has(.counter) .funfact p, .about-section [class*="col"]:has(.counter) .funfact > span:not(.counter):not(.number), .about-section [class*="col"]:has(.counter) .funfact div{ font-size:11.5px !important; color:rgba(255,255,255,.95) !important; line-height:1.25; font-weight:700; text-transform:uppercase; letter-spacing:.02em; } /* drop the little divider line under the label if the theme draws one */ .about-section [class*="col"]:has(.counter) .funfact hr, .about-section [class*="col"]:has(.counter) .funfact .divider{ display:none !important; } } /* ---- 16d. MOBILE MENU -> app-drawer BOTTOM SHEET ------------------- */ @media (max-width:991px){ .mobile-main-menu-container{ top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; width:100% !important; max-width:100% !important; height:47vh !important; min-height:340px !important; max-height:82vh !important; border-radius:22px 22px 0 0 !important; transform:translate3d(0,100%,0) !important; /* closed: below the screen */ box-shadow:0 -16px 46px rgba(15,17,22,.34) !important; display:flex !important; flex-direction:column; overflow:hidden !important; } /* OPEN: slide up (explicit high-specificity override of my base above) */ html.mobile-main-menu-container-open .mobile-main-menu-container, html.mobile-main-menu-container-open .mobile-main-menu-container.animating{ transform:translate3d(0,0,0) !important; } /* the sheet body is light so the white tiles lift off it */ .mobile-main-menu-container{ background:var(--mg-bg-soft) !important; } /* grabber handle (dark, on the light sheet) */ .mobile-main-menu-container::before{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:42px; height:5px; border-radius:3px; background:rgba(20,22,28,.18); z-index:10; } /* header: clean white bar, dark title + round close button */ .mobile-main-menu-container .mobile-wrapper-header{ flex:0 0 auto; padding:22px 18px 14px !important; min-height:0 !important; background:var(--mg-bg-soft) !important; display:flex !important; align-items:center; justify-content:space-between; } .mobile-main-menu-container .mobile-wrapper-header, .mobile-main-menu-container .mobile-wrapper-header > span, .mobile-main-menu-container .mobile-wrapper-header > span span{ color:var(--mg-ink) !important; font-size:16px !important; font-weight:800 !important; letter-spacing:-.01em !important; text-transform:none !important; } .mobile-main-menu-container .mobile-wrapper-header > a{ width:36px; height:36px; border-radius:50%; background:#fff !important; color:var(--mg-ink) !important; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--mg-shadow-sm); font-size:0 !important; } .mobile-main-menu-container .mobile-wrapper-header > a::before{ font-size:16px !important; color:var(--mg-ink) !important; } /* the menu list -> app grid of tiles */ .mobile-main-menu-container .mobile-menu, .mobile-main-menu-container .mobile-top-menu-wrapper{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:16px; background:var(--mg-bg-soft); } .mobile-main-menu-container .j-menu{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:12px !important; padding:8px 16px 22px !important; margin:0 !important; list-style:none !important; width:100% !important; } .mobile-main-menu-container .j-menu > li{ margin:0 !important; padding:0 !important; border:0 !important; width:auto !important; min-width:0 !important; float:none !important; } .mobile-main-menu-container .j-menu > li > a{ display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start; gap:11px; padding:16px 4px 14px !important; min-height:100px; border-radius:18px; background:#fff !important; color:var(--mg-ink) !important; border:1px solid rgba(20,22,28,.06); font-weight:600 !important; font-size:12px !important; text-align:center; line-height:1.22; text-transform:none !important; box-shadow:0 3px 10px rgba(20,22,28,.06); white-space:normal !important; word-break:break-word; overflow-wrap:anywhere; hyphens:none; transition:transform .16s ease, box-shadow .16s ease; } .mobile-main-menu-container .j-menu > li > a .links-text{ color:var(--mg-ink) !important; font-weight:600 !important; white-space:normal !important; display:block; } .mobile-main-menu-container .j-menu > li > a:active{ transform:scale(.96); box-shadow:0 2px 6px rgba(20,22,28,.08); } /* hide theme's own icons, dropdown toggles and submenus in the grid */ .mobile-main-menu-container .j-menu > li > a > i, .mobile-main-menu-container .j-menu > li > a::after, .mobile-main-menu-container .j-menu .j-dropdown, .mobile-main-menu-container .j-menu .main-menu-item-toggle, .mobile-main-menu-container .j-menu [class*="toggle"]{ display:none !important; } /* icon CHIP: orange gradient rounded square holding a white line icon */ .mobile-main-menu-container .j-menu > li > a::before{ content:""; width:48px; height:48px; flex:none; border-radius:15px; background-repeat:no-repeat, no-repeat; background-position:center, center; background-size:25px 25px, 100% 100%; box-shadow:0 7px 16px rgba(245,124,0,.32); } .mobile-main-menu-container .j-menu > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(6) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } .mobile-main-menu-container .j-menu > li:nth-child(7) > a::before{ background-image:url("data:image/svg+xml,"), linear-gradient(140deg,#ffb64d,#f57c00); } } /* ===================================================================== 17. Round 3b — services heading size (mobile) + desktop social spacing ===================================================================== */ /* 17a. "Services We Offer" / "We Provide Best Service" too big on phones */ @media (max-width:768px){ .service-section h5, .service-section .section-title, .service-section .text-primary-color.text-underline{ font-size:12px !important; line-height:1.3 !important; margin-bottom:8px !important; } .service-section h2, .service-section h2.mrb-30{ font-size:18px !important; line-height:1.25 !important; margin-bottom:18px !important; } /* the individual service card titles were 26px -> tighten for phones */ .service-section .feature-title, .service-section .feature-title a{ font-size:16px !important; line-height:1.25 !important; } } /* 17b. Desktop top-bar social icons jammed at the left edge -> nudge right */ @media (min-width:992px){ .top-bar .top-menu-2, .header-classic .top-bar .top-menu.top-menu-2{ padding-left:20px !important; } } /* ===================================================================== 18. Mobile polish (2026-09-03): hero copy crossfade, info-band padding, about-image spacing, counter icons, service card height + arrow, and a simplified FLAT modern-icon mobile menu (no chip box / shadows). ===================================================================== */ /* ---- 18a. Hero copy — sequential fade so the two slide texts never overlap on mobile. The outgoing copy fades out fast; the incoming one waits, then fades in — a clean swap instead of a muddy crossfade. ---- */ @media (max-width:768px){ .mg-hero-copy{ transition:opacity .2s ease !important; transform:none !important; } .mg-hero-copy.is-active{ transition:opacity .32s ease .16s !important; } } /* ---- 18b. Info band (24/7 Support …) — more top/bottom padding ----- */ @media (max-width:768px){ .mg-wbox{ padding:22px 16px !important; gap:14px; } } /* ---- 18c. About: space between the image and the "Welcome…" text --- */ @media (max-width:768px){ .about-section .row.dispflex{ display:block !important; } .about-section .row.dispflex > [class*="col"]:first-child{ margin-bottom:34px !important; } } /* ---- 18d. Counter cards (450 / 1864 / 8) — restore icons + widen --- */ @media (max-width:768px){ /* wider cards: trim the side gutter (was 9px) so each box grows */ .about-section .row.flex323 > [class*="col"]:has(.counter){ padding-left:5px !important; padding-right:5px !important; } .about-section [class*="col"]:has(.counter) .funfact{ min-height:130px !important; } /* bring the injected white SVG icon back (§16c had hidden it on mobile) */ .about-section [class*="col"]:has(.counter) .funfact .icon{ display:inline-flex !important; margin-bottom:2px; } .about-section [class*="col"]:has(.counter) .funfact .icon::before{ width:30px !important; height:30px !important; } } /* ---- 18e. Services cards — shorter (less vertical padding) + the direction arrow restored on phones (§9 had hidden it < 480px) ------- */ @media (max-width:768px){ /* the theme forces min-height:280px (rows stretch, content floats) — let the card shrink to its content on phones so it isn't over-tall */ .service-section .features-item{ min-height:0 !important; height:auto !important; align-content:center; padding:16px 20px !important; } /* no hover on touch — force the arrow visible (§8a keeps it opacity:0 for the desktop hover reveal) and orange, sat in the grid's 3rd column */ .service-section .features-item::after{ opacity:1 !important; position:static !important; transform:none !important; border-color:var(--mg-brand) !important; color:var(--mg-brand-strong) !important; background:var(--mg-brand-050) !important; } } @media (max-width:479px){ .service-section .features-item{ grid-template-columns:48px 1fr 36px !important; column-gap:12px !important; padding:14px 15px !important; } .service-section .features-item::after{ display:grid !important; width:34px !important; height:34px !important; font-size:15px !important; } } /* ---- 18f. Mobile menu — simple & flat: drop the orange gradient chip "box" and every shadow; show one clean modern orange line icon. ----- */ @media (max-width:991px){ .mobile-main-menu-container .j-menu > li > a{ box-shadow:none !important; border:1px solid var(--mg-line) !important; min-height:94px; gap:9px; } .mobile-main-menu-container .j-menu > li > a:active{ box-shadow:none !important; } /* the icon: no chip, no gradient, no shadow — just the line icon. NOTE: items assigned an icon in Journal's menu settings (Home/About/ News/Contact) also render a theme icomoon *font glyph* on this same ::before → 2 overlapping icons. Kill the glyph (content + font-size:0) while keeping our background SVG (backgrounds ignore font-size). */ .mobile-main-menu-container .j-menu > li > a::before{ content:"" !important; font-size:0 !important; line-height:0 !important; color:transparent !important; width:32px !important; height:32px !important; border-radius:0 !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; box-shadow:none !important; } /* close button: flat (no shadow) */ .mobile-main-menu-container .mobile-wrapper-header > a{ box-shadow:none !important; background:#fff !important; } /* 7 modern single-line icons, brand-orange stroke */ .mobile-main-menu-container .j-menu > li:nth-child(1) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(2) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(3) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(4) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(5) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(6) > a::before{ background-image:url("data:image/svg+xml,") !important; } .mobile-main-menu-container .j-menu > li:nth-child(7) > a::before{ background-image:url("data:image/svg+xml,") !important; } } /* ===================================================================== 19. PRODUCT LISTING (category / brand / search / special) — responsive equal-height grid + tidy cards. Journal ships the card class MANGLED ("product-layouthas-extra-button", no space) so target [class*=]. (2026-09-03) ===================================================================== */ /* 19a. the grid -> responsive auto-fill, equal-height cells ----------- */ .main-products.product-grid{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)) !important; gap:22px !important; float:none !important; width:auto !important; margin:0 0 6px !important; } .main-products.product-grid > [class*="product-layout"]{ width:auto !important; max-width:none !important; min-height:0 !important; float:none !important; margin:0 !important; padding:0 !important; display:flex !important; } .main-products.product-grid > [class*="product-layout"] > .product-thumb{ width:100%; margin:0 !important; display:flex; flex-direction:column; /* border/radius from §5 */ } /* 19b. uniform square image area (no more ragged heights) ------------- */ .main-products .product-thumb .image{ position:relative; margin:0 !important; aspect-ratio:1 / 1; overflow:hidden; border-bottom:1px solid var(--mg-line); background:var(--mg-bg-soft); } .main-products .product-thumb .image > a[class*="product-img"], .main-products .product-thumb .image > a[class*="product-img"] > div{ display:block !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; } .main-products .product-thumb .image img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s ease; } .main-products .product-thumb:hover .image img{ transform:scale(1.05); } .main-products .product-thumb .product-labels{ top:10px !important; right:10px !important; left:auto !important; z-index:2; } /* 19c. caption fills the card; the action row pins to the bottom ------ */ .main-products .product-thumb .caption{ display:flex !important; flex-direction:column; flex:1 1 auto; padding:14px 15px 13px !important; text-align:left !important; gap:5px; } /* theme forces .name/.stats to display:flex with a fixed height + overflow visible -> multi-line names spill out and overlap. Force clean block flow (targeted, so the mobile .description hide below still wins). */ .main-products .product-thumb .caption > *{ height:auto !important; min-height:0 !important; max-height:none !important; position:static !important; } .main-products .product-thumb .stats{ order:1; display:block !important; margin:0 !important; font-size:11.5px; color:var(--mg-muted); } .main-products .product-thumb .name{ order:2; display:block !important; margin:0 !important; } .main-products .product-thumb .name a{ font-weight:700; font-size:15px; line-height:1.34; color:var(--mg-ink); display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical; overflow:hidden !important; } .main-products .product-thumb .description{ order:3; margin:0 !important; font-size:12.5px; color:var(--mg-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .main-products .product-thumb .price{ order:4; margin:6px 0 0 !important; font-weight:800; font-size:16px; color:var(--mg-brand-strong); } .main-products .product-thumb .price .price-tax{ display:block; font-size:11.5px; font-weight:600; color:var(--mg-muted); margin-top:2px; } .main-products .product-thumb .rating{ order:5; margin:2px 0 0 !important; } .main-products .product-thumb .rating.no-rating{ display:none !important; } /* hide empty stars */ .main-products .product-thumb .extra-group{ order:6; margin-top:auto !important; padding-top:11px; } /* 19d. responsive column counts -------------------------------------- */ @media (max-width:1024px){ .main-products.product-grid{ grid-template-columns:repeat(auto-fill, minmax(190px,1fr)) !important; } } @media (max-width:600px){ .main-products.product-grid{ grid-template-columns:repeat(2, 1fr) !important; gap:14px !important; } .main-products .product-thumb .caption{ padding:12px 12px 12px !important; } .main-products .product-thumb .description{ display:none !important; } /* declutter on phones */ .main-products .product-thumb .name a{ font-size:14px; } } @media (max-width:360px){ .main-products.product-grid{ grid-template-columns:1fr !important; } } /* 19e. results / pagination bar — tidy + responsive ------------------ */ .row.pagination-results{ align-items:center; margin-top:6px !important; padding-top:14px; border-top:1px solid var(--mg-line); } .row.pagination-results .pagination{ margin:0; } @media (max-width:575px){ .row.pagination-results > [class*="col-"]{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; text-align:center !important; } .row.pagination-results .col-sm-6.text-right{ margin-top:8px; } .row.pagination-results .pagination{ justify-content:center; display:flex; flex-wrap:wrap; } } /* 19f. PRODUCT DETAIL page — the wrapper class is mangled too ("product-infohas-extra-button"), so the theme's 2-column layout never applies and image+details stack full-width even on desktop. Restore it. */ @media (min-width:768px){ [class*="product-info"]{ display:flex !important; flex-wrap:wrap; align-items:flex-start; gap:34px; } [class*="product-info"] > .product-left{ flex:0 1 46%; max-width:46%; min-width:0; width:auto !important; float:none !important; margin:0 !important; } [class*="product-info"] > .product-right{ flex:1 1 0; min-width:0; width:auto !important; float:none !important; margin:0 !important; } } @media (max-width:767px){ [class*="product-info"]{ display:block !important; } [class*="product-info"] > .product-left, [class*="product-info"] > .product-right{ width:100% !important; float:none !important; margin:0 0 22px !important; } } /* keep the main product image sensibly sized within its column */ [class*="product-info"] .product-image img, [class*="product-info"] .lightgallery img{ max-width:100%; height:auto; } /* the description / spec accordion + tags sit full-width below */ .product-blocks.blocks-default{ clear:both; margin-top:14px; } /* 19g. GALLERY module — responsive uniform square grid (was a fixed 5-up flex row → tiny thumbnails on phones). */ .module-gallery .module-body{ display:grid !important; /* auto-FIT (not auto-fill): a gallery with few images (e.g. the homepage "En business" module 292 with 4) stretches to fill the row instead of squishing left with empty tracks; a full gallery is unaffected. */ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important; gap:12px !important; align-items:start; } .module-gallery .module-body > .module-item{ width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; float:none !important; } .module-gallery .module-item:not(:has(img)){ display:none !important; } /* drop empty slots */ .module-gallery .module-item > a{ display:block !important; aspect-ratio:1 / 1; overflow:hidden; border-radius:10px; position:relative; margin:0 !important; } .module-gallery .module-item img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s ease; } .module-gallery .module-item:hover img{ transform:scale(1.06); } @media (min-width:601px) and (max-width:1024px){ .module-gallery .module-body{ grid-template-columns:repeat(3, 1fr) !important; } } @media (max-width:600px){ .module-gallery .module-body{ grid-template-columns:repeat(2, 1fr) !important; gap:10px !important; } } /* ===================================================================== 20. B2B product experience (2026-09-03): no public prices, WhatsApp as the primary contact CTA, cleaner product page, category nav on mobile, and tidy category ("all products") pages. ===================================================================== */ /* 20a. B2B — hide ALL prices (listing cards + product page) ---------- */ .main-products .product-thumb .price, .main-products .product-thumb .rating.no-rating, [class*="product-info"] .product-price-group, .product-details .product-price-group, .product-details .product-tax{ display:none !important; } /* 20b. Product DETAIL — declutter + rhythm --------------------------- */ .product-details .product-blocks.blocks-top{ display:none !important; } /* demo "free shipping" placeholder */ .product-details .rating.rating-page, .product-details .review-links{ display:none !important; } /* no reviews on a B2B catalog */ .product-details .custom-stats{ display:none !important; } /* "190 samples sold / Product Views" */ .product-details .title.page-title{ margin:0 0 16px !important; } .product-details .product-stats{ margin:0 0 20px !important; padding:14px 18px; background:var(--mg-bg-soft); border-radius:12px; } .product-details .product-stats ul{ margin:0 !important; } .product-details .product-stats li{ padding:7px 0; border-bottom:1px solid rgba(20,22,28,.06); } .product-details .product-stats li:last-child{ border-bottom:0; } .product-details .product-options{ margin:0 0 18px !important; } .product-details .minimum.alert{ margin:0 0 14px !important; border-radius:10px; } /* B2B: no cart/buy flow without prices — drop the Buy/cart buttons, keep "ask" */ .product-details .btn-cart, .product-details .btn-extra-46, .product-details .quantity{ display:none !important; } .product-details .button-group-page{ margin:0 0 8px; } /* 20c. WhatsApp — the PRIMARY B2B CTA (injected on the product page) -- */ .product-details a.btn.btn-success{ display:flex !important; align-items:center; justify-content:center; gap:10px; width:100%; margin:8px 0 6px !important; padding:16px 22px !important; background:#25D366 !important; border:0 !important; border-radius:12px !important; color:#fff !important; font-weight:700 !important; font-size:16px !important; letter-spacing:.01em; box-shadow:0 10px 26px rgba(37,211,102,.30) !important; transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .product-details a.btn.btn-success:hover{ background:#1ebe5b !important; transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,211,102,.4) !important; } .product-details a.btn.btn-success i{ font-size:20px; } /* "Prix sur demande" note (injected by customJS before the button) */ .mg-quote-note{ display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:12px 16px; background:var(--mg-brand-050); border:1px solid #ffe0b3; border-radius:12px; color:var(--mg-brand-strong); font-weight:700; font-size:15px; } .mg-quote-note svg{ width:20px; height:20px; flex:none; } /* 20d. Category "refine" tiles -> clean category CARDS (no broken img) */ [class*="refine-item"] img{ display:none !important; } [class*="refine-item"] > a{ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:104px; padding:18px 12px; background:#fff; border:1px solid var(--mg-line); border-radius:14px; text-align:center; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; } [class*="refine-item"] > a:hover{ border-color:var(--mg-brand); box-shadow:var(--mg-shadow-sm); transform:translateY(-3px); } [class*="refine-item"] > a::before{ content:""; width:34px; height:34px; flex:none; background:center/contain no-repeat; background-image:url("data:image/svg+xml,"); } .refine-name, [class*="refine-item"] .refine-name{ font-weight:600 !important; font-size:14px !important; color:var(--mg-ink) !important; } /* 20e. MOBILE — the category sidebar (#column-left) is NOT rendered on mobile by the theme, so the subcategory "refine" CARDS (§20d) ARE the category navigation there. Make sure they show, with a small heading. */ @media (max-width:991px){ .refine-categories, .refine-carousel, .swiper-container:has([class*="refine-item"]){ display:block !important; margin:0 0 20px !important; } [class*="refine-item"]{ display:block !important; } .refine-categories::before{ content:"Catégories"; display:block; font-weight:700; font-size:15px; color:var(--mg-ink); margin:2px 2px 12px; } html[lang="en"] .refine-categories::before{ content:"Categories"; } } /* ===================================================================== 21. Related / same-category products row on the PRODUCT page (.module-products) — slides ship MANGLED (product-layoutswiper-slide…) so Swiper mis-sizes them and they OVERLAP in pairs. Force a clean responsive grid + the same B2B card treatment. (2026-09-03) ===================================================================== */ .module-products .swiper, .module-products .swiper-wrapper{ transform:none !important; height:auto !important; } .module-products .swiper-wrapper{ display:grid !important; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)) !important; gap:22px !important; width:100% !important; } .module-products [class*="product-layout"]{ width:auto !important; max-width:none !important; min-height:0 !important; margin:0 !important; left:auto !important; right:auto !important; transform:none !important; float:none !important; display:flex !important; } .module-products [class*="product-layout"] > .product-thumb{ width:100%; margin:0 !important; display:flex; flex-direction:column; } /* carousel controls are meaningless once it's a grid */ .module-products .swiper-buttons, .module-products .swiper-pagination, .module-products .swiper-button-next, .module-products .swiper-button-prev{ display:none !important; } /* card treatment (matches §19): square image, tidy caption, NO prices */ .module-products .product-thumb .image{ position:relative; margin:0 !important; aspect-ratio:1 / 1; overflow:hidden; border-bottom:1px solid var(--mg-line); background:var(--mg-bg-soft); } .module-products .product-thumb .image > a[class*="product-img"], .module-products .product-thumb .image > a[class*="product-img"] > div{ display:block !important; width:100% !important; height:100% !important; margin:0 !important; } .module-products .product-thumb .image img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .5s ease; } .module-products .product-thumb:hover .image img{ transform:scale(1.05); } .module-products .product-thumb .caption{ display:flex !important; flex-direction:column; flex:1 1 auto; padding:14px 15px !important; text-align:left !important; gap:5px; } .module-products .product-thumb .caption > *{ height:auto !important; min-height:0 !important; max-height:none !important; position:static !important; } .module-products .product-thumb .stats{ order:1; display:block !important; margin:0 !important; font-size:11.5px; color:var(--mg-muted); } .module-products .product-thumb .name{ order:2; display:block !important; margin:0 !important; } .module-products .product-thumb .name a{ font-weight:700; font-size:14px; line-height:1.34; color:var(--mg-ink); display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical; overflow:hidden !important; } .module-products .product-thumb .price, .module-products .product-thumb .description, .module-products .product-thumb .rating{ display:none !important; } /* B2B: no price / declutter */ .module-products .product-thumb .extra-group{ order:6; margin-top:auto !important; padding-top:10px; } @media (max-width:1024px){ .module-products .swiper-wrapper{ grid-template-columns:repeat(auto-fill, minmax(170px,1fr)) !important; } } @media (max-width:600px){ .module-products .swiper-wrapper{ grid-template-columns:repeat(2, 1fr) !important; gap:14px !important; } } /* ===================================================================== 22. "Services Que Nous Offrons" — the 9 expertise items keep the ORIGINAL service-card style (number + title, no description). Only change: 3-up on desktop so the 9 sit as a clean 3x3. (2026-09-03) ===================================================================== */ .service-section .row.flexed-323 > [class*="col-"]{ flex:0 0 33.333% !important; max-width:33.333% !important; } @media (max-width:900px){ .service-section .row.flexed-323 > [class*="col-"]{ flex:0 0 50% !important; max-width:50% !important; } } @media (max-width:575px){ .service-section .row.flexed-323 > [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; } } /* title-only cards: single row, number + title vertically centred, and a height that suits a title (the theme's 280px was sized for a description) */ .service-section .features-item{ grid-template-rows:1fr !important; min-height:150px !important; } .service-section .features-item .feature-title{ grid-row:1 !important; align-self:center !important; margin:0 !important; } .service-section .feature-title{ font-weight:700; font-size:16px; line-height:1.32; color:var(--mg-ink); } /* ===================================================================== 23. Round 4 (2026-09-03): hero width cap on huge screens, bigger desktop logo + top social icons, and the new "Notre siège en Chine" section. ===================================================================== */ /* ---- 23a. Slider TEXT aligned to a 1400px content boundary ------------- Keep the hero full-bleed (the PHOTO stays flush to the right edge); only the left copy panel's text is pulled in so its left edge lines up with a centred 1400px content area on very big screens (it was stretching before). The extra left padding = the gutter a 1400px centred container would have, but never less than the normal panel padding — so ≤~1484px is unchanged and mobile (negative calc) falls back to the clamp. */ .mg-hero-left .mg-hero-inner{ padding-left:max(clamp(24px, 2.4vw, 42px), calc((100vw - 1400px) / 2)) !important; box-sizing:border-box; } /* ---- 23b. Desktop only: a slightly bigger logo (customCSS caps it 210px). Higher specificity than the injected `#logo a > img` rule so it wins. */ @media (min-width:992px){ .desktop-header-active .header-classic #logo a > img, .desktop-header-active #logo a > img, .header-classic #logo a > img{ max-width:250px !important; max-height:250px !important; } } /* ---- 23c. Desktop only: bigger top-bar social icons (FB/IG/WA/LI). Icons render as an icomoon glyph on a::before (14px); enlarge + space. */ @media (min-width:992px){ .header-classic .top-bar .top-menu-2 > ul.j-menu{ align-items:center; } .header-classic .top-bar .top-menu-2 li{ margin:0 3px; } .header-classic .top-bar .top-menu-2 a{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; transition:background-color .18s ease, color .18s ease; } .header-classic .top-bar .top-menu-2 a::before{ font-size:19px !important; } .header-classic .top-bar .top-menu-2 a:hover{ background:rgba(255,255,255,.10); } } /* ---- 23d. "Notre siège en Chine" — text LEFT, image RIGHT ------------- */ .mg-china{ background:#fff; } .mg-china .row.dispflex{ align-items:center; } .mg-china-copy{ padding-right:clamp(10px, 2.2vw, 40px); } .mg-china-copy h5{ margin-bottom:14px; } .mg-china-copy h2{ font-size:clamp(26px, 2.5vw, 38px); font-weight:800; letter-spacing:-.02em; color:var(--mg-ink); line-height:1.14; } .mg-china-copy p{ color:var(--mg-ink-2); } .mg-china-copy p.lead{ color:var(--mg-ink); font-size:clamp(16px,1.25vw,19px); } /* China office address card */ .mg-china-addr{ display:flex; align-items:flex-start; gap:12px; margin-top:24px; padding:15px 18px; background:var(--mg-bg-soft); border:1px solid var(--mg-line); border-left:3px solid var(--mg-brand); border-radius:12px; color:var(--mg-ink-2); line-height:1.55; font-size:15px; } .mg-china-addr .mg-china-pin{ width:22px; height:22px; flex:none; color:var(--mg-brand-strong); margin-top:2px; } .mg-china-addr .mg-china-addr-t{ display:block; color:var(--mg-ink); font-weight:800; font-size:14px; letter-spacing:.01em; margin-bottom:3px; } .mg-china-media{ position:relative; } .mg-china-media img{ width:100% !important; max-width:100% !important; aspect-ratio:1 / 1; object-fit:cover; object-position:center 26%; /* portrait office photo — bias the crop to the banner + faces */ border-radius:16px; box-shadow:var(--mg-shadow-md); display:block; } /* a subtle brand frame accent behind the photo */ .mg-china-media::before{ content:""; position:absolute; z-index:-1; right:-14px; bottom:-14px; width:60%; height:70%; border-radius:16px; background:linear-gradient(135deg, var(--mg-brand-050), rgba(255,152,0,.18)); } @media (max-width:800px){ .mg-china .row.dispflex{ flex-wrap:wrap; } .mg-china-copy{ padding-right:0; margin-bottom:30px; } /* the theme forces h2 to 1.4rem(=14px) !important on phones — restore a proper heading size so the title reads bigger than the body copy */ .mg-china-copy h2{ font-size:23px !important; line-height:1.2 !important; } .mg-china-copy h5{ font-size:14px !important; } .mg-china-copy p.lead{ font-size:16px; } .mg-china-media img{ aspect-ratio:4 / 5; object-position:center 22%; } .mg-china-media::before{ display:none; } } /* ===================================================================== 25. Footer social icons (2026-09-04): the theme gives each a gold bg + border-radius:50% but NO fixed size, so they shrink-wrapped the glyph into tiny irregular blobs. Force uniform round buttons. ===================================================================== */ footer .icons-menu-61 ul, .icons-menu-61 ul{ display:flex !important; flex-wrap:wrap; gap:12px !important; align-items:center; justify-content:center; padding:0 !important; margin:0 !important; list-style:none; } footer .icons-menu-61 ul > li.menu-item, .icons-menu-61 ul > li.menu-item{ margin:0 !important; padding:0 !important; } footer .icons-menu-61 ul > li.menu-item > a, .icons-menu-61 ul > li.menu-item > a{ width:40px !important; height:40px !important; min-width:40px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; box-sizing:border-box !important; background:var(--mg-brand) !important; transition:transform .18s ease, background-color .18s ease; } footer .icons-menu-61 ul > li.menu-item > a::before, .icons-menu-61 ul > li.menu-item > a::before{ font-size:18px !important; color:#fff !important; line-height:1 !important; margin:0 !important; } footer .icons-menu-61 ul > li.menu-item > a:hover, .icons-menu-61 ul > li.menu-item > a:hover{ background:var(--mg-brand-strong) !important; transform:translateY(-2px); }