/* ========================================================= JOBS block — exact rendering like the reference screenshot Paths: - CSS : /newsilo/css/jobs.css - Fonts: /newsilo/fonts/Gangsta-Medium.(woff2|woff|ttf) ========================================================= */ /* 1) Fonts */ /* Public Sans via Google (kept here in case the link is missed) */ @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&display=swap"); @font-face { font-family: "Gangsta"; src: url("../fonts/Gangsta-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* 2) Block wrapper */ .jobs-section, .jobs-section * { box-sizing: border-box; } .jobs-section { font-family: "Public Sans", sans-serif; background: #fff; color: #212529; padding: 0; /* parent container handles outer padding */ max-width: 680px; /* keep same visual width as screenshot */ } /* 3) Title */ .jobs-section .jobs-title { font-family: "Gangsta", "Public Sans", sans-serif !important; font-weight: 500 !important; font-size: 40px !important; /* matches the screenshot scale */ line-height: 1.15 !important; letter-spacing: 0 !important; color: #222 !important; /* near-black heading */ margin: 0 0 18px 0 !important; } /* 4) Job item */ .jobs-section .job-item { margin: 0 0 24px 0; } .jobs-section .job-title { display: inline-block; font-family: "Public Sans", sans-serif; font-weight: 700; /* bold like screenshot */ font-size: 24px; line-height: 1.25; margin: 0 0 6px 0; color: #0089CA !important; /* the blue from your palette */ text-decoration: none !important; } .jobs-section .job-title:hover, .jobs-section .job-title:focus { color: #02A0EA !important; /*text-decoration: underline !important;*/ } .jobs-section .job-date { font-size: 16px; color: #222; /* black body text */ } .jobs-section .job-date strong { font-weight: 700; /* bold date */ } /* 5) CTA button (pill outline) */ .jobs-section .jobs-cta { display: inline-block; margin-top: 10px; padding: 12px 20px; border-radius: 999px; border: 2px solid #0089CA !important; color: #0089CA !important; background: transparent !important; text-decoration: none !important; font-weight: 600; font-size: 16px; line-height: 1; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .jobs-section .jobs-cta:hover, .jobs-section .jobs-cta:focus { background-color: #0089CA !important; color: #fff !important; border-color: #0089CA !important; } /* 6) small screen tweaks */ @media (max-width: 576px) { .jobs-section .jobs-title { font-size: 34px !important; } .jobs-section .job-title { font-size: 21px; } .jobs-section .job-date { font-size: 15px; } } /* --- FORCE SAME SCALE AS REFERENCE (bigger text) --- */ .jobs-section .jobs-title { font-size: 48px !important; /* was 40px */ margin-bottom: 28px !important; } .jobs-section .job-title { font-size: 26px !important; /* was 24px */ line-height: 1.3 !important; } .jobs-section .job-date { font-size: 18px !important; /* was 16px */ line-height: 1.4 !important; } .jobs-section .jobs-cta { font-size: 18px !important; /* enlarge button text */ padding: 13px 26px !important; border-width: 2px !important; } /* On small screens keep it readable but not huge */ @media (max-width: 768px) { .jobs-section .jobs-title { font-size: 38px !important; } .jobs-section .job-title { font-size: 22px !important; } .jobs-section .job-date { font-size: 16px !important; } } /* Base */ :root{ --blue:#0089CA; --blue-hover:#02A0EA; --dark:#222; --light-gray:#efefef; --yellow:#E9B917; --maxw:1280px; --bs-heading-color: rgb(33, 37, 41); --bs-body-color: rgb(33, 37, 41); --filter-blue: #0089CA; --filter-blue-hover: #02A0EA; --filter-outline: #D6DDE3; /* outer border */ --filter-sep: #D9DFE6; /* separator lines */ --filter-active-bg: #F4F5F6; /* active chip background */ --filter-text: rgb(33, 37, 41); /* #212529 */ } body, h1, h2, h3, h4, h5, h6, p, span, div { color: rgb(33, 37, 41) !important; } body{margin:0;font-family:"Public Sans",sans-serif;color:var(--dark);background:#fff;} .container{max-width:var(--maxw);margin:0 auto;padding:0 0px;} /* HERO */ .hero{ position:relative; overflow:hidden; background: radial-gradient(1200px 1200px at 93% 50%, transparent 0 52%, var(--yellow) 52% 55%, transparent 55% 100%), var(--light-gray); } .hero__inner{display:flex;align-items:center;min-height:420px;} .hero__text{flex:0 0 55%;padding:60px 0 80px 0} .hero__title{ font-family:"Gangsta","Public Sans",sans-serif; font-weight:500; font-size:56px; line-height:1.1; margin:0 0 22px 0; } .hero__intro{font-size:22px; line-height:1.45; margin:0; max-width:44ch} .hero__img{ position:absolute; inset:0 0 0 auto; width:55%; object-fit:cover; height:100%; } /* CATEGORY FILTER (pills) */ .filter{padding:38px 0} .filter__bar{ display: inline-flex; border: 2px solid var(--filter-outline); border-radius: 999px; overflow: hidden; background: #fff; padding: 0; margin: 28px 0; gap: 0; } .filter__btn{ display: inline-block; padding: 18px 36px; /* increased padding for taller, wider buttons */ font: 700 20px/1.1 "Public Sans", sans-serif; /* bigger & bolder text */ color: var(--filter-blue); text-decoration: none; border-right: 2px solid var(--filter-sep, #D9DFE6); /* thicker separators */ transition: color 0.2s ease, background-color 0.2s ease; min-width: 180px; /* optional – ensures consistent button width */ } .filter__btn:first-child{border-top-left-radius:999px;border-bottom-left-radius:999px} .filter__btn:last-child { border-right: 0; } .filter__btn:hover { color: var(--filter-blue-hover); } .filter__btn--active{ background:#fff;color:var(--blue); box-shadow:0 0 0 2px #d6eefa inset; /* soft halo like screenshot */ } .filter__btn--active { background: var(--filter-active-bg); color: var(--filter-text); box-shadow: 0 0 0 2px #E8EEF5 inset; } .filter__btn--active:hover { color: var(--filter-text); } /* make sure rounded corners stay smooth */ .filter__btn:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .filter__btn:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; } /* content panes */ .filter-panes { margin-top: 22px; } .filter-pane { display: none; } .filter-pane.is-active { display: block; } /* text color inside panes */ .filter-pane, .filter-pane * { color: var(--filter-text); } /* small screens: keep font size, just stack & wrap */ @media (max-width: 992px){ .hero__text{flex-basis:60%; padding:42px 0 64px} .hero__title{font-size:44px} .hero__intro{font-size:20px} .hero__img{width:50%} } @media (max-width: 700px){ .hero__inner{min-height:520px} .hero__text{flex-basis:100%; padding:36px 0 260px} .hero__img{position:absolute; width:100%; height:260px; bottom:0; top:auto} .filter__bar{gap:10px} .filter__btn{border-radius:999px !important; border-width:2px} } /* === Make LEFT render look like the RIGHT render === */ :root{ /* photo takes more space, text less */ --hero-img-w: 60%; /* was ~48% */ --hero-text-w: 40%; /* was ~52% */ /* slightly smaller typography + tighter padding */ --hero-title-size: 44px; /* was 56px/52px */ --hero-body-size: 18px; /* was 20–22px */ --hero-pad-x: 32px; /* was 56–72px */ /* move the yellow arc further right and make it a touch thinner */ --arc-x: 88%; /* was ~74–75% */ --arc-inner: 51%; /* was ~53% */ --arc-thick: 2.5%; /* was ~3% */ } /* image framing closer to your right render */ .hero__img{ object-position: 60% center; /* shift focus slightly right */ } /* keep the same look on laptops too */ @media (max-width: 1399.98px){ :root{ --hero-img-w: 62%; --hero-text-w: 38%; --hero-title-size: 42px; --hero-body-size: 18px; --hero-pad-x: 28px; --arc-x: 89%; --arc-inner: 50.5%; --arc-thick: 2.5%; } } /* === FIX ARC POSITION: place it in front of the image === */ .hero { position: relative; background: #EFEFEF; /* plain grey fallback */ overflow: hidden; } /* Remove the arc from background, move it to ::before layer */ .hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; /* sits in front of the image */ background: radial-gradient(1200px 1200px at var(--arc-x, 88%) 50%, transparent 0 var(--arc-inner, 51%), #E9B917 calc(var(--arc-inner, 51%)) calc(var(--arc-inner, 51%) + var(--arc-thick, 2.5%)), transparent calc(var(--arc-inner, 51%) + var(--arc-thick, 2.5%)) 100%); } /* keep image behind the arc but above grey */ .hero__img { position: absolute; top: 0; right: 0; bottom: 0; width: var(--hero-img-w, 60%); height: 100%; object-fit: cover; object-position: center; z-index: 0; /* lower than ::before */ } /* keep text readable above everything */ .hero__text { position: relative; z-index: 2; } /* === SPONTANEOUS APPLICATION SECTION === */ .spontaneous { display: flex; justify-content: center; /* centers the section horizontally */ padding: 80px 0; background: #fff; color: rgb(33, 37, 41); } /* inner block — limited width + left-aligned content */ .spontaneous__inner { max-width: 720px; /* keeps layout narrow and centered */ width: 100%; text-align: left; /* left align text and button */ padding: 0 20px; } .spontaneous__title { font-family: "Gangsta", "Public Sans", sans-serif; font-weight: 500; font-size: 40px; line-height: 1.2; margin-bottom: 24px; } .spontaneous__text { font-family: "Public Sans", sans-serif; font-size: 18px; margin: 6px 0; } .spontaneous__button { margin-top: 40px; } /* blue pill button */ .spontaneous__link { display: inline-block; background-color: #0089CA; color: #fff !important; font-family: "Public Sans", sans-serif; font-weight: 700; font-size: 18px; padding: 14px 40px; border-radius: 999px; text-decoration: none; text-align: center; transition: background-color 0.2s ease, transform 0.2s ease; } .spontaneous__link:hover, .spontaneous__link:focus { background-color: #02A0EA; color: #fff !important; text-decoration: none; /*transform: translateY(-2px);*/ } /* === JOBLONG CARD DESIGN === */ /* grid layout for multiple cards */ .joblong-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; align-items: stretch; } /* single card */ .joblong-card { max-width: 360px; display: flex; flex-direction: column; /* ✅ stack image + body vertically */ height: 100%; /* ✅ force equal height */ border-radius: 12px; overflow: hidden; background: #fff; margin: 0 auto; box-shadow: 0 0 0 1px #e0e0e0; } /* image */ .joblong-card__img { width: 100%; height: 240px; object-fit: cover; display: block; } /* body */ .joblong-card__body { background: #ECEFF1; padding: 18px 16px 16px; border-radius: 0 0 12px 12px; flex-grow: 1; /* ✅ fills remaining height */ display: flex; flex-direction: column; justify-content: flex-end; /* optional, keeps text at bottom */ } /* title link */ .joblong-title { display: block; font: 700 24px/1.25 "Public Sans", sans-serif; color: #0089CA; text-decoration: none; margin: 0 0 10px 0; } .joblong-title:hover { color: #02A0EA; /*text-decoration: underline;*/ } /* date line */ .joblong-date { font: 400 16px/1.4 "Public Sans", sans-serif; color: rgb(33, 37, 41); } .joblong-date strong { font-weight: 700; } /* Show chips on ≥768px, dropdown on <768px */ .filter__menu { display: none; } @media (max-width: 767.98px){ .filter__bar { display: none; } .filter__menu { display: block; } } /* Dropdown button styling to match your pill look */ .filter-menu__btn{ display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; border: 2px solid #d6e1ea; background: #fff; color: #0d6efd; /* same blue as links */ font-weight: 600; padding: 12px 18px; box-shadow: 0 1px 0 rgba(0,0,0,.02); } /* Dropdown menu look */ .filter__menu .dropdown-menu{ border-radius: 12px; padding: .25rem; min-width: 230px; } .filter__menu .dropdown-item{ border-radius: 8px; font-weight: 500; } /*.filter__menu .dropdown-item.active, .filter__menu .dropdown-item:active{ background-color: #eaf4fb; color: #0d6efd; }*/ /* Dropdown menu styling for mobile filter */ .filter__dropdown .dropdown-menu { background-color: #fff; /* White background */ border: 1px solid #dcdcdc; /* Soft grey border */ border-radius: 50px; /* Match chip shape */ box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; } /* Dropdown items */ .filter__dropdown .dropdown-item { color: #0089CA; /* Blue text (your accent color) */ font-weight: 500; padding: 10px 20px; background-color: transparent; } /* Hover / focus */ .filter__dropdown .dropdown-item:hover, .filter__dropdown .dropdown-item:focus { background-color: #f5f5f5; /* Light grey hover */ color: #0089CA; } /* Active item */ .filter__dropdown .dropdown-item.active, .filter__dropdown .dropdown-item.active:focus, .filter__dropdown .dropdown-item.active:hover { background-color: #fff; color: #0089CA; font-weight: 600; } /* Dropdown toggle (the button itself) */ .filter__dropdown .btn { background-color: #fff; border: 1px solid #dcdcdc; border-radius: 50px; color: #0089CA; font-weight: 600; padding: 10px 20px; } .filter__dropdown .btn:focus, .filter__dropdown .btn:hover { background-color: #fff; color: #005f8e; /* Slightly darker blue on hover */ border-color: #0089CA; } /* 0) Never allow horizontal scrolling on the page */ html, body { width:100%; overflow-x:hidden; } /* 1) HERO – keep all layers inside the viewport on small screens */ .hero, .hero::before, .hero__img { max-width:100%; } .hero__img { right:0; left:auto; } /* 2) FILTER CHIPS – don’t let the pill row force extra width */ .filter__bar { flex-wrap: wrap; } /* may wrap on mid sizes */ @media (max-width: 992px){ .filter__btn { min-width:auto; padding:12px 18px; } } /* Below 768px the chips are hidden and we use the dropdown, so no overflow. */ /* 3) MOBILE DROPDOWN – keep the menu inside the screen */ .filter__dropdown .dropdown-menu{ max-width: calc(100vw - 32px); /* never wider than the viewport */ inset: auto auto auto 0; /* align under the toggle, no off-screen translate */ transform: none !important; overflow-wrap: anywhere; } /* 4) Generic guard rails */ img, svg { max-width:100%; height:auto; display:block; } /* no image overflow */ * { box-sizing: border-box; } /* MOBILE FILTER: toggle button */ .filter__menu .dropdown-toggle { display: flex !important; align-items: center; justify-content: space-between; /* text left, caret right */ width: 100%; /* so the button fills the container */ text-align: left; /* keeps text aligned left */ background: #fff !important; color: #0089CA !important; border: 1px solid #dcdcdc !important; border-radius: 50px !important; padding: 10px 20px !important; font-weight: 600; } /* caret (triangle) — some global styles are hiding it */ .filter__menu .dropdown-toggle::after { display: inline-block !important; margin-left: auto !important; /* ensures it's on the far right */ vertical-align: .255em; content: ""; border-top: .35em solid currentColor; /* blue because of currentColor */ border-right: .35em solid transparent; border-left: .35em solid transparent; border-bottom: 0; } /* menu panel */ .filter__menu .dropdown-menu { background: #fff !important; border: 1px solid #dcdcdc !important; border-radius: 16px !important; box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: 8px 0 !important; } /* items: blue text on white */ .filter__menu .dropdown-item { background: transparent !important; color: #0089CA !important; font-weight: 600; padding: 10px 16px; } /* hover/focus state */ .filter__menu .dropdown-item:hover, .filter__menu .dropdown-item:focus { background: #f5f5f5 !important; color: #0089CA !important; } /* active/selected state — keep it white (no solid blue block) */ .filter__menu .dropdown-item.active, .filter__menu .dropdown-item:active, .filter__menu .dropdown-item.active:hover, .filter__menu .dropdown-item.active:focus { background: #fff !important; color: #0089CA !important; } /* Small screen: full width, centered */ @media (max-width: 768px) { .spontaneous__link { display: block; width: 100%; max-width: 320px; /* keeps it elegant */ margin: 16px auto 0 auto; /* centers horizontally */ } } /* Use Bootstrap container widths and gutters for every block */ .jd-hero__inner, .filter .container, .section-wrap { /* add .section-wrap to your main content wrapper if needed */ width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--bs-gutter-x, .75rem); padding-right: var(--bs-gutter-x, .75rem); } /* mirror Bootstrap .container max-widths so all left edges line up */ @media (min-width: 576px){ .jd-hero__inner, .section-wrap { max-width: 540px; } } @media (min-width: 768px){ .jd-hero__inner, .section-wrap { max-width: 720px; } } @media (min-width: 992px){ .jd-hero__inner, .section-wrap { max-width: 960px; } } @media (min-width: 1200px){ .jd-hero__inner, .section-wrap { max-width: 1140px; } } @media (min-width: 1400px){ .jd-hero__inner, .section-wrap { max-width: 1320px; } } /* Make sure the chips bar also obeys the same container if it isn't already */ .filter .container{ padding-left: var(--bs-gutter-x, .75rem); padding-right: var(--bs-gutter-x, .75rem); }