/* =========================================================== Sri Mahesh Prasad Maurya Girls Inter College — Demo Design system: Emerald + Brass + Ivory · Arch/curve motif Custom styles layered on Tailwind CDN. Deliberately DIVERGENT from the sibling SMPDC site (maroon/gold, editorial split). =========================================================== */ :root { --emerald: #0f4d44; --emerald-deep: #0a3a33; --emerald-2: #145b50; --teal-mist: #e6efec; --brass: #caa64a; --brass-soft: #e0c789; --brass-deep: #a8842f; --ivory: #fbf8f1; --ivory-2: #f4eedf; --blush: #e3b7a6; --blush-soft: #f1d8cd; --ink: #20211e; --muted: #5e645e; --line: rgba(15, 77, 68, 0.12); } html { scroll-behavior: smooth; scroll-padding-top: 92px; } body { font-family: 'Sora', system-ui, sans-serif; color: var(--ink); background-color: var(--ivory); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .font-display { font-family: 'Cormorant Garamond', 'Noto Serif Devanagari', Georgia, serif; font-weight: 600; letter-spacing: -0.005em; } /* ---------- Bilingual visibility switch ---------- carries class lang-hi or lang-en; JS toggles it. */ html.lang-hi [data-lang="en"] { display: none; } html.lang-en [data-lang="hi"] { display: none; } /* Hindi text gets the Devanagari serif for a refined feel */ html.lang-hi body, [data-lang="hi"] { font-family: 'Noto Sans Devanagari', 'Sora', system-ui, sans-serif; } html.lang-hi .font-display, .font-display [data-lang="hi"] { font-family: 'Noto Serif Devanagari', 'Cormorant Garamond', serif; font-weight: 600; } /* Hindi runs a touch smaller/tighter line so it visually balances English */ html.lang-hi { --dev-lh: 1.55; } /* ---------- Brand utilities ---------- */ .text-emerald { color: var(--emerald); } .text-emerald-deep { color: var(--emerald-deep); } .text-brass { color: var(--brass); } .text-brass-deep { color: var(--brass-deep); } .text-ivory { color: var(--ivory); } .text-muted { color: var(--muted); } .bg-emerald { background-color: var(--emerald); } .bg-emerald-deep { background-color: var(--emerald-deep); } .bg-brass { background-color: var(--brass); } .bg-ivory { background-color: var(--ivory); } .bg-ivory-2 { background-color: var(--ivory-2); } .bg-teal-mist { background-color: var(--teal-mist); } .bg-blush-soft { background-color: var(--blush-soft); } .border-brass { border-color: var(--brass); } .border-emerald { border-color: var(--emerald); } /* gentle gold rule used as a section divider */ .rule-brass { height: 2px; width: 64px; background: linear-gradient(90deg, var(--brass), transparent); border-radius: 2px; } .rule-brass.center { margin-inline: auto; background: linear-gradient(90deg, transparent, var(--brass), transparent); } /* =========================================================== Buttons — PILL shape (distinct from SMPDC's squared buttons) =========================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 600; font-size: .95rem; line-height: 1; padding: .95rem 1.7rem; border-radius: 999px; /* full pill */ transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease; cursor: pointer; white-space: nowrap; } .btn-brass { background: linear-gradient(180deg, var(--brass-soft), var(--brass)); color: #3a2c08; box-shadow: 0 12px 26px -12px rgba(168,132,47,.7), inset 0 1px 0 rgba(255,255,255,.45); } .btn-brass:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(168,132,47,.85); } .btn-emerald { background: var(--emerald); color: var(--ivory); box-shadow: 0 12px 26px -14px rgba(10,58,51,.75); } .btn-emerald:hover { transform: translateY(-2px); background: var(--emerald-2); } .btn-ghost { background: transparent; color: var(--emerald); border: 1.5px solid rgba(15,77,68,.35); } .btn-ghost:hover { border-color: var(--emerald); background: rgba(15,77,68,.05); } .btn-outline-ivory { background: rgba(255,255,255,.08); color: var(--ivory); border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(4px); } .btn-outline-ivory:hover { background: rgba(255,255,255,.16); } /* =========================================================== Header =========================================================== */ #site-header { transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } #site-header.scrolled { background-color: rgba(251, 248, 241, 0.92); backdrop-filter: saturate(140%) blur(10px); box-shadow: 0 8px 30px -18px rgba(10,58,51,.4); border-bottom-color: var(--line); } /* before scroll the header sits on the emerald hero, so links are ivory; after scroll background turns ivory, so links flip to emerald (via JS class) */ #site-header .nav-link { color: rgba(251,248,241,.92); } #site-header.scrolled .nav-link { color: var(--emerald); } #site-header.scrolled .brand-name { color: var(--emerald-deep); } #site-header.scrolled .brand-sub { color: var(--brass-deep); } #site-header.scrolled #lang-toggle { color: var(--emerald); border-color: rgba(15,77,68,.3); } #site-header.scrolled .burger-btn { color: var(--emerald); border-color: rgba(15,77,68,.25); } .nav-link { position: relative; transition: color .25s ease; } .nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--brass); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .nav-link:hover::after { transform: scaleX(1); } /* language toggle pill */ #lang-toggle { font-family: 'Sora', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: rgba(251,248,241,.95); border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: .4rem .8rem; transition: all .25s ease; } #lang-toggle .on { color: var(--brass-soft); } #site-header.scrolled #lang-toggle .on { color: var(--brass-deep); } #lang-toggle:hover { background: rgba(255,255,255,.12); } #site-header.scrolled #lang-toggle:hover { background: rgba(15,77,68,.06); } /* =========================================================== ARCH / CURVE MOTIF — the signature shape of this site. Used for hero image, gallery tiles, stream cards. =========================================================== */ .arch { border-radius: 50% 50% 8% 8% / 38% 38% 6% 6%; /* tall arched top, square base */ overflow: hidden; } .arch-sm { border-radius: 46% 46% 10% 10% / 30% 30% 8% 8%; overflow: hidden; } .arch-frame { position: relative; border: 1.5px solid rgba(202,166,74,.55); box-shadow: 0 40px 80px -40px rgba(10,58,51,.55); } .arch-frame::after { /* inner brass keyline */ content: ""; position: absolute; inset: 8px; border: 1px solid rgba(202,166,74,.4); border-radius: inherit; pointer-events: none; } /* =========================================================== HERO — centered, arched portrait, emerald field =========================================================== */ .hero { position: relative; background: radial-gradient(140% 100% at 50% -10%, rgba(202,166,74,.16), transparent 55%), linear-gradient(165deg, var(--emerald-deep) 0%, var(--emerald) 55%, #0d473e 100%); color: var(--ivory); overflow: hidden; } /* faint decorative arch lines in the backdrop */ .hero-arches { position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: radial-gradient(60% 80% at 18% 120%, transparent 39%, rgba(255,255,255,.5) 39.5%, transparent 41%), radial-gradient(60% 80% at 84% 120%, transparent 39%, rgba(255,255,255,.5) 39.5%, transparent 41%); } .hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 24px 24px; } .hero-photo { background-image: url('../assets/campus-hero.jpg'); background-size: cover; background-position: center; filter: contrast(1.03) saturate(1.05); } /* arched portrait sits centered; brass keyline + soft pedestal shadow */ .hero-portrait { position: relative; } .hero-portrait::before { /* glow halo behind the arch */ content: ""; position: absolute; inset: -14% -10% -6% -10%; background: radial-gradient(60% 60% at 50% 40%, rgba(202,166,74,.35), transparent 70%); filter: blur(8px); z-index: 0; } .hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); font-size: .8rem; letter-spacing: .04em; } .hero-rating-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); } .stars { color: var(--brass-soft); letter-spacing: 1px; } /* ---------- curved section divider (ivory wave under hero) ---------- */ .curve-divider { line-height: 0; } .curve-divider svg { display: block; width: 100%; height: 64px; } /* =========================================================== Stat ribbon =========================================================== */ .stat-ribbon { background: linear-gradient(120deg, var(--emerald) 0%, var(--emerald-2) 100%); color: var(--ivory); } .stat-num { font-family: 'Cormorant Garamond', serif; font-weight: 700; line-height: 1; color: var(--brass-soft); } /* =========================================================== Cards — overlapping & arched stream cards =========================================================== */ .card { background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -40px rgba(10,58,51,.35); transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(10,58,51,.5); } .stream-card { position: relative; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; } .stream-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(10,58,51,.5); } .stream-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, var(--teal-mist), #fff); border: 1px solid var(--line); color: var(--emerald); } .stream-card .tag { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; } /* value tiles */ .value-tile { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .value-tile:hover { transform: translateY(-4px); border-color: rgba(202,166,74,.5); box-shadow: 0 30px 60px -40px rgba(10,58,51,.4); } .value-ico { width: 52px; height: 52px; border-radius: 50% 50% 14% 14% / 40% 40% 12% 12%; display: grid; place-items: center; margin-bottom: 1rem; background: linear-gradient(160deg, var(--emerald), var(--emerald-2)); color: var(--brass-soft); } /* =========================================================== Timeline (vertical, brass spine) — "our journey" =========================================================== */ .timeline { position: relative; } .timeline::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--brass), rgba(202,166,74,.2)); } @media (min-width: 768px) { .timeline::before { left: 50%; transform: translateX(-50%); } } .tl-item { position: relative; padding-left: 44px; } .tl-dot { position: absolute; left: 6px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); border: 3px solid var(--brass); box-shadow: 0 0 0 4px rgba(202,166,74,.15); } @media (min-width: 768px) { .tl-item { padding-left: 0; width: 50%; } .tl-left { padding-right: 48px; text-align: right; } .tl-right { padding-left: 48px; margin-left: 50%; } .tl-left .tl-dot { left: auto; right: -9px; } .tl-right .tl-dot { left: -9px; } } /* =========================================================== Masonry gallery =========================================================== */ .masonry { column-count: 1; column-gap: 1rem; } @media (min-width: 640px) { .masonry { column-count: 2; } } @media (min-width: 1024px) { .masonry { column-count: 3; } } .masonry figure { break-inside: avoid; margin: 0 0 1rem; position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(202,166,74,.3); box-shadow: 0 24px 50px -36px rgba(10,58,51,.45); } .masonry img { width: 100%; display: block; transition: transform .5s ease; filter: saturate(1.03); } .masonry figure:hover img { transform: scale(1.05); } .masonry figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem .8rem; background: linear-gradient(transparent, rgba(10,58,51,.85)); color: var(--ivory); font-size: .85rem; font-weight: 500; } /* =========================================================== Admissions — steps + form =========================================================== */ .step-num { width: 44px; height: 44px; border-radius: 50% 50% 12% 12% / 40% 40% 10% 10%; display: grid; place-items: center; flex: none; background: linear-gradient(160deg, var(--brass-soft), var(--brass)); color: #3a2c08; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 1.3rem; } .enquiry-form { background: #fff; border: 1px solid var(--line); border-radius: 26px; } .field-label { font-size: .82rem; font-weight: 600; color: var(--emerald-deep); } .field { width: 100%; margin-top: .35rem; padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--ivory); font-family: 'Sora', sans-serif; font-size: .95rem; color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; } .field:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(202,166,74,.18); background: #fff; } .field-invalid { border-color: #c0563d !important; box-shadow: 0 0 0 3px rgba(192,86,61,.15) !important; background: #fff; } /* =========================================================== Contact =========================================================== */ .contact-card { background:#fff; border:1px solid var(--line); border-radius: 20px; } .contact-ico { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--teal-mist); color: var(--emerald); } .map-frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(10,58,51,.4); } .wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); transition: transform .25s ease; } .wa-fab:hover { transform: scale(1.08); } /* =========================================================== Footer + demo ribbon =========================================================== */ .demo-ribbon { background: linear-gradient(120deg, var(--brass) 0%, var(--brass-deep) 100%); color: #2a2206; } footer { background: var(--emerald-deep); color: rgba(251,248,241,.82); } footer a:hover { color: var(--brass-soft); } .footer-credit { color: var(--brass-soft); font-weight: 600; } /* footer social icons */ .social-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: rgba(251,248,241,.85); background: rgba(255,255,255,.07); border: 1px solid rgba(202,166,74,.3); transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease; } .social-ico:hover { transform: translateY(-2px); color: var(--emerald-deep); background: var(--brass-soft); border-color: var(--brass-soft); } /* =========================================================== Scroll reveal =========================================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } .reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; } /* ---------- mobile menu ---------- */ #mobile-menu { max-height: 0; overflow: hidden; transition: max-height .4s ease; } #mobile-menu.open { max-height: 460px; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }