/* ============================================================ Edge Construction — career page redesign (job.html: job detail + apply, merged into one page; careers.html the listing). Same architecture as PowerVacMEP's career-redesign.css (shared/group tooling: --pv-* variable names kept, same precedent as AAGH's own copy), with EC's own real theme: white ground, Wix Madefor Display (EC's sitewide font), and EC's own orange accent/gradient (--career-accent/--career-btn-color, already set site-wide in careers.html/job.html/apply.html's own inline :root block — #dc5f15 happens to match PowerVacMEP's accent hex already, so that token needed no change; the gradient button and the font did). Every id/class the existing JS (job.js, apply.js, cv-parser.js, cv-ai.js, cv-autofill.js, career.js) reads or creates is kept exactly as it was. ============================================================ */ :root { --pv-ink: #000000; --pv-text: #3a4048; --pv-muted: #737b85; --pv-line: #e4e7eb; --pv-line-2: #d7dbe1; --pv-surface: #ffffff; --pv-soft: #f6f7f9; --pv-soft-2: #eef0f3; --pv-accent: #dc5f15; --pv-accent-ink: #b44e11; --pv-accent-soft:#fcf2ec; --pv-btn-gradient: linear-gradient(to right, rgb(80 87 94), #dc5f15); --pv-btn-gradient-hover: linear-gradient(to right, rgb(64 70 76), #b44e11); --pv-dark: #2b2f33; --pv-ok: #1a7a4c; --pv-ok-soft: #e9f6ee; --pv-warn: #9a6a00; --pv-warn-soft: #fff6e0; --pv-danger: #b3261e; --pv-danger-soft:#fdeceb; --pv-radius-sm: 10px; --pv-radius: 16px; --pv-radius-lg: 22px; --pv-shadow-sm: 0 1px 2px rgba(20, 20, 20, .05); --pv-shadow: 0 8px 24px -8px rgba(20, 20, 20, .10), 0 1px 2px rgba(20,20,20,.04); --pv-shadow-lg: 0 24px 60px -20px rgba(20, 20, 20, .22); --pv-font: 'Wix Madefor Display', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --pv-max: min(1180px, 92%); /* cv-autofill.css reads these same tokens for the auto-fill panels -- values carried over from apply.html's own pre-existing theme block (its real, already-chosen orange), not reinvented here. */ --cv-af-font: var(--pv-font); --cv-af-ink: var(--pv-ink); --cv-af-text: var(--pv-text); --cv-af-muted: var(--pv-muted); --cv-af-line: var(--pv-line); --cv-af-line-strong: var(--pv-line-2); --cv-af-surface: var(--pv-surface); --cv-af-soft: var(--pv-soft); --cv-af-accent: var(--pv-accent); --cv-af-accent-hover: var(--pv-accent-ink); --cv-af-accent-soft: var(--pv-accent-soft); --cv-af-ok: var(--pv-ok); --cv-af-ok-soft: var(--pv-ok-soft); --cv-af-warn: var(--pv-warn); --cv-af-warn-soft: var(--pv-warn-soft); --cv-af-warn-line: #f0d888; --cv-af-todo: var(--pv-danger); --cv-af-todo-soft: var(--pv-danger-soft); --cv-af-todo-line: #eeb6b1; --cv-af-ai: #6941c6; --cv-af-ai-soft: #f4f3ff; --cv-af-radius: var(--pv-radius); --cv-af-radius-sm: var(--pv-radius-sm); --cv-af-shadow: var(--pv-shadow-sm); --cv-af-shadow-hover: var(--pv-shadow); --cv-af-focus: 0 0 0 4px var(--pv-accent-soft); } /* ── Reset for this page's own content only ── */ .job-page, .job-page * { box-sizing: border-box; } .job-page { font-family: var(--pv-font); color: var(--pv-text); background: var(--pv-soft); } .job-page h1, .job-page h2, .job-page h3, .job-page h4 { margin: 0; color: var(--pv-ink); font-family: var(--pv-font); } .job-page p { margin: 0; } .job-page a { color: inherit; } /* ── Loading overlay ── */ #loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255,255,255,.85); z-index: 9999; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; } #loading-overlay p { font-family: var(--pv-font); font-weight: 600; color: var(--pv-ink); } .loader { width: 46px; height: 46px; border: 4px solid var(--pv-line-2); border-top-color: var(--pv-accent); border-radius: 50%; animation: pv-spin .8s linear infinite; } @keyframes pv-spin { to { transform: rotate(360deg); } } /* ============================================================ JOB HERO ============================================================ */ .job-hero { background: linear-gradient(180deg, #fbfbfc 0%, var(--pv-soft) 100%); border-bottom: 1px solid var(--pv-line); padding: clamp(96px, 12vw, 136px) 0 clamp(36px, 5vw, 56px); } .job-hero__in { width: var(--pv-max); margin: 0 auto; } .job-hero__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--pv-muted); text-decoration: none; margin-bottom: 18px; } .job-hero__back:hover { color: var(--pv-accent); } .job-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; } .job-hero__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--pv-surface); border: 1px solid var(--pv-line-2); font-size: 12.5px; font-weight: 600; color: var(--pv-text); } .job-hero__chip--accent { background: var(--pv-accent-soft); border-color: transparent; color: var(--pv-accent-ink); } .job-hero__chip:empty, #career-cname:empty, #job-type:empty { display: none; } .job-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; max-width: 18ch; } /* .job-page .job-hero__date, not just .job-hero__date: same .job-page p {margin:0} specificity collision as .submit-note below -- a plain class selector on a

loses to it and the margin-top silently never applies. */ .job-page .job-hero__date { margin-top: 12px; font-size: 14px; color: var(--pv-muted); font-weight: 500; } .job-hero__actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .pv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 999px; border: none; font-family: var(--pv-font); font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .pv-btn--primary { background: var(--pv-btn-gradient); color: #fff; box-shadow: 0 10px 24px -10px rgba(220, 95, 21, .55); } .pv-btn--primary:hover { background: var(--pv-btn-gradient-hover); transform: translateY(-1px); } .pv-btn--ghost { background: var(--pv-surface); color: var(--pv-ink); border: 1px solid var(--pv-line-2); } .pv-btn--ghost:hover { background: var(--pv-soft-2); } /* ============================================================ JOB BODY — description (main) + sticky info card (side) ============================================================ */ .job-body { width: var(--pv-max); margin: 0 auto; padding: clamp(32px, 5vw, 56px) 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 48px); align-items: start; } .job-card { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-radius); box-shadow: var(--pv-shadow-sm); } .job-body__main { padding: clamp(24px, 3.5vw, 40px); } .job-section + .job-section { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--pv-line-2); } .job-section__eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-accent-ink); margin-bottom: 8px; } .job-section h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; } #job-desc { font-size: 15px; line-height: 1.7; color: var(--pv-text); white-space: pre-line; text-align: left; } .aagh-custom-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .aagh-custom-list .cutsom-square-icon { display: inline-flex; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--pv-accent-soft); position: relative; } .aagh-custom-list .cutsom-square-icon::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; background: var(--pv-accent); border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .aagh-custom-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; } .aagh-custom-list p { font-size: 14.5px; line-height: 1.55; color: var(--pv-text); align-self: center; text-align: left; } .job-body__side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; } .job-info-card { padding: 22px; } .job-info-card h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 16px; } .job-info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--pv-line); } .job-info-row:first-of-type { border-top: none; padding-top: 0; } .job-info-row__label { font-size: 12.5px; color: var(--pv-muted); font-weight: 600; } .job-info-row__value { font-size: 13.5px; color: var(--pv-ink); font-weight: 600; text-align: right; } .job-info-row__value:empty::before { content: '—'; color: var(--pv-muted); font-weight: 400; } .job-apply-card { padding: 22px; text-align: center; background: var(--pv-dark); border: none; } .job-apply-card p { color: #d8dadd; font-size: 13px; margin-bottom: 14px; } .job-apply-card .pv-btn { width: 100%; } /* margin-bottom / margin-top utility classes still used by job.js-rendered markup elsewhere */ .margin-bottom { margin-bottom: 10px; } .margin-top { margin-top: 10px; } @media (max-width: 760px) { .job-body { grid-template-columns: 1fr; } .job-body__side { position: static; } } /* ============================================================ APPLY SECTION One spacing scale for every gap in this section (8/16/24/32/48), and one shared container -- same max-width, padding-inline and margin-inline -- for the back link, the intro, the pill and both cards (#mycModal is a position:fixed overlay and stays outside it on purpose; it centers itself over the whole panel, not the content column). Logical properties throughout, so this also works right-to-left. #job-panel-header (job-panel.css) uses the same padding-inline value, so the sticky title/close row lines up with the content below it -- see that file's own comment. ============================================================ */ :root { --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --apply-container-max: 1000px; --apply-container-pad: var(--space-2); } .apply-section { padding-block-end: 0; } .apply-container { max-width: var(--apply-container-max); margin-inline: auto; padding-inline: var(--apply-container-pad); /* Same top/bottom padding standalone or in the panel -- one rule for every state (rule 8), not a separate in-panel override. */ padding-block: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } /* "Applying for [title] · [type]" -- content-width and centered (not stretched full-width by .apply-container's flex column), so it never looks like a form field. Works for any title/type length: the title is the only part allowed to shrink+ellipsis, "Applying for" and the dot+type never do, so they're never the thing that gets cut off. */ .applying-for { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1); padding: 10px 20px; max-width: 100%; background: var(--pv-accent-soft); border: 1px solid #f3cca8; border-radius: 999px; font-size: 13.5px; color: var(--pv-accent-ink); font-weight: 600; } .applying-for__lead, .applying-for__dot, .applying-for__type { flex: 0 0 auto; } .applying-for__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pv-ink); } .applying-for__title:empty::before { content: 'this role'; color: inherit; } /* neutral fallback if the title is missing */ .applying-for__type { color: var(--pv-ink); } .applying-for__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; } /* No type (or no company/type string at all): hide the dot too, so there's no stray separator with nothing after it. */ .applying-for__type:empty { display: none; } .applying-for__dot:has(+ .applying-for__type:empty) { display: none; } @media (max-width: 480px) { .applying-for { max-width: 100%; } .applying-for__title { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* ── Form shell ── */ .aagh-career-form { max-width: 100%; width: 100%; background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-radius-lg); box-shadow: var(--pv-shadow); padding: clamp(24px, 4vw, 44px); /* The two-column field grid below reacts to how wide the form itself is, not the viewport -- it's often embedded narrower than the viewport (e.g. inside the careers.html slide-over panel's iframe). */ container-type: inline-size; } .aagh-career-form.cv-af-waiting { padding: 0; border: none; box-shadow: none; background: transparent; } .aagh-career-form.cv-af-waiting .cv-af-banner { margin-bottom: 0; } .aagh-career-sub-heading { font-size: 17px; font-weight: 700; color: var(--pv-ink); margin: 30px 0 4px; } .aagh-career-sub-heading:first-child { margin-top: 0; } .career-vr-line { height: 1px; background: var(--pv-line); margin: 14px 0 18px; } /* Shared two-column field grid -- used both by the static form sections (.make-input-2-column) and by the "Required details" / "Missing from your CV" / "Optional details" panels cv-autofill.js builds at runtime (.cv-af-grid, assets/js/cv-autofill.js fieldGrid()): one grid system, so every field of every job lands in the same layout no matter which panel it ends up in, including fields that don't exist yet. DOM order is kept (no grid-auto-flow: dense) so tab/reading order stays correct; an odd leftover field simply ends its row at the same column width as the rest. */ .make-input-2-column, .cv-af-grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; align-items: start; } @container (min-width: 600px) { .make-input-2-column, .cv-af-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Fields that should always span both columns regardless of type above. */ .make-input-2-column > textarea, .cv-af-grid > textarea, .make-input-2-column > .career-verify, .cv-af-grid > .career-verify, .make-input-2-column .input-field-margin:has(> textarea), .cv-af-grid .input-field-margin:has(> textarea) { grid-column: 1 / -1; } .input-field-margin { margin: 16px 0 0; } .input-field-margin label:not(.error-message) { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--pv-ink); } /* The required-field asterisk is a plain, unclassed * -- this targets it without also catching the other spans a label can carry (the field icon, a "(Years)"-style unit note, ".optional-note"), which must keep their own neutral styling instead of inheriting error red. */ .input-field-margin label span:not(.cv-af-field-icon):not(.cv-af-field-unit):not(.optional-note) { color: var(--pv-danger); margin-left: 2px; } .optional-note, .cv-af-field-unit { color: var(--pv-muted); font-weight: 400; font-size: 12px; margin-left: 2px; } /* One Material Symbol per label (assets/js/cv-autofill.js addFieldIcons()); the web font's own default is 24px solid black, which is both oversized next to 13px label text and (via the rule above, before this exclusion) was inheriting the required-asterisk's red. */ .cv-af-field-icon { font-size: 16px !important; line-height: 1; vertical-align: -3px; margin-right: 6px; color: var(--pv-muted); } label.error-message, .error-message { display: block; min-height: 0; margin-top: 5px; font-size: 12px; color: var(--pv-danger); font-weight: 600; } label.error-message:empty, .error-message:empty { display: none; } .aagh-input-field { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius-sm); background: var(--pv-surface); color: var(--pv-ink); font-family: var(--pv-font); font-size: 14.5px; transition: border-color .15s ease, box-shadow .15s ease; } .aagh-input-field::placeholder { color: #a7adb5; } .aagh-input-field:focus { outline: none; border-color: var(--pv-accent); box-shadow: 0 0 0 4px var(--pv-accent-soft); } .aagh-input-field:disabled { background: var(--pv-soft); color: var(--pv-muted); } input[type="file"].aagh-input-field, .file-name-input { height: auto; min-height: 46px; padding: 10px 46px 10px 14px; border: 1px dashed var(--pv-line-2); background: var(--pv-soft); font-size: 13.5px; } .file-name-input { border-style: solid; background: var(--pv-surface); } input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 14px; border: 1px solid var(--pv-line-2); border-radius: 8px; background: var(--pv-surface); color: var(--pv-ink); font: 600 12.5px var(--pv-font); cursor: pointer; } .select { position: relative; display: block; width: 100%; height: 46px; } .select::after { content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; border-right: 2px solid var(--pv-muted); border-bottom: 2px solid var(--pv-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .select select.career-select-element { display: block; width: 100%; height: 46px; padding: 0 36px 0 14px; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius-sm); background: var(--pv-surface); color: var(--pv-ink); font-family: var(--pv-font); font-size: 14.5px; appearance: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .select select.career-select-element:focus { outline: none; border-color: var(--pv-accent); box-shadow: 0 0 0 4px var(--pv-accent-soft); } .select select option, select option { color: var(--pv-ink); } .career-splited-input { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ── Languages ── */ /* Same control look as a real , so it needs its own copy of that sizing/border/chevron rather than the glyph (▼, a literal Unicode triangle in job.html) it originally shipped its own down-arrow with. */ .languageaccordion-item-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 36px 0 14px; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius-sm); background: var(--pv-surface); font-family: var(--pv-font); font-size: 14.5px; font-weight: 400; color: var(--pv-ink); cursor: pointer; } .languageaccordion-item-header .icon { font-size: 0; } .languageaccordion-item-header::after { content: ""; position: absolute; top: 50%; right: 15px; width: 8px; height: 8px; border-right: 2px solid var(--pv-muted); border-bottom: 2px solid var(--pv-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .languageaccordion-item-content { padding: 14px; margin-top: 8px; border: 1px solid var(--pv-line); border-radius: var(--pv-radius-sm); background: var(--pv-soft); } .language-level-row { display: grid; grid-template-columns: 1fr max-content; gap: 10px; margin-bottom: 10px; } .language-level-row select { height: 42px; padding: 0 12px; border: 1px solid var(--pv-line-2); border-radius: 8px; background: var(--pv-surface); font-family: var(--pv-font); font-size: 13.5px; } .add-language-btn, .remove-language-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pv-line-2); background: var(--pv-surface); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .add-language-btn { color: var(--pv-accent-ink); } .add-language-btn:hover { background: var(--pv-accent-soft); border-color: transparent; } .remove-language-btn { color: var(--pv-danger); } .remove-language-btn:hover { background: var(--pv-danger-soft); border-color: transparent; } .remove-language-btn.remove-btn-hidden, .remove-language-btn[style*="hidden"] { display: none; } #selectedLanguagesString { margin-top: 10px; font-size: 13px; color: var(--pv-muted); } #languageList { margin-top: 4px; } /* ── Additional files ── */ .additional-file-container { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 20px; margin-top: 14px; } .additional-file-col { width: auto; margin: 0; } .additional-file-col > label.aagh-career-paragrapg { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; color: var(--pv-ink); } .splitted-name-button { display: flex; align-items: center; gap: 10px; } .splitted-name-button > span[style*="border"] { display: none; } @media (max-width: 640px) { .additional-file-container { grid-template-columns: 1fr; } } .remove-button, .removeButtonCV { all: unset; box-sizing: border-box; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--pv-line-2); background: var(--pv-surface); color: var(--pv-danger); font-size: 12px; cursor: pointer; display: grid; place-items: center; } .remove-button:hover { background: var(--pv-danger-soft); } .aagh-input-field[id^="career-cv"], .aagh-input-field[id^="cover-letter"], .aagh-input-field[id^="additional-file"] { position: relative; } .input-field-margin > div[style*="position: relative"] { position: relative; } /* ── Verify / captcha ── */ .career-verify { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--pv-line); } .career-verify__code { display: flex; align-items: center; gap: 8px; } #captcha { display: flex; align-items: center; justify-content: center; min-width: 160px; height: 46px; padding: 0 16px; border: 1px dashed var(--pv-line-2); border-radius: var(--pv-radius-sm); background: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 2px, transparent 2px 9px), var(--pv-soft); color: var(--pv-ink); font-family: Georgia, serif; font-size: 23px; letter-spacing: .18em; user-select: none; } .career-verify__refresh { all: unset; width: 42px; height: 42px; border-radius: var(--pv-radius-sm); border: 1px solid var(--pv-line-2); background: var(--pv-surface); color: var(--pv-text); display: grid; place-items: center; cursor: pointer; } .career-verify__refresh:hover { background: var(--pv-soft-2); } .career-verify__answer { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; max-width: 280px; } #userInput { height: 42px; padding: 0 12px; border: 1px solid var(--pv-line-2); border-radius: var(--pv-radius-sm); font-size: 14px; font-family: var(--pv-font); } #userInput:focus { outline: none; border-color: var(--pv-accent); box-shadow: 0 0 0 4px var(--pv-accent-soft); } #error { min-height: 1.3em; margin-top: 8px; font-size: 13px; } #error:empty { display: none; } /* ── Submit ── */ .career-submit-row { margin-top: var(--space-3); text-align: left; } .career-submit-button, .pv-btn.career-submit-button { all: unset; } a.career-submit-button, #submit-application { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 34px; border-radius: 999px; background: var(--pv-btn-gradient); color: #fff; font-family: var(--pv-font); font-weight: 700; font-size: 15.5px; cursor: pointer; text-decoration: none; box-shadow: 0 12px 26px -10px rgba(220,95,21,.5); transition: transform .15s ease, background-color .15s ease, opacity .15s ease; } #submit-application:hover { background: var(--pv-btn-gradient-hover); transform: translateY(-1px); } #submit-application.is-disabled { opacity: .45; cursor: not-allowed; transform: none; } /* Lead text, count badge and every chip flow as one left-aligned wrapping list (direct flex children of .submit-note, no extra wrapper around the chips) so short rows fill naturally instead of each sitting on its own centered line. */ /* .job-page .submit-note, not just .submit-note: it's a

, and .job-page p {margin:0} (this file's own reset for the sitewide p{text-align:justify} stylesheet) has higher specificity (class+element) than a plain class selector, so it was silently winning and zeroing this margin out. */ .job-page .submit-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--space-1); margin: var(--space-4) 0 0; font-size: 13px; line-height: 1.5; } .submit-note__lead { color: var(--pv-ink); font-weight: 600; } .submit-note__count { padding: 2px 10px; border-radius: 999px; background: var(--pv-danger-soft); color: var(--pv-danger); font-weight: 700; font-size: 12px; } .submit-note__link { all: unset; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid #eeb6b1; border-radius: 999px; background: #fff; color: var(--pv-danger); font-size: 12.5px; font-weight: 600; cursor: pointer; } .submit-note__link-icon { width: 13px; height: 13px; flex: 0 0 auto; } .submit-note__link:hover { background: var(--pv-danger-soft); } .submit-note.is-ready { color: var(--pv-ok); font-weight: 600; } /* ============================================================ CV AUTO-FILL (cv-autofill.js builds this markup itself; this just restyles the exact classes it creates) ============================================================ */ .cv-af-waiting > :not(.cv-af-banner) { display: none; } /* "How it works" -- fills the space below the upload card while waiting for a CV (the form fields are hidden until then); hidden once a CV is chosen and the real fields take over, via the exact same .cv-af-waiting class cv-autofill.js already toggles, so no script change is needed. */ /* Card 1 (CV upload) and card 2 (3 steps) share one recipe: same padding, border, radius and shadow, so their icons start on the same left edge and the cards read as one pair, not two different components. */ .cv-af-banner, .apply-steps { border: 1px solid var(--pv-line); border-radius: var(--pv-radius-lg); background: var(--pv-surface); box-shadow: var(--pv-shadow-sm); padding: var(--space-3); } .apply-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-3); align-items: start; } .apply-steps__item { display: flex; gap: 14px; align-items: flex-start; } .apply-steps__num { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--pv-accent-soft); color: var(--pv-accent-ink); display: grid; place-items: center; } .apply-steps__num svg { width: 19px; height: 19px; } .apply-steps__num b { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--pv-accent); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; font-style: normal; box-shadow: 0 0 0 2px var(--pv-surface); } .apply-steps__item h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--pv-ink); text-align: left; } .apply-steps__item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--pv-muted); text-align: left; } .aagh-career-form:not(.cv-af-waiting) + .apply-steps { display: none; } @media (max-width: 768px) { .apply-steps { grid-template-columns: 1fr; row-gap: var(--space-3); } } .cv-af-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-family: var(--pv-font); font-size: 15px; line-height: 1.5; color: var(--pv-text); } .cv-af-banner__media { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: var(--pv-accent-soft); color: var(--pv-accent-ink); display: grid; place-items: center; } .cv-af-banner__media--warn { background: var(--pv-warn-soft); color: var(--pv-warn); } .cv-af-banner__media--busy { background: var(--pv-soft-2); } .cv-af-icon { width: 24px; height: 24px; } .cv-af-banner__body { flex: 1 1 auto; min-width: 0; text-align: left; } .cv-af-banner__title { font-size: 17px; font-weight: 700; color: var(--pv-ink); margin: 0; text-align: left; } .cv-af-banner__text { margin: 4px 0 0; color: var(--pv-muted); text-align: left; } .cv-af-banner__privacy { display: flex; align-items: center; gap: 6px; margin-top: var(--space-2); color: var(--pv-muted); font-size: 12.5px; text-align: left; } .cv-af-banner__privacy .cv-af-icon { width: 14px; height: 14px; flex: 0 0 auto; } @media (max-width: 640px) { .cv-af-banner { flex-direction: column; align-items: flex-start; text-align: left; } .cv-af-button { width: 100%; } } .cv-af-button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: none; background: var(--pv-btn-gradient); color: #fff; font-family: var(--pv-font); font-size: 14.5px; font-weight: 700; cursor: pointer; } .cv-af-button:hover { background: var(--pv-btn-gradient-hover); } .cv-af-button--ghost { background: var(--pv-surface); color: var(--pv-ink); border: 1px solid var(--pv-line-2); } .cv-af-button--ghost:hover { background: var(--pv-soft-2); } .cv-af-button__icon { width: 17px; height: 17px; } .cv-af-ring { --cv-af-progress: 0; flex: 0 0 auto; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--pv-ok) calc(var(--cv-af-progress)*1%), var(--pv-line-2) 0); } .cv-af-ring__value { width: 56px; height: 56px; border-radius: 50%; background: var(--pv-surface); display: flex; align-items: baseline; justify-content: center; padding-top: 18px; font-size: 17px; font-weight: 800; color: var(--pv-ink); } .cv-af-ring__value small { font-size: 10.5px; font-weight: 700; color: var(--pv-muted); margin-left: 1px; } .cv-af-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cv-af-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; } .cv-af-chip__icon { width: 12px; height: 12px; } .cv-af-chip--todo { background: var(--pv-danger-soft); color: var(--pv-danger); } .cv-af-chip--done { background: var(--pv-ok-soft); color: var(--pv-ok); } .cv-af-chip--confirm { background: var(--pv-warn-soft); color: var(--pv-warn); } .cv-af-chip--ai { background: var(--cv-af-ai-soft); color: var(--cv-af-ai); } .cv-af-chip--action { border: 0; cursor: pointer; font-family: var(--pv-font); } .cv-af-chip--action:hover { filter: brightness(.96); text-decoration: underline; } .cv-af-spinner { width: 24px; height: 24px; border: 3px solid var(--pv-line-2); border-top-color: var(--pv-accent); border-radius: 50%; animation: pv-spin .8s linear infinite; } .cv-af-steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; } .cv-af-steps__item { display: inline-flex; align-items: center; gap: 6px; color: var(--pv-muted); } .cv-af-steps__mark { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--pv-line-2); box-sizing: border-box; } .cv-af-steps__item--done { color: var(--pv-ok); } .cv-af-steps__item--done .cv-af-steps__mark { border: 0; } .cv-af-steps__item--active { color: var(--pv-ink); font-weight: 700; } .cv-af-steps__item--active .cv-af-steps__mark { border-color: var(--pv-accent); border-top-color: transparent; animation: pv-spin .8s linear infinite; } /* panels */ .cv-af-panel { padding: 0; margin-bottom: 14px; border: 1px solid var(--pv-line); border-radius: var(--pv-radius); background: var(--pv-surface); box-shadow: var(--pv-shadow-sm); transition: box-shadow .2s, border-color .2s; } .cv-af-panel:hover { box-shadow: var(--pv-shadow); } .cv-af-panel.is-open { border-color: var(--pv-line-2); } .cv-af-panel__heading { margin: 0; } .cv-af-panel__toggle { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 20px; border: 0; border-radius: var(--pv-radius); background: transparent; color: var(--pv-ink); font-family: var(--pv-font); text-align: left; cursor: pointer; } .cv-af-panel__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; } .cv-af-panel__icon .cv-af-icon { width: 20px; height: 20px; } .cv-af-panel--required .cv-af-panel__icon { background: var(--pv-accent-soft); color: var(--pv-accent-ink); } .cv-af-panel--missing .cv-af-panel__icon { background: var(--pv-danger-soft); color: var(--pv-danger); } .cv-af-panel--optional .cv-af-panel__icon { background: var(--pv-soft-2); color: var(--pv-muted); } .cv-af-panel--filled .cv-af-panel__icon { background: var(--pv-ok-soft); color: var(--pv-ok); } .cv-af-panel--attachments .cv-af-panel__icon { background: #e7f1fb; color: #1f6fb2; } .cv-af-panel__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cv-af-panel__title { font-size: 15.5px; font-weight: 700; } .cv-af-panel__subtitle { font-size: 13px; color: var(--pv-muted); } .cv-af-panel__count { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--pv-soft-2); font-size: 12px; font-weight: 700; } .cv-af-panel--required .cv-af-panel__count, .cv-af-panel--missing .cv-af-panel__count { background: var(--pv-danger-soft); color: var(--pv-danger); } .cv-af-panel--filled .cv-af-panel__count { background: var(--pv-ok-soft); color: var(--pv-ok); } .cv-af-panel__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--pv-muted); transition: transform .25s ease; } .cv-af-panel.is-open .cv-af-panel__chevron { transform: rotate(180deg); } .cv-af-panel__region { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; } .cv-af-panel.is-open .cv-af-panel__region { grid-template-rows: 1fr; } .cv-af-panel__inner { min-height: 0; overflow: hidden; } .cv-af-panel__body { padding: 2px 16px 16px; border-top: 1px solid var(--pv-line); } .cv-af-panel:not(.is-open) .cv-af-panel__body { border-top-color: transparent; } .cv-af-panel .input-field-margin { margin: 16px 0 0; } .cv-af-panel .aagh-career-sub-heading { margin: 22px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pv-muted); } .cv-af-panel .aagh-career-sub-heading:first-child { margin-top: 4px; } .cv-af-panel .career-vr-line { display: none; } /* cv-autofill.js's titleBox() splits the title select out of the [title, first name] box it originally shared (nameRow.classList.add('cv-af-solo')) for the "Required details" panel, leaving the title's own 120px grid column behind, now empty, in the row that's left with only first name in it. Collapsing that row back to normal block flow (its grid-template-columns, set inline on the element, stops applying once it isn't `display: grid` any more) is the only way to reclaim that space -- needs !important to beat the inline style's higher specificity. */ .cv-af-panel .cv-af-solo { display: block !important; } /* An odd one out -- last item in the grid, with no second field to its right -- fills the row instead of leaving that side visibly empty. */ .make-input-2-column > .input-field-margin:last-child:nth-child(odd), .cv-af-grid > .input-field-margin:last-child:nth-child(odd) { grid-column: 1 / -1; } /* "Filled from your CV" moves the ORIGINAL static sections (Basic Information, Professional Information, ...) in whole, each with its own heading and its own 2-column grid -- so when CV-autofill has pulled a few fields out of each into other panels, each section's leftover count can go odd independently, stranding a field alone even though the next section's first field would make it a perfectly good pair. Dropping the per-section headings/grids here (display: contents makes each .make-input-2-column transparent to layout, so its fields become items of the one grid below instead) lets every field in this panel flow as one continuous 2-column sequence. (Required details / Missing / Optional / Attachments don't have this problem -- cv-autofill.js already builds each of those as one flat grid, no per-section headings.) */ .cv-af-panel--filled .cv-af-panel__body { display: grid; grid-template-columns: 1fr; column-gap: 24px; align-items: start; } @container (min-width: 600px) { .cv-af-panel--filled .cv-af-panel__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cv-af-panel--filled .cv-af-panel__body > .make-input-2-column { display: contents; } .cv-af-panel--filled .aagh-career-sub-heading, .cv-af-panel--filled .career-vr-line { display: none; } /* The per-section "last odd one spans full width" rule above is keyed off each section's OWN last child, which no longer means anything once the sections are merged like this -- a field that used to be alone at the end of its section usually has a real row-mate now, from the section after it. */ .cv-af-panel--filled .make-input-2-column > .input-field-margin:last-child:nth-child(odd) { grid-column: auto; } .cv-af--missing, .cv-af-frame--missing select { border-color: var(--cv-af-todo-line); background-color: #fffaf9; } .cv-af--check, .cv-af-frame--check select { border-color: var(--cv-af-warn-line); background-color: #fffcf2; } .cv-af--ai { border-color: #d9d6fe; background-color: var(--cv-af-ai-soft); } /* Tag after the label: "From CV", "Please confirm", "AI · Please confirm" */ .cv-af-panel .input-field-margin:has(.cv-af--high) > label:first-child::after, .cv-af-panel .input-field-margin:has(.cv-af--check) > label:first-child::after { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: 1px; } .cv-af-panel .input-field-margin:has(.cv-af--high) > label:first-child::after { content: "From CV"; background: var(--cv-af-ok-soft); color: var(--cv-af-ok); } .cv-af-panel .input-field-margin:has(.cv-af--check) > label:first-child::after { content: "Please confirm"; background: var(--cv-af-warn-soft); color: var(--cv-af-warn); } .cv-af-panel .input-field-margin:has(.cv-af--ai) > label:first-child::after { content: "AI · Please confirm"; background: var(--cv-af-ai-soft); color: var(--cv-af-ai); } .cv-af-hint { margin-top: 6px; font-size: 12px; line-height: 1.45; } .cv-af-hint--high, .cv-af-hint--plain { display: none; } .cv-af-hint--check { color: var(--pv-warn); } .cv-af-hint--missing { color: var(--pv-danger); } /* ============================================================ MODAL (#mycModal) & review-confirm dialog ============================================================ */ .cmodal { display: none; position: fixed; z-index: 10001; inset: 0; background: rgba(21,24,28,.55); align-items: center; justify-content: center; } .cmodal[style*="block"] { display: flex !important; } .career-cmodal-content { background: var(--pv-surface); width: min(420px, 88vw); margin: 0; padding: 32px 28px; border-radius: var(--pv-radius-lg); box-shadow: var(--pv-shadow-lg); text-align: center; position: relative; } .career-close-cmodal-icon { position: absolute; top: 14px; right: 16px; font-weight: 700; color: var(--pv-muted); cursor: pointer; font-family: var(--pv-font); font-size: 14px; } .career-close-cmodal-icon:hover { color: var(--pv-ink); } #career-submit-message { font-size: 17px; font-weight: 700; color: var(--pv-ink); margin-top: 10px; } .career-cmodal-content .fa-check, .career-cmodal-content .fa-xmark { font-size: 42px !important; } .career-cmodal-content a.career-submit-button { margin-top: 20px; height: 46px; padding: 0 28px; font-size: 14px; } .review-confirm { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; } .review-confirm.is-open { display: flex; } .review-confirm__backdrop { position: absolute; inset: 0; background: rgba(21,24,28,.55); backdrop-filter: blur(3px); } .review-confirm__box { position: relative; width: 100%; max-width: 440px; padding: 28px 24px 22px; border-radius: var(--pv-radius-lg); background: var(--pv-surface); box-shadow: var(--pv-shadow-lg); text-align: left; font-family: var(--pv-font); } .review-confirm__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px; background: var(--pv-accent-soft); color: var(--pv-accent-ink); } .review-confirm__icon svg { width: 24px; height: 24px; } .review-confirm__title { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--pv-ink); } .review-confirm__text { margin: 0; color: var(--pv-muted); font-size: 14px; line-height: 1.55; } .review-confirm__check { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--pv-line); border-radius: 12px; background: var(--pv-soft); font-size: 14px; font-weight: 500; cursor: pointer; } .review-confirm__check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--pv-accent); } .review-confirm__check:has(input:checked) { border-color: #f3cca8; background: var(--pv-accent-soft); } .review-confirm__actions { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 10px; margin-top: 20px; } .review-confirm__button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: none; background: var(--pv-accent); color: #fff; font: 700 14px var(--pv-font); cursor: pointer; } .review-confirm__button:disabled { opacity: .45; cursor: not-allowed; } .review-confirm__button--ghost { background: var(--pv-surface); color: var(--pv-text); border: 1px solid var(--pv-line-2); } body.review-confirm-open { overflow: hidden; } /* ============================================================ Responsive ============================================================ */ @media (max-width: 640px) { .job-hero { padding-top: 84px; } .job-hero__actions { flex-direction: column; } .job-hero__actions .pv-btn { width: 100%; } .job-body__main { padding: 22px; } .career-verify { gap: 12px; } .career-verify__answer { max-width: none; } .additional-file-container { grid-template-columns: 1fr; } } /* ============================================================ LISTING PAGE (careers.html) ============================================================ */ .career-page, .career-page * { box-sizing: border-box; } .career-page { font-family: var(--pv-font); color: var(--pv-text); } .career-page h1, .career-page h2, .career-page h3 { margin: 0; color: var(--pv-ink); font-family: var(--pv-font); } :root { /* Structure borrowed from the reference design; colors are our own established tokens throughout (same ones job.html/the panel use), not the reference's own cream/navy/blue palette. */ --pv-cream: var(--pv-soft); --pv-cream-line: var(--pv-line); --pv-navy: var(--pv-ink); --pv-bar-blue: #6b7280; --pv-bar-tan: #b9bec6; --pv-bar-accent: var(--pv-accent); } .career-page { background: var(--pv-cream); } .career-hero { position: relative; overflow: hidden; background: var(--pv-cream); border-bottom: 1px solid var(--pv-cream-line); /* EC's header-area is position:fixed (styles/css/newNav.css) -- breathing room below it, same as this page's own old career-banner used. */ padding: 150px 0 clamp(36px, 4.5vw, 52px); } .career-hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--pv-cream-line) 1px, transparent 1px), linear-gradient(90deg, var(--pv-cream-line) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%); } /* min-height: the art is position:absolute (out of normal flow), so without this the container's height comes only from the text block beside it -- at wide viewports the art can grow taller than the text, overflowing the container and getting clipped by .career-hero's own overflow:hidden. 200px comfortably covers this site's art at its tallest possible size. */ .career-hero__container { position: relative; z-index: 1; max-width: var(--pv-max); margin: 0 auto; min-height: 200px; } .career-hero__art { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: clamp(300px, 30vw, 440px); pointer-events: none; } .career-hero__art::before { content: ""; position: absolute; inset: -45%; background: radial-gradient(ellipse 60% 60% at 60% 45%, rgba(220, 95, 21, .18) 0%, transparent 70%); } .career-hero__art svg { position: relative; width: 100%; height: auto; display: block; } .career-hero__in { position: relative; max-width: 620px; } .career-hero .job-hero__chip--accent { background: rgba(220, 95, 21, .12); color: var(--pv-accent-ink); border: 1px solid rgba(220, 95, 21, .32); } .career-hero h1 { margin-top: 14px; color: var(--pv-navy); font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; } .career-hero h1 em { color: var(--pv-accent); font-style: normal; } .career-hero__sub { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--pv-text); max-width: 48ch; text-align: left; } @media (max-width: 860px) { .career-hero__art { opacity: .5; width: clamp(220px, 40vw, 340px); } } @media (max-width: 560px) { .career-hero { padding-top: 118px; } .career-hero__art { display: none; } /* The art is hidden here, so the container no longer needs room for it. */ .career-hero__container { min-height: 0; } } .career-list-section { background: var(--pv-cream); padding: clamp(48px, 7vw, 80px) 0 clamp(72px, 9vw, 110px); } .career-list-section__in { max-width: var(--pv-max); margin: 0 auto; } .career-list-grid { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; } .career-list-section__head { position: sticky; top: 24px; } .career-list-section__head h2 { margin-top: 6px; color: var(--pv-navy); font-size: clamp(26px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; } .career-list-section__rule { width: 52px; height: 3px; border-radius: 2px; background: var(--pv-accent); margin: 22px 0 20px; } .career-open-count__num { display: block; font-size: clamp(30px, 3vw, 38px); font-weight: 800; line-height: 1; color: var(--pv-navy); } .career-open-count__label { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pv-muted); } /* .career-page .career-group__title, not just .career-group__title: it's an

, and .career-page h1,h2,h3 {margin:0} (this file's own reset for the sitewide heading styles) has higher specificity than a plain class selector, so it was silently winning and zeroing this margin out. */ .career-page .career-group__title { margin: 34px 0 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-muted); } .career-page .career-group__title:first-child { margin-top: 0; } #jobs-available { margin-top: 4px; } .career-group__list { display: flex; flex-direction: column; gap: 10px; } .career-group__list:empty { display: none; } @media (max-width: 860px) { .career-list-grid { grid-template-columns: 1fr; gap: 28px; } .career-list-section__head { position: static; } } .job-title-name-anchor { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: var(--pv-surface); border: 1px solid var(--pv-line); border-left: 4px solid var(--pv-accent); border-radius: var(--pv-radius-sm); text-decoration: none; font-size: 16px; font-weight: 700; color: var(--pv-ink); box-shadow: var(--pv-shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .job-title-name-anchor::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7em; opacity: .4; flex: 0 0 auto; transition: transform .15s ease, opacity .15s ease; } .job-title-name-anchor:hover { transform: translateY(-2px); box-shadow: var(--pv-shadow); border-left-color: var(--pv-accent-ink); } .job-title-name-anchor:hover::after { transform: translateX(3px); opacity: .9; } .career-empty { display: none; padding: 48px 32px; text-align: center; background: var(--pv-surface); border: 1px dashed var(--pv-line-2); border-radius: var(--pv-radius); } .career-empty h3 { font-size: 17px; font-weight: 700; } .career-empty p { margin-top: 8px; color: var(--pv-muted); font-size: 14.5px; } /* ============================================================ In-panel mode: job.html loaded inside careers.html's slide-over panel (see the in-panel class set on in job.html's , and job-panel.js/job-panel.css on careers.html). The panel already has its own close button and sits over careers.html's own navbar/footer, so this page's copies of those are redundant here -- hidden, not removed, so a direct/standalone visit to job.html (own tab, shared link) still shows them normally. ============================================================ */ html.in-panel .header-area, html.in-panel .footer-container-main, html.in-panel .job-hero__back, html.in-panel .job-hero__other-roles { display: none !important; } html.in-panel .job-hero { padding-top: clamp(28px, 5vw, 40px); } html.in-panel .job-body { width: 92%; } html.in-panel body { background: #f6f7f9; } /* "Apply" swaps #job-detail for the apply section instead of scrolling, toggled by job.html's own small inline script (./assets/js/... none needed, see the