/* ========================================================================== Kariera – supermerchant.base.com (Betheme Child) Wszystkie reguły zaczynają się od .sm-kariera (klasa ) lub .sm-k-*. Plik ładowany po CSS Betheme. Font: dziedziczony (Open Sans z motywu). Siatka odstępów: 8 px. Mobile-first; progi: 640 / 768 / 1024 / 1240 px. ========================================================================== */ .sm-kariera { --sm-text: #161922; --sm-text-2: #404955; /* dłuższe listy – kontrast AA na białym i szarym */ --sm-body: #69737E; --sm-body-soft: #5F6975; /* tekst na jasnoszarym pasie (#F6F7F9) z zapasem kontrastu */ --sm-muted: #8A94A0; /* wyłącznie ikony i elementy dekoracyjne */ --sm-border: #E6E9EE; --sm-soft: #F6F7F9; --sm-dark: #292D33; --sm-primary: #0077DA; --sm-primary-hover: #0063B8; --sm-primary-soft: #E8F2FC; --sm-link: #0063B8; /* niebieski tekst na białym/szarym – kontrast ≥ 4.5:1 */ --sm-radius: 16px; --sm-radius-sm: 12px; --sm-radius-pill: 40px; --sm-shadow: 0 8px 24px rgba(22, 25, 34, .06); --sm-shadow-hover: 0 16px 40px rgba(22, 25, 34, .10); --sm-ease: .2s ease; --sm-header: 100px; /* przyklejony nagłówek strony ma ~70 px */ } /* -------------------------------------------------------------------------- Pasy (sekcje) i kontener -------------------------------------------------------------------------- */ .sm-kariera .sm-k-band { position: relative; padding: 48px 0; background: #fff; color: var(--sm-body); } .sm-kariera .sm-k-band--soft { background: var(--sm-soft); --sm-body: var(--sm-body-soft); } .sm-kariera .sm-k-band--dark { background: var(--sm-dark); color: #fff; } /* Betheme (be.css): .section_wrapper jest flex-wrap + height:100% – w naszych pasach potrzebujemy bloku oraz stałych marginesów bocznych (motyw zeruje padding między 768 a 1440 px). */ .sm-kariera .sm-k-band > .section_wrapper { display: block; height: auto; box-sizing: border-box; } /* Betheme nie ustawia border-box globalnie – nasze komponenty go zakładają. */ .sm-kariera .sm-k-band .section_wrapper *, .sm-kariera .sm-k-band .section_wrapper *::before, .sm-kariera .sm-k-band .section_wrapper *::after, .sm-kariera .sm-k-bar * { box-sizing: border-box; } .sm-kariera .sm-k-anchor { scroll-margin-top: var(--sm-header); } .sm-kariera .sm-k-band .sm-icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; } /* Widoczny fokus dla klawiatury. Bez własnego border-radius – obrys podąża za kształtem elementu (pigułki zostają pigułkami). */ .sm-kariera .sm-k-band a:focus-visible, .sm-kariera .sm-k-band button:focus-visible, .sm-kariera .sm-k-bar a:focus-visible { outline: 3px solid var(--sm-primary); outline-offset: 3px; } .sm-kariera .sm-k-band--dark a:focus-visible, .sm-kariera .sm-k-band--dark button:focus-visible { outline-color: #fff; } /* Tekst tylko dla czytników ekranu. */ .sm-kariera .sm-k-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } @media (min-width: 768px) { .sm-kariera .sm-k-band { padding: 64px 0; } .sm-kariera .sm-k-band > .section_wrapper { max-width: 1284px; padding-left: 32px; padding-right: 32px; } } @media (min-width: 1024px) { .sm-kariera .sm-k-band { padding: 80px 0; } } /* -------------------------------------------------------------------------- Typografia -------------------------------------------------------------------------- */ .sm-kariera .sm-k-h2 { margin: 0; color: var(--sm-text); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.6px; text-wrap: balance; } .sm-kariera .sm-k-h3 { margin: 0; color: var(--sm-text); font-size: 20px; line-height: 28px; font-weight: 600; } .sm-kariera .sm-k-lead { margin: 12px 0 0; color: var(--sm-body); font-size: 16px; line-height: 28px; text-wrap: pretty; } .sm-kariera .sm-k-head { max-width: 720px; margin: 0 0 32px; } .sm-kariera .sm-k-head--center { margin-left: auto; margin-right: auto; text-align: center; } .sm-kariera .sm-k-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; max-width: none; margin-bottom: 32px; } @media (min-width: 1024px) { .sm-kariera .sm-k-h2 { font-size: 36px; line-height: 44px; letter-spacing: -1px; } .sm-kariera .sm-k-head { margin-bottom: 40px; } } /* -------------------------------------------------------------------------- Przyciski, linki, kafelki ikon, „Kopiuj” -------------------------------------------------------------------------- */ .sm-kariera .sm-k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border: 1px solid var(--sm-primary); border-radius: var(--sm-radius-pill); background: var(--sm-primary); color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--sm-ease), border-color var(--sm-ease), color var(--sm-ease), box-shadow var(--sm-ease); } .sm-kariera .sm-k-btn:hover, .sm-kariera .sm-k-btn:focus-visible { background: var(--sm-primary-hover); border-color: var(--sm-primary-hover); color: #fff; text-decoration: none; } .sm-kariera .sm-k-btn .sm-icon { width: 18px; height: 18px; } .sm-kariera .sm-k-btn--ghost { background: transparent; border-color: var(--sm-border); color: var(--sm-text); } .sm-kariera .sm-k-band--soft .sm-k-btn--ghost { background: #fff; } .sm-kariera .sm-k-btn--ghost:hover, .sm-kariera .sm-k-btn--ghost:focus-visible { background: #fff; border-color: var(--sm-primary); color: var(--sm-primary-hover); } .sm-kariera .sm-k-btn--lg { min-height: 52px; padding: 15px 28px; font-size: 15px; } .sm-kariera .sm-k-btn--block { width: 100%; } .sm-kariera .sm-k-link { display: inline-flex; align-items: center; gap: 6px; color: var(--sm-link); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; } .sm-kariera .sm-k-link:hover { color: var(--sm-primary-hover); text-decoration: underline; text-underline-offset: 3px; } .sm-kariera .sm-k-link .sm-icon { width: 16px; height: 16px; transition: transform var(--sm-ease); } .sm-kariera .sm-k-link:hover .sm-icon--arrow-right { transform: translateX(3px); } .sm-kariera .sm-k-link:hover .sm-icon--arrow-left { transform: translateX(-3px); } .sm-kariera .sm-k-link__muted { color: var(--sm-body); font-weight: 400; } .sm-kariera .sm-k-tile { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--sm-radius-sm); background: var(--sm-primary-soft); color: var(--sm-primary); } .sm-kariera .sm-k-tile .sm-icon { width: 24px; height: 24px; } .sm-kariera .sm-k-tile--sm { width: 40px; height: 40px; border-radius: 10px; } .sm-kariera .sm-k-tile--sm .sm-icon { width: 20px; height: 20px; } .sm-kariera .sm-k-tile--lg { width: 64px; height: 64px; border-radius: var(--sm-radius); } .sm-kariera .sm-k-tile--lg .sm-icon { width: 28px; height: 28px; } /* Przycisk „Kopiuj” – nadpisuje domyślne style przycisków Betheme. */ .sm-kariera .sm-k-copy { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 5px 12px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-pill); background: #fff; box-shadow: none; color: var(--sm-text-2); font: inherit; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; transition: border-color var(--sm-ease), color var(--sm-ease), background-color var(--sm-ease); } .sm-kariera .sm-k-copy:hover { background: #fff; border-color: var(--sm-primary); color: var(--sm-primary-hover); } .sm-kariera .sm-k-copy.is-copied { background: var(--sm-primary-soft); border-color: var(--sm-primary-soft); color: var(--sm-link); } .sm-kariera .sm-k-copy .sm-icon { width: 14px; height: 14px; } .sm-kariera .sm-k-copy[hidden] { display: none; } /* -------------------------------------------------------------------------- Hero (lista ofert / dział) -------------------------------------------------------------------------- */ .sm-kariera .sm-k-hero { padding: 40px 0 48px; overflow: hidden; background: #fff radial-gradient(52% 78% at 88% 18%, var(--sm-primary-soft) 0%, rgba(232, 242, 252, 0) 72%) no-repeat; } .sm-kariera .sm-k-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } .sm-kariera .sm-k-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 14px; border-radius: var(--sm-radius-pill); background: var(--sm-primary-soft); color: var(--sm-link); font-size: 13px; line-height: 20px; font-weight: 600; } .sm-kariera .sm-k-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sm-primary); } .sm-kariera .sm-k-hero__title { max-width: 680px; margin: 0; color: var(--sm-text); font-size: clamp(32px, 2.2vw + 16px, 52px); line-height: 1.15; font-weight: 600; letter-spacing: -1px; text-wrap: balance; overflow-wrap: break-word; } .sm-kariera .sm-k-hero__lead { max-width: 600px; margin: 20px 0 0; color: var(--sm-body); font-size: 16px; line-height: 28px; text-wrap: pretty; } .sm-kariera .sm-k-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .sm-kariera .sm-k-facts { list-style: none; margin: 0; padding: 4px 20px; background: #fff; border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); } .sm-kariera .sm-k-facts li { display: flex; align-items: center; gap: 16px; padding: 16px 0; } .sm-kariera .sm-k-facts li + li { border-top: 1px solid var(--sm-border); } .sm-kariera .sm-k-facts__text { min-width: 0; } .sm-kariera .sm-k-facts__label { display: block; color: var(--sm-text); font-size: 15px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; } .sm-kariera .sm-k-facts__hint { display: block; color: var(--sm-body); font-size: 13px; line-height: 20px; } @media (max-width: 479px) { .sm-kariera .sm-k-hero__actions .sm-k-btn { flex: 1 1 auto; } } @media (min-width: 768px) { .sm-kariera .sm-k-hero { padding: 56px 0 64px; } .sm-kariera .sm-k-hero__lead { font-size: 17px; line-height: 29px; } .sm-kariera .sm-k-hero__actions { margin-top: 32px; } .sm-kariera .sm-k-facts { padding: 8px 32px; } .sm-kariera .sm-k-facts li { padding: 20px 0; } } @media (min-width: 1024px) { .sm-kariera .sm-k-hero { padding: 72px 0 80px; } .sm-kariera .sm-k-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; } } /* -------------------------------------------------------------------------- Lista ofert: nagłówek, filtry, siatka kart -------------------------------------------------------------------------- */ .sm-kariera .sm-k-jobs__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; } .sm-kariera .sm-k-count { margin: 0; color: var(--sm-body); font-size: 15px; line-height: 24px; } .sm-kariera .sm-k-jobs__more { margin: 32px 0 0; } /* Filtr działów – na telefonie jeden przewijany wiersz, od 768 px zawijane chipy. */ .sm-kariera .sm-k-filters-nav { margin: 0 -15px 24px; padding: 0 15px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); } .sm-kariera .sm-k-filters-nav::-webkit-scrollbar { display: none; } .sm-kariera .sm-k-filters { list-style: none; display: flex; flex-wrap: nowrap; gap: 8px; width: max-content; margin: 0; padding: 0 20px 4px 0; } .sm-kariera .sm-k-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-pill); background: #fff; color: var(--sm-text); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: border-color var(--sm-ease), color var(--sm-ease), background-color var(--sm-ease); } .sm-kariera .sm-k-chip:hover { border-color: var(--sm-primary); color: var(--sm-primary-hover); text-decoration: none; } .sm-kariera .sm-k-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--sm-soft); color: var(--sm-text-2); font-size: 12px; line-height: 1; font-weight: 600; } .sm-kariera .sm-k-chip[aria-current="page"] { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; } /* Licznik w aktywnym chipie: biały krążek z ciemnym tekstem (kontrast 6,6:1; półprzezroczyste tło dawało 3,3:1). */ .sm-kariera .sm-k-chip[aria-current="page"] .sm-k-chip__count { background: #fff; color: var(--sm-primary-hover); } @media (min-width: 768px) { .sm-kariera .sm-k-filters-nav { margin: 0 0 32px; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; } .sm-kariera .sm-k-filters { flex-wrap: wrap; width: auto; padding: 0; } } /* Siatka kart – 1 kolumna, od 768 px 2 (lub 3 dla „Inne oferty”); mniej kart niż kolumn = bez pustych miejsc. */ .sm-kariera .sm-k-grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; } .sm-kariera .sm-k-grid__item { min-width: 0; } @media (min-width: 768px) { .sm-kariera .sm-k-grid { gap: 24px; } .sm-kariera .sm-k-grid--cols-2, .sm-kariera .sm-k-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm-kariera .sm-k-grid--count-1 { grid-template-columns: minmax(0, 1fr); max-width: 620px; } } @media (min-width: 1024px) { .sm-kariera .sm-k-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm-kariera .sm-k-grid--cols-3.sm-k-grid--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; } .sm-kariera .sm-k-grid--count-1 { max-width: 620px; } } /* Karta oferty */ .sm-kariera .sm-k-job { position: relative; display: flex; flex-direction: column; height: 100%; padding: 24px; background: #fff; border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); transition: transform var(--sm-ease), box-shadow var(--sm-ease); } .sm-kariera .sm-k-job:hover, .sm-kariera .sm-k-job:focus-within { transform: translateY(-3px); box-shadow: var(--sm-shadow-hover); } .sm-kariera .sm-k-job__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 20px; } /* min-height 24px: minimalny rozmiar celu dotykowego (WCAG 2.5.8) bez zmiany wyglądu. */ .sm-kariera .sm-k-job__dept { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 24px; margin: -2px 0; color: var(--sm-link); font-size: 13px; line-height: 20px; font-weight: 600; text-decoration: none; } .sm-kariera a.sm-k-job__dept:hover { text-decoration: underline; text-underline-offset: 3px; } .sm-kariera .sm-k-job__date { margin-left: auto; color: var(--sm-body); font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-job__title { margin: 12px 0 8px; font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -.2px; overflow-wrap: break-word; text-wrap: balance; } .sm-kariera .sm-k-job__title a { color: var(--sm-text); text-decoration: none; } .sm-kariera .sm-k-job__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--sm-radius); } /* cała karta klikalna */ .sm-kariera .sm-k-job:hover .sm-k-job__title a, .sm-kariera .sm-k-job__title a:hover { color: var(--sm-primary-hover); text-decoration: none; } .sm-kariera .sm-k-job__title a:focus-visible { outline: none; } .sm-kariera .sm-k-job:focus-within { outline: 3px solid var(--sm-primary); outline-offset: 3px; } /* Fokus na linku działu ma własny obrys – karta nie rysuje wtedy drugiego (przeglądarki bez :has() pokazują oba). */ .sm-kariera .sm-k-job:has(.sm-k-job__dept:focus-visible) { outline: none; transform: none; box-shadow: var(--sm-shadow); } .sm-kariera .sm-k-job__excerpt { display: -webkit-box; margin: 0 0 20px; color: var(--sm-body); font-size: 15px; line-height: 24px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sm-kariera .sm-k-job .sm-k-meta { margin-bottom: 20px; } .sm-kariera .sm-k-job__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sm-border); } .sm-kariera .sm-k-job__more { color: var(--sm-link); font-size: 14px; line-height: 20px; font-weight: 600; transition: color var(--sm-ease); } .sm-kariera .sm-k-job:hover .sm-k-job__more { color: var(--sm-primary-hover); } /* Strzałka w kółku – wypełnia się na hover (czytelna afordancja kliknięcia). */ .sm-kariera .sm-k-arrow { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--sm-border); border-radius: 50%; background: #fff; color: var(--sm-text); transition: background-color var(--sm-ease), border-color var(--sm-ease), color var(--sm-ease), transform var(--sm-ease); } .sm-kariera .sm-k-arrow .sm-icon { width: 18px; height: 18px; } .sm-kariera .sm-k-job:hover .sm-k-arrow, .sm-kariera .sm-k-job:focus-within .sm-k-arrow { background: var(--sm-primary); border-color: var(--sm-primary); color: #fff; transform: translateX(4px); } @media (min-width: 768px) { .sm-kariera .sm-k-job { padding: 32px; } .sm-kariera .sm-k-job__title { font-size: 20px; line-height: 28px; } .sm-kariera .sm-k-job__foot { padding-top: 20px; } .sm-kariera .sm-k-grid--cols-3 .sm-k-job { padding: 28px; } .sm-kariera .sm-k-grid--cols-3 .sm-k-job__title { font-size: 18px; line-height: 26px; } .sm-kariera .sm-k-grid--cols-3 .sm-k-job__excerpt { -webkit-line-clamp: 2; font-size: 14px; line-height: 22px; } } /* Chipy meta (lokalizacja, tryb pracy, umowa, godziny, wynagrodzenie) */ .sm-kariera .sm-k-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .sm-kariera .sm-k-meta__item { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--sm-soft); color: var(--sm-text-2); font-size: 13px; line-height: 20px; font-weight: 500; } .sm-kariera .sm-k-meta .sm-icon { width: 16px; height: 16px; color: var(--sm-primary); } .sm-kariera .sm-k-meta__item--salary { background: var(--sm-primary-soft); color: var(--sm-link); font-weight: 600; } .sm-kariera .sm-k-meta--lg .sm-k-meta__item { padding: 8px 14px; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-pill); background: #fff; font-size: 14px; } .sm-kariera .sm-k-meta--lg .sm-k-meta__item--salary { border-color: var(--sm-primary-soft); background: var(--sm-primary-soft); } .sm-kariera .sm-k-meta--lg .sm-icon { width: 18px; height: 18px; } /* Stan pusty */ .sm-kariera .sm-k-empty { max-width: 600px; margin: 0 auto; padding: 32px 20px; background: #fff; border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); text-align: center; } .sm-kariera .sm-k-empty .sm-k-tile { margin-bottom: 20px; } .sm-kariera .sm-k-empty__title { margin-bottom: 8px; } .sm-kariera .sm-k-empty__text { margin: 0 0 24px; color: var(--sm-body); font-size: 16px; line-height: 28px; } .sm-kariera .sm-k-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .sm-kariera .sm-k-empty__mail { margin: 16px 0 0; color: var(--sm-body); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } .sm-kariera .sm-k-empty__mail a { color: var(--sm-link); font-weight: 600; text-decoration: none; } .sm-kariera .sm-k-empty__mail a:hover { text-decoration: underline; } @media (min-width: 768px) { .sm-kariera .sm-k-empty { padding: 48px 32px; } } /* -------------------------------------------------------------------------- Dlaczego warto – kafelki -------------------------------------------------------------------------- */ .sm-kariera .sm-k-benefits { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 0; padding: 0; } .sm-kariera .sm-k-benefit { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .sm-kariera .sm-k-benefit__title { margin: 20px 0 8px; color: var(--sm-text); font-size: 16px; line-height: 24px; font-weight: 600; } .sm-kariera .sm-k-benefit__desc { margin: 0; color: var(--sm-body); font-size: 14px; line-height: 22px; text-wrap: pretty; } @media (min-width: 640px) { .sm-kariera .sm-k-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; } } @media (min-width: 1024px) { .sm-kariera .sm-k-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; } } /* -------------------------------------------------------------------------- Jak aplikować – kroki + klauzula -------------------------------------------------------------------------- */ .sm-kariera .sm-k-steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; } .sm-kariera .sm-k-step { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; height: 100%; padding: 24px; background: #fff; border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); } .sm-kariera .sm-k-step__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sm-primary); color: #fff; font-size: 14px; line-height: 1; font-weight: 700; } .sm-kariera .sm-k-step__title { margin: 20px 0 8px; color: var(--sm-text); font-size: 18px; line-height: 26px; font-weight: 600; } .sm-kariera .sm-k-step__text { margin: 0; color: var(--sm-body); font-size: 15px; line-height: 24px; text-wrap: pretty; } .sm-kariera .sm-k-step__text a { color: var(--sm-link); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .sm-kariera .sm-k-step__text a:hover { text-decoration: underline; } .sm-kariera .sm-k-step__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; } .sm-kariera .sm-k-clause { margin: 12px 0 0; padding: 14px 16px; border-left: 2px solid var(--sm-primary); border-radius: 0 var(--sm-radius-sm) var(--sm-radius-sm) 0; background: var(--sm-soft); color: var(--sm-text-2); font-size: 14px; line-height: 22px; } .sm-kariera .sm-k-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--sm-body); font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-note .sm-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--sm-muted); } /* Odstęp od kafelków z krokami. Reguła musi stać po .sm-k-note – skrót „margin: 0” ma tę samą specyficzność i przy odwrotnej kolejności kasowałby ten margines. */ .sm-kariera .sm-k-how__note { margin-top: 28px; } @media (min-width: 768px) { .sm-kariera .sm-k-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .sm-kariera .sm-k-step { padding: 32px; } } /* -------------------------------------------------------------------------- Ciemny pas CTA -------------------------------------------------------------------------- */ .sm-kariera .sm-k-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; } .sm-kariera .sm-k-cta__copy { min-width: 0; } .sm-kariera .sm-k-cta__title { margin: 0 0 8px; color: #fff; font-size: 26px; line-height: 34px; font-weight: 600; letter-spacing: -.6px; text-wrap: balance; } .sm-kariera .sm-k-cta__text { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 28px; } .sm-kariera .sm-k-cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; } .sm-kariera .sm-k-cta__actions .sm-k-btn { width: 100%; } .sm-kariera .sm-k-cta__mail { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; } .sm-kariera .sm-k-cta__mail a { color: #fff; font-weight: 600; text-decoration: none; } .sm-kariera .sm-k-cta__mail a:hover { text-decoration: underline; } /* Klauzula RODO dla spontanicznego CV (ciemny pas CTA i stan pusty). */ .sm-kariera .sm-k-rodo-inline { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } .sm-kariera .sm-k-rodo-inline__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: inherit; } .sm-kariera .sm-k-rodo-inline__title .sm-icon { width: 14px; height: 14px; } .sm-kariera .sm-k-rodo-inline__text { max-width: 760px; margin: 0 0 10px; font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-cta__rodo { color: rgba(255, 255, 255, .78); } .sm-kariera .sm-k-cta__rodo .sm-k-rodo-inline__title { color: #fff; } .sm-kariera .sm-k-cta__rodo .sm-k-copy { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; } .sm-kariera .sm-k-cta__rodo .sm-k-copy:hover { border-color: #fff; background: transparent; color: #fff; } .sm-kariera .sm-k-cta__rodo .sm-k-copy.is-copied { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); color: #fff; } .sm-kariera .sm-k-empty__rodo { border-top-color: var(--sm-border); text-align: left; color: var(--sm-body); } .sm-kariera .sm-k-empty__rodo .sm-k-rodo-inline__title { color: var(--sm-text); } .sm-kariera .sm-k-empty__rodo .sm-k-rodo-inline__title .sm-icon { color: var(--sm-primary); } @media (min-width: 768px) { .sm-kariera .sm-k-cta__actions { width: auto; } .sm-kariera .sm-k-cta__actions .sm-k-btn { width: auto; } } @media (min-width: 1024px) { .sm-kariera .sm-k-cta__title { font-size: 32px; line-height: 40px; letter-spacing: -.8px; } } /* -------------------------------------------------------------------------- Ogłoszenie – nagłówek -------------------------------------------------------------------------- */ .sm-kariera .sm-k-shead { padding: 24px 0 40px; } .sm-kariera .sm-k-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 24px; padding: 0; color: var(--sm-body); font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .sm-kariera .sm-k-crumbs a { color: var(--sm-body); text-decoration: none; } .sm-kariera .sm-k-crumbs a:hover { color: var(--sm-primary-hover); text-decoration: underline; } .sm-kariera .sm-k-crumbs .sm-icon { width: 14px; height: 14px; color: var(--sm-muted); } .sm-kariera .sm-k-crumbs li.sm-k-crumbs__current { display: none; } /* na telefonie tytuł jest tuż niżej */ .sm-kariera .sm-k-crumbs__current [aria-current="page"] { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sm-text); font-weight: 600; } /* Oferta po dacie „Rekrutacja do”. */ .sm-kariera .sm-k-expired { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid #F3D9A4; border-radius: var(--sm-radius-sm); background: #FFF7E6; color: #6B4E0A; } .sm-kariera .sm-k-expired .sm-icon { width: 18px; height: 18px; margin-top: 1px; color: #B7791F; } .sm-kariera .sm-k-expired__text { margin: 0; font-size: 14px; line-height: 22px; font-weight: 600; } .sm-kariera .sm-k-expired__text a { color: var(--sm-link); text-decoration: underline; text-underline-offset: 3px; } .sm-kariera .sm-k-apply--closed { background: var(--sm-soft); box-shadow: none; } .sm-kariera .sm-k-apply--closed .sm-k-apply__lead { margin-bottom: 16px; } .sm-kariera .sm-k-shead__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .sm-kariera .sm-k-shead__main { min-width: 0; } .sm-kariera .sm-k-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; color: var(--sm-body); font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-eyebrow__dept { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--sm-radius-pill); background: var(--sm-primary-soft); color: var(--sm-link); font-weight: 600; text-decoration: none; } .sm-kariera a.sm-k-eyebrow__dept:hover { text-decoration: underline; text-underline-offset: 3px; } .sm-kariera .sm-k-eyebrow__dept .sm-icon { width: 14px; height: 14px; } .sm-kariera .sm-k-shead__title { max-width: 860px; margin: 0 0 20px; color: var(--sm-text); font-size: clamp(28px, 1.6vw + 14px, 44px); line-height: 1.2; font-weight: 600; letter-spacing: -.8px; text-wrap: balance; overflow-wrap: break-word; } .sm-kariera .sm-k-shead .sm-k-meta { margin: 0; } .sm-kariera .sm-k-shead__actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 479px) { .sm-kariera .sm-k-shead__actions .sm-k-btn { flex: 1 1 auto; } } @media (min-width: 768px) { .sm-kariera .sm-k-shead { padding: 32px 0 48px; } .sm-kariera .sm-k-crumbs ol { margin-bottom: 32px; } .sm-kariera .sm-k-crumbs li.sm-k-crumbs__current { display: inline-flex; } } @media (min-width: 1024px) { .sm-kariera .sm-k-shead__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 48px; } } /* -------------------------------------------------------------------------- Ogłoszenie – treść + karta „Aplikuj” -------------------------------------------------------------------------- */ .sm-kariera .sm-k-sbody { padding: 40px 0 48px; } .sm-kariera .sm-k-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; } .sm-kariera .sm-k-main { max-width: 760px; min-width: 0; } .sm-kariera .sm-k-intro__title { margin: 0 0 16px; color: var(--sm-text); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -.3px; } .sm-kariera .sm-k-prose p, .sm-kariera .sm-k-prose ul, .sm-kariera .sm-k-prose ol { margin: 0 0 16px; color: var(--sm-body); font-size: 16px; line-height: 28px; text-wrap: pretty; } .sm-kariera .sm-k-prose > :last-child { margin-bottom: 0; } .sm-kariera .sm-k-prose a { color: var(--sm-link); text-decoration: underline; text-underline-offset: 3px; } .sm-kariera .sm-k-prose strong { color: var(--sm-text); font-weight: 600; } .sm-kariera .sm-k-prose ul, .sm-kariera .sm-k-prose ol { padding-left: 22px; } .sm-kariera .sm-k-prose ul { list-style: disc; } .sm-kariera .sm-k-prose ol { list-style: decimal; } .sm-kariera .sm-k-block { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--sm-border); } .sm-kariera .sm-k-block__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .sm-kariera .sm-k-block__title { margin: 0; color: var(--sm-text); font-size: 20px; line-height: 28px; font-weight: 600; } .sm-kariera .sm-k-list { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; } .sm-kariera .sm-k-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--sm-text-2); font-size: 15px; line-height: 24px; text-wrap: pretty; } .sm-kariera .sm-k-list__ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--sm-primary-soft); color: var(--sm-primary); } .sm-kariera .sm-k-list__ico .sm-icon { width: 14px; height: 14px; stroke-width: 2.5; } .sm-kariera .sm-k-block--offer .sm-k-list__ico { background: var(--sm-primary); color: #fff; } .sm-kariera .sm-k-block--nice .sm-k-list__ico { background: var(--sm-soft); color: var(--sm-text-2); } /* „Brzmi dobrze?” – zakończenie treści */ .sm-kariera .sm-k-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px; margin-top: 40px; padding: 24px; background: var(--sm-soft); border-radius: var(--sm-radius); } .sm-kariera .sm-k-foot__copy { min-width: 0; } .sm-kariera .sm-k-foot__title { margin: 0 0 4px; color: var(--sm-text); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.3px; } .sm-kariera .sm-k-foot__text { margin: 0; color: var(--sm-body-soft); font-size: 15px; line-height: 24px; } .sm-kariera .sm-k-foot__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } /* Karta „Aplikuj” */ .sm-kariera .sm-k-side { min-width: 0; } .sm-kariera .sm-k-apply { padding: 24px; background: #fff; border: 1px solid var(--sm-border); border-radius: var(--sm-radius); box-shadow: var(--sm-shadow); } .sm-kariera .sm-k-apply__title { margin: 0 0 8px; color: var(--sm-text); font-size: 20px; line-height: 28px; font-weight: 600; } .sm-kariera .sm-k-apply__lead { margin: 0 0 16px; color: var(--sm-body); font-size: 14px; line-height: 22px; } .sm-kariera .sm-k-apply__rows { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; } .sm-kariera .sm-k-apply__row { display: grid; gap: 2px; padding: 10px 12px; background: var(--sm-soft); border-radius: var(--sm-radius-sm); } .sm-kariera .sm-k-apply__row dt { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin: 0; color: var(--sm-body-soft); font-size: 12px; line-height: 16px; font-weight: 600; } .sm-kariera .sm-k-apply__row .sm-k-copy { min-height: 26px; padding: 2px 10px; font-size: 12px; line-height: 18px; } .sm-kariera .sm-k-apply__row dd { margin: 0; color: var(--sm-text); font-size: 14px; line-height: 22px; font-weight: 600; } .sm-kariera .sm-k-apply__value { display: block; min-width: 0; overflow-wrap: break-word; } .sm-kariera .sm-k-apply__row dd a { color: var(--sm-link); text-decoration: none; } .sm-kariera .sm-k-apply__row dd a:hover { text-decoration: underline; } .sm-kariera .sm-k-apply .sm-k-btn--block { margin-bottom: 8px; } .sm-kariera .sm-k-apply__hint { margin: 0 0 14px; color: var(--sm-body); font-size: 13px; line-height: 20px; text-align: center; } .sm-kariera .sm-k-apply__note { margin: 14px 0 0; } .sm-kariera .sm-k-apply__rodo { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sm-border); } .sm-kariera .sm-k-apply__rodo-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--sm-text); font-size: 13px; line-height: 20px; font-weight: 600; } .sm-kariera .sm-k-apply__rodo-title .sm-icon { width: 16px; height: 16px; color: var(--sm-primary); } .sm-kariera .sm-k-apply__rodo-text { margin: 0 0 10px; color: var(--sm-body); font-size: 13px; line-height: 19px; } /* Wyraźny odstęp między przyciskiem „Kopiuj klauzulę” a informacją o kontakcie z kandydatami. */ .sm-kariera .sm-k-apply__rodo + .sm-k-apply__note { margin-top: 20px; } .sm-kariera .sm-k-details { display: grid; gap: 6px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--sm-border); } .sm-kariera .sm-k-details div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; } .sm-kariera .sm-k-details dt { margin: 0; color: var(--sm-body); } .sm-kariera .sm-k-details dd { margin: 0; color: var(--sm-text); font-weight: 600; text-align: right; } .sm-kariera .sm-k-details dd a { color: var(--sm-link); text-decoration: none; } .sm-kariera .sm-k-details dd a:hover { text-decoration: underline; } @media (min-width: 768px) { .sm-kariera .sm-k-sbody { padding: 56px 0 64px; } .sm-kariera .sm-k-intro__title { font-size: 24px; line-height: 32px; } .sm-kariera .sm-k-block { margin-top: 40px; padding-top: 40px; } .sm-kariera .sm-k-block__head { margin-bottom: 24px; } .sm-kariera .sm-k-list li { font-size: 16px; line-height: 26px; } .sm-kariera .sm-k-foot { margin-top: 48px; padding: 28px 32px; } .sm-kariera .sm-k-apply { padding: 28px; } } @media (min-width: 1024px) { .sm-kariera .sm-k-sbody { padding: 64px 0 80px; } .sm-kariera .sm-k-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; } /* Przyklejona karta – bez własnego paska przewijania (mieści się w całości). */ .sm-kariera .sm-k-side { position: sticky; top: var(--sm-header); align-self: start; } } /* Na niskich ekranach karta nie zmieściłaby się obok treści – wtedy jej nie przyklejamy, dzięki czemu przewija się razem ze stroną i nic nie jest ucięte ani podwójnie scrollowane. */ @media (min-width: 1024px) and (max-height: 820px) { .sm-kariera .sm-k-side { position: static; } } @media (min-width: 1240px) { .sm-kariera .sm-k-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; } } /* -------------------------------------------------------------------------- Mobilny pasek „Aplikuj” (pokazywany przez JS; ukryty ≥ 1024 px) -------------------------------------------------------------------------- */ .sm-kariera .sm-k-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sm-border); background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 -8px 24px rgba(22, 25, 34, .06); transition: transform .3s ease, opacity .3s ease, visibility 0s; } .sm-kariera .sm-k-bar[hidden] { display: none; } /* visibility:hidden (po animacji) wyjmuje link z kolejności tabulacji, gdy pasek jest schowany. */ .sm-kariera .sm-k-bar.is-hidden { transform: translateY(110%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .3s ease, visibility 0s .3s; } .sm-kariera .sm-k-bar__title { flex: 1 1 auto; min-width: 0; color: var(--sm-text); font-size: 13px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm-kariera .sm-k-bar__btn { flex: 0 0 auto; min-height: 40px; padding: 8px 20px; } /* Pasek nie zasłania ostatnich linii treści. !important: Betheme ustawia `.no-content-padding #Content{padding:0!important}`. */ .sm-kariera.sm-k-has-bar #Content { padding-bottom: 72px !important; } @media (min-width: 1024px) { .sm-kariera .sm-k-bar { display: none; } .sm-kariera.sm-k-has-bar #Content { padding-bottom: 0 !important; } } /* -------------------------------------------------------------------------- Ograniczony ruch -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sm-kariera .sm-k-btn, .sm-kariera .sm-k-chip, .sm-kariera .sm-k-copy, .sm-kariera .sm-k-job, .sm-kariera .sm-k-arrow, .sm-kariera .sm-k-bar, .sm-kariera .sm-k-link .sm-icon { transition: none; } .sm-kariera .sm-k-job:hover, .sm-kariera .sm-k-job:focus-within, .sm-kariera .sm-k-job:hover .sm-k-arrow, .sm-kariera .sm-k-job:focus-within .sm-k-arrow, .sm-kariera .sm-k-link:hover .sm-icon--arrow-right, .sm-kariera .sm-k-link:hover .sm-icon--arrow-left { transform: none; } }