/* Bezbednost na delu – Oglasi za posao Isti vizuelni jezik kao registar kompanija, Partneri i Kalendar događaja: navy #0F3B61, crvena #C8232B, Poppins, zaobljene kartice. */ .bndj-wrap { --bndj-navy: #0F3B61; --bndj-navy-2: #0B2F4E; --bndj-red: #C8232B; --bndj-red-2: #A81B22; --bndj-ink: #1B2733; --bndj-muted: #5B6B7B; --bndj-line: #DDE3EA; --bndj-soft: #F4F7FA; --bndj-green: #1E8E5A; --bndj-gold: #A87A06; --bndj-radius: 14px; --bndj-accent: #0F3B61; max-width: 1240px; margin: 0 auto; padding: 24px 20px 64px; font-family: Poppins, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--bndj-ink); -webkit-font-smoothing: antialiased; } .bndj-wrap *, .bndj-wrap *::before, .bndj-wrap *::after { box-sizing: border-box; } .bndj-wrap h1, .bndj-wrap h2, .bndj-wrap h3, .bndj-wrap p, .bndj-wrap ul, .bndj-wrap ol, .bndj-wrap dl, .bndj-wrap dd, .bndj-wrap figure { margin: 0; padding: 0; } .bndj-wrap h1, .bndj-wrap h2, .bndj-wrap h3 { font-family: inherit; color: var(--bndj-ink); letter-spacing: -.01em; text-transform: none; line-height: 1.25; } .bndj-wrap h2 { font-size: 20px; font-weight: 700; } .bndj-wrap h3 { font-size: 16px; font-weight: 600; } .bndj-wrap a { color: var(--bndj-navy); text-decoration: none; } .bndj-wrap a:hover { color: var(--bndj-red); } .bndj-wrap button { font-family: inherit; text-transform: none; letter-spacing: normal; } .bndj-wrap img { max-width: 100%; height: auto; } .bndj-wrap [hidden] { display: none !important; } .bndj-icon { flex: 0 0 auto; vertical-align: middle; } .bndj-main { display: block; width: 100%; } .bndj-page-content > .bndj-wrap { padding-top: 24px; } .bndj-sr, .bndj-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bndj-muted { color: var(--bndj-muted); } .bndj-small { font-size: 13.5px; } /* Buttons ------------------------------------------------------------- */ .bndj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s, color .15s, box-shadow .2s, transform .1s; white-space: nowrap; } .bndj-btn:active { transform: translateY(1px); } .bndj-btn:focus-visible { outline: 3px solid rgba(15, 59, 97, .35); outline-offset: 2px; } .bndj-btn-red { background: var(--bndj-red); color: #fff !important; box-shadow: 0 6px 18px rgba(200, 35, 43, .25); } .bndj-btn-red:hover { background: var(--bndj-red-2); color: #fff !important; } .bndj-btn-navy { background: var(--bndj-navy); color: #fff !important; } .bndj-btn-navy:hover { background: var(--bndj-navy-2); color: #fff !important; } .bndj-btn-ghost { background: #fff; color: var(--bndj-navy) !important; border-color: var(--bndj-line); } .bndj-btn-ghost:hover { border-color: var(--bndj-navy); color: var(--bndj-navy) !important; } .bndj-btn-glass { background: rgba(255, 255, 255, .1); color: #fff !important; border-color: rgba(255, 255, 255, .28); } .bndj-btn-glass:hover { background: rgba(255, 255, 255, .18); color: #fff !important; } .bndj-btn-danger { background: #fff; color: var(--bndj-red) !important; border-color: #F3C9CB; } .bndj-btn-danger:hover { background: #FDEEEF; color: var(--bndj-red) !important; } .bndj-btn-lg { min-height: 50px; padding: 12px 22px; font-size: 15.5px; } .bndj-btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 9px; } .bndj-btn-block { width: 100%; } .bndj-btn[disabled], .bndj-btn.is-busy { opacity: .6; pointer-events: none; } .bndj-btn.is-busy::after { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: bndj-spin .7s linear infinite; } @keyframes bndj-spin { to { transform: rotate(360deg); } } .bndj-linkbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--bndj-navy); font-size: 14px; font-weight: 600; cursor: pointer; } .bndj-linkbtn:hover { color: var(--bndj-red); } .bndj-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bndj-line); background: #fff; color: var(--bndj-ink); cursor: pointer; } /* Pills, chips, tags -------------------------------------------------- */ .bndj-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .bndj-pill-red { background: #FDEEEF; color: var(--bndj-red); } .bndj-pill-gold { background: #FFF5D6; color: var(--bndj-gold); } .bndj-pill-green { background: #E8F6EF; color: var(--bndj-green); } .bndj-pill-warn { background: #FFF6E0; color: #9A6200; } .bndj-pill-muted { background: #EEF1F4; color: var(--bndj-muted); } .bndj-pill-navy { background: #EAF1F8; color: var(--bndj-navy); } .bndj-field { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--bndj-accent); background: color-mix(in srgb, var(--bndj-accent) 9%, #fff); } .bndj-field::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--bndj-accent); } .bndj-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; background: var(--bndj-soft); color: var(--bndj-ink); font-size: 12.5px; font-weight: 500; line-height: 1.35; text-decoration: none !important; } .bndj-chip .bndj-icon { color: var(--bndj-muted); } .bndj-chip-lic { background: #FFF8E6; color: #6B4E00; } .bndj-chip-lic .bndj-icon { color: var(--bndj-gold); } .bndj-chip-ghost { background: #fff; border: 1px solid var(--bndj-line); color: var(--bndj-navy); } a.bndj-chip-ghost:hover { border-color: var(--bndj-navy); } .bndj-badge { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; border-radius: 999px; background: var(--bndj-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; } .bndj-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bndj-red); margin-bottom: 8px; } .bndj-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: var(--bndj-accent); } .bndj-count { font-size: 12px; color: var(--bndj-muted); background: var(--bndj-soft); border-radius: 999px; padding: 1px 8px; min-width: 26px; text-align: center; font-weight: 500; } /* Banners ------------------------------------------------------------- */ .bndj-banner { display: flex; gap: 10px; align-items: flex-start; padding: 13px 16px; margin: 0 0 18px; border-radius: 12px; font-size: 14.5px; background: #EAF1F8; color: var(--bndj-navy); border: 1px solid #D3E1EE; } .bndj-banner .bndj-icon { margin-top: 1px; } .bndj-banner-green { background: #E8F6EF; color: #14653F; border-color: #C9EBD8; } .bndj-banner-warn { background: #FFF6E0; color: #7A4D00; border-color: #F4DFA8; } .bndj-banner-muted { background: #F1F3F6; color: #46525E; border-color: #E1E6EB; } .bndj-banner a { font-weight: 600; text-decoration: underline !important; } /* Hero ---------------------------------------------------------------- */ .bndj-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 40px 40px 36px; color: #fff; background: radial-gradient(1200px 400px at 100% 0%, rgba(200, 35, 43, .25), transparent 60%), linear-gradient(135deg, #0F3B61 0%, #0B2F4E 100%); } .bndj-hero::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 260px; height: 260px; border: 36px solid rgba(255, 255, 255, .05); border-radius: 50%; } .bndj-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: end; } .bndj-hero-inner.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .bndj-hero .bndj-eyebrow { color: #FFB3B6; } .bndj-wrap .bndj-hero-title { color: #fff; font-size: clamp(27px, 4vw, 40px); font-weight: 700; line-height: 1.15; } .bndj-hero-intro { margin-top: 12px !important; color: #CFDDEA; font-size: 16px; max-width: 640px; } .bndj-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .bndj-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; } .bndj-hero-stats div { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); } .bndj-hero-stats dt { font-size: 30px; font-weight: 700; line-height: 1; color: #fff; } .bndj-hero-stats dd { margin: 6px 0 0; font-size: 13px; color: #AFC6DB; } .bndj-hero-sm { padding: 30px 36px; } .bndj-hero-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: #CFDDEA !important; font-size: 13.5px; font-weight: 500; } .bndj-hero-back:hover { color: #fff !important; } /* Tabs ---------------------------------------------------------------- */ .bndj-tabs { display: flex; gap: 6px; margin: 22px 0 18px; border-bottom: 1px solid var(--bndj-line); } .bndj-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px 14px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--bndj-muted); font-size: 15.5px; font-weight: 600; cursor: pointer; } .bndj-tab:hover { color: var(--bndj-navy); } .bndj-tab[aria-selected="true"] { color: var(--bndj-navy); border-bottom-color: var(--bndj-red); } .bndj-tab-count { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--bndj-soft); color: var(--bndj-muted); } .bndj-tab[aria-selected="true"] .bndj-tab-count { background: var(--bndj-navy); color: #fff; } /* Layout + sidebar ---------------------------------------------------- */ .bndj-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; } .bndj-sidebar { min-width: 0; } .bndj-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; } .bndj-sidebar-head strong { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--bndj-navy); } .bndj-sidebar-close, .bndj-sidebar-foot, .bndj-filter-toggle { display: none !important; } .bndj-fgroup { border: 0; margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--bndj-line); min-width: 0; } .bndj-fgroup legend { padding: 0; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bndj-muted); } .bndj-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; font-size: 14.5px; transition: background .12s; } .bndj-opt:hover { background: var(--bndj-soft); } .bndj-opt input { width: 17px; height: 17px; margin: 0; accent-color: var(--bndj-navy); flex: 0 0 auto; cursor: pointer; } .bndj-opt-label { flex: 1; min-width: 0; line-height: 1.35; } .bndj-opt.is-empty { opacity: .45; } .bndj-opt.is-hidden { display: none; } .bndj-opt input:checked ~ .bndj-opt-label { font-weight: 600; color: var(--bndj-navy); } .bndj-opt input:checked ~ .bndj-count { background: var(--bndj-navy); color: #fff; } .bndj-more-opts { margin-top: 6px; font-size: 13.5px; } .bndj-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.4; } .bndj-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .bndj-switch-ui { position: relative; flex: 0 0 auto; width: 40px; height: 23px; border-radius: 999px; background: #CBD5DF; transition: background .15s; } .bndj-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; } .bndj-switch input:checked + .bndj-switch-ui { background: var(--bndj-navy); } .bndj-switch input:checked + .bndj-switch-ui::after { transform: translateX(17px); } .bndj-switch input:focus-visible + .bndj-switch-ui { outline: 3px solid rgba(15, 59, 97, .3); outline-offset: 2px; } .bndj-switch small { display: block; color: var(--bndj-muted); font-size: 12.5px; } .bndj-switch .bndj-count { margin-left: 4px; } .bndj-promo { margin-top: 18px; padding: 18px; border-radius: var(--bndj-radius); background: linear-gradient(160deg, #FFF5F5, #fff 70%); border: 1px solid #F3D3D5; scroll-margin-top: 20px; } .bndj-promo-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--bndj-red); color: #fff; margin-bottom: 10px; } .bndj-promo > strong { display: block; color: var(--bndj-navy); font-size: 15px; } .bndj-promo > p { font-size: 13.5px; color: var(--bndj-muted); margin: 4px 0 12px !important; } .bndj-alert-form { display: grid; gap: 8px; } .bndj-alert-form .bndj-field-row { margin: 0; } .bndj-alert-fields summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--bndj-navy); padding: 4px 0; } .bndj-alert-fields summary small { color: var(--bndj-muted); font-weight: 400; } .bndj-alert-fieldlist { padding: 4px 0 2px 8px; } .bndj-alert-fieldlist .bndj-opt { font-size: 13.5px; padding: 4px 8px; } /* Toolbar ------------------------------------------------------------- */ .bndj-results { min-width: 0; } .bndj-toolbar { display: flex; gap: 10px; align-items: center; } .bndj-search { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; margin: 0; } .bndj-search .bndj-icon { position: absolute; left: 14px; color: var(--bndj-muted); pointer-events: none; } .bndj-wrap .bndj-search input { width: 100%; min-height: 48px; padding: 10px 14px 10px 42px; border: 1px solid var(--bndj-line); border-radius: 12px; font-size: 15px; background: #fff; color: var(--bndj-ink); box-shadow: none; margin: 0; } .bndj-wrap .bndj-search input:focus { border-color: var(--bndj-navy); outline: none; box-shadow: 0 0 0 3px rgba(15, 59, 97, .12); } .bndj-sort { margin: 0; } .bndj-wrap .bndj-sort select { min-height: 48px; padding: 8px 36px 8px 14px; border: 1px solid var(--bndj-line); border-radius: 12px; background-color: #fff; font-size: 14.5px; color: var(--bndj-ink); cursor: pointer; margin: 0; } .bndj-saved-toggle[aria-pressed="true"] { background: var(--bndj-navy); color: #fff !important; border-color: var(--bndj-navy); } .bndj-saved-toggle[aria-pressed="true"] .bndj-badge { background: #fff; color: var(--bndj-navy); } .bndj-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 10px; min-height: 30px; } .bndj-summary-label { font-weight: 600; color: var(--bndj-navy); font-size: 15px; } .bndj-active-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bndj-active-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #EEF4FA; color: var(--bndj-navy); font-size: 13px; font-weight: 500; border: 0; cursor: pointer; } .bndj-active-chip:hover { background: #E1EBF5; } /* Cards --------------------------------------------------------------- */ .bndj-list { transition: opacity .15s; } .bndj-list.is-loading { opacity: .45; pointer-events: none; } .bndj-cards { display: grid; gap: 12px; } .bndj-card { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) 200px; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--bndj-line); border-left: 4px solid var(--bndj-accent); border-radius: var(--bndj-radius); background: #fff; transition: border-color .15s, box-shadow .2s, transform .2s; } .bndj-card:hover { border-color: color-mix(in srgb, var(--bndj-accent) 45%, var(--bndj-line)); border-left-color: var(--bndj-accent); box-shadow: 0 10px 28px rgba(15, 59, 97, .10); transform: translateY(-1px); } .bndj-card.is-featured { background: linear-gradient(90deg, #FFFCF2, #fff 45%); border-color: #EAD9A2; border-left-color: #D4A514; } .bndj-card-link { color: inherit !important; } .bndj-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .bndj-card-link:focus-visible { outline: none; } .bndj-card-link:focus-visible::after { outline: 3px solid rgba(15, 59, 97, .35); outline-offset: 2px; } .bndj-card-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .bndj-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; } .bndj-card-top:empty { display: none; } .bndj-wrap .bndj-card-title { font-size: 17.5px; font-weight: 600; line-height: 1.3; } .bndj-card:hover .bndj-card-title { color: var(--bndj-navy); } .bndj-card-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--bndj-muted); font-size: 14px; } .bndj-card-sub span { display: inline-flex; align-items: center; gap: 6px; } .bndj-card-company { color: var(--bndj-ink); font-weight: 500; } .bndj-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .bndj-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; height: 100%; } .bndj-salary strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--bndj-green); line-height: 1.3; } .bndj-salary small { display: block; font-size: 12.5px; color: var(--bndj-muted); } .bndj-salary.is-empty strong { color: var(--bndj-muted); font-weight: 500; font-size: 14px; } .bndj-deadline { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--bndj-muted); } .bndj-deadline.is-urgent { color: var(--bndj-red); font-weight: 600; } .bndj-save { position: relative; z-index: 2; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--bndj-line); background: #fff; color: var(--bndj-muted); cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .bndj-save:hover { color: var(--bndj-navy); border-color: var(--bndj-navy); } .bndj-save[aria-pressed="true"], [data-bndj-save][aria-pressed="true"] { color: var(--bndj-red) !important; border-color: #F3C9CB; background: #FDEEEF; } [data-bndj-save][aria-pressed="true"] .bndj-icon path { fill: currentColor; } .bndj-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--bndj-accent) 12%, #fff); color: var(--bndj-accent); font-size: 19px; font-weight: 700; letter-spacing: .02em; border: 1px solid color-mix(in srgb, var(--bndj-accent) 18%, #fff); } .bndj-avatar.is-person { border-radius: 50%; } .bndj-avatar.has-logo { background: #fff; border-color: var(--bndj-line); padding: 6px; } .bndj-avatar img { width: 100%; height: 100%; object-fit: contain; } .bndj-avatar-lg { width: 84px; height: 84px; font-size: 26px; border-radius: 18px; } .bndj-avatar-lg.is-person { border-radius: 50%; } .bndj-loadmore { display: flex; justify-content: center; margin-top: 18px; } .bndj-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; } .bndj-trust > div { display: flex; gap: 12px; padding: 16px; border-radius: var(--bndj-radius); background: var(--bndj-soft); font-size: 13.5px; color: var(--bndj-muted); } .bndj-trust .bndj-icon { color: var(--bndj-navy); } .bndj-trust strong { display: block; color: var(--bndj-ink); font-size: 14px; } .bndj-empty { text-align: center; padding: 48px 24px; border: 1px dashed #C9D3DD; border-radius: 16px; background: #FBFCFE; } .bndj-empty-icon { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; background: #EAF1F8; color: var(--bndj-navy); margin-bottom: 12px; } .bndj-empty h3 { font-size: 18px; margin-bottom: 6px; } .bndj-empty p { color: var(--bndj-muted); max-width: 480px; margin: 0 auto 16px !important; } .bndj-empty-sm { padding: 28px 20px; border: 0; background: none; } .bndj-latest { padding: 0; } .bndj-latest-more { margin-top: 14px !important; } /* Single -------------------------------------------------------------- */ .bndj-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; font-size: 13.5px; color: var(--bndj-muted); } .bndj-crumbs span:last-child { color: var(--bndj-ink); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bndj-job-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: stretch; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--bndj-line); border-top: 5px solid var(--bndj-accent); box-shadow: 0 12px 34px rgba(15, 59, 97, .07); } .bndj-job-hero-main { display: flex; gap: 20px; align-items: flex-start; min-width: 0; } .bndj-job-hero-text { min-width: 0; display: flex; flex-direction: column; gap: 10px; } .bndj-wrap .bndj-job-title { font-size: clamp(24px, 3.2vw, 33px); font-weight: 700; color: var(--bndj-navy); line-height: 1.2; } .bndj-job-company { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15.5px; color: var(--bndj-muted); } .bndj-job-company span { display: inline-flex; align-items: center; gap: 7px; } .bndj-job-company span:first-child { color: var(--bndj-ink); font-weight: 600; } .bndj-job-hero-side { display: flex; flex-direction: column; gap: 12px; padding-left: 26px; border-left: 1px solid var(--bndj-line); justify-content: center; } .bndj-hero-salary small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--bndj-muted); font-weight: 600; } .bndj-hero-salary strong { display: block; font-size: 23px; font-weight: 700; color: var(--bndj-green); line-height: 1.25; margin-top: 2px; } .bndj-hero-salary span { display: block; font-size: 13px; color: var(--bndj-muted); } .bndj-hero-salary.is-empty strong { color: var(--bndj-ink); font-size: 19px; } .bndj-job-hero.is-candidate .bndj-hero-salary strong { color: var(--bndj-navy); } .bndj-hero-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bndj-hero-deadline { text-align: center; } .bndj-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 24px; align-items: start; } .bndj-single-main { display: grid; gap: 18px; min-width: 0; } .bndj-side-sticky { position: sticky; top: 20px; display: grid; gap: 16px; } .bndj-box { padding: 24px; border: 1px solid var(--bndj-line); border-radius: 16px; background: #fff; } .bndj-box > h2 { margin-bottom: 14px; } .bndj-box > h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--bndj-navy); } .bndj-prose { font-size: 15.5px; line-height: 1.7; } .bndj-prose p + p { margin-top: 12px; } .bndj-subhead { margin: 18px 0 10px !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .07em; color: var(--bndj-muted) !important; } .bndj-box > .bndj-subhead:first-of-type { margin-top: 0 !important; } .bndj-checklist { list-style: none !important; display: grid; gap: 9px; } .bndj-checklist li { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; } .bndj-checklist .bndj-icon { margin-top: 3px; color: #fff; background: var(--bndj-green); border-radius: 50%; padding: 2px; width: 19px; height: 19px; } .bndj-checklist.is-soft .bndj-icon { background: #EAF1F8; color: var(--bndj-navy); } .bndj-licenses { display: flex; flex-wrap: wrap; gap: 8px; } .bndj-license { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; background: #FFF8E6; color: #5C4300; font-size: 14px; font-weight: 500; border: 1px solid #F3E2B3; } .bndj-license .bndj-icon { color: var(--bndj-gold); } .bndj-extra { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px !important; font-size: 14.5px; color: var(--bndj-muted); } .bndj-extra span { display: inline-flex; align-items: center; gap: 7px; } .bndj-benefits { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .bndj-benefit { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bndj-soft); font-size: 14px; font-weight: 500; } .bndj-benefit span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 10px; background: #fff; color: var(--bndj-navy); flex: 0 0 auto; } .bndj-company-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; } .bndj-company-head h2 { font-size: 13px !important; text-transform: uppercase; letter-spacing: .08em; color: var(--bndj-muted) !important; margin-bottom: 2px !important; } .bndj-company-head strong { font-size: 17px; color: var(--bndj-navy); } .bndj-company .bndj-prose { font-size: 14.5px; margin-bottom: 10px; } .bndj-skills { display: flex; flex-wrap: wrap; gap: 8px; } .bndj-skills span { padding: 7px 12px; border-radius: 999px; background: #EAF1F8; color: var(--bndj-navy); font-size: 14px; font-weight: 500; } .bndj-doclinks { display: flex; flex-wrap: wrap; gap: 10px; } .bndj-apply { border: 2px solid color-mix(in srgb, var(--bndj-navy) 20%, #fff); scroll-margin-top: 20px; } .bndj-apply-head { margin-bottom: 18px; } .bndj-apply-head h2 { margin-bottom: 4px; } .bndj-closed { display: flex; gap: 14px; align-items: flex-start; color: var(--bndj-muted); } .bndj-closed .bndj-icon { color: var(--bndj-navy); margin-top: 2px; } .bndj-closed strong { display: block; color: var(--bndj-ink); font-size: 16px; } .bndj-closed p { margin: 4px 0 12px !important; } .bndj-facts dl { display: grid; gap: 0; } .bndj-facts dl > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid #EEF1F4; } .bndj-facts dl > div:first-child { border-top: 0; padding-top: 0; } .bndj-facts dt { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--bndj-muted); font-weight: 500; } .bndj-facts dd { margin: 0; padding-left: 23px; font-size: 14.5px; font-weight: 600; color: var(--bndj-ink); } .bndj-sharebtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .bndj-sharebtns a, .bndj-sharebtns button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 1px solid var(--bndj-line); border-radius: 9px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--bndj-navy); cursor: pointer; text-decoration: none; } .bndj-sharebtns a:hover, .bndj-sharebtns button:hover { border-color: var(--bndj-navy); } .bndj-safe { background: #F7FAFC; } .bndj-safe ul { list-style: none !important; display: grid; gap: 8px; margin-bottom: 12px !important; } .bndj-safe li { position: relative; padding-left: 16px; margin: 0; font-size: 13.5px; color: var(--bndj-muted); } .bndj-safe li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--bndj-navy); opacity: .5; } .bndj-report { color: var(--bndj-muted); font-size: 13px; } .bndj-related { margin-top: 36px; } .bndj-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .bndj-sticky-cta { display: none; } /* Forms --------------------------------------------------------------- */ .bndj-form { display: grid; gap: 14px; } .bndj-field-row { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; } .bndj-field-row > label, .bndj-field-row > legend, .bndj-label { font-size: 14px; font-weight: 600; color: var(--bndj-ink); padding: 0; margin: 0 0 2px; } .bndj-field-row > legend { margin-bottom: 8px; } .bndj-field-row b, .bndj-label b { color: var(--bndj-red); } .bndj-field-row small, .bndj-label small { font-weight: 400; color: var(--bndj-muted); font-size: 12.5px; } .bndj-wrap .bndj-form input[type="text"], .bndj-wrap .bndj-form input:not([type]), .bndj-wrap .bndj-form input[type="email"], .bndj-wrap .bndj-form input[type="tel"], .bndj-wrap .bndj-form input[type="url"], .bndj-wrap .bndj-form input[type="number"], .bndj-wrap .bndj-form input[type="date"], .bndj-wrap .bndj-form select, .bndj-wrap .bndj-form textarea, .bndj-wrap .bndj-copy input { width: 100%; min-height: 46px; padding: 10px 13px; margin: 0; border: 1px solid #CBD5DF; border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--bndj-ink); box-shadow: none; transition: border-color .15s, box-shadow .15s; } .bndj-wrap .bndj-form textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .bndj-wrap .bndj-form input:focus, .bndj-wrap .bndj-form select:focus, .bndj-wrap .bndj-form textarea:focus { outline: none; border-color: var(--bndj-navy); box-shadow: 0 0 0 3px rgba(15, 59, 97, .12); } .bndj-wrap .bndj-form input[readonly] { background: var(--bndj-soft); color: var(--bndj-muted); } .bndj-wrap .bndj-form .has-error input, .bndj-wrap .bndj-form .has-error select, .bndj-wrap .bndj-form .has-error textarea, .bndj-wrap .bndj-form input.has-error { border-color: var(--bndj-red); box-shadow: 0 0 0 3px rgba(200, 35, 43, .1); } .bndj-help { font-size: 12.5px; color: var(--bndj-muted); } .bndj-error { display: none; font-size: 13px; color: var(--bndj-red); font-weight: 500; } .bndj-error:not(:empty) { display: block; } .bndj-counter { justify-self: end; font-size: 12px; color: var(--bndj-muted); margin-top: -2px; } .bndj-counter.is-low { color: #9A6200; } .bndj-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .bndj-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .bndj-align-end { align-content: end; padding-bottom: 10px; } .bndj-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--bndj-muted); line-height: 1.5; cursor: pointer; } .bndj-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--bndj-navy); flex: 0 0 auto; } .bndj-check a { text-decoration: underline !important; } .bndj-check.has-error span { color: var(--bndj-red); } .bndj-check-sm { font-size: 12.5px; } .bndj-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px dashed #C3CFDB; border-radius: 14px; cursor: pointer; background: #FBFCFE; transition: border-color .15s, background .15s; } .bndj-drop:hover, .bndj-drop.is-over { border-color: var(--bndj-navy); background: #F3F7FB; } .bndj-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .bndj-drop-icon { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; background: #EAF1F8; color: var(--bndj-navy); flex: 0 0 auto; } .bndj-drop-text { display: grid; gap: 2px; color: var(--bndj-muted); font-size: 13px; min-width: 0; } .bndj-drop-text strong { color: var(--bndj-navy); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bndj-drop.has-file { border-style: solid; border-color: var(--bndj-green); background: #F3FBF7; } .bndj-drop.has-file .bndj-drop-icon { background: var(--bndj-green); color: #fff; } .bndj-drop.has-error, .has-error .bndj-drop { border-color: var(--bndj-red); } .bndj-drop-preview { display: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--bndj-line); flex: 0 0 auto; } .bndj-drop-preview img { width: 100%; height: 100%; object-fit: contain; } .bndj-drop.has-image .bndj-drop-preview { display: block; } .bndj-drop.has-image .bndj-drop-icon { display: none; } .bndj-submit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 6px; } .bndj-submit-bar small { display: inline-flex; align-items: center; gap: 6px; color: var(--bndj-muted); font-size: 13px; } .bndj-formmsg:empty { display: none; } .bndj-formmsg { padding: 12px 14px; border-radius: 10px; font-size: 14px; background: #EAF1F8; color: var(--bndj-navy); } .bndj-formmsg.is-error { background: #FDEEEF; color: var(--bndj-red-2); } .bndj-formmsg.is-ok { background: #E8F6EF; color: #14653F; } .bndj-form-done { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 14px; background: #E8F6EF; color: #14653F; } .bndj-form-done strong { display: block; font-size: 17px; margin-bottom: 4px; } /* Submit page --------------------------------------------------------- */ .bndj-submit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; margin-top: 24px; align-items: start; } .bndj-bigform { gap: 18px; } .bndj-fsec { display: grid; gap: 18px; padding: 26px; border: 1px solid var(--bndj-line); border-radius: 18px; background: #fff; scroll-margin-top: 20px; } .bndj-fsec-head { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 4px; } .bndj-fsec-head h2 { font-size: 19px; color: var(--bndj-navy); } .bndj-fsec-head p { margin-top: 2px !important; color: var(--bndj-muted); font-size: 14px; } .bndj-step-num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #EAF1F8; color: var(--bndj-navy); flex: 0 0 auto; } .bndj-fsec-head .bndj-step-num { width: 34px; height: 34px; font-size: 15px; background: var(--bndj-navy); color: #fff; } .bndj-pills { display: flex; flex-wrap: wrap; gap: 8px; } .bndj-pill-opt { position: relative; cursor: pointer; margin: 0; } .bndj-pill-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .bndj-pill-opt span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid #CBD5DF; background: #fff; font-size: 14px; font-weight: 500; transition: all .12s; } .bndj-pill-opt .bndj-dot { width: 9px; height: 9px; } .bndj-pill-opt:hover span { border-color: var(--bndj-navy); } .bndj-pill-opt input:checked + span { background: var(--bndj-navy); border-color: var(--bndj-navy); color: #fff; } .bndj-pill-opt input:checked + span .bndj-dot { box-shadow: 0 0 0 2px #fff; } .bndj-pill-opt input:focus-visible + span { outline: 3px solid rgba(15, 59, 97, .3); outline-offset: 2px; } .bndj-pill-opt input:disabled + span { opacity: .45; cursor: not-allowed; } .bndj-optcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .bndj-optcard { position: relative; cursor: pointer; margin: 0; } .bndj-optcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .bndj-optcard > span { display: grid; gap: 4px; height: 100%; padding: 14px; border-radius: 12px; border: 1px solid #CBD5DF; background: #fff; transition: all .12s; } .bndj-optcard > span .bndj-icon { color: var(--bndj-navy); margin-bottom: 4px; } .bndj-optcard strong { font-size: 14.5px; } .bndj-optcard small { font-size: 12.5px; color: var(--bndj-muted); line-height: 1.4; } .bndj-optcard:hover > span { border-color: var(--bndj-navy); } .bndj-optcard input:checked + span { border-color: var(--bndj-navy); background: #F2F7FC; box-shadow: inset 0 0 0 1px var(--bndj-navy); } .bndj-optcard input:focus-visible + span { outline: 3px solid rgba(15, 59, 97, .3); outline-offset: 2px; } .bndj-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } .bndj-checkcard { position: relative; cursor: pointer; margin: 0; } .bndj-checkcard input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .bndj-checkcard span { display: flex; align-items: center; gap: 10px; height: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #CBD5DF; background: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.35; transition: all .12s; } .bndj-checkcard span .bndj-icon { color: var(--bndj-muted); } .bndj-checkcard:hover span { border-color: var(--bndj-navy); } .bndj-checkcard input:checked + span { border-color: var(--bndj-navy); background: #F2F7FC; color: var(--bndj-navy); } .bndj-checkcard input:checked + span .bndj-icon { color: var(--bndj-navy); } .bndj-checkcard input:focus-visible + span { outline: 3px solid rgba(15, 59, 97, .3); outline-offset: 2px; } .bndj-salary-row { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr .8fr 1fr; gap: 10px; } .bndj-salary-row.is-candidate { grid-template-columns: 2fr 1fr 1fr; } .bndj-tip, .bndj-fairwarn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #EAF1F8; color: var(--bndj-navy); font-size: 13.5px; } .bndj-fairwarn { background: #FFF6E0; color: #7A4D00; border: 1px solid #F4DFA8; } .bndj-fairwarn strong { display: block; font-size: 14px; } .bndj-fairwarn p { margin-top: 2px !important; } .bndj-fairwarn mark { background: #FFE2A8; color: inherit; padding: 0 4px; border-radius: 4px; } .bndj-switches { display: grid; gap: 12px; } .bndj-consents { display: grid; gap: 10px; padding: 20px 22px; border-radius: 16px; background: var(--bndj-soft); } .bndj-steps ol { list-style: none !important; display: grid; gap: 2px; } .bndj-steps li { margin: 0; } .bndj-steps a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 14px; color: var(--bndj-ink); text-decoration: none; } .bndj-steps a:hover { background: var(--bndj-soft); } .bndj-steps a.is-active { color: var(--bndj-navy); font-weight: 600; background: #EEF4FA; } .bndj-steps a.is-done .bndj-step-num { background: var(--bndj-green); color: #fff; } .bndj-steps a.has-error .bndj-step-num { background: var(--bndj-red); color: #fff; } .bndj-progress { height: 6px; margin-top: 12px; border-radius: 999px; background: #EEF1F4; overflow: hidden; } .bndj-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--bndj-navy), var(--bndj-green)); border-radius: inherit; transition: width .3s; } .bndj-preview { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--bndj-line); border-left: 4px solid var(--bndj-accent); border-radius: 12px; } .bndj-preview .bndj-avatar { width: 48px; height: 48px; font-size: 16px; } .bndj-preview strong { display: block; font-size: 15px; line-height: 1.3; word-break: break-word; } .bndj-preview small { display: block; color: var(--bndj-muted); font-size: 12.5px; margin-top: 2px; } .bndj-pv-extra { color: var(--bndj-green) !important; font-weight: 600; } .bndj-tips ul { list-style: none !important; display: grid; gap: 9px; } .bndj-tips li { position: relative; padding-left: 18px; margin: 0; font-size: 13.5px; color: var(--bndj-muted); } .bndj-tips li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--bndj-red); } .bndj-success { max-width: 640px; margin: 28px auto 0; text-align: center; padding: 40px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--bndj-line); box-shadow: 0 12px 34px rgba(15, 59, 97, .08); } .bndj-success-icon { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; border-radius: 50%; background: #E8F6EF; color: var(--bndj-green); margin-bottom: 14px; } .bndj-success h2 { font-size: 24px; margin-bottom: 8px; color: var(--bndj-navy); } .bndj-success p { color: var(--bndj-muted); margin-bottom: 20px !important; } .bndj-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Choose -------------------------------------------------------------- */ .bndj-choose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 22px; } .bndj-choose-card { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 20px; border: 1px solid var(--bndj-line); background: #fff; color: var(--bndj-ink) !important; transition: border-color .15s, box-shadow .2s, transform .2s; } .bndj-choose-card:hover { border-color: var(--bndj-navy); box-shadow: 0 14px 34px rgba(15, 59, 97, .12); transform: translateY(-2px); color: var(--bndj-ink) !important; } .bndj-choose-icon { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; border-radius: 16px; background: #EAF1F8; color: var(--bndj-navy); margin-bottom: 10px; } .bndj-choose-card .bndj-eyebrow { margin: 0; } .bndj-choose-card > strong { font-size: 22px; color: var(--bndj-navy); line-height: 1.25; } .bndj-choose-card ul { list-style: none !important; display: grid; gap: 8px; margin: 12px 0 20px !important; } .bndj-choose-card li { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14.5px; color: var(--bndj-muted); } .bndj-choose-card li .bndj-icon { color: var(--bndj-green); margin-top: 3px; } .bndj-choose-card .bndj-btn { margin-top: auto; align-self: flex-start; } .bndj-choose-back { margin-top: 18px !important; } /* Panel --------------------------------------------------------------- */ .bndj-panel-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 28px 30px; border-radius: 20px; background: linear-gradient(135deg, #0F3B61, #0B2F4E); color: #fff; margin-bottom: 20px; border-bottom: 5px solid var(--bndj-accent); } .bndj-panel-hero .bndj-eyebrow { color: #FFB3B6; } .bndj-wrap .bndj-panel-hero h1 { color: #fff; font-size: clamp(22px, 3vw, 30px); font-weight: 700; } .bndj-panel-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px !important; color: #CFDDEA; font-size: 14px; } .bndj-panel-meta > span:not(.bndj-pill) { display: inline-flex; gap: 6px; align-items: center; } .bndj-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; } .bndj-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; } .bndj-kpi { padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--bndj-line); } .bndj-kpi span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bndj-muted); } .bndj-kpi strong { display: block; font-size: 30px; font-weight: 700; color: var(--bndj-navy); line-height: 1.15; margin-top: 6px; } .bndj-kpi small { color: var(--bndj-muted); font-size: 12px; } .bndj-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } .bndj-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .bndj-panel-head h2 { font-size: 18px; } .bndj-panel-side { display: grid; gap: 16px; } .bndj-panel-buttons { display: grid; gap: 8px; } .bndj-panel-side .bndj-formmsg { margin-top: 10px; } .bndj-table-wrap { overflow-x: auto; margin: 0 -24px -24px; } .bndj-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; } .bndj-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bndj-muted); font-weight: 600; padding: 10px 24px; background: var(--bndj-soft); border: 0; } .bndj-table td { padding: 13px 24px; border: 0; border-top: 1px solid #EEF1F4; vertical-align: top; } .bndj-table td small { display: block; color: var(--bndj-muted); font-size: 12.5px; margin-top: 2px; } .bndj-table tr.is-odbijena td { opacity: .55; } .bndj-table tr.is-nova td:first-child strong::after { content: "nova"; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: #FDEEEF; color: var(--bndj-red); font-size: 11px; font-weight: 600; vertical-align: 2px; } .bndj-table select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--bndj-line); border-radius: 8px; font-size: 13px; background: #fff; } .bndj-msg summary { cursor: pointer; font-size: 13px; color: var(--bndj-navy); font-weight: 600; margin-top: 4px; } .bndj-msg p { margin-top: 6px !important; padding: 10px 12px; border-radius: 8px; background: var(--bndj-soft); font-size: 13.5px; max-width: 520px; } .bndj-copy { display: flex; gap: 8px; } .bndj-wrap .bndj-copy input { min-height: 36px; font-size: 13px; background: var(--bndj-soft); padding: 6px 10px; } /* Dialog + toast ------------------------------------------------------ */ .bndj-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(11, 47, 78, .3); font-family: Poppins, "Segoe UI", Arial, sans-serif; color: var(--bndj-ink); } .bndj-dialog::backdrop { background: rgba(11, 47, 78, .5); } .bndj-dialog form { padding: 22px; } .bndj-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .bndj-dialog-head h3 { display: flex; align-items: center; gap: 8px; color: var(--bndj-navy); } .bndj-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 99999; padding: 10px 18px; border-radius: 999px; background: #0F3B61; color: #fff; font: 600 14px Poppins, Arial, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); animation: bndj-pop .2s ease-out; } @keyframes bndj-pop { from { opacity: 0; transform: translate(-50%, 10px); } } .bndj-drawer-backdrop { display: none; } /* Responsive ---------------------------------------------------------- */ @media (max-width: 1080px) { .bndj-single-layout, .bndj-submit-layout, .bndj-panel-grid { grid-template-columns: minmax(0, 1fr); } .bndj-side-sticky { position: static; } .bndj-submit-side { display: none; } .bndj-single-side .bndj-side-sticky { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .bndj-hero-inner { grid-template-columns: 1fr; } .bndj-hero-stats { grid-template-columns: repeat(4, 1fr); } .bndj-card { grid-template-columns: 52px minmax(0, 1fr) 170px; } .bndj-avatar { width: 52px; height: 52px; font-size: 17px; } } @media (max-width: 900px) { .bndj-layout { grid-template-columns: minmax(0, 1fr); } .bndj-filter-toggle { display: inline-flex !important; } .bndj-sidebar { position: fixed; z-index: 100000; top: 0; bottom: 0; left: 0; width: min(360px, 88vw); max-height: none; padding: 16px 18px 90px; background: #fff; box-shadow: 8px 0 40px rgba(0, 0, 0, .2); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); transition: transform .25s ease; } .bndj-sidebar.is-open { transform: none; } .bndj-sidebar-close { display: inline-flex !important; margin-left: auto; } .bndj-sidebar-foot { display: block !important; position: fixed; bottom: 0; left: 0; width: min(360px, 88vw); padding: 12px 18px; background: #fff; border-top: 1px solid var(--bndj-line); } .bndj-drawer-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 99999; background: rgba(11, 47, 78, .45); } .bndj-job-hero { grid-template-columns: 1fr; padding: 22px; } .bndj-job-hero-side { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--bndj-line); } .bndj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bndj-trust { grid-template-columns: 1fr; } .bndj-sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: #fff; border-top: 1px solid var(--bndj-line); box-shadow: 0 -6px 20px rgba(15, 59, 97, .1); transform: translateY(110%); transition: transform .25s; } .bndj-sticky-cta.is-visible { transform: none; } .bndj-sticky-cta > div { min-width: 0; } .bndj-sticky-cta strong { display: block; font-size: 14px; color: var(--bndj-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bndj-sticky-cta small { color: var(--bndj-muted); font-size: 12.5px; } .bndj-salary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bndj-salary-row > :last-child { grid-column: 1 / -1; } .bndj-salary-row.is-candidate { grid-template-columns: 1fr 1fr; } .bndj-salary-row.is-candidate > :first-child { grid-column: 1 / -1; } } @media (max-width: 720px) { .bndj-wrap { padding: 16px 16px 72px; font-size: 14.5px; } .bndj-hero { padding: 26px 20px; border-radius: 16px; } .bndj-hero-stats { grid-template-columns: repeat(2, 1fr); } .bndj-hero-stats div { padding: 12px 14px; } .bndj-hero-stats dt { font-size: 24px; } .bndj-hero-actions .bndj-btn { width: 100%; } .bndj-tab { padding: 10px 6px 12px; font-size: 14.5px; flex: 1; justify-content: center; white-space: nowrap; gap: 6px; } .bndj-tab .bndj-icon { display: none; } .bndj-toolbar { flex-wrap: wrap; } .bndj-search { flex: 1 1 100%; } .bndj-sort { flex: 1; } .bndj-sort select { width: 100%; } .bndj-hide-sm { display: none; } .bndj-card { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 14px; } .bndj-avatar { width: 46px; height: 46px; font-size: 15px; border-radius: 12px; } .bndj-card-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: 10px; border-top: 1px solid #EEF1F4; flex-wrap: wrap; } .bndj-save { margin: 0; } .bndj-wrap .bndj-card-title { font-size: 16px; } .bndj-job-hero-main { flex-direction: column; gap: 14px; } .bndj-avatar-lg { width: 64px; height: 64px; font-size: 21px; } .bndj-box, .bndj-fsec { padding: 18px; } .bndj-table-wrap { margin: 0 -18px -18px; } .bndj-table th, .bndj-table td { padding-left: 14px; padding-right: 14px; } .bndj-grid-2, .bndj-grid-3, .bndj-choose-grid { grid-template-columns: minmax(0, 1fr); } .bndj-checkgrid { grid-template-columns: minmax(0, 1fr); } .bndj-panel-hero { padding: 22px 20px; } .bndj-panel-actions { width: 100%; } .bndj-panel-actions .bndj-btn { flex: 1; } .bndj-crumbs span:last-child { max-width: 180px; } .bndj-submit-bar .bndj-btn { width: 100%; } .bndj-choose-card { padding: 22px; } } @media (prefers-reduced-motion: reduce) { .bndj-wrap *, .bndj-toast { transition: none !important; animation: none !important; } } /* Theme hardening ------------------------------------------------------ Teme (Hello Elementor, Astra, Twenty*) stilizuju