/* * Public Recruitment Portal in the theplanetsoft.com/careers look (2026-10-21): * the frame (views/recruitment_portal/index.php: logo-only header, footer), the * openings page (portal.php, rec_portal_job_item_html()) and a job's details * (_job_detail.php). Everything is under .rpx, so the older portal styles * (recruitment_portal.css, .rp-*) and the candidate pages are not affected. * Colours: ink #001722, dark #040F14, navy #0D3D54, green #44B74A (text on white: * #2A7F31), muted #4B5D66, lines #E3EAEE. Type: Mona Sans (headings), Albert Sans. */ body.customers:has(.rpx) { background: #ffffff; } .rpx { min-height: 100vh; display: flex; flex-direction: column; font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; color: #001722; background: #ffffff; } .rpx *, .rpx *::before, .rpx *::after { box-sizing: border-box; } .rpx h1, .rpx h2, .rpx h3, .rpx p, .rpx ol, .rpx ul, .rpx dl, .rpx dd { margin: 0; } .rpx a { text-decoration: none; } .rpx a:hover, .rpx a:focus { text-decoration: none; } /* up to 1424px of content; the sides grow with the screen (16-48px), so a laptop has no wide empty margins */ .rpx-wrap { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); } .rpx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rpx-nowrap { white-space: nowrap; } /* ---- Header: the logo alone ---- */ .rpx-header { background: #ffffff; } .rpx-header .rpx-wrap { display: flex; align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 24px; } /* Setup -> Settings -> General -> Company Logo (rec_portal_logo_html()); none set: the company's name */ .rpx-logo { display: block; width: auto; height: 51px; } .rpx-logo-text { font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 24px; line-height: 51px; color: #001722; } /* ---- The page between header and footer ---- */ .rpx-portal { flex: 1 0 auto; } /* ---- Hero: a dark rounded panel ---- */ .rpx-hero { position: relative; overflow: hidden; color: #ffffff; background: #040F14; border-radius: 28px; } .rpx-hero-mark { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 150px; line-height: 1; letter-spacing: -3px; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09); pointer-events: none; user-select: none; } .rpx-hero-in { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 44px clamp(20px, 5vw, 56px) 52px; } .rpx-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #44B74A; } .rpx-hero-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 42px; line-height: 1.15; color: #ffffff; } .rpx-accent { color: #44B74A; } .rpx-hero-sub { max-width: 1000px; font-size: 17px; line-height: 1.6; color: #C7D3D9; } .rpx-search { max-width: 720px; margin-top: 4px; } .rpx-search-box { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px; background: #ffffff; border-radius: 16px; } .rpx-search-box:focus-within { box-shadow: 0 0 0 3px rgba(68, 183, 74, .45); } .rpx-search-icon { font-size: 18px; color: #4B5D66; } /* the theme's form styles give every search input a border, a grey fill and a blue ring on focus: here the white box is the field, and its green ring shows the focus */ .rpx .rpx-search-input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; font: inherit; font-size: 17px; color: #001722; background: transparent; border: 0; border-radius: 0; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; } .rpx .rpx-search-input:focus { background: transparent; border: 0; outline: none; box-shadow: none; } .rpx-search-input::placeholder { color: #6B7C85; } .rpx-search-input::-webkit-search-cancel-button { display: none; } .rpx-search-clear { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 16px; color: #4B5D66; background: transparent; border: 0; border-radius: 8px; } .rpx-search-clear:hover, .rpx-search-clear:focus { color: #001722; background: #F1F5F7; } /* ---- List and details ---- */ .rpx-split { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding: 48px 0 72px; } .rpx-list-col { flex: 1 1 440px; max-width: 520px; min-width: 0; } .rpx-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 14px 14px; border-bottom: 1px solid rgba(13, 61, 84, .25); } .rpx-list-head h2 { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: #001722; } .rpx-count { font-size: 15px; color: #4B5D66; } .rpx-list { padding: 0; list-style: none; } .rpx-li { border-bottom: 1px solid rgba(13, 61, 84, .15); } .rpx-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 0 12px; align-items: start; margin: 4px 0; padding: 18px 14px; color: #001722; border-radius: 14px; } .rpx-item:hover, .rpx-item:focus { color: #001722; box-shadow: inset 0 0 0 1px #CFE3D2; } .rpx-item:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; } .rpx-item.is-current { background: #F1F7F2; } .rpx-item-num { padding-top: 3px; font-size: 14px; font-weight: 600; color: #666666; } .rpx-item.is-current .rpx-item-num { color: #2A7F31; } .rpx-item-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rpx-item-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.35; } .rpx-item.is-current .rpx-item-title { font-weight: 600; } .rpx-item-meta { font-size: 13.5px; color: #4B5D66; } .rpx-item-closed { font-size: 13px; color: #6B7C85; } .rpx-item-chev { margin-top: 5px; font-size: 13px; color: #8A9AA3; } .rpx-applied { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #2A7F31; } .rpx-empty { padding: 48px 16px; text-align: center; color: #4B5D66; } .rpx-empty i { display: block; margin-bottom: 10px; font-size: 28px; color: #8A9AA3; } .rpx-detail-col { flex: 999 1 560px; min-width: 0; } #rp-detail-body.rpx-is-loading { opacity: .55; transition: opacity .15s; } .rpx-back { display: none; } /* ---- One job's details ---- */ /* container: the header's Apply now moves under the title when the panel is narrow (below) */ .rpx-d { display: flex; flex-direction: column; gap: 26px; padding: 36px; container-type: inline-size; background: #ffffff; border: 1px solid #E3EAEE; border-radius: 24px; } /* Header: icon | company, title, chips | Apply now at the top right, whatever the title's length */ .rpx-d-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; } .rpx-d-head .rpx-d-actions { padding-top: 2px; } .rpx-d-head .rpx-btn { padding: 12px 26px; white-space: nowrap; } @container (max-width: 620px) { .rpx-d-head { grid-template-columns: auto minmax(0, 1fr); } .rpx-d-head .rpx-d-actions { grid-column: 2; padding-top: 0; } } .rpx-d-logo { position: relative; display: flex; flex: 0 0 64px; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; background: #ffffff; border: 1px solid #E3EAEE; border-radius: 18px; } .rpx-d-logo img { width: 100%; height: 100%; object-fit: contain; } /* no company logo: an icon for the kind of work on a soft tile, like theplanetsoft.com's service icons (rec_portal_role_icon()); the tile takes the colour of the fact tiles below */ .rpx-d-logo i { display: none; } .rpx-d-logo.rpx-d-logo-icon { border-color: transparent; } .rpx-d-logo.rpx-d-logo-icon i { display: block; font-size: 26px; line-height: 1; color: #0D3D54; } .rpx-tone-dev { background: #CAEDF4; } .rpx-tone-design { background: #EBEBC9; } .rpx-tone-grow { background: #E0EAE2; } .rpx-tone-ops { background: #D7E7EA; } .rpx-d-headtext { display: flex; flex: 1 1 320px; flex-direction: column; gap: 10px; min-width: 0; } .rpx-d-byline { font-size: 14px; color: #4B5D66; } .rpx-d-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 30px; line-height: 1.2; color: #001722; overflow-wrap: anywhere; } /* the longer the title, the smaller (_job_detail.php) */ .rpx-d-title.rpx-d-title-long { font-size: 26px; line-height: 1.25; } .rpx-d-title.rpx-d-title-xlong { font-size: 23px; line-height: 1.28; } .rpx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; padding: 0; list-style: none; } .rpx-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: 13px; color: #0D3D54; background: #EEF3F5; border-radius: 999px; } .rpx-chip-dot { display: none; width: 7px; height: 7px; border-radius: 50%; } .rpx-chip-open { font-weight: 600; color: #1F6326; background: #E6F4E7; } .rpx-chip-open .rpx-chip-dot { display: inline-block; background: #2A7F31; } .rpx-chip-closed { font-weight: 600; color: #4B5D66; } .rpx-chip-closed .rpx-chip-dot { display: inline-block; background: #8A9AA3; } .rpx-d-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .rpx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 30px; font-weight: 700; font-size: 15px; line-height: 1.25; border-radius: 28px 40px 0 28px; } .rpx-btn-primary, .rpx-btn-primary:hover, .rpx-btn-primary:focus { color: #001722; background: #44B74A; } .rpx-btn-primary:hover { background: #3BA641; } .rpx-btn:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; } .rpx-d-closed { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 14px; color: #4B5D66; background: #F1F5F7; border-radius: 10px; } .rpx-d-applied { display: flex; align-items: flex-start; gap: 8px; margin-top: -12px; padding: 9px 12px; font-size: 13.5px; line-height: 1.45; color: #166534; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px; } .rpx-d-applied i { margin-top: 3px; } .rpx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .rpx-fact { padding: 16px 18px; border-radius: 16px; } .rpx-fact-0 { background: #E0EAE2; } .rpx-fact-1 { background: #CAEDF4; } .rpx-fact-2 { background: #EBEBC9; } .rpx-fact-3 { background: #D7E7EA; } .rpx-fact dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #35464E; } .rpx-fact dd { margin-top: 8px; font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #001722; } .rpx-d-about, .rpx-d-skills { display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.7; color: #22343C; } .rpx-d-h3 { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: #001722; } .rpx-d-skills .rpx-chips { margin-top: 0; } /* the description: headings, lists and paragraphs (rec_job_description_html() rebuilds pasted plain text) */ .rpx-d-desc { overflow-wrap: anywhere; } .rpx-d-desc > :first-child { margin-top: 0; } .rpx-d-desc > :last-child { margin-bottom: 0; } .rpx-d-desc p { margin: 0 0 14px; } .rpx-d-desc ul, .rpx-d-desc ol { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding-left: 0; list-style: none; } .rpx-d-desc ol { padding-left: 24px; list-style: decimal; } .rpx-d-desc ol > li::marker { font-weight: 600; color: #2A7F31; } .rpx-d-desc li { margin: 0; } .rpx-d-desc ul > li { position: relative; padding-left: 24px; } .rpx-d-desc ul > li::before { content: ""; position: absolute; top: .72em; left: 6px; width: 7px; height: 7px; background: #44B74A; border-radius: 50%; } .rpx-d-desc li ul, .rpx-d-desc li ol { margin: 8px 0 2px; gap: 6px; } .rpx-d-desc li ul > li::before { width: 6px; height: 6px; background: transparent; border: 1.5px solid #8A9AA3; } /* a long list of short names (skills, tools): side by side */ .rpx-d-desc ul.rpx-d-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 24px; } .rpx-d-desc li strong, .rpx-d-desc .rpx-d-kv strong { font-weight: 600; color: #001722; } /* "Location: Surat" lines at the top */ .rpx-d-desc .rpx-d-kv { margin: 0 0 4px; } .rpx-d-desc .rpx-d-kv:not(:has(+ .rpx-d-kv)) { margin-bottom: 16px; } .rpx-d-desc h1, .rpx-d-desc h2, .rpx-d-desc h3, .rpx-d-desc h4, .rpx-d-desc .rpx-d-subhead { margin: 28px 0 12px; font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.35; color: #001722; } .rpx-d-desc a { color: #2A7F31; text-decoration: underline; } .rpx-d-desc img { max-width: 100%; height: auto; } .rpx-d-none { color: #8A9AA3; } .rpx-d-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 24px 28px; background: #F3F7F4; border-radius: 20px; } .rpx-d-cta-text { display: flex; flex: 1 1 300px; flex-direction: column; gap: 4px; min-width: 0; } .rpx-d-cta-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 18px; color: #001722; } .rpx-d-cta-sub { font-size: 14px; color: #4B5D66; } .rpx-d-applybar { display: none; } .rpx-d-error { padding: 48px 16px; border: 1px solid #E3EAEE; border-radius: 24px; } /* ---- Footer ---- */ /* the theme paints every