/* ╔══════════════════════════════════════════════════════════════════╗
║ BYD Education — Site stylesheet (plum #6E3678 + white + black) ║
║ Palette: plum #6E3678 · ink #0A0A0A · paper #FFFFFF ║
║ Engineered by Gepton.com ║
╚══════════════════════════════════════════════════════════════════╝ */
:root {
--plum: #6E3678;
--plum-d: #4E2356;
--plum-l: #834088;
--plum-50: #F7F1F9;
--plum-100: #EDD9F0;
--plum-200: #D4B0DC;
--plum-400: #9A6BA0;
--plum-700: #592664;
--plum-900: #2F1238;
--ink: #0A0A0A;
--ink-soft: #1A1A1A;
--cream: #FAF6F2;
--bone: #F5F5F5;
--paper: #FFFFFF;
--line: #E5E5E5;
--muted: #525252;
--plum-rgb: 110,54,120;
}
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; }
/* ─── Type ─────────────────────────────────────────────────────── */
.font-display { font-family: 'Bricolage Grotesque', 'Manrope', sans-serif; letter-spacing: -0.012em; }
.font-sans { font-family: 'Manrope', sans-serif; }
h1, h2, h3, h4, h5, .h-display { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.022em; }
/* ─── Plum utility colors ─────────────────────────────────────── */
.bg-plum { background-color: var(--plum); }
.bg-plum-dark { background-color: var(--plum-d); }
.bg-plum-light { background-color: var(--plum-l); }
.text-plum { color: var(--plum); }
.text-plum-dark { color: var(--plum-d); }
.border-plum { border-color: var(--plum); }
.border-plum-light { border-color: var(--plum-l); }
.gradient-plum { background: linear-gradient(135deg, #834088 0%, #6E3678 50%, #4E2356 100%); }
.gradient-plum-soft { background: linear-gradient(135deg, #F7F1F9 0%, #EDD9F0 100%); }
.gradient-hero { background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.78) 100%); }
.gradient-ink { background: radial-gradient(circle at 80% 0%, rgba(var(--plum-rgb),0.22), transparent 60%), #0A0A0A; }
/* ─── Patterns ────────────────────────────────────────────────── */
.dot-pattern { background-image: radial-gradient(rgba(10,10,10,0.07) 1px, transparent 1px); background-size: 22px 22px; }
.grid-pattern { background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 56px 56px; }
/* ─── Card hover lift ─────────────────────────────────────────── */
.card-rise { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card-rise:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -16px rgba(10,10,10,0.18); }
/* ─── Marquee (announcement + logo strips) ────────────────────── */
.marquee { overflow: hidden; position: relative; }
.marquee-track {
display: flex; gap: 4rem; width: max-content;
animation: marquee 38s linear infinite;
will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex-shrink: 0; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Announcement strip (top of page) */
.announce-strip { background: var(--plum); color: #fff; font-size: .78rem; font-weight: 500; letter-spacing: .02em; }
.announce-strip .marquee-track { animation-duration: 48s; gap: 3rem; padding: .55rem 0; }
.announce-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.6); margin: 0 .9rem; vertical-align: middle; }
/* ─── Reveal on scroll ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
/* ─── Counter ─────────────────────────────────────────────────── */
.counter { font-feature-settings: 'tnum' 1; }
/* ─── Mega menu — Y4: anchored just below sticky header via JS-measured offset ─────────── */
.mega-trigger { position: static; }
.mega-panel {
/* --header-bottom is set by JS to mainHeader.getBoundingClientRect().bottom */
position: fixed; top: var(--header-bottom, 130px); left: 50%;
/* Z3: bumped from 1100→1240 + tighter padding so 4 columns fit without overflowing */
width: min(1240px, 96vw);
background: white; box-shadow: 0 30px 60px -12px rgba(10,10,10,0.18);
border-radius: 18px; padding: 1.5rem 1.5rem;
opacity: 0; pointer-events: none;
transform: translate(-50%, 8px); transition: opacity .18s, transform .18s;
z-index: 60;
border: 1px solid var(--line);
margin-top: 6px;
box-sizing: border-box;
}
/* Z3 + Z5: force columns to share equal width AND let text wrap inside each cell.
`minmax(0, 1fr)` prevents a single column from growing to fit its longest token. */
.mega-panel .grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 1.25rem;
}
.mega-panel .grid > * { min-width: 0; }
.mega-panel p,
.mega-panel h4,
.mega-panel .mega-link,
.mega-panel .mega-link-sub {
word-break: break-word;
overflow-wrap: anywhere;
white-space: normal;
}
.mega-panel { overflow: hidden; }
/* Driven by JS — see nav.php — so we can manage hover-intent + grace close */
.mega-trigger.is-open .mega-panel {
opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.mega-col-title {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--plum); margin-bottom: .9rem;
padding-bottom: .55rem; border-bottom: 1px solid var(--plum-100);
}
.mega-link {
display: block; padding: .4rem 0;
color: #1a1a1a; font-weight: 500; font-size: .92rem;
transition: color .15s, padding-left .15s;
}
.mega-link:hover { color: var(--plum); padding-left: .35rem; }
.mega-link-sub { display: block; font-size: .76rem; color: var(--muted); margin-top: 1px; }
/* ─── Buttons ────────────────────────────────────────────────── */
.btn-plum { background: var(--plum); color: #fff; }
.btn-plum:hover { background: var(--plum-d); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.btn-plum-outline { background: transparent; color: var(--plum); border: 1.5px solid var(--plum); }
.btn-plum-outline:hover { background: var(--plum); color: #fff; }
/* ─── Tabs ───────────────────────────────────────────────────── */
.tab-btn { padding: .7rem 1.1rem; font-weight: 600; color: #525252; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; }
.tab-btn.active { color: var(--plum); border-color: var(--plum); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }
/* ─── Prose ──────────────────────────────────────────────────── */
.prose-byd h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.65rem; margin: 1.8rem 0 .8rem; color: var(--ink); letter-spacing: -.02em; }
.prose-byd h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 1.2rem; margin: 1.4rem 0 .6rem; color: var(--ink); }
.prose-byd p { line-height: 1.78; margin: .85rem 0; color: #1f1f1f; font-size: 1.02rem; text-align: justify; hyphens: auto; }
/* II2 — Justify body-text paragraphs site-wide (magazine-style),
but skip tiny meta paragraphs that should stay left-aligned
(form labels, footers, small UI hints, table cells, navigation, hero sub-lines, etc). */
section p,
article p,
main p {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
}
/* Opt-outs for short labels / centred CTAs / form helper text */
section p.text-center,
section p.text-right,
section p[class*="text-["],
article p.text-center,
article p.text-right,
main p.text-center,
main p.text-right,
p.tag-chip,
p.text-xs,
.no-justify p,
form p,
nav p,
footer p,
header p,
table p,
.no-justify {
text-align: inherit !important;
hyphens: none !important;
}
.prose-byd ul { padding-left: 1.4rem; list-style: disc; margin: .8rem 0; }
.prose-byd li { margin: .35rem 0; line-height: 1.7; }
.prose-byd a { color: var(--plum); text-decoration: underline; }
.prose-byd strong, .prose-byd b { color: var(--ink); font-weight: 700; }
/* ─── Focus rings ────────────────────────────────────────────── */
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--plum-rgb),0.18); border-color: var(--plum) !important; }
/* ─── Floating left-side WhatsApp pill ───────────────────────── */
.wa-float {
position: fixed; left: 16px; bottom: 24px; z-index: 40;
width: 52px; height: 52px; border-radius: 50%;
background: var(--plum); color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px -6px rgba(var(--plum-rgb),0.55), 0 0 0 0 rgba(var(--plum-rgb),0.45);
animation: wa-pulse 2.4s ease-out infinite;
transition: transform .2s, background .2s;
}
/* X3: lift the WhatsApp pill above the sticky mobile bottom action bar */
@media (max-width: 1023px) {
.wa-float { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
.wa-float:hover { background: var(--plum-d); transform: scale(1.07); }
.wa-float svg { width: 28px; height: 28px; }
@keyframes wa-pulse {
0% { box-shadow: 0 10px 24px -6px rgba(var(--plum-rgb),0.55), 0 0 0 0 rgba(var(--plum-rgb),0.55); }
70% { box-shadow: 0 10px 24px -6px rgba(var(--plum-rgb),0.55), 0 0 0 18px rgba(var(--plum-rgb),0); }
100% { box-shadow: 0 10px 24px -6px rgba(var(--plum-rgb),0.55), 0 0 0 0 rgba(var(--plum-rgb),0); }
}
/* ─── Modal ──────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,0.65); z-index: 80; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.open { display: flex; animation: fadeIn .25s ease; }
.modal-card { background: #fff; border-radius: 20px; max-width: 560px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 60px -12px rgba(0,0,0,0.4); }
/* ─── Floating right-side scroll-to-top ──────────────────────── */
.to-top {
position: fixed; bottom: 24px; right: 24px;
width: 48px; height: 48px; border-radius: 50%;
background: var(--plum); color: #fff;
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s, background .2s;
z-index: 35;
box-shadow: 0 8px 20px -6px rgba(var(--plum-rgb),0.5);
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--plum-d); transform: translateY(-2px); }
.to-top svg { width: 22px; height: 22px; }
/* X3: lift the scroll-to-top above the sticky mobile bottom action bar */
@media (max-width: 1023px) {
.to-top { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* ─── Universities slider ────────────────────────────────────── */
.uni-slider { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.uni-slider > * { flex: 0 0 320px; scroll-snap-align: start; }
.uni-slider::-webkit-scrollbar { height: 8px; }
.uni-slider::-webkit-scrollbar-thumb { background: var(--plum); border-radius: 4px; }
/* ─── Stars ──────────────────────────────────────────────────── */
.stars { color: var(--plum); letter-spacing: 1px; }
/* ─── Ribbon badge ───────────────────────────────────────────── */
.ribbon { position: absolute; top: 14px; left: -6px; background: var(--plum); color: #fff; padding: 5px 14px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(var(--plum-rgb),0.4); }
.ribbon::after { content:''; position: absolute; left: 0; bottom: -6px; border-top: 6px solid var(--plum-d); border-left: 6px solid transparent; }
/* ─── Custom select arrow ────────────────────────────────────── */
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 2.4rem !important; }
/* ─── Stat counter card ──────────────────────────────────────── */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(var(--plum-rgb),0.12), transparent 70%); pointer-events: none; }
/* ─── Country card overlay ───────────────────────────────────── */
.country-card { position: relative; overflow: hidden; border-radius: 22px; height: 320px; }
/* XX1: ONLY a direct-child ![]()
(the card's cover photo) gets the "fill the
card" treatment. The small flag IMG renders inside the overlay's .pill
span — it stays at its inline 20×14 px size. */
.country-card > img:not(.gx-flag) {
width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease;
position: absolute; inset: 0;
}
.country-card .pill img,
.country-card img.gx-flag,
img.gx-flag {
position: static !important;
width: 20px !important; height: 14px !important;
max-width: 20px !important; max-height: 14px !important;
object-fit: contain !important;
display: inline-block !important;
vertical-align: -0.15em !important;
margin: 0 0.2em 0 0 !important;
border-radius: 2px;
}
.country-card:hover img { transform: scale(1.08); }
.country-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; color: #fff; }
.country-card .pill { background: rgba(255,255,255,0.95); color: var(--plum); font-weight: 700; font-size: .72rem; padding: 4px 10px; border-radius: 999px; align-self: flex-start; letter-spacing: .05em; text-transform: uppercase; }
/* ─── Section heading ────────────────────────────────────────── */
.section-eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.section-eyebrow::before, .section-eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--plum); }
.section-eyebrow.left-only::after { display: none; }
/* ─── Trust badge ────────────────────────────────────────────── */
.trust-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; font-weight: 600; }
/* ─── Tag-label chip (Sartha-style) ──────────────────────────── */
.tag-chip {
display: inline-block;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--plum); background: var(--plum-50);
padding: .3rem .7rem; border-radius: 999px;
}
/* ─── Compatibility shims (legacy class names → plum equivalents) ── */
/* Lets pages that haven't been swept yet still render correctly until P6.6 verify. */
.bg-crimson, .bg-ember { background-color: var(--plum); }
.text-crimson, .text-ember { color: var(--plum); }
.border-crimson, .border-ember { border-color: var(--plum); }
.btn-crimson { background: var(--plum); color: #fff; }
.btn-crimson:hover { background: var(--plum-d); }
.gradient-crimson { background: linear-gradient(135deg, #834088 0%, #6E3678 50%, #4E2356 100%); }
/* ─── RR1: Admin & public dashboards — mobile guardrails ─────────────
* Three problems we're solving here:
* (a) Chart.js canvases were overflowing their parent on small screens
* because Chart sizes to the parent's CURRENT width, but flex/grid
* children with min-width:auto refuse to shrink under their content
* and end up wider than the viewport.
* (b) Tables in admin pages don't wrap, so anything wider than the
* phone screen pushes the whole page sideways.
* (c) Default p-6 / p-8 padding on /admin/* main eats too much screen
* on phones — reduce to p-3 below the lg breakpoint.
* ──────────────────────────────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }
/* min-w-0 cascade — every flex/grid child can shrink under its content */
main, main > section, main > div, main > .grid > * {
min-width: 0;
}
/* Chart.js: wrap any