/* Start custom CSS for html, class: .elementor-element-fe860df *//* =========================================================
NEW VISION COMMERCIAL
CLIENTS PAGE
HERO IMAGE UPDATED
========================================================= */
/* =========================================================
ROOT
========================================================= */
:root {
--ink:#0a0a0b;
--charcoal:#151517;
--panel:#1c1c1f;
--panel-2:#232326;
--line:#2a2a2e;
--line-soft:#232327;
--volt:#c6ff3d;
--volt-dim:#9fd92e;
--volt-soft:rgba(198,255,61,.10);
--paper:#f5f5f2;
--grey:#9a9a9f;
--grey-dim:#6b6b70;
--radius:2px;
--ease:cubic-bezier(.2,.7,.2,1);
}
/* =========================================================
RESET
========================================================= */
* {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
margin:0;
padding:0;
background:var(--ink);
color:var(--paper);
font-family:'Archivo', sans-serif;
font-size:16px;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection {
background:var(--volt);
color:var(--ink);
}
img {
max-width:100%;
}
a {
color:inherit;
text-decoration:none;
}
/* =========================================================
TYPOGRAPHY
========================================================= */
.display {
font-family:'Anton', sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:.01em;
line-height:.95;
}
.mono {
font-family:'JetBrains Mono', monospace;
}
.text-grey {
color:var(--grey);
}
.text-grey-dim {
color:var(--grey-dim);
}
.text-paper {
color:var(--paper);
}
/* =========================================================
BUTTON
========================================================= */
.btn-volt {
background:var(--volt);
color:var(--ink) !important;
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
padding:15px 27px;
border-radius:var(--radius);
border:1px solid var(--volt);
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
white-space:nowrap;
transition:
background .2s ease,
color .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.btn-volt:hover {
background:transparent;
color:var(--volt) !important;
transform:translateY(-2px);
box-shadow:
0 8px 25px rgba(0,0,0,.20);
}
/* =========================================================
HERO
NEW 414 W ARBOR VITAE IMAGE
========================================================= */
.subpage-hero {
position:relative;
min-height:560px;
display:flex;
align-items:center;
justify-content:center;
background-image:url(
'https://8gy.cd3.mytemp.website/wp-content/uploads/2026/10/414-W-Arbor-Vitae-St-48-scaled.jpg'
);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
padding:120px 0 110px;
overflow:hidden;
isolation:isolate;
}
/* Dark overlay */
.subpage-hero::before {
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(10,10,11,.70) 0%,
rgba(10,10,11,.38) 42%,
rgba(10,10,11,.88) 100%
);
z-index:1;
}
/* Additional cinematic vignette */
.subpage-hero::after {
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
transparent 15%,
rgba(0,0,0,.25) 70%,
rgba(0,0,0,.48) 100%
);
z-index:1;
pointer-events:none;
}
/* Hero content */
.hero-content {
position:relative;
z-index:2;
text-align:center;
padding-top:20px;
}
/* Small heading */
.hero-label {
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
letter-spacing:.20em;
text-transform:uppercase;
color:var(--volt);
margin-bottom:18px;
text-shadow:
0 2px 12px rgba(0,0,0,.55);
}
/* Main title */
.hero-title {
margin:0;
color:var(--paper);
font-size:clamp(
4rem,
8vw,
6.5rem
);
letter-spacing:.015em;
text-shadow:
0 6px 25px rgba(0,0,0,.70),
0 2px 5px rgba(0,0,0,.55);
}
.hero-title span {
color:var(--volt);
}
/* =========================================================
CLIENT SECTIONS
========================================================= */
.clients-section {
padding:105px 0;
border-bottom:1px solid var(--line);
background:var(--ink);
}
.clients-section.landlords-section {
background:var(--charcoal);
}
.clients-main-row {
--bs-gutter-x:5rem;
--bs-gutter-y:4rem;
}
/* =========================================================
SECTION LABEL
========================================================= */
.section-label {
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--grey-dim);
margin-bottom:14px;
}
/* =========================================================
SECTION TITLE
========================================================= */
.section-title {
color:#ffffff;
font-size:clamp(
3.2rem,
5vw,
4.5rem
);
margin:0;
letter-spacing:.01em;
}
/* =========================================================
ACCENT
========================================================= */
.section-accent {
width:55px;
height:4px;
background:var(--volt);
margin:25px 0 27px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.section-description {
color:var(--grey);
font-family:'Archivo', sans-serif;
font-size:17px;
line-height:1.72;
max-width:620px;
margin:0 0 29px;
}
/* =========================================================
LOGO GRID
========================================================= */
.logo-grid {
display:grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap:16px;
}
.logo-grid.landlords-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
/* =========================================================
LOGO CARD
========================================================= */
.client-logo-card {
position:relative;
height:105px;
padding:17px 20px;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
border-radius:3px;
border:1px solid rgba(10,10,11,.08);
overflow:hidden;
box-shadow:
0 5px 18px rgba(0,0,0,.28);
transition:
transform .3s var(--ease),
box-shadow .3s ease,
border-color .3s ease;
}
.client-logo-card:hover {
transform:translateY(-5px);
box-shadow:
0 14px 32px rgba(198,255,61,.16);
border-color:var(--volt);
}
.client-logo-card img {
display:block;
max-width:100%;
max-height:62px;
width:auto;
height:auto;
object-fit:contain;
/* Original brand colors */
filter:none;
opacity:.78;
transition:
transform .35s var(--ease),
filter .35s ease,
opacity .35s ease;
}
.client-logo-card:hover img {
transform:scale(1.045);
filter:none;
opacity:1;
}
/* Keep every client card consistent */
.client-logo-card.client-logo-dark {
background:#ffffff;
border-color:rgba(10,10,11,.08);
}
.client-logo-card.client-logo-dark:hover {
border-color:var(--volt);
}
/* =========================================================
OWNER CTA
========================================================= */
.newsletter-section {
padding:110px 0;
background:
linear-gradient(
180deg,
var(--charcoal) 0%,
var(--ink) 100%
);
text-align:center;
border-bottom:1px solid var(--line);
}
.newsletter-title {
color:#ffffff;
font-size:clamp(
3rem,
5vw,
4.5rem
);
margin:0 0 18px;
}
.newsletter-description {
color:var(--grey);
font-family:'Archivo', sans-serif;
font-size:17px;
line-height:1.75;
max-width:720px;
margin:0 auto 32px;
}
/* =========================================================
CTA BUTTONS
========================================================= */
.cta-buttons {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:12px;
}
/* =========================================================
PHONE BUTTON
========================================================= */
.phone-button {
background:transparent;
color:var(--paper);
font-family:'JetBrains Mono', monospace;
font-size:12px;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
padding:15px 28px;
border:1px solid rgba(255,255,255,.22);
border-radius:var(--radius);
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
line-height:1;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
transform .2s ease;
}
.phone-button:hover {
color:var(--volt);
border-color:var(--volt);
background:rgba(198,255,61,.04);
transform:translateY(-2px);
}
/* =========================================================
ACCESSIBILITY BUTTON
========================================================= */
.a11y-btn {
position:fixed;
right:22px;
bottom:22px;
z-index:1200;
width:52px;
height:52px;
border-radius:50%;
background:var(--volt);
border:none;
display:flex;
align-items:center;
justify-content:center;
box-shadow:
0 8px 24px rgba(0,0,0,.4);
cursor:pointer;
transition:transform .25s ease;
}
.a11y-btn:hover {
transform:scale(1.08);
}
.a11y-btn img {
width:24px;
height:24px;
}
.a11y-btn img.spin {
animation:
spin 6s linear infinite;
}
@keyframes spin {
to {
transform:rotate(360deg);
}
}
/* =========================================================
ACCESSIBILITY PANEL
========================================================= */
.a11y-panel {
position:fixed;
right:22px;
bottom:86px;
z-index:1200;
width:250px;
background:var(--charcoal);
border:1px solid var(--line);
padding:20px;
transform:
translateY(12px)
scale(.96);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.25s ease;
box-shadow:
0 20px 50px rgba(0,0,0,.35);
}
.a11y-panel.open {
transform:
translateY(0)
scale(1);
opacity:1;
visibility:visible;
pointer-events:auto;
}
.a11y-panel h5 {
font-family:'JetBrains Mono', monospace;
font-size:11px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--volt);
margin:0 0 14px;
}
.a11y-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:10px 0;
border-bottom:1px solid var(--line);
font-family:'Archivo', sans-serif;
font-size:14px;
color:var(--grey);
}
.a11y-row:last-child {
border-bottom:none;
}
.a11y-toggle {
width:36px;
height:20px;
background:var(--line);
border-radius:20px;
position:relative;
cursor:pointer;
border:none;
flex-shrink:0;
padding:0;
}
.a11y-toggle::after {
content:"";
position:absolute;
top:2px;
left:2px;
width:16px;
height:16px;
border-radius:50%;
background:var(--paper);
transition:.2s ease;
}
.a11y-toggle.on {
background:var(--volt);
}
.a11y-toggle.on::after {
transform:translateX(16px);
background:var(--ink);
}
/* =========================================================
HIGH CONTRAST
========================================================= */
body.high-contrast {
background:#000;
}
body.high-contrast .clients-section,
body.high-contrast .landlords-section,
body.high-contrast .newsletter-section {
background:#000;
}
body.high-contrast .display,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a {
color:#ffffff !important;
}
body.high-contrast .section-accent {
background:var(--volt);
}
body.high-contrast .client-logo-card {
border-color:#ffffff;
}
/* =========================================================
LARGER TEXT
========================================================= */
body.larger-text {
font-size:18px;
}
body.larger-text .section-description,
body.larger-text .newsletter-description {
font-size:18px;
}
/* =========================================================
REDUCE MOTION
========================================================= */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:991.98px) {
body {
font-size:16px;
}
.subpage-hero {
min-height:480px;
padding:95px 0 80px;
background-position:center center;
}
.hero-title {
font-size:clamp(
3.5rem,
9vw,
5.5rem
);
}
.clients-section {
padding:80px 0;
}
.clients-main-row {
--bs-gutter-x:2rem;
--bs-gutter-y:3.5rem;
}
.section-title {
font-size:clamp(
3rem,
7vw,
4rem
);
}
.logo-grid {
gap:14px;
}
.client-logo-card {
height:100px;
}
.newsletter-section {
padding:80px 0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767.98px) {
body {
font-size:15.5px;
}
.subpage-hero {
min-height:400px;
padding:85px 20px 65px;
background-position:center center;
}
.hero-label {
font-size:10px;
letter-spacing:.17em;
margin-bottom:14px;
}
.hero-title {
font-size:clamp(
3rem,
13vw,
4.5rem
);
line-height:.94;
}
.clients-section {
padding:65px 0;
}
.clients-main-row {
--bs-gutter-y:3rem;
}
.section-label {
font-size:10px;
letter-spacing:.15em;
margin-bottom:12px;
}
.section-title {
font-size:clamp(
2.7rem,
11vw,
3.6rem
);
}
.section-accent {
width:45px;
height:3px;
margin:21px 0 23px;
}
.section-description {
font-size:16px;
line-height:1.7;
margin-bottom:26px;
}
.logo-grid,
.logo-grid.landlords-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:12px;
}
.client-logo-card {
height:95px;
padding:14px;
}
.client-logo-card img {
max-height:55px;
}
.newsletter-section {
padding:65px 20px;
}
.newsletter-title {
font-size:clamp(
2.7rem,
11vw,
3.6rem
);
line-height:.96;
}
.newsletter-description {
font-size:16px;
line-height:1.7;
}
.cta-buttons {
flex-direction:column;
width:100%;
}
.cta-buttons .btn-volt,
.cta-buttons .phone-button {
width:100%;
max-width:360px;
}
.a11y-btn {
right:16px;
bottom:16px;
width:48px;
height:48px;
}
.a11y-panel {
right:16px;
bottom:76px;
width:235px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:420px) {
.subpage-hero {
min-height:350px;
background-position:center center;
}
.hero-title {
font-size:3rem;
}
.section-title {
font-size:2.55rem;
}
.newsletter-title {
font-size:2.5rem;
}
.client-logo-card {
height:90px;
padding:12px;
}
.client-logo-card img {
max-height:50px;
}
.btn-volt,
.phone-button {
width:100%;
padding:15px 18px;
}
}/* End custom CSS */