/* ==========================================================
VERMILION ARTICULATED
COMPLETE PAGE CSS V5
========================================================== */
/* ==========================================================
SCROLL SETTINGS
JavaScript controls the scrolling animation.
========================================================== */
html.va-home,
html.va-home body {
scroll-behavior: auto !important;
}
html.va-home {
scroll-padding-top: 110px;
}
@media (max-width: 767px) {
html.va-home {
scroll-padding-top: 85px;
}
}
/* ==========================================================
HERO
Section: 1606258505758
========================================================== */
#section-1606258505758 {
background-size: cover !important;
background-position: center center !important;
}
/* Hero height and vertical alignment - Desktop */
#section-1606258505758 .sizer {
min-height: 0 !important;
height: auto !important;
box-sizing: border-box !important;
/* Keeps content roughly where it is vertically */
padding-top: clamp(170px, 12vw, 220px) !important;
/* Controls space below CTA */
padding-bottom: 100px !important;
display: flex !important;
align-items: flex-start !important;
}
/* Full-width container with controlled side spacing */
#section-1606258505758 .container {
width: 100% !important;
max-width: none !important;
padding-left: clamp(60px, 8vw, 150px) !important;
padding-right: 6vw !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ==========================================================
HERO CONTENT LAYOUT
========================================================== */
#section-1606258505758 .row {
display: grid !important;
grid-template-columns:
minmax(0, 0.46fr)
minmax(0, 0.54fr);
column-gap: 18px !important;
row-gap: 22px !important;
width: min(680px, 45vw) !important;
max-width: 680px !important;
margin: 0 !important;
align-items: start !important;
justify-content: start !important;
}
/* Remove Kajabi's forced row breaks */
#section-1606258505758 .block-break {
display: none !important;
}
/* Reset Kajabi column widths and spacing */
#section-1606258505758 #block-1790877117585,
#section-1606258505758 #block-1606258505758_0,
#section-1606258505758 #block-1787794076982,
#section-1606258505758 #block-1787797138783,
#section-1606258505758 #block-1787797304733 {
width: auto !important;
max-width: none !important;
flex: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
text-align: left !important;
}
/* Remove Kajabi block padding */
#section-1606258505758 #block-1790877117585 .block,
#section-1606258505758 #block-1606258505758_0 .block,
#section-1606258505758 #block-1787794076982 .block,
#section-1606258505758 #block-1787797138783 .block,
#section-1606258505758 #block-1787797304733 .block {
padding: 0 !important;
margin: 0 !important;
}
/* ==========================================================
HERO EYEBROW
========================================================== */
#block-1790877117585 {
grid-column: 1 / -1 !important;
}
#block-1790877117585 p {
font-family:
'Inter',
Arial,
sans-serif !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 500 !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
margin: 0 !important;
color: #2c3e50 !important;
}
/* Neutralize italic + bold formatting coming from Kajabi */
#block-1790877117585 p em,
#block-1790877117585 p strong,
#block-1790877117585 p span {
font-style: normal !important;
font-weight: 500 !important;
letter-spacing: inherit !important;
}
/* ==========================================================
HERO HEADLINE
========================================================== */
#block-1606258505758_0 {
grid-column: 1 / -1 !important;
}
#block-1606258505758_0 h1 {
font-family:
'Cormorant Garamond',
Georgia,
serif !important;
font-size: clamp(64px, 4.35vw, 78px) !important;
line-height: 0.98 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
max-width: 680px !important;
margin: 0 !important;
color: #fff !important;
}
/* ==========================================================
HERO DESCRIPTION
========================================================== */
#block-1787794076982 {
grid-column: 1 / -1 !important;
}
#block-1787794076982 p {
font-family:
'Inter',
Arial,
sans-serif !important;
font-size: clamp(18px, 1.25vw, 21px) !important;
line-height: 1.5 !important;
/* Second sentence / normal copy */
font-weight: 450 !important;
max-width: 620px !important;
margin: 8px 0 10px !important;
color: #2c3e50 !important;
/* Thin off-white outline */
-webkit-text-stroke: 0.35px #F7F1E5;
paint-order: stroke fill;
/* Subtle fallback definition */
text-shadow:
0.3px 0 #F7F1E5,
-0.3px 0 #F7F1E5,
0 0.3px #F7F1E5,
0 -0.3px #F7F1E5;
}
/* First sentence — mark this text bold in Kajabi */
#block-1787794076982 p strong {
font-weight: 650 !important;
}
/* ==========================================================
HERO BUTTON ROW
========================================================== */
#block-1787797138783 {
grid-column: 1 !important;
}
#block-1787797304733 {
grid-column: 2 !important;
}
/* Shared button sizing */
#section-1606258505758 #block-1787797138783 .btn,
#section-1606258505758 #block-1787797304733 .btn {
width: 100% !important;
min-height: 68px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 26px !important;
border-radius: 999px !important;
font-family:
'Inter',
Arial,
sans-serif !important;
font-size: 17px !important;
line-height: 1.2 !important;
font-weight: 600 !important;
white-space: nowrap !important;
margin: 0 !important;
}
/* Orange button */
#block-1787797138783 .btn {
background: #c14321 !important;
border: 2px solid #c14321 !important;
color: #fff !important;
}
/* Outline button */
#block-1787797304733 .btn {
background: rgba(7, 19, 24, 0.25) !important;
border: 2px solid rgba(
255,
255,
255,
0.8
) !important;
color: #fff !important;
}
/* ==========================================================
CONSISTENT HERO BUTTON ARROWS
========================================================== */
html.va-home #block-1787797138783 .btn:not(.va-arrow-cta)::after,
html.va-home #block-1787797304733 .btn:not(.va-arrow-cta)::after {
content: "→";
font-family: Arial, sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin-left: 14px;
}
/* Prevent duplicate arrows */
html.va-home #block-1787797138783 .btn.va-arrow-cta::after,
html.va-home #block-1787797304733 .btn.va-arrow-cta::after {
content: none !important;
}
/* Arrows inserted by existing CTA script */
html.va-home .va-arrow-cta .va-cta-arrow {
display: inline-block;
margin-left: 0.45em;
font-family: Arial, sans-serif;
font-size: 1.12em;
font-weight: 400;
line-height: 1;
vertical-align: -0.02em;
white-space: nowrap;
transition: transform 0.25s ease;
}
/* Subtle arrow movement */
@media (hover: hover) {
html.va-home .va-arrow-cta:hover .va-cta-arrow {
transform: translateX(4px);
}
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html.va-home .va-cta-arrow {
transition: none;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (min-width: 768px) and (max-width: 1100px) {
#section-1606258505758 .container {
padding-left: 6vw !important;
padding-right: 5vw !important;
}
#section-1606258505758 .row {
width: 55vw !important;
max-width: 620px !important;
}
#block-1606258505758_0 h1 {
font-size: clamp(
52px,
5.5vw,
66px
) !important;
}
}
/* ==========================================================
VERMILION ARTICULATED
MOBILE HERO - FINAL SPACING
========================================================== */
@media (max-width: 767px) {
/* HERO SECTION */
html.va-home #section-1606258505758 .sizer {
min-height: 90vh !important;
min-height: 90svh !important;
box-sizing: border-box !important;
padding-top: 82px !important;
padding-bottom: 82px !important;
display: flex !important;
align-items: flex-end !important;
}
/* HERO CONTENT CONTAINER */
html.va-home #section-1606258505758 .container {
width: 100% !important;
padding-left: 24px !important;
padding-right: 24px !important;
}
/* HERO CONTENT STACK */
html.va-home #section-1606258505758 .row {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: 1fr !important;
row-gap: 14px !important;
}
/* ALL HERO BLOCKS */
#block-1790877117585,
#block-1606258505758_0,
#block-1787794076982,
#block-1787797138783,
#block-1787797304733 {
grid-column: 1 !important;
text-align: left !important;
}
/* EYEBROW */
#block-1790877117585 p {
font-size: 11px !important;
line-height: 1.2 !important;
letter-spacing: 0.24em !important;
margin: 0 !important;
}
/* HEADLINE */
#block-1606258505758_0 h1 {
font-size: clamp(
45px,
13vw,
58px
) !important;
line-height: 0.98 !important;
}
/* DESCRIPTION */
#block-1787794076982 p {
font-size: 17px !important;
line-height: 1.5 !important;
margin-top: 4px !important;
}
/* HERO BUTTONS */
#section-1606258505758 #block-1787797138783 .btn,
#section-1606258505758 #block-1787797304733 .btn {
width: 100% !important;
min-height: 60px !important;
}
}
/* ==========================================================
HERO SPACING REFINEMENTS
========================================================== */
/* Remove leftover Kajabi spacing */
#section-1606258505758 #block-1790877117585,
#section-1606258505758 #block-1606258505758_0,
#section-1606258505758 #block-1787794076982,
#section-1606258505758 #block-1787797138783,
#section-1606258505758 #block-1787797304733 {
padding: 0 !important;
margin: 0 !important;
}
/* Tighter spacing between hero blocks */
#section-1606258505758 .row {
row-gap: 14px !important;
}
/* Eyebrow spacing */
#block-1790877117585 p {
margin: 0 !important;
}
/* Headline spacing */
#block-1606258505758_0 h1 {
margin: 0 0 6px 0 !important;
}
/* Body copy spacing */
#block-1787794076982 p {
margin: 0 0 14px 0 !important;
}
/* ==========================================================
SHORTER HERO BUTTONS
========================================================== */
#section-1606258505758 #block-1787797138783 .btn,
#section-1606258505758 #block-1787797304733 .btn {
min-height: 56px !important;
padding: 11px 24px !important;
}
/* ==========================================================
HEADER CTA
NORMAL FONT WEIGHT
========================================================== */
#block-1787797488672 .btn {
font-weight: 400 !important;
}
/* ==========================================================
BUT THERE IS ANOTHER WAY
MATCH HERO SPACING AND RHYTHM
========================================================== */
@media (min-width: 768px) {
#section-1787804281754 .container {
width: 100% !important;
max-width: none !important;
padding-left: clamp(
60px,
8vw,
150px
) !important;
padding-right: 6vw !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Match hero content stack */
#section-1787804281754 .row {
display: grid !important;
grid-template-columns: 1fr !important;
width: min(680px, 50vw) !important;
max-width: 680px !important;
margin: 0 !important;
row-gap: 14px !important;
justify-content: start !important;
align-items: start !important;
}
/* Remove Kajabi row breaks */
#section-1787804281754 .block-break {
display: none !important;
}
/* Reset Kajabi column widths and spacing */
#section-1787804281754 #block-1787804281754_0,
#section-1787804281754 #block-1787804281754_1,
#section-1787804281754 #block-1787804281754_3 {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
/* Remove block padding */
#section-1787804281754 #block-1787804281754_0 .block,
#section-1787804281754 #block-1787804281754_1 .block,
#section-1787804281754 #block-1787804281754_3 .block {
padding: 0 !important;
margin: 0 !important;
}
/* Heading spacing */
#block-1787804281754_0 h2 {
margin: 0 0 6px 0 !important;
}
/* Paragraph spacing */
#block-1787804281754_1 p {
margin: 0 0 14px 0 !important;
}
/* CTA spacing */
#block-1787804281754_3 .btn {
margin: 0 !important;
}
}
/* ==========================================================
BOTTOM CARDS
MORE TEXT PADDING
========================================================== */
#section-1787804368299 .feature__text {
box-sizing: border-box !important;
padding: 0 16px 18px !important;
}
/* ==========================================================
VERMILION ARTICULATED
ORGANIC SECTION TRANSITIONS V5
Works across homepage + challenge page.
Handles:
- White sections transitioning into photography
- Photographic sections transitioning into white
- Desktop + alternate mobile Kajabi sections
Desktop: 40px curve area / 26px overlap
Mobile: 18px curve area / 18px overlap
========================================================== */
/* ==========================================================
SHARED CURVE SETTINGS
========================================================== */
:root {
--va-curve-height: 40px;
--va-curve-shape: polygon(
0% 15px,
5% 14px,
10% 12.5px,
15% 10.5px,
20% 9.5px,
25% 10px,
30% 11.5px,
35% 14px,
40% 17px,
45% 19.5px,
50% 21px,
55% 21.5px,
60% 21px,
65% 19.5px,
70% 17px,
75% 14px,
80% 12px,
85% 10.5px,
90% 10.5px,
95% 12.5px,
100% 15px,
100% 100%,
0% 100%
);
}
/* ==========================================================
TRANSITION TYPE 1
WHITE TO PHOTOGRAPHY
========================================================== */
#section-1788233843267,
#section-1787804281754,
#section-1789443210491,
#section-1789770040885,
#section-1789767557568 {
position: relative;
z-index: 2;
margin-top: -26px !important;
-webkit-clip-path: var(
--va-curve-shape
);
clip-path: var(
--va-curve-shape
);
}
/* ==========================================================
TRANSITION TYPE 2
PHOTOGRAPHY TO WHITE
========================================================== */
/* White section wrappers */
#section-1787799751851,
#section-1790091707615,
#section-1787803312609,
#section-1789441524831,
#section-1790090306732,
#section-1789766679132,
#section-1789766702000 {
position: relative;
z-index: 2;
margin-top: 0 !important;
-webkit-clip-path: none !important;
clip-path: none !important;
}
/* Create the white organic transition */
#section-1787799751851::before,
#section-1790091707615::before,
#section-1787803312609::before,
#section-1789441524831::before,
#section-1790090306732::before,
#section-1789766679132::before,
#section-1789766702000::before {
content: "";
display: block;
position: absolute;
top: calc(
-1 * var(--va-curve-height)
);
left: 0;
right: 0;
width: 100%;
height: calc(
var(--va-curve-height) + 1px
);
background-color: #ffffff;
-webkit-clip-path: var(
--va-curve-shape
);
clip-path: var(
--va-curve-shape
);
z-index: 3;
pointer-events: none;
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 767px) {
:root {
--va-curve-height: 18px;
--va-curve-shape: polygon(
0% 9.5px,
10% 8px,
20% 6px,
30% 7.5px,
40% 10.5px,
50% 13.5px,
60% 15px,
70% 13.5px,
80% 10.5px,
90% 7.5px,
100% 9.5px,
100% 100%,
0% 100%
);
}
/* Photographic section adjustments */
#section-1788233843267,
#section-1787804281754,
#section-1789443210491,
#section-1789770040885,
#section-1789767557568 {
margin-top: -18px !important;
}
}
/* ==========================================================
VERMILION ARTICULATED
MOBILE DROPDOWN MENU ONLY
========================================================== */
@media (max-width: 767px) {
/* DROPDOWN PANEL ONLY */
html.va-home
#section-header .header__content--mobile {
background-color: #FFFFFF !important;
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
padding: 20px 28px 30px !important;
box-sizing: border-box;
}
/* MENU LINK COLORS */
html.va-home
#section-header .header__content--mobile
a.link-list__link,
html.va-home
#section-header .header__content--mobile
.dropdown__item a {
color: #1D1B1A !important;
font-family: 'Inter', Arial, sans-serif !important;
font-weight: 400 !important;
}
/* MENU LINK SPACING */
html.va-home
#section-header .header__content--mobile
a.link-list__link {
display: block;
padding: 12px 0 !important;
}
/* DROPDOWN CTA BUTTON */
html.va-home
#section-header .header__content--mobile
.header__block--cta .btn {
background-color: #B6412E !important;
border-color: #B6412E !important;
color: #FFFFFF !important;
border-radius: 999px !important;
}
}
/* Hide the entire Powered by Kajabi container */
#section-footer .container:has(
a[href*="powered_by=true"]
) {
display: none !important;
}
About the Film
Vermilion Articulated looks beneath many of the crises we face today and asks whether they share something deeper: disconnection from ourselves, one another and the living world.
Through real people and lived experience, the film explores how we arrived here, and what it might take to restore the relationships that allow life to thrive.