/* Shared layout dimensions come from --layout-* custom properties in custom.css */
.landingContent {
width: 100%;
max-width: var(--layout-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--layout-padding);
padding-right: var(--layout-padding);
box-sizing: border-box;
}
@media screen and (max-width: 996px) {
.landingContent {
padding-left: var(--layout-padding-md);
padding-right: var(--layout-padding-md);
}
}
@media screen and (max-width: 600px) {
.landingContent {
padding-left: var(--layout-padding-sm);
padding-right: var(--layout-padding-sm);
}
}
.heroSection {
display: flex;
min-height: 480px;
flex-direction: column;
justify-content: center;
transition: all 200ms ease;
padding: 10rem 0rem 8rem 0rem;
}
.heroSection h3 {
font-size: 2.375rem;
line-height: 1.25;
font-weight: 400;
}
.heroContent {
display: flex;
flex: 3;
width: 100%;
margin-bottom: 6rem;
flex-direction: column;
align-items: flex-start;
}
.heroTitle {
font-size: 3.5em;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
text-wrap-style: balance;
color: var(--oc-gray-8);
}
[data-theme='dark'] .heroTitle {
color: var(--oc-gray-0);
}
@media screen and (max-width: 996px) {
.heroTitle {
font-size: 2rem;
}
}
.heroText {
color: var(--oc-gray-7);
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 400;
margin-bottom: 1rem;
}
[data-theme='dark'] .heroText {
color: var(--oc-gray-4);
}
.heroImageContainer {
position: relative;
overflow: hidden;
background-color: var(--oc-orange-1);
border: 1px solid rgba(var(--oc-orange-0-rgb), 0.25);
border-radius: 4px;
aspect-ratio: 16 / 8;
}
[data-theme='dark'] .heroImageContainer {
background-color: var(--oc-gray-9);
border: 1px solid rgba(var(--oc-gray-7-rgb), 0.25);
}
.heroImage {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
width: 85%;
height: auto;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
box-shadow: 0px 8px 40px rgba(var(--oc-orange-3-rgb), 0.75);
}
[data-theme='dark'] .heroImage {
box-shadow: none;
border: 1px solid rgba(var(--oc-gray-7-rgb), 0.75);
}
@media screen and (max-width: 996px) {
.heroImage {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
.heroButtons {
display: flex;
flex-direction: row;
gap: 1.5rem;
margin-top: 1rem;
margin-bottom: 2rem;
}
@media screen and (max-width: 600px) {
.heroButtons {
flex-direction: column;
width: 100%;
}
.heroButtons > a,
.heroButtons > button {
width: 100%;
}
}
.heroButtons > a,
.heroButtons > button {
display: inline-flex;
font-family: inherit;
font-weight: 500;
padding: 1.25rem 2rem;
gap: 0.5rem;
transition: all 200ms ease;
font-size: 1rem;
text-decoration: none;
align-items: center;
border: none;
border-radius: 2.5rem;
text-align: center;
justify-content: center;
cursor: pointer;
}
.heroButtons > a:hover,
.heroButtons > button:hover {
text-decoration: none;
}
.purpleButton {
background-color: var(--oc-grape-8);
color: #fff;
}
.purpleButton:hover {
background-color: var(--oc-grape-9);
}
.ctaBanner {
position: relative;
background-color: var(--oc-grape-0);
width: 100%;
padding: 6rem 0 4rem 0;
margin-top: 10rem;
}
.ctaBanner::before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, transparent, var(--oc-grape-0));
pointer-events: none;
}
[data-theme='dark'] .ctaBanner {
background-color: var(--oc-gray-9);
}
@media screen and (max-width: 996px) {
.ctaBanner {
padding: 4rem 0 3rem 0;
}
}
[data-theme='dark'] .ctaBanner::before {
background: linear-gradient(to bottom, transparent, var(--oc-gray-9));
}
/* CTA inner uses .landingContent for width; only CTA-specific descendant styles below */
.ctaBannerInner h2 {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
text-wrap-style: balance;
color: var(--oc-gray-8);
margin-bottom: 1rem;
}
[data-theme='dark'] .ctaBannerInner h2 {
color: var(--oc-gray-0);
}
.ctaBannerDescription {
margin-bottom: 0;
color: #4d4d4d;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 400;
margin: 1rem 0 2rem 0;
width: 64%;
}
[data-theme='dark'] .ctaBannerDescription {
color: #b2b2b2;
}
@media screen and (max-width: 996px) {
.ctaBannerDescription {
width: 90%;
}
}
.ctaWhiteButton {
background-color: white;
color: var(--oc-gray-8);
box-shadow: 0px 8px 16px rgba(var(--oc-violet-1-rgb), 0.5), 0px -1px 16px rgba(var(--oc-violet-1-rgb), 0.75);
}
.ctaWhiteButton:hover {
background-color: white;
color: var(--oc-grape-8);
}
[data-theme='dark'] .ctaWhiteButton {
background-color: #1B1B1D;
color: var(--oc-gray-2);
box-shadow: 0px 8px 16px rgba(var(--oc-grape-8-rgb), 0.25), 0px -1px 16px rgba(var(--oc-grape-8-rgb), 0.5);
}
[data-theme='dark'] .ctaWhiteButton:hover {
background-color: #1B1B1D;
color: var(--oc-grape-5);
}
.masonryGrid {
column-count: 3;
column-gap: 1.5rem;
width: 100%;
margin: 0;
}
.masonryGrid > p {
margin: 0;
}
.masonryGrid p {
font-size: 1rem;
color: var(--oc-gray-7);
line-height: 140%;
font-family: system-ui;
font-feature-settings: normal;
text-wrap-style: pretty;
letter-spacing: 0.005em;
}
[data-theme='dark'] .masonryGrid p {
color: var(--oc-gray-4);
}
.masonryGrid > * {
break-inside: avoid;
margin-bottom: 1.5rem;
}
@media screen and (max-width: 996px) {
.masonryGrid {
column-count: 2;
}
}
@media screen and (max-width: 600px) {
.masonryGrid {
column-count: 1;
}
}
