. Where the footer sits on a short page is the footer's own business, as it was live: XYZ's `mt-auto` pins it to the bottom, DDF's and GulfairGroup's `mt-4` keep it under the content (CareersBranding.FooterCssClass). A

that grew to fill the window put every footer at the bottom and made the second kind unrepresentable. */ /* The embedded fragment sits inside someone else's page and imposes no background. */ body.careers-embed { background: transparent; } /* The heading font is a setting; the heading COLOUR is not this file's. A legacy heading took its colour from where it sat — Haka's grey body text, .jb-title's --clr3 — or from the tenant's own rule, and naming one here painted every heading in the brand text colour instead (Haka's popup and page headings dark blue on beta, grey on live, 2026-09-23). */ h1, h2, h3, h4, h5, h6 { font-family: var(--snp-font-heading); } /* No rule for links. Bootstrap's and the tenant's own apply, as they did live: most tenants' sheets recolour `a` and drop the underline, five keep Bootstrap's underline on some links, one leaves its footer credit Bootstrap blue — and an accent colour and `text-decoration: none` set here overrode all of them. The hover underline this file once added ran under every header menu entry (Haka and XYZ, reported 2026-09-23); no legacy sheet has one. */ /* The logo is sized by careers-site.css's legacy rule (.navbar .navbar-brand img — width 100%, max-width 175px), which is the sizing the eighteen sites shipped. --snp-logo-height is a CAP on top of it, unset by default, for a tenant whose artwork needs one. Setting height here instead is what made XYZ's logo a third of its real size. */ .site-logo { max-height: var(--snp-logo-height); } /* THE HEADER'S TWO BRAND COLOURS, bound to the settings here rather than in careers-site.css. The generated stylesheet may only carry a property EVERY tenant declared, and not all thirteen set a background on .navbar — several leave it to a Bootstrap utility in their markup. So the binding is the theme's job: without it --snp-header-bg is a field the editor offers and nothing reads, which is exactly how it behaved until this rule existed. The text colour is bound at the specificity Bootstrap's own .nav-link uses. Bootstrap 5.1 gives .nav-link a blue of its own (#0d6efd) and the legacy sites each overrode it in their main.css; that override is a BRAND value, so it belongs to the setting rather than to thirteen copies of a rule. Inheriting from .navbar is not enough — .nav-link sets its own colour. */ .navbar { background-color: var(--snp-header-bg); } .navbar .navbar-brand, .navbar .nav-item .nav-link { color: var(--snp-header-text); } /* The footer ships empty for a tenant that has set no footer line (see Careers_Footer); no rule for nothing. :empty is exact — the shape emits no whitespace inside the element. */ .site-footer:empty { display: none; } /* Nothing else. This block used to give the footer a top border, a muted colour, a smaller font, its own padding, a flex layout and underlined links — a look no legacy site has. XYZ styles its footer with NO CSS AT ALL: the spacing is Bootstrap's mt-auto/pt-5, the columns are .col-md-6, and the credit is floated with .float-end, all of it in the markup the shape now emits. The tenants that DO paint their footer key on these same class names and their rules are in their residue — DDF's black .site-footer, GulfairGroup's --clr0, Beyond's bare `footer`. A default here would sit under all of them and show through wherever a tenant set less than all of it. */ /* Hero ------------------------------------------------------------------- */ /* * Every legacy list opened with a banner image chosen per client. Here that image is the tenant's * Hero image branding setting, and the fallback INSIDE var() is what a tenant with no artwork * gets: a band mixed from its own brand colours. The Careers_Branding shape therefore declares * --snp-hero-image only when the tenant has one — a custom property declared as `none` would * defeat this fallback and leave the strip blank. */ /* A .row, so Bootstrap's negative margins pull it out to the container-fluid's edges: full bleed, as every legacy banner was. */ .banner { min-height: var(--snp-hero-height); background-image: var(--snp-hero-image, var(--snp-hero-fallback)); background-size: cover; background-position: center; background-repeat: no-repeat; } /* The vacancy page's band, which four of the thirteen tenants give its own artwork. Unset falls through to the list's image and then to the brand gradient, so a tenant that uses one picture for both pages sets one field and this rule does nothing. */ .banner-detail { background-image: var(--snp-hero-image-detail, var(--snp-hero-image, var(--snp-hero-fallback))); } /* THE INTRANET CHANNEL'S OWN ARTWORK — Zain and SANAD, the two tenants whose legacy pages pick the banner class from Model.IsIntra. Each falls through the chain its public sibling ends at, so eleven tenants set nothing and their intranet pages keep showing the public picture. */ .banner-intranet { background-image: var(--snp-hero-image-intranet, var(--snp-hero-image, var(--snp-hero-fallback))); } .banner-detail.banner-intranet { background-image: var(--snp-hero-image-intranet-detail, var(--snp-hero-image-detail, var(--snp-hero-image, var(--snp-hero-fallback)))); } /* Vacancy list ----------------------------------------------------------- */ .vacancies-page > .container { padding-block: 1rem 3rem; } .intranet-notice { margin-top: 1rem; } /* The filters, the brand button, each result and the pager are careers-site.css's and the tenant's: .bootstrap-select, .btn-custom, .jobdetail, .jb-title, .searchcaption, .pagination are the estate's own classes, and the shapes emit them for exactly that reason. This file restyled all of them until 2026-09-23 — 10px 24px button padding against live's 14px 30px and a 128px minimum width against 200px, an accent border and an 8% darkening on hover that no client had, 13.6px caption labels against 18px, a 2px rule under each result — and because it loads after careers-site.css no residue could take any of it back. */ /* Vacancy detail --------------------------------------------------------- * * Almost nothing, on purpose. This page's blocks emit the estate's vocabulary — .vac-det, * .searchCategs / .descr / .sc-val, .sectn, .vac-num, .aply-btns — which careers-site.css * styles for every tenant and each tenant's own residue then paints. Rules keyed on the * theme's invented names (.vacancy-title, .vacancy-meta dt, .vacancy-section-title) lived * here until 2026-09-10 and were the SECOND stylesheet trying to lay this page out; they * went when the markup they described did. * * The breadcrumb is the exception: it is this theme's own block (only Cazar ships one), so * its one rule stays. */ .breadcrumb-item + .breadcrumb-item::before { color: var(--snp-brand-muted); } .vacancy-related { border-inline-start: 1px solid var(--snp-brand-border); padding-inline-start: 1.5rem; } /* A section's text, in one style: the client's, not the author's (XYZ, 2026-09-29). * * The sections are written in the ATS's editor or pasted into it, and the shape already drops the * typeface, size and colour those put inline (HtmlSanitizerHelper.SanitizeWithoutFontStyling). What * is left is the estate's own normalising: every legacy main.css had rules on `.vac-det .sectn * span` and `.vac-det .sectn ul li`, careers-site.css carries the shared pair and nine residues * their own, and they normalised to a style of their own rather than the paragraph's — * `font-size: initial` and `line-height: initial` (16px and `normal` where the body is 15px and * 1.5), and Helvetica for XYZ's, Sofon's and GulfairGroup's bullets under paragraphs in Cairo or * Tahoma. Here a span and a list item take their font from what they sit in, as a paragraph * does. Where a tenant's rules had already given them the body's size (Beyond, Omniyat, SANAD, * Zain, Keyston) that size stays; the bullets gain the paragraphs' line height. Colour is left to * those rules: they give the paragraph's colour too, the body's or Keyston's grey. * * All of those rules are !important and the residues load after this file, so this one has to * outrank them. The class is repeated to do it without naming .vac-det or .sectn, which are * careers-site.css's to style; VacancyTextStyleTests holds it above every one of them. */ .vacancy-text.vacancy-text.vacancy-text span, .vacancy-text.vacancy-text.vacancy-text li { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; } /* Small screens ---------------------------------------------------------- */ @media (max-width: 767.98px) { /* A tall hero is most of a phone screen, so the band has its own phone height. It is a setting rather than a cap because the legacy sites already made this choice per client (a 400px band dropping to 250px is the common pair) and a cap would shorten every one. */ .banner { min-height: var(--snp-hero-height-sm); } }