/* =====================================================================
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 */
/* tap-target size while the nav is in drawer mode — tracks nav.php's breakpoint */
@media (max-width:1239px){.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}
/* EYEBROWS + quick-fact labels on the explainer pages (5 exam guides, the visa
guide, /search/). --xg-teal is a FIXED token in those pages, so unlike
--xg-blue it never flipped, leaving the small uppercase labels logo-teal in
dark mode (user 2026-07-30: "dark mode is still using the light mode's color
teal on the different words"). Reassigning the TOKEN flips every consumer at
once instead of chasing individual selectors.
Uses the LIGHTER blue on purpose: these are small bold labels on a near-black
panel, where #2986cc measures about 4.1:1 (under the 4.5:1 AA floor) while
#7cc0f0 clears it comfortably. */
html[data-theme="dark"] .exam-guide-page{--xg-teal:#7cc0f0}
/* ═════════════════════════════════════════════════════════════════════
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). ── */
/* ⚠️ SUPERSEDED 2026-08-05 by the "Altitude" nav system in nav.php, which
drives BOTH themes from --nv-* custom properties. The fill, shadow, border
and frost overrides that used to live here fought those tokens with
!important and are gone. The white finish the user asked for on 2026-07-24
is preserved: it is now the LIGHT VALUE of --nv-fill, not an override.
Do not reintroduce nav colour rules here. Change the tokens in nav.php. */
/* ⚠️ 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 wherever the DRAWER is in use, in both themes.
⚠️⚠️ THESE TWO BREAKPOINTS MUST TRACK nav.php's DRAWER BREAKPOINT. They were
992/991 while the drawer started at 991px. When the nav breakpoint moved to
1240px (to fit the Gallery link and leave room for Agency), leaving these at
992 silently reinstated the bug for every width from 992 to 1239: the drawer
was active there AND the header still had backdrop-filter, so the drawer
collapsed to 28px. If you change the nav breakpoint again, change these too. */
/* The desktop-only frost now lives with the rest of the nav system in nav.php.
This kill-switch STAYS, because it is a safety rule rather than styling:
nothing may apply backdrop-filter to the header while the drawer is in use. */
@media (max-width:1239px){
.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)}
/* Link colour is --nv-fg now. Only the mobile DRAWER still needs a light-mode
rule, because it paints itself on --green-dark and is not part of the bar.
⚠️ 2026-08-10: this said "only the mobile DRAWER" and then carried NO media
query, so it also killed the halo on the four dropdown parents in the
desktop bar. About, Courses, Facilities and Campus Regulations sat on a
photo with no halo while Blog, Contact and Gallery had one. Same shape as
the white-box bug: a drawer rule with no breakpoint reaching the bar.
Now scoped to the drawer, which is what the comment always claimed. */
@media (max-width:1239px){
html:not([data-theme="dark"]) .eco-nav .eco-nav__drop{text-shadow:none}
}
/* 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. */
/* hover + active colour is handled by the Altitude system (--nv-fg and the
lozenge bed). A hard teal override here flattened the new active state. */
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;border:1px solid #e3ecf3;
box-shadow:0 18px 40px rgba(20,40,60,.14)!important}
html:not([data-theme="dark"]) .eco-nav__sub a{color:#2d465e}
html:not([data-theme="dark"]) .eco-nav__sub a:hover{color:#0f9f8a;background:rgba(19,194,168,.10)}
/* 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}
/* ⚠️ THIS WAS THE "WHITE BOX". .eco-nav__menu is the mobile DRAWER panel, and
it needs a solid fill there. But this rule carried NO media query, so on
desktop it also painted the inline menu list white: a 789x50 white block
sitting inside an otherwise transparent bar, running from the first link to
Apply Now. It survived every attempt to clear the bar because the bar was
never the thing painting it, and it looked correct in dark mode because the
rule is light-mode only. Scoped to the drawer breakpoint, which is where
nav.php sets the same background for the same reason. */
@media (max-width:1239px){
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"]) .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}
/* ⚠️ Paired with the amber callout panels lower down. These were dark brown ink
(#7a4f12) because the panel behind them was cream. The panel is now a dark
amber tint, so the ink has to invert with it or it reads brown-on-brown. */
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:#edc691!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 accreditor strip styles itself in i18n.php now, both themes together,
so there is no longer half a visual living in this file. */
/* HISTORY, so nobody tries the white-silhouette trick again: the ribbon's logo
tile was a near-white plate, which read as a white chip on every page. It was
replaced with `filter:brightness(0) invert(1)` silhouettes, and that turned
the detailed seals (Immigration, PECA) into unreadable grey blobs. Neither
worked. The strip is now a grid of light BADGES carrying full-colour logos,
which is a deliberate, scoped exception to the no-light-surfaces rule. */
/* 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.
⚠️ 2026-08-12: these used to KEEP their warm cream panel in dark mode with a
forced dark ink. That was a deliberate choice at the time, but it left a
near-white card on 5 pages, which the "true dark" rule does not allow. Amber
is still the signal colour, it just moved from the FILL to the INK. Kept here
at .main specificity rather than in the sweep block at the bottom of the file,
because this selector outranks it and would otherwise silently win. */
html[data-theme="dark"] .main .reg-note--warn,
html[data-theme="dark"] .main .gc-details__body h5{
background:rgba(224,168,86,.10)!important;border-color:rgba(224,168,86,.32)!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:#edc691!important}
html[data-theme="dark"] .main .reg-note--warn strong,
html[data-theme="dark"] .main .gc-details__body h5 strong{color:#f6dcb4!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