/* Start custom CSS for html, class: .elementor-element-b60b178 *//* =========================================================
NEW VISION COMMERCIAL
CONTACT PAGE
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);
}
/* =========================================================
GLOBAL RESET
========================================================= */
*,
*::before,
*::after {
box-sizing:border-box;
}
html {
margin:0 !important;
padding:0 !important;
width:100%;
min-height:100%;
scroll-behavior:smooth;
}
body {
margin:0 !important;
padding:0 !important;
width:100%;
min-height:100%;
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;
}
/* WordPress wrappers */
#page,
.site,
.site-content,
.site-main,
main,
.wp-site-blocks,
.entry-content {
margin-top:0 !important;
}
#page,
.site,
.site-content,
.site-main,
.wp-site-blocks {
padding-top:0 !important;
}
::selection {
background:var(--volt);
color:var(--ink);
}
a {
color:inherit;
text-decoration:none;
}
img {
max-width:100%;
}
button,
input,
textarea,
select {
font:inherit;
}
/* =========================================================
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);
}
/* =========================================================
CONTACT SECTION
========================================================= */
.contact-section {
position:relative;
min-height:90vh;
padding:125px 0 105px;
background-color:var(--ink);
background-image:
radial-gradient(
rgba(255,255,255,.055) 1.5px,
transparent 1.5px
);
background-size:24px 24px;
border-bottom:1px solid var(--line);
}
/* =========================================================
CONTACT HEADER
========================================================= */
.contact-header-wrap {
position:relative;
margin-bottom:38px;
}
.contact-eyebrow {
position:relative;
z-index:2;
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--grey-dim);
margin-bottom:13px;
}
.ghost-heading {
position:absolute;
top:-24px;
left:-2px;
z-index:1;
font-size:clamp(
3.5rem,
7vw,
6rem
);
color:rgba(255,255,255,.035);
pointer-events:none;
user-select:none;
white-space:nowrap;
}
.main-heading {
position:relative;
z-index:2;
color:var(--paper);
font-size:clamp(
3.2rem,
5.5vw,
5rem
);
margin:0 0 16px;
letter-spacing:.01em;
}
.volt-line {
width:56px;
height:4px;
background:var(--volt);
margin-bottom:20px;
}
.contact-intro {
color:var(--grey);
font-family:'Archivo',sans-serif;
font-size:17px;
line-height:1.7;
max-width:560px;
margin:0;
}
/* =========================================================
FORM
========================================================= */
.contact-field {
margin-top:2px;
}
.contact-label {
display:block;
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:600;
letter-spacing:.10em;
text-transform:uppercase;
color:var(--paper);
margin-bottom:7px;
}
.contact-input {
width:100%;
background:transparent;
border:none;
border-bottom:1px solid rgba(198,255,61,.45);
border-radius:0;
outline:none;
color:#ffffff;
font-family:'Archivo',sans-serif;
font-size:16px;
line-height:1.5;
padding:7px 0 11px;
margin-bottom:28px;
transition:
border-color .25s ease,
box-shadow .25s ease;
}
.contact-input:focus {
border-bottom-color:var(--volt);
box-shadow:
0 1px 0 var(--volt);
background:transparent;
color:#ffffff;
}
.contact-input::placeholder {
color:rgba(255,255,255,.25);
}
.contact-textarea {
resize:vertical;
min-height:105px;
}
/* =========================================================
RECAPTCHA
========================================================= */
.recaptcha-box {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
width:max-content;
max-width:100%;
margin:0 0 25px;
padding:10px 14px;
background:#f9f9f9;
border:1px solid #d3d3d3;
border-radius:3px;
}
.recaptcha-check {
display:flex;
align-items:center;
gap:9px;
}
.recaptcha-check input {
width:22px;
height:22px;
cursor:pointer;
accent-color:#0a0a0b;
margin:0;
}
.recaptcha-check label {
color:#282828;
font-family:'Archivo',sans-serif;
font-size:13px;
font-weight:500;
cursor:pointer;
margin:0;
white-space:nowrap;
}
.recaptcha-brand {
display:flex;
flex-direction:column;
align-items:center;
line-height:1;
}
.recaptcha-brand img {
width:28px;
height:28px;
}
.recaptcha-brand span {
color:#555;
font-family:Arial,sans-serif;
font-size:9px;
font-weight:600;
margin-top:3px;
}
.recaptcha-brand small {
color:#888;
font-family:Arial,sans-serif;
font-size:8px;
margin-top:3px;
}
/* =========================================================
SEND BUTTON
========================================================= */
.btn-send {
background:#1a1a1c;
color:#ffffff;
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.12em;
text-transform:uppercase;
padding:15px 30px;
border:1px solid #333338;
border-radius:var(--radius);
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
line-height:1;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease,
box-shadow .25s ease;
}
.btn-send:hover {
background:var(--volt);
color:var(--ink);
border-color:var(--volt);
transform:translateY(-2px);
box-shadow:
0 8px 24px rgba(198,255,61,.20);
}
/* =========================================================
FORM SUCCESS
========================================================= */
.contact-feedback {
display:none;
margin-top:17px;
color:var(--volt);
font-family:'JetBrains Mono',monospace;
font-size:12px;
line-height:1.6;
}
.contact-feedback.show {
display:block;
}
/* =========================================================
CONTACT DETAILS
========================================================= */
.contact-details {
margin-top:42px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.08);
}
.contact-detail-row {
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:9px 0;
}
.contact-detail-row span {
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:600;
letter-spacing:.12em;
color:var(--grey-dim);
text-transform:uppercase;
}
.contact-detail-row a {
color:var(--volt);
font-family:'Archivo',sans-serif;
font-size:16px;
font-weight:600;
transition:color .2s ease;
}
.contact-detail-row a:hover {
color:#ffffff;
}
/* =========================================================
MAP
========================================================= */
.map-wrap {
position:relative;
width:100%;
height:100%;
min-height:560px;
overflow:hidden;
border:1px solid var(--line);
border-radius:3px;
background:var(--charcoal);
box-shadow:
0 20px 48px rgba(0,0,0,.55);
}
.map-frame {
display:block;
width:100%;
height:100%;
min-height:560px;
border:0;
filter:
invert(90%)
hue-rotate(180deg)
contrast(95%);
}
.map-label {
position:absolute;
left:18px;
bottom:18px;
display:flex;
flex-direction:column;
gap:5px;
max-width:calc(100% - 36px);
padding:12px 15px;
background:rgba(10,10,11,.92);
border:1px solid rgba(198,255,61,.35);
box-shadow:
0 8px 25px rgba(0,0,0,.35);
}
.map-label-title {
font-family:'JetBrains Mono',monospace;
font-size:10px;
font-weight:600;
letter-spacing:.12em;
color:var(--volt);
}
.map-label-address {
font-family:'Archivo',sans-serif;
font-size:12px;
color:var(--paper);
}
/* =========================================================
HEADQUARTERS
========================================================= */
.offices-showcase {
padding:105px 0;
background:var(--charcoal);
border-bottom:1px solid var(--line);
}
.section-heading-row {
margin-bottom:48px;
}
.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:15px;
}
.section-title {
color:#ffffff;
font-size:clamp(
3rem,
5vw,
4.4rem
);
margin:0;
}
/* =========================================================
OFFICE CARD
========================================================= */
.office-card {
height:100%;
background:var(--panel);
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
transition:
transform .35s var(--ease),
border-color .3s ease,
box-shadow .3s ease;
}
.office-card:hover {
transform:translateY(-6px);
border-color:var(--volt);
box-shadow:
0 18px 40px rgba(0,0,0,.25);
}
.office-image-wrap {
overflow:hidden;
background:#111;
}
.office-card-img {
display:block;
width:100%;
aspect-ratio:16 / 10;
object-fit:cover;
transition:
transform .6s var(--ease);
}
.office-card:hover .office-card-img {
transform:scale(1.035);
}
.office-card-body {
padding:28px;
}
.office-label {
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:500;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--grey-dim);
margin-bottom:12px;
}
.office-title {
color:#ffffff;
font-size:clamp(
2rem,
3vw,
2.7rem
);
margin:0 0 13px;
}
.office-description {
color:var(--grey);
font-family:'Archivo',sans-serif;
font-size:16px;
line-height:1.7;
margin:0 0 20px;
}
.office-meta {
font-family:'JetBrains Mono',monospace;
font-size:11px;
font-weight:600;
letter-spacing:.09em;
text-transform:uppercase;
color:var(--volt);
}
/* =========================================================
OWNER CTA
========================================================= */
.owner-cta {
padding:100px 0;
background:var(--charcoal);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.owner-cta-inner {
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
}
.owner-cta-content {
max-width:680px;
}
.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 {
color:var(--paper);
font-size:clamp(
3rem,
5vw,
4.4rem
);
margin:0 0 18px;
}
.owner-description {
color:var(--grey);
font-family:'Archivo',sans-serif;
font-size:17px;
line-height:1.7;
margin:0;
}
.owner-cta-buttons {
display:flex;
align-items:center;
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);
}
/* =========================================================
ACCESSIBILITY BUTTON
========================================================= */
.a11y-btn {
position:fixed;
right:22px;
bottom:22px;
z-index:12000;
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:12000;
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 .contact-section,
body.high-contrast .offices-showcase,
body.high-contrast .owner-cta {
background:#000;
}
body.high-contrast .display,
body.high-contrast p,
body.high-contrast span,
body.high-contrast a,
body.high-contrast label {
color:#ffffff !important;
}
body.high-contrast .volt-line {
background:var(--volt);
}
/* =========================================================
LARGER TEXT
========================================================= */
body.larger-text {
font-size:18px;
}
body.larger-text .contact-intro,
body.larger-text .office-description,
body.larger-text .owner-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) {
.contact-section {
padding:105px 0 75px;
}
.main-heading {
font-size:clamp(
3rem,
7vw,
4.5rem
);
}
.map-wrap {
min-height:420px;
margin-top:15px;
}
.map-frame {
min-height:420px;
}
.offices-showcase {
padding:80px 0;
}
.owner-cta {
padding:80px 0;
}
.owner-cta-inner {
align-items:flex-start;
flex-direction:column;
}
.owner-cta-buttons {
width:100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767.98px) {
body {
font-size:15.5px;
}
.contact-section {
padding:95px 0 65px;
}
.ghost-heading {
top:-16px;
font-size:3rem;
}
.contact-eyebrow {
font-size:10px;
letter-spacing:.16em;
}
.main-heading {
font-size:clamp(
2.7rem,
11vw,
3.8rem
);
}
.contact-intro {
font-size:16px;
}
.contact-input {
font-size:16px;
}
.recaptcha-box {
width:100%;
justify-content:space-between;
}
.btn-send {
width:100%;
}
.contact-details {
margin-top:35px;
}
.contact-detail-row {
align-items:flex-start;
flex-direction:column;
gap:4px;
}
.map-wrap {
min-height:350px;
margin-top:5px;
}
.map-frame {
min-height:350px;
}
.map-label {
left:12px;
right:12px;
bottom:12px;
max-width:none;
}
.offices-showcase {
padding:65px 0;
}
.section-title {
font-size:clamp(
2.8rem,
11vw,
3.7rem
);
}
.office-card-body {
padding:22px;
}
.office-title {
font-size:2rem;
}
.office-description {
font-size:15px;
}
.owner-cta {
padding:65px 0;
}
.owner-title {
font-size:clamp(
2.7rem,
11vw,
3.7rem
);
}
.owner-description {
font-size:16px;
}
.owner-cta-buttons {
flex-direction:column;
width:100%;
}
.owner-cta-buttons .btn-volt,
.owner-cta-buttons .phone-button {
width:100%;
max-width:380px;
}
.a11y-btn {
right:16px;
bottom:16px;
width:48px;
height:48px;
}
.a11y-panel {
right:16px;
bottom:76px;
width:235px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:420px) {
.contact-section {
padding:90px 0 55px;
}
.ghost-heading {
font-size:2.45rem;
}
.main-heading {
font-size:2.55rem;
}
.recaptcha-box {
gap:10px;
padding:9px 10px;
}
.recaptcha-check label {
font-size:12px;
}
.recaptcha-brand {
flex-shrink:0;
}
.section-title {
font-size:2.5rem;
}
.owner-title {
font-size:2.5rem;
}
}
/* =========================================================
SUBPAGE HERO
SAME VISUAL SYSTEM AS OTHER NEW VISION PAGES
HERO IMAGE:
414 W Arbor Vitae St, Inglewood, CA
========================================================= */
.subpage-hero{
position:relative;
min-height:540px;
height:clamp(540px,68vh,720px);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
isolation:isolate;
background:#0a0a0b;
text-align:center;
}
.subpage-hero-image{
position:absolute;
inset:0;
z-index:-3;
background-image:url("https://8gy.cd3.mytemp.website/wp-content/uploads/2026/10/414-W-Arbor-Vitae-St-Inglewood-CA-Building-Photo-1-LargeHighDefinition-1920w-1.webp");
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
transform:scale(1.02);
}
.subpage-hero-overlay{
position:absolute;
inset:0;
z-index:-2;
background:
linear-gradient(
180deg,
rgba(10,10,11,.34) 0%,
rgba(10,10,11,.46) 38%,
rgba(10,10,11,.72) 72%,
rgba(10,10,11,.94) 100%
);
}
.subpage-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;
}
.subpage-hero-content{
position:relative;
z-index:2;
width:100%;
max-width:1200px;
padding:40px 25px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin:0 auto;
}
.subpage-hero-label{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
color:var(--volt);
font-family:'JetBrains Mono',monospace;
font-size:12px;
font-weight:600;
letter-spacing:.20em;
line-height:1.4;
text-transform:uppercase;
margin-bottom:18px;
}
.subpage-hero-label::before,
.subpage-hero-label::after{
content:"";
width:28px;
height:1px;
background:var(--volt);
display:block;
}
.subpage-hero-title{
margin:0;
color:var(--paper);
font-size:clamp(4rem,8vw,6.5rem);
line-height:.92;
letter-spacing:.01em;
text-shadow:
0 3px 25px rgba(0,0,0,.55);
}
.subpage-hero-title span{
color:var(--volt);
}
.subpage-hero-text{
max-width:650px;
margin:24px auto 0;
color:#e0e0e2;
font-family:'Archivo',sans-serif;
font-size:clamp(15px,1.35vw,19px);
line-height:1.7;
text-shadow:
0 2px 12px rgba(0,0,0,.55);
}
/* =========================================================
HERO RESPONSIVE
========================================================= */
@media (max-width:991.98px){
.subpage-hero{
min-height:500px;
height:60vh;
}
.subpage-hero-title{
font-size:clamp(3.5rem,10vw,5.5rem);
}
.subpage-hero-text{
max-width:600px;
}
}
@media (max-width:767.98px){
.subpage-hero{
min-height:470px;
height:62vh;
}
.subpage-hero-image{
background-position:center center;
transform:scale(1.04);
}
.subpage-hero-overlay{
background:
linear-gradient(
180deg,
rgba(10,10,11,.40) 0%,
rgba(10,10,11,.55) 45%,
rgba(10,10,11,.95) 100%
);
}
.subpage-hero-content{
padding:30px 20px;
}
.subpage-hero-label{
font-size:10px;
letter-spacing:.16em;
gap:9px;
}
.subpage-hero-label::before,
.subpage-hero-label::after{
width:18px;
}
.subpage-hero-title{
font-size:clamp(2.9rem,13vw,4.5rem);
}
.subpage-hero-text{
max-width:92%;
margin-top:18px;
font-size:15px;
line-height:1.65;
}
}
@media (max-width:420px){
.subpage-hero{
min-height:440px;
}
.subpage-hero-title{
font-size:2.8rem;
}
.subpage-hero-text{
font-size:14px;
}
}/* End custom CSS */