:root {
--gold: #b08d57;
--gold-light: #c9a066;
--gold-dim: rgba(176, 141, 87, 0.45);
--gold-faint: rgba(176, 141, 87, 0.12);
--bg: #1a1a1a;
--text-muted: #b8b8b8;
--text-dim: #8a8a8a;
--text-body: #d1d1d1;
--border-subtle: #333333;
--hiring: #8b2e2e;
--hero-frame: rgba(130, 168, 190, 0.55);
--sans: 'Google Sans Flex', sans-serif;
--serif: 'Playfair Display', Georgia, serif;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--bg);
color: #e5e7eb; font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
} .reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
} .mount-fade {
opacity: 0;
transform: translateY(30px);
transition:
opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mount-fade.visible {
opacity: 1;
transform: translateY(0);
} .hero {
position: relative;
height: 100vh;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(26, 26, 26, 0.7) 0%,
rgba(26, 26, 26, 0.4) 50%,
#1a1a1a 100%
);
}
.hero-content {
position: relative;
z-index: 10;
text-align: center;
padding: 0 24px;
max-width: 860px;
width: 100%;
}
.hero-title {
font-family: var(--serif);
font-size: clamp(38px, 6vw, 64px);
line-height: 1.15;
color: #fff;
font-style: italic;
font-weight: 400;
letter-spacing: 0.01em;
}
.hero-title .accent {
color: var(--gold);
}
.hero-sub {
color: rgba(209, 213, 219, 0.9);
max-width: 560px;
margin: 28px auto 0;
line-height: 1.75;
font-size: 17px;
font-weight: 300;
letter-spacing: 0.02em;
} .benefits-section {
max-width: 1120px;
margin: 0 auto;
padding: 80px 24px;
}
.section-header {
text-align: center;
margin-bottom: 48px;
}
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
.ornament-line {
width: 48px;
height: 1px;
background: var(--gold-dim);
}
.ornament-diamond {
width: 8px;
height: 8px;
background: var(--gold);
transform: rotate(45deg);
}
.section-title {
font-family: var(--serif);
font-size: clamp(28px, 3vw, 36px);
color: var(--gold);
font-style: italic;
font-weight: 400;
line-height: 1.2;
}
.benefits-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 32px 40px;
padding-top: 24px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
cursor: default;
}
.benefit-icon {
color: var(--gold);
font-size: 20px;
display: inline-block;
transition: transform 500ms;
}
.benefit-item:hover .benefit-icon {
transform: rotate(180deg);
}
.benefit-label {
color: var(--text-muted);
font-size: 14px;
letter-spacing: 0.05em;
transition: color 500ms;
}
.benefit-item:hover .benefit-label {
color: var(--gold);
} .positions-section {
max-width: 1040px;
margin: 0 auto;
padding: 40px 24px 64px;
}
.positions-header {
text-align: center;
margin-bottom: 64px;
}
.positions-title {
font-family: var(--serif);
font-size: clamp(32px, 4vw, 44px);
color: var(--gold);
font-style: italic;
font-weight: 400;
line-height: 1.2;
}
.positions-count {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 24px;
}
.positions-count-line {
width: 32px;
height: 1px;
background: rgba(162, 119, 96, 0.4);
}
.positions-count-text {
color: var(--text-dim);
font-size: 11px;
letter-spacing: 0.3em;
font-weight: 300;
} .positions-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 96px;
}
.position-card {
position: relative;
border: 1px solid rgba(162, 119, 96, 0.15);
background: var(--bg);
overflow: hidden;
transition: border-color 500ms;
cursor: default;
}
.position-card:hover {
border-color: rgba(162, 119, 96, 0.5);
} .position-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(162, 119, 96, 0.05), transparent);
opacity: 0;
transition: opacity 700ms;
pointer-events: none;
}
.position-card:hover::before {
opacity: 1;
} .position-card::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--gold);
transform: scaleY(0);
transform-origin: top;
transition: transform 500ms;
}
.position-card:hover::after {
transform: scaleY(1);
}
.position-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 28px;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.position-inner {
flex-wrap: nowrap;
}
}
.position-body {
flex: 1;
min-width: 0;
}
.position-header-row {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.position-title {
font-family: var(--serif);
font-size: 22px;
line-height: 1.3;
color: var(--gold);
font-style: italic;
font-weight: 400;
transition: color 300ms;
}
.position-card:hover .position-title {
color: var(--gold-light);
}
.position-code {
color: var(--text-dim);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 300;
}
.position-desc {
color: #ccc;
font-size: 15px;
line-height: 1.7;
margin-bottom: 16px;
max-width: 680px;
font-weight: 300;
}
.position-tags {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.position-tag {
padding: 4px 12px;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
border: 1px solid rgba(162, 119, 96, 0.25);
color: #ccc;
transition:
border-color 500ms,
color 500ms;
}
.position-tag.career-s-expired {
color: #eb7f7f;   
}
.position-card:hover .position-tag {
border-color: rgba(162, 119, 96, 0.5);
color: var(--gold);
} .btn-apply {
position: relative;
flex-shrink: 0;
padding: 12px 24px;
border: 1px solid rgba(162, 119, 96, 0.4);
background: transparent;
color: var(--gold);
font-size: 11px;
letter-spacing: 0.3em;
cursor: pointer;
overflow: hidden;
transition: border-color 500ms;
text-transform: uppercase;
}
.btn-apply::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms;
}
.btn-apply:hover {
border-color: var(--gold);
}
.btn-apply:hover::before {
transform: scaleX(1);
}
.btn-apply span {
position: relative;
z-index: 1;
transition: color 500ms;
}
.btn-apply:hover span {
color: var(--bg);
} .footer-cta {
text-align: center;
padding-bottom: 96px;
}
.footer-cta-text {
color: #9ca3af;
margin-bottom: 24px;
font-size: 16px;
font-weight: 300;
}
.btn-open-apply {
position: relative;
display: inline-block;
padding: 16px 48px;
border: 1px solid var(--gold);
background: transparent;
color: var(--gold);
letter-spacing: 0.3em;
font-size: 11px;
cursor: pointer;
overflow: hidden;
text-transform: uppercase;
transition: color 300ms;
}
.btn-open-apply::before {
content: '';
position: absolute;
inset: 0;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 500ms;
}
.btn-open-apply:hover::before {
transform: scaleX(1);
}
.btn-open-apply span {
position: relative;
z-index: 1;
transition: color 300ms;
}
.btn-open-apply:hover span {
color: #fff;
} .career-single {
background: var(--bg);
color: var(--text-body);
font-family: var(--sans);
font-weight: 400;
line-height: 1.65;
padding-bottom: 96px;
margin-top: 40px;
}
.career-single-hero {
position: relative;
width: 100%;
margin: 0 auto;
padding: 85px 24px 0 24px;
background-color: #302c28;
}
.career-single-hero-frame {
max-width: 1600px;
margin: 0 auto;
}
.career-single-hero-frame > img {
margin-bottom: -85px;
}
.career-single-back {
position: absolute;
top: 40px;
left: 40px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
transition: color 0.25s ease;
}
.career-single-back:hover {
color: var(--gold);
}
.career-single-back-line {
display: inline-block;
width: 32px;
height: 1px;
background: rgba(255, 255, 255, 0.55);
}
.career-single-hero-frame {
position: relative;
border: 1px solid var(--hero-frame);
background: #111; }
.career-single-hero-frame img {
display: block;
width: 100%;
height: auto;
max-height: min(52vh, 560px);
object-fit: cover;
}
.career-single-header {
max-width: 1600px;
margin: 0 auto;
padding: 85px 24px 32px;
}
.career-single-title {
font-family: var(--serif);
font-size: clamp(28px, 4vw, 42px);
font-weight: 500;
font-style: normal;
color: #b18151;
line-height: 1.2;
letter-spacing: 0.02em;
margin: 0 0 20px;
}
.career-single-lead {
font-family: var(--serif);
font-size: clamp(17px, 2vw, 20px);
font-style: italic;
font-weight: 400;
color: rgba(209, 209, 209, 0.88);
max-width: 820px;
margin: 0 0 28px;
line-height: 1.65;
}
.career-single-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.career-tag {
display: inline-block;
padding: 6px 14px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-family: var(--sans);
border-radius: 0;
}
.career-tag--hiring {
background: var(--hiring);
color: #fff;
border: 1px solid transparent;
}
.career-tag--muted {
background: rgba(45, 45, 45, 0.95);
color: var(--text-muted);
border: 1px solid var(--border-subtle);
} .career-single-layout {
max-width: 1600px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
@media (min-width: 960px) {
.career-single-layout {
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
gap: 56px 48px;
}
} .career-single-main {
min-width: 0;
}
.career-single-content {
font-size: 15px;
color: var(--text-body);
}
.career-single-content > *:first-child {
margin-top: 0;
}
.career-single-content p {
margin: 0 0 1.15em;
}
.career-single-content a {
color: var(--gold-light);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s ease;
}
.career-single-content a:hover {
color: #e8d4b0;
} .career-single-content h2 {
font-family: var(--serif);
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
font-weight: 500;
font-style: normal;
color: var(--gold);
margin: 2.25em 0 1em;
padding-top: 0.25em;
display: flex;
align-items: center;
gap: 14px;
line-height: 1.35;
}
.career-single-content h2::before {
content: '';
flex: 0 0 36px;
height: 1px;
background: var(--gold);
opacity: 0.95;
}
.career-single-content h3 { font-size: 1.1rem;
color: var(--gold);
font-weight: 500;
margin: 1.75em 0 0.65em;
}
.career-single-content ul,
.career-single-content ol {
margin: 0 0 1.25em;
padding-left: 0;
}
.career-single-content ul {
list-style: none;
}
.career-single-content ul li {
position: relative;
padding-left: 1.25em;
margin-bottom: 0.55em;
}
.career-single-content ul li::before {
content: '·';
position: absolute;
left: 0;
color: var(--gold);
font-weight: bold;
} .career-single-content ol {
list-style: none;
counter-reset: career-step;
}
.career-single-content ol li {
counter-increment: career-step;
position: relative;
padding-left: 3rem;
margin-bottom: 0.85em;
}
.career-single-content ol li::before {
content: counter(career-step, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.1em;
font-family: var(--sans);
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--gold);
font-weight: 500;
}
.career-single-content hr,
.career-single-content .wp-block-separator {
border: none;
border-top: 1px solid var(--border-subtle);
margin: 2.5em 0;
} .career-single-sidebar {
position: sticky;
top: 96px;
}
.career-sidebar-title {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--sans);
font-size: 10px;
letter-spacing: 0.28em;
font-weight: 600;
text-transform: uppercase;
color: var(--text-dim);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.career-sidebar-diamond {
width: 7px;
height: 7px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
opacity: 0.95;
}
.career-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.career-sidebar-card {
display: flex;
gap: 14px;
padding: 16px 16px 14px;
border: 1px solid var(--border-subtle);
background: rgba(25, 25, 25, 0.6);
text-decoration: none;
color: inherit;
transition:
border-color 0.25s ease,
background 0.25s ease;
}
.career-sidebar-card:hover {
border-color: rgba(176, 141, 87, 0.45);
background: rgba(35, 30, 26, 0.55);
}
.career-sidebar-card-thumb {
flex: 0 0 72px;
width: 72px;
height: 72px;
overflow: hidden;
border: 1px solid var(--border-subtle);
}
.career-sidebar-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.career-sidebar-card-body {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.career-sidebar-card-title {
font-family: var(--serif);
font-size: 1rem;
color: var(--gold);
line-height: 1.35;
font-weight: 500;
transition: color 0.2s ease;
}
.career-sidebar-card:hover .career-sidebar-card-title {
color: var(--gold-light);
}
.career-sidebar-card-excerpt {
font-size: 12px;
line-height: 1.55;
color: var(--text-muted);
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 3;
-webkit-line-clamp: 3;
overflow: hidden;
}
.career-sidebar-card-tag {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 4px;
}
@media (max-width: 959px) {
.career-single-sidebar {
position: static;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
}
}
@media (max-width: 600px) {
.career-single-back {
position: relative;
top: auto;
left: auto;
margin-bottom: 16px;
padding-left: 4px;
}
.career-single-hero {
padding-top: 16px;
}
.position-inner {
flex-direction: column;
}
.position-inner > a,
.position-inner .btn-apply {
width: 100%;
}
.btn-apply::before {
width: 100%;
}
.btn-apply:hover::before {
width: 100%;
}
} .news-pagination {
text-align: center;
margin: 48px auto 80px;
}
.news-pagination .navigation.pagination {
margin: 0;
}
.news-pagination .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.news-pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 14px;
}
.news-pagination a.page-numbers,
.news-pagination span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 12px;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--text-dim);
border: 1px solid rgba(212, 175, 55, 0.35);
text-decoration: none;
transition:
color 0.25s,
border-color 0.25s,
background 0.25s;
}
.news-pagination a.page-numbers:hover {
color: var(--gold);
border-color: var(--gold);
}
.news-pagination span.page-numbers.current {
color: #fff;
background: rgba(212, 175, 55, 0.25);
border-color: var(--gold);
}
.news-pagination .page-numbers.dots {
border-color: transparent;
min-width: auto;
}
.news-pagination a.prev.page-numbers,
.news-pagination a.next.page-numbers {
min-width: auto;
padding: 10px 18px;
}
.post-tags {
margin-top: 16px;
padding-top: 48px;
}
.tag-list-label {
display: block;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
}
.tag-list a {
display: inline-block;
padding: 8px 18px;
font-size: 12px;
letter-spacing: 0.1em;
color: var(--text-dim);
text-decoration: none;
border: 1px solid rgba(162, 119, 96, 0.4);
transition:
color 0.25s,
border-color 0.25s,
background 0.25s;
}
.tag-list a:hover {
color: var(--gold);
border-color: var(--gold);
background: rgba(162, 119, 96, 0.12);
}