:root { --ink:#111613; --paper:#ffffff; --lime:#14CF62; --muted:#69716b; --line:rgba(17,22,19,.14); --copper:#14CF62; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'Space Grotesk',sans-serif; } a { color:inherit; text-decoration:none; } .reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; } .reveal.is-visible { opacity:1; transform:none; } .form-shell { padding:34px; border:1px solid var(--line); background:#fff; } .form-shell label { display:block; margin-bottom:7px; color:#59625b; font-family:'DM Mono'; font-size:.66rem; text-transform:uppercase; } .form-shell input,.form-shell select,.form-shell textarea { width:100%; border:1px solid var(--line); border-radius:0; padding:13px; background:var(--paper); color:var(--ink); outline:none; } .form-shell input:focus,.form-shell select:focus,.form-shell textarea:focus { border-color:#7ea536; box-shadow:0 0 0 3px rgba(126,165,54,.14); } .site-nav { position:absolute; z-index:10; width:100%; top:0; padding:22px 0; } .navbar-brand { display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:700; letter-spacing:.08em; color:#fff; } .brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:var(--ink); background:var(--lime); font-size:1rem; } .brand-light { color:var(--lime); } .nav-link { color:rgba(255,255,255,.72)!important; font-size:.8rem; } .nav-link:hover { color:var(--lime)!important; } .nav-cta { display:inline-flex; gap:12px; align-items:center; padding:11px 16px; background:var(--lime); color:var(--ink); font-size:.78rem; font-weight:700; } .navbar-toggler { border:0; font-size:1.5rem; color:#fff; } .hero { min-height:760px; color:#fff; position:relative; display:flex; align-items:end; padding:80px 0 68px; overflow:hidden; background:linear-gradient(90deg,rgba(12,18,15,.93) 0%,rgba(12,18,15,.64) 48%,rgba(12,18,15,.18) 100%),url('../images/hero-battery-recycling.jpg') center/cover; } .hero:after { content:''; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,#000,transparent 75%); } .hero .container-fluid { position:relative; z-index:1; } .eyebrow,.section-kicker,.footer-label { font-family:'DM Mono',monospace; text-transform:uppercase; font-size:.68rem; letter-spacing:.16em; color:var(--copper); } .hero .eyebrow { color:var(--lime); } h1,h2,h3,p { margin-top:0; } h1 { max-width:850px; margin:20px 0; font-size:clamp(3.2rem,7vw,7.6rem); line-height:.9; letter-spacing:-.07em; font-weight:600; } h2 { font-size:clamp(2.4rem,5vw,5.4rem); line-height:.93; letter-spacing:-.06em; font-weight:600; } .hero-intro { max-width:530px; color:rgba(255,255,255,.68); font-size:1.02rem; line-height:1.6; } .btn-lime,.btn-ghost { display:inline-flex; align-items:center; gap:26px; padding:15px 18px; margin:22px 10px 0 0; font-size:.8rem; font-weight:700; transition:.25s ease; } .btn-lime { background:var(--lime); } .btn-ghost { color:#fff; border:1px solid rgba(255,255,255,.3); } .btn-lime:hover { transform:translateY(-3px); background:#ddff8e; } .btn-ghost:hover { border-color:var(--lime); color:var(--lime); } .hero-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:80px; border-top:1px solid rgba(255,255,255,.24); } .hero-stat { padding:22px 22px 0 0; border-right:1px solid rgba(255,255,255,.24); } .hero-stat:last-child { border:0; } .stat-value { display:block; font-size:1.5rem; font-weight:600; color:var(--lime); } .stat-label { display:block; margin-top:5px; color:rgba(255,255,255,255); font-family:'DM Mono',monospace; font-size:.62rem; text-transform:uppercase; } .section { padding:15px 0; } .section-dark { background:var(--ink); color:#fff; } .section-head { max-width:700px; margin-bottom:58px; } .section-head p { max-width:610px; margin-top:25px; color:#69716b; line-height:1.65; } .section-dark .section-head p { color:#a6ada7; } .kicker-lime { color:#79a932; } .process-card { min-height:430px; position:relative; overflow:hidden; color:#fff; background:#202622; } .process-card img { width:100%; height:430px; object-fit:cover; opacity:.7; transition:transform .5s; } .process-card:hover img { transform:scale(1.06); } .process-card:after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(10,14,12,.94)); } .process-content { position:absolute; z-index:1; inset:auto 25px 25px; } .process-number { color:var(--lime); font-family:'DM Mono',monospace; font-size:.7rem; } .process-content h3 { margin:12px 0 8px; font-size:1.45rem; } .process-content p { color:rgba(255,255,255,.65); font-size:.86rem; line-height:1.5; } .pipeline { border-top:1px solid #3d4740; display:grid; grid-template-columns:repeat(4,1fr); } .pipeline-item { min-height:270px; padding:28px 25px 0 0; border-right:1px solid #3d4740; } .pipeline-item:not(:first-child) { padding-left:25px; } .pipeline-item:last-child { border:0; } .pipeline-no { font-family:'DM Mono'; color:var(--lime); font-size:2.6rem; } .pipeline-item h3 { margin:32px 0 12px; font-size:1.1rem; } .pipeline-item p { color:#9da69f; font-size:.84rem; line-height:1.6; } .materials { background:#e0dfd8; } .material-card { padding:22px; min-height:200px; border:1px solid var(--line); background:rgba(255,255,255,.24); transition:.25s; } .material-card:hover { background:#fff; transform:translateY(-5px); } .material-symbol { font-size:3.5rem; line-height:1; font-weight:600; letter-spacing:-.08em; } .material-name { margin-top:15px; font-weight:600; } .material-meta { display:flex; justify-content:space-between; margin-top:38px; font-family:'DM Mono'; font-size:.62rem; color:#747c75; text-transform:uppercase; } .facility { min-height:580px; display:flex; align-items:end; color:#fff; background:linear-gradient(0deg,rgba(10,15,12,.88),transparent 70%),url('../images/besa-facility.jpg') center/cover; } .facility h2 { max-width:680px; margin:20px 0 30px; } .facility-address { padding-left:20px; border-left:2px solid var(--lime); color:#d9ded8; line-height:1.6; } .tech-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .tech-item { padding:35px; min-height:210px; background:var(--paper); } .tech-item i { color:#7ea536; font-size:1.6rem; } .tech-item h3 { margin:28px 0 10px; font-size:1.3rem; } .tech-item p { color:#69716b; font-size:.87rem; line-height:1.6; } .energy-panel { padding:70px; background:var(--lime); } .energy-panel h2 { max-width:600px; } .energy-panel p { max-width:530px; color:#38442c; line-height:1.65; } .energy-image { min-height:460px; background:url('../images/energy-storage.jpg') center/cover; } .quote-band { padding:95px 0; color:#fff; background:var(--ink); } .quote-band h2 { max-width:760px; } .site-footer { padding:70px 0 22px; color:#fff; background:#0b0f0c; } .footer-copy { max-width:290px; margin-top:28px; color:#778079; line-height:1.6; font-size:.9rem; } .site-footer .footer-label { margin-bottom:20px; color:var(--lime); } .site-footer .col-lg-2 a,.footer-address { display:block; margin:0 0 11px; color:#929a93; font-size:.82rem; } .footer-mail { color:var(--lime); font-size:.84rem; } .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; margin-top:58px; border-top:1px solid #293029; color:#68716a; font-family:'DM Mono'; font-size:.6rem; text-transform:uppercase; } .footer-bottom i { color:var(--lime); } .back-top { position:fixed; z-index:20; right:24px; bottom:24px; width:42px; height:42px; border:0; color:var(--ink); background:var(--lime); opacity:0; pointer-events:none; transition:.25s; } .back-top.visible { opacity:1; pointer-events:auto; }
@media (max-width:991px) { .site-nav { background:rgba(17,22,19,.96); } .navbar-collapse { padding:20px 0; } .hero { min-height:850px; } .hero-stats { grid-template-columns:repeat(2,1fr); gap:18px 0; } .hero-stat:nth-child(2) { border:0; } .pipeline { grid-template-columns:repeat(2,1fr); } .pipeline-item:nth-child(2) { border-right:0; } .pipeline-item:nth-child(3),.pipeline-item:nth-child(4) { border-top:1px solid #3d4740; } }
@media (max-width:575px) { .hero { min-height:800px; padding-bottom:20px; } h1 { font-size:3.35rem; } .hero-stats { margin-top:60px; } .hero-stat { padding-right:10px; } .section { padding:78px 0; } .process-card { min-height:350px; } .pipeline { grid-template-columns:1fr; } .pipeline-item,.pipeline-item:not(:first-child) { min-height:220px; padding:25px 0; border-right:0; border-bottom:1px solid #3d4740; } .pipeline-item:nth-child(3),.pipeline-item:nth-child(4) { border-top:0; } .tech-grid { grid-template-columns:1fr; } .energy-panel { padding:40px 25px; } .energy-image { min-height:280px; } .footer-bottom { flex-direction:column; gap:10px; } }
.recycle-hero { min-height:680px; padding:190px 0 85px; display:flex; align-items:end; background:linear-gradient(90deg,rgba(12,18,15,.98),rgba(12,18,15,.78)),url('../images/battery-shredding.jpg') center/cover; }
.recycle-hero h1 { max-width:780px; } .recycle-hero-note { padding:30px; border:1px solid rgba(201,243,107,.4); color:#fff; background:rgba(201,243,107,.08); } .recycle-hero-note span { display:block; margin-bottom:30px; color:var(--lime); font-size:2rem; } .recycle-hero-note strong,.recycle-hero-note small { display:block; } .recycle-hero-note strong { font-size:1.4rem; } .recycle-hero-note small { margin-top:8px; color:#a6ada7; font-family:'DM Mono'; font-size:.65rem; text-transform:uppercase; }
.chemistry-card { height:100%; padding:34px; border:1px solid var(--line); background:#fff; transition:.3s; } .chemistry-card:hover { transform:translateY(-7px); box-shadow:0 18px 35px rgba(17,22,19,.1); } .chemistry-symbol { display:flex; align-items:start; justify-content:space-between; color:#7ea536; } .chemistry-symbol span { font-size:4.2rem; font-weight:600; letter-spacing:-.08em; line-height:.8; } .chemistry-symbol i { font-size:1.5rem; } .chemistry-card h3 { margin:32px 0 12px; font-size:1.25rem; } .chemistry-card>p { min-height:100px; color:#69716b; font-size:.88rem; line-height:1.65; } .chemistry-sources { padding-top:20px; border-top:1px solid var(--line); } .chemistry-sources small,.stage-outputs small { display:block; margin-bottom:14px; color:#7ea536; font-family:'DM Mono'; font-size:.61rem; text-transform:uppercase; } .chemistry-sources span { display:block; margin:8px 0; font-size:.78rem; } .chemistry-sources i { margin-right:7px; color:var(--copper); }
.stage-list { position:relative; } .stage-list:before { content:''; position:absolute; top:25px; bottom:25px; left:47px; border-left:1px dashed #4b584e; } .stage-card { position:relative; display:grid; grid-template-columns:95px 1.3fr 1fr; gap:30px; padding:30px 0; border-top:1px solid #3d4740; } .stage-card:last-child { border-bottom:1px solid #3d4740; } .stage-index { position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; gap:15px; color:var(--lime); background:var(--ink); } .stage-index span { font-family:'DM Mono'; font-size:.8rem; } .stage-index i { font-size:1.35rem; } .stage-label { margin-bottom:10px; color:var(--lime); font-family:'DM Mono'; font-size:.62rem; text-transform:uppercase; } .stage-body h3 { margin-bottom:12px; font-size:1.35rem; } .stage-body>p:last-child { max-width:500px; margin:0; color:#9da69f; font-size:.86rem; line-height:1.65; } .stage-outputs { padding-left:28px; border-left:1px solid #3d4740; } .stage-outputs span { display:inline-block; margin:0 8px 8px 0; padding:8px 10px; color:#dce2dc; border:1px solid #4b584e; font-size:.7rem; }
.compliance-section { background:#e4e3dc; } .compliance-stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .compliance-stat { min-height:180px; padding:25px; border-right:1px solid var(--line); } .compliance-stat strong { display:block; font-size:2.5rem; letter-spacing:-.06em; } .compliance-stat span { display:block; color:#7ea536; font-family:'DM Mono'; font-size:.7rem; text-transform:uppercase; } .compliance-stat small { display:block; margin-top:25px; color:#69716b; font-size:.76rem; } .safety-card { min-height:255px; padding:28px; border:1px solid var(--line); background:rgba(255,255,255,.34); } .safety-card>i { color:#7ea536; font-size:1.7rem; } .safety-card h3 { margin:25px 0 12px; font-size:1.1rem; } .safety-card p { color:#69716b; font-size:.82rem; line-height:1.6; }
.faq-section .accordion { border-top:1px solid #3d4740; } .faq-section .accordion-item { color:#fff; border-color:#3d4740; background:transparent; } .faq-section .accordion-button { padding:22px 0; color:#fff; font-size:1rem; background:transparent; box-shadow:none; } .faq-section .accordion-button:after { display:none; } .faq-section .accordion-button i { margin-left:auto; color:var(--lime); font-size:1.3rem; transition:.25s; } .faq-section .accordion-button:not(.collapsed) i { transform:rotate(45deg); } .faq-section .accordion-body { max-width:680px; padding:0 40px 24px 0; color:#a6ada7; font-size:.86rem; line-height:1.7; } .enquiry-section { background:#e4e3dc; } .enquiry-section>.container-fluid> .row> .col-lg-5>p:not(.section-kicker) { max-width:450px; color:#69716b; line-height:1.7; } .enquiry-aside { margin-top:60px; padding:25px; border-left:2px solid #7ea536; background:rgba(255,255,255,.38); } .enquiry-aside span,.enquiry-aside small { display:block; color:#69716b; font-family:'DM Mono'; font-size:.62rem; text-transform:uppercase; } .enquiry-aside strong { display:block; margin:8px 0 14px; font-size:1.3rem; }
@media (max-width:767px) { .recycle-hero { min-height:760px; } .stage-list:before { left:23px; } .stage-card { grid-template-columns:48px 1fr; gap:18px; } .stage-outputs { grid-column:2; padding:20px 0 0; border-top:1px solid #3d4740; border-left:0; } .compliance-stat { border-bottom:1px solid var(--line); } .compliance-stat:nth-child(2n) { border-right:0; } .chemistry-card>p { min-height:0; } }
.brand-light,.hero .eyebrow,.btn-ghost:hover,.footer-mail { color:#14CF62; }
.btn-lime,.nav-cta,.back-top { background:#14CF62; }
.btn-lime:hover { background:#38df7d; }
.kicker-lime,.tech-item i,.chemistry-symbol,.chemistry-sources i,.compliance-stat span,.safety-card>i { color:#14CF62; }
.recycle-hero-note { border-color:rgba(20,207,98,.45); background:rgba(20,207,98,.1); }
.materials,.compliance-section,.enquiry-section { background:#fff; }
.material-card,.chemistry-card,.form-shell,.tech-item,.safety-card { background:#fff; }
.recognition-head { max-width:820px; margin-right:auto; margin-left:auto; text-align:center; } .recognition-head h2 span { color:#14CF62; } .recognition-head p:last-child { margin-right:auto; margin-left:auto; } .recognition-panel { overflow:hidden; border:1px solid rgba(20,207,98,.16); border-radius:16px; background:#141b25; } .recognition-panel img { display:block; width:100%; height:100%; min-height:440px; object-fit:cover; } .recognition-copy { padding:62px 64px; align-self:center; } .award-label { color:#14CF62!important; font-family:'DM Mono'; font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; } .award-label i { margin-right:14px; font-size:1.2rem; } .recognition-copy h3 { max-width:500px; margin:30px 0 18px; color:#f4f7f5; font-size:2rem; line-height:1.15; } .recognition-copy>p:not(.award-label) { max-width:530px; color:#91a0b4; font-size:.9rem; line-height:1.75; } .recognition-copy ul { padding:0; margin:28px 0 0; list-style:none; } .recognition-copy li { position:relative; padding:0 0 13px 30px; color:#91a0b4; font-size:.8rem; line-height:1.5; } .recognition-copy li:before { content:'✓'; position:absolute; left:0; color:#14CF62; }
@media (max-width:991px) { .recognition-copy { padding:42px 34px; } }
@media (max-width:575px) { .recognition-panel { border-radius:10px; } .recognition-panel img { min-height:280px; } .recognition-copy { padding:34px 25px; } .recognition-copy h3 { font-size:1.6rem; } }
.section { padding-top:15px; padding-bottom:96px; }
.section-head { margin-bottom:42px; }
.facility { min-height:500px; }
.recycle-hero { min-height:610px; }
@media (max-width:575px) { .section { padding-top:68px; padding-bottom:68px; } .facility { min-height:420px; } .recycle-hero { min-height:680px; } }