/* ==================== X7 MASTER STYLES ==================== /
/ This file contains all page-specific styles for Xponential7 /
/ Sections: Colours, Careers, Contact, Leadership, Mission, Brands */
/* ==================== COLOURS ==================== */
:root {
--primary: #F7173F;
--secondary: #B90627;
--tertiary: #750216;
--quaternary: #FCABBA;
--grey: #E3E3EB;
--bg: #FDFAF7;
--text-main: #111315;
--white: #FFFFFF;
}
/* ==================== CAREERS PAGE STYLES ==================== */
/* --- Hero Section --- */
.careers-hero {
padding: 180px 0 60px;
background-color: var(--bg);
text-align: center;
}
.careers-hero h1 {
font-size: 64px;
color: var(--tertiary);
margin-bottom: 30px;
font-weight: 800;
}
.careers-lead {
font-size: 20px;
max-width: 800px;
margin: 0 auto 30px;
line-height: 1.6;
}
.careers-subheading {
font-size: 24px;
color: var(--tertiary);
font-weight: 700;
margin-top: 40px;
}
/* --- Brand Cards Grid --- */
.careers-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2x2 Grid */
gap: 40px;
max-width: 900px;
margin: 60px auto 100px;
align-items: stretch;
}
/* Card Base Style */
.career-card {
background-color: var(--white);
padding: 40px;
border-radius: 16px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
height: 100%;
}
.career-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.career-card-logo {
height: 55px;
width: auto;
max-width: 100%;
object-fit: contain;
}
.career-link-text {
font-size: 24px;
font-weight: 700;
transition: color 0.3s ease;
}
/* --- Specific Brand Colors --- */
.card-d7 { border: 2px solid #17EAEA; }
.card-d7 .career-link-text { color: #17EAEA; }
.card-d7:hover { border-width: 3px; }
.card-d7:hover .career-link-text { color: #3333EA; }
.card-g7 { border: 2px solid #E97E00; }
.card-g7 .career-link-text { color: #E97E00; }
.card-g7:hover { border-width: 3px; }
.card-g7:hover .career-link-text { color: #B65800; }
.card-a7 { border: 2px solid #BFEA17; }
.card-a7 .career-link-text { color: #BFEA17; }
.card-a7:hover { border-width: 3px; }
.card-a7:hover .career-link-text { color: #AAAE01; }
.card-p7 { border: 2px solid #A617E7; }
.card-p7 .career-link-text { color: #A617E7; }
.card-p7:hover { border-width: 3px; }
.card-p7:hover .career-link-text { color: #76209F; }

/* --- Inclusion Section --- */
.section-inclusion {
background-color: var(--tertiary);
color: var(--white);
padding: 60px 0 100px;
scroll-margin-top: 100px;
}
.inclusion-content {
max-width: 1000px;
margin: 0 auto;
}
.inclusion-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 24px;
color: var(--white);
}
.inclusion-text {
font-size: 18px;
line-height: 1.8;
margin-bottom: 32px;
opacity: 0.9;
}
/* ==================== LEADERSHIP PAGE STYLES ==================== */
/* --- Layout Grids --- */
/* Section 1 (DESI) */
.leadership-grid-desi {
display: grid;
grid-template-columns: 80% 20%;
gap: 40px;
align-items: center;
width: 100%;
}
/* Merged Founder Section (75% Text / 25% Image Stack) */
.leadership-grid-merged {
display: grid;
grid-template-columns: 75% 25%;
gap: 60px;
align-items: flex-start;
}
/* Team Section: 65% Text / 35% Image */
.leadership-grid-team {
display: grid;
grid-template-columns: 65% 35%;
gap: 60px;
align-items: center;
}
/* --- Image Styling --- */
/* Founder Image Stack */
.founder-img-stack {
display: flex;
flex-direction: column;
gap: 30px;
width: 100%;
align-items: center;
}
.founder-img-stack img {
height: auto;
border-radius: 12px;
}
/* Christian's Headshot */
.headshot-img {
width: 85%;
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.headshot-img:hover {
filter: grayscale(0%);
}
.legacy-img {
width: 100%;
opacity: 0.9;
}
.desi-float-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.desi-flat-img {
width: 80%;
height: auto;
animation: float 6s ease-in-out infinite;
}
.bouncing-img {
animation: float 6s ease-in-out infinite;
}
.team-img-shape {
width: 100%;
height: auto;
border-radius: 0 0 40px 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* --- Lists --- */
.highlight-list {
margin-top: 20px;
list-style: none;
padding: 0;
margin-left: 20px;
}
.highlight-list li {
font-size: 18px;
margin-bottom: 10px;
position: relative;
padding-left: 35px;
}
.highlight-list li::before {
content: '•';
color: var(--tertiary);
font-weight: bold;
position: absolute;
left: 0;
font-size: 24px;
line-height: 20px;
}
.bg-tertiary .highlight-list li::before { color: var(--quaternary); }
.bg-tertiary .highlight-list li strong { color: var(--quaternary); }
/* --- Ecosystem Typography --- */
.ecosystem-intro {
font-size: 24px;
text-align: center;
margin-bottom: 40px;
}
.ecosystem-big-text {
display: block;
font-size: 48px;
font-weight: 800;
color: var(--quaternary);
margin-top: 15px;
line-height: 1.2;
}
/* ==================== MISSION PAGE STYLES ==================== */
/* --- Section Spacing --- */
.section-intro {
padding: 180px 0 100px;
background-color: var(--bg);
}
.section-dark {
background-color: var(--tertiary);
color: var(--white);
padding: 100px 0;
}
.section-light {
background-color: var(--bg);
padding: 100px 0 10px 0;
}
/* --- Typography & Layout Specifics --- */
.intro-content-wrapper {
max-width: 100%;
}
.lead-text {
font-size: 28px;
line-height: 1.5;
margin-bottom: 2rem;
}
.standard-text {
margin-bottom: 1.5rem;
font-size: 20px;
}
.quote-large {
font-size: 72px;
line-height: 1.1;
margin-bottom: 3rem;
text-align: center;
}
.quote-medium {
font-size: 50px;
line-height: 1.2;
color: var(--text-main);
text-align: center;
}
.quote-mark {
color: var(--quaternary);
}
/* --- List Styling --- */
.mission-list {
list-style: none;
padding: 0;
}
.mission-list li {
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
}
.mission-bullet {
color: var(--tertiary);
}
/* --- Focus Split (Section 3) --- */
.mission-focus-grid {
display: grid;
grid-template-columns: 20% 80%;
gap: 40px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 80px;
}
.focus-visual {
display: flex;
justify-content: center;
align-items: center;
}
.focus-image {
width: 100%;
max-width: 200px;
height: auto;
animation: float 6s ease-in-out infinite;
}
.focus-text {
text-align: left;
width: 100%;
}
/* ==================== BRANDS PAGE STYLES ==================== */
/* 4-Column List */
.brands-list-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 40px 0;
text-align: left;
}
.brand-list-item {
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
font-size: 24px;
}
.brand-list-bullet {
color: var(--tertiary);
font-size: 24px;
line-height: 0;
}
/* --- Brand Identity Colors --- */
.text-d7 { color: #17EAEA; }
.text-g7 { color: #E97E00; }
.text-a7 { color: #BFEA17; }
.text-p7 { color: #A617E7; }
/* --- Section Alternating Styles --- */
.section-brand-dark {
background-color: var(--tertiary);
color: var(--white);
padding: 80px 0;
}
.section-brand-light {
background-color: var(--bg);
color: var(--text-main);
padding: 80px 0;
}
/* --- Content Layout --- */
.brand-content {
max-width: 900px;
margin: 0 auto;
}
.brand-header {
text-align: center;
margin-bottom: 40px;
}
.brand-logo-img {
height: 60px;
width: auto;
margin-bottom: 20px;
}
.brand-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 1rem;
}
.brand-body {
font-size: 18px;
margin-bottom: 2rem;
}
.brand-bullets {
list-style: none;
padding: 0;
margin-bottom: 2rem;
}
.brand-bullets li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}
.brand-bullets li::before {
content: '•';
position: absolute;
left: 0;
color: inherit;
}
/* --- Credentials Box --- */
.credentials-box {
border-radius: 0 0 16px 0;
padding: 40px;
margin: 40px 0;
font-size: 16px;
line-height: 1.6;
}
.credentials-box p {
margin-bottom: 1rem;
}
.credentials-box p:last-child {
margin-bottom: 0;
}
.section-brand-dark .credentials-box {
background-color: rgba(255, 255, 255, 0.8);
color: var(--text-main);
}
.section-brand-light .credentials-box {
background-color: color-mix(in srgb, var(--quaternary), transparent 20%);
color: var(--text-main);
}
/* --- Visit Link --- */
.brand-visit-wrapper {
text-align: center;
font-size: 40px;
font-weight: 700;
margin-top: 40px;
line-height: 1.2;
}
.brand-link {
text-decoration: none;
transition: opacity 0.3s ease;
}
.brand-link:hover {
opacity: 0.8;
}
/* ==================== RESPONSIVE STYLES ==================== */
/* --- Careers Responsive --- */
@media (max-width: 900px) {
.careers-grid {
grid-template-columns: 1fr;
width: 80%;
margin: 40px auto;
padding: 0;
}

.careers-hero h1 {
    font-size: 40px;
    padding: 0 20px;
}

.careers-lead {
    padding: 0 20px;
}

.career-card {
    padding: 30px 15px;
}

.career-card-logo {
    max-width: 90%; 
}
}

/* --- Leadership Responsive --- */
@media (max-width: 900px) {
.leadership-grid-desi,
.leadership-grid-merged,
.leadership-grid-team,
.cta-grid {
grid-template-columns: 1fr;
text-align: center;
}
.desi-flat-img {
    width: 150px; 
    margin-bottom: 30px;
}

.founder-img-stack {
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    margin-top: 30px;
}

.founder-img-stack img {
    width: 45%; 
}

.team-img-shape { 
    max-width: 400px; 
    margin: 0 auto; 
}

.mini-brand-logo { 
    height: 24px; 
}

.ecosystem-big-text { 
    font-size: 32px; 
}

.highlight-list { 
    margin-left: 0; 
    text-align: left; 
}

.highlight-list li {
    padding-left: 25px;
}

.highlight-list li::before {
    top: 5px;
    font-size: 20px;
}

.wave-transition {
    margin-top: -1px;
    margin-bottom: -1px;
    height: auto;
}

.wave-transition svg {
    display: block;
    height: 50px;
}
}
/* --- Mission Responsive --- */
@media (max-width: 900px) {
.quote-large {
font-size: 40px;
}
.mission-focus-grid {
    grid-template-columns: 1fr;
    text-align: center;
}

.focus-text { 
    text-align: center; 
}

.intro-content-wrapper {
    width: 80%;
    margin: 0 auto;
}

.mini-brand-logo {
    height: 24px; 
}

.mission-list li {
    font-size: 18px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    line-height: 1.4;
}
}
/* --- Brands Responsive --- */
@media (max-width: 900px) {
.brands-list-grid {
grid-template-columns: 1fr;
gap: 15px;
text-align: center;
justify-items: center;
}
.brand-list-item {
    width: 100%;
    justify-content: center;
}

.brand-visit-wrapper {
    font-size: 32px; 
}

.credentials-box {
    padding: 25px;
}
}