/* ========================================================================= PMIT — Dark Campus Theme (v3, scoped) ------------------------------------------------------------------------ This is an OPT-IN skin, not a global override. It only takes effect on pages whose carries the "theme-dark" class (set per-page from PHP — see includes/header.php + the $page_theme flag at the top of each page). Everywhere else the site keeps the original light theme defined in style.css, which is what we want for anything read-heavy or transactional: admissions forms, login/register, dashboards, legal and policy pages. Where it's used: the homepage and the "showcase" pages — Research, Innovation, Gallery, Student Life — get the cinematic dark canvas with crimson accents. Everything else stays light, clean and easy to read. HOW IT WORKS: CSS custom properties set on `body.theme-dark` cascade to every descendant that consumes var(--pmit-*), so most components (cards, buttons, testimonials, badges…) re-theme automatically with no extra rule needed. Only the handful of components that were hard-coded to a literal white/black — instead of a token — get an explicit rule below, always scoped under body.theme-dark so they never leak onto a light page. ========================================================================= */ body.theme-dark { /* ---- Surfaces -------------------------------------------------- */ --pmit-white: #14171F; /* was #FFFFFF — card / panel surface */ --pmit-grey-light: #0B0D13; /* was #F8FAFC — alternating section bg */ --pmit-grey-mid: rgba(255,255,255,.10); /* was #E5E7EB — hairline borders */ --pmit-red-mist: rgba(212,42,42,.14); /* was #FBEAEA — soft red chip bg */ --pmit-gold-soft: rgba(37,99,235,.14); /* ---- Type -------------------------------------------------------- */ --pmit-charcoal: #F5F6FA; /* was #111827 — headings */ --pmit-charcoal-soft: #A6ABBA; /* was #4B5563 — body copy */ /* ---- Shadows tuned for a dark canvas ------------------------------ */ --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 10px 28px rgba(0,0,0,.45); --shadow-lg: 0 26px 64px rgba(0,0,0,.55); background: #06070A; } body.theme-dark .shell { background: #06070A; } /* Base page canvas gets a very slow, subtle glow instead of a flat fill — this is what keeps a dark theme from reading flat/muddy. */ body.theme-dark main.shell__content { background: radial-gradient(1100px 520px at 14% -6%, rgba(179,27,27,.10), transparent 60%), radial-gradient(900px 480px at 100% 12%, rgba(37,99,235,.06), transparent 55%), #06070A; } /* ---- Section rhythm: alternate between two very close dark tones so bands are still readable as separate zones (mirrors the light theme's white / grey-light alternation) without ever looking washed out. ------ */ body.theme-dark .section { background: transparent; } body.theme-dark .section--grey { background: var(--pmit-grey-light); } /* ---- Eyebrow labels: the deep crimson token was tuned for a white background; on the dark canvas use the brighter red for legible contrast everywhere (not just inside .section--dark blocks). --------- */ body.theme-dark .eyebrow { color: var(--pmit-red-bright); } body.theme-dark .eyebrow::before { background: var(--pmit-red-bright); } /* ---- Borders / dividers -------------------------------------------- */ body.theme-dark .rule { background: rgba(255,255,255,.10); } body.theme-dark hr { border-color: var(--pmit-grey-mid); } /* ---- Every other "deep crimson as foreground" usage — links, small accent marks, icon chips — reads muddy on a dark canvas, so bump it to the brighter red used elsewhere for dark surfaces. Solid buttons keep the deeper red since white-on-red contrast is unaffected. ------------- */ body.theme-dark .btn--ghost, body.theme-dark .node-list li::before, body.theme-dark .icon-strip__icon, body.theme-dark .icon-strip__link, body.theme-dark .news-card__date-day, body.theme-dark .card__icon, body.theme-dark .float-card__icon, body.theme-dark .float-card__icon svg, body.theme-dark .breadcrumb a:hover, body.theme-dark .accordion__trigger::after, body.theme-dark .form-error, body.theme-dark .hours-card__total { color: var(--pmit-red-bright); } body.theme-dark .node-list li::before { background: var(--pmit-red-bright); } body.theme-dark .hours-card__total { background: var(--pmit-red-mist); } /* ---- Buttons: outline needs a light-on-dark pass ---------------------- */ body.theme-dark .btn--outline { border-color: rgba(255,255,255,.34); color: var(--pmit-charcoal); } body.theme-dark .btn--outline:hover { background: var(--pmit-charcoal); color: #06070A; } /* ---- Cards / panels that were hard-coded to #fff ---------------------- */ body.theme-dark .float-card { background: #14171F; box-shadow: 0 26px 60px rgba(0,0,0,.55); border: 1px solid var(--pmit-grey-mid); } body.theme-dark .float-card__item { border-right-color: var(--pmit-grey-mid); } body.theme-dark .hours-card { background: #14171F; border-color: var(--pmit-grey-mid); } body.theme-dark .hours-bar { background: rgba(255,255,255,.08); } /* ---- Forms — only relevant if a dark page ever embeds one (e.g. a newsletter field), since every dedicated form page (login, admissions, contact…) intentionally stays on the light theme. ---------------------- */ body.theme-dark .form-field input, body.theme-dark .form-field select, body.theme-dark .form-field textarea { background: #10121A; border-color: var(--pmit-grey-mid); color: var(--pmit-charcoal); } body.theme-dark .form-field input::placeholder, body.theme-dark .form-field textarea::placeholder { color: #6B7180; } body.theme-dark .nav__search-panel { background: #0B0D13; border-bottom-color: var(--pmit-grey-mid); } body.theme-dark .nav__search-panel input { background: #14171F; border-color: var(--pmit-grey-mid); color: var(--pmit-charcoal); } /* ---- Testimonials / alerts / badges tuned for contrast on dark -------- */ body.theme-dark .testimonial { background: #14171F; border: 1px solid var(--pmit-grey-mid); } body.theme-dark .alert--success { background: rgba(22,163,74,.14); color: #4ADE80; border-color: rgba(22,163,74,.3); } body.theme-dark .alert--error { background: rgba(212,42,42,.14); color: #FF8A8A; border-color: rgba(212,42,42,.32); } body.theme-dark .badge--success { background: rgba(22,163,74,.16); color: #4ADE80; } body.theme-dark .badge--warning { background: rgba(245,158,11,.16); color: #FBBF24; } body.theme-dark .badge--danger { background: rgba(212,42,42,.16); color: #FF8A8A; } body.theme-dark .badge--info { background: rgba(37,99,235,.16); color: #7EA8F5; } body.theme-dark .badge--gold { background: rgba(37,99,235,.16); color: #7EA8F5; } /* ---- Bands that were flat var(--pmit-black) — now close in tone to the page canvas, so give them a touch more depth + a hairline edge to read as distinct zones rather than blending in. ----------------------------- */ body.theme-dark .impact-band { background: linear-gradient(135deg, #17090C 0%, #0D0405 100%); border: 1px solid rgba(255,255,255,.08); } body.theme-dark .partners-band { border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } body.theme-dark .dark-panel { background: #171A22; } /* ========================================================================= UNIVERSAL polish — applied on every page regardless of theme, since the sidebar/hero are already dark by design and these tweaks are purely cosmetic (they don't change what color anything reads as). ========================================================================= */ /* Slightly richer sidebar gradient so the always-dark nav rail reads as an intentional part of the brand, on both light and dark pages. ------- */ /* (mobile menu panel gradient now lives in theme-sidebar.css, shared by both themes) */ ::selection { background: var(--pmit-red); color: #fff; } body.theme-dark { scrollbar-color: rgba(255,255,255,.28) transparent; } /* ========================================================================= COURSE / SCHOOL CAROUSEL (see index.php) — layout only. Colors come from var(--pmit-*) tokens, so this single block already looks correct on both a light page and a dark one without any extra scoping; the gradient overlay on each card is for text-over-photo legibility and is independent of the page theme. ========================================================================= */ .course-carousel { position: relative; display: flex; align-items: center; gap: 14px; } .course-carousel__track { display: flex; gap: 18px; flex: 1; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 10px; } .course-carousel__track::-webkit-scrollbar { display: none; } .course-carousel__item { flex: 0 0 248px; scroll-snap-align: start; position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; box-shadow: var(--shadow-md); background: var(--pmit-white); border: 1px solid var(--pmit-grey-mid); } .course-carousel__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .course-carousel__item:hover img { transform: scale(1.07); } .course-carousel__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,7,10,0) 32%, rgba(6,7,10,.94) 100%); } .course-carousel__index { position: absolute; top: 14px; left: 16px; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.75); } .course-carousel__body { position: relative; z-index: 1; padding: 18px 18px 20px; color: #fff; } .course-carousel__body h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 6px; } .course-carousel__body h4 svg { width: 13px; height: 13px; color: var(--pmit-red-bright); flex: none; } .course-carousel__body p { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.68); } .course-carousel__nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pmit-grey-mid); background: var(--pmit-white); color: var(--pmit-charcoal); display: flex; align-items: center; justify-content: center; flex: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .course-carousel__nav svg { width: 17px; height: 17px; } .course-carousel__nav:hover { background: var(--pmit-red); color: #fff; border-color: var(--pmit-red); } .course-carousel__nav:disabled { opacity: .35; pointer-events: none; } @media (max-width: 680px) { .course-carousel__nav { display: none; } .course-carousel__item { flex-basis: 208px; min-height: 260px; } }