.apply-button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 32px; background: #1a1a1a; color: #fff; border: 2px solid #1a1a1a;
border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer;
text-decoration: none; transition: all 0.2s; font-family: inherit; margin-top: 12px;
}
.apply-button:hover { background: #000; border-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.apply-button.applied { background: #10b981; border-color: #10b981; cursor: default; }
.apply-conversion-wrap { margin: 24px 0; }
.apply-conversion-card {
max-width: 720px; margin: 0 auto 20px; padding: 28px; background: #fff;
border: 1px solid #e4e4e7; border-radius: 18px; box-shadow: 0 16px 36px rgba(15,23,42,0.06);
}
.member-lock-preview {
position: relative; margin: 0 0 18px; padding: 14px; overflow: hidden;
border: 1px solid #d4d4d8; border-radius: 16px; background: #f8fafc;
}
.member-lock-preview__grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
filter: blur(4px); opacity: 0.62; user-select: none; pointer-events: none;
}
.member-lock-preview__tile {
min-height: 76px; padding: 13px 14px; border: 1px solid #e4e4e7; border-radius: 12px;
background: #fff; box-shadow: 0 6px 18px rgba(15,23,42,0.04);
}
.member-lock-preview__tile span {
display: block; margin-bottom: 7px; color: #71717a; font-size: 10px; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase;
}
.member-lock-preview__tile strong {
display: block; color: #111827; font-size: 14px; line-height: 1.3;
}
.member-lock-preview__overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
padding: 18px; background: rgba(255,255,255,0.68); backdrop-filter: blur(2px);
}
.member-lock-preview__message {
max-width: 440px; padding: 14px 16px; border-radius: 14px;
background: #111827; color: #fff; box-shadow: 0 18px 36px rgba(15,23,42,0.22);
text-align: left;
}
.member-lock-preview__eyebrow {
margin: 0 0 5px; color: #a7f3d0; font-size: 10px; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase;
}
.member-lock-preview__message strong {
display: block; margin-bottom: 5px; font-size: 17px; line-height: 1.25;
}
.member-lock-preview__message span {
display: block; color: #d1d5db; font-size: 12px; line-height: 1.45;
}
.apply-conversion-head { max-width: 560px; margin: 0 auto 20px; text-align: center; }
.apply-conversion-eyebrow {
margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #71717a;
text-transform: uppercase; letter-spacing: 1.4px;
}
.apply-conversion-title {
margin: 0 0 10px; font-size: 28px; line-height: 1.15; color: #111827;
}
.apply-conversion-copy { margin: 0; font-size: 14px; line-height: 1.6; color: #52525b; }
.apply-action-grid {
display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.55fr) minmax(170px, 0.55fr);
gap: 10px; align-items: stretch; margin-bottom: 16px;
}
.apply-primary-action,
.apply-secondary-action {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 56px; padding: 14px 18px; border-radius: 10px; font-size: 15px;
font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.apply-primary-action { background: #0a0a0a; color: #fff; border: 1.5px solid #0a0a0a; }
.apply-primary-action:hover { background: #000; border-color: #000; box-shadow: 0 10px 20px rgba(0,0,0,0.12); }
.apply-secondary-action { background: #fff; color: #0a0a0a; border: 1.5px solid #e4e4e7; }
.apply-secondary-action:hover { border-color: #c8c8d0; background: #fafafa; }
.apply-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.apply-trust-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #f4f4f5;
border-radius: 999px; font-size: 12px; font-weight: 650; color: #18181b;
}
.apply-trust-chip.is-green { background: #ecfdf5; color: #047857; }
.apply-benefits { display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
.apply-benefit {
display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #52525b; line-height: 1.5;
}
.apply-benefit-check {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px;
width: 18px; height: 18px; border-radius: 999px; background: #ecfdf5; color: #059669;
font-size: 12px; font-weight: 700; line-height: 1;
}
.expert-card {
display: flex; gap: 13px; align-items: center; max-width: 560px; margin: 0 auto 18px;
padding: 14px 16px; border: 1px solid #e4e4e7; border-radius: 14px; background: #f8fafc;
}
.expert-card__photo {
width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 56px;
border: 2px solid #fff; box-shadow: 0 4px 12px rgba(15,23,42,0.10);
}
.expert-card__id { min-width: 0; }
.expert-card__name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #111827; }
.expert-card__name i { color: #047857; font-size: 13px; }
.expert-card__role { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: #52525b; }
/* Two-column layout so the apply/paywall rail sits beside the description and
stays in view, instead of stacking below a long imported body (audit S-021).
The paywall is already inside .job-layout__rail, so this is CSS-only. The
global .main-content is capped at 800px; widen it on the job page only so the
two columns have room. */
/* Beat the shared base rule `.main-content { max-width: 800px }` (same
specificity, loads later) so the redesign can actually use the width.
body-prefixed selector wins; inline on this page only, so other pages keep 800. */
body .main-content { max-width: 1480px; }
/* Align the shared header's inner navbar with the widened content. By default it
caps at 72rem (1152px), which (a) looked narrower than the 1480 content here and
(b) made the 8-link nav overflow and cut off the right-side buttons. This style
is inline on the job page only, so other pages keep the 1152px navbar. */
body .navbar { max-width: 1480px; }
.job-layout { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.job-layout__rail { margin-top: 0; position: sticky; top: 88px; }
@media (max-width: 1023px) {
.job-layout { display: block; max-width: 820px; }
.job-layout__rail { position: static; margin-top: 16px; }
}
/* In the two-column layout the apply card lives in a 340px rail, so the
horizontal 3-button action grid (needs ~580px) overflowed and the buttons
ran off the page (S-021 follow-up). Stack the actions vertically in the rail
and give the primary "Unlock" CTA visual priority over the two secondaries.
The <=760px mobile stack rule and the 761-1023px wide-card row are untouched. */
@media (min-width: 1024px) {
.job-layout__rail .apply-conversion-card { padding: 24px 22px; }
.job-layout__rail .apply-action-grid { grid-template-columns: 1fr; gap: 8px; }
.job-layout__rail .apply-secondary-action { min-height: 48px; font-size: 14px; }
}
.apply-unavailable-card {
background: #fffbeb; border-color: #fde68a; box-shadow: none;
}
.apply-unavailable-card .apply-conversion-eyebrow { color: #92400e; }
.apply-unavailable-card .apply-conversion-copy { color: #713f12; }
/* Readable typography for imported listing rich-text (description, responsibilities,
requirements, benefits). ATS bodies arrive as dense /
/
on browser
defaults (line-height ~1.2, no list/heading spacing), so without this they render
as an unreadable wall. This only styles content inside the prose wrapper, not the
section headings, which sit outside it. */
.listing-prose { font-size: 16px; line-height: 1.75; color: #374151; }
.listing-prose > :first-child { margin-top: 0; }
.listing-prose > :last-child { margin-bottom: 0; }
.listing-prose p { margin: 0 0 16px; }
.listing-prose p:empty { display: none; }
.listing-prose ul, .listing-prose ol { margin: 0 0 18px; padding-left: 24px; }
.listing-prose li { margin: 0 0 8px; line-height: 1.7; }
.listing-prose li:last-child { margin-bottom: 0; }
.listing-prose b, .listing-prose strong { font-weight: 700; color: #111827; }
.listing-prose h2, .listing-prose h3, .listing-prose h4 {
margin: 28px 0 10px; line-height: 1.3; color: #111827; font-weight: 700;
}
.listing-prose h2 { font-size: 20px; }
.listing-prose h3 { font-size: 18px; }
.listing-prose h4 { font-size: 16px; }
.listing-prose a { color: #1d4ed8; text-decoration: underline; }
.listing-prose a:hover { color: #1e40af; }
.listing-prose blockquote {
margin: 0 0 16px; padding: 8px 16px; border-left: 3px solid #e5e7eb; color: #4b5563;
}
.listing-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.listing-prose th, .listing-prose td {
border: 1px solid #e5e7eb; padding: 8px 11px; text-align: left; font-size: 14.5px; line-height: 1.5;
}
.listing-prose th { background: #f9fafb; font-weight: 700; color: #111827; }
/* ===== Job page redesign (faithful port of the approved reference) ========
1160px container; fluid main + 372px sticky rail (gap 40). DM Serif Display
ONLY for the H1 title; content section headers are Inter 800 with a divider.
Logo floats beside the title; a pill row + a status row + a hairline-divided
facts grid match the reference exactly. Scoped under .job-redesign so no other
page is affected and the cascade win is independent of style load order. */
.job-redesign { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: #0f172a; }
.job-redesign.job-layout { max-width: 1480px; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; }
/* Gated (non-member) view: the apply card lives inside the description gate, so
there is no rail. Drop to a single, readable-width column. */
.job-redesign.job-layout--gated { max-width: 940px; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* logo: 60px near-black tile, floated beside the title */
.job-redesign .listing-detail-company-logo { float: left; display: block; margin: 5px 16px 6px 0; }
.job-redesign .listing-detail-company-logo-image,
.job-redesign .company-logo-placeholder {
width: 60px; height: 60px; min-width: 60px; border-radius: 16px; background: #0a0a0a;
color: #fff; font-size: 18px; font-weight: 700; object-fit: cover;
display: flex; align-items: center; justify-content: center;
}
.job-redesign h1 {
font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; text-align: left;
font-size: clamp(1.85rem, 1rem + 2.3vw, 2.6rem); line-height: 1.08;
letter-spacing: -0.005em; color: #0a0a0a; margin: 0 0 8px;
}
.job-redesign .company-meta { text-align: left; font-size: 0.95rem; color: #52525b; margin: 0 0 14px; }
.job-redesign .company-meta a { color: #334155; }
/* clear the floated logo before the rows below the title block */
.job-redesign .pill-row, .job-redesign .job-stats, .job-redesign .apply-trust-row,
.job-redesign .member-applicant-insight, .job-redesign .section, .job-redesign .pro-return-panel { clear: left; }
/* pill row */
.job-redesign .pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.job-redesign .pill {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
background: #f4f4f5; border: 1px solid #e5e7eb; border-radius: 999px;
font-size: 0.74rem; font-weight: 600; color: #3f3f46; text-decoration: none; line-height: 1.45;
}
.job-redesign a.pill:hover { background: #e9e9ec; color: #18181b; }
.job-redesign .pill i { font-size: 0.66rem; opacity: 0.55; }
/* status row */
.job-redesign .job-stats {
display: flex; flex-wrap: wrap; gap: 6px 16px; text-align: left;
color: #64748b; margin: 0 0 18px; font-size: 0.82rem;
}
.job-redesign .apply-trust-row { justify-content: flex-start; margin-bottom: 18px; }
/* The shared social-share component is centered via an inline style; left-align it
here to match the redesign (!important is needed to beat the inline rule). */
.job-redesign .social-share { justify-content: flex-start !important; margin: 6px 0 28px; }
/* Clear separation above the first content section so it doesn't crowd the
share row / status block above it. */
.job-redesign .job-layout__main > .section { margin-top: 28px; }
/* ===== Job description paywall (non-members): show a teaser, blur + fade the
rest, and overlay an unlock CTA. The full text stays in the DOM (clipped/
blurred only) and the JobPosting JSON-LD keeps the complete description, so
Google for Jobs still gets the full text. Members see the description in full. */
.job-redesign .jd-gate { position: relative; margin-top: 28px; }
/* Clip a generous teaser of the REAL listing so non-members get hooked, then fade
+ blur the remainder. The full text stays in the DOM (clipped, not removed) so
Google for Jobs still receives the complete listing. */
.job-redesign .jd-gate__clip { position: relative; max-height: 680px; overflow: hidden; }
.job-redesign .jd-gate__veil {
position: absolute; left: 0; right: 0; top: 360px; bottom: 0; pointer-events: none; z-index: 1;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.95) 78%, #fff 100%);
-webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px);
}
/* The membership conversion card sits in normal flow directly below the clip,
pulled up so it emerges from the blur. Never clipped (it lives outside the
overflow:hidden clip), so it stays fully visible at any height. */
.job-redesign .jd-gate__cta { position: relative; z-index: 2; margin-top: -86px; }
.job-redesign .jd-gate__cta .apply-conversion-wrap { margin: 0; }
.job-redesign .jd-gate__cta .apply-conversion-card { margin-left: auto; margin-right: auto; }
.job-redesign .member-applicant-insight { margin-left: 0; margin-right: 0; }
/* facts grid: hairline-divided cards (reference .ov-grid) */
.job-redesign .position-overview-grid {
display: grid; grid-template-columns: 1fr 1fr; margin: 0;
background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
}
.job-redesign .overview-item { background: #fff; padding: 14px 16px; display: block; border-top: 1px solid #e5e7eb; }
.job-redesign .overview-item:nth-child(-n+2) { border-top: none; }
.job-redesign .overview-item:nth-child(odd) { border-right: 1px solid #e5e7eb; }
/* Odd item count: let the lone last cell span both columns so the grid closes
cleanly (no empty cell, and the row above it gets its bottom divider). */
.job-redesign .overview-item:last-child:nth-child(odd) { border-right: none; grid-column: 1 / -1; }
.job-redesign .overview-item strong {
display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.055em; color: #64748b; margin: 0 0 4px;
}
.job-redesign .overview-item span { display: block; font-size: 0.92rem; font-weight: 600; color: #0f172a; }
.job-redesign .overview-item span a, .job-redesign .overview-item .location-link { color: #0f172a; font-weight: 600; }
/* content section headers: Inter 800 + divider (reference .sec) */
.job-redesign .section > h2 {
font-family: 'Inter', -apple-system, sans-serif; font-weight: 800; text-align: left;
font-size: 1.18rem; line-height: 1.25; color: #0f172a;
border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; margin: 0 0 14px;
}
@media (max-width: 1023px) {
.job-redesign.job-layout { max-width: 820px; }
}
@media (max-width: 600px) {
.job-redesign .position-overview-grid { grid-template-columns: 1fr; }
.job-redesign .overview-item:nth-child(odd) { border-right: none; }
.job-redesign .overview-item:nth-child(2) { border-top: 1px solid #e5e7eb; }
}
.apply-alternative-list {
display: grid; gap: 8px; max-width: 560px; margin: 18px auto 16px; text-align: left;
}
.apply-alternative-heading {
margin: 0 0 2px; font-size: 12px; font-weight: 700; color: #713f12;
text-transform: uppercase; letter-spacing: 0.08em;
}
.apply-alternative-link {
display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #fcd34d;
border-radius: 8px; background: #fff; color: inherit; text-decoration: none;
}
.apply-alternative-link:hover { border-color: #f59e0b; background: #fffcf3; }
.apply-alternative-title { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.35; }
.apply-alternative-meta { font-size: 12px; color: #713f12; line-height: 1.4; }
.apply-member-signin { margin: 16px 0 0; font-size: 12px; color: #71717a; text-align: center; }
.apply-member-signin a { color: #0a0a0a; font-weight: 650; text-decoration: none; }
.post-save-action-receipt[hidden] { display: none; }
.post-save-action-receipt {
max-width: 720px; margin: 12px auto 0; padding: 14px 16px; text-align: left;
border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4;
box-shadow: 0 10px 24px rgba(5, 150, 105, 0.08);
}
.post-save-action-receipt__eyebrow {
margin: 0 0 4px; color: #047857; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0;
}
.post-save-action-receipt__title { margin: 0 0 4px; color: #0f172a; font-size: 15px; line-height: 1.35; font-weight: 800; }
.post-save-action-receipt__body { margin: 0; color: #374151; font-size: 13px; line-height: 1.5; }
.post-save-action-receipt__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.post-save-action-receipt__action {
display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
padding: 8px 12px; border-radius: 8px; border: 1px solid #bbf7d0;
background: #fff; color: #065f46; font-size: 12px; font-weight: 800; text-decoration: none;
}
.post-save-action-receipt__action.is-primary { background: #111827; border-color: #111827; color: #fff; }
.post-save-action-receipt__boundary { margin-top: 8px; color: #047857; font-size: 11px; line-height: 1.45; font-weight: 650; }
.pro-return-panel {
max-width: 900px; margin: 28px auto 20px; padding: 22px;
border: 1px solid #bbf7d0; border-radius: 10px; background: #f0fdf4;
box-shadow: 0 16px 34px rgba(5, 150, 105, 0.08);
}
.pro-return-eyebrow {
margin: 0 0 6px; color: #047857; font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0;
}
.pro-return-panel h2 {
margin: 0 0 8px; color: #0f172a; font-size: 24px; line-height: 1.16;
}
.pro-return-copy {
max-width: 680px; margin: 0 0 16px; color: #374151; font-size: 14px; line-height: 1.55;
}
.pro-return-actions {
display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 0.75fr));
gap: 10px; align-items: stretch;
}
.pro-return-action {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 48px; padding: 12px 14px; border-radius: 8px; font-size: 14px;
font-weight: 800; text-decoration: none; cursor: pointer; font-family: inherit;
border: 1.5px solid #111827; transition: background 0.16s ease, border-color 0.16s ease;
}
.pro-return-action.is-primary { background: #111827; color: #fff; }
.pro-return-action.is-primary:hover { background: #000; color: #fff; text-decoration: none; }
.pro-return-action.is-secondary { background: #fff; color: #111827; }
.pro-return-action.is-secondary:hover { border-color: #047857; background: #f9fffb; text-decoration: none; }
.pro-return-action[disabled] { cursor: default; opacity: 0.82; }
.pro-return-note {
margin: 12px 0 0; color: #047857; font-size: 12px; line-height: 1.45; font-weight: 700;
}
.pro-return-note a { color: #065f46; font-weight: 800; text-decoration: underline; }
@media (max-width: 760px) {
.apply-conversion-card { padding: 22px 16px; border-radius: 14px; }
.member-lock-preview { padding: 10px; }
.member-lock-preview__grid { grid-template-columns: 1fr; }
.member-lock-preview__tile { min-height: 66px; }
.member-lock-preview__message { text-align: center; }
.apply-action-grid { grid-template-columns: 1fr; }
.apply-conversion-title { font-size: 24px; }
.apply-alternative-link { padding: 12px; }
.pro-return-panel { margin: 22px auto 18px; padding: 18px; }
.pro-return-panel h2 { font-size: 21px; }
.pro-return-actions { grid-template-columns: 1fr; }
}