/* ============================================================================= 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; /* Above the chat launcher, which is fixed at z-index 160. position:sticky makes this bar a stacking context, so nothing inside it — the dropdown panels included — can rise above 160 from within, whatever z-index it is given. At 100 the "Ask" button painted straight across the open account menu, hiding whichever item sat at that height. The number has to be raised here, on the bar, not on the panel. Still below the language chooser (400), which is a one-off sheet and belongs on top. */ z-index:180; 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; } /* Opens inward from the right-hand edge, since it is the last item on the bar. It used to ask for a 230px list on the grounds that the menu is short. It is not short any more — a scientist who supervises staff, posts to the home page and reviews the disease register sees sixteen rows — and 230px was too narrow for "Reporting Structure" and "Monthly Submission" to sit on one line at 14.5px. 250 is the width at which every label in this menu fits. */ /* Doubled up as .nav__panel.nav__panel--account, not because the panel needs two classes but because of source order: the .nav__panel block that sets left:0 is written further down this file, and at equal specificity the last rule wins. So this never actually anchored to the right — it only looked as though it did while the panel was too narrow to overhang anything. Now that it is as wide as its list, an unanchored panel runs off the side of the window, which is the other half of the text-going-outside. */ .nav__panel.nav__panel--account{left:auto; right:0} /* Only the minimum is set here. A max-width would also have to be undone for the stacked layout, and being two classes deep it outranks the single-class reset in the mobile block — which is how the drawer ended up 300px wide inside a 390px phone, with a strip of bare background down the side. The ceiling belongs to .nav__sub, where mobile already turns it off. */ .nav__panel--account .nav__sub{min-width:250px} .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} /* Wraps rather than runs off the side. "Scientist-B · Regional Eri Research Centre, Sille" is longer than any menu ought to be made for one line, and a unit name is exactly the thing a person needs to read in full to be sure which account they are signed into. overflow-wrap catches the case with no space to break at. */ .nav__acct-who span{ display:block; font-size:12.5px; color:var(--ink-3); overflow-wrap:anywhere; } .nav__acct-rule{border-top:1px solid var(--line); margin-top:6px; padding-top:6px} /* "Home page" — a heading over the two items that publish to the public site. It is a bare in an
  • , not a link, so none of the padding on .nav__sub a reached it: it printed hard against the left edge of the list while every row above it was indented 18px, which read as the text having escaped the panel. Given the same indent, and dressed as a heading so it is not mistaken for a menu item that has stopped working. */ .nav__acct-head{ padding:2px 18px 4px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wine); } /* 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} /* Two classes deep, to outrank the two-class minimum set for the desktop panel. Stacked, the list is a full-width band and needs no floor. */ .nav__panel--account .nav__sub{min-width:0} .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-head{color:#f0b9d3; padding-left:34px} .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; /* WITHOUT THIS THE PANEL IS NARROWER THAN ITS OWN CONTENTS. An absolutely positioned box with width:auto is shrink-to-fit, and the space it fits into is the containing block — here the
  • in the bar, which is about 114px wide. The list inside has min-width:230px and cannot shrink, so it simply overflowed: the white background and the border stopped at 114px while the words carried on past them, over the page. That is the "text going outside" — the panel was never as wide as the menu it was drawing. max-content sizes the box to the list instead, and the clamp keeps a wide split panel inside the window on a small screen. */ width:max-content; max-width:calc(100vw - 24px); 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:320px; /* NEVER TALLER THAN THE SPACE ACTUALLY LEFT BELOW THE BAR. 70vh was measured from the top of the window, but the panel does not start there — it starts below the government strip, the masthead and the nav, some 215px down. 70vh of a 720px window is 504px, and 215 + 504 is 719 with the border still to come, so the last row of a long menu sat just past the bottom edge with no way to reach it: the list had scrolled as far as it could and the remainder was off the screen, not inside the scroller. base.js now measures the real distance and writes it into --panel-max on open. The value here is what applies before that runs, and if scripting is off it is what applies for good — hence a fallback that subtracts a realistic header rather than a fraction of the window. */ max-height:var(--panel-max, min(calc(100vh - 240px), 560px)); overflow-y:auto; /* A visible scrollbar is the only thing telling somebody the list goes on. Thin, and the gutter is held open so that rows do not shift sideways when it appears. overscroll-behavior stops a flick at the end of the list from carrying on and scrolling the page underneath. */ scrollbar-width:thin; scrollbar-color:var(--line-wine) transparent; scrollbar-gutter:stable; overscroll-behavior:contain; } .nav__sub::-webkit-scrollbar{width:9px} .nav__sub::-webkit-scrollbar-thumb{ background:var(--line-wine); border-radius:9px; border:2px solid var(--surface); } .nav__sub::-webkit-scrollbar-thumb:hover{background:var(--wine)} .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:var(--panel-max, min(calc(100vh - 240px), 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