/**
* LAMAR INSTITUTE — Components v4 (Rebrand May 2026)
* Refined · Elegant · Institute-grade
* Primary: #183C64 (navy) Accent: #C0945E (gold) Text: #183C64
*/
/* ════════════════════════════════════════════════════════════
BUTTONS — refined chic
════════════════════════════════════════════════════════════ */
.btn, button.btn {
display: inline-flex;
gap: var(--space-2);
align-items: center;
justify-content: center;
padding: 13px 28px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-base);
line-height: 1;
letter-spacing: 0.01em;
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
white-space: nowrap;
border: 0;
position: relative;
text-decoration: none;
}
.btn--sm { padding: 10px 22px; font-size: var(--text-sm); }
.btn--lg { padding: 16px 36px; font-size: var(--text-md); }
.btn--primary {
background: var(--gradient-pink-soft);
color: #fff;
box-shadow: var(--shadow-pink-soft);
}
.btn--primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-pink-glow);
}
.btn--secondary {
background: var(--navy-700);
color: #fff;
}
.btn--secondary:hover {
background: var(--navy-800);
transform: translateY(-2px);
box-shadow: var(--shadow-navy-glow);
}
.btn--outline {
background: transparent;
color: var(--pink-600);
border: 1.5px solid var(--pink-500);
}
.btn--outline:hover {
background: var(--gradient-pink-soft);
color: #fff;
border-color: transparent;
transform: translateY(-2px);
}
.btn--ghost {
background: transparent;
color: var(--navy-700);
}
.btn--ghost:hover {
background: var(--pink-50);
color: var(--pink-700);
}
.btn--premium {
background: var(--gradient-pink-soft);
color: #fff;
box-shadow: var(--shadow-pink-glow);
position: relative;
overflow: hidden;
}
.btn--premium::before {
content: ""; position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
transition: left 0.6s var(--ease-out);
}
.btn--premium:hover::before { left: 100%; }
.btn--premium:hover {
transform: translateY(-2px);
box-shadow: 0 16px 48px rgba(192, 148, 94, .5);
}
.btn--block { width: 100%; }
.btn--icon {
width: 44px; height: 44px;
padding: 0;
background: var(--pink-50);
color: var(--pink-600);
border-radius: 50%;
}
.btn--icon:hover {
background: var(--gradient-pink-soft);
color: #fff;
}
/* ════════════════════════════════════════════════════════════
BADGES
════════════════════════════════════════════════════════════ */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
font-family: var(--font-body);
}
.badge--pink { background: var(--pink-100); color: var(--pink-700); }
.badge--pink-solid {
background: var(--gradient-pink-soft);
color: #fff;
box-shadow: var(--shadow-xs);
}
.badge--navy { background: var(--navy-100); color: var(--navy-700); }
.badge--outline { background: transparent; color: var(--pink-600); border: 1px solid var(--pink-300); }
.badge--success { background: var(--success-50); color: var(--success-700); }
.badge--warning { background: var(--warning-50); color: var(--warning-700); }
.badge--error { background: var(--error-50); color: var(--error-700); }
/* ════════════════════════════════════════════════════════════
CARDS
════════════════════════════════════════════════════════════ */
/* Stat card */
.stat-card {
position: relative;
background: #fff;
padding: var(--space-8) var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid var(--ivory-300);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
overflow: hidden;
}
.stat-card::before {
content: ""; position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: var(--gradient-pink-soft);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur-slow) var(--ease-out);
}
.stat-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--pink-300);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-card__icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--gradient-pink-cream);
color: var(--pink-600);
display: grid; place-items: center;
margin: 0 auto var(--space-4);
border: 1px solid var(--pink-200);
}
.stat-card__icon svg { width: 30px; height: 30px; }
.stat-card__number {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 700;
color: var(--navy-700);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat-card__suffix {
font-size: var(--text-2xl);
color: var(--pink-500);
font-weight: 700;
margin-inline-start: 4px;
}
.stat-card__label {
margin-top: var(--space-3);
color: var(--navy-400);
font-size: var(--text-sm);
font-weight: 500;
font-family: var(--font-body);
}
/* Course card */
.course-card {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
}
.course-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--pink-300);
}
.course-card__thumb, .course-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--ivory-200);
position: relative;
}
.course-card__thumb img, .course-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-slower) var(--ease-out);
}
.course-card:hover .course-card__thumb img,
.course-card:hover .course-card__media img {
transform: scale(1.08);
}
.course-card__category {
position: absolute;
top: var(--space-3); inset-inline-start: var(--space-3);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
color: var(--pink-700);
padding: 5px 14px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
font-family: var(--font-body);
z-index: 2;
box-shadow: var(--shadow-xs);
}
.course-card__body {
display: flex; flex-direction: column; flex: 1;
padding: var(--space-6);
gap: var(--space-3);
}
.course-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
line-height: var(--leading-arabic-display);
color: var(--navy-700);
margin: 0;
}
.course-card__title a { color: inherit; }
.course-card__title a:hover { color: var(--pink-600); }
.course-card__excerpt {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
flex: 1;
}
.course-card__meta {
display: flex; flex-wrap: wrap;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--navy-400);
padding: var(--space-3) 0;
border-top: 1px solid var(--ivory-300);
border-bottom: 1px solid var(--ivory-300);
}
.course-card__meta span { display: inline-flex; gap: 4px; align-items: center; }
.course-card__footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: auto;
}
.course-card__price {
font-family: var(--font-display);
font-weight: 700;
color: var(--pink-600);
font-size: var(--text-xl);
font-variant-numeric: tabular-nums;
}
.course-card__price small {
font-size: var(--text-xs);
color: var(--navy-400);
font-weight: 500;
margin-inline-start: 4px;
}
.course-card__price--free { color: var(--success-500); }
.course-card__more {
display: inline-flex; gap: 6px; align-items: center;
color: var(--pink-600);
font-weight: 600;
font-size: var(--text-sm);
transition: gap var(--dur-base);
}
.course-card__more:hover { gap: 10px; color: var(--pink-700); }
/* Trainer card */
.trainer-card { text-align: center; }
.trainer-card__photo {
display: block;
width: 200px; height: 200px;
margin: 0 auto var(--space-4);
border-radius: 50%;
overflow: hidden;
background: var(--ivory-200);
position: relative;
border: 3px solid #fff;
box-shadow: 0 0 0 1px var(--ivory-400), var(--shadow-md);
transition: all var(--dur-slow) var(--ease-out);
}
.trainer-card__photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out);
}
.trainer-card:hover .trainer-card__photo {
box-shadow: 0 0 0 1px var(--pink-300), 0 16px 40px rgba(192, 148, 94, .25);
transform: scale(1.04);
}
.trainer-card:hover .trainer-card__photo img { transform: scale(1.08); }
.trainer-card__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--navy-700);
margin-bottom: 4px;
}
.trainer-card__specialty {
color: var(--pink-600);
font-size: var(--text-sm);
font-weight: 500;
}
/* Testimonial */
.testimonial-card {
position: relative;
padding: var(--space-8) var(--space-6);
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
}
.testimonial-card::before {
content: """;
position: absolute;
top: -10px;
inset-inline-start: var(--space-6);
font-family: var(--font-display);
font-size: 80px;
color: var(--pink-200);
line-height: 1;
pointer-events: none;
}
.testimonial-card__rating {
display: flex; gap: 2px;
color: var(--ivory-400);
margin-bottom: var(--space-3);
}
.testimonial-card__rating .is-on { color: var(--pink-500); }
.testimonial-card__quote {
font-family: var(--font-display);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--navy-700);
margin-bottom: var(--space-5);
font-style: italic;
}
.testimonial-card__author {
display: flex; gap: var(--space-3); align-items: center;
padding-top: var(--space-4);
border-top: 1px solid var(--ivory-300);
}
.testimonial-card__author img {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--pink-100);
}
.testimonial-card__author strong {
display: block;
color: var(--navy-700);
font-family: var(--font-body);
font-weight: 600;
}
.testimonial-card__author span {
color: var(--navy-400);
font-size: var(--text-sm);
}
/* Feature card */
.feature-card {
padding: var(--space-6);
border-radius: var(--radius-lg);
background: #fff;
border: 1px solid var(--ivory-300);
transition: all var(--dur-base) var(--ease-out);
}
.feature-card:hover {
border-color: var(--pink-300);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.feature-card__icon {
width: 56px; height: 56px;
border-radius: var(--radius-md);
background: var(--gradient-pink-cream);
color: var(--pink-600);
display: grid; place-items: center;
margin-bottom: var(--space-4);
}
.feature-card__icon svg { width: 28px; height: 28px; }
.feature-card__title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
color: var(--navy-700);
margin-bottom: var(--space-2);
}
.feature-card__text {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
/* Category card */
.category-card {
position: relative; display: block;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 4 / 5;
color: #fff;
box-shadow: var(--shadow-sm);
transition: all var(--dur-base) var(--ease-out);
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.category-card__bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transition: transform var(--dur-slower) var(--ease-out);
}
.category-card::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(24, 60, 100, 0) 30%, rgba(24, 60, 100, 0.95) 100%);
}
.category-card:hover .category-card__bg { transform: scale(1.1); }
.category-card__body {
position: relative; z-index: 2;
padding: var(--space-6);
height: 100%;
display: flex; flex-direction: column;
justify-content: flex-end;
}
.category-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: #fff;
margin-bottom: var(--space-2);
}
.category-card__text {
color: rgba(255, 255, 255, .85);
font-size: var(--text-sm);
margin-bottom: var(--space-3);
}
.category-card__arrow {
display: inline-flex;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
align-items: center; justify-content: center;
box-shadow: var(--shadow-pink-soft);
transition: transform var(--dur-base);
font-weight: 700;
}
.category-card:hover .category-card__arrow { transform: translateX(-4px); }
/* ════════════════════════════════════════════════════════════
HEADER — Classic Chic
════════════════════════════════════════════════════════════ */
.topbar { display: none !important; }
/* Announcement strip */
.announce-strip {
background: var(--navy-700);
color: rgba(255, 255, 255, .85);
font-size: 12px;
padding: 8px 0;
position: relative;
}
.announce-strip::after {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--pink-400) 50%, transparent);
opacity: 0.6;
}
.announce-strip__inner {
display: flex; justify-content: space-between; align-items: center;
gap: var(--space-4);
}
.announce-strip__pulse {
display: inline-flex; align-items: center; gap: 8px;
color: #fff;
font-family: var(--font-body);
font-weight: 500;
}
.announce-strip__dot {
width: 8px; height: 8px;
background: var(--pink-400);
border-radius: 50%;
box-shadow: 0 0 12px var(--pink-400);
animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.5); }
}
.announce-strip__contact { display: inline-flex; align-items: center; gap: var(--space-4); }
.announce-strip__link {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255, 255, 255, .85);
transition: all var(--dur-base);
font-weight: 500;
}
.announce-strip__link:hover { color: var(--pink-300); }
.announce-strip__link svg { opacity: 0.7; }
.announce-strip__lang {
display: inline-flex; gap: 4px;
padding-inline-start: var(--space-3);
border-inline-start: 1px solid rgba(255, 255, 255, .2);
}
.announce-strip__lang a {
display: inline-block;
padding: 2px 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 11px;
color: rgba(255, 255, 255, .65);
border-radius: var(--radius-xs);
transition: all var(--dur-base);
letter-spacing: 0.06em;
}
.announce-strip__lang a:hover { color: var(--pink-300); }
.announce-strip__lang a.is-current {
background: var(--pink-500);
color: #fff;
}
@media (max-width: 768px) {
.announce-strip { font-size: 11px; }
.announce-strip__pulse { display: none; }
.announce-strip__inner { justify-content: center; }
.announce-strip__link--hide-mobile { display: none; }
}
/* Main header */
.site-header {
position: sticky; top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid var(--ivory-300);
transition: all var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
box-shadow: 0 4px 30px rgba(24, 60, 100, 0.06);
border-bottom-color: transparent;
}
.site-header__inner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--space-6);
padding: var(--space-3) var(--space-6);
max-width: var(--container);
margin: 0 auto;
}
/* Logo */
.site-header__logo {
display: inline-flex; align-items: center;
color: var(--navy-700);
flex-shrink: 0;
}
.site-header__logo-frame {
position: relative;
display: inline-flex; align-items: center;
padding: 4px 12px 4px 4px;
}
.site-header__logo-frame::before {
content: "";
position: absolute;
inset-inline-end: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 38px;
background: linear-gradient(180deg, transparent, var(--pink-400) 30%, var(--pink-500) 70%, transparent);
opacity: 0;
transition: opacity var(--dur-base);
}
.site-header__logo:hover .site-header__logo-frame::before { opacity: 0.6; }
.site-header__logo img { max-height: 48px; width: auto; display: block; }
.site-header__wordmark { display: inline-flex; flex-direction: column; line-height: 1; padding-inline-end: 4px; }
.site-header__wordmark-ar {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
color: var(--navy-700);
}
.site-header__wordmark-en {
font-family: var(--font-latin);
font-size: 10px;
font-style: italic;
color: var(--pink-600);
margin-top: 3px;
letter-spacing: 0.05em;
}
/* Nav */
.site-header__nav {
display: flex; align-items: center;
justify-self: center;
}
.site-header__nav .menu {
display: flex; gap: 2px;
align-items: center;
list-style: none; padding: 0; margin: 0;
}
.site-header__nav .menu > li { position: relative; }
.site-header__nav .menu > li > a {
display: inline-flex; align-items: center; gap: 4px;
padding: 22px 16px;
font-family: var(--font-body);
font-weight: 500;
font-size: 15px;
color: var(--navy-700);
position: relative;
white-space: nowrap;
transition: color var(--dur-base);
}
.site-header__nav .menu > li > a::after {
content: "";
position: absolute;
bottom: 16px;
inset-inline-start: 16px; inset-inline-end: 16px;
height: 2px;
background: var(--gradient-pink-soft);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur-base) var(--ease-out);
pointer-events: none;
}
.site-header__nav .menu > li:hover > a,
.site-header__nav .menu > li.current-menu-item > a,
.site-header__nav .menu > li.current-menu-parent > a,
.site-header__nav .menu > li.current_page_item > a {
color: var(--pink-600);
}
.site-header__nav .menu > li:hover > a::after,
.site-header__nav .menu > li.current-menu-item > a::after,
.site-header__nav .menu > li.current-menu-parent > a::after,
.site-header__nav .menu > li.current_page_item > a::after { transform: scaleX(1); }
/* Dropdown caret */
.site-header__nav .menu-item-has-children > a::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-inline-end: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-inline-end: 6px;
margin-top: -3px;
opacity: 0.4;
transition: transform var(--dur-base), opacity var(--dur-base);
}
.site-header__nav .menu-item-has-children:hover > a::before {
transform: rotate(-135deg);
opacity: 0.8;
margin-top: 3px;
}
/* Sub-menu — chic dropdown */
.site-header__nav .sub-menu {
position: absolute;
top: 100%;
inset-inline-end: 0;
min-width: 260px;
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-md);
padding: var(--space-2);
margin: 0;
list-style: none;
box-shadow: 0 24px 60px rgba(24, 60, 100, .12);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: all var(--dur-base) var(--ease-out);
z-index: 60;
}
.site-header__nav .sub-menu::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gradient-pink-soft);
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.site-header__nav .menu-item-has-children:hover > .sub-menu,
.site-header__nav .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(8px);
}
.site-header__nav .sub-menu li { margin: 0; }
.site-header__nav .sub-menu a {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
color: var(--navy-700);
border-radius: var(--radius-sm);
position: relative;
transition: all var(--dur-base);
}
.site-header__nav .sub-menu a::before {
content: "";
width: 3px; height: 14px;
background: transparent;
border-radius: 2px;
transition: background var(--dur-base);
}
.site-header__nav .sub-menu a::after { display: none !important; }
.site-header__nav .sub-menu a:hover {
background: var(--pink-50);
color: var(--pink-700);
}
.site-header__nav .sub-menu a:hover::before { background: var(--pink-500); }
/* Right cluster */
.site-header__cta {
display: inline-flex; align-items: center;
gap: var(--space-2);
justify-self: end;
}
.site-header__lms {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
color: var(--navy-700);
border: 1px solid var(--ivory-400);
border-radius: var(--radius-full);
transition: all var(--dur-base);
}
.site-header__lms:hover {
color: var(--pink-600);
border-color: var(--pink-400);
background: var(--pink-50);
}
.site-header__lms svg { opacity: 0.7; transition: opacity var(--dur-base); }
.site-header__lms:hover svg { opacity: 1; }
.theme-toggle {
width: 40px; height: 40px;
display: inline-grid; place-items: center;
border-radius: 50%;
background: transparent;
color: var(--navy-700);
cursor: pointer;
transition: all var(--dur-base);
border: 1px solid var(--ivory-400);
}
.theme-toggle:hover {
background: var(--pink-50);
border-color: var(--pink-400);
color: var(--pink-600);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
.site-header__register {
padding: 10px 22px;
gap: 6px;
font-size: 14px;
}
/* Hamburger */
.site-header__toggle {
display: none;
flex-direction: column; gap: 5px;
width: 42px; height: 42px;
align-items: center; justify-content: center;
border: 1px solid var(--ivory-400);
border-radius: 50%;
background: transparent;
cursor: pointer;
transition: all var(--dur-base);
}
.site-header__toggle:hover {
border-color: var(--pink-400);
background: var(--pink-50);
}
.site-header__toggle span {
width: 18px; height: 2px;
background: var(--navy-700);
border-radius: 1px;
transition: all var(--dur-base) var(--ease-out);
}
.site-header__toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle.is-open span:nth-child(2) { opacity: 0; }
.site-header__toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Subtle pink divider under header */
.site-header__divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--pink-200) 20%,
var(--pink-400) 50%,
var(--pink-200) 80%,
transparent 100%);
opacity: 0.7;
}
.site-header__mobile-extras { display: none; }
@media (max-width: 1024px) {
.site-header__inner { gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.site-header__lms span { display: none; }
.site-header__lms { padding: 8px; width: 40px; height: 40px; justify-content: center; }
}
@media (max-width: 900px) {
.site-header__nav {
position: fixed; inset: 0;
background: #fff;
z-index: 200;
padding: var(--space-20) var(--space-6) var(--space-12);
opacity: 0; visibility: hidden;
transform: translateY(-20px);
transition: all var(--dur-slow) var(--ease-out);
overflow-y: auto;
justify-self: stretch;
flex-direction: column; align-items: stretch;
}
.site-header__nav.is-open {
opacity: 1; visibility: visible; transform: translateY(0);
}
.site-header__nav .menu { flex-direction: column; align-items: stretch; gap: 0; }
.site-header__nav .menu > li > a {
padding: var(--space-3) 0;
font-size: 18px;
border-bottom: 1px solid var(--ivory-300);
}
.site-header__nav .menu > li > a::after,
.site-header__nav .menu-item-has-children > a::before { display: none; }
.site-header__nav .sub-menu {
position: static;
opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: 0;
margin: 0; padding: var(--space-2) 0 var(--space-3) var(--space-3);
background: transparent;
border-inline-start: 2px solid var(--pink-300);
border-radius: 0;
margin-inline-start: var(--space-3);
}
.site-header__nav .sub-menu::before { display: none; }
.site-header__mobile-extras {
display: flex; flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--ivory-300);
}
.mobile-extra-link {
padding: var(--space-3) var(--space-4);
background: var(--pink-50);
border-radius: var(--radius-md);
font-family: var(--font-body);
text-align: center;
color: var(--navy-700);
}
.mobile-extra-link--cta {
background: var(--gradient-pink-soft);
color: #fff;
font-weight: 600;
}
.site-header__toggle { display: inline-flex; }
}
/* ════════════════════════════════════════════════════════════
HERO v3 — Classic Chic Editorial Split (full-bleed image)
════════════════════════════════════════════════════════════ */
.section-hero {
position: relative;
padding: var(--space-8) 0 var(--space-6); /* breathing room top & bottom */
background: linear-gradient(180deg, #FFFFFF 0%, var(--ivory-100) 50%, var(--ivory-200) 100%);
overflow: hidden;
}
/* Decorative background blobs + dot grid */
.section-hero__decor {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.section-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.45;
}
.section-hero__blob--1 {
width: 520px; height: 520px;
background: radial-gradient(circle, var(--pink-300), transparent 70%);
top: -150px;
inset-inline-end: -100px;
animation: blob-float 14s ease-in-out infinite;
}
.section-hero__blob--2 {
width: 420px; height: 420px;
background: radial-gradient(circle, var(--pink-100), transparent 70%);
bottom: -120px;
inset-inline-start: -80px;
animation: blob-float 18s ease-in-out infinite reverse;
}
@keyframes blob-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, 30px) scale(1.08); }
}
.section-hero__dot-grid {
position: absolute;
width: 240px; height: 180px;
bottom: 80px;
inset-inline-end: 8%;
background-image: radial-gradient(circle, var(--pink-300) 1.5px, transparent 1.5px);
background-size: 18px 18px;
opacity: 0.4;
z-index: 0;
}
/* Slider container — full-bleed, no container constraint */
.hero-slider {
position: relative;
max-width: 100%;
margin: 0;
}
/* Progress bar — full width at top */
.hero-slider__progress {
position: absolute;
top: 0;
inset-inline: 0;
height: 3px;
background: var(--ivory-300);
z-index: 5;
overflow: hidden;
}
.hero-slider__progress-bar {
display: block;
height: 100%;
width: 0%;
background: var(--gradient-pink-soft);
border-radius: 2px;
transition: width 6.5s linear;
}
.hero-slider.is-running .hero-slider__progress-bar { width: 100%; }
/* Slides track — height balanced (not over-stretched) */
.hero-slider__track {
position: relative;
min-height: 580px;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: opacity var(--dur-slower) var(--ease-out),
transform var(--dur-slower) var(--ease-out),
visibility 0s var(--dur-slower);
pointer-events: none;
}
.hero-slide.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
transition: opacity var(--dur-slower) var(--ease-out),
transform var(--dur-slower) var(--ease-out),
visibility 0s;
}
/* Inner grid — text + image, edge-to-edge on visual, container-aligned on text */
.hero-slide__inner {
display: grid;
grid-template-columns: 1.1fr 1fr; /* text slightly wider for breathing */
gap: 0;
min-height: 580px;
padding: 0;
position: relative;
max-width: 100%;
}
/* Text column — aligns with site container, no stretched children */
.hero-slide__text {
position: relative;
z-index: 2;
padding-block: var(--space-12);
padding-inline-start: max(var(--space-6), calc((100vw - var(--container)) / 2 + var(--space-6)));
padding-inline-end: var(--space-12);
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start; /* prevents children stretching to full width */
max-width: 100%;
}
.hero-slide__text > * { max-width: 100%; }
.hero-slide__overline {
align-self: flex-start; /* don't stretch to full column width */
display: inline-flex;
align-items: center;
gap: 6px;
width: auto; /* shrink-to-fit */
padding: 6px 16px;
background: rgba(192, 148, 94, 0.08);
border: 1px solid var(--pink-200);
border-radius: var(--radius-full);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--pink-700);
margin-bottom: var(--space-5);
animation: hero-fade-in 0.8s var(--ease-out) 0.1s both;
}
.hero-slide__overline svg { color: var(--pink-500); }
.hero-slide__title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 64px);
font-weight: 600;
line-height: 1.2;
color: var(--navy-700);
margin: 0 0 var(--space-5);
letter-spacing: -0.01em;
animation: hero-fade-in 0.8s var(--ease-out) 0.2s both;
}
.hero-slide__title-accent {
background: var(--gradient-pink-soft);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
display: inline-block;
}
.hero-slide__title-accent::after {
content: "";
position: absolute;
bottom: -6px;
inset-inline-start: 0;
width: 100%;
height: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.6;
}
.hero-slide__subtitle {
font-family: var(--font-body);
font-size: clamp(var(--text-md), 1.3vw, var(--text-lg));
font-weight: 400;
color: var(--navy-500);
line-height: var(--leading-arabic-body);
margin: 0 0 var(--space-8);
max-width: 540px;
animation: hero-fade-in 0.8s var(--ease-out) 0.3s both;
}
.hero-slide__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-10);
animation: hero-fade-in 0.8s var(--ease-out) 0.4s both;
}
.hero-slide__cta-secondary {
color: var(--navy-700);
position: relative;
}
.hero-slide__cta-secondary::after {
content: "";
position: absolute;
bottom: 10px;
inset-inline-start: 20px;
inset-inline-end: 20px;
height: 1.5px;
background: var(--navy-700);
transform: scaleX(0.5);
transform-origin: center;
transition: transform var(--dur-base);
}
.hero-slide__cta-secondary:hover::after { transform: scaleX(0.9); }
/* Trust indicators */
.hero-slide__trust {
align-self: flex-start;
display: inline-flex;
align-items: center;
width: auto;
gap: var(--space-5);
padding: var(--space-3) var(--space-5);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
animation: hero-fade-in 0.8s var(--ease-out) 0.5s both;
}
.hero-slide__trust-item {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
.hero-slide__trust-item strong {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
color: var(--navy-700);
font-variant-numeric: tabular-nums;
}
.hero-slide__trust-item span {
font-size: var(--text-xs);
color: var(--navy-400);
margin-top: 4px;
font-weight: 500;
}
.hero-slide__trust-divider {
width: 1px;
height: 32px;
background: var(--ivory-400);
}
/* Visual column — fills entire grid cell, edge-to-edge to viewport */
.hero-slide__visual {
position: relative;
animation: hero-fade-in 1s var(--ease-out) 0.3s both;
height: 100%;
min-height: 580px;
}
.hero-slide__image-frame {
position: absolute;
inset: 0;
/* soft round on inner edge (text side) for chic feel */
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
overflow: hidden;
background: var(--ivory-200);
aspect-ratio: auto;
box-shadow: 0 30px 60px -20px rgba(24, 60, 100, 0.18);
}
[dir="ltr"] .hero-slide__image-frame { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
.hero-slide__image-frame::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(24, 60, 100, 0.10), transparent 40%);
z-index: 1;
pointer-events: none;
}
/* Subtle vignette on the inner edge (toward text side) */
.hero-slide__image-frame::after {
content: "";
position: absolute;
top: 0; bottom: 0;
inset-inline-start: 0;
width: 220px;
background: linear-gradient(to right, var(--ivory-100), transparent);
z-index: 1;
pointer-events: none;
}
[dir="rtl"] .hero-slide__image-frame::after {
inset-inline-start: auto;
inset-inline-end: 0;
background: linear-gradient(to left, var(--ivory-100), transparent);
}
.hero-slide__image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.hero-slide.is-active .hero-slide__image-frame img {
transform: scale(1.04);
}
.hero-slide__video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/* Floating decorative badges over the image */
.hero-slide__float-badge {
position: absolute;
z-index: 3;
background: #fff;
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-3);
box-shadow: 0 20px 50px rgba(24, 60, 100, 0.18), 0 0 0 1px var(--ivory-300);
}
.hero-slide__float-badge--top {
top: 40px;
inset-inline-end: 30px;
color: var(--pink-600);
animation: float-y 4s ease-in-out infinite;
max-width: 230px;
}
.hero-slide__float-badge--top svg { color: var(--pink-500); flex-shrink: 0; }
.hero-slide__float-badge--bottom {
bottom: 100px; /* lifted above nav pill */
inset-inline-start: 30px;
animation: float-y 5s ease-in-out infinite 0.5s;
max-width: 260px;
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.hero-slide__float-badge strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-700);
line-height: 1.2;
}
.hero-slide__float-badge span {
display: block;
font-size: 11px;
color: var(--navy-400);
margin-top: 2px;
}
.hero-slide__float-avatars {
display: flex;
flex-shrink: 0;
}
.hero-slide__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid #fff;
background: var(--gradient-pink-soft);
}
.hero-slide__avatar:not(:first-child) { margin-inline-start: -10px; }
.hero-slide__avatar:nth-child(2) { background: var(--gradient-navy-deep); }
.hero-slide__avatar:nth-child(3) { background: linear-gradient(135deg, var(--pink-400), var(--navy-500)); }
@keyframes hero-fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── NAVIGATION: arrows + dots + counter (overlay on IMAGE side, bottom edge) ── */
.hero-slider__nav {
position: absolute;
bottom: var(--space-6);
inset-inline-end: var(--space-6); /* attaches to the image side edge */
z-index: 4;
display: flex;
align-items: center;
gap: var(--space-2);
padding: 8px 12px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--ivory-300);
border-radius: var(--radius-full);
box-shadow: 0 10px 30px rgba(24, 60, 100, 0.12);
}
.hero-slider__arrow {
width: 38px; height: 38px;
display: grid; place-items: center;
background: transparent;
border: 0;
border-radius: 50%;
color: var(--navy-700);
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
flex-shrink: 0;
}
.hero-slider__arrow:hover {
background: var(--gradient-pink-soft);
color: #fff;
transform: scale(1.06);
}
.hero-slider__arrow svg {
width: 18px;
height: 18px;
}
[dir="rtl"] .hero-slider__arrow svg {
transform: scaleX(-1);
}
.hero-slider__dots {
display: flex;
gap: 6px;
padding: 0 8px;
background: transparent;
border: 0;
}
.hero-slider__dot {
width: 22px; height: 5px;
border-radius: var(--radius-full);
background: var(--ivory-400);
border: 0;
padding: 0;
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
position: relative;
overflow: hidden;
}
.hero-slider__dot:hover { background: var(--pink-300); }
.hero-slider__dot.is-active {
width: 36px;
background: var(--gradient-pink-soft);
}
.hero-slider__dot-fill {
position: absolute;
inset: 0;
background: var(--gradient-pink-soft);
transform: scaleX(0);
transform-origin: inset-inline-start;
pointer-events: none;
}
.hero-slider__counter {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-400);
display: inline-flex;
align-items: baseline;
gap: 3px;
font-variant-numeric: tabular-nums;
padding-inline-start: var(--space-2);
margin-inline-start: var(--space-1);
border-inline-start: 1px solid var(--ivory-400);
}
.hero-slider__counter-current {
font-size: var(--text-sm);
font-weight: 700;
color: var(--pink-600);
}
.hero-slider__counter-sep { color: var(--ivory-500); }
.hero-slider__counter-total { color: var(--navy-400); }
/* Responsive */
@media (max-width: 1024px) {
.hero-slide__inner { grid-template-columns: 1fr 1fr; }
.hero-slide__text { padding-inline-start: var(--space-6); padding-inline-end: var(--space-8); }
.hero-slide__float-badge--top { inset-inline-end: 16px; top: 28px; }
.hero-slide__float-badge--bottom { inset-inline-start: 16px; bottom: 80px; }
}
@media (max-width: 900px) {
.hero-slide__inner {
grid-template-columns: 1fr;
gap: 0;
text-align: center;
padding: 0;
min-height: auto;
}
.hero-slide__text {
order: 2;
padding: var(--space-8) var(--space-6);
align-items: center;
}
.hero-slide__visual {
order: 1;
min-height: 400px;
height: 400px;
}
.hero-slide__overline { margin-inline: auto; }
.hero-slide__title { font-size: clamp(28px, 6vw, 44px); }
.hero-slide__subtitle { max-width: 100%; margin-inline: auto; }
.hero-slide__actions { justify-content: center; }
.hero-slide__trust { margin-inline: auto; }
.hero-slide__image-frame::after { display: none; }
.hero-slider__nav {
position: relative;
bottom: auto;
inset-inline-start: auto;
justify-content: center;
margin-top: var(--space-6);
margin-bottom: var(--space-8);
padding-inline: var(--space-6);
}
.hero-slider__track { min-height: auto; }
.section-hero__blob { opacity: 0.25; }
.section-hero__dot-grid { display: none; }
}
@media (max-width: 560px) {
.hero-slide__float-badge { display: none; }
.hero-slide__trust { gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.hero-slide__trust-item strong { font-size: var(--text-md); }
.hero-slide__trust-divider { height: 24px; }
.hero-slider__nav { gap: var(--space-3); }
.hero-slider__arrow { width: 44px; height: 44px; }
.hero-slider__counter { display: none; }
.hero-slide__visual { min-height: 320px; height: 320px; }
}
/* ════════════════════════════════════════════════════════════
SECTIONS
════════════════════════════════════════════════════════════ */
.section { padding: var(--space-section) 0; }
.section__header { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; }
.section__overline {
display: inline-block;
font-family: var(--font-display);
font-style: italic;
color: var(--pink-600);
font-size: var(--text-sm);
letter-spacing: 0.08em;
margin-bottom: var(--space-3);
position: relative;
padding: 0 var(--space-4);
}
.section__overline::before,
.section__overline::after {
content: "";
position: absolute;
top: 50%;
width: 24px;
height: 1px;
background: var(--pink-400);
}
.section__overline::before { inset-inline-end: 100%; }
.section__overline::after { inset-inline-start: 100%; }
.section__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
font-weight: 600;
color: var(--navy-700);
margin: 0 0 var(--space-3);
line-height: var(--leading-arabic-display);
}
.section__title--gradient {
background: var(--gradient-pink-soft);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.section__subtitle {
color: var(--navy-400);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
}
.section__footer { margin-top: var(--space-12); text-align: center; }
.section-stats {
background: var(--gradient-pink-cream);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } }
.section-why { background: #fff; }
.why-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
margin-top: var(--space-8);
}
.why-wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-12); align-items: center; }
.why-wrap.has-image { grid-template-columns: 1fr 1fr; }
.why-wrap__image img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .why-wrap.has-image { grid-template-columns: 1fr; } }
.section-categories { background: var(--ivory-100); }
.categories-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .categories-grid { grid-template-columns: 1fr; } }
.section-courses { background: #fff; }
.courses-filter {
display: flex; gap: var(--space-2);
justify-content: center;
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.courses-filter button {
padding: 10px 22px;
border-radius: var(--radius-full);
background: var(--ivory-200);
color: var(--navy-500);
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-sm);
transition: all var(--dur-base) var(--ease-out);
border: 1px solid transparent;
cursor: pointer;
}
.courses-filter button:hover {
background: var(--pink-50);
border-color: var(--pink-200);
color: var(--pink-700);
}
.courses-filter button.is-active {
background: var(--gradient-pink-soft);
color: #fff;
box-shadow: var(--shadow-pink-soft);
}
.courses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .courses-grid { grid-template-columns: 1fr; } }
.section-lms {
background: var(--gradient-navy-deep);
color: #fff;
position: relative;
overflow: hidden;
}
.section-lms::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 20%, rgba(192, 148, 94, 0.25), transparent 50%),
radial-gradient(circle at 15% 80%, rgba(217, 181, 126, 0.18), transparent 50%);
filter: blur(60px);
pointer-events: none;
}
.section-lms > .container { position: relative; z-index: 2; }
.section-lms .section__title { color: #fff; }
.section-lms .section__subtitle { color: rgba(255, 255, 255, 0.85); }
.section-lms .section__overline { color: var(--gold-300); }
.section-lms .section__overline::before,
.section-lms .section__overline::after { background: var(--gold-400); }
.lms-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.lms-features {
margin: var(--space-6) 0 var(--space-8);
display: grid; gap: var(--space-4);
list-style: none; padding: 0;
}
.lms-features li {
display: flex; gap: var(--space-3); align-items: center;
color: rgba(255, 255, 255, 0.92);
font-size: 15px;
line-height: 1.5;
}
.lms-feature__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #C0945E 0%, #D9B57E 100%);
color: #183C64;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(192, 148, 94, 0.35), inset 0 -2px 6px rgba(0,0,0,0.08);
border: 1px solid rgba(255,255,255,0.18);
}
/* Normalize ANY SVG inside the LMS icon — overrides whatever native dimensions the source SVG declares. */
.lms-feature__icon svg {
width: 20px !important;
height: 20px !important;
display: block;
stroke-width: 2.2;
}
.lms-feature__icon i {
font-size: 18px;
line-height: 1;
}
.lms-wrap__media img,
.lms-wrap__media iframe {
border-radius: var(--radius-lg);
width: 100%;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
@media (max-width: 900px) { .lms-wrap { grid-template-columns: 1fr; } }
.section-trainers { background: #fff; }
.trainers-carousel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-8);
}
.section-news { background: var(--ivory-100); }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-card {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
}
.news-card:hover {
border-color: var(--pink-300);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.news-card__thumb { aspect-ratio: 16/10; overflow: hidden; }
.news-card__thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-slow);
}
.news-card:hover .news-card__thumb img { transform: scale(1.06); }
.news-card__body { padding: var(--space-5); }
.news-card__date {
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-xs);
color: var(--pink-600);
font-weight: 500;
letter-spacing: 0.05em;
}
.news-card__title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
margin: var(--space-2) 0 var(--space-3);
color: var(--navy-700);
line-height: var(--leading-arabic-display);
}
.news-card__title a:hover { color: var(--pink-600); }
.news-card__excerpt {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.section-corporate { background: #fff; }
.corporate-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.corporate-wrap__image img {
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .corporate-wrap { grid-template-columns: 1fr; } }
.section-partners { background: var(--ivory-100); }
.partners-marquee {
overflow: hidden;
padding: var(--space-8) 0;
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.partners-marquee__track {
display: flex;
gap: var(--space-16);
animation: marquee 40s linear infinite;
align-items: center;
}
.partners-marquee__item {
flex: 0 0 auto;
filter: grayscale(1);
opacity: 0.5;
transition: all var(--dur-base);
}
.partners-marquee__item:hover { filter: none; opacity: 1; }
.partners-marquee__item img {
max-height: 60px; width: auto;
max-width: 160px; object-fit: contain;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .partners-marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.section-cta {
position: relative;
background: var(--gradient-navy-pink);
color: #fff;
overflow: hidden;
}
.section-cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 30%, rgba(192, 148, 94, 0.35), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(217, 181, 126, 0.25), transparent 50%);
filter: blur(40px);
}
.section-cta .container { position: relative; z-index: 2; text-align: center; }
.section-cta__title {
font-family: var(--font-display);
color: #fff;
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
font-weight: 600;
margin-bottom: var(--space-4);
line-height: var(--leading-arabic-display);
}
.section-cta__subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: var(--text-md);
max-width: 580px;
margin: 0 auto var(--space-8);
line-height: var(--leading-relaxed);
}
/* ════════════════════════════════════════════════════════════
FOOTER
════════════════════════════════════════════════════════════ */
.site-footer {
background: var(--navy-800);
color: rgba(255, 255, 255, 0.75);
padding-top: var(--space-16);
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
top: 0; right: 0;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.12), transparent 70%);
filter: blur(80px);
pointer-events: none;
}
.site-footer__inner {
position: relative;
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(--space-10);
padding-bottom: var(--space-12);
}
.site-footer__logo { max-height: 60px; margin-bottom: var(--space-5); filter: unset; }
.site-footer__about {
line-height: var(--leading-relaxed);
opacity: 0.8;
font-size: var(--text-sm);
}
.site-footer__title {
font-family: var(--font-display);
color: #fff;
margin-bottom: var(--space-5);
font-size: var(--text-md);
font-weight: 600;
position: relative;
padding-bottom: var(--space-3);
}
.site-footer__title::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 36px; height: 2px;
background: var(--gradient-pink-soft);
border-radius: 2px;
}
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li {
margin-bottom: var(--space-3);
position: relative;
padding-inline-start: 22px;
}
.site-footer__links li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 50%;
width: 12px; height: 12px;
transform: translateY(-50%);
background: var(--gradient-pink-soft);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.65;
transition: all var(--dur-base);
}
html[dir="ltr"] .site-footer__links li::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.site-footer__links li:hover::before { opacity: 1; transform: translateY(-50%) translateX(-3px); }
html[dir="ltr"] .site-footer__links li:hover::before { transform: translateY(-50%) translateX(3px); }
.site-footer__links a, .site-footer__contact a {
opacity: 0.85;
transition: all var(--dur-base);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
}
.site-footer__links a:hover, .site-footer__contact a:hover {
color: var(--pink-300);
opacity: 1;
}
/* Contact list with icons */
.site-footer__contact { list-style: none; padding: 0; margin: 0; }
.site-footer__contact li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-bottom: var(--space-4);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.85);
}
.site-footer__contact-ico {
flex-shrink: 0;
width: 16px; height: 16px;
color: var(--pink-300);
margin-top: 3px;
}
.site-footer__contact a { display: inline; }
.site-footer__hours { color: rgba(255, 255, 255, 0.7); }
/* Payment badges */
.site-footer__pay {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.site-footer__pay-label {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--space-3);
letter-spacing: 0.04em;
}
.site-footer__pay-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.pay-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 4px;
padding: 4px 6px;
height: 24px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
transition: transform var(--dur-base);
}
.pay-badge:hover { transform: translateY(-2px); }
.pay-badge svg { display: block; height: 14px; width: auto; max-width: 42px; }
.pay-badge--mc svg, .pay-badge--mada svg, .pay-badge--tamara svg, .pay-badge--tabby svg { height: 16px; }
.pay-badge--visa { color: #1A1F71; }
/* Social wrap with label */
.site-footer__social-wrap { margin-top: var(--space-6); }
.site-footer__social-label {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.55);
margin-bottom: var(--space-3);
letter-spacing: 0.04em;
}
.site-footer__social-wrap .site-footer__social { margin-top: 0; }
/* Footer bottom spacing */
.site-footer__bottom {
margin-top: var(--space-8);
padding-top: var(--space-6);
padding-bottom: var(--space-6);
}
.site-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-5); }
.site-footer__social a {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all var(--dur-base);
}
.site-footer__social a:hover {
background: var(--gradient-pink-soft);
border-color: transparent;
transform: translateY(-3px);
box-shadow: var(--shadow-pink-glow);
}
.site-footer__social svg { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.85); }
.site-footer__social a:hover svg { color: #fff; }
.site-footer__bottom {
position: relative;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: var(--space-5) 0;
text-align: center;
font-size: var(--text-sm);
}
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__inner { grid-template-columns: 1fr; } }
/* WhatsApp + Forms */
.floating-whatsapp {
position: fixed; bottom: var(--space-6); inset-inline-end: var(--space-6);
width: 60px; height: 60px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: grid; place-items: center;
z-index: 95;
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4);
animation: pulse-wa 2.5s infinite;
}
.floating-whatsapp svg { width: 28px; height: 28px; }
@keyframes pulse-wa {
0%, 100% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4); }
50% { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.4), 0 0 0 16px rgba(37, 211, 102, 0); }
}
.lamar-form-wrap { max-width: 760px; margin: var(--space-8) 0; }
.lamar-form { display: grid; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-field > span {
display: block;
font-family: var(--font-body);
font-weight: 600;
margin-bottom: var(--space-2);
font-size: var(--text-sm);
color: var(--navy-700);
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 14px 18px;
border: 1.5px solid var(--ivory-400);
border-radius: var(--radius-md);
background: #fff;
color: var(--navy-700);
transition: all var(--dur-base) var(--ease-out);
font: inherit;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--pink-400);
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.12);
}
.form-checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.form-checkbox input { margin-top: 4px; accent-color: var(--pink-500); width: 18px; height: 18px; }
.form-alert {
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
border-inline-start: 4px solid currentColor;
}
.form-alert--success { background: var(--success-50); color: var(--success-700); }
.form-alert--error { background: var(--error-50); color: var(--error-700); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
/* Archive */
.archive-hero {
background: var(--gradient-pink-cream);
padding: var(--space-16) 0 var(--space-12);
text-align: center;
border-bottom: 1px solid var(--ivory-300);
position: relative;
overflow: hidden;
}
.archive-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 30%, rgba(192, 148, 94, 0.1), transparent 60%);
}
.archive-hero > * { position: relative; }
.archive-hero__title {
font-family: var(--font-display);
color: var(--navy-700);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
font-weight: 600;
margin-bottom: var(--space-3);
}
.archive-hero__subtitle {
color: var(--navy-400);
font-size: var(--text-md);
max-width: 720px;
margin: 0 auto;
}
.archive-courses { padding: var(--space-12) 0 var(--space-20); background: #fff; }
.archive-courses__layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--space-8);
}
.filter-card {
position: sticky; top: 100px;
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.filter-card h3 {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
margin-bottom: var(--space-5);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--pink-300);
color: var(--navy-700);
}
.filter-group { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--ivory-300); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group h4 {
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-700);
margin-bottom: var(--space-3);
}
.filter-radio {
display: flex; gap: var(--space-2); align-items: center;
padding: var(--space-2); margin-bottom: 2px;
cursor: pointer; border-radius: var(--radius-sm);
transition: background var(--dur-base);
font-size: var(--text-sm);
color: var(--navy-700);
}
.filter-radio:hover { background: var(--pink-50); }
.filter-radio input { accent-color: var(--pink-500); }
.archive-toolbar {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ivory-300);
}
.archive-count {
color: var(--navy-400);
font-size: var(--text-sm);
font-family: var(--font-body);
}
.pagination { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-12); }
.pagination .page-numbers {
display: grid; place-items: center;
min-width: 44px; height: 44px; padding: 0 var(--space-3);
border-radius: 50%;
background: var(--ivory-200);
color: var(--navy-700);
font-family: var(--font-body); font-weight: 600;
transition: all var(--dur-base);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
background: var(--gradient-pink-soft);
color: #fff;
box-shadow: var(--shadow-pink-soft);
}
.no-results {
text-align: center;
padding: var(--space-16) var(--space-6);
background: var(--ivory-100);
border: 1px dashed var(--ivory-400);
border-radius: var(--radius-lg);
color: var(--navy-400);
}
@media (max-width: 900px) {
.archive-courses__layout { grid-template-columns: 1fr; }
.filter-card { position: static; }
}
/* 404 */
.error-404 {
padding: var(--space-16) 0 var(--space-12);
text-align: center;
background: var(--gradient-pink-cream);
position: relative;
overflow: hidden;
}
.error-404::before {
content: "";
position: absolute;
top: -100px; left: 50%;
transform: translateX(-50%);
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.10), transparent 65%);
pointer-events: none;
z-index: 0;
}
.error-404 > .container { position: relative; z-index: 1; }
.error-404__visual {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-bottom: var(--space-4);
line-height: 1;
}
.error-404__compass {
font-size: clamp(2.5rem, 5vw, 3.5rem);
color: var(--pink-500, #C0945E);
animation: lamar-404-spin 12s linear infinite;
display: inline-block;
filter: drop-shadow(0 8px 24px rgba(192, 148, 94, 0.25));
}
@keyframes lamar-404-spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.error-404__code {
font-family: var(--font-display);
font-size: clamp(5rem, 12vw, 9rem);
font-weight: 700;
background: var(--gradient-pink-soft);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
letter-spacing: -0.02em;
}
.error-404__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
margin: 0 0 var(--space-3);
color: var(--navy-700);
font-weight: 600;
}
.error-404__text {
color: var(--navy-400);
max-width: 520px;
margin: auto;
margin-bottom: 10px;
font-size: var(--text-md);
line-height: var(--leading-relaxed);
}
.error-404 .search-form {
margin: auto;
margin-bottom: 40px;
}
.error-404__suggestions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
}
.error-404__suggestions .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 12px 22px;
font-size: var(--text-sm);
line-height: 1.2;
min-height: 44px;
white-space: nowrap;
}
.error-404__suggestions .btn i { font-size: 0.95em; }
.search-form {
display: flex;
align-items: stretch;
max-width: 480px;
margin: 0 auto;
height: 52px;
border: 1.5px solid var(--pink-300);
border-radius: var(--radius-full);
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-pink-soft);
}
.search-form input {
flex: 1;
padding: 0 var(--space-5);
border: 0; outline: 0;
background: transparent;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--navy-700);
}
.search-form input::placeholder { color: var(--navy-300); }
.search-form button {
background: var(--gradient-pink-soft);
color: #fff;
width: 52px;
flex: 0 0 52px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-md);
border: 0;
cursor: pointer;
transition: opacity var(--dur-base);
}
.search-form button:hover { opacity: 0.9; }
@media (max-width: 600px) {
.error-404 { padding: var(--space-12) 0; }
.error-404__visual { gap: var(--space-3); }
.error-404__suggestions .btn { width: 100%; justify-content: center; }
}
/* Page article */
.page-article {
padding: var(--space-12) var(--space-6);
max-width: var(--container-prose);
margin: 0 auto;
}
.page-article__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
font-weight: 600;
margin-bottom: var(--space-8);
color: var(--navy-700);
text-align: center;
position: relative;
padding-bottom: var(--space-5);
}
.page-article__title::after {
content: "";
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 60px; height: 3px;
background: var(--gradient-pink-soft);
border-radius: 3px;
}
.page-article__content h2 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
margin: 1.6em 0 0.6em;
color: var(--navy-700);
}
.page-article__content h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 500;
font-style: italic;
margin: 1.4em 0 0.5em;
color: var(--pink-600);
}
.page-article__content p { margin-bottom: 1em; line-height: var(--leading-arabic-body); }
.page-article__content ul, .page-article__content ol {
margin: 1em 0; padding-inline-start: 1.5em;
}
.page-article__content ul { list-style: disc; }
.page-article__content ol { list-style: decimal; }
.page-article__content li { margin-bottom: 0.5em; line-height: var(--leading-relaxed); }
.page-article__content a { color: var(--pink-600); text-decoration: underline; }
.page-article__content strong { color: var(--navy-700); }
/* Focus visible */
*:focus { outline: none; }
*:focus-visible {
outline: 3px solid var(--pink-400);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.35);
}
a:focus-visible { outline-offset: 4px; }
/* ════════════════════════════════════════════════════════════
SECTION: EVENTS SHOWCASE (الأحداث والفعاليات)
════════════════════════════════════════════════════════════ */
.section-events { background: #fff; }
.events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .events-grid { grid-template-columns: 1fr; } }
.event-card {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
display: flex;
flex-direction: column;
}
.event-card:hover {
border-color: var(--pink-300);
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.event-card__thumb {
display: block; position: relative;
aspect-ratio: 16/10; overflow: hidden;
background: var(--ivory-200);
}
.event-card__thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-slow);
}
.event-card:hover .event-card__thumb img { transform: scale(1.05); }
.event-card__date {
position: absolute;
top: var(--space-3); inset-inline-start: var(--space-3);
background: #fff;
border-radius: var(--radius-md);
padding: 6px 12px;
text-align: center;
line-height: 1.1;
box-shadow: var(--shadow-sm);
min-width: 56px;
}
.event-card__date strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--pink-600);
font-weight: 700;
}
.event-card__date span {
font-family: var(--font-display);
font-size: 11px;
text-transform: uppercase;
color: var(--navy-400);
font-weight: 600;
letter-spacing: 0.05em;
}
.event-card__body {
padding: var(--space-5);
flex: 1;
display: flex;
flex-direction: column;
}
.event-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
margin: 0 0 var(--space-3);
line-height: var(--leading-arabic-display);
color: var(--navy-700);
}
.event-card__title a { color: inherit; }
.event-card__title a:hover { color: var(--pink-600); }
.event-card__excerpt {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
flex: 1;
margin-bottom: var(--space-4);
}
.event-card__more {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-600);
font-weight: 600;
font-size: var(--text-sm);
transition: gap var(--dur-base);
margin-top: auto;
}
.event-card__more:hover { gap: 10px; color: var(--pink-700); }
/* ════════════════════════════════════════════════════════════
SECTION: QUICK REGISTER (نموذج تسجيل سريع)
════════════════════════════════════════════════════════════ */
.section-quick-register {
background: var(--gradient-pink-cream);
position: relative;
}
.section-quick-register::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 20%, rgba(192, 148, 94, 0.08), transparent 50%);
pointer-events: none;
}
.quick-register-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
position: relative;
z-index: 1;
}
@media (max-width: 900px) { .quick-register-wrap { grid-template-columns: 1fr; } }
.quick-register__intro .section__title { margin-bottom: var(--space-4); }
.quick-register__featured {
margin-top: var(--space-6);
background: #fff;
border: 1px solid var(--ivory-300);
border-inline-start: 4px solid var(--pink-500);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
}
.quick-register__featured-label {
font-family: var(--font-display);
font-style: italic;
color: var(--pink-600);
font-size: var(--text-xs);
letter-spacing: 0.06em;
margin-bottom: 4px;
}
.quick-register__featured-link {
display: block;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--navy-700);
margin-bottom: var(--space-2);
}
.quick-register__featured-link:hover { color: var(--pink-600); }
.quick-register__featured-meta {
display: flex; gap: var(--space-4); flex-wrap: wrap;
font-size: var(--text-sm); color: var(--navy-400);
}
.quick-register__featured-meta .qr-price {
color: var(--pink-600); font-weight: 700;
font-variant-numeric: tabular-nums;
}
.quick-register__form {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: 0 30px 60px rgba(24, 60, 100, 0.10);
display: grid;
gap: var(--space-4);
}
.quick-register__form-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--navy-700);
margin: 0 0 var(--space-2);
text-align: center;
}
.qr-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
@media (max-width: 560px) { .qr-row { grid-template-columns: 1fr; } }
.qr-field { display: block; }
.qr-field > span {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-xs);
color: var(--navy-700);
margin-bottom: 4px;
}
.qr-field input, .qr-field select {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--ivory-400);
border-radius: var(--radius-sm);
background: #fff;
color: var(--navy-700);
font-size: var(--text-sm);
transition: all var(--dur-base);
}
.qr-field input:focus, .qr-field select:focus {
outline: none;
border-color: var(--pink-400);
box-shadow: 0 0 0 3px rgba(192, 148, 94, 0.12);
}
.qr-checkbox {
display: flex; gap: var(--space-2); align-items: flex-start;
font-size: var(--text-sm); color: var(--navy-500); cursor: pointer;
}
.qr-checkbox input {
margin-top: 3px;
accent-color: var(--pink-500);
width: 16px; height: 16px;
}
.qr-checkbox a { color: var(--pink-600); text-decoration: underline; }
.quick-register__note {
text-align: center;
font-size: var(--text-xs);
color: var(--navy-400);
margin: 0;
}
/* ════════════════════════════════════════════════════════════
STATS — refined chic
════════════════════════════════════════════════════════════ */
.stat-card__value {
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 4px;
line-height: 1;
margin-top: var(--space-3);
}
.stat-card__number {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: 700;
color: var(--navy-700);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.stat-card__suffix {
font-size: var(--text-2xl);
color: var(--pink-500);
font-weight: 700;
margin: 0; /* reset any margin from earlier rules */
line-height: 1;
}
/* Stats section: ensure cards have nicer hover + better padding */
.section-stats { background: var(--gradient-pink-cream); }
.stat-card {
padding: var(--space-10) var(--space-5);
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
transition: all var(--dur-base) var(--ease-out);
overflow: hidden;
}
.stat-card::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
transform: translateX(-50%) scaleX(0);
width: 50%;
height: 3px;
background: var(--gradient-pink-soft);
transition: transform var(--dur-slow) var(--ease-out);
border-radius: 0 0 3px 3px;
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--pink-300); }
.stat-card:hover::after { transform: translateX(-50%) scaleX(1); }
.stat-card__icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--pink-50);
border: 1px solid var(--pink-100);
color: var(--pink-600);
display: grid; place-items: center;
margin: 0 auto var(--space-2);
transition: all var(--dur-base);
}
.stat-card:hover .stat-card__icon {
background: var(--gradient-pink-soft);
color: #fff;
border-color: transparent;
transform: scale(1.08);
}
.stat-card__label {
margin-top: var(--space-3);
color: var(--navy-500);
font-size: var(--text-sm);
font-weight: 500;
font-family: var(--font-body);
}
/* ════════════════════════════════════════════════════════════
CORPORATE SERVICES — refined with checkmark bullets
════════════════════════════════════════════════════════════ */
.section-corporate { background: #fff; }
.corporate-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.corporate-wrap__image {
position: relative;
}
.corporate-wrap__image::before {
content: "";
position: absolute;
inset-block-end: -16px;
inset-inline-end: -16px;
width: 70%; height: 70%;
background-image: radial-gradient(circle, var(--pink-200) 1.5px, transparent 1.5px);
background-size: 18px 18px;
opacity: 0.5;
z-index: 0;
border-radius: var(--radius-lg);
}
.corporate-wrap__image img {
position: relative;
z-index: 1;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
}
.corporate-wrap__text {
color: var(--navy-500);
line-height: var(--leading-arabic-body);
margin-bottom: var(--space-6);
font-size: var(--text-md);
}
.corporate-wrap__text p { margin-bottom: var(--space-3); }
/* Style bullet list with checkmark icons */
.corporate-wrap__text ul {
list-style: none;
padding: 0;
margin: var(--space-4) 0;
display: grid;
gap: var(--space-2);
}
.corporate-wrap__text ul li {
position: relative;
padding-inline-start: 32px;
color: var(--navy-700);
font-weight: 500;
font-size: var(--text-base);
}
.corporate-wrap__text ul li::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 4px;
width: 22px; height: 22px;
background: var(--gradient-pink-soft);
border-radius: 50%;
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(135deg, #C0945E, #D9B57E);
background-size: 14px 14px, 100% 100%;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 4px 12px rgba(192, 148, 94, 0.25);
}
@media (max-width: 900px) { .corporate-wrap { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════
CTA BANNER — bigger, more impactful, better overlay
════════════════════════════════════════════════════════════ */
.section-cta {
position: relative;
background: var(--navy-700);
background-image: var(--cta-bg-image, none);
background-size: cover;
background-position: center;
color: #fff;
overflow: hidden;
padding: var(--space-24) 0;
text-align: center;
}
.section-cta::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(24, 60, 100, 0.92), rgba(126, 95, 56, 0.78));
z-index: 0;
}
.section-cta::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(192, 148, 94, 0.45), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(217, 181, 126, 0.30), transparent 50%);
filter: blur(60px);
z-index: 0;
}
.section-cta .container {
position: relative;
z-index: 2;
}
/* Decorative ornament above title */
.section-cta__ornament {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-sm);
color: var(--pink-200);
letter-spacing: 0.1em;
margin-bottom: var(--space-5);
opacity: 0.9;
}
.section-cta__ornament::before,
.section-cta__ornament::after {
content: "";
width: 36px; height: 1px;
background: var(--pink-300);
}
.section-cta__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl));
font-weight: 600;
color: #fff;
margin: 0 0 var(--space-5);
line-height: var(--leading-arabic-display);
letter-spacing: -0.01em;
}
.section-cta__title span {
background: linear-gradient(135deg, #FBA1D7 0%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-cta__subtitle {
color: rgba(255, 255, 255, 0.92);
font-size: clamp(var(--text-md), 1.6vw, var(--text-lg));
max-width: 640px;
margin: 0 auto var(--space-10);
line-height: var(--leading-relaxed);
}
.section-cta__actions {
display: inline-flex; gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
}
.section-cta .btn--primary {
padding: 18px 44px;
font-size: var(--text-md);
background: #fff;
color: var(--navy-700);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.4);
}
.section-cta .btn--primary:hover {
background: var(--gradient-pink-soft);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 24px 50px rgba(192, 148, 94, 0.45);
}
.section-cta .btn--outline {
padding: 18px 36px;
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
background: transparent;
}
.section-cta .btn--outline:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
color: #fff;
}
/* ════════════════════════════════════════════════════════════
PARTNERS — graceful empty-state for partners without logos
════════════════════════════════════════════════════════════ */
.partners-marquee__item--text {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
height: 60px;
padding: 0 var(--space-5);
background: #fff;
border: 1px solid var(--ivory-400);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-md);
color: var(--navy-500);
transition: all var(--dur-base);
}
.partners-marquee__item--text:hover {
color: var(--pink-600);
border-color: var(--pink-300);
background: var(--pink-50);
}
.partners-marquee__item--empty { opacity: 0.4; }
/* Footer column 1 should be slightly wider so the title doesn't truncate */
.site-footer__inner { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__inner { grid-template-columns: 1fr; } }
/* ════════════════════════════════════════════════════════════
PAGE LAYOUTS — Team / Videos / Gallery
════════════════════════════════════════════════════════════ */
/* Wide page wrapper (overrides .page-article narrow prose for full-width pages) */
.page-article--wide {
max-width: var(--container);
}
/* Team grid */
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
margin: var(--space-10) 0;
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }
.team-card {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
padding: var(--space-8) var(--space-6);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
position: relative;
overflow: hidden;
}
.team-card::before {
content: ""; position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: var(--gradient-pink-soft);
transform: scaleX(0); transform-origin: center;
transition: transform var(--dur-slow) var(--ease-out);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--pink-300); }
.team-card:hover::before { transform: scaleX(1); }
.team-card__photo {
width: 140px; height: 140px;
border-radius: 50%;
margin: 0 auto var(--space-5);
background: var(--gradient-pink-cream);
background-size: cover;
background-position: center;
border: 3px solid #fff;
box-shadow: 0 0 0 1px var(--ivory-400);
transition: all var(--dur-slow);
position: relative;
}
.team-card:hover .team-card__photo {
transform: scale(1.05);
box-shadow: 0 0 0 1px var(--pink-300), 0 14px 36px rgba(192, 148, 94, 0.22);
}
.team-card__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--navy-700);
margin: 0 0 4px;
}
.team-card__role {
color: var(--pink-600);
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-sm);
margin-bottom: var(--space-4);
}
.team-card__bio {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.team-card__socials {
margin-top: var(--space-4);
display: inline-flex; gap: 8px; justify-content: center;
}
.team-card__socials a {
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--ivory-200);
color: var(--navy-500);
transition: all var(--dur-base);
}
.team-card__socials a:hover {
background: var(--gradient-pink-soft);
color: #fff;
transform: translateY(-2px);
}
.team-card__socials svg { width: 14px; height: 14px; }
/* Videos grid */
.videos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
margin: var(--space-10) 0;
}
@media (max-width: 1024px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .videos-grid { grid-template-columns: 1fr; } }
.video-card {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
display: block;
text-decoration: none;
color: inherit;
}
.video-card:hover {
transform: translateY(-4px);
border-color: var(--pink-300);
box-shadow: var(--shadow-md);
}
.video-card__thumb {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ivory-200);
}
.video-card__thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dur-slow);
}
.video-card:hover .video-card__thumb img { transform: scale(1.08); }
.video-card__thumb::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(24, 60, 100, 0) 50%, rgba(24, 60, 100, 0.5) 100%);
}
.video-card__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
display: grid; place-items: center;
color: var(--pink-600);
transition: all var(--dur-base) var(--ease-spring);
z-index: 2;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.video-card:hover .video-card__play {
background: var(--gradient-pink-soft);
color: #fff;
transform: translate(-50%, -50%) scale(1.12);
}
.video-card__play svg { width: 22px; height: 22px; }
.video-card__body { padding: var(--space-5); }
.video-card__title {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
color: var(--navy-700);
margin: 0;
line-height: var(--leading-arabic-display);
}
/* Gallery grid (Pinterest-style) */
.gallery-grid {
columns: 3 220px;
column-gap: var(--space-4);
margin: var(--space-10) 0;
}
.gallery-item {
display: block;
break-inside: avoid;
margin-bottom: var(--space-4);
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
transition: transform var(--dur-base);
cursor: zoom-in;
background: var(--ivory-200);
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img {
width: 100%; height: auto;
display: block;
transition: filter var(--dur-base);
}
.gallery-item:hover img { filter: brightness(1.05) saturate(1.1); }
.gallery-item::after {
content: "🔍";
position: absolute;
top: var(--space-2); inset-inline-end: var(--space-2);
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
display: grid; place-items: center;
opacity: 0;
transition: opacity var(--dur-base);
font-size: 16px;
pointer-events: none;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: var(--space-3) var(--space-4);
background: linear-gradient(0deg, rgba(24, 60, 100, 0.92), transparent);
color: #fff;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 500;
opacity: 0;
transform: translateY(10px);
transition: all var(--dur-base);
}
.gallery-item:hover .gallery-item__caption { opacity: 1; transform: translateY(0); }
/* Page hero (for static pages with custom header strip) */
.page-hero {
background: var(--gradient-pink-cream);
padding: var(--space-16) 0 var(--space-12);
text-align: center;
border-bottom: 1px solid var(--ivory-300);
position: relative;
overflow: hidden;
}
.page-hero::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(192, 148, 94, 0.10), transparent 60%);
}
.page-hero > * { position: relative; }
.page-hero__breadcrumb {
display: inline-flex;
gap: 6px;
font-size: var(--text-sm);
color: var(--navy-400);
margin-bottom: var(--space-4);
}
.page-hero__breadcrumb a:hover { color: var(--pink-600); }
.page-hero__breadcrumb span { color: var(--ivory-400); }
.page-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
font-weight: 600;
color: var(--navy-700);
margin: 0 0 var(--space-3);
}
.page-hero__subtitle {
color: var(--navy-500);
font-size: var(--text-md);
max-width: 680px;
margin: 0 auto;
line-height: var(--leading-relaxed);
}
/* ════════════════════════════════════════════════════════════
PAGE ARTICLE v2 — fixed widths + icon lists + better spacing
════════════════════════════════════════════════════════════ */
/* Override the old narrow constraint — new page.php applies its own width */
.page-article {
padding: var(--space-12) var(--space-6) var(--space-20);
max-width: var(--container-prose); /* 720px for prose pages */
margin: 0 auto;
}
.page-article--wide {
max-width: var(--container); /* 1280px for team/videos/gallery */
}
/* Hide duplicate H1 (we moved it to page-hero) */
.page-article__header { display: none; }
/* Lead paragraph (kept for emphasis if not already extracted) */
.page-article__content .lead {
font-size: var(--text-lg);
color: var(--navy-600);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-8);
padding-inline-start: var(--space-5);
border-inline-start: 3px solid var(--pink-400);
}
/* Section headings within page article */
.page-article__content h2 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
color: var(--navy-700);
margin: 2em 0 var(--space-5);
padding-bottom: var(--space-3);
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
}
.page-article__content h2::before {
content: "";
display: inline-block;
width: 28px; height: 28px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center/14px no-repeat,
var(--gradient-pink-soft);
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(192, 148, 94, 0.25);
}
.page-article__content h2::after {
content: "";
position: absolute;
bottom: 0; inset-inline-start: 0;
width: 80px; height: 2px;
background: var(--gradient-pink-soft);
border-radius: 2px;
}
.page-article__content h3 {
font-family: var(--font-display);
font-style: italic;
font-size: var(--text-lg);
color: var(--pink-600);
margin: 1.6em 0 var(--space-3);
}
.page-article__content p {
margin-bottom: 1.1em;
line-height: var(--leading-arabic-body);
color: var(--navy-600);
}
.page-article__content strong { color: var(--navy-700); font-weight: 600; }
.page-article__content a {
color: var(--pink-600);
text-decoration: underline;
text-decoration-color: var(--pink-200);
text-underline-offset: 3px;
transition: all var(--dur-base);
}
.page-article__content a:hover {
color: var(--pink-700);
text-decoration-color: var(--pink-500);
}
/* ── List items with custom pink checkmark icon ── */
.page-article__content ul {
list-style: none;
padding: 0;
margin: var(--space-5) 0 var(--space-8);
display: grid;
gap: var(--space-3);
}
.page-article__content ul li {
position: relative;
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
padding-inline-start: 52px;
background: var(--ivory-100);
border-radius: var(--radius-md);
color: var(--navy-700);
line-height: var(--leading-relaxed);
font-size: var(--text-base);
transition: all var(--dur-base);
border-inline-start: 3px solid transparent;
}
.page-article__content ul li:hover {
background: var(--pink-50);
border-inline-start-color: var(--pink-400);
transform: translateX(4px);
}
[dir="rtl"] .page-article__content ul li:hover { transform: translateX(-4px); }
.page-article__content ul li::before {
content: "";
position: absolute;
inset-inline-start: var(--space-4);
top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
border-radius: 50%;
background:
url("data:image/svg+xml;utf8,") center/13px no-repeat,
var(--gradient-pink-soft);
box-shadow: 0 3px 10px rgba(192, 148, 94, 0.28);
flex-shrink: 0;
}
.page-article__content ul li strong {
display: inline-block;
margin-inline-end: 4px;
}
/* Ordered list — use numbered pink badges */
.page-article__content ol {
list-style: none;
padding: 0;
margin: var(--space-5) 0 var(--space-8);
display: grid;
gap: var(--space-3);
counter-reset: lamar-counter;
}
.page-article__content ol li {
position: relative;
padding: var(--space-3) var(--space-4);
padding-inline-start: 56px;
background: var(--ivory-100);
border-radius: var(--radius-md);
color: var(--navy-700);
line-height: var(--leading-relaxed);
counter-increment: lamar-counter;
transition: all var(--dur-base);
}
.page-article__content ol li:hover { background: var(--pink-50); }
.page-article__content ol li::before {
content: counter(lamar-counter);
position: absolute;
inset-inline-start: var(--space-3);
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-sm);
box-shadow: 0 4px 10px rgba(192, 148, 94, 0.28);
font-variant-numeric: tabular-nums;
}
/* Blockquote */
.page-article__content blockquote {
margin: var(--space-6) 0;
padding: var(--space-5) var(--space-6);
background: var(--pink-50);
border-radius: var(--radius-md);
border-inline-start: 4px solid var(--pink-500);
font-family: var(--font-display);
font-style: italic;
color: var(--navy-700);
position: relative;
}
.page-article__content blockquote::before {
content: """;
position: absolute;
top: -10px;
inset-inline-start: var(--space-4);
font-size: 48px;
color: var(--pink-300);
font-family: var(--font-display);
line-height: 1;
}
/* Form embedded in page (shortcode rendered) */
.page-article__content .lamar-form-wrap {
background: #fff;
border: 1px solid var(--ivory-300);
border-radius: var(--radius-lg);
padding: var(--space-8);
margin: var(--space-8) 0;
box-shadow: var(--shadow-sm);
max-width: 100%;
}
/* Tighter spacing inside team/videos/gallery wide pages */
.page-article--wide .page-article__content > p,
.page-article--wide .page-article__content > h2,
.page-article--wide .page-article__content > h3 {
max-width: var(--container-prose);
margin-inline: auto;
}
.page-article--wide .page-article__content > p { text-align: center; }
.page-article--wide .page-article__content > h2 { justify-content: center; }
.page-article--wide .page-article__content > h2::after {
inset-inline-start: 50%;
transform: translateX(-50%);
}
@media (max-width: 600px) {
.page-article__content h2 { font-size: var(--text-xl); }
.page-article__content ul li,
.page-article__content ol li { padding-inline-start: 48px; }
}
/* ════════════════════════════════════════════════════════════
FOOTER SOCIAL ICONS v2 — proper SVG render with brand hover
════════════════════════════════════════════════════════════ */
.site-footer__social {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: var(--space-5);
padding: 0;
list-style: none;
}
.site-footer__social li { margin: 0; }
.site-footer__social a,
.social-icon {
display: inline-grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.95);
transition: all var(--dur-base) var(--ease-out);
text-decoration: none;
}
.site-footer__social a svg,
.social-icon svg {
width: 18px;
height: 18px;
color: currentColor;
fill: currentColor;
}
.social-icon:hover,
.site-footer__social a:hover {
transform: translateY(-3px);
color: #fff;
}
/* Brand-colored hovers */
.social-icon--whatsapp:hover { background: #25D366; border-color: #25D366; box-shadow: 0 8px 22px rgba(37, 211, 102, .35); }
.social-icon--facebook:hover { background: #1877F2; border-color: #1877F2; box-shadow: 0 8px 22px rgba(24, 119, 242, .35); }
.social-icon--twitter:hover { background: #000000; border-color: #000000; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.social-icon--instagram:hover {
background: radial-gradient(circle at 30% 110%, #FED373, #F15245 30%, #D92E7F 60%, #9B36B7 80%, #515ECF);
border-color: transparent;
box-shadow: 0 8px 22px rgba(217, 46, 127, .35);
}
.social-icon--linkedin:hover { background: #0A66C2; border-color: #0A66C2; box-shadow: 0 8px 22px rgba(10, 102, 194, .35); }
.social-icon--youtube:hover { background: #FF0000; border-color: #FF0000; box-shadow: 0 8px 22px rgba(255, 0, 0, .35); }
.social-icon--tiktok:hover {
background: linear-gradient(135deg, #25F4EE 0%, #000000 50%, #FE2C55 100%);
border-color: transparent;
box-shadow: 0 8px 22px rgba(254, 44, 85, .35);
}
.social-icon--snapchat:hover { background: #FFFC00; border-color: #FFFC00; color: #000; box-shadow: 0 8px 22px rgba(255, 252, 0, .4); }
/* Snapchat icon needs black on yellow */
.social-icon--snapchat:hover svg { color: #000; }
/* ════════════════════════════════════════════════════════════
CONTACT PAGE — Editorial Split Layout
════════════════════════════════════════════════════════════ */
.contact-shell {
position: relative;
padding: var(--space-10) 0 var(--space-16);
background:
linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 60%, #FAF4F7 100%);
overflow: hidden;
}
.contact-shell__deco {
position: absolute;
pointer-events: none;
z-index: 0;
}
.contact-shell__deco--blob1 {
top: -120px;
inset-inline-end: -100px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.18), transparent 65%);
filter: blur(40px);
}
.contact-shell__deco--blob2 {
bottom: -100px;
inset-inline-start: -80px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(40px);
}
.contact-shell__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24, 60, 100, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(24, 60, 100, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 30%, #000 30%, transparent 75%);
opacity: 0.7;
}
.contact-shell > .container { position: relative; z-index: 1; }
/* Breadcrumb — minimal, no glass bg */
.contact-crumb {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
color: var(--navy-500);
margin-bottom: var(--space-8);
}
.contact-crumb a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--navy-600);
text-decoration: none;
transition: color var(--dur-base);
}
.contact-crumb a:hover { color: var(--pink-500, #C0945E); }
.contact-crumb__sep { font-size: 10px; opacity: 0.5; color: var(--navy-300); }
html[dir="rtl"] .contact-crumb__sep { transform: rotate(180deg); }
.contact-crumb > span { color: var(--navy-700); font-weight: 600; }
/* Split layout */
.contact-split {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: var(--space-6);
align-items: stretch;
background: #fff;
border-radius: 28px;
box-shadow:
0 30px 70px -20px rgba(24, 60, 100, 0.18),
0 8px 24px -8px rgba(192, 148, 94, 0.10);
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.06);
}
/* DARK PANEL */
.contact-panel {
position: relative;
background:
linear-gradient(155deg, #183C64 0%, #25557A 50%, #1A3D58 100%);
color: #fff;
padding: var(--space-10) var(--space-8);
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--space-7);
}
.contact-panel::before {
content: "";
position: absolute;
top: -200px;
inset-inline-end: -200px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.22), transparent 60%);
border-radius: 50%;
}
.contact-panel::after {
content: "";
position: absolute;
bottom: -150px;
inset-inline-start: -150px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(217, 181, 126, 0.18), transparent 60%);
border-radius: 50%;
}
.contact-panel__ribbon {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, var(--pink-400, #D9B57E), var(--pink-300, #C0945E), transparent);
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel__head { margin-bottom: var(--space-2); }
.contact-panel__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.08em;
font-weight: 700;
color: var(--pink-300, #C0945E);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.contact-panel__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3.2vw, var(--text-4xl));
font-weight: 700;
line-height: 1.15;
color: #fff;
margin: 0 0 var(--space-3);
}
.contact-panel__title-accent {
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.contact-panel__desc {
color: rgba(255, 255, 255, 0.75);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0;
max-width: 460px;
}
/* Channels list */
.contact-channels {
list-style: none;
margin: 0; padding: 0;
display: grid;
gap: var(--space-3);
}
.contact-channels__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
transition: all var(--dur-base) var(--ease-out);
}
.contact-channels__item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(192, 148, 94, 0.45);
transform: translateX(-4px);
}
html[dir="ltr"] .contact-channels__item:hover { transform: translateX(4px); }
.contact-channels__item--wa:hover { border-color: rgba(37, 211, 102, 0.55); }
.contact-channels__icon {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.contact-channels__icon i { font-size: 18px; line-height: 1; display: block; }
.contact-channels__item--wa .contact-channels__icon {
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff;
box-shadow: 0 6px 14px rgba(37, 211, 102, 0.40);
}
.contact-channels__item:hover .contact-channels__icon { transform: scale(1.08) rotate(-4deg); }
.contact-channels__label {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.55);
margin-bottom: 2px;
}
.contact-channels__value {
color: #fff;
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: color var(--dur-base);
line-height: 1.4;
}
.contact-channels__value:hover { color: var(--pink-300, #D9B57E); }
.contact-channels__value--text { font-weight: 500; }
/* Hours pill */
.contact-panel__hours {
margin-top: 10px;
display: flex;
gap: 14px;
align-items: center;
padding: 14px 18px;
background: rgba(0, 0, 0, 0.18);
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.06);
font-size: var(--text-sm);
}
.contact-panel__hours-dot {
width: 10px; height: 10px;
background: #22C55E;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25); }
50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.10); }
}
.contact-panel__hours strong {
display: block;
font-size: var(--text-sm);
color: #fff;
margin-bottom: 2px;
}
.contact-panel__hours span {
color: rgba(255, 255, 255, 0.65);
font-size: var(--text-xs);
}
/* Socials at bottom */
.contact-panel__socials { margin-top: auto; }
.contact-panel__socials-label {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.contact-panel__socials-list { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-panel__social-icon {
width: 38px; height: 38px;
display: inline-grid;
place-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
color: rgba(255, 255, 255, 0.85);
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
}
.contact-panel__social-icon:hover {
transform: translateY(-3px);
color: #fff;
border-color: transparent;
}
.contact-panel__social-icon--facebook:hover { background: #1877F2; }
.contact-panel__social-icon--twitter:hover { background: #000; }
.contact-panel__social-icon--instagram:hover { background: radial-gradient(circle at 30% 110%, #FED373, #F15245 30%, #D92E7F 60%, #9B36B7 80%, #515ECF); }
.contact-panel__social-icon--linkedin:hover { background: #0A66C2; }
.contact-panel__social-icon--youtube:hover { background: #FF0000; }
.contact-panel__social-icon--tiktok:hover { background: linear-gradient(135deg, #25F4EE 0%, #000 50%, #FE2C55 100%); }
.contact-panel__social-icon--snapchat:hover { background: #FFFC00; color: #000; }
/* FORM CARD (right) */
.contact-form-card {
padding: var(--space-10) var(--space-8);
background: #fff;
}
.contact-form-card__head { margin-bottom: var(--space-6); }
.contact-form-card__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 700;
}
.contact-form-card__title::after {
content: "";
display: block;
width: 56px; height: 3px;
background: linear-gradient(90deg, var(--pink-500, #C0945E), var(--pink-300, #D9B57E));
border-radius: 3px;
margin-top: 12px;
}
.contact-form-card__desc {
color: var(--navy-400);
font-size: var(--text-sm);
margin: 0;
line-height: var(--leading-relaxed);
}
/* MAP STRIP */
.contact-map-strip {
position: relative;
height: 420px;
overflow: hidden;
}
.contact-map-strip__media {
position: absolute; inset: 0;
line-height: 0;
}
.contact-map-strip__media iframe {
width: 100%; height: 100%;
filter: saturate(0.85) contrast(1.05);
}
.contact-map-strip__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(24, 60, 100, 0.65) 0%, rgba(24, 60, 100, 0.30) 40%, transparent 70%);
pointer-events: none;
}
html[dir="rtl"] .contact-map-strip__media::after {
background: linear-gradient(270deg, rgba(24, 60, 100, 0.65) 0%, rgba(24, 60, 100, 0.30) 40%, transparent 70%);
}
.contact-map-strip__overlay {
position: relative;
height: 100%;
display: flex;
align-items: center;
}
.contact-map-strip__card {
background: #fff;
padding: 20px;
border-radius: 20px;
max-width: 360px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
position: relative;
z-index: 2;
border-top: 4px solid var(--pink-500, #C0945E);
}
.contact-map-strip__icon {
width: 48px; height: 48px;
background: var(--gradient-pink-soft);
color: #fff;
border-radius: 12px;
display: grid; place-items: center;
font-size: var(--text-md);
margin-bottom: var(--space-4);
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.35);
}
.contact-map-strip__card h3 {
font-family: var(--font-display);
margin: 0 0 6px;
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 700;
}
.contact-map-strip__card p {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
}
.contact-map-strip__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--gradient-pink-soft);
color: #fff;
padding: 11px 20px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.30);
}
.contact-map-strip__btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(192, 148, 94, 0.45);
}
/* Iconed form refinements for this layout */
.contact-form-card .lamar-form--iconed .form-field input,
.contact-form-card .lamar-form--iconed .form-field textarea {
background: #fafbfc;
}
.contact-form-card .lamar-form--iconed button[type="submit"] {
background: linear-gradient(135deg, var(--pink-500, #C0945E), var(--pink-400, #D9B57E));
box-shadow: 0 12px 30px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.contact-form-card .lamar-form--iconed button[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.45);
}
/* Responsive */
@media (max-width: 1024px) {
.contact-split { grid-template-columns: 1fr; }
.contact-panel { padding: var(--space-8) var(--space-6); }
.contact-form-card { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 600px) {
.contact-shell { padding: var(--space-6) 0 var(--space-10); }
.contact-split { border-radius: 18px; }
.contact-panel, .contact-form-card { padding: var(--space-6) var(--space-5); }
.contact-map-strip { height: 520px; }
.contact-map-strip__card { max-width: 100%; }
.contact-channels { gap: 10px; }
.contact-channels__item { padding: 12px; gap: 12px; }
}
/* ════════════════════════════════════════════════════════════
CAREERS PAGE — extends Editorial Split with benefits/stats/process
════════════════════════════════════════════════════════════ */
.careers-panel { gap: var(--space-6); }
/* Stats row inside panel */
.careers-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 18px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
}
.careers-stats__item {
text-align: center;
padding: 4px;
}
.careers-stats__num {
display: block;
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
line-height: 1.1;
}
.careers-stats__lbl {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.65);
margin-top: 4px;
}
/* Benefits */
.careers-benefits {}
.careers-benefits__head {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
font-weight: 700;
}
.careers-benefits__list {
list-style: none;
margin: 0; padding: 0;
display: grid;
gap: 10px;
}
.careers-benefits__item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: all var(--dur-base);
}
.careers-benefits__item:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(192, 148, 94, 0.40);
}
.careers-benefits__icon {
width: 44px; height: 44px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.careers-benefits__item:hover .careers-benefits__icon {
transform: scale(1.08) rotate(-6deg);
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.50);
}
.careers-benefits__icon i {
font-size: 18px;
line-height: 1;
display: block;
}
.careers-benefits__item strong {
display: block;
font-size: var(--text-sm);
color: #fff;
font-weight: 600;
margin-bottom: 2px;
}
.careers-benefits__item span {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.65);
line-height: 1.5;
}
/* HR contact block */
.careers-hr-contact {
display: flex;
gap: 14px;
align-items: center;
margin-top: auto;
padding: 16px 18px;
background: linear-gradient(135deg, rgba(192, 148, 94, 0.15), rgba(217, 181, 126, 0.05));
border-radius: 14px;
border: 1px solid rgba(192, 148, 94, 0.25);
}
.careers-hr-contact__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--gradient-pink-soft);
color: #fff;
display: grid; place-items: center;
font-size: var(--text-md);
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.30);
}
.careers-hr-contact strong {
display: block;
font-size: var(--text-sm);
color: #fff;
margin-bottom: 2px;
}
.careers-hr-contact a {
color: var(--pink-300, #D9B57E);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
transition: color var(--dur-base);
}
.careers-hr-contact a:hover { color: #fff; }
/* Select dropdown styling for iconed form */
.lamar-form--iconed .form-field select {
width: 100%;
padding: 14px 16px 14px 44px;
padding-inline-start: 44px;
padding-inline-end: 36px;
border: 1.5px solid rgba(24, 60, 100, 0.12);
border-radius: var(--radius-md);
background: #fafbfc url("data:image/svg+xml;utf8,") no-repeat;
background-position: left 14px center;
background-size: 14px;
color: var(--navy-700);
font-family: var(--font-body);
font-size: var(--text-sm);
appearance: none;
outline: 0;
cursor: pointer;
transition: all var(--dur-base);
}
.lamar-form--iconed .form-field select:focus {
background-color: #fff;
border-color: var(--pink-400, #D9B57E);
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.10);
}
/* File upload dropzone */
.form-field--upload .form-field__dropzone {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-5);
border: 1.5px dashed rgba(192, 148, 94, 0.40);
background: linear-gradient(135deg, rgba(192, 148, 94, 0.04), rgba(217, 181, 126, 0.02));
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--dur-base);
}
.form-field--upload .form-field__dropzone:hover {
border-color: var(--pink-500, #C0945E);
background: linear-gradient(135deg, rgba(192, 148, 94, 0.08), rgba(217, 181, 126, 0.04));
transform: translateY(-2px);
}
.form-field__dropzone-icon {
width: 52px; height: 52px;
border-radius: 14px;
background: var(--gradient-pink-soft);
color: #fff;
display: grid;
place-items: center;
font-size: var(--text-lg);
flex-shrink: 0;
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.30);
}
.form-field__dropzone-text { flex: 1; }
.form-field__dropzone-text strong {
display: block;
font-size: var(--text-sm);
color: var(--navy-700);
font-weight: 600;
margin-bottom: 2px;
}
.form-field__dropzone-text em {
display: block;
font-size: var(--text-xs);
color: var(--navy-400);
font-style: normal;
}
.form-field__dropzone input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
/* ─── Hiring Process Strip ─── */
.careers-process {
padding: var(--space-16) 0;
background:
linear-gradient(180deg, #FAF4F7 0%, #FFFFFF 100%);
position: relative;
overflow: hidden;
}
.careers-process::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 800px; height: 400px;
background: radial-gradient(ellipse, rgba(192, 148, 94, 0.08), transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.careers-process__head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-10);
position: relative;
}
.careers-process__eyebrow { margin-bottom: var(--space-3); }
.careers-process__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 700;
}
.careers-process__desc {
color: var(--navy-400);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0;
}
.careers-process__list {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
counter-reset: process;
position: relative;
}
/* Connecting dashed line between steps */
.careers-process__list::before {
content: "";
position: absolute;
top: 36px;
inset-inline-start: 12.5%;
width: 75%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--pink-300, #C0945E) 0, var(--pink-300, #C0945E) 6px, transparent 6px, transparent 14px);
opacity: 0.35;
z-index: 0;
}
.careers-process__step {
position: relative;
background: #fff;
padding: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 30px rgba(24, 60, 100, 0.06);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
z-index: 1;
}
.careers-process__step:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(192, 148, 94, 0.15);
border-color: var(--pink-300, #C0945E);
}
.careers-process__num {
position: absolute;
top: -14px; inset-inline-end: -14px;
width: 32px; height: 32px;
background: var(--gradient-pink-soft);
color: #fff;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-sm);
box-shadow: 0 6px 16px rgba(192, 148, 94, 0.40);
border: 3px solid #fff;
}
.careers-process__icon {
width: 56px; height: 56px;
margin: 0 auto var(--space-4);
background: linear-gradient(135deg, rgba(192, 148, 94, 0.12), rgba(217, 181, 126, 0.06));
color: var(--pink-500, #C0945E);
border-radius: 50%;
display: grid; place-items: center;
font-size: var(--text-lg);
transition: all var(--dur-base);
}
.careers-process__step:hover .careers-process__icon {
background: var(--gradient-pink-soft);
color: #fff;
transform: scale(1.08) rotate(-6deg);
}
.careers-process__step h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 700;
}
.careers-process__step p {
margin: 0;
font-size: var(--text-sm);
color: var(--navy-400);
line-height: var(--leading-relaxed);
}
/* Responsive */
@media (max-width: 1024px) {
.careers-process__list { grid-template-columns: repeat(2, 1fr); }
.careers-process__list::before { display: none; }
}
@media (max-width: 600px) {
.careers-process__list { grid-template-columns: 1fr; }
.careers-stats { grid-template-columns: repeat(3, 1fr); padding: 12px; gap: 6px; }
.careers-stats__num { font-size: var(--text-lg); }
.careers-process { padding: var(--space-12) 0; }
}
/* ════════════════════════════════════════════════════════════
ABOUT PAGE
════════════════════════════════════════════════════════════ */
/* HERO */
.about-hero {
position: relative;
padding: var(--space-10) 0 var(--space-16);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.about-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.about-hero__deco--blob1 {
top: -150px; inset-inline-start: -100px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.18), transparent 65%);
filter: blur(50px);
}
.about-hero__deco--blob2 {
bottom: -150px; inset-inline-end: -100px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.about-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24, 60, 100, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(24, 60, 100, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.about-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-hero__inner > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
.about-hero__inner .contact-crumb { margin-bottom: var(--space-8); }
.about-hero__title { width: 100% !important; max-width: 820px !important; }
.about-hero__lead { width: 100% !important; max-width: 700px !important; }
.about-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.08em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-5);
}
.about-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 700;
margin: 0 auto var(--space-5);
max-width: 820px;
color: var(--navy-700);
}
.about-hero__title-accent {
display: inline-block;
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.about-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
max-width: 700px;
margin: 0 auto var(--space-6);
line-height: var(--leading-relaxed);
}
.about-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
width: max-content;
max-width: 100%;
margin: 0 auto;
}
.about-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
color: var(--navy-600);
font-weight: 500;
box-shadow: 0 4px 14px rgba(24, 60, 100, 0.06);
}
.about-hero__badge i { color: var(--pink-500, #C0945E); font-size: 13px; }
/* PILLARS — Mission + Vision */
.about-pillars {
padding: var(--space-12) 0;
background: #fff;
}
.about-pillars__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.pillar-card {
position: relative;
padding: var(--space-8);
border-radius: 20px;
background: linear-gradient(180deg, #fff, #FFF9FC);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 12px 32px rgba(24, 60, 100, 0.06);
overflow: hidden;
transition: all var(--dur-base) var(--ease-out);
}
.pillar-card::before {
content: "";
position: absolute;
top: 0; inset-inline-start: 0;
width: 100%; height: 4px;
background: var(--gradient-pink-soft);
}
.pillar-card--vision {
background: linear-gradient(180deg, #fff, #F4F8FB);
}
.pillar-card--vision::before {
background: linear-gradient(90deg, var(--navy-700, #183C64), var(--navy-500, #3B6A8F));
}
.pillar-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(192, 148, 94, 0.15);
}
.pillar-card__icon {
display: inline-flex;
width: 64px; height: 64px;
border-radius: 18px;
background: var(--gradient-pink-soft);
color: #fff;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 10px 24px rgba(192, 148, 94, 0.35);
margin-bottom: var(--space-5);
}
.pillar-card--vision .pillar-card__icon {
background: linear-gradient(135deg, var(--navy-700, #183C64), var(--navy-500, #3B6A8F));
box-shadow: 0 10px 24px rgba(24, 60, 100, 0.30);
}
.pillar-card__eyebrow {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--pink-600, #DA32B4);
margin-bottom: 6px;
}
.pillar-card--vision .pillar-card__eyebrow { color: var(--navy-600); }
.pillar-card__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 700;
}
.pillar-card__desc {
color: var(--navy-500);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0;
}
/* SECTION HEAD shared */
.about-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-10);
}
.about-section-head__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
color: var(--navy-700);
margin: var(--space-3) 0;
font-weight: 700;
}
.about-section-head__desc {
color: var(--navy-400);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0;
}
/* VALUES */
.about-values {
padding: var(--space-16) 0;
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
.about-values__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.about-values__grid article.value-card { padding: 20px; }
.about-accred__grid article.accred-card { overflow: visible; }
.value-card {
background: #fff;
padding: var(--space-7) var(--space-5);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.05);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
position: relative;
}
.value-card::after {
content: "";
position: absolute;
bottom: 0; inset-inline-start: 50%;
width: 40%; height: 3px;
transform: translateX(50%) scaleX(0);
background: var(--gradient-pink-soft);
border-radius: 3px;
transition: transform var(--dur-base);
}
html[dir="rtl"] .value-card::after { transform: translateX(-50%) scaleX(0); }
.value-card:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.15);
}
.value-card:hover::after { transform: translateX(50%) scaleX(1); }
html[dir="rtl"] .value-card:hover::after { transform: translateX(-50%) scaleX(1); }
.value-card__icon {
display: inline-flex;
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(192, 148, 94, 0.10), rgba(217, 181, 126, 0.10));
color: var(--pink-500, #C0945E);
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: var(--space-4);
transition: all var(--dur-base);
}
.value-card:hover .value-card__icon {
background: var(--gradient-pink-soft);
color: #fff;
transform: scale(1.08) rotate(-6deg);
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.40);
}
.value-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 8px;
font-weight: 700;
}
.value-card__desc {
color: var(--navy-400);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0;
}
/* STATS STRIP */
.about-stats {
position: relative;
padding: var(--space-16) 0;
background: linear-gradient(135deg, #183C64 0%, #25557A 50%, #1A3D58 100%);
color: #fff;
overflow: hidden;
}
.about-stats__deco {
position: absolute;
top: 50%; left: 50%;
width: 800px; height: 800px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(192, 148, 94, 0.18), transparent 60%);
pointer-events: none;
}
.about-stats > .container { position: relative; }
.about-stats__head {
text-align: center;
margin-bottom: var(--space-10);
}
.about-stats__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.08em;
font-weight: 700;
color: var(--pink-300, #C0945E);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.about-stats__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
color: #fff;
margin: 0;
font-weight: 700;
}
.about-stats__grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-4);
}
.stat-tile {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-4);
text-align: center;
transition: all var(--dur-base);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.stat-tile:hover {
transform: translateY(-6px);
background: rgba(255, 255, 255, 0.10);
border-color: rgba(192, 148, 94, 0.50);
}
.stat-tile__icon {
display: inline-flex;
width: 52px; height: 52px;
border-radius: 14px;
background: var(--gradient-pink-soft);
color: #fff;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: var(--space-3);
box-shadow: 0 8px 18px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.stat-tile:hover .stat-tile__icon { transform: scale(1.08) rotate(-6deg); }
.stat-tile__value {
display: block;
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3.4vw, var(--text-3xl));
font-weight: 700;
background: linear-gradient(90deg, #FFFFFF, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1.1;
margin-bottom: 6px;
}
.stat-tile__label {
display: block;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.70);
}
/* ACCREDITATION */
.about-accred {
padding: var(--space-16) 0;
background: #fff;
}
.about-accred__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.accred-card {
display: flex;
gap: var(--space-4);
align-items: flex-start;
background: linear-gradient(180deg, #fff, #FFF9FC);
padding: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
transition: all var(--dur-base) var(--ease-out);
}
.accred-card:hover {
transform: translateY(-4px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.15);
}
.accred-card__icon {
display: inline-flex;
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 16px;
background: var(--gradient-pink-soft);
color: #fff;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.accred-card:hover .accred-card__icon { transform: scale(1.08) rotate(-6deg); }
.accred-card__title {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 700;
line-height: 1.3;
}
.accred-card__desc {
color: var(--navy-400);
font-size: var(--text-sm);
margin: 0;
line-height: var(--leading-relaxed);
}
/* ═══ CTA — Premium Editorial v2 ═══ */
.about-cta {
padding: var(--space-16) 0 var(--space-20);
background: linear-gradient(180deg, #FAF4F7 0%, #FFFFFF 100%);
position: relative;
}
.about-cta__inner {
position: relative;
background: #0B1F30;
background-image:
radial-gradient(at 20% 30%, rgba(24, 60, 100, 0.95) 0%, transparent 60%),
radial-gradient(at 80% 70%, rgba(34, 84, 117, 0.95) 0%, transparent 55%),
linear-gradient(135deg, #0B1F30 0%, #183C64 100%);
border-radius: 36px;
padding: clamp(var(--space-8), 5vw, var(--space-12)) clamp(var(--space-6), 5vw, var(--space-10));
text-align: center;
overflow: hidden;
box-shadow:
0 40px 80px -30px rgba(11, 31, 48, 0.40),
0 16px 36px -16px rgba(192, 148, 94, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
isolation: isolate;
}
/* Animated SVG blob background */
.about-cta__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.about-cta__blob {
position: absolute;
inset-inline-end: -80px;
bottom: -120px;
width: 600px; height: 600px;
opacity: 0.50;
filter: blur(40px);
}
.about-cta__dots {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
}
.about-cta__inner > *:not(.about-cta__bg) { position: relative; z-index: 1; }
/* Force content to stack vertically — prevents siblings collapsing inline */
.about-cta__content {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.about-cta__content > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
/* Floating top badge with avatars */
.about-cta__floating-badge {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px 8px 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--radius-full);
width: max-content;
max-width: 100%;
margin: 0 auto var(--space-6);
}
.about-cta__avatars {
display: inline-flex;
align-items: center;
}
.about-cta__avatar {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-grid;
place-items: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: #fff;
border: 2px solid #0B1F30;
margin-inline-start: -8px;
position: relative;
}
.about-cta__avatar:first-child { margin-inline-start: 0; }
.about-cta__avatar--more {
background: linear-gradient(135deg, #FFE4F4, #D9B57E) !important;
color: var(--navy-700) !important;
font-size: 10px;
}
.about-cta__floating-text { text-align: start; line-height: 1.25; }
.about-cta__floating-text strong {
display: block;
color: #fff;
font-size: var(--text-sm);
font-weight: 700;
}
.about-cta__floating-text em {
display: block;
font-style: normal;
color: rgba(255, 255, 255, 0.65);
font-size: var(--text-xs);
}
/* Eyebrow with side lines */
.about-cta__eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
font-size: var(--text-xs);
letter-spacing: 0.14em;
font-weight: 700;
color: var(--pink-300, #D9B57E);
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.about-cta__eyebrow-line {
display: inline-block;
width: 32px; height: 1px;
background: linear-gradient(90deg, transparent, var(--pink-400, #D9B57E));
}
.about-cta__eyebrow-line:last-child {
background: linear-gradient(90deg, var(--pink-400, #D9B57E), transparent);
}
.about-cta__eyebrow i { color: var(--pink-300, #C0945E); font-size: 14px; }
.about-cta__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4.5vw, 52px);
color: #fff;
margin: 0 auto var(--space-4);
font-weight: 700;
line-height: 1.1;
max-width: 700px;
}
.about-cta__title-stroke {
display: inline-block;
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
.about-cta__title-stroke::after {
content: "";
display: block;
height: 4px;
margin-top: 4px;
background: linear-gradient(90deg, transparent, var(--pink-400, #D9B57E), transparent);
border-radius: 2px;
animation: cta-underline-pulse 2.4s ease-in-out infinite;
}
@keyframes cta-underline-pulse {
0%, 100% { opacity: 0.4; transform: scaleX(0.6); }
50% { opacity: 1; transform: scaleX(1); }
}
.about-cta__desc {
color: rgba(255, 255, 255, 0.75);
font-size: var(--text-md);
margin: 0 auto var(--space-6);
line-height: var(--leading-relaxed);
max-width: 560px;
}
/* Feature pills */
.about-cta__features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 auto var(--space-7);
width: max-content;
max-width: 100%;
}
.about-cta__feature {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
padding: 8px 16px;
border-radius: var(--radius-full);
color: rgba(255, 255, 255, 0.85);
font-size: var(--text-sm);
font-weight: 500;
}
.about-cta__feature i {
width: 16px; height: 16px;
background: linear-gradient(135deg, #22C55E, #15803D);
border-radius: 50%;
color: #fff;
display: inline-grid;
place-items: center;
font-size: 9px;
font-weight: 900;
}
/* Action buttons - custom premium style */
.about-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
width: max-content;
max-width: 100%;
margin: 50px auto 0;
}
.btn-cta {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: all 350ms var(--ease-out);
white-space: nowrap;
}
.btn-cta--primary {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
padding-inline-end: 6px;
box-shadow:
0 12px 28px rgba(192, 148, 94, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-cta--primary:hover {
transform: translateY(-3px);
box-shadow:
0 16px 38px rgba(192, 148, 94, 0.60),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-cta__label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 6px;
}
.btn-cta__arrow {
width: 36px; height: 36px;
display: inline-grid;
place-items: center;
background: rgba(255, 255, 255, 0.22);
border-radius: 50%;
font-size: 12px;
transition: all var(--dur-base);
}
.btn-cta--primary:hover .btn-cta__arrow {
transform: translateX(6px);
background: rgba(255, 255, 255, 0.30);
}
html[dir="rtl"] .btn-cta--primary:hover .btn-cta__arrow { transform: translateX(-6px); }
.btn-cta--ghost {
background: rgba(255, 255, 255, 0.08);
border: 1.5px solid rgba(255, 255, 255, 0.20);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.btn-cta--ghost:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.40);
transform: translateY(-3px);
}
/* Decorative corner stars */
.about-cta__corner {
position: absolute;
font-family: var(--font-display);
color: rgba(192, 148, 94, 0.40);
font-size: 32px;
z-index: 0;
animation: corner-twinkle 3s ease-in-out infinite;
}
.about-cta__corner--tl { top: 24px; inset-inline-start: 32px; }
.about-cta__corner--br { bottom: 24px; inset-inline-end: 32px; animation-delay: 1.2s; }
@keyframes corner-twinkle {
0%, 100% { opacity: 0.20; transform: scale(0.85) rotate(0); }
50% { opacity: 0.70; transform: scale(1.10) rotate(180deg); }
}
/* Responsive */
@media (max-width: 768px) {
.about-cta__inner { padding: var(--space-8) var(--space-5); border-radius: 24px; }
.about-cta__title { font-size: clamp(var(--text-xl), 6vw, var(--text-3xl)); }
.about-cta__floating-badge { padding: 6px 14px 6px 6px; }
.about-cta__avatar { width: 26px; height: 26px; font-size: 11px; }
.about-cta__corner { font-size: 24px; }
.btn-cta { padding: 12px 18px; }
.btn-cta--primary { padding-inline-end: 6px; }
.btn-cta__arrow { width: 30px; height: 30px; }
}
/* Responsive */
@media (max-width: 1024px) {
.about-pillars__grid { grid-template-columns: 1fr; }
.about-values__grid { grid-template-columns: repeat(2, 1fr); }
.about-stats__grid { grid-template-columns: repeat(3, 1fr); }
.about-accred__grid { grid-template-columns: 1fr; }
.about-cta__inner { grid-template-columns: 1fr; text-align: center; }
.about-cta__actions { justify-content: center; }
}
@media (max-width: 600px) {
.about-hero { padding: var(--space-8) 0 var(--space-12); }
.about-values__grid { grid-template-columns: 1fr; }
.about-stats__grid { grid-template-columns: repeat(2, 1fr); }
.pillar-card, .about-cta__inner { padding: var(--space-6); }
}
/* ════════════════════════════════════════════════════════════
ABOUT PAGE — PROFESSIONAL ENHANCEMENTS & ANIMATIONS
════════════════════════════════════════════════════════════ */
/* HERO floating decoration shapes */
.about-hero__float {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.about-hero__float--1 {
top: 15%; inset-inline-start: 8%;
width: 60px; height: 60px;
animation: float-up 6s ease-in-out infinite, slow-spin 30s linear infinite;
}
.about-hero__float--2 {
top: 25%; inset-inline-end: 12%;
width: 40px; height: 40px;
animation: float-down 7s ease-in-out infinite, slow-spin-rev 40s linear infinite;
}
.about-hero__float--3 {
bottom: 18%; inset-inline-start: 14%;
width: 50px; height: 50px;
animation: float-up 8s ease-in-out infinite 2s, slow-spin 50s linear infinite;
}
@keyframes float-up {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes float-down {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(20px) rotate(-180deg); }
}
@keyframes slow-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes slow-spin-rev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* HERO eyebrow with pulse dot */
.about-hero__eyebrow { position: relative; }
.about-hero__eyebrow-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--pink-500, #C0945E);
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.20);
animation: pulse-eye 1.8s ease-in-out infinite;
}
@keyframes pulse-eye {
0%, 100% { box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.20); }
50% { box-shadow: 0 0 0 8px rgba(192, 148, 94, 0.05); }
}
/* HERO title shimmer */
.about-hero__title-line { display: block; }
.about-hero__title-accent {
display: inline-block;
position: relative;
}
.about-hero__title-shimmer {
background: linear-gradient(90deg, #C0945E 0%, #D9B57E 30%, #FFE4F4 50%, #D9B57E 70%, #C0945E 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
/* HERO scroll indicator */
.about-hero__scroll {
position: absolute;
bottom: -10px; left: 50%;
transform: translateX(-50%);
width: 28px; height: 46px;
border: 2px solid rgba(24, 60, 100, 0.30);
border-radius: 14px;
display: block;
z-index: 5;
}
.about-hero__scroll span {
position: absolute;
top: 8px; left: 50%;
width: 4px; height: 8px;
background: var(--pink-500, #C0945E);
border-radius: 2px;
transform: translateX(-50%);
animation: scroll-down 1.8s ease-in-out infinite;
}
@keyframes scroll-down {
0% { transform: translate(-50%, 0); opacity: 1; }
60% { transform: translate(-50%, 14px); opacity: 0; }
100% { transform: translate(-50%, 0); opacity: 1; }
}
/* HERO badges - subtle float */
.about-hero__badge {
transition: all var(--dur-base);
}
.about-hero__badge:hover {
transform: translateY(-3px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.20);
}
/* PILLARS — animated glow effect */
.pillar-card { isolation: isolate; }
.pillar-card__glow {
position: absolute;
inset: 0;
background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 148, 94, 0.10), transparent 40%);
opacity: 0;
transition: opacity var(--dur-base);
pointer-events: none;
}
.pillar-card:hover .pillar-card__glow { opacity: 1; }
.pillar-card--vision .pillar-card__glow {
background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(24, 60, 100, 0.10), transparent 40%);
}
.pillar-card__icon {
animation: pillar-icon-bob 4s ease-in-out infinite;
}
@keyframes pillar-icon-bob {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-6px) rotate(-3deg); }
}
.pillar-card:hover .pillar-card__icon {
animation: none;
transform: scale(1.10) rotate(-8deg);
transition: transform var(--dur-base) var(--ease-out);
}
/* VALUES — number badge */
.value-card { position: relative; isolation: isolate; }
.value-card__num {
position: absolute;
top: 10px; inset-inline-start: 14px;
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
color: var(--pink-100, #FFF1FA);
line-height: 1;
z-index: 0;
transition: color var(--dur-base);
}
.value-card:hover .value-card__num { color: var(--pink-200, #FBD0EC); }
.value-card > * { position: relative; z-index: 1; }
/* STATS — pattern overlay */
.about-stats__pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 30px 30px;
pointer-events: none;
opacity: 0.6;
}
.about-stats > .container { z-index: 1; }
.stat-tile { position: relative; overflow: hidden; }
.stat-tile::before {
content: "";
position: absolute;
top: 0; inset-inline-start: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, transparent 40%, rgba(192, 148, 94, 0.15) 100%);
opacity: 0;
transition: opacity var(--dur-base);
}
.stat-tile:hover::before { opacity: 1; }
.stat-tile__suffix {
background: linear-gradient(90deg, #FFFFFF, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat-tile__icon {
animation: bob-icon 4s ease-in-out infinite;
}
@keyframes bob-icon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.stat-tile:hover .stat-tile__icon {
animation: none;
transform: scale(1.12) rotate(-8deg);
}
/* TIMELINE */
.about-timeline {
padding: var(--space-16) 0;
background: linear-gradient(180deg, #FAF4F7 0%, #FFFFFF 100%);
position: relative;
overflow: hidden;
}
.about-timeline::before {
content: "";
position: absolute;
top: 30%; inset-inline-end: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.10), transparent 60%);
filter: blur(40px);
pointer-events: none;
}
.timeline {
list-style: none;
margin: 0; padding: 0;
position: relative;
max-width: 880px;
margin-inline: auto;
}
.timeline::before {
content: "";
position: absolute;
top: 0; bottom: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
width: 3px;
background: linear-gradient(180deg,
transparent 0%,
var(--pink-300, #C0945E) 8%,
var(--pink-300, #C0945E) 92%,
transparent 100%);
opacity: 0.4;
border-radius: 3px;
}
.timeline__item {
position: relative;
display: grid;
grid-template-columns: 1fr 60px 1fr;
gap: 0;
align-items: center;
margin-bottom: var(--space-6);
}
.timeline__item:last-child { margin-bottom: 0; }
.timeline__marker {
grid-column: 2;
display: grid;
place-items: center;
width: 60px; height: 60px;
position: relative;
}
.timeline__marker-ring {
position: absolute;
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(192, 148, 94, 0.12);
animation: marker-ring 2.5s ease-out infinite;
}
@keyframes marker-ring {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.20); opacity: 0; }
}
.timeline__marker-dot {
position: relative;
width: 18px; height: 18px;
background: var(--gradient-pink-soft);
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 4px 14px rgba(192, 148, 94, 0.45);
}
.timeline__card {
grid-column: 1;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
border-radius: var(--radius-lg);
padding: var(--space-5) var(--space-6);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
position: relative;
transition: all var(--dur-base) var(--ease-out);
}
.timeline__item:nth-child(even) .timeline__card { grid-column: 3; }
.timeline__card::before {
content: "";
position: absolute;
top: 50%; transform: translateY(-50%);
inset-inline-end: -10px;
width: 0; height: 0;
border-block: 10px solid transparent;
border-inline-start: 10px solid #fff;
filter: drop-shadow(2px 0 4px rgba(24, 60, 100, 0.05));
}
.timeline__item:nth-child(even) .timeline__card::before {
inset-inline-end: auto;
inset-inline-start: -10px;
border-inline-start: 0;
border-inline-end: 10px solid #fff;
filter: drop-shadow(-2px 0 4px rgba(24, 60, 100, 0.05));
}
.timeline__card:hover {
transform: translateY(-4px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.15);
}
.timeline__card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: 6px;
}
.timeline__year {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
background: var(--gradient-pink-soft);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.timeline__icon {
width: 38px; height: 38px;
background: linear-gradient(135deg, rgba(192, 148, 94, 0.10), rgba(217, 181, 126, 0.10));
color: var(--pink-500, #C0945E);
border-radius: 10px;
display: grid; place-items: center;
font-size: 15px;
}
.timeline__card:hover .timeline__icon {
background: var(--gradient-pink-soft);
color: #fff;
transform: scale(1.10) rotate(-6deg);
transition: all var(--dur-base);
}
.timeline__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 700;
}
.timeline__desc {
margin: 0;
font-size: var(--text-sm);
color: var(--navy-500);
line-height: var(--leading-relaxed);
}
/* ACCREDITATION — animated seal */
.accred-card { position: relative; }
.accred-card__seal {
position: absolute;
top: -10px; inset-inline-end: -10px;
width: 32px; height: 32px;
background: linear-gradient(135deg, #22C55E, #15803D);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 700;
border: 3px solid #fff;
box-shadow: 0 6px 14px rgba(34, 197, 94, 0.40);
transform: scale(0) rotate(-180deg);
opacity: 0;
transition: all 500ms var(--ease-out);
}
.accred-card.aos-animate .accred-card__seal,
.accred-card:hover .accred-card__seal {
transform: scale(1) rotate(0);
opacity: 1;
}
/* CTA — mesh gradient animation + arrow slide */
.about-cta__mesh {
position: absolute;
inset: -50%;
background:
radial-gradient(at 20% 30%, rgba(192, 148, 94, 0.30) 0%, transparent 50%),
radial-gradient(at 80% 20%, rgba(217, 181, 126, 0.25) 0%, transparent 45%),
radial-gradient(at 50% 80%, rgba(24, 60, 100, 0.40) 0%, transparent 55%);
animation: mesh-rotate 20s linear infinite;
pointer-events: none;
filter: blur(20px);
}
@keyframes mesh-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.about-cta__inner > * { position: relative; z-index: 1; }
.btn-arrow {
display: inline-flex;
margin-inline-start: 4px;
transition: transform var(--dur-base);
}
.about-cta__actions .btn:hover .btn-arrow {
transform: translateX(6px);
}
html[dir="rtl"] .about-cta__actions .btn:hover .btn-arrow {
transform: translateX(-6px);
}
/* Section reveal — refined transitions */
[data-aos="fade-up"] { transform: translateY(40px); }
[data-aos="zoom-in"] { transform: scale(0.92); }
[data-aos] { transition-duration: 700ms; }
/* TIMELINE responsive */
@media (max-width: 768px) {
.timeline::before {
inset-inline-start: 20px;
transform: none;
}
.timeline__item {
grid-template-columns: 40px 1fr;
gap: var(--space-3);
}
.timeline__marker {
grid-column: 1;
width: 40px; height: 40px;
}
.timeline__marker-ring { width: 36px; height: 36px; }
.timeline__marker-dot { width: 14px; height: 14px; }
.timeline__card,
.timeline__item:nth-child(even) .timeline__card {
grid-column: 2;
}
.timeline__card::before,
.timeline__item:nth-child(even) .timeline__card::before {
inset-inline-start: -10px;
inset-inline-end: auto;
border-inline-start: 0;
border-inline-end: 10px solid #fff;
}
}
/* ════════════════════════════════════════════════════════════
GALLERY PAGE — Masonry + Filters + Lightbox
════════════════════════════════════════════════════════════ */
/* HERO */
.gallery-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.gallery-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.gallery-hero__deco--blob1 {
top: -140px; inset-inline-end: -80px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.20), transparent 60%);
filter: blur(50px);
}
.gallery-hero__deco--blob2 {
bottom: -120px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.gallery-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.gallery-hero__polaroid {
position: absolute;
width: 100px; height: 110px;
background: #fff;
border-radius: 6px;
box-shadow: 0 18px 38px rgba(24, 60, 100, 0.15), 0 4px 10px rgba(24, 60, 100, 0.08);
display: grid; place-items: center;
color: var(--pink-400, #D9B57E);
font-size: 28px;
z-index: 1;
padding-bottom: 12px;
}
.gallery-hero__polaroid::after {
content: "";
position: absolute;
inset: 8px 8px 22px;
background: linear-gradient(135deg, #FCE3F2, #F5DCF0);
border-radius: 3px;
z-index: -1;
}
.gallery-hero__polaroid--1 {
top: 12%; inset-inline-start: 8%;
transform: rotate(-8deg);
animation: polaroid-float 6s ease-in-out infinite;
}
.gallery-hero__polaroid--2 {
top: 22%; inset-inline-end: 10%;
transform: rotate(7deg);
animation: polaroid-float 7s ease-in-out infinite 1s;
}
.gallery-hero__polaroid--3 {
bottom: 16%; inset-inline-start: 14%;
transform: rotate(5deg);
animation: polaroid-float 8s ease-in-out infinite 2s;
}
@keyframes polaroid-float {
0%, 100% { transform: translateY(0) rotate(var(--r, -8deg)); }
50% { transform: translateY(-12px) rotate(calc(var(--r, -8deg) + 4deg)); }
}
.gallery-hero__polaroid--1 { --r: -8deg; }
.gallery-hero__polaroid--2 { --r: 7deg; }
.gallery-hero__polaroid--3 { --r: 5deg; }
.gallery-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.gallery-hero__inner > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
.gallery-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.gallery-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.gallery-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 700;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 760px !important;
}
.gallery-hero__title-accent {
display: inline-block;
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gallery-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 660px !important;
}
.gallery-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.gallery-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.gallery-hero__stat i {
color: var(--pink-500, #C0945E);
font-size: 14px;
}
.gallery-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 700;
line-height: 1;
}
.gallery-hero__stat span {
font-size: var(--text-xs);
color: var(--navy-400);
letter-spacing: 0.04em;
}
.gallery-hero__stat-tag { font-size: 0.6em; color: var(--navy-400); }
/* FILTERS */
.gallery-filters {
padding: var(--space-4) 0 var(--space-8);
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid rgba(24, 60, 100, 0.06);
}
.gallery-filters__bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
padding-top: var(--space-2);
}
.gallery-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: #fff;
border: 1.5px solid rgba(24, 60, 100, 0.10);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-600);
cursor: pointer;
transition: all var(--dur-base) var(--ease-out);
font-family: var(--font-body);
}
.gallery-chip i { color: var(--pink-500, #C0945E); font-size: 13px; }
.gallery-chip__count {
display: inline-grid;
place-items: center;
min-width: 22px; height: 22px;
padding: 0 6px;
background: rgba(24, 60, 100, 0.06);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
color: var(--navy-500);
transition: all var(--dur-base);
}
.gallery-chip:hover {
border-color: var(--pink-300, #C0945E);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.15);
}
.gallery-chip.is-active {
background: linear-gradient(135deg, #C0945E, #D9B57E);
border-color: transparent;
color: #fff;
box-shadow: 0 10px 22px rgba(192, 148, 94, 0.35);
}
.gallery-chip.is-active i { color: #fff; }
.gallery-chip.is-active .gallery-chip__count {
background: rgba(255, 255, 255, 0.25);
color: #fff;
}
/* MASONRY GRID */
.gallery-masonry-wrap {
padding: var(--space-8) 0 var(--space-16);
background: #fff;
}
.gallery-masonry {
column-count: 4;
column-gap: 16px;
}
@media (max-width: 1024px) { .gallery-masonry { column-count: 3; } }
@media (max-width: 768px) { .gallery-masonry { column-count: 2; } }
@media (max-width: 480px) { .gallery-masonry { column-count: 1; } }
.gallery-tile {
position: relative;
display: block;
break-inside: avoid;
margin-bottom: 16px;
border-radius: 14px;
overflow: hidden;
cursor: zoom-in;
box-shadow: 0 6px 22px rgba(24, 60, 100, 0.08);
transition: all 400ms var(--ease-out);
transform: translateZ(0);
}
.gallery-tile.is-hidden { display: none; }
.gallery-tile:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 18px 40px rgba(192, 148, 94, 0.20);
}
.gallery-tile__media {
display: block;
position: relative;
}
.gallery-tile__media img {
width: 100%;
height: auto;
display: block;
transition: transform 500ms var(--ease-out);
}
.gallery-tile:hover .gallery-tile__media img { transform: scale(1.06); }
.gallery-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(11, 31, 48, 0.85) 100%);
opacity: 0;
transition: opacity 300ms var(--ease-out);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 14px;
pointer-events: none;
}
.gallery-tile:hover .gallery-tile__overlay { opacity: 1; }
.gallery-tile__badge {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.30);
color: #fff;
font-size: var(--text-xs);
padding: 5px 11px;
border-radius: var(--radius-full);
font-weight: 600;
}
.gallery-tile__zoom {
align-self: flex-end;
width: 44px; height: 44px;
display: inline-grid;
place-items: center;
background: var(--gradient-pink-soft);
color: #fff;
border-radius: 50%;
box-shadow: 0 8px 18px rgba(192, 148, 94, 0.45);
transform: scale(0.6);
transition: transform 300ms var(--ease-out);
font-size: 16px;
}
.gallery-tile:hover .gallery-tile__zoom { transform: scale(1) rotate(8deg); }
.gallery-tile__caption {
display: block;
color: #fff;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.4;
transform: translateY(10px);
opacity: 0;
transition: all 300ms 100ms var(--ease-out);
}
.gallery-tile:hover .gallery-tile__caption { transform: translateY(0); opacity: 1; }
/* Empty state */
.gallery-empty {
text-align: center;
padding: var(--space-12) var(--space-6);
background: linear-gradient(180deg, rgba(192, 148, 94, 0.04), transparent);
border-radius: var(--radius-lg);
border: 1px dashed rgba(192, 148, 94, 0.25);
}
.gallery-empty i {
font-size: 56px;
color: var(--pink-300, #C0945E);
opacity: 0.4;
margin-bottom: var(--space-3);
}
.gallery-empty h3 {
font-family: var(--font-display);
margin: 0 0 6px;
color: var(--navy-700);
}
.gallery-empty p {
margin: 0;
color: var(--navy-400);
font-size: var(--text-sm);
}
/* CTA compact */
.gallery-cta {
padding: var(--space-8) 0 var(--space-16);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
.gallery-cta__inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-5);
align-items: center;
background: linear-gradient(135deg, #0B1F30 0%, #183C64 100%);
padding: var(--space-7);
border-radius: 24px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 30px 60px -20px rgba(24, 60, 100, 0.30);
}
.gallery-cta__inner::before {
content: "";
position: absolute;
bottom: -60px; inset-inline-end: -60px;
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.35), transparent 65%);
pointer-events: none;
}
.gallery-cta__inner > * { position: relative; z-index: 1; }
.gallery-cta__icon {
width: 64px; height: 64px;
background: var(--gradient-pink-soft);
color: #fff;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 26px;
box-shadow: 0 10px 22px rgba(192, 148, 94, 0.40);
}
.gallery-cta__body h2 {
font-family: var(--font-display);
font-size: var(--text-xl);
margin: 0 0 4px;
color: #fff;
font-weight: 700;
}
.gallery-cta__body p {
margin: 0;
color: rgba(255, 255, 255, 0.70);
font-size: var(--text-sm);
}
/* LIGHTBOX */
.lamar-lightbox {
position: fixed;
inset: 0;
background: rgba(8, 16, 26, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 300ms ease-out;
}
.lamar-lightbox[hidden] { display: none; }
.lamar-lightbox.is-open { opacity: 1; }
.lamar-lightbox__figure {
margin: 0;
max-width: 92vw;
max-height: 84vh;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
animation: lightbox-zoom 400ms var(--ease-out);
}
@keyframes lightbox-zoom {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lamar-lightbox__img {
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
border-radius: 12px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
display: block;
}
.lamar-lightbox__caption {
margin-top: 14px;
color: rgba(255, 255, 255, 0.9);
font-size: var(--text-md);
text-align: center;
font-weight: 500;
}
.lamar-lightbox__close,
.lamar-lightbox__nav {
position: absolute;
width: 48px; height: 48px;
border-radius: 50%;
border: 0;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 18px;
cursor: pointer;
display: grid;
place-items: center;
transition: all var(--dur-base);
}
.lamar-lightbox__close:hover,
.lamar-lightbox__nav:hover {
background: var(--gradient-pink-soft);
transform: scale(1.1);
}
.lamar-lightbox__close {
top: 20px; inset-inline-end: 20px;
}
.lamar-lightbox__nav { top: 50%; transform: translateY(-50%); }
.lamar-lightbox__nav:hover { transform: translateY(-50%) scale(1.1); }
.lamar-lightbox__nav--prev { inset-inline-end: 20px; }
.lamar-lightbox__nav--next { inset-inline-start: 20px; }
.lamar-lightbox__counter {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.10);
color: #fff;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.04em;
}
@media (max-width: 600px) {
.gallery-hero__polaroid { display: none; }
.gallery-hero__stats { width: 100%; }
.gallery-cta__inner { grid-template-columns: 1fr; text-align: center; }
.gallery-cta__icon { margin: 0 auto; }
.lamar-lightbox__close { top: 14px; inset-inline-end: 14px; }
.lamar-lightbox__nav { width: 40px; height: 40px; font-size: 15px; }
}
/* ════════════════════════════════════════════════════════════
NUMBER RENDERING — Force Latin digits at full size
(Apply on any element that displays numbers/counters)
════════════════════════════════════════════════════════════ */
.lamar-counter,
.stat-card__number,
.stat-tile__value,
.stat-tile__value .stat-tile__suffix,
.gallery-hero__stat strong,
.videos-hero__stat strong,
.videos-cta__stat strong,
.careers-stats__num,
.timeline__year,
.about-stats__title .lamar-counter,
.about-hero__stat-tag {
font-feature-settings: 'lnum' 1, 'tnum' 1;
font-variant-numeric: lining-nums tabular-nums;
direction: ltr;
unicode-bidi: isolate;
display: inline-block;
}
/* ════════════════════════════════════════════════════════════
VIDEOS PAGE — Library + Featured + In-place Player
════════════════════════════════════════════════════════════ */
/* HERO — reuses gallery hero patterns but with video flavor */
.videos-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.videos-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.videos-hero__deco--blob1 {
top: -140px; inset-inline-end: -80px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.22), transparent 60%);
filter: blur(50px);
}
.videos-hero__deco--blob2 {
bottom: -120px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.videos-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.videos-hero__bubble {
position: absolute;
width: 64px; height: 64px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
display: grid; place-items: center;
font-size: 22px;
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.40);
z-index: 1;
}
.videos-hero__bubble--1 {
top: 18%; inset-inline-start: 10%;
animation: bubble-float 6s ease-in-out infinite;
}
.videos-hero__bubble--2 {
top: 24%; inset-inline-end: 12%;
width: 56px; height: 56px;
font-size: 18px;
animation: bubble-float 7s ease-in-out infinite 1s;
background: linear-gradient(135deg, #183C64, #25557A);
box-shadow: 0 16px 38px rgba(24, 60, 100, 0.30);
}
.videos-hero__bubble--3 {
bottom: 14%; inset-inline-start: 14%;
width: 50px; height: 50px;
font-size: 16px;
animation: bubble-float 8s ease-in-out infinite 2s;
background: linear-gradient(135deg, #D9B57E, #C0945E);
}
@keyframes bubble-float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-16px) scale(1.06); }
}
.videos-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.videos-hero__inner > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
.videos-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.videos-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.videos-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 700;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 760px !important;
}
.videos-hero__title-accent {
display: inline-block;
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.videos-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 660px !important;
}
.videos-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.videos-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.videos-hero__stat i { color: var(--pink-500, #C0945E); font-size: 14px; }
.videos-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 700;
line-height: 1;
}
.videos-hero__stat span {
font-size: var(--text-xs);
color: var(--navy-400);
letter-spacing: 0.04em;
}
/* FEATURED VIDEO */
.videos-featured {
padding: var(--space-8) 0 var(--space-12);
background: #fff;
}
.videos-featured__head {
text-align: center;
margin-bottom: var(--space-7);
}
.videos-featured__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
color: var(--navy-700);
font-weight: 700;
margin: var(--space-3) 0 0;
}
.video-feature {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-7);
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border-radius: 28px;
padding: var(--space-6);
border: 1px solid rgba(192, 148, 94, 0.12);
box-shadow: 0 30px 70px -20px rgba(24, 60, 100, 0.15);
overflow: hidden;
align-items: center;
}
.video-feature__player {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
background: #0B1F30;
cursor: pointer;
box-shadow: 0 20px 40px rgba(24, 60, 100, 0.20);
}
.video-feature__player img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out), filter var(--dur-base);
}
.video-feature__player:hover img { transform: scale(1.04); filter: brightness(0.85); }
.video-feature__player iframe {
width: 100%; height: 100%;
border: 0;
display: block;
}
.video-feature__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 84px; height: 84px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
border: 0;
display: grid;
place-items: center;
font-size: 24px;
cursor: pointer;
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.50);
z-index: 2;
padding-inline-start: 4px;
transition: transform var(--dur-base);
}
.video-feature__play:hover { transform: translate(-50%, -50%) scale(1.10); }
.video-feature__play-ring {
position: absolute;
inset: -8px;
border-radius: 50%;
background: rgba(192, 148, 94, 0.40);
animation: play-ring-pulse 2s ease-out infinite;
z-index: -1;
}
@keyframes play-ring-pulse {
0% { transform: scale(0.85); opacity: 0.6; }
100% { transform: scale(1.35); opacity: 0; }
}
.video-feature__duration {
position: absolute;
bottom: 14px; inset-inline-end: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: var(--text-xs);
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-full);
}
.video-feature__info { padding: var(--space-4) var(--space-3); }
.video-feature__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(192, 148, 94, 0.12);
color: var(--pink-600, #DA32B4);
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
margin-bottom: var(--space-3);
}
.video-feature__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 700;
line-height: 1.25;
}
.video-feature__desc {
color: var(--navy-500);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
}
.video-feature__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
font-size: var(--text-sm);
color: var(--navy-400);
}
.video-feature__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.video-feature__meta i { color: var(--pink-500, #C0945E); }
.video-feature__meta .fa-youtube { color: #FF0000; }
/* FILTERS (reuse gallery chips) */
.videos-filters {
padding: var(--space-4) 0 var(--space-8);
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid rgba(24, 60, 100, 0.06);
}
/* GRID */
.videos-grid-wrap {
padding: 0 0 var(--space-12);
background: #fff;
}
.videos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
@media (max-width: 1024px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .videos-grid { grid-template-columns: 1fr; } }
.vcard {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
transition: all var(--dur-base) var(--ease-out);
display: flex;
flex-direction: column;
}
.vcard.is-hidden { display: none; }
.vcard:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 18px 40px rgba(192, 148, 94, 0.18);
}
.vcard__thumb {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #0B1F30;
cursor: pointer;
}
.vcard__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out), filter var(--dur-base);
}
.vcard:hover .vcard__thumb img { transform: scale(1.06); filter: brightness(0.8); }
.vcard__thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.vcard__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.85);
width: 62px; height: 62px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
border: 0;
display: grid;
place-items: center;
font-size: 18px;
cursor: pointer;
box-shadow: 0 10px 28px rgba(192, 148, 94, 0.45);
padding-inline-start: 3px;
opacity: 0.92;
transition: all var(--dur-base) var(--ease-out);
z-index: 2;
}
.vcard:hover .vcard__play {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.vcard__play:hover {
transform: translate(-50%, -50%) scale(1.10) !important;
}
.vcard__play-ring {
position: absolute;
inset: -6px;
border-radius: 50%;
background: rgba(192, 148, 94, 0.40);
animation: play-ring-pulse 2s ease-out infinite;
z-index: -1;
}
.vcard__duration,
.vcard__cat-badge {
position: absolute;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 5px 10px;
border-radius: var(--radius-full);
z-index: 1;
}
.vcard__duration {
bottom: 10px; inset-inline-end: 10px;
background: rgba(0, 0, 0, 0.70);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
}
.vcard__cat-badge {
top: 10px; inset-inline-start: 10px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--pink-600, #DA32B4);
}
.vcard__cat-badge i { font-size: 9px; }
.vcard__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.vcard__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 var(--space-2);
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.vcard__desc {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.vcard__meta {
display: flex;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--navy-400);
padding-top: var(--space-3);
border-top: 1px solid rgba(24, 60, 100, 0.06);
}
.vcard__meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.vcard__meta i { color: var(--pink-500, #C0945E); }
.vcard__meta .fa-youtube { color: #FF0000; }
/* ═══ Videos CTA — Premium YouTube Channel Card v2 ═══ */
.videos-cta {
padding: var(--space-10) 0 var(--space-20);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
.videos-cta__inner {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: var(--space-10);
align-items: center;
background: linear-gradient(135deg, #0A0A12 0%, #18121C 50%, #2B0E22 100%);
padding: clamp(var(--space-8), 4vw, var(--space-12));
border-radius: 36px;
color: #fff;
overflow: hidden;
box-shadow:
0 40px 80px -30px rgba(11, 11, 18, 0.50),
0 16px 36px -16px rgba(255, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
isolation: isolate;
}
/* Background layers */
.videos-cta__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.videos-cta__bg-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: 48px 48px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
}
.videos-cta__bg-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
.videos-cta__bg-blob--1 {
top: -120px; inset-inline-end: -120px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(255, 0, 0, 0.35), transparent 60%);
}
.videos-cta__bg-blob--2 {
bottom: -150px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.28), transparent 60%);
}
.videos-cta__inner > *:not(.videos-cta__bg) { position: relative; z-index: 1; }
/* Content (left) */
.videos-cta__content { display: flex; flex-direction: column; gap: var(--space-5); }
.videos-cta__live {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 0, 0, 0.15);
border: 1px solid rgba(255, 0, 0, 0.30);
color: #FF4D4D;
font-size: var(--text-xs);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 700;
padding: 6px 14px;
border-radius: var(--radius-full);
width: max-content;
}
.videos-cta__live-dot {
width: 8px; height: 8px;
background: #FF0000;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.25);
animation: pulse-eye 1.5s ease-in-out infinite;
}
/* Channel identity row */
.videos-cta__channel {
display: flex;
align-items: center;
gap: var(--space-4);
}
.videos-cta__channel-logo {
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, #FF0000, #CC0000);
color: #fff;
display: grid;
place-items: center;
font-size: 30px;
box-shadow: 0 14px 32px rgba(255, 0, 0, 0.50);
position: relative;
flex-shrink: 0;
}
.videos-cta__channel-logo::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(255, 0, 0, 0.40);
animation: yt-pulse 2.4s ease-out infinite;
}
@keyframes yt-pulse {
0% { transform: scale(0.95); opacity: 0.7; }
100% { transform: scale(1.20); opacity: 0; }
}
.videos-cta__channel-name {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
margin: 0;
color: #fff;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
line-height: 1.2;
}
.videos-cta__verified {
color: #3EA6FF;
font-size: 0.6em;
background: #fff;
border-radius: 50%;
}
.videos-cta__channel-handle {
display: block;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.02em;
}
.videos-cta__pitch {
color: rgba(255, 255, 255, 0.75);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0;
max-width: 520px;
}
/* Stats row */
.videos-cta__stats {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
width: max-content;
max-width: 100%;
}
.videos-cta__stat strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 700;
background: linear-gradient(90deg, #FFFFFF, #FF7A7A);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.videos-cta__stat span {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.60);
margin-top: 4px;
}
.videos-cta__stat-sep {
width: 1px;
height: 36px;
background: rgba(255, 255, 255, 0.10);
}
/* Action buttons */
.videos-cta__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
/* YouTube-style subscribe button */
.yt-subscribe {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: linear-gradient(135deg, #FF0000, #CC0000);
color: #fff;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
box-shadow:
0 14px 28px rgba(255, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: all 350ms var(--ease-out);
position: relative;
overflow: hidden;
}
.yt-subscribe::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
transform: translateX(-100%);
transition: transform 700ms var(--ease-out);
}
.yt-subscribe:hover {
transform: translateY(-3px);
box-shadow:
0 18px 38px rgba(255, 0, 0, 0.60),
inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.yt-subscribe:hover::before { transform: translateX(100%); }
.yt-subscribe i { font-size: 18px; }
/* Bell notification toggle */
.yt-bell {
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1.5px solid rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 16px;
cursor: pointer;
display: grid;
place-items: center;
transition: all var(--dur-base);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.yt-bell:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.40);
transform: translateY(-3px);
}
.yt-bell:hover i {
animation: bell-shake 0.6s ease-in-out;
transform-origin: top center;
}
@keyframes bell-shake {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-15deg); }
40% { transform: rotate(12deg); }
60% { transform: rotate(-8deg); }
80% { transform: rotate(5deg); }
}
/* Share / external link button */
.yt-share {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
background: rgba(255, 255, 255, 0.06);
border: 1.5px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-full);
color: #fff;
text-decoration: none;
font-size: var(--text-sm);
font-weight: 600;
transition: all var(--dur-base);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.yt-share:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.40);
transform: translateY(-3px);
}
.yt-share i { font-size: 13px; transition: transform var(--dur-base); }
.yt-share:hover i { transform: translate(2px, -2px); }
/* RIGHT: YouTube Browser Mockup */
.videos-cta__device {
display: flex;
align-items: center;
justify-content: center;
position: relative;
perspective: 1200px;
}
.yt-mockup {
position: relative;
width: 100%;
max-width: 460px;
border-radius: 16px;
overflow: hidden;
background: #0F0F0F;
box-shadow:
0 30px 60px -20px rgba(0, 0, 0, 0.55),
0 10px 28px -10px rgba(255, 0, 0, 0.25);
transform: rotateY(-6deg) rotateX(3deg);
transition: transform 400ms var(--ease-out);
animation: mockup-float 6s ease-in-out infinite;
}
.yt-mockup:hover {
transform: rotateY(-2deg) rotateX(1deg) translateY(-4px);
animation: none;
}
@keyframes mockup-float {
0%, 100% { transform: rotateY(-6deg) rotateX(3deg) translateY(0); }
50% { transform: rotateY(-6deg) rotateX(3deg) translateY(-12px); }
}
.yt-mockup__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: #1A1A1A;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.yt-mockup__dot {
width: 10px; height: 10px;
border-radius: 50%;
}
.yt-mockup__dot--red { background: #FF5F57; }
.yt-mockup__dot--yellow { background: #FEBC2E; }
.yt-mockup__dot--green { background: #28C840; }
.yt-mockup__url {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
text-align: center;
padding: 4px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.03em;
font-family: var(--font-mono, monospace);
}
.yt-mockup__screen {
padding: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: #0F0F0F;
}
.yt-mockup__tile {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 8px;
background-size: cover;
background-position: center;
overflow: hidden;
cursor: pointer;
transition: transform var(--dur-base);
}
.yt-mockup__tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
pointer-events: none;
}
.yt-mockup__tile:hover { transform: scale(1.05); z-index: 2; }
.yt-mockup__tile-dur {
position: absolute;
bottom: 6px; inset-inline-end: 6px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 9px;
font-weight: 600;
padding: 2px 6px;
border-radius: 3px;
z-index: 1;
}
.yt-mockup__tile-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.7);
width: 36px; height: 36px;
background: rgba(255, 0, 0, 0.95);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12px;
padding-inline-start: 2px;
opacity: 0;
transition: all var(--dur-base);
z-index: 2;
}
.yt-mockup__tile:hover .yt-mockup__tile-play {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.yt-mockup__base {
height: 8px;
background: linear-gradient(180deg, #1A1A1A, #0F0F0F);
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* Responsive */
@media (max-width: 960px) {
.videos-cta__inner { grid-template-columns: 1fr; gap: var(--space-7); }
.videos-cta__device { order: -1; }
.yt-mockup { max-width: 380px; transform: rotateY(0) rotateX(0); animation: none; }
}
@media (max-width: 600px) {
.videos-cta__inner { padding: var(--space-7) var(--space-5); border-radius: 24px; }
.videos-cta__channel-logo { width: 52px; height: 52px; font-size: 24px; }
.videos-cta__stats { padding: 12px; gap: 12px; }
.videos-cta__stat-sep { height: 28px; }
.videos-cta__stat strong { font-size: var(--text-lg); }
.yt-subscribe { padding: 12px 20px; }
.yt-share { padding: 11px 16px; }
.yt-mockup__screen { grid-template-columns: 1fr 1fr; }
}
/* Responsive */
@media (max-width: 768px) {
.video-feature { grid-template-columns: 1fr; padding: var(--space-4); }
.videos-hero__bubble { display: none; }
.videos-cta__inner { grid-template-columns: 1fr; text-align: center; }
.videos-cta__icon { margin: 0 auto; }
.video-feature__play { width: 64px; height: 64px; font-size: 18px; }
}
/* ════════════════════════════════════════════════════════════
EVENTS — Archive + Single
════════════════════════════════════════════════════════════ */
/* ── Archive Hero ── */
.events-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.events-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.events-hero__deco--blob1 {
top: -150px; inset-inline-start: -100px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.20), transparent 60%);
filter: blur(50px);
}
.events-hero__deco--blob2 {
bottom: -120px; inset-inline-end: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.10), transparent 65%);
filter: blur(50px);
}
.events-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.events-hero__float {
position: absolute;
pointer-events: none;
opacity: 0.6;
z-index: 0;
}
.events-hero__float--1 {
top: 18%; inset-inline-end: 10%;
width: 56px; height: 56px;
animation: bubble-float 7s ease-in-out infinite;
}
.events-hero__float--2 {
bottom: 22%; inset-inline-start: 12%;
width: 44px; height: 44px;
animation: bubble-float 9s ease-in-out infinite 2s;
}
.events-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.events-hero__inner > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
.events-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.events-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.events-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 760px !important;
}
.events-hero__title-accent {
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.events-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 700px !important;
}
.events-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.events-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.events-hero__stat i { color: var(--pink-500, #C0945E); font-size: 14px; }
.events-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
line-height: 1;
}
.events-hero__stat span {
font-size: var(--text-xs);
color: var(--navy-400);
}
/* ── Filters (sticky) ── */
.events-filters {
padding: var(--space-4) 0 var(--space-6);
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid rgba(24, 60, 100, 0.06);
}
/* ── Events Grid ── */
.events-listing { padding: var(--space-4) 0 var(--space-16); background: #fff; }
.events-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .events-grid { grid-template-columns: 1fr; } }
.evt-card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
display: flex;
flex-direction: column;
transition: all var(--dur-base) var(--ease-out);
}
.evt-card.is-hidden { display: none; }
.evt-card:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 18px 40px rgba(192, 148, 94, 0.18);
}
.evt-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
}
.evt-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms var(--ease-out);
}
.evt-card:hover .evt-card__media img { transform: scale(1.06); }
.evt-card__placeholder {
width: 100%; height: 100%;
display: grid;
place-items: center;
color: var(--pink-300, #C0945E);
font-size: 56px;
opacity: 0.45;
}
/* Date badge */
.evt-card__date {
position: absolute;
top: 12px; inset-inline-start: 12px;
background: #fff;
border-radius: 12px;
padding: 8px 12px;
text-align: center;
box-shadow: 0 8px 20px rgba(24, 60, 100, 0.20);
display: grid;
gap: 1px;
min-width: 56px;
}
.evt-card__date strong {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--navy-700);
font-weight: 800;
line-height: 1;
direction: ltr;
font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.evt-card__date span {
font-family: var(--font-display);
font-size: var(--text-xs);
color: var(--pink-500, #C0945E);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.evt-card__date em {
font-style: normal;
font-size: 10px;
color: var(--navy-400);
direction: ltr;
font-feature-settings: 'lnum' 1;
}
/* Status badge */
.evt-card__status {
position: absolute;
top: 12px; inset-inline-end: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
color: var(--navy-700);
}
.evt-card--upcoming .evt-card__status {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
}
.evt-card--upcoming .evt-card__status i { color: #fff; }
.evt-card__status i { font-size: 10px; color: var(--pink-500, #C0945E); }
.evt-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.evt-card__meta {
display: flex;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: var(--space-3);
}
.evt-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.evt-card__meta i { color: var(--pink-500, #C0945E); font-size: 11px; }
.evt-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 800;
line-height: 1.3;
}
.evt-card__title a { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.evt-card:hover .evt-card__title a { color: var(--pink-600, #DA32B4); }
.evt-card__excerpt {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.evt-card__more {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-500, #C0945E);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
padding-top: var(--space-3);
border-top: 1px solid rgba(24, 60, 100, 0.06);
transition: all var(--dur-base);
}
.evt-card__more i { transition: transform var(--dur-base); }
.evt-card__more:hover { color: var(--pink-600, #DA32B4); }
.evt-card__more:hover i { transform: translateX(-4px); }
html[dir="ltr"] .evt-card__more:hover i { transform: translateX(4px); }
/* ════════════════════════════════════════════════════════════
SINGLE EVENT
════════════════════════════════════════════════════════════ */
.single-evt-hero {
position: relative;
min-height: 540px;
padding: var(--space-12) 0 var(--space-16);
overflow: hidden;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0B1F30 0%, #183C64 100%);
color: #fff;
}
.single-evt-hero__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.4;
filter: saturate(0.9);
}
.single-evt-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(11, 31, 48, 0.85) 0%, rgba(24, 60, 100, 0.65) 50%, rgba(192, 148, 94, 0.35) 100%);
}
.single-evt-hero__inner { position: relative; z-index: 2; }
.single-evt-hero__crumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
margin-bottom: var(--space-6);
color: rgba(255, 255, 255, 0.75);
}
.single-evt-hero__crumb a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color var(--dur-base);
}
.single-evt-hero__crumb a:hover { color: #fff; }
.single-evt-hero__crumb-sep { font-size: 10px; opacity: 0.5; }
html[dir="rtl"] .single-evt-hero__crumb-sep { transform: rotate(180deg); }
.single-evt-hero__crumb > span { color: #fff; font-weight: 600; }
.single-evt-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--space-5);
}
.single-evt-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
color: #fff;
}
.single-evt-hero__badge i { font-size: 12px; }
.single-evt-hero__badge--status { background: rgba(255, 255, 255, 0.18); }
.single-evt-hero__badge--upcoming {
background: linear-gradient(135deg, #C0945E, #D9B57E);
border-color: transparent;
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.45);
}
.single-evt-hero__badge--past {
background: rgba(24, 60, 100, 0.40);
border-color: rgba(255, 255, 255, 0.20);
}
.single-evt-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4vw, 48px);
font-weight: 800;
color: #fff;
margin: 0 0 var(--space-4);
line-height: 1.15;
max-width: 760px;
text-shadow: 0 4px 20px rgba(11, 31, 48, 0.25);
}
.single-evt-hero__lead {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-6);
max-width: 620px;
}
.single-evt-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* ── Info Strip ── */
.single-evt-info {
padding: var(--space-8) 0;
background: #fff;
position: relative;
z-index: 3;
}
.single-evt-info__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
background: #fff;
border-radius: 20px;
padding: var(--space-5);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 20px 50px -20px rgba(24, 60, 100, 0.18);
margin-top: -64px;
}
.info-pill {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 8px;
}
.info-pill__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.30);
}
.info-pill__label {
display: block;
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.info-pill__value {
display: block;
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--navy-700);
font-weight: 700;
line-height: 1.2;
}
/* ── Main grid (content + sidebar) ── */
.single-evt-main {
padding: var(--space-8) 0 var(--space-16);
background: #fff;
}
.single-evt-main__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-8);
align-items: start;
}
.single-evt-content__body {
font-size: var(--text-md);
color: var(--navy-700);
line-height: 1.85;
}
.single-evt-content__body > * { margin-bottom: var(--space-4); }
.single-evt-content__body h2,
.single-evt-content__body h3 {
font-family: var(--font-display);
color: var(--navy-700);
font-weight: 800;
margin-top: var(--space-7);
margin-bottom: var(--space-3);
}
.single-evt-content__body h2 { font-size: var(--text-2xl); }
.single-evt-content__body h3 { font-size: var(--text-xl); }
.single-evt-content__body p { color: var(--navy-600); }
.single-evt-content__body a { color: var(--pink-500, #C0945E); text-decoration: underline; text-decoration-color: rgba(192,148,94,0.30); text-underline-offset: 4px; transition: all var(--dur-base); }
.single-evt-content__body a:hover { text-decoration-color: var(--pink-500, #C0945E); }
.single-evt-content__body img {
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(24, 60, 100, 0.12);
margin: var(--space-5) 0;
}
.single-evt-content__body blockquote {
position: relative;
padding: var(--space-5) var(--space-7);
background: linear-gradient(180deg, #FFF9FC, #FAF4F7);
border-inline-start: 4px solid var(--pink-500, #C0945E);
border-radius: var(--radius-md);
color: var(--navy-700);
margin: var(--space-5) 0;
}
.single-evt-content__body blockquote::before {
content: "\201C";
position: absolute;
top: -8px; inset-inline-start: var(--space-5);
font-family: Georgia, serif;
font-size: 56px;
color: var(--pink-300, #C0945E);
line-height: 1;
opacity: 0.5;
}
.single-evt-content__body ul,
.single-evt-content__body ol { padding-inline-start: var(--space-6); }
.single-evt-content__body li { margin-bottom: 8px; color: var(--navy-600); }
/* Share */
.single-evt-share {
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid rgba(24, 60, 100, 0.08);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.single-evt-share__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--navy-700);
font-size: var(--text-sm);
}
.single-evt-share__label i { color: var(--pink-500, #C0945E); }
.single-evt-share__btns { display: flex; gap: 8px; }
.single-evt-share__btn {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(24, 60, 100, 0.05);
border: 1px solid rgba(24, 60, 100, 0.08);
color: var(--navy-500);
display: inline-grid;
place-items: center;
cursor: pointer;
transition: all var(--dur-base);
font-size: 14px;
text-decoration: none;
}
.single-evt-share__btn:hover {
transform: translateY(-3px);
border-color: transparent;
color: #fff;
}
.single-evt-share__btn--x:hover { background: #000; }
.single-evt-share__btn--fb:hover { background: #1877F2; }
.single-evt-share__btn--wa:hover { background: #25D366; }
.single-evt-share__btn--li:hover { background: #0A66C2; }
.single-evt-share__btn--copy:hover { background: var(--gradient-pink-soft); }
.single-evt-share__btn.is-copied { background: #22C55E; color: #fff; }
/* Sidebar */
.single-evt-side {
display: grid;
gap: var(--space-4);
position: sticky;
top: 90px;
}
.evt-side-card {
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
}
.evt-side-card__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
color: var(--navy-700);
font-size: var(--text-md);
font-weight: 800;
margin: 0 0 var(--space-3);
}
.evt-side-card__title i { color: var(--pink-500, #C0945E); }
/* Big date block */
.evt-side-card--date {
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border-color: rgba(192, 148, 94, 0.15);
text-align: center;
}
.evt-date-block {
display: inline-flex;
flex-direction: column;
background: #fff;
border: 2px solid var(--pink-300, #C0945E);
border-radius: 16px;
padding: var(--space-3) var(--space-5);
margin-bottom: var(--space-4);
position: relative;
box-shadow: 0 10px 28px rgba(192, 148, 94, 0.15);
}
.evt-date-block::before,
.evt-date-block::after {
content: "";
position: absolute;
top: -4px;
width: 8px; height: 8px;
background: var(--pink-500, #C0945E);
border-radius: 50%;
}
.evt-date-block::before { inset-inline-start: 14px; }
.evt-date-block::after { inset-inline-end: 14px; }
.evt-date-block__month {
font-family: var(--font-display);
font-size: var(--text-sm);
color: var(--pink-600, #DA32B4);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.evt-date-block__day {
font-family: var(--font-display);
font-size: 48px;
font-weight: 900;
color: var(--navy-700);
line-height: 1;
margin: 4px 0;
direction: ltr;
font-feature-settings: 'lnum' 1, 'tnum' 1;
}
.evt-date-block__year {
font-size: var(--text-sm);
color: var(--navy-400);
font-weight: 600;
direction: ltr;
font-feature-settings: 'lnum' 1;
}
.evt-side-card__cal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1.5px solid var(--pink-300, #C0945E);
color: var(--pink-600, #DA32B4);
padding: 10px 18px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
}
.evt-side-card__cal-btn:hover {
background: var(--gradient-pink-soft);
color: #fff;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.30);
}
/* Map card */
.evt-side-card__map {
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-3);
border: 1px solid rgba(24, 60, 100, 0.08);
line-height: 0;
}
.evt-side-card__map iframe { display: block; filter: saturate(0.9); }
.evt-side-card__addr {
font-size: var(--text-sm);
color: var(--navy-500);
margin: 0 0 var(--space-3);
line-height: var(--leading-relaxed);
}
.evt-side-card__dir-btn {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--pink-500, #C0945E);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: gap var(--dur-base);
}
.evt-side-card__dir-btn:hover { gap: 12px; color: var(--pink-600, #DA32B4); }
/* CTA card in sidebar */
.evt-side-card--cta {
background: linear-gradient(135deg, #0B1F30 0%, #183C64 60%, #2A1430 100%);
color: #fff;
border: 0;
position: relative;
overflow: hidden;
text-align: center;
padding: var(--space-6);
box-shadow: 0 16px 38px rgba(24, 60, 100, 0.25);
}
.evt-side-card__cta-deco {
position: absolute;
bottom: -80px; inset-inline-end: -80px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.35), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.evt-side-card--cta > * { position: relative; z-index: 1; }
.evt-side-card__cta-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 14px;
display: inline-grid;
place-items: center;
font-size: 22px;
margin-bottom: var(--space-3);
box-shadow: 0 10px 24px rgba(192, 148, 94, 0.45);
}
.evt-side-card--cta h4 {
font-family: var(--font-display);
font-size: var(--text-lg);
margin: 0 0 6px;
color: #fff;
font-weight: 800;
}
.evt-side-card--cta p {
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
line-height: var(--leading-relaxed);
}
.evt-side-card--cta .btn-cta { width: 100%; justify-content: center; }
/* Related */
.single-evt-related {
padding: var(--space-12) 0 var(--space-16);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
/* Responsive */
@media (max-width: 1024px) {
.single-evt-main__grid { grid-template-columns: 1fr; }
.single-evt-side { position: static; }
.single-evt-info__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.single-evt-info__grid { grid-template-columns: 1fr; margin-top: -32px; padding: var(--space-4); }
.single-evt-hero { min-height: 460px; padding: var(--space-10) 0; }
.events-hero__float { display: none; }
.single-evt-share { flex-direction: column; align-items: flex-start; }
}
/* ════════════════════════════════════════════════════════════
NEWS — Archive + Single (Premium Magazine)
════════════════════════════════════════════════════════════ */
/* HERO */
.news-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.news-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.news-hero__deco--blob1 {
top: -140px; inset-inline-end: -100px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.20), transparent 60%);
filter: blur(50px);
}
.news-hero__deco--blob2 {
bottom: -120px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.news-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.news-hero__float {
position: absolute;
pointer-events: none;
opacity: 0.7;
z-index: 0;
}
.news-hero__float--1 {
top: 16%; inset-inline-start: 8%;
width: 60px; height: 60px;
animation: bubble-float 7s ease-in-out infinite;
}
.news-hero__float--2 {
bottom: 18%; inset-inline-end: 12%;
width: 40px; height: 40px;
animation: bubble-float 9s ease-in-out infinite 1.5s;
}
.news-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.news-hero__inner > * {
flex-shrink: 0;
width: max-content;
max-width: 100%;
}
.news-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.news-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.news-hero__eyebrow-dot {
width: 8px; height: 8px;
background: var(--pink-500, #C0945E);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.20);
animation: pulse-eye 1.8s ease-in-out infinite;
}
.news-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 820px !important;
}
.news-hero__title-accent {
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.news-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 660px !important;
}
.news-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.news-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.news-hero__stat i { color: var(--pink-500, #C0945E); font-size: 14px; }
.news-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
line-height: 1;
}
.news-hero__stat span { font-size: var(--text-xs); color: var(--navy-400); }
/* FEATURED CARD */
.news-featured { padding: var(--space-8) 0 var(--space-10); background: #fff; }
.news-featured__head { text-align: center; margin-bottom: var(--space-6); }
.news-feature-card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 0;
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(192, 148, 94, 0.12);
box-shadow: 0 30px 70px -20px rgba(24, 60, 100, 0.18);
}
.news-feature-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 11;
overflow: hidden;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
}
.news-feature-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 700ms var(--ease-out);
}
.news-feature-card__media:hover img { transform: scale(1.06); }
.news-feature-card__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
color: var(--pink-300, #C0945E);
font-size: 64px;
opacity: 0.4;
}
.news-feature-card__badge {
position: absolute;
top: 18px; inset-inline-start: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
padding: 8px 16px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.45);
}
.news-feature-card__badge-dot {
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.30);
animation: pulse-eye 1.5s ease-in-out infinite;
}
.news-feature-card__body {
padding: clamp(var(--space-6), 3vw, var(--space-9));
display: flex;
flex-direction: column;
justify-content: center;
}
.news-feature-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: var(--space-3);
align-items: center;
}
.news-feature-card__meta span,
.news-feature-card__cat {
display: inline-flex;
align-items: center;
gap: 5px;
}
.news-feature-card__cat {
background: rgba(192, 148, 94, 0.10);
color: var(--pink-600, #DA32B4);
padding: 5px 12px;
border-radius: var(--radius-full);
font-weight: 700;
text-decoration: none;
transition: all var(--dur-base);
}
.news-feature-card__cat:hover {
background: var(--gradient-pink-soft);
color: #fff;
}
.news-feature-card__meta i { font-size: 11px; color: var(--pink-500, #C0945E); }
.news-feature-card__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.6vw, var(--text-3xl));
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 800;
line-height: 1.2;
}
.news-feature-card__title a { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.news-feature-card__title a:hover { color: var(--pink-600, #DA32B4); }
.news-feature-card__excerpt {
color: var(--navy-500);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-5);
}
.news-feature-card__body .btn-cta { align-self: flex-start; }
/* Filters sticky */
.news-filters {
padding: var(--space-4) 0;
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-block: 1px solid rgba(24, 60, 100, 0.06);
}
/* News grid */
.news-listing { padding: var(--space-8) 0 var(--space-16); background: #fff; }
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } }
.news-card-v2 {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
display: flex;
flex-direction: column;
transition: all var(--dur-base) var(--ease-out);
}
.news-card-v2.is-hidden { display: none; }
.news-card-v2:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 18px 40px rgba(192, 148, 94, 0.18);
}
.news-card-v2__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
}
.news-card-v2__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms var(--ease-out);
}
.news-card-v2:hover .news-card-v2__media img { transform: scale(1.06); }
.news-card-v2__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
color: var(--pink-300, #C0945E);
font-size: 48px;
opacity: 0.4;
}
.news-card-v2__cat-pill {
position: absolute;
top: 12px; inset-inline-start: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: var(--radius-full);
color: var(--pink-600, #DA32B4);
font-size: 11px;
font-weight: 700;
}
.news-card-v2__cat-pill i { font-size: 9px; }
.news-card-v2__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.news-card-v2__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: var(--space-3);
}
.news-card-v2__meta time,
.news-card-v2__meta span { display: inline-flex; align-items: center; gap: 5px; }
.news-card-v2__meta i { color: var(--pink-500, #C0945E); font-size: 10px; }
.news-card-v2__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 var(--space-3);
font-weight: 800;
line-height: 1.3;
}
.news-card-v2__title a { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.news-card-v2:hover .news-card-v2__title a { color: var(--pink-600, #DA32B4); }
.news-card-v2__excerpt {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card-v2__more {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-500, #C0945E);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
padding-top: var(--space-3);
border-top: 1px solid rgba(24, 60, 100, 0.06);
transition: color var(--dur-base);
}
.news-card-v2__more i { transition: transform var(--dur-base); }
.news-card-v2__more:hover { color: var(--pink-600, #DA32B4); }
.news-card-v2__more:hover i { transform: translateX(-4px); }
html[dir="ltr"] .news-card-v2__more:hover i { transform: translateX(4px); }
/* ────────────────────────────────────────────
SINGLE POST (Article)
──────────────────────────────────────────── */
.single-post-hero {
position: relative;
min-height: 480px;
padding: var(--space-14) 0 var(--space-16);
overflow: hidden;
display: flex;
align-items: center;
background: linear-gradient(135deg, #0B1F30 0%, #183C64 100%);
color: #fff;
}
.single-post-hero__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.40;
filter: saturate(0.85);
}
.single-post-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(11, 31, 48, 0.88) 0%, rgba(24, 60, 100, 0.65) 55%, rgba(192, 148, 94, 0.30) 100%);
}
.single-post-hero__inner { position: relative; z-index: 2; max-width: 880px; }
.single-post-hero__crumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
margin-bottom: var(--space-5);
color: rgba(255, 255, 255, 0.75);
}
.single-post-hero__crumb a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: color var(--dur-base);
}
.single-post-hero__crumb a:hover { color: #fff; }
.single-post-hero__crumb-sep { font-size: 10px; opacity: 0.5; }
html[dir="rtl"] .single-post-hero__crumb-sep { transform: rotate(180deg); }
.single-post-hero__cat {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
padding: 8px 18px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--space-4);
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.45);
color: #fff;
}
.single-post-hero__cat i { font-size: 11px; }
.single-post-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4.2vw, 52px);
font-weight: 800;
color: #fff;
margin: 0 0 var(--space-4);
line-height: 1.15;
text-shadow: 0 4px 20px rgba(11, 31, 48, 0.25);
}
.single-post-hero__lead {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-6);
max-width: 720px;
}
.single-post-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
}
.single-post-hero__author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.single-post-hero__author img {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.30);
}
.single-post-hero__author-label {
display: block;
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.60);
margin-bottom: 1px;
}
.single-post-hero__author strong {
display: block;
color: #fff;
font-size: var(--text-sm);
font-weight: 700;
}
.single-post-hero__divider {
width: 1px;
height: 28px;
background: rgba(255, 255, 255, 0.20);
}
.single-post-hero__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.85);
font-size: var(--text-sm);
}
.single-post-hero__meta-item i { color: var(--pink-300, #D9B57E); }
/* Single main */
.single-post-main { padding: var(--space-10) 0; background: #fff; }
.single-post-main__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-8);
align-items: start;
}
.single-post-content__body {
font-size: var(--text-md);
color: var(--navy-700);
line-height: 1.95;
}
.single-post-content__body > * { margin-bottom: var(--space-4); }
.single-post-content__body .lead {
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 500;
line-height: 1.7;
padding: var(--space-4) var(--space-5);
background: linear-gradient(180deg, rgba(192, 148, 94, 0.06), transparent);
border-inline-start: 3px solid var(--pink-400, #D9B57E);
border-radius: var(--radius-md);
margin-bottom: var(--space-6);
}
.single-post-content__body h2,
.single-post-content__body h3 {
font-family: var(--font-display);
color: var(--navy-700);
font-weight: 800;
margin-top: var(--space-8);
margin-bottom: var(--space-3);
scroll-margin-top: 100px;
}
.single-post-content__body h2 { font-size: var(--text-2xl); }
.single-post-content__body h3 { font-size: var(--text-xl); }
.single-post-content__body p { color: var(--navy-600); }
.single-post-content__body a {
color: var(--pink-500, #C0945E);
text-decoration: underline;
text-decoration-color: rgba(192,148,94,0.30);
text-underline-offset: 4px;
transition: all var(--dur-base);
}
.single-post-content__body a:hover { text-decoration-color: var(--pink-500, #C0945E); }
.single-post-content__body strong { color: var(--navy-700); font-weight: 700; }
.single-post-content__body img {
border-radius: var(--radius-lg);
box-shadow: 0 12px 32px rgba(24, 60, 100, 0.12);
margin: var(--space-5) 0;
width: 100%; height: auto;
}
.single-post-content__body blockquote {
position: relative;
padding: var(--space-6) var(--space-7);
background: linear-gradient(180deg, #FFF9FC, #FAF4F7);
border-inline-start: 4px solid var(--pink-500, #C0945E);
border-radius: var(--radius-md);
font-size: var(--text-lg);
color: var(--navy-700);
margin: var(--space-6) 0;
font-style: italic;
}
.single-post-content__body blockquote::before {
content: "\201C";
position: absolute;
top: -12px; inset-inline-start: var(--space-5);
font-family: Georgia, serif;
font-size: 64px;
color: var(--pink-300, #C0945E);
line-height: 1;
opacity: 0.5;
}
.single-post-content__body blockquote p { color: var(--navy-700); margin-bottom: 8px; }
.single-post-content__body ul,
.single-post-content__body ol { padding-inline-start: var(--space-6); margin-bottom: var(--space-5); }
.single-post-content__body li { margin-bottom: 10px; color: var(--navy-600); }
.single-post-content__body ul li::marker { color: var(--pink-500, #C0945E); }
.single-post-content__body ol li::marker { color: var(--pink-500, #C0945E); font-weight: 700; }
/* Tags */
.single-post-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: var(--space-6) 0;
padding: var(--space-4) 0;
border-top: 1px solid rgba(24, 60, 100, 0.08);
}
.single-post-tags > span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--navy-700);
font-weight: 700;
font-size: var(--text-sm);
margin-inline-end: 4px;
}
.single-post-tags > span i { color: var(--pink-500, #C0945E); }
.single-post-tags a {
display: inline-block;
background: rgba(24, 60, 100, 0.05);
color: var(--navy-600);
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
text-decoration: none;
transition: all var(--dur-base);
}
.single-post-tags a:hover {
background: var(--gradient-pink-soft);
color: #fff;
transform: translateY(-2px);
}
/* Author bio */
.single-post-author {
display: flex;
gap: var(--space-5);
align-items: flex-start;
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border: 1px solid rgba(192, 148, 94, 0.12);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin: var(--space-6) 0;
}
.single-post-author img {
width: 72px; height: 72px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
box-shadow: 0 8px 22px rgba(192, 148, 94, 0.25);
flex-shrink: 0;
}
.single-post-author__label {
display: block;
font-size: var(--text-xs);
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 4px;
}
.single-post-author__name {
font-family: var(--font-display);
margin: 0 0 6px;
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
}
.single-post-author__bio {
margin: 0;
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
/* Share row */
.single-post-share {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid rgba(24, 60, 100, 0.08);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.single-post-share__label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--navy-700);
font-size: var(--text-sm);
}
.single-post-share__label i { color: var(--pink-500, #C0945E); }
.single-post-share__btns { display: flex; gap: 8px; }
/* Sidebar */
.single-post-side {
display: grid;
gap: var(--space-4);
position: sticky;
top: 90px;
}
.post-side-card {
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.05);
}
.post-side-card__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
color: var(--navy-700);
font-size: var(--text-sm);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 var(--space-3);
}
.post-side-card__title i { color: var(--pink-500, #C0945E); }
/* Reading progress */
.post-side-card--progress { padding-bottom: var(--space-4); }
.post-progress-bar {
height: 6px;
background: rgba(24, 60, 100, 0.08);
border-radius: var(--radius-full);
overflow: hidden;
}
.post-progress-bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, #C0945E, #D9B57E);
border-radius: var(--radius-full);
width: 0%;
transition: width 100ms linear;
}
.post-side-card--progress small {
display: block;
text-align: end;
margin-top: 6px;
font-size: var(--text-xs);
color: var(--pink-600, #DA32B4);
font-weight: 700;
}
/* ToC */
.post-toc { display: flex; flex-direction: column; gap: 4px; }
.post-toc a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: var(--radius-md);
text-decoration: none;
color: var(--navy-600);
font-size: var(--text-sm);
transition: all var(--dur-base);
border-inline-start: 3px solid transparent;
}
.post-toc a:hover,
.post-toc a.is-active {
background: rgba(192, 148, 94, 0.06);
color: var(--pink-600, #DA32B4);
border-inline-start-color: var(--pink-400, #D9B57E);
}
.post-toc a.is-h3 { padding-inline-start: 24px; font-size: var(--text-xs); }
.post-side-card--toc:empty { display: none; }
/* Newsletter CTA */
.post-side-card--cta {
position: relative;
background: linear-gradient(135deg, #0B1F30 0%, #183C64 60%, #2A1430 100%);
color: #fff;
border: 0;
overflow: hidden;
text-align: center;
padding: var(--space-6);
box-shadow: 0 16px 38px rgba(24, 60, 100, 0.25);
}
.post-side-card__deco {
position: absolute;
bottom: -80px; inset-inline-end: -80px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.35), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.post-side-card--cta > *:not(.post-side-card__deco) { position: relative; z-index: 1; }
.post-side-card__cta-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 14px;
display: inline-grid;
place-items: center;
font-size: 22px;
margin-bottom: var(--space-3);
box-shadow: 0 10px 24px rgba(192, 148, 94, 0.45);
}
.post-side-card--cta h4 {
font-family: var(--font-display);
font-size: var(--text-lg);
margin: 0 0 6px;
color: #fff;
font-weight: 800;
}
.post-side-card--cta p {
margin: 0 0 var(--space-4);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
line-height: var(--leading-relaxed);
}
.post-newsletter {
display: flex;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-full);
padding: 4px;
overflow: hidden;
}
.post-newsletter input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
padding: 8px 14px;
color: #fff;
font-size: var(--text-sm);
font-family: var(--font-body);
}
.post-newsletter input::placeholder { color: rgba(255, 255, 255, 0.55); }
.post-newsletter button {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--gradient-pink-soft);
color: #fff;
border: 0;
cursor: pointer;
display: grid;
place-items: center;
transition: transform var(--dur-base);
}
.post-newsletter button:hover { transform: scale(1.08); }
.post-newsletter__ok {
display: none;
margin-top: var(--space-3);
font-size: var(--text-sm);
color: #4ADE80;
font-weight: 600;
}
.post-newsletter__ok.is-on { display: block; }
.post-newsletter__ok i {
display: inline-grid;
place-items: center;
width: 18px; height: 18px;
background: #22C55E;
color: #fff;
border-radius: 50%;
font-size: 9px;
margin-inline-end: 4px;
}
/* Related */
.single-post-related {
padding: var(--space-12) 0 var(--space-16);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
/* Responsive */
@media (max-width: 1024px) {
.news-feature-card { grid-template-columns: 1fr; }
.single-post-main__grid { grid-template-columns: 1fr; }
.single-post-side { position: static; }
}
@media (max-width: 600px) {
.single-post-hero { min-height: 420px; padding: var(--space-10) 0; }
.single-post-author { flex-direction: column; text-align: center; align-items: center; }
.single-post-share { flex-direction: column; align-items: flex-start; }
.news-hero__float { display: none; }
}
/* ════════════════════════════════════════════════════════════
TEAM PAGE
════════════════════════════════════════════════════════════ */
/* HERO */
.team-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.team-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.team-hero__deco--blob1 {
top: -140px; inset-inline-end: -100px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.20), transparent 60%);
filter: blur(50px);
}
.team-hero__deco--blob2 {
bottom: -120px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.team-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
/* Floating avatars decoration */
.team-hero__avatar {
position: absolute;
width: 64px; height: 64px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #fff;
box-shadow: 0 12px 28px rgba(24, 60, 100, 0.20);
z-index: 1;
}
.team-hero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-hero__avatar--1 {
top: 16%; inset-inline-start: 8%;
animation: avatar-float 6s ease-in-out infinite;
}
.team-hero__avatar--2 {
top: 22%; inset-inline-end: 10%;
width: 56px; height: 56px;
animation: avatar-float 7s ease-in-out infinite 1s;
}
.team-hero__avatar--3 {
bottom: 18%; inset-inline-start: 14%;
width: 52px; height: 52px;
animation: avatar-float 8s ease-in-out infinite 2s;
}
.team-hero__avatar--4 {
bottom: 14%; inset-inline-end: 12%;
width: 58px; height: 58px;
animation: avatar-float 7.5s ease-in-out infinite 0.5s;
}
@keyframes avatar-float {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-14px) rotate(3deg); }
}
.team-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-hero__inner > * { flex-shrink: 0; width: max-content; max-width: 100%; }
.team-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.team-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.team-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 760px !important;
}
.team-hero__title-accent {
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.team-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 660px !important;
}
.team-hero__stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
.team-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.team-hero__stat i { color: var(--pink-500, #C0945E); font-size: 14px; }
.team-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
line-height: 1;
}
.team-hero__stat span { font-size: var(--text-xs); color: var(--navy-400); }
/* Filters sticky */
.team-filters {
padding: var(--space-4) 0;
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-block: 1px solid rgba(24, 60, 100, 0.06);
}
/* TEAM GRID */
.team-grid-wrap { padding: var(--space-10) 0 var(--space-16); background: #fff; }
.team-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .team-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid-v2 { grid-template-columns: 1fr; } }
.tcard {
background: #fff;
border-radius: 22px;
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 28px rgba(24, 60, 100, 0.07);
transition: all 400ms var(--ease-out);
display: flex;
flex-direction: column;
}
.tcard.is-hidden { display: none; }
.tcard:hover {
transform: translateY(-8px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 24px 50px rgba(192, 148, 94, 0.18);
}
.tcard__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
}
.tcard__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out), filter var(--dur-base);
}
.tcard:hover .tcard__media img { transform: scale(1.05); filter: brightness(0.92); }
.tcard__dept {
position: absolute;
top: 14px; inset-inline-start: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 6px 12px;
border-radius: var(--radius-full);
color: var(--pink-600, #DA32B4);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
z-index: 2;
}
.tcard__dept i { font-size: 10px; }
/* Hover socials overlay */
.tcard__hover-socials {
position: absolute;
bottom: 14px; inset-inline-end: 14px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 2;
opacity: 0;
transform: translateY(10px);
transition: all 350ms var(--ease-out);
}
.tcard:hover .tcard__hover-socials {
opacity: 1;
transform: translateY(0);
}
.tcard__hover-social {
width: 40px; height: 40px;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--navy-600);
border-radius: 50%;
text-decoration: none;
font-size: 14px;
transition: all var(--dur-base);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.tcard__hover-social:hover {
transform: scale(1.10) rotate(-6deg);
color: #fff;
}
.tcard__hover-social--linkedin:hover { background: #0A66C2; }
.tcard__hover-social--twitter:hover { background: #000; }
.tcard__hover-social--whatsapp:hover { background: #25D366; }
.tcard__hover-social--email:hover { background: var(--gradient-pink-soft); }
.tcard__body {
padding: var(--space-5) var(--space-5) var(--space-6);
flex: 1;
display: flex;
flex-direction: column;
}
.tcard__name {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--navy-700);
margin: 0 0 4px;
font-weight: 800;
line-height: 1.3;
}
.tcard__role {
display: inline-block;
font-size: var(--text-sm);
color: var(--pink-600, #DA32B4);
font-weight: 600;
margin-bottom: var(--space-3);
}
.tcard__bio {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
flex: 1;
}
.tcard__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tcard__tag {
display: inline-block;
background: rgba(24, 60, 100, 0.05);
color: var(--navy-600);
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
border: 1px solid rgba(24, 60, 100, 0.05);
}
/* CULTURE */
.team-culture {
padding: var(--space-14) 0 var(--space-12);
background: linear-gradient(180deg, #FAF4F7 0%, #FFFFFF 100%);
position: relative;
overflow: hidden;
}
.team-culture::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 700px; height: 400px;
background: radial-gradient(ellipse, rgba(192, 148, 94, 0.06), transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.team-culture__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
@media (max-width: 1024px) { .team-culture__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-culture__grid { grid-template-columns: 1fr; } }
.culture-item {
background: #fff;
padding: var(--space-6) var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 22px rgba(24, 60, 100, 0.05);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
position: relative;
}
.culture-item:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.15);
}
.culture-item__icon {
display: inline-flex;
width: 56px; height: 56px;
border-radius: 18px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: var(--space-4);
box-shadow: 0 10px 22px rgba(192, 148, 94, 0.35);
transition: all var(--dur-base);
}
.culture-item:hover .culture-item__icon { transform: scale(1.08) rotate(-8deg); }
.culture-item h3 {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 8px;
font-weight: 800;
}
.culture-item p {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0;
}
/* CTA */
.team-cta {
padding: var(--space-10) 0 var(--space-16);
background: #fff;
}
.team-cta__inner {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--space-8);
align-items: center;
background: linear-gradient(135deg, #0B1F30 0%, #183C64 50%, #2A1430 100%);
padding: clamp(var(--space-8), 4vw, var(--space-12));
border-radius: 32px;
color: #fff;
overflow: hidden;
box-shadow: 0 40px 80px -30px rgba(11, 31, 48, 0.40), 0 16px 36px -16px rgba(192, 148, 94, 0.25);
}
.team-cta__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.team-cta__bg-blob {
position: absolute;
bottom: -150px; inset-inline-end: -100px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.35), transparent 60%);
border-radius: 50%;
filter: blur(30px);
}
.team-cta__inner > *:not(.team-cta__bg) { position: relative; z-index: 1; }
.team-cta__content { display: flex; flex-direction: column; gap: var(--space-3); }
.team-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-300, #D9B57E);
text-transform: uppercase;
width: max-content;
}
.team-cta__dot {
width: 8px; height: 8px;
background: var(--pink-500, #C0945E);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.25);
animation: pulse-eye 1.6s ease-in-out infinite;
}
.team-cta__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3.4vw, var(--text-3xl));
color: #fff;
margin: 0;
font-weight: 800;
line-height: 1.2;
max-width: 540px;
}
.team-cta__desc {
color: rgba(255, 255, 255, 0.78);
font-size: var(--text-md);
margin: 0 0 var(--space-3);
line-height: var(--leading-relaxed);
max-width: 560px;
}
.team-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
/* Avatars stack visual */
.team-cta__visual {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
}
.team-cta__avatar-stack {
display: flex;
align-items: center;
}
.team-cta__avatar {
width: 72px; height: 72px;
border-radius: 50%;
border: 4px solid #0B1F30;
background-size: cover;
background-position: center;
margin-inline-start: -18px;
position: relative;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
transition: transform var(--dur-base);
}
.team-cta__avatar:first-child { margin-inline-start: 0; }
.team-cta__avatar:hover {
transform: translateY(-6px) scale(1.05);
z-index: 2;
}
.team-cta__avatar--more {
display: grid;
place-items: center;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-md);
border-color: #0B1F30 !important;
}
.team-cta__visual-cap {
margin: 0;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
/* Responsive */
@media (max-width: 960px) {
.team-cta__inner { grid-template-columns: 1fr; text-align: center; }
.team-cta__eyebrow { margin: 0 auto; }
.team-cta__title, .team-cta__desc { margin-left: auto; margin-right: auto; }
.team-cta__actions { justify-content: center; }
}
@media (max-width: 600px) {
.team-hero__avatar { display: none; }
.team-cta__avatar { width: 56px; height: 56px; margin-inline-start: -14px; }
.team-cta__inner { padding: var(--space-7) var(--space-5); border-radius: 24px; }
}
/* ════════════════════════════════════════════════════════════
REGISTER v3 — Clean centered + 2 mega cards
════════════════════════════════════════════════════════════ */
/* HERO */
.rg2-hero {
position: relative;
padding: var(--space-12) 0 var(--space-8);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.rg2-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.rg2-hero__deco--blob1 {
top: -160px; inset-inline-start: -100px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.18), transparent 60%);
filter: blur(50px);
}
.rg2-hero__deco--blob2 {
bottom: -100px; inset-inline-end: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.10), transparent 65%);
filter: blur(50px);
}
.rg2-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.rg2-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.rg2-hero__inner > * { flex-shrink: 0; width: max-content; max-width: 100%; }
.rg2-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.rg2-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 18px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.rg2-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 60px);
line-height: 1.1;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 760px !important;
}
.rg2-hero__title-accent {
display: inline-block;
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rg2-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0;
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 580px !important;
}
/* MEGA CHOICE CARDS */
.rg2-choice { padding: var(--space-8) 0 var(--space-12); background: #fff; }
.rg2-choice__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
max-width: 1000px;
margin: 0 auto;
}
@media (max-width: 768px) { .rg2-choice__grid { grid-template-columns: 1fr; } }
.rg2-card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(var(--space-6), 3vw, var(--space-9)) clamp(var(--space-5), 3vw, var(--space-8));
border-radius: 28px;
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition: all 400ms var(--ease-out);
min-height: 480px;
}
/* NEW account card (pink, primary) */
.rg2-card--new {
background:
linear-gradient(135deg, #C0945E 0%, #D9B57E 60%, #FFA8E0 100%);
color: #fff;
box-shadow:
0 30px 60px -15px rgba(192, 148, 94, 0.45),
0 10px 20px -8px rgba(192, 148, 94, 0.25);
}
.rg2-card--new::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(at 30% 110%, rgba(255, 255, 255, 0.30), transparent 50%),
radial-gradient(at 100% 0%, rgba(255, 255, 255, 0.18), transparent 45%);
z-index: -1;
}
.rg2-card--new::after {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
z-index: -1;
}
.rg2-card--new:hover {
transform: translateY(-8px);
box-shadow:
0 36px 70px -20px rgba(192, 148, 94, 0.60),
0 14px 24px -10px rgba(192, 148, 94, 0.35);
}
/* LOGIN card (navy, secondary) */
.rg2-card--login {
background:
linear-gradient(135deg, #FAFCFF 0%, #F4F8FC 100%);
color: var(--navy-700);
border: 1.5px solid rgba(24, 60, 100, 0.12);
box-shadow:
0 20px 50px -20px rgba(24, 60, 100, 0.18),
0 8px 18px -8px rgba(24, 60, 100, 0.10);
}
.rg2-card--login::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(at 30% 110%, rgba(192, 148, 94, 0.08), transparent 50%);
z-index: -1;
}
.rg2-card--login:hover {
transform: translateY(-8px);
border-color: var(--pink-300, #C0945E);
box-shadow:
0 30px 60px -20px rgba(192, 148, 94, 0.30),
0 12px 24px -10px rgba(24, 60, 100, 0.18);
}
/* Top of card */
.rg2-card__top {
position: absolute;
top: 16px; inset-inline-end: 16px;
display: flex;
gap: 8px;
}
.rg2-card__badge {
display: inline-block;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.40);
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
padding: 5px 12px;
border-radius: var(--radius-full);
}
/* Big icon */
.rg2-card__icon-wrap {
position: relative;
width: 96px; height: 96px;
margin-bottom: var(--space-5);
display: inline-grid;
place-items: center;
}
.rg2-card__icon-bg {
position: absolute;
inset: 0;
border-radius: 28px;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.30);
transition: transform 400ms var(--ease-out);
}
.rg2-card--login .rg2-card__icon-bg {
background: linear-gradient(135deg, #C0945E, #D9B57E);
border-color: transparent;
box-shadow: 0 14px 30px rgba(192, 148, 94, 0.40);
}
.rg2-card__icon {
position: relative;
z-index: 1;
font-size: 40px;
color: #fff;
transition: transform var(--dur-base);
}
.rg2-card:hover .rg2-card__icon-bg { transform: rotate(-8deg) scale(1.08); }
.rg2-card:hover .rg2-card__icon { transform: scale(1.08); }
/* Text */
.rg2-card__eyebrow {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 8px;
opacity: 0.85;
}
.rg2-card--login .rg2-card__eyebrow { color: var(--pink-600, #DA32B4); }
.rg2-card__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, 36px);
margin: 0 0 var(--space-3);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}
.rg2-card__desc {
margin: 0 0 var(--space-5);
font-size: var(--text-md);
line-height: var(--leading-relaxed);
opacity: 0.9;
}
.rg2-card--login .rg2-card__desc { color: var(--navy-500); }
/* Feature list */
.rg2-card__features {
list-style: none;
margin: 0 0 auto;
padding: 0 0 var(--space-5);
display: grid;
gap: 10px;
}
.rg2-card__features li {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-sm);
font-weight: 500;
}
.rg2-card__features li i {
width: 22px; height: 22px;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.25);
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: 10px;
font-weight: 900;
}
.rg2-card--login .rg2-card__features li i {
background: linear-gradient(135deg, #22C55E, #15803D);
color: #fff;
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.30);
}
/* Card button */
.rg2-card__btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(255, 255, 255, 0.40);
padding: 14px 22px;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-md);
align-self: flex-start;
transition: all var(--dur-base);
}
.rg2-card--new:hover .rg2-card__btn {
background: #fff;
border-color: #fff;
color: var(--pink-600, #DA32B4);
}
.rg2-card--login .rg2-card__btn {
background: linear-gradient(135deg, #C0945E, #D9B57E);
border-color: transparent;
color: #fff;
box-shadow: 0 12px 26px rgba(192, 148, 94, 0.45);
}
.rg2-card--login:hover .rg2-card__btn {
box-shadow: 0 16px 32px rgba(192, 148, 94, 0.55);
transform: translateY(-2px);
}
.rg2-card__btn-arrow {
width: 32px; height: 32px;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: rgba(255, 255, 255, 0.25);
font-size: 12px;
transition: transform var(--dur-base);
}
.rg2-card--login .rg2-card__btn-arrow { background: rgba(255, 255, 255, 0.28); }
.rg2-card:hover .rg2-card__btn-arrow { transform: translateX(-4px); }
html[dir="ltr"] .rg2-card:hover .rg2-card__btn-arrow { transform: translateX(4px); }
/* Trust badges row */
.rg2-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-5);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px dashed rgba(24, 60, 100, 0.10);
}
.rg2-trust__item {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--navy-500);
font-size: var(--text-sm);
font-weight: 500;
}
.rg2-trust__item i {
width: 32px; height: 32px;
background: rgba(192, 148, 94, 0.10);
color: var(--pink-500, #C0945E);
border-radius: 10px;
display: grid;
place-items: center;
font-size: 13px;
}
/* HOW IT WORKS */
.rg2-howto {
padding: var(--space-12) 0 var(--space-16);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
position: relative;
overflow: hidden;
}
.rg2-howto::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 700px; height: 400px;
background: radial-gradient(ellipse, rgba(192, 148, 94, 0.06), transparent 70%);
transform: translate(-50%, -50%);
pointer-events: none;
}
.rg2-howto__head { text-align: center; margin-bottom: var(--space-8); }
.rg2-howto__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.08em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.rg2-howto__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
color: var(--navy-700);
margin: 0;
font-weight: 800;
}
.rg2-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
position: relative;
}
@media (max-width: 768px) { .rg2-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rg2-steps { grid-template-columns: 1fr; } }
/* Connecting dashed line */
.rg2-steps::before {
content: "";
position: absolute;
top: 28px;
inset-inline-start: 12.5%;
width: 75%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--pink-300, #C0945E) 0, var(--pink-300, #C0945E) 6px, transparent 6px, transparent 14px);
opacity: 0.35;
z-index: 0;
}
@media (max-width: 768px) { .rg2-steps::before { display: none; } }
.rg2-step {
position: relative;
background: #fff;
padding: var(--space-6) var(--space-4);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.05);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
z-index: 1;
}
.rg2-step:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 18px 38px rgba(192, 148, 94, 0.15);
}
.rg2-step__num {
position: absolute;
top: -14px;
inset-inline-end: -14px;
width: 32px; height: 32px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-sm);
border: 3px solid #fff;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.40);
}
.rg2-step__icon {
display: inline-flex;
width: 56px; height: 56px;
background: linear-gradient(135deg, rgba(192, 148, 94, 0.12), rgba(217, 181, 126, 0.06));
color: var(--pink-500, #C0945E);
border-radius: 50%;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: var(--space-3);
transition: all var(--dur-base);
}
.rg2-step:hover .rg2-step__icon {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
transform: scale(1.08) rotate(-6deg);
}
.rg2-step__title {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 800;
}
.rg2-step__desc {
margin: 0;
font-size: var(--text-sm);
color: var(--navy-500);
line-height: var(--leading-relaxed);
}
/* Bottom CTA */
.rg2-howto__cta { text-align: center; margin-top: var(--space-8); }
.btn-cta--ghost-dark {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: #fff;
border: 1.5px solid rgba(24, 60, 100, 0.10);
color: var(--navy-700);
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
}
.btn-cta--ghost-dark:hover {
border-color: var(--pink-300, #C0945E);
color: var(--pink-600, #DA32B4);
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(192, 148, 94, 0.18);
}
.btn-cta--ghost-dark i { color: var(--pink-500, #C0945E); }
/* Responsive */
@media (max-width: 600px) {
.rg2-card { min-height: auto; padding: var(--space-6); }
.rg2-card__icon-wrap { width: 80px; height: 80px; }
.rg2-card__icon { font-size: 32px; }
.rg2-trust { gap: var(--space-4); }
}
/* ════════════════════════════════════════════════════════════
REGISTER — Account Choice Page (login vs new account)
════════════════════════════════════════════════════════════ */
.reg-choice__cards {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.reg-choice-card {
position: relative;
display: flex;
gap: var(--space-4);
align-items: center;
padding: var(--space-5);
background: #fff;
border: 1.5px solid rgba(24, 60, 100, 0.10);
border-radius: 18px;
text-decoration: none;
transition: all var(--dur-base) var(--ease-out);
overflow: hidden;
}
.reg-choice-card::before {
content: "";
position: absolute;
top: 0; inset-inline-start: 0;
width: 4px; height: 100%;
background: var(--gradient-pink-soft);
transform: scaleY(0);
transform-origin: top;
transition: transform var(--dur-base) var(--ease-out);
}
.reg-choice-card:hover {
transform: translateY(-4px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 16px 38px rgba(192, 148, 94, 0.18);
}
.reg-choice-card:hover::before { transform: scaleY(1); }
.reg-choice-card__icon {
width: 64px; height: 64px;
flex-shrink: 0;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 26px;
color: #fff;
transition: all var(--dur-base);
}
.reg-choice-card--new .reg-choice-card__icon {
background: linear-gradient(135deg, #C0945E, #D9B57E);
box-shadow: 0 10px 24px rgba(192, 148, 94, 0.40);
}
.reg-choice-card--login .reg-choice-card__icon {
background: linear-gradient(135deg, #183C64, #25557A);
box-shadow: 0 10px 24px rgba(24, 60, 100, 0.40);
}
.reg-choice-card:hover .reg-choice-card__icon { transform: scale(1.08) rotate(-6deg); }
.reg-choice-card__body { flex: 1; }
.reg-choice-card__eyebrow {
display: block;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
color: var(--pink-600, #DA32B4);
margin-bottom: 4px;
}
.reg-choice-card--login .reg-choice-card__eyebrow { color: var(--navy-600); }
.reg-choice-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 800;
}
.reg-choice-card__desc {
color: var(--navy-500);
font-size: var(--text-sm);
margin: 0 0 10px;
line-height: var(--leading-relaxed);
}
.reg-choice-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-600, #DA32B4);
font-weight: 700;
font-size: var(--text-sm);
transition: gap var(--dur-base);
}
.reg-choice-card--login .reg-choice-card__cta { color: var(--navy-600); }
.reg-choice-card:hover .reg-choice-card__cta { gap: 12px; }
/* Helper info: "How does enrollment work?" */
.reg-choice__info {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
background: linear-gradient(135deg, rgba(192, 148, 94, 0.05), rgba(217, 181, 126, 0.02));
border: 1px dashed rgba(192, 148, 94, 0.25);
border-radius: var(--radius-md);
}
.reg-choice__info-icon {
width: 40px; height: 40px;
flex-shrink: 0;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 16px;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.30);
}
.reg-choice__info strong {
display: block;
font-family: var(--font-display);
color: var(--navy-700);
font-size: var(--text-md);
margin-bottom: var(--space-3);
font-weight: 800;
}
.reg-choice__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.reg-choice__steps li {
display: flex;
align-items: center;
gap: 10px;
color: var(--navy-600);
font-size: var(--text-sm);
line-height: 1.5;
}
.reg-choice__step-num {
width: 24px; height: 24px;
flex-shrink: 0;
background: #fff;
border: 1.5px solid var(--pink-300, #C0945E);
color: var(--pink-600, #DA32B4);
border-radius: 50%;
display: inline-grid;
place-items: center;
font-size: var(--text-xs);
font-weight: 800;
}
.reg-choice__steps a {
color: var(--pink-500, #C0945E);
text-decoration: underline;
text-decoration-color: rgba(192, 148, 94, 0.30);
text-underline-offset: 3px;
}
.reg-choice__steps a:hover { text-decoration-color: var(--pink-500, #C0945E); }
/* Guest CTA alt — under main button on course sidebar */
.sc-side-card__alt {
text-align: center;
font-size: var(--text-sm);
color: var(--navy-500);
margin: var(--space-3) 0 0;
}
.sc-side-card__alt a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--pink-600, #DA32B4);
font-weight: 700;
text-decoration: none;
margin-inline-start: 4px;
transition: color var(--dur-base);
}
.sc-side-card__alt a:hover { color: var(--pink-500, #C0945E); }
.sc-side-card__alt a i { font-size: 12px; }
/* ════════════════════════════════════════════════════════════
REGISTER PAGE — extras (trust block)
════════════════════════════════════════════════════════════ */
.reg-trust {
margin-top: auto;
padding-top: var(--space-5);
border-top: 1px dashed rgba(255, 255, 255, 0.12);
display: grid;
gap: 10px;
}
.reg-trust__row {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.78);
}
.reg-trust__row i {
width: 32px; height: 32px;
display: grid;
place-items: center;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.30);
color: #4ADE80;
border-radius: 10px;
font-size: 13px;
flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════
COURSES — Archive + Single (Premium)
════════════════════════════════════════════════════════════ */
/* HERO */
.courses-hero {
position: relative;
padding: var(--space-12) 0 var(--space-10);
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
text-align: center;
}
.courses-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.courses-hero__deco--blob1 {
top: -140px; inset-inline-end: -100px;
width: 460px; height: 460px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.20), transparent 60%);
filter: blur(50px);
}
.courses-hero__deco--blob2 {
bottom: -120px; inset-inline-start: -100px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.12), transparent 65%);
filter: blur(50px);
}
.courses-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
opacity: 0.6;
}
.courses-hero__float { position: absolute; pointer-events: none; opacity: 0.6; z-index: 0; }
.courses-hero__float--1 { top: 18%; inset-inline-start: 8%; width: 60px; height: 60px; animation: bubble-float 7s ease-in-out infinite; }
.courses-hero__float--2 { bottom: 16%; inset-inline-end: 10%; width: 44px; height: 44px; animation: bubble-float 8s ease-in-out infinite 1.5s; }
.courses-hero__inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.courses-hero__inner > * { flex-shrink: 0; width: max-content; max-width: 100%; }
.courses-hero__inner .contact-crumb { margin-bottom: var(--space-6); }
.courses-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.10em;
font-weight: 700;
color: var(--pink-600, #DA32B4);
text-transform: uppercase;
background: rgba(192, 148, 94, 0.12);
padding: 8px 16px;
border-radius: var(--radius-full);
margin-bottom: var(--space-4);
}
.courses-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 5vw, 64px);
line-height: 1.1;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
width: 100% !important;
max-width: 800px !important;
}
.courses-hero__title-accent {
background: linear-gradient(90deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.courses-hero__lead {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-6);
line-height: var(--leading-relaxed);
width: 100% !important;
max-width: 700px !important;
}
.courses-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.courses-hero__stat {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.10);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: 0 6px 18px rgba(24, 60, 100, 0.06);
}
.courses-hero__stat i { color: var(--pink-500, #C0945E); font-size: 14px; }
.courses-hero__stat strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
line-height: 1;
}
.courses-hero__stat span { font-size: var(--text-xs); color: var(--navy-400); }
/* Filter chips (links) */
.courses-filters {
padding: var(--space-4) 0;
background: #fff;
position: sticky;
top: 0;
z-index: 10;
border-block: 1px solid rgba(24, 60, 100, 0.06);
}
.courses-filters .gallery-chip {
text-decoration: none;
}
/* Toolbar */
.courses-toolbar { padding: var(--space-6) 0 var(--space-3); background: #fff; }
.courses-toolbar__inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.courses-toolbar__count {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--navy-500);
font-size: var(--text-sm);
}
.courses-toolbar__count i { color: var(--pink-500, #C0945E); }
.courses-toolbar__count strong { color: var(--navy-700); font-weight: 800; }
.courses-toolbar__form { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.courses-toolbar__group {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1.5px solid rgba(24, 60, 100, 0.10);
border-radius: var(--radius-full);
padding: 6px 14px;
transition: border-color var(--dur-base);
}
.courses-toolbar__group:hover { border-color: var(--pink-300, #C0945E); }
.courses-toolbar__group label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
color: var(--navy-500);
font-weight: 600;
}
.courses-toolbar__group label i { color: var(--pink-500, #C0945E); }
.courses-toolbar__group select {
background: transparent;
border: 0;
outline: 0;
font-size: var(--text-sm);
color: var(--navy-700);
font-weight: 600;
font-family: var(--font-body);
cursor: pointer;
}
.courses-toolbar__reset {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-600, #DA32B4);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
padding: 6px 12px;
border-radius: var(--radius-full);
transition: background var(--dur-base);
}
.courses-toolbar__reset:hover { background: rgba(192, 148, 94, 0.08); }
/* Grid */
.courses-listing { padding: var(--space-5) 0 var(--space-16); background: #fff; }
.courses-grid-v2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
@media (max-width: 1024px) { .courses-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .courses-grid-v2 { grid-template-columns: 1fr; } }
.cc-card {
background: #fff;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 28px rgba(24, 60, 100, 0.06);
display: flex;
flex-direction: column;
transition: all var(--dur-base) var(--ease-out);
}
.cc-card:hover {
transform: translateY(-6px);
border-color: var(--pink-300, #C0945E);
box-shadow: 0 20px 44px rgba(192, 148, 94, 0.18);
}
.cc-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
}
.cc-card__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms var(--ease-out);
}
.cc-card:hover .cc-card__media img { transform: scale(1.06); }
.cc-card__placeholder {
width: 100%; height: 100%;
display: grid; place-items: center;
color: var(--pink-300, #C0945E);
font-size: 56px;
opacity: 0.4;
}
.cc-card__cat {
position: absolute;
top: 12px; inset-inline-start: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 12px;
border-radius: var(--radius-full);
color: var(--pink-600, #DA32B4);
font-size: 11px;
font-weight: 700;
}
.cc-card__cat i { font-size: 9px; }
.cc-card__cert {
position: absolute;
top: 12px; inset-inline-end: 12px;
width: 36px; height: 36px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 13px;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.45);
}
.cc-card__body {
padding: var(--space-5);
display: flex;
flex-direction: column;
flex: 1;
}
.cc-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 8px;
font-weight: 800;
line-height: 1.3;
}
.cc-card__title a { color: inherit; text-decoration: none; transition: color var(--dur-base); }
.cc-card:hover .cc-card__title a { color: var(--pink-600, #DA32B4); }
.cc-card__excerpt {
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-4);
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cc-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--navy-500);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px dashed rgba(24, 60, 100, 0.08);
}
.cc-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-card__meta i { color: var(--pink-500, #C0945E); font-size: 10px; }
.cc-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.cc-card__price { display: inline-flex; align-items: baseline; gap: 5px; }
.cc-card__price-old {
font-size: var(--text-xs);
color: var(--navy-400);
text-decoration: line-through;
}
.cc-card__price strong {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--pink-600, #DA32B4);
font-weight: 800;
line-height: 1;
}
.cc-card__price small { color: var(--navy-500); font-size: var(--text-xs); }
.cc-card__price--free { color: #22C55E !important; }
.cc-card__btn {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pink-600, #DA32B4);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: gap var(--dur-base);
}
.cc-card__btn:hover { gap: 10px; }
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 8px;
margin-top: var(--space-8);
flex-wrap: wrap;
}
.pagination .page-numbers {
display: inline-grid;
place-items: center;
min-width: 40px; height: 40px;
padding: 0 12px;
border: 1.5px solid rgba(24, 60, 100, 0.10);
border-radius: var(--radius-full);
color: var(--navy-600);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
}
.pagination .page-numbers:hover { border-color: var(--pink-300, #C0945E); color: var(--pink-600, #DA32B4); }
.pagination .page-numbers.current {
background: linear-gradient(135deg, #C0945E, #D9B57E);
border-color: transparent;
color: #fff;
box-shadow: 0 8px 18px rgba(192, 148, 94, 0.40);
}
/* ════════════════════════════════════════════════════════════
SINGLE COURSE
════════════════════════════════════════════════════════════ */
.sc-hero {
position: relative;
padding: var(--space-10) 0;
background: linear-gradient(180deg, #FFF9FC 0%, #FFFFFF 100%);
overflow: hidden;
}
.sc-hero__deco { position: absolute; pointer-events: none; z-index: 0; }
.sc-hero__deco--blob1 {
top: -100px; inset-inline-end: -100px;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(192, 148, 94, 0.18), transparent 60%);
filter: blur(60px);
}
.sc-hero__deco--blob2 {
bottom: -100px; inset-inline-start: -100px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(24, 60, 100, 0.10), transparent 65%);
filter: blur(60px);
}
.sc-hero__deco--grid {
inset: 0;
background-image:
linear-gradient(rgba(24,60,100,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(24,60,100,0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(circle at 30% 50%, #000 20%, transparent 70%);
-webkit-mask-image: radial-gradient(circle at 30% 50%, #000 20%, transparent 70%);
opacity: 0.7;
}
.sc-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-8);
align-items: center;
}
.sc-hero__badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: var(--space-5) 0 var(--space-4);
}
.sc-hero__badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
color: var(--navy-600);
box-shadow: 0 4px 12px rgba(24, 60, 100, 0.06);
}
.sc-hero__badge i { font-size: 11px; color: var(--pink-500, #C0945E); }
.sc-hero__badge--cat {
background: rgba(192, 148, 94, 0.10);
color: var(--pink-600, #DA32B4);
border-color: rgba(192, 148, 94, 0.20);
}
.sc-hero__badge--cert {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-color: transparent;
}
.sc-hero__badge--cert i { color: #fff; }
.sc-hero__badge--off {
background: linear-gradient(135deg, #22C55E, #15803D);
color: #fff;
border-color: transparent;
}
.sc-hero__badge--off i { color: #fff; }
.sc-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4.5vw, 52px);
line-height: 1.12;
font-weight: 800;
color: var(--navy-700);
margin: 0 0 var(--space-4);
}
.sc-hero__subtitle {
font-size: var(--text-md);
color: var(--navy-500);
margin: 0 0 var(--space-5);
line-height: var(--leading-relaxed);
max-width: 620px;
}
.sc-hero__quick-meta {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
}
.sc-hero__quick-meta li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
color: var(--navy-600);
}
.sc-hero__quick-meta li i {
width: 32px; height: 32px;
display: grid;
place-items: center;
background: rgba(192, 148, 94, 0.10);
color: var(--pink-500, #C0945E);
border-radius: 10px;
font-size: 13px;
}
.sc-hero__quick-meta li strong {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
font-weight: 800;
}
/* Hero media */
.sc-hero__media {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 24px 50px -10px rgba(24, 60, 100, 0.30), 0 8px 18px rgba(192, 148, 94, 0.10);
background: #fff;
aspect-ratio: 16 / 11;
}
.sc-hero__video,
.sc-hero__thumb { width: 100%; height: 100%; }
.sc-hero__video iframe,
.sc-hero__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
border: 0;
}
.sc-hero__placeholder {
width: 100%; height: 100%;
display: grid;
place-items: center;
background: linear-gradient(135deg, #FFF1FA, #F5DCF0);
color: var(--pink-400, #D9B57E);
font-size: 80px;
}
/* Main grid */
.sc-main { padding: var(--space-8) 0 var(--space-16); background: #fff; }
.sc-main__grid {
display: grid;
grid-template-columns: 1.7fr 1fr;
gap: var(--space-8);
align-items: start;
}
/* Tabs */
.sc-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px;
background: rgba(24, 60, 100, 0.04);
border-radius: var(--radius-full);
margin-bottom: var(--space-7);
border: 1px solid rgba(24, 60, 100, 0.06);
}
.sc-tabs__link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--radius-full);
color: var(--navy-600);
font-weight: 600;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
}
.sc-tabs__link i { font-size: 12px; color: var(--pink-500, #C0945E); }
.sc-tabs__link:hover { background: rgba(192, 148, 94, 0.06); color: var(--pink-600, #DA32B4); }
.sc-tabs__link.is-active {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.40);
}
.sc-tabs__link.is-active i { color: #fff; }
/* Section */
.sc-section { padding: var(--space-7) 0; scroll-margin-top: 80px; }
.sc-section + .sc-section { border-top: 1px solid rgba(24, 60, 100, 0.08); }
.sc-section__head { margin-bottom: var(--space-5); }
.sc-section__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pink-600, #DA32B4);
font-weight: 700;
margin-bottom: var(--space-2);
}
.sc-section__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 2.6vw, var(--text-2xl));
color: var(--navy-700);
margin: 0;
font-weight: 800;
}
.sc-section__desc { color: var(--navy-400); font-size: var(--text-sm); margin: 6px 0 0; }
.sc-section__lead {
font-size: var(--text-md);
color: var(--navy-600);
line-height: var(--leading-relaxed);
padding: var(--space-4) var(--space-5);
background: linear-gradient(180deg, rgba(192, 148, 94, 0.06), transparent);
border-inline-start: 3px solid var(--pink-400, #D9B57E);
border-radius: var(--radius-md);
margin: 0 0 var(--space-4);
}
.sc-section__body { color: var(--navy-600); font-size: var(--text-md); line-height: 1.9; }
.sc-section__body > * + * { margin-top: var(--space-3); }
.sc-section__body h2, .sc-section__body h3 { color: var(--navy-700); font-weight: 800; }
.sc-section__body a { color: var(--pink-500, #C0945E); }
/* Outcomes */
.sc-outcomes {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 600px) { .sc-outcomes { grid-template-columns: 1fr; } }
.sc-outcomes li {
display: flex;
align-items: flex-start;
gap: 12px;
background: linear-gradient(135deg, rgba(192, 148, 94, 0.04), transparent);
border: 1px solid rgba(192, 148, 94, 0.10);
padding: 14px 16px;
border-radius: var(--radius-md);
color: var(--navy-700);
font-size: var(--text-sm);
line-height: 1.5;
}
.sc-outcomes__check {
width: 26px; height: 26px;
flex-shrink: 0;
background: linear-gradient(135deg, #22C55E, #15803D);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 11px;
font-weight: 900;
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35);
}
/* Prereqs */
.sc-prereqs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
.sc-prereqs li {
display: flex;
align-items: center;
gap: 12px;
color: var(--navy-600);
font-size: var(--text-sm);
padding: 10px 14px;
background: rgba(24, 60, 100, 0.03);
border-radius: var(--radius-md);
}
.sc-prereqs li i { color: var(--pink-500, #C0945E); font-size: 10px; }
/* Modules accordion */
.sc-modules {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
counter-reset: sc-module;
}
.sc-modules__item details {
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
border-radius: var(--radius-md);
transition: all var(--dur-base);
}
.sc-modules__item details[open] { border-color: var(--pink-300, #C0945E); box-shadow: 0 10px 28px rgba(192, 148, 94, 0.10); }
.sc-modules__item summary {
list-style: none;
cursor: pointer;
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: 700;
}
.sc-modules__item summary::-webkit-details-marker { display: none; }
.sc-modules__num {
width: 32px; height: 32px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 10px;
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.30);
}
.sc-modules__title { flex: 1; color: var(--navy-700); font-size: var(--text-md); }
.sc-modules__arrow { color: var(--navy-400); transition: transform var(--dur-base); }
.sc-modules__item details[open] .sc-modules__arrow { transform: rotate(180deg); color: var(--pink-500, #C0945E); }
.sc-modules__desc {
margin: 0;
padding: 0 var(--space-5) var(--space-5) calc( var(--space-5) + 44px );
color: var(--navy-500);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
/* Schedule */
.sc-schedule {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 600px) { .sc-schedule { grid-template-columns: 1fr; } }
.sc-schedule__pill {
display: flex;
align-items: center;
gap: var(--space-3);
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border: 1px solid rgba(192, 148, 94, 0.10);
border-radius: var(--radius-md);
padding: var(--space-4);
transition: all var(--dur-base);
}
.sc-schedule__pill:hover { border-color: var(--pink-300, #C0945E); transform: translateY(-2px); }
.sc-schedule__pill > i {
width: 40px; height: 40px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 15px;
flex-shrink: 0;
box-shadow: 0 6px 14px rgba(192, 148, 94, 0.30);
}
.sc-schedule__pill span {
display: block;
font-size: var(--text-xs);
color: var(--navy-400);
margin-bottom: 3px;
}
.sc-schedule__pill strong {
font-family: var(--font-display);
font-size: var(--text-md);
color: var(--navy-700);
font-weight: 800;
}
/* Instructor card */
.sc-instructors { display: grid; gap: var(--space-4); }
.sc-instructor {
display: grid;
grid-template-columns: 120px 1fr;
gap: var(--space-5);
background: linear-gradient(135deg, #FFF9FC, #FAF4F7);
border: 1px solid rgba(192, 148, 94, 0.10);
border-radius: var(--radius-lg);
padding: var(--space-5);
align-items: center;
}
@media (max-width: 600px) { .sc-instructor { grid-template-columns: 80px 1fr; gap: var(--space-3); } }
.sc-instructor__photo {
width: 120px; height: 120px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 10px 26px rgba(192, 148, 94, 0.25);
background: linear-gradient(135deg, #C0945E, #D9B57E);
display: grid; place-items: center;
color: #fff;
font-size: 36px;
}
.sc-instructor__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 600px) { .sc-instructor__photo { width: 80px; height: 80px; } }
.sc-instructor__name {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 800;
}
.sc-instructor__name a { color: inherit; text-decoration: none; }
.sc-instructor__name a:hover { color: var(--pink-600, #DA32B4); }
.sc-instructor__specialty {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(192, 148, 94, 0.10);
color: var(--pink-600, #DA32B4);
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
margin-bottom: var(--space-3);
}
.sc-instructor__bio { color: var(--navy-500); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
/* Resources */
.sc-resources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-resources li a {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: rgba(24, 60, 100, 0.03);
border: 1px solid rgba(24, 60, 100, 0.05);
border-radius: var(--radius-md);
color: var(--navy-700);
font-weight: 600;
text-decoration: none;
transition: all var(--dur-base);
}
.sc-resources li a:hover {
background: linear-gradient(135deg, rgba(192, 148, 94, 0.06), transparent);
border-color: var(--pink-300, #C0945E);
transform: translateX(-4px);
}
html[dir="ltr"] .sc-resources li a:hover { transform: translateX(4px); }
.sc-resources li a > i:first-child {
width: 38px; height: 38px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
border-radius: 10px;
display: grid;
place-items: center;
font-size: 16px;
flex-shrink: 0;
}
.sc-resources li a span { flex: 1; }
.sc-resources__dl { color: var(--pink-500, #C0945E); }
/* Side card (sticky pricing) */
.sc-side { position: sticky; top: 90px; }
.sc-side-card {
position: relative;
background: #fff;
border: 1px solid rgba(24, 60, 100, 0.08);
border-radius: 24px;
padding: var(--space-6);
box-shadow: 0 20px 50px -20px rgba(24, 60, 100, 0.20), 0 8px 18px rgba(192, 148, 94, 0.10);
overflow: visible;
}
.sc-side-card__discount {
position: absolute;
top: -14px; inset-inline-end: 16px;
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
padding: 6px 14px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 800;
letter-spacing: 0.04em;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.45);
}
.sc-side-card__discount i { font-size: 10px; }
.sc-side-card__price {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
margin-bottom: var(--space-3);
}
.sc-side-card__price-old {
font-size: var(--text-md);
color: var(--navy-400);
text-decoration: line-through;
}
.sc-side-card__price-now {
font-family: var(--font-display);
font-size: clamp(var(--text-3xl), 4vw, 52px);
background: linear-gradient(135deg, #C0945E, #D9B57E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 800;
line-height: 1;
}
.sc-side-card__price-cur {
font-size: var(--text-md);
color: var(--navy-500);
font-weight: 600;
}
.sc-side-card__price-free {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: #22C55E;
font-weight: 800;
}
.sc-side-card__installment {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
color: var(--navy-500);
margin-bottom: var(--space-4);
padding: 10px 14px;
background: rgba(24, 60, 100, 0.04);
border-radius: var(--radius-md);
}
.sc-side-card__installment i { color: var(--pink-500, #C0945E); }
.sc-side-card__installment strong { color: var(--navy-700); font-weight: 800; }
.sc-side-card__btn {
width: 100%;
justify-content: center;
margin-bottom: var(--space-4);
}
.sc-side-card__btn[disabled] { opacity: 0.7; cursor: not-allowed; }
.sc-side-card__features {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
border-top: 1px dashed rgba(24, 60, 100, 0.10);
padding-top: var(--space-4);
display: grid;
gap: 12px;
}
.sc-side-card__features li {
display: flex;
align-items: center;
gap: 12px;
color: var(--navy-600);
font-size: var(--text-sm);
}
.sc-side-card__features li i {
width: 32px; height: 32px;
background: rgba(192, 148, 94, 0.10);
color: var(--pink-500, #C0945E);
border-radius: 10px;
display: grid;
place-items: center;
font-size: 13px;
flex-shrink: 0;
}
.sc-side-card__features li strong { color: var(--navy-700); font-weight: 800; }
.sc-side-card__features li small {
display: block;
font-size: var(--text-xs);
color: var(--navy-400);
margin-top: 2px;
}
.sc-side-card__chat {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
background: linear-gradient(135deg, #25D366, #128C7E);
color: #fff;
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
margin-bottom: var(--space-3);
box-shadow: 0 10px 22px rgba(37, 211, 102, 0.35);
transition: transform var(--dur-base);
}
.sc-side-card__chat:hover { transform: translateY(-3px); }
.sc-side-card__chat i { font-size: 16px; }
.sc-side-card__share {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: var(--space-3);
border-top: 1px dashed rgba(24, 60, 100, 0.10);
}
.sc-side-card__share > span {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--navy-500);
font-size: var(--text-xs);
font-weight: 600;
margin-inline-end: 4px;
}
.sc-side-card__share > span i { color: var(--pink-500, #C0945E); }
.sc-side-card__share a {
width: 32px; height: 32px;
display: grid;
place-items: center;
background: rgba(24, 60, 100, 0.05);
color: var(--navy-600);
border-radius: 50%;
text-decoration: none;
font-size: 12px;
transition: all var(--dur-base);
}
.sc-side-card__share a:hover { transform: translateY(-2px); color: #fff; }
.sc-side-card__share a[aria-label="X"]:hover { background: #000; }
.sc-side-card__share a[aria-label="Facebook"]:hover { background: #1877F2; }
.sc-side-card__share a[aria-label="WhatsApp"]:hover { background: #25D366; }
/* Related */
.sc-related {
padding: var(--space-12) 0 var(--space-16);
background: linear-gradient(180deg, #FFFFFF 0%, #FAF4F7 100%);
}
/* Responsive */
@media (max-width: 1024px) {
.sc-hero__inner { grid-template-columns: 1fr; }
.sc-hero__media { order: -1; }
.sc-main__grid { grid-template-columns: 1fr; }
.sc-side { position: static; }
}
@media (max-width: 600px) {
.courses-hero__float { display: none; }
.sc-section { padding: var(--space-5) 0; }
.sc-hero { padding: var(--space-8) 0; }
}
/* ════════════════════════════════════════════════════════════
SINGLE COURSE — Enrollment Status Block
════════════════════════════════════════════════════════════ */
.sc-status {
display: flex;
align-items: center;
gap: 14px;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
border: 1.5px solid transparent;
}
.sc-status__icon {
position: relative;
width: 48px; height: 48px;
flex-shrink: 0;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 20px;
}
.sc-status__body { flex: 1; min-width: 0; }
.sc-status__body strong {
display: block;
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 800;
margin-bottom: 2px;
line-height: 1.3;
}
.sc-status__body span {
display: block;
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
opacity: 0.85;
}
/* Enrolled (success — green) */
.sc-status--enrolled {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(21, 128, 61, 0.04));
border-color: rgba(34, 197, 94, 0.25);
}
.sc-status--enrolled .sc-status__icon {
background: linear-gradient(135deg, #22C55E, #15803D);
color: #fff;
box-shadow: 0 8px 20px rgba(34, 197, 94, 0.40);
}
.sc-status--enrolled .sc-status__body strong { color: #15803D; }
.sc-status--enrolled .sc-status__body span { color: #166534; }
/* Pending (info — pink with animated pulse) */
.sc-status--pending {
background: linear-gradient(135deg, rgba(192, 148, 94, 0.08), rgba(217, 181, 126, 0.04));
border-color: rgba(192, 148, 94, 0.25);
}
.sc-status--pending .sc-status__icon {
background: linear-gradient(135deg, #C0945E, #D9B57E);
color: #fff;
box-shadow: 0 8px 20px rgba(192, 148, 94, 0.40);
}
.sc-status--pending .sc-status__pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(192, 148, 94, 0.50);
animation: sc-status-pulse 1.8s ease-out infinite;
}
@keyframes sc-status-pulse {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.30); opacity: 0; }
}
.sc-status--pending .sc-status__body strong { color: var(--pink-700, #7E5F38); }
.sc-status--pending .sc-status__body span { color: var(--pink-800, #5F4628); }
/* Closed (neutral — gray) */
.sc-status--closed {
background: linear-gradient(135deg, rgba(24, 60, 100, 0.05), rgba(24, 60, 100, 0.02));
border-color: rgba(24, 60, 100, 0.15);
}
.sc-status--closed .sc-status__icon {
background: linear-gradient(135deg, #6B89A3, #34638C);
color: #fff;
box-shadow: 0 8px 20px rgba(52, 99, 140, 0.30);
}
.sc-status--closed .sc-status__body strong { color: var(--navy-700, #183C64); }
.sc-status--closed .sc-status__body span { color: var(--navy-500, #34638C); }
/* Cancelled */
.sc-status--cancelled {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02));
border-color: rgba(239, 68, 68, 0.20);
}
.sc-status--cancelled .sc-status__icon {
background: linear-gradient(135deg, #EF4444, #B91C1C);
color: #fff;
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.30);
}
.sc-status--cancelled .sc-status__body strong { color: #B91C1C; }
.sc-status--cancelled .sc-status__body span { color: #991B1B; }
/* Ghost light variant (for sidebar secondary buttons) */
.btn-cta--ghost-light {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: rgba(24, 60, 100, 0.04);
border: 1.5px solid rgba(24, 60, 100, 0.12);
color: var(--navy-700, #183C64);
border-radius: var(--radius-full);
font-weight: 700;
font-size: var(--text-sm);
text-decoration: none;
transition: all var(--dur-base);
justify-content: center;
}
.btn-cta--ghost-light:hover {
background: rgba(192, 148, 94, 0.08);
border-color: var(--pink-300, #C0945E);
color: var(--pink-600, #DA32B4);
}
/* hide legacy contact sections from previous design (keep CSS rules but disable wrappers) */
/* Hero with breadcrumb */
.contact-hero {
position: relative;
padding: var(--space-16) 0 var(--space-20);
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
overflow: hidden;
}
.contact-hero__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(24, 60, 100, 0.55) 0%, rgba(192, 148, 94, 0.35) 100%);
z-index: 0;
}
.contact-hero__inner { position: relative; z-index: 1; }
.contact-hero__breadcrumb {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 8px 18px;
border-radius: var(--radius-full);
border: 1px solid rgba(255, 255, 255, 0.28);
font-size: var(--text-sm);
margin-bottom: var(--space-5);
}
.contact-hero__breadcrumb a {
color: rgba(255, 255, 255, 0.95);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--dur-base);
}
.contact-hero__breadcrumb a:hover { color: #fff; }
.contact-hero__sep { font-size: 11px; opacity: 0.7; }
html[dir="rtl"] .contact-hero__sep { transform: rotate(180deg); }
.contact-hero__breadcrumb > span { color: #fff; font-weight: 600; }
.contact-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
margin: 0 0 var(--space-3);
color: #fff;
font-weight: 700;
text-shadow: 0 4px 24px rgba(24, 60, 100, 0.25);
}
.contact-hero__subtitle {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.92);
max-width: 560px;
margin: 0 auto;
line-height: var(--leading-relaxed);
}
.contact-hero__wave {
position: absolute;
bottom: -1px; left: 0; right: 0;
width: 100%;
height: 60px;
display: block;
z-index: 1;
}
/* Info cards */
.contact-info {
padding: 0 0 var(--space-12);
background: #fff;
position: relative;
margin-top: -40px;
z-index: 2;
}
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-5);
}
.contact-card {
background: #fff;
padding: var(--space-6);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 30px rgba(24, 60, 100, 0.06);
text-align: center;
transition: all var(--dur-base) var(--ease-out);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gradient-pink-soft);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--dur-base) var(--ease-out);
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(192, 148, 94, 0.15);
border-color: var(--pink-300);
}
.contact-card:hover::before { transform: scaleX(1); transform-origin: left; }
.contact-card__icon {
width: 56px; height: 56px;
margin: 0 auto var(--space-4);
background: linear-gradient(135deg, rgba(192, 148, 94, 0.10), rgba(217, 181, 126, 0.10));
border-radius: 50%;
display: inline-grid;
place-items: center;
color: var(--pink-500, #C0945E);
font-size: var(--text-lg);
transition: all var(--dur-base);
}
.contact-card:hover .contact-card__icon {
background: var(--gradient-pink-soft);
color: #fff;
transform: scale(1.08);
}
.contact-card--wa .contact-card__icon {
background: linear-gradient(135deg, rgba(37, 211, 102, 0.10), rgba(37, 211, 102, 0.05));
color: #25D366;
}
.contact-card--wa:hover .contact-card__icon { background: #25D366; color: #fff; }
.contact-card--wa::before { background: linear-gradient(90deg, #25D366, #128C7E); }
.contact-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--navy-700);
margin: 0 0 6px;
font-weight: 600;
}
.contact-card__desc {
font-size: var(--text-sm);
color: var(--navy-400);
margin: 0 0 var(--space-3);
line-height: var(--leading-relaxed);
}
.contact-card__link {
display: inline-block;
font-weight: 600;
color: var(--navy-700);
text-decoration: none;
font-size: var(--text-sm);
word-break: break-word;
transition: color var(--dur-base);
}
.contact-card__link:hover { color: var(--pink-500, #C0945E); }
/* Main grid: form + side */
.contact-main {
padding: var(--space-12) 0 var(--space-20);
background: var(--gradient-pink-cream);
}
.contact-main__grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--space-8);
align-items: start;
}
/* Section head */
.contact-section-head { margin-bottom: var(--space-6); }
.contact-section-head__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(192, 148, 94, 0.12);
color: var(--pink-600, #DA32B4);
font-size: var(--text-xs);
font-weight: 700;
padding: 6px 14px;
border-radius: var(--radius-full);
letter-spacing: 0.04em;
}
.contact-section-head__title {
font-family: var(--font-display);
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
color: var(--navy-700);
margin: var(--space-3) 0 var(--space-2);
font-weight: 600;
}
.contact-section-head__desc {
color: var(--navy-400);
font-size: var(--text-md);
margin: 0;
line-height: var(--leading-relaxed);
}
/* Form block */
.contact-form-block {
background: #fff;
padding: var(--space-8);
border-radius: var(--radius-xl);
box-shadow: 0 12px 40px rgba(24, 60, 100, 0.08);
border: 1px solid rgba(192, 148, 94, 0.08);
}
/* Iconed form fields */
.lamar-form--iconed .form-field { display: grid; gap: 8px; }
.lamar-form--iconed .form-field > span:first-child {
font-size: var(--text-sm);
font-weight: 600;
color: var(--navy-700);
}
.lamar-form--iconed .form-field__wrap {
position: relative;
display: block;
}
.lamar-form--iconed .form-field__icon {
position: absolute;
inset-inline-start: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--pink-400, #D9B57E);
font-size: var(--text-sm);
pointer-events: none;
transition: color var(--dur-base);
}
.lamar-form--iconed .form-field__wrap--textarea .form-field__icon {
top: 18px;
transform: none;
}
.lamar-form--iconed .form-field input,
.lamar-form--iconed .form-field textarea {
width: 100%;
padding: 14px 16px 14px 44px;
padding-inline-start: 44px;
padding-inline-end: 16px;
border: 1.5px solid rgba(24, 60, 100, 0.12);
border-radius: var(--radius-md);
background: #fafbfc;
color: var(--navy-700);
font-family: var(--font-body);
font-size: var(--text-sm);
transition: all var(--dur-base);
outline: 0;
}
.lamar-form--iconed .form-field textarea { resize: vertical; min-height: 140px; line-height: var(--leading-relaxed); }
.lamar-form--iconed .form-field input::placeholder,
.lamar-form--iconed .form-field textarea::placeholder { color: var(--navy-300); }
.lamar-form--iconed .form-field input:focus,
.lamar-form--iconed .form-field textarea:focus {
background: #fff;
border-color: var(--pink-400, #D9B57E);
box-shadow: 0 0 0 4px rgba(192, 148, 94, 0.10);
}
.lamar-form--iconed .form-field:has(input:focus) .form-field__icon,
.lamar-form--iconed .form-field:has(textarea:focus) .form-field__icon { color: var(--pink-500, #C0945E); }
.lamar-form--iconed .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.lamar-form--iconed button[type="submit"] {
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: center;
margin-top: var(--space-2);
width: 100%;
}
.lamar-form--iconed button[type="submit"] i { font-size: 0.95em; }
/* Side aside */
.contact-side {
display: grid;
gap: var(--space-5);
position: sticky;
top: 100px;
}
.contact-hours {
display: flex;
gap: var(--space-4);
background: #fff;
padding: var(--space-5);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
align-items: flex-start;
}
.contact-hours__icon {
width: 44px; height: 44px;
background: var(--gradient-pink-soft);
border-radius: 12px;
display: grid; place-items: center;
color: #fff;
font-size: var(--text-md);
flex-shrink: 0;
}
.contact-hours__title {
font-family: var(--font-display);
font-size: var(--text-md);
margin: 0 0 4px;
color: var(--navy-700);
font-weight: 600;
}
.contact-hours__text {
margin: 0;
font-size: var(--text-sm);
color: var(--navy-500);
line-height: var(--leading-relaxed);
}
.contact-map {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.10);
border: 4px solid #fff;
line-height: 0;
}
.contact-map iframe { display: block; filter: saturate(0.9); }
.contact-socials {
background: #fff;
padding: var(--space-5);
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 60, 100, 0.08);
box-shadow: 0 8px 24px rgba(24, 60, 100, 0.06);
text-align: center;
}
.contact-socials__title {
font-family: var(--font-display);
font-size: var(--text-md);
margin: 0 0 var(--space-3);
color: var(--navy-700);
font-weight: 600;
}
.contact-socials__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
list-style: none;
padding: 0; margin: 0;
}
.contact-social-icon {
width: 40px; height: 40px;
display: inline-grid;
place-items: center;
border-radius: 50%;
background: rgba(24, 60, 100, 0.04);
color: var(--navy-500);
font-size: var(--text-md);
border: 1px solid rgba(24, 60, 100, 0.08);
transition: all var(--dur-base);
text-decoration: none;
}
.contact-social-icon:hover {
transform: translateY(-3px);
color: #fff;
border-color: transparent;
}
.contact-social-icon--twitter:hover { background: #000; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.contact-social-icon--instagram:hover { background: radial-gradient(circle at 30% 110%, #FED373, #F15245 30%, #D92E7F 60%, #9B36B7 80%, #515ECF); box-shadow: 0 8px 18px rgba(217, 46, 127, .35); }
.contact-social-icon--linkedin:hover { background: #0A66C2; box-shadow: 0 8px 18px rgba(10, 102, 194, .35); }
.contact-social-icon--youtube:hover { background: #FF0000; box-shadow: 0 8px 18px rgba(255, 0, 0, .35); }
.contact-social-icon--tiktok:hover { background: linear-gradient(135deg, #25F4EE 0%, #000 50%, #FE2C55 100%); box-shadow: 0 8px 18px rgba(254, 44, 85, .35); }
.contact-social-icon--snapchat:hover { background: #FFFC00; color: #000; box-shadow: 0 8px 18px rgba(255, 252, 0, .4); }
/* Form alert (success/error) */
.form-alert {
padding: 14px 18px;
border-radius: var(--radius-md);
margin-bottom: var(--space-5);
font-size: var(--text-sm);
font-weight: 500;
}
.form-alert--success { background: rgba(34, 197, 94, 0.12); color: #15803D; border: 1px solid rgba(34, 197, 94, 0.25); }
.form-alert--error { background: rgba(239, 68, 68, 0.10); color: #B91C1C; border: 1px solid rgba(239, 68, 68, 0.25); }
/* Responsive */
@media (max-width: 960px) {
.contact-main__grid { grid-template-columns: 1fr; }
.contact-side { position: static; }
}
@media (max-width: 600px) {
.contact-hero { padding: var(--space-12) 0 var(--space-16); }
.contact-form-block { padding: var(--space-5); }
.lamar-form--iconed .form-row { grid-template-columns: 1fr; }
.contact-info { margin-top: -24px; }
}