/* =========================================================== Sri Mahesh Prasad Degree College — Premium Redesign Demo Custom styles layered on top of Tailwind CDN =========================================================== */ :root { --maroon: #6d1a2e; --maroon-deep: #5a1424; --maroon-2: #7a1f2b; --gold: #c8a24a; --gold-soft: #d8bd7e; --cream: #faf7f2; --cream-2: #f3ece1; --ink: #1b1b1b; --muted: #5c5751; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* offset for sticky nav on anchor jumps */ } body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background-color: var(--cream); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .font-display { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; } /* =========================================================== BILINGUAL · Hindi (default) ↔ English toggle - carries `lang-hi` or `lang-en`; we hide the inactive language's spans. Default is Hindi (set inline + in JS). - Devanagari gets dedicated Google fonts so it renders cleanly and never falls back to tofu boxes. =========================================================== */ /* default-hide nothing until JS classes the ; the inline class on (lang-hi) means English is hidden on first paint. */ html.lang-en [data-lang="hi"] { display: none !important; } html.lang-hi [data-lang="en"] { display: none !important; } /* Hindi typography — body + display headings. Numerals/Latin still fall through to Plus Jakarta / Fraunces. */ html.lang-hi body, [data-lang="hi"] { font-family: 'Noto Sans Devanagari', 'Plus Jakarta Sans', system-ui, sans-serif; } /* Hindi inside display headings uses a Devanagari serif so the big hero headline + section titles keep their editorial character. */ html.lang-hi .font-display [data-lang="hi"], .font-display [data-lang="hi"], html.lang-hi .stat-num [data-lang="hi"], html.lang-hi .avatar[data-lang] { font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', 'Fraunces', serif; font-weight: 600; } /* Devanagari has tall ascenders/descenders — relax the very tight hero leading a touch so matras don't clip in Hindi. */ html.lang-hi h1.font-display { line-height: 1.18; } html.lang-hi h2.font-display { line-height: 1.28; } /* keep proper-noun / code spans (degree abbreviations, phone, email) in the Latin stack even when the surrounding text is Hindi */ [data-lang="hi"] .latin, .latin { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } /* ---------- Language pill toggle ---------- */ .lang-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px; backdrop-filter: blur(4px); user-select: none; } .lang-toggle button { appearance: none; border: 0; cursor: pointer; font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1; padding: .42rem .72rem; border-radius: 999px; color: rgba(255,255,255,.78); background: transparent; transition: background-color .25s ease, color .25s ease; } .lang-toggle button.is-active { background: linear-gradient(180deg, var(--gold), #b88f38); color: #2a1208; box-shadow: 0 4px 12px -6px rgba(200,162,74,.8); } .lang-toggle .lt-hi { font-family: 'Noto Sans Devanagari', sans-serif; } /* mobile menu variant sits on the dark menu sheet — same look works */ #mobile-menu .lang-toggle { background: rgba(255,255,255,.08); } /* ---------- Demo ribbon (AgentNation) ---------- */ #demo-ribbon { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .42rem 2.6rem .42rem 1rem; font-size: .76rem; font-weight: 600; letter-spacing: .01em; color: #fff7e9; text-align: center; background: linear-gradient(90deg, var(--maroon-deep), var(--maroon) 55%, #7a1f2b); border-bottom: 1px solid rgba(200,162,74,.45); box-shadow: 0 6px 18px -10px rgba(0,0,0,.5); } #demo-ribbon .ribbon-text { line-height: 1.3; } #demo-ribbon .ribbon-text b { color: var(--gold-soft); font-weight: 700; } #demo-ribbon .ribbon-close { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; border-radius: 999px; color: rgba(255,255,255,.8); font-size: 1.1rem; background: rgba(255,255,255,.12); transition: background-color .2s ease; } #demo-ribbon .ribbon-close:hover { background: rgba(255,255,255,.25); color: #fff; } /* when the ribbon is visible we nudge the fixed header + a CSS var down so nothing is hidden under it. JS sets `ribbon-on` on . */ html.ribbon-on #site-header { top: var(--ribbon-h, 30px); } html.ribbon-on { scroll-padding-top: calc(88px + var(--ribbon-h, 30px)); } html:not(.ribbon-on) #demo-ribbon { display: none; } /* ---------- Footer credit (AgentNation) ---------- */ .agentnation-credit { font-weight: 600; letter-spacing: .02em; } .agentnation-credit b { color: var(--gold-soft); } /* ---------- Brand color utilities ---------- */ .text-maroon { color: var(--maroon); } .text-gold { color: var(--gold); } .text-cream { color: var(--cream); } .bg-maroon { background-color: var(--maroon); } .bg-maroon-deep{ background-color: var(--maroon-deep); } .bg-gold { background-color: var(--gold); } .bg-cream { background-color: var(--cream); } .bg-cream-2 { background-color: var(--cream-2); } .border-gold { border-color: var(--gold); } .border-maroon { border-color: var(--maroon); } .ring-gold { box-shadow: 0 0 0 2px var(--gold); } /* ---------- Sticky header transition ---------- */ #site-header { transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease; } #site-header.scrolled { background-color: rgba(109, 26, 46, 0.97); backdrop-filter: saturate(140%) blur(6px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); } /* nav links color flips when transparent vs solid handled via classes in JS */ /* =========================================================== HERO — two switchable variants Toggle via or . Shared: campus-06.jpg (the dramatic low-angle Agriculture block), hard color-graded to kill its cold grey cast. =========================================================== */ /* variant visibility switch (driven by the body class) */ .hero-a #hero-variant-b { display: none; } .hero-b #hero-variant-a { display: none; } /* the one grade applied to every instance of the hero photo. Photos are now professionally retouched (real blue sky, warm daylight), so the grade is kept very subtle — just a touch of contrast/saturation. */ .hero-frame-photo, .hero-cine-photo { background-image: url('../assets/campus-06.jpg'); background-size: cover; filter: contrast(1.03) saturate(1.05); will-change: transform; } /* ---------- VARIANT A · Editorial Split ---------- */ /* On desktop the split must hold a real height as a true 2-column grid (~55% maroon text / ~45% photo) with both columns stretching full-height. On mobile it stacks (single column) — height comes from content. */ @media (min-width: 1024px) { .hero-split { min-height: 88svh; max-height: 1000px; grid-template-columns: 55fr 45fr; align-items: stretch; } .hero-split-panel, .hero-split-media { height: 100%; } } .hero-split-panel { background: radial-gradient(120% 90% at 100% 0%, rgba(200,162,74,.10), transparent 55%), linear-gradient(150deg, #5a1626 0%, #6d1a2e 70%, #5e1525 100%); } /* subtle paper texture over the maroon panel */ .hero-split-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; opacity: .6; } .hero-crest-watermark { position: absolute; right: -6%; bottom: -8%; width: 78%; max-width: 640px; opacity: .05; filter: brightness(0) invert(1); /* render crest as faint white */ pointer-events: none; user-select: none; z-index: 0; } .hero-split-media { background: linear-gradient(150deg, #61172a 0%, #6d1a2e 100%); } .hero-frame { border-radius: 1rem; /* rounded-2xl-ish */ overflow: hidden; border: 1.5px solid rgba(200,162,74,.55); box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.15); } .hero-frame-photo { position: absolute; inset: 0; /* photo is professionally retouched — show the real sky & full building */ background-position: center center; background-size: cover; /* fill the framed column at full height */ transform: scale(1.03); } /* frosted-glass reviews chip overlapping the frame corner */ .hero-review-chip { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: inline-flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: .9rem; color: #fff; background: rgba(30,8,16,.42); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 16px 34px -18px rgba(0,0,0,.7); } .hero-review-stars { color: var(--gold-soft); font-size: 1.4rem; line-height: 1; } .hero-review-text strong { font-family: 'Fraunces', serif; font-size: 1.15rem; } /* stat card that overlaps the boundary into the maroon stats strip */ .hero-overlap-card { position: absolute; left: 6%; bottom: -2.75rem; z-index: 20; display: none; /* desktop-only depth flourish */ align-items: center; gap: 1.4rem; padding: 1.1rem 1.6rem; background: #fff; border-radius: 1.1rem; border: 1px solid rgba(200,162,74,.4); box-shadow: 0 30px 60px -28px rgba(109,26,46,.55), 0 2px 4px rgba(27,27,27,.06); } .hero-overlap-num { font-size: 1.9rem; font-weight: 600; color: var(--maroon); line-height: 1; } .hero-overlap-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-left: -1.1rem; } .hero-overlap-div { width: 1px; height: 40px; background: rgba(109,26,46,.15); } @media (min-width: 1024px) { .hero-overlap-card { display: flex; } } /* ---------- VARIANT B · Cinematic Full-bleed ---------- */ .hero-cine-photo { /* photo is retouched — keep the real blue sky + building visible */ background-position: center 55%; transform: scale(1.1); } /* light maroon multiply / duotone — lets the real photo read through */ .hero-cine-duotone { pointer-events: none; background: linear-gradient(160deg, rgba(109,26,46,.28) 0%, rgba(90,20,38,.22) 55%, rgba(60,12,26,.34) 100%); mix-blend-mode: multiply; } /* strong lower-left vignette so the white headline stays fully legible, fading toward the top-right to keep the sky & building clear */ .hero-cine-vignette { pointer-events: none; background: linear-gradient(35deg, rgba(42,10,18,.92) 0%, rgba(42,10,18,.55) 30%, rgba(42,10,18,.10) 58%, transparent 78%), radial-gradient(130% 120% at 12% 100%, rgba(20,4,10,.85) 0%, transparent 55%), linear-gradient(0deg, rgba(30,6,14,.55) 0%, transparent 35%); } /* CSS-only film grain (no external asset) */ .hero-cine-grain { pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .hero-cine-rule { width: 88px; height: 4px; margin-top: 1.5rem; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; } /* frosted glass stats strip overlapping the very bottom of the hero */ .hero-cine-stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(2, 1fr); background: rgba(30,8,16,.38); border-top: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px) saturate(135%); -webkit-backdrop-filter: blur(12px) saturate(135%); } @media (min-width: 768px) { .hero-cine-stats { grid-template-columns: repeat(4, 1fr); } } .hero-cine-stat { text-align: center; padding: 1rem .75rem; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); } @media (min-width: 768px) { .hero-cine-stat { border-bottom: 0; padding: 1.15rem 1rem; } } .hero-cine-stat:last-child { border-right: 0; } .hero-cine-stat-num { display: block; font-size: 1.5rem; font-weight: 600; color: var(--gold-soft); line-height: 1; } .hero-cine-stat-label { display: block; margin-top: .4rem; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); } /* gentle ken-burns drift on the cinematic photo */ @keyframes kenburns { 0% { transform: scale(1.1) translate(0, 0); } 100% { transform: scale(1.18) translate(-1.5%, -1.5%); } } .hero-cine-photo { animation: kenburns 26s ease-in-out infinite alternate; } /* ---------- Gold underline accent ---------- */ .accent-rule { width: 64px; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; } /* ---------- Cards ---------- */ .card { background: #fff; border: 1px solid rgba(109,26,46,.08); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(27,27,27,.04), 0 14px 40px -28px rgba(27,27,27,.35); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(27,27,27,.06), 0 30px 60px -30px rgba(109,26,46,.45); border-color: rgba(200,162,74,.55); } .flagship { position: relative; background: radial-gradient(120% 140% at 0% 0%, rgba(200,162,74,.10), transparent 45%), #fff; border-color: rgba(200,162,74,.45); } .flagship::before { content: "Flagship"; position: absolute; top: 1rem; right: 1rem; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--maroon); background: linear-gradient(90deg, var(--gold-soft), var(--gold)); padding: .25rem .6rem; border-radius: 999px; } /* Hindi label for the flagship badge (CSS pseudo-element can't carry markup) */ html.lang-hi .flagship::before { content: "प्रमुख"; font-family: 'Noto Sans Devanagari', sans-serif; } /* gold-tinted emphasis card WITHOUT the "Flagship" label (e.g. Principal) */ .highlight { background: radial-gradient(120% 140% at 0% 0%, rgba(200,162,74,.12), transparent 45%), #fff; border-color: rgba(200,162,74,.5); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .85rem 1.6rem; transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; cursor: pointer; text-decoration: none; } .btn:active { transform: translateY(1px) scale(.99); } .btn-gold { background: linear-gradient(180deg, var(--gold), #b88f38); color: #2a1208; box-shadow: 0 10px 24px -10px rgba(200,162,74,.7); } .btn-gold:hover { box-shadow: 0 16px 32px -10px rgba(200,162,74,.85); transform: translateY(-2px); } .btn-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); } .btn-outline:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); } .btn-maroon { background: var(--maroon); color: #fff; box-shadow: 0 10px 24px -12px rgba(109,26,46,.7); } .btn-maroon:hover { background: var(--maroon-2); transform: translateY(-2px); } /* ---------- Trust badges row ---------- */ .trust-pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.92); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); padding: .4rem .8rem; border-radius: 999px; backdrop-filter: blur(4px); } .trust-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); } /* ---------- Section label (kicker) ---------- */ .kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--maroon); } .kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); display: inline-block; } /* ---------- Stats strip ---------- */ .stat-num { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1; } /* ---------- Avatar (faculty initials) ---------- */ .avatar { width: 64px; height: 64px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, var(--maroon), var(--maroon-2)); box-shadow: inset 0 0 0 2px rgba(200,162,74,.5); flex-shrink: 0; } /* ---------- Gallery ---------- */ .gallery-item { position: relative; overflow: hidden; border-radius: 1rem; cursor: pointer; box-shadow: 0 14px 40px -28px rgba(27,27,27,.5); } .gallery-item img { transition: transform .6s cubic-bezier(.2,.7,.3,1); width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(60,12,26,.55)); opacity: 0; transition: opacity .3s ease; } .gallery-item:hover::after { opacity: 1; } .gallery-cap { position: absolute; left: 1rem; bottom: .9rem; right: 1rem; color: #fff; font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: all .3s ease; z-index: 2; } .gallery-item:hover .gallery-cap { opacity: 1; transform: translateY(0); } /* ---------- Lightbox ---------- */ #lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(20,4,10,.92); display: none; align-items: center; justify-content: center; padding: 1.5rem; } #lightbox.open { display: flex; } #lightbox img { max-width: 92vw; max-height: 86vh; border-radius: .75rem; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); } #lightbox .lb-close { position: absolute; top: 1.2rem; right: 1.4rem; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.1); } #lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2rem; cursor: pointer; user-select: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,.08); transition: background .2s ease; } #lightbox .lb-nav:hover { background: rgba(200,162,74,.4); } #lightbox .lb-prev { left: 1rem; } #lightbox .lb-next { right: 1rem; } /* ---------- Scroll reveal (IntersectionObserver) ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-cine-photo { animation: none; transform: scale(1.1); } html { scroll-behavior: auto; } } /* ---------- Forms ---------- */ .field { width: 100%; background: #fff; border: 1.5px solid rgba(109,26,46,.16); border-radius: .85rem; padding: .85rem 1rem; font-size: .95rem; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; } .field::placeholder { color: #a59d93; } .field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,162,74,.18); } .field:user-invalid { border-color: #b3431f; box-shadow: 0 0 0 4px rgba(179,67,31,.12); } .field-label { font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; display: block; } .form-error { font-size: .78rem; color: #b3431f; margin-top: .3rem; display: none; } /* ---------- Mobile sticky action bar ---------- */ #mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .6rem; padding: .7rem .9rem; background: rgba(250,247,242,.92); backdrop-filter: blur(8px); border-top: 1px solid rgba(109,26,46,.12); box-shadow: 0 -8px 24px -16px rgba(0,0,0,.4); } @media (min-width: 768px) { #mobile-bar { display: none; } } /* ---------- WhatsApp float (desktop) ---------- */ #wa-float { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 55; width: 58px; height: 58px; border-radius: 999px; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); transition: transform .2s ease; } #wa-float:hover { transform: scale(1.08) translateY(-2px); } @media (max-width: 767px) { #wa-float { display: none; } } /* ---------- Mobile menu ---------- */ #mobile-menu { transition: max-height .4s ease, opacity .3s ease; max-height: 0; opacity: 0; overflow: hidden; } #mobile-menu.open { max-height: 520px; opacity: 1; } /* ---------- Decorative section dividers ---------- */ .deco-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,162,74,.5), transparent); } /* ---------- Marquee-free trust logos ---------- */ .partner-logo { height: 56px; width: auto; object-fit: contain; filter: grayscale(15%); opacity: .9; transition: filter .3s ease, opacity .3s ease, transform .3s ease; } .partner-logo:hover { filter: none; opacity: 1; transform: scale(1.04); } /* subtle paper texture for cream sections */ .texture { background-image: radial-gradient(circle at 1px 1px, rgba(109,26,46,.04) 1px, transparent 0); background-size: 22px 22px; } /* ---------- Student / applicant portal links ---------- */ .portal-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; text-align: center; padding: 1.15rem .7rem; border-radius: 1rem; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); font-size: .82rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .portal-link svg { color: var(--gold-soft); transition: transform .25s ease; } .portal-link:hover { background: rgba(255,255,255,.13); border-color: rgba(200,162,74,.6); transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); } .portal-link:hover svg { transform: scale(1.08); }