/* ============================================================
VEDRAL SOCCER ACADEMY — Alumni Page
Paste this into: Design > Custom CSS
in your Squarespace 7.1 site.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,700;0,800;0,900;1,700&family=Barlow:wght@400;500;600&display=swap');
:root {
--vsa-blue: #1a3a7a;
--vsa-blue-dark: #0f2050;
--vsa-blue-light: #3a6fd8;
--vsa-red: #c0202a;
--vsa-red-light: #e84040;
--vsa-white: #f9f9f9;
--vsa-dark: #080d1a;
--vsa-mid: #111828;
}
/* ── Wrap the whole alumni section ── */
.vsa-alumni-wrap {
background: var(--vsa-dark);
color: var(--vsa-white);
font-family: 'Barlow', sans-serif;
padding: 0 0 60px;
overflow-x: hidden;
}
/* ── HERO ── */
.vsa-hero {
position: relative;
padding: 70px 32px 50px;
text-align: center;
overflow: hidden;
}
.vsa-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26,58,122,0.45) 0%, transparent 70%),
repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255,255,255,0.025) 38px, rgba(255,255,255,0.025) 40px);
pointer-events: none;
}
.vsa-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--vsa-red-light);
margin-bottom: 14px;
opacity: 0;
animation: vsaFadeUp 0.6s ease 0.1s forwards;
}
.vsa-hero-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(3rem, 9vw, 6.5rem);
font-weight: 900;
line-height: 0.92;
text-transform: uppercase;
color: var(--vsa-white);
opacity: 0;
animation: vsaFadeUp 0.6s ease 0.25s forwards;
}
.vsa-hero-title em {
font-style: italic;
color: var(--vsa-blue-light);
}
.vsa-hero-sub {
margin: 18px auto 0;
font-size: 1rem;
color: rgba(249,249,249,0.65);
max-width: 500px;
line-height: 1.6;
opacity: 0;
animation: vsaFadeUp 0.6s ease 0.4s forwards;
}
.vsa-stat-row {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-top: 40px;
opacity: 0;
animation: vsaFadeUp 0.6s ease 0.55s forwards;
}
.vsa-stat-num {
font-family: 'Barlow Condensed', sans-serif;
font-size: 2.6rem;
font-weight: 900;
color: var(--vsa-red-light);
line-height: 1;
text-align: center;
}
.vsa-stat-label {
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(249,249,249,0.5);
margin-top: 4px;
text-align: center;
}
.vsa-divider {
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--vsa-blue-light), var(--vsa-red));
margin: 36px auto 0;
border-radius: 2px;
}
/* ── FILTERS ── */
.vsa-filters {
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding: 36px 16px 16px;
}
.vsa-filter-btn {
background: transparent;
border: 1.5px solid rgba(249,249,249,0.2);
color: rgba(249,249,249,0.6);
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
}
.vsa-filter-btn:hover {
background: var(--vsa-blue);
border-color: var(--vsa-blue-light);
color: var(--vsa-white);
}
.vsa-filter-btn.vsa-active {
background: var(--vsa-blue-dark);
border-color: var(--vsa-red);
color: var(--vsa-red-light);
}
/* ── LEGEND ── */
.vsa-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
padding: 4px 16px 28px;
max-width: 880px;
margin: 0 auto;
}
.vsa-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
color: rgba(249,249,249,0.5);
font-family: 'Barlow', sans-serif;
}
.vsa-legend-dot {
width: 10px;
height: 10px;
border-radius: 2px;
flex-shrink: 0;
}
/* ── GRID ── */
.vsa-grid-wrap {
padding: 0 28px 40px;
max-width: 1280px;
margin: 0 auto;
}
.vsa-section-label {
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--vsa-red-light);
margin: 32px 0 12px;
display: flex;
align-items: center;
gap: 12px;
}
.vsa-section-label::after {
content: '';
flex: 1;
height: 1px;
background: rgba(192,32,42,0.25);
}
.vsa-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
/* ── CARD ── */
.vsa-card {
background: var(--vsa-mid);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 6px;
padding: 20px 20px 16px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
opacity: 0;
animation: vsaCardIn 0.5s ease forwards;
}
.vsa-card:hover {
transform: translateY(-4px);
border-color: rgba(58,111,216,0.4);
box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(58,111,216,0.15);
}
.vsa-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--vsa-blue-light), var(--vsa-red));
opacity: 0;
transition: opacity 0.25s ease;
}
.vsa-card:hover::before { opacity: 1; }
.vsa-card-accent {
position: absolute;
top: -30px; right: -30px;
width: 90px; height: 90px;
border-radius: 50%;
background: radial-gradient(circle, rgba(26,58,122,0.2) 0%, transparent 70%);
pointer-events: none;
}
.vsa-card-name {
font-family: 'Barlow Condensed', sans-serif;
font-size: 1.3rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--vsa-white);
line-height: 1.1;
margin-bottom: 10px;
}
.vsa-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.vsa-badge {
display: inline-block;
font-family: 'Barlow Condensed', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
}
.vsa-b-pro { background: rgba(192,32,42,0.18); color: #ff7a80; border: 1px solid rgba(192,32,42,0.4); }
.vsa-b-college { background: rgba(58,111,216,0.15); color: #80aaff; border: 1px solid rgba(58,111,216,0.35); }
.vsa-b-mls { background: rgba(20,80,180,0.2); color: #90c0ff; border: 1px solid rgba(20,80,180,0.4); }
.vsa-b-national { background: rgba(192,32,42,0.22); color: #ffaaaa; border: 1px solid rgba(192,32,42,0.5); }
.vsa-b-usl { background: rgba(58,111,216,0.18); color: #aac8ff; border: 1px solid rgba(58,111,216,0.35); }
.vsa-b-europe { background: rgba(180,50,200,0.15); color: #e0a0ff; border: 1px solid rgba(180,50,200,0.35); }
/* ── CTA ── */
.vsa-cta {
background: linear-gradient(135deg, #0f2050 0%, #080d1a 100%);
border-top: 1px solid rgba(58,111,216,0.3);
text-align: center;
padding: 60px 24px;
margin-top: 20px;
}
.vsa-cta-title {
font-family: 'Barlow Condensed', sans-serif;
font-size: clamp(2rem, 6vw, 3.2rem);
font-weight: 900;
text-transform: uppercase;
line-height: 1;
margin-bottom: 14px;
color: var(--vsa-white);
}
.vsa-cta-title span { color: var(--vsa-red-light); }
.vsa-cta-sub {
color: rgba(249,249,249,0.6);
max-width: 420px;
margin: 0 auto 28px;
line-height: 1.6;
font-size: 0.95rem;
}
.vsa-cta-btn {
display: inline-block;
background: var(--vsa-red);
color: #fff !important;
font-family: 'Barlow Condensed', sans-serif;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 13px 38px;
border-radius: 3px;
text-decoration: none !important;
transition: background 0.2s, transform 0.2s;
}
.vsa-cta-btn:hover {
background: var(--vsa-red-light);
transform: translateY(-2px);
}
/* ── ANIMATIONS ── */
@keyframes vsaFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes vsaCardIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.vsa-hero { padding: 50px 16px 36px; }
.vsa-grid-wrap { padding: 0 12px 32px; }
.vsa-stat-row { gap: 20px; }
.vsa-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.vsa-card { padding: 14px 12px; }
.vsa-card-name { font-size: 1rem; }
}
