/* ========================================================================= Sanganaka — Sanskrit Computational Linguistics Lab, IIT Kharagpur Design system: manuscript ink on paper, with a computational accent. ========================================================================= */ /* Fonts are loaded via tags in each page's (see the comment there) rather than @import, so they don't block the CSS from parsing. */ /* ---------- Tokens ---------- */ :root { /* paper + ink, drawn from the lab's own mark: deep vermilion ink and turmeric gold on manuscript paper. */ --paper: #f7f3e9; --paper-alt: #efe7d4; --ink: #24201b; --ink-soft: #5b5347; --ink-faint: #948a78; --rule: #ddd1b4; --maroon: #7d2020; --maroon-deep: #591616; --gold: #a9782c; --gold-soft: #cfa354; --white: #fffdf8; --font-display: 'Fraunces', serif; --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-dev: 'Noto Sans Devanagari', sans-serif; --max-w: 1120px; --max-w-narrow: 760px; --radius: 3px; --shadow-card: 0 1px 2px rgba(36, 32, 27, 0.06), 0 6px 20px rgba(36, 32, 27, 0.05); --transition: 220ms cubic-bezier(.4,0,.2,1); } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); letter-spacing: -0.01em; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.3em; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; } .wrap-narrow { max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 1.5rem; } main { display: block; } .section { padding: 4.5rem 0; } .section--tight { padding: 3rem 0; } .section--alt { background: var(--paper-alt); } .eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); display: inline-flex; align-items: center; gap: .5em; margin-bottom: .9rem; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--maroon); display: inline-block; } /* devanagari accent mark, used sparingly as a signature element */ .dev-mark { font-family: var(--font-dev); color: var(--gold); } /* ---------- Divider glyph: the recurring signature element. A thin rule broken by a bindu, echoing the anusvara mark used throughout Sanskrit manuscripts to punctuate a unit of text. ---------- */ .divider { display: flex; align-items: center; gap: 1rem; margin: 0 auto; max-width: var(--max-w); padding: 0 1.5rem; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .divider__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } /* ---------- Buttons / links ---------- */ .btn { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; text-decoration: none; padding: .7em 1.3em; border: 1px solid var(--ink); border-radius: var(--radius); color: var(--ink); background: transparent; transition: background var(--transition), color var(--transition), border-color var(--transition); cursor: pointer; } .btn:hover { background: var(--ink); color: var(--paper); } .btn--primary { background: var(--maroon); border-color: var(--maroon); color: var(--white); } .btn--primary:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: var(--white); } .text-link { color: var(--maroon); text-decoration: underline; text-decoration-color: rgba(125,32,32,.35); text-underline-offset: 3px; transition: text-decoration-color var(--transition); } .text-link:hover { text-decoration-color: var(--maroon); } /* ========================================================================= Header / Navigation ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 200; background: rgba(247, 243, 233, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .site-header__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; height: 68px; display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); } .brand__mark { width: 32px; height: 32px; object-fit: contain; } .brand__text { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: .01em; } .brand__text sub { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); bottom: 0; } .nav-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-links a { text-decoration: none; color: var(--ink-soft); font-size: .93rem; font-weight: 500; padding: .3rem 0; border-bottom: 1px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--maroon); border-color: var(--maroon); } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; } .hamburger .bar { width: 100%; height: 2px; background: var(--ink); transition: transform var(--transition), opacity var(--transition); } .hamburger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 820px) { .hamburger { display: flex; } .nav-links { position: absolute; top: 68px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition); } .nav-links.is-open { max-height: 320px; } .nav-links a { display: block; padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule); border-left: 3px solid transparent; } .nav-links a:hover, .nav-links a[aria-current="page"] { border-left-color: var(--maroon); background: var(--paper-alt); } } /* ========================================================================= Footer ========================================================================= */ .site-footer { background: var(--ink); color: #dcd6c8; margin-top: 5rem; } .site-footer .wrap { padding-top: 3.5rem; padding-bottom: 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } .site-footer h3 { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1rem; } .site-footer p, .site-footer a { color: #cfc8b8; font-size: .92rem; } .site-footer a { text-decoration: none; } .site-footer a:hover { color: var(--white); text-decoration: underline; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: .5rem; } .footer-brand { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); margin-bottom: .6rem; } .footer-motto { font-family: var(--font-dev); color: var(--gold-soft); font-size: 1rem; margin-bottom: 1rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; text-align: center; font-size: .8rem; color: #a29b8b; } @media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================= Hero Slider (home page) ========================================================================= */ .hero { position: relative; background: var(--ink); overflow: hidden; } .carousel { position: relative; height: 62vh; min-height: 420px; max-height: 640px; } .carousel__track { position: relative; width: 100%; height: 100%; } .carousel__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 900ms ease; } .carousel__slide.is-active { opacity: 1; visibility: visible; z-index: 1; } .carousel__img-wrap { position: absolute; inset: 0; overflow: hidden; background: #14100c; } .carousel__img-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(1.015); transition: transform 7000ms ease-out; } .carousel__slide.is-active .carousel__img-wrap img { transform: scale(1); } .carousel__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(20,15,10,.82) 100%); } .carousel__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem clamp(1.5rem, 4vw, 3.5rem) 2rem; max-width: 760px; color: #f4efe2; } .carousel__caption .eyebrow { color: var(--gold-soft); margin-bottom: .5rem; } .carousel__caption .eyebrow::before { background: var(--gold-soft); } .carousel__caption p { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.4; margin: 0; } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(20,15,10,.35); backdrop-filter: blur(4px); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), border-color var(--transition); z-index: 5; } .carousel__nav:hover { background: rgba(20,15,10,.6); border-color: #fff; } .carousel__nav--prev { left: 1.25rem; } .carousel__nav--next { right: 1.25rem; } .carousel__progress { position: absolute; left: clamp(1.5rem, 4vw, 3.5rem); right: clamp(1.5rem, 4vw, 3.5rem); bottom: 0; display: flex; gap: 6px; z-index: 5; transform: translateY(-1.15rem); } .carousel__dot { flex: 1; height: 3px; background: rgba(255,255,255,.28); border: none; padding: 0; cursor: pointer; position: relative; overflow: hidden; } .carousel__dot span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--gold-soft); } .carousel__dot.is-active span { animation: fillDot var(--slide-duration, 6s) linear forwards; } .carousel__dot.is-done span { transform: scaleX(1); background: rgba(255,255,255,.6); } @keyframes fillDot { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (max-width: 720px) { .carousel { height: 78vh; min-height: 480px; } .carousel__nav { width: 36px; height: 36px; } } /* ========================================================================= Home page — about / highlights ========================================================================= */ .about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; } .about-grid h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .about-grid .lede { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--maroon); margin-bottom: 1.2rem; } .motto-block { border-left: 2px solid var(--gold); padding: 1.3rem 0 1.3rem 1.5rem; background: var(--paper-alt); } .motto-block .dev-mark { font-size: 1.5rem; display: block; margin-bottom: .3rem; } .motto-block p { margin: 0; color: var(--ink-soft); font-size: .95rem; } .tool-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } .tool-chip { font-family: var(--font-mono); font-size: .78rem; border: 1px solid var(--rule); padding: .4em .8em; border-radius: 999px; color: var(--ink-soft); background: var(--white); } .quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 0; } .quick-links a { background: var(--paper); padding: 2rem 1.5rem; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .6rem; transition: background var(--transition); } .quick-links a:hover { background: var(--paper-alt); } .quick-links .num { font-family: var(--font-mono); font-size: .78rem; color: var(--gold); } .quick-links .label { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .quick-links .desc { font-size: .86rem; color: var(--ink-soft); } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .quick-links { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .quick-links { grid-template-columns: 1fr; } } /* Recent news preview strip on home */ .news-preview { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .news-preview__item { background: var(--paper); padding: 1.1rem 1.4rem; display: grid; grid-template-columns: 110px 1fr; gap: 1.2rem; align-items: baseline; } .news-preview__date { font-family: var(--font-mono); font-size: .78rem; color: var(--maroon); } .news-preview__title { font-size: .95rem; } @media (max-width: 640px) { .news-preview__item { grid-template-columns: 1fr; gap: .3rem; } } /* ========================================================================= Page header (used on research / publications / news / team) ========================================================================= */ .page-header { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid var(--rule); } .page-header h1 { font-size: clamp(2.1rem, 4vw, 3rem); } .page-header p.lede { max-width: 640px; color: var(--ink-soft); font-size: 1.05rem; } /* ========================================================================= Research page ========================================================================= */ .research-body h2 { font-size: 1.5rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); } .research-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .research-body h3 { font-size: 1.15rem; margin-top: 1.6rem; color: var(--maroon); } .research-body h4 { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1.4rem; } .research-body p, .research-body li { color: var(--ink-soft); } .research-body a { color: var(--maroon); } .research-intro { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); max-width: 760px; } /* ========================================================================= News page ========================================================================= */ .news-list { max-width: var(--max-w-narrow); margin: 0 auto; } .news-card { display: grid; grid-template-columns: 130px 1fr; gap: 1.6rem; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); } .news-card__date { font-family: var(--font-mono); font-size: .82rem; color: var(--maroon); padding-top: .2rem; } .news-card__title { font-size: 1.05rem; margin-bottom: .5rem; } .news-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .3rem; } .tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); padding: .18em .55em; border-radius: 999px; } .news-card__content { color: var(--ink-soft); font-size: .93rem; margin-top: .5rem; } @media (max-width: 620px) { .news-card { grid-template-columns: 1fr; gap: .4rem; } } .news-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; max-width: var(--max-w-narrow); margin-left: auto; margin-right: auto; } .news-filter button { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em; padding: .45em .9em; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--ink-soft); cursor: pointer; transition: all var(--transition); } .news-filter button:hover { border-color: var(--maroon); color: var(--maroon); } .news-filter button.is-active { background: var(--maroon); border-color: var(--maroon); color: var(--white); } /* ========================================================================= Publications page ========================================================================= */ .pub-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 2.2rem; } .pub-search { font-family: var(--font-body); font-size: .92rem; padding: .65em 1em; border: 1px solid var(--rule); background: var(--white); border-radius: var(--radius); min-width: 260px; flex: 1; max-width: 420px; } .pub-search:focus { border-color: var(--maroon); outline: none; } .pub-sort { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); } .pub-sort select { font-family: var(--font-mono); font-size: .78rem; border: 1px solid var(--rule); background: var(--white); padding: .45em .6em; margin-left: .4em; } .pub-count { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.2rem; } .pub-list { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .pub-card { background: var(--paper); padding: 1.5rem 1.7rem; } .pub-card__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin-bottom: .45rem; } .pub-card__title a { color: var(--ink); text-decoration: none; } .pub-card__title a:hover { color: var(--maroon); text-decoration: underline; } .pub-card__meta { font-size: .87rem; color: var(--ink-soft); margin-bottom: .2rem; } .pub-card__meta strong { color: var(--ink); font-weight: 600; } .pub-card__venue { font-style: italic; } .pub-card__year-badge { font-family: var(--font-mono); font-size: .72rem; color: var(--maroon); border: 1px solid var(--maroon); padding: .1em .5em; border-radius: 999px; margin-right: .5rem; } .pub-abstract-btn { font-family: var(--font-mono); font-size: .76rem; color: var(--gold); background: none; border: none; padding: .5rem 0 0; cursor: pointer; text-decoration: underline; } .pub-abstract { display: none; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--rule); font-size: .9rem; color: var(--ink-soft); } .pub-abstract.is-open { display: block; } .empty-state { text-align: center; padding: 4rem 1rem; color: var(--ink-faint); font-family: var(--font-mono); font-size: .9rem; } /* ========================================================================= Team page ========================================================================= */ .team-section { margin-bottom: 3.5rem; } .team-section__label { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem; display: flex; align-items: center; gap: .8rem; } .team-section__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.6rem; } .team-card { text-decoration: none; color: var(--ink); display: block; background: var(--white); border: 1px solid var(--rule); padding: 1.4rem 1.2rem; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .team-card:hover { border-color: var(--maroon); transform: translateY(-3px); box-shadow: var(--shadow-card); } .team-card__img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 1px solid var(--rule); } .team-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: .2rem; } .team-card__role { font-size: .84rem; color: var(--ink-soft); } /* ========================================================================= Member page ========================================================================= */ .member-hero { display: grid; grid-template-columns: 180px 1fr; gap: 2.4rem; align-items: center; padding: 3rem 0; } .member-hero__img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); } .member-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: .3rem; } .member-hero__role { font-family: var(--font-mono); font-size: .82rem; color: var(--maroon); text-transform: uppercase; letter-spacing: .05em; } .member-hero__socials { display: flex; gap: .7rem; margin-top: 1.1rem; } .member-hero__socials a { width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); text-decoration: none; transition: all var(--transition); } .member-hero__socials a:hover { border-color: var(--maroon); color: var(--maroon); } .member-hero__socials svg { width: 17px; height: 17px; fill: currentColor; } .member-back { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: .4em; } .member-back:hover { color: var(--maroon); } .member-body { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding-bottom: 4rem; } .member-bio h2, .member-education h2 { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid var(--rule); } .member-bio p { color: var(--ink-soft); } .edu-item { padding: 1rem 0; border-bottom: 1px solid var(--rule); } .edu-item:last-child { border-bottom: none; } .edu-item strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ink); margin-bottom: .2rem;} .edu-item p, .edu-item li { font-size: .87rem; color: var(--ink-soft); margin: .2em 0; } .edu-item ul { padding-left: 1.1em; margin: .3em 0; } @media (max-width: 800px) { .member-hero { grid-template-columns: 1fr; text-align: center; } .member-hero__img { margin: 0 auto; } .member-hero__socials { justify-content: center; } .member-body { grid-template-columns: 1fr; } } /* ========================================================================= Misc ========================================================================= */ .skeleton { color: var(--ink-faint); font-family: var(--font-mono); font-size: .85rem; padding: 3rem 0; text-align: center; } .not-found { padding: 6rem 0; text-align: center; } .not-found h1 { font-size: 4rem; }