.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: the apply/paywall rail sits beside the description and stays
in view instead of stacking below a long imported body (S-021, ported from
job.php so internships match jobs). The global .main-content is capped at 800px;
widen it on this page so the two columns have room. The min-width:1024px block
stacks the 3-button action grid in the 340px rail (it needs ~580px) so the
buttons don't overflow. Collapses to single-column below 1024px, where the
existing sticky 'Apply' bar takes over (its IntersectionObserver hides the bar
on desktop once the now-visible rail card intersects, fixing the text overlap). */
.main-content { max-width: 1080px; }
.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; }
}
@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; }
.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: 18px auto 22px; padding: 22px;
border: 1px solid #bbf7d0; border-radius: 12px; background: #f0fdf4;
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center;
}
.pro-return-panel__eyebrow {
margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em;
text-transform: uppercase; color: #047857;
}
.pro-return-panel__title { margin: 0 0 6px; color: #111827; font-size: 22px; line-height: 1.2; }
.pro-return-panel__copy { margin: 0; color: #3f3f46; font-size: 14px; line-height: 1.55; }
.pro-return-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.pro-return-panel__actions .apply-primary-action,
.pro-return-panel__actions .apply-secondary-action { min-height: 44px; padding: 10px 14px; font-size: 13px; }
.pro-return-panel__note {
grid-column: 1 / -1; margin: -4px 0 0; color: #047857; font-size: 12px; line-height: 1.45;
}
.pro-return-panel__note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Readable typography for imported listing rich-text (description, responsibilities,
requirements, benefits, skills, commitments). ATS bodies arrive as dense
/
/
on browser defaults (line-height ~1.2, no spacing), so without this
they render as an unreadable wall. Only styles content inside the prose wrapper,
not the section headings. Mirrors the same fix on job.php. */
.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; }
@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 { grid-template-columns: 1fr; padding: 18px; }
.pro-return-panel__actions { justify-content: stretch; }
.pro-return-panel__actions .apply-primary-action,
.pro-return-panel__actions .apply-secondary-action { width: 100%; }
}
/* ===== Redesign port from job.php: widen container + navbar, editorial title
block (serif H1 + logo beside it), pill row, hairline facts grid, Inter-800
section headers, left-aligned share, section spacing, and the description
paywall. Scoped under .job-redesign. (.listing-prose + two-column rail already
defined above.) ===== */
body .main-content { max-width: 1480px; }
body .navbar { max-width: 1480px; }
.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; }
.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; }
.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; }
.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; }
.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; }
.job-redesign .social-share { justify-content: flex-start !important; margin: 6px 0 28px; }
.job-redesign .job-layout__main > .section { margin-top: 28px; }
.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; }
.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; }
.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; }
.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; }
}