/* =================================================================== Badge Core — widget styles (steel-blue design, bc- prefixed) Elementor controls override colours/spacing via inline selectors; these are the sensible defaults. =================================================================== */ :root{ --bc-navy:#16324f; --bc-steel:#2f5c86; --bc-accent:#e08a2b; --bc-accent-dk:#c2731d; --bc-ink:#1c2530; --bc-grey:#6c7077; --bc-soft:#eef1f4; --bc-line:#dde2e8; --bc-bg:#f7f9fb; --bc-tile:#20262e; --bc-tile-text:#8894a4; --bc-tile-border:rgba(255,255,255,.08); --bc-heroText:#c9d4e0; --bc-wa:#25d366; --bc-serif:Georgia,'Times New Roman',serif; } .bc-section{position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--bc-ink);line-height:1.6} .bc-wrap{max-width:1180px;margin:0 auto;padding:0 24px} .bc-section *{box-sizing:border-box} .bc-eyebrow{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bc-accent-dk);font-weight:600} .bc-title{font-family:var(--bc-serif);font-weight:400;color:var(--bc-navy);line-height:1.2;font-size:33px;margin:12px 0} .bc-subtitle{color:var(--bc-grey);font-size:16px} .bc-head{text-align:center;max-width:640px;margin:0 auto 44px} .bc-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:4px;font-size:14px;font-weight:600;letter-spacing:.3px;cursor:pointer;transition:.2s;border:1.5px solid transparent;text-decoration:none} .bc-btn-acc{background:var(--bc-accent);color:#fff} .bc-btn-acc:hover{background:var(--bc-accent-dk);color:#fff} a.bc-btn-acc,a.bc-btn-acc:visited{color:#fff} /* keep accent-button text white even inside themed content areas (article, entry-content) */ a.bc-btn-acc,a.bc-btn-acc:hover,a.bc-btn-acc:visited,a.bc-btn-acc:focus{color:#fff !important;text-decoration:none} .bc-btn-ghost{border-color:#fff;color:#fff} .bc-btn-ghost:hover{background:#fff;color:var(--bc-navy)} .bc-btn-line{border-color:var(--bc-accent);color:var(--bc-accent-dk)} .bc-btn-line:hover{background:var(--bc-accent);color:#fff} .bc-btn-wa{background:var(--bc-wa);color:#fff} a.bc-btn-wa,a.bc-btn-wa:visited,a.bc-btn-wa:hover, .bc-enq a.bc-btn-wa,.bc-enq .bc-btn-wa i{color:#fff !important} .bc-btn-wa i{color:#fff !important;font-style:normal} /* ---- Top bar ---- */ .bc-topbar{background:var(--bc-navy);color:#cdd3dc;font-size:13px} .bc-topbar .bc-wrap{display:flex;justify-content:space-between;align-items:center;height:40px;flex-wrap:wrap} .bc-topbar .l span{margin-right:22px} .bc-topbar .l a{color:inherit;text-decoration:none;transition:.15s} .bc-topbar .l a:hover{color:#fff;text-decoration:underline} .bc-topbar i{color:var(--bc-accent);margin-right:6px;font-style:normal} .bc-topbar .r{color:#aeb6c0} /* ---- Hero (shared) ---- */ .bc-hero{color:#fff;overflow:hidden;position:relative} /* ---- Hero: SPLIT mode (text left, image right) ---- */ .bc-hero.is-split::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 28%,rgba(255,255,255,.10),transparent 42%),linear-gradient(135deg,var(--bc-navy),var(--bc-steel) 58%,var(--bc-navy))} .bc-hero.is-split .bc-hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:74px 24px 82px} .bc-hero.is-split .bc-hero-copy{max-width:none} /* ---- Hero: FULL-BLEED montage mode ---- */ .bc-hero.is-fullbleed{display:flex;align-items:center;min-height:560px} .bc-hero-slides{position:absolute;inset:0;z-index:1} .bc-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease} .bc-slide.is-active{opacity:1} /* slide transition variant */ .bc-trans-slide .bc-slide{transform:translateX(30px);transition:opacity .9s ease,transform .9s ease} .bc-trans-slide .bc-slide.is-active{transform:translateX(0)} .bc-slide-ph{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#20262e,#20262e 22px,#252c35 22px,#252c35 44px);opacity:1} .bc-slide-ph span{color:#8894a4;font-size:14px;letter-spacing:.5px;border:1px dashed rgba(255,255,255,.2);padding:10px 18px;border-radius:5px} .bc-hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(15,28,45,.88) 0%,rgba(15,28,45,.55) 55%,rgba(15,28,45,.15) 100%)} .bc-hero.is-fullbleed .bc-hero-inner{position:relative;z-index:3;width:100%;display:block;padding:60px 24px} .bc-hero.is-fullbleed .bc-hero-copy{max-width:560px} /* shared copy */ .bc-hero .bc-eyebrow{color:var(--bc-accent)} .bc-hero h1{color:#fff;font-family:var(--bc-serif);font-weight:400;font-size:45px;line-height:1.15;margin:16px 0 18px} .bc-hero h1 em{font-style:italic;color:var(--bc-accent)} .bc-hero .lead{font-size:17px;color:var(--bc-heroText);max-width:480px;margin-bottom:26px} .bc-hero .cta{display:flex;gap:14px;flex-wrap:wrap} .bc-hero.is-fullbleed .bc-hero-copy[style*="center"] .cta, .bc-hero.is-fullbleed .bc-hero-copy[style*="center"] .bc-reviews, .bc-hero.is-fullbleed .bc-hero-copy[style*="center"] .bc-hero-badges{justify-content:center;margin-left:auto;margin-right:auto} .bc-hero.is-fullbleed .bc-hero-copy[style*="center"]{margin:0 auto} .bc-hero.is-fullbleed .bc-hero-copy[style*="center"] .lead{margin-left:auto;margin-right:auto} /* reviews badge (GS-JJ style) */ .bc-reviews{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:6px} .bc-rword{font-weight:700;font-size:14px;color:#fff} .bc-stars{color:#ffc24a;font-size:16px;letter-spacing:1px} .bc-star-empty{color:rgba(255,255,255,.3)} .bc-rtext{font-size:13px;color:var(--bc-heroText)} /* stat badges */ .bc-hero-badges{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap} .bc-hero-badges div{border-left:2px solid var(--bc-accent);padding-left:12px} .bc-hero-badges b{font-family:var(--bc-serif);font-size:22px;color:#fff;display:block} .bc-hero-badges span{font-size:12px;color:var(--bc-heroText);letter-spacing:.4px} /* split visual box */ .bc-hero-visual{position:relative;height:378px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14)} .bc-hero-visual img{width:100%;height:100%;object-fit:cover} .bc-hero-visual .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04),rgba(255,255,255,.04) 14px,rgba(255,255,255,.07) 14px,rgba(255,255,255,.07) 28px)} .bc-hero-visual .ring{width:172px;height:172px;border-radius:50%;border:5px dashed var(--bc-accent);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--bc-serif);font-size:15px;text-align:center;background:rgba(255,255,255,.06)} .bc-hero-visual .cap{font-size:11.5px;color:var(--bc-heroText);text-transform:uppercase;letter-spacing:1px;border:1px dashed rgba(255,255,255,.25);padding:5px 12px;border-radius:4px} /* dots */ .bc-hero-dots{position:absolute;z-index:4;bottom:20px;left:0;right:0;display:flex;gap:9px;justify-content:center} .bc-dot{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s} .bc-dot.is-active{background:var(--bc-accent);transform:scale(1.2)} /* ---- Trust strip ---- */ .bc-strip{background:var(--bc-accent)} .bc-strip .bc-wrap{display:flex;justify-content:space-around;flex-wrap:wrap;gap:16px;padding:16px 24px;text-align:center} .bc-strip .item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:#fff;letter-spacing:.3px} .bc-strip i{font-size:18px;font-style:normal} /* ---- Trusted + certs ---- */ .bc-trustrow{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .bc-tb h4{font-family:var(--bc-serif);font-size:15px;color:var(--bc-navy);margin:4px 0;font-weight:400} .bc-tb .sub{font-size:12.5px;color:#8a8f98;margin-bottom:18px} .bc-logo-strip{display:flex;flex-wrap:wrap;gap:14px} .bc-logo-slot{flex:1;min-width:104px;height:64px;background:var(--bc-soft);border:1px dashed var(--bc-line);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#a3aab3;font-size:10px;letter-spacing:.6px;text-transform:uppercase;overflow:hidden} .bc-logo-slot img{max-width:80%;max-height:70%;object-fit:contain} .bc-cert-strip{display:flex;flex-wrap:wrap;gap:14px} .bc-cert-slot{flex:1;min-width:104px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .bc-cert-slot .badge{width:60px;height:60px;border-radius:50%;background:var(--bc-soft);border:1px dashed var(--bc-line);display:flex;align-items:center;justify-content:center;color:var(--bc-accent);font-size:24px;overflow:hidden} .bc-cert-slot .badge img{width:100%;height:100%;object-fit:contain;border-radius:50%} .bc-cert-slot span{font-size:11px;color:#8a8f98} /* ---- Product grid (shared by products + related) ---- */ .bc-prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .bc-pcard{background:#fff;border:1px solid var(--bc-line);border-radius:10px;overflow:hidden;transition:.22s;text-decoration:none;color:inherit;display:block} .bc-pcard:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(20,25,35,.12);border-color:var(--bc-accent)} .bc-pcard .thumb{aspect-ratio:1/1;background:var(--bc-tile);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--bc-accent);border-bottom:1px solid var(--bc-tile-border);overflow:hidden;position:relative} .bc-pcard .thumb img{width:100%;height:100%;object-fit:cover} .bc-pcard .thumb .ph{font-size:46px;opacity:.9} .bc-pcard .thumb .ph-tag{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--bc-tile-text);border:1px dashed var(--bc-tile-border);padding:3px 8px;border-radius:3px} .bc-pcard .body{padding:18px} .bc-pcard h3{font-family:var(--bc-serif);font-weight:400;font-size:18px;margin-bottom:5px;color:var(--bc-navy)} .bc-rush{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--bc-accent-dk);background:var(--bc-soft);border:1px solid var(--bc-line);padding:2px 7px;border-radius:3px;margin-left:6px;vertical-align:middle} .bc-pcard .benefit{font-size:13px;color:var(--bc-grey);margin-bottom:10px;line-height:1.4} .bc-pcard .from{font-size:13px;color:#7a7f86;margin-bottom:12px} .bc-pcard .from b{color:var(--bc-accent-dk);font-size:15px} .bc-pcard .go{font-size:13px;font-weight:600;color:var(--bc-accent-dk);display:flex;align-items:center;gap:6px} .bc-pcard:hover .go{gap:10px} .bc-note{text-align:center;font-size:12.5px;color:#8a8f98;margin-top:22px} /* ---- Process ---- */ .bc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s} .bc-step{background:#fff;border:1px solid var(--bc-line);border-radius:10px;padding:28px 22px;position:relative;text-align:center} .bc-step .n{counter-increment:s;width:48px;height:48px;border-radius:50%;background:var(--bc-navy);color:var(--bc-accent);font-family:var(--bc-serif);font-size:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .bc-step .n::before{content:counter(s,decimal-leading-zero)} .bc-step h3{font-family:var(--bc-serif);font-weight:400;font-size:17px;margin-bottom:8px;color:var(--bc-navy)} .bc-step p{font-size:13.5px;color:var(--bc-grey)} .bc-step .arrow{position:absolute;top:50px;right:-16px;color:var(--bc-accent);font-size:20px} .bc-step:last-child .arrow{display:none} /* ---- Why us / features ---- */ .bc-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .bc-feat{padding:30px 26px;background:#fff;border:1px solid var(--bc-line);border-radius:10px} .bc-feat .ic{width:54px;height:54px;border-radius:10px;background:var(--bc-soft);color:var(--bc-accent);display:flex;align-items:center;justify-content:center;font-size:25px;margin-bottom:16px} .bc-feat h3{font-family:var(--bc-serif);font-weight:400;font-size:19px;margin-bottom:9px;color:var(--bc-navy)} .bc-feat p{font-size:14.5px;color:var(--bc-grey)} /* ---- Gallery ---- */ .bc-gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .bc-gtile{aspect-ratio:1/1;background:var(--bc-tile);border:1px solid var(--bc-tile-border);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--bc-accent);transition:transform .2s;overflow:hidden} .bc-gtile:hover{transform:scale(1.03)} .bc-gtile img{width:100%;height:100%;object-fit:cover} .bc-gtile .ph{font-size:34px;opacity:.9} .bc-gtile span{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--bc-tile-text)} /* ---- About ---- */ .bc-about{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .bc-about .imgbox{height:338px;border-radius:10px;background:linear-gradient(160deg,var(--bc-steel),var(--bc-navy));display:flex;align-items:center;justify-content:center;color:var(--bc-accent);overflow:hidden} .bc-about .imgbox img{width:100%;height:100%;object-fit:cover} .bc-about .imgbox .est{font-family:var(--bc-serif);text-align:center} .bc-about .imgbox .est b{font-size:60px;display:block;color:#fff} .bc-about .imgbox .est span{letter-spacing:3px;font-size:13px;color:var(--bc-accent)} .bc-about h2{font-family:var(--bc-serif);font-weight:400;font-size:31px;margin:12px 0 16px;color:var(--bc-navy)} .bc-about p{color:var(--bc-grey);margin-bottom:14px;font-size:15.5px} .bc-about ul{list-style:none;margin:18px 0 24px;padding:0} .bc-about li{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:15px} .bc-about li i{color:var(--bc-accent);margin-top:3px;font-style:normal} /* ---- Blog ---- */ .bc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .bc-bcard{background:#fff;border:1px solid var(--bc-line);border-radius:10px;overflow:hidden;transition:.2s;text-decoration:none;color:inherit;display:block} .bc-bcard:hover{box-shadow:0 14px 30px rgba(20,25,35,.1);transform:translateY(-4px)} .bc-bcard .bimg{aspect-ratio:16/10;background:var(--bc-tile);display:flex;align-items:center;justify-content:center;color:var(--bc-accent);font-size:30px;overflow:hidden} .bc-bcard .bimg img{width:100%;height:100%;object-fit:cover} .bc-bcard .bbody{padding:20px} .bc-bcard .date{font-size:12px;color:var(--bc-accent-dk);letter-spacing:.5px;text-transform:uppercase;font-weight:600} .bc-bcard h3{font-family:var(--bc-serif);font-weight:400;font-size:18px;margin:8px 0;line-height:1.35;color:var(--bc-navy)} .bc-bcard p{font-size:14px;color:var(--bc-grey)} /* ---- Enquiry ---- */ .bc-enq{color:#fff;overflow:hidden} .bc-enq::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 40%,rgba(255,255,255,.08),transparent 46%),linear-gradient(135deg,var(--bc-navy),var(--bc-steel))} .bc-enq .bc-wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .bc-enq .bc-eyebrow{color:var(--bc-accent)} .bc-enq h2{color:#fff;font-family:var(--bc-serif);font-weight:400;font-size:31px;margin:12px 0 14px} .bc-enq .lead{color:var(--bc-heroText);margin-bottom:22px} .bc-chips{display:flex;gap:12px;flex-wrap:wrap} .bc-chip{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:8px 15px;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:7px} .bc-chip i{color:var(--bc-accent);font-style:normal} .bc-form{background:#fff;border-radius:12px;padding:28px;color:var(--bc-ink)} .bc-form h3{font-family:var(--bc-serif);font-weight:400;font-size:20px;margin-bottom:6px;color:var(--bc-navy)} .bc-form .fsub{font-size:13px;color:#7a7f86;margin-bottom:18px} .bc-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px} .bc-form label{font-size:12px;font-weight:600;color:var(--bc-navy);display:block;margin:12px 0 5px} .bc-form input,.bc-form select,.bc-form textarea{width:100%;padding:10px 12px;border:1px solid var(--bc-line);border-radius:5px;font-size:14px;font-family:inherit;background:var(--bc-bg)} .bc-form .file{border:1.5px dashed var(--bc-line);border-radius:6px;padding:14px;text-align:center;font-size:13px;color:#7a7f86;margin-top:6px} .bc-form .file i{color:var(--bc-accent);font-size:20px;display:block;margin-bottom:4px;font-style:normal} .bc-form .bc-btn{width:100%;justify-content:center;margin-top:16px} /* ---- Responsive (aligned to Elementor default breakpoints) ---- */ @media(max-width:1024px){ .bc-hero.is-split .bc-hero-inner,.bc-about,.bc-enq .bc-wrap,.bc-trustrow{grid-template-columns:1fr} .bc-hero.is-split .bc-hero-visual{display:none} .bc-prod-grid,.bc-feat-grid,.bc-blog-grid,.bc-steps,.bc-gal-grid{grid-template-columns:repeat(2,1fr)} .bc-hero h1{font-size:33px} .bc-hero.is-fullbleed{min-height:460px} .bc-hero-overlay{background:linear-gradient(180deg,rgba(15,28,45,.7),rgba(15,28,45,.85))} .bc-step .arrow{display:none} } @media(max-width:767px){ .bc-prod-grid,.bc-feat-grid,.bc-blog-grid,.bc-steps,.bc-gal-grid{grid-template-columns:1fr} .bc-form .frow{grid-template-columns:1fr} .bc-topbar .bc-wrap{justify-content:center;text-align:center;height:auto;padding:8px 24px;gap:4px} .bc-topbar .r{width:100%} } /* =================================================================== Header / Footer nav styling — for Elementor Nav Menu / WordPress Menu widgets bound to the registered menu locations. These rules make Elementor's menu widget (and its hamburger) match the steel-blue design. Apply the CSS class shown to each widget: Header nav -> add class "bc-nav" Footer menus-> add class "bc-fnav" =================================================================== */ /* --- Header nav (desktop) --- */ .bc-nav .elementor-nav-menu > li > a, .bc-nav .elementor-nav-menu .elementor-item{ font-size:14.5px;font-weight:500;color:var(--bc-navy); padding:6px 0;transition:.15s; } .bc-nav .elementor-nav-menu > li > a:hover, .bc-nav .elementor-item:hover, .bc-nav .elementor-item.elementor-item-active{color:var(--bc-accent-dk)} /* dropdown (Products submenu) */ .bc-nav .elementor-nav-menu--dropdown, .bc-nav .sub-menu{ background:#fff;border:1px solid var(--bc-line);border-radius:6px; box-shadow:0 12px 30px rgba(20,25,35,.12);padding:8px;min-width:210px; } .bc-nav .elementor-nav-menu--dropdown a, .bc-nav .sub-menu a{ color:var(--bc-navy)!important;font-size:14px;border-radius:5px;padding:9px 12px!important; } .bc-nav .elementor-nav-menu--dropdown a:hover, .bc-nav .sub-menu a:hover{background:var(--bc-soft);color:var(--bc-accent-dk)!important} /* --- Hamburger (mobile toggle) --- */ .bc-nav .elementor-menu-toggle{ color:var(--bc-navy);border:1px solid var(--bc-line);border-radius:6px; padding:8px;background:#fff; } .bc-nav .elementor-menu-toggle:hover{color:var(--bc-accent-dk);border-color:var(--bc-accent)} .bc-nav .elementor-menu-toggle svg{fill:currentColor;width:24px;height:24px} /* mobile slide/dropdown panel */ .bc-nav .elementor-nav-menu--dropdown{background:#fff} .bc-nav .elementor-nav-menu--dropdown li a, .bc-nav .elementor-nav-menu--dropdown li.menu-item a{ color:var(--bc-navy)!important;border-bottom:1px solid var(--bc-line); padding:13px 16px!important;font-size:15px; } .bc-nav .elementor-nav-menu--dropdown li:last-child a{border-bottom:none} /* fallback hamburger for the plain WP menu (if not using Elementor Pro nav) */ .bc-hamburger{display:none;background:none;border:1px solid var(--bc-line);border-radius:6px;padding:8px 10px;cursor:pointer;color:var(--bc-navy);line-height:0} .bc-hamburger svg{width:24px;height:24px;fill:currentColor} @media(max-width:1024px){ .bc-hamburger{display:inline-flex} } /* --- Footer nav --- */ .bc-fnav ul,.bc-fnav .elementor-nav-menu{list-style:none;margin:0;padding:0} .bc-fnav li{margin-bottom:11px} .bc-fnav a,.bc-fnav .elementor-item{ color:#9aa3af!important;font-size:14px;text-decoration:none;transition:.15s; background:transparent!important;padding:0!important; } .bc-fnav a:hover,.bc-fnav .elementor-item:hover{color:var(--bc-accent)!important} /* =================================================================== BC Header widget (self-contained — logo + dynamic menu w/ SVG icons + CTA + accessible hamburger). Distinct from the .bc-nav helper classes above (which style Elementor's own Nav Menu widget). =================================================================== */ .bc-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--bc-line)} .bc-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:74px;gap:20px} .bc-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;justify-self:start} .bc-logo-img{max-height:48px;width:auto} .bc-logo-mark{width:44px;height:44px;border-radius:50%;background:var(--bc-navy);color:var(--bc-accent);display:flex;align-items:center;justify-content:center;font-family:var(--bc-serif);font-size:14px;font-weight:600;letter-spacing:.5px;border:2px solid var(--bc-accent);flex-shrink:0} .bc-logo-txt b{font-family:var(--bc-serif);font-size:18px;color:var(--bc-navy);display:block;line-height:1.1;white-space:nowrap} .bc-logo-txt span{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#8a8f98} /* nav centered in the middle grid column; button pinned right */ .bc-nav-wrap{display:flex;align-items:center;gap:30px;justify-self:center} .bc-header-btn{justify-self:end} .bc-menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0} .bc-menu li{position:relative} .bc-menu > li > a{font-size:14.5px;font-weight:500;color:var(--bc-navy);text-decoration:none;padding:6px 0;display:inline-flex;align-items:center;gap:5px;transition:.15s} .bc-menu > li > a:hover{color:var(--bc-accent-dk)} /* active / current page */ .bc-menu > li.current-menu-item > a, .bc-menu > li.current-menu-parent > a, .bc-menu > li.current-menu-ancestor > a{color:var(--bc-accent-dk);font-weight:600} .bc-menu .sub-menu li.current-menu-item > a{color:var(--bc-accent-dk)!important;background:var(--bc-soft)} .bc-menu > li.menu-item-has-children > a::after{content:"\25be";font-size:10px;color:#9aa;margin-left:3px} /* header button — high specificity so Elementor/theme styles can't wash it out */ .bc-header .bc-header-btn.bc-btn, .bc-header .bc-header-btn-mobile.bc-btn{ background:var(--bc-accent);color:#fff!important;border:1.5px solid transparent; text-decoration:none;font-weight:600; } .bc-header .bc-header-btn.bc-btn:hover, .bc-header .bc-header-btn-mobile.bc-btn:hover{background:var(--bc-accent-dk);color:#fff!important} /* dropdown */ .bc-menu .sub-menu,.bc-menu .bc-sub{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--bc-line);border-radius:6px;min-width:220px;padding:8px;margin:0;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;box-shadow:0 12px 30px rgba(20,25,35,.1);z-index:10} .bc-menu > li:hover > .sub-menu,.bc-menu > li:hover > .bc-sub{opacity:1;visibility:visible;transform:translateY(0)} .bc-menu .sub-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px;border-radius:5px;color:var(--bc-navy);text-decoration:none} .bc-menu .sub-menu a:hover{background:var(--bc-soft);color:var(--bc-accent-dk)} /* per-item SVG icon */ .bc-menu-ico{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;flex-shrink:0} .bc-menu-ico svg{width:16px;height:16px;fill:var(--bc-accent);color:var(--bc-accent)} .bc-header-btn{flex-shrink:0} .bc-header-btn-mobile{display:none} .bc-ham{display:none;background:none;border:1px solid var(--bc-line);border-radius:6px;padding:7px 9px;cursor:pointer;color:var(--bc-navy);line-height:0} .bc-ham:hover{border-color:var(--bc-accent);color:var(--bc-accent-dk)} /* mobile */ @media(max-width:1024px){ .bc-header-inner{grid-template-columns:1fr auto;gap:12px} .bc-ham{display:inline-flex;justify-self:end} .bc-header-btn{display:none} .bc-nav-wrap{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--bc-line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px;margin:0;box-shadow:0 12px 24px rgba(20,25,35,.08);display:none;grid-column:1/-1} .bc-header.bc-open .bc-nav-wrap{display:flex} .bc-menu{flex-direction:column;align-items:stretch;gap:0;width:100%} .bc-menu > li > a{padding:13px 0;border-bottom:1px solid var(--bc-line);font-size:15px} .bc-menu .sub-menu,.bc-menu .bc-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-radius:0;min-width:0;padding:0 0 8px 14px;display:none} .bc-menu > li.bc-sub-open > .sub-menu,.bc-menu > li.bc-sub-open > .bc-sub{display:block} .bc-header-btn-mobile{display:inline-flex;justify-content:center;margin-top:14px;width:100%} } /* =================================================================== BC Footer widget =================================================================== */ .bc-footer{color:#9aa3af;font-size:14px} .bc-footer .bc-wrap{padding-top:0;padding-bottom:0} .bc-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:56px 0 38px} .bc-footer h4{color:#fff;font-family:var(--bc-serif);font-size:17px;margin-bottom:18px;font-weight:400} .bc-flogo{display:flex;align-items:center;gap:12px;margin-bottom:16px} .bc-flogo b{color:#fff;font-family:var(--bc-serif);font-size:17px} .bc-fbrand p{font-size:14px;line-height:1.6} .bc-fmenu{list-style:none;margin:0;padding:0} .bc-fmenu li{margin-bottom:11px} .bc-fmenu a{color:#9aa3af;text-decoration:none;transition:.15s} .bc-fmenu a:hover{color:var(--bc-accent)} .bc-fmenu li.current-menu-item > a{color:var(--bc-accent);font-weight:600} .bc-fcontact{list-style:none;margin:0;padding:0} .bc-fcontact li{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px} .bc-fcontact i{color:var(--bc-accent);margin-top:3px;font-style:normal} .bc-news{margin-top:16px} .bc-news input{width:100%;padding:11px 12px;border-radius:5px;border:1px solid #333a45;background:rgba(255,255,255,.05);color:#fff;font-size:14px;margin-bottom:10px} .bc-news .bc-btn{width:100%;justify-content:center} .bc-fbot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px} @media(max-width:1024px){ .bc-fgrid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .bc-fgrid{grid-template-columns:1fr} } /* ---- Product archive: filter pills + pagination ---- */ .bc-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 34px} .bc-pill{display:inline-block;font-size:13px;font-weight:500;color:#4a4f57;background:#fff;border:1px solid var(--bc-line);border-radius:20px;padding:7px 16px;text-decoration:none;transition:.15s} .bc-pill:hover{border-color:var(--bc-accent);color:var(--bc-accent-dk)} .bc-pill.is-active{background:var(--bc-accent);border-color:var(--bc-accent);color:#fff} .bc-pagination{margin-top:40px;text-align:center} .bc-pagination ul{list-style:none;display:inline-flex;gap:6px;padding:0;margin:0} .bc-pagination a,.bc-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--bc-line);border-radius:6px;color:var(--bc-navy);text-decoration:none;font-size:14px;background:#fff;transition:.15s} .bc-pagination a:hover{border-color:var(--bc-accent);color:var(--bc-accent-dk)} .bc-pagination .current{background:var(--bc-accent);border-color:var(--bc-accent);color:#fff} /* ---- Product archive: breadcrumb + empty state ---- */ .bc-crumb{font-size:13px;color:#8a8f98;margin:0 0 22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px} .bc-crumb a{color:var(--bc-steel);text-decoration:none} .bc-crumb a:hover{color:var(--bc-accent-dk)} .bc-crumb .sep{color:#c2c8d0} .bc-crumb .current{color:var(--bc-navy);font-weight:600} .bc-empty{text-align:center;max-width:520px;margin:20px auto 10px;padding:48px 30px;background:#fff;border:1px solid var(--bc-line);border-radius:12px} .bc-empty-ico{width:64px;height:64px;border-radius:50%;background:var(--bc-soft);color:var(--bc-accent);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 18px} .bc-empty h3{font-family:var(--bc-serif);font-weight:400;font-size:22px;color:var(--bc-navy);margin-bottom:10px} .bc-empty p{color:var(--bc-grey);font-size:15px;margin-bottom:22px;line-height:1.6} .bc-empty-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- Breadcrumb banner band (shared by BC Breadcrumb + archive) ---- */ .bc-crumb-banner{background:linear-gradient(135deg,var(--bc-navy),var(--bc-steel));padding:56px 0} .bc-crumb-banner > .bc-wrap{padding-top:0;padding-bottom:0} .bc-crumb-banner .bc-crumb{margin:0} /* full-width band: stretch edge to edge without causing horizontal scroll */ .bc-crumb-banner.is-full{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto} .bc-crumb-banner.is-full > .bc-wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px} /* heading block inside breadcrumb banner (reuses archive heading styles) */ .bc-crumb-banner .bc-arch-head{text-align:left;max-width:640px;margin:0 0 18px} .bc-crumb-banner .bc-eyebrow{color:var(--bc-accent)} .bc-crumb-banner .bc-crumb a{color:#aebed0} .bc-crumb-banner .bc-crumb a:hover{color:var(--bc-accent)} .bc-crumb-banner .bc-crumb .current{color:#fff} .bc-crumb-banner .bc-crumb .sep{color:#5e7089} /* ---- Product archive: full banner (eyebrow+title+subtitle+breadcrumb) ---- */ .bc-arch-banner{margin:0 0 44px} /* archive content gets bottom breathing room since section padding is 0 */ .bc-arch-banner ~ .bc-wrap{padding-bottom:70px} .bc-arch-banner.has-bg{background:linear-gradient(135deg,var(--bc-navy),var(--bc-steel));padding:56px 0} .bc-arch-banner.is-full{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto} .bc-arch-banner.is-full > .bc-wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px} .bc-arch-head{text-align:left;max-width:640px;margin:0 0 18px} .bc-arch-banner .bc-eyebrow{color:var(--bc-accent)} .bc-arch-title{font-family:var(--bc-serif);font-weight:400;font-size:40px;line-height:1.15;color:#fff;margin:12px 0 14px} .bc-arch-banner.has-bg .bc-arch-title{color:#fff !important} .bc-arch-sub{color:var(--bc-heroText);font-size:16px;line-height:1.6;margin:0} /* breadcrumb inside banner: light on dark */ .bc-arch-banner .bc-crumb{margin:0} .bc-arch-banner .bc-crumb a{color:#aebed0} .bc-arch-banner .bc-crumb a:hover{color:var(--bc-accent)} .bc-arch-banner .bc-crumb .current{color:#fff} .bc-arch-banner .bc-crumb .sep{color:#5e7089} /* when banner has no bg, keep text dark */ .bc-arch-banner:not(.has-bg) .bc-arch-title{color:var(--bc-navy)} .bc-arch-banner:not(.has-bg) .bc-arch-sub{color:var(--bc-grey)} .bc-arch-banner:not(.has-bg) .bc-crumb a{color:var(--bc-steel)} .bc-arch-banner:not(.has-bg) .bc-crumb .current{color:var(--bc-navy)} @media(max-width:767px){ .bc-arch-banner.has-bg{padding:40px 0} .bc-arch-title{font-size:30px} } /* =================================================================== BC Single Product =================================================================== */ .bc-sp-top{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:44px} .bc-sp-top > *{min-width:0} .bc-sp-gallery{min-width:0;max-width:100%} .bc-sp-main{height:480px;max-height:70vh;background:var(--bc-tile);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--bc-accent)} .bc-sp-main img{width:100%;height:100%;object-fit:cover;transition:opacity .18s ease,transform .18s ease;will-change:opacity,transform} .bc-sp-main img.is-swapping{opacity:0;transform:scale(1.04)} .bc-sp-thumb{transition:border-color .15s ease,transform .15s ease} .bc-sp-thumb:hover{transform:translateY(-2px)} .bc-sp-thumb.is-active{transform:none} @media (prefers-reduced-motion: reduce){ .bc-sp-main img,.bc-sp-thumb{transition:none} .bc-sp-main img.is-swapping{opacity:1;transform:none} } .bc-sp-main .ph{font-size:54px} .bc-sp-main .ph-tag{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--bc-tile-text);border:1px dashed var(--bc-tile-border);padding:4px 10px;border-radius:3px} .bc-sp-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;overflow-y:hidden;max-width:100%;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none} .bc-sp-thumbs::-webkit-scrollbar{display:none;width:0;height:0} .bc-sp-thumb{width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--bc-tile);border:2px solid transparent;cursor:pointer;flex-shrink:0} .bc-sp-thumb.is-active{border-color:var(--bc-accent)} .bc-sp-thumb img{width:100%;height:100%;object-fit:cover} .bc-sp-title{font-family:var(--bc-serif);font-weight:400;font-size:32px;color:var(--bc-navy);margin:0 0 10px} .bc-sp-benefit{font-size:16px;color:var(--bc-grey);margin-bottom:16px} .bc-sp-price{font-size:16px;color:#7a7f86;margin-bottom:4px} .bc-sp-price b{font-family:var(--bc-serif);font-size:26px;color:var(--bc-accent-dk)} .bc-sp-pricenote{font-size:12.5px;color:#8a8f98;margin-bottom:20px} .bc-sp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0} .bc-sp-facts .fact{background:var(--bc-soft);border:1px solid var(--bc-line);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:11px} .bc-sp-facts .fact i{font-style:normal;color:var(--bc-accent);font-size:20px;line-height:1} .bc-sp-facts .fact b{font-size:14.5px;font-weight:600;color:var(--bc-navy);display:block;line-height:1.2} .bc-sp-facts .fact span{font-size:11.5px;color:#8a8f98} .bc-sp-optblock{margin:18px 0} .bc-sp-optlabel{font-size:13px;color:var(--bc-grey);display:block;margin-bottom:8px} .bc-sp-swatches{display:flex;flex-wrap:wrap;gap:8px} .bc-sp-swatches .bc-sw{font-size:12.5px;background:#fff;border:1px solid var(--bc-line);border-radius:20px;padding:5px 12px;color:var(--bc-navy)} .bc-sp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px} .bc-sp-mid{display:grid;grid-template-columns:1.6fr 1fr;gap:30px;margin-bottom:44px} .bc-sp-specs h2,.bc-sp-inquiry h2,.bc-sp-related h2{font-family:var(--bc-serif);font-weight:400;font-size:24px;color:var(--bc-navy);margin:0 0 18px} .bc-sp-specs table{width:100%;border-collapse:collapse} .bc-sp-specs th,.bc-sp-specs td{text-align:left;padding:11px 14px;border:1px solid var(--bc-line);font-size:14px;vertical-align:top} .bc-sp-specs th{background:var(--bc-soft);color:var(--bc-navy);width:34%;font-weight:600} .bc-sp-sidecards{display:flex;flex-direction:column;gap:16px} .bc-sp-card{background:#fff;border:1px solid var(--bc-line);border-left:3px solid var(--bc-accent);border-radius:8px;padding:18px 20px} .bc-sp-card h3{font-family:var(--bc-serif);font-weight:400;font-size:17px;color:var(--bc-navy);margin:0 0 6px} .bc-sp-card p{font-size:13.5px;color:var(--bc-grey);margin:0} .bc-sp-desc{max-width:820px;margin:0 auto 44px;font-size:15.5px;color:var(--bc-ink);line-height:1.7} .bc-sp-desc>*:first-child{margin-top:0} .bc-sp-desc p{margin-bottom:16px} .bc-sp-desc h2{font-family:var(--bc-serif);font-weight:400;font-size:24px;color:var(--bc-navy);margin:30px 0 12px} .bc-sp-desc h3{font-family:var(--bc-serif);font-weight:400;font-size:19px;color:var(--bc-navy);margin:24px 0 10px} .bc-sp-desc h4{font-weight:600;font-size:16px;color:var(--bc-navy);margin:20px 0 8px} .bc-sp-desc ul,.bc-sp-desc ol{margin:0 0 18px 0;padding:0;list-style:none} .bc-sp-desc ul li{position:relative;padding:6px 0 6px 26px;border-bottom:1px solid var(--bc-line);font-size:15px} .bc-sp-desc ul li:last-child{border-bottom:none} .bc-sp-desc ul li::before{content:"\25C6";position:absolute;left:2px;top:7px;color:var(--bc-accent);font-size:12px} .bc-sp-desc ol{counter-reset:bc-ol;margin-left:0} .bc-sp-desc ol li{position:relative;padding:6px 0 6px 30px;font-size:15px;counter-increment:bc-ol} .bc-sp-desc ol li::before{content:counter(bc-ol);position:absolute;left:0;top:6px;width:20px;height:20px;background:var(--bc-soft);color:var(--bc-accent-dk);border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center} .bc-sp-desc blockquote{border-left:3px solid var(--bc-accent);background:var(--bc-soft);padding:14px 20px;margin:22px 0;font-family:var(--bc-serif);font-style:italic;color:var(--bc-navy)} .bc-sp-desc a{color:var(--bc-accent-dk);text-decoration:underline} .bc-sp-desc img{border-radius:8px;margin:16px 0} .bc-sp-desc strong{color:var(--bc-navy)} /* two-column list option: add class bc-cols to a