/* ============================================================================= Andhra Pradesh State Waqf Board — public landing page. Recreated from design_handoff_apwaqf_landing per its README: the handoff is a design reference driven by an internal component runtime (support.js) which it explicitly says not to carry into production. This is plain CSS with real media queries — the prototype resolved its breakpoints in JavaScript against window.innerWidth, which cannot respond to a resize before paint and leaves the page wrong until a resize event fires. Tokens follow the handoff table exactly. Radius is 0 everywhere; the only shadow in the design is on the language dropdown. ========================================================================== */ :root { --green: #0e4a2f; --green-hover: #0a3a24; --green-deep: #093921; --green-rule: #23593d; --green-rule-soft: #1c5238; --green-rule-top: #3d6b53; --gold: #b08828; --gold-border: #8a6a12; --gold-hover: #9a7620; --gold-light: #e2c169; --gold-pale: #f0d493; --bg: #faf9f4; --tint: #f6f4ec; --tint-2: #f1efe4; --tint-3: #f4f2ea; --line: #cdc7b6; --line-2: #ded9c9; --line-3: #e6e1d2; --line-4: #c4bfae; --ink: #1e1c17; --muted: #55503f; --muted-2: #6b6555; --muted-3: #7a7566; --red: #9b2226; --red-bg: #fdf3f2; --red-border: #c48b8b; --amber-ink: #6a5210; --amber-bg: #fdf4dd; --amber-border: #d8bb6c; --ok-ink: #14523a; --ok-bg: #edf7f0; --ok-border: #2f7d52; --wrap: 1200px; } /* ── Telugu: Gurajada ────────────────────────────────────────────────────── Self-hosted, from the file the Board supplied. Not loaded from Google Fonts alongside the Noto faces, for two reasons: the Board gave us this exact file and it should be the one that renders, and a government site that can serve its own primary typeface has one less third party in the path of a page it is legally responsible for. TWO FORMATS, IN THIS ORDER. woff2 is what every browser in use will take — 51 KB, from the supplied 277 KB original. The .otf is the original, kept as the fallback for anything that cannot read woff2; the browser downloads only the first entry it understands, never both. The conversion is reproducible: `npx wawoff2` — see landing/README.md. UNICODE-RANGE IS LOAD-BEARING. Scoped to the Telugu block, so the font is fetched only by a page that actually paints Telugu glyphs. Without it every reader of the English site downloads a Telugu face they will never see, and with it the Telugu masthead line on the English page still renders correctly — the browser fetches on demand when a matching character appears. The range is Telugu (U+0C00–U+0C7F) and nothing else. Latin, digits and punctuation on a Telugu page therefore fall through to Noto Sans, which is deliberate: a Telugu display face has no business setting "DCB App Login" or a telephone number, and Gurajada's Latin is not its strength. */ @font-face { font-family: 'Gurajada'; src: url('fonts/gurajada-regular.woff2') format('woff2'), url('fonts/gurajada-regular.otf') format('opentype'); font-weight: 400; font-style: normal; /* Show the fallback immediately and repaint when Gurajada arrives, rather than holding the text invisible for up to three seconds. On a government site read over slow connections, text that is late is better than text that is absent. */ font-display: swap; unicode-range: U+0C00-0C7F; } /* ── The three scripts ───────────────────────────────────────────────────── Set on , which build.mjs stamps with lang and dir, so a whole page picks up its script's face without every rule having to name it. The per-element [lang=…] rules below are for the OTHER script appearing inside a page — the Telugu and Urdu lines in the masthead of the English page, and the language names in the switcher. Each stack keeps 'Noto Sans' at the end. That is not decoration either: the Latin that survives on a Telugu or Urdu page — DCB, the telephone number, a date — is set in the same face as the rest of the site instead of in whatever the browser would otherwise reach for. */ html[lang="te"] body, [lang="te"] { font-family: 'Gurajada', 'Noto Sans Telugu', 'Noto Sans', sans-serif; } /* Nastaliq, not Naskh, for Urdu running text: it is the style Urdu is read in, and Naskh reads to an Urdu reader the way a Fraktur page reads in English — legible, and wrong. Naskh stays as the fallback because Nastaliq is a large download and a slow connection should still get correct letterforms. Nastaliq's tall diagonal ligatures need more room than a Latin line, hence the line-height. */ html[lang="ur"] body, [lang="ur"] { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Noto Sans', serif; } html[lang="ur"] body { line-height: 2; } /* The A− / A / A+ controls scale this, and everything below is in rem. text-size-adjust stops iOS Safari inflating body copy of its own accord when a phone is turned to landscape — it does that to columns it judges too narrow, which silently overrides the A− / A / A+ setting the reader chose. */ html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Noto Sans', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; /* Nothing here is a long unbroken token today, but an address, a scheme name or a pasted URL added later would push the whole page sideways on a phone rather than wrapping. Cheaper to prevent than to notice. */ overflow-wrap: break-word; } a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--gold-border); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } ul { text-wrap: pretty; } img { max-width: 100%; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* The nav is sticky, so an anchor jump would land under it without this. */ section[id] { scroll-margin-top: 64px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Visible only when focused — the first stop for a keyboard user. */ .skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--green); color: #fff; padding: 10px 16px; text-decoration: none; } .skip:focus { left: 0; } /* ── Government top bar ──────────────────────────────────────────────────── */ .gov-bar { background: var(--green-deep); color: #e8eee9; font-size: 0.78rem; letter-spacing: 0.01em; } .gov-bar .wrap { padding-top: 6px; padding-bottom: 6px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; } .gov-name { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .gov-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .gov-tools a { color: #e8eee9; text-decoration: none; } .gov-tools a:hover { color: var(--gold-light); text-decoration: underline; } .font-controls { display: flex; align-items: center; gap: 4px; border-left: 1px solid #2c5a44; border-right: 1px solid #2c5a44; padding: 0 12px; margin: 0 2px; /* LTR EVEN ON THE URDU PAGE. The labels are A−, A, A+ — a Latin letter next to a mathematically neutral sign. Under the Unicode bidi algorithm a neutral character between a left-to-right letter and a right-to-left paragraph takes the paragraph's direction, so on the Urdu page these rendered as "−A" and "+A": the sign jumped to the wrong side of the A and the smaller/larger control read as its opposite. Pinning the direction here keeps the three labels as written. The row itself still sits at the correct end of the bar, because it is the flex parent above that mirrors, not this. */ direction: ltr; } .font-controls button { font: inherit; min-width: 26px; height: 24px; background: transparent; color: #e8eee9; border: 1px solid var(--green-rule-top); cursor: pointer; } .font-controls button:hover { background: #14523a; } .lang { position: relative; } .lang-btn { font: inherit; background: transparent; color: #e8eee9; border: 1px solid var(--green-rule-top); padding: 2px 10px; height: 24px; cursor: pointer; display: flex; align-items: center; gap: 6px; } .lang-btn:hover { background: #14523a; } .lang-btn .caret { font-size: 0.6rem; } .lang-menu { position: absolute; right: 0; top: 28px; background: #fff; border: 1px solid #c9c3b2; min-width: 150px; z-index: 40; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); display: flex; flex-direction: column; } .lang-menu[hidden] { display: none; } /* Links now, not buttons — the three languages are three builds of the page at three URLs, so switching language is navigation and belongs in an . It works with JavaScript off, which is the point. */ .lang-menu a { font: inherit; text-align: start; background: transparent; border: 0; border-bottom: 1px solid #ece8dd; padding: 8px 12px; color: var(--ink); text-decoration: none; display: block; } .lang-menu a:last-child { border-bottom: 0; } .lang-menu a:hover { background: #f1efe6; color: var(--ink); text-decoration: none; } /* The language you are already reading. Marked, not hidden: a reader who opens the menu to check which language they are in should find the answer there. */ .lang-menu a[aria-current="true"] { background: var(--tint-2); font-weight: 600; } .lang-menu a[lang="te"] { font-family: 'Gurajada', 'Noto Sans Telugu', sans-serif; } .lang-menu a[lang="ur"] { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; } /* ── Header ──────────────────────────────────────────────────────────────── */ .masthead { background: #fff; border-bottom: 3px solid var(--green); } .masthead .wrap { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; } /* .identity is the wrapping the emblems and the Board's name — it is the masthead link home. Colour and underline are restated because it is an anchor now; the rules below it style its children exactly as before. */ .identity { display: flex; align-items: center; gap: 14px; min-width: 0; text-decoration: none; color: inherit; } .identity:hover h1 { text-decoration: underline; text-underline-offset: 2px; } .identity img { height: 68px; width: auto; flex: none; display: block; } /* The Board's name in the two scripts that are NOT the current page's, stacked above the

. build.mjs fills them in; the font comes from the [lang=…] rules near the top. Smaller and lighter than the heading on purpose — they are a signal to a reader of another script that the site has their language, not a second title competing with the first. */ .identity .alt-name { font-size: 0.95rem; color: var(--green); font-weight: 600; line-height: 1.35; } /* Nastaliq needs a line box roughly twice its font size. Its letterforms hang on a steep diagonal — a word starts high and finishes low — so the glyphs overflow a line box sized for Latin and collide with whatever is beneath. At line-height 1.35 the Urdu name sat on top of the

under it. This is also why html[lang="ur"] body carries line-height 2. */ .identity .alt-name.ur { font-size: 1rem; line-height: 2; } .identity h1 { font-family: 'Noto Serif', serif; font-size: 1.5rem; margin: 2px 0 3px; color: var(--green); line-height: 1.2; } .identity .dept { font-size: 0.8rem; color: var(--muted); } .shortcuts { display: flex; gap: 10px; align-items: stretch; } .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 10px 16px; font-weight: 600; font-size: 0.9rem; border: 1px solid var(--green); font-family: inherit; cursor: pointer; } .btn-green { background: var(--green); color: #fff; } .btn-green:hover { background: var(--green-hover); color: #fff; } .btn-outline { background: #fff; color: var(--green); } .btn-outline:hover { background: #f0ede1; color: var(--green); } .btn-gold { background: var(--gold); color: #16130c; border-color: var(--gold-border); } .btn-gold:hover { background: var(--gold-hover); color: #16130c; } /* ── Dignitaries band ──────────────────────────────────────────────────── Sits between the masthead and the sticky nav, which is the one place it can go: inside the masthead it would have to share 1160px with the two seals, the Board's name and the two shortcut buttons, and three names of this length do not fit that gap at a readable size. Below the nav it would outrank the Board's own welcome. The circle is a crop, not a mask on a square file — object-fit keeps the three portraits the same size even though the sources are 447, 400 and 250px square. object-position sits slightly above centre because a head in a portrait sits above the middle of the frame; centring the crop clips the top of the head. */ .leaders { background: var(--tint-2); border-bottom: 1px solid var(--line-2); } .leaders .wrap { padding-top: 12px; padding-bottom: 12px; } .leader-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; } .leader { display: flex; flex-direction: column; align-items: center; text-align: center; width: 196px; gap: 6px; } .leader-photo { display: block; width: 76px; height: 76px; border-radius: 50%; /* Radius is 0 everywhere else in this stylesheet by design. These three are the deliberate exception — the circular portrait is the convention on government portals and is what makes the band read as one. */ overflow: hidden; background: #fff; border: 2px solid var(--gold); flex: none; } .leader-photo img { width: 100%; height: 100%; object-fit: cover; display: block; /* --zoom and --pan frame the FACE, and they exist because object-position cannot do this job: all three sources are square and so is the circle, so cover crops nothing and a pan moves nothing. One portrait is a tight headshot and another is a half-body photograph; left alone the heads come out at different sizes and the row looks assembled rather than issued. scale() is applied after translate(), so a source point at p% of the height lands at 50 + zoom x (p + pan - 50). Set pan = 50 - p to put the face on the centre line, then raise zoom until 50 - 50/zoom - pan >= 0, which is the point at which the top of the circle stops running off the top of the photograph and showing the background. */ transform: scale(var(--zoom, 1)) translateY(var(--pan, 0)); } /* CM is a tight headshot and needs no help. DCM is a half-body photograph: the face sits at 27% of its height, so pan 22% and zoom 2 bring it up to the size of the other two. MM is head-and-shoulders, face at 41%, and a touch of zoom hides the grey studio background at the edge of the circle. */ .leader-photo.dcm img { --zoom: 2; --pan: 22%; } .leader-photo.mm img { --zoom: 1.25; --pan: 8%; } /* The Chairman needs neither, and that is why there is no rule for him here. The other three are framed in CSS because their sources are what they are; his is a studio portrait supplied by the Board, cropped square to the face before it was written to uploads/ (620px square at (154,0) of the source, scaled to 336). Frame a replacement the same way — in the file — rather than adding a --zoom that then has to be re-tuned every time the photo changes. */ /* Full strength, not a grey caption: these are read across a room on a projector, the same reason the app's dashboard captions are at full ink. */ .leader-name { font-size: 0.82rem; font-weight: 700; color: var(--ink); line-height: 1.25; } .leader-role { font-size: 0.75rem; color: var(--muted); line-height: 1.3; } /* The Chairman, carried larger and labelled beside the portrait rather than beneath it. The row is still in protocol order and still one line; what the change of scale says is whose site this is — the three before him hold office in the State, he holds this Board. Every rule here is written `.leader.is-chair` rather than `.is-chair`. The media queries below re-set `.leader`'s width, flex basis and photo size at four breakpoints, and a single-class selector would lose to whichever of them came later in the file. Two classes wins wherever it is written. */ .leader.is-chair { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; text-align: start; width: auto; padding-inline-start: 26px; border-inline-start: 1px solid var(--line-2); } .leader.is-chair .leader-photo { grid-row: 1 / 3; width: 112px; height: 112px; } .leader.is-chair .leader-name { font-size: 1rem; align-self: end; } .leader.is-chair .leader-role { font-size: 0.82rem; align-self: start; } /* ── Main navigation ───────────────────────────────────────────────────── A bar across the top, the way a government site normally reads, with the eleven sections opening downwards. The width is genuinely tight: at 0.85rem with 11px of side padding the row measures 1135px of the 1160px available. That is why .nav-list carries flex-wrap — the A+ control multiplies the root font size by up to 1.4, which takes the row to about 1433px, and WITHOUT the wrap it overflowed and the whole page scrolled sideways with Contact Us cut off the right edge. The burger is no help there: it appears below 1100px of viewport, and enlarging the text does not narrow the viewport. Wrapping to a second line is what a reader who asked for larger text wants anyway. */ .mainnav { background: var(--green); position: sticky; top: 0; z-index: 30; border-bottom: 3px solid var(--gold); } .mainnav .wrap { display: flex; align-items: center; justify-content: space-between; } .nav-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; width: 100%; } .nav-list > li { border-inline-end: 1px solid var(--green-rule); position: relative; } .nav-top, .nav-list > li > a { display: flex; align-items: center; gap: 6px; font: inherit; background: transparent; border: 0; cursor: pointer; padding: 12px 11px; color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 500; white-space: nowrap; } .nav-top:hover, .nav-list > li > a:hover { background: var(--green-hover); color: var(--gold-pale); } /* The home link. The glyph is an inline SVG rather than a house emoji: an emoji is a different typeface on every platform, renders in colour against the green bar on some of them, and cannot inherit the hover colour. This inherits currentColor and matches the caret beside it. */ .home-ico { flex: none; display: block; } .home-ico path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Hidden from sight, not from the accessible name — the link still announces as "Home". clip-path rather than display:none, which would take it out of the accessibility tree and leave the anchor with no name at all. The narrow layout puts the word back; see the media query at the foot of this file. */ .nav-home-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The caret is CSS rather than a character in the markup, so it never lands in the accessible name of the button and never in a copied selection. */ .has-sub > .nav-top::after { content: ''; width: 0; height: 0; flex: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.8; } .has-sub > .nav-top[aria-expanded="true"] { background: var(--green-hover); color: var(--gold-pale); } .has-sub > .nav-top[aria-expanded="true"]::after { transform: rotate(180deg); } .subnav { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 232px; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); } .subnav[hidden] { display: none; } .subnav li + li { border-top: 1px solid var(--line-3); } .subnav a, .subnav .soon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; font-size: 0.85rem; text-decoration: none; color: var(--ink); } .subnav a:hover { background: var(--tint-2); color: var(--green); } /* Not a link, and deliberately not styled as one: this names a section nobody has written yet. An here is indistinguishable from a broken link, and the reader has no way to tell those apart. */ .soon { color: var(--muted-3); cursor: default; } .soon::after { content: 'soon'; flex: none; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-ink); background: var(--amber-bg); border: 1px solid var(--amber-border); padding: 1px 5px; } /* The same amber pill as .soon::after, but on a section heading rather than a menu entry, and as its own element so it can sit beside an

that IS reachable. The distinction matters: .soon marks a menu item that goes nowhere, this marks a section a reader can read where the DATA is not published yet. The section is not disabled — the explanation is live and useful — so it must not be greyed out like a dead link. */ .soon-tag { display: inline-block; vertical-align: middle; margin-inline-start: 10px; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; font-family: 'Noto Sans', sans-serif; color: var(--amber-ink); background: var(--amber-bg); border: 1px solid var(--amber-border); padding: 2px 7px; } /* A top-level menu item whose page is not published. A , not a link, so nothing happens on click and nothing is focusable — a reader cannot land on it expecting a page. Dimmed against the green, with the badge carrying the contrast so the label stays legible rather than fading into the bar. */ .nav-top.is-soon { color: var(--gold-pale); opacity: 0.72; cursor: default; } .nav-top.is-soon:hover { background: transparent; color: var(--gold-pale); } .nav-soon { font-style: normal; flex: none; margin-inline-start: 2px; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-pale); border: 1px solid var(--green-rule-top); padding: 1px 5px; } /* A shortcut button whose destination is not open yet — the Taleem-e-Hunar button in the masthead and in the menu. Rendered as a carrying .btn, so it keeps the button's shape and alignment but has no href and takes no focus: nothing to click, and nothing that behaves like a broken link. */ .btn.is-soon, .btn-outline.is-soon { cursor: default; opacity: 0.6; background: #fff; color: var(--green); border-color: var(--line-4); } .btn.is-soon:hover, .btn-outline.is-soon:hover { background: #fff; color: var(--green); } /* The footer sits on deep green, where .soon's default muted grey is close to unreadable. Restate both the label and its badge against that ground. */ .site-footer .soon { color: #a9bdb2; } .site-footer .soon::after { margin-inline-start: 6px; color: var(--gold-pale); background: transparent; border-color: var(--green-rule-soft); } /* The last menus would otherwise open past the right edge of the page. */ .nav-list > li:nth-last-child(2) .subnav, .nav-list > li:nth-last-child(3) .subnav { left: auto; right: 0; } .burger { display: none; font: inherit; background: transparent; color: #fff; border: 0; padding: 12px 0; font-size: 0.95rem; cursor: pointer; align-items: center; gap: 8px; } .nav-shortcuts { display: none; } /* ── Section pages ─────────────────────────────────────────────────────── Everything below serves the eight pages behind the menu — Institutions, Properties, Management, Inspectors, Services, Schemes, Publications and Transparency. The home page uses none of it. A note on .awaiting, because it is the most-used thing here and looks like an apology. Roughly half of what these pages cover is not the Board's prose to write — it is the Board's data and the Board's documents: the register itself, Government Orders, tender notices, district office addresses, audited figures. Publishing invented stand-ins for those on a government site would be worse than publishing nothing, so each of those places says plainly that it is not published yet and what it will hold. Replace the panel with the content; do not soften the wording and leave it. */ .page-head { background: #fff; border-bottom: 1px solid var(--line-2); } .page-head .wrap { padding-top: 22px; padding-bottom: 22px; } .page-head h1 { font-family: 'Noto Serif', serif; font-size: 1.75rem; line-height: 1.2; color: var(--green); margin: 6px 0 0; } .crumbs { font-size: 0.78rem; color: var(--muted-2); } .crumbs a { color: var(--muted-2); } .crumbs a:hover { color: var(--green); } .crumbs span { padding: 0 6px; color: var(--line-4); } .lede { font-size: 1.02rem; color: var(--muted); margin: 12px 0 0; max-width: 68ch; text-wrap: pretty; } /* The date a policy takes effect, under the lede on the three policy pages. Deliberately printed on the page and not buried in a revision history: a policy a reader cannot date is a policy they cannot rely on, and the acquiring bank looks for it when it reviews the three URLs. */ .policy-date { font-size: 0.82rem; color: var(--muted-2); margin: 10px 0 0; max-width: 68ch; border-top: 1px solid var(--line-4); padding-top: 10px; } .page-section .wrap { padding-top: 28px; padding-bottom: 28px; } .page-section h2 { font-family: 'Noto Serif', serif; font-size: 1.3rem; color: var(--green); margin: 0 0 6px; } .page-section h3 { font-size: 0.98rem; color: var(--green); margin: 18px 0 6px; } .page-section p { margin: 0 0 12px; max-width: 78ch; text-wrap: pretty; } .page-section ul, .page-section ol { margin: 0 0 12px; padding-inline-start: 20px; max-width: 78ch; } .page-section li { margin-bottom: 6px; } /* The menu marks the page you are on. Weight and the gold rule, not colour alone — the bar is already dark green and a colour-only cue disappears for a reader who cannot separate the two. */ .nav-top.is-here { font-weight: 700; box-shadow: inset 0 -3px 0 var(--gold); } /* Values read out of the Board's own register configuration, so the list on the page is the list the system actually uses. */ .taglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; } .taglist li { border: 1px solid var(--line); background: #fff; padding: 5px 11px; font-size: 0.85rem; margin: 0; } .deflist { margin: 0 0 14px; } .deflist dt { font-weight: 700; font-size: 0.92rem; color: var(--green); margin-top: 12px; } .deflist dd { margin: 4px 0 0; max-width: 78ch; text-wrap: pretty; } .steps { counter-reset: step; list-style: none; padding-inline-start: 0; max-width: 78ch; } .steps li { counter-increment: step; position: relative; padding-inline-start: 38px; margin-bottom: 12px; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; display: grid; place-items: center; background: var(--green); color: #fff; font-size: 0.8rem; font-weight: 700; } .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; list-style: none; padding: 0; } .dir-grid li { border: 1px solid var(--line); background: #fff; padding: 10px 12px; margin: 0; } .dir-grid .code { font-size: 0.72rem; color: var(--muted-3); letter-spacing: 0.06em; display: block; } /* The district-wise inspector directory. Generated from _data/inspectors.json by build.mjs — see the comment there before changing the markup this expects. It is a real because it is one: three columns of the same kind of fact, read across a row. A grid of cards would lose the row heading a screen reader announces before each cell, and there is no way back to it. */ /* The A–Z strip above the table. Only letters that have districts under them are printed, so there is no greyed half of the alphabet for a reader to try and fail to click. Anchors, not buttons: they work with JavaScript off, they can be opened in a new tab, and they leave the letter in the address bar. */ .dir-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; max-width: 900px; } .dir-index a { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--line); background: #fff; color: var(--green); font-weight: 700; font-size: 0.9rem; text-decoration: none; } .dir-index a:hover { background: var(--green); color: #fff; border-color: var(--green); } .dir-index-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; max-width: 78ch; } /* ── The register browser (register.html) ───────────────────────────────── The district → mandal finder and the full static listing beneath it. Everything here styles markup that build.mjs has already written — the whole listing is in the document whether or not main.js runs. So nothing below may hide content in a way that only a script can undo: .reg-mandal stays visible inside its
, and the chosen one is MARKED rather than its siblings removed. A rule like `.reg-mandal { display: none }` waiting for a class from JavaScript would empty this page for exactly the readers it was built for. */ .reg-finder { margin: 0 0 18px; max-width: 900px; } .reg-fields { display: flex; flex-wrap: wrap; gap: 14px; } .reg-fields .field { flex: 1 1 260px; } .reg-finder select { font: inherit; font-size: 0.92rem; padding: 9px 10px; border: 1px solid var(--line-4); background: #fff; width: 100%; } .reg-finder select:focus { border-color: var(--green); } .reg-finder select:disabled { background: var(--tint-3); color: var(--muted-2); } .reg-noscript { font-size: 0.85rem; color: var(--muted); margin: 12px 0 0; max-width: 78ch; } .reg-result { margin: 14px 0 0; padding: 10px 12px; max-width: 900px; background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-ink); font-size: 0.88rem; } .reg-listing-head { margin-top: 26px; } .reg-listing-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; max-width: 78ch; } .reg-district { border: 1px solid var(--line); background: #fff; max-width: 900px; margin: 0 0 8px; } .reg-district > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; background: var(--tint-3); /* scroll-margin-top because the nav is sticky: without it the district the selector jumps to lands underneath the menu bar. */ scroll-margin-top: 74px; } .reg-district[open] > summary { border-bottom: 1px solid var(--line); } .reg-dname { font-weight: 600; color: var(--green); } .reg-district .code { font-size: 0.72rem; color: var(--muted-3); letter-spacing: 0.06em; } .reg-count { margin-inline-start: auto; font-size: 0.8rem; color: var(--muted-2); } .reg-body { padding: 12px; } .insp-card { border: 1px solid var(--gold-border); background: var(--gold-light); padding: 10px 12px; margin: 0 0 14px; } .insp-card.is-open { border-color: var(--line); background: var(--tint-3); } .insp-card h4 { margin: 0 0 4px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); } .insp-card p { margin: 0; font-size: 0.9rem; } .insp-name { font-weight: 600; } /* tabular-nums so the digits line up: a number read off a screen is checked digit by digit against something else. */ .insp-tel a { font-variant-numeric: tabular-nums; } .reg-mandals-head { margin: 0 0 8px; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); } /* A dense wrapped grid, not a stack: a district holds up to 46 mandals and a reader is scanning for one name, not reading them in order. */ .reg-mandals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; } .reg-mandal { padding: 6px 8px; border-inline-start: 3px solid transparent; font-size: 0.88rem; scroll-margin-top: 84px; } .reg-mandal.is-chosen { border-inline-start-color: var(--gold); background: var(--gold-light); font-weight: 600; } .rec-pending { margin: 0 0 14px; font-size: 0.85rem; color: var(--muted); max-width: 78ch; } /* ── One property, in full (property.html) ──────────────────────────────── A label/value grid rather than a table: these are one property's fields, not rows to compare across, and a
stacks correctly on a phone without the column-heading gymnastics .dir-table needs. */ .snap { background: #fff; border: 1px solid var(--line); padding: 16px 18px; max-width: 900px; } .snap h2 { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green); margin: 22px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-3); } .snap h2:first-child { margin-top: 0; } .snap-grid { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 6px 18px; margin: 0 0 4px; font-size: 0.92rem; } .snap-grid dt { color: var(--muted); } .snap-grid dd { margin: 0; font-weight: 600; color: var(--ink); } /* An unfilled field reads as unfilled, not as a value. Without this an em dash in the same weight as a real entry looks like the register's answer. */ .snap .empty { color: var(--muted-3); font-weight: 400; } @media (max-width: 560px) { .snap-grid { grid-template-columns: 1fr; gap: 2px 0; } .snap-grid dt { font-size: 0.78rem; } .snap-grid dd { margin-bottom: 8px; } } .dir-table { border-collapse: collapse; width: 100%; max-width: 900px; font-size: 0.92rem; background: #fff; border: 1px solid var(--line); margin: 0 0 14px; } .dir-table caption { caption-side: top; text-align: start; color: var(--muted); font-size: 0.85rem; padding: 0 0 8px; } .dir-table thead th { text-align: start; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: var(--tint-3); padding: 9px 12px; border-bottom: 1px solid var(--line); } .dir-table tbody th, .dir-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line-3); vertical-align: top; } .dir-table tbody tr:last-child th, .dir-table tbody tr:last-child td { border-bottom: 0; } .dir-table tbody th { text-align: start; font-weight: 600; color: var(--ink); } /* Inline here, unlike .dir-grid's block code, because the district name and its code are one label on one line rather than a card with a subtitle. */ .dir-table .code { font-size: 0.72rem; color: var(--muted-3); letter-spacing: 0.06em; font-weight: 400; } /* tabular-nums so the numbers line up down the column; a mobile number read off a screen is checked digit by digit against something else. */ /* The letter each group opens with. scroll-margin-top because the nav is sticky: without it a jump from the index above lands the heading underneath the menu bar and the reader sees the second district of the group first. */ .dir-table .dir-letter th { background: var(--tint-2); color: var(--green); font-family: 'Noto Serif', serif; font-size: 0.95rem; padding: 7px 12px; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); scroll-margin-top: 74px; } .dir-table tbody tr.dir-letter:first-child th { border-top: 0; } .dir-tel { white-space: nowrap; font-variant-numeric: tabular-nums; } .dir-open { color: var(--muted-2); } /* Three columns do not fit a phone, and a table that scrolls sideways hides the column a reader came for. Below this width each row becomes its own block with the heading carried in from data-label — which is why build.mjs writes that attribute on every cell. */ @media (max-width: 620px) { .dir-table, .dir-table tbody, .dir-table tr, .dir-table tbody th, .dir-table tbody td { display: block; width: auto; } .dir-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .dir-table tr { border-bottom: 1px solid var(--line); padding: 4px 0; } .dir-table tr:last-child { border-bottom: 0; } .dir-table tbody th, .dir-table tbody td { border-bottom: 0; padding: 3px 12px; } .dir-table tbody th { padding-top: 9px; font-size: 0.95rem; } .dir-table tbody td::before { content: attr(data-label) ': '; color: var(--muted-3); font-size: 0.78rem; } .dir-table tbody td:last-child { padding-bottom: 9px; } /* The letter row keeps its tint here, which is what separates one group from the next once the rows have stopped being rows. */ .dir-table tr.dir-letter { padding: 0; border-bottom: 0; } .dir-table .dir-letter th { padding: 6px 12px; font-size: 0.95rem; } } /* Not published yet, said plainly. Amber rather than red: nothing is wrong, something is simply absent, and red on a government page reads as a fault. */ .awaiting { border: 1px solid var(--amber-border); border-inline-start: 4px solid var(--gold); background: var(--amber-bg); padding: 14px 16px; margin: 0 0 14px; max-width: 78ch; } .awaiting strong { display: block; color: var(--amber-ink); font-size: 0.95rem; margin-bottom: 6px; } .awaiting p { margin: 0 0 8px; } .awaiting p:last-child { margin-bottom: 0; } @media (max-width: 560px) { .page-head h1 { font-size: 1.35rem; } .page-head .wrap, .page-section .wrap { padding-top: 20px; padding-bottom: 20px; } .lede { font-size: 0.95rem; } } /* ── Sections ────────────────────────────────────────────────────────────── */ section { border-bottom: 1px solid var(--line-2); } .on-white { background: #fff; } .on-tint { background: var(--tint); } .h2 { font-family: 'Noto Serif', serif; font-size: 1.5rem; color: var(--green); margin: 0 0 6px; } .rule { width: 72px; height: 3px; background: var(--gold); margin-bottom: 18px; } .intro .wrap { padding-top: 34px; padding-bottom: 30px; display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start; } .intro h2 { font-family: 'Noto Serif', serif; font-size: 1.65rem; color: var(--green); margin: 0 0 6px; line-height: 1.25; } .intro p { margin: 0 0 12px; text-wrap: pretty; } .intro .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } figure { margin: 0; } .map-figure { border: 1px solid var(--line); background: var(--tint-3); } /* Measured, not guessed: the map artwork and its label occupy 90% of the source width but only 77.5% of its height, centred at 51%. In a 1/1 box with object-fit: contain that left roughly an eighth of the panel empty above the map and a tenth below it — the file is square, the drawing inside it is not. 6/5 shows 83.5% of the height, which crops the dead band and still leaves the map a few per cent of air top and bottom rather than running it into the border. object-position carries the 1% the artwork sits below centre. Re-measure these three numbers if the map file is replaced. */ .map-figure img { /* height:auto is not tidiness. The carries a height attribute, which is a presentational hint giving the box a DEFINITE height — and aspect-ratio is ignored unless one dimension is auto. Without this line the ratio below computes correctly and does nothing at all. */ width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: 50% 51%; display: block; background: #fff; } .map-figure figcaption { border-top: 1px solid var(--line); padding: 8px 10px; font-size: 0.75rem; color: var(--muted); } .links { background: var(--tint-2); } .links .wrap { padding-top: 26px; padding-bottom: 26px; } .links h2 { font-family: 'Noto Serif', serif; font-size: 1.1rem; margin: 0 0 14px; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em; } .link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .card { background: #fff; border: 1px solid var(--line); padding: 18px; } .card-dcb { border-top: 3px solid var(--green); } .card-taleem { border-top: 3px solid var(--gold); } .card h3 { margin: 0 0 4px; font-size: 1rem; color: var(--green); } .card .sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; } .card p { margin: 0 0 14px; font-size: 0.9rem; } .about .wrap { padding-top: 34px; padding-bottom: 34px; } .about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; } .about-body { max-width: 74ch; } .about-body p { margin: 0 0 12px; } .functions { margin: 0; padding-inline-start: 20px; columns: 2; column-gap: 32px; } .functions li { margin-bottom: 5px; break-inside: avoid; } .vm { border-inline-start: 3px solid var(--gold); padding-inline-start: 18px; } .vm h3 { font-family: 'Noto Serif', serif; margin: 0 0 6px; font-size: 1.05rem; color: var(--green); } .vm p { margin: 0 0 20px; font-size: 0.93rem; } .vm ul { margin: 0; padding-inline-start: 18px; font-size: 0.93rem; } .vm li { margin-bottom: 5px; } .chairman { background: var(--tint); } .chairman .wrap { padding-top: 34px; padding-bottom: 34px; } .chair-grid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; } .chair-figure { border: 1px solid var(--line); background: #fff; padding: 8px; } /* 3/4, not the 4/3 this box held while the photograph was the wide shot of the taking-charge ceremony: the Board's portrait is upright, and a landscape box would crop it to a band across the chest. `height: auto` is load-bearing. The carries a height attribute, which gives the box a definite height, and `aspect-ratio` is ignored unless one dimension is auto — the same trap the map figure documents in the README. */ .chair-figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; /* The file is already cut to 3/4, so cover crops nothing today. Both are kept so a replacement of a different shape is cropped centrally rather than squashed. */ object-position: 50% 50%; display: block; border: 1px solid #ddd8c8; } /* Who is speaking, at the head of the words rather than in a caption under the photograph. The gold rule under it is the same device as .rule beneath every section heading, at the width of the column it introduces. */ /* `.chair-body > .chair-id`, not `.chair-id`: `.chair-body > p` sets a margin on every paragraph in the column and is written below this one. */ .chair-body > .chair-id { border-bottom: 2px solid var(--gold); padding-bottom: 10px; margin: 0 0 16px; } .chair-id strong { display: block; font-family: 'Noto Serif', serif; font-size: 1.2rem; color: var(--green); line-height: 1.25; } .chair-id span { display: block; font-size: 0.9rem; color: var(--muted); margin-top: 3px; } .chair-body > p { margin: 0 0 12px; } blockquote { margin: 0; border-inline-start: 3px solid var(--green); background: #fff; border-top: 1px solid #e2ddcd; border-inline-end: 1px solid #e2ddcd; border-bottom: 1px solid #e2ddcd; padding: 18px 20px; font-family: 'Noto Serif', serif; } blockquote p { margin: 0 0 12px; } blockquote footer { font-family: 'Noto Sans', sans-serif; font-size: 0.88rem; border-top: 1px solid #e2ddcd; padding-top: 12px; } blockquote footer strong { display: block; color: var(--green); } .notice .wrap { padding-top: 22px; padding-bottom: 22px; } .alert { border: 1px solid var(--red-border); border-inline-start: 4px solid var(--red); background: var(--red-bg); padding: 14px 16px; } .alert strong { display: block; color: var(--red); font-size: 0.95rem; margin-bottom: 6px; } .alert p { margin: 0 0 6px; font-size: 0.9rem; } .alert p:last-child { margin: 0; } .contact .wrap { padding-top: 34px; padding-bottom: 34px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .contact h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--green); } address { font-style: normal; margin: 0 0 14px; font-size: 0.95rem; line-height: 1.7; } .contact table { border-collapse: collapse; font-size: 0.92rem; width: 100%; margin-bottom: 14px; } .contact th { text-align: start; padding-block: 7px; padding-inline: 0 10px; border-bottom: 1px solid var(--line-3); font-weight: 600; white-space: nowrap; } .contact td { padding: 7px 0; border-bottom: 1px solid var(--line-3); } .map-embed { border: 1px solid var(--line); background: var(--tint-2); } .map-embed iframe { width: 100%; height: 220px; border: 0; display: block; } .map-embed .cap { border-top: 1px solid var(--line); padding: 8px 10px; font-size: 0.78rem; } form.enquiry { background: var(--tint); border: 1px solid var(--line); padding: 20px; } form.enquiry h3 { margin: 0 0 4px; } form.enquiry .hint { margin: 0 0 14px; font-size: 0.85rem; color: var(--muted); } .req { color: var(--red); } .fields { display: flex; flex-direction: column; gap: 12px; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 0.85rem; font-weight: 600; } .field input, .field textarea { font: inherit; font-size: 0.92rem; padding: 9px 10px; border: 1px solid var(--line-4); background: #fff; } .field textarea { resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--green); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); } .field .err { font-size: 0.78rem; color: var(--red); } .field .err:empty { display: none; } .form-ok { border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok-ink); padding: 12px 14px; font-size: 0.9rem; margin-bottom: 14px; } .form-ok[hidden] { display: none; } .disclaimer { background: var(--tint); } .disclaimer .wrap { padding-top: 24px; padding-bottom: 24px; } .disclaimer h2 { font-family: 'Noto Serif', serif; font-size: 1.05rem; color: var(--green); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; } .disclaimer p { margin: 0 0 8px; font-size: 0.88rem; } .disclaimer p:last-child { margin: 0; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .site-footer { background: var(--green-deep); color: #dfe7e1; border: 0; } .site-footer .wrap { padding-top: 26px; padding-bottom: 18px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .site-footer h3 { margin: 0 0 10px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold-light); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.88rem; } .site-footer a { color: #dfe7e1; text-decoration: none; } .site-footer a:hover { color: var(--gold-light); text-decoration: underline; } .site-info { font-size: 0.85rem; color: #bfcdc4; } .footer-note { border-top: 1px solid var(--green-rule-soft); margin-top: 20px; padding-top: 14px; font-size: 0.82rem; color: #bfcdc4; } /* ── Responsive ────────────────────────────────────────────────────────── The handoff resolves these in JS against window.innerWidth; media queries do the same thing correctly, including before first paint. */ @media (max-width: 1050px) { .leader-list { gap: 10px 24px; } .leader { width: 172px; } .intro .wrap { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } } /* ── The menu collapses here, not at the page's other breakpoints ──────── Eleven top-level items need about 1135px of row and a tablet has 768, so the burger appears at 1100px — well above the 820px at which the rest of the layout changes. The menu is the one part of this page that runs out of room before the columns do. Open, the dropdowns become an accordion in the flow rather than absolutely positioned panels: a panel floating over a list that is itself scrolling is unusable on a phone. */ @media (max-width: 1100px) { .burger { display: flex; } .nav-list { display: none; flex-direction: column; } .mainnav.open .nav-list { display: flex; } .nav-list > li { border-inline-end: 0; border-bottom: 1px solid var(--green-rule); position: static; } .nav-top, .nav-list > li > a { padding: 12px 18px; font-size: 0.92rem; width: 100%; } /* Full-width accordion rows here, so an unlabelled house on its own line is a guess. Bring the word back and let it sit beside the glyph. */ .nav-home-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .has-sub > .nav-top { justify-content: space-between; } .subnav { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0; background: var(--green-deep); border-top: 1px solid var(--green-rule); } .subnav li + li { border-top: 1px solid var(--green-rule-soft); } .subnav a, .subnav .soon { padding: 10px 18px 10px 34px; color: #e8eee9; font-size: 0.88rem; } .subnav a:hover { background: var(--green-hover); color: var(--gold-pale); } .soon { color: #a9bdb2; } .soon::after { color: var(--gold-pale); background: transparent; border-color: var(--green-rule-top); } .mainnav.open .nav-shortcuts { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--green-rule); } .nav-shortcuts a { flex: 1; text-align: center; padding: 10px; font-weight: 600; font-size: 0.85rem; text-decoration: none; } .mainnav .wrap { flex-wrap: wrap; } } @media (max-width: 820px) { /* The band stays at four across all the way down — three dignitaries of the state and the Chairman of this Board. Wrapping them would read as a ranking the row does not intend, so only the scale changes. A fixed width stops working here: at a 600px viewport four 168px columns need 744px and the fourth drops to its own line. A flexible basis keeps the four together and lets them share whatever the viewport has. */ .leader-list { gap: 10px 14px; } .leader { width: auto; flex: 1 1 118px; max-width: 172px; } /* Below this width the three State dignitaries cannot share a line with a 112px portrait and a name set beside it — something has to give, and what gives is the line, not the sizes. The Chairman takes his own row under the three, which is still protocol order read top to bottom. */ .leader.is-chair { flex: 1 1 100%; max-width: none; justify-content: center; padding: 12px 0 0; border-inline-start: 0; border-top: 1px solid var(--line-2); } .leader.is-chair .leader-photo { width: 92px; height: 92px; } .link-cards { grid-template-columns: 1fr; } .chair-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .functions { columns: 1; } /* The two shortcut buttons come out of the masthead here. On a phone they were the first thing on the page, pushing the Board's own name and the introduction below the fold — the site led with two buttons instead of saying who it was. Both remain reachable in two places: inside the ☰ menu (.nav-shortcuts, one tap away at the top of every scroll position, since the nav is sticky) and as the Important Links cards further down. */ .shortcuts { display: none; } /* At one column the portrait would run the full width of the page and push the message itself below the fold. */ .chair-figure { max-width: 360px; } /* iOS Safari zooms the page in on any input whose text is under 16px and does not zoom back out when the field is left — so the reader is stranded mid-form on a page that no longer fits. 0.92rem is under that threshold. This is the only place in the stylesheet that pins a px font size, and it is why. */ .field input, .field textarea { font-size: 16px; } } /* ── Phones ────────────────────────────────────────────────────────────── The handoff stops at 820px, which is a tablet. A 360–430px phone is the likeliest way this page is read, so it gets its own pass: the masthead has two 68px seals competing with a serif h1 for 320px of usable width, and the utility bar carries five separate controls. Everything here is a matter of scale — no layout is rearranged again, and nothing is hidden that carries information. */ @media (max-width: 560px) { .wrap { padding-left: 16px; padding-right: 16px; } /* The bar keeps Accessibility and both controls. The visible "Skip to Main Content" link goes, because the .skip anchor above already does that job for the keyboard users it exists for, and it is the one item here that is pure duplication. */ .gov-bar .wrap { justify-content: center; gap: 6px 12px; } .gov-bar .gov-tools > a[href="#main"] { display: none; } .gov-name { font-size: 0.72rem; text-align: center; width: 100%; } /* 24px is a small target for a thumb; these are the two controls a reader with low vision reaches for first, so they get the room. */ .font-controls { padding: 0 8px; } .font-controls button { min-width: 32px; height: 30px; } .lang-btn { height: 30px; } .identity { gap: 10px; } .identity img { height: 48px; } .identity .te { font-size: 0.85rem; } .identity h1 { font-size: 1.15rem; } .identity .dept { font-size: 0.72rem; } /* 4 × 66 + 3 × 6 = 282px, inside the 288px even a 320px phone leaves after the wrap padding. Anything wider and a portrait wraps onto its own line, which is a ranking the row does not mean. The name stays bold and full-strength; it is the role line that is allowed to get small, because the photograph and the name already carry it. */ .leaders .wrap { padding-top: 10px; padding-bottom: 10px; } .leader-list { gap: 8px 6px; } .leader { width: auto; flex: 1 1 66px; max-width: 104px; gap: 4px; } .leader-photo { width: 48px; height: 48px; } .leader-name { font-size: 0.66rem; } .leader-role { font-size: 0.62rem; } /* The Chairman's row scales with the rest, but stays the larger of the two: it is the whole width of the page here and has the room the others do not. */ .leader.is-chair .leader-photo { width: 76px; height: 76px; } .leader.is-chair .leader-name { font-size: 0.88rem; } .leader.is-chair .leader-role { font-size: 0.72rem; } .intro .wrap { padding-top: 24px; padding-bottom: 24px; gap: 24px; } .intro h2 { font-size: 1.3rem; } .h2 { font-size: 1.3rem; } .about .wrap, .chairman .wrap, .contact .wrap { padding-top: 26px; padding-bottom: 26px; } /* The phone used to need its own 4/3 here, because a square map at full width was as tall as the phone is wide and pushed the introduction off screen. 6/5 above is already shallower than that, so the override is gone rather than fighting it. */ .card { padding: 14px; } .vm { padding-inline-start: 14px; } blockquote { padding: 14px 16px; } .chair-figure { max-width: none; } form.enquiry { padding: 16px; } .map-embed iframe { height: 180px; } /* Stacked, the address column and the form need less air between them than two side-by-side columns did. */ .contact-grid, .about-grid { gap: 22px; } } /* ── Smallest phones ───────────────────────────────────────────────────── Four names of this length need 334px of row — measured, not guessed: the flex items floor at their min-content width of 79px, because a name cannot be broken mid-word to make it narrower. A 360px phone has 328px after the wrap padding, so the row breaks 3 + 1, which reads as a ranking the band does not mean. Below 390px (the width of the current iPhones, where four still fit) it becomes a 2 x 2 grid instead. That costs no height — 3 + 1 was already two rows — and looks deliberate rather than broken. */ @media (max-width: 389px) { .leader-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; } .leader { max-width: none; } /* Two columns above, and the Chairman across both — flex-basis means nothing to a grid item, so the span has to be said again in the grid's own terms. */ .leader.is-chair { grid-column: 1 / -1; } .leader-photo { width: 54px; height: 54px; } .leader-name { font-size: 0.7rem; } .leader-role { font-size: 0.64rem; } } /* ── Translated pages ────────────────────────────────────────────────────── The notice at the top of every Telugu and Urdu page saying which version governs if the two disagree. It carries real weight on the privacy policy and the terms and conditions: those are the documents the acquiring bank holds URLs for, they are what the Board is held to, and only the English text has been through the Board's own review. Naming the authoritative language is the ordinary practice on Indian government sites and it is what makes publishing a translation of a legal document safe to do at all. Styled as a note rather than a warning — amber, not red. It is a statement about which text governs, not a defect in the page the reader is on. */ .translation-note { background: var(--amber-bg); border: 1px solid var(--amber-border); border-inline-start: 4px solid var(--gold); color: var(--amber-ink); padding: 12px 16px; margin: 0 0 20px; font-size: 0.88rem; max-width: 78ch; } .translation-note a { color: var(--amber-ink); font-weight: 600; } /* ── Right-to-left (Urdu) ────────────────────────────────────────────────── ALMOST NOTHING IS HERE, AND THAT IS THE POINT. The Urdu build sets dir="rtl" on and the layout turns around on its own, because the stylesheet asks for start and end rather than left and right: flex and grid rows reverse themselves, and the thirty-odd rules that used padding-left / border-left / text-align: left were converted to padding-inline-start / border-inline-start / text-align: start. In LTR those mean exactly what the physical properties meant, so the English and Telugu pages did not move. That conversion is what keeps this block short. The alternative — leaving the physical properties and re-stating each one under [dir="rtl"] — was rejected because it has to be repeated inside every media query too, and because it silently rots: the next rule someone adds with padding-left is correct in English, wrong in Urdu, and nothing says so. With logical properties the next rule is simply right in both. What remains below is the handful of cases that genuinely cannot mirror themselves, because they are position or transform rather than flow. */ /* Absolutely positioned, so it does not participate in the flow that mirrors. */ [dir="rtl"] .skip { left: auto; right: -9999px; } [dir="rtl"] .skip:focus { left: auto; right: 0; } [dir="rtl"] .lang-menu { right: auto; left: 0; } /* The step number sits in the padding well that padding-inline-start opens; the well moved to the other side, so the number has to follow it. */ [dir="rtl"] .steps li::before { left: auto; right: 0; } /* A Latin telephone number, an email address or a URL inside RTL text: without an isolate the browser reorders the surrounding punctuation around it and a number ends up reading backwards next to its label. */ [dir="rtl"] .contact td a[href^="tel:"], [dir="rtl"] .contact td a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; display: inline-block; } @media print { .gov-bar, .mainnav, .shortcuts, form.enquiry, .map-embed { display: none; } body { background: #fff; } }