/* ============================================================
BFS Frontend — v2 stylesheet (Skoola / Edupreme / EduRox direction)
Friendly, confident school-sector look. Bold geometric sans,
brand color used confidently throughout, soft-shadow rounded
cards, alternating white/soft-tint sections, decorative
brand-tinted shapes layered behind hero copy.
Fully namespaced under `.bfs-v2*` / `.bfs-v2__*` so it can't
collide with legacy style.css. The branch primary colour
threads through every accent surface (--thm-primary).
============================================================ */
/* --------------------------------------------------------------
1. Reset & root tokens
-------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
:root {
--bfs-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--bfs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* Cool, school-grade neutrals */
--bfs-ink: #0f1729;
--bfs-ink-soft: #3a4358;
--bfs-ink-muted: #6b7588;
--bfs-ink-faint: #aab1c0;
--bfs-paper: #ffffff;
--bfs-paper-tint: #f5f7fa;
--bfs-paper-shade: #ebeef4;
--bfs-paper-dark: #0a1020;
--bfs-paper-dark-2: #0f1830;
--bfs-line: rgba(15, 23, 41, 0.10);
--bfs-line-strong: rgba(15, 23, 41, 0.16);
--bfs-line-soft: rgba(15, 23, 41, 0.06);
--bfs-radius-sm: 8px;
--bfs-radius: 12px;
--bfs-radius-lg: 20px;
--bfs-radius-xl: 28px;
--bfs-radius-pill: 999px;
--bfs-shadow-xs: 0 2px 4px rgba(15, 23, 41, 0.04);
--bfs-shadow-sm: 0 4px 14px rgba(15, 23, 41, 0.06);
--bfs-shadow: 0 16px 40px rgba(15, 23, 41, 0.10);
--bfs-shadow-lg: 0 30px 60px rgba(15, 23, 41, 0.14);
--bfs-shadow-brand: 0 16px 40px color-mix(in srgb, var(--thm-primary, #2563eb) 24%, transparent);
--bfs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--bfs-dur-fast: 180ms;
--bfs-dur: 280ms;
--bfs-dur-slow: 520ms;
--bfs-container: 1280px;
--bfs-gutter: clamp(1.25rem, 3vw, 2.5rem);
/* Brand accent — used confidently */
--bfs-accent: var(--thm-primary, #2563eb);
--bfs-accent-ink: color-mix(in srgb, var(--thm-primary, #2563eb) 85%, #000);
--bfs-accent-tint: color-mix(in srgb, var(--thm-primary, #2563eb) 10%, transparent);
--bfs-accent-soft: color-mix(in srgb, var(--thm-primary, #2563eb) 18%, transparent);
--bfs-accent-wash: color-mix(in srgb, var(--thm-primary, #2563eb) 6%, var(--bfs-paper));
}
html { scroll-behavior: smooth; }
body.bfs-v2 {
margin: 0;
font-family: var(--bfs-font-sans);
font-size: 1rem;
line-height: 1.7;
color: var(--bfs-ink-soft);
background: var(--bfs-paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
.bfs-v2 h1, .bfs-v2 h2, .bfs-v2 h3, .bfs-v2 h4, .bfs-v2 h5, .bfs-v2 h6 {
font-family: var(--bfs-font-display);
color: var(--bfs-ink);
letter-spacing: -0.02em;
font-weight: 700;
line-height: 1.15;
margin: 0 0 0.5em 0;
}
.bfs-v2 h1 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
.bfs-v2 h2 { font-weight: 700; line-height: 1.1; }
.bfs-v2 h5, .bfs-v2 h6 { font-weight: 600; }
.bfs-v2 p { margin: 0 0 1em 0; line-height: 1.75; }
.bfs-v2 a {
color: var(--bfs-accent);
text-decoration: none;
transition: color var(--bfs-dur) var(--bfs-ease),
opacity var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 a:hover { color: var(--bfs-accent-ink); }
.bfs-v2 img { max-width: 100%; height: auto; display: block; }
.bfs-v2 ul { margin: 0; padding: 0; list-style: none; }
.bfs-v2 ::selection { background: var(--bfs-accent); color: #fff; }
.bfs-v2 *:focus-visible {
outline: 2px solid var(--bfs-accent);
outline-offset: 3px;
border-radius: var(--bfs-radius-sm);
}
.bfs-v2__skip-link {
position: absolute;
left: -9999px;
top: 0;
padding: 0.75rem 1rem;
background: var(--bfs-ink);
color: #fff;
z-index: 9999;
}
.bfs-v2__skip-link:focus { left: 1rem; top: 1rem; }
/* --------------------------------------------------------------
2. Layout primitives
-------------------------------------------------------------- */
.bfs-v2__container {
width: 100%;
max-width: var(--bfs-container);
margin-inline: auto;
padding-inline: var(--bfs-gutter);
}
.bfs-v2__main { display: block; }
/* Eyebrow pill — friendly accent badge */
.bfs-v2-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.95rem;
font-family: var(--bfs-font-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--bfs-accent);
background: var(--bfs-accent-tint);
border-radius: var(--bfs-radius-pill);
margin-bottom: 1.25rem;
text-transform: capitalize;
}
.bfs-v2-eyebrow::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bfs-accent);
}
.bfs-v2-eyebrow--light {
color: #fff;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(6px);
}
.bfs-v2-eyebrow--light::before { background: #fff; }
.bfs-v2-section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.bfs-v2-section-head--center { text-align: center; }
.bfs-v2-section-head--center .bfs-v2-eyebrow { margin-inline: auto; }
.bfs-v2-section-head h2 {
font-size: clamp(1.875rem, 2.6vw + 0.85rem, 3rem);
margin-bottom: 0.85rem;
}
.bfs-v2-section-head p {
max-width: 640px;
font-size: 1.0625rem;
line-height: 1.7;
color: var(--bfs-ink-muted);
}
.bfs-v2-section-head--center p { margin-inline: auto; }
.bfs-v2-section-head--light h2 { color: #fff; }
.bfs-v2-section-head--light p { color: rgba(255, 255, 255, 0.82); }
/* --------------------------------------------------------------
3. Buttons — rounded rectangles, brand fill, soft shadow
-------------------------------------------------------------- */
.bfs-v2__btn {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.95rem 1.6rem;
font-family: var(--bfs-font-sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
border-radius: var(--bfs-radius);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
line-height: 1;
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease),
background-color var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
will-change: transform;
}
.bfs-v2__btn:hover { transform: translateY(-2px); }
.bfs-v2__btn:active { transform: translateY(0); }
.bfs-v2__btn i { font-size: 0.85em; transition: transform var(--bfs-dur) var(--bfs-ease); }
.bfs-v2__btn:hover i { transform: translateX(3px); }
.bfs-v2__btn--lg { padding: 1.1rem 1.85rem; font-size: 1rem; border-radius: var(--bfs-radius); }
/* Button color rules are scoped under `.bfs-v2` so specificity beats
* `.bfs-v2 a { color: var(--bfs-accent); }` — otherwise primary
* buttons render brand-color text on brand-color background. */
.bfs-v2 .bfs-v2__btn--primary,
.bfs-v2 a.bfs-v2__btn--primary {
background: var(--bfs-accent);
color: #fff;
border-color: var(--bfs-accent);
box-shadow: var(--bfs-shadow-brand);
}
.bfs-v2 .bfs-v2__btn--primary:hover {
background: var(--bfs-accent-ink);
color: #fff;
border-color: var(--bfs-accent-ink);
box-shadow: var(--bfs-shadow-lg);
}
.bfs-v2 .bfs-v2__btn--outline,
.bfs-v2 a.bfs-v2__btn--outline {
background: transparent;
color: var(--bfs-ink);
border-color: var(--bfs-line-strong);
}
.bfs-v2 .bfs-v2__btn--outline:hover {
background: var(--bfs-ink);
color: var(--bfs-paper);
border-color: var(--bfs-ink);
}
.bfs-v2 .bfs-v2__btn--ghost,
.bfs-v2 a.bfs-v2__btn--ghost {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
}
.bfs-v2 .bfs-v2__btn--ghost:hover {
background: #fff;
color: var(--bfs-ink);
border-color: #fff;
}
/* Light variant is intentionally a hard-white surface in both
* themes (it's the inverted CTA on dark gradient blocks). Text
* color is pinned dark so it stays legible in dark mode where
* --bfs-ink would flip to a light value. */
.bfs-v2 .bfs-v2__btn--light,
.bfs-v2 a.bfs-v2__btn--light {
background: #fff;
color: #0f1729;
border-color: #fff;
}
.bfs-v2 .bfs-v2__btn--light:hover {
background: var(--bfs-accent);
color: #fff;
border-color: var(--bfs-accent);
}
/* --------------------------------------------------------------
4. Header — top bar + nav
-------------------------------------------------------------- */
.bfs-v2__header { position: relative; z-index: 40; }
/* Use --bfs-paper-dark (always-dark token) so the topbar stays
* dark in BOTH themes — flipping it via --bfs-ink would make the
* topbar light in dark mode (since --bfs-ink inverts), which
* breaks the white-on-dark contact text that's hardcoded white. */
.bfs-v2__topbar {
background: var(--bfs-paper-dark);
color: rgba(255, 255, 255, 0.78);
font-size: 0.85rem;
padding: 0.7rem 0;
}
.bfs-v2__topbar-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.bfs-v2__topbar-hours { display: inline-flex; align-items: center; gap: 0.5rem; }
.bfs-v2__topbar-hours i { color: var(--bfs-accent); }
.bfs-v2__topbar-contact { display: inline-flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.bfs-v2__topbar-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; }
.bfs-v2__topbar-link:hover { color: #fff; }
.bfs-v2__topbar-link i { color: var(--bfs-accent); font-size: 0.95em; }
.bfs-v2__nav {
background: var(--bfs-paper);
border-bottom: 1px solid var(--bfs-line-soft);
position: sticky;
top: 0;
z-index: 40;
transition: box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__nav.is-scrolled { box-shadow: var(--bfs-shadow-sm); }
/* Nav gets a wider max-width than the standard container so 8+ menu
* items don't spill past the container's right edge (which was
* pushing "Contact Us" off-screen when the total nav content
* needed > 1280px). Up to 96vw / 1600px for the nav shell only —
* rest of the site keeps the 1280px container. */
.bfs-v2__nav .bfs-v2__nav-inner {
max-width: min(96vw, 1600px);
}
.bfs-v2__nav-inner {
display: flex;
align-items: center;
gap: clamp(0.75rem, 1vw, 1.5rem);
min-height: 86px;
flex-wrap: nowrap;
}
.bfs-v2__brand {
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: opacity var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__brand:hover { opacity: 0.85; }
.bfs-v2__brand img { max-height: 52px; width: auto; display: block; }
.bfs-v2__nav-actions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
position: relative;
}
/* Thin vertical divider between the nav list and the CTA so the
* Portal/Dashboard button reads as a distinct primary action. */
.bfs-v2__nav-actions::before {
content: '';
position: absolute;
left: calc(clamp(1.5rem, 2.5vw, 3rem) * -0.5);
top: 25%;
bottom: 25%;
width: 1px;
background: var(--bfs-line);
opacity: 0.9;
}
@media (max-width: 1199px) {
.bfs-v2__nav-actions::before { display: none; }
}
.bfs-v2__nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
padding: 0.7rem 0.75rem;
background: var(--bfs-paper-tint);
border: 1px solid var(--bfs-line);
border-radius: var(--bfs-radius-sm);
cursor: pointer;
}
.bfs-v2__nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--bfs-ink);
border-radius: 2px;
transition: transform var(--bfs-dur) var(--bfs-ease),
opacity var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bfs-v2__nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bfs-v2__nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Nav menu scales with item count: padding + font-size + gap all
* compress smoothly so even 10+ menu items fit one row before the
* hamburger breakpoint kicks in. Right-margin gives a visible
* breathing gap before the Dashboard / Access Portal CTA. */
.bfs-v2__nav-menu {
margin-left: auto;
margin-right: clamp(1.5rem, 2.5vw, 3rem);
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1.75rem);
min-width: 0;
}
.bfs-v2__nav-list {
display: flex;
gap: clamp(0.05rem, 0.2vw, 0.3rem);
align-items: center;
flex-wrap: nowrap;
}
.bfs-v2__nav-item { position: relative; }
.bfs-v2__nav-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.75rem clamp(0.5rem, 0.85vw, 1rem);
font-family: var(--bfs-font-sans);
font-size: clamp(0.82rem, 0.4vw + 0.72rem, 0.95rem);
font-weight: 600;
color: var(--bfs-ink);
border-radius: var(--bfs-radius-sm);
transition: color var(--bfs-dur) var(--bfs-ease),
background-color var(--bfs-dur) var(--bfs-ease);
white-space: nowrap;
line-height: 1.2;
}
.bfs-v2__nav-item:hover .bfs-v2__nav-link,
.bfs-v2__nav-item.is-active .bfs-v2__nav-link {
color: var(--bfs-accent);
background: var(--bfs-accent-tint);
}
.bfs-v2__nav-caret { font-size: 0.65em; opacity: 0.6; transition: transform var(--bfs-dur) var(--bfs-ease); }
.bfs-v2__nav-item.has-sub:hover .bfs-v2__nav-caret { transform: rotate(180deg); }
.bfs-v2__nav-sub {
position: absolute;
top: calc(100% - 4px);
left: 0;
min-width: 240px;
padding: 0.5rem;
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius);
box-shadow: var(--bfs-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease),
visibility var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__nav-item.has-sub:hover > .bfs-v2__nav-sub,
.bfs-v2__nav-item.has-sub:focus-within > .bfs-v2__nav-sub {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bfs-v2__nav-sublink {
display: block;
padding: 0.7rem 0.95rem;
border-radius: var(--bfs-radius-sm);
color: var(--bfs-ink-soft);
font-size: 0.9rem;
font-weight: 500;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__nav-sublink:hover,
.bfs-v2__nav-sublink.is-active {
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
}
.bfs-v2__nav-cta { display: inline-flex; align-items: center; gap: 0.75rem; }
.bfs-v2__nav-cta-btn {
padding: 0.6rem clamp(0.75rem, 0.8vw, 1.15rem);
font-size: clamp(0.8rem, 0.35vw + 0.7rem, 0.875rem);
white-space: nowrap;
}
.bfs-v2__nav-cta-btn i { font-size: 0.92em; }
/* Hide the icon above hamburger breakpoint — label is enough. */
@media (min-width: 1200px) { .bfs-v2__nav-cta-btn > i { display: none; } }
/* Sub-menu type in the mega nav also compresses with clamp. */
.bfs-v2__nav-caret { font-size: clamp(0.55em, 0.1vw + 0.52em, 0.65em); }
/* Mid-width compression: 1000-1199px has tighter everything so 8-10
* menu items can still fit on one row without wrapping. */
@media (min-width: 1200px) and (max-width: 1399px) {
.bfs-v2__nav-link { padding-inline: 0.65rem; }
}
/* Hamburger breakpoint raised from 991px → 1199px. With 8+ menu items
* the nav was forced into two rows at 992-1100px; now it collapses
* cleanly to the mobile drawer before that happens. */
@media (max-width: 1199px) {
.bfs-v2__nav-toggle { display: flex; }
.bfs-v2__nav-inner { gap: 0.5rem; min-height: 72px; }
.bfs-v2__brand img { max-height: 44px; }
.bfs-v2__nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0;
background: var(--bfs-paper);
flex-direction: column;
align-items: stretch;
padding: 0;
border-bottom: 1px solid var(--bfs-line-soft);
max-height: 0;
overflow: hidden;
transition: max-height var(--bfs-dur) var(--bfs-ease);
box-shadow: var(--bfs-shadow);
}
.bfs-v2__nav.is-open .bfs-v2__nav-menu {
max-height: calc(100vh - 72px);
overflow-y: auto;
padding: 0.5rem 1.25rem 1.25rem;
}
.bfs-v2__nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.bfs-v2__nav-link {
padding: 1rem 0.5rem;
justify-content: space-between;
border-radius: 0;
font-size: 1rem;
}
.bfs-v2__nav-item:hover .bfs-v2__nav-link,
.bfs-v2__nav-item.is-active .bfs-v2__nav-link {
background: transparent;
}
.bfs-v2__nav-item + .bfs-v2__nav-item { border-top: 1px solid var(--bfs-line-soft); }
.bfs-v2__nav-caret { transition: transform var(--bfs-dur) var(--bfs-ease); }
.bfs-v2__nav-item.has-sub.is-expanded > .bfs-v2__nav-link .bfs-v2__nav-caret { transform: rotate(180deg); }
.bfs-v2__nav-sub {
position: static;
opacity: 1;
visibility: visible;
transform: none;
border: none;
box-shadow: none;
padding: 0;
background: transparent;
max-height: 0;
overflow: hidden;
transition: max-height var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__nav-item.has-sub.is-expanded > .bfs-v2__nav-sub {
max-height: 60vh;
padding: 0 0 0.5rem 0.75rem;
}
.bfs-v2__nav-sublink { padding: 0.7rem 0.5rem; font-size: 0.95rem; }
/* Mobile CTA: shrink to icon-only when there's not enough room. */
.bfs-v2__nav-cta-btn { padding: 0.6rem 0.9rem; font-size: 0.82rem; }
}
@media (max-width: 480px) {
/* Below 480px the CTA collapses to an icon-only pill so the brand
* + CTA + hamburger fit comfortably on narrow phones. */
.bfs-v2__nav-cta-btn { padding: 0; width: 38px; height: 38px; justify-content: center; }
.bfs-v2__nav-cta-btn .bfs-v2__nav-cta-label { display: none; }
.bfs-v2__nav-cta-btn i { font-size: 0.95rem; }
}
/* --------------------------------------------------------------
5. News ticker
-------------------------------------------------------------- */
.bfs-v2__newsticker {
background: var(--bfs-paper-tint);
border-bottom: 1px solid var(--bfs-line-soft);
color: var(--bfs-ink-soft);
padding: 0.7rem 0;
font-size: 0.875rem;
}
.bfs-v2__newsticker-row {
display: flex;
align-items: center;
gap: 1.25rem;
min-height: 38px;
}
.bfs-v2__newsticker-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.95rem;
border-radius: var(--bfs-radius-pill);
background: var(--bfs-accent);
color: #fff;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
}
.bfs-v2__newsticker-track { flex: 1; min-width: 0; overflow: hidden; }
.bfs-v2__newsticker-track ul { display: flex; gap: 2.5rem; flex-wrap: nowrap; white-space: nowrap; }
.bfs-v2__newsticker-track a { color: var(--bfs-ink-soft); display: inline-flex; align-items: baseline; gap: 0.5rem; }
.bfs-v2__newsticker-track a:hover { color: var(--bfs-ink); }
.bfs-v2__newsticker-track strong { color: var(--bfs-accent); margin-right: 0.35rem; font-weight: 700; }
.bfs-v2__newsticker-track em { font-style: normal; color: var(--bfs-ink-muted); font-size: 0.82em; margin-left: 0.4rem; }
.bfs-v2__newsticker-date { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--bfs-ink-muted); flex-shrink: 0; }
@media (max-width: 767px) { .bfs-v2__newsticker-date { display: none; } }
/* --------------------------------------------------------------
6. Hero — full photography + brand-tinted decorative shapes
-------------------------------------------------------------- */
.bfs-v2-hero {
position: relative;
overflow: hidden;
min-height: clamp(540px, 80vh, 760px);
color: #fff;
isolation: isolate;
background: var(--bfs-paper-dark);
}
.bfs-v2-hero::before,
.bfs-v2-hero::after {
content: '';
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.bfs-v2-hero::before {
width: 22rem; height: 22rem;
right: -7rem; top: -6rem;
background: var(--bfs-accent);
opacity: 0.35;
filter: blur(60px);
}
.bfs-v2-hero::after {
width: 16rem; height: 16rem;
left: -5rem; bottom: -5rem;
background: var(--bfs-accent);
opacity: 0.18;
filter: blur(50px);
}
.bfs-v2-hero__track { position: relative; height: 100%; min-height: inherit; z-index: 2; }
.bfs-v2-hero__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 800ms var(--bfs-ease),
visibility 800ms var(--bfs-ease);
}
.bfs-v2-hero__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.bfs-v2-hero__slide.is-active .bfs-v2-hero__image { transform: scale(1); }
.bfs-v2-hero__image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.06);
transition: transform 9s linear;
z-index: -2;
}
.bfs-v2-hero__veil {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(110deg, rgba(10, 16, 32, 0.78) 0%, rgba(10, 16, 32, 0.55) 50%, rgba(10, 16, 32, 0.25) 100%);
}
.bfs-v2-hero__body {
width: 100%;
padding-block: clamp(4.5rem, 9vw, 8rem);
position: relative;
z-index: 1;
}
.bfs-v2-hero__body--right .bfs-v2-hero__content { margin-left: auto; text-align: right; }
.bfs-v2-hero__body--right .bfs-v2-hero__actions { justify-content: flex-end; }
.bfs-v2-hero__body--center .bfs-v2-hero__content { margin-inline: auto; text-align: center; }
.bfs-v2-hero__body--center .bfs-v2-hero__actions { justify-content: center; }
.bfs-v2-hero__content { max-width: 760px; }
/* Dark pill bg + bright text + layered text-shadow so the eyebrow
* stays punchy over ANY photo — including bright sky/sun regions. */
.bfs-v2-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.1rem;
color: #fff;
background: rgba(10, 16, 32, 0.78);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: var(--bfs-radius-pill);
font-family: var(--bfs-font-sans);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.06em;
margin-bottom: 1.5rem;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.6),
0 2px 10px rgba(0, 0, 0, 0.45);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.bfs-v2-hero__eyebrow-line {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--bfs-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bfs-accent) 35%, transparent);
}
.bfs-v2-hero__title {
font-family: var(--bfs-font-display);
font-weight: 800;
color: #fff;
font-size: clamp(2.25rem, 4.5vw + 0.5rem, 4.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
margin-bottom: 1.25rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.bfs-v2-hero__desc {
font-family: var(--bfs-font-sans);
font-size: clamp(1rem, 0.6vw + 0.9rem, 1.1875rem);
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin-bottom: 2rem;
}
.bfs-v2-hero__body--center .bfs-v2-hero__desc { margin-inline: auto; }
.bfs-v2-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.bfs-v2-hero__controls {
position: absolute;
left: 50%;
bottom: 1.75rem;
transform: translateX(-50%);
z-index: 3;
display: flex;
align-items: center;
gap: 1rem;
}
.bfs-v2-hero__arrow {
width: 44px; height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
color: #fff;
cursor: pointer;
transition: background var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-hero__arrow:hover { background: var(--bfs-accent); border-color: var(--bfs-accent); }
.bfs-v2-hero__dots { display: inline-flex; gap: 0.45rem; }
.bfs-v2-hero__dot {
width: 8px; height: 8px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: background var(--bfs-dur) var(--bfs-ease),
width var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-hero__dot.is-active { background: #fff; width: 28px; border-radius: 999px; }
/* --------------------------------------------------------------
7. Feature cards — friendly elevated tiles
-------------------------------------------------------------- */
.bfs-v2-features {
padding: clamp(4rem, 7vw, 6rem) 0;
position: relative;
z-index: 1;
margin-top: -3.5rem;
}
/* Centered flex so an orphan tile in the last row centers instead of
* left-aligning. Grid auto-fit produced ugly trailing gaps. */
.bfs-v2-features__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.bfs-v2-features__grid > .bfs-v2-feature {
flex: 1 1 240px;
max-width: 320px;
}
.bfs-v2-feature {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
padding: 2.25rem 1.85rem;
box-shadow: var(--bfs-shadow-sm);
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.bfs-v2-feature::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: var(--bfs-accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--bfs-dur-slow) var(--bfs-ease);
}
.bfs-v2-feature:hover {
transform: translateY(-8px);
box-shadow: var(--bfs-shadow);
border-color: var(--bfs-accent-soft);
}
.bfs-v2-feature:hover::before { transform: scaleX(1); }
.bfs-v2-feature__icon {
width: 64px; height: 64px;
border-radius: var(--bfs-radius);
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.65rem;
margin-bottom: 1.5rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-feature:hover .bfs-v2-feature__icon {
background: var(--bfs-accent);
color: #fff;
transform: scale(1.05);
}
.bfs-v2-feature__title {
font-family: var(--bfs-font-display);
font-size: 1.375rem;
font-weight: 700;
margin-bottom: 0.6rem;
color: var(--bfs-ink);
}
.bfs-v2-feature__desc {
color: var(--bfs-ink-muted);
font-size: 0.95rem;
line-height: 1.7;
flex-grow: 1;
margin-bottom: 1.25rem;
}
.bfs-v2-feature__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--bfs-accent);
font-weight: 600;
font-size: 0.92rem;
align-self: flex-start;
}
.bfs-v2-feature__link i { transition: transform var(--bfs-dur) var(--bfs-ease); }
.bfs-v2-feature__link:hover i { transform: translateX(5px); }
/* --------------------------------------------------------------
8. Welcome — split with image-card + accent corner
-------------------------------------------------------------- */
.bfs-v2-welcome {
padding: clamp(4rem, 7vw, 6.5rem) 0;
background: var(--bfs-paper);
}
.bfs-v2-welcome__grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
@media (max-width: 768px) {
.bfs-v2-welcome__grid { grid-template-columns: 1fr; }
.bfs-v2-welcome__media { order: -1; }
}
.bfs-v2-welcome__copy { max-width: 560px; }
.bfs-v2-welcome__title {
font-size: clamp(1.875rem, 2.6vw + 0.85rem, 2.875rem);
line-height: 1.1;
margin-bottom: 1.25rem;
}
.bfs-v2-welcome__body {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--bfs-ink-soft);
}
.bfs-v2-welcome__body p { margin-bottom: 1em; }
.bfs-v2-welcome__frame {
border-radius: var(--bfs-radius-xl);
overflow: hidden;
position: relative;
aspect-ratio: 4 / 5;
box-shadow: var(--bfs-shadow);
}
.bfs-v2-welcome__frame::after {
content: '';
position: absolute;
width: 70%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--bfs-accent);
opacity: 0.18;
filter: blur(40px);
right: -3rem;
bottom: -3rem;
z-index: -1;
pointer-events: none;
}
.bfs-v2-welcome__media { position: relative; }
.bfs-v2-welcome__media::before {
content: '';
position: absolute;
width: 80%;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: var(--bfs-accent-tint);
top: -2rem;
left: -2rem;
z-index: 0;
pointer-events: none;
}
.bfs-v2-welcome__frame { position: relative; z-index: 1; }
.bfs-v2-welcome__frame img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 900ms var(--bfs-ease);
}
.bfs-v2-welcome__frame:hover img { transform: scale(1.05); }
/* --------------------------------------------------------------
9. Teachers — friendly portrait cards on tinted bg
-------------------------------------------------------------- */
/* Faculty section default background blends ~10% of the branch
* primary into the paper tint so the section visually ties back
* to the school's brand. Deep enough to feel intentional, light
* enough that any brand colour stays gentle behind portraits. */
.bfs-v2-teachers {
position: relative;
padding: clamp(4rem, 7vw, 6.5rem) 0;
isolation: isolate;
background: color-mix(in srgb, var(--bfs-accent) 10%, var(--bfs-paper-tint));
background-image: var(--bfs-teachers-bg, none);
background-size: cover;
background-position: center;
}
.bfs-v2-teachers[style*="--bfs-teachers-bg"] { color: #fff; }
.bfs-v2-teachers[style*="--bfs-teachers-bg"] .bfs-v2-teachers__veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 16, 32, 0.72), rgba(10, 16, 32, 0.92));
z-index: -1;
}
.bfs-v2-teachers:not([style*="--bfs-teachers-bg"]) .bfs-v2-teachers__veil { display: none; }
.bfs-v2-teachers:not([style*="--bfs-teachers-bg"]) .bfs-v2-section-head--light h2 { color: var(--bfs-ink); }
.bfs-v2-teachers:not([style*="--bfs-teachers-bg"]) .bfs-v2-section-head--light p { color: var(--bfs-ink-muted); }
.bfs-v2-teachers:not([style*="--bfs-teachers-bg"]) .bfs-v2-eyebrow--light {
color: var(--bfs-accent);
background: var(--bfs-accent-tint);
border: 0;
}
.bfs-v2-teachers:not([style*="--bfs-teachers-bg"]) .bfs-v2-eyebrow--light::before { background: var(--bfs-accent); }
.bfs-v2-teachers__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.bfs-v2-teacher {
background: var(--bfs-paper);
border-radius: var(--bfs-radius-lg);
overflow: hidden;
box-shadow: var(--bfs-shadow-sm);
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-teacher:hover { transform: translateY(-6px); box-shadow: var(--bfs-shadow); }
.bfs-v2-teacher__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--bfs-paper-shade);
}
.bfs-v2-teacher__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms var(--bfs-ease);
}
.bfs-v2-teacher:hover .bfs-v2-teacher__media img { transform: scale(1.06); }
.bfs-v2-teacher__social {
position: absolute;
left: 0; right: 0;
bottom: 0;
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
background: linear-gradient(180deg, rgba(10, 16, 32, 0), rgba(10, 16, 32, 0.7));
transform: translateY(100%);
transition: transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-teacher:hover .bfs-v2-teacher__social { transform: translateY(0); }
.bfs-v2-teacher__social a {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: var(--bfs-ink);
font-size: 0.85rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-teacher__social a:hover { background: var(--bfs-accent); color: #fff; }
.bfs-v2-teacher__body {
padding: 1.25rem 1.25rem 1.5rem;
text-align: center;
border-top: 1px solid var(--bfs-line-soft);
}
.bfs-v2-teacher__name {
font-family: var(--bfs-font-display);
font-size: 1.125rem;
font-weight: 700;
color: var(--bfs-ink);
margin-bottom: 0.25rem;
}
.bfs-v2-teacher__role {
font-size: 0.825rem;
color: var(--bfs-accent);
font-weight: 600;
margin: 0;
}
/* --------------------------------------------------------------
10. Testimonials
-------------------------------------------------------------- */
.bfs-v2-testimonials {
padding: clamp(4rem, 7vw, 6.5rem) 0;
background: var(--bfs-paper);
}
.bfs-v2-testimonials__track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
}
.bfs-v2-testimonial {
background: var(--bfs-paper-tint);
border-radius: var(--bfs-radius-lg);
padding: 2.25rem 2rem 1.85rem;
position: relative;
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-testimonial:hover { transform: translateY(-4px); box-shadow: var(--bfs-shadow-sm); }
.bfs-v2-testimonial__mark {
position: absolute;
top: 1.25rem;
right: 1.5rem;
font-family: var(--bfs-font-display);
font-size: 4.5rem;
line-height: 1;
color: var(--bfs-accent-soft);
font-weight: 800;
pointer-events: none;
}
.bfs-v2-testimonial__stars {
display: flex;
gap: 0.2rem;
color: #f59e0b;
font-size: 0.95rem;
margin-bottom: 1rem;
position: relative;
}
.bfs-v2-testimonial__quote {
margin: 0 0 1.5rem 0;
padding: 0;
font-family: var(--bfs-font-sans);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1.7;
color: var(--bfs-ink);
}
.bfs-v2-testimonial__person {
display: flex;
align-items: center;
gap: 0.85rem;
padding-top: 1.1rem;
border-top: 1px solid var(--bfs-line-soft);
}
.bfs-v2-testimonial__avatar img {
width: 50px; height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--bfs-paper);
box-shadow: var(--bfs-shadow-xs);
}
.bfs-v2-testimonial__meta strong {
display: block;
font-family: var(--bfs-font-display);
font-size: 1rem;
color: var(--bfs-ink);
font-weight: 700;
}
.bfs-v2-testimonial__meta span {
font-size: 0.82rem;
color: var(--bfs-ink-muted);
}
/* --------------------------------------------------------------
11. Counters — friendly tinted block
-------------------------------------------------------------- */
.bfs-v2-counters {
position: relative;
isolation: isolate;
padding: clamp(4rem, 7vw, 6rem) 0;
background: var(--bfs-paper-tint);
color: var(--bfs-ink);
background-image: var(--bfs-counters-bg, none);
background-size: cover;
background-position: center;
}
.bfs-v2-counters[style*="--bfs-counters-bg"] { color: #fff; }
.bfs-v2-counters[style*="--bfs-counters-bg"] .bfs-v2-counters__veil {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(10, 16, 32, 0.82),
color-mix(in srgb, var(--bfs-accent) 50%, rgba(10, 16, 32, 0.7)));
z-index: -1;
}
.bfs-v2-counters:not([style*="--bfs-counters-bg"]) .bfs-v2-counters__veil { display: none; }
.bfs-v2-counters:not([style*="--bfs-counters-bg"]) .bfs-v2-section-head--light h2 { color: var(--bfs-ink); }
.bfs-v2-counters:not([style*="--bfs-counters-bg"]) .bfs-v2-section-head--light p { color: var(--bfs-ink-muted); }
.bfs-v2-counters:not([style*="--bfs-counters-bg"]) .bfs-v2-eyebrow--light {
color: var(--bfs-accent);
background: var(--bfs-accent-tint);
border: 0;
}
.bfs-v2-counters:not([style*="--bfs-counters-bg"]) .bfs-v2-eyebrow--light::before { background: var(--bfs-accent); }
.bfs-v2-counters__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
}
.bfs-v2-counter {
text-align: center;
padding: 1.5rem 1.25rem;
background: var(--bfs-paper);
border-radius: var(--bfs-radius-lg);
border: 1px solid var(--bfs-line-soft);
box-shadow: var(--bfs-shadow-xs);
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-counters[style*="--bfs-counters-bg"] .bfs-v2-counter {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: none;
}
.bfs-v2-counter:hover { transform: translateY(-4px); box-shadow: var(--bfs-shadow-sm); }
.bfs-v2-counter__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: var(--bfs-radius);
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
font-size: 1.4rem;
margin-bottom: 1rem;
}
.bfs-v2-counters[style*="--bfs-counters-bg"] .bfs-v2-counter__icon {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.bfs-v2-counter__value {
font-family: var(--bfs-font-display);
font-size: clamp(2.25rem, 2vw + 1.25rem, 3rem);
font-weight: 800;
line-height: 1;
margin-bottom: 0.5rem;
color: var(--bfs-ink);
letter-spacing: -0.025em;
}
.bfs-v2-counters[style*="--bfs-counters-bg"] .bfs-v2-counter__value { color: #fff; }
.bfs-v2-counter__label {
color: var(--bfs-ink-muted);
font-size: 0.875rem;
font-weight: 500;
}
.bfs-v2-counters[style*="--bfs-counters-bg"] .bfs-v2-counter__label { color: rgba(255, 255, 255, 0.85); }
/* --------------------------------------------------------------
12. Services + CTA
-------------------------------------------------------------- */
.bfs-v2-services {
padding: clamp(4rem, 7vw, 6rem) 0;
background: var(--bfs-paper);
}
/* Locked to 3 columns at desktop, 2 at tablet, 1 on mobile.
* Any orphan tile centers within the row instead of left-aligning. */
.bfs-v2-services__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: clamp(7rem, 11vw, 10rem);
justify-items: stretch;
}
.bfs-v2-services__grid > .bfs-v2-service:nth-last-child(1):nth-child(3n - 2) { grid-column: 2; }
.bfs-v2-services__grid > .bfs-v2-service:nth-last-child(2):nth-child(3n - 2),
.bfs-v2-services__grid > .bfs-v2-service:nth-last-child(2):nth-child(3n - 2) ~ .bfs-v2-service {
/* second-to-last orphan pair: shift first to col 1.5 visually via auto-margin */
}
@media (max-width: 991px) {
.bfs-v2-services__grid { grid-template-columns: repeat(2, 1fr); }
.bfs-v2-services__grid > .bfs-v2-service:nth-last-child(1):nth-child(3n - 2) { grid-column: auto; }
}
@media (max-width: 576px) {
.bfs-v2-services__grid { grid-template-columns: 1fr; }
}
.bfs-v2-service {
text-align: center;
padding: 2.25rem 1.5rem;
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-service:hover {
transform: translateY(-6px);
box-shadow: var(--bfs-shadow);
border-color: var(--bfs-accent-soft);
}
.bfs-v2-service__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px; height: 70px;
border-radius: 50%;
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
font-size: 1.65rem;
margin-bottom: 1rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-service:hover .bfs-v2-service__icon {
background: var(--bfs-accent);
color: #fff;
}
.bfs-v2-service__title {
font-family: var(--bfs-font-display);
font-size: 1.125rem;
font-weight: 700;
color: var(--bfs-ink);
margin-bottom: 0.4rem;
}
.bfs-v2-service__desc {
color: var(--bfs-ink-muted);
font-size: 0.9rem;
margin: 0;
line-height: 1.65;
}
/* Background pinned to --bfs-paper-dark (always-dark in both themes)
* instead of --bfs-ink (which flips to LIGHT in dark mode and made the
* CTA render as a washed-out light gradient on a dark page). */
.bfs-v2-cta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: clamp(4rem, 7vw, 6rem);
padding: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 5vw, 3.5rem);
background: linear-gradient(130deg, var(--bfs-paper-dark), color-mix(in srgb, var(--bfs-accent) 38%, var(--bfs-paper-dark)));
border-radius: var(--bfs-radius-xl);
color: #fff;
position: relative;
overflow: hidden;
}
.bfs-v2-cta::before {
content: '';
position: absolute;
right: -6rem;
top: -6rem;
width: 22rem; height: 22rem;
border-radius: 50%;
background: var(--bfs-accent);
opacity: 0.35;
filter: blur(50px);
pointer-events: none;
}
.bfs-v2-cta__copy { position: relative; z-index: 1; }
.bfs-v2-cta__phone {
display: inline-flex;
align-items: center;
gap: 1rem;
font-family: var(--bfs-font-display);
font-size: clamp(1.6rem, 2vw + 0.85rem, 2.5rem);
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
}
.bfs-v2-cta__phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px; height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
font-size: 1.05rem;
}
.bfs-v2-cta .bfs-v2__btn { position: relative; z-index: 1; }
/* --------------------------------------------------------------
13. Footer — Skoola-inspired 4-column with top accent strip
-------------------------------------------------------------- */
.bfs-v2__footer {
background: var(--bfs-paper-dark);
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
line-height: 1.75;
position: relative;
overflow: hidden;
}
/* Brand-colour glows — kept well off-canvas and subtle so they
* don't wash out the column titles. The prior 70px blur at
* opacity 0.16 bled over 'Quick Links' / 'Get In Touch' etc. */
.bfs-v2__footer::before {
content: '';
position: absolute;
top: -18rem; right: -14rem;
width: 24rem; height: 24rem;
border-radius: 50%;
background: var(--bfs-accent);
opacity: 0.09;
filter: blur(90px);
pointer-events: none;
z-index: 0;
}
.bfs-v2__footer::after {
content: '';
position: absolute;
left: -12rem; bottom: -12rem;
width: 18rem; height: 18rem;
border-radius: 50%;
background: var(--bfs-accent);
opacity: 0.06;
filter: blur(70px);
pointer-events: none;
z-index: 0;
}
/* Top accent strip — brand gradient ribbon. */
.bfs-v2__footer-topstrip {
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
var(--bfs-accent) 20%,
color-mix(in srgb, var(--bfs-accent) 60%, #fff) 50%,
var(--bfs-accent) 80%,
transparent 100%);
position: relative;
z-index: 2;
}
.bfs-v2__footer-main {
padding-block: clamp(3.25rem, 5vw, 4.5rem);
position: relative;
z-index: 1;
}
.bfs-v2__footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1.3fr 1.2fr;
gap: clamp(2rem, 3.5vw, 3.25rem);
}
@media (max-width: 991px) { .bfs-v2__footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bfs-v2__footer-grid { grid-template-columns: 1fr; } }
.bfs-v2__footer-logo img {
max-height: 52px;
margin-bottom: 1.25rem;
filter: brightness(0) invert(1);
}
.bfs-v2__footer-switcher { max-width: 280px; margin-bottom: 1.25rem; }
.bfs-v2__footer-switcher .form-control {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
border-radius: var(--bfs-radius-sm);
}
.bfs-v2__footer-about {
color: rgba(255, 255, 255, 0.66);
margin-bottom: 1.5rem;
max-width: 38ch;
line-height: 1.75;
}
/* Scoped under `.bfs-v2` so specificity (0,0,2,0) beats the
* global `.bfs-v2 h4 { color: var(--bfs-ink) }` rule (0,0,1,1).
* Without this, the title took --bfs-ink which is dark in light
* mode → invisible-on-dark-footer. Dark mode looked fine only
* because --bfs-ink flips to light there. */
.bfs-v2 .bfs-v2__footer-title {
font-family: var(--bfs-font-display);
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.005em;
margin: 0 0 1.5rem 0;
position: relative;
padding-bottom: 0.85rem;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.bfs-v2__footer-title::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 36px; height: 3px;
background: var(--bfs-accent);
border-radius: 2px;
box-shadow: 0 0 14px color-mix(in srgb, var(--bfs-accent) 40%, transparent);
}
/* Quick Links — each link carries a small brand-coloured chevron
* badge. Idle: subtle rounded pill with a thin right-chevron.
* Hover: badge fills with brand colour, chevron nudges right,
* text lifts to pure white. More intentional than a lone dash. */
.bfs-v2__footer-links li { padding: 0.4rem 0; }
.bfs-v2__footer-links a {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
font-weight: 500;
transition: color var(--bfs-dur) var(--bfs-ease);
position: relative;
}
.bfs-v2__footer-links a::before {
content: '';
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 10px 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
transition: background-color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__footer-links a:hover { color: #fff; }
.bfs-v2__footer-links a:hover::before {
background-color: var(--bfs-accent);
border-color: var(--bfs-accent);
transform: translateX(2px);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bfs-accent) 22%, transparent);
}
/* Contacts — icon-tile rows with label + value */
.bfs-v2__footer-contacts { display: flex; flex-direction: column; gap: 1.1rem; }
.bfs-v2__footer-contacts li {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.bfs-v2__footer-contact-icon {
flex-shrink: 0;
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--bfs-radius-sm);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--bfs-accent);
font-size: 0.95rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__footer-contacts li:hover .bfs-v2__footer-contact-icon {
background: var(--bfs-accent);
border-color: var(--bfs-accent);
color: #fff;
}
.bfs-v2__footer-contacts li > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bfs-v2__footer-contact-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.45);
font-weight: 600;
}
.bfs-v2__footer-contact-value {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.45;
word-break: break-word;
}
a.bfs-v2__footer-contact-value { transition: color var(--bfs-dur) var(--bfs-ease); }
a.bfs-v2__footer-contact-value:hover { color: var(--bfs-accent); }
/* Opening hours block */
.bfs-v2__footer-hours {
display: flex;
gap: 0.9rem;
align-items: flex-start;
padding: 1rem 1.1rem;
border-radius: var(--bfs-radius);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 1.25rem;
}
.bfs-v2__footer-hours i {
flex-shrink: 0;
color: var(--bfs-accent);
font-size: 1.05rem;
margin-top: 0.2rem;
}
.bfs-v2__footer-hours p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 0.9rem;
line-height: 1.6;
}
/* Admissions CTA tile — brand gradient strip */
.bfs-v2__footer-admissions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.1rem;
border-radius: var(--bfs-radius);
background: linear-gradient(130deg, var(--bfs-accent), color-mix(in srgb, var(--bfs-accent) 70%, #000));
color: #fff !important;
text-decoration: none;
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
box-shadow: var(--bfs-shadow-brand);
}
.bfs-v2__footer-admissions:hover { transform: translateY(-2px); box-shadow: var(--bfs-shadow); }
.bfs-v2__footer-admissions span { display: flex; flex-direction: column; line-height: 1.2; }
.bfs-v2__footer-admissions-kicker {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.78);
font-weight: 600;
}
.bfs-v2 .bfs-v2__footer-admissions strong {
font-family: var(--bfs-font-display);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #ffffff;
}
.bfs-v2__footer-admissions i {
font-size: 0.95rem;
transition: transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__footer-admissions:hover i { transform: translateX(4px); }
/* Social icons — circles that flip to brand on hover */
.bfs-v2__footer-social {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
}
.bfs-v2__footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.85);
font-size: 0.9rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__footer-social a:hover {
background: var(--bfs-accent);
border-color: var(--bfs-accent);
color: #fff;
transform: translateY(-3px);
}
/* Copyright strip */
.bfs-v2__footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.35);
font-size: 0.85rem;
position: relative;
z-index: 1;
line-height: 1.4;
}
.bfs-v2__footer-copyright .bfs-v2__container { padding-block: 1rem; }
.bfs-v2__footer-copyright-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.bfs-v2__footer-copyright-text { flex: 1 1 auto; }
.bfs-v2__footer-copyright-text p { margin: 0; }
.bfs-v2__footer-copyright-socials {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.bfs-v2__footer-copyright-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
color: rgba(255, 255, 255, 0.55);
font-size: 0.78rem;
transition: color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2__footer-copyright-socials a:hover { color: var(--bfs-accent); }
@media (max-width: 560px) {
.bfs-v2__footer-copyright-row { justify-content: center; text-align: center; }
.bfs-v2__footer-copyright-socials { display: none; }
}
/* --------------------------------------------------------------
14. Back to top
-------------------------------------------------------------- */
.bfs-v2__back-to-top {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
width: 46px; height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bfs-accent);
color: #fff !important;
box-shadow: var(--bfs-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity var(--bfs-dur) var(--bfs-ease),
visibility var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease),
background var(--bfs-dur) var(--bfs-ease);
z-index: 50;
}
.bfs-v2__back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bfs-v2__back-to-top:hover { background: var(--bfs-accent-ink); color: #fff; }
/* --------------------------------------------------------------
15. Forms (admission, contact)
-------------------------------------------------------------- */
.bfs-v2 .form-control,
.bfs-v2 input[type="text"],
.bfs-v2 input[type="email"],
.bfs-v2 input[type="tel"],
.bfs-v2 input[type="number"],
.bfs-v2 input[type="date"],
.bfs-v2 input[type="password"],
.bfs-v2 textarea,
.bfs-v2 select.form-control {
font-family: var(--bfs-font-sans);
font-size: 0.95rem;
color: var(--bfs-ink);
background: var(--bfs-paper);
border: 1.5px solid var(--bfs-line);
border-radius: var(--bfs-radius-sm);
padding: 0.85rem 1rem;
transition: border-color var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .form-control:focus,
.bfs-v2 input:focus,
.bfs-v2 textarea:focus,
.bfs-v2 select.form-control:focus {
outline: none;
border-color: var(--bfs-accent);
box-shadow: 0 0 0 4px var(--bfs-accent-tint);
}
.bfs-v2 label {
color: var(--bfs-ink);
font-weight: 600;
font-size: 0.92rem;
}
/* --------------------------------------------------------------
15b. WhatsApp widget — ported from legacy style.css so the
feature works the same under v2. Click handler is bound in
bfs-frontend-v2.js (mirrors the legacy custom.js handler).
-------------------------------------------------------------- */
.bfs-v2 .whatsapp-popup {
z-index: 999;
position: fixed;
bottom: 80px;
right: 20px;
}
.bfs-v2 .whatsapp-popup .whatsapp-button {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
color: #fff;
background: #03cc0b;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
box-shadow: var(--bfs-shadow);
position: relative;
transition: transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .whatsapp-popup .whatsapp-button:hover { transform: scale(1.05); }
.bfs-v2 .whatsapp-popup .whatsapp-button i {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
transition: opacity var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .whatsapp-popup:not(.open) .i-close { opacity: 0; transform: scale(0.6); }
.bfs-v2 .whatsapp-popup.open .i-open { opacity: 0; transform: scale(0.6); }
.bfs-v2 .whatsapp-popup.open .whatsapp-button { background: var(--bfs-paper-dark); }
.bfs-v2 .whatsapp-popup .popup-content {
position: absolute;
bottom: calc(100% + 12px);
right: 0;
margin: 0;
width: calc(100vw - 60px);
max-width: 320px;
background: #ffffff;
border-radius: var(--bfs-radius);
box-shadow: var(--bfs-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--bfs-dur) var(--bfs-ease),
visibility var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .whatsapp-popup .popup-content::after {
content: "";
position: absolute;
display: block;
top: 100%;
right: 22px;
border: 8px solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
}
.bfs-v2 .whatsapp-popup.open .popup-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.bfs-v2 .whatsapp-popup .popup-content-header {
padding: 14px 16px;
background: #03cc0b;
border-radius: var(--bfs-radius) var(--bfs-radius) 0 0;
display: flex;
align-items: center;
gap: 12px;
}
.bfs-v2 .whatsapp-popup .popup-content-header > i {
font-size: 32px;
color: #fff;
}
.bfs-v2 .whatsapp-popup .popup-content-header h5 {
font-family: var(--bfs-font-display);
font-size: 1rem;
font-weight: 700;
color: #fff;
letter-spacing: 0;
text-transform: none;
margin: 0;
padding: 0;
line-height: 1.25;
}
.bfs-v2 .whatsapp-popup .popup-content-header h5 span {
display: block;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.3;
margin-top: 4px;
color: rgba(255, 255, 255, 0.92);
}
.bfs-v2 .whatsapp-popup .whatsapp-content ul {
list-style: none;
padding: 12px;
margin: 0;
max-height: 320px;
overflow-y: auto;
}
.bfs-v2 .whatsapp-popup .whatsapp-content ul li {
line-height: 1.4;
background: var(--bfs-paper-tint);
padding: 12px;
position: relative;
margin: 0 0 8px 0;
border-radius: var(--bfs-radius-sm);
list-style: none;
}
.bfs-v2 .whatsapp-popup .whatsapp-content ul li:last-child { margin-bottom: 0; }
.bfs-v2 .whatsapp-popup a { text-decoration: none; color: inherit; }
.bfs-v2 .whatsapp-popup .whatsapp-agent {
display: flex;
align-items: center;
gap: 12px;
overflow: hidden;
position: relative;
color: var(--bfs-ink);
}
.bfs-v2 .whatsapp-popup .whatsapp-img {
flex: 0 0 45px;
width: 45px;
height: 45px;
position: relative;
}
.bfs-v2 .whatsapp-popup .whatsapp-content .whatsapp-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid #03cc0b;
object-fit: cover;
display: block;
}
.bfs-v2 .whatsapp-popup .whatsapp-img::after {
content: "";
position: absolute;
display: block;
width: 11px;
height: 11px;
background: #03cc0b;
top: 0;
right: -2px;
border-radius: 50%;
border: 2px solid #ffffff;
}
.bfs-v2 .whatsapp-popup .offline .whatsapp-img::after { background: #bababa; }
.bfs-v2 .whatsapp-popup .whatsapp-content .offline .whatsapp-avatar { border-color: #bababa; }
.bfs-v2 .whatsapp-popup li.offline {
pointer-events: none;
filter: saturate(0);
opacity: 0.7;
}
.bfs-v2 .whatsapp-popup .whatsapp-text {
font-weight: 600;
color: var(--bfs-ink);
font-size: 0.92rem;
display: block;
line-height: 1.35;
flex: 1;
}
.bfs-v2 .whatsapp-popup .whatsapp-label {
font-size: 0.72rem;
display: block;
font-weight: 400;
color: var(--bfs-ink-muted);
margin-bottom: 2px;
}
.bfs-v2 .whatsapp-popup li.online .whatsapp-label .status { color: #03cc0b; }
.bfs-v2 .whatsapp-popup .content-footer {
background: var(--bfs-paper-tint);
border-radius: 0 0 var(--bfs-radius) var(--bfs-radius);
text-align: center;
border-top: 1px solid var(--bfs-line-soft);
}
.bfs-v2 .whatsapp-popup .content-footer p {
font-size: 0.78rem;
line-height: 1.4;
padding: 12px;
margin: 0;
color: var(--bfs-ink-muted);
}
/* --------------------------------------------------------------
16. Legacy pages wrapped in v2 shell
-------------------------------------------------------------- */
.bfs-v2__main > *:first-child { margin-top: 0; }
.bfs-v2__main section:not([class*="bfs-v2"]) {
padding: 2.75rem 0;
}
/* --------------------------------------------------------------
17. Reveal-on-scroll
-------------------------------------------------------------- */
[data-bfs-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--bfs-ease),
transform 700ms var(--bfs-ease);
}
[data-bfs-reveal].is-revealed { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
[data-bfs-reveal] { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
.bfs-v2-hero__image { transition: none; transform: scale(1); }
}
/* --------------------------------------------------------------
18. Responsive adjustments
-------------------------------------------------------------- */
/* --------------------------------------------------------------
Mobile flow improvements (≤768 / ≤576 / ≤420)
- Tighter section padding, comfier hero, calmer typography
- Topbar stays informative without crowding
- Footer stacks with proper rhythm
- Newsticker simplifies on narrow viewports
-------------------------------------------------------------- */
@media (max-width: 768px) {
:root { --bfs-gutter: 1.25rem; }
/* Topbar — drop the address half on phones, keep contact row tidy */
.bfs-v2__topbar { padding: 0.55rem 0; font-size: 0.8rem; }
.bfs-v2__topbar-row { justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.bfs-v2__topbar-hours { font-size: 0.78rem; }
.bfs-v2__topbar-hours span { display: none; }
.bfs-v2__topbar-hours::after { content: 'Open today'; }
.bfs-v2__topbar-contact { gap: 0.85rem; font-size: 0.78rem; margin-left: auto; }
.bfs-v2__topbar-link span { display: none; }
.bfs-v2__topbar-link i { font-size: 1em; }
/* Newsticker — keep but slim */
.bfs-v2__newsticker { padding: 0.55rem 0; font-size: 0.8rem; }
.bfs-v2__newsticker-row { gap: 0.85rem; min-height: 32px; }
.bfs-v2__newsticker-badge { padding: 0.35rem 0.7rem; font-size: 0.66rem; }
/* Hero */
.bfs-v2-hero { min-height: clamp(440px, 78vh, 640px); }
.bfs-v2-hero__body { padding-block: 4.5rem; }
.bfs-v2-hero__content { max-width: 100%; }
.bfs-v2-hero__title { font-size: clamp(1.85rem, 9vw, 2.75rem); margin-bottom: 1rem; }
.bfs-v2-hero__desc { font-size: 1rem; margin-bottom: 1.75rem; }
.bfs-v2-hero__actions { gap: 0.7rem; }
.bfs-v2-hero__actions .bfs-v2__btn { flex: 1 1 calc(50% - 0.35rem); justify-content: center; }
.bfs-v2-hero__controls { bottom: 1.25rem; }
.bfs-v2-hero__arrow { width: 38px; height: 38px; }
/* Section heads */
.bfs-v2-section-head { margin-bottom: 2.25rem; }
.bfs-v2-section-head h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.bfs-v2-section-head p { font-size: 0.97rem; }
/* Features overlap less on mobile */
.bfs-v2-features { margin-top: -2rem; padding: 3rem 0; }
.bfs-v2-features__grid > .bfs-v2-feature { max-width: 100%; flex-basis: 100%; }
.bfs-v2-feature { padding: 1.75rem 1.5rem; }
.bfs-v2-feature__icon { width: 52px; height: 52px; font-size: 1.4rem; margin-bottom: 1rem; }
.bfs-v2-feature__title { font-size: 1.25rem; }
/* Welcome — image on top, copy below, no orbit blob clutter */
.bfs-v2-welcome { padding: 3rem 0; }
.bfs-v2-welcome__grid { gap: 2rem; }
.bfs-v2-welcome__media::before { display: none; }
.bfs-v2-welcome__frame { aspect-ratio: 5 / 4; }
.bfs-v2-welcome__title { font-size: clamp(1.6rem, 6.5vw, 2.25rem); }
.bfs-v2-welcome__body { font-size: 1rem; }
/* Teachers grid: 2-up at tablet, 1-up tightest */
.bfs-v2-teachers { padding: 3rem 0; }
.bfs-v2-teachers__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.bfs-v2-teacher__name { font-size: 1.05rem; }
.bfs-v2-teacher__role { font-size: 0.66rem; }
/* Testimonials stack neatly */
.bfs-v2-testimonials { padding: 3rem 0; }
.bfs-v2-testimonials__track { gap: 1rem; }
.bfs-v2-testimonial { padding: 1.85rem 1.5rem 1.5rem; }
.bfs-v2-testimonial__mark { font-size: 3.25rem; top: 0.85rem; right: 1rem; }
.bfs-v2-testimonial__quote { font-size: 1rem; }
/* Counters */
.bfs-v2-counters { padding: 3rem 0; }
.bfs-v2-counters__grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.bfs-v2-counter { padding: 1.25rem 0.85rem; }
.bfs-v2-counter__icon { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: 0.65rem; }
.bfs-v2-counter__label { font-size: 0.78rem; }
/* Services / CTA */
.bfs-v2-services { padding: 3rem 0; }
.bfs-v2-service { padding: 1.75rem 1.25rem; }
.bfs-v2-cta {
padding: 1.85rem 1.35rem;
flex-direction: column;
align-items: stretch;
text-align: center;
gap: 1.1rem;
margin-top: clamp(2.5rem, 7vw, 4rem);
}
.bfs-v2-cta__copy {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
.bfs-v2-cta__copy .bfs-v2-eyebrow { margin-bottom: 0; }
.bfs-v2-cta__phone {
justify-content: center;
flex-wrap: nowrap;
font-size: clamp(1.2rem, 6vw, 1.65rem);
gap: 0.7rem;
white-space: nowrap;
max-width: 100%;
}
.bfs-v2-cta__phone > span:last-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bfs-v2-cta__phone-icon {
width: 38px;
height: 38px;
font-size: 0.9rem;
flex-shrink: 0;
}
.bfs-v2-cta .bfs-v2__btn {
align-self: center;
width: 100%;
justify-content: center;
}
.bfs-v2-cta::before { width: 14rem; height: 14rem; }
/* Footer — new grid has its own responsive rules (4→2→1);
* only tighten the title spacing here. */
.bfs-v2__footer-title { padding-bottom: 0.65rem; margin-bottom: 1rem; }
.bfs-v2__footer-main { padding-block: clamp(2.5rem, 5vw, 3rem); }
/* Back to top */
.bfs-v2__back-to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
}
@media (max-width: 576px) {
.bfs-v2-hero__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
.bfs-v2-hero__actions .bfs-v2__btn { flex-basis: 100%; }
.bfs-v2-features__grid > .bfs-v2-feature { max-width: 100%; flex-basis: 100%; }
.bfs-v2-services__grid { grid-template-columns: 1fr; }
.bfs-v2-services__grid > .bfs-v2-service:nth-last-child(1):nth-child(3n - 2) { grid-column: auto; }
.bfs-v2-counters__grid { grid-template-columns: 1fr; }
.bfs-v2-teachers__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}
@media (max-width: 420px) {
.bfs-v2__topbar-hours::after { content: ''; }
.bfs-v2__topbar-hours i { display: none; }
.bfs-v2-hero__eyebrow { font-size: 0.75rem; padding: 0.45rem 0.85rem; }
}
/* ==============================================================
18b. PAGE HEADER — consistent title banner for inner pages
--------------------------------------------------------------
Rendered by the v2 layout for every non-homepage route so the
top of about / news / contact / gallery / teachers / etc. all
share one branded hero. Content below may still be legacy
chaos — phase 3 will rewrite those — but the entry point
reads as one unified site.
============================================================== */
.bfs-v2-page-header {
position: relative;
isolation: isolate;
background: var(--bfs-paper-dark);
color: #fff;
padding-block: clamp(4rem, 8vw, 7rem);
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Layered background: radial brand glow + linear dark gradient +
* subtle dot grid. Keeps the title legible at every viewport. */
.bfs-v2-page-header__bg {
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse at 78% 18%, color-mix(in srgb, var(--bfs-accent) 38%, transparent) 0%, transparent 55%),
radial-gradient(ellipse at 12% 92%, color-mix(in srgb, var(--bfs-accent) 24%, transparent) 0%, transparent 50%),
linear-gradient(135deg, var(--bfs-paper-dark) 0%, var(--bfs-paper-dark-2) 100%);
}
.bfs-v2-page-header__bg::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 35%, #000 70%, transparent 100%);
pointer-events: none;
opacity: 0.7;
}
/* Soft floating orbs */
.bfs-v2-page-header__shapes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bfs-v2-page-header__shape {
position: absolute;
border-radius: 50%;
background: var(--bfs-accent);
filter: blur(70px);
}
.bfs-v2-page-header__shape--1 {
top: -8rem; right: -10rem;
width: 22rem; height: 22rem;
opacity: 0.14;
}
.bfs-v2-page-header__shape--2 {
bottom: -6rem; left: -6rem;
width: 16rem; height: 16rem;
opacity: 0.08;
}
.bfs-v2-page-header__inner {
position: relative;
z-index: 1;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.15rem;
}
/* Breadcrumb pill */
.bfs-v2-page-header__crumbs {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 1.1rem;
background: rgba(10, 16, 32, 0.45);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--bfs-radius-pill);
font-family: var(--bfs-font-sans);
font-size: 0.82rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.bfs-v2 .bfs-v2-page-header__crumbs a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: rgba(255, 255, 255, 0.85);
transition: color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .bfs-v2-page-header__crumbs a:hover { color: var(--bfs-accent); }
.bfs-v2-page-header__crumbs a i { font-size: 0.82em; opacity: 0.85; }
.bfs-v2-page-header__crumbs-sep { font-size: 0.7em; color: var(--bfs-accent); }
.bfs-v2-page-header__crumbs-current {
color: #fff;
font-weight: 600;
letter-spacing: 0.005em;
}
/* Title — scoped under .bfs-v2 to beat the global h1 rule */
.bfs-v2 .bfs-v2-page-header__title {
font-family: var(--bfs-font-display);
font-weight: 800;
font-size: clamp(2.15rem, 4vw + 1rem, 3.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
position: relative;
padding-bottom: 1.25rem;
}
.bfs-v2 .bfs-v2-page-header__title::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 72px;
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, transparent, var(--bfs-accent), transparent);
box-shadow: 0 0 20px color-mix(in srgb, var(--bfs-accent) 45%, transparent);
}
@media (max-width: 768px) {
.bfs-v2-page-header { padding-block: clamp(3rem, 7vw, 4.5rem); }
.bfs-v2-page-header__inner { gap: 0.9rem; }
.bfs-v2-page-header__crumbs { font-size: 0.75rem; padding: 0.42rem 0.9rem; }
.bfs-v2 .bfs-v2-page-header__title { font-size: clamp(1.6rem, 8vw, 2.4rem); padding-bottom: 1rem; }
.bfs-v2 .bfs-v2-page-header__title::after { width: 56px; height: 3px; }
}
/* ==============================================================
18c. INNER PAGES — shared components
--------------------------------------------------------------
Reusable primitives for about / faq / teachers / news / events
/ gallery / contact / page. Token-driven so brand colour and
dark-mode inherit automatically.
============================================================== */
.bfs-v2-page {
padding: clamp(3.5rem, 6vw, 5.5rem) 0;
background: var(--bfs-paper);
}
.bfs-v2-page--tint { background: var(--bfs-paper-tint); }
.bfs-v2-page__header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.bfs-v2-page__header h2 {
font-family: var(--bfs-font-display);
font-size: clamp(1.6rem, 2.4vw + 0.75rem, 2.25rem);
margin: 0 0 0.5rem 0;
color: var(--bfs-ink);
}
.bfs-v2-page__lede {
color: var(--bfs-ink-muted);
font-size: 1.0625rem;
line-height: 1.75;
max-width: 70ch;
}
/* Prose — for CMS-supplied rich content (about, page, news body etc.). */
.bfs-v2-prose { color: var(--bfs-ink-soft); font-size: 1.0625rem; line-height: 1.85; }
.bfs-v2-prose h1, .bfs-v2-prose h2, .bfs-v2-prose h3, .bfs-v2-prose h4 {
color: var(--bfs-ink);
font-family: var(--bfs-font-display);
margin-top: 1.5em;
}
.bfs-v2-prose h1 { font-size: 2.25rem; }
.bfs-v2-prose h2 { font-size: 1.75rem; }
.bfs-v2-prose h3 { font-size: 1.375rem; }
.bfs-v2-prose h4 { font-size: 1.15rem; }
.bfs-v2-prose p { margin: 0 0 1.1em; }
.bfs-v2-prose ul, .bfs-v2-prose ol { padding-left: 1.4em; margin: 0 0 1.1em; list-style: revert; }
.bfs-v2-prose ul { list-style: disc; }
.bfs-v2-prose ol { list-style: decimal; }
.bfs-v2-prose li { margin-bottom: 0.35em; }
.bfs-v2-prose a { color: var(--bfs-accent); text-decoration: underline; text-underline-offset: 3px; }
.bfs-v2-prose a:hover { color: var(--bfs-accent-ink); }
.bfs-v2-prose img { border-radius: var(--bfs-radius); margin: 1rem 0; }
.bfs-v2-prose blockquote {
border-left: 3px solid var(--bfs-accent);
padding: 0.25rem 0 0.25rem 1.25rem;
margin: 1.25rem 0;
font-style: italic;
color: var(--bfs-ink);
background: var(--bfs-paper-tint);
border-radius: 0 var(--bfs-radius-sm) var(--bfs-radius-sm) 0;
}
/* About — two-column intro */
.bfs-v2-about-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.bfs-v2-about-intro__title { font-size: clamp(1.875rem, 3vw + 0.75rem, 2.75rem); margin-bottom: 1rem; }
.bfs-v2-about-intro__kicker { color: var(--bfs-accent); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.5rem; }
.bfs-v2-about-intro__img {
border-radius: var(--bfs-radius-xl);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--bfs-shadow);
position: relative;
}
.bfs-v2-about-intro__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
.bfs-v2-about-intro { grid-template-columns: 1fr; }
.bfs-v2-about-intro__img { order: -1; aspect-ratio: 16 / 10; }
}
.bfs-v2-parallax-strip {
position: relative;
isolation: isolate;
padding: clamp(4rem, 7vw, 6rem) 0;
color: #fff;
overflow: hidden;
background: var(--bfs-paper-dark);
background-image: var(--bfs-parallax-img, none);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.bfs-v2-parallax-strip::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10,16,32,0.82), color-mix(in srgb, var(--bfs-accent) 45%, rgba(10,16,32,0.7)));
z-index: -1;
}
.bfs-v2-parallax-strip__kicker { color: rgba(255, 255, 255, 0.8); font-weight: 600; margin-bottom: 0.5rem; }
.bfs-v2-parallax-strip h2 {
color: #fff;
font-size: clamp(1.75rem, 2.8vw + 0.75rem, 2.5rem);
margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
text-align: center;
}
.bfs-v2-parallax-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
}
.bfs-v2-parallax-grid__item {
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 1.75rem 1.5rem;
border-radius: var(--bfs-radius-lg);
transition: background var(--bfs-dur) var(--bfs-ease), transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-parallax-grid__item:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); }
.bfs-v2-parallax-grid__item i { color: var(--bfs-accent); font-size: 1.6rem; margin-bottom: 0.75rem; }
.bfs-v2-parallax-grid__item h5 { color: #fff; font-family: var(--bfs-font-display); font-size: 1.05rem; margin: 0 0 0.45rem; }
.bfs-v2-parallax-grid__item p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 0.92rem; line-height: 1.7; }
/* FAQ accordion */
.bfs-v2-faq { display: flex; flex-direction: column; gap: 0.85rem; }
.bfs-v2-faq__item {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius);
overflow: hidden;
transition: border-color var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-faq__item.is-open { border-color: var(--bfs-accent-soft); box-shadow: var(--bfs-shadow-sm); }
.bfs-v2-faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.35rem;
cursor: pointer;
font-family: var(--bfs-font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--bfs-ink);
background: transparent;
border: 0;
width: 100%;
text-align: left;
transition: color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-faq__item.is-open .bfs-v2-faq__question { color: var(--bfs-accent); }
.bfs-v2-faq__indicator {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
font-size: 0.9rem;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
transform var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-faq__item.is-open .bfs-v2-faq__indicator {
background: var(--bfs-accent);
color: #fff;
transform: rotate(45deg);
}
.bfs-v2-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--bfs-dur-slow) var(--bfs-ease);
}
.bfs-v2-faq__item.is-open .bfs-v2-faq__answer { max-height: 600px; }
.bfs-v2-faq__answer-inner {
padding: 0 1.35rem 1.35rem;
color: var(--bfs-ink-soft);
line-height: 1.75;
}
/* Filter pills (teachers / gallery category filters) */
.bfs-v2-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
justify-content: center;
}
.bfs-v2-filter {
padding: 0.55rem 1.15rem;
border-radius: var(--bfs-radius-pill);
background: var(--bfs-paper);
border: 1px solid var(--bfs-line);
color: var(--bfs-ink-soft);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-filter:hover { color: var(--bfs-accent); border-color: var(--bfs-accent-soft); }
.bfs-v2-filter.is-active {
background: var(--bfs-accent);
color: #fff;
border-color: var(--bfs-accent);
}
/* Content + sidebar split (news_view, event_view) */
.bfs-v2-article { display: grid; grid-template-columns: 1fr 320px; gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 991px) { .bfs-v2-article { grid-template-columns: 1fr; } }
.bfs-v2-article__hero {
border-radius: var(--bfs-radius-lg);
overflow: hidden;
margin-bottom: 1.5rem;
aspect-ratio: 16 / 9;
background: var(--bfs-paper-tint);
}
.bfs-v2-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.bfs-v2-article__title {
font-family: var(--bfs-font-display);
font-size: clamp(1.6rem, 2.4vw + 0.75rem, 2.5rem);
margin: 0 0 0.85rem;
color: var(--bfs-ink);
line-height: 1.15;
}
.bfs-v2-article__meta {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
font-size: 0.88rem;
color: var(--bfs-ink-muted);
margin-bottom: 1.5rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--bfs-line-soft);
}
.bfs-v2-article__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.bfs-v2-article__meta i { color: var(--bfs-accent); }
.bfs-v2-article__body { color: var(--bfs-ink-soft); line-height: 1.85; font-size: 1.0625rem; }
.bfs-v2-article__body p { margin-bottom: 1em; }
.bfs-v2-article__body a { color: var(--bfs-accent); }
.bfs-v2-aside { display: flex; flex-direction: column; gap: 1.75rem; }
.bfs-v2-aside__card {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
padding: 1.5rem 1.35rem;
}
.bfs-v2-aside__title {
font-family: var(--bfs-font-display);
font-size: 1.05rem;
color: var(--bfs-ink);
margin: 0 0 1rem;
padding-bottom: 0.75rem;
position: relative;
}
.bfs-v2-aside__title::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 32px; height: 2px;
background: var(--bfs-accent);
border-radius: 2px;
}
.bfs-v2-aside__list { display: flex; flex-direction: column; gap: 0.85rem; }
.bfs-v2-aside__list a {
color: var(--bfs-ink);
font-weight: 500;
font-size: 0.95rem;
line-height: 1.4;
transition: color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-aside__list a:hover { color: var(--bfs-accent); }
.bfs-v2-aside__list time {
display: block;
color: var(--bfs-ink-muted);
font-size: 0.78rem;
margin-top: 0.15rem;
}
/* Post card (news / events listings) */
.bfs-v2-post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.bfs-v2-post {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
overflow: hidden;
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
display: flex;
flex-direction: column;
}
.bfs-v2-post:hover { transform: translateY(-4px); box-shadow: var(--bfs-shadow); }
.bfs-v2-post__media {
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--bfs-paper-tint);
position: relative;
}
.bfs-v2-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--bfs-ease); }
.bfs-v2-post:hover .bfs-v2-post__media img { transform: scale(1.05); }
.bfs-v2-post__date {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--bfs-paper);
color: var(--bfs-ink);
border-radius: var(--bfs-radius-sm);
padding: 0.45rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.2;
box-shadow: var(--bfs-shadow-xs);
text-align: center;
}
.bfs-v2-post__date strong { display: block; font-family: var(--bfs-font-display); font-size: 1.15rem; color: var(--bfs-accent); }
.bfs-v2-post__body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.bfs-v2-post__meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--bfs-ink-muted);
margin-bottom: 0.65rem;
}
.bfs-v2-post__meta i { color: var(--bfs-accent); margin-right: 0.3em; }
.bfs-v2-post__title {
font-family: var(--bfs-font-display);
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 0.6rem;
line-height: 1.3;
}
.bfs-v2-post__title a { color: var(--bfs-ink); transition: color var(--bfs-dur) var(--bfs-ease); }
.bfs-v2-post__title a:hover { color: var(--bfs-accent); }
.bfs-v2-post__excerpt { color: var(--bfs-ink-muted); font-size: 0.93rem; line-height: 1.7; margin: 0 0 1rem; flex-grow: 1; }
.bfs-v2-post__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--bfs-accent);
font-weight: 600;
font-size: 0.88rem;
align-self: flex-start;
}
.bfs-v2-post__link i { transition: transform var(--bfs-dur) var(--bfs-ease); }
.bfs-v2-post__link:hover i { transform: translateX(4px); }
/* Pagination */
.bfs-v2-pagination {
display: flex;
justify-content: center;
margin-top: clamp(2.5rem, 5vw, 4rem);
}
.bfs-v2-pagination ul.pagination {
display: inline-flex;
gap: 0.35rem;
padding: 0;
margin: 0;
list-style: none;
flex-wrap: wrap;
justify-content: center;
}
.bfs-v2-pagination ul.pagination li { list-style: none; }
.bfs-v2-pagination ul.pagination li a,
.bfs-v2-pagination ul.pagination li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.85rem;
border-radius: var(--bfs-radius-sm);
background: var(--bfs-paper);
border: 1px solid var(--bfs-line);
color: var(--bfs-ink);
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
transition: background var(--bfs-dur) var(--bfs-ease),
color var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-pagination ul.pagination li a:hover {
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
border-color: var(--bfs-accent-soft);
}
.bfs-v2-pagination ul.pagination li.active span {
background: var(--bfs-accent);
color: #fff;
border-color: var(--bfs-accent);
}
/* Gallery album card */
.bfs-v2-album {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
overflow: hidden;
transition: transform var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
display: block;
color: inherit;
text-decoration: none;
}
.bfs-v2-album:hover { transform: translateY(-4px); box-shadow: var(--bfs-shadow); }
.bfs-v2-album__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bfs-paper-shade);
position: relative;
}
.bfs-v2-album__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--bfs-ease); }
.bfs-v2-album:hover .bfs-v2-album__media img { transform: scale(1.06); }
.bfs-v2-album__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(10,16,32,0) 40%, rgba(10,16,32,0.6));
opacity: 0;
transition: opacity var(--bfs-dur) var(--bfs-ease);
color: #fff;
}
.bfs-v2-album:hover .bfs-v2-album__overlay { opacity: 1; }
.bfs-v2-album__overlay i {
font-size: 1.5rem;
color: #fff;
background: var(--bfs-accent);
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
box-shadow: var(--bfs-shadow);
}
.bfs-v2-album__body { padding: 1.15rem 1.35rem 1.4rem; }
.bfs-v2-album__body h5 {
font-family: var(--bfs-font-display);
font-size: 1.08rem;
font-weight: 700;
margin: 0 0 0.35rem;
color: var(--bfs-ink);
}
.bfs-v2-album__body p { color: var(--bfs-ink-muted); font-size: 0.88rem; margin: 0; }
.bfs-v2-album__meta { color: var(--bfs-ink-faint); font-size: 0.78rem; margin-bottom: 0.3rem; }
/* Photo/video grid (gallery_view) */
.bfs-v2-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1rem;
}
.bfs-v2-photo {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--bfs-radius);
background: var(--bfs-paper-shade);
position: relative;
display: block;
}
.bfs-v2-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--bfs-ease); }
.bfs-v2-photo:hover img { transform: scale(1.05); }
.bfs-v2-photo__tag {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(10,16,32,0), rgba(10,16,32,0.5));
opacity: 0;
transition: opacity var(--bfs-dur) var(--bfs-ease);
color: #fff;
font-size: 1.5rem;
}
.bfs-v2-photo:hover .bfs-v2-photo__tag { opacity: 1; }
.bfs-v2-photo__tag i {
width: 54px; height: 54px;
border-radius: 50%;
background: var(--bfs-accent);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--bfs-shadow);
}
/* Contact page */
.bfs-v2-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (max-width: 991px) { .bfs-v2-contact-grid { grid-template-columns: 1fr; } }
.bfs-v2-contact-form {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
padding: clamp(1.75rem, 3vw, 2.5rem);
box-shadow: var(--bfs-shadow-sm);
}
.bfs-v2-contact-form__title {
font-family: var(--bfs-font-display);
font-size: 1.5rem;
margin: 0 0 1.5rem;
color: var(--bfs-ink);
}
.bfs-v2-contact-form .bfs-v2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 576px) { .bfs-v2-contact-form .bfs-v2-row { grid-template-columns: 1fr; } }
.bfs-v2-contact-form .bfs-v2-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.bfs-v2-contact-form .bfs-v2-field label { font-size: 0.82rem; font-weight: 600; color: var(--bfs-ink); }
.bfs-v2-contact-form .bfs-v2-field .error { color: #dc2626; font-size: 0.8rem; }
.bfs-v2-contact-alert {
background: color-mix(in srgb, #10b981 14%, transparent);
border: 1px solid color-mix(in srgb, #10b981 40%, transparent);
color: color-mix(in srgb, #10b981 90%, #000);
padding: 0.85rem 1.1rem;
border-radius: var(--bfs-radius);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.bfs-v2-contact-aside { display: flex; flex-direction: column; gap: 1rem; }
.bfs-v2-contact-card {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
padding: 1.35rem 1.4rem;
display: flex;
gap: 1rem;
align-items: flex-start;
transition: transform var(--bfs-dur) var(--bfs-ease),
border-color var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2-contact-card:hover { transform: translateY(-3px); border-color: var(--bfs-accent-soft); }
.bfs-v2-contact-card__icon {
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: var(--bfs-radius);
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.bfs-v2-contact-card__body h5 {
font-family: var(--bfs-font-display);
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.2rem;
color: var(--bfs-ink);
}
.bfs-v2-contact-card__body p { margin: 0; font-size: 0.93rem; color: var(--bfs-ink-soft); line-height: 1.55; }
.bfs-v2-contact-map {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
border-radius: var(--bfs-radius-lg);
overflow: hidden;
border: 1px solid var(--bfs-line-soft);
background: var(--bfs-paper-tint);
}
.bfs-v2-contact-map iframe { display: block; width: 100%; height: 420px; border: 0; }
/* Teachers filter / grid reuse teacher card from homepage */
.bfs-v2-teachers--inner { background: var(--bfs-paper); padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.bfs-v2-teachers--inner .bfs-v2-teachers__veil { display: none; }
.bfs-v2-teachers--inner .bfs-v2-teacher { border: 1px solid var(--bfs-line-soft); }
.bfs-v2-teachers--inner .bfs-v2-teacher__name { color: var(--bfs-ink); }
.bfs-v2-teachers--inner .bfs-v2-teacher__role { color: var(--bfs-ink-muted); }
/* Hide filtered-out teachers (data-group mismatch) */
.bfs-v2-teachers__grid > [data-bfs-hidden] { display: none; }
/* ==============================================================
18d. LEGACY FORM COMPAT — transactional inner pages
--------------------------------------------------------------
Admission / admit-card / exam-results / certificates forms
preserve the legacy field markup (name attrs, data-plugin-*,
frm-submit-data, custom-file, Bootstrap row/col grid) so the
controller validation + AJAX handler keep working unchanged.
These rules restyle the legacy classes to read as v2.
============================================================== */
/* Box wrapper used by every legacy form (.box2.form-box) */
.bfs-v2 .box2.form-box {
background: var(--bfs-paper);
border: 1px solid var(--bfs-line-soft);
border-radius: var(--bfs-radius-lg);
padding: clamp(1.75rem, 3vw, 2.75rem);
box-shadow: var(--bfs-shadow-sm);
margin-bottom: 1.5rem;
}
/* Headers-line — section divider inside admission form */
.bfs-v2 .headers-line {
display: flex;
align-items: center;
gap: 0.7rem;
font-family: var(--bfs-font-display);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bfs-accent);
margin: 2rem 0 1.25rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--bfs-line-soft);
}
.bfs-v2 .headers-line i {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--bfs-radius-sm);
background: var(--bfs-accent-tint);
color: var(--bfs-accent);
font-size: 0.9rem;
}
/* Form controls — unify with v2 input styling */
.bfs-v2 .form-group { margin-bottom: 1.15rem; }
.bfs-v2 .form-group label,
.bfs-v2 .form-group .control-label {
display: block;
font-family: var(--bfs-font-sans);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--bfs-ink);
margin-bottom: 0.4rem;
text-transform: none;
}
.bfs-v2 .form-group .required,
.bfs-v2 .form-group span.required {
color: #dc2626;
margin-left: 0.15rem;
font-weight: 700;
}
.bfs-v2 .form-group .error {
display: block;
color: #dc2626;
font-size: 0.78rem;
margin-top: 0.3rem;
min-height: 1.1em;
}
/* Select2 overrides for v2 */
.bfs-v2 .select2-container--default .select2-selection--single {
background: var(--bfs-paper) !important;
border: 1.5px solid var(--bfs-line) !important;
border-radius: var(--bfs-radius-sm) !important;
height: 46px !important;
transition: border-color var(--bfs-dur) var(--bfs-ease),
box-shadow var(--bfs-dur) var(--bfs-ease);
}
.bfs-v2 .select2-container--default.select2-container--focus .select2-selection--single,
.bfs-v2 .select2-container--default.select2-container--open .select2-selection--single {
border-color: var(--bfs-accent) !important;
box-shadow: 0 0 0 4px var(--bfs-accent-tint);
}
.bfs-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 43px !important;
padding-left: 0.95rem !important;
color: var(--bfs-ink) !important;
font-family: var(--bfs-font-sans);
font-weight: 500;
font-size: 0.95rem;
}
.bfs-v2 .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 44px !important;
right: 0.5rem !important;
}
/* Select2 dropdown MENU — Select2 appends .select2-dropdown to ,
* NOT inside .bfs-v2, so these rules have to match without the .bfs-v2
* scope. They still target class selectors (not element names) so they
* won't leak outside Select2 contexts. Light + dark variants below. */
.select2-container--open .select2-dropdown {
background: var(--bfs-paper, #ffffff);
border: 1px solid var(--bfs-line, rgba(15, 23, 41, 0.10));
border-radius: var(--bfs-radius-sm, 8px);
box-shadow: 0 16px 40px rgba(15, 23, 41, 0.14);
overflow: hidden;
}
.select2-container--default .select2-results__option {
padding: 0.6rem 0.9rem;
color: var(--bfs-ink, #0f1729);
font-family: var(--bfs-font-sans, system-ui, sans-serif);
font-size: 0.93rem;
background: transparent;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--bfs-accent-tint, rgba(37, 99, 235, 0.1));
color: var(--bfs-ink, #0f1729);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
background: var(--bfs-accent, #2563eb) !important;
color: #ffffff !important;
}
.select2-container--default .select2-search--dropdown {
padding: 0.55rem;
background: var(--bfs-paper, #ffffff);
border-bottom: 1px solid var(--bfs-line, rgba(15, 23, 41, 0.06));
}
.select2-container--default .select2-search--dropdown .select2-search__field {
background: var(--bfs-paper, #ffffff);
color: var(--bfs-ink, #0f1729);
border: 1px solid var(--bfs-line, rgba(15, 23, 41, 0.10));
border-radius: var(--bfs-radius-sm, 8px);
padding: 0.5rem 0.75rem;
font-family: var(--bfs-font-sans, system-ui, sans-serif);
font-size: 0.9rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
outline: none;
border-color: var(--bfs-accent, #2563eb);
box-shadow: 0 0 0 3px var(--bfs-accent-tint, rgba(37, 99, 235, 0.15));
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
color: var(--bfs-ink-muted, #6b7588);
cursor: not-allowed;
}
/* Dark-mode overrides — tokens on :root already flip via
* [data-bfs-theme="dark"], but Select2 scrollbars / highlighted rows
* need explicit adjustment for contrast. */
[data-bfs-theme="dark"] .select2-container--open .select2-dropdown {
background: #181c27;
border-color: rgba(255, 255, 255, 0.12);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
[data-bfs-theme="dark"] .select2-container--default .select2-results__option { color: #e9ebf2; }
[data-bfs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
background: color-mix(in srgb, var(--thm-primary, #2563eb) 22%, transparent);
color: #ffffff;
}
[data-bfs-theme="dark"] .select2-container--default .select2-search--dropdown {
background: #181c27;
border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-bfs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
background: #0e121b;
color: #e9ebf2;
border-color: rgba(255, 255, 255, 0.14);
}
/* Native