/* ========================================================================== PLC VFD HMI DEALER — SHARED PRODUCT PAGE STYLESHEET File: /product/css2/hmi-product-style.css ---------------------------------------------------------------------- Extracted and cleaned up from the "Siemens Simatic HMI Standard Devices 2nd Generation" product page so it can be linked from ANY product page on the site (KTP400, KTP700, KTP900, KTP1200, TP series, Comfort Panels, PLC, VFD, WinCC, etc). HOW TO USE ON A NEW PRODUCT PAGE ---------------------------------------------------------------------- 1. Link it in : (path is relative to /product//.php — adjust the number of "../" if the page lives deeper/shallower than /product//) 2. Reuse the same class names in the page body: .pvd-wrap, .pvd-hero, .pvd-hero-media, .pvd-hero-content, .pvd-cta, .pvd-grid / .pvd-card, .pvd-faq, .pvd-reach, .pvd-location-card, .pvd-industrial-locations, etc. Every section below is commented so you know which block of HTML it belongs to. ========================================================================== */ :root{ --brand-blue:#2fb4d9; --brand-blue-dark:#1a94b3; --brand-yellow:#fab90a; --ink:#1f2a2e; --ink-soft:#4b5a60; --line:#e1e8eb; --surface:#ffffff; --surface-soft:#f6fafb; --radius:10px; --shadow-sm:0 2px 10px rgba(20,40,50,.06); } /* ========================================================================== 1. PAGE WRAPPER ========================================================================== */ .pvd-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:var(--ink); } /* ========================================================================== 2. HERO BLOCK Markup:

...

...

...

Get Live Price & Datasheet →
... 3x .pvd-card ...
========================================================================== */ .pvd-hero{ display:block; width:100%; box-sizing:border-box; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:10px; margin:18px auto; overflow:hidden; } .pvd-hero-media{ width:100%; margin:0; padding:0; line-height:0; text-align:center; } .pvd-hero-media img{ display:block; width:100%; max-width:100%; height:auto; max-height:430px; object-fit:contain; margin:0 auto; padding:0; border:0; border-radius:7px; } .pvd-hero-content{ width:100%; box-sizing:border-box; margin:0; padding:12px 4px 2px; } .pvd-hero h1{ font-family:'Raleway',Arial,sans-serif; font-size:clamp(21px,3vw,29px); font-weight:800; line-height:1.25; margin:0 0 8px; padding:0; color:var(--ink); } .pvd-hero p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 9px; padding:0; } .pvd-hero .pvd-intent{ font-size:13px; line-height:1.4; font-weight:600; color:#777; margin:0 0 11px; padding:0; } .pvd-cta{ display:inline-flex; align-items:center; justify-content:center; gap:7px; margin:3px 0 0; padding:10px 17px; background:#e30613; color:#fff !important; text-decoration:none !important; border-radius:4px; font-size:14px; font-weight:700; line-height:1.2; transition:.2s ease; } .pvd-cta:hover{ background:#bd000b; color:#fff !important; transform:translateY(-1px); } .pvd-cta:focus-visible{ outline:3px solid var(--brand-yellow); outline-offset:2px; } .pvd-cta span{ font-size:17px; line-height:1; } /* 3-up "what / who / how" info cards under the hero */ .pvd-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin:28px auto; } @media(min-width:700px){ .pvd-grid{ grid-template-columns:repeat(3,1fr); } } .pvd-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); } .pvd-card h3{ margin:0 0 8px; font-size:16px; font-weight:700; color:var(--ink); } .pvd-card p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-soft); } /* ========================================================================== 3. DESCRIPTION / SPEC TABLE TAB Markup:
...
MLFB no:DESCRIPTION
========================================================================== */ #tab-description{ max-width:1200px; margin:30px auto; padding:0; box-sizing:border-box; font-family:'Open Sans',Arial,Helvetica,sans-serif; color:var(--ink); } .product-tab-box{ margin:0; padding:0; border:none; } .product-tab-box li.description_tab{ list-style:none; margin:0; padding:0; } .product-tab-box li.description_tab a{ display:inline-block; padding:13px 28px; background:var(--brand-blue); color:#fff !important; font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; text-decoration:none !important; border:1px solid var(--brand-blue-dark); border-bottom:4px solid var(--brand-yellow); border-radius:8px 8px 0 0; box-shadow:0 -2px 8px rgba(0,0,0,.05); transition:background .2s ease; } .product-tab-box li.description_tab a:hover{ background:var(--brand-yellow); border-color:#e5a800; color:#fff !important; } #tab-description{ background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--brand-blue); border-radius:0 10px 10px 10px; padding:22px; box-shadow:var(--shadow-sm); overflow-x:auto; } #tab-description table, table.mytab{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; font-size:14.5px; box-shadow:0 2px 8px rgba(0,0,0,.04); margin:18px 0; } #tab-description table td, #tab-description table th, table.mytab td, table.mytab th{ padding:15px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:middle; line-height:1.65; text-align:left; overflow-wrap:break-word; } #tab-description table td:last-child, table.mytab td:last-child{ border-right:none; } #tab-description table tr:last-child td, table.mytab tr:last-child td{ border-bottom:none; } #tab-description table td:first-child, table.mytab td:first-child{ width:24%; background:linear-gradient(135deg,var(--surface-soft),#eaf2f5); color:#222; font-weight:700; border-left:5px solid var(--brand-blue); font-family:Consolas,"Courier New",monospace; font-size:13.5px; scroll-margin-top:100px; } #tab-description table td:nth-child(2), table.mytab td:nth-child(2){ width:76%; background:#fff; color:#444; font-weight:400; } #tab-description table tr:hover td:nth-child(2){ background:#f8fcfd; } #tab-description table tr:hover td:first-child{ background:#eef9fc; border-left-color:var(--brand-yellow); } #tab-description table th, table.mytab th{ background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark)); color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } #tab-description table tr:target td, table.mytab tr:target td{ background:#fff6dd !important; } /* Generic content headings/lists inside the description tab */ .pvd-body h2{ font-family:'Raleway',Arial,sans-serif; font-size:22px; font-weight:800; color:var(--ink); margin:26px 0 12px; } .pvd-body h3{ font-family:'Raleway',Arial,sans-serif; font-size:17px; font-weight:800; color:var(--brand-blue-dark); margin:20px 0 8px; } .pvd-body p{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 12px; } .pvd-body ul{ margin:0 0 16px; padding-left:20px; } .pvd-body ul li{ font-size:14.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:6px; } .pvd-body strong{ color:var(--ink); } /* WooCommerce Description tab - force black link text */ ul.wc-tabs li.description_tab a, ul.wc-tabs li.description_tab a:link, ul.wc-tabs li.description_tab a:visited, ul.wc-tabs li.description_tab a:hover, ul.wc-tabs li.description_tab a:focus, ul.wc-tabs li.description_tab a:active{ color:#000 !important; -webkit-text-fill-color:#000 !important; text-shadow:none !important; opacity:1 !important; } /* ========================================================================== 4. FAQ ACCORDION Markup:

Frequently Asked Questions

...

...

========================================================================== */ .pvd-faq{ max-width:1200px; margin:32px auto; } .pvd-faq h2{ font-family:'Raleway',Arial,sans-serif; font-size:24px; font-weight:800; margin:0 0 16px; } .pvd-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-bottom:10px; padding:14px 18px; box-shadow:var(--shadow-sm); } .pvd-faq summary{ font-weight:700; cursor:pointer; font-size:15.5px; color:var(--ink); } .pvd-faq summary::marker{ color:var(--brand-blue); } .pvd-faq p{ margin:10px 0 0; font-size:14.5px; line-height:1.7; color:var(--ink-soft); } /* ========================================================================== 5. GLOBAL REACH / EXPORT CTA STRIP Markup:

Have an MLFB number ...

Request Export Quote →
========================================================================== */ .pvd-reach{ max-width:1200px; margin:40px auto; } .pvd-reach-cta{ margin-top:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; background:linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark)); border-radius:14px; padding:20px 24px; color:#fff; } .pvd-reach-cta p{ margin:0; font-size:14.5px; max-width:560px; line-height:1.6; } .pvd-reach-cta p b{ font-weight:800; } .pvd-reach-cta .pvd-cta{ background:#fff; color:var(--brand-blue-dark) !important; } .pvd-reach-cta .pvd-cta:hover{ background:var(--brand-yellow); color:#fff !important; } /* Continent-grouped cards (optional, used on some category pages) */ .pvd-continents{ display:flex; flex-direction:column; gap:22px; } .pvd-continent{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm); overflow:hidden; } .pvd-continent-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 22px; background:linear-gradient(135deg,var(--surface-soft),#eef6f8); border-bottom:1px solid var(--line); } .pvd-continent-head .name{ display:flex; align-items:center; gap:10px; } .pvd-continent-head .name .icon{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--brand-blue); color:#fff; font-size:16px; flex:none; } .pvd-continent-head h3{ margin:0; font-size:17px; font-weight:800; color:var(--ink); font-family:'Raleway',Arial,sans-serif; } .pvd-continent-head .kw{ font-size:12.5px; color:var(--brand-blue-dark); font-weight:700; background:#fff; border:1px solid var(--line); padding:4px 12px; border-radius:999px; } .pvd-country-grid{ display:grid; grid-template-columns:1fr; gap:14px; padding:18px 22px 22px; } @media(min-width:700px){ .pvd-country-grid{ grid-template-columns:repeat(2,1fr); } } @media(min-width:1050px){ .pvd-country-grid{ grid-template-columns:repeat(3,1fr); } } /* ========================================================================== 6. LOCATION / SUPPORT / QUOTE CARDS (sidebar-style content blocks) Markup:

