/**
* Envisio Home � hm.html layout + brand tokens
*/
.envisio-home {
--royal: #1B3F7A;
--navy: #0D1B3E;
--blue-mid: #4A7FD4;
--white: #FFFFFF;
--gray-bg: #F7F9FC;
--border: #DDE4F0;
--border-soft: #E8ECF5;
--text: #0D1B3E;
--muted: #5A6A8A;
--gold: #C9A84C;
--card-gap: 24px;
--card-pad: 24px;
--card-radius: 12px;
--btn-radius: 6px;
--section-y: 96px;
--container: 1280px;
--font-display: 'Plus Jakarta Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
/* Typography tokens */
.envisio-home .eh-display-h1 {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 60px);
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
color: var(--white);
margin: 0 0 20px;
}
.envisio-home .eh-display-h1 em {
font-style: normal;
color: var(--blue-mid);
}
.envisio-home .eh-display-h2 {
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 600;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--text);
margin: 0 0 20px;
}
.envisio-home .eh-display-h2--light { color: var(--white); }
.envisio-home .eh-display-h2 em {
font-style: normal;
color: var(--royal);
}
.envisio-home .eh-h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--text);
margin: 0;
}
.envisio-home .eh-body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--muted);
margin: 0 0 16px;
}
.envisio-home .eh-section-tag {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--royal);
margin-bottom: 20px;
}
.envisio-home .eh-section-tag::before {
content: '';
width: 28px;
height: 1px;
background: var(--royal);
}
.envisio-home .eh-section-tag--gold { color: var(--gold); }
.envisio-home .eh-section-tag--gold::before { background: var(--gold); }
.envisio-home .eh-section-tag--light { color: var(--blue-mid); }
.envisio-home .eh-section-tag--light::before { background: var(--blue-mid); }
.envisio-home .eh-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--royal);
color: var(--white);
border: none;
border-radius: var(--btn-radius);
padding: 14px 28px;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.envisio-home .eh-btn-primary:hover {
background: #163566;
color: var(--white);
transform: translateY(-2px);
}
.envisio-home .eh-btn-ghost {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--white);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: var(--btn-radius);
padding: 14px 28px;
text-decoration: none;
transition: all 0.2s ease;
}
.envisio-home .eh-btn-ghost:hover {
background: var(--white);
color: var(--navy);
border-color: var(--white);
}
.envisio-home .eh-text-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--royal);
text-decoration: none;
border: none;
background: none;
cursor: pointer;
transition: gap 0.2s ease, color 0.2s ease;
}
.envisio-home .eh-text-link:hover {
color: var(--blue-mid);
gap: 12px;
}
/* —— Hero —— */
.envisio-home .eh-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--navy);
/* Pull hero up behind the transparent sticky header so it overlays the photo */
margin-top: calc(-1 * var(--ev-nav-h, 72px));
}
/* Hero video background */
.envisio-home .eh-hero__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.envisio-home .eh-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.72);
}
.envisio-home .eh-hero__slides {
position: absolute;
inset: 0;
pointer-events: none;
}
.envisio-home .eh-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1s ease;
}
.envisio-home .eh-hero__slide.is-active { opacity: 1; }
.envisio-home .eh-hero__slide img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
transition: transform 9s ease;
}
.envisio-home .eh-hero__slide.is-active img { transform: scale(1); }
.envisio-home .eh-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(13,27,62,0.88) 0%, rgba(13,27,62,0.35) 100%);
z-index: 1;
}
.envisio-home .eh-hero__vignette {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 30% 60%, transparent 35%, rgba(13,27,62,0.55) 100%);
z-index: 1;
pointer-events: none;
}
/* �� Hero inner layout �� */
.envisio-home .eh-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: calc(72px + 24px) 24px 40px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Headline block � upper area */
.envisio-home .eh-hero__headline-wrap {
max-width: 680px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Bottom bar � project slider left + tagline right */
.envisio-home .eh-hero__bottom-bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
position: relative;
z-index: 3;
}
/* -- Project slider -- */
.envisio-home .eh-hero__proj-slider {
width: 60%;
flex-shrink: 0;
min-width: 0;
overflow: hidden;
position: relative;
z-index: 3;
}
.envisio-home .eh-hero__proj-track {
display: flex;
gap: 12px;
width: max-content;
}
.envisio-home .eh-hero__proj-card {
position: relative;
flex-shrink: 0;
width: calc((100% - 24px) / 3);
max-width: none;
height: 148px;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
display: block;
/* animated border via pseudo-element */
isolation: isolate;
/* Professional border styling */
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(13, 27, 62, 0.3);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* For animation */
opacity: 0;
transform: translateY(30px);
}
.envisio-home .eh-hero__proj-card.is-visible {
/* Just for styling, not display */
opacity: 1;
transform: translateY(0);
}
/* Initial animation for bottom bar */
.envisio-home .eh-hero__bottom-bar {
opacity: 0;
transform: translateY(40px);
animation: slideUpFade 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}
@keyframes slideUpFade {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered animation for cards */
.envisio-home .eh-hero__proj-card {
animation: cardSlideUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.envisio-home .eh-hero__proj-card:nth-child(1) { animation-delay: 0.7s; }
.envisio-home .eh-hero__proj-card:nth-child(2) { animation-delay: 0.8s; }
.envisio-home .eh-hero__proj-card:nth-child(3) { animation-delay: 0.9s; }
.envisio-home .eh-hero__proj-card:nth-child(4) { animation-delay: 1.0s; }
@keyframes cardSlideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Professional static border */
.envisio-home .eh-hero__proj-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 9px;
background: linear-gradient(
135deg,
rgba(201, 168, 76, 0.5) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(74, 127, 212, 0.5) 100%
);
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
/* Animated rotating border for active/hover state */
.envisio-home .eh-hero__proj-card::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 10px;
background: conic-gradient(
from var(--angle, 0deg),
transparent 0deg,
rgba(201, 168, 76, 0.9) 40deg,
transparent 80deg,
rgba(74, 127, 212, 0.9) 140deg,
transparent 180deg,
rgba(255, 255, 255, 0.7) 240deg,
transparent 280deg,
rgba(201, 168, 76, 0.9) 320deg,
transparent 360deg
);
z-index: -2;
opacity: 0;
transition: opacity 0.4s ease;
animation: ehBorderSpin 4s linear infinite paused;
}
.envisio-home .eh-hero__proj-card:hover::before,
.envisio-home .eh-hero__proj-card.is-active::before {
opacity: 1;
}
.envisio-home .eh-hero__proj-card:hover::after,
.envisio-home .eh-hero__proj-card.is-active::after {
opacity: 1;
animation-play-state: running;
}
/* Hover effects for professional feel */
.envisio-home .eh-hero__proj-card:hover,
.envisio-home .eh-hero__proj-card.is-active {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35),
0 0 20px rgba(201, 168, 76, 0.15);
border-color: rgba(201, 168, 76, 0.4);
}
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes ehBorderSpin {
to { --angle: 360deg; }
}
.envisio-home .eh-hero__proj-card img {
position: absolute;
inset: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
border-radius: 5px;
object-fit: cover;
display: block;
transition: filter 0.4s ease;
filter: brightness(0.55);
z-index: 1;
will-change: transform;
}
.envisio-home .eh-hero__proj-card:hover img,
.envisio-home .eh-hero__proj-card.is-active img {
filter: brightness(0.72);
}
.envisio-home .eh-hero__proj-card-overlay {
position: absolute;
inset: 1px;
border-radius: 5px;
background: linear-gradient(to top, rgba(13,27,62,0.88) 0%, transparent 55%);
z-index: 1;
}
.envisio-home .eh-hero__proj-card-body {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
z-index: 4;
}
.envisio-home .eh-hero__proj-card-status {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
margin-bottom: 6px;
background: rgba(255,255,255,0.15);
color: var(--white);
border: 1px solid rgba(255,255,255,0.25);
}
.envisio-home .eh-hero__proj-card-status.eh-badge--ongoing { background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.5); color: #86efac; }
.envisio-home .eh-hero__proj-card-status.eh-badge--completed { background: rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.5); color: #93c5fd; }
.envisio-home .eh-hero__proj-card-status.eh-badge--upcoming { background: rgba(234,179,8,0.20); border-color: rgba(234,179,8,0.45); color: #fde68a; }
.envisio-home .eh-hero__proj-card-name {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--white);
line-height: 1.2;
margin-bottom: 3px;
}
.envisio-home .eh-hero__proj-card-loc {
font-size: 10px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.5px;
}
/* Right tagline + controls */
.envisio-home .eh-hero__tagline {
flex-shrink: 0;
width: 260px;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 20px;
padding-bottom: 4px;
}
.envisio-home .eh-hero__tagline p {
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.8px;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
line-height: 1.8;
margin: 0;
}
/* Arrow controls */
.envisio-home .eh-hero__proj-controls {
display: flex;
align-items: center;
gap: 16px;
}
.envisio-home .eh-hero__proj-arrow {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.25);
background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.envisio-home .eh-hero__proj-arrow:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%);
border-color: rgba(201, 168, 76, 0.6);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.envisio-home .eh-hero__proj-arrow:disabled {
opacity: 0.3;
cursor: default;
transform: none;
box-shadow: none;
}
.envisio-home .eh-hero__proj-counter {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.75);
letter-spacing: 1.5px;
min-width: 60px;
text-align: center;
padding: 6px 12px;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 20px;
background: rgba(255,255,255,0.03);
}
/* -- hero project cards strip -- */
.envisio-home .eh-hero__stats {
position: relative;
z-index: 3;
display: flex;
align-items: stretch;
height: 220px;
margin-top: 60px;
}
.envisio-home .eh-hero__stat-card {
position: relative;
flex: 1;
overflow: hidden;
text-decoration: none;
display: block;
border-right: 2px solid rgba(255,255,255,0.15);
}
.envisio-home .eh-hero__stat-card:last-child { border-right: none; }
.envisio-home .eh-hero__stat-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
filter: brightness(0.68);
}
.envisio-home .eh-hero__stat-card:hover img {
transform: scale(1.07);
filter: brightness(0.88);
}
.envisio-home .eh-hero__stat-label {
position: absolute;
bottom: 20px;
left: 20px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.3px;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
pointer-events: none;
}
@media (max-width: 600px) {
.envisio-home .eh-hero__stats { height: 160px; margin-top: 40px; }
.envisio-home .eh-hero__stat-label { font-size: 12px; bottom: 12px; left: 12px; }
}
/* hide old badge */
.envisio-home .eh-hero__badge { display: none !important; }
/* controls � slim line under stats */
.envisio-home .eh-hero__controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
}
.envisio-home .eh-hero__dot {
width: 28px;
height: 2px;
border-radius: 1px;
border: none;
background: rgba(255, 255, 255, 0.35);
padding: 0;
cursor: pointer;
transition: background 0.3s ease, width 0.3s ease;
}
.envisio-home .eh-hero__dot.is-active {
background: var(--white);
width: 44px;
}
.envisio-home .eh-hero__arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.06);
color: var(--white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
transition: background 0.2s ease;
}
.envisio-home .eh-hero__arrow:hover {
background: rgba(255, 255, 255, 0.18);
}
/* �� Marquee �� */
.envisio-home .eh-marquee {
background: var(--navy);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 16px 0;
overflow: hidden;
}
.envisio-home .eh-marquee__track {
display: flex;
width: max-content;
animation: ehMarquee 32s linear infinite;
}
.envisio-home .eh-marquee__item {
display: inline-flex;
align-items: center;
gap: 40px;
padding: 0 40px;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
white-space: nowrap;
}
.envisio-home .eh-marquee__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
}
@keyframes ehMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* �� Stats (hm #stats) �� */
.envisio-home .eh-stats {
background: var(--navy);
}
.envisio-home .eh-stats__inner {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
@media (min-width: 768px) {
.envisio-home .eh-stats__inner { grid-template-columns: repeat(4, 1fr); }
}
.envisio-home .eh-stat-card {
padding: 48px 24px;
text-align: center;
border-right: 1px solid rgba(255, 255, 255, 0.12);
position: relative;
}
.envisio-home .eh-stat-card:last-child { border-right: none; }
.envisio-home .eh-stat-card::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--gold);
transition: width 0.4s ease;
}
.envisio-home .eh-stat-card:hover::after { width: 48px; }
.envisio-home .eh-stat-num {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 48px);
font-weight: 700;
color: var(--white);
line-height: 1;
margin-bottom: 8px;
}
.envisio-home .eh-stat-num .eh-suf {
font-size: 28px;
color: var(--gold);
}
.envisio-home .eh-stat-lbl {
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 0.72);
}
/* -- ABOUT � Exact React component implementation -- */
.envisio-home .eh-about {
background: #fcfbf8;
color: #171717;
font-family: var(--font-body);
position: relative;
overflow: hidden;
}
/* Left socials rail */
.envisio-home .eh-about__left-rail {
position: fixed;
left: 0;
top: 0;
display: none;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100vh;
width: 56px;
border-right: 1px solid rgba(212, 212, 212, 0.7);
padding: 40px 0;
z-index: 10;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__left-rail {
display: flex;
}
}
.envisio-home .eh-about__socials {
display: flex;
flex-direction: column;
gap: 20px;
color: #737373;
}
.envisio-home .eh-about__social-icon {
width: 16px;
height: 16px;
cursor: pointer;
color: #737373;
text-decoration: none;
transition: color 0.2s ease;
}
.envisio-home .eh-about__social-icon:hover {
color: #171717;
}
.envisio-home .eh-about__social-icon svg {
width: 100%;
height: 100%;
}
.envisio-home .eh-about__socials-label {
transform: rotate(180deg);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
color: #737373;
writing-mode: vertical-rl;
}
/* Container */
.envisio-home .eh-about__container {
max-width: var(--container);
margin: 0 auto;
padding: 40px 24px 64px;
}
/* Top bar */
.envisio-home .eh-about__top-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.envisio-home .eh-about__page-indicator {
font-size: 12px;
letter-spacing: 0.3em;
color: #a3a3a3;
}
.envisio-home .eh-about__tag {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.35em;
color: #525252;
text-transform: uppercase;
}
/* Grid */
.envisio-home .eh-about__grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__grid {
grid-template-columns: repeat(12, 1fr);
gap: 32px;
}
}
/* Main content */
.envisio-home .eh-about__main-content {
grid-column: 1 / -1;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__main-content {
grid-column: span 9;
}
}
.envisio-home .eh-about__title {
text-align: center;
font-size: 88px;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(23, 23, 23, 0.13);
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0;
position: relative;
z-index: 0;
pointer-events: none;
user-select: none;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__title {
font-size: 140px;
}
}
/* Content */
.envisio-home .eh-about__content {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: flex-start;
position: relative;
z-index: 1;
margin-top: -40px;
margin-top: 48px;
}
@media (min-width: 768px) {
.envisio-home .eh-about__content {
grid-template-columns: repeat(12, 1fr);
gap: 40px;
}
}
.envisio-home .eh-about__image-wrap {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.envisio-home .eh-about__image-wrap {
grid-column: span 6;
}
}
.envisio-home .eh-about__image-wrap {
display: flex;
align-self: stretch;
}
.envisio-home .eh-about__image-wrap img {
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
object-position: center;
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
}
.envisio-home .eh-about__text-wrap {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.envisio-home .eh-about__text-wrap {
grid-column: span 6;
padding-top: 24px;
}
}
.envisio-home .eh-about__subtitle {
font-size: 36px;
line-height: 1.05;
color: #171717;
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0 0 24px;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__subtitle {
font-size: 48px;
}
}
.envisio-home .eh-about__description {
margin-top: 24px;
max-width: 400px;
font-size: 14px;
line-height: 1.75;
color: #737373;
}
.envisio-home .eh-about__cta {
margin-top: 32px;
display: inline-flex;
align-items: center;
background: #171717;
padding: 14px 28px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
color: white;
text-decoration: none;
text-transform: uppercase;
transition: background-color 0.2s ease;
}
.envisio-home .eh-about__cta:hover {
background: #525252;
}
/* Sidebar */
.envisio-home .eh-about__sidebar {
grid-column: 1 / -1;
}
@media (min-width: 1024px) {
.envisio-home .eh-about__sidebar {
grid-column: span 3;
}
}
.envisio-home .eh-about__sidebar-title {
margin-bottom: 12px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.3em;
color: #525252;
text-transform: uppercase;
}
.envisio-home .eh-about__sidebar-title--books {
margin-top: 40px;
}
/* Articles */
.envisio-home .eh-about__articles {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.envisio-home .eh-about__article-item {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(212, 212, 212, 0.7);
background: rgba(255, 255, 255, 0.6);
padding: 10px;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.envisio-home .eh-about__article-item:hover {
background: white;
}
.envisio-home .eh-about__article-item:hover .eh-about__arrow {
transform: translateX(2px);
color: #525252;
}
.envisio-home .eh-about__article-thumb {
width: 56px;
height: 48px;
flex: none;
overflow: hidden;
}
.envisio-home .eh-about__article-item img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(20%);
will-change: transform;
}
.envisio-home .eh-about__article-info {
min-width: 0;
}
.envisio-home .eh-about__article-kicker {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.25em;
color: #262626;
text-transform: uppercase;
}
.envisio-home .eh-about__article-item--muted .eh-about__article-kicker {
color: #a3a3a3;
}
.envisio-home .eh-about__article-date {
font-size: 10px;
color: #a3a3a3;
}
.envisio-home .eh-about__arrow {
margin-left: auto;
width: 14px;
height: 14px;
flex: none;
color: #d4d4d4;
transition: transform 0.2s ease, color 0.2s ease;
}
/* Books */
.envisio-home .eh-about__books {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.envisio-home .eh-about__book-item {
display: flex;
align-items: center;
gap: 16px;
cursor: pointer;
}
.envisio-home .eh-about__book-item img {
width: 48px;
height: 64px;
flex: none;
object-fit: cover;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.envisio-home .eh-about__book-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
color: #262626;
text-transform: uppercase;
}
.envisio-home .eh-about__book-author {
font-size: 11px;
color: #a3a3a3;
}
/* Footer */
.envisio-home .eh-about__footer {
margin-top: 80px;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-top: 1px solid rgba(212, 212, 212, 0.7);
padding-top: 24px;
}
.envisio-home .eh-about__footer-left {
display: flex;
align-items: center;
gap: 24px;
}
.envisio-home .eh-about__designed-by {
font-size: 11px;
letter-spacing: 0.3em;
color: #737373;
text-transform: uppercase;
}
.envisio-home .eh-about__designed-by strong {
color: #262626;
font-weight: 600;
}
.envisio-home .eh-about__footer-right {
display: flex;
align-items: center;
gap: 16px;
}
.envisio-home .eh-about__line {
width: 40px;
height: 1px;
background: #a3a3a3;
}
.envisio-home .eh-about__year {
font-size: 11px;
letter-spacing: 0.3em;
color: #737373;
text-transform: uppercase;
}
.envisio-home .eh-divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--border), transparent);
margin: 0 auto;
max-width: var(--container);
}
/* �� Projects mosaic �� */
.envisio-home .eh-projects {
padding: var(--section-y) 24px;
background: var(--gray-bg);
}
.envisio-home .eh-projects__wrap {
max-width: var(--container);
margin: 0 auto;
}
.envisio-home .eh-projects__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin-bottom: 40px;
}
.envisio-home .eh-projects__tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.envisio-home .eh-tab {
padding: 10px 18px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
border: 1px solid var(--border);
border-radius: var(--btn-radius);
background: var(--white);
color: var(--muted);
cursor: pointer;
transition: all 0.2s ease;
}
.envisio-home .eh-tab.is-active {
background: var(--royal);
border-color: var(--royal);
color: var(--white);
}
.envisio-home .eh-projects__mosaic {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
}
@media (min-width: 992px) {
.envisio-home .eh-projects__mosaic {
grid-template-columns: 1.35fr 1fr;
}
}
.envisio-home .eh-projects__col {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 3px;
}
.envisio-home .eh-proj {
position: relative;
overflow: hidden;
min-height: 280px;
text-decoration: none;
display: block;
}
.envisio-home .eh-proj.is-hidden { display: none; }
.envisio-home .eh-proj--big { min-height: 400px; }
@media (min-width: 992px) {
.envisio-home .eh-proj--big { min-height: 560px; }
.envisio-home .eh-proj--sm { min-height: 278px; }
}
.envisio-home .eh-proj__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.7s ease;
}
.envisio-home .eh-proj__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.envisio-home .eh-proj:hover .eh-proj__bg { transform: scale(1.06); }
.envisio-home .eh-proj__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13, 27, 62, 0.92) 0%, rgba(13, 27, 62, 0.15) 55%);
transition: background 0.35s ease;
}
.envisio-home .eh-proj:hover .eh-proj__overlay {
background: linear-gradient(to top, rgba(13, 27, 62, 0.96) 0%, rgba(13, 27, 62, 0.35) 70%);
}
.envisio-home .eh-proj__num {
position: absolute;
top: 20px;
right: 20px;
font-family: var(--font-display);
font-size: 48px;
font-weight: 700;
color: rgba(255, 255, 255, 0.08);
line-height: 1;
}
.envisio-home .eh-proj__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--card-pad);
}
.envisio-home .eh-proj__tag {
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.envisio-home .eh-proj__name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
color: var(--white);
margin-bottom: 8px;
}
.envisio-home .eh-proj__desc {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease;
}
.envisio-home .eh-proj:hover .eh-proj__desc {
max-height: 80px;
opacity: 1;
margin-bottom: 12px;
}
.envisio-home .eh-proj__link {
font-size: 14px;
font-weight: 600;
color: var(--blue-mid);
opacity: 0;
transition: opacity 0.3s ease;
}
.envisio-home .eh-proj:hover .eh-proj__link { opacity: 1; }
.envisio-home .eh-badge {
position: absolute;
top: 16px;
left: 16px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 20px;
z-index: 2;
}
.envisio-home .eh-badge--ongoing { background: #FEF3C7; color: #92400E; }
.envisio-home .eh-badge--completed { background: #D1FAE5; color: #065F46; }
.envisio-home .eh-badge--upcoming { background: #DBEAFE; color: #1E40AF; }
/* �� Why split �� */
.envisio-home .eh-why {
display: grid;
grid-template-columns: 1fr;
background: var(--white);
}
@media (min-width: 992px) {
.envisio-home .eh-why { grid-template-columns: 1fr 1fr; }
}
.envisio-home .eh-why__img {
position: relative;
min-height: 360px;
overflow: hidden;
}
.envisio-home .eh-why__img img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
}
.envisio-home .eh-why__img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.9) 100%);
}
@media (min-width: 992px) {
.envisio-home .eh-why__img::after {
background: linear-gradient(to right, transparent 55%, var(--white) 100%);
}
}
.envisio-home .eh-why__ribbon {
position: absolute;
top: 40px;
left: 0;
background: var(--gold);
color: var(--navy);
padding: 10px 16px;
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 2;
}
.envisio-home .eh-why__content {
padding: var(--section-y) 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 992px) {
.envisio-home .eh-why__content { padding: var(--section-y) 64px; }
}
.envisio-home .eh-why__grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-top: 36px;
}
@media (min-width: 600px) {
.envisio-home .eh-why__grid { grid-template-columns: 1fr 1fr; }
}
.envisio-home .eh-why-item {
padding-left: 16px;
border-left: 2px solid var(--border);
transition: border-color 0.2s ease;
}
.envisio-home .eh-why-item.is-visible,
.envisio-home .eh-why-item:hover {
border-color: var(--royal);
}
.envisio-home .eh-why-item__num {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
color: rgba(27, 63, 122, 0.2);
margin-bottom: 6px;
}
.envisio-home .eh-why-item__title {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.envisio-home .eh-why-item__body {
font-size: 14px;
line-height: 1.65;
color: var(--muted);
}
/* �� Landowner banner �� */
.envisio-home .eh-banner {
position: relative;
padding: 80px 24px;
background: var(--royal);
overflow: hidden;
text-align: center;
}
.envisio-home .eh-banner::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.07;
background: repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.2) 20px);
}
.envisio-home .eh-banner__inner {
position: relative;
z-index: 1;
max-width: 640px;
margin: 0 auto;
}
.envisio-home .eh-banner .eh-display-h2 { color: var(--white); }
.envisio-home .eh-banner .eh-body { color: rgba(255, 255, 255, 0.88); }
.envisio-home .eh-btn-white {
display: inline-flex;
padding: 14px 28px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--white);
color: var(--navy);
border-radius: var(--btn-radius);
text-decoration: none;
transition: background 0.2s ease;
}
.envisio-home .eh-btn-white:hover {
background: var(--gray-bg);
color: var(--navy);
}
/* �� Concerns �� */
.envisio-home .eh-concerns {
padding: var(--section-y) 0;
background: linear-gradient(180deg, rgba(13,27,62,0.88) 0%, rgba(13,27,62,0.94) 100%), url('https://images.unsplash.com/photo-1554469384-e58fac16e23a?auto=format&fit=crop&w=1920&q=80') center / cover no-repeat;
}
.envisio-home .eh-concerns .eh-section-tag { color: rgba(255,255,255,0.5); }
.envisio-home .eh-concerns .eh-section-tag::before { background: rgba(255,255,255,0.35); }
.envisio-home .eh-concerns .eh-display-h2 { color: var(--white); }
.envisio-home .eh-concerns__wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.envisio-home .eh-concerns__head {
text-align: center;
margin-bottom: 48px;
}
.envisio-home .eh-concerns__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--card-gap);
}
@media (min-width: 640px) {
.envisio-home .eh-concerns__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.envisio-home .eh-concerns__grid { grid-template-columns: repeat(4, 1fr); }
}
/* Premium image cards: full-bleed photo of the division's work, dark
scrim, icon/title/copy overlaid at the bottom — same anatomy as the
Featured Projects cards, instead of a plain icon-and-text tile. */
.envisio-home .eh-concern-card {
position: relative;
display: block;
border-radius: var(--card-radius);
overflow: hidden;
aspect-ratio: 3 / 4;
background: #0d1b3e;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.envisio-home .eh-concern-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 55px rgba(13, 27, 62, 0.22);
}
.envisio-home .eh-concern-card__img {
position: absolute;
inset: 0;
}
.envisio-home .eh-concern-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
.envisio-home .eh-concern-card:hover .eh-concern-card__img img {
transform: scale(1.1) !important;
}
.envisio-home .eh-concern-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(5, 10, 20, 0.92) 0%,
rgba(5, 10, 20, 0.55) 48%,
rgba(5, 10, 20, 0.05) 78%
);
}
.envisio-home .eh-concern-card__body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 26px 24px;
text-align: left;
}
.envisio-home .eh-concern-card__icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, color 0.25s ease;
}
.envisio-home .eh-concern-card__icon svg { width: 22px; height: 22px; }
.envisio-home .eh-concern-card:hover .eh-concern-card__icon {
background: var(--gold);
color: var(--navy);
}
.envisio-home .eh-concern-card h3.eh-h3 {
color: var(--white);
font-size: 20px;
margin: 0 0 8px;
}
.envisio-home .eh-concern-card p.eh-body {
color: rgba(255, 255, 255, 0.75);
font-size: 13.5px;
line-height: 1.55;
margin: 0 0 14px;
}
.envisio-home .eh-concern-card .eh-text-link {
color: var(--gold);
}
.envisio-home .eh-concern-card .eh-text-link:hover { color: var(--white); }
/* �� Testimonial �� */
.envisio-home .eh-testimonial {
padding: var(--section-y) 0;
text-align: center;
background: var(--white);
position: relative;
overflow: hidden;
}
.envisio-home .eh-testimonial__wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
position: relative;
}
.envisio-home .eh-testimonial__quote-bg {
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: min(28vw, 280px);
font-weight: 700;
color: rgba(27, 63, 122, 0.04);
line-height: 1;
pointer-events: none;
}
.envisio-home .eh-testi-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 32px;
}
/* Card grid: shows 3 testimonials at once (2 tablet / 1 mobile) instead
of a single narrow quote floating in the middle of the section —
that's what left the big empty margins on either side. */
.envisio-home .eh-testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--card-gap);
align-items: stretch;
}
@media (max-width: 1023px) {
.envisio-home .eh-testi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
.envisio-home .eh-testi-grid { grid-template-columns: 1fr; }
}
/* Person-first card: photo/avatar + name up top (via `order`, no DOM
change needed), quote as the centered body, star rating as a small
footer detail — a deliberately different read from the earlier
quote-first / left-aligned editorial version. */
.envisio-home .eh-testimonial-card {
display: none;
flex-direction: column;
align-items: center;
max-width: none;
height: 100%;
margin: 0;
text-align: center;
border-radius: 16px;
padding: 26px 22px 20px;
}
.envisio-home .eh-testimonial-card.is-active { display: flex; }
.envisio-home .eh-testimonial-card__text {
order: 0;
position: relative;
font-size: 13.5px;
font-style: normal;
line-height: 1.55;
color: var(--text);
margin: 0 0 14px;
}
.envisio-home .eh-testimonial-card__text::before {
content: '\201C';
display: block;
font-family: var(--font-display);
font-size: 32px;
line-height: 1;
color: var(--gold);
margin-bottom: 2px;
}
.envisio-home .eh-testimonial-card__stars {
order: 1;
color: var(--gold);
margin-top: auto;
padding-top: 10px;
font-size: 11px;
letter-spacing: 2px;
}
.envisio-home .eh-testi-author {
order: -1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
margin-bottom: 12px;
}
.envisio-home .eh-testi-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--royal);
color: var(--white);
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--gold);
overflow: hidden;
margin: 0 0 10px;
}
.envisio-home .eh-testi-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.envisio-home .eh-testi-name {
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 600;
color: var(--text);
text-align: center;
}
.envisio-home .eh-testi-role {
font-size: 11.5px;
color: var(--muted);
text-align: center;
}
.envisio-home .eh-testi-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.envisio-home .eh-testi-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--border);
cursor: pointer;
padding: 0;
}
.envisio-home .eh-testi-dot.is-active {
background: var(--royal);
transform: scale(1.25);
}
/* �� CSR + News cards �� */
.envisio-home .eh-block {
padding: var(--section-y) 0;
}
.envisio-home .eh-block--alt { background: var(--gray-bg); }
.envisio-home .eh-block__wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.envisio-home .eh-block__head {
text-align: center;
margin-bottom: 48px;
}
.envisio-home .eh-card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--card-gap);
}
@media (min-width: 768px) {
.envisio-home .eh-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.envisio-home .eh-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.envisio-home .eh-csr-stat {
font-size: 13px;
color: var(--gold);
font-weight: 500;
margin: 8px 0;
}
/* CSR premium image cards — same anatomy as the Group Companies tiles:
full-bleed photo, dark scrim, icon/title/copy overlaid at the bottom. */
.envisio-home .eh-csr-card {
position: relative;
display: block;
border-radius: var(--card-radius);
overflow: hidden;
aspect-ratio: 3 / 4;
background: #0d1b3e;
/* opacity included so this doesn't clobber .eh-reveal-item's fade-in
transition — both classes land on the same element and only one
`transition` declaration wins per element. */
transition: opacity 0.6s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.envisio-home .eh-csr-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 55px rgba(13, 27, 62, 0.18);
}
.envisio-home .eh-csr-card__img {
position: absolute;
inset: 0;
overflow: hidden;
}
.envisio-home .eh-csr-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.envisio-home .eh-csr-card__scrim {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(5, 10, 20, 0.92) 0%,
rgba(5, 10, 20, 0.55) 48%,
rgba(5, 10, 20, 0.05) 78%
);
}
.envisio-home .eh-csr-card__body {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 26px 24px;
text-align: left;
}
.envisio-home .eh-csr-card__icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, color 0.25s ease;
}
.envisio-home .eh-csr-card__icon svg { width: 22px; height: 22px; }
.envisio-home .eh-csr-card:hover .eh-csr-card__icon {
background: var(--gold);
color: var(--navy);
}
.envisio-home .eh-csr-card h3.eh-h3 {
color: var(--white);
font-size: 19px;
margin: 0 0 6px;
}
.envisio-home .eh-csr-card p.eh-body {
color: rgba(255, 255, 255, 0.75);
font-size: 13.5px;
line-height: 1.55;
margin: 0;
}
.envisio-home .eh-csr-card .eh-csr-stat { color: var(--gold); }
/* CSR section backdrop: dark photo behind the (already dark) image
cards — cards keep their own look, only the section tag/heading
need to switch to light-on-dark here. */
.envisio-home .eh-csr {
background: var(--navy);
}
.envisio-home .eh-csr .eh-section-tag { color: rgba(255,255,255,0.5); }
.envisio-home .eh-csr .eh-section-tag::before { background: rgba(255,255,255,0.35); }
.envisio-home .eh-csr .eh-display-h2 { color: var(--white); }
/* Our Sister Concerns: logo showcase grid — dark glass cards (matching
Testimonials/CSR) with a white badge behind each logo, since the
logo PNGs are colored for light backgrounds and would lose contrast
sitting directly on a dark card. */
.envisio-home .eh-sister-concerns {
background: linear-gradient(180deg, rgba(13,27,62,0.88) 0%, rgba(13,27,62,0.94) 100%), url('https://images.unsplash.com/photo-1567157577867-05ccb1388e66?auto=format&fit=crop&w=1920&q=80') center / cover no-repeat;
}
.envisio-home .eh-sister-concerns .eh-section-tag { color: rgba(255,255,255,0.5); }
.envisio-home .eh-sister-concerns .eh-section-tag::before { background: rgba(255,255,255,0.35); }
.envisio-home .eh-sister-concerns .eh-display-h2 { color: var(--white); }
.envisio-home .eh-sister-concerns .eh-body { color: rgba(255,255,255,0.7); }
.envisio-home .eh-sister-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 8px;
}
.envisio-home .eh-sister-row + .eh-sister-row { margin-top: 24px; }
.envisio-home .eh-sister-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 calc((100% - 4 * 24px) / 5);
min-height: 130px;
padding: 20px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,0.14);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease;
}
@media (max-width: 900px) {
.envisio-home .eh-sister-card { flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 560px) {
.envisio-home .eh-sister-card { flex: 0 0 100%; }
}
/* White badge behind the logo — always legible regardless of the
logo artwork's own colors. */
.envisio-home .eh-sister-card__logo {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 14px 18px;
background: var(--white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
/* Diagonal shine sweep on hover — sweeps over the white badge */
.envisio-home .eh-sister-card::before {
content: '';
position: absolute;
inset: 0;
z-index: 3;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
transform: translateX(-130%);
transition: transform 0.85s ease;
pointer-events: none;
}
.envisio-home .eh-sister-card:hover::before { transform: translateX(130%); }
/* Bottom accent line that grows in on hover */
.envisio-home .eh-sister-card::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 3px;
background: linear-gradient(90deg, var(--royal), var(--gold));
transform: translateX(-50%);
transition: width 0.4s ease;
}
.envisio-home .eh-sister-card:hover::after { width: 56%; }
.envisio-home .eh-sister-card:hover,
.envisio-home .eh-sister-card.eh-reveal-item.is-visible:hover {
transform: translateY(-8px) scale(1.035);
box-shadow: 0 24px 48px rgba(0,0,0,0.3);
border-color: rgba(201,168,76,0.4);
}
.envisio-home .eh-sister-card img {
max-width: 100%;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(40%) opacity(0.88);
transition: filter 0.45s ease, transform 0.08s linear;
will-change: transform;
}
.envisio-home .eh-sister-card:hover img {
filter: grayscale(0%) opacity(1);
transform: scale(1.07) !important;
}
/* Entrance: fade + rise + scale (overrides the plain .eh-reveal-item fade-up) */
.envisio-home .eh-sister-card.eh-reveal-item {
opacity: 0;
transform: translateY(32px) scale(0.9);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.envisio-home .eh-sister-card.eh-reveal-item.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
.envisio-home .eh-sister-card,
.envisio-home .eh-sister-card::before,
.envisio-home .eh-sister-card::after,
.envisio-home .eh-sister-card img {
transition: none !important;
}
}
/* �� Contact CTA �� */
.envisio-home .eh-cta {
padding: 80px 24px;
background: var(--navy);
text-align: center;
}
.envisio-home .eh-cta__wrap {
max-width: var(--container);
margin: 0 auto;
}
.envisio-home .eh-cta .eh-display-h2 { color: var(--white); margin-bottom: 28px; }
.envisio-home .eh-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
/* Reveal */
/* Section wrapper � always visible, no background fade */
.envisio-home .eh-reveal {
opacity: 1;
transform: none;
}
/* Content elements inside sections get the fade-up */
.envisio-home .eh-reveal-item {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.envisio-home .eh-reveal-item.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered delay for siblings */
.envisio-home .eh-reveal-item:nth-child(2) { transition-delay: 0.1s; }
.envisio-home .eh-reveal-item:nth-child(3) { transition-delay: 0.2s; }
.envisio-home .eh-reveal-item:nth-child(4) { transition-delay: 0.3s; }
.envisio-home .eh-reveal-item:nth-child(5) { transition-delay: 0.4s; }
.envisio-home .eh-empty {
text-align: center;
padding: 48px;
color: var(--muted);
grid-column: 1 / -1;
}
@media (max-width: 480px) {
.envisio-home {
--section-y: 64px;
}
}
/* Responsive hero layout */
@media (max-width: 900px) {
.envisio-home .eh-hero__proj-slider { width: 55%; }
.envisio-home .eh-hero__tagline { width: 200px; }
.envisio-home .eh-hero__proj-card {
height: 130px;
}
}
@media (max-width: 768px) {
.envisio-home .eh-hero__bottom-bar {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.envisio-home .eh-hero__proj-slider { width: 100%; }
.envisio-home .eh-hero__tagline {
width: 100%;
align-items: flex-start;
text-align: left;
}
.envisio-home .eh-hero__proj-card {
height: 120px;
}
}
@media (max-width: 480px) {
.envisio-home .eh-hero__proj-card {
height: 105px;
width: calc((100% - 12px) / 2);
}
.envisio-home .eh-hero__proj-card-name { font-size: 13px; }
}
/* �� Hero scroll indicator �� */
.envisio-home .eh-hero__scroll {
position: absolute;
right: 32px;
bottom: 48px;
z-index: 4;
display: none;
flex-direction: column;
align-items: center;
gap: 14px;
}
@media (min-width: 1024px) {
.envisio-home .eh-hero__scroll { display: flex; }
}
.envisio-home .eh-hero__scroll-mouse { display: none; }
.envisio-home .eh-hero__scroll-wheel { display: none; }
.envisio-home .eh-hero__scroll-text {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
writing-mode: vertical-rl;
transform: rotate(180deg);
}
/* --------------------------------------
FEATURED PROJECTS � SCROLL-DRIVEN HORIZONTAL
-------------------------------------- */
/* -- Outer section (no padding � scroller controls height) -- */
.envisio-home .eh-fp {
background: var(--navy);
position: relative;
}
/* -- Tall scroller: provides the vertical scroll distance -- */
.envisio-home .eh-fp__scroller {
/* JS sets height = 100vh + (cards-1) � stepPx */
position: relative;
}
/* -- Sticky panel: locks in viewport while scrolling -- */
.envisio-home .eh-fp__sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
}
/* -- Inner layout container -- */
.envisio-home .eh-fp__inner {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 0;
}
/* -- Top bar -- */
.envisio-home .eh-fp__topbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 20px;
}
.envisio-home .eh-fp__topbar-left .eh-section-tag {
color: rgba(255,255,255,0.45);
margin-bottom: 8px;
}
.envisio-home .eh-fp__topbar-left .eh-section-tag::before {
background: rgba(255,255,255,0.3);
}
.envisio-home .eh-fp__headline {
font-family: var(--font-display);
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.1;
color: #ffffff;
margin: 0;
}
.envisio-home .eh-fp__headline em {
font-style: normal;
color: var(--gold);
}
/* Right side of topbar */
.envisio-home .eh-fp__topbar-right {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 4px;
flex-shrink: 0;
}
/* Progress ring */
.envisio-home .eh-fp__progress-ring {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.envisio-home .eh-fp__ring-bg {
fill: none;
stroke: rgba(255,255,255,0.1);
stroke-width: 3;
}
.envisio-home .eh-fp__ring-fill {
fill: none;
stroke: var(--gold);
stroke-width: 3;
stroke-linecap: round;
/* circumference of r=16 circle � 100.5 */
stroke-dasharray: 100.5;
stroke-dashoffset: 100.5; /* JS drives this */
transform: rotate(-90deg);
transform-origin: center;
transition: stroke-dashoffset 0.15s linear;
}
.envisio-home .eh-fp__ring-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,0.8);
pointer-events: none;
}
/* View All link */
.envisio-home .eh-fp__view-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.65);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease, gap 0.2s ease;
}
.envisio-home .eh-fp__view-all:hover {
color: #fff;
gap: 12px;
}
/* -- Thin progress bar -- */
.envisio-home .eh-fp__bar-track {
width: 100%;
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 1px;
margin-bottom: 24px;
overflow: hidden;
}
.envisio-home .eh-fp__bar-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--gold), var(--blue-mid));
border-radius: 1px;
transition: width 0.12s linear;
}
/* -- Viewport -- */
.envisio-home .eh-fp__viewport {
overflow: hidden;
/* peek: extend past inner padding so 4th card is partially visible */
margin-right: -48px;
}
/* -- Track -- */
.envisio-home .eh-fp__track {
display: flex;
gap: 20px;
/* NO transition here � JS uses RAF for smooth scroll-driven motion */
will-change: transform;
}
/* -- Card wrapper � 3 visible, 4th peeking -- */
.envisio-home .eh-fp__card-wrap {
flex: 0 0 calc((100vw - 96px - 20px * 2) / 3.25);
min-width: 0;
}
/* -- Card -- */
.envisio-home .eh-fp-card {
display: block;
position: relative;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
background: #0d1b3e;
height: clamp(380px, 50vh, 580px);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.envisio-home .eh-fp-card:hover {
transform: translateY(-5px);
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.envisio-home .eh-fp-card__img {
position: absolute;
inset: 0;
overflow: hidden;
}
.envisio-home .eh-fp-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.0);
transition: transform 0.08s linear;
will-change: transform;
}
.envisio-home .eh-fp-card:hover .eh-fp-card__img img {
transform: scale(1.12) !important;
}
.envisio-home .eh-fp-card__body {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px;
background: linear-gradient(
to top,
rgba(5,10,20,0.93) 0%,
rgba(5,10,20,0.5) 42%,
transparent 72%
);
z-index: 2;
}
.envisio-home .eh-fp-card__badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
padding: 4px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
border-radius: 4px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.envisio-home .eh-fp-card__text {
display: flex;
flex-direction: column;
gap: 4px;
}
.envisio-home .eh-fp-card__name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 1.15;
margin: 0;
}
.envisio-home .eh-fp-card__meta {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-body);
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-top: 2px;
}
.envisio-home .eh-fp-card__meta svg { flex-shrink: 0; opacity: 0.7; }
.envisio-home .eh-fp-card__type {
font-family: var(--font-body);
font-size: 11px;
color: rgba(255,255,255,0.4);
}
/* -- Bottom bar -- */
.envisio-home .eh-fp__bottombar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
/* "Scroll to explore" hint � fades out once scrolling starts */
.envisio-home .eh-fp__scroll-hint {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.35);
transition: opacity 0.4s ease;
}
.envisio-home .eh-fp__scroll-hint.is-hidden {
opacity: 0;
pointer-events: none;
}
.envisio-home .eh-fp__arrows {
display: flex;
gap: 10px;
}
.envisio-home .eh-fp__arrow {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.05);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
.envisio-home .eh-fp__arrow:hover:not(:disabled) {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.45);
transform: scale(1.1);
}
.envisio-home .eh-fp__arrow:disabled { opacity: 0.28; cursor: default; }
/* -- Responsive -- */
/* Tablet: 2 cards visible */
@media (max-width: 1024px) {
.envisio-home .eh-fp__inner { padding: 0 32px; }
.envisio-home .eh-fp__viewport { margin-right: -32px; }
.envisio-home .eh-fp__card-wrap {
flex: 0 0 calc((100vw - 64px - 20px) / 2.2);
}
}
/* Mobile: 1 card + peek, native scroll fallback */
@media (max-width: 640px) {
.envisio-home .eh-fp__scroller { height: auto !important; }
.envisio-home .eh-fp__sticky {
position: relative;
height: auto;
padding: 52px 0 40px;
}
.envisio-home .eh-fp__inner { padding: 0 20px; }
.envisio-home .eh-fp__topbar { flex-wrap: wrap; align-items: flex-start; }
.envisio-home .eh-fp__viewport {
overflow-x: auto;
overflow-y: visible;
margin-right: -20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.envisio-home .eh-fp__viewport::-webkit-scrollbar { display: none; }
.envisio-home .eh-fp__track {
transform: none !important; /* JS disabled on mobile */
}
.envisio-home .eh-fp__card-wrap {
flex: 0 0 78vw;
}
.envisio-home .eh-fp-card { height: 420px; }
.envisio-home .eh-fp__bar-track { display: none; }
.envisio-home .eh-fp__scroll-hint { display: none; }
}
/* --------------------------------------
WHY CHOOSE US
-------------------------------------- */
.envisio-home .eh-why2 {
background: var(--white);
padding: var(--section-y) 0;
}
.envisio-home .eh-why2__wrap {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.envisio-home .eh-why2__head {
max-width: 560px;
margin-bottom: 48px;
}
.envisio-home .eh-why2__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border-soft);
border: 1px solid var(--border-soft);
border-radius: var(--card-radius);
overflow: hidden;
}
@media (max-width: 768px) {
.envisio-home .eh-why2__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.envisio-home .eh-why2__grid { grid-template-columns: 1fr; }
}
.envisio-home .eh-why2-card {
background: var(--white);
padding: 32px 28px;
transition: background 0.25s ease;
}
.envisio-home .eh-why2-card:hover {
background: var(--gray-bg);
}
.envisio-home .eh-why2-card__num {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
color: var(--gold);
margin-bottom: 14px;
}
.envisio-home .eh-why2-card__title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 10px;
}
.envisio-home .eh-why2-card__body {
font-size: 14px;
color: var(--muted);
line-height: 1.65;
margin: 0;
}
/* --------------------------------------
PARALLAX BANNER
-------------------------------------- */
.envisio-home .eh-parallax {
position: relative;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
}
.envisio-home .eh-parallax__bg {
position: absolute;
inset: -42%;
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
will-change: transform;
transform: scale(1.1);
transform-origin: center center;
}
.envisio-home .eh-parallax__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(13,27,62,0.82) 0%, rgba(27,63,122,0.70) 100%);
}
.envisio-home .eh-parallax__inner {
position: relative;
z-index: 2;
max-width: 900px;
padding: 80px 24px;
}
.envisio-home .eh-parallax__headline {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
color: var(--white);
line-height: 1.12;
letter-spacing: -0.5px;
margin: 0 0 20px;
}
.envisio-home .eh-parallax__headline em {
font-style: normal;
color: var(--gold);
}
.envisio-home .eh-parallax__sub {
font-size: 15px;
color: rgba(255,255,255,0.70);
letter-spacing: 0.5px;
margin: 0 0 40px;
}
/* Promise pillars row */
.envisio-home .eh-parallax__pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 44px;
}
@media (max-width: 640px) {
.envisio-home .eh-parallax__pillars { grid-template-columns: repeat(2, 1fr); }
}
.envisio-home .eh-parallax__pillar {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 22px 12px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.envisio-home .eh-parallax__pillar:hover {
background: rgba(255,255,255,0.09);
border-color: rgba(201,168,76,0.4);
transform: translateY(-3px);
}
.envisio-home .eh-parallax__pillar-icon {
display: flex;
color: var(--gold);
}
.envisio-home .eh-parallax__pillar-icon svg { width: 26px; height: 26px; }
.envisio-home .eh-parallax__pillar-label {
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.3px;
color: rgba(255,255,255,0.9);
text-align: center;
line-height: 1.3;
}
.envisio-home .eh-btn-white {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
padding: 13px 30px;
border-radius: var(--btn-radius);
background: var(--white);
color: var(--navy);
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.envisio-home .eh-btn-white:hover {
background: var(--gold);
color: var(--white);
}
/* --------------------------------------
/* --------------------------------------
TRUST � Dual Marquee
-------------------------------------- */
.envisio-home .eh-trust {
background: #f8f7f4;
position: relative;
}
.envisio-home .eh-trust__container {
position: relative;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px 120px;
}
/* -- Decorative vertical grid lines -- */
.envisio-home .eh-trust__grid-lines {
position: absolute;
inset: 0;
display: flex;
align-items: stretch;
justify-content: center;
gap: 120px;
pointer-events: none;
z-index: 0;
}
.envisio-home .eh-trust__grid-lines span {
width: 1px;
background: rgba(0,0,0,0.07);
flex-shrink: 0;
}
/* -- Header -- */
.envisio-home .eh-trust__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
padding: 56px 0 40px;
position: relative;
z-index: 1;
}
.envisio-home .eh-trust__heading {
display: flex;
flex-direction: column;
flex: 1;
min-width: 200px;
}
.envisio-home .eh-trust__title {
font-family: 'Georgia','Times New Roman',serif;
font-size: clamp(32px,4vw,56px);
font-weight: 400;
line-height: 1.0;
color: #111;
letter-spacing: -0.5px;
margin: 0;
}
.envisio-home .eh-trust__kicker {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 2.5px;
text-transform: uppercase;
color: #999;
margin-top: 10px;
}
.envisio-home .eh-trust__side-links {
display: flex;
gap: 24px;
padding-bottom: 8px;
}
.envisio-home .eh-trust__side-link {
font-family: var(--font-display);
font-size: 10px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: #aaa;
text-decoration: none;
transition: color 0.2s ease;
}
.envisio-home .eh-trust__side-link:hover { color: #111; }
/* -- Marquee rows -- */
.envisio-home .eh-trust__marquee-row {
display: flex;
align-items: stretch;
position: relative;
z-index: 1;
}
.envisio-home .eh-trust__marquee-row--bottom {
margin-top: 80px;
}
/* top: marquee 70% left, ctrl 30% right */
.envisio-home .eh-trust__marquee-row--top .eh-trust__marquee { flex: 0 0 70%; max-width: 70%; padding-left: 0; padding-right: 24px; }
.envisio-home .eh-trust__marquee-row--top .eh-trust__marquee-ctrl { flex: 0 0 30%; border-left: 1px solid #e0ddd8; }
/* bottom: ctrl 30% left, marquee 70% right */
.envisio-home .eh-trust__marquee-row--bottom .eh-trust__marquee-ctrl { flex: 0 0 30%; border-right: 1px solid #e0ddd8; }
.envisio-home .eh-trust__marquee-row--bottom .eh-trust__marquee { flex: 0 0 70%; max-width: 70%; }
/* -- Marquee strip -- */
.envisio-home .eh-trust__marquee {
overflow: hidden;
line-height: 0;
padding: 16px 0; /* vertical space so drop-shadow isn't clipped */
margin: -16px 0; /* pull back so layout doesn't shift */
}
.envisio-home .eh-trust__marquee-track {
display: flex;
gap: 14px;
width: max-content;
padding: 0 7px;
will-change: transform;
}
@keyframes trust-scroll-right {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes trust-scroll-left {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* -- Marquee image items � exactly 2 per view -- */
.envisio-home .eh-trust__marquee-item {
flex-shrink: 0;
width: calc(50% - 7px);
height: 200px;
overflow: hidden;
border-radius: 6px;
box-shadow: 0 4px 20px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.envisio-home .eh-trust__marquee-item:hover {
box-shadow: 0 12px 36px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
transform: translateY(-3px);
}
.envisio-home .eh-trust__marquee-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
will-change: transform;
}
/* -- Control area -- */
.envisio-home .eh-trust__marquee-ctrl {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
padding: 24px 16px;
}
.envisio-home .eh-trust__btn-row {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Square flat icon buttons � no circle */
.envisio-home .eh-trust__arrow-link {
width: 44px;
height: 36px;
border: none;
border-bottom: 2px solid #ccc;
border-radius: 0;
background: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #555;
flex-shrink: 0;
transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.envisio-home .eh-trust__arrow-link:hover {
border-color: #111;
color: #111;
transform: translateX(3px);
}
.envisio-home .eh-trust__arrow-link[data-trust-dir="-1"]:hover {
transform: translateX(-3px);
}
.envisio-home .eh-trust__ctrl-label { text-align: center; }
.envisio-home .eh-trust__meta-label {
font-family: var(--font-display);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #bbb;
}
.envisio-home .eh-trust__meta-value {
font-family: 'Georgia',serif;
font-size: 18px;
color: #111;
line-height: 1;
margin-top: 4px;
}
/* -- Mobile -- */
@media (max-width: 640px) {
.envisio-home .eh-trust__container { padding: 0 16px 80px; }
.envisio-home .eh-trust__header { padding: 36px 0 28px; flex-direction: column; align-items: flex-start; gap: 16px; }
.envisio-home .eh-trust__marquee-item { width: 200px; height: 130px; }
.envisio-home .eh-trust__marquee-row--bottom { margin-top: 40px; }
}
/* �� Landowner banner with image background �� */
.envisio-home .eh-banner__bg-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.13;
z-index: 0;
}
.envisio-home .eh-banner--img::before { z-index: 1; }
.envisio-home .eh-banner--img .eh-banner__inner { position: relative; z-index: 2; }
/* �� Hero arrow hover state �� */
.envisio-home .eh-hero__arrow:hover {
background: rgba(255,255,255,0.2);
}
/* �� Why ribbon polish �� */
.envisio-home .eh-why__ribbon {
border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
box-shadow: 2px 2px 12px rgba(201,168,76,0.3);
}
/* �� Stat card accent line on mobile �� */
@media (max-width: 767px) {
.envisio-home .eh-stat-card:nth-child(2n) { border-right: none; }
}
/* ================================================================
FORTRESS-INSPIRED REDESIGN LAYER
================================================================ */
/* Serif token */
.envisio-home { --font-serif: 'Playfair Display', Georgia, serif; }
/* -- Serif heading modifier -- */
.envisio-home .eh-serif {
font-family: var(--font-serif) !important;
font-style: italic;
letter-spacing: -0.5px;
}
.envisio-home .eh-serif em { font-style: normal; color: var(--royal); }
/* -- About � watermark (editorial bg text) -- */
.envisio-home .eh-about__watermark {
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: clamp(64px, 12vw, 160px);
font-weight: 900;
color: rgba(13, 27, 62, 0.045);
white-space: nowrap;
pointer-events: none;
z-index: 0;
letter-spacing: -4px;
line-height: 1;
user-select: none;
}
.envisio-home .eh-about__img,
.envisio-home .eh-about__text { position: relative; z-index: 1; }
.envisio-home .eh-about__text { background: transparent; }
/* -- Stats band � editorial separators -- */
.envisio-home .eh-stat-card { position: relative; }
.envisio-home .eh-stat-card::before {
content: '';
position: absolute;
top: 20%; left: 0;
width: 1px; height: 60%;
background: rgba(255,255,255,0.1);
}
.envisio-home .eh-stat-card:first-child::before { display: none; }
/* -- Project list � accordion rows -- */
.envisio-home .eh-proj-list { border-top: 1px solid var(--border); }
.envisio-home .eh-proj-item {
display: grid;
grid-template-columns: 1fr 44px;
align-items: center;
gap: 16px;
padding: 26px 0;
border-bottom: 1px solid var(--border);
text-decoration: none;
transition: padding-left 0.28s ease;
}
@media (min-width: 768px) {
.envisio-home .eh-proj-item { grid-template-columns: 1fr 150px 44px; gap: 28px; }
}
.envisio-home .eh-proj-item:hover { padding-left: 18px; }
.envisio-home .eh-proj-item.is-hidden { display: none; }
.envisio-home .eh-proj-item__left {
display: flex;
align-items: center;
gap: 20px;
min-width: 0;
}
.envisio-home .eh-proj-item__num {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
color: var(--muted);
flex-shrink: 0;
min-width: 22px;
}
.envisio-home .eh-proj-item__info { min-width: 0; }
.envisio-home .eh-proj-item__name {
font-family: var(--font-serif);
font-size: clamp(20px, 2.8vw, 30px);
font-weight: 700;
color: var(--text);
line-height: 1.15;
margin-bottom: 5px;
transition: color 0.2s ease;
}
.envisio-home .eh-proj-item:hover .eh-proj-item__name { color: var(--royal); }
.envisio-home .eh-proj-item__meta {
font-size: 13px; color: var(--muted);
margin: 0; font-family: var(--font-body);
}
.envisio-home .eh-proj-item__status {
font-size: 10px; font-weight: 500; letter-spacing: 0.5px;
text-transform: uppercase; padding: 4px 10px;
border-radius: 20px; flex-shrink: 0;
}
.envisio-home .eh-proj-item__thumb {
width: 150px; height: 94px;
object-fit: cover; border-radius: 4px;
display: none; opacity: 0;
transition: opacity 0.35s ease; flex-shrink: 0;
}
@media (min-width: 768px) { .envisio-home .eh-proj-item__thumb { display: block; } }
.envisio-home .eh-proj-item:hover .eh-proj-item__thumb { opacity: 1; }
.envisio-home .eh-proj-item__arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
color: var(--muted); flex-shrink: 0;
transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.envisio-home .eh-proj-item:hover .eh-proj-item__arrow {
background: var(--royal); border-color: var(--royal);
color: var(--white); transform: translateX(4px);
}
/* -- Projects section bg -- */
.envisio-home .eh-projects { background: var(--white); }
/* -- Testimonials � dark, portrait layout -- */
.envisio-home .eh-testimonial {
background: linear-gradient(180deg, rgba(13,27,62,0.88) 0%, rgba(13,27,62,0.94) 100%), url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1920&q=80') center / cover no-repeat;
}
.envisio-home .eh-testimonial .eh-section-tag { color: rgba(255,255,255,0.5); }
.envisio-home .eh-testimonial .eh-section-tag::before { background: rgba(255,255,255,0.5); }
.envisio-home .eh-testimonial .eh-display-h2 { color: var(--white); }
.envisio-home .eh-testimonial .eh-tab {
background: transparent; border-color: rgba(255,255,255,0.18);
color: rgba(255,255,255,0.55);
}
.envisio-home .eh-testimonial .eh-tab.is-active {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.3);
color: var(--white);
}
.envisio-home .eh-testimonial-card {
background: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.09);
border-top: 3px solid var(--gold);
box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.envisio-home .eh-testimonial-card__text { color: rgba(255,255,255,0.82); }
.envisio-home .eh-testi-name { color: var(--white); }
.envisio-home .eh-testi-role { color: rgba(255,255,255,0.5); }
.envisio-home .eh-testimonial__quote-bg { color: rgba(255,255,255,0.025); }
.envisio-home .eh-testi-dot { background: rgba(255,255,255,0.2); }
.envisio-home .eh-testi-dot.is-active { background: var(--gold); transform: scale(1.3); }
.envisio-home .eh-testi-avatar {
background: rgba(255,255,255,0.1);
color: var(--white);
}
/* Portrait card layout (when a client photo exists): a large circular
photo badge centered at the top of the card (via `order` on the
author block, no DOM change needed) instead of the earlier edge-to-
edge banner — bigger, more premium, and matches the avatar-initials
cards' "person first" structure so both kinds read consistently. */
.envisio-home .eh-testi-portrait-grid {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
text-align: center;
max-width: none;
margin: 0;
}
.envisio-home .eh-testi-portrait-wrap {
order: -1;
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--gold);
overflow: hidden;
margin: 0 0 10px;
}
.envisio-home .eh-testi-portrait {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
.envisio-home .eh-testi-portrait-body {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
width: 100%;
}
.envisio-home .eh-testi-portrait-body .eh-testimonial-card__text { text-align: center; font-size: 13.5px; }
.envisio-home .eh-testi-portrait-body .eh-testi-author { align-items: center; }
/* -- Connect CTA — full-bleed photo section (matches CSR/News/
Testimonials/Concerns: background lives on the itself,
not a nested boxed panel) -- */
.envisio-home .eh-connect {
padding: var(--section-y) 0;
background: linear-gradient(180deg, rgba(13,27,62,0.85) 0%, rgba(13,27,62,0.92) 100%), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1600&q=80') center / cover no-repeat;
}
.envisio-home .eh-connect__panel {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.envisio-home .eh-connect__wrap {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: center;
}
@media (min-width: 992px) {
.envisio-home .eh-connect__wrap { grid-template-columns: 1fr 1fr; }
}
.envisio-home .eh-connect .eh-section-tag { color: rgba(255,255,255,0.55); }
.envisio-home .eh-connect .eh-section-tag::before { background: rgba(255,255,255,0.35); }
.envisio-home .eh-connect .eh-body { color: rgba(255,255,255,0.72); }
.envisio-home .eh-connect__heading {
font-family: var(--font-serif);
font-size: clamp(36px, 5vw, 60px);
font-weight: 700;
font-style: italic;
line-height: 1.05;
letter-spacing: -1px;
color: var(--white);
margin: 0 0 20px;
}
.envisio-home .eh-connect__heading em { font-style: normal; color: var(--gold); }
.envisio-home .eh-connect__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.envisio-home .eh-connect .eh-btn-outline {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 600;
letter-spacing: 0.3px; background: transparent;
color: var(--white); border: 1px solid rgba(255,255,255,0.4);
border-radius: var(--btn-radius); padding: 14px 28px;
text-decoration: none; transition: all 0.2s ease;
}
.envisio-home .eh-connect .eh-btn-outline:hover {
background: var(--white); color: var(--navy); border-color: var(--white);
}
.envisio-home .eh-connect__meta {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.envisio-home .eh-connect__meta-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: rgba(255,255,255,0.65);
}
.envisio-home .eh-connect__meta-icon {
display: flex;
flex-shrink: 0;
color: var(--gold);
}
.envisio-home .eh-connect__meta-icon svg { width: 18px; height: 18px; }
.envisio-home .eh-connect__media {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--card-radius);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.25);
box-shadow: 0 24px 50px rgba(0,0,0,0.3);
}
.envisio-home .eh-connect__media img {
width: 100%; height: 100%; object-fit: cover;
}
/* -- Gallery � 5-tile mosaic grid -- */
.envisio-home .eh-gallery {
padding: 0;
background: var(--navy);
}
.envisio-home .eh-gallery__head {
display: none;
padding: 60px 24px 40px;
max-width: var(--container);
margin: 0 auto;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.envisio-home .eh-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 260px;
gap: 3px;
}
.envisio-home .eh-gal-item {
position: relative;
overflow: hidden;
cursor: pointer;
display: block;
text-decoration: none;
}
.envisio-home .eh-gal-item:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}
.envisio-home .eh-gal-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.envisio-home .eh-gal-bg img {
will-change: transform;
}
.envisio-home .eh-gal-overlay {
position: absolute;
inset: 0;
background: rgba(13, 12, 10, 0);
transition: background 0.4s ease;
z-index: 1;
}
.envisio-home .eh-gal-item:hover .eh-gal-overlay {
background: rgba(13, 12, 10, 0.45);
}
.envisio-home .eh-gal-caption {
position: absolute;
bottom: 16px;
left: 20px;
z-index: 2;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.35s ease, transform 0.35s ease;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
color: var(--white);
letter-spacing: 0.5px;
}
.envisio-home .eh-gal-item:hover .eh-gal-caption {
opacity: 1;
transform: translateY(0);
}
.envisio-home .eh-gal-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.7);
z-index: 2;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,0.55);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
opacity: 0;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.envisio-home .eh-gal-item:hover .eh-gal-icon {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
@media (max-width: 768px) {
.envisio-home .eh-gallery__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
.envisio-home .eh-gal-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
.envisio-home .eh-gallery__grid { grid-auto-rows: 160px; gap: 2px; }
}
/* ══════════════════════════════════════
ABOUT — Scroll-Jacking Sticky Section
SINGLE SOURCE OF TRUTH — do not add more eh-about__slide rules
══════════════════════════════════════ */
/* Section: allow overflow so sticky works */
.envisio-home .eh-about { overflow: visible !important; }
.envisio-home .eh-about__container { overflow: visible !important; }
/* Scroller: tall wrapper, JS sets exact height */
.envisio-home .eh-about__grid-scroller {
position: relative;
}
/* Sticky grid: locks in place while user scrolls through cards.
NOTE: an earlier version centered this with `transform: translateY(-50%)`.
That's wrong here — transform is unconditional, applied to the box's
current layout position whether it's actually stuck or still in normal
flow. That permanently shifted the whole block ~half its own height
upward at all scroll positions, bleeding it into whatever section
precedes it in the DOM.
Fix: no transform. `top` is a fixed px length (not a %, which would
resolve against the tall .eh-about__grid-scroller runway instead of the
viewport — see git history). `min-height` makes the box fill the
visible viewport below the header once space allows (never clips
shorter viewports, since min- not fixed height), and `align-content:
center` centers the single content row inside that box — real
centering achieved through internal layout, not an external offset. */
.envisio-home .eh-about__grid {
position: sticky !important;
top: var(--ev-nav-h, 72px) !important;
min-height: calc(100vh - var(--ev-nav-h, 72px)) !important;
height: auto !important;
overflow: visible !important;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 32px;
align-content: center;
align-items: start;
}
@media (max-width: 767px) {
.envisio-home .eh-about__grid {
position: relative !important;
top: auto !important;
min-height: 0 !important;
align-content: start;
}
.envisio-home .eh-about__grid-scroller { height: auto !important; }
}
/* Sidebar always visible */
.envisio-home .eh-about__sidebar {
overflow-y: visible !important;
max-height: none !important;
}
/* Main content: spans 9 cols on desktop */
@media (min-width: 1024px) {
.envisio-home .eh-about__main-content { grid-column: 1 / 10; }
.envisio-home .eh-about__sidebar { grid-column: 10 / 13; }
}
/* Content wrapper: reset old 12-col grid so slide controls its own layout */
.envisio-home .eh-about__content {
display: block !important;
grid-template-columns: none !important;
}
/* Slides — only the active one shows */
.envisio-home .eh-about__slide { display: none !important; }
.envisio-home .eh-about__slide.is-active {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
animation: ehSlideIn 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ehSlideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 767px) {
.envisio-home .eh-about__slide.is-active {
grid-template-columns: 1fr !important;
animation: none !important;
}
}
/* Image: reset inherited grid-column, fill column fully */
.envisio-home .eh-about__slide .eh-about__image-wrap {
grid-column: auto !important;
display: flex !important;
height: 322px;
width: 90%;
overflow: hidden;
min-height: unset !important;
box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.18);
}
.envisio-home .eh-about__slide .eh-about__image-wrap img {
width: 100% !important;
height: 100% !important;
min-height: unset !important;
object-fit: cover;
display: block;
box-shadow: 8px 12px 32px rgba(0, 0, 0, 0.18);
}
/* Text: reset grid-column, vertically centered next to image */
.envisio-home .eh-about__slide .eh-about__text-wrap {
grid-column: auto !important;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 0 !important;
padding-left: 8px;
}
.envisio-home .eh-about__cta { width: 50%; }
/* Active card accent line */
.envisio-home .eh-about__article-item { position: relative; cursor: pointer; }
.envisio-home .eh-about__article-item.is-active { background: white; }
.envisio-home .eh-about__article-item::before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: #1B3F7A;
border-radius: 2px;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.envisio-home .eh-about__article-item.is-active::before { transform: scaleY(1); }
.envisio-home .eh-about__article-item.is-active .eh-about__article-kicker { color: #1B3F7A; }
/* ── About slide image: slightly smaller ── */
.envisio-home .eh-about__slide.is-active .eh-about__image-wrap img {
min-height: 280px !important;
max-height: 340px !important;
}
/* ══ Home page animations (envisio-home-anim.js) ══ */
/* Hero video wrap: allow tilt without overflow */
.envisio-home .eh-hero__video-wrap {
will-change: transform;
overflow: hidden;
}
/* Card hover — base transition (reveal JS will prepend opacity/transform) */
.envisio-home .eh-concern-card,
.envisio-home .eh-why2-card,
.envisio-home .eh-sister-card {
will-change: transform;
}
/* Magnetic btn — prevent layout shift */
.envisio-home .eh-btn-primary,
.envisio-home .eh-btn-white,
.envisio-home .eh-btn-outline {
will-change: transform;
display: inline-flex;
}
/* Cursor glow: never block clicks */
#eh-cursor-glow {
pointer-events: none !important;
}
/* Stagger reveal for why/concern/csr/news cards */
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(1) { transition-delay: 0.05s; }
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(2) { transition-delay: 0.13s; }
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(3) { transition-delay: 0.21s; }
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(4) { transition-delay: 0.29s; }
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(5) { transition-delay: 0.37s; }
.envisio-home .eh-why2-card.eh-reveal-item:nth-child(6) { transition-delay: 0.45s; }
.envisio-home .eh-concern-card.eh-reveal-item:nth-child(1) { transition-delay: 0.05s; }
.envisio-home .eh-concern-card.eh-reveal-item:nth-child(2) { transition-delay: 0.15s; }
.envisio-home .eh-concern-card.eh-reveal-item:nth-child(3) { transition-delay: 0.25s; }
.envisio-home .eh-concern-card.eh-reveal-item:nth-child(4) { transition-delay: 0.35s; }
.envisio-home .eh-csr-card.eh-reveal-item:nth-child(1) { transition-delay: 0.05s; }
.envisio-home .eh-csr-card.eh-reveal-item:nth-child(2) { transition-delay: 0.15s; }
.envisio-home .eh-csr-card.eh-reveal-item:nth-child(3) { transition-delay: 0.25s; }
.envisio-home .eh-csr-card.eh-reveal-item:nth-child(4) { transition-delay: 0.35s; }
.envisio-home .eh-sister-card.eh-reveal-item:nth-child(1) { transition-delay: 0.05s; }
.envisio-home .eh-sister-card.eh-reveal-item:nth-child(2) { transition-delay: 0.1s; }
.envisio-home .eh-sister-card.eh-reveal-item:nth-child(3) { transition-delay: 0.15s; }
.envisio-home .eh-sister-card.eh-reveal-item:nth-child(4) { transition-delay: 0.2s; }
/* Home 2 (template-home2.php) only: CONCERNS / TESTIMONIALS / CSR /
OUR SISTER CONCERNS / CONNECT CTA — content width stays 1280px
(already the site convention via .eh-block__wrap / .eh-concerns__wrap
/ etc.), vertical padding tightened to 24px on this variant. Scoped
to the Home 2 page template so the live Home page is unaffected. */
body.page-template-template-home2-php .envisio-home .eh-concerns,
body.page-template-template-home2-php .envisio-home .eh-testimonial,
body.page-template-template-home2-php .envisio-home .eh-csr,
body.page-template-template-home2-php .envisio-home .eh-sister-concerns,
body.page-template-template-home2-php .envisio-home .eh-connect {
padding-top: 96px;
padding-bottom: 96px;
}
.envisio-home .eh-sister-card.eh-reveal-item:nth-child(5) { transition-delay: 0.25s; }