/* Start custom CSS for html, class: .elementor-element-cd3593b *//* =========================================================
NEW VISION COMMERCIAL
ACTIVE LISTINGS
HOMEPAGE TYPOGRAPHY SYSTEM
========================================================= */
/* =========================================================
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
========================================================= */
*,
*::before,
*::after {
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);
}
a {
color:inherit;
text-decoration:none;
}
img {
max-width:100%;
}
button {
font-family:inherit;
}
/* =========================================================
HOMEPAGE TYPOGRAPHY
========================================================= */
.display {
font-family:'Anton',sans-serif;
font-weight:400;
text-transform:uppercase;
letter-spacing:.01em;
line-height:.92;
}
.mono {
font-family:'JetBrains Mono',monospace;
letter-spacing:.04em;
}
.eyebrow {
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--volt);
display:flex;
align-items:center;
gap:10px;
}
.eyebrow::before {
content:"";
width:22px;
height:1px;
background:var(--volt);
display:inline-block;
flex-shrink:0;
}
/* =========================================================
CONTAINER
========================================================= */
.container-xl {
width:100%;
max-width:1320px;
margin-left:auto;
margin-right:auto;
padding-left:clamp(20px,4vw,56px);
padding-right:clamp(20px,4vw,56px);
}
/* =========================================================
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;
transition:
background .2s ease,
color .2s ease,
transform .2s ease,
box-shadow .2s ease;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
white-space:nowrap;
}
.btn-volt:hover {
background:transparent;
color:var(--volt) !important;
transform:translateY(-2px);
box-shadow:
0 8px 25px rgba(0,0,0,.20);
}
/* =========================================================
HERO
NEW VISION COMMERCIAL — ACTIVE LISTINGS
========================================================= */
.listing-hero {
position:relative;
min-height:550px;
height:clamp(550px,68vh,720px);
display:flex;
align-items:center;
justify-content:center;
padding:120px 0 100px;
background:#0a0a0b;
text-align:center;
overflow:hidden;
isolation:isolate;
}
.listing-hero img.bg {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
opacity:.72;
z-index:-3;
transform:scale(1.02);
transition:
transform 1.2s cubic-bezier(.2,.7,.2,1),
opacity .4s ease;
}
.listing-hero:hover img.bg {
transform:scale(1.045);
}
.listing-hero-overlay {
position:absolute;
inset:0;
z-index:-2;
background:
linear-gradient(
180deg,
rgba(10,10,11,.30) 0%,
rgba(10,10,11,.38) 32%,
rgba(10,10,11,.66) 65%,
rgba(10,10,11,.96) 100%
);
}
.listing-hero-overlay::after {
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at center,
transparent 12%,
rgba(0,0,0,.28) 100%
);
pointer-events:none;
}
.listing-hero::after {
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:64px 64px;
mix-blend-mode:overlay;
opacity:.45;
}
.hero-content {
position:relative;
z-index:2;
width:100%;
max-width:900px;
padding:40px 25px;
margin:0 auto;
}
.hero-eyebrow {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.20em;
text-transform:uppercase;
color:var(--volt);
margin-bottom:18px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content:"";
width:30px;
height:1px;
background:var(--volt);
display:block;
flex-shrink:0;
}
.listing-hero h1 {
margin:0;
color:var(--paper);
font-size:clamp(
4rem,
8vw,
6.5rem
);
letter-spacing:.01em;
line-height:.92;
text-shadow:
0 8px 28px rgba(0,0,0,.60),
0 2px 8px rgba(0,0,0,.35);
}
.listing-hero h1 em {
color:var(--volt);
font-style:normal;
}
.hero-description {
max-width:650px;
margin:24px auto 0;
color:rgba(245,245,242,.88);
font-family:'Archivo',sans-serif;
font-size:17px;
line-height:1.7;
text-shadow:
0 3px 14px rgba(0,0,0,.55);
}
.hero-button {
margin-top:4px;
}
/* =========================================================
HERO RESPONSIVE
========================================================= */
@media (max-width:991.98px) {
.listing-hero {
min-height:500px;
height:62vh;
padding:100px 0 80px;
}
.listing-hero h1 {
font-size:clamp(
3.7rem,
9vw,
5.5rem
);
}
.hero-description {
max-width:600px;
}
}
@media (max-width:767.98px) {
.listing-hero {
min-height:470px;
height:62vh;
padding:90px 20px 70px;
}
.listing-hero img.bg {
object-position:center center;
opacity:.66;
transform:scale(1.04);
}
.listing-hero:hover img.bg {
transform:scale(1.04);
}
.listing-hero-overlay {
background:
linear-gradient(
180deg,
rgba(10,10,11,.40) 0%,
rgba(10,10,11,.54) 42%,
rgba(10,10,11,.96) 100%
);
}
.hero-content {
padding:30px 20px;
}
.hero-eyebrow {
font-size:10px;
letter-spacing:.16em;
gap:9px;
margin-bottom:14px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
width:18px;
}
.listing-hero h1 {
font-size:clamp(
3.1rem,
13vw,
4.5rem
);
line-height:.94;
}
.hero-description {
max-width:92%;
font-size:16px;
line-height:1.65;
margin-top:18px;
}
.hero-button {
width:100%;
max-width:320px;
}
}
@media (max-width:420px) {
.listing-hero {
min-height:440px;
}
.listing-hero h1 {
font-size:3rem;
}
.hero-description {
font-size:14px;
}
}
/* =========================================================
LISTINGS SECTION
========================================================= */
.listings-section {
background:var(--ink);
color:var(--paper);
padding:100px 0;
border-bottom:1px solid var(--line);
}
/* =========================================================
LISTINGS HEADING
========================================================= */
.listings-heading {
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:30px;
margin-bottom:38px;
}
.listings-title {
font-size:clamp(
3rem,
5vw,
4.5rem
);
color:var(--paper);
margin:14px 0 0;
}
.listing-count {
color:var(--grey-dim);
font-size:11px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
white-space:nowrap;
padding-bottom:8px;
}
.listing-count span {
color:var(--volt);
font-size:16px;
}
/* =========================================================
FILTER BAR
========================================================= */
.filter-bar {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:38px;
padding-bottom:28px;
border-bottom:1px solid var(--line);
}
.filter-btn {
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:600;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--grey);
border:1px solid var(--line);
background:transparent;
padding:11px 18px;
cursor:pointer;
transition:
border-color .2s ease,
color .2s ease,
background .2s ease,
transform .2s ease;
border-radius:var(--radius);
}
.filter-btn:hover {
border-color:var(--volt);
color:var(--volt);
transform:translateY(-1px);
}
.filter-btn.active {
border-color:var(--volt);
color:var(--ink);
background:var(--volt);
}
/* =========================================================
LISTING CARD
========================================================= */
.listing-card {
position:relative;
background:var(--charcoal);
border:1px solid var(--line);
overflow:hidden;
height:100%;
transition:
transform .35s var(--ease),
border-color .35s ease,
box-shadow .35s ease;
display:flex;
flex-direction:column;
color:var(--paper);
}
.listing-card:hover {
transform:translateY(-6px);
border-color:var(--volt);
box-shadow:
0 18px 40px rgba(0,0,0,.30);
}
/* =========================================================
LISTING IMAGE
========================================================= */
.listing-img-wrap {
position:relative;
aspect-ratio:16 / 11;
overflow:hidden;
background:var(--panel);
}
.listing-img-wrap img {
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:
transform .7s var(--ease);
}
.listing-card:hover .listing-img-wrap img {
transform:scale(1.06);
}
/* =========================================================
BADGES
========================================================= */
.badge-deal {
position:absolute;
top:14px;
left:14px;
background:var(--volt);
color:var(--ink);
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:700;
letter-spacing:.10em;
text-transform:uppercase;
padding:7px 12px;
z-index:3;
}
.badge-type {
position:absolute;
top:14px;
right:14px;
background:rgba(10,10,11,.78);
color:var(--paper);
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:500;
letter-spacing:.08em;
text-transform:uppercase;
padding:7px 10px;
z-index:3;
border:1px solid rgba(255,255,255,.16);
}
/* =========================================================
LISTING BODY
========================================================= */
.listing-body {
padding:25px;
display:flex;
flex-direction:column;
flex:1;
}
.listing-location-label {
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--volt);
margin-bottom:10px;
}
.listing-title {
font-family:'Anton',sans-serif;
font-weight:400;
font-size:clamp(
1.7rem,
2.2vw,
2.05rem
);
line-height:1;
text-transform:uppercase;
letter-spacing:.01em;
margin:0 0 6px;
}
.listing-title a {
color:var(--paper);
transition:color .2s ease;
}
.listing-title a:hover {
color:var(--volt);
}
.addr {
color:var(--grey);
font-family:'Archivo',sans-serif;
font-size:15px;
line-height:1.5;
margin-bottom:17px;
}
/* =========================================================
SQUARE FOOTAGE
========================================================= */
.listing-sf {
font-family:'JetBrains Mono',monospace;
font-size:11px;
color:var(--volt);
letter-spacing:.04em;
margin-bottom:15px;
display:flex;
align-items:center;
gap:8px;
line-height:1.5;
}
.listing-sf strong {
color:var(--paper);
font-weight:500;
}
/* =========================================================
FEATURE CHIPS
========================================================= */
.listing-features {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:20px;
}
.listing-feat-chip {
font-family:'JetBrains Mono',monospace;
font-size:9px;
font-weight:500;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--grey);
border:1px solid var(--line);
padding:6px 10px;
border-radius:20px;
line-height:1.2;
}
/* =========================================================
LISTING META
========================================================= */
.listing-meta {
margin-top:auto;
border-top:1px solid var(--line);
padding-top:15px;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
}
.listing-meta .price {
font-family:'JetBrains Mono',monospace;
font-size:10px;
color:var(--grey-dim);
letter-spacing:.05em;
text-transform:uppercase;
}
.listing-meta .price strong {
color:var(--paper);
font-weight:600;
}
/* =========================================================
LISTING BUTTON
========================================================= */
.listing-btn {
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:600;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--grey);
border:none;
background:transparent;
cursor:pointer;
transition:
color .2s ease,
background .2s ease,
border-color .2s ease,
transform .2s ease;
padding:0;
}
.listing-btn:hover {
color:var(--volt);
}
.listing-btn.primary {
background:var(--volt);
color:var(--ink) !important;
padding:13px 20px;
border:1px solid var(--volt);
margin-top:17px;
width:100%;
justify-content:center;
}
.listing-btn.primary:hover {
background:transparent;
color:var(--volt) !important;
transform:translateY(-2px);
}
.listing-btn i {
font-size:9px;
}
/* =========================================================
HIDDEN LISTING
========================================================= */
.listing-item.listing-hidden {
display:none !important;
}
/* =========================================================
NO RESULTS
========================================================= */
.no-results {
display:none;
text-align:center;
padding:70px 20px;
color:var(--grey);
}
.no-results.show {
display:block;
}
.no-results-icon {
color:var(--volt);
font-size:30px;
margin-bottom:16px;
}
.no-results p {
margin:0 0 8px;
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.10em;
}
.no-results a {
color:var(--volt);
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:600;
letter-spacing:.10em;
}
.no-results span {
font-family:'JetBrains Mono',monospace;
font-size:11px;
color:var(--grey-dim);
}
/* =========================================================
OWNER CTA
========================================================= */
.owner-cta {
background:var(--charcoal);
padding:100px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.owner-cta-inner {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:40px;
}
.owner-content {
max-width:650px;
}
.owner-label {
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--volt);
margin-bottom:17px;
}
.owner-title {
font-size:clamp(
3rem,
5vw,
4.4rem
);
color:var(--paper);
margin:0 0 18px;
}
.owner-description {
color:var(--grey);
font-family:'Archivo',sans-serif;
font-size:17px;
line-height:1.7;
margin:0;
}
.owner-buttons {
display:flex;
gap:12px;
flex-wrap:wrap;
flex-shrink:0;
}
.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 var(--line);
border-radius:var(--radius);
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
line-height:1;
transition:
color .2s ease,
border-color .2s ease,
background .2s ease,
transform .2s ease;
}
.phone-button:hover {
color:var(--volt);
border-color:var(--volt);
background:rgba(198,255,61,.04);
transform:translateY(-2px);
}
/* =========================================================
FOCUS ACCESSIBILITY
========================================================= */
a:focus-visible,
button:focus-visible {
outline:2px solid var(--volt);
outline-offset:3px;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:991.98px) {
.listing-hero {
min-height:480px;
padding:100px 0 80px;
}
.listing-hero h1 {
font-size:clamp(
3.7rem,
9vw,
5.5rem
);
}
.listings-section {
padding:80px 0;
}
.listings-heading {
align-items:flex-start;
flex-direction:column;
gap:18px;
}
.listing-count {
padding-bottom:0;
}
.owner-cta {
padding:80px 0;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767.98px) {
body {
font-size:15.5px;
}
.listing-hero {
min-height:430px;
padding:90px 20px 70px;
}
.listing-hero img.bg {
object-position:center center;
opacity:.62;
}
.hero-eyebrow {
font-size:10px;
letter-spacing:.16em;
margin-bottom:14px;
}
.listing-hero h1 {
font-size:clamp(
3.1rem,
13vw,
4.5rem
);
line-height:.94;
}
.hero-description {
font-size:16px;
line-height:1.65;
margin-top:18px;
}
.hero-button {
width:100%;
max-width:320px;
}
.listings-section {
padding:65px 0;
}
.listings-title {
font-size:clamp(
2.8rem,
11vw,
3.8rem
);
}
.filter-bar {
gap:8px;
margin-bottom:30px;
padding-bottom:23px;
}
.filter-btn {
font-size:10px;
padding:10px 13px;
}
.listing-body {
padding:22px;
}
.listing-title {
font-size:1.85rem;
}
.listing-feat-chip {
font-size:8.5px;
}
.owner-cta {
padding:65px 0;
}
.owner-title {
font-size:clamp(
2.7rem,
11vw,
3.7rem
);
}
.owner-description {
font-size:16px;
}
.owner-buttons {
width:100%;
flex-direction:column;
}
.owner-buttons .btn-volt,
.owner-buttons .phone-button {
width:100%;
max-width:380px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:420px) {
.listing-hero {
min-height:390px;
}
.listing-hero h1 {
font-size:3rem;
}
.listings-title {
font-size:2.6rem;
}
.filter-btn {
flex:1 1 auto;
text-align:center;
}
.listing-body {
padding:20px;
}
.listing-title {
font-size:1.7rem;
}
.owner-title {
font-size:2.5rem;
}
}
/* =========================================================
CURRENT INVENTORY NOTE
========================================================= */
.listing-availability-note{
display:flex;
align-items:center;
gap:9px;
margin-left:auto;
margin-bottom:8px;
color:var(--grey);
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:600;
letter-spacing:.07em;
line-height:1.5;
text-transform:uppercase;
}
.listing-availability-note i{
color:var(--volt);
font-size:9px;
}
@media (max-width:991.98px){
.listing-availability-note{
margin-left:0;
margin-bottom:0;
}
}
@media (max-width:767.98px){
.listing-availability-note{
font-size:9px;
}
}/* End custom CSS */