/* ==========================================================
Hero slider — vb-* classes only, so theme CSS can't touch it.
========================================================== */
.vb-hero {
/* Colours */
--vb-bg: #131315; /* page colour the image fades into */
--vb-accent: #283895; /* lines + button (reference: #E5141D) */
--vb-accent-dark: #1D2A72;
--vb-accent-text: #8C9BF0; /* accent words (reference: #E5141D) */
--vb-white: #FFFFFF;
--vb-desc: rgba(255, 255, 255, .72);
/* Type */
--vb-display: var(--ev-display);
--vb-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Layout */
--vb-height: clamp(620px, 100vh, 900px);
--vb-max: 1440px; /* content width */
--vb-side: 60px; /* left/right padding */
--vb-top-space: 150px; /* header sitting over the slider; use 40px if not */
--vb-bottom-space: 60px; /* gap under the title */
position: relative;
height: var(--vb-height);
background: var(--vb-bg);
overflow: hidden;
}
.vb-hero *, .vb-hero *::before, .vb-hero *::after { box-sizing: border-box; }
/* Fail-safe: show the first slide even before / without Owl */
.vb-hero .vb-slider { display: block; height: 100%; }
.vb-hero .vb-slider:not(.owl-loaded) .vb-slide ~ .vb-slide { display: none; }
.vb-hero .owl-stage-outer,
.vb-hero .owl-stage,
.vb-hero .owl-item { height: 100%; }
/* ---------- Slide ---------- */
.vb-slide {
position: relative;
height: var(--vb-height);
background-color: var(--vb-bg);
background-size: cover;
background-position: center;
}
/* Overlay: darker top for header, darker right for text, fade at bottom */
.vb-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: var(--vb-top-space) 0 var(--vb-bottom-space);
background:
linear-gradient(180deg,
rgba(10, 10, 12, .35) 0%,
rgba(10, 10, 12, 0) 18%,
rgba(10, 10, 12, 0) 45%,
rgba(10, 10, 12, .18) 60%,
rgba(13, 13, 15, .45) 78%,
rgba(19, 19, 21, .72) 92%,
var(--vb-bg) 100%),
linear-gradient(90deg,
rgba(10, 10, 12, .22) 0%,
rgba(10, 10, 12, .28) 55%,
rgba(10, 10, 12, .45) 100%);
}
.vb-wrap {
display: grid;
/* Single column: the badge, eyebrow, title, copy and button all stack
inside .vb-main. The old second column held the badge and copy. */
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 3rem;
width: 100%;
max-width: var(--vb-max);
margin: 0 auto;
padding: 0 var(--vb-side);
}
/* ---------- Eyebrow ---------- */
.vb-eyebrow {
position: relative;
display: inline-block;
margin: 0 0 1.4rem;
padding: 9px 0 8px;
font-family: var(--vb-display);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: .62em;
text-transform: uppercase;
color: var(--vb-white);
}
.vb-eyebrow::before,
.vb-eyebrow::after {
content: "";
position: absolute;
height: 2px;
background: var(--vb-accent);
}
.vb-eyebrow::before { left: 0; bottom: 0; width: 51%; }
.vb-eyebrow::after { right: 0; top: 0; width: 49%; }
/* ---------- Title ---------- */
.vb-title {
margin: 0;
max-width: 16.5em;
font-family: var(--vb-display);
font-size: clamp(2.4rem, 5vw, 90px);
font-weight: 800 !important;
line-height: 1.28;
letter-spacing: -.01em;
text-transform: capitalize;
color: var(--vb-white);
}
.vb-title span { color: var(--vb-accent-text); }
/* ---------- Button (not in the reference) ---------- */
.vb-btn {
display: inline-flex;
align-items: center;
margin-top: 2rem;
padding: 14px 22px;
border-radius: 4px;
background: var(--vb-accent);
color: var(--vb-white);
font-family: var(--vb-body);
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: background-color .2s ease;
}
.vb-btn:hover { background: var(--vb-accent-dark); color: var(--vb-white); text-decoration: none; }
.vb-btn:focus-visible { outline: 3px solid var(--vb-white); outline-offset: 3px; }
/* ---------- Description ---------- */
.vb-desc {
max-width: 100ch; /* it spans the full wrap now, so cap the measure */
margin-top: 1.25rem;
margin-bottom: 6px;
font-family: var(--vb-body);
font-size: 17px;
line-height: 1.97;
color: var(--vb-desc);
}
.vb-desc p { margin: 0 0 .6em; color: #fff; }
.vb-desc p:last-child { margin-bottom: 0; }
/* ---------- Crossfade ---------- */
.vb-hero .animated { animation-duration: .9s; animation-fill-mode: both; }
.vb-hero .vb-fade-out { animation-name: vb-fade-out; }
@keyframes vb-fade-out { from { opacity: 1; } to { opacity: 0; } }
/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
.vb-hero { --vb-side: 40px; --vb-bottom-space: 90px; }
.vb-wrap { grid-template-columns: 1fr; gap: 1.75rem; }
.vb-desc { max-width: 520px; margin-bottom: 0; }
}
/* ---------- Mobile ---------- */
/* ---------- Mobile: two rows, photo above, copy below ----------
The photo is a background on .vb-slide, so instead of letting it cover
the slide it is sized to the top band only and the overlay gradient goes
solid at the same stop. Content is pushed to the bottom row. */
@media (max-width: 767.98px) {
.vb-hero {
--vb-height: clamp(720px, 100vh, 820px);
--vb-side: 20px;
--vb-photo-h: 46%; /* height of the image row */
}
.vb-slide {
background-size: 100% var(--vb-photo-h);
background-position: top center;
background-repeat: no-repeat;
background-color: var(--vb-bg);
}
.vb-overlay {
align-items: flex-end;
padding: 0 0 44px;
background: linear-gradient(180deg,
rgba(10, 10, 12, .18) 0%, /* header no longer overlaps, so barely any shade */
rgba(10, 10, 12, .06) 18%,
rgba(10, 10, 12, 0) 32%,
var(--vb-bg) var(--vb-photo-h), /* solid from the photo edge down */
var(--vb-bg) 100%);
}
.vb-eyebrow { font-size: 11px; letter-spacing: .3em; margin-bottom: 1rem; }
.vb-title { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.12; }
.vb-desc { font-size: 14.5px; line-height: 1.75; }
.vb-btn { margin-top: 1.4rem; padding: 13px 20px; font-size: 15px; }
}
/* ---------- Small phones ---------- */
@media (max-width: 479.98px) {
.vb-hero { --vb-height: clamp(680px, 95vh, 700px); --vb-side: 18px; --vb-photo-h: 42%; }
.vb-title { font-size: clamp(27px, 9vw, 36px); }
/* Three lines of copy is plenty under a headline this size */
.vb-desc {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
}
@media (prefers-reduced-motion: reduce) {
.vb-hero .animated { animation: none; }
}
/* ==========================================================
Everest Caravans — About + Awards (v2)
========================================================== */
.ev-about {
--ev-ink: #0E1330; /* headings */
--ev-brand: #283895; /* buttons, icons */
--ev-brand-dark: #1D2A72;
--ev-tint: #EEF0FB; /* icon chips, frame */
--ev-tint-2: #DDE1F7; /* dashed track, frame */
--ev-text: #4A4F63;
--ev-bg: #FFFFFF;
--ev-font: "Poppins", "Segoe UI", system-ui, sans-serif;
--ev-max: 1540px;
--ev-side: 60px;
--ev-ease: cubic-bezier(.22, .7, .2, 1);
font-family: var(--ev-font);
color: var(--ev-text);
}
.ev-about * { box-sizing: border-box; }
/* ==========================================================
ABOUT
========================================================== */
.ev-about {
position: relative;
overflow: hidden; /* clips the vertical text */
isolation: isolate; /* keeps the dashed track behind, not off-section */
padding: 120px 0 0;
background: var(--ev-bg);
}
.ev-about__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 379px) minmax(0, 1.8fr) 91px;
align-items: center;
gap: 48px;
max-width: var(--ev-max);
margin: 0 auto;
padding: 0 var(--ev-side) 120px;
}
/* ---------- Photo ---------- */
.ev-about__frame {
position: relative;
isolation: isolate;
}
/* Offset tinted frame (from the blueprint), softened */
.ev-about__frame::before {
content: "";
inset: 18px -18px -18px 18px;
z-index: -1;
border-radius: 22px;
background: linear-gradient(145deg, var(--ev-tint-2), var(--ev-tint));
}
/* Background element 3: dot grid peeking out bottom-left */
.ev-about__frame::after {
content: "";
position: absolute;
left: -34px;
bottom: -34px;
z-index: -2;
width: 140px;
height: 140px;
background-image: radial-gradient(var(--ev-brand) 1.4px, transparent 1.6px);
background-size: 14px 14px;
opacity: .25;
}
.ev-about__frame img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 7 / 10;
object-fit: cover;
border-radius: 20px;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;}
/* Years badge: floating card overlapping the corner */
.ev-about__badge {
position: absolute;
right: 0px;
top: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 132px;
height: 132px;
border-radius: 10px 0px 0px 36px;
background: rgba(255, 255, 255, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 20px 40px -12px rgba(14, 19, 48, .28);
color: var(--ev-ink);
line-height: .95;
}
.ev-about__badge strong { font-size: 50px; font-weight: 700; letter-spacing: -.03em; }
.ev-about__badge span { margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--ev-text); }
/* ---------- Copy ---------- */
.ev-about__content { position: relative; z-index: 1; }
.ev-about__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
padding-bottom: 4px;
border-bottom: 1px solid var(--ev-ink);
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: var(--ev-ink);
}
.ev-about__eyebrow svg {
width: 24px;
height: 15px;
fill: none;
stroke: var(--ev-ink);
stroke-width: 1.3;
stroke-linejoin: round;
}
.ev-about__title {
margin: 0 0 22px;
/* max-width: 18ch; */
font-size: clamp(30px, 3.8vw, 38px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -.02em;
font-style: normal;
color: var(--ev-ink);
text-wrap: balance;
}
.ev-about__lead {
margin: 0 0 25px;
font-size: 15.5px;
line-height: 1.8;
}
/* Features: icon chips keep every row on the same baseline */
.ev-about__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 20px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.ev-about__features li {
display: flex;
align-items: center;
gap: 16px;
min-height: 52px;
font-size: 17.5px;
font-weight: 600;
line-height: 1.3;
color: var(--ev-ink);
}
.ev-about__chip {
display: grid;
place-items: center;
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 14px;
}
.ev-about__chip svg {
width: 40px;
height: 40px;
fill: none;
stroke: var(--ev-brand);
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Actions: both items share one height so they line up */
.ev-about__actions { display: flex; align-items: center; gap: 32px; }
.ev-about__btn,
.ev-about__link {
display: inline-flex;
align-items: center;
height: 48px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
}
.ev-about__btn {
padding: 0 30px;
border-radius: 999px;
background: var(--ev-brand);
color: #fff;
box-shadow: 0 12px 24px -10px rgba(40, 56, 149, .6);
transition: background-color .25s var(--ev-ease), transform .25s var(--ev-ease), box-shadow .25s var(--ev-ease);
}
.ev-about__btn:hover {
background: var(--ev-brand-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 16px 28px -10px rgba(40, 56, 149, .7);
}
.ev-about__link {
position: relative;
color: var(--ev-ink);
}
.ev-about__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 12px;
height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s var(--ev-ease);
}
.ev-about__link:hover { color: var(--ev-brand); }
.ev-about__link:hover::after { transform: scaleX(1); }
.ev-about__btn:focus-visible,
.ev-about__link:focus-visible { outline: 2px solid var(--ev-brand); outline-offset: 4px; border-radius: 999px; }
/* ---------- Decoration column ---------- */
.ev-about__deco {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
margin-top: -120px; /* vertical word runs off the top, like the blueprint */
}
/* Background element 4: dashed track running behind the caravan */
.ev-about__deco::before {
content: "";
position: absolute;
top: 0;
bottom: -60px;
left: 50%;
width: 0;
border-left: 2px dashed var(--ev-tint-2);
z-index: -1;
}
.ev-about__vertical {
writing-mode: vertical-rl;
transform: rotate(180deg);
padding: 8px 0;
background: var(--ev-bg);
font-size: 85px;
font-weight: 500;
line-height: .9;
color: transparent;
-webkit-text-stroke: 1.3px var(--ev-ink);
white-space: nowrap;
}
.ev-about__topview {
width: 112px; /* fits the 120px deco track */
height: auto;
margin-top: 32px;
filter: drop-shadow(0 18px 18px rgba(14, 19, 48, .22));
}
/* ---------- One reveal on scroll (only when about.js runs) ---------- */
.ev-js .ev-about .ev-about__media,
.ev-js .ev-about .ev-about__content > * {
opacity: 0;
transition: opacity .9s var(--ev-ease), transform .9s var(--ev-ease);
}
.ev-js .ev-about .ev-about__media { transform: translateX(-32px); }
.ev-js .ev-about .ev-about__content > * { transform: translateY(18px); }
.ev-js .ev-about.is-in .ev-about__media,
.ev-js .ev-about.is-in .ev-about__content > * { opacity: 1; transform: none; }
.ev-js .ev-about.is-in .ev-about__content > :nth-child(2) { transition-delay: .08s; }
.ev-js .ev-about.is-in .ev-about__content > :nth-child(3) { transition-delay: .16s; }
.ev-js .ev-about.is-in .ev-about__content > :nth-child(4) { transition-delay: .24s; }
.ev-js .ev-about.is-in .ev-about__content > :nth-child(5) { transition-delay: .32s; }
/* Right column slides in from the top of the section down to its place.
It travels its own full height, and .ev-about's overflow: hidden keeps
it out of sight until it crosses the top edge — so no fade is needed. */
.ev-js .ev-about .ev-about__deco {
transform: translateY(-100%);
transition: transform 2.4s var(--ev-ease);
}
.ev-js .ev-about.is-in .ev-about__deco {
transform: none;
transition-delay: .15s;
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 1279.98px) {
.ev-about__inner { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; }
.ev-about__deco { display: none; }
}
@media (max-width: 991.98px) {
.ev-about { --ev-side: 32px; }
.ev-about { padding-top: 80px; }
.ev-about__inner { grid-template-columns: 1fr; gap: 64px; padding-bottom: 80px; }
.ev-about__media { max-width: 460px; padding-right: 28px; }
}
@media (max-width: 575.98px) {
.ev-about { --ev-side: 20px; }
.ev-about__features { grid-template-columns: 1fr; gap: 14px; }
.ev-about__badge { right: -20px; width: 108px; height: 108px; }
.ev-about__badge strong { font-size: 40px; }
.ev-about__badge span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.ev-about__btn, .ev-about__link::after { transition: none; }
}
/* Awards "Journey" section styles moved to public/css/ev-journey.css
(loaded by resources/views/partials/ev-journey.blade.php) */
/* ==========================================================
Everest Caravans — "Lux Decor" (moved here from public/css/decor.css)
========================================================== */
/* Everest Caravans — "Lux Decor" section
Every rule is prefixed with .ev-decor so theme styles can't leak in. */
.ev-decor {
--ed-ink: #0E1330;
--ed-brand: #283895;
--ed-brand-dark: #1D2A72;
--ed-tint: #EEF0FB;
--ed-text: #555A6E;
--ed-rule: #E3E5EE;
--ed-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
--ed-max: 1440px;
--ed-side: 60px;
--ed-gap: 40px;
--ed-ease: cubic-bezier(.22, .7, .2, 1);
display: block;
margin: 0;
padding: 80px 0;
background: #fff;
font-family: var(--ed-font);
color: var(--ed-text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Reset inside the section */
.ev-decor *, .ev-decor *::before, .ev-decor *::after { box-sizing: border-box; }
.ev-decor h2, .ev-decor p, .ev-decor ul, .ev-decor li {
margin: 0; padding: 0;
font-family: var(--ed-font);
text-transform: none;
letter-spacing: normal;
}
.ev-decor ul { list-style: none; }
.ev-decor a, .ev-decor a:hover, .ev-decor a:focus, .ev-decor a:visited { text-decoration: none; }
.ev-decor img { max-width: none; border: 0; }
.ev-decor svg { display: block; flex: none; }
/* ---------- Two columns: main | side ----------
Both columns stretch to the same height, so the tall photo
on the right ends level with the feature list on the left. */
.ev-decor .ev-decor__inner {
display: grid;
grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
align-items: stretch;
gap: var(--ed-gap);
width: 100%;
max-width: var(--ed-max);
margin: 0 auto;
padding: 0 var(--ed-side);
}
/* ---------- Heading ---------- */
.ev-decor .ev-decor__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ed-brand);
}
.ev-decor .ev-decor__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.ev-decor .ev-decor__title {
max-width: 22ch;
margin: 0 0 28px;
font-size: clamp(32px, 4.4vw, 60px);
font-weight: 500;
line-height: 1.06;
font-style: normal;
letter-spacing: -.035em;
color: var(--ed-ink);
}
/* ---------- Video cover ---------- */
.ev-decor .ev-decor__media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 7.4;
background: var(--ed-ink);
}
.ev-decor .ev-decor__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ed-ease);
}
.ev-decor .ev-decor__media:hover .ev-decor__img { transform: scale(1.04); }
.ev-decor .ev-decor__play {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ed-brand);
color: #fff;
cursor: pointer;
transform: translate(-50%, -50%);
transition: background-color .25s ease, transform .3s var(--ed-ease);
}
.ev-decor .ev-decor__play svg { margin-left: 3px; fill: currentColor; }
/* soft pulse ring */
.ev-decor .ev-decor__play::before {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .55);
animation: ev-decor-pulse 2.2s ease-out infinite;
}
.ev-decor .ev-decor__play:hover { background: var(--ed-brand-dark); transform: translate(-50%, -50%) scale(1.06); }
.ev-decor .ev-decor__play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes ev-decor-pulse {
0% { transform: scale(.85); opacity: 1; }
100% { transform: scale(1.35); opacity: 0; }
}
/* ---------- Features: 2 x 2 with rules ---------- */
.ev-decor .ev-decor__features {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 24px;
margin-top: 18px;
}
.ev-decor .ev-decor__feature {
display: flex;
align-items: center;
gap: 16px;
min-height: 58px;
padding: 12px 0;
border-top: 1px solid var(--ed-rule);
}
.ev-decor .ev-decor__feature:nth-last-child(-n + 2) { border-bottom: 1px solid var(--ed-rule); }
.ev-decor .ev-decor__icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 4px;
color: var(--ed-brand);
}
.ev-decor .ev-decor__icon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.ev-decor .ev-decor__label {
font-size: 15px;
font-weight: 500;
line-height: 1.35;
color: var(--ed-ink);
}
/* ---------- Side column ---------- */
.ev-decor .ev-decor__side {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ev-decor .ev-decor__text {
margin: 0 0 26px;
font-size: 16px;
line-height: 1.7;
color: var(--ed-text);
}
.ev-decor .ev-decor__btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
padding: 0 22px;
border-radius: 4px;
background: var(--ed-brand);
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1;
transition: background-color .25s ease;
}
.ev-decor .ev-decor__btn svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .25s var(--ed-ease);
}
.ev-decor .ev-decor__btn:hover,
.ev-decor .ev-decor__btn:focus,
.ev-decor .ev-decor__btn:visited { color: #fff; }
.ev-decor .ev-decor__btn:hover { background: var(--ed-brand-dark); }
.ev-decor .ev-decor__btn:hover svg { transform: translateX(3px); }
.ev-decor .ev-decor__btn:focus-visible { outline: 2px solid var(--ed-brand); outline-offset: 3px; }
/* Tall photo fills the rest of the column */
.ev-decor .ev-decor__portrait {
position: relative;
flex: 1;
width: 100%;
min-height: 320px;
margin-top: 40px;
overflow: hidden;
background: var(--ed-ink);
}
.ev-decor .ev-decor__portrait img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Crossfade slideshow, CSS only.
Each slide holds for its share of the cycle, then dissolves into the next.
The hold has to match the number of slides, so the keyframes and delays are
keyed off data-ev-slides on the container. Two slides holding a quarter each
would leave the panel blank for half the loop. A lone image is left alone by
:only-child, so the markup degrades on its own. */
.ev-decor .ev-decor__portrait img {
opacity: 0;
animation: 5s linear infinite;
}
.ev-decor .ev-decor__portrait img:only-child { opacity: 1; animation: none; }
/* 2 slides — 10s loop, each holds half */
.ev-decor .ev-decor__portrait[data-ev-slides="2"] img {
animation-name: ev-decor-slide-2;
animation-duration: 10s;
}
.ev-decor .ev-decor__portrait[data-ev-slides="2"] img:nth-child(2) { animation-delay: 5s; }
/* 3 slides — 15s loop, each holds a third */
.ev-decor .ev-decor__portrait[data-ev-slides="3"] img {
animation-name: ev-decor-slide-3;
animation-duration: 15s;
}
.ev-decor .ev-decor__portrait[data-ev-slides="3"] img:nth-child(2) { animation-delay: 5s; }
.ev-decor .ev-decor__portrait[data-ev-slides="3"] img:nth-child(3) { animation-delay: 10s; }
/* 4 slides — 20s loop, each holds a quarter */
.ev-decor .ev-decor__portrait[data-ev-slides="4"] img {
animation-name: ev-decor-slide-4;
animation-duration: 20s;
}
.ev-decor .ev-decor__portrait[data-ev-slides="4"] img:nth-child(2) { animation-delay: 5s; }
.ev-decor .ev-decor__portrait[data-ev-slides="4"] img:nth-child(3) { animation-delay: 10s; }
.ev-decor .ev-decor__portrait[data-ev-slides="4"] img:nth-child(4) { animation-delay: 15s; }
@keyframes ev-decor-slide-2 {
0% { opacity: 0; }
8%, 50% { opacity: 1; }
58%, 100% { opacity: 0; }
}
@keyframes ev-decor-slide-3 {
0% { opacity: 0; }
5%, 33% { opacity: 1; }
38%, 100% { opacity: 0; }
}
@keyframes ev-decor-slide-4 {
0% { opacity: 0; }
4%, 25% { opacity: 1; }
29%, 100% { opacity: 0; }
}
/* ---------- Video popup ---------- */
.ev-decor__dialog {
width: min(960px, 92vw);
padding: 0;
border: 0;
border-radius: 8px;
background: #000;
overflow: visible;
}
.ev-decor__dialog::backdrop { background: rgba(8, 11, 30, .85); }
.ev-decor__frame { aspect-ratio: 16 / 9; }
.ev-decor__frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.ev-decor__close {
position: absolute;
top: -46px;
right: 0;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: #0E1330;
cursor: pointer;
}
.ev-decor__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
.ev-decor { --ed-side: 40px; --ed-gap: 32px; }
}
@media (max-width: 991.98px) {
.ev-decor { padding: 96px 0; }
.ev-decor .ev-decor__inner { grid-template-columns: 1fr; gap: 48px; }
.ev-decor .ev-decor__portrait { flex: none; height: 420px; }
}
@media (max-width: 639.98px) {
.ev-decor { --ed-side: 20px; padding: 80px 0; }
.ev-decor .ev-decor__features { grid-template-columns: 1fr; }
.ev-decor .ev-decor__feature:nth-last-child(-n + 2) { border-bottom: 0; }
.ev-decor .ev-decor__feature:last-child { border-bottom: 1px solid var(--ed-rule); }
.ev-decor .ev-decor__portrait { height: 340px; }
.ev-decor .ev-decor__play { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
.ev-decor .ev-decor__play::before { animation: none; }
.ev-decor .ev-decor__img, .ev-decor .ev-decor__btn svg { transition: none; }
/* No cycling: show the first image and stop */
.ev-decor .ev-decor__portrait img { animation: none; opacity: 0; }
.ev-decor .ev-decor__portrait img:first-child { opacity: 1; }
}
/* ==========================================================
Everest — "Who we are" with service tabs (navy, brand blue, gold)
Every rule is prefixed with .ws-about so theme styles can't leak in.
========================================================== */
.ws-about {
/* Everest theme */
--ws-accent: #283895; /* brand blue: button, active tab, eyebrow, names */
--ws-accent-dark: #1D2A72; /* hover */
--ws-dark: #0E1330; /* navy: stats panel, inactive tabs */
--ws-dark-hover: #1B2358;
--ws-gold: #D9AE55; /* small premium touches: quote mark, progress line */
--ws-ink: #0E1330;
--ws-text: #555A6E;
--ws-rule: #C9CDE0;
--ws-display: var(--ev-display);
--ws-body: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
--ws-max: 1600px;
--ws-side: 60px;
--ws-ease: cubic-bezier(.22, .7, .2, 1);
display: block;
margin: 0;
padding: 100px 0px 150px 0px;
background: #fff;
font-family: var(--ws-body);
color: var(--ws-text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* Reset inside the section */
.ws-about *, .ws-about *::before, .ws-about *::after { box-sizing: border-box; }
.ws-about h2, .ws-about p, .ws-about ul, .ws-about li,
.ws-about figure, .ws-about blockquote, .ws-about figcaption {
margin: 0; padding: 0;
font-family: var(--ws-body);
letter-spacing: normal;
text-transform: none;
}
.ws-about ul { list-style: none; }
.ws-about blockquote { border: 0; quotes: none; }
.ws-about a, .ws-about a:hover, .ws-about a:focus, .ws-about a:visited { text-decoration: none; }
.ws-about img { max-width: none; border: 0; }
.ws-about svg { display: block; flex: none; }
.ws-about button { font: inherit; }
/* ---------- Two columns ---------- */
.ws-about .ws-about__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
grid-template-areas:
"media head"
"media content";
grid-template-rows: auto 1fr;
align-items: start;
gap: 25px;
width: 100%;
max-width: var(--ws-max);
margin: 0 auto;
padding: 0 var(--ws-side);
}
/* ---------- LEFT: two overlapping photos with dot grids ----------
Percentages are read straight off the reference (450px square):
large photo 4%/7% at 51x72, small photo 54%/38% at 42x51. The small
one starts just inside the large one right edge, so it sits over the
bottom-right corner, and its white ring is drawn with box-shadow
spread so the frame overlaps without changing the photo size. */
.ws-about .ws-about__media {
grid-area: media;
align-self: center; /* photos stay centred against the taller column */
position: relative;
aspect-ratio: 1 / 1;
--ws-frame: 8px; /* white border on the small photo */
}
/* Dot grids sit behind both photos */
.ws-about .ws-about__media::before,
.ws-about .ws-about__media::after {
content: "";
position: absolute;
z-index: 0;
background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
background-size: 15px 15px;
color: #3C4260;
opacity: .85;
}
.ws-about .ws-about__media::before {
top: 0%;
right: 5%;
width: 6%;
height: 54%;
}
.ws-about .ws-about__media::after {
top: 85%;
left: 13%;
width: 18%;
height: 19%;
z-index: 2;
}
.ws-about .ws-about__photo {
position: absolute;
z-index: 1;
overflow: hidden;
background: #1B2358;
}
.ws-about .ws-about__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Large photo, top left */
.ws-about .ws-about__photo--main {
top: -8%;
left: 8%;
width: 80%;
height: 93%;
}
/* Small photo, over the large one bottom-right corner, in a white frame */
.ws-about .ws-about__photo--sub {
left: 31%;
bottom: -5%;
width: 64%;
height: 50%;
z-index: 2;
box-shadow: 0 0 0 var(--ws-frame) #fff, -16px 20px 40px -22px rgb(14 19 48 / 0%);
}
/* ---------- RIGHT: heading, then copy ---------- */
.ws-about .ws-about__head { grid-area: head; }
.ws-about .ws-about__content { grid-area: content; }
.ws-about .ws-about__eyebrow {
margin: 0 0 14px;
font-family: var(--ws-display);
font-size: 26px;
font-weight: 500;
line-height: 1.1;
color: var(--ws-accent);
}
.ws-about .ws-about__title {
margin: 0 0 20px;
font-family: var(--ws-display);
font-size: clamp(37px, 3vw, 49px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -.005em;
color: var(--ws-ink);
}
.ws-about .ws-about__text {
margin: 0 0 40px;
font-size: 16px;
line-height: 1.6;
color: var(--ws-text);
}
/* Button with a line running to the right */
.ws-about .ws-about__cta {
display: flex;
align-items: center;
margin-bottom: 40px;
}
.ws-about .ws-about__cta::after {
content: "";
flex: 1;
height: 1px;
background: var(--ws-rule);
}
.ws-about .ws-about__btn {
display: inline-flex;
align-items: center;
height: 54px;
padding: 0 40px;
background: var(--ws-accent);
font-family: var(--ws-display);
font-size: 21px;
font-weight: 600;
letter-spacing: .02em;
text-transform: uppercase;
color: #fff;
transition: background-color .25s ease;
}
.ws-about .ws-about__btn:hover,
.ws-about .ws-about__btn:focus,
.ws-about .ws-about__btn:visited { color: #fff; }
.ws-about .ws-about__btn:hover { background: var(--ws-accent-dark); }
.ws-about .ws-about__btn:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
/* ---------- Tabs ---------- */
.ws-about .ws-tabs__list {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 56px;
}
.ws-about .ws-tabs__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
height: 54px;
padding: 0 30px;
border: 0;
border-radius: 0;
background: var(--ws-dark);
color: #fff;
font-family: var(--ws-display);
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
text-transform: uppercase;
cursor: pointer;
overflow: hidden;
transition: background-color .3s ease;
}
.ws-about .ws-tabs__tab svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ws-about .ws-tabs__tab:hover { background: var(--ws-dark-hover); }
.ws-about .ws-tabs__tab.is-active { background: var(--ws-accent); }
.ws-about .ws-tabs__tab:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 3px; }
/* Autoplay progress line along the bottom of the active tab */
.ws-about .ws-tabs__tab::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--ws-gold);
transform: scaleX(0);
transform-origin: left;
}
.ws-about .ws-tabs.is-running .ws-tabs__tab.is-active::after {
animation: ws-progress var(--ws-autoplay, 6000ms) linear forwards;
}
.ws-about .ws-tabs.is-paused .ws-tabs__tab.is-active::after { animation-play-state: paused; }
@keyframes ws-progress { to { transform: scaleX(1); } }
/* ---------- Panels: quote + image ---------- */
.ws-about .ws-tabs__panel {
display: grid;
grid-template-columns: minmax(0, 1fr) 210px;
align-items: end;
gap: 30px;
animation: ws-in .55s var(--ws-ease);
}
.ws-about .ws-tabs__panel[hidden] { display: none; }
@keyframes ws-in {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: none; }
}
.ws-about .ws-quote__mark {
margin-bottom: 18px;
fill: var(--ws-gold);
}
.ws-about .ws-quote__text {
margin: 0 0 15px;
font-size: 15px;
font-style: italic;
line-height: 1.65;
color: #2B3048;
}
.ws-about .ws-quote__by {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 12px;
font-size: 15px;
color: var(--ws-ink);
}
.ws-about .ws-quote__by strong {
font-family: var(--ws-display);
font-size: 22px;
font-weight: 500;
color: var(--ws-accent);
}
.ws-about .ws-quote__by strong::after {
content: "\2013";
margin-left: 12px;
color: var(--ws-text);
}
.ws-about .ws-tabs__img {
position: relative;
aspect-ratio: 27 / 24;
overflow: hidden;
background: #1B2358;
}
.ws-about .ws-tabs__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------- Responsive ---------- */
/* Laptop */
@media (max-width: 1299.98px) {
.ws-about { --ws-side: 40px; }
.ws-about .ws-about__inner { gap: 18px; }
.ws-about .ws-tabs__tab { padding: 0 24px; font-size: 19px; }
.ws-about .ws-tabs__panel { grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; }
}
/* Tablet: stack the two columns */
@media (max-width: 1099.98px) {
.ws-about { padding: 96px 0; }
.ws-about .ws-about__inner {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
/* Photos sit between the heading and the body copy */
grid-template-areas: "head" "media" "content";
gap: 36px;
}
.ws-about .ws-about__media { width: 100%; max-width: 720px; margin: 0 auto; }
.ws-about .ws-tabs__panel { grid-template-columns: minmax(0, 1fr) 260px; }
/* Tabs fill the full width as three equal buttons */
.ws-about .ws-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ws-about .ws-tabs__tab { justify-content: center; padding: 0 12px; }
}
/* Small tablet / large phone */
@media (max-width: 767.98px) {
.ws-about { --ws-side: 24px; padding: 80px 0; }
.ws-about .ws-about__title { font-size: clamp(34px, 7vw, 44px); }
.ws-about .ws-about__text { margin-bottom: 32px; }
.ws-about .ws-about__cta { margin-bottom: 32px; }
/* Tabs: three equal buttons in one row */
.ws-about .ws-tabs__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-bottom: 28px;
}
.ws-about .ws-tabs__tab {
flex-direction: column; /* icon above the label: three labels
will not fit beside their icons here */
justify-content: center;
gap: 6px;
height: 66px;
padding: 0 6px;
font-size: 15px;
letter-spacing: .01em;
}
.ws-about .ws-tabs__tab svg { width: 16px; height: 16px; }
.ws-about .ws-tabs__tab span { white-space: nowrap; }
.ws-about .ws-tabs__panel { grid-template-columns: 1fr; gap: 24px; }
.ws-about .ws-tabs__img { order: -1; aspect-ratio: 16 / 10; }
.ws-about .ws-quote__by { justify-content: flex-start; }
}
/* Phone */
@media (max-width: 479.98px) {
.ws-about { --ws-side: 18px; }
.ws-about .ws-about__btn { height: 50px; padding: 0 26px; font-size: 19px; }
.ws-about .ws-tabs__list { gap: 6px; }
.ws-about .ws-tabs__tab { gap: 4px; height: 62px; padding: 0 4px; font-size: 13px; }
.ws-about .ws-tabs__tab svg { width: 15px; height: 15px; }
.ws-about .ws-quote__text { font-size: 16px; }
/* The composition is only ~320px wide here, so lighten the frame */
.ws-about .ws-about__media { --ws-frame: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.ws-about .ws-tabs__panel { animation: none; }
.ws-about .ws-tabs__tab::after { display: none; }
}
/* ==========================================================
EYEBROWS — one style for every section.
Taken from .ev-decor .ev-decor__eyebrow: a small uppercase label
with a short rule running in from the left. Each selector is
written two-class deep so it outranks the per-section rules above,
and this block sits last so equal-specificity ties fall this way.
========================================================== */
.vb-hero .vb-eyebrow,
.ev-about .ev-about__eyebrow,
.ev-decor .ev-decor__eyebrow,
.ws-about .ws-about__eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
padding: 0;
border: 0;
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: #283895; /* every section defines this same brand blue */
}
.vb-hero .vb-eyebrow::before,
.ev-about .ev-about__eyebrow::before,
.ev-decor .ev-decor__eyebrow::before,
.ws-about .ws-about__eyebrow::before {
content: "";
position: static; /* the hero rule had these absolute */
flex: none;
width: 28px;
height: 1px;
background: currentColor;
}
/* The hero eyebrow sits on a photo, so it keeps light text */
.vb-hero .vb-eyebrow { color: var(--vb-white); }
.vb-hero .vb-eyebrow::after { content: none; } /* it had a second rule on the right */
/* The caravan icon in the About eyebrow follows the text colour */
.ev-about .ev-about__eyebrow svg { stroke: currentColor; }
/* ==========================================================
Everest Caravans — "Our Partners" logo grid
Every rule is prefixed with .ev-partners so theme styles can't leak in.
========================================================== */
.ev-partners {
--ep-ink: #0E1330;
--ep-brand: #283895;
--ep-gold: #D9AE55;
--ep-text: #555A6E;
--ep-bg: #F5F6FB; /* soft off-white so the white tiles stand out */
--ep-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
--ep-max: 1240px;
--ep-side: 40px;
--ep-ease: cubic-bezier(.22, .7, .2, 1);
--ep-topo: url("../images/about/topo.svg"); /* relative to /assets/css/ */
position: relative;
display: block;
margin: 0;
padding: 80px 0 60px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse 50% 60% at 50% 0%, rgba(40, 56, 149, .08), rgba(40, 56, 149, 0) 70%),
var(--ep-bg);
font-family: var(--ep-font);
color: var(--ep-text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* Reset inside the section */
.ev-partners *, .ev-partners *::before, .ev-partners *::after { box-sizing: border-box; }
.ev-partners h2, .ev-partners p, .ev-partners ul, .ev-partners li {
margin: 0; padding: 0;
font-family: var(--ep-font);
letter-spacing: normal;
text-transform: none;
}
.ev-partners ul { list-style: none; }
.ev-partners a, .ev-partners a:hover, .ev-partners a:focus, .ev-partners a:visited { text-decoration: none; color: inherit; }
.ev-partners img { max-width: 100%; border: 0; }
/* ---------- Background elements ---------- */
/* Contour lines, top-right and bottom-left */
.ev-partners .ev-partners__topo {
position: absolute;
z-index: -1;
width: 520px;
height: 520px;
background: var(--ep-topo) center / contain no-repeat;
opacity: .05; /* raise to .08 for more, lower to .03 for less */
-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
mask-image: radial-gradient(closest-side, #000 35%, transparent);
pointer-events: none;
}
.ev-partners .ev-partners__topo--a { top: -220px; right: -200px; }
.ev-partners .ev-partners__topo--b { bottom: -260px; left: -220px; transform: rotate(160deg); }
/* Dot grid, bottom-right */
.ev-partners .ev-partners__dots {
position: absolute;
z-index: -1;
right: 6%;
bottom: 48px;
width: 180px;
height: 120px;
background-image: radial-gradient(var(--ep-brand) 1.3px, transparent 1.5px);
background-size: 16px 16px;
opacity: .2;
pointer-events: none;
}
/* ---------- Header ---------- */
.ev-partners .ev-partners__inner {
position: relative;
width: 100%;
max-width: var(--ep-max);
margin: 0 auto;
padding: 0 var(--ep-side);
}
.ev-partners .ev-partners__head {
margin: 0 auto 56px;
text-align: center;
}
/* Centred variant of the shared eyebrow: a rule on each side rather than one */
.ev-partners .ev-partners__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0 0 16px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ep-brand);
}
.ev-partners .ev-partners__eyebrow::before,
.ev-partners .ev-partners__eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--ep-gold);
}
.ev-partners .ev-partners__title {
margin: 0 0 14px;
font-size: clamp(28px, 3vw, 42px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -.03em;
color: var(--ep-ink);
text-wrap: balance;
}
.ev-partners .ev-partners__text {
max-width: 52ch;
margin: 0 auto;
color: white;;
font-size: 16px;
line-height: 1.7;
}
/* ---------- Logos: open 4 x 3 grid, no boxes ---------- */
.ev-partners .ev-partners__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 20px;
row-gap: 2px;
align-items: center;
}
.ev-partners .ev-partners__cell {
display: flex;
align-items: center;
justify-content: center;
height: 110px;
}
.ev-partners .ev-partners__cell img {
display: block;
width: auto;
height: auto;
max-width: 88%;
max-height: 100px;
object-fit: contain;
opacity: .7;
/* The logos are JPEGs on white, so multiply drops their background
into the off-white section instead of leaving pale rectangles.
The section has isolation: isolate, so the blend stays contained. */
mix-blend-mode: multiply;
transition:
opacity .35s var(--ep-ease),
filter .35s var(--ep-ease),
transform .45s var(--ep-ease); /* the source files are colour; mute them here */
}
.ev-partners .ev-partners__name {
font-size: 16px;
font-weight: 600;
text-align: center;
color: #6B6F80;
}
/* Colour returns on hover */
.ev-partners .ev-partners__item:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.06); }
.ev-partners a.ev-partners__cell:focus-visible { outline: 2px solid var(--ep-brand); outline-offset: 4px; border-radius: 6px; }
/* ---------- Dark theme ----------
Add .ev-partners--dark to the section to switch; remove it to go back.
The logos are colour JPEGs on white. On the light theme multiply drops
that white into the page; on dark it would crush them to near-black and
they would vanish. So here they are inverted to white marks on black and
screened instead, which drops the black away and leaves a clean
monochrome wall. */
.ev-partners--dark {
--ep-ink: #FFFFFF;
--ep-text: rgba(255, 255, 255, .64);
--ep-brand: #8C9BF0; /* lifted so the eyebrow reads on dark */
--ep-bg: #0B0E22;
background:
radial-gradient(ellipse 50% 60% at 50% 0%, rgba(74, 91, 196, .30), rgba(74, 91, 196, 0) 70%),
var(--ep-bg);
}
.ev-partners--dark .ev-partners__cell img {
filter: grayscale(1) invert(1);
mix-blend-mode:screen;
opacity: .62;
}
/* Un-inverting on hover would bring each logo's white background back with
it, so brightness changes instead of colour. */
.ev-partners--dark .ev-partners__item:hover img {
opacity: 1;
filter: grayscale(1) invert(1);
transform: scale(1.06);
}
.ev-partners--dark .ev-partners__name { color: rgba(255, 255, 255, .7); }
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.ev-partners { padding: 90px 0 100px; }
.ev-partners .ev-partners__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.ev-partners .ev-partners__cell { height: 100px; }
}
@media (max-width: 575.98px) {
.ev-partners { --ep-side: 18px; padding: 72px 0 80px; }
.ev-partners .ev-partners__head { margin-bottom: 36px; }
.ev-partners .ev-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; }
.ev-partners .ev-partners__cell { height: 88px; padding: 10px; }
.ev-partners .ev-partners__cell img { max-height: 48px; opacity: .85; } /* no hover on touch: show clearer */
.ev-partners .ev-partners__dots { display: none; }
.ev-partners .ev-partners__topo--b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ev-partners .ev-partners__cell img { transition: none; }
.ev-partners .ev-partners__item:hover img { transform: none; }
}
/* ==========================================================
Everest Caravans — Reviews + Factory Direct (white) + CTA band
Every rule is prefixed with .ev-tribe / .ev-ctaband so theme styles
can't leak in.
========================================================== */
.ev-tribe,
.ev-ctaband {
--et-ink: #0E1330;
--et-brand: #283895;
--et-brand-dark: #1D2A72;
--et-gold: #D9AE55;
--et-text: #555A6E;
--et-line: #E3E5EE;
--et-tint: #EEF0FB;
--et-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;
--et-max: 1180px;
--et-ease: cubic-bezier(.22, .7, .2, 1);
--et-topo: url("../images/about/topo.svg"); /* relative to /assets/css/ */
--et-photo: url("../images/awards/awardsection.jpg");
--et-photo-2: url("../abreco/images/about-page/home-last-sec-but.png");
display: block;
margin: 0;
font-family: var(--et-font);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.ev-tribe *, .ev-tribe *::before, .ev-tribe *::after,
.ev-ctaband *, .ev-ctaband *::before, .ev-ctaband *::after { box-sizing: border-box; }
.ev-tribe :where(h2, p, ul, li), .ev-ctaband :where(h3) {
margin: 0; padding: 0;
font-family: var(--et-font);
letter-spacing: normal;
text-transform: none;
}
.ev-tribe :where(ul) { list-style: none; }
.ev-tribe a, .ev-ctaband a { text-decoration: none; }
.ev-tribe a:hover, .ev-ctaband a:hover { text-decoration: none; }
.ev-tribe img { max-width: 100%; border: 0; }
.ev-tribe svg, .ev-ctaband svg { display: block; flex: none; }
/* ================= WHITE SECTION ================= */
.ev-tribe {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 110px 0 120px;
background:
radial-gradient(ellipse 55% 45% at 50% 0%, rgba(40, 56, 149, .07), rgba(40, 56, 149, 0) 70%),
#fff;
color: var(--et-text);
}
.ev-tribe .ev-tribe__topo {
position: absolute;
z-index: -1;
top: -200px;
right: -200px;
width: 540px;
height: 540px;
background: var(--et-topo) center / contain no-repeat;
opacity: .05;
-webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
mask-image: radial-gradient(closest-side, #000 35%, transparent);
pointer-events: none;
}
.ev-tribe .ev-tribe__inner {
width: 100%;
max-width: var(--et-max);
margin: 0 auto;
padding: 0 32px;
text-align: center;
}
/* Shared headings */
.ev-tribe .ev-tribe__eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
margin: 0 0 16px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--et-brand);
}
.ev-tribe .ev-tribe__eyebrow::before,
.ev-tribe .ev-tribe__eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--et-gold);
}
.ev-tribe .ev-tribe__title {
margin: 0 auto;
font-size: clamp(28px, 3vw, 42px);
font-weight: 500;
max-width:57vw;
line-height: 1.12;
letter-spacing: -.03em;
color: var(--et-ink);
text-wrap: balance;
}
.ev-tribe .ev-tribe__head { margin-bottom: 48px; }
/* ---------- Review cards ---------- */
.ev-tribe .ev-tribe__reviews {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
/* Clean card: no shadow, no accent bar. The images already carry the stars,
the logo and their own button, so the box only needs a hairline and room
to breathe. All three files are the same size, so heights match without a
fixed aspect ratio. */
.ev-tribe .ev-review {
position: relative;
display: block;
padding: 18px 20px;
overflow: hidden;
border-radius: 14px;
background: #fff;
transition: border-color .25s ease, transform .25s var(--et-ease);
}
.ev-tribe .ev-review__img {
display: block;
width: 100%;
height: auto;
}
/* Shown only while an image file is missing */
.ev-tribe .ev-review__name {
display: block;
padding: 40px 0;
text-align: center;
font-size: 30px;
font-weight: 600;
letter-spacing: -.02em;
color: var(--et-accent, var(--et-ink));
}
.ev-tribe .ev-review:hover {
border-color: var(--et-accent, var(--et-brand));
transform: translateY(-3px);
}
.ev-tribe .ev-review:focus-visible { outline: 2px solid var(--et-brand); outline-offset: 3px; }
.ev-tribe .ev-tribe__divider {
width: 100%;
height: 1px;
margin: 46px 0;
border: 0;
background: linear-gradient(90deg, transparent, var(--et-line) 20%, var(--et-line) 80%, transparent);
}
/* ---------- Factory direct ---------- */
.ev-tribe .ev-factory__text {
margin: 22px auto 28px;
font-size: 16px;
line-height: 1.8;
}
.ev-tribe .ev-factory__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 64px;
}
.ev-tribe .ev-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 11px 18px;
border: 1px solid var(--et-line);
border-radius: 999px;
background: #fff;
font-size: 14px;
font-weight: 500;
color: var(--et-ink);
transition: border-color .25s ease, color .25s ease;
}
.ev-tribe .ev-chip svg {
fill: none;
stroke: var(--et-gold);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.ev-tribe a.ev-chip:hover { border-color: var(--et-brand); color: var(--et-brand); }
/* Factory feature cards moved to public/css/ev-factory-features.css
(loaded by resources/views/partials/ev-factory-features.blade.php) */
/* ================= CTA BAND (two halves) ================= */
.ev-ctaband {
display: grid;
grid-template-columns: 1fr 1fr;
color: #fff;
}
/* With only one half rendered it spans the full width instead of leaving a gap */
.ev-ctaband:has(> .ev-ctaband__half:only-child) { grid-template-columns: 1fr; }
.ev-ctaband .ev-ctaband__half {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
min-height: 170px;
padding: 36px clamp(24px, 4vw, 56px);
overflow: hidden;
isolation: isolate;
}
/* Photo bleeds in from the left and is washed out across the half, so the
heading and button sit on near-solid colour. The brand half stays flat. */
.ev-ctaband .ev-ctaband__half--dark {
background:
linear-gradient(90deg,
rgba(14, 19, 48, .62) 0%,
rgba(14, 19, 48, .88) 32%,
rgba(14, 19, 48, .97) 58%,
var(--et-ink) 100%),
var(--et-photo) left center / cover no-repeat,
var(--et-ink);
}
/* Mirrored: this photo bleeds in from the right, so the two washes meet
solid in the middle of the band where the halves join. */
.ev-ctaband .ev-ctaband__half--brand {
background:
linear-gradient(270deg,
rgba(40, 56, 149, .62) 0%,
rgba(40, 56, 149, .88) 32%,
rgba(40, 56, 149, .97) 58%,
var(--et-brand) 100%),
var(--et-photo-2) right center / cover no-repeat,
var(--et-brand);
}
.ev-ctaband .ev-ctaband__icon svg {
fill: none;
stroke: #fff;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ev-ctaband .ev-ctaband__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ev-ctaband h3 {
font-family: var(--ev-display);
font-size: clamp(19px, 1.7vw, 24px);
font-weight: 500;
line-height: 1.2;
color: #fff;
}
.ev-ctaband .ev-ctaband__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: 6px;
background: #fff;
font-size: 14px;
font-weight: 500;
color: var(--et-ink);
transition: background-color .25s ease, color .25s ease, transform .25s var(--et-ease);
}
.ev-ctaband .ev-ctaband__btn svg {
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.ev-ctaband .ev-ctaband__btn:hover { background: white; color: var(--et-ink); transform: translateY(-1px); }
.ev-ctaband .ev-ctaband__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.ev-tribe { padding: 90px 0 100px; }
.ev-tribe .ev-tribe__reviews { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 16px; }
.ev-tribe .ev-tribe__divider { margin: 72px 0; }
.ev-ctaband { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
.ev-tribe { padding: 72px 0 80px; }
.ev-tribe .ev-tribe__inner { padding: 0 20px; }
.ev-tribe .ev-chip { font-size: 13px; }
.ev-ctaband .ev-ctaband__half { justify-content: flex-start; min-height: 0; padding: 32px 20px; gap: 18px; }
.ev-ctaband .ev-ctaband__icon svg { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.ev-tribe *, .ev-ctaband * { transition: none !important; }
}
/* ==========================================================
Everest Caravans — "Talk to the experts" banner
Photo sits on the right and fades into the navy using a mask + gradient.
========================================================== */
.ev-experts {
--ex-ink: #0E1330;
--ex-navy: #0B1029; /* banner base: deep navy */
--ex-radius: 10px; /* one radius for every element in the section */
--ex-brand: #283895;
--ex-gold: #D9AE55;
--ex-gold-light: #F1D58C;
--ex-font: var(--ev-display);
--ex-max: 1440px;
--ex-side: 60px;
--ex-ease: cubic-bezier(.22, .7, .2, 1);
display: block;
margin: 0;
padding: 40px var(--ex-side);
background: #fff;
font-family: var(--ex-font);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.ev-experts *, .ev-experts *::before, .ev-experts *::after { box-sizing: border-box; }
.ev-experts :where(h2, p) {
margin: 0; padding: 0;
font-family: var(--ex-font);
letter-spacing: normal;
text-transform: none;
}
.ev-experts a, .ev-experts a:hover, .ev-experts a:focus { text-decoration: none; }
.ev-experts img { max-width: none; border: 0; }
.ev-experts svg { display: block; flex: none; }
/* ---------- Banner box ---------- */
.ev-experts .ev-experts__box {
position: relative;
display: flex;
align-items: center;
max-width: var(--ex-max);
min-height: 400px;
margin: 0 auto;
overflow: hidden;
isolation: isolate;
border-radius: var(--ex-radius);
background:
radial-gradient(ellipse 50% 80% at 0% 100%, rgba(40, 56, 149, .35), transparent 70%),
var(--ex-navy);
color: #fff;
}
/* Photo: from the middle to the right edge, faded in from the left */
.ev-experts .ev-experts__img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 0;
width: 66%;
height: 100%;
object-fit: cover;
object-position: center right;
/* Long, gradual fade: the photo builds up across its left half */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .75) 46%, #000 60%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 14%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, .75) 46%, #000 60%);
transition: transform 1.4s var(--ex-ease);
}
.ev-experts .ev-experts__box:hover .ev-experts__img { transform: scale(1.03); }
/* Colour blend: navy tint over the photo so it sits in the brand colour */
.ev-experts .ev-experts__blend {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
var(--ex-navy) 0%,
var(--ex-navy) 34%,
rgba(11, 16, 41, .9) 44%,
rgba(11, 16, 41, .7) 54%,
rgba(11, 16, 41, .45) 66%,
rgba(11, 16, 41, .22) 80%,
rgba(11, 16, 41, .1) 100%),
linear-gradient(0deg, rgba(14, 19, 48, .35), rgba(14, 19, 48, 0) 40%);
pointer-events: none;
}
/* ---------- Content ---------- */
.ev-experts .ev-experts__content {
position: relative;
z-index: 2;
max-width: 680px;
padding: 64px clamp(28px, 7vw, 110px);
}
.ev-experts .ev-experts__eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 14px;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ex-gold-light);
}
.ev-experts .ev-experts__eyebrow::before {
content: "";
width: 28px;
height: 1px;
background: var(--ex-gold);
}
.ev-experts .ev-experts__title {
margin: 0 0 18px;
font-size: clamp(32px, 3.4vw, 50px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -.03em;
color: #fff;
}
.ev-experts .ev-experts__text {
max-width: 52ch;
margin: 0 0 34px;
font-size: 16px;
line-height: 1.75;
color: rgba(255, 255, 255, .82);
}
/* ---------- Buttons ---------- */
.ev-experts .ev-experts__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px 28px;
}
.ev-experts .ev-experts__btn {
display: inline-flex;
align-items: center;
gap: 10px;
height: 52px;
padding: 0 26px;
border-radius: var(--ex-radius);
background: var(--ex-gold);
font-size: 15px;
font-weight: 600;
color: var(--ex-ink);
transition: background-color .2s ease;
}
.ev-experts .ev-experts__btn svg {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .2s ease;
}
.ev-experts .ev-experts__btn:hover,
.ev-experts .ev-experts__btn:focus { color: var(--ex-ink); }
.ev-experts .ev-experts__btn:hover { background: var(--ex-gold-light); }
.ev-experts .ev-experts__btn:hover svg { transform: translateX(3px); }
.ev-experts .ev-experts__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ev-experts .ev-experts__link {
position: relative;
padding: 6px 0;
font-size: 15px;
font-weight: 500;
color: #fff;
}
.ev-experts .ev-experts__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5px;
background: rgba(255, 255, 255, .45);
transition: background-color .25s ease;
}
.ev-experts .ev-experts__link:hover,
.ev-experts .ev-experts__link:focus { color: var(--ex-gold-light); }
.ev-experts .ev-experts__link:hover::after { background: var(--ex-gold); }
/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
.ev-experts { --ex-side: 32px; }
.ev-experts .ev-experts__img { width: 75%; }
.ev-experts .ev-experts__blend {
background: linear-gradient(90deg, var(--ex-navy) 0%, rgba(11, 16, 41, .9) 50%, rgba(11, 16, 41, .5) 100%);
}
}
/* Phone: photo moves to the top and fades down into the navy */
@media (max-width: 639.98px) {
.ev-experts { --ex-side: 16px; padding-top: 24px; padding-bottom: 24px; }
.ev-experts .ev-experts__box {
flex-direction: column;
align-items: stretch;
min-height: 0;
padding-top: 200px;
border-radius: var(--ex-radius);
}
.ev-experts .ev-experts__img {
top: 0;
bottom: auto;
width: 100%;
height: 300px;
object-position: center;
-webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.ev-experts .ev-experts__blend {
background: linear-gradient(180deg, rgba(11, 16, 41, .2) 0%, rgba(11, 16, 41, .6) 40%, var(--ex-navy) 72%);
}
.ev-experts .ev-experts__content { padding: 0 24px 36px; }
.ev-experts .ev-experts__btn { height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
.ev-experts * { transition: none !important; }
.ev-experts .ev-experts__box:hover .ev-experts__img { transform: none; }
}
/* ==========================================================
LIST TEXT — Space Grotesk, matching the headlines.
Covers the marker and bullet lists: the About and Lux Decor feature
rows and the footer link lists. Written two
classes deep and placed last so it outranks the per-section rules.
========================================================== */
.ev-about .ev-about__features li,
.ev-decor .ev-decor__label {
font-family: var(--ev-display);
}
/* ==========================================================
TITLES — Space Grotesk. Body copy keeps Poppins.
Two classes deep so these outrank the per-section rules above,
and last in the file so equal-specificity ties fall this way.
========================================================== */
.vb-hero .vb-title,
.ev-about .ev-about__title,
.ev-decor .ev-decor__title,
.ws-about .ws-about__title,
.ev-partners .ev-partners__title,
.ev-tribe .ev-tribe__title,
.ev-experts .ev-experts__title {
font-family: var(--ev-display);
}
/* ==========================================================
ENTRY ANIMATIONS — scroll reveal for the lower sections.
.ev-about keeps its own reveal (the .ev-js rules above) and the journey
section carries its own; this covers decor and ws-about. The start state applies
once reveal.js adds .rv-js to , so with no JS, no
IntersectionObserver, or reduced motion, nothing is ever hidden.
--rv-i is the element position among its siblings, set by the script.
========================================================== */
.rv-js [data-rv] {
--rv-ease: cubic-bezier(.22, .68, .18, 1); /* soft overshoot-free settle */
opacity: 0;
transition:
opacity .85s var(--rv-ease),
transform .85s var(--rv-ease),
clip-path .9s var(--rv-ease);
transition-delay: calc(var(--rv-i, 0) * 80ms);
will-change: transform, opacity;
}
/* ---------- Motion variants, picked per element by reveal.js ---------- */
.rv-js [data-rv="up"] { transform: translateY(26px); }
.rv-js [data-rv="rise"] { transform: translateY(42px) scale(.985); }
.rv-js [data-rv="left"] { transform: translateX(-40px); }
.rv-js [data-rv="right"] { transform: translateX(40px); }
.rv-js [data-rv="pop"] { transform: translateY(16px) scale(.92); }
/* Settles down from slightly oversized — good for photos.
No fade: these sit on a dark panel, so starting at opacity 0 showed the
panel first and the photo appeared to flash in over it. Transform only
means the picture is there the whole time and simply settles. */
.rv-js [data-rv="zoom"] { opacity: 1; transform: scale(1.06); }
/* Wipes upward instead of moving. Do not put this on a lazy-loaded ![]()
:
a clip-path that hides the element also stops the browser fetching it. */
.rv-js [data-rv="mask"] { clip-path: inset(0 0 100% 0); transform: scale(1.04); }
/* One landing state for every variant */
.rv-js [data-rv].is-in {
opacity: 1;
transform: none;
/* clip-path: inset(0 0 0 0); */
}
/* Nothing left to composite once it has arrived */
.rv-js [data-rv].is-in { will-change: auto; }
/* Cards and logos land a touch quicker than the copy around them */
.rv-js [data-rv="pop"] {
transition-duration: .62s;
transition-delay: calc(var(--rv-i, 0) * 60ms);
}
/* ==========================================================
MOBILE TITLE SIZE — one size for every section heading.
Each section sets its own clamp(), whose floor ranged from 27px to
37px, so the headings stepped around on a phone. This pins them all
to 28px below 768px. Two classes deep and last in the file so it
outranks the per-section rules (and their own media queries) above.
========================================================== */
@media (max-width: 767.98px) {
.vb-hero .vb-title,
.ev-about .ev-about__title,
.ev-decor .ev-decor__title,
.ws-about .ws-about__title,
.ev-partners .ev-partners__title,
.ev-tribe .ev-tribe__title,
.ev-experts .ev-experts__title {
font-size: 28px;
}
}
/* ==========================================================
HERO ART ON MOBILE — an ![]()
instead of a background.
Desktop keeps the photo as .vb-slide's background. On phones the
slide shows ![]()
(the slider's mobile_image, or its
main image when none is set) and the background is dropped, so the
art is a real element that keeps its own aspect ratio instead of
being stretched into a band.
The background-image is written inline on .vb-slide from Blade, and
an inline style can only be overridden with !important.
========================================================== */
.vb-hero .vb-slide .mobile { display: none; }
@media (max-width: 767.98px) {
.vb-hero .vb-slide { background-image: none !important; }
/* The gradient existed to blend the copy into the background photo.
With the photo gone the panel behind the copy is simply solid. */
.vb-hero .vb-overlay {
align-items: stretch;
background: var(--vb-bg);
}
/* Column so the photo can sit at the top and the copy at the bottom */
.vb-hero .vb-wrap {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.vb-hero .vb-slide .mobile {
display: block;
/* Full-bleed: cancels the side padding .vb-wrap carries.
max-width is reset because the theme caps every img at 100%,
which would otherwise clamp this back to the padded width. */
width: calc(100% + (var(--vb-side) * 2));
max-width: none;
margin: 0 calc(var(--vb-side) * -1) auto; /* auto bottom pushes the copy down */
aspect-ratio: 3 / 2;
object-fit: cover;
}
}
/* ==========================================================
BUTTON CORNERS — one radius across the page.
Each section had set its own: the hero and Lux Decor at 4px, About
fully rounded at 999px, the CTA band at 6px, Talk to the Experts on
its section radius of 10px, and the Workshop button with none at all.
Written two classes deep and last in the file so these win on source
order without !important. The section boxes keep their own radius —
only the buttons are pinned here.
========================================================== */
.vb-hero .vb-btn,
.ev-about .ev-about__btn,
.ev-decor .ev-decor__btn,
.ws-about .ws-about__btn,
.ev-tribe .ev-tribe__btn,
.ev-ctaband .ev-ctaband__btn,
.ev-experts .ev-experts__btn {
border-radius: 4px;
}
/* ==========================================================
HERO ON MOBILE — let the slide grow to its content.
The slide was a fixed --vb-height with overflow:hidden and the copy
clamped to three lines, so longer descriptions were cut off. On
phones the height now follows the content instead: the overlay comes
out of absolute positioning so it can push the slide open, and the
clamp is lifted. Owl sizes its stage to the tallest slide, so the
carousel still lines up.
========================================================== */
@media (max-width: 767.98px) {
.vb-hero,
.vb-hero .vb-slide { height: auto; }
.vb-hero { overflow: visible; }
.vb-hero .vb-slider,
.vb-hero .owl-stage-outer,
.vb-hero .owl-stage,
.vb-hero .owl-item { height: auto; }
/* Absolute would contribute no height and collapse the slide */
.vb-hero .vb-overlay {
position: static;
padding-bottom: 44px;
}
/* Show the description in full */
.vb-hero .vb-desc {
display: block;
overflow: visible;
-webkit-line-clamp: none;
}
}
/* ==========================================================
HERO WARRANTY BADGE — sits above the description.
Sits at the top of .vb-main, above the eyebrow. The artwork is gold
and white on transparency, so it needs no plate over the photo.
========================================================== */
/* Three classes deep on purpose: Owl ships
`.owl-carousel .owl-item img { width: 100% }`, which outranks a
single-class rule and stretched the badge to the column width. */
.vb-hero .vb-main .vb-warranty {
display: block;
width: auto;
max-width: 100%;
height: 80px;
margin: 0 0 18px;
}
@media (max-width: 767.98px) {
.vb-hero .vb-main .vb-warranty { height: 44px; margin-bottom: 14px; }
.ev-tribe .ev-tribe__title {
max-width: 100%;
}
}
@media (max-width: 479.98px) {
.vb-hero .vb-main .vb-warranty { height: 38px; }
}
/* ==========================================================
TITLE STYLE — one treatment for every section heading.
Each section had set its own tracking, all of it negative (-.005em to
-.035em) and tuned for Space Grotesk, with weights drifting between
500, 600 and 700. DM Sans wants a little air instead, so the headings
now share one positive tracking and one weight, both set on :root in
the layout so they can be tuned in a single place.
Last in the file so it settles the per-section rules above.
========================================================== */
.vb-hero .vb-title,
.ev-about .ev-about__title,
.ev-decor .ev-decor__title,
.ws-about .ws-about__title,
.ev-partners .ev-partners__title,
.ev-tribe .ev-tribe__title,
.ev-experts .ev-experts__title {
letter-spacing: var(--ev-title-tracking, .015em);
font-weight: var(--ev-title-weight, 600);
line-height: 1.16;
text-wrap: balance; /* keeps a stray last word off its own line */
}
/* ==========================================================
PARTNERS GRID — centre whatever is left on the last row.
13 logos into 4, 3 or 2 columns leaves one on its own, and a grid
parks it at the left edge. Flex with justify-content: center keeps the
full rows looking identical to the grid while centring a short last
row, and it keeps working whatever the logo count becomes.
The basis reproduces the old track width: the row minus its gaps,
divided by the column count.
========================================================== */
.ev-partners .ev-partners__grid {
--ep-cols: 4;
--ep-col-gap: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--ep-col-gap);
}
.ev-partners .ev-partners__grid > .ev-partners__item {
flex: 0 0 calc(
(100% - (var(--ep-cols) - 1) * var(--ep-col-gap)) / var(--ep-cols)
);
max-width: calc(
(100% - (var(--ep-cols) - 1) * var(--ep-col-gap)) / var(--ep-cols)
);
}
@media (max-width: 991.98px) {
.ev-partners .ev-partners__grid { --ep-cols: 3; --ep-col-gap: 28px; }
}
@media (max-width: 575.98px) {
.ev-partners .ev-partners__grid { --ep-cols: 2; --ep-col-gap: 16px; }
}