/* NNUH jobs portal — house style. * * Loads after the purchased theme and after tokens.css. * * The split matters, and the first version of this file got it wrong. Only * two things are safe to change site-wide: the typeface and the palette. * Those are what tokens.css remaps and what section 1 below finishes. * Everything structural — control heights, flex layouts, table chrome — is * scoped to `.nnuh-panel`, the class the control panel templates put on * . Applying those rules globally reflowed the public pages, which are * built on the purchased theme's own layout and do not want ours. * * Direction-agnostic throughout: margin-inline / padding-inline / start / * end, because the site runs RTL in Arabic and LTR in English off one set of * rules. */ /* ══════════════════════════════════════════════════════════════ 1. Site-wide: type, colour, focus. Nothing here moves anything. ══════════════════════════════════════════════════════════════ */ body { font-family: var(--nnuh-font); color: var(--nnuh-body); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--nnuh-font); color: var(--nnuh-ink); font-weight: 700; } /* Arabic has no letterforms that benefit from negative tracking, and tightening it damages the joins. The theme applies it broadly. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: normal; } a { color: var(--nnuh-link); } a:hover, a:focus { color: var(--nnuh-link-hover); } /* The theme leaves focus invisible in several places. Keyboard and screen-magnifier users need to know where they are. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--nnuh-teal-btn); outline-offset: 2px; } ::selection { background: var(--nnuh-teal); color: var(--nnuh-on-brand); } /* Brand teal is 2.49:1 on white, so a white label on it fails AA and is hard to read for older applicants. Only the fill colour changes — nothing moves. Brand teal keeps its decorative role everywhere else. */ .primry-btn-2, .btn-primary, button.primry-btn-2 { background-color: var(--nnuh-teal-btn); border-color: var(--nnuh-teal-btn); color: var(--nnuh-on-brand); } .primry-btn-2:hover, .primry-btn-2:focus, .btn-primary:hover, .btn-primary:focus, button.primry-btn-2:hover { background-color: var(--nnuh-teal-btn-dark); border-color: var(--nnuh-teal-btn-dark); color: var(--nnuh-on-brand); } /* The theme's full-screen preloader waits on a load event that never settles cleanly on a slow connection, leaving the page blank behind it. */ .eg-preloder { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ══════════════════════════════════════════════════════════════ 2. Control panel Everything below sits inside .nnuh-panel and touches nothing else. The panel is a working tool for the HR department, not a brochure, so it is deliberately heavier than the public pages: navy text rather than the grey body colour, definite borders rather than hairlines, and a navy band across the top of every page so it reads as an institutional system rather than a white void. ══════════════════════════════════════════════════════════════ */ .nnuh-panel { background: var(--nnuh-panel-ground); color: var(--nnuh-ink); } .nnuh-panel .dashboard-area, .nnuh-panel .company-job-detaiils-page, .nnuh-panel .dashboard-section { background: transparent; } /* The theme's 120px top padding is brochure spacing; a tool starts sooner. */ .nnuh-panel .pt-120 { padding-top: 32px; } .nnuh-panel .mb-120 { margin-bottom: 48px; } .nnuh-panel p, .nnuh-panel td, .nnuh-panel li, .nnuh-panel label { color: var(--nnuh-ink); } /* ── Page header band ───────────────────────────────────────── */ .panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--nnuh-gap); padding: var(--nnuh-gap-lg); margin-bottom: var(--nnuh-gap-lg); background: var(--nnuh-navy); border-radius: var(--nnuh-radius); box-shadow: var(--nnuh-shadow); } .panel-head__eyebrow { font-size: var(--nnuh-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--nnuh-teal-light); margin-bottom: 4px; } .panel-head h1, .panel-head h2, .panel-head h3 { margin: 0; font-size: 25px; font-weight: 700; color: #fff; } .panel-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nnuh-gap-lg); margin-top: var(--nnuh-gap-sm); font-size: var(--nnuh-text-sm); color: rgba(255, 255, 255, .75); } .panel-head__meta span, .panel-head__meta i { color: inherit; } .panel-head__meta strong { color: #fff; font-weight: 600; } .panel-head__actions { display: flex; flex-wrap: wrap; gap: var(--nnuh-gap-sm); } /* Buttons sitting on the navy band. */ .panel-head__actions .toolbar-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; } .panel-head__actions .toolbar-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff; } /* ── Navigation rail ────────────────────────────────────────── */ .panel-nav { position: sticky; top: var(--nnuh-gap); background: var(--nnuh-surface); border: 1px solid var(--nnuh-hairline-strong); border-radius: var(--nnuh-radius); padding: var(--nnuh-gap-sm); box-shadow: var(--nnuh-shadow-sm); } .panel-nav__title { margin: 6px 14px 10px; font-size: var(--nnuh-text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nnuh-ink-muted); } .panel-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .panel-nav ul li a { display: flex; align-items: center; gap: var(--nnuh-gap-sm); min-height: 44px; padding: 10px 14px; border-radius: var(--nnuh-radius-sm); font-size: var(--nnuh-text-sm); font-weight: 600; color: var(--nnuh-ink); transition: background-color .15s ease, color .15s ease; } .panel-nav ul li a i { flex: none; font-size: 16px; color: var(--nnuh-ink-muted); } .panel-nav ul li a:hover { background: var(--nnuh-surface-high); color: var(--nnuh-ink); } /* Navy fill rather than a tint: the current section should be unmistakable. */ .panel-nav ul li a.active, .panel-nav ul li a.active:hover { background: var(--nnuh-navy); color: #fff; } .panel-nav ul li a.active i { color: var(--nnuh-teal-light); } .panel-nav__end { margin-top: var(--nnuh-gap-xs); padding-top: var(--nnuh-gap-xs); border-top: 1px solid var(--nnuh-hairline-strong); } .panel-nav__end a { color: var(--nnuh-ink-muted); } .panel-nav__end a:hover { background: var(--nnuh-error-soft); color: var(--nnuh-error); } @media (max-width: 991px) { .panel-nav { position: static; } .panel-nav__title { display: none; } .panel-nav ul { flex-direction: row; overflow-x: auto; gap: var(--nnuh-gap-xs); scrollbar-width: thin; } .panel-nav ul li a { white-space: nowrap; } .panel-nav__end { margin: 0; padding: 0 0 0 var(--nnuh-gap-xs); border-top: 0; border-inline-start: 1px solid var(--nnuh-hairline-strong); } } /* ── Greeting ───────────────────────────────────────────────── */ .panel-greeting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nnuh-gap-lg); padding: var(--nnuh-gap-lg); margin-bottom: var(--nnuh-gap-lg); background: var(--nnuh-navy); border-radius: var(--nnuh-radius); box-shadow: var(--nnuh-shadow); } .panel-greeting__logo { width: 150px; height: auto; flex: none; } .panel-greeting__text span { display: block; font-size: var(--nnuh-text-sm); font-weight: 600; color: var(--nnuh-teal-light); } .panel-greeting__text h1 { margin: 0; font-size: 24px; font-weight: 700; color: #fff; } /* ── Section label ──────────────────────────────────────────── */ .panel-section-title { display: flex; align-items: center; gap: var(--nnuh-gap-sm); margin: var(--nnuh-gap-lg) 0 var(--nnuh-gap); font-size: var(--nnuh-text-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nnuh-ink); } .panel-section-title::after { content: ""; flex: 1; height: 2px; background: var(--nnuh-hairline-strong); } /* ── Stat tiles ─────────────────────────────────────────────── */ .nnuh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--nnuh-gap); } .nnuh-stat { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 18px 20px; background: var(--nnuh-surface); border: 1px solid var(--nnuh-hairline-strong); border-inline-start: 4px solid var(--nnuh-ink-muted); border-radius: var(--nnuh-radius-sm); text-decoration: none; box-shadow: var(--nnuh-shadow-sm); transition: box-shadow .15s ease, transform .15s ease; } a.nnuh-stat:hover { box-shadow: var(--nnuh-shadow); transform: translateY(-1px); } .nnuh-stat__n { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--nnuh-ink); font-variant-numeric: tabular-nums; } .nnuh-stat__label { font-size: var(--nnuh-text-sm); font-weight: 500; color: var(--nnuh-ink-muted); line-height: 1.4; } .nnuh-stat--brand { border-inline-start-color: var(--nnuh-teal-btn); } .nnuh-stat--positive { border-inline-start-color: var(--nnuh-success); } .nnuh-stat--negative { border-inline-start-color: var(--nnuh-error); } .nnuh-stat--muted { border-inline-start-color: var(--nnuh-navy); } /* ── Cards ──────────────────────────────────────────────────── */ .nnuh-card { background: var(--nnuh-surface); border: 1px solid var(--nnuh-hairline-strong); border-radius: var(--nnuh-radius); box-shadow: var(--nnuh-shadow-sm); overflow: hidden; } .nnuh-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nnuh-gap-sm); padding: var(--nnuh-gap) var(--nnuh-gap-lg); background: var(--nnuh-surface-high); border-bottom: 1px solid var(--nnuh-hairline-strong); } .nnuh-card__head h4, .nnuh-card__head h5, .nnuh-card__head h6 { margin: 0; font-size: var(--nnuh-text-lg); font-weight: 700; color: var(--nnuh-ink); } .nnuh-card__body { padding: var(--nnuh-gap-lg); } /* ── Panel forms ────────────────────────────────────────────── */ .nnuh-panel .form-control, .nnuh-panel .form-select, .nnuh-panel input[type="text"], .nnuh-panel input[type="email"], .nnuh-panel input[type="password"], .nnuh-panel input[type="search"], .nnuh-panel input[type="tel"], .nnuh-panel input[type="number"], .nnuh-panel input[type="date"], .nnuh-panel select, .nnuh-panel textarea { font-family: var(--nnuh-font); font-size: var(--nnuh-text-base); color: var(--nnuh-ink); background: var(--nnuh-surface); border: 1px solid var(--nnuh-hairline-strong); border-radius: var(--nnuh-radius-sm); } .nnuh-panel .form-control:focus, .nnuh-panel .form-select:focus, .nnuh-panel input:focus, .nnuh-panel select:focus, .nnuh-panel textarea:focus { border-color: var(--nnuh-teal-btn); box-shadow: 0 0 0 3px rgba(var(--nnuh-teal-btn-rgb), .16); outline: none; } .nnuh-panel label, .nnuh-panel .form-label { font-weight: 600; font-size: var(--nnuh-text-sm); color: var(--nnuh-ink); } .nnuh-panel input[type="checkbox"], .nnuh-panel input[type="radio"] { accent-color: var(--nnuh-teal-btn); } /* ── Panel tables ───────────────────────────────────────────── */ .nnuh-panel .eg-table, .nnuh-panel .table { font-family: var(--nnuh-font); font-size: var(--nnuh-text-sm); color: var(--nnuh-ink); margin: 0; } .nnuh-panel .eg-table thead th, .nnuh-panel .table thead th { background: var(--nnuh-surface-high); border-bottom: 2px solid var(--nnuh-hairline-strong); color: var(--nnuh-ink); font-size: var(--nnuh-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: start; padding: 12px 16px; white-space: nowrap; } .nnuh-panel .eg-table tbody td, .nnuh-panel .table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--nnuh-hairline); vertical-align: middle; } .nnuh-panel .eg-table tbody tr:hover, .nnuh-panel .table tbody tr:hover { background: var(--nnuh-surface-sunken); } /* ── Pagination ─────────────────────────────────────────────── */ .nnuh-panel .pagination-area .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; } .nnuh-panel .pagination-area .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 10px; border: 1px solid var(--nnuh-hairline-strong); border-radius: var(--nnuh-radius-sm); background: var(--nnuh-surface); color: var(--nnuh-ink); font-size: var(--nnuh-text-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .nnuh-panel .pagination-area .page-link:hover { border-color: var(--nnuh-teal-btn); color: var(--nnuh-teal-btn); } .nnuh-panel .pagination-area .page-item.active .page-link { background: var(--nnuh-navy); border-color: var(--nnuh-navy); color: #fff; } .nnuh-panel .pagination-area .page-item.disabled .page-link { opacity: .4; pointer-events: none; } .pagination-table-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nnuh-gap); padding: var(--nnuh-gap) var(--nnuh-gap-lg); border-top: 1px solid var(--nnuh-hairline-strong); background: var(--nnuh-surface); } .pagination-table-info .table-info { font-size: var(--nnuh-text-sm); font-weight: 500; color: var(--nnuh-ink-muted); font-variant-numeric: tabular-nums; } /* ── Status pills ───────────────────────────────────────────── */ .nnuh-pill { display: inline-block; padding: 3px 11px; border-radius: 11px; font-size: var(--nnuh-text-xs); font-weight: 700; white-space: nowrap; } /* A pill carries its own colours wherever it lands. The variants are written with the tag in the selector because `.nnuh-panel .panel-head span` — the rule that makes the navy band's text light — otherwise outranks them, and a pill placed on that band came out white-on-pale and unreadable. */ .nnuh-pill--viewed, span.nnuh-pill--viewed, .nnuh-panel .panel-head span.nnuh-pill--viewed { background: var(--nnuh-navy-soft); color: var(--nnuh-navy); } .nnuh-pill--shortlisted, span.nnuh-pill--shortlisted, .nnuh-panel .panel-head span.nnuh-pill--shortlisted { background: var(--nnuh-teal-soft); color: #0B5E5F; } .nnuh-pill--rejected, span.nnuh-pill--rejected, .nnuh-panel .panel-head span.nnuh-pill--rejected { background: var(--nnuh-error-soft); color: #912018; } /* ── Empty states ───────────────────────────────────────────── */ .nnuh-empty { text-align: center; padding: 56px 24px; color: var(--nnuh-ink-muted); } .nnuh-empty i { display: block; font-size: 30px; color: var(--nnuh-ink-faint); margin-bottom: var(--nnuh-gap-sm); } .nnuh-empty p { margin-bottom: var(--nnuh-gap); } /* ── Alerts inside the panel ────────────────────────────────── */ .nnuh-panel .alert { font-family: var(--nnuh-font); font-size: var(--nnuh-text-sm); font-weight: 500; border: 1px solid var(--nnuh-hairline-strong); border-inline-start: 4px solid var(--nnuh-ink-muted); border-radius: var(--nnuh-radius-sm); padding: 14px 18px; } .nnuh-panel .alert-success { background: var(--nnuh-success-soft); border-inline-start-color: var(--nnuh-success); color: #05603A; } .nnuh-panel .alert-danger { background: var(--nnuh-error-soft); border-inline-start-color: var(--nnuh-error); color: #912018; } .nnuh-panel .alert-warning { background: var(--nnuh-warning-soft); border-inline-start-color: var(--nnuh-warning); color: #7A3410; } .nnuh-panel .alert-info { background: var(--nnuh-info-soft); border-inline-start-color: var(--nnuh-info); color: #12457A; } /* ── Modals ─────────────────────────────────────────────────── */ .modal-content { border: 0; border-radius: var(--nnuh-radius); box-shadow: var(--nnuh-shadow-lg); } /* ══════════════════════════════════════════════════════════════ 3. Print — HR prints applicant lists and applications ══════════════════════════════════════════════════════════════ */ @media print { .header-area, .footer-area, footer, .panel-nav, .applicants-toolbar, .bulk-bar, .pagination-area, .panel-head__actions { display: none !important; } body { background: #fff; font-size: 11pt; } .panel-head, .panel-greeting { background: #fff !important; border: 1px solid #999; box-shadow: none; } .panel-head h1, .panel-head__eyebrow, .panel-head__meta, .panel-head__meta strong, .panel-greeting__text span, .panel-greeting__text h1 { color: #000 !important; } .nnuh-card, .applicants-panel { border: 1px solid #999; box-shadow: none; } } /* ══════════════════════════════════════════════════════════════ 4. Wide panel tables The job list carries eight columns. Once the navigation rail took a share of the width there was not enough room for them, and because nothing let the table scroll the browser crushed the columns instead — squeezing the job title until Arabic wrapped one character per line. A table that cannot fit should scroll, never compress. ══════════════════════════════════════════════════════════════ */ .panel-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* DataTables inserts its own wrapper between the container and the table. */ .panel-table-scroll .dataTables_wrapper { min-width: 0; } .nnuh-panel .job-list-table { min-width: 900px; } /* Column floors. Without these the browser satisfies the table width by taking it out of whichever column has the longest, most breakable content — which is always the job title. */ .nnuh-panel .job-list-table th:first-child, .nnuh-panel .job-list-table td:first-child { min-width: 260px; } .nnuh-panel .job-list-table th:not(:first-child):not(:last-child), .nnuh-panel .job-list-table td:not(:first-child):not(:last-child) { min-width: 84px; white-space: nowrap; } .nnuh-panel .job-list-table th:last-child, .nnuh-panel .job-list-table td:last-child { min-width: 150px; } /* Arabic breaks badly when a column is tight: never split inside a word. */ .nnuh-panel .job-content h5, .nnuh-panel .job-content h5 a { display: block; font-size: var(--nnuh-text-base); font-weight: 700; line-height: 1.5; color: var(--nnuh-ink); word-break: normal; overflow-wrap: break-word; } .nnuh-panel .job-content h5 a:hover { color: var(--nnuh-teal-btn); text-decoration: underline; } .nnuh-panel .job-content p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--nnuh-text-xs); color: var(--nnuh-ink-muted); } .nnuh-panel .job-content p span { color: var(--nnuh-ink-faint); } .nnuh-panel .job-content .form-check { margin-top: var(--nnuh-gap-xs); font-size: var(--nnuh-text-xs); color: var(--nnuh-ink-muted); } /* Row actions stay on one line; stacking them made the column taller than the row and pushed everything else out of alignment. */ .nnuh-panel .action-btn-group2 { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--nnuh-gap-xs); list-style: none; margin: 0; padding: 0; } .nnuh-panel .action-btn-group2 li { margin: 0; } .nnuh-panel .action-btn-group2 li a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: var(--nnuh-radius-sm); min-height: 0; } .nnuh-panel .action-btn-group2 li a svg { width: 15px; height: 15px; fill: currentColor; } /* The theme's own colour modifiers stay: these are distinct actions and the colour is how HR tells them apart at a glance. Only the shape is ours. */ .nnuh-panel .action-btn-group2 li a.green--btn { background: var(--nnuh-teal-btn); color: #fff; } .nnuh-panel .action-btn-group2 li a.sky--btn { background: var(--nnuh-info); color: #fff; } .nnuh-panel .action-btn-group2 li a.delete--btn { background: var(--nnuh-error); color: #fff; } .nnuh-panel .action-btn-group2 li a.yellow--btn { background: var(--nnuh-warning); color: #fff; } .nnuh-panel .action-btn-group2 li a:hover { filter: brightness(.9); color: #fff; } /* Count badges in the table body. */ .nnuh-panel .total-number { display: inline-block; min-width: 34px; padding: 4px 10px; border-radius: var(--nnuh-radius-sm); background: var(--nnuh-surface-high); color: var(--nnuh-ink); font-size: var(--nnuh-text-sm); font-weight: 700; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; } .nnuh-panel .total-number.light-purple { background: var(--nnuh-navy-soft); color: var(--nnuh-navy); } .nnuh-panel .total-number.light-orange { background: var(--nnuh-teal-soft); color: #0B5E5F; } .nnuh-panel .total-number.deep-pink { background: var(--nnuh-error-soft); color: #912018; } /* ── Panel filter bars ──────────────────────────────────────── */ .nnuh-panel .table-wrapper2 { background: var(--nnuh-surface); border: 1px solid var(--nnuh-hairline-strong); border-radius: var(--nnuh-radius); box-shadow: var(--nnuh-shadow-sm); overflow: hidden; } .nnuh-panel .title-and-btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nnuh-gap); padding: var(--nnuh-gap) var(--nnuh-gap-lg); background: var(--nnuh-surface-high); border-bottom: 1px solid var(--nnuh-hairline-strong); } .nnuh-panel .title-and-btn .title h4 { margin: 0; font-size: var(--nnuh-text-lg); font-weight: 700; color: var(--nnuh-ink); } .nnuh-panel .table-filter-area { padding: var(--nnuh-gap) var(--nnuh-gap-lg); border-bottom: 1px solid var(--nnuh-hairline); background: var(--nnuh-surface); } /* The filter row is a grid of small fields; let it wrap rather than squeeze every input down to a few characters. */ .nnuh-panel .table-filter-area .row > [class*="col-"] { min-width: 170px; } .nnuh-panel .table-filter-area label { display: block; font-size: var(--nnuh-text-xs); font-weight: 600; color: var(--nnuh-ink-muted); margin-bottom: 4px; } /* ══════════════════════════════════════════════════════════════ 5. Corrections found by rendering the pages and measuring them A browser audit (visual_audit.py) reads the computed colour of every text node against what is actually painted behind it. It found real failures that reading the CSS did not. ══════════════════════════════════════════════════════════════ */ /* The theme paints .table-wrapper2 thead teal and sets th { color: white } at a higher specificity than a `.nnuh-panel .eg-table thead th` rule. Setting only the background left white text on a light grey band — 1.15:1, which is why whole header rows were invisible. Navy with white text instead: 15.9:1, and it matches the page header band, which is the more official look anyway. */ .nnuh-panel .table-wrapper2 .eg-table thead, .nnuh-panel .table-wrapper2 .eg-table thead tr, .nnuh-panel .eg-table thead, .nnuh-panel .table thead { background: var(--nnuh-navy); border-color: var(--nnuh-navy); } .nnuh-panel .table-wrapper2 .eg-table thead tr th, .nnuh-panel .table-wrapper2 .eg-table.job-list-table thead tr th, .nnuh-panel .eg-table thead tr th, .nnuh-panel .table thead tr th { background: transparent; border-bottom: 0; color: #fff; font-family: var(--nnuh-font); font-size: var(--nnuh-text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 13px 16px; vertical-align: middle; white-space: nowrap; } /* The theme adds 30–60px of end padding to the first and last header cells to line up with a layout the panel no longer uses. */ .nnuh-panel .table-wrapper2 .eg-table thead tr th:first-child, .nnuh-panel .table-wrapper2 .eg-table thead tr th:last-child, .nnuh-panel .table-wrapper2 .eg-table.job-list-table thead tr th:first-child, .nnuh-panel .table-wrapper2 .eg-table.job-list-table thead tr th:last-child { padding-inline: 16px; text-align: start; } /* A control panel on a 1600px screen should not sit inside a 1320px column with 140px of dead space on each side. The public pages keep the theme's measure, which suits reading. */ .nnuh-panel .container-xxl { max-width: min(1720px, calc(100vw - 48px)); } @media (max-width: 991px) { .nnuh-panel .container-xxl { max-width: calc(100vw - 24px); } } /* Brand teal as text on a light ground is 2.10:1. */ .nnuh-panel .breadcrumb-item.active, .nnuh-panel .breadcrumb-item a { color: var(--nnuh-teal-btn); font-weight: 600; } /* Bootstrap's info blue is 1.86:1 on a white card. */ .nnuh-panel .text-info { color: var(--nnuh-info) !important; } .nnuh-panel .text-muted { color: var(--nnuh-ink-muted) !important; } /* Icons and rules may stay light; text may not. */ .nnuh-panel .job-content p span, .nnuh-panel .job-content .form-check { color: var(--nnuh-ink-muted); } /* ── Application counts, grouped ──────────────────────────────── The job list carried four separate count columns — total, viewed, shortlisted, rejected — which is most of the table's width spent on four numbers, and it pushed the actions column off the screen entirely. One cell now: the total large, the breakdown as chips beneath it, the whole thing a link to that job's applicants. ─────────────────────────────────────────────────────────────── */ .count-group { display: inline-flex; flex-direction: column; gap: 5px; padding: 6px 10px; border-radius: var(--nnuh-radius-sm); text-decoration: none; transition: background-color .15s ease; } .count-group:hover { background: var(--nnuh-surface-sunken); } .count-group__total { font-size: 21px; font-weight: 700; line-height: 1; color: var(--nnuh-ink); font-variant-numeric: tabular-nums; } .count-group__split { display: flex; gap: 4px; } .count-chip { min-width: 30px; padding: 2px 7px; border-radius: 9px; font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; cursor: help; } .count-chip--viewed { background: var(--nnuh-navy-soft); color: var(--nnuh-navy); } .count-chip--shortlisted { background: var(--nnuh-teal-soft); color: #0B5E5F; } .count-chip--rejected { background: var(--nnuh-error-soft); color: #912018; } .nnuh-panel .job-author { font-size: var(--nnuh-text-sm); color: var(--nnuh-ink-muted); word-break: break-word; } /* Five columns fit without scrolling on any reasonable screen; the floors from the eight-column layout no longer apply. */ .nnuh-panel .job-list-table { min-width: 760px; } .nnuh-panel .job-list-table th:not(:first-child), .nnuh-panel .job-list-table td:not(:first-child) { min-width: 0; white-space: normal; } .nnuh-panel .job-list-table th:first-child, .nnuh-panel .job-list-table td:first-child { min-width: 280px; } .nnuh-panel .job-list-table th:last-child, .nnuh-panel .job-list-table td:last-child { min-width: 160px; } /* The theme colours breadcrumbs from `.inner-banner .banner-content .breadcrumb li`, which outranks a `.nnuh-panel .breadcrumb-item.active` rule. Brand teal as text on the panel ground is 2.10:1. */ .nnuh-panel .inner-banner .banner-content .breadcrumb li, .nnuh-panel .inner-banner .banner-content .breadcrumb li a { color: var(--nnuh-teal-text); font-weight: 600; } .nnuh-panel .inner-banner .banner-content .breadcrumb li a:hover { color: var(--nnuh-navy); } /* Teal on a tinted ground needs the text-weight teal, not the button one. */ .nnuh-panel .sort-sub.is-on, .nnuh-panel .sort-link.is-asc::after, .nnuh-panel .sort-link.is-desc::after { color: var(--nnuh-teal-text); } .nnuh-panel .text-info { color: var(--nnuh-info-text) !important; } .nnuh-panel .form-text, .nnuh-panel .helptext, .nnuh-panel small.form-text { color: var(--nnuh-ink-muted); font-size: var(--nnuh-text-xs); line-height: 1.6; } /* CKEditor shows the HR department a banner about its own version being out of date. That is a message for whoever maintains the dependency, not for someone writing a job description. */ .nnuh-panel .cke_notifications_area { display: none !important; } /* ══════════════════════════════════════════════════════════════ 6. Second audit pass Measuring again after the first round of fixes found more, including one that reading the CSS would never have shown: my own `.nnuh-panel p` rule outranks `.panel-head__eyebrow`, so the eyebrow inherited navy text and was painted navy-on-navy — 1.00:1, literally invisible. ══════════════════════════════════════════════════════════════ */ /* Everything on a navy band is light by default. Stated on the band itself and on its children, because `.nnuh-panel p` (0,1,1) outranks a bare `.panel-head__eyebrow` (0,1,0) and would otherwise paint navy on navy. The eyebrow rules that follow carry a tag in the selector so they outrank these — the first attempt at this used `.nnuh-panel .panel-head p`, which beat the eyebrow rule and reintroduced the very bug it was fixing. */ .nnuh-panel .panel-head, .nnuh-panel .panel-head p, .nnuh-panel .panel-head li, .nnuh-panel .panel-head span:not([class*="pill"]), .nnuh-panel .panel-head div, .nnuh-panel .panel-greeting, .nnuh-panel .panel-greeting p, .nnuh-panel .panel-greeting div { color: rgba(255, 255, 255, .8); } .nnuh-panel .panel-head h1, .nnuh-panel .panel-head h2, .nnuh-panel .panel-head h3, .nnuh-panel .panel-head strong, .nnuh-panel .panel-greeting h1 { color: #fff; } .nnuh-panel .panel-head p.panel-head__eyebrow, .nnuh-panel .panel-greeting div span, .nnuh-panel .panel-greeting span.panel-greeting__label { color: var(--nnuh-teal-light); } /* .primry-btn-1 is the header's own call to action and was left on brand teal with a white label — 2.49:1. Same correction as .primry-btn-2. */ .primry-btn-1, a.primry-btn-1 { background-color: var(--nnuh-teal-btn); border-color: var(--nnuh-teal-btn); color: var(--nnuh-on-brand); } .primry-btn-1:hover, a.primry-btn-1:hover { background-color: var(--nnuh-teal-btn-dark); color: var(--nnuh-on-brand); } /* Pill text on a tinted pill needs the text-weight colours: the button teal is 3.93:1 on teal-soft and the error red is 4.22:1 on error-soft. */ .status-pill--shortlisted, .nnuh-pill--shortlisted, .count-chip--shortlisted, .doc-pill--full { color: var(--nnuh-teal-text); } .status-pill--rejected, .nnuh-pill--rejected, .count-chip--rejected, .doc-flag { color: #8E1D14; } .doc-pill--partial { color: #7A3410; } /* The site header's own call to action sits inside .post-job-btn, which the theme styles at a higher specificity than a bare .primry-btn-2 rule, so it kept the brand teal fill and its white label stayed at 2.49:1. */ .header-area .post-job-btn a.primry-btn-2, .header-area .post-job-btn a.primry-btn-1, .post-job-btn a.primry-btn-2, .post-job-btn a.primry-btn-1 { background-color: var(--nnuh-teal-btn); border-color: var(--nnuh-teal-btn); color: var(--nnuh-on-brand); } .post-job-btn a.primry-btn-2:hover, .post-job-btn a.primry-btn-1:hover { background-color: var(--nnuh-teal-btn-dark); color: var(--nnuh-on-brand); } /* Brand teal as a link colour is 2.49:1 on white. Links carry navy per nnuh.org's own role table; teal is the hover. */ .header-area .main-menu ul li a, .nav-menu ul li a, .header-area a:not(.primry-btn-1):not(.primry-btn-2) { color: var(--nnuh-ink); } .header-area .main-menu ul li a:hover, .nav-menu ul li a:hover { color: var(--nnuh-teal-text); } /* The card-header "Post Job" button lives in .job-post-btn, which the theme styles more specifically again. Last of the white-on-brand-teal labels. */ .nnuh-panel .title-and-btn .job-post-btn a.primry-btn-2, .job-post-btn a.primry-btn-2, .job-post-btn a.primry-btn-1 { background-color: var(--nnuh-teal-btn); border-color: var(--nnuh-teal-btn); color: var(--nnuh-on-brand); } .job-post-btn a.primry-btn-2:hover, .job-post-btn a.primry-btn-1:hover { background-color: var(--nnuh-teal-btn-dark); color: var(--nnuh-on-brand); } /* The header marks the current page in brand teal — 2.49:1 on white. The text-weight teal keeps the same signal and can be read. */ /* The theme ships six header variants and colours the active item per variant (header.style-1 … style-6); this site uses style-5. Matching on .header-area instead covers every variant at the same specificity, and this file loads later, so it wins. */ header.header-area .main-menu ul > li.active > a, header.header-area .main-menu ul > li:hover > a, .main-menu ul > li.active > a { color: var(--nnuh-teal-text); font-weight: 600; } /* ══════════════════════════════════════════════════════════════ 7. Public pages Colour only — no layout, since these pages sit on the theme's own grid. Every value here replaces brand teal used as *text*, or a white label on brand teal, both of which measure 2.49:1. ══════════════════════════════════════════════════════════════ */ /* Statistics counters on the home and login pages. */ .counter-area .odometer, .counter-single .odometer, .counter-single .coundown h3, .counter-single .coundown span { color: var(--nnuh-teal-text); } /* The home page's "current jobs / archive" tab. */ .nav-tabs .nav-link.active, .nav-tabs button.nav-link.active { background-color: var(--nnuh-teal-btn); border-color: var(--nnuh-teal-btn); color: var(--nnuh-on-brand); } /* "Apply for a job" reads navy on teal, 3.48:1. */ .job-card a.primry-btn-2, .job-card a.primry-btn-1, a.primry-btn-2, a.primry-btn-1 { color: var(--nnuh-on-brand); } /* Teal links on white. */ .breadcrumb-item.active, .breadcrumb-item.active a, .job-title a:hover, a.job-apply-link { color: var(--nnuh-teal-text); } /* Body copy on the theme's tinted panels: #666 on a teal wash is 4.40:1. */ .job-card .title, .job-card p, .job-list-card p, .job-list-card .title { color: var(--nnuh-ink-muted); } /* Job-type badges: navy on an 18% purple wash is 3.86:1. Opaque tints of the brand navy instead, which keeps the badge idea and can be read. */ .light-purple, span.light-purple { background: var(--nnuh-navy-soft) !important; color: var(--nnuh-navy) !important; } /* ── Footer ───────────────────────────────────────────────────── The footer is a dark navy band, so its links need the *light* teal. The accessible teal used everywhere else is tuned for light grounds and lands at 3.85:1 here — the one place where darkening makes things worse. ─────────────────────────────────────────────────────────────── */ .footer1, footer.footer1, .footer-area, footer.footer-area, .footer-bottom { background-color: var(--nnuh-navy); color: rgba(255, 255, 255, .82); } .footer1 a, .footer1 .copyright-area a, .footer-area a, .footer-bottom a, footer a { color: var(--nnuh-teal-light); } .footer-area a:hover, .footer-bottom a:hover, footer a:hover { color: #fff; } .footer1 p, .footer1 span, .footer-area p, .footer-bottom p, .footer-area span, .footer-bottom span { color: rgba(255, 255, 255, .82); } /* The theme colours the copyright links from a deeper selector than a plain `.footer1 a` rule reaches. */ .footer1 .footer-btm .copyright-area p a, .footer1 .footer-btm .copyright-area a, .footer1 .footer-btm a, .footer1 .footer-widget a, .footer1 ul li a { color: var(--nnuh-teal-light); } .footer1 .footer-btm .copyright-area p a:hover, .footer1 .footer-btm a:hover, .footer1 .footer-widget a:hover, .footer1 ul li a:hover { color: #fff; } /* The home page markup puts the button class on a wrapping
and the link inside it, so the inherits the theme's navy title colour and ends up navy-on-teal at 3.48:1. Anything inside a primary button is a label. */ .primry-btn-2 a, .primry-btn-1 a, .primry-btn-2 a:hover, .primry-btn-1 a:hover { color: var(--nnuh-on-brand); } /* The theme lays the row actions out from `.table-wrapper2 .eg-table tbody tr td .action-btn-group2`, which outranks a `.nnuh-panel .action-btn-group2` rule, so the icons kept stacking into a column taller than the row. Matching its shape puts them back on one line. */ .nnuh-panel .table-wrapper2 .eg-table tbody tr td .action-btn-group2 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--nnuh-gap-xs); margin: 0; padding: 0; list-style: none; } .nnuh-panel .table-wrapper2 .eg-table tbody tr td .action-btn-group2 li { margin: 0; width: auto; } .nnuh-panel .table-wrapper2 .eg-table tbody tr td .action-btn-group2 li .eg-btn, .nnuh-panel .table-wrapper2 .eg-table tbody tr td .action-btn-group2 li a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: var(--nnuh-radius-sm); } /* An empty
the theme uses as a spacer leaves a blank white band between the card title and the filters. */ .nnuh-panel .table-filter-area:empty, .nnuh-panel .table-filter-area > form:empty { display: none; } /* ── Application modal ────────────────────────────────────────── Bootstrap's modal-lg caps at 800px. A candidate's whole application — contact details, eight attachments, education, experience — does not fit that comfortably, and the panel behind it is 1720px wide. ─────────────────────────────────────────────────────────────── */ .modal-application { max-width: min(1120px, calc(100vw - 48px)); } @media (max-width: 767px) { .modal-application { max-width: calc(100vw - 16px); margin-inline: 8px; } } /* Two readable columns inside the wider dialog rather than one long ribbon. */ .modal-application .resume-area .education-dt ul, .modal-application .resume-area .informations ul { columns: 2; column-gap: var(--nnuh-gap-xl); } @media (max-width: 767px) { .modal-application .resume-area .education-dt ul, .modal-application .resume-area .informations ul { columns: 1; } } .modal-application .applicant-docs__list li { break-inside: avoid; }