/* NextJobPortal responsive overrides - layout only, no content or functionality changes. Loaded after the main stylesheet. Desktop widths above 992px are untouched except for global no-overflow safeguards. */ html,body{max-width:100%;overflow-x:hidden;overflow-x:clip;} body{min-width:0;} img,video,iframe,svg{max-width:100%;height:auto;} table{max-width:100%;} h1,h2,h3,h4,h5,h6,p,a,li,span,td,th{overflow-wrap:break-word;word-break:break-word;} .container,.container-fluid{max-width:100%;} .row{margin-left:0;margin-right:0;} .row>*{min-width:0;} input,select,textarea,button{max-width:100%;min-width:0;} form{max-width:100%;} .btn,.page-link{min-height:48px;display:inline-flex;align-items:center;justify-content:center;} .pagination{flex-wrap:wrap;gap:4px;} .pagination .page-item{flex:0 0 auto;} @media (max-width:1024px){ .display-1{font-size:clamp(2rem,6vw,3.5rem);} .display-2{font-size:clamp(1.9rem,5.5vw,3rem);} .display-3{font-size:clamp(1.7rem,5vw,2.6rem);} .display-4{font-size:clamp(1.6rem,4.5vw,2.4rem);} section{padding-left:1rem;padding-right:1rem;} } @media (max-width:991.98px){ .container{padding-left:1rem;padding-right:1rem;} main .row>[class*='col-']{flex:0 0 100%;max-width:100%;} .card{width:100%;} .card-body{padding:1rem;} .d-flex,.flex-row{flex-wrap:wrap;} form .row>[class*='col-']{margin-bottom:.5rem;} .form-control,.form-select{font-size:1rem;min-height:44px;} .btn{white-space:normal;text-align:center;} .pagination .page-link{padding:.375rem .6rem;font-size:.9rem;} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;} table{display:block;overflow-x:auto;} footer .row>[class*='col-']{margin-bottom:1rem;} html body nav.navbar~main section.home-hero{padding-top:40px !important;padding-bottom:40px !important;} html body nav.navbar{padding-top:8px!important;padding-bottom:8px!important;} html body nav.navbar .navbar-brand img{height:56px!important;max-height:56px!important;} html body nav.navbar~main section.home-hero h1.home-hero__title{font-size:28px!important;line-height:1.25!important;} html body nav.navbar~main section.home-hero .home-hero__search-btn{padding-top:9px!important;padding-bottom:9px!important;} html body nav.navbar~main section.home-hero.home-hero .home-hero__pills{gap:14px!important;} html body nav.navbar~main section.home-hero.home-hero .home-pill{padding:9px 16px!important;} html body nav.navbar~main section.home-hero.home-hero .home-hero__popular-label{margin:16px 0 14px!important;} } @media (max-width:767.98px){ body{font-size:14px;} h2{font-size:clamp(1.6rem,6.5vw,2rem);} h3{font-size:clamp(1.35rem,5.5vw,1.6rem);} section{padding-top:1.5rem!important;padding-bottom:1.5rem!important;} .row>.col-6{flex:0 0 50%;max-width:50%;} form{width:100%;} form input,form select,form textarea{width:100%;} form .btn,form button[type='submit']{width:100%;min-height:40px;}html body nav.navbar .navbar-brand img{height:48px!important;max-height:48px!important;}html body nav.navbar .navbar-toggler{min-height:38px!important;min-width:38px!important;padding:6px 8px!important;margin-left:auto!important;flex-shrink:0!important;}html body nav.navbar,html body nav.navbar>.container{flex-wrap:wrap!important;}html body nav.navbar .navbar-collapse{position:static!important;left:auto!important;transform:none!important;width:100%!important;flex-basis:100%!important;text-align:left!important;}html body nav.navbar .navbar-nav{flex-direction:column!important;flex-wrap:wrap!important;justify-content:flex-start!important;align-items:stretch!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;text-align:left!important;}html body nav.navbar .navbar-brand .navbar-brand__name{font-size:17px!important;max-width:calc(100vw - 190px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}html body nav.navbar{padding-top:6px!important;padding-bottom:6px!important;} html body nav.navbar .navbar-nav .header-btn{display:block!important;height:auto!important;padding:.5rem .75rem!important;border:0!important;border-radius:0!important;background:transparent!important;color:#0C2D63!important;font-size:16px!important;font-weight:400!important;text-align:left!important;} .input-group{flex-wrap:wrap;} .input-group>*{flex:1 1 100%;border-radius:.375rem!important;margin-bottom:.5rem;} .btn{padding:.65rem 1rem;font-size:1rem;} .card-title{font-size:1.2rem;line-height:1.4;} .pagination{justify-content:center;} .alert{word-break:break-word;} footer .d-flex{flex-direction:column;align-items:flex-start!important;} } @media (max-width:400px){ .container{padding-left:.75rem;padding-right:.75rem;} .row>.col-6{flex:0 0 100%;max-width:100%;} .btn,.page-link{min-height:40px;} .pagination .page-link{padding:.3rem .45rem;font-size:.85rem;} } @media (min-width:1400px){ img,video,iframe{max-width:100%;} } /* End of responsive overrides. */ @media(min-width:1200px){main .container,footer .container{max-width:1320px;margin-left:auto;margin-right:auto;}} /* Blog article body tightening: line-height 1.48, margin-bottom 0.6rem. Headings, font family and font sizes unchanged. */ main article p{line-height:1.48;margin-bottom:.6rem;} main article p:empty{margin-bottom:0;} main article p{line-height:1.48 !important;margin-bottom:.6rem !important;}main article p:not(.no-tighten){line-height:1.48;margin-bottom:.6rem;}main article p:has(>br:only-child){margin-bottom:0;line-height:0;} /* === NextJobPortal Navy/Cyan Theme (official logo colours) - CSS only, no layout or content changes === */ :root{--njp-navy:#0C2D63;--njp-cyan:#1A9FD6;} h1,h2,h3{color:#0C2D63;} header h1,header h2,header h3,footer h1,footer h2,footer h3,.site-header h1,.site-header h2,.site-header h3,.site-footer h1,.site-footer h2,.site-footer h3{color:#0C2D63;} a:hover,a:focus{color:#0C2D63;} .btn-primary,.btn.btn-primary,button.btn-primary,input[type="submit"].btn-primary,.search-btn,button[type="submit"].btn-primary,form button[type="submit"],.btn-search{ background-color:#1A9FD6!important;border-color:#1A9FD6!important;color:#ffffff!important;} .btn-primary:hover,.btn.btn-primary:hover,button.btn-primary:hover,.search-btn:hover{ background-color:#0C2D63!important;border-color:#0C2D63!important;color:#ffffff!important;} .text-primary,.highlight,.accent{color:#1A9FD6!important;} /* === End Navy/Cyan Theme === */ /* === Navy/Cyan Theme - search and primary button gradient override === */ button[type="submit"],input[type="submit"],.btn-primary,.btn.btn-primary,.search-btn,.btn-search{ background:#1A9FD6!important;background-image:none!important;border-color:#1A9FD6!important;color:#ffffff!important;} /* === End gradient override === */ /* === Header logo alignment - remove the logo link's one-off left padding so the header uses only the standard container's equal left/right padding === */ header .navbar-brand, nav .navbar-brand, .navbar-brand { padding-left: 0 !important; } /* === End header logo alignment === */ .home-hero__lead { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* MOBILE HERO ORDER FIX */ @media (max-width:767.98px){.home-hero .row{display:flex;flex-direction:column;}.home-hero .row>[class*=col-]{flex:0 0 auto;}.home-hero .container .row>.col-lg-10{order:1;}.home-hero .container .row>.col-12{order:2;}} /* === HERO H1 CONTRAST FIX (2026-11-02) - hero H1 must stay WHITE on the dark hero background, accent span stays cyan === */ .home-hero h1, .home-hero__title, h1.home-hero__title { color: #ffffff !important; } .home-hero h1 span, .home-hero__title span, h1.home-hero__title span { color: #1A9FD6 !important; } /* === End HERO H1 CONTRAST FIX === */ /* === HERO H1 ACCENT - specific .accent selector, same cyan/teal as above === */ .home-hero h1 .accent, .home-hero__title .accent, h1.home-hero__title .accent { color: #1A9FD6 !important; } /* === End HERO H1 ACCENT === */ /* === HERO H1 ACCENT - highest specificity === */ html body main section.home-hero h1.home-hero__title span.accent, html body section.home-hero h1.home-hero__title span.accent { color: #1A9FD6 !important; } /* === End HERO H1 ACCENT - highest specificity === */ /*TALENT-SEARCH-WIDTH-FIX*/ html body .home-hero .col-12{width:75%;max-width:900px;margin-left:auto;margin-right:auto;position:static;margin-top:1.25rem;flex:0 1 75%} html body .home-hero form{width:100%;max-width:900px;margin-left:auto;margin-right:auto;position:static;box-sizing:border-box} html body .home-hero form input{flex:1 1 auto;min-width:0;width:auto;box-sizing:border-box} html body .home-hero form button{flex:0 0 auto;width:auto;max-width:45%;position:static;white-space:nowrap;box-sizing:border-box} @media(max-width:767.98px){html body .home-hero .col-12{width:92%;flex:0 1 92%;margin-top:1.25rem;position:static}html body .home-hero form{width:100%;display:flex;flex-wrap:nowrap;align-items:center;gap:8px}}; /* === UNIFIED FONT COLOUR THEME (2026-11-02) - one scheme site-wide === */ /* Headings on light backgrounds: deep navy. Body: dark readable grey. */ /* Links and accents: cyan/teal. Primary buttons: solid cyan (S3), white text, no gradient. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #0C2D63 !important; background-image: none !important; -webkit-text-fill-color: #0C2D63 !important; } p, li, td, th, label, small, .text-muted, .text-secondary, .text-gray, .text-grey { color: #1F2937 !important; } .accent, .text-accent, .text-primary, .eyebrow, .kicker, .section-label, .section-eyebrow { color: #1A9FD6 !important; background-image: none !important; -webkit-text-fill-color: #1A9FD6 !important; } h1 span[class*="gradient"], h2 span[class*="gradient"], h3 span[class*="gradient"], span[class*="gradient-text"], .gradient-text { color: #1A9FD6 !important; background-image: none !important; -webkit-text-fill-color: #1A9FD6 !important; } .text-success, .badge-success, .badge, .category-pill { color: #0C2D63 !important; background-color: #EAF4FB !important; background-image: none !important; border-color: #1A9FD6 !important; } .avatar { background-color: #0C2D63 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .btn-primary, a.btn-primary, button.btn-primary, .btn-search, .search-btn, button[type="submit"], input[type="submit"], .home-hero button, section[class*="hero"] button, div[class*="hero"] button { background-color: #1A9FD6 !important; background-image: none !important; background: #1A9FD6 !important; border-color: #1A9FD6 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, .btn-search:hover, button[type="submit"]:hover, input[type="submit"]:hover, .home-hero button:hover, section[class*="hero"] button:hover { background-color: #0C2D63 !important; background-image: none !important; background: #0C2D63 !important; border-color: #0C2D63 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .btn-outline, .btn-outline-primary, a.btn-outline, a.btn-outline-primary { background-color: #ffffff !important; background-image: none !important; border-color: #1A9FD6 !important; color: #1A9FD6 !important; -webkit-text-fill-color: #1A9FD6 !important; } /* Dark hero exception: white H1 with cyan accent, light subtext. */ .home-hero h1, section[class*="hero"] h1, div[class*="hero"] h1, .hero h1, .site-newsletter h2, .site-newsletter .site-newsletter__title, .site-newsletter p, .site-newsletter .site-newsletter__subtitle { color: #ffffff !important; background-image: none !important; -webkit-text-fill-color: #ffffff !important; } .home-hero h1 span, section[class*="hero"] h1 span, div[class*="hero"] h1 span, .hero h1 span, .home-hero h1 .accent, section[class*="hero"] h1 .accent { color: #1A9FD6 !important; background-image: none !important; -webkit-text-fill-color: #1A9FD6 !important; } .home-hero p, section[class*="hero"] p, div[class*="hero"] p, .hero p, .home-hero__lead { color: #EAF6FD !important; } /* Dark footer exception: white headings, light body text, cyan links. */ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 { color: #ffffff !important; background-image: none !important; -webkit-text-fill-color: #ffffff !important; font-size: 0.9rem !important; margin-bottom: 0.5rem !important; } footer p, footer li, footer small, footer .text-muted, .footer p, .footer li, .footer small, .site-footer p, .site-footer li { color: #EAF6FD !important; } footer a, footer a:link, footer a:visited, .footer a, .site-footer a { color: #1A9FD6 !important; } /* === End UNIFIED FONT COLOUR THEME === */ /* === UNIFIED THEME FIX 2 - class-based stray colours === */ [class*="category"], [class*="pill"], [class*="tag"], [class*="badge"] { color: #0C2D63 !important; background-color: #EAF4FB !important; background-image: none !important; border-color: #1A9FD6 !important; -webkit-text-fill-color: #0C2D63 !important; } [class*="avatar"] { background-color: #0C2D63 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } [class*="footer"] h1, [class*="footer"] h2, [class*="footer"] h3, [class*="footer"] h4, [class*="footer"] h5, [class*="footer"] h6, [class*="footer-title"], [class*="footer-heading"] { color: #ffffff !important; background-image: none !important; -webkit-text-fill-color: #ffffff !important; } nav a, .navbar a, .nav-link, header a { color: #1A9FD6 !important; } dt, [class*="label"] { color: #1F2937 !important; } /* === End UNIFIED THEME FIX 2 === */ .home-hero,.hero,.hero-section{border-radius:0!important;border-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;clip-path:none!important;} .home-hero::after,.home-hero::before,.hero::after,.hero::before{display:none!important;border:0!important;} .home-hero__wave,.hero-wave,.hero-shape,.hero-divider,.shape-divider,.hero-bottom{display:none!important;border:0!important;} .home-hero__pills,.home-hero__badges,.home-hero__features{background:transparent!important;background-color:transparent!important;box-shadow:none!important;} [class*="pills"]{background:transparent!important;background-color:transparent!important;box-shadow:none!important;} .hero-curve,.hero-slant,.hero-section::after,.hero-section::before{display:none!important;} [class*="pill"]:has([class*="pill"]){background:transparent!important;background-color:transparent!important;box-shadow:none!important;} .home-hero .bg-light,.home-hero .bg-white{background:transparent!important;background-color:transparent!important;box-shadow:none!important;} .home-hero div:has(.badge){background:transparent!important;background-color:transparent!important;box-shadow:none!important;} section.home-hero ul.home-hero__pills,.home-hero ul.home-hero__pills,ul.home-hero__pills{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:none!important;} .home-hero .bg-light,.home-hero .bg-white{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border:none!important;} /* === UNIFY THEME A-Z (2026-11-02) - one font, one palette, one rhythm, in responsive.css only === */ body, h1, h2, h3, h4, h5, h6, p, a, li, span, div, label, small, button, input, select, textarea, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Arial, Helvetica, sans-serif !important; font-style: normal !important; } body { font-size: 16px !important; line-height: 1.6 !important; color: #1F2937 !important; } h1, .h1 { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 12px !important; } h2, .h2 { font-size: 24px !important; font-weight: 700 !important; line-height: 1.3 !important; margin: 0 0 12px !important; } h3, .h3 { font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; margin: 0 0 10px !important; } h4, .h4 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 10px !important; } h5, .h5, h6, .h6 { font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 8px !important; } p, li { margin: 0 0 16px !important; } section[aria-label="Browse jobs"] li { margin: 0 0 10px !important; }html body main section.contact-hero p.contact-hero__subtitle{margin-left:auto!important;margin-right:auto!important;} section, .section, main section { padding-top: 32px !important; padding-bottom: 32px !important; } section[aria-label="Browse jobs"] { padding-top: 24px !important; padding-bottom: 24px !important; } .card, .job-card, .blog-card, article.card, .listing-card { padding: 24px !important; } button:not(.dropdown-item):not(.njp-password-toggle), .btn:not(.dropdown-item), a.btn, input[type="submit"], input[type="button"] { padding: 12px 24px !important; border-radius: 8px !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #0C2D63 !important; background-image: none !important; -webkit-text-fill-color: #0C2D63 !important; } p, li, td, th, label, small, .text-muted, .text-secondary, .text-gray, .text-grey, [class*="meta"], [class*="date"], time, .job-meta, .job-location, .post-meta, .blog-meta { color: #1F2937 !important; } a, a:link, a:visited { color: #1A9FD6 !important; } header a, header .nav-link, header nav a, .navbar a, .nav-link, .header a, [class*="header"] nav a, [class*="header"] .nav-link { color: #0C2D63 !important; font-weight: 700 !important; } section[aria-label="Browse jobs"] a { color: #0C2D63 !important; font-weight: 700 !important; } header a:hover, header .nav-link:hover, .navbar a:hover, .nav-link:hover, section[aria-label="Browse jobs"] a:hover { color: #1A9FD6 !important; } .btn-primary, a.btn-primary, button.btn-primary, .btn-search, .search-btn, button[type="submit"], input[type="submit"], .home-hero button, section[class*="hero"] button, div[class*="hero"] button, .hero button, .btn-apply, a.btn-apply, .apply-btn, [class*="apply"] button { background: #1A9FD6 !important; background-color: #1A9FD6 !important; background-image: none !important; border-color: #1A9FD6 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover, .btn-apply:hover { background: #0C2D63 !important; background-color: #0C2D63 !important; background-image: none !important; border-color: #0C2D63 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .category-pill, [class*="category"], [class*="pill"], [class*="tag"], [class*="badge"], .badge-success, .text-success, .job-category, .category { color: #0C2D63 !important; background: #EAF4FB !important; background-color: #EAF4FB !important; background-image: none !important; border-color: #1A9FD6 !important; -webkit-text-fill-color: #0C2D63 !important; } dt, [class*="label"], .sidebar dt, .job-sidebar dt, [class*="sidebar"] dt, [class*="glance"] dt, [class*="glance"] [class*="label"], [class*="glance"] span, .at-a-glance dt, .at-a-glance [class*="label"] { color: #0C2D63 !important; font-weight: 700 !important; } .avatar, [class*="avatar"], .author-avatar, [class*="author"] img, [class*="author"] [class*="avatar"], .post-author img, .blog-author img { background: #0C2D63 !important; background-color: #0C2D63 !important; background-image: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .avatar::before, .avatar::after, [class*="avatar"]::before, [class*="avatar"]::after, .author-avatar::before, .author-avatar::after { background: none !important; background-image: none !important; } .home-hero h1, section[class*="hero"] h1, div[class*="hero"] h1, .hero h1 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .home-hero h1 span, section[class*="hero"] h1 span, div[class*="hero"] h1 span, .hero h1 span, .home-hero h1 .accent, section[class*="hero"] h1 .accent { color: #1A9FD6 !important; -webkit-text-fill-color: #1A9FD6 !important; } .home-hero p, section[class*="hero"] p, div[class*="hero"] p, .hero p { color: #EAF6FD !important; } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, [class*="footer"] h1, [class*="footer"] h2, [class*="footer"] h3 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } footer p, footer li, footer small, [class*="footer"] p, [class*="footer"] li { color: #EAF6FD !important; } footer a, [class*="footer"] a { color: #1A9FD6 !important; } /* === End UNIFY THEME A-Z === */ /* === OWNER-APPROVED FIX: WHITE PAGE BACKGROUND === */ body { background:#FFFFFF !important; background-color:#FFFFFF !important; } main { background:#FFFFFF !important; background-color:#FFFFFF !important; } .main-content, .content, .page-content, main .content { background:#FFFFFF !important; background-color:#FFFFFF !important; } .home-hero, .hero, .hero-section, section[class*="hero"], div[class*="hero"], .home-hero.bg-light, .home-hero.bg-white { background:#0C2D63 !important; background-color:#0C2D63 !important; } footer, [class*="footer"] { background:#0C2D63 !important; background-color:#0C2D63 !important; } /* === END WHITE PAGE BACKGROUND FIX === */ /* === FINAL HERO SOLID NAVY OVERRIDE === */ html body main section.home-hero.home-hero, html body section.home-hero.home-hero, html body .home-hero.home-hero, html body section[class*="hero"][class*="hero"], html body div[class*="hero"][class*="hero"] { background: #0C2D63 !important; background-color: #0C2D63 !important; background-image: none !important; } html body section.home-hero.home-hero::before, html body section.home-hero.home-hero::after, html body .home-hero.home-hero::before, html body .home-hero.home-hero::after, html body section[class*="hero"]::before, html body section[class*="hero"]::after, html body div[class*="hero"]::before, html body div[class*="hero"]::after { background: none !important; background-color: transparent !important; background-image: none !important; display: none !important; opacity: 0 !important; } html body .home-hero.home-hero *, html body section[class*="hero"] *, html body div[class*="hero"] * { background-image: none !important; } html body .home-hero.home-hero *::before, html body .home-hero.home-hero *::after, html body section[class*="hero"] *::before, html body section[class*="hero"] *::after, html body div[class*="hero"] *::before, html body div[class*="hero"] *::after { background: none !important; background-image: none !important; } html body .home-hero.home-hero h1, html body section[class*="hero"] h1, html body div[class*="hero"] h1 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body .home-hero.home-hero h1 span, html body section[class*="hero"] h1 span, html body div[class*="hero"] h1 span, html body .home-hero.home-hero h1 .accent, html body .home-hero.home-hero h1 .text-primary { color: #1A9FD6 !important; -webkit-text-fill-color: #1A9FD6 !important; } html body .home-hero.home-hero button, html body .home-hero.home-hero .btn-search, html body .home-hero.home-hero button[type="submit"], html body section[class*="hero"] button, html body section[class*="hero"] .btn-search, html body div[class*="hero"] button { background: #1A9FD6 !important; background-color: #1A9FD6 !important; background-image: none !important; border-color: #1A9FD6 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body .home-hero.home-hero [class*="pill"], html body .home-hero.home-hero [class*="badge"], html body section[class*="hero"] [class*="pill"], html body section[class*="hero"] [class*="badge"], html body div[class*="hero"] [class*="pill"] { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* === END FINAL HERO SOLID NAVY OVERRIDE === */ /* === STRUCTURAL HERO OVERRIDE: first section in main, containing H1 and search === */ html body main section:first-of-type, html body main > section:first-child, html body main section:has(h1), html body main section:has(h1):has(form) { background: #0C2D63 !important; background-color: #0C2D63 !important; background-image: none !important; } html body main section:first-of-type::before, html body main section:first-of-type::after, html body main section:has(h1)::before, html body main section:has(h1)::after { background: none !important; background-image: none !important; display: none !important; opacity: 0 !important; } html body main section:first-of-type *, html body main section:has(h1) * { background-image: none !important; } html body main section:first-of-type *::before, html body main section:first-of-type *::after, html body main section:has(h1) *::before, html body main section:has(h1) *::after { background: none !important; background-image: none !important; } html body main section:first-of-type h1, html body main section:has(h1) h1 { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body main section:first-of-type h1 span, html body main section:has(h1) h1 span { color: #1A9FD6 !important; -webkit-text-fill-color: #1A9FD6 !important; } html body main section:first-of-type button, html body main section:has(h1) button, html body main section:first-of-type button[type="submit"], html body main section:has(h1) button[type="submit"] { background: #1A9FD6 !important; background-color: #1A9FD6 !important; background-image: none !important; border-color: #1A9FD6 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body main section:first-of-type [class*="pill"], html body main section:has(h1) [class*="pill"], html body main section:first-of-type [class*="badge"], html body main section:has(h1) [class*="badge"] { background: transparent !important; background-color: transparent !important; background-image: none !important; border: 1px solid #ffffff !important; border-color: #ffffff !important; box-shadow: none !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* === END STRUCTURAL HERO OVERRIDE === */ /* === HERO-POLISH 2026-11-03: true hero is section.home-hero from home.blade.php === */ html body main section.home-hero, html body section.home-hero { background:#0C2D63 !important; background-color:#0C2D63 !important; background-image:none !important; box-sizing:border-box !important; max-width:100% !important; overflow:hidden !important; width:100% !important; } html body main section.home-hero::before, html body main section.home-hero::after, html body section.home-hero::before, html body section.home-hero::after, html body main section.home-hero .home-hero__grid, html body section.home-hero .home-hero__grid, html body main section.home-hero .home-hero__glow, html body section.home-hero .home-hero__glow, html body main section.home-hero .home-hero__wave, html body section.home-hero .home-hero__wave { display:none !important; visibility:hidden !important; opacity:0 !important; background:none !important; background-color:transparent !important; background-image:none !important; } html body main section.home-hero .home-hero__inner, html body section.home-hero .home-hero__inner, html body main section.home-hero .home-hero__panel, html body section.home-hero .home-hero__panel { background:transparent !important; background-color:transparent !important; background-image:none !important; box-sizing:border-box !important; max-width:100% !important; } html body main section.home-hero h1.home-hero__title, html body section.home-hero h1.home-hero__title { color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; box-sizing:border-box !important; max-width:100% !important; } html body main section.home-hero h1.home-hero__title .accent, html body section.home-hero h1.home-hero__title .accent, html body main section.home-hero h1.home-hero__title span.accent, html body section.home-hero h1.home-hero__title span.accent { color:#1A9FD6 !important; -webkit-text-fill-color:#1A9FD6 !important; } html body main section.home-hero .home-hero__lead, html body section.home-hero .home-hero__lead { color:#EAF6FD !important; -webkit-text-fill-color:#EAF6FD !important; box-sizing:border-box !important; max-width:100% !important; } html body main section.home-hero .home-hero__search-row, html body section.home-hero .home-hero__search-row { display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; border-radius:999px !important; background:#ffffff !important; background-color:#ffffff !important; padding:0 !important; overflow:hidden !important; } html body main section.home-hero .home-hero__search-input, html body section.home-hero .home-hero__search-input { flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; box-sizing:border-box !important; border:0 !important; background:transparent !important; background-color:transparent !important; background-image:none !important; padding:0 12px !important; } html body main section.home-hero .home-hero__search-btn, html body section.home-hero .home-hero__search-btn, html body main section.home-hero button.home-hero__search-btn, html body section.home-hero button.home-hero__search-btn { flex:0 0 auto !important; width:170px !important; max-width:50% !important; box-sizing:border-box !important; padding:11px 16px !important; border-radius:999px !important; background:#1A9FD6 !important; background-color:#1A9FD6 !important; background-image:none !important; border:1px solid #1A9FD6 !important; border-color:#1A9FD6 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; white-space:nowrap !important; text-align:center !important; } html body main section.home-hero .home-hero__pills, html body section.home-hero .home-hero__pills { display:flex !important; flex-wrap:wrap !important; gap:20px !important; box-sizing:border-box !important; max-width:100% !important; background:transparent !important; background-color:transparent !important; background-image:none !important; } /* Popular-search pills: kill the global
  • bottom margin so the pill gap is the only spacing. */ html body main section.home-hero .home-hero__pills li, html body section.home-hero .home-hero__pills li { margin-bottom:0 !important; } /* Popular searches: mobile list is hidden on desktop/tablet; the <=767.98px block below shows it and hides the desktop list. */ html body nav.navbar~main section.home-hero.home-hero .home-hero__pills--mobile { display:none !important; } /* Search divider: thin line between the two hero fields (desktop/tablet only; the mobile input rule below re-asserts a uniform border). */ html body main section.home-hero .home-hero__search-input + .home-hero__search-input, html body section.home-hero .home-hero__search-input + .home-hero__search-input { border-left:1px solid #DCE6F2 !important; } /* Popular-searches label: space above (from the search pill) and below (to the pills), design p17. */ html body main section.home-hero .home-hero__popular-label, html body section.home-hero .home-hero__popular-label { color:#ffffff !important; font-size:14px !important; line-height:1.4 !important; text-align:center !important; margin:24px 0 16px !important; } html body main section.home-hero .home-hero__pill, html body section.home-hero .home-hero__pill { background:transparent !important; background-color:transparent !important; background-image:none !important; border:1px solid #ffffff !important; border-color:#ffffff !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; box-shadow:none !important; box-sizing:border-box !important; max-width:100% !important; } body, h1, h2, h3, h4, h5, h6, button, input, select, textarea { font-family:Arial, Helvetica, sans-serif !important; } @media (max-width:767.98px) { html body nav.navbar~main section.home-hero { padding-top:28px !important; padding-bottom:28px !important; padding-left:16px !important; padding-right:16px !important; } html body nav.navbar~main section.home-hero h1.home-hero__title { font-size:24px !important; line-height:1.25 !important; } html body main section.home-hero .home-hero__lead, html body section.home-hero .home-hero__lead { font-size:16px !important; line-height:1.5 !important; } html body main section.home-hero .home-hero__search-row, html body section.home-hero .home-hero__search-row { display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:10px !important; background:transparent !important; box-shadow:none !important; border:0 !important; border-radius:0 !important; padding:0 !important; height:auto !important; overflow:visible !important; } html body nav.navbar~main section.home-hero .home-hero__search-input { width:100% !important; max-width:100% !important; flex:1 1 auto !important; background:#ffffff !important; border:1px solid #DCE6F2 !important; border-radius:12px !important; padding:14px 14px 14px 44px !important; height:48px !important; box-sizing:border-box !important; } html body nav.navbar~main section.home-hero .home-hero__search-btn, html body nav.navbar~main section.home-hero button.home-hero__search-btn { width:100% !important; max-width:100% !important; flex:0 0 auto !important; border-radius:12px !important; padding:14px !important; margin-top:0 !important; height:48px !important; } html body nav.navbar~main section.home-hero.home-hero .home-hero__pills { display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:12px !important; } html body nav.navbar~main section.home-hero.home-hero .home-hero__pill { max-width:100% !important; white-space:normal !important; text-align:center !important; padding:7px 14px !important; } html body nav.navbar~main section.home-hero.home-hero .home-hero__pills--desktop { display:none !important; } html body nav.navbar~main section.home-hero.home-hero .home-hero__pills--mobile { display:flex !important; } html body nav.navbar~main section.home-hero.home-hero .home-hero__popular-label { margin:12px 0 12px !important; } } /* === END HERO-POLISH 2026-11-03 === */ /* === HEADER TIDY 2026-11-03 === */ /* HEADER — ONE CLEAN ORDERED SET: 1 slim row, 2 brand lockup, 3 header actions (Sign Up / Sign In / Post a Job), 4 toggler. No other header rules remain in this file. */ /* 1 SLIM SINGLE ROW, EQUAL SIDE PADDING, NO GAP BELOW */ nav.navbar{flex-wrap:nowrap!important;padding-top:8px!important;padding-bottom:8px!important;margin-bottom:0!important;} nav.navbar>.container{max-width:none!important;width:100%!important;padding-left:24px!important;padding-right:24px!important;margin-left:0!important;margin-right:0!important;} nav.navbar+main,nav.navbar~main{margin-top:0!important;padding-top:0!important;} nav.navbar+main>:first-child,nav.navbar~main>:first-child{margin-top:0!important;} /* 2 BRAND LOCKUP: 64PX LOGO + NAME RIGHT OF IT, ONE LINE. The layout carries classes only - no inline styles. */ nav.navbar .navbar-brand{padding:0!important;margin:0!important;align-items:center!important;flex:0 0 auto!important;} nav.navbar .navbar-brand img{height:64px!important;max-height:64px!important;width:auto!important;max-width:none!important;display:block!important;} nav.navbar .navbar-brand span{color:#0C2D63!important;} nav.navbar .navbar-brand .navbar-brand__lockup{display:inline-flex!important;align-items:center!important;gap:8px!important;} nav.navbar .navbar-brand .navbar-brand__logo{mix-blend-mode:multiply!important;} nav.navbar .navbar-brand .navbar-brand__name{color:#0C2D63!important;font-weight:800!important;font-size:22px!important;line-height:1.1!important;white-space:nowrap!important;} /* 3 NAV RIGHT ON DESKTOP */ nav.navbar .navbar-nav{flex-wrap:nowrap!important;flex-direction:row!important;justify-content:flex-end!important;margin-left:auto!important;margin-right:0!important;width:auto!important;} nav.navbar .navbar-nav .nav-link{padding:.5rem .75rem!important;color:#0C2D63!important;white-space:nowrap!important;} @media(min-width:1200px){nav.navbar{position:relative!important;}nav.navbar .navbar-collapse{position:static!important;left:auto!important;transform:none!important;width:auto!important;}} @media(min-width:768px) and (max-width:1199px){nav.navbar .navbar-collapse{justify-content:flex-end!important;}} /* 3 HEADER ACTIONS: the three buttons, right. Outline = white/navy, solid = cyan. Desktop only as buttons; the max-width:767.98px block turns them into plain stacked links. !important is used here only because the global nav-link colour rules carry !important. */ nav.navbar .navbar-nav.header-actions{gap:8px!important;} nav.navbar .navbar-nav .header-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:44px!important;padding:0 20px!important;border-radius:999px!important;font-size:16px!important;font-weight:700!important;line-height:1!important;white-space:nowrap!important;text-decoration:none!important;} nav.navbar .navbar-nav .header-btn--outline{background:#FFFFFF!important;color:#0C2D63!important;border:1.5px solid #0C2D63!important;} nav.navbar .navbar-nav .header-btn--solid{background:#1A9FD6!important;color:#FFFFFF!important;border:1.5px solid #1A9FD6!important;} /* HEADER NAV LINKS (desktop): plain text links left of the action buttons. The logo is the Home link. Active page is cyan. */ nav.navbar .navbar-nav.header-nav{gap:4px!important;} nav.navbar .navbar-nav .header-nav-link{padding:.5rem .75rem!important;color:#0C2D63!important;font-size:16px!important;font-weight:600!important;white-space:nowrap!important;text-decoration:none!important;border-radius:8px!important;} nav.navbar .navbar-nav .header-nav-link:hover{color:#1A9FD6!important;background:#F4F7FB!important;} /* Blog link next to the logo (left). Kept away from the action buttons so the right side stays buttons-only. */ nav.navbar .header-nav-link--left{margin-left:24px!important;align-self:center!important;} nav.navbar .navbar-nav .header-nav-link.active{color:#1A9FD6!important;} /* STICKY HEADER (owner 2026-11-14 23:35): stays visible while scrolling down. Solid white background so page content never shows through. */ nav.navbar.navbar-premium{position:sticky!important;top:0!important;z-index:1030!important;background:#FFFFFF!important;} /* HEADER USER DROPDOWN (S26): match the auth card — radius 12, border, shadow. The Log out