/* jobs.4ab.in — the thin layer on top of ab-design-system.css (never edited). * Unlayered on purpose (it must outrank the layered package — see ab-design-system.css's own * notes on @layer). Every value is an AB token where one exists. One block per concern. * Ported from chemistrytutors-directory/src/css/ct.css (same package, same fixes needed) and * adapted for a government-jobs directory: level pills instead of coaching/tutor/school/college * badges, a vacancy open/closing-soon/closed status pill (distinct from the /india/ coverage * live/collected/planned status), and a fraud-notice block that has no CT equivalent. */ /* Rule 8, second half: the visitor badge is hidden site-wide (numbers still collect server-side). */ #ab-visitor-counter { display: none !important; } /* Package bug — `.ab-page a {color:var(--navy)}` (0,1,1) beats every button variant (0,1,0). Restored to the package's own intended values. Same fix as every other AB-design site. */ .ab-base a.ab-btn--gold, .ab-page a.ab-btn--gold, .ab-base a.ab-btn--navy, .ab-page a.ab-btn--navy, .ab-base a.ab-btn--ghost, .ab-page a.ab-btn--ghost { color: #fff; } .ab-base a.ab-btn--ghost:hover, .ab-page a.ab-btn--ghost:hover { color: var(--gold-soft); } .ab-base a.ab-btn--line, .ab-page a.ab-btn--line, .ab-base a.ab-btn--line:hover, .ab-page a.ab-btn--line:hover { color: var(--navy); } .ab-base a.ab-credit__site { color: #E9C25F; } .ab-base a.ab-credit__site:hover, .ab-base a.ab-credit__site:focus-visible { color: #F7E7B2; } /* Drawer tiles equal at both levels (Rule 7) */ @media (max-width: 1239.98px) { .nav__list > .nav__item > .nav__link, .nav__mega .nav__sublink { min-height: 116px; padding: 12px 8px; box-sizing: border-box; justify-content: flex-start; align-content: start; } } /* §F-equivalent: the nested nav-tree box adds off-screen layout width while closed (measured on chemistrytutors) — clip it on , not , so document.scrollWidth stays honest without breaking overflow-y on the open panels. */ html { overflow-x: clip; } /* ---------- compact hero ---------- */ .jb-hero .ab-hero__panel { text-align: center; padding: clamp(28px, 4vw, 46px) clamp(26px, 6vw, 84px); background: radial-gradient(720px 300px at 50% -35%, rgba(201,168,76,.38), transparent 62%), var(--deep-navy-grad); } .jb-hero .ab-kicker::after { content: ""; width: 34px; height: 1.5px; background: var(--gold); } .jb-hero .ab-hero__meta { justify-content: center; } .jb-hero .ab-hero__lede { max-width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 760px) { .ab-hero:not(.ab-hero--compact) .ab-hero__panel { padding-top: clamp(24px, 6vw, 34px); padding-bottom: clamp(24px, 6vw, 34px); } } /* ---------- search box ---------- */ .jb-search { position: relative; max-width: 760px; margin: 22px auto 0; } .jb-search__in { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 8px 6px 18px; box-shadow: 0 18px 45px rgba(0,0,0,.25); } .jb-search__in svg { width: 20px; height: 20px; flex: 0 0 auto; color: #6B7280; } .jb-search__in input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.4 var(--font-body, system-ui, sans-serif); color: #1C2130; padding: 8px 0; } .jb-search__in input::placeholder { color: #6B7280; } .jb-search__go { flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px; font: 600 14px/1 var(--font-nav, sans-serif); color: #fff; background: var(--grad-cta, linear-gradient(90deg,#F97316,#FACC15)); } .jb-search__out { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60; display: none; background: var(--card-surface, #fff); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-lift); max-height: min(420px, 60vh); overflow: auto; text-align: left; } .jb-search__out[data-open="1"] { display: block; } .jb-search__out a { display: block; padding: 11px 16px; border-bottom: 1px solid var(--line, #E7E2D6); color: var(--ink); text-decoration: none; } .jb-search__out a:hover, .jb-search__out a:focus { background: var(--paper, #FAF9F6); } .jb-search__out a b { display: block; font: 600 14.5px/1.3 var(--font-nav, sans-serif); } .jb-search__out a span { font-size: 12.5px; color: var(--muted, #6B7280); } .jb-search__out .jb-search__note { padding: 11px 16px; font-size: 13px; color: var(--muted, #6B7280); } .jb-search--page { margin: 0 0 22px; } .jb-search--page .jb-search__in { background: var(--card-surface, #fff); border-color: var(--line, #E7E2D6); box-shadow: var(--shadow-soft); } .jb-search--page .jb-search__in input { color: var(--ink); } .jb-hero .ab-hero__panel:has(.jb-search__out[data-open="1"]) { overflow: visible; } /* ---------- grids ---------- */ .jb-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } @media (max-width: 1099.98px) { .jb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .jb-grid { grid-template-columns: 1fr; } } .jb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1099.98px) { .jb-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .jb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .jb-grid--4 { grid-template-columns: 1fr; } } /* ---------- body / vacancy cards ---------- */ .ab-page .jb-card { position: relative; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; height: 100%; } .jb-card__top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .jb-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 600 11px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: #fff; } .jb-badge--central { background: #2563EB; } .jb-badge--state { background: #0D9488; } .jb-badge--ut { background: #7C3AED; } .jb-badge--psu { background: #EA580C; } .jb-badge--autonomous { background: #16A34A; } .jb-badge--local { background: #475569; } .jb-hi { font: 400 12.5px/1.4 var(--font-body, sans-serif); color: var(--muted, #6B7280); } /* The state hero's h1 itself now also carries data-i18n="state.", so once Hindi is active this fixed secondary line would repeat the exact same text a second time right below it. */ html[lang="hi"] .jb-hi { display: none; } /* on a navy hero panel --muted is dark ink and would be unreadable */ .ab-hero__panel .jb-hi { color: rgba(255, 255, 255, .72); } .jb-examchip { display: inline-block; padding: 2px 9px; border-radius: 999px; margin: 0 6px 6px 0; background: var(--tint, rgba(201,168,76,.14)); color: var(--gold-ink, #8A6D1F); font: 600 11px/1.4 var(--font-nav, sans-serif); } .jb-card__exams { margin: 2px 0 0; } /* verified-link pill (A1-style, ported concept: honest about what has actually been checked) */ .jb-vpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 10.5px/1.5 var(--font-nav, sans-serif); letter-spacing: .02em; cursor: help; border: 1px solid transparent; } .jb-vpill--v { background: rgba(22,163,74,.14); color: #14603E; border-color: rgba(22,163,74,.3); } .jb-vpill--u { background: var(--tint, rgba(107,114,128,.12)); color: var(--muted, #6B7280); } :root[data-theme="dark"] .jb-vpill--v { background: rgba(16,185,129,.18); color: #6EE7B0; border-color: rgba(16,185,129,.4); } :root[data-theme="dark"] .jb-vpill--u { background: rgba(255,255,255,.08); color: var(--muted); } .ab-page .jb-card h3 { margin: 2px 0 0; font: 600 16.5px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ab-page .jb-card h3 a { color: inherit; text-decoration: none; } .ab-page .jb-card h3 small { font-weight: 400; color: var(--muted, #6B7280); } .jb-card__meta { margin: 0; font-size: 12.5px; color: var(--muted, #6B7280); } .jb-card__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; } .ab-page a.jb-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font: 600 12.5px/1 var(--font-nav, sans-serif); text-decoration: none; border: 1px solid var(--line, #E7E2D6); color: var(--ink); background: var(--card, #fff); min-height: 34px; } .ab-page a.jb-act--gold { background: var(--navy-900, #1B2A5E); border-color: transparent; color: #fff; } .ab-page a.jb-act--line { color: var(--navy); } .ab-page a.jb-act:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); } /* ---------- vacancy status pill (open / closing-soon / closed) ---------- */ .jb-status { display: inline-block; font: 700 10.5px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; } .jb-status--open { background: #E8F5EE; color: #14603E; } .jb-status--soon { background: #FFF4D6; color: #7A5A12; } .jb-status--closed { background: #F1F1F1; color: #6B7280; } :root[data-theme="dark"] .jb-status--open { background: rgba(16,185,129,.18); color: #6EE7B0; } :root[data-theme="dark"] .jb-status--soon { background: rgba(250,204,21,.18); color: #FACC15; } :root[data-theme="dark"] .jb-status--closed { background: rgba(255,255,255,.08); color: var(--muted); } .jb-closed-banner { border: 1px solid var(--line, #E7E2D6); border-left: 4px solid var(--muted, #6B7280); border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: 13.5px; color: var(--body-c); background: var(--card, #fff); } /* ---------- fraud / E-E-A-T notice — MASTER-PLAN.md rule 3, on every page ---------- Amber, not red. Red reads as "this page has an error"; this is a standing warning that is equally true on every page, so it must be noticeable without ever looking like a page fault. */ .jb-fraud { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line, #E7E2D6); border-left: 4px solid var(--hue-gold, #D97706); border-radius: 12px; padding: 15px 18px; font-size: 13.5px; line-height: 1.6; color: var(--body-c); background: var(--card, #fff); } .jb-fraud__ic { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; display: grid; place-items: center; background: var(--hue-gold, #D97706); color: #fff; font: 700 15px/1 var(--font-nav, sans-serif); } :root[data-theme="dark"] .jb-fraud__ic { color: #1C2130; } .jb-fraud b { color: var(--ink); } .jb-fraud a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; } .jb-fraud { margin-top: clamp(40px, 6vw, 64px); } .ab-s .jb-fraud { margin-top: 0; } /* inside a titled section the eyebrow already spaces it */ /* ---------- side-wise layout ---------- */ .jb-two { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } @media (max-width: 1099.98px) { .jb-two { grid-template-columns: 1fr; } } .jb-side { display: grid; gap: 18px; } .ab-page .jb-side .ab-panel { padding: 20px 20px 16px; } .jb-side h3 { margin: 0 0 10px; font: 600 15px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .jb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .jb-list li { font-size: 13.5px; line-height: 1.45; padding: 6px 0; border-bottom: 1px dashed var(--line, #E7E2D6); } .jb-list li:last-child { border-bottom: 0; } .jb-list li b { font-weight: 600; color: var(--ink); } .jb-list li span { color: var(--muted, #6B7280); font-size: 12.5px; display: block; } .jb-list li a { color: var(--navy); text-decoration: none; } .jb-list li a:hover { text-decoration: underline; } /* ---------- pills rail ---------- */ .jb-pills { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .jb-pills li { display: inline-flex; } .jb-pills a, .jb-pills span { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--line, #E7E2D6); border-radius: 999px; background: var(--card, #fff); font: 500 13.5px/1.2 var(--font-nav, sans-serif); color: var(--ink); text-decoration: none; } .jb-pills a::before, .jb-pills span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hue-blue, #2563EB); flex: 0 0 auto; } .jb-pills li:nth-child(6n+2) a::before { background: var(--hue-green, #16A34A); } .jb-pills li:nth-child(6n+3) a::before { background: var(--hue-rose, #E11D48); } .jb-pills li:nth-child(6n+4) a::before { background: var(--hue-purple, #7C3AED); } .jb-pills li:nth-child(6n+5) a::before { background: var(--hue-teal, #0D9488); } .jb-pills li:nth-child(6n+6) a::before { background: var(--gold, #C9A84C); } .jb-pills a:hover { border-color: var(--gold); box-shadow: var(--shadow-soft); } .jb-pills a small { color: var(--muted, #6B7280); font-weight: 400; } /* ---------- link cards (category / state / facet boxes on home) ---------- */ .ab-page .jb-link { position: relative; padding: 18px 18px 14px; } .ab-page .jb-link h3 { margin: 0 0 4px; font: 600 15.5px/1.3 var(--font-nav, sans-serif); color: var(--ink); } .ab-page .jb-link p { margin: 0; font-size: 12.5px; color: var(--muted, #6B7280); } .ab-page .jb-link .ab-card__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; text-indent: -9999px; overflow: hidden; } .ab-page .jb-link .ab-card__link:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; } .jb-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 0 12px rgba(201,168,76,.45)); } /* ---------- misc ---------- */ .jb-crumbs { margin: 0 0 14px; font: 500 12.5px/1.4 var(--font-nav, sans-serif); color: var(--muted, #6B7280); } .jb-crumbs a { color: var(--navy); text-decoration: none; } .jb-crumbs a:hover { text-decoration: underline; } .jb-note { font-size: 13px; color: var(--muted, #6B7280); margin: 10px 0 0; } .jb-count { font-family: var(--font-display, Georgia, serif); font-size: clamp(26px, 3vw, 34px); color: var(--ink); line-height: 1; } .jb-h3 { margin: 26px 0 12px; font: 600 18px/1.3 var(--font-nav, sans-serif); color: var(--ink); display: flex; align-items: center; gap: 10px; } .jb-h3 small { font: 500 12.5px/1 var(--font-nav, sans-serif); color: var(--muted); } .jb-h3:first-child { margin-top: 0; } .jb-more { text-align: center; margin-top: 16px; } .jb-hidden { display: none !important; } .jb-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .jb-table th, .jb-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line, #E7E2D6); vertical-align: top; } .jb-table th { font: 600 12px/1.4 var(--font-nav, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .jb-table-wrap { overflow-x: auto; } .jb-form-list { margin: 0; padding-left: 20px; } .jb-form-list li { margin-bottom: 6px; } /* ---------- /india/ coverage — live / collected / planned boxes ---------- */ .jb-cov { border-top: 4px solid var(--line, #E7E2D6); padding: 22px 24px !important; } .jb-cov + .jb-cov { margin-top: 18px; } .jb-cov--live { border-top-color: var(--hue-green, #16A34A); } .jb-cov--next { border-top-color: var(--gold, #C9A84C); } .jb-cov--planned { border-top-color: var(--muted, #6B7280); } .jb-plan-cols { columns: 2; column-gap: 24px; } @media (min-width: 1100px) { .jb-plan-cols { columns: 4; } } @media (max-width: 640px) { .jb-plan-cols { columns: 1; } } .jb-plan-block { break-inside: avoid; margin: 0 0 10px; font-size: 12.5px; line-height: 1.42; } .jb-plan-block b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; } .jb-plan-block span { color: var(--muted, #6B7280); } .jb-plan-block span a { color: var(--navy); text-decoration: none; } .jb-plan-block span a:hover { text-decoration: underline; } /* ---------- filter dropdowns (Level / State / Education) ---------- */ .jb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; } .jb-filters label { display: flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--font-nav, sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6B7280); } .jb-filters select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--card, #fff) url("data:image/svg+xml;utf8,") no-repeat right 10px center; background-size: 13px; border: 1px solid var(--line, #E7E2D6); border-radius: 999px; padding: 8px 30px 8px 14px; font: 600 13px/1.2 var(--font-nav, sans-serif); color: var(--ink); cursor: pointer; max-width: 220px; text-overflow: ellipsis; } .jb-filters select:hover { border-color: var(--gold); } .jb-filters select:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; } .jb-filters__count { font: 500 12.5px/1.2 var(--font-nav, sans-serif); color: var(--muted, #6B7280); margin-left: auto; } .jb-grp-label { margin: 0 0 6px; font: 700 10px/1.2 var(--font-nav, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink, #8A6D1F); } @media (min-width: 1100px) { .jb-cont-grid > .jb-grp-first { border-left: 1px solid var(--gold, #C9A84C); } } .jb-cont-grid > .ab-card.jb-filtered-out { display: none !important; } /* ---------- mobile: full width ---------- */ @media (max-width: 640px) { .ab-wrap { padding: 0 8px; } .ab-page .ab-panel { padding: 14px 10px; } .ab-page .jb-card { padding: 16px 10px; } .jb-hero { padding: 0; margin-top: 0; } .jb-hero.jb-hero .ab-hero__panel { padding: 22px 14px; } .ab-s { margin-top: clamp(36px, 8vw, 64px); } .jb-side { gap: 12px; } .ab-page .ab-panel > .jb-grid { margin-left: -10px; margin-right: -10px; } } /* ---------- fixed contact bar: Call / WhatsApp / Report a fake job ---------- */ .jbcb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(110%); transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; } .jbcb.is-on { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .28s ease, transform .28s ease, visibility 0s; } .jbcb.is-on .jbcb-main { pointer-events: auto; } .jbcb-main { display: flex; gap: 7px; padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--card, #fff); border-top: 1px solid var(--line, #E7E2D6); box-shadow: 0 -4px 18px rgba(18,33,58,.14); pointer-events: none; } .jbcb-main a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 8px; border-radius: 10px; text-decoration: none; border: 0; font: 700 12.5px/1.15 var(--font-nav, sans-serif); white-space: nowrap; color: #fff; } .jbcb-main a:hover { text-decoration: none; filter: brightness(1.08); } .jbcb-main svg { width: 17px; height: 17px; flex: none; } .jbcb-call { background: linear-gradient(180deg, #24356e, var(--navy-900, #1B2A5E)); } .jbcb-wa { background: linear-gradient(180deg, #2fdb75, #25D366); } .jbcb-report { background: var(--grad-cta, linear-gradient(180deg,#fb8a3c,#f97316)); } .jbcb-lbl { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; } .jbcb-lbl small { font-weight: 600; font-size: 10.5px; opacity: .88; } body.jbcb-pad { padding-bottom: 70px; } body.jbcb-pad .ab-credit { margin-bottom: 70px; } .jbcb.jbcb--hide { display: none; } @media (min-width: 761px) { .jbcb { left: 50%; right: auto; transform: translateX(-50%) translateY(160%); width: min(600px, calc(100% - 48px)); bottom: 18px; } .jbcb.is-on { transform: translateX(-50%) translateY(0); } .jbcb-main { border-radius: 16px; border: 1.5px solid var(--line, #dbe1e9); box-shadow: 0 10px 30px rgba(18,33,58,.18); padding: 9px; } .jbcb-main a { height: 48px; } body.jbcb-pad { padding-bottom: 0; } body.jbcb-pad .ab-credit { margin-bottom: 0; } } @media print { .jbcb { display: none !important; } } /* ---------- §F nested nav tree (Categories / States mega menus) ---------- */ .nav__mega--tree { min-width: 280px; } .nav__tree-l2i { position: relative; } .nav__tree-l2i > .nav__mega { min-width: 260px; max-height: 380px; overflow-y: auto; } .nav__tree-soon { display: block; padding: 8px 10px; font: 500 12.5px/1.3 var(--font-nav, sans-serif); color: var(--muted, #6B7280); } @media (min-width: 1240px) { .nav__list { position: relative; } .nav__item--has-sub:has(> .nav__mega--tree) { position: static; } .nav__mega--tree { left: 0; right: auto; width: min(720px, calc(100vw - 48px)); display: grid; grid-template-columns: 252px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 260px; } .nav__mega--tree > .nav__mega-title { grid-column: 1; grid-row: 1; } .nav__mega--tree > .nav__mega-grid { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); max-height: 320px; overflow-y: auto; padding-right: 6px; } .nav__mega--tree > .nav__mega-grid > .nav__tree-l2i { position: static; } .nav__mega--tree .nav__tree-l2i > .nav__mega { position: absolute; top: 14px; bottom: 16px; left: 284px; right: 16px; width: auto; min-width: 0; max-height: none; overflow-y: auto; background: var(--paper, #FAF9F6); border: 1px solid var(--line-soft, #E7E2D6); border-radius: 12px; box-shadow: none; transform: none; padding: 12px 12px 14px; } .nav__mega--tree .nav__tree-l2i > .nav__mega::before { display: none; } .nav__mega--tree .nav__tree-l2i > .nav__mega > .nav__mega-grid, .nav__mega--tree .nav__tree-l2i > .nav__mega.nav__mega--2 > .nav__mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav__mega--tree .nav__tree-l2i > .nav__mega > .nav__mega-title { padding-left: 4px; } .nav__mega--tree > .nav__mega-grid > .nav__tree-l2i:first-child > .nav__mega { opacity: 1; visibility: visible; } .nav__mega--tree > .nav__mega-grid:has(> .nav__tree-l2i:hover) > .nav__tree-l2i:first-child:not(:hover) > .nav__mega, .nav__mega--tree > .nav__mega-grid:has(> .nav__tree-l2i:focus-within) > .nav__tree-l2i:first-child:not(:focus-within) > .nav__mega { opacity: 0; visibility: hidden; } .nav__mega { padding: 14px 16px 16px; } .nav__mega-title { margin-bottom: 6px; padding-bottom: 6px; } .nav__mega-grid { gap: 0 10px; } .nav__sublink { padding: 6px 8px; gap: 9px; min-height: 0; } .nav__sublink .nav__mega-icon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 6px; } .nav__sublink .nav__mega-icon svg { width: 13px; height: 13px; } } @media (max-width: 1239.98px) { .nav__tree-l2i > .nav__mega { margin-top: 8px; max-height: none; overflow: visible; } } /* ---------- touch targets ---------- */ @media (max-width: 1099.98px) { .jb-filters select { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } .ab-page a.jb-act, .ab-page .jb-act { min-height: 44px; padding: 10px 14px; } .jb-pills a, .jb-pills span { min-height: 44px; } .jb-list li a { display: inline-block; min-height: 30px; } } /* ---------- state / district-style hub grid (small counts) ---------- */ .jb-dist-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } @media (max-width: 900px) { .jb-dist-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 480px) { .jb-dist-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ DESIGN PASS (Opus, 2026-09-03) — OPUS-DESIGN-BRIEF.md Everything below is the jobs-specific design layer: the body detail page (the product), the vacancy post, the home category boxes, the closing-this-week list and the site footer. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* utility: visually hidden but read by assistive tech (table captions) */ .jb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* the ↗ that marks a link leaving this site for the body's own domain */ .jb-ext { font-size: .85em; opacity: .75; margin-left: 2px; } /* ---------- HOME: 12 category boxes (4 × 3 desktop / 2 × 6 tablet / 1 × 12 phone) ---------- */ .jb-catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1099.98px) { .jb-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .jb-catgrid { grid-template-columns: 1fr; } } .ab-page .jb-catbox { padding: 20px 20px 18px; } .ab-page .jb-catbox .jb-count { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 8px; } .ab-page .jb-catbox .jb-count small { font: 600 11px/1 var(--font-nav, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #6B7280); font-family: var(--font-nav, sans-serif); } .ab-page .jb-catbox__l { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6B7280); } .ab-page .jb-catbox__l + .jb-catbox__l { margin-top: 1px; } @media (max-width: 640px) { /* one per row: the box becomes a wide row, so icon and text sit side by side rather than stacking into a 200px-tall block the reader has to scroll past twelve times. */ .ab-page .jb-catbox { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: start; } .ab-page .jb-catbox .jb-icon { grid-row: 1 / span 4; font-size: 30px; margin: 2px 0 0; } .ab-page .jb-catbox h3, .ab-page .jb-catbox .jb-count, .ab-page .jb-catbox__l { grid-column: 2; } .ab-page .jb-catbox .jb-count { font-size: 22px; margin: 0 0 4px; } } /* ---------- HOME: "closing this week" — a date list, not a card wall ---------- */ .jb-closing { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .jb-closing__row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; } .jb-closing__row:nth-child(odd) { background: var(--paper, #FAF9F6); } .jb-closing__row:hover { border-color: var(--line, #E7E2D6); } .jb-closing__d { text-align: center; line-height: 1.05; } .jb-closing__d b { display: block; font: 600 14px/1.15 var(--font-nav, sans-serif); color: var(--ink); } .jb-closing__d small { font-size: 10.5px; color: var(--muted, #6B7280); } .jb-closing__t { min-width: 0; } .jb-closing__t a { display: block; font: 600 14.5px/1.35 var(--font-nav, sans-serif); color: var(--ink); text-decoration: none; } .jb-closing__t a:hover { color: var(--navy); text-decoration: underline; } .jb-closing__t small { display: block; font-size: 12px; color: var(--muted, #6B7280); margin-top: 2px; } @media (max-width: 640px) { .jb-closing__row { grid-template-columns: 54px minmax(0, 1fr); row-gap: 6px; padding: 12px 10px; min-height: 60px; } .jb-closing__row .jb-status { grid-column: 2; justify-self: start; } } /* ---------- BODY PAGE: identity header ---------- */ .jb-bh .ab-hero__panel { text-align: left; } .jb-bh .ab-kicker { justify-content: flex-start; } .jb-bh .ab-kicker::after { margin-left: 0; } .jb-bh .ab-hero__meta, .jb-bh .ab-hero__lede { justify-content: flex-start; margin-left: 0; margin-right: 0; } .ab-page .jb-bh__h1 { margin: 0 0 6px; display: block; } .jb-bh__short { display: block; font-family: var(--font-display, Georgia, serif); font-weight: 400; line-height: 1.08; } .jb-bh__short--long { font-size: .82em; } .jb-bh__full { display: block; margin-top: 8px; font: 500 clamp(15px, 1.6vw, 19px)/1.35 var(--font-nav, sans-serif); color: var(--gold-soft, #E8D9AE); letter-spacing: .01em; } .jb-bh__hi { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.72); } .jb-bh .ab-hero__meta { margin-top: 22px; } /* Hindi mode: a body's recorded name_hi becomes the PRIMARY line (task 2). Pure CSS keyed on , which jobs.js sets on toggle (and the no-flash script sets on load for a returning Hindi visitor) — no extra JS needed for this swap. `:has()` scopes the shrink to only the (common) case where name_hi actually exists as the next sibling; a body with no name_hi has no .jb-bh__hi element at all, so the h1 is correctly left at full size for it. Browsers without :has() simply skip the swap — the English name still displays normally, never broken. */ .jb-bh .ab-hero__panel { display: flex; flex-direction: column; } .jb-bh .ab-kicker { order: 0; } .jb-bh__h1 { order: 1; } .jb-bh__hi { order: 2; } .jb-bh .ab-hero__meta { order: 3; } html[lang="hi"] .jb-bh__h1:has(+ .jb-bh__hi) { order: 2; margin: 4px 0 0; } html[lang="hi"] .jb-bh__hi { order: 1; margin: 0 0 6px; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; font-family: var(--font-display, Georgia, serif); font-weight: 400; color: inherit; opacity: 1; } html[lang="hi"] .jb-bh__h1:has(+ .jb-bh__hi) .jb-bh__short, html[lang="hi"] .jb-bh__h1:has(+ .jb-bh__hi) .jb-bh__short--long { font-size: 15px; font-weight: 500; opacity: .78; font-family: var(--font-nav, sans-serif); } html[lang="hi"] .jb-bh__h1:has(+ .jb-bh__hi) .jb-bh__full { display: none; } /* Devanagari should never be auto-hyphenated (task 2) */ html[lang="hi"] { hyphens: none; -webkit-hyphens: none; } /* ---------- BODY PAGE: official-links action bar (light, so gold + navy both read) ---------- */ .jb-actbar { margin-top: -18px; position: relative; z-index: 2; background: var(--card-surface, #fff); border: 1px solid var(--line, #E7E2D6); border-radius: var(--r-md, 18px); box-shadow: var(--shadow-lift); padding: 18px 20px 16px; display: grid; gap: 12px; } .jb-actbar__links { display: flex; flex-wrap: wrap; gap: 10px; } .ab-page .jb-actbar .ab-btn { padding: 12px 22px; font-size: 13.5px; } .jb-actbar__v { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .jb-actbar__v .jb-note { margin: 0; } @media (max-width: 640px) { .jb-actbar { padding: 14px 12px 12px; margin-top: -12px; } .jb-actbar__links { display: grid; grid-template-columns: 1fr; } .ab-page .jb-actbar .ab-btn { justify-content: center; min-height: 48px; } } /* ---------- BODY PAGE: exams table → stacked definition cards on a phone ---------- */ .jb-exams { margin: 0; } .jb-table--stack td b { display: block; font-weight: 600; color: var(--ink); } .jb-table--stack td em { display: block; margin-top: 3px; font-style: normal; font-size: 12.5px; line-height: 1.45; color: var(--muted, #6B7280); } .jb-table--stack tbody tr:hover { background: var(--paper, #FAF9F6); } /* fixed proportions so a long "posts" cell cannot squeeze Education/Age/Frequency to one word per line — the four short columns are what a reader scans down. */ .jb-table--stack { table-layout: fixed; } .jb-table--stack th:nth-child(1) { width: 34%; } .jb-table--stack th:nth-child(2) { width: 30%; } .jb-table--stack th:nth-child(3) { width: 14%; } .jb-table--stack th:nth-child(4) { width: 9%; } .jb-table--stack th:nth-child(5) { width: 13%; } .jb-table--stack td { overflow-wrap: anywhere; } @media (max-width: 760px) { /* No horizontally-scrolling table on a phone: each row becomes its own bordered card and every cell carries the column name it lost. */ .jb-table--stack, .jb-table--stack thead, .jb-table--stack tbody, .jb-table--stack tr, .jb-table--stack th, .jb-table--stack td { display: block; } .jb-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .jb-table--stack tr { border: 1px solid var(--line, #E7E2D6); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--card, #fff); } .jb-table--stack tr:hover { background: var(--card, #fff); } .jb-table--stack td { border: 0; padding: 0; } .jb-table--stack td + td { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #E7E2D6); } .jb-table--stack td::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 700 10px/1.3 var(--font-nav, sans-serif); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-ink, #8A6D1F); } .jb-table--stack td:first-child::before { display: none; } /* the exam name IS the heading */ .jb-table--stack td:first-child { width: auto; } .jb-table--stack td:first-child b { font-size: 15px; line-height: 1.35; } } /* ---------- BODY PAGE: qualification chips, contact list, empty state, report line ---------- */ .jb-eduline { margin: 14px 0 0; font-size: 13.5px; } .ab-page a.jb-educhip { display: inline-block; margin: 4px 6px 0 0; padding: 4px 11px; border-radius: 999px; background: var(--tint, rgba(201,168,76,.14)); color: var(--gold-ink, #8A6D1F); font: 600 12px/1.5 var(--font-nav, sans-serif); text-decoration: none; } .ab-page a.jb-educhip:hover { background: var(--gold, #C9A84C); color: #1C2130; } .jb-list--contact li { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; } .jb-list--contact li span { display: block; color: var(--body-c); font-size: 13.5px; } @media (max-width: 520px) { .jb-list--contact li { grid-template-columns: 1fr; gap: 2px; } } .jb-empty { margin: 0; padding: 18px 20px; border-radius: 12px; border: 1px dashed var(--line, #E7E2D6); background: var(--paper, #FAF9F6); color: var(--body-c); font-size: 13.5px; line-height: 1.6; } .jb-reportline { margin: clamp(34px, 5vw, 54px) 0 0; padding-top: 18px; border-top: 1px solid var(--line, #E7E2D6); font-size: 13px; color: var(--muted, #6B7280); text-align: center; } .jb-reportline a { color: var(--navy); } .jb-fromlink { color: var(--gold-soft, #E8D9AE); text-decoration: underline; text-underline-offset: 3px; } .jb-fromlink:hover { color: #fff; } /* ---------- VACANCY PAGE: tinted fact tiles ---------- */ .jb-stats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .jb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .jb-stats { grid-template-columns: 1fr; } } /* background + border-colour come from the tile's own `ab-tint-N` class (package rule `.ab-page .ab-tint-N`, specificity 0,2,0) — declaring a background here would fight it. */ .jb-stat { padding: 14px 16px 13px; border-radius: 12px; border: 1px solid var(--line, #E7E2D6); } .jb-stat span { display: block; font: 700 10px/1.3 var(--font-nav, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6B7280); margin-bottom: 5px; } .jb-stat b { display: block; font: 600 15.5px/1.35 var(--font-nav, sans-serif); color: var(--ink); } /* the single primary call to action, repeated top and bottom of a vacancy page */ .jb-cta-official { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; } .jb-cta-official__note { flex: 1 1 220px; font-size: 12.5px; line-height: 1.5; color: var(--muted, #6B7280); } .jb-cta-official.is-closed { opacity: .82; } @media (max-width: 640px) { .jb-cta-official { display: grid; } .ab-page .jb-cta-official .ab-btn { justify-content: center; min-height: 48px; width: 100%; } } /* ---------- SITE FOOTER — /about/, /privacy/ and /disclaimer/ are reachable from nowhere else --------- */ .jb-foot { background: var(--paper, #FAF9F6); border-top: 1px solid var(--line, #E7E2D6); margin-top: clamp(52px, 8vw, 96px); } .jb-foot__in { max-width: var(--wrap, 1360px); margin: 0 auto; padding: 34px 24px 30px; display: grid; gap: 26px 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .jb-foot__col h2 { margin: 0 0 12px; font: 700 10.5px/1.3 var(--font-nav, sans-serif); letter-spacing: .09em; text-transform: uppercase; color: var(--gold-ink, #8A6D1F); } .jb-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .jb-foot__col a { display: inline-block; padding: 4px 0; font-size: 13px; line-height: 1.45; color: var(--body-c); text-decoration: none; } .jb-foot__col a:hover, .jb-foot__col a:focus-visible { color: var(--navy); text-decoration: underline; } .jb-foot__col--note p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--muted, #6B7280); } .jb-foot__contact a { font: 600 15px/1.3 var(--font-nav, sans-serif); color: var(--navy); } @media (max-width: 900px) { .jb-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1099.98px) { /* a footer link is a touch target like any other — 44px minimum, same rule as the cards */ .jb-foot__col a { display: flex; align-items: center; min-height: 44px; padding: 2px 0; } } @media (max-width: 520px) { .jb-foot__in { grid-template-columns: 1fr; gap: 20px; padding: 26px 14px 24px; } } /* the contact bar must never sit on top of the credit bar — pad the whole document, not the main */ body.jbcb-pad .jb-foot { margin-bottom: 0; } /* ---------- status pill inside a hero chip: the pill IS the chip, don't box it twice ---------- */ .ab-hero__meta .ab-chip:has(> .jb-status) { padding: 0; border: 0; background: none; } .ab-hero__meta .jb-status { padding: 7px 15px; font-size: 11px; } /* ---------- accessibility: honour reduced motion, and never lose a focus ring ---------- */ @media (prefers-reduced-motion: reduce) { .ab-page a.jb-act:hover, .jb-closing__row:hover { transform: none; } .jbcb { transition: none; } } .jb-closing__t a:focus-visible, .jb-foot__col a:focus-visible, .jb-crumbs a:focus-visible, .ab-page a.jb-act:focus-visible, .ab-page a.jb-educhip:focus-visible, .jbcb-main a:focus-visible { outline: 3px solid var(--gold-ink, #8A6D1F); outline-offset: 2px; border-radius: 6px; } /* ---------- Hindi/English toggle (task 2) — names the ACTIVE language, >=44px per spec ---------- */ .lang-toggle { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 10px; flex-shrink: 0; border-radius: 22px; border: 1.5px solid var(--line); background: var(--card); color: var(--navy); font: 700 13px/1 var(--font-nav, sans-serif); letter-spacing: .02em; cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; } .lang-toggle:hover { border-color: var(--gold); color: var(--gold-ink); transform: translateY(-1px); } .lang-toggle:focus-visible { outline: 3px solid var(--gold-ink, #8A6D1F); outline-offset: 2px; }