.led-drivers-page {
background: #ffffff;
}
.led-drivers-hero,
.led-drivers-final-cta {
background: #f7fbff;
border-bottom: 1px solid var(--li-line);
padding-block: clamp(3rem, 6vw, 5rem);
}
.led-drivers-hero-grid {
align-items: center;
display: grid;
gap: 2rem;
grid-template-columns: minmax(0, 1fr) auto;
}
.led-drivers-hero h1 {
max-width: 760px;
}
.led-drivers-subtitle {
color: var(--li-ink);
font-size: var(--li-step-1);
font-weight: 800;
margin-top: 0.35rem;
max-width: 760px;
}
.led-drivers-intro {
color: var(--li-muted);
display: grid;
gap: 0.65rem;
max-width: 940px;
}
.led-drivers-intro p {
margin: 0;
}
.led-drivers-safety,
.led-drivers-callout,
.led-drivers-warning {
background: #fffaf2;
border-left: 4px solid var(--li-accent);
border-radius: var(--li-radius);
color: var(--li-ink);
font-weight: 700;
margin-top: 1rem;
padding: 1rem;
}
.led-drivers-warning {
background: #fff5f8;
border-left-color: var(--li-magenta-strong);
}
.led-drivers-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.2rem;
}
.led-drivers-hero-icon {
align-items: center;
background: #ffffff;
border: 1px solid rgba(18, 131, 216, 0.2);
border-radius: var(--li-radius);
box-shadow: var(--li-shadow-soft);
display: inline-flex;
height: clamp(8rem, 18vw, 13rem);
justify-content: center;
padding: 1rem;
width: clamp(8rem, 18vw, 13rem);
}
.led-drivers-icon {
align-items: center;
background: #ffffff;
border: 1px solid rgba(18, 131, 216, 0.22);
border-radius: var(--li-radius);
box-shadow: 0 6px 16px rgba(31, 35, 40, 0.06);
display: inline-flex;
height: 3.25rem;
justify-content: center;
width: 3.25rem;
}
.led-drivers-hero-icon img,
.led-drivers-icon img {
display: block;
height: 100%;
object-fit: contain;
width: 100%;
}
.led-drivers-trust,
.led-drivers-section {
padding-block: clamp(2.5rem, 5vw, 4rem);
}
.led-drivers-section + .led-drivers-section {
border-top: 1px solid var(--li-line);
}
.led-drivers-panel {
background: var(--li-panel);
}
.led-drivers-trust-grid,
.led-drivers-card-grid,
.led-drivers-two-up,
.led-drivers-three-up,
.led-drivers-step-grid,
.led-drivers-resource-grid {
display: grid;
gap: 1rem;
margin-top: 1.25rem;
}
.led-drivers-trust-grid,
.led-drivers-card-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.led-drivers-two-up {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.led-drivers-three-up {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.led-drivers-step-grid {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.led-drivers-resource-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.led-drivers-card {
background: #ffffff;
border: 1px solid var(--li-line);
border-radius: var(--li-radius);
display: grid;
gap: 0.65rem;
padding: 1.15rem;
}
.led-drivers-card h3,
.led-drivers-card h4 {
margin: 0;
}
.led-drivers-card p,
.led-drivers-card li,
.led-drivers-section p,
.led-drivers-table td {
color: var(--li-muted);
}
.led-drivers-card ul {
margin-bottom: 0;
}
.led-drivers-card .text-link {
font-weight: 800;
margin-top: auto;
}
.led-drivers-system-flow {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 1.25rem;
}
.led-drivers-system-flow span {
background: #ffffff;
border: 1px solid var(--li-line);
border-radius: var(--li-radius);
color: var(--li-ink);
font-weight: 800;
padding: 1rem;
position: relative;
text-align: center;
}
.led-drivers-system-flow span + span::before {
color: var(--li-accent);
content: ">";
font-weight: 900;
left: -0.58rem;
position: absolute;
}
.led-drivers-table {
border-collapse: collapse;
margin: 1rem 0 1.25rem;
width: 100%;
}
.led-drivers-table th,
.led-drivers-table td {
border: 1px solid var(--li-line);
padding: 0.85rem;
text-align: left;
vertical-align: top;
}
.led-drivers-table thead th {
background: var(--li-ink);
color: #ffffff;
}
.led-drivers-table tbody th {
background: var(--li-panel);
color: var(--li-ink);
}
.led-drivers-step-label {
color: var(--li-magenta-strong);
font-weight: 900;
text-transform: uppercase;
}
.led-drivers-audience,
.led-drivers-resources {
margin-top: clamp(2rem, 4vw, 3rem);
}
.led-drivers-final-cta {
border-top: 1px solid var(--li-line);
}
.led-drivers-final-cta .site-container {
display: grid;
gap: 0.75rem;
}
.led-drivers-final-cta .button {
justify-self: start;
}
@media (max-width: 1200px) {
.led-drivers-step-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.led-drivers-trust-grid,
.led-drivers-card-grid,
.led-drivers-three-up,
.led-drivers-resource-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.led-drivers-hero-grid,
.led-drivers-trust-grid,
.led-drivers-card-grid,
.led-drivers-two-up,
.led-drivers-three-up,
.led-drivers-step-grid,
.led-drivers-resource-grid,
.led-drivers-system-flow {
grid-template-columns: 1fr;
}
.led-drivers-hero-icon {
justify-self: start;
}
.led-drivers-system-flow span + span::before {
content: "";
}
}
@media (max-width: 620px) {
.led-drivers-table,
.led-drivers-table thead,
.led-drivers-table tbody,
.led-drivers-table tr,
.led-drivers-table th,
.led-drivers-table td {
display: block;
width: 100%;
}
.led-drivers-table thead {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.led-drivers-table tr {
border: 1px solid var(--li-line);
border-radius: var(--li-radius);
margin-bottom: 0.75rem;
overflow: hidden;
}
.led-drivers-table th,
.led-drivers-table td {
border: 0;
}
.led-drivers-table td::before {
color: var(--li-ink);
content: attr(data-label);
display: block;
font-weight: 800;
margin-bottom: 0.25rem;
}
}