/* ========================================================= TOPlayer · 高阶玩家 — V8 join-us (careers) page Faithful clone of OKX /join-us home-container (6 sections). Structure & layout copied (original class names kept); design tokens mapped to v8 palette, content swapped. Loads on top of home.css (nav & footer stay v8). ========================================================= */ /* ---- design tokens (OKX -> v8) ---- */ .JoinUs_JoinUs__UXAyb { --ju-base-1: var(--bg); /* base primary */ --ju-base-2: #0a0a0a; /* base secondary */ --ju-surface: var(--panel); /* card surface */ --ju-elevated: var(--panel-2); /* disclaimer bg */ --ju-content: var(--text); --ju-content-2: var(--muted); --ju-content-3: var(--dim); --ju-brand: #BCFF2F; } .JoinUs_JoinUs__UXAyb * { box-sizing: border-box; } /* shared section shell + centered content column */ .JoinUs_JoinUs__UXAyb .styles_Section__1-Tyz { padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .JoinUs_JoinUs__UXAyb .styles_Section__1-Tyz { padding-left: 24px; padding-right: 24px; } } .JoinUs_JoinUs__UXAyb .styles_content__u4yYe { width: 100%; max-width: 1248px; margin: 0 auto; } .JoinUs_JoinUs__UXAyb .styles_center__WEX2C { text-align: center; } /* ========================================================= 1 · BannerSection ========================================================= */ .styles_BannerSection__5jVzW { background-color: var(--ju-base-1); color: var(--ju-content); padding: 40px 8px; } @media (min-width: 768px) { .styles_BannerSection__5jVzW { padding-top: 60px; padding-bottom: 60px; } } @media (min-width: 1024px) { .styles_BannerSection__5jVzW { padding-top: 80px; padding-bottom: 80px; } } .styles_bannerContent__73G31 { align-items: center; display: flex; flex-direction: column; justify-content: center; width: 100%; margin: 0 auto; } @media (min-width: 768px) { .styles_bannerContent__73G31 { width: 83.33333333%; } } @media (min-width: 1270px) { .styles_bannerContent__73G31 { width: 66.66666667%; } } .styles_title__3U4e8 { text-align: center; font-size: 24px; font-weight: 700; line-height: 1.36; margin-bottom: 16px; width: 100%; letter-spacing: -0.02em; } @media (min-width: 768px) { .styles_title__3U4e8 { font-size: 36px; line-height: 1.32; } } @media (min-width: 1024px) { .styles_title__3U4e8 { font-size: 64px; } } .styles_subtitle__PZ5\+X { text-align: center; font-size: 16px; line-height: 1.58; margin-bottom: 24px; color: var(--ju-content-2); } @media (min-width: 768px) { .styles_subtitle__PZ5\+X { margin-bottom: 40px; } } @media (min-width: 1024px) { .styles_subtitle__PZ5\+X { font-size: 18px; line-height: 1.68; margin-bottom: 60px; } } .styles_buttonWrapper__sPaLf { align-items: center; display: flex; justify-content: center; width: 100%; } @media (min-width: 768px) { .styles_buttonWrapper__sPaLf { width: auto; } } .styles_button__I0Zis { min-width: 100%; } @media (min-width: 768px) { .styles_button__I0Zis { min-width: 214px; } } /* ========================================================= 2 · Offer (tabbed: 价值观 / 经验 / 福利) ========================================================= */ .styles_Offer__lfaRJ { background-color: var(--ju-base-2); padding: 40px 16px 80px; } @media (min-width: 768px) { .styles_Offer__lfaRJ { padding-top: 70px; padding-bottom: 120px; } } @media (min-width: 1024px) { .styles_Offer__lfaRJ { padding-top: 90px; } } .styles_content__HDxEh { align-items: center; display: flex; flex-direction: column; } .styles_tabHeader__UiFov { margin-bottom: 40px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } @media (min-width: 768px) { .styles_tabHeader__UiFov { margin-bottom: 50px; } } @media (min-width: 1024px) { .styles_tabHeader__UiFov { margin-bottom: 70px; } } .ju-tab { padding: 10px 22px; border-radius: 999px; border: 1px solid var(--border); background: var(--ju-surface); color: var(--ju-content-2); font-size: 15px; font-family: inherit; font-weight: 600; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .ju-tab:hover { color: var(--ju-content); border-color: var(--border-2); } .ju-tab.active { background: var(--ju-brand); color: #0a1400; border-color: var(--ju-brand); } .ju-panel { display: none; width: 100%; } .ju-panel.active { display: block; } .styles_header__igiwi { color: var(--ju-content); font-size: 24px; font-weight: 700; line-height: 1.36; margin-bottom: 60px; text-align: center; } @media (min-width: 768px) { .styles_header__igiwi { font-size: 28px; line-height: 1.32; } } @media (min-width: 1024px) { .styles_header__igiwi { font-size: 36px; } } .styles_OfferItemsContainer__YNxMs { align-items: stretch; display: flex; flex-direction: column; justify-content: center; margin: auto; max-width: 1016px; width: 100%; } @media (min-width: 768px) { .styles_OfferItemsContainer__YNxMs { flex-direction: row; flex-wrap: wrap; justify-content: center; } } .styles_OfferItemListContainer__HW0IL { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; width: 100%; } .styles_OfferItemListContainer__HW0IL:not(:first-child) { margin-top: 40px; } @media (min-width: 768px) { .styles_OfferItemListContainer__HW0IL { width: 30.03003003%; } .styles_OfferItemListContainer__HW0IL:not(:first-child) { margin-top: 0; } .styles_OfferItemListContainer__HW0IL:not(:nth-child(n+4)) { margin-bottom: 60px; } } .styles_OfferItem__5PC6j { align-items: center; display: flex; flex-direction: column; justify-content: center; } .styles_icon__8GKxU { border-radius: 100%; height: 72px; width: 72px; margin-bottom: 24px; display: grid; place-items: center; font-size: 30px; color: #0a1400; background: var(--grad); } .styles_title__gYjKl { color: var(--ju-content); font-size: 16px; font-weight: 600; line-height: 1.25; margin-bottom: 2px; text-align: center; } @media (min-width: 768px) { .styles_title__gYjKl { font-size: 18px; line-height: 1.33; margin-bottom: 8px; } } .styles_desc__UyPIP { color: var(--ju-content-3); font-size: 14px; line-height: 1.33; max-width: 80%; text-align: center; } @media (min-width: 1024px) { .styles_desc__UyPIP { font-size: 16px; line-height: 1.58; } } /* ========================================================= 3 · InfoSection (stats) ========================================================= */ .styles_InfoSection__k8TGz { background-color: var(--ju-base-1); color: var(--ju-content); padding: 40px 16px; } @media (min-width: 768px) { .styles_InfoSection__k8TGz { padding-top: 60px; padding-bottom: 60px; } } .styles_infoContent__NMzVP { align-items: center; display: flex; flex-direction: row; justify-content: space-around; } .styles_info__\+N\+33 { align-items: center; display: flex; flex-direction: column; justify-content: center; width: 100px; } @media (min-width: 768px) { .styles_info__\+N\+33 { width: 221px; } } .styles_title__Q28Xb { font-size: 24px; font-weight: 700; line-height: 1.36; margin-bottom: 8px; text-align: center; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (min-width: 768px) { .styles_title__Q28Xb { font-size: 36px; line-height: 1.32; } } @media (min-width: 1024px) { .styles_title__Q28Xb { font-size: 44px; margin-bottom: 16px; } } .styles_desc__xkMUQ { font-size: 12px; line-height: 1.58; text-align: center; color: var(--ju-content-2); } @media (min-width: 768px) { .styles_desc__xkMUQ { font-size: 16px; } } @media (min-width: 1024px) { .styles_desc__xkMUQ { font-size: 18px; line-height: 1.68; } } /* ========================================================= 4 · CampusSection ========================================================= */ .styles_CampusSection__HIG4- { background-color: var(--ju-base-2); color: var(--ju-content); padding: 40px 16px; } @media (min-width: 768px) { .styles_CampusSection__HIG4- { padding-top: 120px; padding-bottom: 60px; } } @media (min-width: 1024px) { .styles_CampusSection__HIG4- { padding-top: 120px; padding-bottom: 120px; } } .styles_campusContainer__N81rf { align-items: flex-start; display: flex; flex-direction: column; justify-content: flex-start; } @media (min-width: 1024px) { .styles_campusContainer__N81rf { align-items: center; flex-direction: row; } } .styles_info__Ru9IO { align-items: flex-start; display: flex; flex-direction: column; width: 100%; } .styles_highlight__K63G5 { color: var(--ju-brand); font-size: 14px; font-weight: 500; line-height: 1.14; margin-bottom: 16px; } @media (min-width: 768px) { .styles_highlight__K63G5 { font-size: 18px; line-height: 1.33; margin-bottom: 24px; } } .styles_title__W-aip { font-size: 24px; font-weight: 700; line-height: 1.36; margin-bottom: 16px; } @media (min-width: 768px) { .styles_title__W-aip { font-size: 28px; line-height: 1.32; margin-bottom: 24px; } } @media (min-width: 1024px) { .styles_title__W-aip { font-size: 36px; } } .styles_desc__SRuLl { color: var(--ju-content-2); font-size: 14px; line-height: 1.58; margin-bottom: 24px; } @media (min-width: 768px) { .styles_desc__SRuLl { font-size: 18px; line-height: 1.68; margin-bottom: 32px; } } .styles_buttonContainer__oj7Qh { display: flex; justify-content: flex-start; } .styles_deco__bkOKp { width: 100%; max-width: 343px; margin-top: 40px; aspect-ratio: 16 / 11; border-radius: 18px; background: radial-gradient(120% 100% at 25% 0%, rgba(188,255,47,.5), transparent 60%), #0a0e06; display: grid; place-items: center; color: var(--ju-brand); font-size: 76px; } @media (min-width: 1024px) { .styles_deco__bkOKp { width: 496px; max-width: none; margin-top: 0; margin-left: 50px; flex: 0 0 auto; } } /* ========================================================= 5 · OpeningSection (department grid) ========================================================= */ .styles_OpeningSection__iyuhZ { background-color: var(--ju-base-2); color: var(--ju-content); padding: 40px 16px 48px; } @media (min-width: 768px) { .styles_OpeningSection__iyuhZ { padding-top: 60px; padding-bottom: 64px; } } @media (min-width: 1024px) { .styles_OpeningSection__iyuhZ { padding-top: 80px; padding-bottom: 90px; } } .styles_content__O5ofH { align-items: flex-start; display: flex; flex-direction: column; } @media (min-width: 768px) and (max-width: 1023px) { .styles_content__O5ofH { align-items: center; } } .styles_subTitle__b1p5b { color: var(--ju-brand); font-size: 14px; font-weight: 500; line-height: 1.58; margin-bottom: 16px; } @media (min-width: 768px) { .styles_subTitle__b1p5b { font-size: 18px; line-height: 1.68; margin-bottom: 8px; } } .styles_title__qAnJJ { font-size: 24px; font-weight: 700; line-height: 1.36; margin-bottom: 16px; } @media (min-width: 768px) { .styles_title__qAnJJ { font-size: 28px; line-height: 1.32; } } .styles_desc__PxbHY { color: var(--ju-content-2); font-size: 14px; line-height: 1.58; margin-bottom: 16px; } @media (min-width: 768px) { .styles_desc__PxbHY { font-size: 18px; line-height: 1.68; margin-bottom: 40px; } } @media (min-width: 1024px) { .styles_desc__PxbHY { margin-bottom: 60px; } } .styles_department-container__3bNkX { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; margin-bottom: 20px; width: 100%; } @media (min-width: 768px) { .styles_department-container__3bNkX { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 40px; } } @media (min-width: 1024px) { .styles_department-container__3bNkX { margin-bottom: 60px; } } .styles_department-item-container__KyzJ- { background-color: var(--ju-surface); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; height: 64px; transition: all .3s ease; width: 100%; } .styles_department-item-container__KyzJ-:not(:last-child) { margin-bottom: 16px; } @media (min-width: 768px) { .styles_department-item-container__KyzJ- { height: 100px; width: calc(33.33333% - 16px); } .styles_department-item-container__KyzJ-:not(:last-child) { margin-bottom: 0; } .styles_department-item-container__KyzJ-:not(:nth-child(3n+3)) { margin-right: 24px; } .styles_department-item-container__KyzJ-:nth-child(n+4) { margin-top: 24px; } } .styles_department-item-container__KyzJ-:hover { transform: scale(1.05); border-color: var(--border-2); } .styles_department-item__G1dpN { align-items: center; display: flex; height: 64px; justify-content: flex-start; padding: 0 23px; width: 100%; } @media (min-width: 768px) { .styles_department-item__G1dpN { height: 100px; padding: 0 16px; } } .styles_department-content__bt2k6 { align-items: center; display: flex; flex-direction: row; justify-content: flex-start; } .styles_department-icon__YNiaY { height: 48px; width: 48px; margin-right: 12px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--ju-brand); background: var(--grad-soft); flex: 0 0 auto; } .styles_department-name__UBVko { color: var(--ju-content); font-size: 16px; line-height: 1.58; } @media (min-width: 768px) { .styles_department-name__UBVko { font-size: 18px; line-height: 1.68; } } .styles_textBtn__YIc4T { align-items: center; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; flex-direction: row; font-size: 16px; gap: 8px; justify-content: center; line-height: 1.58; text-decoration: none; color: var(--ju-content); } @media (min-width: 768px) { .styles_textBtn__YIc4T { font-size: 18px; } } .styles_textBtn__YIc4T:hover { border-color: var(--ju-content); } .styles_textBtn__YIc4T a { color: inherit; text-decoration: none; } /* ========================================================= 6 · DisclaimerSection ========================================================= */ .styles_DisclaimerSection__u6C-K { background-color: var(--ju-elevated); color: var(--ju-content-2); padding: 48px 16px 64px; } @media (min-width: 1024px) { .styles_DisclaimerSection__u6C-K { padding-top: 72px; padding-bottom: 96px; } } .styles_disclaimer__ZqTca { width: 100%; margin: 0 auto; } @media (min-width: 768px) { .styles_disclaimer__ZqTca { width: 83.33333333%; } } .styles_disclaimerTitle__tqOLD { color: var(--ju-content); font-size: 20px; font-weight: 700; line-height: 28px; margin-bottom: 24px; } .styles_disclaimerDescription__BsKEG { font-size: 16px; line-height: 24px; } .styles_disclaimerDescription__BsKEG a { color: var(--ju-brand); text-decoration: underline; text-underline-offset: 2px; }