/* ============================================================================= CMER&TI — base stylesheet (shared across every page) ============================================================================= No framework, no build step. Matches texmin.gov.in as sampled directly from a screenshot: a light grey page background, white content cards, and a single rich wine/plum accent used solidly for active tabs, panels, buttons and links. No navy, no blue, no gold — this replaces both earlier attempts. Colours are CSS variables, so the whole site changes from the block below. Page-specific rules do NOT belong here — see css/pages/.css, linked automatically by includes/header.php for the page that needs them. ========================================================================== */ :root{ /* palette — sampled from texmin.gov.in */ --wine: #7a1442; --wine-dark: #59102f; --wine-tint: #f7e9f0; --ink: #262626; --ink-2: #4a4a4a; --ink-3: #6e6e6e; --bg: #ebebeb; --surface: #ffffff; --surface-2: #f5f5f5; --line: #e2e2e2; --line-wine: #e3c3d3; /* spacing on an 8-point grid */ --gap: 16px; --gap-2: 24px; --gap-3: 40px; --radius: 8px; --shadow: 0 2px 10px rgba(0,0,0,.08); --wrap: 1180px; /* ---------------------------------------------- how a paragraph is set Three numbers that decide the shape of every block of text on the site: how wide a line may run, how far apart the lines sit, and how large the letters are. They are variables rather than fixed numbers in thirty places because they have to change with the language — see the block immediately below. */ --measure: 100%; /* fill the column the page gives it */ --prose-lh: 1.75; --prose-size: 16.5px; } /* -------------------------------------------------- text in an Indian script Devanagari and Assamese are not Latin with different letters. They hang marks above the line and below it, they join, and their letterforms are wider — so a line-height that looks airy in English crowds them, and can clip the matra off the top of a word altogether. They also need a font that actually contains the glyphs: Georgia does not, and a browser left to improvise substitutes something that fits badly. So the page's own language, which includes/header.php has already written on to , sets its own measure, leading and face. Nothing else in the stylesheet has to know which language it is being read in. */ html[lang="hi"], html[lang="as"]{ --prose-lh: 2; --prose-size: 17.5px; } html[lang="hi"] body, html[lang="as"] body{ font-family:"Noto Sans","Nirmala UI","Noto Sans Devanagari","Noto Sans Bengali", "Kokila","Shonar Bangla","Segoe UI",system-ui,sans-serif; } html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4, html[lang="as"] h1, html[lang="as"] h2, html[lang="as"] h3, html[lang="as"] h4, html[lang="hi"] .dsection__h, html[lang="as"] .dsection__h{ font-family:"Noto Serif Devanagari","Noto Serif Bengali","Nirmala UI",Georgia,serif; line-height:1.45; } /* The tighter leading used in tables, notes and figure captions is set for Latin and is not enough for a script with marks above and below. Raised here rather than in each rule, so there is one place to adjust it. */ html[lang="hi"] .dtable tbody td, html[lang="as"] .dtable tbody td, html[lang="hi"] .dtable tbody th, html[lang="as"] .dtable tbody th, html[lang="hi"] .dtable thead th, html[lang="as"] .dtable thead th, html[lang="hi"] .prose td, html[lang="as"] .prose td, html[lang="hi"] .prose th, html[lang="as"] .prose th, html[lang="hi"] .dlist li, html[lang="as"] .dlist li, html[lang="hi"] .dnote, html[lang="as"] .dnote, html[lang="hi"] .dsection__note, html[lang="as"] .dsection__note{ line-height:1.85; } /* A long Devanagari or Assamese word must be allowed to move to the next line whole. Never broken mid-word: a matra separated from its consonant is not the same word, and on a page of technical instructions that matters. */ html[lang="hi"] .prose, html[lang="as"] .prose, html[lang="hi"] .datapage, html[lang="as"] .datapage{ overflow-wrap:break-word; word-break:normal; hyphens:none; } /* --------------------------------------------------------------- reset */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif; } img{max-width:100%; height:auto} h1,h2,h3,h4{line-height:1.3; margin:0 0 .5em} p{margin:0 0 1.1em} a{color:var(--wine)} .inner{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gap)} /* Focus must always be visible. Never remove this without replacing it. */ a:focus-visible,button:focus-visible,input:focus-visible{ outline:3px solid var(--wine); outline-offset:2px; } .skip{ position:absolute; left:-9999px; top:0; z-index:999; background:var(--wine-dark); color:#fff; padding:10px 18px; } .skip:focus{left:0} /* --------------------------------------------------------------- government strip */ .govbar{background:var(--wine-dark); color:#f3dbe6; font-size:12.5px} .govbar .inner{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; min-height:36px; padding-block:6px; } .govbar strong{letter-spacing:.6px} .govbar span{opacity:.85} /* --------------------------------------------------------------- masthead */ .masthead{background:var(--surface); border-bottom:3px solid var(--wine)} .masthead .inner{padding-block:18px} .brand{display:block; text-decoration:none; color:inherit} .brand__hi{ display:block; font-size:15px; font-weight:600; color:var(--ink-2); margin-bottom:2px; } .brand__en{ display:block; font:700 clamp(19px,2.4vw,27px)/1.25 Georgia,"Times New Roman",serif; color:var(--wine-dark); } .brand__sub{display:block; font-size:13px; color:var(--ink-3); margin-top:3px} /* --------------------------------------------------------------- navigation Sticky: the government strip and masthead scroll away, the nav bar itself pins to the top of the viewport, same behaviour as texmin.gov.in. The ".is-stuck" class (toggled from js/base.js once the page has actually scrolled past the header) adds a shadow so the pinned bar reads as "floating" rather than just clipped. */ .nav{ background:var(--wine); position:sticky; top:0; z-index:100; transition:box-shadow .2s ease; } .nav.is-stuck{box-shadow:0 4px 14px rgba(0,0,0,.18)} .nav .inner{padding-inline:0} .nav__burger{ display:none; width:100%; min-height:48px; padding-inline:var(--gap); background:none; border:0; border-bottom:1px solid rgba(255,255,255,.18); color:#f3dbe6; font:600 15px/1 inherit; text-align:left; cursor:pointer; } .nav__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; max-width:var(--wrap); margin-inline:auto; } .nav__list > li{position:relative} .nav__list > li > a{ display:block; padding:14px 11px; color:#fff; text-decoration:none; font-weight:600; font-size:14.5px; } .nav__list > li > a:hover, .nav__list > li.is-current > a{background:rgba(255,255,255,.14); color:#fff} .caret{font-size:10px; opacity:.75} /* --------------------------------------------------------- account / login The item at the right-hand end of the bar: "Login" to a visitor, the staff member's own name once they have signed in. It lives here rather than in css/sections/diary.css because header.php draws it on every page of the site, and a component drawn everywhere has to be styled everywhere. Its metrics deliberately copy .nav__list > li > a above — same padding, same font size, same line — so it sits on the bar at exactly the height of Home, About and Research rather than setting its own. */ .nav__item--account{margin-left:auto} .nav__list > li.nav__item--account > a{ /* The selector is written out in full to outrank ".nav__list > li > a", which sets display:block a few rules above. At equal specificity source order would settle it, but that rule is more specific — and an icon and a label left as block-level children stack one above the other, which is exactly how this item came to be three times the height of the bar. */ display:flex; align-items:center; gap:6px; padding:14px 12px; line-height:1; font-size:14px; white-space:nowrap; } /* Signed out it is one word and an arrow, and there is no dropdown, so it does not need the caret's width either. Kept deliberately narrow: this is the one item on the bar that is not the institute's own content. */ .nav__acct-in{gap:6px} /* The icon is small and fixed. Without an explicit size an inline SVG with no width/height attributes takes its intrinsic size, which is not small. */ .nav__acct-icon{ width:16px; height:16px; flex:0 0 16px; display:block; } .nav__acct-name{ /* Capped so that a long first name cannot push the bar onto a second row. Nine characters covers nearly every name on the roll; the few longer ones are ellipsised, and the full name is in the panel underneath anyway. */ max-width:9ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The panel is a short list, so it does not need the 262px minimum the section dropdowns use, and it opens inward from the right-hand edge. */ .nav__panel--account{left:auto; right:0} .nav__panel--account .nav__sub{min-width:230px} .nav__acct-who{ padding:10px 18px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; line-height:1.35; } .nav__acct-who strong{display:block; color:var(--wine-dark); font-size:14.5px} .nav__acct-who span{display:block; font-size:12.5px; color:var(--ink-3)} .nav__acct-rule{border-top:1px solid var(--line); margin-top:6px; padding-top:6px} /* Sign out is a button in a form, because a plain GET link would let any other site sign our users out with an . It is dressed to match the links either side of it so that nobody has to know that. */ .nav__acct-out button{ display:block; width:100%; text-align:left; border:0; background:none; padding:9px 18px; font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; } .nav__acct-out button:hover{background:var(--wine-tint); color:var(--wine)} /* The unread count, on the one control that appears on every page. */ .nav__acct-badge{ display:inline-block; min-width:17px; padding:1px 5px; border-radius:999px; background:#fff; color:var(--wine-dark); font-size:11px; font-weight:700; line-height:1.45; text-align:center; } @media (max-width:900px){ .nav__item--account{margin-left:0; border-top:1px solid rgba(255,255,255,.18)} .nav__list > li.nav__item--account > a{padding:13px var(--gap); min-height:48px} .nav__panel--account{right:auto} .nav__acct-name{max-width:none} .nav__acct-who{border-bottom-color:rgba(255,255,255,.2)} .nav__acct-who strong{color:#fff} .nav__acct-who span{color:#f0b9d3} .nav__acct-rule{border-top-color:rgba(255,255,255,.2)} .nav__acct-out button{color:#fff; padding-left:34px; min-height:46px} .nav__acct-out button:hover{background:rgba(255,255,255,.12); color:#fff} } /* --------------------------------------------------------------- dropdown One panel per section. Where a section has pages that carry children, the panel splits: the section's pages down the left, and a detail pane on the right that fills in as the pointer moves down the list. The children never leave the panel. Nothing flies out sideways, so nothing can be pushed off the edge of the window or below the fold, and every item stays inside one rectangle the pointer can move around freely. */ .nav__panel{ position:absolute; top:100%; left:0; background:var(--surface); border:1px solid var(--line-wine); border-top:3px solid var(--wine); box-shadow:0 14px 34px rgba(28,10,20,.20); border-radius:0 0 8px 8px; z-index:20; display:flex; align-items:stretch; /* Clipped rather than display:none so it can animate. */ visibility:hidden; opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .nav__item:hover > .nav__panel, .nav__item.is-open > .nav__panel, .nav__item:focus-within > .nav__panel{ visibility:visible; opacity:1; transform:translateY(0); transition:opacity .18s ease, transform .18s ease, visibility 0s; } /* Near the right edge of the window the panel anchors to its right instead, so a long section like Contact opens inward. Set by JS on open. */ .nav__item.is-flipped > .nav__panel{left:auto; right:0} .nav__sub{ list-style:none; margin:0; padding:8px 0; min-width:262px; max-width:300px; /* Never taller than the space below the bar; scrolls internally if it is. */ max-height:min(70vh, 560px); overflow-y:auto; } .nav__panel--split .nav__sub{flex:0 0 auto} .nav__sub a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 18px; color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.35; position:relative; transition:background .15s ease, color .15s ease, padding-left .15s ease; } .nav__sub a::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; background:var(--wine); border-radius:0 3px 3px 0; transform:scaleY(0); transform-origin:center; transition:transform .18s cubic-bezier(.2,.8,.2,1); } .nav__sub a:hover, .nav__sub li.is-active > a{ background:var(--wine-tint); color:var(--wine); padding-left:22px; } .nav__sub a:hover::before, .nav__sub li.is-active > a::before{transform:scaleY(1)} .nav__sub a[aria-current="page"]{color:var(--wine); font-weight:700} .nav__sub a[aria-current="page"]::before{transform:scaleY(1)} .caret--right{font-size:9px; opacity:.55; flex:0 0 auto; transition:transform .18s ease, opacity .18s ease} .nav__sub a:hover .caret--right, .nav__sub li.is-active > a .caret--right{transform:translateX(3px); opacity:1} /* ---- detail pane (third level, inside the same panel) ---- Closed to nothing until it has something to say. Most rows in a section have no children, and a permanently reserved empty column would make every dropdown look half-broken. It opens only when the pointer reaches a row that actually branches, and closes again on any row that doesn't. */ .nav__detail{ flex:0 0 auto; width:0; opacity:0; overflow:hidden; padding:0; border-left:0 solid var(--line); background:linear-gradient(180deg, var(--surface-2), var(--surface)); max-height:min(70vh, 560px); transition:width .26s cubic-bezier(.2,.8,.2,1), opacity .18s ease, padding .26s cubic-bezier(.2,.8,.2,1); } .nav__panel.has-branch .nav__detail{ width:300px; opacity:1; padding:14px 6px 14px 0; border-left-width:1px; overflow-y:auto; } .nav__branch-title{ margin:0 18px 8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--wine); } .nav__branch ul{list-style:none; margin:0; padding:0} .nav__branch a{ display:block; padding:7px 18px; color:var(--ink-2); text-decoration:none; font-size:13.8px; line-height:1.4; border-radius:4px; transition:background .14s ease, color .14s ease, transform .14s ease; } .nav__branch a:hover{background:var(--wine-tint); color:var(--wine); transform:translateX(3px)} .nav__branch a[aria-current="page"]{color:var(--wine); font-weight:700} /* Children stagger in, so the eye follows the list rather than being hit with the whole block at once. */ .nav__branch[hidden]{display:none} .nav__branch li{ opacity:0; transform:translateX(-6px); animation:navBranchIn .26s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes navBranchIn{to{opacity:1; transform:translateX(0)}} .nav__branch li:nth-child(1){animation-delay:.02s} .nav__branch li:nth-child(2){animation-delay:.045s} .nav__branch li:nth-child(3){animation-delay:.07s} .nav__branch li:nth-child(4){animation-delay:.095s} .nav__branch li:nth-child(5){animation-delay:.12s} .nav__branch li:nth-child(6){animation-delay:.145s} .nav__branch li:nth-child(n+7){animation-delay:.17s} @media (prefers-reduced-motion:reduce){ .nav__panel,.nav__sub a,.nav__branch a,.caret--right{transition:none} .nav__branch li{animation:none; opacity:1; transform:none} } /* --------------------------------------------------------------- page heading */ .pagebar{background:var(--surface-2); border-bottom:1px solid var(--line)} .pagebar .inner{ padding-block:20px; display:flex; gap:var(--gap); align-items:baseline; justify-content:space-between; flex-wrap:wrap; } .pagebar h1{ margin:0; font:700 clamp(21px,2.6vw,30px)/1.25 Georgia,"Times New Roman",serif; color:var(--wine-dark); } .crumbs{ list-style:none; display:flex; gap:8px; margin:0; padding:0; font-size:13px; color:var(--ink-3); flex-wrap:wrap; } .crumbs li + li::before{content:"/"; margin-right:8px; opacity:.5} .crumbs a{color:var(--ink-3)} /* --------------------------------------------------------------- content */ .content{padding-block:var(--gap-3)} /* Twenty years of content was pasted in by many different hands, so the markup is inconsistent — inline widths, tables built for a 900px screen, white text left over from a dark banner. These rules make all of it behave without anyone having to go back and clean it up by hand. */ /* The paragraph fills the column it is given, up to --measure, and never overflows it. The column itself is already held to --wrap by .inner, so "as wide as the page" means as wide as the rest of the site — the tables, the cards and the navigation all end on the same line down the right. */ .prose{max-width:min(var(--measure), 100%)} .prose p,.prose li,.prose dd,.prose blockquote{ font-size:var(--prose-size); line-height:var(--prose-lh); } .prose > :first-child{margin-top:0} .prose h2{font:700 clamp(19px,2vw,24px)/1.3 Georgia,serif; margin:1.7em 0 .5em; color:var(--wine-dark)} .prose h3{font:700 clamp(17px,1.7vw,20px)/1.3 Georgia,serif; margin:1.5em 0 .4em; color:var(--wine-dark)} .prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.4em} .prose li{margin:.3em 0} .prose a{text-decoration:underline; text-underline-offset:2px} .prose img{border-radius:var(--radius); margin:.6em 0} .prose blockquote{ margin:1.4em 0; padding:.5em 0 .5em 18px; border-left:3px solid var(--wine); color:var(--ink-2); font-style:italic; } /* Tables scroll sideways on a phone rather than breaking the layout. */ .prose table{ width:100%; max-width:100%; border-collapse:collapse; margin:1.4em 0; font-size:14px; display:block; overflow-x:auto; } @media (min-width:768px){ .prose table{display:table} } .prose th,.prose td{border:1px solid var(--line); padding:8px 11px; text-align:left; vertical-align:top} .prose th{background:var(--surface-2); font-weight:700; color:var(--wine-dark)} .prose tr:nth-child(even) td{background:#fafafa} /* Media dropped into a page must never be wider than the column it sits in. The