/* BCA v2 — everything scoped under .bcav2-page, a wrapper DIV placed between the shared nav1.php/footer.php includes. Deliberately NOT applied to , and no universal `*` reset: both would cascade font/color/box-sizing into the site's shared header/nav/footer markup, which is what caused the nav to look "different" in the first review pass. */ .bcav2-page { /* Brand blue — same #224186 already used sitewide (Contact Us buttons, links in css/style.css), matching the "Q" in the MindzQ logo. Kept as the --bca-primary name so every component below (icons, chips, accordions, CTAs) that was built against "the accent color" just follows this value instead of needing a rewrite. */ --bca-primary: #224186; --bca-primary-dark: #16294f; --bca-orange: #B12C00; --bca-gold: #ffcc2f; --bca-teal: #60bfd7; --bca-ink: #424242; --bca-muted: #5c6570; --bca-line: #e7e2da; --bca-card: #ffffff; --bca-bg: #fbf8f3; --bca-radius: 14px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--bca-ink); } .bcav2-page a { text-decoration: none; } .bcav2-page .container { max-width: 1180px; } .bcav2-page img { max-width: 100%; height: auto; } .bcav2-page, .bcav2-page *, .bcav2-page *::before, .bcav2-page *::after { box-sizing: border-box; } /* ===== Preview / draft badge — deliberately IN document flow (not position:fixed). A fixed badge stays glued to the viewport at every scroll position, so it floats on top of whatever happens to be underneath it — on mobile that was the shared footer's "Terms of service" row (see screenshot review). Sitting it as a normal block right before the footer include, where it already lives in the DOM, means it just takes its own space between content and footer and can never overlap anything, at any scroll position or viewport size. */ .bcav2-preview-badge { display: block; text-align: center; background: #111; color: #fff; font-size: 11.5px; font-weight: 600; padding: 7px 12px; letter-spacing: .3px; } .bcav2-preview-badge strong { color: var(--bca-gold); margin-right: 4px; } /* ===== Hero ===== */ .bcav2-hero { position: relative; background: linear-gradient(120deg, var(--bca-primary-dark) 0%, #1f3d7a 55%, var(--bca-primary) 100%); color: #fff; padding: 44px 0 40px; overflow: hidden; } .bcav2-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 90% at 85% 20%, rgba(255,204,47,.22), transparent 60%); pointer-events: none; } .bcav2-hero-grid { position: relative; max-width: 720px; } /* Modifier for when a real hero photo is supplied later — flips back to a two-column layout */ .bcav2-hero-grid.has-photo { max-width: none; display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; } .bcav2-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .3px; margin-bottom: 16px; } .bcav2-hero h1 { font-size: 2.5rem; line-height: 1.18; font-weight: 800; margin: 0 0 14px; } .bcav2-hero h1 span { color: var(--bca-gold); } .bcav2-hero-sub { font-size: 1.1rem; line-height: 1.55; max-width: 560px; color: rgba(255,255,255,.92); margin: 0 0 22px; } .bcav2-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; } .bcav2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 10px; border: none; cursor: pointer; min-height: 48px; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; letter-spacing: .2px; } .bcav2-btn-primary { background: var(--bca-gold); color: #3a2400; box-shadow: 0 8px 20px rgba(0,0,0,.18); } .bcav2-btn-primary:hover { transform: translateY(-2px); background: #ffd75c; color: #3a2400; } .bcav2-btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); } .bcav2-btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-2px); } .bcav2-btn-block { width: 100%; } .bcav2-stat-row { display: flex; flex-wrap: wrap; gap: 10px; } .bcav2-stat-chip { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.35; display: flex; align-items: center; gap: 8px; min-width: 150px; } .bcav2-stat-chip i { color: var(--bca-gold); font-size: 16px; flex-shrink: 0; } .bcav2-stat-chip b { display: block; font-size: 15px; } .bcav2-hero-photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,.28); border: 4px solid rgba(255,255,255,.25); } .bcav2-hero-photo img { display: block; width: 100%; } /* ===== Breadcrumb ===== */ .bcav2-breadcrumb { font-size: 13px; color: var(--bca-muted); padding: 14px 0; } .bcav2-breadcrumb a { color: var(--bca-primary); } .bcav2-breadcrumb span[aria-hidden] { margin: 0 6px; color: #c8c0b3; } /* ===== Quick nav chips ===== */ /* Deliberately not position:sticky — the site header itself becomes position:fixed on scroll (.header.fixed-header, z-index 9999), and stacking a second sticky bar at top:0 would fight it for the same spot instead of sitting cleanly below it. */ .bcav2-quicknav-wrap { background: #fff; border-bottom: 1px solid var(--bca-line); border-top: 1px solid var(--bca-line); } .bcav2-quicknav { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: thin; } .bcav2-quicknav::-webkit-scrollbar { height: 5px; } .bcav2-quicknav::-webkit-scrollbar-thumb { background: #e2ddd2; border-radius: 4px; } .bcav2-quicknav a { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--bca-primary); background: #eaf0fb; border: 1px solid #d3e0f5; padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background-color .15s ease; } .bcav2-quicknav a:hover { background: var(--bca-primary); color: #fff; } /* ===== Layout ===== */ .bcav2-layout { display: grid; grid-template-columns: 1fr 340px; gap: 34px; padding: 34px 0 10px; align-items: start; } .bcav2-main { min-width: 0; } .bcav2-aside { position: sticky; top: 70px; } /* ===== Section shell ===== */ .bcav2-section { background: var(--bca-card); border: 1px solid var(--bca-line); border-radius: var(--bca-radius); padding: 26px 26px 28px; margin-bottom: 22px; scroll-margin-top: 90px; } .bcav2-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .bcav2-section-icon { width: 42px; height: 42px; border-radius: 10px; background: #e8eef9; color: var(--bca-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .bcav2-section h2 { font-size: 1.5rem; font-weight: 800; margin: 0; color: var(--bca-ink); } .bcav2-section h2 span { color: var(--bca-primary); } .bcav2-eyebrow-sm { display: block; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--bca-teal); margin-bottom: 2px; } .bcav2-text { font-size: 15.5px; line-height: 1.7; color: #3a3f45; margin: 0 0 14px; } .bcav2-text:last-child { margin-bottom: 0; } .bcav2-hero-photo-caption, .bcav2-section img.bcav2-inline-img { width: 100%; border-radius: 12px; margin-bottom: 18px; } /* ===== Benefits grid ===== */ .bcav2-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bcav2-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ===== Timeline (application phases) ===== */ .bcav2-timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 6px; } .bcav2-timeline-step { background: var(--bca-bg); border: 1px solid var(--bca-line); border-radius: 12px; padding: 18px 16px; position: relative; } .bcav2-timeline-step .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bca-primary); color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 10px; } .bcav2-timeline-step h4 { font-size: 15px; font-weight: 700; margin: 0 0 6px; } .bcav2-timeline-step p { font-size: 14px; line-height: 1.55; color: var(--bca-muted); margin: 0; } /* ===== Accordion (native details/summary) ===== */ .bcav2-accordion { border: 1px solid var(--bca-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .bcav2-accordion + .bcav2-accordion { margin-top: 10px; } .bcav2-accordion summary { list-style: none; cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 15.5px; display: flex; align-items: center; justify-content: space-between; background: var(--bca-bg); color: var(--bca-ink); } .bcav2-accordion summary::-webkit-details-marker { display: none; } .bcav2-accordion summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--bca-primary); transition: transform .2s ease; margin-left: 12px; flex-shrink: 0; } .bcav2-accordion[open] summary::after { transform: rotate(45deg); } .bcav2-accordion[open] summary { border-bottom: 1px solid var(--bca-line); } .bcav2-accordion-body { padding: 16px 18px; } .bcav2-accordion-body ul { margin: 0; padding-left: 0; list-style: none; } .bcav2-accordion-body li { display: flex; gap: 10px; padding: 6px 0; font-size: 14.5px; line-height: 1.6; color: #3a3f45; } .bcav2-accordion-body li i { color: var(--bca-primary); margin-top: 4px; flex-shrink: 0; font-size: 12px; } .bcav2-accordion-body p { font-size: 14.5px; line-height: 1.65; color: #3a3f45; margin: 0 0 10px; } .bcav2-accordion-body p:last-child { margin-bottom: 0; } /* Two accordions side by side on desktop for eligibility/exam */ .bcav2-accordion-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bcav2-accordion-pair .bcav2-accordion { margin: 0; } /* ===== Testimonials ===== */ .bcav2-testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bcav2-testimonial { background: var(--bca-bg); border: 1px solid var(--bca-line); border-left: 4px solid var(--bca-gold); border-radius: 10px; padding: 16px 18px; } .bcav2-testimonial p.quote { font-size: 14.5px; line-height: 1.65; font-style: italic; color: #3a3f45; margin: 0 0 10px; } .bcav2-testimonial p.name { font-size: 13.5px; font-weight: 700; margin: 0; color: var(--bca-primary); } /* ===== Comparison cards (spring vs summer-fall) ===== */ .bcav2-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bcav2-compare-card { border: 1px solid var(--bca-line); border-radius: 12px; padding: 18px; background: var(--bca-bg); } .bcav2-compare-card h3 { font-size: 16px; font-weight: 800; color: var(--bca-primary); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .bcav2-compare-card h4 { font-size: 13.5px; font-weight: 700; margin: 14px 0 4px; color: var(--bca-ink); } .bcav2-compare-card h4:first-of-type { margin-top: 12px; } .bcav2-compare-card p { font-size: 14px; line-height: 1.6; color: #3a3f45; margin: 0 0 8px; } .bcav2-schedule-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; font-size: 13.5px; color: var(--bca-primary); text-decoration: underline; } /* ===== Icon checklist cards (interviews / essay guidance) ===== */ .bcav2-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .bcav2-check-card { border: 1px solid var(--bca-line); border-radius: 12px; padding: 18px; } .bcav2-check-card h3 { font-size: 16px; font-weight: 800; margin: 0 0 10px; } .bcav2-check-card ul { list-style: none; margin: 0; padding: 0; } .bcav2-check-card li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #3a3f45; padding: 6px 0; } .bcav2-check-card li i { color: #2f9e44; margin-top: 4px; flex-shrink: 0; } /* ===== Resource cards ===== */ .bcav2-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .bcav2-resource-card { border: 1px solid var(--bca-line); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; transition: box-shadow .15s ease, transform .15s ease; } .bcav2-resource-card:hover { box-shadow: 0 8px 18px rgba(0,0,0,.08); transform: translateY(-2px); } .bcav2-resource-card i.doc { font-size: 22px; color: var(--bca-orange); flex-shrink: 0; } .bcav2-resource-card .label { font-size: 14px; font-weight: 700; color: var(--bca-ink); } .bcav2-resource-card .sub { font-size: 12.5px; color: var(--bca-muted); } .bcav2-resource-card i.go { margin-left: auto; color: var(--bca-muted); } /* ===== Useful links list ===== */ .bcav2-link-list { list-style: none; margin: 0; padding: 0; } .bcav2-link-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--bca-line); font-size: 14.5px; } .bcav2-link-list li:last-child { border-bottom: none; } .bcav2-link-list li i { color: var(--bca-teal); margin-top: 3px; flex-shrink: 0; } .bcav2-link-list a { color: var(--bca-primary); font-weight: 600; } .bcav2-link-list a:hover { text-decoration: underline; } /* ===== Locations ===== */ .bcav2-locations { display: flex; flex-wrap: wrap; gap: 8px; } .bcav2-locations a { background: #eaf6f9; border: 1px solid #cdeaf1; color: var(--bca-ink); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; transition: background-color .15s ease, color .15s ease; } .bcav2-locations a:hover { background: var(--bca-teal); color: #fff; } /* ===== CTA banner ===== */ .bcav2-cta-banner { background: linear-gradient(120deg, var(--bca-primary), #2f5bb5); color: #fff; border-radius: var(--bca-radius); padding: 26px 26px; text-align: center; margin-bottom: 22px; } .bcav2-cta-banner p { font-size: 15.5px; line-height: 1.6; margin: 0 0 16px; color: rgba(255,255,255,.94); } .bcav2-cta-banner .bcav2-btn-primary { background: var(--bca-gold); color: #3a2400; } /* ===== Sidebar form ===== */ .bcav2-form-card { background: linear-gradient(160deg, #ffba4d, #ffcc2f); border-radius: var(--bca-radius); padding: 20px; box-shadow: 0 14px 30px rgba(34,65,134,.2); } .bcav2-form-card .kicker { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #6b3d00; margin-bottom: 4px; display: block; } .bcav2-form-card h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: #3a2400; } .bcav2-form-card .sub { font-size: 13px; color: #4a2f00; margin: 0 0 16px; } .bcav2-form-card .form-group { margin-bottom: 12px; } .bcav2-form-card label { display: block; font-size: 12.5px; font-weight: 700; color: #3a2400; margin-bottom: 4px; } .bcav2-form-card label small { color: #a13c00; } .bcav2-form-card input, .bcav2-form-card select, .bcav2-form-card textarea { width: 100%; border: none; border-radius: 8px; padding: 11px 12px; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } .bcav2-form-card textarea { min-height: 90px; resize: vertical; } .bcav2-form-card .bcav2-btn { background: var(--bca-primary); color: #fff; margin-top: 4px; } .bcav2-form-card .bcav2-btn:hover { background: var(--bca-primary-dark); } .bcav2-form-card .verifyCap { color: #7a1500; font-size: 12px; margin-top: 4px; } .bcav2-form-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4a2f00; margin-top: 10px; } #bcav2-form { scroll-margin-top: 90px; } #bcav2-form:target .bcav2-form-card { animation: bcav2-form-highlight 1.6s ease-out; } @keyframes bcav2-form-highlight { 0% { box-shadow: 0 0 0 5px rgba(34,65,134,.55); } 100% { box-shadow: 0 0 0 5px rgba(34,65,134,0); } } @media (prefers-reduced-motion: reduce) { #bcav2-form:target .bcav2-form-card { animation: none; } } /* Note: no page-specific sticky mobile CTA bar here — the site already renders one globally (.mobile-cta-bar in includes/nav1.php, Call Us / WhatsApp Us) on every page at <=767px, and body already reserves space for it (padding-bottom: 52px in nav1.php's own