```html Rosco Energy LLC
ROSCO ENERGY LLC

Turnkey Infrastructure for EV Charging & Energy Storage

From utility coordination to commissioning — we deliver deployable, scalable projects built for real-world uptime.

Request a Quote Explore

Solutions

Focused delivery for electrification projects — scalable, utility-ready execution.

Project intake →
EV Charging
Turnkey DCFC Deployment
Site + utility + build + commissioning.
Energy Storage
Commercial ESS
Demand control, resiliency, monitoring.
Grid / Utility
Infrastructure Delivery
Closeout packages, energization-ready work.
Company
About Rosco
Execution-first operator and builder.

Focus Areas

Designed for municipal, commercial, and fleet sites with real-world uptime requirements.

Discuss a site →
Municipal
Public Parking Deployment
ADA flow, stall geometry, durable operations.
Commercial
Retail / Destination
Clean installs, network/payment readiness.
Fleet
Depot Charging
Phased rollouts and scalable service upgrades.
Storage
ESS for Peak + Resiliency
Practical sizing and integration support.

Insights

Short updates — incentives, best practices, and deployment notes.

Request details →
Update
Incentive-ready delivery: what matters in documentation + closeout
View →
Brief
Municipal charger placement: ADA flow + cable management
View →
Note
Sizing ESS for demand control: a practical approach
View →

About Rosco Energy

Turnkey infrastructure provider focused on EV charging, energy storage, and utility-ready delivery.

Contact →
Capability
Utility Coordination
Built to energize — permits, documentation, and closeout discipline.
Capability
Construction Delivery
Civil + electrical execution with commissioning-first mindset.
Partners
Public + Private
Municipal, commercial, and fleet stakeholders.
Approach
EPC + O&M
Design → build → maintain for long-term uptime.

Project Intake

Send the site address, available service (if known), target scope, and timeline.

Scope: EV Charging • ESS • Utility
Delivery: EPC + Commissioning + O&M
Response: Next steps + scope questions
This is a static demo. Wire it to Formspree, Netlify Forms, or your backend.
``` ```css /* assets/css/style.css */ :root{ --bg:#030A1A; /* very dark blue-black */ --bg2:#04102A; /* slightly brighter section */ --surface:#061A3D; /* cards / tiles */ --surface2:#072451; /* hover */ --text:rgba(255,255,255,.94); --muted:rgba(255,255,255,.72); --muted2:rgba(255,255,255,.56); --accent:#1E6BFF; /* bright royal/azure */ --accent2:#35B6FF; /* cyan highlight for gradients */ --line:rgba(255,255,255,.10); --shadow:0 18px 50px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif} a{color:inherit;text-decoration:none} .container{width:min(1200px, calc(100% - 48px)); margin:0 auto} .sep{opacity:.45; padding:0 10px} /* Header overlays hero */ .header{ position:absolute; top:0; left:0; right:0; z-index:60; border-bottom:none; background: rgba(0,0,0,.00); backdrop-filter: blur(0px); transition: background .22s ease, backdrop-filter .22s ease; } .header.scrolled{ position:fixed; border-bottom:none; background: rgba(12, 68, 180, .28); backdrop-filter: blur(14px); } .header-inner{ height:160px; display:flex; align-items:center; justify-content:space-between; } .brand img{ height:192px; /* h-48 */ width:auto; display:block; object-fit:contain; } /* Nav */ .nav{position:relative; display:flex; align-items:center; gap:16px} .nav-links{ display:flex; align-items:center; gap:18px; } .nav-group{display:flex; align-items:center; gap:18px} .nav-item{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:10px 8px; border:none; background:transparent; cursor:pointer; } .nav-item:hover{color:var(--text)} .nav-cta{display:flex; align-items:center} /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:999px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(255,255,255,.18); transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; } .btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.30)} .btn-solid{background:#fff; color:#000; border-color:#fff} .btn-solid:hover{opacity:.92} .btn-ghost{background:transparent} .btn-full{width:100%} /* Mega menu */ .mega{ position:absolute; top:160px; left:0; right:0; pointer-events:none; } .mega-panel{ display:none; pointer-events:auto; background:rgba(4,16,42,.88); box-shadow: var(--shadow); border-radius:18px; padding:18px; margin-top:12px; } .mega-panel.open{display:block} .mega-grid{ display:grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap:18px; } .mega-title{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px; } .mega-link{ display:block; padding:10px 10px; border-radius:12px; border:1px solid transparent; color:var(--muted); } .mega-link:hover{ border-color:rgba(30,107,255,.35); color:var(--text); background:rgba(30,107,255,.06); } .mega-text{color:var(--muted); line-height:1.6} .mega-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px} .badge{ border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 10px; font-size:12px; color:var(--muted); } .mega-card{ border-left:1px solid rgba(255,255,255,.10); padding-left:18px; } .mega-card-title{font-weight:600; letter-spacing:.04em} .mega-card-text{color:var(--muted); margin:10px 0 14px} /* Hero */ .hero{ position:relative; height:100vh; min-height:720px; overflow:hidden; background: var(--bg); } .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: contrast(1.04) saturate(1.05); transform: scale(1.02); } .hero-overlay{ position:absolute; inset:0; background: radial-gradient(1200px 700px at 50% 40%, rgba(30,107,255,.18), rgba(2,8,18,.90)), linear-gradient(rgba(30,107,255,.12), rgba(2,8,18,.86)); } .hero-content{ position:relative; height:100%; padding-top:210px; /* room for big header logo */ display:flex; flex-direction:column; justify-content:center; gap:14px; } .hero-kicker{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.76); } .hero-title{ font-size: clamp(38px, 4.4vw, 64px); font-weight:300; line-height:1.05; margin:0; max-width: 900px; } .hero-sub{ margin:0; font-size: clamp(16px, 1.6vw, 19px); line-height:1.7; color:rgba(255,255,255,.80); max-width: 720px; } .hero-actions{display:flex; gap:12px; margin-top:10px; flex-wrap:wrap} .hero-scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:30px; display:flex; gap:8px; opacity:.75; } .hero-scroll .dot{ width:6px; height:6px; border-radius:999px; border:1px solid rgba(255,255,255,.60); background:rgba(255,255,255,.10); } /* Reveal animations */ .reveal{ opacity:0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; } .reveal.in{ opacity:1; transform: translateY(0); } .delay-1{transition-delay:.10s} .delay-2{transition-delay:.18s} .delay-3{transition-delay:.26s} /* Simplified “corporate” sections + POSCO-ish divider */ .section{ padding: 72px 0; background: var(--bg); position: relative; } .section.alt{ background: var(--bg2); } .section.divided::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(30,107,255,.22), rgba(255,255,255,.10), rgba(255,255,255,0) ); } .hdr{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; } .hdr h2{ margin:0; font-size: clamp(26px, 2.4vw, 36px); font-weight:300; letter-spacing:.01em; } .hdr h2::after{ content:""; display:block; width:54px; height:2px; margin-top:10px; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:999px; opacity:.95; } .hdr p{ margin:0; color:var(--muted); line-height:1.6; max-width: 720px; } .hdr a{ color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(30,107,255,.55); padding-bottom: 3px; } .hdr a:hover{ opacity:.9; } /* Tiles */ .tiles{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; } .tile{ border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:18px; background: rgba(255,255,255,.02); transition: transform .18s ease, border-color .18s ease, background .18s ease; min-height: 130px; } .tile:hover{ transform: translateY(-2px); border-color: rgba(30,107,255,.35); background: rgba(30,107,255,.06); } .tile .k{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2); } .tile .t{ margin-top:10px; font-weight:500; } .tile .d{ margin-top:10px; color:var(--muted); line-height:1.6; } /* Rows list */ .rows{ border:1px solid rgba(255,255,255,.10); border-radius:18px; overflow:hidden; background: rgba(255,255,255,.02); } .row{ display:grid; grid-template-columns: 140px 1fr 120px; gap:14px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); align-items:center; } .row:last-child{border-bottom:none} .row .date{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); } .row .title{font-weight:500; line-height:1.35} .row .cta{ justify-self:end; color: rgba(255,255,255,.82); } .row:hover .cta{color:#fff} .row:hover{background: rgba(30,107,255,.05)} /* Contact bits */ .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; } .contact-box{ border:1px solid rgba(255,255,255,.10); border-radius:18px; padding:16px; background: rgba(255,255,255,.02); } .contact-line{color:var(--muted); line-height:1.9} .contact-line span{color:rgba(255,255,255,.72)} .form{ border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:18px; background: rgba(255,255,255,.02); } .field{display:flex; flex-direction:column; gap:8px; margin-bottom:12px} label{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted2)} input,textarea{ background: rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:12px 12px; color:var(--text); outline:none; } input:focus,textarea:focus{border-color:rgba(30,107,255,.55)} .form-note{margin-top:10px; font-size:12px; color:var(--muted2); line-height:1.5} /* Footer */ .footer{ padding:48px 0; background: rgba(2,8,18,.88); } .footer-inner{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap} .foot-left{ display:flex; flex-direction:column; align-items:flex-start; } .foot-logo{ height:192px; /* match header */ width:auto; /* prevents stretch */ max-width:100%; object-fit:contain; display:block; opacity:.95; } .foot-text{margin-top:10px; font-size:12px; color:var(--muted2)} .foot-right a{color:var(--muted); font-size:13px} .foot-right a:hover{color:var(--text)} /* Mobile nav */ .nav-toggle{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); cursor:pointer; } .nav-toggle span{ display:block; width:18px; height:2px; background:rgba(255,255,255,.85); margin:4px auto; border-radius:9px; } @media (max-width: 980px){ .mega{display:none} .header-inner{height:auto; padding:16px 0} .brand img{height:120px} .hero-content{padding-top:180px} .tiles{grid-template-columns:1fr 1fr} .row{grid-template-columns: 1fr; gap:6px} .row .cta{justify-self:start} .contact-grid{grid-template-columns:1fr} .nav-toggle{display:inline-flex; align-items:center; justify-content:center} .nav-links{ position:fixed; top:120px; left:0; right:0; background:rgba(3,10,26,.96); padding:16px 24px; display:none; flex-direction:column; align-items:flex-start; gap:12px; } .nav-links.open{display:flex} .nav-group{flex-direction:column; align-items:flex-start} } @media (max-width: 560px){ .tiles{grid-template-columns:1fr} .foot-logo{height:120px} } /* FORCE HERO + HEADER TEXT TO PURE WHITE */ .header, .header a, .header button, .header .nav-item, .header .btn, .header .mega, .header .mega * { color: #fff !important; } /* Make nav items + mega links white (no gray) */ .header .nav-item { opacity: .95; } .header .nav-item:hover { opacity: 1; } .header .mega-link, .header .mega-text, .header .mega-title, .header .badge { color: #fff !important; opacity: .92; } /* HERO text fully white */ .hero, .hero a, .hero .hero-kicker, .hero .hero-title, .hero .hero-sub { color: #fff !important; } /* Optional: keep hero buttons clean */ .hero .btn-ghost{ border-color: rgba(255,255,255,.55); } .hero .btn-ghost:hover{ border-color: rgba(255,255,255,.85); } .footer-links{ display:flex; gap:14px; flex-wrap:wrap; } .footer-links a{ font-size:13px; color: rgba(255,255,255,.65); letter-spacing:.04em; transition:.2s ease; } .footer-links a:hover{ color:#fff; }