/* ============================================================ SITEBANNER.CSS All styles for the site banner injected by sitebanner.js. Self-contained — no dependency on index.css tokens. Link in every page (before navbar.css): ============================================================ */ /* ── 0. GLOBAL RESET for banner context ─────────────────── */ html, body { margin: 0; padding: 0; /* overflow-x: hidden;*/ } /* ── 1. BANNER WRAPPER ───────────────────────────────────── */ #siteBanner { width: 100%; margin: 0; /*padding: 1.1rem 1.1rem 1.1rem 2.5rem; /* top right bottom left — 0 right gap */ padding-top: 0; /* no space at top */ box-sizing: border-box; display: block; background: linear-gradient(135deg, #0a1628 0%, #1a3a6e 50%, #1e5bc6 100%); border-bottom: 4px solid #f5b800; /* kill any browser default margin/padding on body pushing it down position: relative;*/ top: 0; left: 0; right: 0; } /* ── 2. INNER ROW ─────────────────────────────────────────── */ #siteBanner .banner-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; gap: 1.5rem; margin: 0; padding: 0; } /* ── 3. LEFT BLOCK ───────────────────────────────────────── */ #siteBanner .banner-left { display: flex; align-items: center; gap: 1.2rem; flex: 1; min-width: 0; } /* ── 4. LOGO BOX ──────────────────────────────────────────── */ #siteBanner .banner-logo { position: relative; width: 82px; height: 82px; flex-shrink: 0; overflow: hidden; border-radius: 6px; } /* Actual logo image — sits on top */ #siteBanner .banner-logo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; } /* PVP fallback text — always behind the image */ #siteBanner .banner-logo-text { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; font-family: "Playfair Display", serif; font-weight: 900; font-size: 1.45rem; color: #f5b800; pointer-events: none; letter-spacing: 0.04em; } /* ── 5. TEXT COLUMN ──────────────────────────────────────── */ #siteBanner .banner-text-col { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } /* College name */ #siteBanner .banner-college { font-family: "Playfair Display", serif; font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 900; color: #ffffff; letter-spacing: 0.03em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Department gold pill */ #siteBanner .banner-dept-box { display: inline-block; align-self: flex-start; background: #f5b800; color: #0a1628; font-family: "DM Sans", "Helvetica", sans-serif; font-size: clamp(0.7rem, 1.2vw, 0.92rem); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.36rem 1.2rem; border-radius: 5px; box-shadow: 0 4px 14px rgba(245, 184, 0, 0.35); white-space: nowrap; } /* ── 6. RIGHT BLOCK: NAAC BADGE ──────────────────────────── */ #siteBanner .banner-badges { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex-shrink: 0; } #siteBanner .naac-circle { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #f5b800; background: rgba(245, 184, 0, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.1; } #siteBanner .naac-circle .naac-label { font-size: 0.54rem; font-weight: 700; color: #f5b800; letter-spacing: 0.1em; text-transform: uppercase; } #siteBanner .naac-circle .naac-grade { font-family: "Playfair Display", serif; font-size: 1.3rem; font-weight: 900; color: #f5b800; line-height: 1; } #siteBanner .naac-circle .naac-plus { font-size: 0.6rem; font-weight: 700; color: #f5b800; margin-top: -0.1rem; } #siteBanner .badge-label { font-size: 0.58rem; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.07em; text-align: center; text-transform: uppercase; } /* ── 7. RESPONSIVE ───────────────────────────────────────── */ /* Tablet 768px–991px */ @media (max-width: 991px) { #siteBanner { padding: 0 0 1rem 1.5rem; /* top intentionally 0 */ } #siteBanner .banner-college { white-space: normal; } } /* Mobile up to 767px */ @media (max-width: 767px) { #siteBanner { padding: 0 0 0.85rem 1rem; } #siteBanner .banner-logo { width: 56px; height: 56px; } #siteBanner .banner-logo-text { font-size: 1rem; } #siteBanner .banner-left { gap: 0.75rem; } #siteBanner .banner-college { font-size: clamp(0.8rem, 3.5vw, 1.1rem); white-space: normal; } #siteBanner .banner-dept-box { font-size: 0.66rem; /* padding: 0.28rem 0.8rem; */ } #siteBanner .naac-circle { width: 70px; height: 55px; } #siteBanner .naac-circle .naac-grade { font-size: 1rem; } #siteBanner .naac-circle .naac-label, #siteBanner .naac-circle .naac-plus { font-size: 0.2rem; } } /* Extra small 400px and below */ @media (max-width: 400px) { #siteBanner .banner-dept-box { font-size: 0.6rem; padding: 0.22rem 0.6rem; letter-spacing: 0.03em; } #siteBanner .banner-college { font-size: 0.78rem; } #siteBanner .banner-badges { display: none; } }