/* ============================================================
EDMO — Slate Summit 2026 Event Page
Primary: #5B2B74 (Purple) | Teal: #0D8F84 | Gold: #F5A623
Font: Sora
============================================================
Google Fonts import (add to ):
============================================================
Link stylesheet:
============================================================ */
:root {
--purple: #5B2B74;
--purple-light: #7B3FA0;
--purple-dark: #3D1A50;
--purple-pale: rgba(91,43,116,0.08);
--teal: #0D8F84;
--teal-light: #12b5a8;
--gold: #F5A623;
--navy: #0B1F3A;
--white: #FFFFFF;
--off-white: #F8F5FC;
--gray-100: #F0EBF7;
--gray-200: #DDD5EA;
--gray-400: #9B89B0;
--gray-600: #5C4D6E;
--dark: #0D0612;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 20px;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Sora', sans-serif; background: var(--off-white); color: var(--navy); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* ============ NAV ============ */
nav {
background: var(--white);
padding: 0 56px;
height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--gray-200);
box-shadow: 0 2px 16px rgba(91,43,116,0.06);
}
.nav-logo {
font-family: 'Sora', sans-serif;
font-size: 22px;
font-weight: 800;
color: var(--purple);
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: 10px;
}
.nav-logo-sub {
font-size: 12px;
font-weight: 400;
color: var(--gray-400);
letter-spacing: 0.02em;
}
.nav-event-badge {
display: flex;
align-items: center;
gap: 8px;
background: var(--purple-pale);
border: 1px solid rgba(91,43,116,0.2);
padding: 6px 14px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
color: var(--purple);
}
.nav-event-badge::before {
content: '';
width: 6px; height: 6px;
background: var(--purple);
border-radius: 50%;
animation: blink 2s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.nav-cta {
background: var(--purple);
color: var(--white);
padding: 10px 22px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.02em;
transition: background 0.3s;
border: none;
cursor: pointer;
}
.nav-cta:hover { background: var(--purple-light); }
/* ============ HERO ============ */
.hero {
background: linear-gradient(30deg, #7502af 10%, #5a0b85 90%);
padding: 90px 56px 80px 56px;
position: relative;
overflow: hidden;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.hero::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
border-radius: 50%;
}
.hero::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 65%);
border-radius: 50%;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 56px 56px;
}
.hero-inner {
max-width: 100%;
margin: 0;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}
.hero-left { }
/* Row holding the event card + slider side by side, tops aligned */
.hero-detail-row {
display: flex;
gap: 48px;
align-items: flex-start;
justify-content: space-between;
width: 100%;
margin-top: 36px;
flex-wrap: wrap;
}
.hero-detail-row .event-card { flex-shrink: 0; }
/* Slider is a direct child of .hero (full-width), pinned to the right.
Adjust `right` / `top` to nudge its position. */
.hero > .hero-slider {
position: absolute;
top: 60%;
right: 70px;
transform: translateY(-50%);
margin: 0;
z-index: 2;
}
/* ===== HERO IMAGE SLIDER ===== */
.hero-slider {
position: relative;
width: 740px;
max-width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--radius-lg);
overflow: visible;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.08);
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.4s ease;
border-radius: var(--radius-lg);
overflow: hidden;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: var(--radius-lg);
}
/* NASH page only: show the full slider image (no cropping). Scoped to
.nash-page so the other event pages keep filling the box (cover). */
.nash-page .hero-slide img,
.aacrao-page .hero-slide img,
.sacrao-page .hero-slide img,
.gsv-page .hero-slide img {
object-fit: contain;
object-position: center;
background: #0e0a2a;
}
.hero-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border: none;
border-radius: 0;
background: transparent;
color: #fff;
font-size: 56px;
font-weight: 300;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 2px 8px rgba(0,0,0,0.45);
transition: transform 0.2s, opacity 0.2s;
opacity: 0.9;
z-index: 2;
}
.hero-slider-arrow:hover { background: transparent; opacity: 1; }
.hero-slider-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.hero-slider-arrow.next:hover { transform: translateY(-50%) translateX(3px); }
.hero-slider-arrow.prev { left: -56px; }
.hero-slider-arrow.next { right: -56px; }
/* Force hero text content to the left, overriding theme centering */
.hero .hero-inner,
.hero .hero-left,
.hero .hero-left h1,
.hero .hero-left .hero-ctas {
text-align: left !important;
justify-self: start !important;
align-items: flex-start !important;
}
.hero .hero-left {
padding-left: 0 !important;
margin-left: 0 !important;
}
.hero .hero-left h1 {
margin-left: 0 !important;
padding-left: 0 !important;
}
.hero .hero-ctas {
margin-left: 0 !important;
padding-left: 0 !important;
}
.hero-event-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
padding: 6px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
margin-bottom: 24px;
}
.hero h1 {
font-family: 'Sora', sans-serif;
font-size: clamp(36px, 5vw, 60px);
font-weight: 800;
color: var(--white);
line-height: 1.08;
letter-spacing: -1.5px;
margin-bottom: 20px;
text-align: left !important;
}
.hero h1 span { color: var(--gold); }
.hero-desc {
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,0.7);
line-height: 1.7;
max-width: 540px;
margin-bottom: 36px;
}
.hero-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-start !important;
}
.btn-white {
background: var(--white);
color: var(--purple);
padding: 14px 28px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s;
letter-spacing: 0.02em;
}
.btn-white:hover { background: var(--off-white); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.btn-outline-white {
background: transparent;
color: rgba(255,255,255,0.8);
padding: 14px 28px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
text-decoration: none;
border: 1.5px solid rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s;
}
.btn-outline-white:hover { border-color: rgba(255,255,255,0.7); color: var(--white); }
.hero-right {
display: flex;
flex-direction: column;
gap: 0;
flex-shrink: 0;
justify-self: end;
align-items: flex-end;
}
.event-card {
background: #e9dbf2;
border: 1px solid rgba(91,43,116,0.15);
border-radius: var(--radius-lg);
padding: 32px 28px;
min-width: 260px;
}
.event-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: 20px;
}
.event-detail {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
}
.event-detail:last-child { margin-bottom: 0; }
.event-detail-icon {
width: 32px; height: 32px;
background: rgba(91,43,116,0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.event-detail-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gray-400);
margin-bottom: 3px;
}
.event-detail-value {
font-size: 14px;
font-weight: 600;
color: var(--navy);
line-height: 1.3;
}
.booth-highlight {
background: var(--gold);
color: var(--navy);
padding: 12px 20px;
border-radius: var(--radius-sm);
margin-top: 20px;
text-align: center;
}
.booth-highlight-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
}
.booth-highlight-num {
font-size: 36px;
font-weight: 800;
letter-spacing: -1px;
line-height: 1;
margin-top: 2px;
}
/* ============ STATS STRIP ============ */
.stats-strip {
background: var(--navy);
padding: 32px 56px;
}
.stats-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.stat-item {
text-align: center;
padding: 16px 20px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-item:last-child { border-right: none; }
.stat-num {
font-family: 'Sora', sans-serif;
font-size: 32px;
font-weight: 800;
color: var(--white);
display: block;
line-height: 1;
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.stat-num span { color: var(--gold); }
.stat-label {
font-size: 11px;
font-weight: 400;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
}
/* ============ SECTION BASE ============ */
section { padding: 88px 56px; }
.container { max-width: 1100px; margin: 0 auto; }
.section-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--purple-pale);
border: 1px solid rgba(91,43,116,0.2);
padding: 5px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 16px;
}
.section-tag::before {
content: '';
width: 5px; height: 5px;
background: var(--purple);
border-radius: 50%;
}
.section-title {
font-family: 'Sora', sans-serif;
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 700;
color: var(--navy);
line-height: 1.15;
letter-spacing: -0.5px;
margin-bottom: 16px;
}
.section-title span { color: var(--purple); }
.section-desc {
font-size: 15px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.75;
max-width: 580px;
}
/* ============ ABOUT EVENT ============ */
.about-event { background: var(--white); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.about-visual {
background: linear-gradient(135deg, var(--purple-dark), var(--purple));
border-radius: var(--radius-lg);
padding: 48px 40px;
position: relative;
overflow: hidden;
}
.about-visual::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 65%);
border-radius: 50%;
}
.about-visual-title {
font-family: 'Sora', sans-serif;
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.5);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 20px;
position: relative;
}
.about-visual-event {
font-family: 'Sora', sans-serif;
font-size: 28px;
font-weight: 800;
color: var(--white);
line-height: 1.2;
letter-spacing: -0.5px;
margin-bottom: 24px;
position: relative;
}
.about-visual-event span { color: var(--gold); }
.about-visual-details {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.about-visual-detail {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(255,255,255,0.75);
font-weight: 400;
}
.about-visual-detail-icon {
font-size: 14px;
width: 20px;
text-align: center;
}
.about-right { }
.about-feature {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--gray-100);
}
.about-feature:first-child { padding-top: 0; }
.about-feature:last-child { border-bottom: none; }
.about-feature-icon {
width: 42px; height: 42px;
background: var(--purple-pale);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.about-feature-title {
font-family: 'Sora', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--navy);
margin-bottom: 4px;
}
.about-feature-desc {
font-size: 13px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.6;
}
/* ============ WHAT TO EXPECT ============ */
.expect { background: var(--off-white); }
.expect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 52px;
}
.expect-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 28px 24px;
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.expect-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(to right, var(--purple), var(--teal));
opacity: 0;
transition: opacity 0.3s;
}
.expect-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(91,43,116,0.1);
border-color: rgba(91,43,116,0.2);
}
.expect-card:hover::before { opacity: 1; }
.expect-num {
font-family: 'Sora', sans-serif;
font-size: 42px;
font-weight: 800;
color: var(--gray-100);
line-height: 1;
margin-bottom: 16px;
letter-spacing: -1px;
}
.expect-icon {
width: 44px; height: 44px;
background: var(--purple-pale);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.expect-title {
font-family: 'Sora', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
letter-spacing: -0.2px;
}
.expect-desc {
font-size: 13px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.65;
}
/* ============ PRODUCTS ============ */
.products { background: var(--white); }
.products-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: flex-start;
margin-bottom: 52px;
}
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.product-card {
background: var(--off-white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 22px 20px;
transition: all 0.3s;
}
.product-card:hover {
background: var(--purple-pale);
border-color: rgba(91,43,116,0.25);
transform: translateY(-3px);
}
.product-suite {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--purple);
margin-bottom: 6px;
}
.product-icon {
font-size: 24px;
margin-bottom: 10px;
display: block;
}
.product-name {
font-family: 'Sora', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--navy);
margin-bottom: 5px;
}
.product-desc {
font-size: 12px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.5;
}
/* ============ MEET THE TEAM ============ */
.team { background: var(--off-white); }
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 52px;
}
.team-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 28px 24px;
text-align: center;
transition: all 0.3s;
}
.team-card:hover {
border-color: rgba(91,43,116,0.25);
box-shadow: 0 12px 32px rgba(91,43,116,0.08);
}
.team-avatar {
width: 72px; height: 72px;
background: linear-gradient(135deg, var(--purple), var(--teal));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Sora', sans-serif;
font-size: 24px;
font-weight: 700;
color: var(--white);
margin: 0 auto 14px;
}
.team-name {
font-family: 'Sora', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--navy);
margin-bottom: 4px;
}
.team-role {
font-size: 12px;
font-weight: 400;
color: var(--purple);
margin-bottom: 12px;
}
.team-desc {
font-size: 12px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.6;
}
/* ============ SCHEDULE MEETING ============ */
.schedule {
background: #e9dbf2;
padding: 80px 56px;
position: relative;
overflow: hidden;
}
.schedule::before {
content: '';
position: absolute;
top: -80px; right: -80px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(170,73,219,0.10) 0%, transparent 65%);
border-radius: 50%;
}
.schedule::after {
content: '';
position: absolute;
bottom: -60px; left: -60px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(170,73,219,0.10) 0%, transparent 65%);
border-radius: 50%;
}
.schedule-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
position: relative;
z-index: 1;
}
.schedule-left .section-title { color: var(--purple-dark); }
.schedule-left .section-desc { color: var(--purple); }
.schedule-benefits {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 12px;
}
.schedule-benefit {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--purple-dark);
font-weight: 400;
}
.schedule-benefit-check {
width: 20px; height: 20px;
background: rgba(91,43,116,0.12);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--purple);
flex-shrink: 0;
}
.schedule-form {
background: #AA49DB;
border: 1.5px solid #AA49DB;
border-radius: var(--radius-lg);
padding: 36px 32px;
}
.form-title {
font-family: 'Sora', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--white);
margin-bottom: 6px;
letter-spacing: -0.3px;
}
.form-sub {
font-size: 13px;
font-weight: 300;
color: var(--white);
margin-bottom: 24px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 12px;
}
.form-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
}
.form-input, .form-select {
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-sm);
padding: 12px 14px;
color: var(--navy);
font-family: 'Sora', sans-serif;
font-size: 13px;
font-weight: 400;
outline: none;
transition: all 0.3s;
width: 100%;
}
.form-input::placeholder { color: var(--gray-400); }
.form-input:focus, .form-select:focus {
border-color: var(--purple);
background: rgba(91,43,116,0.04);
box-shadow: 0 0 0 3px rgba(91,43,116,0.1);
}
.form-select { appearance: none; cursor: pointer; }
.form-select option { background: var(--white); color: var(--navy); }
.form-submit {
width: 100%;
background: #e9dbf2;
color: #1a1a1a;
padding: 14px;
border: none;
border-radius: var(--radius-sm);
font-family: 'Sora', sans-serif;
font-size: 13px;
font-weight: 700;
cursor: pointer;
margin-top: 28px;
transition: all 0.3s;
letter-spacing: 0.02em;
}
.form-submit:hover {
background: #dcc8ec;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(170,73,219,0.3);
}
/* ============ FORMINATOR FORM (inside .schedule-form) ============ */
/* Make the embedded Forminator form match the purple card. Scoped so it
only affects this form. !important is used because Forminator ships its
own stylesheet that often wins on specificity. */
.schedule-form .forminator-ui.forminator-custom-form,
.schedule-form .forminator-row,
.schedule-form .forminator-field {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* spacing between rows/fields */
.schedule-form .forminator-row { margin-bottom: 12px !important; }
/* labels */
.schedule-form .forminator-label {
color: var(--white) !important;
font-family: 'Sora', sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-bottom: 5px !important;
}
/* required asterisk */
.schedule-form .forminator-required,
.schedule-form .forminator-label .forminator-required { color: var(--gold) !important; }
/* text / email inputs and the select */
.schedule-form .forminator-input,
.schedule-form input[type="text"].forminator-input,
.schedule-form input[type="email"].forminator-input,
.schedule-form .forminator-textarea,
.schedule-form .forminator-select,
.schedule-form select,
.schedule-form .select2-container--default .select2-selection--single {
background: var(--white) !important;
border: 1.5px solid var(--gray-200) !important;
border-radius: var(--radius-sm) !important;
padding: 12px 14px !important;
height: auto !important;
color: var(--navy) !important;
font-family: 'Sora', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
box-shadow: none !important;
}
/* select2 (Forminator's styled dropdown) text + arrow alignment */
.schedule-form .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--navy) !important;
line-height: 1.4 !important;
padding: 0 !important;
}
.schedule-form .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
}
/* placeholders */
.schedule-form .forminator-input::placeholder,
.schedule-form .forminator-textarea::placeholder { color: var(--gray-400) !important; }
/* focus state */
.schedule-form .forminator-input:focus,
.schedule-form .forminator-textarea:focus,
.schedule-form .forminator-select:focus,
.schedule-form select:focus {
border-color: var(--purple) !important;
box-shadow: 0 0 0 3px rgba(91,43,116,0.1) !important;
outline: none !important;
}
/* submit button — match the "Reserve My Slot" look */
.schedule-form .forminator-button-submit,
.schedule-form button.forminator-button {
width: 100% !important;
background: #e9dbf2 !important;
color: #1a1a1a !important;
border: none !important;
border-radius: var(--radius-sm) !important;
padding: 14px !important;
margin-top: 16px !important;
font-family: 'Sora', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
transition: all 0.3s !important;
}
.schedule-form .forminator-button-submit:hover,
.schedule-form button.forminator-button:hover {
background: #dcc8ec !important;
transform: translateY(-1px) !important;
}
/* ============ WHY EDMO ============ */
.why { background: var(--white); }
.why-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 52px;
}
.why-card {
background: var(--off-white);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 24px;
display: flex;
gap: 16px;
align-items: flex-start;
transition: all 0.3s;
}
.why-card:hover {
background: var(--purple-pale);
border-color: rgba(91,43,116,0.2);
}
.why-icon {
width: 40px; height: 40px;
background: var(--purple);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.why-title {
font-family: 'Sora', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--navy);
margin-bottom: 5px;
}
.why-desc {
font-size: 13px;
font-weight: 300;
color: var(--gray-600);
line-height: 1.6;
}
/* ============ CTA BANNER ============ */
.cta-banner {
background: var(--off-white);
border-top: 1px solid var(--gray-200);
padding: 72px 56px;
}
.cta-banner-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.cta-banner-text h2 {
font-family: 'Sora', sans-serif;
font-size: 32px;
font-weight: 800;
color: var(--navy);
letter-spacing: -0.5px;
margin-bottom: 8px;
}
.cta-banner-text h2 span { color: var(--purple); }
.cta-banner-text p {
font-size: 15px;
font-weight: 300;
color: var(--gray-600);
}
.cta-banner-buttons {
display: flex;
gap: 12px;
flex-shrink: 0;
}
.btn-purple {
background: var(--purple);
color: var(--white);
padding: 14px 28px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s;
}
.btn-purple:hover { background: var(--purple-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(91,43,116,0.25); }
.btn-outline-purple {
background: transparent;
color: var(--purple);
padding: 14px 28px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border: 1.5px solid var(--purple);
cursor: pointer;
transition: all 0.3s;
}
.btn-outline-purple:hover { background: var(--purple-pale); }
/* ============ FOOTER ============ */
/* Template footer removed — the previous unscoped `footer { background: var(--navy) }`
rule was leaking navy onto the WordPress theme footer, so it has been removed. */
/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
nav { padding: 0 24px; }
section { padding: 64px 24px; }
.hero { padding: 72px 24px 64px; }
.hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hero-right { align-items: flex-start; width: 100%; }
.hero > .hero-slider { position: static; transform: none; width: 100%; margin-top: 32px; }
.hero-slider { width: 100%; }
.hero-slider-arrow.prev { left: 8px; }
.hero-slider-arrow.next { right: 8px; }
.event-card { width: 100%; min-width: 0; }
.about-grid { grid-template-columns: 1fr; gap: 40px; }
.expect-grid { grid-template-columns: 1fr 1fr; }
.products-intro { grid-template-columns: 1fr; gap: 32px; }
.products-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.schedule-inner { grid-template-columns: 1fr; gap: 40px; }
.stats-inner { grid-template-columns: 1fr 1fr; }
.cta-banner-inner { flex-direction: column; text-align: center; }
.cta-banner-buttons { justify-content: center; }
.nav-event-badge { display: none; }
.stats-strip { padding: 32px 24px; }
.cta-banner { padding: 56px 24px; }
.schedule { padding: 64px 24px; }
}
@media (max-width: 640px) {
.expect-grid { grid-template-columns: 1fr; }
.products-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.stats-inner { grid-template-columns: 1fr 1fr; }
.hero { padding: 56px 20px 48px; }
.hero h1 { font-size: 30px; line-height: 1.15; letter-spacing: -0.5px; }
.hero-ctas { flex-direction: column; gap: 12px; }
.hero-ctas .btn-white,
.hero-ctas .btn-outline-white { width: 100%; text-align: center; }
.hero-right { width: 100%; }
.event-card { min-width: 0; width: 100%; }
.schedule-form { padding: 28px 20px; }
}
@media (max-width: 400px) {
.stats-inner { grid-template-columns: 1fr; }
.hero h1 { font-size: 26px; }
}