/* ============================================
SUEXSA — St. Ursula Ex-Student's Association
Navy & Gold Theme — GOD MODE
============================================ */
/* Fonts are loaded via in each page's for faster first paint. */
/* --- CSS Variables (Light) --- */
:root {
--maroon: #1E2D4D;
--maroon-dark: #152240;
--maroon-light: #2C4066;
--cream: #F5F6F9;
--cream-dark: #E8EBF0;
--gold: #C49A3C;
--gold-light: #D4B05A;
--gold-glow: rgba(196, 154, 60, 0.35);
--brown: #1A2740;
--brown-light: #7B8DA3;
--text-dark: #141E30;
--text-muted: #566B82;
--white: #FFFFFF;
--shadow: 0 2px 16px rgba(30, 45, 77, 0.08);
--shadow-lg: 0 12px 40px rgba(30, 45, 77, 0.14);
--shadow-gold: 0 4px 20px rgba(196, 154, 60, 0.25);
--radius: 12px;
--radius-lg: 18px;
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Dark Mode --- */
[data-theme="dark"] {
--cream: #0F1A2D;
--cream-dark: #162035;
--white: #1A2744;
--text-dark: #E2E8F0;
--text-muted: #94A3B8;
--brown-light: #94A3B8;
--shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] body { background: var(--cream); }
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--gold-light); }
[data-theme="dark"] a { color: var(--gold-light); }
[data-theme="dark"] .card { border-color: rgba(196, 154, 60, 0.1); }
[data-theme="dark"] .testimonial { background: var(--white); }
[data-theme="dark"] .memory-card { background: var(--white); }
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
background: var(--cream-dark);
border-color: rgba(196, 154, 60, 0.2);
color: var(--text-dark);
}
[data-theme="dark"] .directory-table { background: var(--white); }
[data-theme="dark"] .directory-table tbody tr { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .directory-table tbody tr:hover { background: rgba(196, 154, 60, 0.06); }
[data-theme="dark"] .btn-outline { color: var(--gold-light); border-color: var(--gold); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--cream); }
/* --- Dark Mode Toggle --- */
.theme-toggle {
background: none;
border: 1.5px solid rgba(196, 154, 60, 0.3);
color: var(--gold);
width: 38px;
height: 38px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
flex-shrink: 0;
margin-left: 8px;
}
.theme-toggle:hover {
background: rgba(196, 154, 60, 0.15);
border-color: var(--gold);
transform: rotate(20deg);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
background: var(--cream);
color: var(--text-dark);
line-height: 1.7;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--maroon); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
color: var(--maroon);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; }
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
}
/* --- Scroll Reveal Animations --- */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes pulse-gold {
0%, 100% { box-shadow: 0 0 0 0 var(--gold-glow); }
50% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* --- Header & Navigation (Glassmorphism) --- */
.site-header {
background: rgba(30, 45, 77, 0.92);
backdrop-filter: blur(20px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.8);
color: var(--cream);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.15);
border-bottom: none;
transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
background: rgba(21, 34, 64, 0.97);
box-shadow: 0 2px 40px rgba(0, 0, 0, 0.25);
}
.site-header::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, transparent 5%, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent 95%);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 6'%3E%3Cpath d='M0 3 Q180 6 360 3 T720 3 T1080 3 T1440 3 V6 H0Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 6'%3E%3Cpath d='M0 3 Q180 6 360 3 T720 3 T1080 3 T1440 3 V6 H0Z' fill='white'/%3E%3C/svg%3E");
mask-size: cover;
-webkit-mask-size: cover;
opacity: 0.6;
z-index: 999;
}
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
}
.logo-area {
display: flex;
align-items: center;
gap: 12px;
}
.logo-area .crest-logo {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
transition: transform var(--transition);
border: 2px solid rgba(196, 154, 60, 0.3);
}
.logo-area:hover .crest-logo {
transform: rotate(5deg) scale(1.05);
}
.logo-area .crest {
width: 48px;
height: 48px;
background: var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
color: var(--maroon);
flex-shrink: 0;
}
.logo-area .site-title {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--cream);
line-height: 1.3;
letter-spacing: 0.5px;
}
.logo-area .site-title span {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 400;
color: var(--gold-light);
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: 0.85;
}
.nav-toggle {
display: none;
background: none;
border: 2px solid var(--gold);
color: var(--gold);
font-size: 1.5rem;
padding: 4px 10px;
cursor: pointer;
border-radius: 6px;
transition: all var(--transition);
}
.nav-toggle:hover {
background: var(--gold);
color: var(--maroon-dark);
}
.main-nav ul {
display: flex;
list-style: none;
gap: 2px;
flex-wrap: wrap;
}
.main-nav a {
color: rgba(255, 255, 255, 0.85);
padding: 8px 14px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
font-weight: 500;
transition: all var(--transition);
position: relative;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
width: 0;
height: 2px;
background: var(--gold);
transition: all var(--transition);
transform: translateX(-50%);
border-radius: 1px;
}
.main-nav a:hover::after,
.main-nav a.active::after {
width: 60%;
}
.main-nav a:hover {
color: var(--gold-light);
background: rgba(196, 154, 60, 0.1);
}
.main-nav a.active {
color: var(--gold);
background: rgba(196, 154, 60, 0.12);
}
.main-nav a.btn.btn-primary {
background: var(--gold);
color: var(--maroon-dark);
}
.main-nav a.btn.btn-primary::after {
display: none;
}
/* --- Hero Section --- */
.hero {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: var(--cream);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C49A3C' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.hero::after {
content: '';
position: absolute;
bottom: -50%;
left: -10%;
width: 120%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(196, 154, 60, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.hero h1 {
color: var(--cream);
font-size: 3.2rem;
margin-bottom: 16px;
position: relative;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
}
.hero p {
font-family: 'Inter', sans-serif;
font-size: 1.15rem;
color: rgba(212, 176, 90, 0.9);
max-width: 600px;
margin: 0 auto 30px;
position: relative;
font-weight: 300;
line-height: 1.8;
}
.hero .btn {
position: relative;
}
/* --- Buttons --- */
.btn {
display: inline-block;
padding: 13px 34px;
border-radius: 50px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
border: none;
text-align: center;
letter-spacing: 0.3px;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transition: left 0.5s ease;
}
.btn:hover::before {
left: 100%;
}
.btn-primary {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: var(--maroon-dark);
box-shadow: 0 4px 15px rgba(196, 154, 60, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(196, 154, 60, 0.45);
color: var(--maroon-dark);
}
.btn-outline {
background: transparent;
color: var(--cream);
border: 2px solid var(--gold);
}
/* Outlined actions placed on cream/light sections need dark text. */
.btn-outline-dark {
background: transparent;
color: var(--maroon) !important;
border: 2px solid var(--gold);
}
.btn-outline-dark:hover {
background: var(--gold);
color: var(--maroon-dark) !important;
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.btn-outline:hover {
background: var(--gold);
color: var(--maroon-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.btn-maroon {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
color: var(--cream);
border: 1px solid rgba(196, 154, 60, 0.2);
}
.btn-maroon:hover {
background: linear-gradient(135deg, var(--maroon-light) 0%, var(--maroon) 100%);
color: var(--cream);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
/* --- Sections --- */
.section {
padding: 80px 0;
position: relative;
/* Subtle grain texture */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='15' cy='25' r='0.6' fill='%231E2D4D' fill-opacity='0.015'/%3E%3Ccircle cx='65' cy='75' r='0.5' fill='%23C49A3C' fill-opacity='0.015'/%3E%3Ccircle cx='85' cy='15' r='0.4' fill='%231E2D4D' fill-opacity='0.012'/%3E%3Ccircle cx='35' cy='85' r='0.5' fill='%23C49A3C' fill-opacity='0.012'/%3E%3C/svg%3E");
}
.section-alt {
background: var(--cream-dark);
position: relative;
/* Subtle topography texture */
background-image:
linear-gradient(to bottom, var(--cream-dark), var(--cream-dark)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 C30 20, 70 30, 50 50 C30 70, 70 80, 50 100' fill='none' stroke='%23C49A3C' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M0 50 C20 30, 30 70, 50 50 C70 30, 80 70, 100 50' fill='none' stroke='%231E2D4D' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
}
.section-maroon {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: var(--cream);
position: relative;
}
.section-maroon::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/* Elegant diagonal lines texture */
background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 60L60 0M-15 15L15 -15M45 75L75 45' stroke='%23C49A3C' stroke-opacity='0.05' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='1' fill='%23C49A3C' fill-opacity='0.06'/%3E%3C/svg%3E");
pointer-events: none;
}
.section-maroon h2 { color: var(--gold-light); position: relative; }
.section-header {
text-align: center;
margin-bottom: 55px;
}
.section-header h2 {
margin-bottom: 14px;
}
.section-header p {
color: var(--text-muted);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
font-weight: 300;
}
.divider {
width: 80px;
height: 12px;
margin: 14px auto 0;
background: none;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
transform: translateY(-50%);
}
.divider::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
transform: translate(-50%, -50%) rotate(45deg);
box-shadow: -14px 0 0 -2px var(--gold-light), 14px 0 0 -2px var(--gold-light);
}
/* --- Cards (Premium Curvy) --- */
.card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
transition: all var(--transition);
border: 1px solid rgba(30, 45, 77, 0.06);
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 0;
background: linear-gradient(180deg, var(--gold), var(--gold-light));
transition: height var(--transition);
border-radius: 0 0 2px 0;
z-index: 1;
}
.card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(196, 154, 60, 0.15);
}
.card:hover::before {
height: 100%;
}
.card-body {
padding: 28px;
}
.card-img {
width: 100%;
height: 200px;
object-fit: cover;
background: var(--cream-dark);
}
/* --- Grid Layouts --- */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* --- Forms --- */
.form-group {
margin-bottom: 22px;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 6px;
color: var(--maroon);
font-size: 0.92rem;
font-family: 'Inter', sans-serif;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 13px 16px;
border: 2px solid var(--cream-dark);
border-radius: 14px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
background: var(--white);
color: var(--text-dark);
transition: all var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 4px var(--gold-glow);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* --- Stats Bar --- */
.stats-bar {
display: flex;
justify-content: center;
gap: 60px;
padding: 45px 0;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
font-weight: 700;
color: var(--gold);
display: block;
text-shadow: 0 2px 10px rgba(196, 154, 60, 0.2);
}
.stat-label {
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 500;
}
/* Light stats strip (homepage) */
.stats-strip {
background: var(--white);
border-bottom: 1px solid rgba(30, 45, 77, 0.06);
}
.stats-strip .stats-bar {
padding: 34px 0 28px;
}
.stats-strip .stat-number {
color: var(--maroon);
text-shadow: none;
}
.stats-strip .stat-label {
color: var(--text-muted);
}
.stats-strip .stat-item::after {
background: rgba(30, 45, 77, 0.12);
}
/* --- Event Card --- */
.event-card {
display: flex;
gap: 20px;
align-items: flex-start;
}
.event-date-box {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
color: var(--cream);
padding: 14px 18px;
border-radius: var(--radius);
text-align: center;
flex-shrink: 0;
min-width: 72px;
box-shadow: 0 4px 12px rgba(30, 45, 77, 0.2);
}
.event-date-box .month {
font-family: 'Inter', sans-serif;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--gold-light);
font-weight: 600;
}
.event-date-box .day {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
}
/* --- Gallery Grid --- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.gallery-item {
border-radius: var(--radius);
overflow: hidden;
cursor: zoom-in;
position: relative;
}
.gallery-item img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover img {
transform: scale(1.08);
}
.gallery-item .overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(30, 45, 77, 0.85));
color: var(--cream);
padding: 16px;
font-size: 0.9rem;
opacity: 0;
transition: opacity var(--transition);
}
.gallery-item:hover .overlay {
opacity: 1;
}
/* --- Alumni Profile --- */
.alumni-card .card-body {
text-align: center;
}
.alumni-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--cream-dark);
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--maroon);
border: 3px solid var(--gold);
transition: all var(--transition);
}
.card:hover .alumni-avatar {
border-color: var(--gold-light);
box-shadow: 0 0 0 6px var(--gold-glow);
}
.alumni-card h3 { margin-bottom: 4px; }
.alumni-card .batch {
color: var(--gold);
font-size: 0.9rem;
font-weight: 600;
font-family: 'Inter', sans-serif;
}
.alumni-card .profession {
color: var(--text-muted);
font-size: 0.9rem;
margin-top: 8px;
font-family: 'Inter', sans-serif;
}
/* --- News/Blog --- */
.news-card .meta {
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.news-card h3 {
margin-bottom: 10px;
font-size: 1.2rem;
}
.news-card p {
color: var(--text-muted);
font-size: 0.95rem;
}
.read-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 14px;
font-weight: 600;
color: var(--gold);
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
transition: all var(--transition);
}
.read-more:hover {
color: var(--maroon);
gap: 8px;
}
/* --- Donate --- */
.donate-amounts {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.amount-btn {
padding: 12px 28px;
border: 2px solid var(--maroon);
background: var(--white);
color: var(--maroon);
border-radius: var(--radius);
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
}
.amount-btn:hover,
.amount-btn.active {
background: var(--maroon);
color: var(--cream);
box-shadow: 0 4px 12px rgba(30, 45, 77, 0.25);
}
/* --- Directory Table --- */
.directory-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.directory-table thead {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
color: var(--cream);
}
.directory-table th,
.directory-table td {
padding: 14px 18px;
text-align: left;
font-family: 'Inter', sans-serif;
font-size: 0.93rem;
}
.directory-table tbody tr {
border-bottom: 1px solid var(--cream-dark);
transition: background var(--transition);
}
.directory-table tbody tr:hover {
background: rgba(196, 154, 60, 0.04);
}
/* --- Testimonials --- */
.testimonial {
background: var(--white);
padding: 34px;
border-radius: var(--radius);
box-shadow: var(--shadow);
text-align: center;
position: relative;
}
.testimonial::before {
content: '\201C';
font-family: 'Playfair Display', serif;
font-size: 5rem;
color: var(--gold);
position: absolute;
top: -10px;
left: 20px;
line-height: 1;
opacity: 0.6;
}
.testimonial p {
font-style: italic;
color: var(--text-muted);
margin-bottom: 16px;
font-size: 1.05rem;
}
.testimonial .author {
font-weight: 700;
color: var(--maroon);
font-family: 'Playfair Display', serif;
}
.testimonial .batch {
color: var(--gold);
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
}
/* --- Footer --- */
.site-footer {
background: linear-gradient(180deg, var(--maroon-dark) 0%, #0F1A2D 100%);
color: var(--cream);
padding: 60px 0 0;
position: relative;
}
.site-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 6'%3E%3Cpath d='M0 3 Q360 6 720 3 T1440 3 V6 H0Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 6'%3E%3Cpath d='M0 3 Q360 6 720 3 T1440 3 V6 H0Z' fill='white'/%3E%3C/svg%3E");
mask-size: cover;
-webkit-mask-size: cover;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: none;
position: relative;
}
.footer-grid::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.3), rgba(196, 154, 60, 0.15), rgba(196, 154, 60, 0.3), transparent);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 4'%3E%3Cpath d='M0 2 Q200 4 400 2 T800 2 V4 H0Z' fill='white'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 4'%3E%3Cpath d='M0 2 Q200 4 400 2 T800 2 V4 H0Z' fill='white'/%3E%3C/svg%3E");
mask-size: cover;
-webkit-mask-size: cover;
}
.footer-about p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.93rem;
margin-top: 12px;
line-height: 1.7;
}
.site-footer h4 {
font-family: 'Playfair Display', serif;
color: var(--gold-light);
margin-bottom: 18px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
color: rgba(255, 255, 255, 0.6);
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
transition: all var(--transition);
}
.footer-links a:hover {
color: var(--gold);
padding-left: 4px;
}
.footer-bottom {
text-align: center;
padding: 22px 0;
margin-top: 20px;
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.35);
font-family: 'Inter', sans-serif;
letter-spacing: 0.3px;
}
/* --- Lightbox --- */
.lightbox {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 2000;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.lightbox.active { display: flex; }
.lightbox img {
max-width: 90%;
max-height: 85vh;
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 2rem;
cursor: pointer;
background: none;
border: none;
transition: transform var(--transition);
}
.lightbox-close:hover {
transform: rotate(90deg);
}
/* --- Breadcrumb --- */
.breadcrumb {
padding: 16px 0;
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
color: var(--text-muted);
}
.breadcrumb a { color: var(--maroon); font-weight: 500; }
.breadcrumb span { margin: 0 8px; color: var(--gold); }
/* --- Page Banner --- */
.page-banner {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
color: var(--cream);
padding: 55px 0 70px;
text-align: center;
position: relative;
overflow: hidden;
/* Subtle cross-hatch texture */
background-image:
linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%),
url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v20H0z' fill='none'/%3E%3Cpath d='M0 10h20M10 0v20' stroke='%23C49A3C' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E");
}
.page-banner::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 30px;
background: var(--cream);
clip-path: ellipse(55% 100% at 50% 100%);
}
/* Dark mode page-banner curve inherits --cream automatically */
.page-banner h1 {
color: var(--cream);
font-size: 2.6rem;
text-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
}
.page-banner p {
color: rgba(212, 176, 90, 0.85);
margin-top: 8px;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 1.05rem;
}
/* --- Loading Skeleton --- */
.skeleton {
background: linear-gradient(90deg, var(--cream-dark) 25%, var(--cream) 50%, var(--cream-dark) 75%);
background-size: 400% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius);
}
.skeleton-card {
height: 200px;
margin-bottom: 20px;
}
.skeleton-text {
height: 16px;
margin-bottom: 10px;
width: 80%;
}
.skeleton-text.short {
width: 50%;
}
.skeleton-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
}
/* --- Mobile Sticky CTA --- */
.mobile-cta {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(21, 34, 64, 0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 12px 16px;
z-index: 999;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(196, 154, 60, 0.2);
}
.mobile-cta .cta-buttons {
display: flex;
gap: 10px;
}
.mobile-cta .btn {
flex: 1;
padding: 12px 16px;
font-size: 0.9rem;
text-align: center;
border-radius: 10px;
}
/* --- Responsive --- */
@media (max-width: 992px) {
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
.nav-toggle { display: block; }
.main-nav {
display: none;
width: 100%;
padding: 16px 0;
}
.main-nav.open { display: block; }
.main-nav ul {
flex-direction: column;
gap: 2px;
}
.main-nav a {
display: block;
padding: 10px 16px;
}
.main-nav a::after {
display: none;
}
.header-top { flex-wrap: wrap; }
.hero h1 { font-size: 2.2rem; }
.hero { padding: 50px 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.7rem; }
.grid-2,
.grid-3,
.grid-4 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.stats-bar { gap: 30px; }
.event-card { flex-direction: column; }
.section { padding: 55px 0; }
/* Show mobile CTA */
.mobile-cta { display: block; }
/* Add padding at bottom so content isn't hidden behind CTA */
body { padding-bottom: 70px; }
}
/* --- Hero Slideshow --- */
.slideshow {
position: relative;
overflow: hidden;
}
.slideshow .slides {
position: relative;
height: 100%;
}
.slideshow .slide {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 0;
opacity: 0;
transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.slideshow .slide.active {
position: relative;
opacity: 1;
pointer-events: auto;
}
.slide-nav {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 10;
}
.slide-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--gold);
background: transparent;
cursor: pointer;
transition: all var(--transition);
padding: 0;
}
.slide-dot.active {
background: var(--gold);
transform: scale(1.2);
box-shadow: 0 0 8px var(--gold-glow);
}
.slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(8px);
color: white;
border: 1px solid rgba(255, 255, 255, 0.15);
font-size: 1.3rem;
padding: 14px 18px;
cursor: pointer;
z-index: 10;
transition: all var(--transition);
border-radius: 10px;
}
.slide-arrow:hover {
background: rgba(196, 154, 60, 0.3);
border-color: var(--gold);
}
.slide-prev { left: 20px; }
.slide-next { right: 20px; }
@media (max-width: 768px) {
.slide-arrow { display: none; }
}
/* --- Memories Wall --- */
.memories-wall {
columns: 3;
column-gap: 20px;
}
.memory-empty {
column-span: all;
padding: 28px;
text-align: center;
color: var(--text-muted);
background: var(--white);
border: 1px dashed var(--gold);
border-radius: var(--radius);
}
.memory-card {
background: var(--white);
border-radius: var(--radius);
padding: 26px;
margin-bottom: 20px;
break-inside: avoid;
box-shadow: var(--shadow);
border-left: 4px solid var(--gold);
transition: all var(--transition);
}
.memory-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-left-color: var(--gold-light);
}
.memory-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.memory-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
color: var(--cream);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
flex-shrink: 0;
font-family: 'Playfair Display', serif;
}
.memory-header strong {
display: block;
color: var(--maroon);
font-size: 0.93rem;
font-family: 'Inter', sans-serif;
}
.memory-header .batch {
font-size: 0.78rem;
color: var(--gold);
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.memory-card p {
font-style: italic;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.7;
}
.memory-date {
font-size: 0.78rem;
color: var(--brown-light);
margin-top: 10px;
font-family: 'Inter', sans-serif;
}
@media (max-width: 992px) {
.memories-wall { columns: 2; }
}
@media (max-width: 768px) {
.memories-wall { columns: 1; }
}
/* --- Back to Top --- */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-light) 100%);
color: var(--cream);
border: 1px solid rgba(196, 154, 60, 0.2);
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
box-shadow: var(--shadow-lg);
opacity: 0;
visibility: hidden;
transition: all var(--transition);
z-index: 998;
display: flex;
align-items: center;
justify-content: center;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
color: var(--maroon-dark);
transform: translateY(-4px);
box-shadow: var(--shadow-gold);
}
@media (max-width: 768px) {
.back-to-top { bottom: 80px; } /* above mobile CTA */
}
/* --- Social Share --- */
.share-bar {
display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap;
}
.share-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-family: 'Inter', sans-serif;
font-weight: 600;
color: white;
text-decoration: none;
transition: all var(--transition);
}
.share-btn:hover { opacity: 0.85; color: white; transform: translateY(-1px); }
.share-btn.whatsapp { background: #25D366; }
.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #1DA1F2; }
.share-btn.linkedin { background: #0A66C2; }
/* --- Selection Color --- */
::selection {
background: var(--gold);
color: var(--maroon-dark);
}
::-moz-selection {
background: var(--gold);
color: var(--maroon-dark);
}
/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--cream);
}
::-webkit-scrollbar-thumb {
background: var(--maroon-light);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gold);
}
/* --- Hero crest watermark --- */
.hero-crest {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(440px, 80vw);
height: min(440px, 80vw);
object-fit: cover;
border-radius: 50%;
opacity: 0.045;
filter: grayscale(1);
pointer-events: none;
z-index: 1;
user-select: none;
}
.hero .container,
.hero .slides {
position: relative;
z-index: 2;
}
/* Keep dots and arrows pinned inside the banner, above the watermark */
.hero .slide-nav {
position: absolute;
z-index: 5;
}
.hero .slide-arrow {
position: absolute;
z-index: 5;
}
/* --- Hero badge --- */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(196, 154, 60, 0.15);
border: 1px solid rgba(196, 154, 60, 0.3);
color: var(--gold-light);
padding: 8px 20px;
border-radius: 30px;
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
backdrop-filter: blur(10px);
animation: fadeInUp 0.8s ease 0.2s both;
}
.hero-badge .pulse-dot {
width: 8px;
height: 8px;
background: var(--gold);
border-radius: 50%;
animation: pulse-gold 2s ease-in-out infinite;
}
/* --- Gradient text --- */
.gradient-text {
background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 50%, var(--gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- Feature cards (icon-top) --- */
.feature-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(30, 45, 77, 0.08) 0%, rgba(196, 154, 60, 0.08) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 16px;
transition: all var(--transition);
border: 1px solid rgba(196, 154, 60, 0.12);
}
.card:hover .feature-icon {
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
transform: scale(1.08) rotate(-3deg);
box-shadow: var(--shadow-gold);
}
/* --- Timeline --- */
.timeline {
position: relative;
max-width: 700px;
margin: 0 auto;
padding-left: 40px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--gold), var(--maroon-light), transparent);
}
.timeline-item {
position: relative;
margin-bottom: 35px;
padding-left: 20px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -31px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gold);
border: 3px solid var(--cream);
box-shadow: 0 0 0 3px rgba(196, 154, 60, 0.3);
z-index: 1;
}
.timeline-year {
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 700;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.timeline-item h4 {
font-size: 1.1rem;
margin-bottom: 4px;
}
.timeline-item p {
color: var(--text-muted);
font-size: 0.92rem;
}
/* --- Newsletter CTA (glassmorphism) --- */
.newsletter-section {
background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 80%);
position: relative;
padding: 60px 0;
overflow: hidden;
}
.newsletter-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(196, 154, 60, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.newsletter-card {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(196, 154, 60, 0.15);
border-radius: var(--radius-lg);
padding: 45px 50px;
max-width: 600px;
margin: 0 auto;
text-align: center;
position: relative;
}
.newsletter-card h3 {
color: var(--cream);
margin-bottom: 8px;
font-size: 1.6rem;
}
.newsletter-card p {
color: rgba(212, 176, 90, 0.8);
margin-bottom: 24px;
font-size: 0.95rem;
}
.newsletter-form {
display: flex;
gap: 10px;
}
.newsletter-form input[type="email"] {
flex: 1;
padding: 14px 20px;
border: 1px solid rgba(196, 154, 60, 0.3);
background: rgba(255, 255, 255, 0.08);
color: var(--cream);
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 0.95rem;
transition: all var(--transition);
}
.newsletter-form input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(196, 154, 60, 0.2);
background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 768px) {
.newsletter-form { flex-direction: column; }
.newsletter-card { padding: 30px 24px; }
}
/* --- Smooth page entrance --- */
.hero h1,
.hero p,
.hero .btn,
.hero-badge {
animation: fadeInUp 0.8s ease both;
}
.hero h1 { animation-delay: 0.15s; }
.hero p { animation-delay: 0.3s; }
.hero .btn { animation-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
.hero h1, .hero p, .hero .btn, .hero-badge { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* --- Membership pricing cards --- */
.pricing-badge {
display: inline-block;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--maroon-dark);
padding: 4px 14px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
font-family: 'Inter', sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
}
/* --- Glow ring for featured cards --- */
.card-featured {
border: 2px solid var(--gold);
position: relative;
}
.card-featured::after {
content: '';
position: absolute;
inset: -3px;
border-radius: calc(var(--radius) + 3px);
background: linear-gradient(135deg, var(--gold), transparent, var(--gold-light));
z-index: -1;
opacity: 0.3;
filter: blur(8px);
}
/* --- Smooth scrollbar for Firefox --- */
html {
scrollbar-width: thin;
scrollbar-color: var(--maroon-light) var(--cream);
}
/* --- Animated Gradient Border (Newsletter) --- */
@keyframes borderRotate {
0% { --angle: 0deg; }
100% { --angle: 360deg; }
}
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.newsletter-card {
background: rgba(255, 255, 255, 0.06);
position: relative;
}
.newsletter-card::before {
content: '';
position: absolute;
inset: -2px;
border-radius: calc(var(--radius-lg) + 2px);
background: conic-gradient(from var(--angle), var(--gold), transparent 40%, var(--gold-light), transparent 80%, var(--gold));
z-index: -1;
opacity: 0.5;
animation: borderRotate 6s linear infinite;
}
.newsletter-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--radius-lg);
background: rgba(21, 34, 64, 0.95);
z-index: -1;
}
/* --- Testimonial Carousel --- */
.testimonial-carousel {
position: relative;
overflow: hidden;
max-width: 700px;
margin: 0 auto;
}
.testimonial-track {
display: flex;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-track .testimonial {
min-width: 100%;
flex-shrink: 0;
padding: 40px 50px;
box-shadow: none;
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid rgba(30, 45, 77, 0.06);
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 24px;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--gold);
background: transparent;
cursor: pointer;
padding: 0;
transition: all var(--transition);
}
.carousel-dot.active {
background: var(--gold);
transform: scale(1.2);
box-shadow: 0 0 8px var(--gold-glow);
}
.carousel-arrows {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 16px;
}
.carousel-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(30, 45, 77, 0.15);
background: var(--white);
color: var(--maroon);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
font-size: 1rem;
}
.carousel-arrow:hover {
background: var(--gold);
color: var(--maroon-dark);
border-color: var(--gold);
transform: scale(1.1);
}
/* --- Shared Submission Modal --- */
.submit-modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 20px;
}
.submit-modal-overlay.active { display: flex; }
.submit-modal {
background: var(--white);
border-radius: var(--radius-lg);
max-width: 540px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: fadeInUp 0.4s ease;
}
.submit-modal-header {
padding: 28px 28px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.submit-modal-header h2 {
font-size: 1.4rem;
margin: 0;
color: var(--maroon);
}
.submit-modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-muted);
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
transition: all var(--transition);
line-height: 1;
}
.submit-modal-close:hover {
background: var(--cream-dark);
color: var(--maroon);
}
.submit-modal-body {
padding: 16px 28px 28px;
}
.submit-modal-body > p {
color: var(--text-muted);
font-size: 0.92rem;
margin-bottom: 20px;
line-height: 1.5;
}
.submit-success {
display: none;
text-align: center;
padding: 32px 16px;
}
.submit-success.show { display: block; }
.submit-success .success-icon {
width: 56px; height: 56px;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
font-size: 1.6rem;
color: var(--maroon-dark);
animation: fadeInUp 0.5s ease;
}
.submit-success h3 { margin-bottom: 6px; color: var(--maroon); }
.submit-success p { color: var(--text-muted); font-size: 0.92rem; }
/* --- SVG Icon Helpers --- */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.icon svg {
width: 1em;
height: 1em;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.feature-icon .icon svg {
width: 28px;
height: 28px;
stroke: var(--maroon);
transition: stroke var(--transition);
}
.card:hover .feature-icon .icon svg {
stroke: var(--maroon-dark);
}
/* --- Decorative Shapes --- */
.deco-circle {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0.04;
}
.deco-circle-gold {
background: var(--gold);
}
.deco-circle-navy {
background: var(--maroon);
}
/* --- Section Separator Wave --- */
.wave-separator {
width: 100%;
height: 60px;
position: relative;
margin-top: -1px;
overflow: hidden;
}
.wave-separator svg {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
/* --- Enhanced Stat Items --- */
.stat-item {
position: relative;
padding: 10px 0;
}
.stat-item::after {
content: '';
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: rgba(196, 154, 60, 0.2);
}
.stat-item:last-child::after {
display: none;
}
/* --- Hover glow on memory avatars --- */
.memory-card:hover .memory-avatar {
box-shadow: 0 0 0 4px var(--gold-glow);
transform: scale(1.05);
}
.memory-avatar {
transition: all var(--transition);
}
/* --- Announcement Bar --- */
.announcement-bar {
background: var(--maroon-dark);
border-bottom: 1px solid rgba(196, 154, 60, 0.18);
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
}
.announcement-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 7px 20px;
min-height: 34px;
}
.announcement-chip {
flex-shrink: 0;
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--maroon-dark);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
line-height: 1.4;
}
.announcement-text {
color: rgba(255, 255, 255, 0.88);
font-weight: 500;
letter-spacing: 0.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.announcement-text:hover {
color: var(--gold-light);
}
.announcement-text.fading {
opacity: 0;
transform: translateY(-4px);
}
.announcement-count {
flex-shrink: 0;
color: rgba(212, 176, 90, 0.55);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
.announcement-count { display: none; }
.announcement-inner { gap: 8px; }
}
/* --- Toast Notifications --- */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
}
.toast {
background: var(--white);
border-left: 4px solid var(--gold);
padding: 14px 20px 14px 16px;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
font-family: 'Inter', sans-serif;
font-size: 0.92rem;
color: var(--text-dark);
pointer-events: auto;
transform: translateX(120%);
animation: toastIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
display: flex;
align-items: center;
gap: 10px;
max-width: 360px;
backdrop-filter: blur(20px);
}
.toast.toast-out {
animation: toastOut 0.3s ease forwards;
}
.toast-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.toast-success .toast-icon { background: #22C55E; color: white; }
.toast-success { border-left-color: #22C55E; }
.toast-error .toast-icon { background: #EF4444; color: white; }
.toast-error { border-left-color: #EF4444; }
.toast-info .toast-icon { background: var(--gold); color: var(--maroon-dark); }
[data-theme="dark"] .toast {
background: var(--maroon-light);
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
@keyframes toastIn {
to { transform: translateX(0); }
}
@keyframes toastOut {
to { transform: translateX(120%); opacity: 0; }
}
/* --- Nav Glow Effects --- */
.main-nav a {
position: relative;
}
.main-nav a::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.main-nav a:hover::after,
.main-nav a.active::after {
width: 80%;
}
.main-nav a.active::after {
box-shadow: 0 0 8px var(--gold-glow);
}
.main-nav a:hover {
text-shadow: 0 0 12px rgba(196, 154, 60, 0.3);
}
/* --- Wave Section Dividers --- */
.section-wave {
position: relative;
overflow: visible;
}
.section-wave::after {
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 30px;
background: inherit;
clip-path: ellipse(55% 100% at 50% 0%);
z-index: 1;
}
.wave-divider {
width: 100%;
height: 40px;
margin-top: -1px;
display: block;
}
.wave-divider-flip {
transform: scaleY(-1);
margin-bottom: -1px;
margin-top: 0;
}
/* --- Footer Social Icons --- */
.footer-social {
display: flex;
gap: 12px;
margin-top: 16px;
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(196, 154, 60, 0.1);
border: 1px solid rgba(196, 154, 60, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
color: var(--gold);
}
.footer-social a:hover {
background: var(--gold);
color: var(--maroon-dark);
transform: translateY(-3px);
box-shadow: 0 4px 16px var(--gold-glow);
}
.footer-social svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* --- Enhanced Footer --- */
.site-footer {
position: relative;
}
.footer-wave {
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 40px;
}
/* --- Curvy Section Transitions --- */
.section-curve {
display: block;
width: 100%;
position: relative;
z-index: 1;
line-height: 0;
pointer-events: none;
}
.section-curve path {
transition: fill 0.3s ease;
}
[data-theme="dark"] .section-curve path {
opacity: 0.95;
}
/* Subtle linen texture on main body */
body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='0.8' fill='%231E2D4D' fill-opacity='0.02'/%3E%3Ccircle cx='10' cy='10' r='0.5' fill='%23C49A3C' fill-opacity='0.015'/%3E%3Ccircle cx='70' cy='20' r='0.6' fill='%231E2D4D' fill-opacity='0.015'/%3E%3Ccircle cx='20' cy='60' r='0.5' fill='%23C49A3C' fill-opacity='0.02'/%3E%3C/svg%3E");
}
[data-theme="dark"] body {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='0.8' fill='%23C49A3C' fill-opacity='0.02'/%3E%3Ccircle cx='10' cy='10' r='0.5' fill='%23C49A3C' fill-opacity='0.015'/%3E%3Ccircle cx='70' cy='20' r='0.6' fill='%23fff' fill-opacity='0.01'/%3E%3Ccircle cx='20' cy='60' r='0.5' fill='%23C49A3C' fill-opacity='0.015'/%3E%3C/svg%3E");
}
/* Curvy decorative ornament replaces straight divider */
.section-header .divider {
width: 120px;
height: 20px;
background: none;
}
.section-header .divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 100%;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' fill='none'%3E%3Cpath d='M0 10 C15 3, 30 17, 45 10 C60 3, 75 17, 90 10 C105 3, 120 17, 120 10' stroke='%23C49A3C' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='60' cy='10' r='3' fill='%23C49A3C'/%3E%3Ccircle cx='30' cy='14' r='1.5' fill='%23C49A3C' fill-opacity='0.5'/%3E%3Ccircle cx='90' cy='14' r='1.5' fill='%23C49A3C' fill-opacity='0.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.section-header .divider::after {
display: none;
}
/* Curvy top edge for newsletter section */
.newsletter-section {
clip-path: none;
}
/* Organic blob decoration on sections */
.section-alt::before {
content: '';
position: absolute;
top: -30px;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(196, 154, 60, 0.04) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.section-alt::after {
content: '';
position: absolute;
bottom: -40px;
left: -60px;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(30, 45, 77, 0.03) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
/* Curvy card top accent */
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold), var(--gold-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
border-radius: var(--radius) var(--radius) 0 0;
}
.card:hover::after {
transform: scaleX(1);
}
/* --- Utility --- */
.text-center { text-align: center; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }
/* ============================================
UI Polish Pass 2
============================================ */
/* --- Fluid typography --- */
h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.3rem); }
.page-banner h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
/* --- Consistent CTA button spacing --- */
.hero .btn,
.text-center .btn,
.section-maroon .container.text-center .btn {
margin: 6px 8px;
}
/* --- Nav join button --- */
.main-nav a.nav-join { padding: 8px 20px; }
/* --- Community dropdown --- */
.nav-dropdown { position: relative; }
.nav-drop-toggle {
background: none;
border: none;
color: rgba(255, 255, 255, 0.85);
font-family: 'Inter', sans-serif;
font-size: 0.88rem;
font-weight: 500;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all var(--transition);
}
.nav-drop-toggle::after {
content: '';
width: 7px;
height: 7px;
border-right: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.25s ease;
}
.nav-dropdown.open .nav-drop-toggle::after {
transform: rotate(-135deg) translateY(-2px);
}
.nav-drop-toggle:hover,
.nav-dropdown.open .nav-drop-toggle {
color: var(--gold-light);
background: rgba(196, 154, 60, 0.1);
}
.nav-drop-toggle.active { color: var(--gold); }
.nav-drop-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 200px;
background: var(--maroon-dark);
border: 1px solid rgba(196, 154, 60, 0.18);
border-radius: 12px;
padding: 8px;
list-style: none;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.25s ease;
z-index: 1002;
}
.nav-dropdown.open .nav-drop-menu,
.nav-dropdown:hover .nav-drop-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-drop-menu a {
display: block;
padding: 9px 14px;
border-radius: 8px;
}
.nav-drop-menu a::after { display: none; }
@media (max-width: 768px) {
.nav-dropdown { width: 100%; }
.nav-drop-toggle { width: 100%; justify-content: flex-start; padding: 10px 16px; }
.nav-drop-menu {
position: static;
display: none;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: rgba(0, 0, 0, 0.15);
margin: 2px 0 4px 12px;
padding: 4px;
}
.nav-dropdown.open .nav-drop-menu { display: block; }
}
/* --- Skip link (a11y) --- */
.skip-link {
position: absolute;
top: -48px;
left: 12px;
background: var(--gold);
color: var(--maroon-dark);
padding: 10px 18px;
border-radius: 0 0 10px 10px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.85rem;
z-index: 10010;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
color: var(--maroon-dark);
}
/* --- Keyboard focus states --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible { border-radius: 50px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none; /* custom gold ring already applied via :focus */
}
/* --- Map section --- */
.map-embed { display: block; }
/* --- Print sanity --- */
@media print {
.site-header, .announcement-bar, .mobile-cta, .back-to-top, .site-footer, .slide-arrow, .slide-nav { display: none !important; }
}
.admin-header .btn-outline { color: var(--maroon); border-color: var(--gold); }
.admin-header .btn-outline:hover { background: var(--gold); color: var(--maroon-dark); }