display: block;
filter:
drop-shadow(0 0 10px rgba(100, 155, 255,.15))
drop-shadow(0 0 18px rgba(217, 182, 100,.10));
}
/* =====================================================
RIGHT SIDE
Desktop nav cluster
===================================================== */
.vv-right{
display: flex;
align-items: center;
gap: 18px;
}
/* =====================================================
NAV
Primary navigation links
===================================================== */
.vv-nav{
display: flex;
gap: 20px;
}
.vv-nav a{
font-family: "Cinzel", serif;
font-size: 24px;
letter-spacing: .02em;
color: rgba(255,255,255,.72);
text-decoration: none;
padding: 10px 14px;
border-radius: 12px;
transition:
transform .25s cubic-bezier(.2,.8,.2,1),
background-color .25s cubic-bezier(.2,.8,.2,1),
color .25s cubic-bezier(.2,.8,.2,1);
}
.vv-nav a:hover{
color: rgba(255,255,255,.94);
background: rgba(255,255,255,.06);
transform: translateY(-1px);
}
@media (max-width: 1100px){
.vv-right{
gap: 12px;
}
.vv-nav{
gap: 10px;
}
.vv-nav a{
font-size: 20px;
padding: 8px 10px;
}
.vv-cta{
font-size: 18px;
padding: 10px 14px;
}
}
/* =====================================================
CTA BUTTON
Header primary action
===================================================== */
.vv-cta{
font-family: "Cormorant Garamond", serif;
font-size: 20px;
font-weight: 600;
padding: 12px 18px;
border-radius: 14px;
#vv-header.open .vv-mobile-overlay{
opacity: 1;
pointer-events: auto;
}
#vv-header.open .vv-mobile{
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* =====================================================
5) HERO / HOMEPAGE CORE — CSS
Core homepage variables, typography, layout shell, cards, buttons
===================================================== */
/* =====================================================
HOMEPAGE ROOT
Shared homepage variable system + framing
===================================================== */
#vv-home{
--vv-max: 1200px;
--vv-gutter: 24px;
--vv-frame: min(var(--vv-max), calc(100% - 48px));
--vv-pad: clamp(12px, 2vw, 20px);
--vv-gap: clamp(14px, 2vw, 20px);
--vv-radius: 22px;
--vv-border: rgba(255, 255, 255, 0.16);
--vv-text-primary: rgba(255, 255, 255, 0.96);
--vv-text-secondary: rgba(255, 255, 255, 0.9);
--vv-text-muted: rgba(255, 255, 255, 0.86);
--vv-text-sm: clamp(14px, 1.8vw, 16px);
--vv-text-btn: clamp(15px, 2vw, 20px);
--vv-title: clamp(26px, 6vw, 64px);
--vv-subtitle: clamp(22px, 4vw, 36px);
--vv-body: clamp(17px, 2.8vw, 24px);
--vv-pad-tight: clamp(10px, 1.8vw, 16px);
--vv-gap-tight: clamp(10px, 1.8vw, 14px);
--vv-radius-sm: clamp(14px, 2vw, 18px);
--vv-title-glow:
0 0 2px rgba(100, 155, 255, .55),
0 0 12px rgba(100, 155, 255, .55),
0 0 12px rgba(100, 155, 255, .55);
--vv-font-title: "Cinzel Decorative", serif;
--vv-font-subtitle: "Cinzel", serif;
--vv-font-body: "Cormorant Garamond", serif;
--vv-bg-desktop: url("https://images.squarespace-cdn.com/content/691e9533ddf92169a657d827/db38947d-d83c-4d5f-ac28-5a99c065c38b/0ea927ae-348f-41d0-bcb8-8559ab990f6a.png?content-type=image%2Fpng");
--vv-bg-mobile: url("https://images.squarespace-cdn.com/content/691e9533ddf92169a657d827/db38947d-d83c-4d5f-ac28-5a99c065c38b/0ea927ae-348f-41d0-bcb8-8559ab990f6a.png?content-type=image%2Fpng");
font-family: var(--vv-font-body);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
touch-action: manipulation;
position: relative;
z-index: 0;
isolation: isolate;
/* measured vars */
--vvLogoOpacity: 1;
--vvHeaderBottom: 200px;
--vvHeroTop: 200px;
--vvHeroLeft: 120px;
--vvTopPocketH: 0px;
/* top composition system - SET TO 300px */
--vv-home-top: clamp(100px, 16vw, 120px);
--vv-hero-pocket: 300px;
/* hero sizing */
--vv-hero-max: 1200px;
/* floating logo sizing - ENLARGED & CENTERED */
--vv-logo-max-w: 1400px;
--vv-logo-shrink-w: 88%;
--vv-logo-max-h-ratio: 0.90;
/* door vars - SCALED FOR MOBILE VISIBILITY */
--vvDoorW: clamp(200px, 36vw, 680px);
--vvDoorKiss: -8px;
padding-top: var(--vv-home-top);
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
}
/* =====================================================
UNIVERSAL HOMEPAGE CONTENT SAFETY
===================================================== */
#vv-home,
#vv-home *{
color: var(--vv-text-primary);
box-sizing: border-box;
max-width: 100%;
}
#vv-home img,
#vv-home svg,
#vv-home video,
#vv-home iframe,
#vv-home canvas{
max-width: 100%;
height: auto;
}
/* =====================================================
TYPOGRAPHY
Titles, body copy, notes, lists
===================================================== */
#vv-home h1,
#vv-home h2{
font-family: var(--vv-font-title);
font-size: var(--vv-title);
line-height: 1.06;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 1);
text-shadow: var(--vv-title-glow);
margin: 0 0 14px 0;
font-weight: 600;
overflow-wrap: anywhere;
word-break: normal;
}
#vv-home h3{
font-family: var(--vv-font-subtitle);
font-size: var(--vv-subtitle);
line-height: 1.12;
letter-spacing: 0.2px;
color: rgba(255, 255, 255, 0.98);
text-shadow:
0 0 8px rgba(100, 155, 255, 0.18),
0 0 18px rgba(100, 155, 255, 0.12);
margin: 0 0 10px 0;
font-weight: 400;
overflow-wrap: anywhere;
word-break: normal;
}
#vv-home .vv-section-title{
text-align: center;
font-family: var(--vv-font-title);
font-size: var(--vv-title);
margin: 0 0 32px 0;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.1;
}
#vv-home .vv-card-title{
text-align: center;
font-family: var(--vv-font-subtitle);
font-size: var(--vv-subtitle);
margin: 0 0 12px 0;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.15;
}
#vv-home .vv-card-kicker{
text-align: center;
font-style: italic;
margin-bottom: 8px;
color: var(--vv-text-muted);
font-size: 1.1em;
}
#vv-home .vv-section-lead{
text-align: center;
margin: 0 0 18px 0;
font-size: 1.15em;
color: var(--vv-text-secondary);
line-height: 1.5;
}
#vv-home .vv-section-quote{
text-align: center;
font-style: italic;
margin: 0 0 18px 0;
color: var(--vv-text-muted);
font-size: 1.08em;
}
#vv-home p,
#vv-home li,
#vv-home span{
color: var(--vv-text-secondary) !important;
font-family: var(--vv-font-body);
font-size: var(--vv-body);
line-height: 1.55;
overflow-wrap: anywhere;
word-break: normal;
}
#vv-home strong{
color: rgba(255, 255, 255, 1);
text-shadow: var(--vv-title-glow);
font-weight: 700;
font-family: var(--vv-font-body);
}
#vv-home .vv-note{
color: var(--vv-text-muted) !important;
font-family: var(--vv-font-body);
font-size: var(--vv-body);
line-height: 1.55;
}
#vv-home .vv-note,
#vv-home .vv-footer-tag,
#vv-home .vv-footer-meta,
#vv-home .vv-card,
#vv-home .vv-footer-col,
#vv-home .vv-footer-col a,
#vv-home .vv-btn,
#vv-home .vv-footer-btn,
#vv-home .vv-footer-toplink{
overflow-wrap: anywhere;
}
#vv-home ul{
margin: 12px 0 0 0;
padding-left: 1.15em;
}
#vv-home li{
margin: 6px 0;
}
/* =====================================================
LAYOUT HELPERS
Main container and section wrappers
===================================================== */
#vv-home .vv-container{
width: var(--vv-frame);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
position: relative;
z-index: 2;
}
#vv-home .vv-section{
margin-top: 22px;
padding: var(--vv-pad);
border-radius: var(--vv-radius);
background:
radial-gradient(700px 500px at 0% 100%, rgba(13, 36, 64, 1), transparent 60%),
radial-gradient(
circle at center,
transparent 0%,
rgba(69,94,130,0.08) 55%,
rgba(69,94,130,0.18) 75%,
rgba(69,94,130,0.36) 100%
);
border: 1px solid rgba(69,94,130,1);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#vv-home .vv-section1{
margin-top: var(--vv-hero-pocket);
padding: var(--vv-pad);
padding-bottom: 0px;
border-radius: var(--vv-radius);
background:
radial-gradient(700px 500px at -10% 90%, rgba(13, 36, 64, 1), transparent 60%),
var(--vv-gold-radial),
radial-gradient(
circle at center,
transparent 0%,
rgba(69,94,130,0.08) 55%,
rgba(69,94,130,0.18) 75%,
rgba(69,94,130,0.36) 100%
);
border: 1px solid rgba(69,94,130,1);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* =====================================================
SHARED CARD SYSTEM
Reusable card styling
===================================================== */
#vv-home .vv-card{
border-radius: 22px;
border: 1px solid var(--vv-border);
background: rgba(255, 255, 255, 0.06);
padding: 18px;
font-family: var(--vv-font-body);
font-size: var(--vv-body);
line-height: 1.55;
transition:
transform 0.2s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
min-width: 0;
}
#vv-home .vv-card:hover{
border-color: rgba(100, 155, 255, 1);
}
/* =====================================================
SHARED BUTTON SYSTEM
Primary + secondary buttons used throughout homepage
===================================================== */
#vv-home .vv-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 14px;
border: 1px solid var(--vv-border);
color: rgba(255, 255, 255, 1);
text-decoration: none;
font-weight: 600;
background: rgba(69, 94, 135, 0.3);
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.85);
line-height: 1.2;
transition:
box-shadow 0.25s ease,
transform 0.15s ease,
background 0.15s ease,
border-color 0.25s ease;
min-height: 44px;
-webkit-tap-highlight-color: transparent;
white-space: normal;
text-align: center;
word-break: normal;
hyphens: none;
}
#vv-home .vv-btn:hover{
transform: translateY(-1px);
background: rgba(235, 193, 118, 0.5);
}
#vv-home .vv-btn:focus-visible{
outline: 2px solid rgba(100, 155, 255, 0.9);
outline-offset: 3px;
}
#vv-home .vv-btn-primary{
background: linear-gradient(
rgba(0, 0, 0, 0) 20%,
rgba(100,155,255,0.6) 80%
);
border-color: rgba(100, 155, 255, 1);
box-shadow:
0 0 12px rgba(100, 155, 255, 0.35),
0 0 32px rgba(100, 155, 255, 0.25),
inset 0 0 12px rgba(255,255,255,0.15);
}
#vv-home .vv-btn-primary:hover{
box-shadow:
0 0 18px rgba(207, 222, 244, 0.42),
0 0 48px rgba(207, 222, 244, 0.25),
inset 0 0 18px rgba(207, 222, 244, 0.15);
}
#vv-home .vv-footer-btn,
#vv-home .vv-footer-col a,
#vv-home .vv-footer-toplink{
word-break: normal;
hyphens: none;
}
#vv-home .vv-section,
#vv-home .vv-section1,
#vv-home .vv-card,
#vv-home .vv-footer-inner,
#vv-home .vv-footer-col,
#vv-home .vv-grid,
#vv-home .vv-footer-grid,
#vv-home #vv-proof .vv-three-col,
#vv-home .vv-hero-grid{
min-width: 0;
}
#vv-home .vv-ctas,
#vv-home .vv-soulcrest-ctas,
#vv-home .vv-footer-cta,
#vv-home .vv-hero-cta{
flex-wrap: wrap;
}
#vv-home .vv-hero-cta .vv-btn,
#vv-home .vv-soulcrest-ctas .vv-btn,
#vv-home .vv-footer-btn{
max-width: 100%;
}
/* =====================================================
HERO / HOMEPAGE CORE
Hero shard layout and CTA placement
===================================================== */
/* =====================================================
HERO FRAME
Outer hero section width and spacing
===================================================== */
#vv-start-here{
margin-top: var(--vv-hero-pocket);
position: relative;
}
/* =====================================================
HERO GRID
Main landing card containing headline + CTA
===================================================== */
#vv-home .vv-hero-grid{
display: grid;
grid-template-columns: 1fr 2fr;
align-items: start;
gap: 10px 18px;
}
#vv-home .vv-hero-title{
grid-column: 1 / -1;
margin-bottom: 6px;
text-align: center;
}
#vv-home .vv-hero-sub{
grid-column: 1 / -1;
max-width: 78ch;
margin: 0 auto 8px auto;
text-align: center;
hyphens: none !important;
-webkit-hyphens: none !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
#vv-home .vv-hero-cta{
grid-column: 2;
justify-self: end;
align-self: start;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 6px;
padding-top: 6px;
min-width: 0;
}
/* =====================================================
6) DECORATIVE SYSTEMS
Door overlay, centered logo, and cosmic background layers
===================================================== */
/* =====================================================
LEFT DOOR — ABSOLUTE POSITION
Decorative left-side door that scrolls with page
===================================================== */
#vv-home .vv-left-door{
position: fixed;
top: 50%;
transform: translateY(-50%) translateZ(0);
left: calc(var(--vvHeroLeft) - (var(--vvDoorW) * 0.60) + var(--vvDoorKiss));
width: var(--vvDoorW);
max-width: none;
min-width: 0;
pointer-events: none;
z-index: 1;
opacity: 0.94;
filter:
drop-shadow(0 0 16px rgba(100,155,255,.72))
drop-shadow(0 0 38px rgba(100,155,255,.38));
will-change: transform;
backface-visibility: hidden;
max-width: 100vw;
}
#vv-home .vv-left-door img{
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* =====================================================
CENTER LOGO
Floating centered logo between header and hero
===================================================== */
#vv-home .vv-right-logo{
position: fixed;
left: 50%;
transform:
translateX(-50%)
translateY(calc((1 - var(--vvLogoOpacity, 1)) * 12px))
translateZ(0);
width: min(var(--vv-frame), var(--vv-logo-max-w));
height: var(--vvTopPocketH);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
pointer-events: none;
opacity: var(--vvLogoOpacity, 1);
filter:
drop-shadow(0 0 14px rgba(100,155,255,.50))
drop-shadow(0 0 28px rgba(0,0,0,.28));
transition: opacity 420ms ease, transform 420ms ease;
will-change: opacity, transform;
max-width: 100vw;
}
#vv-home .vv-right-logo img{
width: min(var(--vv-logo-max-w), calc(var(--vv-frame) * var(--vv-logo-shrink-w)));
max-width: 100%;
height: auto;
max-height: 500px;
display: block;
object-fit: contain;
}
/* =====================================================
COSMIC BACKGROUND
Fixed layered background image + atmosphere overlay
===================================================== */
#vv-home::before{
content: "";
position: fixed;
inset: 0;
z-index: -3;
background-image: var(--vv-bg-desktop);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transform: translateZ(0);
will-change: transform;
}
#vv-home::after{
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(1200px 800px at 50% 25%, rgba(0,0,0,0.25), transparent 60%),
radial-gradient(900px 700px at 20% 90%, rgba(13,36,64,0.35), transparent 62%),
linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
}
/* =====================================================
7) CONTENT SECTIONS
Lanes, proof list, accordions, Soulcrest, and footer styles
===================================================== */
/* =====================================================
LANES
Structured build path card grid
===================================================== */
#vv-lanes .vv-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 12px;
}
#vv-lanes .vv-lane{
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.25s ease;
}
#vv-lanes .vv-more{
display: none;
margin-top: 10px;
}
#vv-lanes .vv-lane.is-open .vv-more{
display: block;
}
#vv-home .vv-lane:hover{
transform: translateY(-2px);
box-shadow:
0 0 14px rgba(100, 155, 255, 0.2),
0 0 34px rgba(100, 155, 255, 0.14);
}
/* =====================================================
WHO WE ARE
Expandable proof / credibility section
===================================================== */
#vv-home #vv-who{
cursor: pointer;
}
#vv-home #vv-who:focus-visible{
outline: 2px solid rgba(100,155,255,0.9);
outline-offset: 6px;
}
#vv-home #vv-who .vv-more{
display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-6px);
transition:
max-height 420ms ease,
opacity 260ms ease,
transform 260ms ease;
}
#vv-home #vv-who.is-open .vv-more{
max-height: 1200px;
opacity: 1;
transform: translateY(0);
}
/* =====================================================
PROOF GRID
Three-column bullet list inside Who We Are section
===================================================== */
#vv-home #vv-proof .vv-three-col{
list-style: disc;
padding-left: 20px;
margin: 14px 0 0 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 40px;
hyphens: none !important;
-webkit-hyphens: none !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
#vv-home #vv-proof .vv-three-col li{
hyphens: none !important;
-webkit-hyphens: none !important;
overflow-wrap: normal !important;
word-break: normal !important;
}
/* =====================================================
BUTTON BREATHING ANIMATION
Primary CTA ambient pulse
===================================================== */
@keyframes vvBreathGlow{
0%{
box-shadow:
0 0 10px rgba(69, 94, 135, 0.22),
0 0 26px rgba(69, 94, 135, 0.14),
inset 0 0 10px rgba(255, 255, 255, 0.07);
transform: translateY(0);
}
50%{
box-shadow:
0 0 18px rgba(69, 94, 135, 0.38),
0 0 52px rgba(69, 94, 135, 0.22),
inset 0 0 14px rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
100%{
box-shadow:
0 0 10px rgba(69, 94, 135, 0.22),
0 0 26px rgba(69, 94, 135, 0.38),
inset 0 0 10px rgba(255, 255, 255, 0.07);
transform: translateY(0);
}
}
#vv-home .vv-btn-primary:hover,
#vv-home .vv-btn-primary:focus{
animation: none;
}
/* =====================================================
SOULCREST ACCORDION
In-development section layout + accordion controls
===================================================== */
#vv-home section[aria-label="Soulcrest In Development"] .vv-dev-kicker{
margin: 0 0 10px 0 !important;
font-family: var(--vv-font-body) !important;
font-size: 16px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
opacity: 0.78 !important;
text-shadow: none !important;
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-dev-title{
margin-top: 0;
margin-bottom: 40px;
text-align: right !important;
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-acc-btn{
width: 100%;
margin: 10px auto 0 auto;
max-width: 92ch;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--vv-border);
background: rgba(69, 94, 135, 0.22);
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.9);
color: rgba(255,255,255,0.96);
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
min-height: 44px;
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-acc-btn:hover{
border-color: rgba(100,155,255,1);
background: rgba(69, 94, 135, 0.30);
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-acc-btn:focus-visible{
outline: 2px solid rgba(100,155,255,0.9);
outline-offset: 3px;
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-acc-icon{
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(0,0,0,0.18);
font-size: 18px;
line-height: 1;
flex: 0 0 auto;
transition: transform 220ms ease;
}
#vv-home section[aria-label="Soulcrest In Development"].is-open .vv-acc-icon{
transform: rotate(45deg);
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-acc-panel{
max-width: 92ch;
margin: 0 auto;
padding-top: 6px;
}
/* =====================================================
SOULCREST CTA FIX
Soulcrest bottom CTA cluster + note
===================================================== */
#vv-home .vv-soulcrest-ctas{
margin-top: 18px;
display: flex;
gap: 15px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
#vv-home .vv-soulcrest-note{
text-align: right;
font-size: 18px;
margin-top: 12px;
}
/* =====================================================
FOOTER SYSTEM
Footer shell, dropdown panel, footer link grid, bottom meta
===================================================== */
#vv-home .vv-footer{
position: relative;
z-index: 2;
margin-top: 22px;
max-width: var(--vv-max);
}
#vv-home .vv-footer-inner{
border-radius: var(--vv-radius);
padding: clamp(16px, 2.2vw, 26px);
background:
radial-gradient(800px 500px at 0% 120%, rgba(13, 36, 64, 1), transparent 60%),
radial-gradient(
circle at center,
transparent 0%,
rgba(69,94,130,0.08) 55%,
rgba(69,94,130,0.18) 75%,
rgba(69,94,130,0.36) 100%
);
border: 1px solid rgba(69,94,130,1);
box-shadow:
0 18px 60px rgba(0,0,0,0.65),
inset 0 1px 0 rgba(255,255,255,0.08);
}
#vv-home .vv-footer-top{
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 14px;
align-items: center;
padding-bottom: 14px;
margin-bottom: 14px;
}
#vv-home .vv-footer-brand{
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
min-width: 50px;
}
#vv-home .vv-footer-brand img{
height: 46px;
width: 46px;
display: block;
filter:
drop-shadow(0 0 10px rgba(100, 155, 255,.15))
drop-shadow(0 0 18px rgba(217, 182, 100,.10));
}
#vv-home .vv-footer-tag{
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.85);
color: rgba(255,255,255,0.86);
line-height: 1.3;
overflow-wrap: anywhere;
}
#vv-home .vv-footer-cta{
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
#vv-home .vv-footer-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 14px;
border-radius: 14px;
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.82);
font-weight: 600;
text-decoration: none;
color: rgba(255,255,255,0.96);
border: 1px solid rgba(255,255,255,0.16);
background: rgba(69, 94, 135, 0.22);
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease;
-webkit-tap-highlight-color: transparent;
}
#vv-home .vv-footer-btn:hover{
transform: translateY(-1px);
background: rgba(235, 193, 118, 0.45);
border-color: rgba(255,255,255,0.22);
}
#vv-home .vv-footer-btn.is-primary{
border-color: rgba(100, 155, 255, 0.70);
background: linear-gradient(rgba(0,0,0,0) 20%, rgba(100,155,255,0.55) 80%);
box-shadow:
0 0 12px rgba(100, 155, 255, 0.20),
inset 0 0 12px rgba(255,255,255,0.10);
}
#vv-home .vv-footer-toggle{
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 12px 14px;
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.82);
font-weight: 700;
color: rgba(255,255,255,0.94);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#vv-home .vv-footer-panel{
display: block;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-6px);
transition:
max-height 420ms ease,
opacity 260ms ease,
transform 260ms ease;
}
#vv-home .vv-footer.is-open .vv-footer-panel{
max-height: 1800px;
opacity: 1;
transform: translateY(0);
}
#vv-home .vv-footer-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 6px;
}
#vv-home .vv-footer-col{
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.05);
padding: 14px;
min-width: 0;
}
#vv-home .vv-footer-title{
font-family: "Cinzel", serif;
font-size: 18px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
margin-bottom: 10px;
}
#vv-home .vv-footer-col a{
display: block;
text-decoration: none;
color: rgba(255,255,255,0.84);
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.82);
padding: 10px 10px;
border-radius: 12px;
border: 1px solid transparent;
background: rgba(0,0,0,0.10);
margin-top: 8px;
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease;
}
#vv-home .vv-footer-col a:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.10);
}
#vv-home .vv-footer-bottom{
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.10);
flex-wrap: wrap;
}
#vv-home .vv-footer-meta{
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.78);
color: rgba(255,255,255,0.78);
}
#vv-home .vv-footer-meta a{
color: rgba(255,255,255,0.82);
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
#vv-home .vv-footer-meta a:hover{
border-bottom-color: rgba(235, 193, 118, 0.75);
}
#vv-home .vv-footer-dot{
opacity: 0.6;
}
#vv-home .vv-footer-toplink{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 12px;
text-decoration: none;
font-family: var(--vv-font-body);
font-size: calc(var(--vv-body) * 0.78);
font-weight: 600;
color: rgba(255,255,255,0.92);
background: rgba(0,0,0,0.12);
transition:
transform .18s ease,
background .18s ease,
border-color .18s ease;
}
#vv-home .vv-footer-toplink:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.06);
}
/* =====================================================
8) RESPONSIVE RULES
Breakpoint groupings for 1360 / 900 / 600 / 520 / 420 / 400
===================================================== */
/* =====================================================
1360px
Gold system scaling
===================================================== */
@media (max-width: 1360px){
:root{
--vv-gold-size: 520px 520px;
--vv-gold-pos: 116% -18%;
}
}
/* =====================================================
1200px / general desktop-down behavior
(No dedicated rules in source beyond framed systems)
===================================================== */
/* =====================================================
900px
Header mobile switch + homepage mobile adjustments
===================================================== */
@media (max-width: 900px){
:root{
--vv-gold-size: 460px 460px;
--vv-gold-pos: 112% -20%;
}
#vv-header{
--vv-edge: 24px;
}
.vv-nav,
.vv-cta{
display: none;
}
.vv-burger{
display: inline-flex;
}
.vv-logo{
height: 44px;
}
.vv-header-inner{
padding: 12px 14px;
min-height: 64px;
}
#vv-header.open .vv-header-inner{
opacity: 0;
pointer-events: none;
}
#vv-home{
--vv-title: clamp(26px, 6vw, 64px);
--vv-subtitle: clamp(22px, 4vw, 36px);
--vv-body: clamp(17px, 2.8vw, 24px);
--vv-home-top: clamp(140px, 15vw, 160px);
--vv-hero-pocket: 240px;
--vv-logo-max-w: 680px;
--vv-logo-shrink-w: 92%;
--vv-logo-max-h-ratio: 0.88;
--vvDoorW: clamp(140px, 26vw, 220px);
}
#vv-home::before{
background-image: var(--vv-bg-mobile, var(--vv-bg-desktop));
background-position: center center;
}
#vv-home .vv-left-door{
top: 45%;
left: calc(var(--vvHeroLeft) - (var(--vvDoorW) * 0.62) + 2px);
opacity: 0.78;
filter:
drop-shadow(0 0 10px rgba(100,155,255,.48))
drop-shadow(0 0 22px rgba(100,155,255,.22));
}
#vv-home .vv-right-logo{
filter:
drop-shadow(0 0 10px rgba(100,155,255,.38))
drop-shadow(0 0 18px rgba(0,0,0,.24));
}
#vv-home .vv-section,
#vv-home .vv-section1,
#vv-home .vv-card{
background-color: rgba(255,255,255,0.03) !important;
}
#vv-home .vv-section,
#vv-home .vv-section1{
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
#vv-home #vv-proof .vv-three-col{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 28px;
}
#vv-start-here{
width: 100%;
}
#vv-home .vv-hero-grid{
grid-template-columns: 1fr;
}
#vv-home .vv-hero-cta{
grid-column: 1 / -1;
justify-self: center;
margin-top: 10px;
}
#vv-lanes .vv-grid{
grid-template-columns: 1fr;
}
#vv-home .vv-lane-cta{
margin-left: 0 !important;
display: inline-flex !important;
justify-content: center !important;
align-self: center !important;
}
#vv-home .vv-ctas{
justify-content: center !important;
text-align: center !important;
margin-left: 0 !important;
}
#vv-home .vv-soulcrest-ctas{
justify-content: center;
flex-direction: column;
gap: 14px;
}
#vv-home .vv-soulcrest-ctas .vv-btn{
width: 100%;
max-width: 420px;
}
#vv-home .vv-soulcrest-note{
text-align: center;
margin-top: 14px;
}
#vv-home .vv-footer-top{
grid-template-columns: 1fr;
text-align: center;
}
#vv-home .vv-footer-brand{
justify-content: center;
flex-direction: column;
}
#vv-home .vv-footer-cta{
justify-content: center;
}
#vv-home .vv-footer-grid{
grid-template-columns: 1fr;
}
#vv-home .vv-footer-bottom{
justify-content: center;
text-align: center;
}
}
/* =====================================================
600px
Small tablet / large phone adjustments
===================================================== */
@media (max-width: 600px){
.vv-mobile{
left: 8px !important;
right: 8px !important;
width: auto !important;
}
#vv-home #vv-proof .vv-three-col{
grid-template-columns: 1fr;
gap: 8px 0;
}
#vv-home section[aria-label="Soulcrest In Development"] .vv-dev-title{
text-align: center !important;
margin-bottom: 28px !important;
}
}
/* =====================================================
520px
Gold system scaling
===================================================== */
@media (max-width: 520px){
:root{
--vv-gold-size: 390px 390px;
--vv-gold-pos: 110% -22%;
}
}
/* =====================================================
420px
Small phone rules
===================================================== */
@media (max-width: 420px){
#vv-header{
--vv-edge: 12px;
width: calc(100% - 24px);
}
.vv-header-inner{
padding: 10px 12px;
}
.vv-burger{
width: 42px;
height: 42px;
}
.vv-mobile a{
font-size: 17px;
padding: 14px 10px;
}
#vv-home{
--vv-title: clamp(26px, 6vw, 64px);
--vv-subtitle: clamp(22px, 4vw, 36px);
--vv-body: clamp(17px, 2.8vw, 24px);
--vv-home-top: clamp(120px, 14vw, 140px);
--vv-hero-pocket: 200px;
--vv-logo-max-w: 460px;
--vv-logo-shrink-w: 94%;
--vv-logo-max-h-ratio: 0.86;
--vvDoorW: clamp(100px, 24vw, 160px);
}
#vv-home .vv-left-door{
top: 42%;
left: calc(var(--vvHeroLeft) - (var(--vvDoorW) * 0.66) + 4px);
opacity: 0.70;
}
#vv-home .vv-section,
#vv-home .vv-section1{
padding: 12px !important;
}
#vv-home .vv-card{
padding: 14px !important;
}
#vv-home h1,
#vv-home h2,
#vv-home h3,
#vv-home p,
#vv-home li{
overflow-wrap: anywhere;
}
#vv-home .vv-footer{
width: 100%;
}
#vv-home .vv-footer-inner{
padding: 14px;
}
}
/* =====================================================
400px
Gold system scaling
===================================================== */
@media (max-width: 400px){
:root{
--vv-gold-size: 340px 340px;
--vv-gold-pos: 108% -24%;
}
}
/* ---------- 8. 768px and down ---------- */
@media (max-width: 768px){
#vv-home{
--vv-pad: 14px;
--vv-gap: 14px;
--vv-radius: 18px;
--vv-hero-pocket: 220px;
--vv-logo-max-w: 560px;
--vv-logo-shrink-w: 94%;
--vvDoorW: clamp(110px, 24vw, 180px);
}
#vv-home .vv-section,
#vv-home .vv-section1{
padding: var(--vv-pad);
}
#vv-home .vv-card{
padding: 14px;
}
#vv-home .vv-footer-inner{
padding: 16px;
}
#vv-home .vv-footer-top{
gap: 12px;
}
#vv-home .vv-hero-sub{
max-width: 100%;
}
#vv-home .vv-hero-sub br{
display: none;
}
}
/* ---------- 9. 480px and down ---------- */
@media (max-width: 480px){
#vv-home{
--vv-home-top: clamp(108px, 13vw, 124px);
--vv-hero-pocket: 180px;
--vv-logo-max-w: 420px;
--vv-logo-shrink-w: 96%;
--vvDoorW: clamp(86px, 22vw, 130px);
}
#vv-start-here,
#vv-home .vv-container,
#vv-home .vv-footer{
width: calc(100% - 24px);
}
#vv-home .vv-section,
#vv-home .vv-section1{
padding: 12px;
border-radius: 16px;
}
#vv-home .vv-hero-title br,
#vv-home .vv-hero-sub br{
display: none;
}
#vv-home .vv-hero-title,
#vv-home .vv-hero-sub,
#vv-home .vv-hero-cta{
max-width: 100%;
}
#vv-home .vv-card,
#vv-home .vv-footer-col{
padding: 12px;
border-radius: 16px;
}
#vv-home .vv-footer-toplink{
width: 100%;
}
#vv-home .vv-footer-meta{
justify-content: center;
text-align: center;
}
#vv-home .vv-footer-col a{
text-align: center;
}
#vv-home .vv-left-door{
opacity: 0.58;
}
#vv-home .vv-right-logo{
opacity: calc(var(--vvLogoOpacity, 1) * 0.92);
}
}
/* ---------- 10. 360px and down ---------- */
@media (max-width: 360px){
#vv-header{
--vv-edge: 8px;
width: calc(100% - 16px);
}
.vv-header-inner{
padding: 8px 10px;
min-height: 56px;
}
.vv-logo{
height: 36px;
}
.vv-burger,
.vv-mobile-close{
width: 40px;
height: 40px;
}
#vv-home{
--vv-title: clamp(22px, 8vw, 30px);
--vv-subtitle: clamp(18px, 6vw, 22px);
--vv-body: clamp(15px, 4.2vw, 17px);
--vv-home-top: 98px;
--vv-hero-pocket: 160px;
--vv-pad: 10px;
--vv-gap: 10px;
--vv-radius: 14px;
--vv-logo-max-w: 320px;
--vv-logo-shrink-w: 98%;
--vvDoorW: clamp(68px, 20vw, 100px);
}
#vv-start-here,
#vv-home .vv-container,
#vv-home .vv-footer{
width: calc(100% - 16px);
}
#vv-home .vv-section,
#vv-home .vv-section1,
#vv-home .vv-card,
#vv-home .vv-footer-inner,
#vv-home .vv-footer-col{
border-radius: 14px;
}
#vv-home .vv-left-door{
display: none;
}
#vv-home .vv-hero-title{
margin-bottom: 4px;
}
#vv-home .vv-hero-sub{
margin-bottom: 6px;
}
#vv-home .vv-hero-cta,
#vv-home .vv-footer-cta{
width: 100%;
}
#vv-home .vv-hero-cta .vv-btn,
#vv-home .vv-footer-btn,
#vv-home .vv-footer-toplink{
width: 100%;
}
#vv-home .vv-footer-inner{
padding: 12px;
}
#vv-home .vv-footer-title{
font-size: 16px;
}
#vv-home .vv-right-logo img{
max-height: 180px;
}
}
/* ---------- 10b. 320px and down ---------- */
@media (max-width: 320px){
#vv-header{
--vv-edge: 6px;
width: calc(100% - 12px);
}
.vv-header-inner{
padding: 8px;
min-height: 52px;
}
.vv-logo{
height: 32px;
}
.vv-burger,
.vv-mobile-close{
width: 38px;
height: 38px;
}
.vv-mobile{
top: calc(6px + env(safe-area-inset-top));
left: 6px !important;
right: 6px !important;
padding: 10px;
border-radius: 14px;
}
.vv-mobile a{
font-size: 16px;
padding: 12px 10px;
}
#vv-home{
--vv-title: clamp(20px, 7.5vw, 26px);
--vv-subtitle: clamp(17px, 6vw, 20px);
--vv-body: clamp(14px, 4.6vw, 16px);
--vv-home-top: 92px;
--vv-hero-pocket: 144px;
--vv-pad: 8px;
--vv-gap: 8px;
--vv-radius: 12px;
--vv-logo-max-w: 280px;
--vv-logo-shrink-w: 100%;
}
#vv-start-here,
#vv-home .vv-container,
#vv-home .vv-footer{
width: calc(100% - 12px);
}
#vv-home .vv-section,
#vv-home .vv-section1,
#vv-home .vv-card,
#vv-home .vv-footer-inner,
#vv-home .vv-footer-col{
border-radius: 12px;
}
#vv-home .vv-section,
#vv-home .vv-section1,
#vv-home .vv-card,
#vv-home .vv-footer-inner,
#vv-home .vv-footer-col{
padding: 10px !important;
}
#vv-home .vv-hero-sub{
margin-bottom: 4px;
}
#vv-home .vv-hero-cta .vv-btn,
#vv-home .vv-soulcrest-ctas .vv-btn,
#vv-home .vv-footer-btn,
#vv-home .vv-footer-toplink{
width: 100%;
}
#vv-home .vv-soulcrest-note,
#vv-home .vv-footer-meta{
font-size: 14px;
}
#vv-home .vv-right-logo img{
max-height: 150px;
}
}
/* ---------- 11. Landscape phone mode ---------- */
@media (max-height: 500px) and (orientation: landscape){
#vv-home{
--vv-home-top: 86px;
--vv-hero-pocket: 110px;
--vvDoorW: clamp(72px, 14vw, 110px);
}
#vv-home .vv-left-door{
top: 44%;
opacity: 0.42;
}
#vv-home .vv-right-logo{
display: none;
}
#vv-home .vv-section1{
margin-top: var(--vv-hero-pocket);
}
}
/* ---------- 12. Motion safety ---------- */
@media (prefers-reduced-motion: reduce){
#vv-home .vv-card,
#vv-home .vv-lane,
#vv-home .vv-btn,
#vv-home .vv-footer-btn,
#vv-home .vv-footer-col a,
#vv-home .vv-acc-icon,
#vv-home .vv-right-logo{
transition: none !important;
animation: none !important;
}
}
/* =====================================================
REDUCED MOTION
Disable animations/transitions when requested
===================================================== */
.vv-brand,
.vv-right,
.vv-nav,
.vv-mobile,
.vv-mobile a{
min-width: 0;
}
.vv-logo{
max-width: 100%;
object-fit: contain;
}
.vv-nav a,
.vv-cta,
.vv-mobile a,
.vv-mobile-close{
min-height: 44px;
}
.vv-nav a,
.vv-cta{
display: inline-flex;
align-items: center;
justify-content: center;
}
.vv-mobile a,
.vv-mobile-close{
display: flex;
align-items: center;
justify-content: center;
}
.vv-nav a:focus-visible,
.vv-cta:focus-visible,
.vv-mobile a:focus-visible,
.vv-mobile-close:focus-visible{
outline: 2px solid rgba(100, 155, 255, .45);
outline-offset: 3px;
}
.vv-mobile{
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (hover: none){
.vv-nav a:hover,
.vv-cta:hover,
.vv-mobile a:hover,
#vv-home .vv-btn:hover,
#vv-home .vv-lane:hover,
#vv-home .vv-footer-btn:hover,
#vv-home .vv-footer-col a:hover,
#vv-home .vv-footer-toplink:hover,
#vv-home .vv-acc-btn:hover{
transform: none;
}
#vv-home .vv-card:hover{
border-color: var(--vv-border);
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
}
@media (max-height: 500px) and (orientation: landscape){
#vv-header{
top: calc(10px + env(safe-area-inset-top));
}
.vv-header-inner{
min-height: 54px;
padding: 8px 12px;
}
.vv-logo{
height: 32px;
}
.vv-mobile{
top: calc(8px + env(safe-area-inset-top));
max-height: calc(100vh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
gap: 6px;
}
.vv-mobile-head{
padding-bottom: 4px;
margin-bottom: 2px;
}
.vv-mobile a{
padding: 10px 12px;
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce){
.vv-nav a,
.vv-cta,
.vv-burger-lines,
.vv-burger-lines::before,
.vv-burger-lines::after,
.vv-mobile-overlay,
.vv-mobile{
transition: none !important;
}
}
/* =====================================================
COARSE POINTER HOVER SAFETY
Prevent hover persistence on touch devices
===================================================== */
@media (hover: none) and (pointer: coarse){
#vv-home .vv-card:hover{
box-shadow:
0 18px 60px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
border-color: var(--vv-border);
}
#vv-home .vv-lane:hover,
#vv-home .vv-btn:hover{
transform: none;
}
#vv-home .vv-footer-btn:hover,
#vv-home .vv-footer-col a:hover,
#vv-home .vv-footer-toplink:hover,
#vv-home .vv-acc-btn:hover{
transform: none !important;
}
}
/* =====================================================
MOTION-ENABLED CTA ANIMATION
Only animate primary button when motion is allowed
===================================================== */
@media (prefers-reduced-motion: no-preference){
#vv-home .vv-btn-primary{
animation: vvBreathGlow 3.6s ease-in-out infinite;
}
}
Dream Boldly Build Intentionally
- Ideas are powerful. Without structure, they fade
We design venture architecture, defining scope, architecting systems,
and mapping execution so vision becomes something you can actually build.
The Blueprint is
where momentum becomes durable.
You bring the ambition. We define the architecture. You leave with a clear,
buildable path forward.
Choose Your Build Path
Market & Positioning Architecture
The Signal
Your idea needs definition before it needs scale.
What this solves:
Confused messaging.
Weak offers. No clear identity.
No competitive edge.
What we do:
We define your positioning,
clarify your offer,
align your brand strategy,
and turn your concept into
something structured, distinct, and sellable.
Define the Signal →
Start here if your idea feels promising but undefined.
Clarity first. Structure second.
Operational & Execution Architecture
The System
Execution without structure burns time and talent.
What this solves:
Chaos. Bottlenecks. Wasted labor.
Poor coordination. Leadership gaps.
What we do:
We design, improve, and lead operational
systems — from internal workflows to
fully managed on-site team deployment.
Strengthen the System →
Start here if execution feels heavy, chaotic,
or stalled. We improve before we scale.
Identity & Experience Architecture
The Signature
Who you are — expressed with precision.
What this solves:
Inconsistency. Weak presence.
Forgettable identity.
What we do:
We align how you look, speak, operate,
and show up — internally and externally.
Refine the Signature →
Start here if your presence doesn't match your
ambition. Make it deliberate.
Built Under Pressure
Vodivus was forged in environments where execution is public, timelines are unforgiving, and complexity is routine.
From multi-hundred-person productions to large-scale operational deployments, our systems were built where failure is visible and structure has to hold.
We don't theorize about efficiency. We've operated where it's required.
400+ person production coordination
7,000-attendee live department leadership
Fully insured on-site team deployment
Program redesign from the ground up
Infrastructure systems for large-scale operations
Custom platform and ecosystem development (Soulcrest)
SoulCrest is a next-generation ecosystem - Read More
+
An architecture for identity, momentum, and meaningful connection, SoulCrest integrates digital systems with real-world participation.
It is designed to reflect and respond to how you move, build, and participate — deepening experience without reducing it to noise, homework, or metrics.
Built to create coherence where most platforms create fragmentation, it aligns growth, access, and community inside a deliberately engineered framework.
Launching in structured phases, SoulCrest is designed as a long-term platform for sustained participation and evolving depth.
Phase I beta access is curated and released by application.
Structured rollout • Curated beta • Application-based access