/* =====================================================================
A&J e-Edu — THEME LAYER (light-first + full opt-in dark mode)
---------------------------------------------------------------------
LIGHT (default) = html:not([data-theme="dark"]) overrides that lighten
every dark component (bands, chips, notes, heroes, nav, footer). The
original dark styles in the pages are left untouched — they ARE the
dark theme, which returns when html[data-theme="dark"] is set.
DARK adds a full dark body treatment (page bg, cards, tables, text).
Loaded LAST in all 3 headers. Toggle: assets/js/theme.js. i18n-safe.
===================================================================== */
/* ───────────────────────── THEME TOGGLE BUTTON ───────────────────── */
.eco-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;
font-size:1.05rem;cursor:pointer;transition:transform .2s ease,background .2s ease;flex:0 0 auto;margin-right:.5rem}
.eco-theme-toggle:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}
/* LIGHT toggle = a tinted teal pill so it stays visible in BOTH nav states:
over the hero photo at the top AND on the white bar once scrolled (a plain
white button vanished on the white scrolled nav — user: "not seen when
scrolling"). */
html:not([data-theme="dark"]) .eco-theme-toggle{border:1px solid #a9ddd2!important;
background:#e6f7f3!important;color:#0f5a60!important;box-shadow:0 2px 10px rgba(18,74,79,.18)!important}
html:not([data-theme="dark"]) .eco-theme-toggle:hover{background:#d3efe9!important;border-color:#8fd4c8!important}
/* keep it a comfortable tap target on phones */
@media (max-width:991px){.eco-theme-toggle:not(.eco-theme-fab){width:42px;height:42px;margin-right:.35rem}}
/* ── Floating fallback theme toggle (appears only if the sticky nav scrolls
off-screen; see theme.js). Fixed, so it survives any ancestor overflow. ── */
.eco-theme-fab{position:fixed!important;left:18px;bottom:20px;z-index:1150;width:48px;height:48px;margin:0!important;
opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
box-shadow:0 8px 22px rgba(8,20,32,.3)!important;transition:opacity .3s ease,transform .3s ease}
.eco-theme-fab.is-shown{opacity:1;transform:none;pointer-events:auto}
.eco-theme-fab::after,.eco-theme-fab::before{display:none!important}
html[data-theme="dark"] .eco-theme-fab{background:#182a3d!important;border:1px solid #2a4258!important;color:#e8f1f9!important}
/* on phones the Apply FAB is a full-width bottom bar — lift the toggle above it */
@media (max-width:991px){.eco-theme-fab{left:14px;bottom:74px}
body.eco-fab-shown .eco-theme-fab{bottom:74px}}
@media (prefers-reduced-motion:reduce){.eco-theme-fab{transition:none}}
/* ── Toggle tooltip: the site never follows the OS setting, so the switch
needs to announce itself. Label comes from data-tip (set in theme.js). ── */
.eco-theme-toggle{position:relative}
.eco-theme-toggle::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);right:0;
padding:6px 10px;border-radius:8px;background:#16293a;color:#fff;font-size:11.5px;font-weight:600;
line-height:1.2;white-space:nowrap;letter-spacing:.01em;pointer-events:none;
box-shadow:0 8px 20px rgba(8,20,32,.28);opacity:0;transform:translateY(-4px);
transition:opacity .18s ease,transform .18s ease;z-index:1200}
.eco-theme-toggle::before{content:"";position:absolute;top:calc(100% + 4px);right:14px;
border:5px solid transparent;border-bottom-color:#16293a;pointer-events:none;
opacity:0;transition:opacity .18s ease;z-index:1200}
.eco-theme-toggle:hover::after,.eco-theme-toggle:focus-visible::after{opacity:1;transform:none}
.eco-theme-toggle:hover::before,.eco-theme-toggle:focus-visible::before{opacity:1}
html[data-theme="dark"] .eco-theme-toggle::after{background:#e8f1f9;color:#12202c}
html[data-theme="dark"] .eco-theme-toggle::before{border-bottom-color:#e8f1f9}
/* first-visit hint bubble (shown once, dismissed on click or after 9s) */
.eco-theme-hint{position:absolute;top:calc(100% + 12px);right:-4px;display:flex;flex-direction:column;
gap:1px;padding:9px 13px;border-radius:11px;background:linear-gradient(135deg,#1c6d73,#124a4f);
color:#fff;text-align:left;white-space:nowrap;cursor:pointer;z-index:1201;
box-shadow:0 14px 30px rgba(18,74,79,.4);animation:ecoHintIn .35s ease both}
.eco-theme-hint b{font-size:12.5px;font-weight:700;line-height:1.25}
.eco-theme-hint small{font-size:11px;opacity:.82;line-height:1.25}
.eco-theme-hint::before{content:"";position:absolute;bottom:100%;right:18px;
border:6px solid transparent;border-bottom-color:#1c6d73}
.eco-theme-toggle.is-hinting{animation:ecoHintPulse 2.2s ease-in-out 3}
.eco-theme-toggle.is-hinting::after,.eco-theme-toggle.is-hinting::before{display:none}
@keyframes ecoHintIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ecoHintPulse{0%,100%{box-shadow:0 2px 8px rgba(20,40,60,.1)}
50%{box-shadow:0 2px 8px rgba(20,40,60,.1),0 0 0 8px rgba(28,109,115,.16)}}
@media (max-width:991px){.eco-theme-hint{right:-6px}}
@media (prefers-reduced-motion:reduce){
.eco-theme-hint{animation:none}.eco-theme-toggle.is-hinting{animation:none}}
/* ── GLOBAL FONTS — BOTH THEMES (user 2026-07-22): Inter for headings,
Open Sans for body, Roboto as the loaded/system fallback. ─────────── */
body{font-family:'Open Sans','Roboto','Inter','Segoe UI',system-ui,sans-serif!important}
h1,h2,h3,h4,h5,h6{font-family:'Inter','Roboto','Open Sans','Segoe UI',system-ui,sans-serif!important}
/* ⚠️ STICKY FIX — BOTH THEMES: main.css sets `html,body{overflow-x:hidden}`,
which turns them into scroll containers and BREAKS `position:sticky`, so the
whole nav (with the theme toggle) scrolls away instead of staying visible.
`overflow-x:clip` blocks horizontal scroll WITHOUT creating a scroll
container, so the sticky nav stays put while scrolling. */
html,body{overflow-x:clip!important}
/* ── WHITE-ON-TEAL FILLS — BOTH THEMES: the brand teal (#13c2a8) is too
light to carry white labels (contrast 2.3:1). Same hue, deeper stops. ── */
.btn-apply,
.index-page .cta-box .btn-apply,
body.blog-article-page .cta-box a.btn-apply,
.index-page .featured-posts .blog-image .category-badge,
.index-page .blog-hero .blog-hero-content .category,
.accreditation-page .ac-btn--g,
.exam-guide-page .xg-btn--g{
background:linear-gradient(135deg,#0fa08a,#0a7f6e)!important;color:#fff!important}
/* BUTTONS: teal in LIGHT (rule above), BLUE gradient in DARK (user rule:
dark = blue pill, light = teal). Category badges/labels stay teal in both. */
html[data-theme="dark"] .btn-apply,
html[data-theme="dark"] .index-page .cta-box .btn-apply,
html[data-theme="dark"] body.blog-article-page .cta-box a.btn-apply,
html[data-theme="dark"] .accreditation-page .ac-btn--g,
html[data-theme="dark"] .exam-guide-page .xg-btn--g{
background:linear-gradient(135deg,#3f9ae0,#2472b4)!important;color:#fff!important}
html[data-theme="dark"] .btn-apply:hover,
html[data-theme="dark"] body.blog-article-page .cta-box a.btn-apply:hover,
html[data-theme="dark"] .accreditation-page .ac-btn--g:hover,
html[data-theme="dark"] .exam-guide-page .xg-btn--g:hover{
background:linear-gradient(135deg,#57a8ea,#2d7fc2)!important;color:#fff!important}
/* ═════════════════════════════════════════════════════════════════════
LIGHT MODE (default)
═════════════════════════════════════════════════════════════════════ */
/* ── Nav: light chrome — SOLID WHITE finish in both states (user reverted the
transparent-over-hero experiment 2026-07-24: "bring back the old white
finish"). Keeps the sticky bar + the on-scroll elevation. DARK mode keeps
its own dark bar (untouched). ── */
html:not([data-theme="dark"]) .eco-nav{background:rgba(255,255,255,.97)!important;
box-shadow:0 1px 0 #e3ecf3,0 6px 20px rgba(20,40,60,.06)!important;
border-bottom:1px solid #e3ecf3!important}
html:not([data-theme="dark"]) .eco-nav.is-scrolled{background:rgba(255,255,255,.98)!important;
box-shadow:0 1px 0 #e3ecf3,0 10px 30px rgba(20,40,60,.1)!important}
/* ⚠️ backdrop-filter on the header makes it the CONTAINING BLOCK for the
position:fixed mobile drawer (collapses it to a sliver). Frost on desktop
only; kill it under 992px in both themes. */
@media (min-width:992px){
html:not([data-theme="dark"]) .eco-nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}
@media (max-width:991px){
.eco-nav,.eco-nav.is-scrolled{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
html:not([data-theme="dark"]) .eco-nav::before{opacity:.05!important;filter:invert(.8)}
html:not([data-theme="dark"]) .eco-nav a,
html:not([data-theme="dark"]) .eco-nav .eco-nav__drop{color:#24405a!important;text-shadow:none!important}
/* the nav CTA is a filled pill — its label must stay white */
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a,
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a *{color:#fff!important}
/* ── Apply-Now pills in LIGHT mode wear the LOGO teal (#145358 sampled from
assets/img/A_J_logo.png) instead of brand blue. Dark mode keeps blue. ── */
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a,
html:not([data-theme="dark"]) .eco-fab__btn,
html:not([data-theme="dark"]) #footer a.footer-apply{
background:linear-gradient(135deg,#1c6d73,#124a4f)!important;
box-shadow:0 8px 20px rgba(20,83,88,.38)!important}
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a:hover,
html:not([data-theme="dark"]) .eco-fab__btn:hover,
html:not([data-theme="dark"]) #footer a.footer-apply:hover{
background:linear-gradient(135deg,#228087,#145358)!important;
box-shadow:0 12px 28px rgba(20,83,88,.52)!important}
html:not([data-theme="dark"]) .eco-fab__btn,
html:not([data-theme="dark"]) .eco-fab__btn *{color:#fff!important}
/* ⚠️ exclude the filled CTA pill (.eco-nav__cta) — on the Apply Now page its
link is .active, and the teal active colour on the teal pill = invisible
text. The CTA keeps its white label. */
html:not([data-theme="dark"]) .eco-nav .eco-nav__list>li:not(.eco-nav__cta)>a:hover,
html:not([data-theme="dark"]) .eco-nav .eco-nav__list>li:not(.eco-nav__cta)>a.is-active,
html:not([data-theme="dark"]) .eco-nav .eco-nav__list>li:not(.eco-nav__cta)>a.active{color:#0c7266!important}
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a.active,
html:not([data-theme="dark"]) .eco-nav .eco-nav__cta>a.active *{color:#fff!important}
html:not([data-theme="dark"]) .eco-nav__brandtext,
html:not([data-theme="dark"]) .eco-nav__brandtext *{background:none!important;-webkit-text-fill-color:#16293a!important;
color:#16293a!important;text-shadow:none!important}
html:not([data-theme="dark"]) .eco-nav__brandtext small,
html:not([data-theme="dark"]) .eco-nav__brandtext span{-webkit-text-fill-color:#5b6672!important;color:#5b6672!important}
html:not([data-theme="dark"]) .eco-nav__coin img{content:url("../img/A_J_logo.png");filter:none!important;box-shadow:none!important}
html:not([data-theme="dark"]) .eco-nav__sub{background:#fff!important;border:1px solid #e3ecf3!important;
box-shadow:0 18px 40px rgba(20,40,60,.14)!important}
html:not([data-theme="dark"]) .eco-nav__sub a{color:#2d465e!important}
html:not([data-theme="dark"]) .eco-nav__sub a:hover{color:#0f9f8a!important;background:#f4f9fd!important}
/* mobile hamburger: the base bars are WHITE (invisible on the light nav) */
html:not([data-theme="dark"]) .eco-nav__toggle{background:#eef4fb!important;border:1px solid #cfdeeb!important}
html:not([data-theme="dark"]) .eco-nav__toggle:hover{background:#e2edf7!important}
html:not([data-theme="dark"]) .eco-nav__toggle span{background:#24405a!important}
html:not([data-theme="dark"]) .eco-nav__menu{background:#fff!important}
html:not([data-theme="dark"]) .eco-nav__menu::before{opacity:.05!important;filter:invert(.8)}
html:not([data-theme="dark"]) .eco-lang__btn{background:#fff!important;border-color:#cfdeeb!important;color:#24405a!important}
html:not([data-theme="dark"]) .eco-lang__menu{background:#fff!important;border-color:#e3ecf3!important}
html:not([data-theme="dark"]) .eco-lang__opt{color:#2d465e!important}
html:not([data-theme="dark"]) .eco-lang__opt:hover{background:#f4f9fd!important}
/* keep the Apply CTA gradient pill — it already reads on light */
/* ── Footer: light chrome ──────────────────────────────────────────── */
html:not([data-theme="dark"]) #footer.footer{background:linear-gradient(180deg,#f6fafd,#e9f1f8)!important;color:#3a4753!important}
html:not([data-theme="dark"]) #footer::before{opacity:.35}
html:not([data-theme="dark"]) #footer .elev-contour{display:none}
html:not([data-theme="dark"]) #footer .ft-logo--anj{content:url("../img/anj-logo.png")}
html:not([data-theme="dark"]) #footer .ft-logos .ft-div{background:#cfdeeb!important}
html:not([data-theme="dark"]) #footer .tagline,
html:not([data-theme="dark"]) #footer p,
html:not([data-theme="dark"]) #footer li,
html:not([data-theme="dark"]) #footer .footer-contact p{color:#3f5468!important}
html:not([data-theme="dark"]) #footer h5{color:#16293a!important}
html:not([data-theme="dark"]) #footer a{color:#33506b!important}
html:not([data-theme="dark"]) #footer a:hover{color:#0f9f8a!important}
/* filled buttons in the footer keep white labels */
html:not([data-theme="dark"]) #footer a.footer-apply,
html:not([data-theme="dark"]) #footer a.footer-apply:hover,
html:not([data-theme="dark"]) #footer a.footer-apply *{color:#fff!important}
html:not([data-theme="dark"]) #footer .social-links a{background:#fff!important;border-color:#cfdeeb!important;color:#12666c!important;
box-shadow:0 2px 8px rgba(20,40,60,.08)}
html:not([data-theme="dark"]) #footer .footer-contact a::after{background:#0f9f8a!important}
html:not([data-theme="dark"]) #footer .footer-bottom{border-top:1px solid #d8e4ee}
html:not([data-theme="dark"]) #footer .footer-bottom p,
html:not([data-theme="dark"]) #footer .footer-bottom strong{color:#5b6672!important}
/* ── Interior photo heroes: NATURAL photo, light scrim, clean white type
(ajjapan-style: don't dim or wash the photo — the old 70% black ::before
scrim is reduced to a whisper; text carries contrast via shadow). ──── */
html:not([data-theme="dark"]) .page-title.dark-background{background-color:#c8d8e6}
html:not([data-theme="dark"]) .page-title.dark-background::before{background:none!important}
html:not([data-theme="dark"]) .page-title.dark-background::after{background:none!important}
html:not([data-theme="dark"]) .page-title.dark-background .elev-contour,
html:not([data-theme="dark"]) .page-title.dark-background .elev-contour--hero{display:none}
/* interior hero headline FONT — both themes (styling, not an effect) */
.page-title.dark-background .section-title h2,
.page-title.dark-background h1,
.page-title.dark-background h2{
font-family:'Inter','Roboto','Open Sans','Segoe UI',system-ui,sans-serif!important;font-weight:700!important;letter-spacing:-.015em!important}
/* light-mode ONLY: white headline + dark shadow (user: white reads best) */
html:not([data-theme="dark"]) .page-title.dark-background .section-title h2,
html:not([data-theme="dark"]) .page-title.dark-background h1,
html:not([data-theme="dark"]) .page-title.dark-background h2{
color:#fff!important;text-shadow:0 2px 6px rgba(8,16,24,.5),0 6px 26px rgba(8,16,24,.45)!important}
/* hero SECONDARY text (subtitles/eyebrows/breadcrumbs) = WHITE + dark shadow
in light mode — dark ink "doesn't get seen" over the photos (user). */
html:not([data-theme="dark"]) .page-title.dark-background p,
html:not([data-theme="dark"]) .page-title.dark-background .breadcrumbs,
html:not([data-theme="dark"]) .page-title.dark-background .breadcrumbs a{color:#fff!important;
text-shadow:0 1px 4px rgba(8,16,24,.6),0 2px 14px rgba(8,16,24,.45)!important}
html:not([data-theme="dark"]) .page-title.dark-background .description-title{color:rgba(255,255,255,.12)!important}
html:not([data-theme="dark"]) .exam-guide-page .page-title .xg-full{color:#fff!important;
text-shadow:0 1px 4px rgba(8,16,24,.6)!important}
html:not([data-theme="dark"]) .exam-guide-page .page-title .xg-tag{color:#fff!important}
html:not([data-theme="dark"]) .accreditation-page .page-title .ac-sub{color:#fff!important}
/* ── Homepage hero slider: brighter ────────────────────────────────── */
/* ── HERO TYPOGRAPHY — APPLIES TO BOTH THEMES ──────────────────────────
RULE (user, 2026-07-22): font + styling go in BOTH light and dark; only
EFFECTS are per-theme. So font/size/wrap live here, unscoped.
The headline must break as "Learn Today, Lead Tomorrow," / "Build your
Future!". A
is impossible (the string is a single i18n dictionary key
in all 8 languages — splitting the text node would kill the translations),
so the break is forced with max-width. Measured at weight 600 / -.015em:
line 1 = 15.24em, line 1 + "Build" = 18.20em (19.4% band) -> 16.6em is
mid-band, giving ~9% tolerance on either side for font differences. */
.index-page .blog-hero-content h1,
.index-page .blog-hero-content .hero-heading{
font-family:'Inter','Roboto','Open Sans','Segoe UI',system-ui,sans-serif!important;font-weight:700!important;
letter-spacing:-.015em!important;font-size:clamp(2rem,3.9vw,3.25rem)!important;
line-height:1.16!important;max-width:15.5em!important;margin-left:auto!important;margin-right:auto!important}
/* light-mode ONLY effects: raw untouched photo + ink type (dark keeps its own) */
html:not([data-theme="dark"]) .index-page .blog-hero .blog-hero-item::after{background:none!important}
html:not([data-theme="dark"]) .index-page .blog-hero-content h1,
html:not([data-theme="dark"]) .index-page .blog-hero-content .hero-heading{
color:#fff!important;text-shadow:0 2px 6px rgba(8,16,24,.5),0 6px 26px rgba(8,16,24,.45)!important}
html:not([data-theme="dark"]) .index-page .blog-hero-content p{color:#fff!important;
text-shadow:0 1px 4px rgba(8,16,24,.6),0 2px 14px rgba(8,16,24,.45)!important}
html:not([data-theme="dark"]) .index-page .blog-hero-content .category{background:#ffffffd9!important;color:#12666c!important;border-color:#cfdeeb!important}
/* ── Homepage testimonials: user chose the DARK styling for BOTH themes
(2026-07-22) — no light overrides here on purpose; the original dark
band + glass cards render in light mode too. ─────────────────────── */
/* ── Shared light-band recipe (all the dark gradient bands) ────────── */
html:not([data-theme="dark"]) .index-page .hp-why,
html:not([data-theme="dark"]) .esl-page .esl-chips,
html:not([data-theme="dark"]) .junior-course-page .jc-chips,
html:not([data-theme="dark"]) .guarantee-course-page .gc-chips,
html:not([data-theme="dark"]) .test-course-page .tc-tracks,
html:not([data-theme="dark"]) .test-course-page .tc-note,
html:not([data-theme="dark"]) .faq-page .faq-note,
html:not([data-theme="dark"]) .reg-lead,
html:not([data-theme="dark"]) .facility-page .fac-lead,
html:not([data-theme="dark"]) .main-building-page .fac-lead,
html:not([data-theme="dark"]) .whychoose-page .fac-grid,
html:not([data-theme="dark"]) .team-page .fac-grid,
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-grid,
html:not([data-theme="dark"]) .hub-page .hub-grid,
html:not([data-theme="dark"]) .hub-page .hub-note,
html:not([data-theme="dark"]) .blog-index-page .blog-cards,
html:not([data-theme="dark"]) .contact-page .contact-info,
html:not([data-theme="dark"]) .about-us-page .about-chips,
html:not([data-theme="dark"]) .about-us-page .about-grid,
html:not([data-theme="dark"]) .accreditation-page .ac-band,
html:not([data-theme="dark"]) .exam-guide-page .xg-band{
background:radial-gradient(120% 140% at 50% 0%,#eaf1f8 0%,#f5f9fc 55%,#fbfdff 100%)!important;
border:1px solid #dbe6f0!important;color:#3a4753!important;
box-shadow:0 1px 2px rgba(20,40,60,.04),0 10px 28px rgba(20,40,60,.07)!important}
html:not([data-theme="dark"]) .index-page .hp-why::before,
html:not([data-theme="dark"]) .esl-page .esl-chips::before,
html:not([data-theme="dark"]) .junior-course-page .jc-chips::before,
html:not([data-theme="dark"]) .guarantee-course-page .gc-chips::before,
html:not([data-theme="dark"]) .test-course-page .tc-tracks::before,
html:not([data-theme="dark"]) .test-course-page .tc-tracks::after,
html:not([data-theme="dark"]) .test-course-page .tc-note::before,
html:not([data-theme="dark"]) .faq-page .faq-note::before,
html:not([data-theme="dark"]) .whychoose-page .fac-grid::before,
html:not([data-theme="dark"]) .team-page .fac-grid::before,
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-grid::before,
html:not([data-theme="dark"]) .hub-page .hub-grid::before,
html:not([data-theme="dark"]) .hub-page .hub-note::before,
html:not([data-theme="dark"]) .blog-index-page .blog-cards::before,
html:not([data-theme="dark"]) .contact-page .contact-info::before,
html:not([data-theme="dark"]) .about-us-page .about-chips::before,
html:not([data-theme="dark"]) .about-us-page .about-grid::before,
html:not([data-theme="dark"]) .index-page .hp-why::after,
html:not([data-theme="dark"]) .accreditation-page .ac-band::before,
html:not([data-theme="dark"]) .exam-guide-page .xg-band::before{opacity:0!important}
/* headings/eyebrows/subs inside the light bands */
html:not([data-theme="dark"]) .index-page .hp-why__title,
html:not([data-theme="dark"]) .whychoose-page .fac-grid h1,html:not([data-theme="dark"]) .whychoose-page .fac-grid h2,
html:not([data-theme="dark"]) .team-page .fac-grid h2,
html:not([data-theme="dark"]) .hub-page .hub-grid h2,
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-part__title,
html:not([data-theme="dark"]) .test-course-page .tc-note h4,
html:not([data-theme="dark"]) .faq-page .faq-note h4,html:not([data-theme="dark"]) .faq-page .faq-note h3,
html:not([data-theme="dark"]) .hub-page .hub-note h4,
html:not([data-theme="dark"]) .contact-page .contact-info h3,html:not([data-theme="dark"]) .contact-page .contact-info h4,
html:not([data-theme="dark"]) .accreditation-page .ac-band h2,
html:not([data-theme="dark"]) .exam-guide-page .xg-band h2{color:#16293a!important;text-shadow:none!important}
html:not([data-theme="dark"]) .index-page .hp-why__title b{color:#12666c!important}
html:not([data-theme="dark"]) .index-page .hp-why__eyebrow{color:#0f9f8a!important;border-color:#bfe4dc!important;background:#eafaf6!important}
html:not([data-theme="dark"]) .index-page .hp-why__sub,
html:not([data-theme="dark"]) .test-course-page .tc-note p,
html:not([data-theme="dark"]) .faq-page .faq-note p,
html:not([data-theme="dark"]) .hub-page .hub-note p,
html:not([data-theme="dark"]) .reg-lead,
html:not([data-theme="dark"]) .facility-page .fac-lead,
html:not([data-theme="dark"]) .main-building-page .fac-lead,
html:not([data-theme="dark"]) .accreditation-page .ac-band p,
html:not([data-theme="dark"]) .exam-guide-page .xg-band p{color:#3f5468!important}
html:not([data-theme="dark"]) .test-course-page .tc-note p strong,
html:not([data-theme="dark"]) .reg-lead strong,
html:not([data-theme="dark"]) .facility-page .fac-lead strong,
html:not([data-theme="dark"]) .main-building-page .fac-lead strong{color:#12666c!important}
/* team.php + why-choose.php leads are plain text (like dark mode), not boxed
panels — their bodies also carry .facility-page so the light-band boxing
caught them. Dark mode has no box, so light must match. */
html:not([data-theme="dark"]) .team-page .fac-lead,
html:not([data-theme="dark"]) .whychoose-page .fac-lead{
background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-part__eyebrow{-webkit-text-fill-color:#0f9f8a!important;color:#0f9f8a!important}
/* glass cards inside bands → white tonal cards */
html:not([data-theme="dark"]) .index-page .hp-why__card,
html:not([data-theme="dark"]) .whychoose-page .fac-grid .fac-card,
html:not([data-theme="dark"]) .team-page .fac-grid .fac-card,
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-grid .fac-card,
html:not([data-theme="dark"]) .hub-page .hub-grid .hub-card,
html:not([data-theme="dark"]) .blog-index-page .blog-cards .blog-card,
html:not([data-theme="dark"]) .about-us-page .about-grid .about-card,
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-exam,
html:not([data-theme="dark"]) .contact-page .contact-info .info-item,
html:not([data-theme="dark"]) .accreditation-page .ac-stat{
background:#fff!important;border:1px solid #e2eaf2!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:0 1px 2px rgba(20,40,60,.04),0 8px 20px rgba(20,40,60,.06)!important}
/* light blog card hover: light elevation (not the dark-band's black shadow) */
html:not([data-theme="dark"]) .blog-index-page .blog-card:hover{
border-color:#bcd8f0!important;
box-shadow:0 2px 4px rgba(20,40,60,.05),0 16px 34px rgba(20,40,60,.11)!important}
html:not([data-theme="dark"]) .index-page .hp-why__card h4,html:not([data-theme="dark"]) .index-page .hp-why__card h3,
html:not([data-theme="dark"]) .whychoose-page .fac-grid .fac-card h4,html:not([data-theme="dark"]) .whychoose-page .fac-grid .fac-card h3,
html:not([data-theme="dark"]) .team-page .fac-grid .fac-card h4,html:not([data-theme="dark"]) .team-page .fac-grid .fac-card h3,
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-grid .fac-card h4,
html:not([data-theme="dark"]) .hub-page .hub-grid .hub-card h4,html:not([data-theme="dark"]) .hub-page .hub-grid .hub-card h3,
html:not([data-theme="dark"]) .about-us-page .about-grid .about-card h4,
html:not([data-theme="dark"]) .blog-index-page .blog-cards h4,html:not([data-theme="dark"]) .blog-index-page .blog-cards h3,
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-exam__body h4,
html:not([data-theme="dark"]) .contact-page .contact-info .info-item h4,
html:not([data-theme="dark"]) .accreditation-page .ac-stat__num,
html:not([data-theme="dark"]) .accreditation-page .ac-stat__val{color:#16293a!important}
html:not([data-theme="dark"]) .index-page .hp-why__card p,
html:not([data-theme="dark"]) .whychoose-page .fac-grid .fac-card p,
html:not([data-theme="dark"]) .team-page .fac-grid .fac-card p,
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-grid .fac-card p,
html:not([data-theme="dark"]) .hub-page .hub-grid .hub-card p,
html:not([data-theme="dark"]) .about-us-page .about-grid .about-card p,
html:not([data-theme="dark"]) .blog-index-page .blog-cards p,
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-exam__body p,
html:not([data-theme="dark"]) .contact-page .contact-info .info-item p,
html:not([data-theme="dark"]) .contact-page .contact-info p,
html:not([data-theme="dark"]) .accreditation-page .ac-stat__lbl{color:#4a5b6c!important}
html:not([data-theme="dark"]) .accreditation-page .ac-stat__num small{color:#12666c!important}
html:not([data-theme="dark"]) .test-course-page .tc-tracks .tc-exam__tag{background:#e8f5f4!important;color:#12666c!important;border-color:#c3e2df!important}
/* glass chips/pills → white pills */
html:not([data-theme="dark"]) .esl-page .esl-chip,
html:not([data-theme="dark"]) .junior-course-page .jc-chip,
html:not([data-theme="dark"]) .guarantee-course-page .gc-chip,
html:not([data-theme="dark"]) .about-us-page .about-chips .about-chip,
html:not([data-theme="dark"]) .contact-page .contact-info li{
background:#fff!important;border:1px solid #dbe6f0!important;color:#2d465e!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not([data-theme="dark"]) .esl-page .esl-chip strong,
html:not([data-theme="dark"]) .junior-course-page .jc-chip strong,
html:not([data-theme="dark"]) .guarantee-course-page .gc-chip strong,
html:not([data-theme="dark"]) .about-us-page .about-chips .about-chip strong{color:#12666c!important}
/* contact "Get in touch" panel — real markup is .ci-item / .ci-socials
(the .info-item selectors above never matched anything on this page) */
html:not([data-theme="dark"]) .contact-page .contact-info::after{opacity:0!important}
html:not([data-theme="dark"]) .contact-page .ci-item{
background:#fff!important;border:1px solid #e2eaf2!important;
box-shadow:0 1px 2px rgba(20,40,60,.04),0 8px 20px rgba(20,40,60,.06)!important}
html:not([data-theme="dark"]) .contact-page .ci-item:hover{
background:#fff!important;border-color:#bcd8f0!important}
html:not([data-theme="dark"]) .contact-page .ci-item i{color:#12666c!important}
html:not([data-theme="dark"]) .contact-page .ci-item .label{color:#5f7387!important}
html:not([data-theme="dark"]) .contact-page .ci-item span{color:#22364a!important}
html:not([data-theme="dark"]) .contact-page .ci-item a{color:#125e63!important}
html:not([data-theme="dark"]) .contact-page .ci-item a:hover{color:#0d4a4f!important}
html:not([data-theme="dark"]) .contact-page .contact-info .lead{color:#4a5b6c!important}
html:not([data-theme="dark"]) .contact-page .ci-socials a{
background:#e8f5f4!important;border:1px solid #c3e2df!important;color:#12666c!important}
html:not([data-theme="dark"]) .contact-page .ci-socials a:hover{
background:#12666c!important;border-color:#12666c!important;color:#fff!important}
/* card meta rows inside converted bands (pale-blue/white text left on white cards) */
html:not([data-theme="dark"]) .facility-page.fac-hub .fac-card__more,
html:not([data-theme="dark"]) .hub-page .hub-card__more,
html:not([data-theme="dark"]) .blog-index-page .blog-readmore{color:#125e63!important}
html:not([data-theme="dark"]) .blog-index-page .blog-date{color:#5f7387!important}
html:not([data-theme="dark"]) .blog-index-page .blog-meta{border-top-color:#e2eaf2!important}
html:not([data-theme="dark"]) .blog-index-page .blog-cat{
background:#e8f5f4!important;border-color:#c3e2df!important;color:#125e63!important}
/* white pill CTAs on dark bands → teal gradient buttons.
⚠️ .hp-why__cta is the CONTAINER (a full-width block) — teal on it paints a
ribbon behind the pill. Target the BUTTON (.hp-why__cta a) so the background
stays white/light and only the pill is teal. */
html:not([data-theme="dark"]) .test-course-page .tc-note .btn,
html:not([data-theme="dark"]) .faq-page .faq-note .btn,
html:not([data-theme="dark"]) .index-page .hp-why__cta a,
html:not([data-theme="dark"]) .accreditation-page .ac-btn--p,
html:not([data-theme="dark"]) .exam-guide-page .xg-btn--p{
background:linear-gradient(135deg,#1c6d73,#124a4f)!important;color:#fff!important;
box-shadow:0 10px 24px rgba(20,83,88,.32)!important}
html:not([data-theme="dark"]) .index-page .hp-why__cta{background:none!important;box-shadow:none!important}
html:not([data-theme="dark"]) .index-page .hp-why__cta a i{color:#fff!important}
/* blog-article capstone CTA (root header styles it dark) */
html:not([data-theme="dark"]) body.blog-article-page .article-body .article-cta,
html:not([data-theme="dark"]) body.blog-article-page .article-cta{
background:radial-gradient(120% 140% at 50% 0%,#eaf1f8,#f5f9fc)!important;color:#3a4753!important;
border:1px solid #dbe6f0!important;box-shadow:0 10px 28px rgba(20,40,60,.08)!important}
html:not([data-theme="dark"]) body.blog-article-page .article-cta h2,
html:not([data-theme="dark"]) body.blog-article-page .article-cta h3,
html:not([data-theme="dark"]) body.blog-article-page .article-cta h4{color:#16293a!important}
/* ── Sweep fixes: bands the first pass missed ──────────────────────── */
html:not([data-theme="dark"]) .esl-page .esl-tracks,
html:not([data-theme="dark"]) .junior-course-page .jc-programs,
html:not([data-theme="dark"]) .facility-page .fac-note,
html:not([data-theme="dark"]) body.blog-article-page .cta-box{
background:radial-gradient(120% 140% at 50% 0%,#eaf1f8 0%,#f5f9fc 55%,#fbfdff 100%)!important;
border:1px solid #dbe6f0!important;color:#3a4753!important;
box-shadow:0 1px 2px rgba(20,40,60,.04),0 10px 28px rgba(20,40,60,.07)!important}
html:not([data-theme="dark"]) .esl-page .esl-tracks::before,
html:not([data-theme="dark"]) .esl-page .esl-tracks::after,
html:not([data-theme="dark"]) .junior-course-page .jc-programs::before,
html:not([data-theme="dark"]) .junior-course-page .jc-programs::after,
html:not([data-theme="dark"]) .facility-page .fac-note::before,
html:not([data-theme="dark"]) body.blog-article-page .cta-box::before{opacity:0!important}
html:not([data-theme="dark"]) .esl-page .esl-tracks .esl-subhead,
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-part__title,
html:not([data-theme="dark"]) .facility-page .fac-note h3,
html:not([data-theme="dark"]) .facility-page .fac-note h4,
html:not([data-theme="dark"]) body.blog-article-page .cta-box h2,
html:not([data-theme="dark"]) body.blog-article-page .cta-box h3,
html:not([data-theme="dark"]) body.blog-article-page .cta-box h4{color:#16293a!important;text-shadow:none!important}
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-part__eyebrow{-webkit-text-fill-color:#0f9f8a!important;color:#0f9f8a!important}
html:not([data-theme="dark"]) .facility-page .fac-note p,
html:not([data-theme="dark"]) .facility-page .fac-note li,
html:not([data-theme="dark"]) body.blog-article-page .cta-box p{color:#3f5468!important}
html:not([data-theme="dark"]) .esl-page .esl-tracks .esl-card,
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-course{
background:#fff!important;border:1px solid #e2eaf2!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:0 1px 2px rgba(20,40,60,.04),0 8px 20px rgba(20,40,60,.06)!important}
html:not([data-theme="dark"]) .esl-page .esl-tracks .esl-card h4,
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-course__body h4{color:#16293a!important}
html:not([data-theme="dark"]) .esl-page .esl-tracks .esl-card p,
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-course__body p{color:#4a5b6c!important}
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-age{background:#e8f5f4!important;color:#12666c!important;border-color:#c3e2df!important}
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-chip{background:#fff!important;border:1px solid #dbe6f0!important;color:#2d465e!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html:not([data-theme="dark"]) .junior-course-page .jc-programs .jc-chip strong{color:#12666c!important}
html:not([data-theme="dark"]) .facility-page .fac-note .btn,
html:not([data-theme="dark"]) body.blog-article-page .cta-box .btn,
html:not([data-theme="dark"]) body.blog-article-page .cta-box a.btn{
background:linear-gradient(135deg,#1c6d73,#124a4f)!important;color:#fff!important;
box-shadow:0 10px 24px rgba(20,83,88,.32)!important}
html:not([data-theme="dark"]) body.blog-article-page .cta-box a:not(.btn):not(.btn-apply){color:#12666c!important}
/* inline text left in dark-band colours inside the converted light bands */
html:not([data-theme="dark"]) .facility-page .fac-note strong,
html:not([data-theme="dark"]) .faq-page .faq-note strong,
html:not([data-theme="dark"]) .hub-page .hub-note strong{color:#16293a!important}
html:not([data-theme="dark"]) .facility-page .fac-note a:not(.btn),
html:not([data-theme="dark"]) .faq-page .faq-note a:not(.btn),
html:not([data-theme="dark"]) .hub-page .hub-note a:not(.btn),
html:not([data-theme="dark"]) .accreditation-page .ac-band a:not(.ac-btn),
html:not([data-theme="dark"]) .exam-guide-page .xg-band a:not(.xg-btn){color:#125e63!important}
html:not([data-theme="dark"]) .accreditation-page .ac-stat__progs,
html:not([data-theme="dark"]) .accreditation-page .ac-stat__progs span{color:#4a5b6c!important}
/* ═════════════════════════════════════════════════════════════════════
BLUE → LOGO TEAL (light mode only, user 2026-07-24)
Every page carries its own --*-accent variable, so flipping them all
here recolours the buttons, pills, icons, links, rules and gradients
that derive from them in one pass. Dark mode keeps brand blue.
═════════════════════════════════════════════════════════════════════ */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) .about-us-page .about-wrap,
html:not([data-theme="dark"]) .apply-classic,
html:not([data-theme="dark"]) .blog-article-page .article-body,
html:not([data-theme="dark"]) .contact-page .contact-wrap,
html:not([data-theme="dark"]) .esl-page,
html:not([data-theme="dark"]) .facility-page,
html:not([data-theme="dark"]) .main-building-page,
html:not([data-theme="dark"]) .faq-page .faq-wrap,
html:not([data-theme="dark"]) .guarantee-course-page .gc-wrap,
html:not([data-theme="dark"]) .index-page,
html:not([data-theme="dark"]) .hub-page .hub-wrap,
html:not([data-theme="dark"]) .junior-course-page .jc-wrap,
html:not([data-theme="dark"]) .nf-wrap,
html:not([data-theme="dark"]) .reg-wrap,
html:not([data-theme="dark"]) .test-course-page .tc-wrap,
html:not([data-theme="dark"]) .team-page,
html:not([data-theme="dark"]) .whychoose-page,
html:not([data-theme="dark"]) .accreditation-page,
html:not([data-theme="dark"]) .exam-guide-page,
html:not([data-theme="dark"]) .ti-page .ti-wrap,
html:not([data-theme="dark"]) .ti-page .ti-grid-wrap,
html:not([data-theme="dark"]) .blog-index-page{
--ab-accent:#12666c;--ap-accent:#12666c;--ap-accent-2:#124a4f;
--bl-accent:#12666c;--bl-accent-2:#124a4f;--ct-accent:#12666c;--es-accent:#12666c;
--fac-accent:#12666c;--fac-accent-2:#124a4f;--fq-accent:#12666c;--gc-accent:#12666c;
--hp-accent:#12666c;--hp-accent-2:#124a4f;--hub-accent:#12666c;--hub-accent-2:#124a4f;
--jc-accent:#12666c;--nf-accent:#12666c;--reg-accent:#12666c;--tc-accent:#12666c;
--tm-accent:#12666c;--wc-accent:#12666c;
--ac-blue:#12666c;--ac-blue-deep:#0f4f54;--ac-sky:#2f9aa0;--ac-sky2:#2f9aa0;
--xg-blue:#12666c;--xg-blue-deep:#0f4f54;
--x-blue:#12666c;--x-blue-deep:#0f4f54}
/* filled blue gradients that are hardcoded rather than variable-driven */
html:not([data-theme="dark"]) .main th,
html:not([data-theme="dark"]) .main thead th,
html:not([data-theme="dark"]) .reg-num,
html:not([data-theme="dark"]) .reg-cta,
html:not([data-theme="dark"]) .pg-current,
html:not([data-theme="dark"]) .scroll-top,
html:not([data-theme="dark"]) .esl-tab.is-active,
html:not([data-theme="dark"]) .gc-tab.is-active,
html:not([data-theme="dark"]) .isotope-filters li.filter-active,
html:not([data-theme="dark"]) .fac-card__icon,
html:not([data-theme="dark"]) .hub-card__icon,
html:not([data-theme="dark"]) .gc-prog__icon,
html:not([data-theme="dark"]) .ac-card__ctaicon,
html:not([data-theme="dark"]) .esl-card__tag,
html:not([data-theme="dark"]) .ra-avatar,
html:not([data-theme="dark"]) .main a.btn,
html:not([data-theme="dark"]) .cf-submit,
html:not([data-theme="dark"]) .apply-classic .submit,
html:not([data-theme="dark"]) .accreditation-page .ac-btn--p,
html:not([data-theme="dark"]) .exam-guide-page .xg-btn--p{
background:linear-gradient(135deg,#1c6d73,#124a4f)!important;color:#fff!important;
border-color:transparent!important}
html:not([data-theme="dark"]) .main a.btn:hover,
html:not([data-theme="dark"]) .cf-submit:hover,
html:not([data-theme="dark"]) .accreditation-page .ac-btn--p:hover,
html:not([data-theme="dark"]) .exam-guide-page .xg-btn--p:hover{
background:linear-gradient(135deg,#228087,#145358)!important;color:#fff!important}
html:not([data-theme="dark"]) .main th *,
html:not([data-theme="dark"]) .reg-cta h4,
html:not([data-theme="dark"]) .reg-cta p,
html:not([data-theme="dark"]) .scroll-top i,
html:not([data-theme="dark"]) .fac-card__icon i,
html:not([data-theme="dark"]) .hub-card__icon i,
html:not([data-theme="dark"]) .gc-prog__icon i,
html:not([data-theme="dark"]) .ac-card__ctaicon i,
html:not([data-theme="dark"]) .ra-avatar{color:#fff!important}
/* accent bars / underlines that were blue */
html:not([data-theme="dark"]) .page-title .section-title h2::after,
html:not([data-theme="dark"]) .cf-submit::after{background:linear-gradient(90deg,#1c6d73,#2fa3a9)!important}
/* leftovers: blues hardcoded outside the per-page variable system */
html:not([data-theme="dark"]) .eco-explore__link span,
html:not([data-theme="dark"]) .eco-explore__link i,
html:not([data-theme="dark"]) .eco-explore__eyebrow,
html:not([data-theme="dark"]) .eco-marq__title,
html:not([data-theme="dark"]) .rp-cat,
html:not([data-theme="dark"]) .reg-chip strong,
html:not([data-theme="dark"]) .gc-note li,
html:not([data-theme="dark"]) .gc-note li strong,
html:not([data-theme="dark"]) .reg-note p,
html:not([data-theme="dark"]) .reg-note p strong,
html:not([data-theme="dark"]) .blog-article-page .content-block a:not(.btn):not(.btn-apply):not(.watch-fb-btn),
html:not([data-theme="dark"]) .faq-chev,
html:not([data-theme="dark"]) .gc-chev,
html:not([data-theme="dark"]) .gc-doc,
html:not([data-theme="dark"]) .gc-panel i.bi,
html:not([data-theme="dark"]) .tc-part i.bi,
html:not([data-theme="dark"]) .hp-why__card i.bi,
html:not([data-theme="dark"]) .ra-title i,
html:not([data-theme="dark"]) .ra-step i,
html:not([data-theme="dark"]) .ra-inc i,
html:not([data-theme="dark"]) .ra-cap i,
html:not([data-theme="dark"]) .esl-panel__icon i,
html:not([data-theme="dark"]) .blog-article-page .content-block h2 i,
html:not([data-theme="dark"]) .blog-article-page .benefit-item i,
html:not([data-theme="dark"]) .faq-page details.faq-item>summary,
html:not([data-theme="dark"]) .jc-mini-note a,
html:not([data-theme="dark"]) .blog-content a.glightbox{color:#12666c!important}
/* About STAT band: the chips are flex stat COLUMNS (not pills), and the base
design fills the numbers with a clipped white→sky gradient. The light-band
rule above wrongly boxed each stat as a white pill, and the earlier teal
`background:` shorthand reset background-clip → solid teal rectangles.
Reset both: transparent cells, solid teal numerals, slate labels. */
html:not([data-theme="dark"]) .about-us-page .about-chips .about-chip{
background:none!important;border:0!important;padding:0!important;color:#4a5b6c!important}
html:not([data-theme="dark"]) .about-us-page .about-chip strong{
background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
-webkit-text-fill-color:#12666c!important;color:#12666c!important}
html:not([data-theme="dark"]) .blog-content .blog-info h4,
html:not([data-theme="dark"]) .about-card__icon,
html:not([data-theme="dark"]) .jc-course__icon,
html:not([data-theme="dark"]) .experience-badge,
html:not([data-theme="dark"]) .index-page .hp-why__icon,
html:not([data-theme="dark"]) .tc-exam__icon{
background:linear-gradient(135deg,#1c6d73,#124a4f)!important;color:#fff!important}
/* the icon GLYPH inside the hp-why tile must be white (the teal-sweep set it
to #12666c, which was teal-on-blue = illegible on the tile) */
html:not([data-theme="dark"]) .index-page .hp-why__icon i.bi{color:#fff!important}
html:not([data-theme="dark"]) .index-page .hp-why__icon{box-shadow:0 8px 20px rgba(20,83,88,.32)!important}
/* these eyebrows are gradient TEXT (background-clip:text) — recolour the
gradient but KEEP the clip, or the box paints solid and the text vanishes */
html:not([data-theme="dark"]) .reg-part__eyebrow,
html:not([data-theme="dark"]) .fac-part__eyebrow{
background:linear-gradient(90deg,#12666c,#124a4f)!important;
-webkit-background-clip:text!important;background-clip:text!important;
-webkit-text-fill-color:transparent!important}
/* ═════════════════════════════════════════════════════════════════════
DARK MODE (html[data-theme="dark"]) — full dark site
═════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#0d1822!important;color:#c2d1de}
html[data-theme="dark"] .main,
html[data-theme="dark"] section.section:not(.hp-why):not(.dark-background):not(.testimonials):not(.category-section){background:transparent!important}
html[data-theme="dark"] .section-title h2{color:#e8f1f9!important}
html[data-theme="dark"] .section-title span.description-title{color:rgba(255,255,255,.05)!important}
/* text must NEVER be dark-on-dark (user: about lead was invisible). Blanket
with !important beats page-level hardcoded inks; amber notes re-exempted. */
html[data-theme="dark"] .main p,html[data-theme="dark"] .main li,
html[data-theme="dark"] .main label{color:#c2d1de!important}
html[data-theme="dark"] .main h1,html[data-theme="dark"] .main h2,html[data-theme="dark"] .main h3,
html[data-theme="dark"] .main h4,html[data-theme="dark"] .main h5,html[data-theme="dark"] .main h6{color:#e8f1f9!important}
html[data-theme="dark"] .main .gc-note--warn p,html[data-theme="dark"] .main .gc-note--warn li,
html[data-theme="dark"] .main .gc-note--warn h4,html[data-theme="dark"] .main .jc-mini-note,
html[data-theme="dark"] .main .jc-mini-note strong{color:#7a4f12!important}
/* flip the per-page palette variables (drives headings/ink/lines/soft/zebra) */
html[data-theme="dark"] .tc-wrap{--tc-heading:#e8f1f9;--tc-ink:#c2d1de;--tc-line:#24384a;--tc-soft:#13212e}
html[data-theme="dark"] .jc-wrap{--jc-heading:#e8f1f9;--jc-ink:#c2d1de;--jc-line:#24384a;--jc-soft:#13212e}
html[data-theme="dark"] .gc-wrap{--gc-heading:#e8f1f9;--gc-ink:#c2d1de;--gc-line:#24384a;--gc-soft:#13212e}
html[data-theme="dark"] .esl-page{--es-heading:#e8f1f9;--es-ink:#c2d1de;--es-line:#24384a;--es-soft:#13212e}
html[data-theme="dark"] .accreditation-page{--ac-ink:#e8f1f9;--ac-body:#c2d1de;--ac-muted:#8fa3b4;--ac-line:#24384a;--ac-soft:#13212e}
html[data-theme="dark"] .exam-guide-page{--xg-ink:#e8f1f9;--xg-body:#c2d1de;--xg-muted:#8fa3b4;--xg-line:#24384a;--xg-soft:#13212e}
/* white surfaces → dark cards (broad, grouped) */
html[data-theme="dark"] .tc-exam,html[data-theme="dark"] .jc-course,html[data-theme="dark"] .esl-card,
html[data-theme="dark"] .gc-step,html[data-theme="dark"] .gc-stage,html[data-theme="dark"] .gc-prog,
html[data-theme="dark"] .gc-details,html[data-theme="dark"] .fac-card,html[data-theme="dark"] .hub-card{
background:#142433!important;border-color:#24384a!important;color:#c2d1de}
/* ⚠️ dark member-photo tile: a SEPARATE, self-contained rule. It must NOT be
merged into the grouped dark-card selector above (a trailing comma there
would leak this person-icon background onto .fac-card/.hub-card/etc — that
bug happened). Use background-color + re-declared background-image longhands
(a `background:` shorthand resets the icon to none). */
html[data-theme="dark"] .team-page .team-member .member-image{
background-color:#10202e!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f8aa6' stroke-width='1.3'%3E%3Ccircle cx='12' cy='8.5' r='3.7'/%3E%3Cpath d='M5 19.5c0-3.8 3.1-5.8 7-5.8s7 2 7 5.8'/%3E%3C/svg%3E"),linear-gradient(140deg,#15242f,#0f1c28)!important}
html[data-theme="dark"] .team-page .member-info span{background:rgba(126,200,255,.14)!important;color:#9fd0f5!important}
html[data-theme="dark"] .about-card,html[data-theme="dark"] .team-member,html[data-theme="dark"] .blog-content,
html[data-theme="dark"] .ac-card,html[data-theme="dark"] .ac-featured,html[data-theme="dark"] .ac-panel,
html[data-theme="dark"] .xg-card,html[data-theme="dark"] .xg-panel,html[data-theme="dark"] .ti-card,
html[data-theme="dark"] .ti-content,html[data-theme="dark"] details.ac-q,html[data-theme="dark"] details.xg-q,
html[data-theme="dark"] .contact-form,html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .esl-tab,html[data-theme="dark"] .gc-tab,html[data-theme="dark"] .isotope-filters li{
background:#142433!important;border-color:#24384a!important;color:#c2d1de}
html[data-theme="dark"] .xg-fact,html[data-theme="dark"] .ac-mini,html[data-theme="dark"] .xg-scoring,
html[data-theme="dark"] .esl-note,html[data-theme="dark"] .gc-note:not(.gc-note--warn),
html[data-theme="dark"] details.ac-learn>summary,html[data-theme="dark"] details.gc-details>summary,
html[data-theme="dark"] .eco-explore{background:#13212e!important;border-color:#24384a!important}
html[data-theme="dark"] .ac-logo{background:#fff!important} /* keep logos readable */
html[data-theme="dark"] .eco-explore__link{background:#142433!important;border-color:#2a415a!important;color:#cfe0ef!important}
html[data-theme="dark"] .eco-explore h2{color:#e8f1f9!important}
/* exam-guide "Other Exam & Program Guides" pills were left white in dark mode
(base .xg-more a{background:#fff}, no dark variant) */
html[data-theme="dark"] .exam-guide-page .xg-more a{
background:#142433!important;border-color:#2a415a!important;color:#9fd0f5!important}
html[data-theme="dark"] .exam-guide-page .xg-more a:hover{
background:#18293a!important;border-color:#3a5a7a!important}
html[data-theme="dark"] .exam-guide-page .xg-more a i{color:#9fd0f5!important}
html[data-theme="dark"] table td{border-color:#24384a!important;color:#c2d1de}
html[data-theme="dark"] .tc-table-wrap,html[data-theme="dark"] .jc-table-wrap,
html[data-theme="dark"] .esl-table-wrap,html[data-theme="dark"] .gc-table-wrap{border-color:#24384a!important}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select{
background-color:#13212e!important;border-color:#2a415a!important;color:#dce8f2!important}
/* the light accreditor marquee gets a dark variant */
html[data-theme="dark"] .eco-marq{background:linear-gradient(180deg,#10202e,#0d1822)!important;border-color:#22364a!important}
html[data-theme="dark"] .eco-marq__title{color:#9fd0f5!important}
html[data-theme="dark"] .eco-marq__item{background:#f2f7fb;border-radius:10px;padding:4px 10px}
/* light tinted panels (facility highlights etc.) go dark */
html[data-theme="dark"] .facility-page:not(.fac-hub) .fac-grid{background:#10202e!important;border-color:#22364a!important}
/* ── Sweep fix (2026-07-24): surfaces that stayed WHITE in dark mode, so the
lightened text sat on white. `section,.section{background:var(--background-
color)}` in main.css also paints bare , which
the .section-only blanket above never neutralised. ────────────────── */
html[data-theme="dark"] section.content-block,
html[data-theme="dark"] .main .reg-rule,
html[data-theme="dark"] .main .reg-part,
html[data-theme="dark"] .main .fac-part{background:transparent!important;border-color:#24384a!important}
html[data-theme="dark"] .main .reg-note:not(.reg-note--warn),
html[data-theme="dark"] .main .about-note,
html[data-theme="dark"] .main .jc-note,
html[data-theme="dark"] .main .lead-box,
html[data-theme="dark"] .main .intro-box{background:#13212e!important;border-color:#24384a!important;color:#c2d1de!important}
html[data-theme="dark"] .main .reg-chip{background:#142433!important;border-color:#24384a!important;color:#cfe0ef!important}
html[data-theme="dark"] .facility-page .fac-note,
html[data-theme="dark"] .main-building-page .fac-note,
html[data-theme="dark"] .blog-article-page .road-steps>li,
html[data-theme="dark"] .blog-article-page .monitoring-benefits>*{background:#13212e!important;border-color:#24384a!important}
/* inline emphasis inside those panels keeps the article's dark ink */
html[data-theme="dark"] .blog-article-page .road-steps li,
html[data-theme="dark"] .blog-article-page .road-steps li strong,
html[data-theme="dark"] .blog-article-page .road-steps li span,
html[data-theme="dark"] .main .fac-note strong,
html[data-theme="dark"] .main .fac-note span,
html[data-theme="dark"] .blog-article-page .monitoring-benefits .benefit-item,
html[data-theme="dark"] .blog-article-page .monitoring-benefits .benefit-item span,
html[data-theme="dark"] .blog-article-page .monitoring-benefits .benefit-item strong{color:#c2d1de!important}
html[data-theme="dark"] .blog-article-page .monitoring-benefits .benefit-item{
background:#13212e!important;border-color:#24384a!important}
html[data-theme="dark"] .main table tbody tr{background:transparent!important}
html[data-theme="dark"] .main table tbody tr:nth-child(even){background:#13212e!important}
html[data-theme="dark"] .main .reg-rule{border-bottom-color:#24384a!important}
/* amber "important" callouts keep their warm panel — force ALL their text dark */
html[data-theme="dark"] .main .reg-note--warn,
html[data-theme="dark"] .main .gc-details__body h5{background:#fdf6ec!important;border-color:#f0dcbe!important}
html[data-theme="dark"] .main .reg-note--warn *,
html[data-theme="dark"] .main .reg-note--warn,
html[data-theme="dark"] .main .gc-details__body h5{color:#7a4f12!important}
/* ── FAQ in dark mode: the accordion band becomes the site's dark-blue
gradient + contour with glass question cards (it was still the light
band from the light layer). ─────────────────────────────────────── */
/* FAQ dark mode: NO outer box — light mode has none, so dark matches (user
consistency rule). Keep only the text-colour vars + dark item cards. */
html[data-theme="dark"] .faq-page .faq-wrap{
--fq-accent:#7ec8ff;--fq-heading:#eaf2fb;--fq-ink:#c6d6e4;
--fq-line:rgba(255,255,255,.14);--fq-soft:rgba(255,255,255,.06);
background:none!important;border:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
html[data-theme="dark"] .faq-page .faq-wrap::before{display:none!important}
html[data-theme="dark"] .faq-page .faq-lead{background:none!important;
border-left-color:#7ec8ff!important;color:#dbe8f4!important}
html[data-theme="dark"] .faq-page details.faq-item{background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-theme="dark"] .faq-page details.faq-item:hover,
html[data-theme="dark"] .faq-page details.faq-item[open]{background:rgba(255,255,255,.1)!important;
border-color:rgba(126,200,255,.45)!important}
html[data-theme="dark"] .faq-page details.faq-item>summary{color:#eaf2fb!important}
html[data-theme="dark"] .faq-page details.faq-item>summary:hover{color:#9fd0f5!important}
html[data-theme="dark"] .faq-page .faq-chev{color:#9fd0f5!important}
html[data-theme="dark"] .faq-page .faq-answer,
html[data-theme="dark"] .faq-page .faq-answer p,
html[data-theme="dark"] .faq-page .faq-answer li{color:#c6d6e4!important}
html[data-theme="dark"] .faq-page .faq-answer a{color:#9fd0f5!important;border-bottom-color:rgba(159,208,245,.45)!important}
html[data-theme="dark"] .faq-page .faq-answer a:hover{color:#fff!important;border-bottom-color:#fff!important}
html[data-theme="dark"] .faq-page .faq-note{background:rgba(255,255,255,.06)!important;
border-color:rgba(255,255,255,.14)!important;border-left-color:#7ec8ff!important}
html[data-theme="dark"] .faq-page .faq-note h3,
html[data-theme="dark"] .faq-page .faq-note h4{color:#eaf2fb!important}
html[data-theme="dark"] .faq-page .faq-note p{color:#c6d6e4!important}
/* ═════════════════════════════════════════════════════════════════════
THEME-CONSISTENCY SWEEP (2026-07-25) — remove one-theme-only boxes and
kill light surfaces that survived into dark mode. Light = the baseline;
dark matches its structure, only effects differ.
═════════════════════════════════════════════════════════════════════ */
/* — LIGHT: junior-course meta row was a boxed light panel (dark has no box) */
html:not([data-theme="dark"]) .junior-course-page .jc-chips{
background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
html:not([data-theme="dark"]) .junior-course-page .jc-chips::before{opacity:0!important}
/* — LIGHT: guarantee panel globe tile is a teal gradient — its glyph was teal
(#12666c) on teal = invisible; make it white */
html:not([data-theme="dark"]) .guarantee-course-page .gc-prog__icon i{color:#fff!important}
/* — DARK: facility "Operating Hours" chip was a white oval */
html[data-theme="dark"] .facility-page .fac-chip{
background:#142433!important;border-color:#24384a!important;color:#cfe0ef!important}
html[data-theme="dark"] .facility-page .fac-chip:hover{background:#18293a!important;color:#e8f1f9!important}
html[data-theme="dark"] .facility-page .fac-chip i,
html[data-theme="dark"] .facility-page .fac-chip:hover i{color:#7ec8ff!important}
html[data-theme="dark"] .facility-page .fac-chip strong{color:#e8f1f9!important}
/* — DARK: dormitory feature cards + room dropdown toggles were white */
html[data-theme="dark"] .facility-page .benefit-item,
html[data-theme="dark"] .facility-page .room-toggle{
background:#142433!important;border-color:#24384a!important;color:#c2d1de!important}
html[data-theme="dark"] .facility-page .room-toggle:hover{background:#18293a!important}
html[data-theme="dark"] .facility-page .benefit-item span,
html[data-theme="dark"] .facility-page .room-toggle,
html[data-theme="dark"] .facility-page .room-toggle *{color:#dbe7f2!important}
html[data-theme="dark"] .facility-page .benefit-item i{color:#7ec8ff!important}
/* — DARK: campus-regulation tables — white row-head cells, light row hover
(text became unreadable on hover), and light cell borders */
html[data-theme="dark"] .main table .reg-row-head,
html[data-theme="dark"] .main table tbody th{
background:#17293a!important;color:#dbe7f2!important;border-color:#24384a!important}
html[data-theme="dark"] .main table.reg-table tbody tr:hover,
html[data-theme="dark"] .main table tbody tr:hover{background:#1a2c3e!important}
html[data-theme="dark"] .main table.reg-table tbody tr:hover td,
html[data-theme="dark"] .main table tbody tr:hover td{color:#e8f1f9!important;background:transparent!important}
html[data-theme="dark"] .main table,
html[data-theme="dark"] .main .reg-table-wrap,
html[data-theme="dark"] .main table th,
html[data-theme="dark"] .main table td{border-color:#24384a!important}
/* — DARK: blog pagination pills were white */
html[data-theme="dark"] .blog-index-page .blog-pagination a,
html[data-theme="dark"] .blog-index-page .blog-pagination a.pg-arrow{
background:#142433!important;border-color:#2a415a!important;color:#cfe0ef!important}
html[data-theme="dark"] .blog-index-page .blog-pagination a:hover{
background:#18293a!important;border-color:#3a5a7a!important;color:#fff!important}
html[data-theme="dark"] .blog-index-page .blog-pagination a i{color:#cfe0ef!important}
/* — DARK: blog-article tables — body cells stayed white, borders light */
html[data-theme="dark"] .blog-article-page .article-body table,
html[data-theme="dark"] .blog-article-page .article-body table td,
html[data-theme="dark"] .blog-article-page .article-body table th{border-color:#24384a!important}
html[data-theme="dark"] .blog-article-page .article-body table td,
html[data-theme="dark"] .blog-article-page .article-body table tbody th{
background:#13212e!important;color:#c6d6e4!important}
html[data-theme="dark"] .blog-article-page .article-body table tbody tr:nth-child(even) td{background:#16283a!important}
html[data-theme="dark"] .blog-article-page .article-body table tbody tr:hover td{background:#1a2c3e!important;color:#e8f1f9!important}
/* facility drop cap: the #1c4e78 ink disappears on dark grounds (user: it
does not pop on some monitors) — white in dark mode. */
html[data-theme="dark"] .facility-page:not(.fac-hub) .fac-splitbody>p:first-of-type::first-letter,
html[data-theme="dark"] .main-building-page .fac-splitbody>p:first-of-type::first-letter{
color:#ffffff!important}
/* blog pull-quotes keep the article's dark ink (blockquote is outside the p/h blanket) */
html[data-theme="dark"] .blog-article-page .pull-quote,
html[data-theme="dark"] .blog-article-page blockquote{background:#13212e!important;color:#dbe7f2!important;border-left-color:#2986cc!important}
/* footer copyright line kept Bootstrap's dark ink on the dark footer */
html[data-theme="dark"] #footer .footer-bottom p,
html[data-theme="dark"] #footer .footer-bottom p.mb-0,
html[data-theme="dark"] #footer .footer-bottom strong{color:rgba(230,240,248,.7)!important}
/* accreditation "Learn more" summaries were brand-blue on the dark panel */
html[data-theme="dark"] .accreditation-page details.ac-learn>summary,
html[data-theme="dark"] .accreditation-page .ac-card__learn>summary,
html[data-theme="dark"] .exam-guide-page details>summary{color:#7ec8ff!important}
/* ── Homepage CAMPUS FACILITIES block in dark mode: the site's dark-blue
gradient + topographic contour + glass cards (user: the light cards
"hurt the eyes" in true dark mode). ──────────────────────────────── */
/* Campus Map section — DARK mode. No background on the section or the frame
(user: don't add a white background in dark); just recolour the text/accents
and give the frame a dark border + shadow. The section.section blanket keeps
the band transparent, so the map sits on the dark page. */
html[data-theme="dark"] .index-page .cmap-eyebrow{color:#7ec8ff}
html[data-theme="dark"] .index-page .cmap-title{color:#e8f1f9}
html[data-theme="dark"] .index-page .cmap-title::after{background:linear-gradient(90deg,#3f9ae0,#2472b4)}
html[data-theme="dark"] .index-page .cmap-sub{color:#b7c6d5}
html[data-theme="dark"] .index-page .cmap-frame{border-color:rgba(255,255,255,.12)!important;
box-shadow:0 2px 6px rgba(0,0,0,.3),0 22px 50px rgba(0,0,0,.45)!important}
html[data-theme="dark"] .index-page .category-section.section{position:relative;overflow:hidden;
background:linear-gradient(135deg,#16293a 0%,#21384c 46%,#2b6aa0 100%)!important}
html[data-theme="dark"] .index-page .category-section.section::before{content:"";position:absolute;inset:0;pointer-events:none;
background:url(../img/elevate-contour.svg) center / 1300px auto no-repeat;opacity:.2;mix-blend-mode:screen;
-webkit-mask-image:radial-gradient(130% 120% at 50% 0%,#000 55%,transparent 100%);
mask-image:radial-gradient(130% 120% at 50% 0%,#000 55%,transparent 100%)}
html[data-theme="dark"] .index-page .category-section .container{position:relative;z-index:1}
html[data-theme="dark"] .index-page .category-section .hero-post,
html[data-theme="dark"] .index-page .category-section .sidebar-post{
background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.28)!important}
html[data-theme="dark"] .index-page .category-section .sidebar-post:hover{border-color:rgba(126,200,255,.45)!important}
html[data-theme="dark"] .index-page .category-section .post-title,
html[data-theme="dark"] .index-page .category-section .post-title a{color:#fff!important}
html[data-theme="dark"] .index-page .category-section .post-title a:hover{color:#9fd0f5!important}
html[data-theme="dark"] .index-page .category-section .post-excerpt{color:rgba(255,255,255,.82)!important}
html[data-theme="dark"] .index-page .category-section .post-category{background:rgba(255,255,255,.12)!important;
border:1px solid rgba(255,255,255,.24)!important;color:#cfe7ff!important}
html[data-theme="dark"] .index-page .category-section .sidebar-desc{color:rgba(255,255,255,.75)!important}
html[data-theme="dark"] .index-page .category-section .section-title h2{color:#fff!important}
/* ── Apply-now (live form page) dark mode: dark-blue gradient + contour,
glass cards, properly dark inputs (was half-dark: white cards + washed
text). Light mode stays the standard light form. ─────────────────── */
/* ⚠️ overflow:clip (NOT hidden) clips the contour ::before WITHOUT creating a
scroll container — `overflow:hidden` here broke the sticky .apply-aside
sidebars in dark mode (they wouldn't scroll like they do in light). */
html[data-theme="dark"] .apply-classic-page .main{position:relative;overflow:clip;
background:linear-gradient(135deg,#16293a 0%,#21384c 46%,#2b6aa0 100%)!important}
html[data-theme="dark"] .apply-classic-page .main::before{content:"";position:absolute;inset:0;pointer-events:none;
background:url(../img/elevate-contour.svg) top center / 1300px auto no-repeat;opacity:.18;mix-blend-mode:screen;
-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 95%);
mask-image:linear-gradient(180deg,#000 45%,transparent 95%)}
html[data-theme="dark"] .apply-classic-page .main>*{position:relative;z-index:1}
html[data-theme="dark"] .apply-classic-page .ra-card,
html[data-theme="dark"] .apply-classic-page .form-box{background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
box-shadow:0 10px 30px rgba(0,0,0,.28)!important;color:#dce8f2!important}
html[data-theme="dark"] .apply-classic-page .ra-card--assure{background:rgba(22,62,46,.4)!important;border-color:rgba(96,200,150,.32)!important}
html[data-theme="dark"] .apply-classic-page .form-box label{color:#cfe0ef!important}
html[data-theme="dark"] .apply-classic-page input,
html[data-theme="dark"] .apply-classic-page select,
html[data-theme="dark"] .apply-classic-page textarea{background-color:rgba(8,17,26,.55)!important;
border:1px solid rgba(255,255,255,.22)!important;color:#eaf2fb!important}
/* dark-mode chevron: the base blue SVG is invisible on the dark field, so
re-declare it with a light stroke (background-color above keeps the image) */
html[data-theme="dark"] .apply-classic-page select{
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239fd0f5' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")!important}
html[data-theme="dark"] .apply-classic-page ::placeholder{color:rgba(255,255,255,.45)!important}
/* The whole page derives its inks from --ap-*; flipping them lights up the
reassurance rail (.ra-step / .ra-inc / .ra-cap are divs and li, so the
p/h blanket never reached them and they stayed near-black on navy). */
html[data-theme="dark"] .apply-classic{
--ap-accent:#7ec8ff;--ap-accent-2:#cfe0ef;--ap-heading:#eaf2fb;--ap-ink:#c6d6e4;
--ap-line:rgba(255,255,255,.14);--ap-soft:rgba(255,255,255,.06)}
html[data-theme="dark"] .apply-aside .ra-step,
html[data-theme="dark"] .apply-aside .ra-inc li,
html[data-theme="dark"] .apply-aside .ra-cap,
html[data-theme="dark"] .apply-aside .ra-quote,
html[data-theme="dark"] .apply-aside .ra-help{color:#c6d6e4!important}
html[data-theme="dark"] .apply-aside .ra-title,
html[data-theme="dark"] .apply-aside .ra-person b{color:#eaf2fb!important}
html[data-theme="dark"] .apply-aside .ra-title i,
html[data-theme="dark"] .apply-aside .ra-step i,
html[data-theme="dark"] .apply-aside .ra-inc i,
html[data-theme="dark"] .apply-aside .ra-cap i,
html[data-theme="dark"] .apply-aside .ra-chip i{color:#7ec8ff!important}
html[data-theme="dark"] .apply-aside .ra-person em{color:#9fb3c6!important}
html[data-theme="dark"] .apply-aside .ra-chip{background:rgba(255,255,255,.08)!important;
border-color:rgba(255,255,255,.16)!important;color:#cfe0ef!important}
html[data-theme="dark"] .apply-aside .ra-help a{color:#9fd0f5!important}
/* the green "no payment" card keeps its tint but needs light ink on it */
html[data-theme="dark"] .apply-aside .ra-card--assure .ra-title,
html[data-theme="dark"] .apply-aside .ra-card--assure .ra-title i{color:#7fe3ae!important}
html[data-theme="dark"] .apply-aside .ra-card--assure p{color:#cdeadb!important}
/* form chrome */
html[data-theme="dark"] .apply-classic .field label,
html[data-theme="dark"] .apply-classic label{color:#cfe0ef!important}
html[data-theme="dark"] .apply-classic .form-note,
html[data-theme="dark"] .apply-classic small,
html[data-theme="dark"] .apply-classic .hint{color:#a8bccf!important}
/* submit button: the base gradient uses --ap-accent which is flipped to a pale
sky in dark mode → washed-out pill. Force the dark-blue gradient + white. */
html[data-theme="dark"] .apply-classic button[type="submit"],
html[data-theme="dark"] .apply-classic-page button[type="submit"],
html[data-theme="dark"] .apply-classic-page .submit{
background:linear-gradient(135deg,#2b6aa0,#1a3654)!important;color:#fff!important;
box-shadow:0 12px 28px rgba(12,28,44,.5)!important}
html[data-theme="dark"] .apply-classic button[type="submit"]:hover,
html[data-theme="dark"] .apply-classic-page button[type="submit"]:hover{
background:linear-gradient(135deg,#347bb5,#20406a)!important;color:#fff!important}
html[data-theme="dark"] .apply-classic button[type="submit"] *{color:#fff!important}
/* fonts on the apply page — Inter for the headings/titles, Open Sans for the
body and every form control (controls do not inherit by default). */
.apply-classic-page input,.apply-classic-page select,.apply-classic-page textarea,
.apply-classic-page button,.apply-classic-page .field label,
.apply-classic-page .ra-step,.apply-classic-page .ra-inc li,.apply-classic-page .ra-quote{
font-family:'Open Sans','Roboto','Inter','Segoe UI',system-ui,sans-serif!important}
.apply-classic-page .ra-title,.apply-classic-page .ra-person b,
.apply-classic-page .form-head h1,.apply-classic-page .form-head h2,
.apply-classic-page .form-head .brand{
font-family:'Inter','Roboto','Open Sans','Segoe UI',system-ui,sans-serif!important}
input,select,textarea,button{font-family:inherit}
/* ═════════════════════════════════════════════════════════════════════
GLIGHTBOX — modern, on-brand image viewer (2026-07-28). The default
"clean" skin shows a white caption bar and square semi-black buttons;
this restyles it to a dark glass viewer that fits the site. The overlay
is dark in both themes (as image viewers should be); the button hover
accent follows the theme (teal in light, blue in dark).
═════════════════════════════════════════════════════════════════════ */
.goverlay{background:radial-gradient(130% 130% at 50% 0%,rgba(20,35,52,.94),rgba(7,12,18,.97))!important;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gslide-image img,
.glightbox-clean .gslide-image img{border-radius:16px!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important}
/* caption -> floating dark glass card beneath the image */
.glightbox-clean .gslide-description{background:rgba(17,28,40,.9)!important;
border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
margin-top:14px!important;box-shadow:0 16px 40px rgba(0,0,0,.4)!important;text-align:center}
.glightbox-clean .gdesc-inner{padding:14px 22px!important}
.glightbox-clean .gslide-title{font-family:'Inter','Open Sans',system-ui,sans-serif!important;
font-weight:700!important;font-size:1.02rem!important;color:#eef4fb!important;letter-spacing:.01em;margin:0!important;line-height:1.4}
.glightbox-clean .gslide-desc{font-family:'Open Sans',system-ui,sans-serif!important;
font-size:.9rem!important;color:#b7c6d5!important;line-height:1.6}
.glightbox-clean .gslide-desc a{color:#7ec8ff!important}
/* mobile caption: keep the dark gradient, just theme the text */
.glightbox-mobile .glightbox-container .gslide-title{font-family:'Inter','Open Sans',system-ui,sans-serif!important;font-weight:700!important;color:#eef4fb!important}
.glightbox-mobile .glightbox-container .gslide-desc{color:#b7c6d5!important}
/* circular glass buttons (close + prev/next) */
.glightbox-clean .gprev,
.glightbox-clean .gnext,
.glightbox-clean .gclose{background:rgba(15,25,36,.66)!important;border:1px solid rgba(255,255,255,.16)!important;
border-radius:50%!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
box-shadow:0 8px 22px rgba(0,0,0,.35)!important;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.glightbox-clean .gclose{width:46px!important;height:46px!important;top:18px!important;right:18px!important}
.glightbox-clean .gprev,
.glightbox-clean .gnext{width:52px!important;height:52px!important}
.glightbox-clean .gprev svg,.glightbox-clean .gnext svg,.glightbox-clean .gclose svg{width:20px!important}
.glightbox-clean .gprev path,.glightbox-clean .gnext path,.glightbox-clean .gclose path{fill:#eaf2fb!important}
.glightbox-clean .gprev:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gclose:hover{transform:translateY(-2px)!important}
/* theme-aware hover accent */
html:not([data-theme="dark"]) .glightbox-clean .gprev:hover,
html:not([data-theme="dark"]) .glightbox-clean .gnext:hover,
html:not([data-theme="dark"]) .glightbox-clean .gclose:hover{background:rgba(15,102,108,.9)!important;border-color:rgba(47,163,169,.65)!important}
html[data-theme="dark"] .glightbox-clean .gprev:hover,
html[data-theme="dark"] .glightbox-clean .gnext:hover,
html[data-theme="dark"] .glightbox-clean .gclose:hover{background:rgba(36,114,180,.9)!important;border-color:rgba(126,200,255,.65)!important}
/* ═════════════════════════════════════════════════════════════════════
CUSTOM THEMED SELECT (.eco-sel) — progressive enhancement of the apply
form's