/*
Theme Name: NICOR Lighting Child
Author: LoungeLizard
Author URI: https://www.loungelizard.com/
Description: NICOR is a trusted partner in residential, commercial, and industrial lighting since the early 1980s.
Version: 1.0.0
Template: nicor-lighting
Text Domain: nicor
*/
/* ════════════════════════════════════════════════════════════
NICOR — Homepage styling — REV 2.20 (responsive cleanup)
Paste into: Appearance → Customize → Additional CSS
Last updated: June 10, 2026
CHANGES FROM REV 1
• Duplicated spotlight-block rules consolidated
• Most !important flags removed — specificity raised instead by
doubling/tripling the section class, which outranks the theme's
selectors without brute force
• !important KEPT only where unavoidable, each one commented:
- Bootstrap utilities (.text-center, .bg-gray) use !important
themselves, so overriding them requires it
- The theme sets section padding via inline CSS variables,
which only !important can override from a stylesheet
• Fixed px values replaced with clamp() for fluid scaling
• Media queries at Bootstrap defaults (576 / 768 / 992 / 1200) —
theme grid classes indicate Bootstrap; confirm with Lounge Lizard
CHANGES IN 2.1
• Trust bar / Values icons: explicit fluid size (110–160px) with
matching max-width so the theme's img-fluid cap can't shrink them
• Icon-column rows center when they don't fill the width
(fixes the 3-item Our Values section)
CHANGES IN 2.2
• Industry tiles: icons NO LONGER baked into the photos. They float
as CSS pseudo-elements pinned to the tile's bottom-left corner —
immune to image cropping at any width
• Industry tiles: dark gradient overlay now applied in CSS instead
of baked into the JPGs
• Tile photos in the builder must be the PLAIN library photos,
set to FULL SIZE (the -300x300 thumbnails WordPress generates
are center-cropped on the server and were eating the bottoms)
• Stretched-link rule included: once a link is set on a tile in
the builder, the whole tile becomes clickable
CHANGES IN 2.3
• Industry tile floating icons forced white via filter
(scoped to the industry tiles only)
CHANGES IN 2.4
• Floating icons sized as a percentage of the tile (16%, min 48px,
max 96px) instead of the viewport — they now stay proportional
as the grid steps 4 → 2 → 1 columns
CHANGES IN 2.5
• Industry tiles re-anchored: the old Solutions icon section was
moved/disabled, so the tiles selector now keys off
.section-featured_products + .section-departments instead.
⚠ FRAGILE BY DESIGN: if the homepage section order changes
again, this anchor must be updated to whatever section sits
directly above the industry tiles. When this migrates to the
child theme, ask Lounge Lizard to add a dedicated class
(e.g. .section-industry-tiles) so order no longer matters.
CHANGES IN 2.6
• Trust bar / icon-column icons left-aligned with their text
(was centered) — matches the bottom-left icon treatment on
the industry tiles. Applies to trust bar, Tools & Resources,
and Our Values sections.
CHANGES IN 2.7
• Industry tile links: light-blue (#5AB1F0) hover/focus state
with underline — theme's default hover color was invisible
against the black background (per Hannah's review, June 10)
CHANGES IN 2.8
• NEW §7: site-wide typography scale — default body copy
stepped down to 18px, lede band lines to fluid 18–24px.
Low specificity by design so explicitly sized sections are
unaffected. Long-term home: child theme base styles (on the
Lounge Lizard quote list).
CHANGES IN 2.9
• §7 broadened: interior page templates (Solutions, Tools, etc.)
don't wrap copy in .page-body — added .wrapper .container p
so body text steps down site-wide, not just on the homepage
and About page.
CHANGES IN 2.10
• §7: line length capped at 72ch for readability (comfortable
reading measure is ~60–75 characters; About page copy was
running 100+). Centered bands get auto margins so the capped
text box stays centered rather than pinning left.
CHANGES IN 2.11
• §7: lede band scale reduced from 18–24px to 17–20px — content
page bands (e.g. About "Delivering at Scale") were reading
oversized. Trust bar intro keeps its larger §2 size.
CHANGES IN 2.12
• §7: theme's forced-uppercase on band headings (.block-text h2)
overridden to display as typed — Ashlyn's mockups use
title-case section headings, uppercase only for eyebrows.
CHANGES IN 2.13
• §1: hero gradient is now conditional — only renders when the
slide contains actual text/button content (uses :has()).
Image-only hero bands, like the NICOR building photo on the
About page, display without shading.
CHANGES IN 2.14
• §1: gradient detection corrected — the theme outputs an empty
on text-free slides (not a truly empty container),
so the rule now keys off :has(h1:empty). Building photo on
About now displays unshaded as intended.
CHANGES IN 2.15
• NEW §8: Tools & Resources tiles — whole tile now clickable via
stretched "See More" link. Scoped with :has(a) so the trust
bar (no links) and industry tiles (own setup) are untouched.
INTERIM — proper item-level link belongs in the child theme
(on the LL quote list).
CHANGES IN 2.16 (withdrawn)
• A site-wide .section-page_title banner was tried but affected
ALL interior pages (Solutions, Tools). Reverted.
CHANGES IN 2.17
• NEW §9: Sustainability page-title banner — same full-bleed
banner + centered headline, but scoped to .page-id-10 ONLY so
other interior pages are untouched. Reverses the theme's
.visually-hidden h1 (which uses !important on every property,
so the override must too — documented exception).
CHANGES IN 2.18 (per Hannah's review, June 15)
• §9: breadcrumbs hidden on the Sustainability page (awkward
between nav and banner)
• §9: Sustainable Practices campaign icon added above the
headline as a centered stack (white mark, via CSS background).
Using the existing campaign mark until 2026 branding is set.
CHANGES IN 2.19 (per Hannah, June 15)
• §7: fixed Solutions/interior intro paragraphs drifting to
center. The centered-band auto-margin now applies ONLY to
.text-center blocks; plain .block-text body copy is pinned
left even with the 72ch width cap.
CHANGES IN 2.20 (per Hannah, June 15)
• §7: removed the 72ch line-length cap entirely. Hannah wants
body copy to run the full width of the content area. Font-size
(18px) and line-height (1.65) reductions are kept; only the
max-width constraint is gone. The §7 centering/left-pin rules
are now no-ops (no width to center within) but left in place
harmlessly.
════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════
1. HERO
══════════════════════════════════════════════ */
/* Theme sets section padding via inline CSS variables — !important required */
.page-builder-section.section-homepage_hero {
padding-top: 0 !important;
padding-bottom: 0 !important;
--padding-top: 0px !important;
--padding-bottom: 0px !important;
}
.section-homepage_hero.section-homepage_hero .container {
max-width: 100%;
padding: 0;
}
.section-homepage_hero.section-homepage_hero .slide-item {
position: relative;
min-height: clamp(440px, 60vh, 600px);
}
/* Background image fills the slide */
.section-homepage_hero.section-homepage_hero .slide-item_bg,
.section-homepage_hero.section-homepage_hero .img-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.section-homepage_hero.section-homepage_hero .img-fluid {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Text container — pinned bottom-left */
.section-homepage_hero.section-homepage_hero .slide-item__text {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
height: 100%;
min-height: clamp(440px, 60vh, 600px);
max-width: min(750px, 100%);
/* 160px left inset on desktop, eases down to 24px on mobile */
padding: 0 clamp(24px, 5vw, 80px) clamp(36px, 7vh, 70px) clamp(24px, 8.5vw, 160px);
position: relative;
z-index: 20;
overflow: hidden;
text-align: left !important; /* overrides Bootstrap .text-center utility */
}
/* Gradient overlay behind the text */
.section-homepage_hero.section-homepage_hero .slide-item__text::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.6) 50%,
rgba(0,0,0,0.3) 80%,
rgba(0,0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
/* No text on the slide → no gradient. The overlay exists for text
legibility; image-only hero bands (e.g. the NICOR building photo
on the About page) display clean. The theme outputs an empty
on text-free slides, so we detect that. */
.section-homepage_hero.section-homepage_hero .slide-item__text:has(h1:empty)::before {
content: none;
}
.section-homepage_hero.section-homepage_hero .page-body.text-center {
text-align: left !important; /* overrides Bootstrap .text-center utility */
}
/* Headline — covers whichever heading level the builder outputs */
.section-homepage_hero.section-homepage_hero .page-body h1,
.section-homepage_hero.section-homepage_hero .page-body h2,
.section-homepage_hero.section-homepage_hero .page-body h3,
.section-homepage_hero.section-homepage_hero h1,
.section-homepage_hero.section-homepage_hero h2,
.section-homepage_hero.section-homepage_hero h3 {
font-size: clamp(34px, 5.5vw, 72px);
font-weight: 700;
line-height: 1.05;
padding-bottom: clamp(10px, 1.5vw, 16px);
border-bottom: 3px solid #0077C8;
display: inline-block;
margin-bottom: clamp(14px, 2vw, 22px);
color: #ffffff;
}
/* Body text */
.section-homepage_hero.section-homepage_hero .page-body.text-center p {
text-align: left !important; /* overrides Bootstrap .text-center utility */
font-size: clamp(16px, 1.8vw, 20px);
font-weight: 300;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin-bottom: 0;
}
/* Tagline — only when 2+ paragraphs exist */
.section-homepage_hero.section-homepage_hero .page-body.text-center p:first-of-type:not(:last-of-type) {
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 400;
line-height: 1.25;
color: #ffffff;
margin-bottom: 16px;
}
/* CTA button */
.section-homepage_hero.section-homepage_hero .slide-item__text a,
.section-homepage_hero.section-homepage_hero .slide-item__text .btn,
.section-homepage_hero.section-homepage_hero .slide-item__text button {
display: inline-block;
margin-top: clamp(18px, 3vw, 28px);
padding: 14px 32px;
border-radius: 0;
border: 2px solid #0077C8;
background: #0077C8;
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.section-homepage_hero.section-homepage_hero .slide-item__text a:hover,
.section-homepage_hero.section-homepage_hero .slide-item__text .btn:hover,
.section-homepage_hero.section-homepage_hero .slide-item__text button:hover {
background: #ffffff;
color: #0077C8;
border-color: #ffffff;
}
/* ══════════════════════════════════════════════
2. DEPARTMENTS — TRUST BAR / ICON COLUMNS
(base style for all .section-departments blocks:
trust bar, Tools & Resources, Our Values; the
industry tiles section overrides this with higher
specificity in §5)
══════════════════════════════════════════════ */
.section-departments.section-departments {
background: #ffffff;
padding: clamp(36px, 5vw, 60px) clamp(16px, 5vw, 80px);
}
/* Center the item row when it doesn't fill the width
(e.g. Our Values with only 3 items) */
.section-departments.section-departments .block-departments .row {
justify-content: center;
}
.section-departments.section-departments .block-departments__item {
padding: 16px clamp(12px, 2.5vw, 30px);
}
/* Icons — explicit fluid size; max-width matches so the theme's
img-fluid cap can't shrink them */
.section-departments.section-departments .block-departments__item-icon img,
.section-departments.section-departments .block-departments__item-icon svg,
.section-departments.section-departments .block-departments__item img,
.section-departments.section-departments .block-departments__item svg {
display: block;
width: clamp(110px, 12vw, 160px);
max-width: clamp(110px, 12vw, 160px);
height: auto;
margin: 0 0 20px 0; /* left-aligned with the text below */
}
.section-departments.section-departments .block-departments__item .block-departments__title,
.section-departments.section-departments .block-departments__item h3,
.section-departments.section-departments .block-departments__item h4 {
font-size: 17px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 10px;
color: #002837;
}
.section-departments.section-departments .block-departments__item p {
font-size: 15px;
line-height: 1.7;
color: #333333;
}
/* Intro sentence above the icon columns */
.section-departments.section-departments .block-text p {
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 600;
line-height: 1.5;
color: #002837;
margin-bottom: 0;
}
/* Bootstrap bg utility uses !important — must match it to override */
.section-departments.section-departments .block-text.bg-gray {
background-color: #ffffff !important;
}
/* ══════════════════════════════════════════════
3. FOOTER
══════════════════════════════════════════════ */
.footer.footer {
background-color: #002837;
}
.footer.footer .footer-top {
background-color: #002837;
}
.footer.footer .footer-bottom {
background-color: #001e2b;
}
.footer.footer,
.footer.footer p,
.footer.footer span,
.footer.footer li,
.footer.footer a {
color: #ffffff;
}
.footer.footer a:hover {
color: #0077C8;
}
.footer.footer h1,
.footer.footer h2,
.footer.footer h3,
.footer.footer h4,
.footer.footer h5 {
color: #0077C8;
}
/* ══════════════════════════════════════════════
4. HOMEPAGE SOLUTIONS — section shell,
headline band, icon tiles, spotlight blocks
══════════════════════════════════════════════ */
.section-homepage_solutions.section-homepage_solutions {
background: #ffffff;
padding: 0;
}
.section-homepage_solutions.section-homepage_solutions .bg {
display: none;
}
.section-homepage_solutions.section-homepage_solutions .container {
max-width: 100%;
padding: 0;
background-color: #002837;
}
/* Headline band */
.section-homepage_solutions.section-homepage_solutions .block-headline {
background-color: #002837;
padding-top: clamp(36px, 5vw, 60px);
}
.section-homepage_solutions.section-homepage_solutions .block-headline * {
color: #ffffff;
}
/* ── Icon tiles (block-solutions nav) ── */
.section-homepage_solutions.section-homepage_solutions .block-solutions {
background-color: #002837;
padding: 0;
margin: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
padding: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li {
padding: 0;
margin: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item {
border-radius: 0;
/* fluid square tiles: 220px on desktop, shrink gracefully below */
width: clamp(140px, 17vw, 220px);
height: auto;
aspect-ratio: 1 / 1;
background-color: #002837;
border: 2px solid #002837;
color: #ffffff;
padding: clamp(12px, 1.6vw, 20px);
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item:hover {
background-color: #ffffff;
border-color: #002837;
color: #002837;
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item img,
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item svg {
filter: brightness(0) invert(1);
}
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item:hover img,
.section-homepage_solutions.section-homepage_solutions .block-solutions .nav > li a.nav-item:hover svg {
filter: brightness(0);
}
/* ── Spotlight blocks ── */
.section-homepage_solutions.section-homepage_solutions .block-content {
padding: 0;
margin: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item {
background-color: #000000;
border-radius: 0;
border: none;
margin: 0;
overflow: hidden;
min-height: 500px;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item .row {
margin: 0;
width: 100%;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item [class*="col-"] {
padding: 0;
}
/* Text column */
.section-homepage_solutions.section-homepage_solutions .block-content__item .col-lg-6:first-child {
/* 120px left inset on desktop, eases down on smaller screens */
padding: clamp(40px, 5vw, 60px)
clamp(24px, 5vw, 60px)
clamp(40px, 5vw, 60px)
clamp(24px, 8vw, 120px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* Eyebrow label */
.section-homepage_solutions.section-homepage_solutions .block-content__item h4,
.section-homepage_solutions.section-homepage_solutions .block-content__item .block-eyebrow {
color: #0077C8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 12px;
}
/* Headline */
.section-homepage_solutions.section-homepage_solutions .block-content__item h2,
.section-homepage_solutions.section-homepage_solutions .block-content__item h3 {
color: #ffffff;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
}
/* Body text */
.section-homepage_solutions.section-homepage_solutions .block-content__item p {
color: rgba(255,255,255,0.85);
font-size: 16px;
line-height: 1.7;
margin-bottom: 30px;
}
/* CTA button */
.section-homepage_solutions.section-homepage_solutions .block-content__item a {
display: inline-block;
padding: 14px 36px;
border: 2px solid #ffffff;
background: transparent;
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border-radius: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item a:hover {
background: #ffffff;
color: #000000;
}
.section-homepage_solutions.section-homepage_solutions a.button-inline .button-txt {
margin-right: 8px;
}
/* Image column — full bleed */
.section-homepage_solutions.section-homepage_solutions .block-content__item-image,
.section-homepage_solutions.section-homepage_solutions .block-content__item .img-bg {
position: relative;
height: 100%;
min-height: 500px;
overflow: hidden;
border-radius: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item .img-fluid {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
/* ── Spotlight gradient fades ──
First block (Sustainable Practices): image left, text right
Last block (Data Center): image right, text left */
/* Inner edge fades (toward the text column) */
.section-homepage_solutions.section-homepage_solutions .block-content__item:first-child .block-content__item-image::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: linear-gradient(to left, #000000, transparent);
z-index: 2;
pointer-events: none;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item:last-child .block-content__item-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 100%;
background: linear-gradient(to right, #000000, transparent);
z-index: 2;
pointer-events: none;
}
/* Outer edge fades */
.section-homepage_solutions.section-homepage_solutions .block-content__item:first-child .block-content__item-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15%;
height: 100%;
background: linear-gradient(to right, #000000, transparent);
z-index: 2;
pointer-events: none;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item:last-child .block-content__item-image::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 15%;
height: 100%;
background: linear-gradient(to left, #000000, transparent);
z-index: 2;
pointer-events: none;
}
/* ══════════════════════════════════════════════
5. INDUSTRY TILES
(.section-departments immediately after Solutions —
triple-class beats the §2 trust-bar styles cleanly)
BUILDER REQUIREMENTS:
• Each tile image = the PLAIN library photo (no baked icon
or overlay) set to FULL SIZE — the auto-generated -300x300
thumbnails are server-side center-cropped
• Icons float via CSS below — order matters (see §5b)
══════════════════════════════════════════════ */
.section-featured_products + .section-departments.section-departments.section-departments {
background-color: #000000;
padding: 0 0 40px 0;
margin-top: 0;
}
.section-featured_products + .section-departments.section-departments.section-departments .container {
background-color: #000000;
max-width: 100%;
padding: 0;
margin: 0;
}
/* Section heading ("Lighting Systems by Industry") */
.section-featured_products + .section-departments.section-departments.section-departments .block-text {
display: block;
padding: 40px 16px 20px;
text-align: center;
}
.section-featured_products + .section-departments.section-departments.section-departments .block-text * {
color: #ffffff;
}
/* Bootstrap bg utility uses !important — must match it to override */
.section-featured_products + .section-departments.section-departments.section-departments .block-text.bg-gray {
background-color: #000000 !important;
}
/* Grid — 4 across on desktop; steps down in the media queries below */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 0;
justify-content: stretch;
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div {
padding: 0;
width: 100%;
max-width: 100%;
}
/* Tile */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item {
background-color: #000000;
padding: 0;
margin: 0;
width: 100%;
position: relative;
}
/* Tile image — plain photo, proportional crop */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item-icon {
width: 100%;
padding: 0;
margin: 0;
position: relative;
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item-icon img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
display: block;
max-width: 100%;
}
/* Gradient shadow over the photo (replaces baked-in overlay) */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item-icon::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0.25) 45%,
rgba(0,0,0,0) 75%);
z-index: 1;
pointer-events: none;
}
/* Floating icon — pinned bottom-left of the tile, crop-proof.
Sized as a % of the TILE (not the viewport) so it stays visually
proportional whether the grid is 4, 2, or 1 columns wide */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item-icon::after {
content: '';
position: absolute;
left: 16px;
bottom: 16px;
width: clamp(48px, 16%, 96px);
aspect-ratio: 1 / 1;
height: auto;
background-repeat: no-repeat;
background-size: contain;
background-position: left bottom;
filter: brightness(0) invert(1); /* force icons white — scoped to industry tiles only */
z-index: 2;
pointer-events: none;
}
/* Tile text */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item h3,
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item h4,
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item p,
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item span {
color: #ffffff;
padding-left: 12px;
padding-right: 12px;
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item h3,
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item h4 {
padding-top: 12px;
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item p {
padding-bottom: 20px;
}
/* Whole tile clickable — activates once a link is set on the tile
in the builder (stretched-link pattern) */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item a::after {
content: '';
position: absolute;
inset: 0;
z-index: 3;
}
/* Tile links: visible hover/focus on black (theme default vanished) */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item a:hover,
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item a:focus {
color: #5AB1F0;
text-decoration: underline;
}
/* ══════════════════════════════════════════════
5b. INDUSTRY TILE ICONS — per-tile mapping
ORDER FOLLOWS THE BUILDER. If tiles are reordered
in Vantam, this list must be updated to match:
1 Data Center 2 Industrial 3 Outdoor 4 Emergency
5 Commercial 6 Residential 7 Multifamily 8 Lighting Controls
══════════════════════════════════════════════ */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(1) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Data-Center.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(2) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Industrial.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(3) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Outdoor.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(4) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Emergency.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(5) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Commercial.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(6) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Residential.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(7) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Industry-Multi-Family.svg');
}
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row > div:nth-child(8) .block-departments__item-icon::after {
background-image: url('/wp-content/uploads/industry-tiles/industry-tiles-components/Lighting-Controls.svg');
}
/* ══════════════════════════════════════════════
6. RESPONSIVE BREAKPOINTS
Bootstrap defaults assumed (theme uses col-sm/lg/xl
classes) — confirm exact values with Lounge Lizard.
══════════════════════════════════════════════ */
/* ── Below 1200px — industry tiles: 4 cols getting cramped → 2 ── */
@media (max-width: 1199.98px) {
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Below 992px — spotlight columns stack (Bootstrap lg) ── */
@media (max-width: 991.98px) {
/* Stacked spotlight: give the image its own height */
.section-homepage_solutions.section-homepage_solutions .block-content__item {
min-height: 0;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item-image,
.section-homepage_solutions.section-homepage_solutions .block-content__item .img-bg {
min-height: 320px;
}
/* Horizontal text-to-image fades don't make sense stacked —
swap to a single bottom-up fade so image still melts into the text block */
.section-homepage_solutions.section-homepage_solutions .block-content__item .block-content__item-image::before {
display: none;
}
.section-homepage_solutions.section-homepage_solutions .block-content__item:first-child .block-content__item-image::after,
.section-homepage_solutions.section-homepage_solutions .block-content__item:last-child .block-content__item-image::after {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 40%;
background: linear-gradient(to top, #000000, transparent);
}
/* Hero: gradient reads better with a stronger base when text wraps more */
.section-homepage_hero.section-homepage_hero .slide-item__text::before {
background: linear-gradient(to right,
rgba(0,0,0,0.85) 0%,
rgba(0,0,0,0.65) 60%,
rgba(0,0,0,0.45) 100%);
}
}
/* ── Below 768px — trust bar tightens (Bootstrap md) ── */
@media (max-width: 767.98px) {
.section-departments.section-departments {
padding: 32px 16px;
}
.section-departments.section-departments .block-departments__item-icon img,
.section-departments.section-departments .block-departments__item-icon svg,
.section-departments.section-departments .block-departments__item img,
.section-departments.section-departments .block-departments__item svg {
width: clamp(90px, 22vw, 110px);
max-width: clamp(90px, 22vw, 110px);
}
}
/* ── Below 576px — single column tiles (Bootstrap sm) ── */
@media (max-width: 575.98px) {
.section-featured_products + .section-departments.section-departments.section-departments .block-departments .row {
grid-template-columns: 1fr;
}
/* Single column: a slightly shorter crop keeps tiles from
dominating the viewport. Icon scales with the tile automatically. */
.section-featured_products + .section-departments.section-departments.section-departments .block-departments__item-icon img {
aspect-ratio: 16 / 10;
}
}
/* ══════════════════════════════════════════════
7. SITE-WIDE TYPOGRAPHY SCALE
Steps the theme's oversized body copy down.
Deliberately low specificity: sections with
explicit sizes above (hero, spotlights, tiles)
are unaffected. Belongs in the child theme's
base styles long-term — on the LL quote list.
══════════════════════════════════════════════ */
.wrapper .page-body p,
.wrapper .container p {
font-size: 18px;
line-height: 1.65;
/* line-length cap removed per Hannah (June 15) — she wants body
copy to run the full width of the content area */
}
/* Centered bands: keep the capped text box centered, not left-pinned.
ONLY applies to elements the theme genuinely centers (.text-center).
Plain .block-text paragraphs on interior pages (e.g. Solutions/IMS
intros) are left-aligned body copy and must NOT be auto-centered —
that made them drift to the middle of the column (Hannah, June 15). */
.wrapper .text-center p {
margin-left: auto;
margin-right: auto;
}
/* Interior body copy stays pinned left even with the 72ch cap */
.wrapper .block-text:not(.text-center) p {
margin-left: 0;
margin-right: 0;
}
/* Band headings: display as typed, not forced uppercase
(matches Ashlyn's mockups — title-case section headings,
uppercase reserved for small eyebrow labels) */
.wrapper .block-text h2 {
text-transform: none;
}
/* Intro/lede band lines — one step above body copy, no more */
.wrapper .block-text p {
font-size: clamp(17px, 1.8vw, 20px);
}
/* ══════════════════════════════════════════════
8. TOOLS & RESOURCES — whole-tile click
The "See More" link lives inside each item's .
This stretches it across the whole item so the
icon, heading and text are all clickable.
SCOPING: keys off items that CONTAIN a link via
:has(a). The trust bar items have no links so are
untouched. The industry tiles are excluded explicitly
(they have their own setup in §5).
⚠ INTERIM / FRAGILE: the proper fix is an item-level
link field in the child theme — on the LL quote list.
══════════════════════════════════════════════ */
/* Make the linked item the positioning context, but NOT the
industry tiles (those are the departments section right after
featured products) */
.section-departments .block-departments__item:has(a):not(
.section-featured_products + .section-departments .block-departments__item
) {
position: relative;
}
/* Stretch the existing link across the whole item */
.section-departments .block-departments__item:has(a):not(
.section-featured_products + .section-departments .block-departments__item
) a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
/* Keep the visible "See More" text above the stretched layer so it
still reads as the explicit link, and keep the icon interactive */
.section-departments .block-departments__item:has(a):not(
.section-featured_products + .section-departments .block-departments__item
) .block-departments__item-icon,
.section-departments .block-departments__item:has(a):not(
.section-featured_products + .section-departments .block-departments__item
) .block-departments__item-text {
position: relative;
z-index: 0;
}
/* ══════════════════════════════════════════════
9. SUSTAINABILITY PAGE-TITLE BANNER
Scoped to .page-id-10 ONLY so other interior pages
that share .section-page_title (Solutions, Tools)
are completely unaffected.
Full-bleed image, headline centered over it, breadcrumb
above. Reverses the theme's .visually-hidden h1.
!important USED THROUGHOUT THIS SECTION ON PURPOSE:
the theme's .visually-hidden utility sets width/height/
clip/position with !important on every line, so the
headline can only be un-hidden by matching it. This is
the documented "Bootstrap/utility !important" exception.
══════════════════════════════════════════════ */
/* Full bleed */
.page-id-10 .section-page_title .container {
max-width: 100%;
padding: 0;
position: relative;
}
/* Breadcrumb: HIDDEN on this page per Hannah — looked awkward
sandwiched between the nav menu and the banner */
.page-id-10 .section-page_title .block-breadcrumbs {
display: none;
}
/* Image band */
.page-id-10 .section-page_title .block-image {
position: relative;
width: 100%;
height: clamp(240px, 32vw, 420px);
overflow: hidden;
margin: 0;
}
.page-id-10 .section-page_title .block-image .img-bg,
.page-id-10 .section-page_title .block-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Gradient for legibility */
.page-id-10 .section-page_title .block-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,0.55) 0%,
rgba(0,0,0,0.3) 50%,
rgba(0,0,0,0.4) 100%);
z-index: 1;
pointer-events: none;
}
/* Un-hide the headline and center it over the banner.
Every !important here is reversing the theme's
.visually-hidden utility, which uses !important on all
of these same properties. */
.page-id-10 .section-page_title h1.visually-hidden {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
height: auto !important;
max-width: 900px !important;
padding: 0 clamp(16px, 5vw, 40px) !important;
margin: 0 !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
z-index: 2 !important;
text-align: center !important;
color: #ffffff !important;
font-size: clamp(34px, 5vw, 60px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
}
/* Campaign icon above the headline (centered stack).
Placed as a background on the h1's ::before so it rides with the
centered text. Per Hannah, use the existing Sustainable Practices
mark until the 2026 branding is finalized. */
.page-id-10 .section-page_title h1.visually-hidden::before {
content: '' !important;
display: block !important;
width: clamp(64px, 8vw, 96px) !important;
height: clamp(64px, 8vw, 96px) !important;
margin: 0 auto 16px auto !important;
background-image: url('/wp-content/uploads/Icons/Sustainability-Logo_Icon-Only_WH.png') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
}