/*
* Right-to-left stylesheet (Arabic, Hebrew, Persian, Urdu...).
*
* Generated from style.css by tools/make_rtl_css.py - edit style.css and
* regenerate rather than editing this file, otherwise the two drift apart.
* WordPress serves this instead of style.css on RTL locales; the name is
* derived from the wp_style_add_data( 'rtl', 'replace' ) flag in functions.php.
*/
/* ============================================================
Air Compressor B2B Website - Custom Style (based on wbcompressor layout)
Brand placeholder: YOURBRAND
============================================================ */
:root {
--primary: #0e7cd5;
--primary-dark: #0a4f8a;
--primary-darker: #0a2549;
--accent: #0e7cd5;
--accent-hover: #0b66b0;
--yellow: #ffcd00;
--panel: #f5f5f7;
--line: #ededed;
--bg-light: #f0f5fb;
--bg-gray: #f6f7f9;
--text-main: #2b2f36;
--text-muted: #6b7280;
--border: #e3e8ef;
--white: #ffffff;
--font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
color: var(--text-main);
font-size: 15px;
line-height: 1.7;
background: var(--white);
}
.container {
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
box-shadow: 0 2px 10px rgba(13, 47, 92, .08);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(10px, 2vw, 24px);
height: 76px;
}
/* `gap` survives shrinking, so the three groups can never end up touching —
without it the row squeezes until the last menu item meets the search
button around 1024px. */
.header-inner > .logo,
.logo .custom-logo-link {
min-width: 0;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-mark {
width: 44px;
height: 44px;
background: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: bold;
font-size: 20px;
}
.logo-name {
font-size: 22px;
font-weight: bold;
color: var(--primary);
letter-spacing: 1px;
}
.logo-sub {
display: block;
font-size: 11px;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
}
.main-nav ul {
display: flex;
list-style: none;
gap: 30px;
}
.main-nav a {
font-size: 14px;
color: var(--text-main);
font-weight: 500;
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: .2s;
}
.main-nav a:hover, .main-nav a.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.header-cta {
background: var(--accent);
color: #fff;
padding: 10px 22px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
transition: .2s;
}
.header-cta:hover {
background: var(--accent-hover);
}
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 26px;
color: var(--primary);
cursor: pointer;
}
/* ---------- Hero ---------- */
.hero {
position: relative;
height: 560px;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .8s;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10, 37, 73, .34) 0%, rgba(10, 37, 73, .10) 45%, rgba(10, 37, 73, 0) 70%);
}
.hero-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
z-index: 2;
}
/* 纵向 flex 容器默认 stretch，会把按钮拉成一整条宽条 */
.hero-content > .btn {
align-self: flex-start;
}
.hero h1 {
color: #fff;
font-size: 46px;
line-height: 1.25;
max-width: 640px;
margin-bottom: 18px;
}
.hero p {
color: rgba(255, 255, 255, .88);
font-size: 18px;
max-width: 560px;
margin-bottom: 30px;
}
.btn {
display: inline-block;
background: var(--accent);
color: #fff;
padding: 13px 34px;
border-radius: 4px;
font-size: 15px;
font-weight: bold;
transition: .2s;
}
.btn:hover {
background: var(--accent-hover);
}
.btn-outline {
background: transparent;
border: 2px solid rgba(255, 255, 255, .9);
}
.btn-outline:hover {
background: rgba(255, 255, 255, .15);
}
.hero-arrows button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 46px;
height: 46px;
border: 1px solid rgba(255,255,255,.5);
background: rgba(255,255,255,.12);
color: #fff;
font-size: 20px;
border-radius: 50%;
cursor: pointer;
transition: .2s;
}
.hero-arrows button:hover {
background: var(--accent);
border-color: var(--accent);
}
.hero-arrows .prev {
right: 22px;
}
.hero-arrows .next {
left: 22px;
}
.hero-dots {
position: absolute;
bottom: 24px;
right: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 10px;
}
.hero-dots span {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(255,255,255,.45);
cursor: pointer;
transition: .2s;
}
.hero-dots span.active {
background: #fff;
transform: scale(1.2);
}
/* ---------- Section common ---------- */
.section {
padding: 80px 0;
}
.section-head {
text-align: center;
max-width: 700px;
margin: 0 auto 48px;
}
.section-head h2 {
font-size: 34px;
color: var(--primary);
margin-bottom: 12px;
}
.section-head p {
color: var(--text-muted);
font-size: 16px;
}
.section-head .bar {
width: 52px;
height: 3px;
background: var(--accent);
margin: 0 auto 18px;
}
/* ---------- Products ---------- */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.product-card {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: #fff;
transition: .25s;
}
.product-card:hover {
box-shadow: 0 10px 30px rgba(13, 47, 92, .12);
transform: translateY(-4px);
}
.product-card .thumb {
height: 210px;
overflow: hidden;
}
.product-card .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .4s;
}
.product-card:hover .thumb img {
transform: scale(1.06);
}
.product-card .info {
padding: 20px;
}
.product-card h3 {
font-size: 16px;
color: var(--primary);
margin-bottom: 8px;
}
.product-card p {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.more-link {
display: block;
text-align: center;
margin-top: 40px;
color: var(--accent);
font-weight: bold;
font-size: 15px;
}
.more-link:hover {
color: var(--primary);
}
/* ---------- Tech & Service ---------- */
.bg-light {
background: var(--bg-light);
}
.bg-gray {
background: var(--bg-gray);
}
.tech-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.tech-card {
background: #fff;
border-radius: 8px;
padding: 32px 26px;
text-align: center;
border: 1px solid var(--border);
transition: .25s;
}
.tech-card:hover {
box-shadow: 0 10px 28px rgba(13, 47, 92, .1);
}
.tech-icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
background: var(--bg-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.tech-card h3 {
font-size: 17px;
color: var(--primary);
margin-bottom: 10px;
}
.tech-card p {
font-size: 13.5px;
color: var(--text-muted);
}
/* ---------- About ---------- */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.about-text h2 {
font-size: 34px;
color: var(--primary);
margin-bottom: 12px;
}
.about-text .bar {
width: 52px;
height: 3px;
background: var(--accent);
margin-bottom: 22px;
}
.about-text p {
color: var(--text-muted);
margin-bottom: 16px;
font-size: 15px;
}
.stat-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
position: relative;
}
.stat-card {
background: var(--primary);
border-radius: 8px;
padding: 28px 18px;
text-align: center;
color: #fff;
}
.stat-card .num {
font-size: 38px;
font-weight: bold;
color: #fff;
}
.stat-card .label {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255,255,255,.75);
margin-top: 6px;
}
.since-tag {
position: absolute;
top: -14px;
left: -10px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 6px 14px;
border-radius: 20px;
}
/* ---------- Cases ---------- */
.case-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: #fff;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.case-card .thumb {
min-height: 320px;
}
.case-card .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.case-body {
padding: 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.case-body h3 {
font-size: 22px;
color: var(--primary);
margin-bottom: 16px;
}
.case-body p {
color: var(--text-muted);
margin-bottom: 22px;
}
/* ---------- News ---------- */
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.news-card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 26px;
background: #fff;
transition: .25s;
}
.news-card:hover {
box-shadow: 0 10px 28px rgba(13, 47, 92, .1);
}
.news-date {
font-size: 12px;
color: var(--accent);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.news-card h3 {
font-size: 17px;
color: var(--primary);
margin-bottom: 10px;
line-height: 1.4;
}
.news-card p {
font-size: 13.5px;
color: var(--text-muted);
}
/* ---------- Inquiry ---------- */
.inquiry {
background: var(--primary-dark);
}
.inquiry .section-head h2 {
color: #fff;
}
.inquiry .section-head p {
color: rgba(255,255,255,.75);
}
.inquiry .section-head .bar {
background: #fff;
}
.inquiry-form {
max-width: 720px;
margin: 0 auto;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-radius: 10px;
padding: 40px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group {
margin-bottom: 18px;
}
.form-group label {
display: block;
color: rgba(255,255,255,.85);
font-size: 13px;
margin-bottom: 7px;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 4px;
background: rgba(255,255,255,.08);
color: #fff;
font-family: var(--font);
font-size: 14px;
}
.form-group input::placeholder, .form-group textarea::placeholder {
color: rgba(255,255,255,.45);
}
.form-group textarea {
min-height: 110px;
resize: vertical;
}
.btn-submit {
width: 100%;
background: var(--accent);
color: #fff;
border: none;
padding: 14px;
font-size: 15px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: .2s;
}
.btn-submit:hover {
background: #15589f;
}
/* ---------- Footer ----------
Laid out like the reference site: three columns of links, then a bar with
the logo, a secondary menu and the licence number. */
.site-footer {
background: var(--primary-darker);
color: rgba(255,255,255,.72);
padding: 62px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1.15fr;
gap: 44px;
padding-bottom: 48px;
}
.footer-grid h4 {
color: #fff;
font-size: 17px;
font-weight: 500;
margin-bottom: 20px;
}
.footer-grid p {
font-size: 13.5px;
line-height: 1.85;
}
.footer-grid ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-grid ul li {
margin-bottom: 11px;
font-size: 13.5px;
}
.footer-grid a:hover {
color: #fff;
}
.footer-note {
color: rgba(255,255,255,.62);
margin-bottom: 18px;
max-width: 340px;
}
/* round social buttons; icons are inline SVG, so nothing extra is requested */
.footer-social {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.footer-social li {
margin: 0;
}
.footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: #fff;
background: rgba(255,255,255,.12);
transition: background .2s, transform .2s;
}
.footer-social a:hover {
background: var(--primary);
transform: translateY(-2px);
}
.footer-social svg {
display: block;
width: 16px;
height: 16px;
}
.footer-contact li {
display: flex;
gap: 8px;
}
.footer-contact a {
color: rgba(255,255,255,.88);
}
.footer-contact a:hover {
text-decoration: underline;
}
.footer-contact .fc-label {
color: rgba(255,255,255,.55);
}
/* bottom bar: logo + secondary menu, then the legal line */
.footer-brand .logo-name {
color: #fff;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.12);
padding: 26px 0 22px;
font-size: 13px;
color: rgba(255,255,255,.5);
}
.fb-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding-bottom: 20px;
}
.fb-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 26px;
list-style: none;
margin: 0;
padding: 0;
}
.fb-nav a {
color: rgba(255,255,255,.78);
font-size: 14px;
}
.fb-nav a:hover, .fb-nav .current-menu-item > a {
color: #fff;
}
.fb-legal {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
border-top: 1px solid rgba(255,255,255,.08);
padding-top: 16px;
font-size: 12.5px;
}
.fb-icp a {
color: inherit;
}
.fb-icp a:hover {
color: #fff;
}
@media (max-width: 992px) {
.fb-row {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
}
@media (max-width: 640px) {
.fb-nav {
gap: 8px 18px;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 992px) {
.products-grid, .tech-grid, .news-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.hero {
height: 480px;
}
.hero h1 {
font-size: 36px;
}
}
@media (max-width: 640px) {
.products-grid, .tech-grid, .news-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.case-card {
grid-template-columns: 1fr;
}
.hero {
height: 420px;
}
.hero h1 {
font-size: 28px;
}
.section {
padding: 56px 0;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 26px;
}
.inquiry-form {
padding: 28px 20px;
}
.case-body {
padding: 26px 20px;
}
.case-card .thumb {
min-height: 220px;
}
.page-banner {
padding: 40px 0;
}
.page-banner h1 {
font-size: 26px;
}
.stat-card {
padding: 20px 12px;
}
.stat-card .num {
font-size: 30px;
}
.since-tag {
top: -12px;
left: -4px;
}
.section-head h2 {
font-size: 26px;
}
.about-text h2 {
font-size: 26px;
}
.quote-box {
padding: 26px 20px;
}
.main-img img {
height: 260px !important;
}
.product-card .thumb {
height: 200px;
}
}
/* ============================================================
Sub-pages
============================================================ */
/* ---------- Nav dropdown ---------- */
.main-nav .has-drop {
position: relative;
}
.main-nav .submenu {
display: none;
position: absolute;
top: 100%;
right: 0;
min-width: 240px;
background: #fff;
box-shadow: 0 10px 26px rgba(13,47,92,.14);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 0;
z-index: 50;
}
.main-nav .has-drop:hover .submenu {
display: block;
}
.main-nav .submenu a {
display: block;
padding: 9px 20px;
border: none;
font-weight: normal;
color: var(--text-main);
}
.main-nav .submenu a:hover {
color: var(--accent);
background: var(--bg-light);
}
@media (max-width: 640px) {
.main-nav .submenu {
position: static;
display: none;
box-shadow: none;
border: none;
padding-right: 16px;
}
.main-nav .has-drop.open .submenu {
display: block;
}
}
/* ---------- Page banner ---------- */
/* Real photo banners are set inline via style="background-image:...".
Keep the solid colour underneath as the loading fallback and add a dark
overlay so the white title stays readable on any photo. */
.page-banner {
position: relative;
background: var(--primary-dark) center/cover no-repeat;
padding: 54px 0;
text-align: center;
}
.page-banner::before {
content: "";
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
background: rgba(7, 32, 58, .52);
}
.page-banner > .container {
position: relative;
z-index: 1;
}
.page-banner h1 {
color: #fff;
font-size: 34px;
margin-bottom: 8px;
}
.page-banner .breadcrumb {
color: rgba(255,255,255,.6);
font-size: 13px;
}
.page-banner .breadcrumb a {
color: rgba(255,255,255,.85);
}
.page-banner .breadcrumb a:hover {
color: #fff;
}
/* ---------- Two column layout ---------- */
.two-col {
display: grid;
grid-template-columns: 260px 1fr;
gap: 40px;
align-items: start;
}
.side-nav {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: #fff;
}
.side-nav h4 {
background: var(--primary);
color: #fff;
padding: 14px 18px;
font-size: 15px;
}
.side-nav a {
display: block;
padding: 12px 18px;
font-size: 14px;
border-bottom: 1px solid var(--border);
transition: .15s;
}
.side-nav a:last-child {
border-bottom: none;
}
.side-nav a:hover {
color: var(--accent);
padding-right: 22px;
}
.side-nav a.active {
background: var(--accent);
color: #fff;
font-weight: bold;
}
.side-contact {
margin-top: 20px;
background: var(--primary);
border-radius: 8px;
padding: 22px;
color: #fff;
}
.side-contact h4 {
margin-bottom: 8px;
font-size: 15px;
}
.side-contact p {
font-size: 13px;
color: rgba(255,255,255,.8);
margin-bottom: 6px;
}
@media (max-width: 992px) { .two-col {
grid-template-columns: 1fr;
} }
/* ---------- Category intro ---------- */
.cat-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
margin-bottom: 48px;
}
.cat-intro h2 {
color: var(--primary);
font-size: 26px;
margin-bottom: 12px;
}
.cat-intro p {
color: var(--text-muted);
margin-bottom: 14px;
}
.cat-intro .thumb {
border-radius: 8px;
overflow: hidden;
}
.cat-intro .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 992px) { .cat-intro {
grid-template-columns: 1fr;
} }
/* ---------- Spec table ---------- */
.spec-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 -4px;
}
.spec-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 14px;
min-width: 520px;
}
.spec-table th {
background: var(--bg-light);
color: var(--primary);
padding: 12px 16px;
text-align: right;
border: 1px solid var(--border);
}
.spec-table td {
padding: 11px 16px;
border: 1px solid var(--border);
color: var(--text-main);
}
.spec-table tr:nth-child(even) td {
background: #fafbfd;
}
/* ---------- Product detail ---------- */
.detail-top {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.detail-gallery .main-img {
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.detail-gallery .main-img img {
width: 100%;
height: 380px;
object-fit: cover;
}
.detail-info h2 {
color: var(--primary);
font-size: 28px;
margin-bottom: 10px;
}
.detail-info .price-tip {
color: var(--accent);
font-weight: bold;
font-size: 15px;
margin-bottom: 14px;
}
.detail-info p {
color: var(--text-muted);
margin-bottom: 12px;
}
.detail-info .key-points {
list-style: none;
margin: 16px 0 24px;
}
.detail-info .key-points li {
padding: 6px 0;
font-size: 14px;
color: var(--text-main);
}
.detail-info .key-points li::before {
content: "\2713 ";
color: var(--accent);
font-weight: bold;
}
@media (max-width: 992px) { .detail-top {
grid-template-columns: 1fr;
} }
/* ---------- Timeline ---------- */
.timeline {
position: relative;
margin: 30px 8px 0 0;
padding-right: 28px;
border-right: 3px solid var(--bg-light);
}
.timeline-item {
position: relative;
padding-bottom: 30px;
}
.timeline-item::before {
content: "";
position: absolute;
right: -35px;
top: 6px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--bg-light);
}
.timeline-item .year {
color: var(--accent);
font-weight: bold;
font-size: 15px;
}
.timeline-item h4 {
color: var(--primary);
margin: 4px 0;
font-size: 16px;
}
.timeline-item p {
color: var(--text-muted);
font-size: 13.5px;
}
/* ---------- News list ---------- */
.news-list {
display: flex;
flex-direction: column;
gap: 18px;
}
/* 消息列表行宽 */
.news-wrap {
max-width: 1080px;
}
.news-list-item {
display: flex;
gap: 24px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 22px;
background: #fff;
transition: .2s;
}
.news-list-item:hover {
box-shadow: 0 8px 24px rgba(13,47,92,.1);
}
.news-list-item .date-block {
flex: 0 0 86px;
text-align: center;
background: var(--bg-light);
border-radius: 8px;
padding: 14px 6px;
align-self: flex-start;
}
.news-list-item .date-block .d {
font-size: 26px;
font-weight: bold;
color: var(--primary);
}
.news-list-item .date-block .m {
font-size: 12px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
.news-list-item h3 {
font-size: 17px;
color: var(--primary);
margin-bottom: 6px;
}
.news-list-item p {
font-size: 13.5px;
color: var(--text-muted);
}
@media (max-width: 640px) {
.news-list-item {
flex-direction: column;
gap: 12px;
}
}
/* ---------- Article / detail body ---------- */
.article {
max-width: 860px;
margin: 0 auto;
}
.article h2 {
color: var(--primary);
font-size: 24px;
margin: 26px 0 12px;
}
.article h3 {
color: var(--primary);
font-size: 19px;
margin: 22px 0 10px;
}
.article p {
color: var(--text-muted);
margin-bottom: 14px;
}
.article img {
border-radius: 8px;
margin: 18px 0;
width: 100%;
}
.article ul {
margin: 0 20px 16px 0;
color: var(--text-muted);
}
.article ul li {
margin-bottom: 6px;
}
.article .date-line {
color: var(--accent);
font-size: 13px;
font-weight: bold;
margin-bottom: 20px;
}
/* ---------- Case list ---------- */
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 992px) { .case-grid {
grid-template-columns: 1fr 1fr;
} }
@media (max-width: 640px) { .case-grid {
grid-template-columns: 1fr;
} }
/* ---------- Quote box ---------- */
.quote-box {
background: var(--primary-dark);
border-radius: 10px;
color: #fff;
padding: 36px;
margin: 30px 0;
}
.quote-box h3 {
color: #fff;
font-size: 20px;
margin-bottom: 10px;
}
.quote-box p {
color: rgba(255,255,255,.8);
font-size: 14px;
margin-bottom: 16px;
}
/* ---------- Pagination ---------- */
.pagination {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 36px;
}
.pagination a {
padding: 8px 15px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 14px;
}
.pagination a.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.pagination a:hover:not(.active) {
border-color: var(--accent);
color: var(--accent);
}
/* ---------- WordPress nav menu compat ----------
NOTE: the small-screen collapse for this menu lives further down the file,
on purpose — see the comment there.
Type size and item spacing are editable in Appearance -> Customize ->
Header & Footer. clamp() keeps the row from overflowing on narrower
desktops: the saved value is the ceiling, so the layout tightens itself
below ~1360px instead of running under the quote button. */
.main-nav {
display: flex;
list-style: none;
gap: var(--nav-gap, 38px);
align-items: center;
}
.main-nav a {
font-size: var(--nav-font, 15.5px);
color: var(--text-main);
font-weight: 500;
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: .2s;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a {
color: var(--accent);
border-bottom-color: var(--accent);
}
.main-nav .menu-item-has-children {
position: relative;
}
/* The dropdown caret is drawn rather than a glyph: at this size "\25BE" renders
as a fuzzy grey dot and cannot be tinted reliably. */
.main-nav .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-right: 7px;
vertical-align: middle;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 5px solid var(--primary);
}
.main-nav .menu-item-has-children:hover > a::after {
border-top-color: var(--accent);
}
/* Narrow desktops still show the full row (the hamburger only takes over at
640px), so tighten it there — at ~1024px the menu would otherwise just touch
the search button. */
/* The container is capped at 1360px, so above that the row always has the same
1320px to work with — the saved values apply verbatim. Below it the row
genuinely gets tighter, and `min()` caps whatever was saved so the menu can
never collide with the header buttons. */
@media (max-width: 1360px) {
.main-nav {
gap: min(var(--nav-gap, 38px), 30px);
}
.main-nav a {
font-size: min(var(--nav-font, 15.5px), 15px);
}
}
@media (max-width: 1200px) {
.main-nav {
gap: min(var(--nav-gap, 38px), 20px);
}
.main-nav a {
font-size: min(var(--nav-font, 15.5px), 14.5px);
}
}
/* Below this the row cannot hold logo + menu + language + search + button
without the menu touching the button. The quote button already appears in the
hero, the sticky rail and the inquiry form, so it is the safest thing to drop
— and it comes back as soon as there is room again. */
@media (max-width: 1180px) {
.header-cta {
display: none;
}
}
/* Products dropdown holds every series (13 items), so it scrolls instead of
running off the screen. Rows are separated like the reference site. */
.main-nav .sub-menu {
display: block;
position: absolute;
top: 100%;
right: 0;
min-width: 300px;
max-height: 74vh;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 6px 6px 0;
padding: 4px 0;
list-style: none;
z-index: 60;
box-shadow: 0 18px 36px rgba(13,47,92,.16);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu,
.main-nav .menu-item-has-children.current-menu-ancestor:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-nav .sub-menu a {
display: block;
padding: 13px 22px;
border: none;
border-bottom: 1px solid #efefef;
font-weight: normal;
color: var(--text-main);
}
.main-nav .sub-menu li:last-child > a {
border-bottom: none;
}
.main-nav .sub-menu a:hover {
color: var(--primary);
background: #f5f5f7;
}
.main-nav .sub-menu .current-menu-item > a {
color: var(--primary);
background: #f5f5f7;
border-bottom-color: #efefef;
font-weight: 500;
}
/* ---------- small-screen navigation ----------
This block has to sit *after* the `.main-nav` rules above: it overrides
`display: flex` with `display: none`, and at equal specificity the later
declaration wins. (The stylesheet also has an earlier 640px block; putting
the nav rules there was what originally left the menu visible on tablets.)
The full row needs roughly 1000px once the menu type and spacing are at
comfortable sizes — logo ~240 + menu ~500 + language pill and search ~150,
plus gaps — so below 992px, the width the rest of this stylesheet already
treats as "small screen", the menu collapses into the hamburger instead of
being squeezed against the header buttons. */
@media (max-width: 992px) {
.nav-toggle {
display: block;
}
.main-nav {
display: none;
position: absolute;
top: 76px;
right: 0;
left: 0;
z-index: 40;
background: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.1);
/* the panel spans the viewport, so it carries the container's 20px gutter
itself — otherwise the top-level items sit flush against the screen edge */
padding: 8px 20px 18px;
flex-direction: column;
align-items: stretch;
gap: 4px;
}
/* the base rule is display:flex, so the open state must restate display or
the panel would never appear */
.main-nav.open {
display: block;
}
.main-nav ul {
flex-direction: column;
padding: 0 14px 6px 0;
gap: 4px;
}
.main-nav a {
display: block;
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 15px;
}
.main-nav .sub-menu {
position: static;
display: none;
max-height: none;
overflow: visible;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
border-radius: 0;
padding: 0 14px 6px 0;
}
.main-nav .menu-item-has-children.open > .sub-menu {
display: block;
}
.main-nav .sub-menu a {
padding: 10px 0;
}
}
/* ---------- WP editor content ---------- */
.article-content h2 {
color: var(--primary);
font-size: 24px;
margin: 26px 0 12px;
}
.article-content h3 {
color: var(--primary);
font-size: 19px;
margin: 22px 0 10px;
}
.article-content h4 {
color: var(--text-main);
font-size: 17px;
margin: 20px 0 8px;
}
.article-content p {
color: var(--text-muted);
margin-bottom: 14px;
}
.article-content ul, .article-content ol {
margin: 0 22px 16px 0;
color: var(--text-muted);
}
.article-content ul {
list-style: disc;
}
.article-content ol {
list-style: decimal;
}
.article-content li {
margin-bottom: 6px;
}
.article-content a {
color: var(--primary);
text-decoration: underline;
}
.article-content img {
border-radius: 8px;
margin: 18px 0;
width: 100%;
height: auto;
}
.article-content figure {
margin: 20px 0;
}
.article-content figcaption {
color: var(--text-muted);
font-size: 14px;
text-align: center;
margin-top: 8px;
}
.article-content blockquote {
border-right: 4px solid var(--primary);
background: var(--bg-light);
padding: 14px 20px;
margin: 20px 0;
color: var(--text-main);
}
.article-content blockquote p:last-child {
margin-bottom: 0;
}
.article-content table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-size: 15px;
}
.article-content th, .article-content td {
border: 1px solid var(--border);
padding: 9px 12px;
text-align: right;
}
.article-content th {
background: var(--bg-light);
color: var(--primary);
}
.article-content hr {
border: none;
border-top: 1px solid var(--border);
margin: 28px 0;
}
.article-content .wp-block-image {
margin: 20px 0;
}
.article-content .wp-block-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 20px 0;
}
.article-content .wp-block-gallery img {
margin: 0;
}
.article-content .wp-block-button__link {
display: inline-block;
background: var(--yellow);
color: #333;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px;
}
.article-content iframe {
max-width: 100%;
border-radius: 8px;
}
/* ============================================================
PRODUCT PAGES — layout mirrored 1:1 from wbcompressor.net
(banner / sell points / category cards / product cards /
detail gallery / spec tabs / related products slider)
============================================================ */
.warper {
width: 1360px;
max-width: 100%;
margin: 0 auto;
position: relative;
}
.product-area ul {
list-style: none;
}
/* ---------- inner page banner (product detail + others) ---------- */
.subbanner {
width: 100%;
overflow: hidden;
background: #eaf1f8;
}
.subbanner img {
width: 100%;
height: 350px;
object-fit: cover;
display: block;
}
/* ---------- page banner ---------- */
.po_ban {
position: relative;
}
.po_ban .changpic {
position: relative;
height: 400px;
overflow: hidden;
background: #eaf1f8;
}
.po_ban .changpic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* left scrim: keeps the headline readable over any uploaded photo */
.po_ban .changpic::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.80) 34%, rgba(255,255,255,.28) 58%, rgba(255,255,255,0) 78%);
}
.po_ban .warper {
position: absolute;
top: 0;
right: 50%;
transform: translateX(-50%);
}
.po_bale {
width: 394px;
margin-top: 108px;
position: relative;
z-index: 2;
}
.po_bale h1, .po_bale h2 {
font-size: 30px;
color: var(--primary);
}
.po_bale p {
line-height: 26px;
margin-top: 20px;
color: var(--text-muted);
}
.po_bale a {
margin-top: 40px;
display: inline-block;
padding: 10px 18px;
background: var(--yellow);
font-size: 22px;
color: #333;
}
.po_bale a:hover {
background: #ddedfa;
}
/* ---------- sell points ---------- */
.pro_war {
padding-bottom: 80px;
}
.pr_uld {
display: flex;
padding: 56px 0 55px 0;
}
.pr_uld li {
position: relative;
padding-right: 46px;
width: 32%;
margin-left: 2%;
color: var(--text-muted);
}
.pr_uld li:last-child {
margin-left: 0;
}
.pr_uld li h3 {
font-size: 24px;
color: var(--primary);
font-weight: 400;
}
.pr_uld li p {
line-height: 26px;
margin-top: 15px;
}
.pr_uld li::before {
content: "";
position: absolute;
top: 4px;
right: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
}
.pr_uld li::after {
content: "";
position: absolute;
top: 10px;
right: 8px;
width: 6px;
height: 11px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
/* ---------- main panel ---------- */
.pro_main {
background: var(--panel);
padding: 44px 36px 58px 36px;
}
.pro_main + .pro_main {
margin-top: 40px;
}
.pro_main h1, .pro_main h2 {
font-size: 36px;
color: var(--primary);
text-align: center;
}
/* search */
.pr_sea {
margin-top: 20px;
text-align: center;
}
.pr_sea form {
position: relative;
width: 60%;
display: inline-block;
}
.pr_sea form input {
width: 100%;
height: 50px;
padding: 0 24px 0 62px;
border-radius: 50px;
background: #fff;
border: 1px solid #d1d1d1;
font-size: 15px;
font-family: var(--font);
}
.pr_sea form input:focus {
outline: none;
border-color: var(--primary);
}
.pr_sea form button {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border: none;
border-radius: 50px;
background: var(--primary);
color: #fff;
cursor: pointer;
font-size: 18px;
}
.pr_sea form button:hover {
background: var(--yellow);
color: #333;
}
/* category cards (text list, as on the reference site) */
.pr_cafl {
margin-top: 48px;
display: flex;
flex-wrap: wrap;
}
.pr_cafl li {
width: 23.8%;
margin-left: 3px;
margin-bottom: 16px;
min-height: 92px;
}
.pr_cafl li:last-child {
margin-left: 0;
}
.pr_cafl li h3 {
font-size: 20px;
font-weight: 400;
color: var(--text-main);
}
.pr_cafl li p {
color: var(--primary);
margin-top: 8px;
}
.pr_cafl li a:hover h3 {
color: var(--primary);
}
/* ---------- sliding panel (category cards, related products) ----------
Matches the reference site: four cards per screen, auto-advancing every
4s, one card per step (3 / 2 / 1 on smaller screens), so the thirteen
series read as a carousel instead of a wall of cards. Track sizes are set
in px by js/main.js; the percentage rules below are the pre-JS fallback. */
.pcar {
position: relative;
}
.pcar-view {
overflow: hidden;
}
.pcar-track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.pcar-track.is-jumping {
transition: none;
}
.pcar-slide {
flex: 0 0 auto;
box-sizing: border-box;
}
.pcar.is-draggable {
cursor: grab;
touch-action: pan-y;
}
.pcar.is-dragging {
cursor: grabbing;
}
.pcar.is-dragging .pcar-track {
transition: none;
}
.pcar.is-dragging a {
pointer-events: none;
}
.pcar-slide[aria-hidden="true"] {
pointer-events: none;
}
/* category cards keep their look — only sizing comes from the carousel */
.pcar .pr_cafl {
margin-top: 48px;
flex-wrap: nowrap;
}
.pcar .pr_cafl > li {
margin: 0;
padding-left: 16px;
min-height: 92px;
}
.pcar .rel_gd {
display: flex;
gap: 0;
overflow: visible;
scroll-behavior: auto;
padding-bottom: 0;
}
.pcar .rel_gd > .item {
flex: 0 0 auto;
}
.pcar-rel .pcar-slide {
padding-left: 20px;
}
/* Sizing is written as inline px by js/main.js. These percentages only apply
when that script never ran (the document keeps its .no-js class), where the
cards wrap into a grid so no serie becomes unreachable. Never put a
max-width here: a stylesheet cap would clip the inline width the script
sets and silently show the wrong number of cards. */
.no-js .pcar-view {
overflow: visible;
}
.no-js .pcar-track {
flex-wrap: wrap;
}
.no-js .pcar-slide {
flex: 0 0 25%;
width: 25%;
}
.no-js .pcar-rel .pcar-slide,
.no-js .pcar[data-per-view="3"] .pcar-slide {
flex: 0 0 33.3333%;
width: 33.3333%;
}
@media (max-width: 768px) {
.no-js .pcar .pcar-slide {
flex: 0 0 49%;
width: 49%;
}
}
@media (max-width: 480px) {
.no-js .pcar .pcar-slide {
flex: 0 0 100%;
width: 100%;
}
}
/* product cards */
.pr_list {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
}
.pr_list li {
width: 23.8%;
margin-left: 1.5%;
margin-bottom: 35px;
}
.pr_list li:nth-of-type(4n) {
margin-left: 0;
}
.pr_item {
border: 1px solid #dcdcdc;
background: #fff;
transition: all .3s;
height: 100%;
}
.pr_item:hover {
border-color: var(--primary);
}
.pr_item:hover .changpic img {
transform: scale(1.15);
}
.pr_item .changpic {
width: 100%;
overflow: hidden;
background: #fff;
}
.pr_item .changpic img {
width: 100%;
transition: all .3s;
}
.pr_txt {
padding: 4px 16px 25px 16px;
}
.pr_txt h3 {
font-size: 18px;
color: var(--primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
}
.pr_txt dl {
margin-top: 12px;
}
.pr_txt dl dd {
border-bottom: 1px solid var(--line);
font-size: 16px;
color: #666;
padding: 6px 0;
}
.pr_txt dl dd:last-child {
border-bottom: none;
}
/* empty series notice (kept customer-facing, not "under construction") */
.pr_list .pr_empty {
width: 100%;
margin-left: 0;
padding: 34px 0;
color: var(--text-muted);
font-size: 16px;
line-height: 28px;
}
.pr_empty a {
color: var(--primary);
text-decoration: underline;
}
/* pagination */
.digg4 {
font-size: 18px;
margin-top: 35px;
text-align: center;
}
.digg4 a, .digg4 span {
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border: 1px solid #e9e9e9;
background: #fff;
color: #333;
margin: 0 5px;
}
.digg4 a:hover, .digg4 span.current {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.digg4 .dots {
border: none;
background: none;
width: auto;
}
/* ---------- detail page: breadcrumb ---------- */
.sub_nav {
padding-top: 26px;
}
.sub_nav p {
font-weight: 700;
color: var(--primary);
}
.sub_nav p a {
color: var(--primary);
}
.sub_nav p a:hover {
text-decoration: underline;
}
.sub_nav p span {
color: var(--text-main);
}
/* ---------- detail page: gallery + summary ---------- */
.de_mitop {
width: 100%;
overflow: hidden;
margin-top: 24px;
}
.de_mile {
width: 50%;
float: right;
padding-left: 12px;
}
.de_miri {
width: 50%;
float: left;
padding: 10px 48px 0 0;
}
.de_miri h1 {
font-size: 26px;
color: var(--primary);
font-weight: 400;
}
.de_desc {
margin-top: 10px;
border-top: 1px dotted #dcdcdc;
}
.de_desc dd {
padding: 15px 0;
font-size: 20px;
border-bottom: 1px dotted #dcdcdc;
color: #333;
}
.de_cta {
margin-top: 34px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.de_cta .btn-y {
display: inline-block;
padding: 12px 26px;
background: var(--yellow);
color: #333;
font-size: 18px;
}
.de_cta .btn-y:hover {
background: #ddedfa;
}
.de_cta .btn-o {
display: inline-block;
padding: 12px 26px;
border: 1px solid var(--primary);
color: var(--primary);
font-size: 18px;
}
.de_cta .btn-o:hover {
background: var(--primary);
color: #fff;
}
/* gallery */
.del_swipwer {
position: relative;
}
.del_slider {
position: relative;
border: 1px solid var(--line);
background: #fff;
}
.del_slider .item {
display: none;
}
.del_slider .item.active {
display: block;
}
.del_slider .item img {
width: 100%;
display: block;
}
.dl_rcond {
margin-top: 14px;
}
.qh_gd {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.qh_gd .item {
width: 86px;
height: 86px;
border: 1px solid #dcdcdc;
background: #fff;
cursor: pointer;
overflow: hidden;
padding: 3px;
}
.qh_gd .item.active {
border-color: var(--primary);
}
.qh_gd .item img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ---------- detail page: tab section ---------- */
.de_fekubox {
width: 100%;
margin-top: 72px;
position: relative;
}
.de_fekubox::after {
content: "";
display: block;
clear: both;
}
.d_felc {
width: 308px;
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.de_fecous {
position: sticky;
top: 110px;
}
.de_hnavid {
position: relative;
}
.de_hnavid::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 100%;
background: var(--panel);
}
.de_monav {
margin-top: 14px;
position: relative;
}
.de_monav a {
display: block;
width: 100%;
font-size: 22px;
text-decoration: underline;
padding: 24px 40px 24px 0;
position: relative;
color: var(--text-main);
}
.de_monav a.on {
color: var(--primary);
}
.de_monav a.on::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 100%;
background: var(--primary);
}
.de_cobtn {
margin-top: 60px;
margin-right: 40px;
display: inline-block;
padding: 10px 18px;
background: var(--yellow);
font-size: 22px;
color: #333;
}
.de_cobtn:hover {
background: #ddedfa;
}
.d_ferc {
margin-right: 308px;
padding-top: 40px;
}
.detail_item {
margin-bottom: 56px;
scroll-margin-top: 100px;
}
.detail_item:last-child {
margin-bottom: 0;
}
.de_dihh {
position: relative;
margin-bottom: 34px;
padding-right: 18px;
font-size: 24px;
color: var(--primary);
font-weight: 400;
}
.de_dihh::before {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 26px;
background: var(--primary);
}
.detail_txt {
font-size: 16px;
color: #333;
line-height: 30px;
margin-bottom: 14px;
}
.detail_adv {
display: flex;
gap: 40px;
flex-wrap: wrap;
margin-top: 30px;
}
.detail_advleft {
flex: 1 1 320px;
}
.detail_advright {
flex: 1 1 360px;
}
.detail_advright h3 {
font-size: 22px;
color: var(--primary);
font-weight: 400;
}
.detail_advright ul {
margin-top: 20px;
font-size: 16px;
color: #333;
line-height: 30px;
}
.detail_advright ul li {
line-height: 35px;
}
.detail_column3 {
display: flex;
gap: 3.5%;
flex-wrap: wrap;
margin-top: 24px;
}
.detail_column3 > div {
flex: 1 1 30%;
}
/* spec table (mirrors .pro_table) */
.spec-wrap {
overflow-x: auto;
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
min-width: 860px;
background: #fff;
}
.spec-table th, .spec-table td {
border: 1px solid #dcdcdc;
padding: 9px 10px;
text-align: center;
color: #333;
}
.spec-table th {
background: var(--panel);
font-weight: 700;
color: var(--primary);
}
.spec-table tr:nth-child(even) td {
background: #fafafa;
}
/* ---------- related products slider ---------- */
.del_rel {
position: relative;
}
.rel_gd {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 8px;
scrollbar-width: none;
}
.rel_gd::-webkit-scrollbar {
display: none;
}
.rel_gd > .item {
flex: 0 0 calc((100% - 40px) / 3);
}
.re_arrow span {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #dcdcdc;
color: var(--primary);
font-size: 20px;
cursor: pointer;
z-index: 3;
user-select: none;
}
.re_arrow span:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.rel_prev {
right: -20px;
}
.rel_next {
left: -20px;
}
/* ---------- product pages responsive ---------- */
@media (max-width: 1440px) {
.warper {
width: 100%;
padding: 0 20px;
}
.pro_main {
padding: 44px 25px 58px 25px;
}
}
@media (max-width: 992px) {
.de_mile, .de_miri {
float: none;
width: 100%;
padding: 0;
}
.de_miri {
padding-top: 26px;
}
.de_miri h1 {
font-size: 22px;
}
.de_desc dd {
font-size: 17px;
padding: 11px 0;
}
.de_fekubox {
margin-top: 44px;
}
.d_felc {
position: static;
width: 100%;
height: auto;
}
.de_fecous {
position: static;
}
.de_hnavid::before {
display: none;
}
.de_monav {
display: flex;
flex-wrap: wrap;
gap: 8px;
border-bottom: 1px solid var(--line);
}
.de_monav a {
width: auto;
font-size: 17px;
text-decoration: none;
padding: 10px 4px;
margin-left: 18px;
border-bottom: 2px solid transparent;
}
.de_monav a.on {
border-bottom-color: var(--primary);
}
.de_monav a.on::before {
display: none;
}
.de_cobtn {
margin: 16px 0 0;
font-size: 17px;
}
.d_ferc {
margin-right: 0;
padding-top: 30px;
}
.rel_gd > .item {
flex: 0 0 calc((100% - 20px) / 2);
}
.rel_prev {
right: 6px;
}
.rel_next {
left: 6px;
}
.po_ban .changpic {
height: 300px;
}
.subbanner img {
height: 240px;
}
}
@media (max-width: 768px) {
.pr_list li {
width: 32.3%;
margin-left: 1.5%;
}
.pr_list li:nth-of-type(4n) {
margin-left: 1.5%;
}
.pr_list li:nth-of-type(3n) {
margin-left: 0;
}
.pr_cafl {
margin-top: 25px;
}
.pr_uld {
flex-direction: column;
padding: 34px 0;
}
.pr_uld li {
width: 100%;
margin-left: 0;
margin-bottom: 22px;
}
.pr_uld li:last-child {
margin-bottom: 0;
}
.pr_uld li h3 {
font-size: 20px;
}
.po_ban .changpic {
height: 260px;
}
.po_ban .warper {
position: static;
transform: none;
right: auto;
}
.po_ban .changpic::before {
display: none;
}
.po_ban {
background: #eaf1f8;
padding-bottom: 34px;
}
.subbanner img {
height: 170px;
}
.po_bale {
width: 100%;
margin-top: 26px;
}
.po_bale h1, .po_bale h2 {
font-size: 25px;
}
.po_bale a {
margin-top: 22px;
font-size: 18px;
}
.pro_main h1, .pro_main h2 {
font-size: 26px;
}
.pr_txt h3 {
font-size: 16px;
}
.pr_txt dl dd {
font-size: 14px;
}
.digg4 {
margin-top: 14px;
}
}
@media (max-width: 640px) {
.pr_cafl li {
width: 49%;
margin-left: 2%;
margin-bottom: 12px;
}
.pr_cafl li:nth-of-type(even) {
margin-left: 0;
}
.pr_cafl li h3 {
font-size: 17px;
}
.pr_list {
margin-top: 12px;
}
.pr_list li {
width: 49%;
margin-left: 2%;
margin-bottom: 10px;
}
.pr_list li:nth-of-type(3n) {
margin-left: 2%;
}
.pr_list li:nth-of-type(even) {
margin-left: 0;
}
.rel_gd > .item {
flex: 0 0 100%;
}
.qh_gd .item {
width: 72px;
height: 72px;
}
}
@media (max-width: 480px) {
.pr_txt {
padding: 4px 8px 12px 8px;
}
.pr_txt dl {
margin-top: 5px;
}
.pr_txt dl dd {
font-size: 13px;
padding: 3px 0;
}
.pr_txt h3 {
font-size: 15px;
}
.pr_list {
margin-top: 5px;
}
.de_dihh {
font-size: 20px;
margin-bottom: 20px;
}
.pro_main {
padding: 30px 15px 40px 15px;
}
.pr_sea form {
width: 100%;
}
}
/* ---------- product detail: rich content sections ----------
Building blocks the product editor can stack: big image, three images,
image + copy, feature block. Mirrors the reference product pages. */
.de_sec {
margin-top: 46px;
}
.de_sec:first-child {
margin-top: 0;
}
.de_sec_tit {
font-size: 20px;
color: var(--primary);
font-weight: 400;
margin-bottom: 14px;
}
.de_sec p {
line-height: 30px;
color: #555;
margin-bottom: 14px;
}
.de_sec p:last-child {
margin-bottom: 0;
}
.de_sec_img {
display: block;
width: 100%;
}
/* big 版式：图可能是竖向的（如 1000×1000 整机照），只压宽度会让高度爆掉。
改成「按高度封顶 + 宽度自适应」，任何比例都不会变成巨图。 */
.de_sec_big .de_sec_img {
margin: 18px auto 0;
display: block;
width: auto;
max-width: 100%;
max-height: 480px;
}
.de_sec_col3 {
display: flex;
gap: 20px;
margin-bottom: 16px;
}
.de_sec_col3 .de_sec_col {
flex: 1 1 0;
min-width: 0;
}
.de_sec_col3 img {
display: block;
width: 100%;
}
.de_sec_split {
display: flex;
gap: 34px;
align-items: flex-start;
}
.de_sec_split.is_flip {
flex-direction: row-reverse;
}
.de_sec_pic {
flex: 0 0 42%;
}
.de_sec_pic img {
display: block;
width: 100%;
}
.de_sec_txt {
flex: 1 1 auto;
min-width: 0;
}
.de_sec_list {
margin: 6px 0 0;
}
.de_sec_list li {
position: relative;
padding-right: 22px;
line-height: 30px;
color: #555;
}
.de_sec_list li::before {
content: "";
position: absolute;
right: 4px;
top: 12px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);
}
.de_sec_extra img {
display: block;
width: 100%;
margin-top: 24px;
}
.de_sec_feature .de_dihh {
margin-bottom: 24px;
}
/* ---------- product detail: comparison spec table ---------- */
.pro_table_wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pro_table {
border-collapse: collapse;
width: 100%;
min-width: 780px;
font-size: 15px;
background: #fff;
}
.pro_table th, .pro_table td {
border: 1px solid #dcdcdc;
color: #666;
padding: 9px 10px;
text-align: center;
vertical-align: middle;
}
.pro_table thead th {
background: #eef5fc;
color: var(--primary);
font-weight: 500;
}
.pro_table tbody th.pro_model {
background: #f6f8fb;
color: #333;
font-weight: 500;
white-space: nowrap;
}
.pro_table tbody tr:nth-child(even) td {
background: #f7fbff;
}
.pro_table tbody tr:hover td {
background: #f7fbff;
}
/* ---------- product detail: applications / services / faq ---------- */
.app_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-top: 24px;
}
.app_card {
border: 1px solid var(--line);
background: #fff;
padding: 20px 18px;
}
.app_card h4 {
font-size: 16px;
color: var(--primary);
font-weight: 400;
margin-bottom: 8px;
}
.app_card p {
font-size: 14px;
color: #666;
line-height: 24px;
}
.app_ico {
position: relative;
width: 26px;
height: 26px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--primary);
}
.app_ico::after {
content: "";
position: absolute;
right: 9px;
top: 6px;
width: 6px;
height: 11px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.svc_list {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 32px;
padding-top: 30px;
border-top: 1px solid var(--line);
}
.svc_list li {
flex: 1 1 220px;
}
.svc_list h4 {
font-size: 16px;
color: var(--primary);
font-weight: 400;
margin-bottom: 6px;
}
.svc_list p {
font-size: 14px;
color: #666;
line-height: 24px;
}
.faq_list {
margin-top: 20px;
border-top: 1px solid var(--line);
}
.faq_item {
border-bottom: 1px solid var(--line);
}
.faq_item summary {
position: relative;
cursor: pointer;
padding: 16px 26px 16px 24px;
font-size: 16px;
color: var(--text-main);
list-style: none;
}
.faq_item summary::-webkit-details-marker {
display: none;
}
.faq_item summary::before {
content: "+";
position: absolute;
right: 4px;
top: 13px;
color: var(--primary);
font-size: 18px;
}
.faq_item[open] summary::before {
content: "\2013";
}
.faq_item summary:hover {
color: var(--primary);
}
.faq_a {
padding: 0 26px 18px 24px;
}
.faq_a p {
color: #666;
line-height: 28px;
}
@media (max-width: 992px) {
.app_grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.de_sec {
margin-top: 32px;
}
.de_sec_big .de_sec_img {
max-width: 100%;
}
.de_sec_split, .de_sec_split.is_flip {
flex-direction: column;
gap: 18px;
}
.de_sec_pic {
flex: 0 0 auto;
width: 100%;
}
.de_sec_col3 {
flex-direction: column;
gap: 12px;
}
.de_sec_tit {
font-size: 18px;
}
.pro_table {
font-size: 12px;
min-width: 640px;
}
.pro_table th, .pro_table td {
padding: 7px 6px;
}
.svc_list {
gap: 14px;
margin-top: 24px;
padding-top: 22px;
}
}
@media (max-width: 480px) {
.app_grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
Homepage blocks (mirrors the reference site order)
============================================================ */
.home-sec {
padding: 72px 0;
}
.home-sec:nth-of-type(even) {
background: var(--bg-gray);
}
.sec-head {
text-align: center;
margin-bottom: 44px;
}
/* Reference-site style: big bold uppercase black section titles */
.sec-head h2 {
font-size: 40px;
color: #101820;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
}
.sec-head p {
max-width: 780px;
margin: 14px auto 0;
color: var(--text-muted);
line-height: 28px;
}
.sec-more {
display: inline-block;
margin-top: 14px;
color: var(--primary);
font-size: 15px;
}
/* Case block on the reference site: solid blue band, white uppercase title */
.home-case.hc-blue {
background: var(--primary);
}
.home-case.hc-blue .sec-head h2 {
color: #fff;
}
.home-case.hc-blue .sec-head p {
color: rgba(255,255,255,.88);
}
.home-case.hc-blue .sec-more {
color: #fff;
}
.home-case.hc-blue .sec-since {
display: block;
color: rgba(255,255,255,.75);
font-size: 14px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.sec-more:hover {
text-decoration: underline;
}
/* ---------- products: picture + series list ---------- */
.hp-main {
display: flex;
gap: 40px;
align-items: stretch;
}
.hp-pic {
position: relative;
flex: 1 1 58%;
min-width: 0;
background: #fff;
border: 1px solid var(--border);
aspect-ratio: 4 / 3;
overflow: hidden;
}
/* the wrapper carries the fade — keep the inner ![]()
fully opaque, or the
picture stays invisible even on the active slide */
.hp-pic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.hp-pic .hp-img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .45s ease;
}
.hp-pic .hp-img.on {
opacity: 1;
}
.hp-list {
flex: 1 1 42%;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.hp-item {
border-right: 3px solid transparent;
transition: .25s;
}
.hp-item a {
display: block;
padding: 16px 20px;
}
.hp-item h3 {
font-size: 19px;
color: var(--text-main);
font-weight: 400;
transition: .25s;
}
.hp-item p {
color: var(--text-muted);
margin-top: 6px;
font-size: 15px;
}
.hp-item.on {
border-left-color: var(--primary);
background: #fff;
box-shadow: 0 6px 18px rgba(13, 47, 92, .07);
}
.hp-item.on h3, .hp-item:hover h3 {
color: var(--primary);
}
.hp-strip {
margin: 0;
list-style: none;
padding: 0;
}
.hp-strip .pcar-slide {
padding-left: 16px;
}
.hp-strip img {
width: 100%;
height: 210px;
object-fit: cover;
display: block;
}
.pcar-strip {
margin-top: 34px;
}
/* ---------- tech & service ---------- */
.ht-grid {
display: flex;
gap: 48px;
align-items: center;
}
.ht-left {
flex: 1 1 40%;
min-width: 0;
}
.ht-left h2 {
font-size: 32px;
color: var(--primary);
font-weight: 400;
}
.ht-left p {
color: var(--text-muted);
line-height: 28px;
margin: 18px 0 26px;
}
.ht-right {
flex: 1 1 60%;
min-width: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px 32px;
list-style: none;
margin: 0;
padding: 0;
}
.ht-ico {
position: relative;
width: 56px;
height: 56px;
margin-bottom: 12px;
border-radius: 12px;
overflow: hidden;
background: #eaf3fb;
}
.ht-ico img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ht-right h4 {
font-size: 18px;
color: var(--text-main);
font-weight: 500;
}
.ht-right p {
color: var(--text-muted);
line-height: 26px;
margin-top: 8px;
font-size: 15px;
}
/* ---------- about + numbers ---------- */
.ha-grid {
display: flex;
gap: 40px;
align-items: center;
}
.ha-img {
flex: 0 0 30%;
min-width: 0;
}
.ha-img img {
display: block;
width: 100%;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(10,37,73,.14);
}
.ha-text {
flex: 1 1 40%;
min-width: 0;
}
.ha-text h2 {
font-size: 36px;
color: #101820;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
}
.ha-text p {
color: var(--text-muted);
line-height: 30px;
margin: 16px 0 0;
}
.ha-text .btn-o {
margin-top: 26px;
}
.ha-nums {
position: relative;
flex: 1 1 30%;
min-width: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.ha-num {
position: relative;
background: #fff;
border: 1px solid var(--border);
padding: 20px 62px 20px 22px;
transition: .25s;
}
.ha-num:hover, .ha-num:focus {
border-color: var(--primary);
box-shadow: 0 8px 22px rgba(13, 47, 92, .08);
outline: none;
}
.ha-ico {
position: absolute;
right: 20px;
top: 22px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--primary);
}
.ha-ico::after {
content: "";
position: absolute;
right: 9px;
top: 6px;
width: 6px;
height: 11px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
.ha-cap {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text-muted);
}
.ha-val {
font-size: 30px;
color: var(--primary);
line-height: 1.2;
}
.ha-lab {
color: var(--text-main);
font-size: 15px;
}
.ha-note {
max-height: 0;
overflow: hidden;
color: var(--text-muted);
font-size: 14px;
line-height: 24px;
transition: max-height .3s ease, margin .3s ease;
}
.ha-num:hover .ha-note, .ha-num:focus .ha-note {
max-height: 90px;
margin-top: 8px;
}
.since-tag {
position: absolute;
top: -14px;
left: 0;
background: var(--yellow);
color: #333;
font-size: 13px;
padding: 4px 12px;
}
/* ---------- cases slider ---------- */
.hc-rel {
position: relative;
}
.hc-card {
display: block;
border: 1px solid var(--border);
background: #fff;
height: 100%;
transition: .3s;
}
.hc-card:hover {
border-color: var(--primary);
}
.hc-card .changpic {
overflow: hidden;
}
.hc-card .changpic img {
width: 100%;
height: 230px;
object-fit: cover;
display: block;
transition: transform .4s;
}
.hc-card:hover .changpic img {
transform: scale(1.06);
}
.hc-body {
padding: 18px 20px 24px;
}
.hc-body h4 {
font-size: 17px;
color: var(--primary);
font-weight: 500;
line-height: 1.5;
}
.hc-body p {
color: var(--text-muted);
margin-top: 10px;
font-size: 15px;
line-height: 26px;
}
/* ---------- news ---------- */
.hn-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
list-style: none;
margin: 0;
padding: 0;
}
.hn-card {
background: #fff;
border: 1px solid var(--border);
transition: .3s;
}
.hn-card:hover {
border-color: var(--primary);
box-shadow: 0 10px 26px rgba(13, 47, 92, .08);
}
.hn-pic {
position: relative;
overflow: hidden;
}
.hn-pic img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform .4s;
}
.hn-card:hover .hn-pic img {
transform: scale(1.05);
}
.hn-date {
position: absolute;
right: 0;
top: 0;
background: var(--primary);
color: #fff;
text-align: center;
padding: 8px 14px;
}
.hn-date b {
display: block;
font-size: 20px;
font-weight: 500;
line-height: 1.1;
}
.hn-date span {
font-size: 12px;
opacity: .9;
}
.hn-body {
padding: 18px 20px 24px;
}
.hn-body h4 {
font-size: 17px;
color: var(--text-main);
font-weight: 500;
line-height: 1.5;
}
.hn-card:hover .hn-body h4 {
color: var(--primary);
}
.hn-body p {
color: var(--text-muted);
margin-top: 10px;
font-size: 15px;
line-height: 26px;
}
/* ---------- sticky contact rail ---------- */
/* 悬浮联系条：窄屏下页面只有 ~40px 边距，62px 的条会压住正文，
所以默认只露出 10px 贴边把手，鼠标靠近/悬停时滑出；≥1600px 常驻。 */
.l_fixed {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%) translateX(calc(-100% + 10px));
transition: transform .3s ease;
z-index: 60;
}
.l_fixed:hover, .l_fixed:focus-within {
transform: translateY(-50%) translateX(0);
}
.l_fixed::after {
content: "";
position: absolute;
right: 100%;
top: -16px;
bottom: -16px;
width: 110px;
}
@media (min-width: 1600px) { .l_fixed {
transform: translateY(-50%);
} .l_fixed::after {
display: none;
} }
.l_fixed ul {
list-style: none;
}
.l_fixed a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 64px;
height: 62px;
background: #fff;
border: 1px solid var(--border);
border-right: none;
color: var(--primary);
font-size: 11px;
line-height: 1;
transition: .25s;
}
.l_fixed li + li a {
border-top: none;
}
.l_fixed a:hover {
background: var(--primary);
color: #fff;
}
.l_fixed p {
margin: 0;
}
@media (max-width: 992px) {
.home-sec {
padding: 52px 0;
}
.hp-main, .ht-grid, .ha-grid {
flex-direction: column;
gap: 26px;
}
.hp-pic {
width: 100%;
aspect-ratio: 16 / 11;
}
.hp-list {
width: 100%;
}
.ht-right {
grid-template-columns: 1fr 1fr;
}
.hn-list {
grid-template-columns: 1fr 1fr;
}
.sec-head h2, .ht-left h2, .ha-text h2 {
font-size: 26px;
}
}
@media (max-width: 768px) {
.hp-pic {
aspect-ratio: 4 / 3;
}
.hp-strip img {
height: 170px;
}
.ht-right {
grid-template-columns: 1fr;
gap: 20px;
}
.hn-list {
grid-template-columns: 1fr;
}
.hc-card .changpic img, .hn-pic img {
height: 190px;
}
.l_fixed {
display: none;
}
}
/* ============================================================
Site logo (Appearance -> Customize -> Site Identity)
------------------------------------------------------------
WordPress prints the uploaded logo through the_custom_logo(), which already
wraps it in its own . The header used to wrap that in a second , giving
nested links (invalid HTML, and browsers then collapse the outer element), so
the header markup is branch-per-case now. These rules keep a large upload
from blowing the header apart: the image is capped by height and scales.
============================================================ */
.logo .custom-logo-link {
display: flex;
align-items: center;
}
.logo img,
.logo .custom-logo {
display: block;
width: auto;
max-width: 100%;
max-height: 46px;
}
/* The footer sits on a dark panel, so a logo that reads well on the white
header can disappear there. A separate light version can be uploaded
(Site Options -> Footer logo); with nothing uploaded the footer shows the
brand name as text, and the header logo is deliberately not reused here. */
.footer-brand .logo img,
.footer-brand .custom-logo {
display: block;
width: auto;
max-height: 42px;
}
.footer-brand .logo img.footer-logo {
filter: none;
}
/* ---------- header actions (language switcher + quote button) ----------
The switcher prints nothing unless a multilingual plugin is active, so both
live in one flex group — that way the header layout is byte-for-byte the
same when no plugin is installed. */
.header-actions {
display: flex;
align-items: center;
gap: 16px;
}
/* Nothing in the header is ever a bulleted list. Polylang 3.9 hands back bare
elements when its switcher is called the legacy way, and a loose
keeps `display: list-item`, so the browser paints a default bullet next to
it. Killing markers here means no plugin's markup can leak one in. */
.site-header ul, .site-header ol {
list-style: none;
}
.site-header li {
list-style: none;
}
.site-header li::marker {
content: none;
}
.lang-switch {
display: flex;
align-items: center;
}
.lang-switch ul {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.lang-switch li {
list-style: none;
margin: 0;
}
/* the active language: Polylang marks the , TranslatePress the */
.lang-switch .lang-item-current > a,
.lang-switch a.trp-current-language {
color: #fff;
background: var(--primary);
}
.lang-switch select {
padding: 6px 10px;
font-size: 14px;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
}
.lang-switch .trp-language-switcher > div {
background: transparent;
border: none;
}
.lang-switch img {
display: inline-block;
vertical-align: middle;
}
@media (max-width: 992px) {
.header-actions {
gap: 10px;
}
}
/* ---------- header search (mirrors the reference site) ----------
A round magnifier button in the header opens a full-width bar below it. The
bar keeps zero height instead of `hidden` so the transition has something to
animate. */
.head-search-toggle {
width: 38px;
height: 38px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: var(--primary);
border: 0;
border-radius: 50%;
cursor: pointer;
transition: .25s;
}
.head-search-toggle:hover, .head-search-toggle[aria-expanded="true"] {
background: #0b68b3;
}
.head-search {
background: var(--primary);
overflow: hidden;
max-height: 0;
transition: max-height .32s ease;
}
.head-search.is-open {
max-height: 64px;
}
.head-search form {
display: flex;
align-items: center;
height: 56px;
}
.head-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
height: 56px;
padding: 0 8px;
font-size: 16px;
color: #fff;
background: transparent;
border: 0;
outline: none;
}
.head-search input[type="search"]::placeholder {
color: rgba(255, 255, 255, .72);
}
.head-search button {
flex: 0 0 auto;
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
transition: .25s;
}
.head-search button:hover {
color: var(--accent);
}
/* ---------- back to top ---------- */
.to-top {
position: fixed;
left: 26px;
bottom: 96px;
z-index: 70;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 6px 18px rgba(13, 47, 92, .22);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .3s, transform .3s, visibility .3s, background .25s;
}
.to-top.is-on {
opacity: 1;
visibility: visible;
transform: none;
}
.to-top:hover {
color: #fff;
background: #0b68b3;
}
/* ---------- language switcher ----------
Polylang prints one row per language. Collapse it to the active language — a
soft pill with the theme-blue caret, as on the reference site — and reveal
the rest as a dropdown. Click rather than :hover: hover cannot be reached on
a touch screen, and a stray pointer leaving the element would close the
panel under the visitor's finger. */
.lang-switch.is-polylang {
position: relative;
}
.lang-switch.is-polylang li {
margin: 0;
}
.lang-switch.is-polylang li > a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
font-size: 14px;
line-height: 1;
white-space: nowrap;
color: var(--text-main);
background: var(--bg-gray);
border: 0;
border-radius: 999px;
transition: background .2s, color .2s;
}
.lang-switch.is-polylang li > a:hover {
color: var(--primary);
background: #e9edf3;
}
.lang-switch.is-polylang img {
display: block;
width: 16px;
height: auto;
}
.lang-switch.is-polylang li.current-lang > a::after {
content: "";
width: 0;
height: 0;
margin-right: 1px;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 5px solid var(--primary);
transition: transform .2s;
}
.lang-switch.is-polylang li:not(.current-lang) {
display: none;
}
.lang-switch.is-polylang.is-open li {
display: block;
}
.lang-switch.is-polylang.is-open li.current-lang > a::after {
transform: rotate(180deg);
}
.lang-switch.is-polylang.is-open > ul {
flex-direction: column;
align-items: stretch;
position: absolute;
left: 0;
top: calc(100% + 6px);
z-index: 60;
min-width: 100%;
padding: 6px;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 10px 26px rgba(13, 47, 92, .14);
}
.lang-switch.is-polylang.is-open li > a {
border-radius: 7px;
background: transparent;
}
.lang-switch.is-polylang.is-open li > a:hover {
background: var(--bg-light);
}
.lang-switch.is-polylang.is-open li.current-lang > a {
background: var(--bg-gray);
}
/* some plugin markup insists on `width: 100%`; inside the header it must not */
.lang-switch .pll-switcher {
width: auto;
}
/* WPML / TranslatePress / GTranslate — compact pills, no dropdown. */
.lang-switch:not(.is-polylang) ul {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.lang-switch:not(.is-polylang) a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: 14px;
line-height: 1;
color: var(--text-main);
background: var(--bg-gray);
border: 0;
border-radius: 999px;
}
.lang-switch:not(.is-polylang) a:hover {
color: var(--primary);
background: #e9edf3;
}
@media (max-width: 992px) {
.lang-switch.is-polylang li > a,
.lang-switch:not(.is-polylang) a {
padding: 6px 11px;
font-size: 13px;
}
.lang-switch.is-polylang img {
width: 14px;
}
}
@media (max-width: 768px) {
.header-actions {
gap: 8px;
}
.header-cta {
padding: 8px 14px;
font-size: 13px;
}
.head-search-toggle {
width: 34px;
height: 34px;
}
.head-search form {
height: 50px;
}
.head-search input[type="search"] {
height: 50px;
font-size: 15px;
}
.head-search button {
width: 50px;
height: 50px;
}
.to-top {
left: 14px;
bottom: 78px;
width: 42px;
height: 42px;
}
}
/* ---------- Page templates (About / Contact and friends) ----------
Page bodies reuse .article-content for typography; these rules cover what is
specific to the layouts. */
.page-lead {
max-width: 980px;
margin-bottom: 40px;
}
.page-lead p {
color: var(--text-muted);
font-size: 16px;
line-height: 30px;
}
/* the tabbed layout borrows the product-detail structure, so only the spacing
needs adjusting — nothing here touches the product pages themselves */
.page-tabs .de_fekubox {
margin-top: 52px;
}
.detail_item .article-content > :first-child {
margin-top: 0;
}
.detail_item .article-content > :last-child {
margin-bottom: 0;
}
/* columns inside a tabbed section read as cards (About's numbers, fact rows) */
.detail_item .wp-block-columns {
gap: 20px;
margin-bottom: 24px;
}
.detail_item .wp-block-column {
padding: 24px 22px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 8px;
}
.detail_item .wp-block-column > :first-child {
margin-top: 0;
}
/* heading inside a card reads as the figure it introduces (About's numbers) */
.detail_item .wp-block-column h3 {
font-size: 26px;
line-height: 1.2;
margin-bottom: 8px;
}
.detail_item .wp-block-column p {
font-size: 14px;
color: var(--text-muted);
margin-bottom: 0;
}
@media (max-width: 992px) {
.page-tabs .de_fekubox {
margin-top: 36px;
}
.page-tabs .d_felc {
position: static;
width: 100%;
height: auto;
}
.page-tabs .de_hnavid::before {
display: none;
}
.page-tabs .de_monav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 0;
}
.page-tabs .de_monav a {
width: auto;
padding: 8px 14px;
font-size: 15px;
text-decoration: none;
border: 1px solid var(--border);
border-radius: 4px;
}
.page-tabs .de_monav a.on {
color: #fff;
background: var(--primary);
border-color: var(--primary);
}
.page-tabs .de_monav a.on::before {
display: none;
}
.page-tabs .de_cobtn {
display: none;
}
.page-tabs .d_ferc {
margin-right: 0;
padding-top: 26px;
}
}
@media (max-width: 768px) {
.detail_item .wp-block-columns {
flex-direction: column;
}
.detail_item {
margin-bottom: 36px;
}
}
/* ---------- list-page intro (Appearance → Customize → Page Intros) ---------- */
.page-intro {
max-width: 940px;
margin: 0 0 34px;
color: var(--text-muted);
font-size: 15.5px;
line-height: 29px;
}
.news-wrap .page-intro {
margin: 0 auto 34px;
text-align: center;
}
/* ---------- contact details ( [yourbrand_contact_info] ) ---------- */
.contact-info {
list-style: none;
margin: 0 0 26px;
padding: 0;
}
.contact-info li {
display: flex;
gap: 14px;
padding: 13px 0;
border-bottom: 1px solid var(--border);
}
.contact-info li:last-child {
border-bottom: none;
}
.ci-label {
flex: 0 0 106px;
color: var(--text-muted);
font-size: 14px;
}
.ci-value {
flex: 1 1 auto;
min-width: 0;
color: var(--text-main);
font-size: 15px;
word-break: break-word;
}
.ci-value a {
color: var(--primary);
}
.ci-value a:hover {
text-decoration: underline;
}
.contact-empty {
color: var(--text-muted);
font-size: 14px;
}
/* ---------- map ( [yourbrand_map] ) ---------- */
.map-embed {
margin: 0;
overflow: hidden;
background: var(--bg-gray);
border: 1px solid var(--border);
border-radius: 8px;
}
.map-embed iframe {
display: block;
width: 100%;
height: 360px;
border: 0;
}
.map-embed--empty {
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #a7b0bd;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
}
@media (max-width: 640px) {
.contact-info li {
flex-direction: column;
gap: 4px;
}
.ci-label {
flex: 0 0 auto;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: .5px;
}
.map-embed iframe {
height: 260px;
}
}
/* ============================================================
Generic page body (Tech & Service and other content pages)
------------------------------------------------------------
Page bodies sit inside the 1360px container, which is too wide
for long copy — constrain the reading measure and add the block
patterns these pages are authored with. Everything authored in
the editor uses standard blocks, so it stays editable.
============================================================ */
.page-content {
max-width: 1060px;
margin: 0 auto;
}
.page-content > :first-child {
margin-top: 0;
}
.page-content > p.page-lead {
font-size: 16.5px;
line-height: 31px;
color: var(--text-muted);
margin-bottom: 34px;
}
/* split blocks: a figure beside copy, alternating down the page */
.page-content .wp-block-columns {
gap: 44px;
margin-bottom: 52px;
}
.page-content .wp-block-column > :first-child {
margin-top: 0;
}
.page-content .wp-block-column > :last-child {
margin-bottom: 0;
}
.page-content .wp-block-columns.pg-flip {
flex-direction: row-reverse;
}
/* the figure half */
.pg-fig {
margin: 0;
padding: 20px;
background: var(--bg-light);
border: 1px solid var(--border);
border-radius: 10px;
}
.pg-fig svg {
display: block;
width: 100%;
height: auto;
}
.pg-fig figcaption {
margin: 12px 0 0;
font-size: 13px;
color: var(--text-muted);
text-align: center;
}
/* the copy half */
.pg-tit {
font-size: 21px;
color: var(--primary);
margin: 0 0 12px;
}
.pg-list {
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.pg-list li {
position: relative;
padding-right: 30px;
margin-bottom: 10px;
line-height: 28px;
color: #555;
}
.pg-list li::before {
content: "";
position: absolute;
right: 0;
top: 4px;
width: 19px;
height: 19px;
border-radius: 50%;
background: rgba(14, 124, 213, .12);
}
.pg-list li::after {
content: "";
position: absolute;
right: 6px;
top: 9px;
width: 5px;
height: 9px;
border-left: 2px solid var(--primary);
border-bottom: 2px solid var(--primary);
transform: rotate(45deg);
}
/* quiet call to action inside the copy */
.pg-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 9px 18px;
font-size: 14px;
color: var(--primary);
background: rgba(14, 124, 213, .08);
border-radius: 4px;
}
.pg-cta:hover {
color: #fff;
background: var(--primary);
}
.pg-cta::after {
content: "\2192";
}
/* three-up cards */
.page-content .wp-block-columns.is-cards {
gap: 18px;
}
.page-content .wp-block-columns.is-cards .wp-block-column {
padding: 22px 20px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
}
.page-content .wp-block-columns.is-cards h4 {
font-size: 16px;
color: var(--primary);
margin: 0 0 8px;
}
.page-content .wp-block-columns.is-cards p {
font-size: 14px;
color: var(--text-muted);
line-height: 24px;
margin: 0;
}
/* contact strip (service page) */
.pg-contact {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 24px 0 40px;
}
.pg-contact .pg-c {
padding: 20px;
text-align: center;
background: var(--bg-gray);
border-radius: 8px;
}
.pg-contact .pg-c span {
display: block;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.pg-contact .pg-c a {
font-size: 16px;
color: var(--primary);
}
.pg-contact .pg-c a:hover {
text-decoration: underline;
}
@media (max-width: 900px) {
.page-content .wp-block-columns {
gap: 22px;
margin-bottom: 38px;
}
.pg-contact {
grid-template-columns: 1fr;
}
.page-content > p.page-lead {
font-size: 15.5px;
line-height: 28px;
}
}
@media (max-width: 768px) {
.page-content .wp-block-columns,
.page-content .wp-block-columns.pg-flip {
flex-direction: column;
}
}
/* ---------- news list: featured strip ----------
The strip at the top of the news page. Driven by the "featured" category,
with sticky posts as the fallback — see home.php for why. */
.featured-tit {
margin: 0 0 20px;
font-size: 20px;
font-weight: 400;
color: var(--primary);
padding-right: 12px;
border-right: 3px solid var(--primary);
line-height: 1.3;
}
.news-featured {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 0 0 44px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.nf-item {
display: block;
background: #fff;
border: 1px solid var(--border);
color: inherit;
transition: .3s;
}
.nf-item:hover {
border-color: var(--primary);
box-shadow: 0 10px 26px rgba(13, 47, 92, .08);
}
.nf-pic {
overflow: hidden;
background: var(--bg-light);
}
.nf-pic img {
display: block;
width: 100%;
height: 190px;
object-fit: cover;
transition: transform .4s;
}
.nf-item:hover .nf-pic img {
transform: scale(1.05);
}
.nf-body {
padding: 16px 18px 20px;
}
.nf-body h3 {
font-size: 16px;
line-height: 1.5;
color: var(--text-main);
font-weight: 500;
}
.nf-item:hover .nf-body h3 {
color: var(--primary);
}
.nf-body p {
margin-top: 9px;
font-size: 14px;
line-height: 24px;
color: var(--text-muted);
}
@media (max-width: 900px) {
.news-featured {
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 34px;
padding-bottom: 30px;
}
.nf-pic img {
height: 160px;
}
}
@media (max-width: 600px) {
.news-featured {
grid-template-columns: 1fr;
}
.nf-pic img {
height: 180px;
}
}
/* ============================================================
Hand-written RTL adjustments
------------------------------------------------------------
The mirrored rules above cover geometry. These are the handful of cases a
mechanical left/right swap cannot express correctly.
============================================================ */
/* ---- horizontal centring ----
`left: 50%` + `translateX(-50%)` only works as a pair. Mirroring just the
`left` leaves the transform pulling the wrong way, so put it back: centring
is direction-neutral. */
.hero-dots { left: 50%; }
.po_ban .warper { left: 50%; }
/* ---- carousel / slider arrow glyphs ----
The positions mirror correctly (previous ends up on the right), but ❮ and ❯
have to be flipped with them or the arrows point at the wrong end. */
.hero-arrows button { transform: translateY(-50%) scaleX(-1); }
.re_arrow span { transform: translateY(-50%) scaleX(-1); }
/* ---- sticky contact rail ----
It now sits on the right edge, so it has to peek out to the right and slide
in towards the left. */
.l_fixed { transform: translateY(-50%) translateX(calc(100% - 10px)); }
.l_fixed:hover, .l_fixed:focus-within { transform: translateY(-50%) translateX(0); }
@media (min-width: 1600px) {
.l_fixed { transform: translateY(-50%); }
}
/* ---- card / list copy inside carousels ----
The carousel machinery positions slides by index and moves the track with
translate3d, so it relies on the flex main axis. In an RTL page `row`
already lays the slides out from the right, which is what we want; keeping
the track inside the page direction is therefore deliberate - do NOT force
`direction: ltr` here or the clones and the transform desync. */
.pcar-slide h3,
.pcar-slide p,
.hp-item h3,
.hp-item p { text-align: right; }
/* ---- spec table ----
Model codes, voltages and dimensions are Latin/numeric; centre them so the
bidi algorithm never pushes punctuation to the wrong end of a cell. */
.pro_table th,
.pro_table td { text-align: center; }
.pro_table tbody th.pro_model { white-space: nowrap; }
/* ---- forms ----
Phone numbers / e-mail placeholders stay readable left-to-right. */
.inquiry-form input[type="email"],
.inquiry-form input[type="tel"] { direction: ltr; text-align: right; }
/* ---- inline icons that used physical offsets ---- */
.pr_uld li::after { transform: rotate(45deg) scaleX(-1); }
/* ---- back-to-top button ----
The mirrored `right` correctly moves it to the left, but the generator also
keeps the base rule's offset which is already expressed in logical terms
here; pin it explicitly so it never lands in the middle. */
.to-top { right: auto; left: 26px; }
@media (max-width: 768px) {
.to-top { right: auto; left: 14px; }
}
/* ---- language dropdown ----
It hangs off the right edge of its trigger in LTR; in RTL the trigger sits on
the left of the row, so the panel has to open towards the left instead. */
.lang-switch.is-polylang.is-open > ul { right: auto; left: 0; }
/* ---- header search ----
Magnifier sits at the end of the bar (left in RTL); placeholders and typed
text follow the page direction, which is what a reader expects. */
.head-search input[type="search"] { direction: rtl; }
.head-search input[type="search"]::placeholder { direction: rtl; }