...

...

...
========================================================================== */ .pvd-location-card{ background:#fff; border:1px solid #e5e9ed; border-radius:8px; padding:16px; margin:0 0 16px 0; box-sizing:border-box; box-shadow:0 2px 8px rgba(0,0,0,.045); } .pvd-location-card h2{ color:#159dcc; font-family:'Raleway',Arial,Helvetica,sans-serif; font-size:19px; font-weight:800; line-height:1.3; margin:0 0 12px 0; padding:0 0 9px 0; border-bottom:2px solid #edf4f7; } .pvd-location-card p{ color:#555; font-size:13.5px; line-height:1.65; margin:0 0 10px 0; padding:0; } .pvd-location-card p:last-child{ margin-bottom:0; } .pvd-label{ color:#333 !important; font-size:12px !important; font-weight:700; text-transform:uppercase; letter-spacing:.35px; margin-bottom:5px !important; } .pvd-location-list{ color:#555; } .pvd-location-intro{ font-size:13px !important; color:#666 !important; margin-bottom:12px !important; } .pvd-country{ color:#555; font-size:12.8px; line-height:1.65; padding:8px 0; border-bottom:1px solid #f0f2f3; } .pvd-country:last-child{ border-bottom:none; padding-bottom:0; } .pvd-country strong{ color:#222; font-weight:700; } .pvd-city-tags{ display:flex; flex-wrap:wrap; gap:6px; } .pvd-city-tags span{ display:inline-block; background:#f2f9fc; border:1px solid #d9edf4; color:#3f5963; border-radius:4px; padding:5px 7px; font-size:11.5px; line-height:1.2; } .pvd-support-card{ background:#f9fcfd; } .pvd-support-card strong{ color:#222; } .pvd-quote-card{ background:linear-gradient(135deg,#f7fcfe 0%,#ffffff 100%); border-color:#d7edf5; } .pvd-quote-card h2{ color:#087fa9; } .pvd-quote-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; box-sizing:border-box; margin-top:13px; padding:11px 12px; background:#087fba; color:#fff !important; text-decoration:none !important; border-radius:5px; font-size:13px; font-weight:700; line-height:1.3; transition:all .2s ease; } .pvd-quote-btn:hover{ background:#05658f; color:#fff !important; transform:translateY(-1px); } .pvd-quote-btn span{ font-size:16px; line-height:1; } /* ========================================================================== 7. INTERNATIONAL INDUSTRIAL LOCATIONS BLOCK Markup:
International Industrial Locations – ...
...
UAE: ...
...
========================================================================== */ .pvd-industrial-locations{ display:block; position:relative; width:100%; max-width:100%; margin:30px 0 0 0; padding:0; float:none; clear:both; box-sizing:border-box; text-align:left; } .pvd-industrial-locations .pvd-location-box{ display:block; width:100%; max-width:100%; margin:0 0 20px 0; padding:22px; box-sizing:border-box; float:none; clear:both; background:#fff; border:1px solid #dfe5e8; border-left:5px solid #159dcc; border-radius:8px; box-shadow:0 3px 12px rgba(0,0,0,.06); text-align:left; } .pvd-industrial-locations .pvd-location-title{ display:block; width:100%; margin:0 0 16px 0; padding:0 0 10px 0; box-sizing:border-box; text-align:left; color:#222; font-family:'Raleway',Arial,sans-serif; font-size:21px; font-weight:800; line-height:1.3; border-bottom:2px solid #edf4f7; } .pvd-industrial-locations .pvd-location-intro{ display:block; width:100%; margin:0 0 15px 0; padding:10px 12px; box-sizing:border-box; text-align:left; color:#555; background:#f7fafb; border:1px solid #e1e8eb; border-radius:5px; font-size:13.5px; line-height:1.7; } .pvd-industrial-locations .pvd-location-country{ display:block; width:100%; max-width:100%; margin:0 0 8px 0; padding:10px 12px; box-sizing:border-box; float:none; clear:both; text-align:left; color:#555; background:#fff; border:1px solid #e3e7e9; border-left:3px solid var(--brand-yellow); border-radius:4px; font-size:13px; line-height:1.65; transition:all .2s ease; } .pvd-industrial-locations .pvd-location-country:hover{ background:#f8fcfd; border-left-color:#159dcc; transform:translateX(2px); } .pvd-industrial-locations .pvd-location-country strong{ display:inline-block; min-width:125px; color:#222; font-weight:700; } /* ========================================================================== 8. KEYWORD / CITY LIST SCROLL BOX (used for the long "more cities" block) Markup:
... | ... | ...
========================================================================== */ .pvd-keyword-scroll{ width:100%; max-height:220px; overflow-y:auto; overflow-x:hidden; padding:16px 18px; box-sizing:border-box; background:#f7f9fb; border:1px solid #dfe4e8; border-left:4px solid var(--brand-blue); border-radius:6px; font-family:Arial,sans-serif; line-height:1.8; margin:14px 0; } .pvd-keyword-scroll::-webkit-scrollbar{ width:8px; } .pvd-keyword-scroll::-webkit-scrollbar-track{ background:#e8ecef; border-radius:10px; } .pvd-keyword-scroll::-webkit-scrollbar-thumb{ background:var(--brand-blue); border-radius:10px; } .pvd-keyword-scroll::-webkit-scrollbar-thumb:hover{ background:var(--brand-blue-dark); } .pvd-keyword-list{ font-size:13px; color:#333; text-align:left; } /* ========================================================================== 9. RESPONSIVE ========================================================================== */ @media(max-width:640px){ .pvd-continent-head{ padding:14px 16px; } .pvd-country-grid{ padding:14px 16px 18px; } } @media(max-width:768px){ #tab-description{ margin:20px auto; padding:12px; border-radius:0 8px 8px 8px; overflow-x:auto; } .product-tab-box .tabs li.description_tab a{ padding:11px 20px; font-size:15px; } #tab-description table, table.mytab{ min-width:650px; font-size:14px; } #tab-description table td, #tab-description table th, table.mytab td, table.mytab th{ padding:12px 14px; line-height:1.6; } } @media(max-width:600px){ .pvd-wrap{ padding:0 5px; } .pvd-hero{ padding:7px; margin:12px auto; border-radius:8px; } .pvd-hero-media img{ max-height:300px; border-radius:6px; } .pvd-hero-content{ padding:10px 3px 2px; } .pvd-hero h1{ font-size:21px; line-height:1.3; } .pvd-hero p{ font-size:14px; line-height:1.58; } .pvd-hero .pvd-intent{ font-size:12px; } .pvd-cta{ width:100%; box-sizing:border-box; } .pvd-location-card{ padding:13px; margin-bottom:12px; border-radius:7px; } .pvd-location-card h2{ font-size:17px; } .pvd-location-card p, .pvd-country{ font-size:13px; line-height:1.6; } .pvd-city-tags{ gap:5px; } .pvd-city-tags span{ font-size:11px; padding:5px 6px; } } @media(max-width:480px){ #tab-description{ padding:8px; border-top-width:3px; } .product-tab-box .tabs li.description_tab a{ padding:10px 16px; font-size:14px; border-bottom-width:3px; } #tab-description table, table.mytab{ min-width:600px; font-size:13px; } #tab-description table td, #tab-description table th, table.mytab td, table.mytab th{ padding:10px 12px; } }