/* Odoo Jobs Sync — Crepsilon careers (Tech-Mahindra style layout, Crepsilon blue). Everything is scoped under .ojs-scope. Recolour via the variables below. */ .ojs-scope { --ojs-primary: #0147ad; --ojs-primary-strong: #013a8f; --ojs-accent: #0147ad; --ojs-accent-hover: #013a8f; --ojs-navy: #08153a; --ojs-navy-2: #0c1e4f; --ojs-ink: #14213d; --ojs-muted: #5b6b86; --ojs-surface: #ffffff; --ojs-soft: #eef3fb; --ojs-chip: #e7edf8; --ojs-line: #dbe4f2; --ojs-ring: rgba(1,71,173,.3); --ojs-radius: 14px; --ojs-shadow: 0 18px 40px -22px rgba(8,21,58,.45); --ojs-shadow-sm: 0 6px 18px -12px rgba(8,21,58,.5); font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ojs-ink); line-height: 1.55; } .ojs-scope *, .ojs-scope *::before, .ojs-scope *::after { box-sizing: border-box; } .ojs-scope h1, .ojs-scope h2, .ojs-scope h3 { margin: 0; line-height: 1.18; text-wrap: balance; } .ojs-scope svg { width: 1em; height: 1em; display: inline-block; } /* Kill the theme's default link underlines inside the plugin. */ .ojs-scope a { text-decoration: none !important; } .ojs-scope.ojs-jobs, .ojs-scope.ojs-single, .ojs-scope.ojs-apply-page, .ojs-scope.ojs-reg { margin-top: 0; } /* ---------- buttons ---------- */ .ojs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ojs-accent); color: #fff !important; text-decoration: none; font-weight: 800; font-size: .92rem; padding: 12px 26px; border: 0; border-radius: 6px; cursor: pointer; transition: background .15s, transform .15s; line-height: 1.2; letter-spacing: .01em; } .ojs-btn:hover { background: var(--ojs-accent-hover); color: #fff !important; } .ojs-btn:active { transform: translateY(1px); } .ojs-btn-block { width: 100%; } .ojs-btn-sm { padding: 11px 20px; font-size: .85rem; } .ojs-btn-ghost { background: transparent; color: var(--ojs-primary) !important; border: 2px solid var(--ojs-primary); padding: 10px 24px; } .ojs-btn-ghost:hover { background: var(--ojs-primary); color: #fff !important; } .ojs-btn-light { background: #fff; color: var(--ojs-primary-strong) !important; } .ojs-btn-light:hover { background: #eaf1ff; color: var(--ojs-primary-strong) !important; } .ojs-btn-outline { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.9); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; padding: 13px 30px; border-radius: 6px; } .ojs-btn-outline:hover { background: #fff; color: var(--ojs-primary-strong) !important; border-color: #fff; } /* ---------- full-width hero banner ---------- */ .ojs-hero, .ojs-jobbanner, .ojs-reg-banner { position: relative; overflow: hidden; color: #fff; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: linear-gradient(120deg, var(--ojs-navy) 0%, var(--ojs-primary-strong) 60%, var(--ojs-primary) 100%); background-size: cover; background-position: center; } .ojs-hero { min-height: 460px; display: flex; align-items: center; margin-bottom: 0; } .ojs-hero.has-image { background-color: var(--ojs-navy); } .ojs-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(6,14,36,.9) 0%, rgba(6,14,36,.64) 45%, rgba(6,14,36,.3) 100%); } .ojs-hero.has-image .ojs-hero-overlay { background: linear-gradient(90deg, rgba(6,14,36,.86) 0%, rgba(6,14,36,.58) 45%, rgba(6,14,36,.24) 100%); } .ojs-hero-lines { position: absolute; inset: -20% -10%; z-index: 1; opacity: .5; pointer-events: none; background: linear-gradient(115deg, transparent 0 48.4%, rgba(255,255,255,.16) 48.4% 48.7%, transparent 48.7%), linear-gradient(115deg, transparent 0 61%, rgba(255,255,255,.1) 61% 61.25%, transparent 61.25%); } .ojs-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 56px 40px; } .ojs-hero-title { font-size: clamp(22px, 2.8vw, 32px) !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.14; max-width: 22ch; } .ojs-hero-sub { margin-top: 14px; max-width: 52ch; font-size: 1rem; color: #e6ecfa; font-weight: 500; } .ojs-hero .ojs-btn-outline { margin-top: 28px; } /* ---------- Recent Jobs (openings) ---------- */ .ojs-openings { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: var(--ojs-soft); padding: 48px 0 64px; } .ojs-toolbar { max-width: 1180px; margin: 0 auto 28px; padding: 0 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; } .ojs-toolbar-title { font-size: 1.5rem !important; font-weight: 900 !important; white-space: nowrap; color: var(--ojs-primary) !important; } .ojs-tabs { display: inline-flex; background: #fff; border: 1px solid var(--ojs-line); border-radius: 8px; padding: 4px; gap: 4px; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; } .ojs-tab { border: 1px solid transparent !important; background: transparent !important; font: inherit; font-weight: 700 !important; font-size: .76rem !important; color: var(--ojs-primary) !important; padding: 7px 14px !important; border-radius: 6px !important; cursor: pointer; white-space: nowrap; text-transform: none !important; letter-spacing: 0; line-height: 1.3; box-shadow: none !important; } .ojs-tab.is-active { background: var(--ojs-primary) !important; color: #fff !important; border-color: var(--ojs-primary) !important; } .ojs-search { min-width: 0; } .ojs-search-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ojs-muted); margin-bottom: 6px; text-align: center; } .ojs-search-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ojs-line); border-radius: 8px; padding: 6px 6px 6px 14px; } .ojs-search-row:focus-within { border-color: var(--ojs-primary); box-shadow: 0 0 0 4px var(--ojs-ring); } .ojs-search-ic { color: var(--ojs-muted); font-size: 18px; display: inline-flex; flex: none; } .ojs-search-input { border: 0; background: transparent; font: inherit; font-size: .92rem; color: var(--ojs-ink); width: 100%; min-width: 0; outline: none; } .ojs-grid { max-width: 1180px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .ojs-card { background: var(--ojs-surface); border: 1px solid var(--ojs-line); border-radius: var(--ojs-radius); padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ojs-shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; } .ojs-card:hover { transform: translateY(-4px); box-shadow: var(--ojs-shadow); border-color: #c3d4ee; } .ojs-card.is-hidden { display: none; } .ojs-tagbox { align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ojs-primary); padding: 6px 12px; border-radius: 5px; line-height: 1.25; } .ojs-card-title { font-size: 1rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; } .ojs-card-title a { color: var(--ojs-ink) !important; text-decoration: none !important; } .ojs-card:hover .ojs-card-title a { color: var(--ojs-primary) !important; } .ojs-card-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--ojs-muted); } .ojs-card-meta b { color: var(--ojs-ink); font-weight: 700; } .ojs-card-btn { margin-top: auto; } .ojs-no-results { max-width: 1180px; margin: 0 auto; padding: 28px 40px 0; text-align: center; color: var(--ojs-muted); font-weight: 600; } .odoo-job-empty { max-width: 1180px; margin: 0 auto; background: #fff; border: 1px dashed #cbd5e1; border-radius: var(--ojs-radius); padding: 40px 24px; text-align: center; color: var(--ojs-muted); } /* resume CTA strip */ .ojs-resume-cta { max-width: 1180px; margin: 40px auto 0; padding: 26px 34px; border-radius: 16px; background: linear-gradient(120deg, var(--ojs-navy) 0%, var(--ojs-primary) 130%); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ojs-resume-cta h3 { font-size: 1.3rem; font-weight: 900; } .ojs-resume-cta p { margin: 6px 0 0; color: #cfdcf5; font-weight: 500; } /* ---------- single job: banner ---------- */ .ojs-jobbanner { min-height: 240px; display: flex; align-items: center; margin-bottom: 34px; } .ojs-jobbanner-inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 44px 40px; } .ojs-crumb { color: #bcd0ef; font-size: .8rem; font-weight: 700; text-decoration: none; } .ojs-crumb:hover { color: #fff; } .ojs-jobbanner-title { font-size: clamp(18px, 2.1vw, 26px) !important; font-weight: 800 !important; letter-spacing: -.01em; margin-top: 10px; line-height: 1.2; } .ojs-jobbanner-sub { margin-top: 10px; color: #d7e2f7; font-size: .95rem; font-weight: 600; } /* blocks share a heading style */ .ojs-block-title { font-size: 1.2rem !important; font-weight: 900 !important; color: var(--ojs-primary) !important; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ojs-line); } .ojs-infobox { background: var(--ojs-surface); border: 1px solid var(--ojs-line); border-radius: 16px; box-shadow: var(--ojs-shadow); padding: 28px; margin-bottom: 26px; } .ojs-infogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ojs-info { display: flex; gap: 13px; align-items: center; background: var(--ojs-soft); border: 1px solid var(--ojs-line); border-radius: 12px; padding: 15px 16px; } .ojs-info-ic { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--ojs-primary); color: #fff; display: grid; place-items: center; font-size: 20px; } .ojs-info-text { display: flex; flex-direction: column; min-width: 0; } .ojs-info-k { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ojs-muted); } .ojs-info-v { font-size: .95rem; font-weight: 800; color: var(--ojs-ink); margin-top: 3px; word-break: break-word; line-height: 1.25; } .ojs-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; } /* recommend + summary blocks */ .ojs-recommend, .ojs-summary { background: var(--ojs-surface); border: 1px solid var(--ojs-line); border-radius: 16px; box-shadow: var(--ojs-shadow-sm); padding: 28px; margin-bottom: 26px; } .ojs-summary .ojs-desc { font-size: 1rem; color: var(--ojs-ink); } .ojs-desc > :first-child { margin-top: 0; } .ojs-desc h1, .ojs-desc h2, .ojs-desc h3, .ojs-desc h4 { color: var(--ojs-primary-strong); font-weight: 900; margin: 22px 0 10px; } .ojs-desc ul, .ojs-desc ol { padding-left: 20px; } .ojs-desc li { margin: 6px 0; } .ojs-desc a { color: var(--ojs-accent); } .ojs-single-apply { margin-bottom: 20px; } .ojs-single-apply .ojs-btn { width: 100%; max-width: 340px; } /* ---------- shared forms ---------- */ .ojs-form-grid, .ojs-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .ojs-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ojs-field-full { grid-column: 1 / -1; } .ojs-field label { font-size: .82rem; font-weight: 800; color: var(--ojs-ink); } .ojs-req { color: var(--ojs-primary); } .ojs-hint { font-weight: 600; color: var(--ojs-muted); font-size: .72rem; } .ojs-scope input[type="text"], .ojs-scope input[type="email"], .ojs-scope input[type="url"], .ojs-scope input[type="file"], .ojs-scope select, .ojs-scope textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--ojs-line); background: var(--ojs-soft); border-radius: 8px; padding: 12px 13px; font: inherit; font-size: .9rem; color: var(--ojs-ink); outline: none; transition: border-color .15s, box-shadow .15s; } .ojs-scope input:focus, .ojs-scope select:focus, .ojs-scope textarea:focus { border-color: var(--ojs-primary); box-shadow: 0 0 0 4px var(--ojs-ring); } .ojs-scope input[type="file"] { cursor: pointer; padding: 10px 12px; } .ojs-scope textarea { resize: vertical; min-height: 100px; } .ojs-submit-btn { background: var(--ojs-accent); color: #fff; border: 0; border-radius: 6px; padding: 14px 30px; font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .15s, transform .08s; align-self: flex-start; } .ojs-submit-btn:hover { background: var(--ojs-accent-hover); } .ojs-submit-btn:active { transform: translateY(1px); } .ojs-inline-form { display: flex; flex-direction: column; gap: 18px; } .ojs-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------- apply page ---------- */ .ojs-apply-page { max-width: 760px; margin-left: auto; margin-right: auto; } .ojs-apply-card { background: var(--ojs-surface); border: 1px solid var(--ojs-line); border-radius: 18px; padding: 30px; box-shadow: var(--ojs-shadow-sm); } .ojs-back-link { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--ojs-primary); text-decoration: none; margin-bottom: 14px; } .ojs-back-link:hover { text-decoration: underline; } .ojs-back-link svg { font-size: 15px; } .ojs-apply-heading { font-size: 1.35rem; font-weight: 900; color: var(--ojs-ink); } .ojs-apply-note { font-size: .9rem; color: var(--ojs-muted); margin: 8px 0 20px; font-weight: 600; } .ojs-apply-note strong { color: var(--ojs-ink); } .ojs-apply-form { display: flex; flex-direction: column; gap: 18px; } /* ---------- registration page (dark banner form) ---------- */ .ojs-reg-banner { min-height: 100%; align-items: stretch; } .ojs-reg-inner { position: relative; z-index: 2; width: 100%; max-width: 900px; margin: 0 auto; padding: 56px 40px 64px; } .ojs-reg-title { font-size: clamp(24px, 3.4vw, 38px); font-weight: 900; } .ojs-reg-note { color: #b9c8e6; font-size: .85rem; margin: 8px 0 26px; font-weight: 600; } .ojs-reg-form .ojs-field label { color: #d7e1f5; } .ojs-reg-form input, .ojs-reg-form select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; } .ojs-reg-form input::placeholder { color: #93a4c6; } .ojs-reg-form select option { color: #111; } .ojs-reg-form input:focus, .ojs-reg-form select:focus { border-color: #6f9dff; box-shadow: 0 0 0 4px rgba(111,157,255,.25); } .ojs-reg-form .ojs-req { color: #7fb0ff; } .ojs-reg-form .ojs-hint { color: #9fb0d2; } .ojs-submit-wide { margin-top: 26px; background: #fff; color: var(--ojs-primary-strong); } .ojs-submit-wide:hover { background: #eaf1ff; } /* ---------- notices ---------- */ .odoo-apply-success, .odoo-apply-error { border-radius: 10px; padding: 15px 18px; margin: 0 0 20px; font-weight: 700; font-size: .95rem; } .odoo-apply-success { background: #e9f9ef; border: 1px solid #b6e7c6; color: #12703a; } .odoo-apply-error { background: #fdecec; border: 1px solid #f4c2c2; color: #a12626; } .ojs-scope :focus-visible { outline: 3px solid var(--ojs-accent); outline-offset: 2px; border-radius: 6px; } /* Force button colours over the theme's own