/** * Job detail modal (Phase 3) — fixed, full-height, right-anchored slide-in panel. * * The panel is pinned to the viewport (top/right/bottom: 0) and scrolls internally; the page * behind is scroll-locked. Everything visual is driven by the custom properties in `.pjb-modal` * below, so a designer can rebrand (colours, widths, spacing, shadow, radii) without touching * structure or JS. Class names are stable hooks. * * The palette comes from assets/css/prime-jobs-tokens.css; the properties here are the modal's own * geometry plus semantic aliases onto those tokens. The modal is portaled to , so it sits * outside `#vacancies` and reads the tokens from `:root`. */ .pjb-modal { /* ---- geometry (override these to re-space) ---- */ /* --pjb-ink-80, not --cf-primary-80: identical colour, but the token carries a fallback, so the overlay still dims the page outside the Bricks child theme. See prime-jobs-tokens.css. */ --pjb-overlay: var(--pjb-ink-80); --pjb-panel-max: 1240px; --pjb-panel-bg: var(--pjb-white); --pjb-shadow: -10px 0 50px rgba(0, 0, 0, 0.2); --pjb-gap: 48px; --pjb-pad: 56px; --pjb-aside-w: 360px; /* the two sidebar cards */ --pjb-card-bg: var(--pjb-surface); --pjb-card-radius: 0; --pjb-card-pad: 36px 32px; --pjb-card-gap: 28px; /* ---- semantic colours, mapped onto the shared tokens ---- */ --pjb-accent: var(--pjb-brand-blue); /* CTAs, accents, apply button */ --pjb-accent-contrast: var(--pjb-white); --pjb-heading: var(--pjb-navy); --pjb-text: #14181f; --pjb-muted: #5a6472; /* Row rules inside the glance card are a tint of the brand blue, not a neutral grey. The literal is the fallback: if color-mix() isn't supported the second declaration is dropped at parse time, rather than resolving to currentColor and drawing a dark line. */ --pjb-rule: #bdd7e2; --pjb-rule: color-mix(in srgb, var(--pjb-brand-blue) 22%, transparent); /* Icon colourways live in prime-jobs-tokens.css; the sidebar overrides --pjb-icon-mono only. */ position: fixed; inset: 0; z-index: 2147483000; /* above Bricks/MotionPage/offcanvas layers */ display: none; } .pjb-modal.is-open { display: block; } /* Page scroll lock. !important is required because the active theme forces html,body{overflow:visible!important} via a WPCodeBox snippet. */ html.pjb-no-scroll, body.pjb-no-scroll { overflow: hidden !important; } .pjb-modal__overlay { position: fixed; inset: 0; background: var(--pjb-overlay); opacity: 0; transition: opacity 0.25s ease; } .pjb-modal.is-open .pjb-modal__overlay { opacity: 1; } .pjb-modal__panel { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: var(--pjb-panel-max); background: var(--pjb-panel-bg); box-shadow: var(--pjb-shadow); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); outline: none; } .pjb-modal.is-open .pjb-modal__panel { transform: translateX(0); } .pjb-modal__close { position: absolute; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; /* the SVG carries its own circle */ cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s ease; } .pjb-modal__close svg { width: 100%; height: 100%; display: block; } .pjb-modal__close svg circle { fill: var(--pjb-surface-alt); } .pjb-modal__close:hover { opacity: 0.8; } .pjb-modal__loading { padding: var(--pjb-pad); color: var(--pjb-muted); min-height: 70vh; /* fill the panel so the loader sits in the middle */ display: flex; align-items: center; justify-content: center; text-align: center; } .pjb-modal__loading[hidden] { display: none; } /* animated three-dot loader */ .pjb-dots { display: inline-flex; gap: 10px; } .pjb-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--pjb-accent); animation: pjb-dot-pulse 1.2s infinite ease-in-out both; } .pjb-dots span:nth-child(1) { animation-delay: -0.32s; } .pjb-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes pjb-dot-pulse { 0%, 80%, 100% { transform: scale(0.5); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pjb-dots span { animation: none; opacity: 0.6; } } /* injected content wrapper (holds the server-rendered .pjb-modal__layout) */ .pjb-modal__content[hidden] { display: none; } /* ---- layout: full-width header, then description + sidebar ---- */ .pjb-modal__layout { padding: var(--pjb-pad); padding-top: 10rem; } /* full-width header row: department icon, then the role title */ .pjb-modal__header { grid-column: 1 / -1; padding-top: 35px; padding-bottom: 28px; margin-bottom: 32px; } /* two columns below the header: description (left) + sidebar (right) */ .pjb-modal__cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--pjb-aside-w); gap: var(--pjb-gap); align-items: start; } .pjb-modal__main { min-width: 0; } .pjb-modal__icon { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 36px; --pjb-icon-weight: 1.4px; } .pjb-modal__title { margin: 0 0 22px; font-size: clamp(26px, 3vw, 46px); line-height: 1.15; color: var(--pjb-heading); font-weight: 400; } /* sanitised Rippling HTML body */ .pjb-modal__body { color: var(--pjb-text); font-size: 16px; line-height: 1.7; } .pjb-modal__body b, .pjb-modal__body strong { font-weight: 600; } .pjb-modal__body * { max-width: 100%; } .pjb-modal__body p { margin: 0 0 1em; } /* Rippling mixes heading levels arbitrarily, so flatten them all to the body's size — the hierarchy carries no meaning here, and weight alone separates them. `inherit` rather than a repeated 16px: it tracks .pjb-modal__body, so the two can't drift apart. Never a `--cf-*` variable — without the Bricks theme it would resolve to nothing and the browser's per-level heading sizes would come back, which is the very thing this rule exists to prevent. */ .pjb-modal__body h1, .pjb-modal__body h2, .pjb-modal__body h3, .pjb-modal__body h4, .pjb-modal__body h5, .pjb-modal__body h6 { margin: 1.5em 0 0.5em; line-height: 1.25; color: var(--pjb-text); font-size: inherit; } .pjb-modal__body ul, .pjb-modal__body ol { margin: 0 0 1em; padding-left: 1.3em; } .pjb-modal__body li { margin: 0.35em 0; } /* ---- action column: two light cards, "Role at a glance" then "Not the role for you?" ---- */ .pjb-modal__aside { position: sticky; top: var(--pjb-pad); display: grid; gap: var(--pjb-card-gap); } .pjb-modal__cta { background: var(--pjb-card-bg); border-radius: var(--pjb-card-radius); padding: var(--pjb-card-pad); } .pjb-modal__cta-heading { margin: 0 0 12px; font-size: 26px; line-height: 1.15; color: var(--pjb-heading); } .pjb-modal__cta-text { margin: 0 0 24px; color: var(--pjb-text); font-size: 15px; line-height: 1.6; } .pjb-modal__apply, .pjb-modal__contact { display: block; width: 100%; text-align: center; padding: 15px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; box-sizing: border-box; transition: all 0.2s ease; } .pjb-modal__apply { background: var(--pjb-accent); /* !important beats the theme's .bricks-color-dark, which would otherwise force black text */ color: var(--pjb-accent-contrast) !important; border: 1px solid var(--pjb-accent); } .pjb-modal__apply:hover { background: transparent; color: var(--pjb-accent) !important; } .pjb-modal__contact { background: transparent; color: var(--pjb-accent) !important; border: 1px solid var(--pjb-accent); } .pjb-modal__contact:hover { background: var(--pjb-accent); color: var(--pjb-accent-contrast) !important; } .pjb-modal__contact[hidden] { display: none; } /* "Role at a glance" */ .pjb-modal__glance { background: var(--pjb-card-bg); border-radius: var(--pjb-card-radius); padding: var(--pjb-card-pad); } .pjb-modal__glance[hidden] { display: none; } .pjb-modal__glance-title { margin: 0 0 8px; font-size: 24px; color: var(--pjb-heading); } .pjb-modal__glance-list { margin: 0 0 26px; padding: 0; list-style: none; /* All-blue in the sidebar, at a lighter weight than the 60px header mark. */ --pjb-icon-weight: 1.3px; } /* A rule under every row, including the last — it separates the list from the Apply button. */ .pjb-glance__row { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--pjb-rule); } .pjb-glance__icon { flex: 0 0 26px; width: 26px; height: 26px; } .pjb-glance__text { display: flex; flex-direction: column; min-width: 0; } .pjb-glance__label { font-size: 13px; line-height: 1.1em; color: var(--pjb-muted); } .pjb-glance__value { margin-top: 6px; color: var(--pjb-heading); font-weight: 500; line-height: 1.2em; } /* ---- card actions (the "Tell Me More" trigger) ---- */ .careers-wrap__job-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; } /* ---- responsive: stack columns ---- */ @media (max-width: 900px) { .pjb-modal { --pjb-pad: 26px; --pjb-gap: 26px; } .pjb-modal__cols { grid-template-columns: 1fr; } .pjb-modal__aside { position: static; } } @media (prefers-reduced-motion: reduce) { .pjb-modal__panel { transition: none; } .pjb-modal__overlay { transition: none; } }