/* =====================================================
COMMON.CSS
Shared TOPBAR + MENU BUTTON + SIDEBAR styles
Extracted from: about.css, academic.css, admin.css,
contact.css, faculty.css, galary.css
(these 6 files had identical topbar/sidebar/menu-btn rules)
NOTE: school.css (used by index.html) uses different
dimensions/animations for these components, so it was
NOT merged in here to avoid breaking the home page look.
If you want index.html to match the rest, swap its
to this file too and remove the differing rules
from school.css.
HOW TO USE:
Add this line in the of each page, AFTER the
page's own stylesheet link (so page-specific overrides
still work), or BEFORE it if you want this to always win:
Then you can safely delete the duplicated topbar/menu-btn/
sidebar rules from about.css, academic.css, admin.css,
contact.css, faculty.css, and galary.css whenever you're
ready — nothing here modifies those files automatically.
===================================================== */
:root{
--topbar-height: 80px;
--topbar-bg-image: url("images/header.jpg");
--topbar-shadow: 0 5px 15px rgba(0,0,0,.15);
--topbar-border-color: rgba(255,255,255,.25);
--menu-btn-size: 42px;
--menu-btn-left: 20px;
--menu-btn-color: #004d99;
--menu-btn-hover-bg: rgb(226, 226, 226);
--sidebar-width: 260px;
--sidebar-top: 80px; /* still used to push page content (body/main-content)
below the fixed topbar -- no longer used for the
sidebar's own position, since the sidebar now
covers the topbar instead of starting below it */
--sidebar-bg: #004d99;
--sidebar-shadow: 5px 0 15px rgba(0,0,0,.35);
--sidebar-z: 1100; /* higher than --topbar-z so the sidebar covers the topbar */
--sidebar-overlay-z: 950; /* below the topbar (so topbar stays undimmed/clickable), below the sidebar */
--sidebar-link-hover-bg: #4fc3f7;
--sidebar-link-hover-color: #0d1b2a;
--sidebar-powered-link-color: #4fc3f7;
--sidebar-header-bg: #ffffff;
--sidebar-header-text-color: #004d99;
--sidebar-logo-size: 52px;
--page-header-height: 10vh;
--page-header-overlay: rgba(0, 77, 153, 0.274);
--page-header-image: none; /* each page's own CSS sets this to its image */
--page-header-fallback-bg: #004d99d6;
}
/* =====================================================
GLOBAL MOBILE-SAFETY RESET
Prevents the classic "page renders zoomed-out / grid
columns don't stack" mobile bug, which happens when any
element (even 1px) is wider than the screen and there is
no box-sizing normalization. This does not change any
existing visual sizes on desktop.
===================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
max-width: 100%;
overflow-x: hidden;
}
img,
video {
max-width: 100%;
height: auto;
}
/* ===== TOP BAR ===== */
.topbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--topbar-height);
background: var(--topbar-bg-image) center center/cover no-repeat;
display: flex;
align-items: center;
z-index: 1000;
box-shadow: var(--topbar-shadow);
}
.topbar.hide{
opacity: 0;
transform: translateY(-15px);
pointer-events: none;
}
.topbar::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--topbar-border-color);
}
/* ===== MENU BUTTON (3-line) ===== */
#menu-btn{
position: absolute;
left: var(--menu-btn-left);
top: 50%;
transform: translateY(-50%);
width: var(--menu-btn-size);
height: var(--menu-btn-size);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: var(--menu-btn-color);
border-radius: 10px;
cursor: pointer;
transition: .3s;
}
#menu-btn:hover{
background: var(--menu-btn-hover-bg);
transform: translateY(-50%) scale(1.08);
}
/* ===== SIDEBAR ===== */
.sidebar{
position: fixed;
top: 0;
left: calc(var(--sidebar-width) * -1);
width: var(--sidebar-width);
height: 100vh;
background: var(--sidebar-bg);
transition: .4s ease;
box-shadow: var(--sidebar-shadow);
z-index: var(--sidebar-z);
display: flex;
flex-direction: column;
}
.sidebar.open{
left: 0;
}
/* ===== SIDEBAR OVERLAY ===== */
.sidebar-overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.648);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
z-index: var(--sidebar-overlay-z);
}
.sidebar-overlay.show{
opacity: 1;
pointer-events: auto;
}
/* ===== SIDEBAR HEADER / LOGO ===== */
.sidebar-header{
height: var(--topbar-height);
flex-shrink: 0;
background: var(--sidebar-header-bg);
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
overflow: hidden;
}
.sidebar-logo{
width: var(--sidebar-logo-size);
height: var(--sidebar-logo-size);
flex-shrink: 0;
object-fit: contain;
border-radius: 50%;
}
.sidebar-title{
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
line-height: 1.25;
color: var(--sidebar-header-text-color);
font-family: 'Georgia', 'Times New Roman', serif;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.2px;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar ul{
flex: 1;
list-style: none;
padding: 0;
margin: 0;
}
.sidebar ul li{
margin: 0;
padding: 0;
}
.sidebar ul li a{
display: block;
padding: 12px 20px;
margin: 5px 10px;
border-radius: 8px;
font-size: 1.1em;
color: white;
text-decoration: none;
transition: 0.3s;
}
.sidebar ul li a:hover{
background: var(--sidebar-link-hover-bg);
color: var(--sidebar-link-hover-color);
box-shadow: 0 0 10px #1b263b;
}
.sidebar ul li a.active{
background: var(--sidebar-link-hover-bg);
color: var(--sidebar-link-hover-color);
font-weight: 600;
}
/* ===== "POWERED BY" FOOTER (bottom of sidebar) ===== */
.sidebar-powered{
margin-top: auto;
padding: 15px;
text-align: center;
border-top: 1px solid rgba(255,255,255,.2);
}
.sidebar-powered p{
margin: 0 0 6px;
color: rgba(255,255,255,.7);
font-size: 12px;
}
.sidebar-powered a{
color: var(--sidebar-powered-link-color);
text-decoration: none;
font-weight: bold;
transition: .3s;
}
.sidebar-powered a i{
margin-right: 6px;
color: #ffffff;
font-size: 18px;
}
.sidebar-powered a:hover{
color: white;
text-decoration: underline;
}
/* ===== Prevent layout shift under fixed topbar ===== */
.main-content{
margin-top: var(--sidebar-top);
}
/* ===== Push page content below the fixed topbar =====
This one rule replaces the "padding-top: 55px" (mismatched with the
real 80px topbar height) that was duplicated and wrong in about.css,
academic.css, faculty.css, galary.css, admin.css. Because common.css
is linked AFTER each page's own CSS, this always wins and keeps every
page's header/image fully clear of the topbar. */
body{
padding-top: var(--sidebar-top);
}
/* ===== PAGE HEADER (the colored banner under the topbar, e.g. "Contact Us") =====
Shared sizing/overlay/layout lives here. Each page sets ONLY the image,
by declaring --page-header-image in its own CSS file, e.g.:
header{
--page-header-image: url("images/contact-banner.jpg");
}
*/
header{
background:
linear-gradient(var(--page-header-overlay), var(--page-header-overlay)),
var(--page-header-image),
var(--page-header-fallback-bg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 20px;
text-align: center;
height: var(--page-header-height);
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
header h1{
margin: 0;
}
/* =====================================================
MOBILE RESPONSIVE OVERRIDES
Desktop rules above are untouched. These only kick in
on narrower viewports so the desktop look never changes.
===================================================== */
@media (max-width: 768px) {
:root {
--topbar-height: 60px;
--sidebar-top: 60px;
--sidebar-width: 230px;
--menu-btn-size: 38px;
--menu-btn-left: 12px;
--page-header-height: 14vh;
--sidebar-logo-size: 42px;
}
.sidebar-title {
font-size: 0.9rem;
}
header h1 {
font-size: 1.4rem;
}
header p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
:root {
--topbar-height: 55px;
--sidebar-top: 55px;
--sidebar-width: 210px;
--menu-btn-size: 34px;
--page-header-height: 16vh;
}
.sidebar-title {
font-size: 0.8rem;
}
header h1 {
font-size: 1.2rem;
}
header p {
font-size: 0.8rem;
padding: 0 10px;
}
}
.announcement-item{
background:#f7f9fc;
padding:15px;
margin-bottom:12px;
border-left:4px solid #004d99;
border-radius:10px;
}
.announcement-item strong{
display:block;
color:#004d99;
}
.announcement-item p{
margin:8px 0;
}
.announcement-item small{
color:#777;
}