/* ============================================================
history.css — LNM College | History Page Styles
Theme: Deep Blue (#1E3A8A) + Green (#22C55E)
Fonts: Poppins (English) + Noto Sans Devanagari (Hindi)
============================================================ */
/* Fonts are loaded via tags in history.aspx — no @import needed.
Using is more reliable on IIS servers than CSS @import. */
@font-face {
font-family: 'Poppins';
src: url('assets/fonts/Poppins-Regular.ttf') format('truetype');
font-weight: 400;
}
@font-face {
font-family: 'Poppins';
src: url('assets/fonts/Poppins-Medium.ttf') format('truetype');
font-weight: 500;
}
@font-face {
font-family: 'Poppins';
src: url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');
font-weight: 600;
}
@font-face {
font-family: 'Poppins';
src: url('assets/fonts/Poppins-Bold.ttf') format('truetype');
font-weight: 700;
}
/* ── CSS Variables ─────────────────────────────────────────── */
:root {
--primary: #1E3A8A;
--primary-dark: #162d6e;
--accent: #22C55E;
--accent-light: #ECFDF5;
--bg: #F8FAFC;
--text: #0F172A;
--text-muted: #334155;
--card-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
--radius-lg: 20px;
--radius-md: 12px;
--radius-sm: 8px;
--transition: all 0.35s ease;
}
/* ── Base ───────────────────────────────────────────────────── */
/* Noto Sans Devanagari FIRST — browsers pick the first font that
supports a character. Poppins has NO Devanagari glyphs, so if
it comes first, every Hindi character falls back to a random
system font instead of Noto. With Noto first, Hindi chars use
Noto; Latin/numeric chars fall through to Poppins automatically. */
body,
.about-us-area {
font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
background-color: var(--bg);
color: var(--text);
}
/* Explicitly use Poppins for purely Latin/numeric UI labels */
.hero-badge,
.hero-history h1,
.history-card-label,
.history-timeline-heading,
.timeline-year,
.timeline-desc,
.history-highlight-item {
font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}
/* ── Utility Container ─────────────────────────────────────── */
.history-wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 60px;
}
/* ══════════════════════════════════════════════════════════════
SECTION 1 — HERO HEADER
══════════════════════════════════════════════════════════════ */
.hero-history {
position: relative;
padding: 90px 20px 110px;
background: linear-gradient(135deg, var(--primary) 0%, #1a5c3a 50%, var(--accent) 100%);
text-align: center;
border-radius: 0 0 50px 50px;
overflow: hidden;
}
/* Glassmorphism overlay */
.hero-history::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
/* Decorative circles */
.hero-history::after {
content: '';
position: absolute;
width: 420px;
height: 420px;
background: rgba(255, 255, 255, 0.06);
border-radius: 50%;
top: -140px;
right: -100px;
pointer-events: none;
}
.hero-history-inner {
position: relative;
z-index: 2;
}
.hero-history h1 {
font-size: 48px;
font-weight: 800;
color: #ffffff;
letter-spacing: -0.5px;
margin: 0 0 14px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
animation: fadeUp 0.7s ease both;
}
.hero-history .hero-subtitle {
font-family: 'Noto Sans Devanagari', sans-serif;
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
margin: 0;
animation: fadeUp 0.7s 0.15s ease both;
}
.hero-history .hero-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #ffffff;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 18px;
border-radius: 30px;
margin-bottom: 20px;
animation: fadeUp 0.7s 0.05s ease both;
}
/* Decorative blob bottom-left */
.hero-blob {
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
bottom: -120px;
left: -80px;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════
SECTION 2 — HISTORY CARD
══════════════════════════════════════════════════════════════ */
.history-card {
background: #ffffff;
padding: 48px 52px;
margin-top: -60px;
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
line-height: 2;
font-size: 15.5px;
transition: var(--transition);
border-top: 4px solid var(--accent);
position: relative;
z-index: 5;
}
.history-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}
.history-card p {
/* Explicit declaration — never rely on inheritance for Devanagari */
font-family: 'Noto Sans Devanagari', sans-serif !important;
font-size: 16px;
font-weight: 400;
/* Devanagari matras (vowel marks) sit above/below the base line;
they need taller line-height than Latin text to breathe properly */
line-height: 2.1;
margin-bottom: 22px;
color: var(--text-muted);
text-align: justify;
/* Devanagari doesn't hyphenate the same way as Latin — disable */
hyphens: none;
word-break: keep-all;
overflow-wrap: break-word;
}
.history-card p:last-child {
margin-bottom: 0;
}
/* Section label inside card */
.history-card-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
}
.history-card-label::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(to right, var(--accent-light), transparent);
border-radius: 2px;
}
/* ══════════════════════════════════════════════════════════════
SECTION 3 — HIGHLIGHT BOX
══════════════════════════════════════════════════════════════ */
.history-highlight {
display: flex;
flex-wrap: wrap;
gap: 16px;
background: var(--accent-light);
border-left: 5px solid var(--accent);
padding: 18px 22px;
margin-bottom: 28px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.history-highlight-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
}
.history-highlight-item .hi-icon {
font-size: 18px;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════════
SECTION 4 — TIMELINE
══════════════════════════════════════════════════════════════ */
.history-timeline-heading {
font-size: 17px;
font-weight: 700;
color: var(--primary);
margin: 36px 0 20px;
display: flex;
align-items: center;
gap: 10px;
}
.history-timeline-heading::before {
content: '';
display: inline-block;
width: 28px;
height: 4px;
background: var(--accent);
border-radius: 4px;
}
.timeline {
margin-top: 8px;
border-left: 3px solid var(--accent);
padding-left: 28px;
margin-left: 6px;
}
.timeline-item {
position: relative;
margin-bottom: 22px;
padding: 14px 18px;
background: #f8fafc;
border-radius: var(--radius-sm);
border: 1px solid #e2e8f0;
transition: var(--transition);
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item:hover {
background: #ffffff;
border-color: var(--accent);
box-shadow: 0 4px 16px rgba(34, 197, 94, 0.12);
transform: translateX(4px);
}
/* Green dot */
.timeline-item::before {
content: '';
position: absolute;
left: -39px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: var(--accent);
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
transition: var(--transition);
}
.timeline-item:hover::before {
box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2);
transform: translateY(-50%) scale(1.2);
}
.timeline-year {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 3px;
}
.timeline-desc {
font-size: 14px;
font-weight: 500;
color: var(--text);
margin: 0;
font-family: 'Poppins', sans-serif;
}
/* ══════════════════════════════════════════════════════════════
ANIMATIONS
══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.history-card {
animation: fadeUp 0.6s 0.2s ease both;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVENESS
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
.hero-history {
padding: 60px 16px 80px;
border-radius: 0 0 30px 30px;
}
.hero-history h1 {
font-size: 28px;
}
.hero-history .hero-subtitle {
font-size: 14px;
}
.history-wrapper {
padding: 0 14px 40px;
}
.history-card {
padding: 24px 20px;
margin-top: -40px;
}
.history-card p {
font-size: 14.5px;
line-height: 1.9;
}
.history-highlight {
flex-direction: column;
gap: 10px;
}
.timeline {
padding-left: 20px;
}
.timeline-item::before {
left: -31px;
}
}
@media (max-width: 480px) {
.hero-history h1 {
font-size: 24px;
}
.history-card {
padding: 20px 16px;
}
}