/* ===================================================================== Carbon Rotofluid — MASTER STYLESHEET (one file for the whole website) --------------------------------------------------------------------- Every page loads only this file: To change a colour, font size, spacing etc. edit it HERE, once. Page-specific tweaks are switched on by a class on : -> index.html -> products / rotary-joints / rotary-unions -> products.html only ===================================================================== */ /* ===================================================================== BASE, TYPOGRAPHY & BUTTONS ===================================================================== */ :root{ --orange:#E85A08; --orange-dark:#C94E07; --orange-light:#FFF2E6; --orange-pale:#FFF8F2; --charcoal:#1C1C1C; --ink:#222222; --gray:#5B5955; --gray-light:#8A8782; --line:#EADFD5; --bg:#FBF9F7; --white:#FFFFFF; --radius:10px; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:"Inter", Arial, sans-serif; color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:"Poppins", Arial, sans-serif; font-weight:700; color:var(--charcoal); letter-spacing:-0.01em; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } img{ max-width:100%; display:block; } .container{ max-width:1240px; margin:0 auto; padding:0 32px; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); margin-bottom:14px; } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); display:inline-block; } .section{ padding:88px 0; } .section-head{ max-width:680px; margin-bottom:44px; } .section-head h2{ font-size:30px; line-height:1.25; margin-bottom:14px; } .section-head p{ color:var(--gray); font-size:16px; } .btn{ display:inline-flex; align-items:center; gap:10px; font-family:"Poppins", Arial, sans-serif; font-weight:600; font-size:14.5px; padding:14px 26px; border-radius:6px; transition:all .18s ease; border:2px solid transparent; white-space:nowrap; } .btn-primary{ background:var(--orange); color:#fff; } .btn-primary:hover{ background:var(--orange-dark); transform:translateY(-1px); } .btn-outline{ border-color:var(--charcoal); color:var(--charcoal); } .btn-outline:hover{ background:var(--charcoal); color:#fff; } .btn-outline-light{ border-color:rgba(255,255,255,0.55); color:#fff; } .btn-outline-light:hover{ background:#fff; color:var(--charcoal); } .section-tight{ padding:64px 0; } /* ===================================================================== HEADER & NAVIGATION (markup lives in includes/header.html) ===================================================================== */ html{ scroll-padding-top:132px; } .include-slot{ display:block; } #site-header.include-slot{ min-height:120px; } /* stops the page jumping while the header loads */ .site-header{ position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--line); } .topbar{ background:var(--charcoal); color:#cfcfcf; font-size:13px; } .topbar .container{ display:flex; justify-content:space-between; align-items:center; height:36px; gap:20px; } .topbar .contact-line{ display:flex; gap:28px; } .topbar .contact-line span{ display:flex; align-items:center; gap:6px; } .topbar .contact-line b{ color:var(--orange); font-weight:600; } .topbar .contact-line a:hover{ color:#fff; } .navwrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; height:84px; } .logo{ display:flex; align-items:center; flex-shrink:0; } .logo img{ height:62px; width:auto; } .header-cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .mainnav{ display:flex; align-items:center; justify-content:center; flex:1; min-width:0; } .menu{ display:flex; align-items:center; list-style:none; } .menu > li{ position:relative; } .menu-row{ display:flex; align-items:center; } .menu a{ font-family:'Poppins',Arial,sans-serif; } .menu > li > a, .menu > li > .menu-row > a{ display:block; padding:31px 12px; font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; transition:color .15s ease; } .menu > li.has-sub > .menu-row > a{ padding-right:2px; } .menu > li > a.current, .menu > li.has-current > .menu-row > a{ color:var(--orange); } @media (hover:hover){ .menu > li:hover > a, .menu > li:hover > .menu-row > a, .menu > li:hover > .menu-row > .sub-toggle{ color:var(--orange); } } .sub-toggle{ display:flex; align-items:center; justify-content:center; align-self:stretch; padding:0 8px 0 2px; background:none; border:0; cursor:pointer; color:var(--gray-light); font:inherit; -webkit-tap-highlight-color:transparent; } .sub-toggle svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; } .sub-toggle:focus-visible{ color:var(--orange); } .sub-toggle:focus-visible, .nav-toggle:focus-visible, .menu a:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; } .menu > li.open > .menu-row > .sub-toggle svg{ transform:rotate(180deg); } /* ---- dropdown panel ---- */ .submenu{ position:absolute; top:100%; left:0; min-width:250px; z-index:50; background:#fff; border:1px solid var(--line); border-top:3px solid var(--orange); border-radius:0 0 12px 12px; box-shadow:0 18px 36px rgba(30,20,10,0.13); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .menu > li.has-sub.open > .submenu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; } @media (hover:hover) and (min-width:1081px){ .menu > li.has-sub:hover > .submenu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; } } .sub-list{ list-style:none; } .sub-list a{ display:block; padding:9px 12px; font-size:14px; font-weight:500; color:var(--gray); border-radius:6px; transition:background .12s ease,color .12s ease; } .sub-list a:hover, .sub-list a.current{ background:var(--orange-pale); color:var(--orange-dark); } .sub-list a.current{ font-weight:600; } /* ---- Products mega-menu ---- */ .menu > li.mega-parent{ position:static; } .submenu.mega{ left:0; right:0; min-width:0; padding:22px 26px 10px; border-radius:0 0 14px 14px; } .mega-grid{ list-style:none; column-count:5; column-gap:26px; } .mega-grid > li:nth-child(2), .mega-grid > li:nth-child(3), .mega-grid > li:nth-child(6), .mega-grid > li:nth-child(7){ break-before:column; } /* sitemap order, one family per column */ .mega .sub-list a{ padding:6px 12px; font-size:13.5px; line-height:1.35; } .mega-grid > li{ break-inside:avoid; margin-bottom:14px; } .group-head{ display:flex; align-items:center; border-bottom:2px solid var(--orange-light); margin-bottom:6px; } .group-head > a{ flex:1; padding:6px 12px 8px; font-size:14px; font-weight:700; color:var(--charcoal); } .group-head > a:hover, .group-head > a.current{ color:var(--orange); } .mega .sub-toggle{ display:none; } .mega-note{ font-size:11px; font-weight:600; color:var(--orange-dark); background:var(--orange-pale); border-radius:10px; padding:2px 8px; margin-left:6px; vertical-align:middle; } /* ---- hamburger + mobile-only extras (hidden on desktop) ---- */ .nav-toggle{ display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; padding:0; position:relative; -webkit-tap-highlight-color:transparent; } .nav-toggle span{ position:absolute; left:12px; right:12px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .22s ease, opacity .18s ease, top .22s ease; } .nav-toggle span:nth-child(1){ top:15px; } .nav-toggle span:nth-child(2){ top:22px; } .nav-toggle span:nth-child(3){ top:29px; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ top:22px; transform:rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ top:22px; transform:rotate(-45deg); } .nav-extras{ display:none; } @media (min-width:1081px) and (max-width:1279px){ .menu > li > a, .menu > li > .menu-row > a{ padding-left:9px; font-size:14px; } .header-cta .btn{ padding:12px 18px; font-size:13.5px; } .logo img{ height:56px; } } /* ---- tablet & phone: slide-down menu with tap-to-open sub-menus ---- */ @media (max-width:1080px){ html{ scroll-padding-top:80px; } #site-header.include-slot{ min-height:69px; } .topbar{ display:none; } .navwrap{ height:68px; } .logo img{ height:50px; } .nav-toggle{ display:block; } .header-cta .btn{ display:none; } .mainnav{ position:absolute; top:100%; left:0; right:0; display:none; flex:none; flex-direction:column; align-items:stretch; justify-content:flex-start; background:#fff; border-top:1px solid var(--line); box-shadow:0 26px 40px rgba(20,12,4,0.20); max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 0 24px; } .mainnav.open{ display:flex; } body.nav-open{ overflow:hidden; } .menu{ display:block; width:100%; } .menu > li{ border-bottom:1px solid var(--line); } .menu-row{ width:100%; } .menu > li > a, .menu > li > .menu-row > a{ flex:1; padding:16px 32px; font-size:16px; white-space:normal; } .menu > li.has-sub > .menu-row > a{ padding-right:12px; } .menu > li > a.current, .menu > li.has-current > .menu-row > a{ color:var(--orange); } .sub-toggle{ width:64px; padding:0; border-left:1px solid var(--line); color:var(--charcoal); } .sub-toggle svg{ width:16px; height:16px; } .sub-toggle:focus-visible{ color:var(--orange); } .mega .sub-toggle{ display:flex; } .open > .menu-row > .sub-toggle svg{ transform:rotate(180deg); } .mega-grid > li.open > .group-head .sub-toggle svg{ transform:rotate(180deg); } .submenu, .submenu.mega{ position:static; display:none; min-width:0; opacity:1; visibility:visible; transform:none; transition:none; border:0; border-radius:0; box-shadow:none; padding:4px 0 10px; background:var(--orange-pale); } .menu > li.has-sub:hover > .submenu{ display:none; } /* hover must not open things on touch */ .menu > li.has-sub.open > .submenu{ display:block; } .sub-list a{ padding:12px 32px 12px 44px; font-size:15px; border-radius:0; } .sub-list a:hover{ background:transparent; color:var(--gray); } .sub-list a.current{ background:transparent; color:var(--orange-dark); } .mega-grid{ column-count:1; } .mega-grid > li{ break-before:auto !important; } .mega .sub-list a{ padding:12px 32px 12px 44px; font-size:15px; line-height:1.4; } .mega-grid > li{ margin:0; border-top:1px solid #f1e2d5; } .mega-grid > li:first-child{ border-top:0; } .group-head{ margin:0; border-bottom:0; } .group-head > a{ padding:14px 12px 14px 32px; font-size:15px; } .group-head > a:hover{ color:var(--charcoal); } .group-head > a.current{ color:var(--orange); } .mega-grid > li > .sub-list{ display:none; padding-bottom:6px; } .mega-grid > li.open > .sub-list{ display:block; } .nav-extras{ display:block; padding:20px 32px 0; } .nav-extras .btn{ width:100%; justify-content:center; } .nav-extras p{ margin-top:14px; font-size:14px; color:var(--gray); line-height:1.8; } .nav-extras p a{ color:var(--ink); font-weight:600; } } @media (max-width:640px){ .menu > li > a, .menu > li > .menu-row > a{ padding-left:20px; } .group-head > a{ padding-left:20px; } .sub-list a{ padding-left:32px; } .nav-extras{ padding-left:20px; padding-right:20px; } } @media (max-width:420px){ .logo img{ height:44px; } } /* ===================================================================== HOME PAGE (index.html) ===================================================================== */ .hero{ position:relative; overflow:hidden; background:var(--charcoal); } .hero-slides{ position:relative; height:0; padding-bottom:56.28%; } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; } .hero-slide.active{ opacity:1; } .hero-slide img{ width:100%; height:100%; object-fit:cover; } .hero-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:5; } .hero-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,0.5); cursor:pointer; transition:all .2s ease; padding:0; } .hero-dots button.active{ width:26px; border-radius:5px; background:var(--orange); } .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.85); border:none; cursor:pointer; font-size:18px; color:var(--charcoal); font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .18s ease; } .hero-arrow:hover{ background:#fff; } .hero-arrow.prev{ left:22px; } .hero-arrow.next{ right:22px; } .trust-strip{ background:var(--orange); } .trust-strip .container{ display:flex; justify-content:space-between; align-items:center; height:66px; flex-wrap:wrap; gap:10px; } .trust-item{ display:flex; align-items:center; gap:10px; color:#fff; font-size:14px; font-weight:600; font-family:"Poppins",sans-serif; } .trust-item .ic{ width:26px; height:26px; flex-shrink:0; } .trust-strip .divider{ width:1px; height:22px; background:rgba(255,255,255,0.35); } .about-teaser{ background:var(--bg); } .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; } .about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; } .stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; } .stat-card .num{ font-family:"Poppins",sans-serif; font-size:30px; font-weight:800; color:var(--orange); } .stat-card .lbl{ font-size:13.5px; color:var(--gray); margin-top:4px; } .about-visual{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; background:linear-gradient(135deg, var(--orange-light), #fff); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; } .about-visual svg{ width:62%; height:62%; } .products-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .pcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); transition:all .2s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; } .pcard:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.1); transform:translateY(-3px); } .pcard:hover .pcard-photo img{ transform:scale(1.06); } .pcard .pcard-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--orange-pale); position:relative; } .pcard .pcard-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .pcard .pcard-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex-grow:1; } .pcard h4{ font-size:16px; margin-bottom:8px; } .pcard p{ font-size:13.5px; color:var(--gray); margin-bottom:14px; flex-grow:1; } .pcard .link{ font-size:13px; font-weight:700; color:var(--orange); font-family:"Poppins",sans-serif; display:flex; align-items:center; gap:6px; } .pcard.featured{ background:var(--charcoal); border-color:var(--charcoal); } .pcard.featured h4, .pcard.featured p{ color:#fff; } .pcard.featured p{ color:#b7b5b2; } .pcard.featured .link{ color:var(--orange); } .placeholder-tag{ position:absolute; top:10px; right:10px; background:rgba(28,28,28,0.75); color:#f5c9a3; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:4px 9px; border-radius:12px; font-family:"Poppins",sans-serif; } .industries-section{ background:var(--charcoal); position:relative; overflow:hidden; } .industries-section::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(232,90,8,0.05) 0px, rgba(232,90,8,0.05) 2px, transparent 2px, transparent 42px); } .industries-section .container{ position:relative; z-index:2; } .industries-section .section-head h2, .industries-section .section-head p{ color:#fff; } .industries-section .section-head p{ color:#b7b5b2; } .industries-banner{ border-radius:16px; overflow:hidden; margin-bottom:48px; border:1px solid rgba(255,255,255,0.08); } .industries-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; } .icard{ border-radius:var(--radius); overflow:hidden; position:relative; border:1px solid rgba(255,255,255,0.09); transition:all .2s ease; aspect-ratio:3/4; } .icard:hover{ border-color:var(--orange); transform:translateY(-3px); } .icard:hover img{ transform:scale(1.08); } .icard img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .icard::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0.05) 70%); } .icard span{ position:absolute; left:12px; right:12px; bottom:12px; z-index:2; font-size:13px; font-weight:600; color:#fff; font-family:"Poppins",sans-serif; line-height:1.3; } .quality-section{ padding:80px 60px; } .quality-container{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1300px; margin:0 auto; } .quality-card{ background:#FBEFE8; border-radius:16px; padding:24px; display:flex; align-items:center; justify-content:center; } .quality-card-image{ width:100%; height:auto; border-radius:12px; display:block; } .quality-label{ color:#EA580C; font-weight:700; font-size:13px; letter-spacing:1px; display:block; margin-bottom:16px; } .quality-heading{ font-size:36px; font-weight:800; color:#1a1a1a; line-height:1.25; margin-bottom:32px; } .quality-point{ display:flex; gap:16px; margin-bottom:24px; } .quality-number{ flex-shrink:0; width:36px; height:36px; background:#1a1a2e; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .quality-point h3{ font-size:18px; font-weight:700; color:#1a1a1a; margin-bottom:4px; } .quality-point p{ color:#6b7280; font-size:15px; line-height:1.5; } .quality-btn{ display:inline-block; background:#EA580C; color:#fff; font-weight:700; padding:16px 28px; border-radius:10px; text-decoration:none; margin-top:12px; } .resources-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .rcard{ border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; background:#fff; } .rcard .tag{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--orange); margin-bottom:12px; } .rcard h4{ font-size:15.5px; margin-bottom:8px; } .rcard p{ font-size:13.5px; color:var(--gray); } /* ===================================================================== INNER PAGE HERO & BREADCRUMB ===================================================================== */ .page-hero{ position:relative; overflow:hidden; background:var(--charcoal); } .page-hero::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(135deg, rgba(232,90,8,0.05) 0px, rgba(232,90,8,0.05) 2px, transparent 2px, transparent 42px); } .page-hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; align-items:center; min-height:440px; gap:40px; } .page-hero-text{ padding:64px 0; } .breadcrumb{ display:flex; gap:8px; font-size:13px; color:#9a9894; margin-bottom:20px; flex-wrap:wrap; } .breadcrumb a{ color:#c7c5c1; } .breadcrumb a:hover{ color:var(--orange); } .page-hero-text h1{ font-size:38px; color:#fff; line-height:1.22; margin-bottom:16px; max-width:600px; } .page-hero-text h1 span{ color:var(--orange); } .page-hero-text p{ color:#c7c5c1; font-size:16px; max-width:540px; margin-bottom:26px; } .hero-actions{ display:flex; gap:14px; margin-bottom:34px; flex-wrap:wrap; } .hero-badges{ display:flex; gap:10px; flex-wrap:wrap; } .hero-badge{ background:rgba(232,90,8,0.12); border:1px solid rgba(232,90,8,0.35); color:#f5c9a3; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:20px; font-family:"Poppins",sans-serif; } .hero-visual{ display:flex; align-items:center; justify-content:center; } .hero-visual svg{ width:100%; max-width:340px; height:auto; } .btn-sm{ padding:9px 16px; font-size:12.5px; } .hero-stats-row{ display:flex; gap:0; margin-top:36px; border-top:1px solid rgba(255,255,255,0.1); padding-top:26px; flex-wrap:wrap; } .hero-stats-row .hs{ padding-right:40px; margin-right:40px; border-right:1px solid rgba(255,255,255,0.12); } .hero-stats-row .hs:last-child{ border-right:none; } .hero-stats-row .num{ font-family:"Poppins",sans-serif; font-weight:800; font-size:24px; color:var(--orange); } .hero-stats-row .lbl{ font-size:12.5px; color:#a7a5a1; margin-top:3px; } /* ===================================================================== SPEC STRIP, PROBLEM/SOLUTION, CONFIG CARDS & BLOCKS ===================================================================== */ .spec-strip{ background:var(--orange); } .spec-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); } .spec-strip .spec{ padding:26px 20px; text-align:center; border-right:1px solid rgba(255,255,255,0.25); } .spec-strip .spec:last-child{ border-right:none; } .spec-strip .spec .lbl{ font-size:12px; color:#fce4d3; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; } .spec-strip .spec .val{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; color:#fff; } .ps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; } .ps-col{ padding:40px; } .ps-col.problem{ background:var(--bg); border-right:1px solid var(--line); } .ps-col.solution{ background:var(--orange-pale); } .ps-tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 12px; border-radius:20px; margin-bottom:16px; font-family:"Poppins",sans-serif; } .ps-col.problem .ps-tag{ background:#EDEAE4; color:var(--gray); } .ps-col.solution .ps-tag{ background:var(--orange); color:#fff; } .ps-col h3{ font-size:19px; margin-bottom:12px; } .ps-col p{ font-size:14.5px; color:var(--gray); } .config-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .config-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; transition:all .2s ease; } .config-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); } .config-card .code{ font-family:"Poppins",sans-serif; font-weight:800; font-size:24px; color:var(--orange); margin-bottom:6px; } .config-card h4{ font-size:16px; margin-bottom:12px; } .config-card p{ font-size:13.8px; color:var(--gray); margin-bottom:16px; } .config-card .flow-tags{ display:flex; gap:8px; } .flow-tag{ font-size:11.5px; font-weight:700; background:var(--orange-pale); color:var(--orange-dark); padding:5px 11px; border-radius:14px; font-family:"Poppins",sans-serif; } .config-blocks{ display:flex; flex-direction:column; gap:22px; } .config-block{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:34px 36px; transition:all .2s ease; } .config-block:hover{ border-color:var(--orange); box-shadow:0 16px 34px rgba(232,90,8,0.08); } .config-block-head{ display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; flex-wrap:wrap; } .config-block .code-badge{ font-family:"Poppins",sans-serif; font-weight:800; font-size:26px; color:var(--orange); background:var(--orange-pale); border-radius:10px; padding:8px 18px; flex-shrink:0; } .config-block-head-text{ flex:1; min-width:220px; } .config-block h4{ font-size:18px; margin-bottom:6px; } .config-block .flow-tags{ display:flex; gap:8px; margin-top:4px; } .config-block p.desc{ font-size:14.5px; color:var(--gray); max-width:760px; margin-bottom:22px; } .config-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .gallery-slot{ aspect-ratio:4/3; border-radius:10px; border:1.5px dashed var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gray-light); transition:all .2s ease; } .gallery-slot:hover{ border-color:var(--orange); background:var(--orange-pale); } .gallery-slot svg{ width:26px; height:26px; stroke:var(--gray-light); } .gallery-slot span{ font-size:11.5px; font-weight:600; font-family:"Poppins",sans-serif; text-align:center; padding:0 10px; } .config-block.image-first{ padding:0; overflow:hidden; } .config-block.image-first .config-image-slot{ width:100%; aspect-ratio:21/9; border-bottom:1.5px dashed var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--gray-light); transition:all .2s ease; } .config-block.image-first:hover .config-image-slot{ border-color:var(--orange); background:var(--orange-pale); } .config-block.image-first .config-image-slot svg{ width:32px; height:32px; stroke:var(--gray-light); } .config-block.image-first .config-image-slot span{ font-size:12px; font-weight:600; font-family:"Poppins",sans-serif; } .config-block.image-first .config-block-body{ padding:34px 36px; } /* ===================================================================== FEATURES, ADVANTAGES, BEARING, GRADE CARDS ===================================================================== */ .feature-rows{ display:flex; flex-direction:column; gap:0; } .feature-row{ display:grid; grid-template-columns:64px 1fr; gap:24px; padding:28px 0; border-bottom:1px solid var(--line); } .feature-row:first-child{ padding-top:0; } .feature-row:last-child{ border-bottom:none; padding-bottom:0; } .feature-icon{ width:56px; height:56px; border-radius:12px; background:var(--orange-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .feature-icon svg{ width:28px; height:28px; stroke:var(--orange); } .feature-row h4{ font-size:17px; margin-bottom:8px; } .feature-row p{ font-size:14.5px; color:var(--gray); max-width:680px; } .advantage-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .advantage-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; transition:all .2s ease; } .advantage-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); } .advantage-card .adv-icon{ width:44px; height:44px; border-radius:10px; background:var(--orange-pale); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .advantage-card .adv-icon svg{ width:22px; height:22px; stroke:var(--orange); } .advantage-card h4{ font-size:15.5px; margin-bottom:8px; } .advantage-card p{ font-size:13.5px; color:var(--gray); } .bearing-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; } .bearing-visual{ background:var(--charcoal); border-radius:16px; padding:44px; position:relative; overflow:hidden; } .bearing-visual svg{ width:100%; height:auto; } .bearing-visual .cap{ margin-top:18px; font-size:12.5px; color:#a7a5a1; text-align:center; } .load-list{ display:flex; flex-direction:column; gap:20px; margin-top:8px; } .load-list li{ display:flex; gap:16px; } .load-list .dot{ width:10px; height:10px; border-radius:50%; background:var(--orange); flex-shrink:0; margin-top:7px; } .load-list h4{ font-size:15.5px; margin-bottom:4px; } .load-list p{ font-size:13.8px; color:var(--gray); } .pending-note{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:var(--gray-light); background:var(--bg); border:1px solid var(--line); padding:4px 10px; border-radius:12px; font-family:"Poppins",sans-serif; margin-bottom:10px; } .grade-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; transition:all .2s ease; } .grade-card:hover{ border-color:var(--orange); box-shadow:0 14px 30px rgba(232,90,8,0.08); transform:translateY(-3px); } .grade-card .temp-badge{ font-family:"Poppins",sans-serif; font-weight:800; font-size:26px; color:var(--orange); margin-bottom:4px; } .grade-card .temp-lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--gray-light); margin-bottom:16px; } .grade-card h4{ font-size:15.5px; margin-bottom:8px; } .grade-card p{ font-size:13.5px; color:var(--gray); } .coming-soon-note{ font-size:11px; color:var(--gray-light); font-style:italic; margin-top:-8px; margin-bottom:14px; } .compare-note{ background:var(--orange-pale); border:1px solid var(--line); border-radius:14px; padding:30px 34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .compare-note h3{ font-size:18px; margin-bottom:6px; } .compare-note p{ font-size:14px; color:var(--gray); max-width:520px; } /* ===================================================================== SPEC TABLES & COMPATIBILITY MATRIX ===================================================================== */ .tables-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; } .spec-table-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .spec-table-card .table-head{ background:var(--charcoal); padding:16px 22px; } .spec-table-card .table-head h4{ color:#fff; font-size:14.5px; letter-spacing:0.3px; } table{ width:100%; border-collapse:collapse; } table tr{ border-bottom:1px solid var(--line); } table tr:last-child{ border-bottom:none; } table td{ padding:14px 22px; font-size:14px; } table td:first-child{ color:var(--gray); width:42%; } table td:last-child{ color:var(--charcoal); font-weight:600; font-family:"Poppins",sans-serif; font-size:13.5px; } table tr:nth-child(even){ background:var(--bg); } .matrix-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .matrix-wrap{ overflow-x:auto; } table.matrix{ width:100%; border-collapse:collapse; min-width:860px; } table.matrix thead th{ background:var(--charcoal); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.2px; padding:15px 10px; text-align:center; white-space:nowrap; } table.matrix thead th:first-child{ text-align:left; padding-left:22px; position:sticky; left:0; background:var(--charcoal); z-index:2; } table.matrix tbody td{ padding:12px 10px; text-align:center; font-size:13.5px; color:var(--gray); border-bottom:1px solid var(--line); } table.matrix tbody tr:last-child td{ border-bottom:none; } table.matrix tbody td:first-child{ text-align:left; padding-left:22px; font-family:"Poppins",sans-serif; font-weight:700; font-size:13.5px; color:var(--charcoal); position:sticky; left:0; background:#fff; } table.matrix tbody tr:nth-child(even){ background:var(--bg); } table.matrix tbody tr:nth-child(even) td:first-child{ background:var(--bg); } table.matrix .yes{ color:var(--orange); font-weight:800; font-size:15px; } table.matrix .no{ color:var(--gray-light); } .matrix-legend{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray); padding:14px 22px; border-top:1px solid var(--line); background:var(--bg); } .matrix-legend .yes{ color:var(--orange); font-weight:800; } /* ===================================================================== LISTING PAGES (products / rotary joints / rotary unions) ===================================================================== */ .products-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; } .products-card .table-head{ background:var(--charcoal); padding:18px 26px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .products-card .table-head h4{ color:#fff; font-size:15px; letter-spacing:0.2px; } .products-card .table-head span{ color:#c7c5c1; font-size:12.5px; } .products-card .chip-body{ padding:30px 26px; display:flex; flex-wrap:wrap; gap:12px; } .series-chip{ display:inline-flex; align-items:center; gap:8px; font-family:"Poppins",sans-serif; font-weight:700; font-size:14px; color:var(--charcoal); background:var(--orange-pale); border:1px solid rgba(232,90,8,0.25); padding:10px 18px; border-radius:8px; transition:all .18s ease; } .series-chip:hover{ background:var(--orange); color:#fff; border-color:var(--orange); transform:translateY(-2px); } .series-chip.spares{ background:var(--bg); border-color:var(--line); color:var(--gray); } .series-chip.spares:hover{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); } .products-note{ padding:0 26px 26px; font-size:13px; color:var(--gray); } .filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; } .filter-pill{ font-size:13px; font-weight:600; font-family:"Poppins",sans-serif; padding:9px 18px; border-radius:20px; border:1px solid var(--line); color:var(--gray); background:#fff; } .filter-pill.active{ background:var(--charcoal); border-color:var(--charcoal); color:#fff; } .series-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .series-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; transition:all .2s ease; position:relative; } .series-card:hover{ border-color:var(--orange); box-shadow:0 16px 32px rgba(232,90,8,0.09); transform:translateY(-3px); } .series-card .top-row{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; } .series-card .series-code{ font-family:"Poppins",sans-serif; font-weight:800; font-size:22px; color:var(--orange); } .series-card .tag-pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; padding:4px 10px; border-radius:12px; font-family:"Poppins",sans-serif; } .series-card .tag-pill.standard{ background:var(--orange-pale); color:var(--orange-dark); } .series-card .tag-pill.special{ background:#EDEAE4; color:var(--gray); } .series-card .tag-pill.featured-tag{ background:var(--charcoal); color:#fff; } .series-card h4{ font-size:16px; margin-bottom:8px; } .series-card p{ font-size:13.5px; color:var(--gray); margin-bottom:16px; flex-grow:1; } .series-card .flow-tags{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; } .series-card .link{ font-size:13.5px; font-weight:700; color:var(--orange); font-family:"Poppins",sans-serif; display:flex; align-items:center; gap:6px; margin-top:auto; } .series-card.disabled{ opacity:0.6; } .series-card.disabled:hover{ transform:none; box-shadow:none; border-color:var(--line); } .series-card.disabled .link{ color:var(--gray-light); } .series-card.featured{ background:var(--charcoal); border-color:var(--charcoal); } .series-card.featured .series-code{ color:var(--orange); } .series-card.featured h4, .series-card.featured p{ color:#fff; } .series-card.featured p{ color:#b7b5b2; } .series-card.featured .flow-tag{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.15); color:#d9d7d3; } .series-card.featured .link{ color:var(--orange); } .products-list{ display:flex; flex-direction:column; gap:26px; } .prow{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:all .2s ease; align-items:stretch; } .prow:hover{ border-color:var(--orange); box-shadow:0 18px 38px rgba(232,90,8,0.08); } .prow.reverse{ grid-template-columns:1fr 1fr; } .prow.reverse .prow-text{ order:2; } .prow.reverse .prow-photo{ order:1; } .prow-text{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; } .prow-kicker{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } .prow-kicker .dash{ width:22px; height:2px; background:var(--orange); display:inline-block; } .prow-kicker span{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); font-family:"Poppins",sans-serif; } .prow-text h3{ font-size:22px; text-transform:uppercase; letter-spacing:0.3px; margin-bottom:14px; } .prow-text p{ font-size:14.5px; color:var(--gray); margin-bottom:24px; max-width:440px; } .prow-actions{ display:flex; gap:12px; flex-wrap:wrap; } .prow-photo{ position:relative; overflow:hidden; min-height:320px; } .prow-photo img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; transition:transform .4s ease; } .prow:hover .prow-photo img{ transform:scale(1.05); } .prow-photo .placeholder-tag{ position:absolute; top:14px; right:14px; z-index:2; background:rgba(28,28,28,0.75); color:#f5c9a3; font-size:10.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; padding:5px 11px; border-radius:12px; font-family:"Poppins",sans-serif; } .prow.featured{ background:var(--charcoal); border-color:var(--charcoal); } .prow.featured .prow-kicker span{ color:var(--orange); } .prow.featured h3, .prow.featured p{ color:#fff; } .prow.featured p{ color:#b7b5b2; } .help-section .container{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; } .help-col{ padding:44px 40px; } .help-col.guide{ background:var(--bg); border-right:1px solid var(--line); } .help-col.custom{ background:var(--orange-pale); } .help-col .tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:5px 12px; border-radius:20px; margin-bottom:16px; font-family:"Poppins",sans-serif; } .help-col.guide .tag{ background:#EDEAE4; color:var(--gray); } .help-col.custom .tag{ background:var(--orange); color:#fff; } .help-col h3{ font-size:21px; margin-bottom:10px; } .help-col p{ font-size:14.5px; color:var(--gray); margin-bottom:22px; } /* ===================================================================== ACCESSORY CARDS ===================================================================== */ .accessory-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .accessory-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:all .2s ease; display:flex; flex-direction:column; } .accessory-card:hover{ border-color:var(--orange); box-shadow:0 16px 34px rgba(232,90,8,0.1); transform:translateY(-3px); } .accessory-card .accessory-photo{ aspect-ratio:4/3; border-bottom:1px solid var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--gray-light); } .accessory-card .accessory-photo svg{ width:30px; height:30px; stroke:var(--gray-light); } .accessory-card .accessory-photo span{ font-size:12px; font-weight:600; font-family:"Poppins",sans-serif; text-align:center; padding:0 14px; } .accessory-card .accessory-body{ padding:26px 26px 24px; display:flex; flex-direction:column; flex:1; } .accessory-card h4{ font-size:17px; margin-bottom:10px; } .accessory-card p{ font-size:14px; color:var(--gray); flex:1; margin-bottom:18px; } .accessory-card .read-more{ display:inline-flex; align-items:center; gap:6px; font-family:"Poppins",sans-serif; font-weight:600; font-size:13.5px; color:var(--orange); } .accessory-card .read-more svg{ width:14px; height:14px; stroke:var(--orange); transition:transform .15s ease; } .accessory-card:hover .read-more svg{ transform:translateX(3px); } /* ===================================================================== CTA BANNER ===================================================================== */ .cta-banner{ background:linear-gradient(115deg, var(--charcoal) 0%, var(--charcoal) 55%, var(--orange) 55%, var(--orange-dark) 100%); padding:64px 0; } .cta-banner .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; } .cta-banner h2{ color:#fff; font-size:27px; max-width:540px; } .cta-banner p{ color:#f0d9c8; font-size:14.5px; margin-top:8px; max-width:520px; } .cta-banner .actions{ display:flex; gap:14px; } /* ===================================================================== FOOTER ===================================================================== */ footer{ background:#141414; color:#a7a5a1; padding-top:72px; } .footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.08); } .footer-brand img{ height:44px; margin-bottom:16px; filter:brightness(0) invert(1); } .footer-brand p{ font-size:13.5px; line-height:1.7; color:#8a8884; max-width:280px; } .footer-col h5{ font-family:"Poppins",sans-serif; color:#fff; font-size:14px; margin-bottom:18px; letter-spacing:0.3px; } .footer-col ul li{ margin-bottom:11px; } .footer-col ul li a{ font-size:13.5px; color:#a7a5a1; transition:color .15s ease; } .footer-col ul li a:hover{ color:var(--orange); } .footer-contact li{ display:flex; gap:10px; font-size:13.5px; margin-bottom:14px; align-items:flex-start; } .footer-contact svg{ width:16px; height:16px; stroke:var(--orange); flex-shrink:0; margin-top:2px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; flex-wrap:wrap; gap:12px; font-size:12.5px; color:#77756f; } .footer-bottom .badges{ display:flex; gap:16px; align-items:center; } .footer-bottom .badges span{ display:flex; align-items:center; gap:6px; } /* footer logo sits on a white tile (the logo has a white background) */ .footer-brand .footer-logo{ filter:none; background:#fff; border-radius:10px; padding:6px 12px; height:64px; width:auto; } .footer-contact a{ color:inherit; } .footer-contact a:hover{ color:var(--orange); } /* ===================================================================== RESPONSIVE (all breakpoints together, always after the base rules) ===================================================================== */ @media (max-width:1080px){ .page-hero-inner{ grid-template-columns:1fr; min-height:auto; } .hero-visual{ display:none; } .ps-grid{ grid-template-columns:1fr; } .ps-col.problem{ border-right:none; border-bottom:1px solid var(--line); } .config-grid{ grid-template-columns:1fr; } .config-gallery{ grid-template-columns:repeat(3,1fr); } .config-block{ padding:28px 24px; } .bearing-grid{ grid-template-columns:1fr; } .advantage-grid{ grid-template-columns:repeat(2,1fr); } .accessory-grid{ grid-template-columns:repeat(2,1fr); } .tables-grid{ grid-template-columns:1fr; } .spec-strip .container{ grid-template-columns:repeat(2,1fr); } .spec-strip .spec:nth-child(2){ border-right:none; } .footer-top{ grid-template-columns:1fr 1fr; } .products-grid{ grid-template-columns:repeat(2,1fr); } .industries-grid{ grid-template-columns:repeat(3,1fr); } .about-grid{ grid-template-columns:1fr; } .quality-section .container{ grid-template-columns:1fr; } .series-grid{ grid-template-columns:repeat(2,1fr); } .help-section .container{ grid-template-columns:1fr; } .help-col.guide{ border-right:none; border-bottom:1px solid var(--line); } } @media (max-width: 900px){ .quality-container{ grid-template-columns:1fr; } .quality-section{ padding:48px 24px; } } @media (max-width:820px){ .prow, .prow.reverse{ grid-template-columns:1fr; } .prow.reverse .prow-text{ order:1; } .prow.reverse .prow-photo{ order:2; } .prow-photo{ min-height:240px; } } @media (max-width:640px){ .spec-strip .container{ grid-template-columns:1fr 1fr; } .footer-top{ grid-template-columns:1fr; } .section{ padding:56px 0; } .cta-banner .container{ flex-direction:column; align-items:flex-start; } table td{ padding:12px 14px; font-size:13px; } .config-gallery{ grid-template-columns:1fr 1fr; } .config-block-head{ flex-direction:column; } .advantage-grid{ grid-template-columns:1fr; } .accessory-grid{ grid-template-columns:1fr; } .feature-row{ grid-template-columns:48px 1fr; } .config-block.image-first .config-block-body{ padding:26px 22px; } .products-grid{ grid-template-columns:1fr 1fr; } .industries-grid{ grid-template-columns:1fr 1fr; } .series-grid{ grid-template-columns:1fr; } .hero-stats-row{ gap:18px 0; } .hero-stats-row .hs{ padding-right:20px; margin-right:20px; } .prow-text{ padding:32px 26px; } } /* --- added in the clean-up: phone/tablet fixes for things that used to overflow the screen --- */ .cta-banner .actions{ flex-wrap:wrap; } .resources-grid{ grid-template-columns:repeat(4,1fr); } @media (max-width:1080px){ .resources-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .container{ padding:0 20px; } .resources-grid{ grid-template-columns:1fr; } .cta-banner .container > div{ width:100%; min-width:0; } .cta-banner .actions .btn{ white-space:normal; } .hero-actions .btn{ white-space:normal; } /* some pages force 3 columns with an inline style - on phones always go to one column */ .advantage-grid{ grid-template-columns:1fr !important; } .spec-strip .spec{ min-width:0; padding:20px 12px; } .spec-strip .spec .val{ overflow-wrap:anywhere; } } /* ===================================================================== PAGE-SPECIFIC OVERRIDES (body classes) ===================================================================== */ body.home .section-head{ max-width:640px; margin-bottom:48px; } body.page-products .section-head{ max-width:680px; margin-bottom:20px; } body.home .section-head h2{ font-size:32px; line-height:1.25; margin-bottom:14px; } body.page-listing .page-hero-inner{ position:relative; z-index:2; padding:60px 0 52px; } body.page-listing .page-hero-text h1{ font-size:38px; color:#fff; line-height:1.2; margin-bottom:16px; max-width:660px; } body.page-listing .page-hero-text p{ color:#c7c5c1; font-size:16px; max-width:600px; margin-bottom:0; } body.page-listing .flow-tag{ font-size:11px; font-weight:700; background:var(--bg); color:var(--gray); padding:4px 10px; border-radius:12px; border:1px solid var(--line); } body.home .cta-banner h2{ color:#fff; font-size:28px; max-width:480px; } /* listing pages build their hero without the two-column grid */ body.page-listing .page-hero-text{ padding:0; } body.page-listing .page-hero-inner{ display:block; min-height:0; }