/* ===================================================================== GOV-THEME.CSS Department of Heritage Telangana — modern Government of Telangana visual refresh. Presentation-layer only: no markup logic, no data bindings are affected by this file. Loaded AFTER every legacy/vendor stylesheet (in and again just before ) so it always wins the cascade without needing to touch the old CSS files. ===================================================================== */ /* ---------- 1. Design tokens ---------- */ :root { --tg-navy: #0a2647; --tg-blue-900: #0c2f57; --tg-blue-800: #0e3d6e; --tg-blue-700: #10538f; --tg-blue-600: #1668b8; --tg-blue-500: #2f80d8; --tg-blue-100: #dce9f7; --tg-blue-50: #f2f7fc; --tg-gold: #e8a933; --tg-gold-dark: #c98a1c; --tg-ink: #1b2733; --tg-ink-soft: #4c5b6c; /* Darkened from #6b7c8d, which measured 4.29:1 on white - below the 4.5:1 WCAG AA floor for the small text it is used on (photo credits, designations, card descriptions). Now 5.53:1. */ --tg-muted: #566b7d; --tg-border: #e2e9f1; --tg-white: #ffffff; --tg-bg: #ffffff; /* Supporting accents, referenced from telangana.gov.in department sites' shared design system — used sparingly for meaning (org tiers, category tags), never as large section backgrounds. */ --tg-teal: #2f7a72; --tg-teal-50: #e9f4f2; --tg-rose: #c1466b; --tg-rose-50: #faedf1; --tg-slate: #4c5b9a; --tg-slate-50: #eef0f8; --tg-terracotta: #b85c38; --tg-terracotta-50: #faf0ea; --tg-radius-lg: 18px; --tg-radius: 14px; --tg-radius-sm: 9px; --tg-shadow-sm: 0 2px 10px rgba(10, 38, 71, .06); --tg-shadow: 0 10px 28px rgba(10, 38, 71, .10); --tg-shadow-lg: 0 20px 48px rgba(10, 38, 71, .16); /* Ubuntu for headings, Mulish for body - the pairing used across telanganarising2047.org (h1 Ubuntu 700, h2/h3 Ubuntu 500, body and buttons Mulish 400/16px). Both masters load the two families; the old Poppins/Inter names stay in the stack as the first fallback so nothing reflows to a system font if a font request fails. Note on weights: Ubuntu ships 300/400/500/700 and has no 600. This file sets font-weight 600 in 22 places, and CSS font matching resolves a missing 600 upward, so those render at 700. That suits the reference (its headings are 500 and 700, never 600) but it does make headings a touch heavier than under Poppins, which had a real 600. Mulish is variable and covers 400-700 exactly. */ --tg-font-heading: 'Ubuntu', 'Poppins', 'Segoe UI', sans-serif; --tg-font-body: 'Mulish', 'Inter', 'Segoe UI', sans-serif; --tg-ease-out: cubic-bezier(.16, 1, .3, 1); --tg-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* One vertical rhythm for every full-width band on the page. Each section used to set its own padding (24/10, 44/44, 34/34, 32/0, 62/64...), so the page scrolled with an uneven beat. Applied in section 14 at the end of this file. */ --tg-section-y: clamp(36px, 4.6vw, 60px); --tg-section-x: clamp(14px, 4vw, 40px); /* ---- Gradients ---- `--grad-deep` is a three-layer stack, not a single ramp, because a lone two-stop linear-gradient over this much area reads flat and banded. Painted back to front: 3. a six-stop diagonal ramp, near-black navy -> blue-700 -> a deep teal at the far corner, so the band has depth along its length 2. a teal bloom rising from the bottom-right, which keeps the cold end of the ramp from going grey 1. a gold bloom from the top-left, the theme accent, tying the band to the gold rules used on headings and buttons All three are colour-stopped from the palette above; nothing new is introduced, so the band still reads as the same design system. */ --grad-deep: radial-gradient(1150px 420px at 10% -20%, rgba(232, 169, 51, .22), transparent 62%), radial-gradient(900px 400px at 92% 118%, rgba(47, 122, 114, .34), transparent 64%), linear-gradient(118deg, #06182f 0%, #0a2647 22%, #0c3560 44%, #0e3d6e 62%, #10538f 82%, #145f79 100%); /* Top-edge rule shared by the page banner and the scheme banner */ --grad-accent: linear-gradient(90deg, var(--tg-gold), var(--tg-blue-500), var(--tg-gold)); /* `--grad-shell` is the light counterpart to --grad-deep and is built the same way, for the same reason: one flat white across the full width of a masthead reads as a blank strip, and a single two-stop ramp bands visibly at that size. Painted back to front: 3. a four-stop diagonal ramp, pure white at the brand end falling to a cool blue-50 at the navigation end, so the bar has a direction rather than sitting inert 2. a blue bloom off the top-right, which keeps the cold end from going grey behind the menu 1. a gold bloom rising from the bottom-left, the same accent --grad-deep opens with, sitting directly behind the emblems Every stop is drawn from the palette above; the masthead reads as the daylight version of the dark bands rather than a new theme. */ --grad-shell: radial-gradient(760px 300px at 5% 132%, rgba(232, 169, 51, .26), transparent 66%), radial-gradient(700px 300px at 90% -34%, rgba(47, 128, 216, .18), transparent 64%), linear-gradient(102deg, #ffffff 0%, #fdfeff 30%, #f2f7fc 68%, #e7f0fb 100%); /* The jali lattice from the About band, restruck in navy for a light ground. Same motif, same 72px tile - the masthead and that section are the two places the pattern appears, so they have to match. */ --jali-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%230a2647' stroke-width='1' opacity='0.055'%3E%3Ccircle cx='36' cy='36' r='24'/%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='72' cy='0' r='24'/%3E%3Ccircle cx='0' cy='72' r='24'/%3E%3Ccircle cx='72' cy='72' r='24'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 2. Base / typography ---------- */ html { scroll-behavior: smooth; } body { font-family: var(--tg-font-body) !important; background-color: var(--tg-bg) !important; color: var(--tg-ink) !important; -webkit-font-smoothing: antialiased; /* legacy homestyle.css sets a 7px body margin that leaves a gap around the whole page, including under the header */ margin: 0 !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--tg-font-heading) !important; color: var(--tg-navy) !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.3 !important; } p, li, td, th, label, span { color: var(--tg-ink-soft); } a { color: var(--tg-blue-600); } a:hover { color: var(--tg-blue-800); } ::selection { background: var(--tg-blue-100); color: var(--tg-navy); } a:focus-visible, button:focus-visible, .nav-link:focus-visible { outline: 3px solid var(--tg-gold); outline-offset: 2px; } /* ---------- 3. Generic content sections (works site-wide without touching each page's markup) ---------- */ .container, .container-fluid { padding-top: 2px; padding-bottom: 8px; } .white-box, .container.white-box { background: var(--tg-white); border: 1px solid var(--tg-border); border-radius: var(--tg-radius-lg); box-shadow: var(--tg-shadow-sm); padding: 36px clamp(18px, 4vw, 48px) !important; margin: 28px auto !important; } section.section { background: var(--tg-white); border: 1px solid var(--tg-border); border-radius: var(--tg-radius); box-shadow: var(--tg-shadow-sm); padding: 28px clamp(16px, 4vw, 34px); margin-bottom: 24px; } section.section h2 { font-size: clamp(21px, 2vw, 26px) !important; letter-spacing: -.018em !important; line-height: 1.2 !important; padding-bottom: 12px; margin-bottom: 16px !important; border-bottom: 3px solid var(--tg-gold); display: inline-block; } /* Page-level heading pattern used across content pages */ .container > h2, .container > h3, .white-box > h2, .white-box > h3 { font-size: clamp(22px, 2.2vw, 28px) !important; letter-spacing: -.018em !important; line-height: 1.2 !important; padding-bottom: 12px; margin-bottom: 20px !important; border-bottom: 3px solid var(--tg-gold); display: inline-block; } /* ---------- 3a. Section headings centred site-wide ---------- These headings were `display: inline-block` so their gold rule would only span the words rather than the whole column - but an inline-block still sits wherever the text flow puts it, i.e. hard left. `width: fit-content` shrink-wraps the box to its text, which gives the auto margins something to centre. Setting `text-align: center` alone would only centre the text *inside* a full-width box, and switching to plain `display: block` would stretch the gold rule across the entire container and turn it into a divider. Scoped to the standing heading patterns. The Heritage Partner Scheme banner is deliberately excluded: its eyebrow, body copy and button are a left-aligned set, so centring only its

would break that column. */ section.section h2, .container > h2, .container > h3, .white-box > h2, .white-box > h3, .container.whitebox span[id$="lblname"], .about-heading { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; text-align: center; } .container h6 { color: var(--tg-blue-700) !important; text-transform: uppercase; letter-spacing: .04em !important; font-size: 14px !important; margin-top: 20px; } /* Simple reusable page banner (opt-in: add class="page-banner" to a wrapper div at the top of a content page). In use on 16 content pages. The horizontal padding stays on the banner itself rather than moving to an inner wrapper: every one of those 16 pages puts its

/

as direct children, so zeroing the sides here would run their text into the edge of the band. Pages that want a measured column instead add `.page-banner-inner` around their content (see below) - opt-in, so the other fifteen are untouched. */ .page-banner { background: var(--grad-deep); color: #fff; border-radius: var(--tg-radius-lg); /* Vertical padding cut roughly in half (was 34-64px top, 26-46px bottom). The band is a title strip, not a hero: at 64px top on a desktop it was pushing the page's actual content most of the way down the first screen. Horizontal padding is untouched - only the height was the problem. */ padding: clamp(20px, 3vw, 32px) clamp(18px, 5vw, 48px) clamp(18px, 2.6vw, 26px); margin: 10px auto 18px; box-shadow: var(--tg-shadow); position: relative; overflow: hidden; } /* Diagonal sheen. The gold wash that used to live here is now one of the layers inside --grad-deep, so this is free to do the job it was really standing in for: a soft light break across the band, which stops the large flat area from looking like printed card. */ .page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(104deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 34%, transparent 58%); pointer-events: none; } .page-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-accent); z-index: 1; } /* Optional measured column inside a banner, for pages whose banner holds more than a heading and one line of copy. */ .page-banner-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; } /* ---- Breadcrumb, for the top of a page banner ---- Scoped to .page-banner rather than a single page, so any of the other banner pages can drop the same