/* SGF-TG portal house style (docs/specs/government-identity, GOV-R1), served by the gateway at /assets/shared.css and used by the public JSP pages and the officer app alike. Taken from the vendor mockup the Department saw (reference/SGF-TG-Portal-Mockup.html), which follows the Government of India / Telangana web pattern: Arial 13 px body, maroon primary with navy and gold, boxed panels, square corners, dense tables. Replace the tokens below once the Department's branding guidelines arrive (department-questions.md H3). */ :root { --maroon: #7b1416; --maroon-d: #5d0f11; --navy: #1b3a6b; --navy-d: #16305a; --gold: #c8963e; --ink: #212121; --muted: #5a5a5a; --line: #c9c9c9; --bg: #eef0f2; --panel: #ffffff; --head: #e7e9ec; --green: #1c6b2d; --red: #b02020; --amber: #9a6c00; --link: #0b4a8f; --serif: Georgia, "Times New Roman", serif; --telugu: "Nirmala UI", "Gautami", sans-serif; /* The old names, kept for the JSP pages' own styles. */ --sgftg-primary: var(--maroon); --sgftg-accent: var(--gold); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 13px/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 12px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Accessibility / utility strip ------------------------------------------------------------------------------- */ .utility { background: #2c2c2c; color: #ddd; font-size: 11.5px; } .utility .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 4px 12px; } .utility a, .utility button { color: #ddd; background: none; border: 0; font: inherit; padding: 0; cursor: pointer; } .utility a:hover, .utility button:hover { color: #fff; text-decoration: underline; } .utility .sp { margin-left: auto; display: flex; align-items: center; gap: 14px; } .utility .txtsize button { border: 1px solid #777; padding: 0 5px; margin-left: 3px; font-weight: bold; line-height: 1.4; } .utility .lang b { font-weight: normal; } .utility .lang b.on { color: var(--gold); font-weight: bold; } .utility .lang [lang="te"] { font-family: var(--telugu); } .skip { position: absolute; left: -9999px; } .skip:focus { position: static; left: auto; } /* Text size buttons set data-size on . */ html[data-size="large"] body { font-size: 15px; } html[data-size="larger"] body { font-size: 17px; } /* Masthead ------------------------------------------------------------------------------------------------------ */ .masthead { background: #fff; border-bottom: 3px solid var(--gold); } .masthead .wrap { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; } .masthead .emblem { width: 74px; height: auto; flex: 0 0 74px; display: block; } .masthead .mast-txt { line-height: 1.25; } .masthead .te { font-size: 12px; color: var(--muted); font-family: var(--telugu); } .masthead .gov { font-size: 14px; font-weight: bold; letter-spacing: .4px; color: #4a4a4a; text-transform: uppercase; } .masthead .dept { font-family: var(--serif); font-size: 21px; font-weight: bold; color: var(--maroon); } .masthead .dept a { color: inherit; } .masthead .sub { font-size: 11.5px; color: #555; } .masthead .mast-right { margin-left: auto; text-align: right; } .masthead .ss-logo { border: 1px solid var(--line); padding: 5px 10px; display: inline-block; text-align: center; line-height: 1.25; } .masthead .ss-logo .a { font-family: var(--serif); font-weight: bold; color: var(--navy); font-size: 13px; } .masthead .ss-logo .b { font-size: 9.5px; color: #666; letter-spacing: .5px; } @media (max-width: 700px) { .masthead .mast-right { display: none; } .masthead .dept { font-size: 17px; } .masthead .emblem { width: 56px; flex-basis: 56px; } } /* Primary navigation -------------------------------------------------------------------------------------------- */ nav.main { background: var(--maroon); border-bottom: 1px solid var(--maroon-d); } nav.main .wrap { display: flex; flex-wrap: wrap; padding: 0 12px; } nav.main a { color: #fff; font-size: 12.5px; padding: 9px 13px; display: block; border-right: 1px solid rgba(255, 255, 255, .16); white-space: nowrap; } nav.main a:hover { background: var(--maroon-d); text-decoration: none; } nav.main a[aria-current="page"], nav.main a.on { background: var(--maroon-d); box-shadow: inset 0 -3px 0 var(--gold); } nav.main .right { margin-left: auto; } nav.main .right a { background: var(--navy); border-right: none; } nav.main .right a:hover { background: #12294c; } /* Latest updates ticker ----------------------------------------------------------------------------------------- */ .ticker { background: #fdf6e3; border-bottom: 1px solid #e3d6ae; overflow: hidden; } .ticker .wrap { display: flex; align-items: center; gap: 10px; padding: 5px 12px; } .ticker .tag { background: var(--maroon); color: #fff; font-size: 11px; padding: 2px 8px; flex: 0 0 auto; letter-spacing: .4px; } .ticker .track { overflow: hidden; flex: 1; } .ticker .track ul { display: inline-block; white-space: nowrap; padding-left: 100%; margin: 0; list-style: none; animation: mq 42s linear infinite; font-size: 12px; } .ticker .track:hover ul, .ticker .track:focus-within ul { animation-play-state: paused; } .ticker .track li { display: inline; margin-right: 54px; } .new { color: var(--red); font-size: 9.5px; vertical-align: super; font-weight: bold; margin-left: 4px; } @keyframes mq { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .ticker .track ul { animation: none; padding-left: 0; white-space: normal; } .ticker .track li { display: block; } } /* Breadcrumb ---------------------------------------------------------------------------------------------------- */ .crumb { background: #dfe3e8; border-bottom: 1px solid #c6ccd3; font-size: 11.5px; color: #555; } .crumb .wrap { padding: 5px 12px; } .crumb .now { color: #222; font-weight: bold; } /* Layout and panels --------------------------------------------------------------------------------------------- */ main { padding: 14px 0 26px; } .cols { display: flex; gap: 14px; align-items: flex-start; } .cols > .content { flex: 1 1 auto; min-width: 0; } .cols > .side { flex: 0 0 300px; } @media (max-width: 860px) { .cols { flex-direction: column; } .cols > .side { flex-basis: auto; width: 100%; } } .panel { background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; } .panel > h2 { margin: 0; font-size: 13px; font-weight: bold; padding: 7px 10px; background: var(--head); border-bottom: 1px solid var(--line); color: #2c2c2c; display: flex; align-items: center; gap: 8px; } .panel > h2 .r { margin-left: auto; font-weight: normal; font-size: 11.5px; color: #666; } .panel .in { padding: 11px; } .panel.hl > h2 { background: var(--maroon); color: #fff; border-bottom-color: var(--maroon-d); } .panel.hl > h2 .r { color: #f2d9a8; } h3.sec { font: bold 13px Arial, sans-serif; margin: 14px 0 7px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: #2c2c2c; } h3.sec:first-child { margin-top: 0; } .hero { border: 1px solid var(--navy-d); background: linear-gradient(#25507f, var(--navy)); color: #fff; padding: 22px 20px; margin-bottom: 14px; } .hero h1 { font-family: var(--serif); font-size: 24px; margin: 0 0 8px; font-weight: normal; } .hero p { margin: 0 0 10px; font-size: 13.5px; max-width: 760px; } .hero .chip { display: inline-block; border: 1px solid rgba(255, 255, 255, .5); padding: 3px 10px; font-size: 12px; } .quick { display: flex; gap: 12px; flex-wrap: wrap; } .quick a { flex: 1 1 180px; border: 1px solid var(--line); border-top: 4px solid var(--maroon); background: #fff; padding: 10px 12px; color: inherit; } .quick a:hover { text-decoration: none; background: #fff8e8; } .quick a b { display: block; color: var(--navy); margin-bottom: 4px; } .quick a span { font-size: 12px; color: #555; } .empty { padding: 26px 12px; text-align: center; color: #777; font-size: 12.5px; background: #fafbfc; border: 1px dashed #cfd4d9; } .placeholder { background: #fdf6e3; border: 1px solid #e0cb8e; color: #6b5000; padding: 8px 11px; font-size: 12.5px; } .muted { color: #666; font-size: 11.5px; } .lead { margin: 0 0 12px; color: #444; } /* Tables -------------------------------------------------------------------------------------------------------- */ .scroll { overflow-x: auto; } table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; } table.grid th { background: var(--navy); color: #fff; font-weight: bold; text-align: left; padding: 6px 8px; border: 1px solid var(--navy-d); font-size: 12px; white-space: nowrap; } table.grid td { padding: 5px 8px; border: 1px solid #d7d7d7; vertical-align: top; } table.grid tbody tr:nth-child(even) { background: #f6f7f9; } table.grid tbody tr:hover { background: #fff8e8; } table.grid td.n, table.grid th.n { text-align: right; font-variant-numeric: tabular-nums; } table.grid td.c, table.grid th.c { text-align: center; } table.kv { border-collapse: collapse; font-size: 12.5px; width: 100%; } table.kv td { padding: 4px 8px; border-bottom: 1px dotted #ddd; vertical-align: top; } table.kv td:first-child { color: #555; width: 40%; } /* Forms --------------------------------------------------------------------------------------------------------- */ label.f { display: block; font-size: 12px; color: #444; margin-bottom: 3px; } .req { color: var(--red); } input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="search"], input[type="file"], select, textarea { font: inherit; padding: 5px 7px; border: 1px solid #a9a9a9; background: #fff; border-radius: 0; max-width: 100%; } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; } .btn, button.btn { font: bold 12.5px Arial, sans-serif; padding: 6px 14px; border: 1px solid var(--maroon-d); background: var(--maroon); color: #fff; cursor: pointer; border-radius: 0; text-decoration: none; display: inline-block; } .btn:hover { background: var(--maroon-d); text-decoration: none; } .btn.secondary { background: #fff; color: var(--maroon); } .btn.secondary:hover { background: #fdf6e3; } .btn.navy { background: var(--navy); border-color: var(--navy-d); } .btn:disabled { opacity: .6; cursor: progress; } /* Status chips and messages ------------------------------------------------------------------------------------- */ .st { font-size: 11px; padding: 1px 6px; border: 1px solid; display: inline-block; white-space: nowrap; line-height: 1.55; } .st.p { color: var(--amber); border-color: #d8b96a; background: #fdf6e3; } .st.a { color: var(--green); border-color: #9ccaa6; background: #eef7f0; } .st.r { color: var(--red); border-color: #e0a5a5; background: #fdeeee; } .st.f { color: var(--navy); border-color: #a9bcd8; background: #eef3fa; } .st.x { color: #555; border-color: #c9c9c9; background: #eceff2; } .medal { font-weight: bold; } .m1 { color: #8a6d00; } .m2 { color: #5a656d; } .m3 { color: #8a5527; } .msg { padding: 8px 11px; border: 1px solid; font-size: 12.5px; margin-bottom: 12px; } .msg.i { background: #eef3fa; border-color: #b6cbe6; color: var(--navy); } .msg.w { background: #fdf6e3; border-color: #e0cb8e; color: #6b5000; } .msg.s { background: #eef7f0; border-color: #a8cfb2; color: #14501f; } .msg.e { background: #fdeeee; border-color: #e0a5a5; color: #8a1a1a; } .stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .stat { flex: 1 1 150px; border: 1px solid var(--line); background: #fff; padding: 9px 11px; border-left: 4px solid var(--navy); color: inherit; text-decoration: none; } .stat .k { font-size: 11.5px; color: var(--muted); } .stat .v { font-size: 23px; font-weight: bold; font-family: var(--serif); color: var(--navy); line-height: 1.3; } .stat.m { border-left-color: var(--maroon); } .stat.m .v { color: var(--maroon); } .stat.g { border-left-color: var(--green); } .stat.g .v { color: var(--green); } .stat.a { border-left-color: var(--amber); } .stat.a .v { color: var(--amber); } .bar { background: #eceff2; height: 14px; border: 1px solid #d3d8dd; position: relative; min-width: 90px; } .bar i { display: block; height: 100%; background: var(--navy); } /* Footer -------------------------------------------------------------------------------------------------------- */ footer.gov { background: #2b2b2b; color: #c9c9c9; font-size: 12px; margin-top: 12px; } footer.gov .cols3 { display: flex; gap: 26px; flex-wrap: wrap; padding: 18px 0 12px; } footer.gov .cols3 > div { flex: 1 1 210px; } footer.gov h3 { margin: 0 0 7px; font-size: 12.5px; color: #fff; font-weight: bold; letter-spacing: .3px; } footer.gov a { color: #c9c9c9; display: block; padding: 2px 0; font-size: 12px; } footer.gov p { margin: 0; line-height: 1.6; } footer.gov .muted { color: #a3a3a3; } footer.gov .bottom { border-top: 1px solid #454545; padding: 8px 0; font-size: 11px; color: #9d9d9d; display: flex; flex-wrap: wrap; gap: 12px; } footer.gov .bottom .r { margin-left: auto; }