/* ============================================================ EXTRACUT — INNER PAGE INDUSTRIAL THEME v4.5 Targets the REAL site-builder DOM (.Mo / .pic-item / .NItem ...) Must be loaded LAST (injected at end of ). ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap"); :root { --xc-ink: #0A1628; --xc-red: #E63946; --xc-blue: #1D4ED8; --xc-line: #E5E9F0; --xc-gray: #6B7A99; --xc-bg-soft: #F4F6FA; --xc-cream: #FBF7F2; --xc-font: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --xc-mono: "JetBrains Mono", ui-monospace, monospace; } /* ============================================================ 1. GLOBAL RESET TO INDUSTRIAL LIGHT THEME ============================================================ */ html, body, body#webBody, body.industrial-overlay { background: #ffffff !important; color: var(--xc-ink) !important; font-family: var(--xc-font) !important; -webkit-font-smoothing: antialiased; margin: 0 !important; padding: 0 !important; } body#webBody { padding-top: 0 !important; } /* Content links only — injected chrome defines its own colours */ body#webBody .customModule a, body#webBody .MoBody a, body#webBody .editor_content_air a, body#webBody .oneClassT a, body#webBody .NItemTable a, body#webBody .form-module a, body#webBody .pic-title a, body#webBody .text-list-a a { color: var(--xc-blue); text-decoration: none; transition: color .2s; } body#webBody .customModule a:hover, body#webBody .MoBody a:hover, body#webBody .editor_content_air a:hover, body#webBody .oneClassT a:hover, body#webBody .NItemTable a:hover, body#webBody .form-module a:hover, body#webBody .pic-title a:hover, body#webBody .text-list-a a:hover { color: var(--xc-red); } body#webBody h1, body#webBody h2, body#webBody h3, body#webBody h4, body#webBody h5, body#webBody h6 { font-family: var(--xc-font) !important; color: var(--xc-ink); font-weight: 800 !important; letter-spacing: -0.02em !important; } /* White-out module rows so dark inline backgrounds never show through */ body#webBody .customModuleRow, body#webBody .customModuleRowInner, body#webBody .CModulePA, body#webBody .CModulePC, body#webBody .CModulePCLeft, body#webBody .CModulePCRight, body#webBody .wrapper, body#webBody .mainContainer, body#webBody .addContainer { background: #ffffff !important; background-color: #ffffff !important; background-image: none !important; } /* content area container */ body#webBody .wrapper { width: 100% !important; max-width: 1320px !important; margin: 0 auto !important; } /* ============================================================ 2. HIDE LEGACY CHROME (backup for the JS injector) ============================================================ */ body#webBody #row_16, body#webBody #web_nav, body#webBody #header, body#webBody #navWrap, body#webBody #banner_area, body#webBody #row_76, body#webBody .headFullXY, body#webBody .footPublicModuleRow, body#webBody .headPublicModuleRow, body#webBody .wx-code-div, body#webBody .wx-code-div-back-btn, body#webBody .ev_search_module { display: none !important; } /* neutralize absolute-positioned old header space */ body#webBody .customModuleRowAbsolute { position: static !important; } /* ============================================================ 3. INJECTED CHROME (xc-*) — topbar / navbar / page hero / footer ============================================================ */ .xc-container { max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } /* ---- topbar ---- */ .xc-topbar { background: var(--xc-ink); color: rgba(255,255,255,.75); font-size: 12px; overflow: hidden; position: relative; z-index: 1001; } .xc-topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: 24px; } .xc-marquee { overflow: hidden; flex: 1; min-width: 0; } .xc-marquee-track { display: inline-flex; gap: 32px; white-space: nowrap; animation: xcMarquee 30s linear infinite; } .xc-marquee-item { font-family: var(--xc-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .xc-marquee-item::after { content: "·"; margin-left: 32px; color: rgba(230,57,70,.9); } @keyframes xcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .xc-topbar-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .xc-topbar-actions a { color: rgba(255,255,255,.75); } .xc-topbar-actions a:hover { color: #fff; } .xc-sep { color: rgba(255,255,255,.3); } /* ---- navbar ---- */ .xc-navbar { background: #ffffff; border-bottom: 1px solid var(--xc-line); position: sticky; top: 0; z-index: 1000; box-shadow: 0 1px 0 rgba(10,22,40,.04); } .xc-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 32px; } .xc-brand { text-decoration: none !important; } .xc-brand-mark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 900; font-size: 26px; letter-spacing: -.03em; line-height: 1; } .xc-extra { color: var(--xc-ink); } .xc-cut { color: var(--xc-red); } .xc-reg { font-size: 10px; color: var(--xc-gray); vertical-align: super; } .xc-tagline { display: block; font-family: var(--xc-mono); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--xc-gray); margin-top: 3px; font-weight: 500; } .xc-nav-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .xc-nav-item { position: relative; } .xc-nav-link { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border-radius: 8px; color: var(--xc-ink) !important; font-weight: 600; font-size: 14px; transition: all .2s; text-decoration: none !important; } .xc-nav-link:hover, .xc-nav-item:hover .xc-nav-link { color: var(--xc-red) !important; background: rgba(230,57,70,.06); } .xc-chevron { width: 10px; height: 6px; opacity: .6; transition: transform .2s; } .xc-nav-item:hover .xc-chevron { transform: rotate(180deg); } .xc-dd { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: #fff; border: 1px solid var(--xc-line); border-radius: 14px; box-shadow: 0 24px 48px rgba(10,22,40,.14); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .22s cubic-bezier(.34,1.3,.64,1); } .xc-nav-item:hover .xc-dd { opacity: 1; visibility: visible; transform: translateY(0); } .xc-dd a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--xc-ink) !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; transition: all .15s; } .xc-dd a:hover { background: var(--xc-bg-soft); color: var(--xc-red) !important; padding-left: 18px; } .xc-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--xc-red); color: #fff !important; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none !important; transition: all .25s; white-space: nowrap; } .xc-btn-primary:hover { background: #c81e2b; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(230,57,70,.35); color: #fff !important; } .xc-btn-primary svg { transition: transform .25s; } .xc-btn-primary:hover svg { transform: translateX(3px); } /* ---- page hero (dark indigo banner) ---- */ .xc-page-hero { position: relative; background: linear-gradient(120deg, #0A1628 0%, #12233F 60%, #0A1628 100%); color: #fff; padding: 56px 0 48px; overflow: hidden; } .xc-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 90% 100% at 20% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 100% at 20% 0%, #000 30%, transparent 75%); } .xc-page-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border: 56px solid rgba(230,57,70,.16); border-radius: 50%; } .xc-page-hero .xc-container { position: relative; z-index: 1; } .xc-hero-crumbs { font-family: var(--xc-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; } .xc-hero-crumbs a { color: rgba(255,255,255,.65); text-decoration: none; } .xc-hero-crumbs a:hover { color: #fff; } .xc-hero-crumbs span { margin: 0 10px; color: rgba(230,57,70,.9); } .xc-hero-crumbs em { font-style: normal; color: #fff; } .xc-hero-title { font-size: 44px; font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; color: #fff !important; } .xc-hero-title::first-letter { color: var(--xc-red); } .xc-hero-sub { color: rgba(255,255,255,.65); font-size: 15px; margin: 0; max-width: 560px; } /* High-specificity colour guards for injected chrome */ body#webBody .xc-topbar, body#webBody .xc-topbar .xc-marquee-item, body#webBody .xc-topbar-actions a, body#webBody .xc-topbar .xc-sep { color: rgba(255,255,255,.75) !important; } body#webBody .xc-topbar-actions a:hover { color: #fff !important; } body#webBody .xc-page-hero .xc-hero-title, body#webBody .xc-page-hero .xc-hero-crumbs em { color: #fff !important; } body#webBody .xc-page-hero .xc-hero-sub { color: rgba(255,255,255,.65) !important; } body#webBody .xc-page-hero .xc-hero-crumbs { color: rgba(255,255,255,.55) !important; } body#webBody .xc-page-hero .xc-hero-crumbs a { color: rgba(255,255,255,.65) !important; } body#webBody .xc-page-hero .xc-hero-crumbs a:hover { color: #fff !important; } body#webBody .xc-page-hero .xc-hero-crumbs span { color: rgba(230,57,70,.9) !important; } /* ---- footer (matches homepage .footer exactly) ---- */ body#webBody .xc-footer { background: var(--xc-ink); color: rgba(255,255,255,.7) !important; padding: 80px 0 32px; margin-top: 80px; font-size: 14px; position: relative; overflow: hidden; } body#webBody .xc-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--xc-red), transparent); } body#webBody .xc-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 64px; } body#webBody .xc-footer-brand { max-width: 320px; } body#webBody .xc-footer-brand .xc-brand { color: #fff !important; margin-bottom: 20px; display: inline-flex; } body#webBody .xc-footer-brand .xc-extra { color: #fff !important; } body#webBody .xc-footer-brand .xc-cut { color: var(--xc-red) !important; } body#webBody .xc-footer-desc { font-size: 14px; line-height: 1.7; margin-bottom: 24px; color: rgba(255,255,255,.7) !important; } body#webBody .xc-footer-social { display: flex; gap: 8px; } body#webBody .xc-footer-social a { width: 40px; height: 40px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7) !important; transition: all .2s; } body#webBody .xc-footer-social a:hover { background: var(--xc-red); color: #fff !important; border-color: var(--xc-red); transform: translateY(-2px); } body#webBody .xc-footer-col h4 { color: #fff !important; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px; position: relative; padding-bottom: 12px; } body#webBody .xc-footer-col h4::after { content: ""; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--xc-red); } body#webBody .xc-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } body#webBody .xc-footer-col li { margin: 0; } body#webBody .xc-footer-col a { font-size: 14px; color: rgba(255,255,255,.65) !important; text-decoration: none; transition: all .2s; display: inline-flex; align-items: center; gap: 6px; } body#webBody .xc-footer-col a:hover { color: var(--xc-red) !important; padding-left: 4px; } body#webBody .xc-footer-contact-item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; margin-bottom: 12px; line-height: 1.5; color: rgba(255,255,255,.7) !important; } body#webBody .xc-footer-contact-item svg { color: var(--xc-red) !important; flex-shrink: 0; margin-top: 2px; } body#webBody .xc-footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; flex-wrap: wrap; color: rgba(255,255,255,.5) !important; } body#webBody .xc-footer-bottom-links { display: flex; gap: 20px; } body#webBody .xc-footer-bottom-links a { color: rgba(255,255,255,.5) !important; } body#webBody .xc-footer-bottom-links a:hover { color: var(--xc-red) !important; } /* ============================================================ 4. CONTENT MODULES (.Mo boxes) — white cards, red accents ============================================================ */ body#webBody .customModule { margin: 0 auto 24px !important; } body#webBody .Mo { background: #ffffff !important; border: 1px solid var(--xc-line) !important; border-radius: 16px !important; overflow: hidden; box-shadow: 0 1px 3px rgba(10,22,40,.04) !important; } body#webBody .MoT, body#webBody .MoTL, body#webBody .MoTM, body#webBody .MoTR, body#webBody .MoHeadL, body#webBody .MoHeadM, body#webBody .MoHeadR, body#webBody .MoName, body#webBody .MoNameL, body#webBody .MoNameM, body#webBody .MoNameR, body#webBody .MoBodyL, body#webBody .MoBodyR, body#webBody .MoBL, body#webBody .MoBR, body#webBody .MoBM { background: transparent !important; background-image: none !important; } body#webBody .MoHead { background: var(--xc-bg-soft) !important; border-bottom: 1px solid var(--xc-line) !important; } body#webBody .MoName .NameTxt { font-family: var(--xc-font) !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--xc-ink) !important; } body#webBody .MoName .NameTxt a { color: var(--xc-ink) !important; text-decoration: none; } body#webBody .MoHead .MoName { position: relative; } body#webBody .MoHeadM { padding: 14px 18px !important; } body#webBody .MoBody { padding: 0 !important; } body#webBody .MoBodyM { padding: 20px !important; } body#webBody .MoMore a { font-family: var(--xc-mono) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; } /* module header red left bar */ body#webBody .MoHead .MoName::before { content: ""; display: inline-block; width: 4px; height: 16px; background: var(--xc-red); border-radius: 2px; margin-right: 10px; vertical-align: -3px; } /* ============================================================ 5. PRODUCT GRID (.pic-text-list-module) ============================================================ */ body#webBody .pic-text-list-module { background: transparent !important; } body#webBody .pic-text-list-module .pics, body#webBody .pic-text-list-module .pic { background: transparent !important; border: none !important; } body#webBody .pic-text-list-module .pic-item { background: #ffffff !important; border: 1px solid var(--xc-line) !important; border-radius: 16px !important; padding: 14px !important; transition: transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s, border-color .3s !important; } body#webBody .pic-text-list-module .pic-item:hover { transform: translateY(-6px) !important; border-color: rgba(10,22,40,.25) !important; box-shadow: 0 20px 44px rgba(10,22,40,.12) !important; } body#webBody .pic-text-list-module .pic img { background: var(--xc-cream) !important; border-radius: 12px !important; transition: transform .35s !important; } body#webBody .pic-text-list-module .pic-item:hover .pic img { transform: scale(1.04); } body#webBody .pic-title { font-family: var(--xc-font) !important; color: var(--xc-ink) !important; font-weight: 700 !important; font-size: 14px !important; line-height: 1.45 !important; } body#webBody .pic-title a { color: var(--xc-ink) !important; text-decoration: none; } body#webBody .pic-title a:hover { color: var(--xc-red) !important; } body#webBody .pic-price, body#webBody .pic-attr { font-family: var(--xc-mono) !important; font-size: 12px; color: var(--xc-gray) !important; } body#webBody .pic-price b, body#webBody .pic-price strong { color: var(--xc-red) !important; } /* ============================================================ 6. SIDEBAR (category list) ============================================================ */ body#webBody .sidebarLists, body#webBody .sidebar-box, body#webBody .sidebar-inner, body#webBody .catalogList, body#webBody .oneClassList, body#webBody .fullSubNavBox, body#webBody .ctrl-sidebar-area { background: #fff !important; background-image: none !important; } body#webBody .oneClassT, body#webBody .oneClassTinner, body#webBody .oneClassT a { font-family: var(--xc-font) !important; color: var(--xc-ink) !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; border-bottom: 1px solid var(--xc-line) !important; transition: all .2s !important; } body#webBody .oneClassT { position: relative; } body#webBody .oneClassT::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--xc-red); margin-right: 10px; vertical-align: 2px; transition: transform .2s; } body#webBody .oneClassT:hover, body#webBody .oneClassTopen { color: var(--xc-red) !important; background: rgba(230,57,70,.05) !important; } body#webBody .oneClassT:hover::before { transform: scale(1.5); } body#webBody .NSub a, body#webBody .NSubC a { color: var(--xc-gray) !important; } /* ============================================================ 7. PAGINATION ============================================================ */ body#webBody .page, body#webBody .page a, body#webBody .page span { font-family: var(--xc-mono) !important; } body#webBody .page a, body#webBody .page-prev, body#webBody .page-next, body#webBody .page-end { background: #fff !important; border: 1px solid var(--xc-line) !important; border-radius: 8px !important; color: var(--xc-ink) !important; font-weight: 600 !important; transition: all .2s !important; text-decoration: none !important; } body#webBody .page a:hover, body#webBody .page-prev:hover, body#webBody .page-next:hover, body#webBody .page-end:hover { background: var(--xc-ink) !important; color: #fff !important; border-color: var(--xc-ink) !important; } /* ============================================================ 8. TEXT LISTS (news / downloads) ============================================================ */ body#webBody .text-list-module, body#webBody .text-list-a { background: transparent !important; } body#webBody .text-list-module li, body#webBody .text-list-a li { border-bottom: 1px dashed var(--xc-line) !important; transition: all .2s; } body#webBody .text-list-module li:hover, body#webBody .text-list-a li:hover { background: var(--xc-bg-soft) !important; } body#webBody .text-list-a a { color: var(--xc-ink) !important; font-weight: 500 !important; text-decoration: none !important; } body#webBody .text-list-a a:hover { color: var(--xc-red) !important; } /* ============================================================ 9. ARTICLE / PRODUCT DETAIL ============================================================ */ body#webBody .articleDetails, body#webBody .articleAbstract, body#webBody .ev-text-article-1, body#webBody .FC_Con2 { font-family: var(--xc-font) !important; color: #1B2A4A !important; line-height: 1.85 !important; font-size: 15px !important; } body#webBody .articleDetails img, body#webBody .ev-text-article-1 img, body#webBody .FC_Con2 img { border-radius: 12px !important; margin: 18px 0 !important; background: var(--xc-cream) !important; } body#webBody .articleDetails h1, body#webBody .ev-text-article-1 h1, body#webBody .FC_Con2 h1 { font-size: 30px !important; margin: 0 0 18px !important; letter-spacing: -.02em !important; } body#webBody .articleAbstract { background: var(--xc-bg-soft) !important; border-left: 4px solid var(--xc-red) !important; border-radius: 0 10px 10px 0 !important; padding: 16px 20px !important; color: var(--xc-gray) !important; font-style: normal !important; } /* ============================================================ 10. FORMS / TABLES / SEARCH ============================================================ */ body#webBody input[type="text"], body#webBody input[type="email"], body#webBody input[type="tel"], body#webBody textarea, body#webBody select { background: #fff !important; color: var(--xc-ink) !important; border: 1px solid #C8D0DD !important; border-radius: 8px !important; padding: 11px 14px !important; font-family: var(--xc-font) !important; transition: all .2s !important; box-sizing: border-box; } body#webBody input:focus, body#webBody textarea:focus, body#webBody select:focus { outline: none !important; border-color: var(--xc-blue) !important; box-shadow: 0 0 0 3px rgba(29,78,216,.14) !important; } body#webBody input[type="submit"], body#webBody input[type="button"], body#webBody button { background: var(--xc-ink) !important; color: #fff !important; border: none !important; border-radius: 999px !important; padding: 12px 26px !important; font-weight: 700 !important; cursor: pointer; font-family: var(--xc-font) !important; transition: all .25s !important; } body#webBody input[type="submit"]:hover, body#webBody button:hover { background: var(--xc-red) !important; transform: translateY(-2px); } body#webBody table { background: #fff !important; border-collapse: collapse; } body#webBody table th { background: var(--xc-bg-soft) !important; color: var(--xc-ink) !important; font-weight: 700 !important; padding: 12px 16px !important; border: 1px solid var(--xc-line) !important; font-family: var(--xc-font) !important; } body#webBody table td { padding: 12px 16px !important; border: 1px solid var(--xc-line) !important; color: #1B2A4A !important; } body#webBody table tr:hover td { background: var(--xc-bg-soft) !important; } /* Remove table borders for layout tables (news list, contact form) */ body#webBody .NItemTable, body#webBody .form_table, body#webBody .MoT, body#webBody .MoHead, body#webBody .MoBody, body#webBody .MoName, body#webBody .customModule > table, body#webBody .customModuleRow > table, body#webBody .CModulePC > table { border: none !important; } body#webBody .NItemTable td, body#webBody .MoT td, body#webBody .MoHead td, body#webBody .MoBody td, body#webBody .MoName td, body#webBody .customModule > table td, body#webBody .customModuleRow > table td, body#webBody .CModulePC > table td { border: none !important; padding: 0 !important; } /* contact / news list specific table cleanup */ body#webBody .NItemTable { width: 100% !important; } body#webBody .NItemTable .NItem { border-bottom: 1px dashed var(--xc-line) !important; } body#webBody .NItemTable .NItem:hover { background: var(--xc-bg-soft) !important; } body#webBody .NItemTable .NItemM a { color: var(--xc-ink) !important; font-weight: 500 !important; text-decoration: none !important; } body#webBody .NItemTable .NItemM a:hover { color: var(--xc-red) !important; } body#webBody .NItemTable .NItemR { color: var(--xc-gray) !important; font-family: var(--xc-mono) !important; font-size: 12px; } /* ============================================================ 11. IMAGE BOXES — prevent black rectangles ============================================================ */ body#webBody .picBox, body#webBody .pic-con, body#webBody .pro-pic, body#webBody .product-pic, body#webBody .imgBox, body#webBody .img-con, body#webBody .photoBox, body#webBody .scroll-pic, body#webBody .pro-img, body#webBody .proImg, body#webBody .tempWrap, body#webBody .jCarouselLite, body#webBody .picScroll-left, body#webBody .picScroll, body#webBody .ev-pic, body#webBody .ev-pic-1, body#webBody .default-img, body#webBody .lazy-loading { background: #ffffff !important; background-color: #ffffff !important; } body#webBody .pic-item { background-color: #ffffff !important; } body#webBody .pic-item img, body#webBody .ev-pic img, body#webBody .default-img, body#webBody .pro-img img, body#webBody .product-pic img { background: var(--xc-cream) !important; border-radius: 12px !important; } /* product carousel thumbnails */ body#webBody .picScroll-left .pic-item, body#webBody .picScroll .pic-item, body#webBody .jCarouselLite li, body#webBody .pro-img-list li { background: #ffffff !important; border: 1px solid var(--xc-line) !important; border-radius: 10px !important; overflow: hidden !important; } body#webBody .picScroll-left .pic-item img, body#webBody .picScroll .pic-item img, body#webBody .jCarouselLite li img, body#webBody .pro-img-list li img { background: var(--xc-cream) !important; border-radius: 8px !important; } /* ---- product detail main image / thumbnails layout fix ---- */ body#webBody .p-preview-1 .pic, body#webBody .p-preview-1 .pics, body#webBody .small-pic-list .pic, body#webBody .small-pic-list .pics { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body#webBody .p-preview-1 .pic .hook, body#webBody .small-pic-list .pic .hook { display: none !important; } body#webBody .p-preview-1 .pic img, body#webBody .small-pic-list .pic img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; display: block !important; } /* ============================================================ 12. CONTACT PAGE SPECIFIC ============================================================ */ body#webBody .form-module { width: 100% !important; } body#webBody .form-module .item-list { margin-bottom: 14px !important; display: flex; flex-direction: column; gap: 6px; } body#webBody .form-module .item-name { font-family: var(--xc-font) !important; color: var(--xc-ink) !important; font-weight: 600 !important; font-size: 13px !important; } body#webBody .form-module .item-con, body#webBody .form-module .form-text, body#webBody .form-module .form-textarea { width: 100% !important; } body#webBody .form-module input[type="text"], body#webBody .form-module textarea { width: 100% !important; max-width: 100% !important; min-width: 260px !important; } body#webBody .form-module textarea { min-height: 120px !important; } body#webBody .form-module .form-button { margin-top: 8px !important; } body#webBody .form_table td { padding: 8px 12px !important; border: none !important; vertical-align: top !important; } body#webBody .form_table input[type="text"], body#webBody .form_table textarea { width: 100% !important; max-width: 100% !important; } body#webBody .form_table .form_label { color: var(--xc-gray) !important; font-size: 13px !important; font-weight: 600 !important; } /* widen narrow contact form container */ body#webBody .form-module .MoBodyC, body#webBody #formField_14162, body#webBody .form-module dl { width: 100% !important; max-width: 480px !important; } /* ============================================================ 13. NEWS PAGE SPECIFIC ============================================================ */ body#webBody .news-list-table, body#webBody .newsListTable, body#webBody .articleList { background: transparent !important; border: none !important; } body#webBody .news-list-table td, body#webBody .newsListTable td, body#webBody .articleList td { border: none !important; padding: 0 !important; } /* ============================================================ 14. FLOATING BACK-TOP ============================================================ */ body#webBody .backTop_Z { border-radius: 50% !important; background: var(--xc-ink) !important; box-shadow: 0 10px 24px rgba(10,22,40,.3) !important; } /* ============================================================ 15. RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .xc-nav-menu { display: none; } .xc-footer-grid { grid-template-columns: 1fr 1fr; } .xc-hero-title { font-size: 32px; } } @media (max-width: 640px) { .xc-container { padding: 0 18px; } .xc-hero-title { font-size: 26px; } .xc-footer-grid { grid-template-columns: 1fr; } .xc-topbar-actions { display: none; } }