/* ========================================================================== Public job offers page themes Defines CSS custom properties per theme and utility classes that consume them. The active theme is set via data-theme on . ========================================================================== */ /* Default theme (blue-pink) — matches the original palette */ [data-theme="default"] { --theme-hero-from: rgb(var(--palette-blue-700)); --theme-hero-via: rgb(var(--palette-blue-500)); --theme-hero-to: rgb(var(--palette-pink-500)); --theme-accent: rgb(var(--palette-pink-500)); --theme-accent-dark: rgb(var(--palette-pink-600)); --theme-blob-1: rgb(var(--palette-pink-500)); --theme-blob-2: rgb(var(--palette-blue-400)); --theme-blob-1-light: rgb(var(--palette-pink-300)); --theme-blob-2-light: rgb(var(--palette-blue-200)); --theme-blob-3-light: rgb(var(--palette-pink-100)); --theme-badge-bg: rgb(var(--palette-blue-100)); --theme-badge-text: rgb(var(--palette-blue-700)); --theme-bg-from: rgb(var(--palette-blue-50)); --theme-bg-to: rgb(var(--palette-pink-100)); --theme-focus: rgb(var(--palette-blue-500)); --theme-icon-from: rgb(var(--palette-blue-100)); --theme-icon-to: rgb(var(--palette-pink-100)); --theme-icon-hover-from: rgb(var(--palette-blue-500)); --theme-icon-hover-to: rgb(var(--palette-pink-500)); --theme-card-hover-border: rgb(var(--palette-blue-200)); --theme-title-hover: rgb(var(--palette-blue-700)); --theme-form-header-from: rgb(var(--palette-blue-50)); --theme-form-header-to: rgb(var(--palette-pink-100)); --theme-section-icon: rgb(var(--palette-blue-500)); --theme-icon-text: rgb(var(--palette-blue-600)); } /* Corporate theme (navy-slate) */ [data-theme="corporate"] { --theme-hero-from: rgb(var(--palette-slate-800)); --theme-hero-via: rgb(var(--palette-slate-700)); --theme-hero-to: rgb(var(--palette-slate-600)); --theme-accent: rgb(var(--palette-slate-600)); --theme-accent-dark: rgb(var(--palette-slate-700)); --theme-blob-1: rgb(var(--palette-slate-600)); --theme-blob-2: rgb(var(--palette-slate-500)); --theme-blob-1-light: rgb(var(--palette-slate-300)); --theme-blob-2-light: rgb(var(--palette-slate-200)); --theme-blob-3-light: rgb(var(--palette-slate-100)); --theme-badge-bg: rgb(var(--palette-slate-200)); --theme-badge-text: rgb(var(--palette-slate-800)); --theme-bg-from: rgb(var(--palette-slate-50)); --theme-bg-to: rgb(var(--palette-slate-100)); --theme-focus: rgb(var(--palette-slate-600)); --theme-icon-from: rgb(var(--palette-slate-200)); --theme-icon-to: rgb(var(--palette-slate-100)); --theme-icon-hover-from: rgb(var(--palette-slate-700)); --theme-icon-hover-to: rgb(var(--palette-slate-600)); --theme-card-hover-border: rgb(var(--palette-slate-300)); --theme-title-hover: rgb(var(--palette-slate-800)); --theme-form-header-from: rgb(var(--palette-slate-50)); --theme-form-header-to: rgb(var(--palette-slate-100)); --theme-section-icon: rgb(var(--palette-slate-600)); --theme-icon-text: rgb(var(--palette-slate-700)); } /* Nature theme (green-teal) */ [data-theme="nature"] { --theme-hero-from: rgb(var(--palette-emerald-800)); --theme-hero-via: rgb(var(--palette-emerald-600)); --theme-hero-to: rgb(var(--palette-teal-600)); --theme-accent: rgb(var(--palette-teal-600)); --theme-accent-dark: rgb(var(--palette-teal-700)); --theme-blob-1: rgb(var(--palette-teal-600)); --theme-blob-2: rgb(var(--palette-emerald-400)); --theme-blob-1-light: rgb(var(--palette-teal-200)); --theme-blob-2-light: rgb(var(--palette-emerald-100)); --theme-blob-3-light: rgb(var(--palette-emerald-50)); --theme-badge-bg: rgb(var(--palette-emerald-100)); --theme-badge-text: rgb(var(--palette-emerald-800)); --theme-bg-from: rgb(var(--palette-emerald-50)); --theme-bg-to: rgb(var(--palette-teal-50)); --theme-focus: rgb(var(--palette-emerald-600)); --theme-icon-from: rgb(var(--palette-emerald-100)); --theme-icon-to: rgb(var(--palette-teal-100)); --theme-icon-hover-from: rgb(var(--palette-emerald-600)); --theme-icon-hover-to: rgb(var(--palette-teal-600)); --theme-card-hover-border: rgb(var(--palette-emerald-200)); --theme-title-hover: rgb(var(--palette-emerald-800)); --theme-form-header-from: rgb(var(--palette-emerald-50)); --theme-form-header-to: rgb(var(--palette-teal-50)); --theme-section-icon: rgb(var(--palette-emerald-600)); --theme-icon-text: rgb(var(--palette-emerald-700)); } /* Warm theme (orange-amber) */ [data-theme="warm"] { --theme-hero-from: rgb(var(--palette-orange-700)); --theme-hero-via: rgb(var(--palette-orange-600)); --theme-hero-to: rgb(var(--palette-amber-600)); --theme-accent: rgb(var(--palette-orange-600)); --theme-accent-dark: rgb(var(--palette-orange-700)); --theme-blob-1: rgb(var(--palette-amber-500)); --theme-blob-2: rgb(var(--palette-orange-400)); --theme-blob-1-light: rgb(var(--palette-amber-200)); --theme-blob-2-light: rgb(var(--palette-orange-200)); --theme-blob-3-light: rgb(var(--palette-cream-50)); --theme-badge-bg: rgb(var(--palette-orange-100)); --theme-badge-text: rgb(var(--palette-orange-700)); --theme-bg-from: rgb(var(--palette-cream-50)); --theme-bg-to: rgb(var(--palette-amber-50)); --theme-focus: rgb(var(--palette-orange-600)); --theme-icon-from: rgb(var(--palette-orange-100)); --theme-icon-to: rgb(var(--palette-amber-100)); --theme-icon-hover-from: rgb(var(--palette-orange-600)); --theme-icon-hover-to: rgb(var(--palette-amber-600)); --theme-card-hover-border: rgb(var(--palette-orange-200)); --theme-title-hover: rgb(var(--palette-orange-700)); --theme-form-header-from: rgb(var(--palette-cream-50)); --theme-form-header-to: rgb(var(--palette-amber-50)); --theme-section-icon: rgb(var(--palette-orange-600)); --theme-icon-text: rgb(var(--palette-orange-700)); } /* Royal theme (violet) */ [data-theme="royal"] { --theme-hero-from: rgb(var(--palette-violet-700)); --theme-hero-via: rgb(var(--palette-violet-500)); --theme-hero-to: rgb(var(--palette-violet-400)); --theme-accent: rgb(var(--palette-violet-500)); --theme-accent-dark: rgb(var(--palette-violet-600)); --theme-blob-1: rgb(var(--palette-violet-400)); --theme-blob-2: rgb(var(--palette-violet-500)); --theme-blob-1-light: rgb(var(--palette-violet-200)); --theme-blob-2-light: rgb(var(--palette-violet-100)); --theme-blob-3-light: rgb(var(--palette-violet-50)); --theme-badge-bg: rgb(var(--palette-violet-100)); --theme-badge-text: rgb(var(--palette-violet-700)); --theme-bg-from: rgb(var(--palette-violet-50)); --theme-bg-to: rgb(var(--palette-violet-100)); --theme-focus: rgb(var(--palette-violet-500)); --theme-icon-from: rgb(var(--palette-violet-100)); --theme-icon-to: rgb(var(--palette-violet-50)); --theme-icon-hover-from: rgb(var(--palette-violet-500)); --theme-icon-hover-to: rgb(var(--palette-violet-400)); --theme-card-hover-border: rgb(var(--palette-violet-200)); --theme-title-hover: rgb(var(--palette-violet-700)); --theme-form-header-from: rgb(var(--palette-violet-50)); --theme-form-header-to: rgb(var(--palette-violet-100)); --theme-section-icon: rgb(var(--palette-violet-500)); --theme-icon-text: rgb(var(--palette-violet-600)); } /* Ocean theme (indigo) */ [data-theme="ocean"] { --theme-hero-from: rgb(var(--palette-indigo-900)); --theme-hero-via: rgb(var(--palette-indigo-700)); --theme-hero-to: rgb(var(--palette-indigo-500)); --theme-accent: rgb(var(--palette-indigo-600)); --theme-accent-dark: rgb(var(--palette-indigo-700)); --theme-blob-1: rgb(var(--palette-indigo-500)); --theme-blob-2: rgb(var(--palette-indigo-600)); --theme-blob-1-light: rgb(var(--palette-indigo-200)); --theme-blob-2-light: rgb(var(--palette-indigo-100)); --theme-blob-3-light: rgb(var(--palette-indigo-50)); --theme-badge-bg: rgb(var(--palette-indigo-100)); --theme-badge-text: rgb(var(--palette-indigo-900)); --theme-bg-from: rgb(var(--palette-indigo-50)); --theme-bg-to: rgb(var(--palette-indigo-100)); --theme-focus: rgb(var(--palette-indigo-600)); --theme-icon-from: rgb(var(--palette-indigo-100)); --theme-icon-to: rgb(var(--palette-indigo-50)); --theme-icon-hover-from: rgb(var(--palette-indigo-700)); --theme-icon-hover-to: rgb(var(--palette-indigo-500)); --theme-card-hover-border: rgb(var(--palette-indigo-200)); --theme-title-hover: rgb(var(--palette-indigo-900)); --theme-form-header-from: rgb(var(--palette-indigo-50)); --theme-form-header-to: rgb(var(--palette-indigo-100)); --theme-section-icon: rgb(var(--palette-indigo-600)); --theme-icon-text: rgb(var(--palette-indigo-700)); } /* Crimson theme (rose) */ [data-theme="crimson"] { --theme-hero-from: rgb(var(--palette-rose-800)); --theme-hero-via: rgb(var(--palette-rose-600)); --theme-hero-to: rgb(var(--palette-rose-400)); --theme-accent: rgb(var(--palette-rose-600)); --theme-accent-dark: rgb(var(--palette-rose-700)); --theme-blob-1: rgb(var(--palette-rose-400)); --theme-blob-2: rgb(var(--palette-rose-600)); --theme-blob-1-light: rgb(var(--palette-rose-200)); --theme-blob-2-light: rgb(var(--palette-rose-100)); --theme-blob-3-light: rgb(var(--palette-rose-50)); --theme-badge-bg: rgb(var(--palette-rose-100)); --theme-badge-text: rgb(var(--palette-rose-800)); --theme-bg-from: rgb(var(--palette-rose-50)); --theme-bg-to: rgb(var(--palette-rose-100)); --theme-focus: rgb(var(--palette-rose-600)); --theme-icon-from: rgb(var(--palette-rose-100)); --theme-icon-to: rgb(var(--palette-rose-50)); --theme-icon-hover-from: rgb(var(--palette-rose-600)); --theme-icon-hover-to: rgb(var(--palette-rose-400)); --theme-card-hover-border: rgb(var(--palette-rose-200)); --theme-title-hover: rgb(var(--palette-rose-800)); --theme-form-header-from: rgb(var(--palette-rose-50)); --theme-form-header-to: rgb(var(--palette-rose-100)); --theme-section-icon: rgb(var(--palette-rose-600)); --theme-icon-text: rgb(var(--palette-rose-700)); } /* Sky theme (cyan) */ [data-theme="sky"] { --theme-hero-from: rgb(var(--palette-cyan-700)); --theme-hero-via: rgb(var(--palette-cyan-600)); --theme-hero-to: rgb(var(--palette-cyan-400)); --theme-accent: rgb(var(--palette-cyan-600)); --theme-accent-dark: rgb(var(--palette-cyan-700)); --theme-blob-1: rgb(var(--palette-cyan-400)); --theme-blob-2: rgb(var(--palette-cyan-600)); --theme-blob-1-light: rgb(var(--palette-cyan-200)); --theme-blob-2-light: rgb(var(--palette-cyan-50)); --theme-blob-3-light: rgb(var(--palette-cyan-25)); --theme-badge-bg: rgb(var(--palette-cyan-50)); --theme-badge-text: rgb(var(--palette-cyan-700)); --theme-bg-from: rgb(var(--palette-cyan-25)); --theme-bg-to: rgb(var(--palette-cyan-50)); --theme-focus: rgb(var(--palette-cyan-600)); --theme-icon-from: rgb(var(--palette-cyan-50)); --theme-icon-to: rgb(var(--palette-cyan-25)); --theme-icon-hover-from: rgb(var(--palette-cyan-600)); --theme-icon-hover-to: rgb(var(--palette-cyan-400)); --theme-card-hover-border: rgb(var(--palette-cyan-200)); --theme-title-hover: rgb(var(--palette-cyan-700)); --theme-form-header-from: rgb(var(--palette-cyan-25)); --theme-form-header-to: rgb(var(--palette-cyan-50)); --theme-section-icon: rgb(var(--palette-cyan-600)); --theme-icon-text: rgb(var(--palette-cyan-700)); } /* --- Utility classes --- */ .theme-hero-gradient { background: linear-gradient(to bottom right, var(--theme-hero-from), var(--theme-hero-via), var(--theme-hero-to)); } .theme-accent-gradient { background: linear-gradient(to right, var(--theme-accent), var(--theme-accent-dark)); } .theme-body-bg { background: linear-gradient(to bottom right, var(--theme-bg-from), var(--color-surface), var(--theme-bg-to)); } .theme-icon-gradient { background: linear-gradient(to bottom right, var(--theme-icon-from), var(--theme-icon-to)); } .theme-form-header-bg { background: linear-gradient(to right, var(--theme-form-header-from), var(--theme-form-header-to)); } .theme-section-icon-gradient { background: linear-gradient(to bottom right, var(--theme-hero-via), var(--theme-hero-to)); } /* --- Section icon color --- */ .theme-section-icon { color: var(--theme-section-icon); } /* --- Public job offers page --- */ @keyframes publicJobFadeInUp { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: translateY(0); } } @keyframes publicJobPulse { 50% { opacity: 0.5; } } .public-job-page { min-block-size: 100vh; min-block-size: 100dvh; } .public-job-page__content { position: relative; z-index: 10; padding-block-end: 5rem; } .public-job-hero { position: relative; isolation: isolate; overflow: hidden; } .public-job-hero__gradient { position: absolute; inset: 0; background: linear-gradient(to bottom right, var(--theme-hero-from), var(--theme-hero-via), var(--theme-hero-to)); } .public-job-hero__cover { position: absolute; inset: 0; z-index: -10; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.2; mix-blend-mode: overlay; } .public-job-hero__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .public-job-hero__blob { position: absolute; inline-size: 24rem; block-size: 24rem; border-radius: var(--radius-pill); opacity: 0.2; filter: blur(4rem); } .public-job-hero__blob--one { inset-block-start: -5rem; inset-inline-end: -5rem; background-color: var(--theme-blob-1); } .public-job-hero__blob--two { inset-block-end: -5rem; inset-inline-start: -5rem; background-color: var(--theme-blob-2); } .public-job-hero__brand { position: absolute; inset-block-start: 1.5rem; inset-inline-start: 1.5rem; z-index: 10; display: flex; align-items: center; gap: 0.75rem; } .public-job-hero__logo { inline-size: auto; block-size: 2.5rem; object-fit: contain; filter: drop-shadow(0 10px 8px oklch(var(--lch-black) / 4%)) drop-shadow(0 4px 3px oklch(var(--lch-black) / 10%)); } .public-job-hero__brand-name { color: var(--color-ink-inverted); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; text-shadow: 0 10px 15px rgb(var(--palette-black) / 0.2); } .public-job-hero__content { position: relative; padding-block: 5rem; padding-inline: 1.5rem; } .public-job-hero__text { max-inline-size: 48rem; margin-inline: auto; text-align: center; } .public-job-hero__title { margin: 0; color: var(--color-ink-inverted); font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; font-weight: 900; letter-spacing: 0; text-shadow: 0 10px 15px rgb(var(--palette-black) / 0.2); } .public-job-hero__body { max-inline-size: 42rem; margin-block-start: 1.5rem; margin-inline: auto; color: oklch(var(--lch-white) / 90%); font-size: 1.125rem; line-height: 2rem; } .public-job-hero__wave { position: absolute; inset-block-end: 0; inset-inline: 0; } .public-job-hero__wave-svg { inline-size: 100%; block-size: 3rem; } .public-job-filter { position: relative; margin-block-start: -2rem; margin-inline: 1rem; } .public-job-filter__panel { padding: 1.5rem; border: 1px solid oklch(var(--lch-white) / 20%); border-radius: var(--radius-2xl); background-color: oklch(var(--lch-white) / 95%); box-shadow: var(--shadow-xl); backdrop-filter: blur(0.25rem); } .public-job-filter__header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1.5rem; } .public-job-filter__icon-wrap { display: flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-xl); background: linear-gradient(to bottom right, var(--theme-hero-via), var(--theme-hero-to)); } .public-job-filter__label { display: block; margin-block-end: 0.5rem; color: var(--color-ink-light); font-size: 0.875rem; font-weight: 500; } .public-job-filter__select { inline-size: 100%; border-color: var(--color-border); border-radius: var(--radius-xl); } .public-job-filter__select:focus { border-color: var(--theme-focus); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--theme-focus); } .public-job-filter__entity { max-inline-size: 20rem; margin-block-start: 1rem; } .public-job-results { max-inline-size: 64rem; margin-block-start: 3rem; margin-inline: auto; padding-inline: 1rem; } .public-job-results__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 2rem; } .public-job-results__title { margin: 0; color: var(--color-ink); font-size: 1.5rem; font-weight: 700; } .public-job-results__count { margin: 0; padding: 0.375rem 0.75rem; border-radius: var(--radius-pill); background-color: var(--color-surface-subtle); color: var(--color-ink-lighter); font-size: 0.875rem; } .public-job-results__pagination { margin-block-start: 2rem; } .public-job-card { position: relative; overflow: hidden; border: 1px solid var(--color-border-muted); border-radius: var(--radius-2xl); background-color: var(--color-surface); box-shadow: var(--shadow-md); opacity: 0; animation: publicJobFadeInUp 0.5s ease-out forwards; transition: border-color 0.3s ease, box-shadow 0.3s ease; will-change: transform; } .public-job-card:hover { border-color: var(--theme-card-hover-border); box-shadow: var(--shadow-xl); } .public-job-card:nth-child(1) { animation-delay: 0.1s; } .public-job-card:nth-child(2) { animation-delay: 0.15s; } .public-job-card:nth-child(3) { animation-delay: 0.2s; } .public-job-card:nth-child(4) { animation-delay: 0.25s; } .public-job-card:nth-child(5) { animation-delay: 0.3s; } .public-job-card:nth-child(6) { animation-delay: 0.35s; } .public-job-card:nth-child(7) { animation-delay: 0.4s; } .public-job-card:nth-child(8) { animation-delay: 0.45s; } .public-job-card:nth-child(9) { animation-delay: 0.5s; } .public-job-card:nth-child(10) { animation-delay: 0.55s; } .public-job-card__accent { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 0.25rem; background: linear-gradient(to right, var(--theme-hero-via), var(--theme-hero-to)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .public-job-card:hover .public-job-card__accent { transform: scaleX(1); } .public-job-card__link { display: block; padding: 1.5rem; text-decoration: none; } .public-job-card__link:focus-visible { outline: 2px solid var(--theme-focus); outline-offset: -0.25rem; } .public-job-card__layout { display: flex; align-items: flex-start; gap: 1rem; } .public-job-card__icon-column { flex-shrink: 0; } .public-job-card__icon-wrap { display: flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-xl); background: linear-gradient(to bottom right, var(--theme-icon-from), var(--theme-icon-to)); transition: background 0.3s ease; } .public-job-card:hover .public-job-card__icon-wrap { background: linear-gradient(to bottom right, var(--theme-icon-hover-from), var(--theme-icon-hover-to)); } .public-job-card__icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--theme-icon-text); transition: color 0.3s ease; } .public-job-card:hover .public-job-card__icon { color: var(--color-ink-inverted); } .public-job-card__content { flex: 1 1 auto; min-inline-size: 0; } .public-job-card__title { display: -webkit-box; margin: 0; overflow: hidden; color: var(--color-ink); font-size: 1.125rem; font-weight: 700; letter-spacing: 0; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: color 0.2s ease; } .public-job-card:hover .public-job-card__title { color: var(--theme-title-hover); } .public-job-card__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; } .public-job-card__badge { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 500; } .public-job-card__badge--primary { background-color: var(--theme-badge-bg); color: var(--theme-badge-text); } .public-job-card__badge--contract { background-color: rgb(var(--palette-teal-600) / 0.1); color: rgb(var(--palette-teal-600)); } .public-job-card__badge--work { background-color: var(--color-surface-subtle); color: var(--color-ink-light); } .public-job-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 1rem; color: var(--color-ink-lighter); font-size: 0.875rem; } .public-job-card__meta-item { display: flex; align-items: center; gap: 0.375rem; } .public-job-card__meta-icon { inline-size: 1rem; block-size: 1rem; color: var(--color-ink-medium); } .public-job-card__meta-icon--salary, .public-job-card__salary { color: rgb(var(--palette-amber-600)); } .public-job-card__salary { font-weight: 500; } .public-job-card__actions { display: flex; justify-content: flex-end; margin-block-start: 1.25rem; } .public-job-card__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: var(--radius-xl); background: linear-gradient(to right, var(--theme-accent), var(--theme-accent-dark)); color: var(--color-ink-inverted); font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow-md); transition: box-shadow 0.2s ease, transform 0.2s ease; } .public-job-card:hover .public-job-card__cta { box-shadow: var(--shadow-lg); transform: scale(1.05); } .public-job-card__cta-icon { inline-size: 1rem; block-size: 1rem; } .public-job-empty { max-inline-size: 42rem; margin-inline: auto; padding-block: 4rem; padding-inline: 1rem; text-align: center; } .public-job-empty__mark { position: relative; inline-size: 8rem; block-size: 8rem; margin-block-end: 2rem; margin-inline: auto; } .public-job-empty__pulse, .public-job-empty__icon-wrap { position: absolute; border-radius: var(--radius-pill); } .public-job-empty__pulse { inset: 0; background: linear-gradient(to bottom right, var(--theme-blob-2-light), var(--theme-blob-1-light)); animation: publicJobPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .public-job-empty__icon-wrap { inset: 0.5rem; display: flex; align-items: center; justify-content: center; background-color: var(--color-surface); } .public-job-empty__icon { inline-size: 3rem; block-size: 3rem; color: var(--color-ink-medium); } .public-job-empty__title { margin: 0; color: var(--color-ink); font-size: 1.5rem; font-weight: 700; letter-spacing: 0; } .public-job-empty__text { margin-block-start: 1rem; color: var(--color-ink-lighter); } .public-job-hero--compact .public-job-hero__content { padding-block: 3rem 4rem; } .public-job-hero__content--narrow, .public-job-hero__content--detail { max-inline-size: 64rem; margin-inline: auto; } .public-job-hero__content--narrow { max-inline-size: 48rem; } .public-job-hero__text--start { text-align: start; } .public-job-back-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-end: 1.5rem; color: oklch(var(--lch-white) / 80%); text-decoration: none; transition: color 150ms ease; } .public-job-back-link:hover { color: var(--color-ink-inverted); } .public-job-back-link__icon { inline-size: 1.25rem; block-size: 1.25rem; transition: transform 150ms ease; } .public-job-back-link:hover .public-job-back-link__icon { transform: translateX(-0.25rem); } .public-job-back-link__text { font-size: 0.875rem; font-weight: 500; } .public-job-detail__title { margin: 0; color: var(--color-ink-inverted); font-size: 3rem; font-weight: 900; letter-spacing: 0; line-height: 1; text-shadow: 0 10px 15px rgb(var(--palette-black) / 0.2); } .public-job-detail__tags, .public-job-detail__meta, .public-job-detail__summary-row, .public-job-detail__meta-item, .public-job-detail__apply, .public-job-detail__mobile-apply, .public-job-application__eyebrow, .public-job-application-card__heading-row, .public-job-application-card__section-title, .public-job-application-card__submit { display: flex; align-items: center; } .public-job-detail__tags { flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.5rem; } .public-job-detail__tag { display: inline-flex; align-items: center; padding-block: 0.5rem; padding-inline: 1rem; border: 1px solid oklch(var(--lch-white) / 30%); border-radius: var(--radius-pill); background-color: oklch(var(--lch-white) / 20%); color: var(--color-ink-inverted); font-size: 0.875rem; font-weight: 500; backdrop-filter: blur(0.25rem); } .public-job-detail__content { position: relative; z-index: 10; padding-block-end: 8rem; } .public-job-detail__container, .public-job-application__container { max-inline-size: 64rem; margin-inline: auto; padding-inline: 1rem; } .public-job-application__container { max-inline-size: 48rem; } .public-job-detail__summary, .public-job-detail__description, .public-job-application-card { border: 1px solid var(--color-border-muted); border-radius: var(--radius-2xl); background-color: var(--color-surface); box-shadow: var(--shadow-lg); } .public-job-detail__summary { margin-block: -1.5rem 2rem; padding: 1.5rem; } .public-job-detail__summary-row { flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .public-job-detail__meta { flex-wrap: wrap; gap: 1.5rem; } .public-job-detail__meta-item { gap: 0.5rem; color: var(--color-ink-light); } .public-job-detail__meta-label { font-weight: 500; } .public-job-detail__meta-icon, .public-job-detail__apply-icon, .public-job-application-card__submit-icon { inline-size: 1.25rem; block-size: 1.25rem; } .public-job-detail__meta-icon--salary, .public-job-detail__salary { color: rgb(var(--palette-amber-600)); } .public-job-detail__salary { font-weight: 600; } .public-job-detail__desktop-action { display: none; } .public-job-detail__apply, .public-job-detail__mobile-apply { justify-content: center; gap: 0.5rem; border-radius: var(--radius-xl); color: var(--color-ink-inverted); font-weight: 700; text-decoration: none; box-shadow: var(--shadow-lg); transition: box-shadow 200ms ease, transform 200ms ease; } .public-job-detail__apply { padding-block: 0.75rem; padding-inline: 1.5rem; font-weight: 600; } .public-job-detail__apply:hover, .public-job-detail__mobile-apply:hover { transform: scale(1.05); box-shadow: var(--shadow-xl); } .public-job-detail__description { padding: 2rem; } .public-job-detail__description-title { margin-block: 0 1.5rem; color: var(--color-ink); font-size: 1.25rem; font-weight: 700; } .public-job-detail__prose { max-inline-size: none; color: var(--color-ink-light); font-size: 1.125rem; line-height: 1.75; } .public-job-detail__prose a { color: var(--theme-section-icon); text-decoration: none; } .public-job-detail__prose a:hover { text-decoration: underline; } .public-job-detail__mobile-cta { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 50; } .public-job-detail__mobile-cta-inner { padding: 1rem; border-block-start: 1px solid var(--color-border); background-color: oklch(var(--lch-white) / 95%); backdrop-filter: blur(0.25rem); } .public-job-detail__mobile-apply { inline-size: 100%; padding-block: 1rem; padding-inline: 1.5rem; } .public-job-application__eyebrow { gap: 0.75rem; margin-block-end: 1rem; } .public-job-application__eyebrow-icon-wrap { inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-xl); background-color: oklch(var(--lch-white) / 20%); backdrop-filter: blur(0.25rem); } .public-job-application__eyebrow-text { color: oklch(var(--lch-white) / 80%); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .public-job-application__section { position: relative; z-index: 10; padding-block-end: 5rem; } .public-job-application-card { margin-block-start: -1.5rem; overflow: hidden; box-shadow: var(--shadow-xl); } .public-job-application-card__header { padding-block: 1.5rem; padding-inline: 1.5rem; border-block-end: 1px solid var(--color-border-muted); } .public-job-application-card__heading-row, .public-job-application-card__section-title, .public-job-application-card__submit { gap: 0.75rem; } .public-job-application-card__heading-icon-wrap { flex-shrink: 0; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius-pill); } .public-job-application-card__title { margin: 0; color: var(--color-ink); font-size: 1.125rem; font-weight: 700; } .public-job-application-card__form { padding-block: 2rem; padding-inline: 1.5rem; } .public-job-application-card__fields > * + * { margin-block-start: 1.5rem; } .public-job-application-card__section-block--separated { padding-block-start: 1.5rem; border-block-start: 1px solid var(--color-border-muted); } .public-job-application-card__section-title { margin-block: 0 1rem; color: var(--color-ink); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .public-job-application-card__section-icon { inline-size: 1rem; block-size: 1rem; } .public-job-application-card__actions { display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between; gap: 1rem; margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--color-border-muted); } .public-job-application-card__cancel { color: var(--color-ink-lighter); font-weight: 500; text-decoration: none; transition: color 150ms ease; } .public-job-application-card__cancel:hover { color: var(--color-ink-light); } .public-job-application-card__submit { justify-content: center; inline-size: 100%; padding-block: 1rem; padding-inline: 2rem; border: 0; border-radius: var(--radius-xl); color: var(--color-ink-inverted); font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; transition: box-shadow 200ms ease, transform 200ms ease; } .public-job-application-card__submit:hover { transform: scale(1.05); box-shadow: var(--shadow-xl); } .public-job-application__privacy { margin-block-start: 1.5rem; color: var(--color-ink-lighter); font-size: 0.875rem; text-align: center; } .public-job-empty--compact { padding-block: 3rem; } .public-job-empty__mark--small { inline-size: 6rem; block-size: 6rem; margin-block-end: 1.5rem; } .public-job-empty__icon--small { inline-size: 2.5rem; block-size: 2.5rem; } .public-job-empty__text--compact { margin-block-start: 0.5rem; } @media (min-width: 640px) { .public-job-hero__content { padding-block: 7rem; } .public-job-hero__wave-svg { block-size: 4rem; } .public-job-filter { margin-inline: 8rem; } .public-job-filter__panel { padding: 2rem; } .public-job-filter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .public-job-filter__entity { margin-block-start: 1.5rem; } .public-job-results { padding-inline: 1.5rem; } .public-job-empty__title { font-size: 1.875rem; } } @media (min-width: 768px) { .public-job-hero__brand { inset-block-start: 2rem; inset-inline-start: 3rem; } .public-job-hero__logo { block-size: 3rem; } .public-job-hero__brand-name { font-size: 1.25rem; } .public-job-detail__desktop-action { display: block; } .public-job-detail__mobile-cta { display: none; } .public-job-detail__title { font-size: 3.75rem; } .public-job-application-card__header, .public-job-application-card__form { padding-inline: 2.5rem; } .public-job-application-card__field-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .public-job-application-card__field--wide { grid-column: span 2 / span 2; } .public-job-application-card__actions { flex-direction: row; } .public-job-application-card__submit { inline-size: auto; } .public-job-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .public-job-hero__content { padding-inline: 2rem; } .public-job-filter { margin-inline: 12rem; } .public-job-filter__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .public-job-results { padding-inline: 2rem; } } @media (prefers-reduced-motion: reduce) { .public-job-card, .public-job-card__accent, .public-job-card__cta, .public-job-card__icon, .public-job-card__icon-wrap, .public-job-card__title, .public-job-empty__pulse { animation-duration: 0.01ms; transition-duration: 0.01ms; } }