:root { --primary: #C11850; --primary-strong: #A81445; --primary-soft: #F5E0E7; --rose-surface: #EFE4E8; --info-surface: #E2F0F3; --info-text: #24515B; --focus-ring: rgba(193, 24, 80, 0.34); --dark-grey: #4D4D4F; --secondary-grey: #798289; --text-primary: #4D4D4F; --text-secondary: #5C6470; --accent: var(--primary); --dark: #4D4D4F; --light-grey: #f5f5f7; --lighter-grey: #DBD5CA; --lightest-grey: #E6E7E8; --border: #d2d2d7; --palette-grey: #BCBEC0; --white: #ffffff; --radius: 18px; } * { margin: 0; padding: 0; box-sizing: border-box; } @media (hover: none) and (pointer: coarse) { html { -webkit-tap-highlight-color: transparent; } } .sec-anchor { display: block; height: 0; overflow: hidden; } html, body { width: 100%; overflow-x: hidden; font-family: 'Inter', sans-serif; background: var(--white); color: var(--dark); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .nav-fixed-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .nav-fixed-wrapper.hidden { transform: translateY(-100%); } body { padding-top: 70px; } @media (max-width: 768px) { body { padding-top: 70px; } } .site-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.08); width: 100%; height: 70px; display: flex; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .site-header .container { width: 100%; } .navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; } .navbar-brand { display: flex; align-items: center; text-decoration: none; } .navbar-logo { height: 40px; width: auto; object-fit: contain; } @media (max-width: 768px) { .navbar-logo { height: 24px; margin-right: 8px; } } .navbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-btn { height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1.5px solid var(--border); cursor: pointer; text-decoration: none; font-family: inherit; transition: 0.2s; flex-shrink: 0; font-size: 13px; font-weight: 700; } .nav-icon-btn { width: 38px; background: var(--light-grey); color: var(--dark); } .nav-icon-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--white); } .nav-btn:focus-visible, .lang-dropbtn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } .btn-post-job { background: var(--white); color: var(--primary); border-color: var(--primary); padding: 0 15px; } .btn-post-job:hover { background: var(--primary); color: var(--white); } .btn-signin { background: var(--primary); color: var(--white); border: none; padding: 0 18px; } .btn-signin:hover { background: var(--primary-strong); } .lang-dropdown { position: relative; display: inline-block; } .lang-dropbtn { width: 45px; height: 38px; background: var(--light-grey); border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .flag-icon { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0,0,0,0.1); } .lang-dropdown-content { display: none; position: absolute; right: 0; background-color: var(--white); min-width: 60px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); z-index: 1; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; } .lang-dropdown-content a { color: var(--dark); padding: 10px; text-decoration: none; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .lang-dropdown-content a:hover { background-color: var(--light-grey); } .lang-dropdown:hover .lang-dropdown-content { display: block; } .lang-dropdown:hover .lang-dropbtn { border-color: var(--primary); } .navlink { color: #414142; text-decoration: none; font-weight: 500; font-size: 14px; transition: color 0.2s; } .navlink:hover, .navlink:focus-visible { color: var(--primary); } .hamburger-btn { display: none; } .mobile-drawer { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background: var(--white); z-index: 2000; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: 0.3s; padding: 30px 20px; } .mobile-drawer.open { right: 0; } .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1999; display: none; } .drawer-overlay.open { display: block; } .drawer-close { position: absolute; top: 8px; left: 8px; width: 44px; height: 44px; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; color: var(--dark); border-radius: 8px; } .drawer-close:hover { background: var(--light-grey); } .drawer-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .mobile-drawer { position: fixed; padding-top: 56px; } body.drawer-lock { overflow: hidden; touch-action: none; overscroll-behavior: none; } body.drawer-lock .mobile-drawer { touch-action: pan-y; overflow-y: auto; -webkit-overflow-scrolling: touch; } .drawer-overlay { touch-action: none; } .drawer-links a { display: block; padding: 15px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--dark); font-weight: 700; font-size: 16px; } .drawer-links a:hover { color: var(--primary); } .drawer-identity { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .drawer-identity-name { display: block; font-size: 15.5px; font-weight: 700; color: var(--dark); line-height: 1.3; overflow-wrap: break-word; } .drawer-identity-role { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); background: rgba(216, 27, 89, 0.08); padding: 3px 8px; border-radius: 5px; } .drawer-cta { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 14px 0 6px; background: var(--primary); color: var(--white); border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15px; transition: background 0.2s; } .drawer-cta::before { content: '+'; margin-right: 8px; font-size: 19px; font-weight: 400; line-height: 1; } .drawer-cta:hover, .drawer-cta:focus-visible { background: #b5154a; color: var(--white); } .drawer-contact { display: block; flex: 0 0 auto; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--border); text-align: center; text-decoration: none; color: #86868b; font-size: 13.5px; font-weight: 600; } .drawer-contact:hover, .drawer-contact:focus-visible { color: var(--primary); } .announcement-bar { background: #e8e8e8; color: var(--dark); padding: 12px 20px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--border); line-height: 1.4; } .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__viewport { width: 100%; overflow: hidden; text-align: center; outline-offset: 3px; } .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__loop { display: inline-flex; align-items: baseline; max-width: none; white-space: nowrap; transform: translateX(0); will-change: transform; } .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__track { display: block; flex: 0 0 auto; max-width: none; white-space: nowrap; } .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__track + .announcement-bar__track { margin-left: var(--announcement-gap, 48px); } .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__track > .home-text[style*="--ht-ta"] { display: inline; text-align: inherit; } .announcement-bar--autoscroll[data-announcement-overflow="1"] .announcement-bar__viewport { text-align: left; } .announcement-bar--autoscroll[data-announcement-overflow="1"] .announcement-bar__loop { animation: announcement-autoscroll var(--announcement-duration, 16s) linear infinite; } .announcement-bar--autoscroll[data-announcement-overflow="1"]:hover .announcement-bar__loop, .announcement-bar--autoscroll[data-announcement-overflow="1"]:focus-within .announcement-bar__loop { animation-play-state: paused; } .announcement-bar--autoscroll[data-announcement-overflow="1"] .announcement-bar__viewport:focus-visible { outline: 2px solid currentColor; } @keyframes announcement-autoscroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--announcement-cycle, 0px))); } } @media (max-width: 640px) { .announcement-bar--autoscroll[data-announcement-ready="1"] .announcement-bar__track { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } } @media (prefers-reduced-motion: reduce) { .announcement-bar--autoscroll[data-announcement-overflow="1"] .announcement-bar__loop { animation: none; transform: none; } } .hero-image-wrap { width: 100%; background: #eee; position: relative; overflow: hidden; } .hero-image-wrap::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--hif-ov-d, transparent); } .hero-img { width: 100%; height: auto; display: block; object-position: var(--hif-pos-d, center center); } .hero-img-desktop { display: block; } .hero-img-mobile { display: none; } .hero-image-wrap[style*="--hif-pos-d"] .hero-img-desktop { height: clamp(280px, 42vw, 580px); object-fit: cover; } .hero-copy { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: var(--white); text-align: center; pointer-events: none; } .hero-copy-title { margin: 0 0 10px; color: inherit; font-size: clamp(1.75rem, 4vw, 3.25rem); line-height: 1.12; text-shadow: 0 2px 16px rgba(0,0,0,.52); } .hero-copy-subtitle { max-width: 760px; margin: 0; color: inherit; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.5; text-shadow: 0 1px 10px rgba(0,0,0,.5); } .search-container { padding: 50px 20px; background: #fafafa; text-align: center; } .search-title { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: var(--dark); } .search-subtitle { font-size: 14px; color: #666; margin-bottom: 30px; } .search-bar { background: var(--white); border: 1px solid var(--border); border-radius: 15px; padding: 15px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; max-width: 1000px; margin: 0 auto; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .search-bar input, .search-bar select { padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--light-grey); font-size: 14px; outline: none; font-family: inherit; color: var(--dark); } .search-bar input::placeholder { color: #999; } .search-bar select { cursor: pointer; } .btn-search { background: var(--primary); color: var(--white); border: none; padding: 0 25px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; } .btn-search:hover { background: #b5154a; } .section-padding { padding: 100px 0; } .section-header { text-align: center; margin-bottom: 60px; } .section-title { font-size: 40px; font-weight: 700; letter-spacing: -1px; margin-bottom: 10px; color: var(--dark); line-height: 1.1; } .section-subtitle { font-size: 19px; color: #86868b; font-weight: 400; line-height: 1.3; } .categories-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 15px; } .cat-card { background-image: var(--cat-bg-d); position: relative; height: 220px; border-radius: 20px; overflow: hidden; text-decoration: none; display: flex; align-items: flex-end; justify-content: center; padding: 25px 10px; text-align: center; background-color: #e2e2e4; background-size: cover; background-position: var(--cat-bg-pos-d, center center); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .cat-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--cat-overlay-base, linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%)); z-index: 1; transition: 0.3s; } .cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .cat-card:hover::after { background: var(--cat-overlay-hover, linear-gradient(to top, rgba(217, 27, 90, 0.8) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%)); } .cat-info { position: relative; z-index: 2; color: var(--white); width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; left: 0; } .cat-name { font-weight: 700; font-size: 12px; display: block; margin-bottom: 4px; letter-spacing: -0.4px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); line-height: 1.1; text-align: center; width: 100%; } .cat-count { font-size: 12px; color: #d2d2d7; font-weight: 500; display: block; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .job-card { background: var(--white); border: 1px solid rgba(0,0,0,0.05); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; text-decoration: none; color: var(--dark); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; box-shadow: 0 4px 6px rgba(0,0,0,0.02); min-height: 480px; } .job-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,0.12); border-color: transparent; } .job-logo { width: 86px; height: 86px; border-radius: 22px; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 38px; margin-bottom: 25px; border: 2px solid #bcbec0; overflow: hidden; color: var(--white); flex-shrink: 0; } .job-logo img { width: 100%; height: 100%; object-fit: cover; } .job-logo i { font-size: 34px; color: var(--dark) !important; } .job-company-top { font-size: 15px; color: #1d1d1f; font-weight: 700; margin-bottom: 10px; display: block; } .job-title { font-size: 22px; font-weight: 700; margin-bottom: 0px; display: block; letter-spacing: -0.5px; color: #1d1d1f; } .job-category-label { font-size: 16px; color: #8FA1B5; font-weight: 600; margin-bottom: 16px; display: block; margin-top: -2px; } .job-short-desc { font-size: 14px; line-height: 1.6; color: #6e6e73; font-weight: 400; margin: 0 0 18px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 67px; } .job-meta-column { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #86868b; font-weight: 500; flex: 1; } .job-meta-item { display: flex; align-items: center; gap: 12px; } .job-meta-item i { width: 20px; text-align: center; color: #86868b; font-size: 15px; } .job-action-area { margin-top: 25px; border-top: 1px solid #f0f0f2; padding-top: 20px; } .job-apply-prompt { font-size: 14px; color: #1d1d1f; line-height: 1.6; font-weight: 500; } .job-apply-links { color: var(--primary); text-decoration: underline; font-weight: 700; } .job-date-bottom { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #86868b; font-weight: 500; } .job-date-bottom i { font-size: 14px; color: #86868b; } .job-badge { position: absolute; top: 25px; right: 25px; background: #fff5f8; color: var(--primary); font-size: 10px; font-weight: 800; padding: 6px 14px; border-radius: 30px; text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid #ffe0ea; } .job-badge-urgent { background: #fff4e5; color: #b25e00; border-color: #ffe0b8; } .home-jobs-empty { text-align: center; padding: 60px 20px; color: #86868b; } .home-jobs-empty .hje-icon { font-size: 44px; color: #c7c7cc; margin-bottom: 16px; } .home-jobs-empty p { font-size: 17px; font-weight: 500; margin: 0; } .btn-view-all { display: inline-block; margin-top: 50px; padding: 16px 40px; background: #e8e8ed; color: var(--dark); border-radius: 30px; font-weight: 600; text-decoration: none; transition: 0.3s; font-size: 16px; } .btn-view-all:hover { background: var(--primary); color: var(--white); transform: scale(1.05); } .hiring-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; } .company-card { background: transparent; padding: 10px; text-align: center; text-decoration: none; color: var(--dark); transition: 0.4s; } .company-card:hover { transform: scale(1.08); } .company-logo-wrap { width: 120px; height: 120px; border-radius: 26px; background: var(--white); margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; font-size: 48px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.03); transition: 0.4s; overflow: hidden; } .company-logo-wrap img { width: 100%; height: 100%; object-fit: cover; padding: 0; } .company-logo-img { width: 100%; height: 100%; object-fit: cover; padding: 0; } .company-card:hover .company-logo-wrap { box-shadow: 0 20px 40px rgba(0,0,0,0.1); border-color: var(--primary); } .company-name { font-weight: 600; font-size: 15px; display: block; color: var(--dark); } .company-jobs { display: block; font-size: 12px; color: var(--secondary-grey); font-weight: 500; margin-top: 4px; } .company-logo-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 42px; font-weight: 700; color: var(--primary); background: var(--light-grey); line-height: 1; } .home-stats-wrap { background: var(--white); padding: 38px 0 34px; border-bottom: 1px solid var(--border); } .home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .hstat { text-align: center; padding: 0 10px; position: relative; } .hstat + .hstat::before { content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: var(--border); } .hstat-num { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--dark); line-height: 1.1; } .hstat-num-word { font-size: 34px; color: var(--primary); } .hstat-label { display: block; font-size: 13px; color: var(--secondary-grey); font-weight: 500; margin-top: 6px; } .hiw-radio { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hiw-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--light-grey); border-radius: 999px; margin: 0 auto 40px; display: flex; width: fit-content; } .hiw-tab { padding: 10px 26px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--secondary-grey); cursor: pointer; transition: 0.3s; user-select: none; white-space: nowrap; } .hiw-tab:hover { color: var(--dark); } #hiwCand:checked ~ .hiw-tabs .hiw-tab-cand, #hiwEmp:checked ~ .hiw-tabs .hiw-tab-emp { background: var(--white); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .hiw-radio:focus-visible ~ .hiw-tabs .hiw-tab-cand, .hiw-radio:focus-visible ~ .hiw-tabs .hiw-tab-emp { outline: 2px solid var(--primary); outline-offset: 2px; } .hiw-panel { display: none; } #hiwCand:checked ~ .hiw-panel-cand, #hiwEmp:checked ~ .hiw-panel-emp { display: block; } .hiw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; list-style: none; counter-reset: none; padding: 0; margin: 0; } .hiw-step { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 26px 26px; transition: 0.4s; } .hiw-step:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.07); border-color: var(--primary); } .hiw-num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 19px; font-weight: 700; margin-bottom: 18px; } .hiw-step-title { font-size: 19px; font-weight: 700; color: var(--dark); margin-bottom: 10px; } .hiw-step-text { font-size: 15px; color: var(--secondary-grey); line-height: 1.65; margin-bottom: 16px; } .hiw-step-link { font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; } .hiw-step-link:hover { text-decoration: underline; } .hiw-section .container { text-align: center; } .hiw-section .hiw-step { text-align: left; } .newsletter-section { padding: 70px 0; background: var(--light-grey); } .newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1000px; margin: 0 auto; } .newsletter-text { min-width: 0; } .newsletter-form-wrap { min-width: 0; } .newsletter-form { display: block; width: 100%; } .newsletter-title { font-size: 26px; font-weight: 700; color: var(--dark); margin-bottom: 10px; letter-spacing: -0.01em; } .newsletter-sub { font-size: 15px; color: var(--secondary-grey); line-height: 1.65; margin: 0; } .newsletter-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .newsletter-row { display: flex; gap: 10px; margin-bottom: 14px; } .newsletter-input { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; background: var(--white); color: var(--dark); } .newsletter-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(216, 27, 89, 0.12); } .newsletter-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; background: var(--primary); color: var(--white); border: none; border-radius: 10px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; transition: background 0.2s; white-space: nowrap; } .newsletter-btn:hover, .newsletter-btn:focus-visible { background: #b5154a; color: var(--white); } .newsletter-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--secondary-grey); line-height: 1.5; cursor: pointer; margin-bottom: 10px; } .newsletter-consent input { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; cursor: pointer; } .newsletter-note { font-size: 12px; color: var(--secondary-grey); opacity: 0.85; margin: 0; } .seo-section { overflow-x: clip; } .seo-split { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: start; } .seo-split-noimg { display: block; } .seo-split-noimg .seo-content { max-width: 820px; margin: 0 auto; } .seo-media { position: sticky; top: 90px; } .seo-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 20px; background: var(--hif-ov-d, transparent); } .seo-img { display: block; width: 100%; object-position: var(--hif-pos-d, center center); height: auto; border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .seo-content { max-width: 820px; } .seo-title { font-size: 28px; font-weight: 700; color: var(--dark); margin-bottom: 20px; letter-spacing: -0.01em; } .seo-content p { font-size: 15px; color: var(--secondary-grey); line-height: 1.8; margin-bottom: 16px; } .seo-content p:last-child { margin-bottom: 0; } @media (max-width: 1100px) { .seo-split { gap: 32px; } .seo-img { aspect-ratio: 1 / 1; } } @media (max-width: 900px) { .seo-split { grid-template-columns: 1fr; gap: 28px; } .seo-media { position: relative; top: auto; } .seo-media::after { border-radius: 16px; background: var(--hif-ov-m, var(--hif-ov-d, transparent)); } .seo-img { aspect-ratio: 16 / 10; border-radius: 16px; object-position: var(--hif-pos-m, var(--hif-pos-d, center center)); } } .employer-cta { position: relative; background-color: #f5f5f7; background-size: cover; background-position: var(--hif-pos-d, var(--hbg-pos, center center)); color: var(--white); border-radius: 40px; padding: 120px 40px; text-align: center; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .employer-cta::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--hif-ov-d, var(--ec-ov-bg, rgba(0,0,0,0.35))); pointer-events: none; z-index: 1; } .employer-cta > * { position: relative; z-index: 2; } .employer-cta h2 { font-size: 38px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; text-shadow: 0 2px 15px rgba(0,0,0,0.4); } .employer-cta p { font-size: 19px; color: #ffffff; margin-bottom: 40px; max-width: 700px; margin-left: auto; margin-right: auto; text-shadow: 0 1px 8px rgba(0,0,0,0.4); line-height: 1.5; } .btn-cta-white { display: inline-block; padding: 16px 40px; background: var(--white); color: var(--dark); border-radius: 30px; font-weight: 600; text-decoration: none; transition: 0.3s; font-size: 16px; } .btn-cta-white:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255,255,255,0.1); } .home-action-row { display: flex; align-items: center; justify-content: center; } .home-action-row-right { justify-content: flex-end; } .home-action-row[style*="--hba-x"] { justify-content: var(--hba-x); } .home-action-row[style*="--hba-y"] { min-height: 78px; align-items: var(--hba-y); } .candidate-actions[style*="--hba-x"] { justify-content: var(--hba-x); } .candidate-actions[style*="--hba-y"] { min-height: 78px; align-items: var(--hba-y); } .home-action-row[style*="--hba-bg"] .btn-cta-white, .candidate-actions[style*="--hba-bg"] .btn-candidate-primary { background: var(--hba-bg); } .home-action-row[style*="--hba-col"] .btn-cta-white, .candidate-actions[style*="--hba-col"] .btn-candidate-primary { color: var(--hba-col); } .employer-cta-clear { background-image: var(--hb-bg-d); } .employer-cta-clear::before { display: none; } .employer-cta-clear[style*="--hb-ov-bg"]::before { display: block; background: var(--hb-ov-bg); pointer-events: none; } .employer-cta-clear[style*="--hif-ov-d"]::before { display: block; background: var(--hif-ov-d); pointer-events: none; } .employer-cta:not(.employer-cta-clear) { background-image: var(--ec-bg-d); } .employer-cta-clear h2 { text-shadow: 0 2px 18px rgba(0,0,0,0.75), 0 0 4px rgba(0,0,0,0.5); } .employer-cta-clear p { text-shadow: 0 1px 12px rgba(0,0,0,0.75), 0 0 4px rgba(0,0,0,0.5); } .emp-cta-right { text-align: right; } .emp-cta-right h2, .emp-cta-right p { margin-left: auto; margin-right: 0; max-width: 60%; } @media (max-width: 900px) { .hero-banner { min-height: 380px; } .employer-cta-clear { background-image: var(--hb-bg-m, var(--hb-bg-d)); } .employer-cta:not(.employer-cta-clear) { background-image: var(--ec-bg-m, var(--ec-bg-d)); } .employer-cta { background-position: var(--hif-pos-m, var(--hif-pos-d, var(--hbg-pos, center center))); } .employer-cta::before { background: var(--hif-ov-m, var(--hif-ov-d, var(--ec-ov-bg, rgba(0,0,0,0.35)))); } .employer-cta-clear[style*="--hif-ov-m"]::before { display: block; background: var(--hif-ov-m); } .hero-banner-content { max-width: 100%; text-align: center; } .hero-banner-content h2 { font-size: 28px; } .hero-banner-content p { font-size: 17px; max-width: 100%; } .hero-banner-right { text-align: center; margin-left: auto; margin-right: auto; } .hero-banner-right p { margin-left: auto; margin-right: auto; } .emp-cta-right { text-align: center; } .emp-cta-right h2, .emp-cta-right p { max-width: 100%; margin-left: auto; margin-right: auto; } .home-action-row-right { justify-content: center; } .home-action-row[style*="--hba-y"], .candidate-actions[style*="--hba-y"] { min-height: 64px; } } .emp-cta-eyebrow { display: block; font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; margin-bottom: 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); } .hero-banner-wrap { width: 100%; position: relative; overflow: hidden; margin: 0; } .hero-banner { width: 100%; min-height: 480px; background-size: cover; background-position: var(--hif-pos-d, var(--hbg-pos, center center)); background-repeat: no-repeat; display: flex; align-items: center; position: relative; background-image: var(--hb-bg-d); background-color: #1d1d1f; } .hero-banner[style*="--hb-ov-bg"]::before, .hero-banner[style*="--hif-ov-d"]::before, .hero-banner[style*="--hif-ov-m"]::before { content: ''; position: absolute; inset: 0; background: var(--hif-ov-d, var(--hb-ov-bg)); pointer-events: none; z-index: 1; } .hero-banner .container { position: relative; z-index: 2; width: 100%; } .hero-banner-content { max-width: 650px; color: var(--white); text-align: left; } .hero-banner-content h2 { font-size: 44px; font-weight: 800; margin-bottom: 20px; letter-spacing: -1.5px; line-height: 1.1; text-shadow: 0 2px 15px rgba(0,0,0,0.55); } .hero-banner-content p { font-size: 19px; margin-bottom: 35px; line-height: 1.5; opacity: 0.95; text-shadow: 0 1px 10px rgba(0,0,0,0.55); max-width: 550px; } .hero-banner-right { margin-left: auto; margin-right: 0; text-align: right; } .hero-banner-right p { margin-left: auto; margin-right: 0; } @media (max-width: 900px) { .hero-banner { background-image: var(--hb-bg-m, var(--hb-bg-d)); background-position: var(--hif-pos-m, var(--hif-pos-d, var(--hbg-pos, center center))); } .hero-banner[style*="--hif-ov-m"]::before { background: var(--hif-ov-m); } .hero-banner-right { margin-left: auto; margin-right: auto; text-align: center; } .hero-banner-right p { margin-left: auto; margin-right: auto; } } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .blog-card { background: var(--white); border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--dark); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(0,0,0,0.05); } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,0.12); } .blog-media { position: relative; height: 220px; overflow: hidden; } .blog-media picture { display: block; width: 100%; height: 100%; } .blog-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--hif-ov-d, transparent); } .blog-img { width: 100%; height: 100%; display: block; background: #eee; object-fit: cover; object-position: var(--hif-pos-d, center center); } .blog-content { padding: 25px; } .blog-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; line-height: 1.4; } .blog-link { color: var(--primary); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 5px; } .candidate-banner-wrap { width: 100%; position: relative; overflow: hidden; margin: 0; } .candidate-banner { width: 100%; min-height: 480px; background-size: cover; background-position: var(--hif-pos-d, var(--hbg-pos, center center)); display: flex; align-items: center; position: relative; background-image: var(--cand-bg-d, url('../../images/jobtimist_homepage_candidate_signup_0001.jpg')); } .candidate-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--hif-ov-d, var(--cand-ov-bg, transparent)); pointer-events: none; z-index: 1; } .candidate-banner .container { position: relative; z-index: 2; width: 100%; } .candidate-content { max-width: 650px; color: var(--white); text-align: left; } .candidate-content h2 { font-size: 44px; font-weight: 800; margin-bottom: 20px; letter-spacing: -1.5px; line-height: 1.1; text-shadow: 0 2px 15px rgba(0,0,0,0.4); } .candidate-content p { font-size: 19px; margin-bottom: 35px; line-height: 1.5; opacity: 0.95; text-shadow: 0 1px 8px rgba(0,0,0,0.4); max-width: 550px; } .candidate-actions { display: flex; align-items: center; gap: 25px; } .btn-candidate-primary { display: inline-block; padding: 16px 35px; background: var(--white); color: var(--primary); border-radius: 30px; font-weight: 700; text-decoration: none; transition: 0.3s; font-size: 16px; } .btn-candidate-primary:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255,255,255,0.2); } .link-candidate-secondary { color: var(--white); text-decoration: none; font-weight: 700; font-size: 16px; transition: 0.2s; border-bottom: 2px solid transparent; } .link-candidate-secondary:hover { border-bottom-color: var(--white); } .app-showcase { background: var(--light-grey); border-radius: 30px; padding: 60px; display: flex; align-items: center; gap: 60px; margin: 40px 0; overflow: hidden; } .app-text { flex: 1; } .app-text h2 { font-size: 36px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; line-height: 1.1; } .app-text p { font-size: 18px; color: #86868b; margin-bottom: 30px; } .app-mockup { flex: 1; position: relative; } .phone-mockup { width: 260px; height: 530px; background: #fff; border: 12px solid #1d1d1f; border-radius: 45px; margin: 0 auto; box-shadow: 0 50px 100px rgba(0,0,0,0.1); position: relative; overflow: hidden; display: block; } .phone-screen { width: 100%; height: 100%; background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .phone-screen picture { display: block; width: 100%; height: 100%; } .phone-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--hif-ov-d, transparent); } .phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hif-pos-d, center center); } .app-showcase { position: relative; } .coming-soon-tag { position: absolute; top: 30px; left: 30px; background: var(--primary); color: white; padding: 6px 15px; border-radius: 20px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 10px rgba(216, 27, 89, 0.3); z-index: 10; } .store-badges { display: flex; gap: 15px; } .store-badge { height: 44px; width: 140px; background: #000; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: 600; border: 1px solid #333; } .navbar-center { display: flex; gap: 30px; margin: 0 auto; min-width: 0; flex-wrap: nowrap; } .navbar-center > a { white-space: nowrap; } @media (min-width: 769px) and (max-width: 1024px) { .navbar-center { gap: 18px; } .navbar-center > a { font-size: 13px; } .navbar-actions { gap: 6px; } .btn-post-job span { display: none; } .btn-post-job::before { content: '+'; font-size: 20px; line-height: 1; } .btn-post-job { width: 38px; padding: 0; } .btn-signin { padding: 0 12px; } } @media (min-width: 769px) and (max-width: 880px) { .navbar-center { gap: 14px; } .navbar-center > a { font-size: 12px; } .btn-signin { width: 38px; padding: 0; } .btn-signin span { display: none; } .btn-signin svg { width: 20px; height: 20px; fill: #ffffff; display: block !important; margin: auto; } } @media (max-width: 768px) { .navbar-center { display: none !important; } .search-title { line-height: 1.1; font-size: 32px; } .categories-grid { grid-template-columns: repeat(2, 1fr); } .cat-card { height: 180px; } .cat-card { background-image: var(--cat-bg-m, var(--cat-bg-d)); background-position: var(--cat-bg-pos-m, var(--cat-bg-pos-d, center center)); } .navbar-brand { font-size: 18px; } .btn-post-job span { display: none; } .btn-post-job::before { content: '+'; font-size: 20px; } .btn-post-job { width: 38px; padding: 0; } .btn-signin { width: 38px; padding: 0; display: flex; background: var(--primary); border: none; color: #ffffff !important; } .btn-signin span { display: none; } .btn-signin svg { width: 20px; height: 20px; fill: #ffffff; display: block !important; margin: auto; } .hamburger-btn { display: flex; width: 38px; height: 38px; background: var(--light-grey); border: 1.5px solid var(--border); border-radius: 8px; align-items: center; justify-content: center; cursor: pointer; } .hamburger-btn svg { width: 20px; height: 20px; fill: var(--dark); } .navbar-actions { gap: 5px; } .hero-img-desktop { display: none !important; } .hero-img-mobile { display: block !important; object-position: var(--hif-pos-m, var(--hif-pos-d, center center)); } .hero-image-wrap[style*="--hif-pos-m"] .hero-img-mobile { height: clamp(300px, 82vw, 620px); object-fit: cover; } .hero-image-wrap::after { background: var(--hif-ov-m, var(--hif-ov-d, transparent)); } .blog-media::after, .phone-screen::after { background: var(--hif-ov-m, var(--hif-ov-d, transparent)); } .blog-img, .phone-screen img { object-position: var(--hif-pos-m, var(--hif-pos-d, center center)); } .hero-copy { padding: 18px 20px; } .hero-copy-title { font-size: clamp(1.45rem, 8vw, 2.25rem); } .hero-copy-subtitle { font-size: 1rem; } .search-bar { grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 100%; } .search-bar input, .search-bar select { padding: 15px; font-size: 16px; height: 55px; width: 100%; max-width: 100%; display: block; } .btn-search { height: 55px; padding: 0; font-size: 18px; width: 100%; margin-top: 5px; } .categories-grid { grid-template-columns: 1fr 1fr; } .section-title { font-size: 26px; } .featured-grid { display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 14px; padding: 4px 20px 10px 20px; margin: 0 -20px; scroll-padding-left: 20px; } .featured-grid::-webkit-scrollbar { display: none; } .featured-grid .job-card { flex: 0 0 72%; min-width: 72%; max-width: 72%; scroll-snap-align: start; min-height: auto; padding: 22px 20px; border-radius: 24px; } .featured-grid .job-card:hover { transform: none; box-shadow: 0 4px 6px rgba(0,0,0,0.02); } .job-action-area { text-align: left; margin-top: 18px; padding-top: 16px; } .job-title { font-size: 18px; } .job-logo { width: 54px; height: 54px; font-size: 24px; border-radius: 15px; margin-bottom: 18px; } .job-logo i { font-size: 22px; } .job-company-top { font-size: 14px; margin-bottom: 8px; } .job-category-label { font-size: 14px; margin-bottom: 14px; } .job-short-desc { font-size: 13px; -webkit-line-clamp: 2; min-height: 42px; margin-bottom: 14px; } .job-meta-column { font-size: 13px; gap: 8px; } .job-apply-prompt { font-size: 13px; } .job-date-bottom { font-size: 12px; } .job-badge { top: 20px; right: 20px; font-size: 9px; padding: 5px 11px; } .carousel-dots { display: flex; } .hiring-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .company-logo-wrap { width: 85px; height: 85px; font-size: 32px; border-radius: 18px; } .company-name { font-size: 12px; } .company-logo-fallback { font-size: 30px; } .company-jobs { font-size: 11px; } .home-stats-wrap { padding: 26px 0 22px; } .home-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 10px; } .hstat + .hstat::before { display: none; } .hstat-num { font-size: 30px; } .hstat-num-word { font-size: 25px; } .hstat-label { font-size: 12px; margin-top: 4px; } .hiw-steps { grid-template-columns: 1fr; gap: 16px; } .hiw-step { padding: 24px 20px 20px; } .hiw-step:hover { transform: none; box-shadow: none; border-color: var(--border); } .hiw-num { width: 38px; height: 38px; font-size: 17px; margin-bottom: 14px; } .hiw-step-title { font-size: 17px; } .hiw-step-text { font-size: 14px; margin-bottom: 12px; } .hiw-tabs { margin-bottom: 26px; } .hiw-tab { padding: 9px 18px; font-size: 14px; } .newsletter-section { padding: 46px 0; } .newsletter-inner { grid-template-columns: 1fr; gap: 22px; } .newsletter-title { font-size: 21px; } .newsletter-sub { font-size: 14px; } .newsletter-row { flex-direction: column; gap: 10px; } .newsletter-btn { width: 100%; min-height: 46px; } .seo-title { font-size: 22px; margin-bottom: 16px; } .seo-content p { font-size: 14px; line-height: 1.75; margin-bottom: 14px; } .employer-cta { padding: 60px 20px; border-radius: 24px; } .employer-cta h2 { font-size: 28px; } .blog-grid { grid-template-columns: 1fr; } .app-showcase { flex-direction: column; padding: 40px 20px; text-align: center; gap: 40px; } .app-text h2 { font-size: 28px; line-height: 1.1; } .store-badges { justify-content: center; } .app-showcase { padding-top: 80px !important; } .candidate-banner { min-height: 720px; display: block; padding: 60px 0 50px; background-image: var(--cand-bg-m, url('../../images/jobtimist_homepage_candidate_signup_m0001.jpg')); background-position: var(--hif-pos-m, var(--hif-pos-d, var(--hbg-pos, center center))); } .candidate-banner::before { background: var(--hif-ov-m, var(--hif-ov-d, var(--cand-ov-bg, transparent))) !important; } .candidate-banner .container { height: 610px; display: flex; flex-direction: column; justify-content: space-between; } .candidate-content { text-align: left; margin: 0; max-width: 100%; } .candidate-content h2 { font-size: 38px; margin-bottom: 15px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; } .candidate-content p { font-size: 18px; margin-bottom: 0; line-height: 1.3; } .candidate-actions { flex-direction: column; gap: 15px; width: 100%; align-items: center; display: flex; margin-top: auto; } .btn-candidate-primary { width: 100%; max-width: 320px; text-align: center; background: #ffffff; color: var(--primary); font-weight: 700; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .link-candidate-secondary { text-align: center; display: block; color: #ffffff; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.3); } .employer-cta { padding: 80px 20px; } .coming-soon-tag { top: 25px; left: 20px; font-size: 10px; padding: 4px 12px; } } .site-footer { background: #1d1d1f; color: #ffffff; padding: 80px 0 40px; margin-top: 100px; font-family: 'Inter', sans-serif; } .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .footer-logo { height: 35px; width: auto; } .footer-payment-marks { display: flex; align-items: center; gap: 14px; color: #a1a1a6; font-size: 12px; line-height: 1; } .footer-payment-label { white-space: nowrap; } .footer-payment-logos { display: flex; align-items: center; gap: 13px; } .footer-payment-logo { display: block; width: auto; height: 18px; max-width: 76px; object-fit: contain; } .footer-payment-logo-viva { max-width: 74px; } .footer-payment-logo-stripe { max-width: 54px; } .footer-payment-logo-iris { max-width: 42px; } .footer-payment-logo-paypal { max-width: 72px; } .footer-social { display: flex; gap: 20px; } .footer-social a { color: #ffffff; font-size: 20px; transition: 0.3s; opacity: 0.8; } .footer-social a:hover { opacity: 1; color: var(--primary); } .footer-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 0 0 50px 0; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-col h4 { font-size: 17px; font-weight: 700; margin-bottom: 25px; color: #ffffff; letter-spacing: -0.5px; } .footer-col h4.is-footer-title-bold { font-weight: 700; } .footer-col h4.is-footer-title-normal { font-weight: 400; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 4px; } .footer-links a { color: var(--footer-link-color, #a1a1a6); text-decoration: none; font-size: 14px; line-height: 17px; transition: 0.2s; font-weight: 400; } .footer-links a.is-footer-link-bold, .footer-nolink.is-footer-link-bold { font-weight: 700; } .footer-links a.is-footer-link-normal, .footer-nolink.is-footer-link-normal { font-weight: 400; } .footer-links a:hover { color: #ffffff; } .footer-nolink { color: var(--footer-link-color, #6e6e73); font-size: 14px; line-height: 17px; font-weight: 400; cursor: default; } .footer-legal-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 15px; margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); color: #86868b; font-size: 12px; line-height: 1.35; text-align: center; } .footer-legal-strip a { color: var(--footer-link-color, #a1a1a6); text-decoration: none; } .footer-legal-strip a:hover { color: #ffffff; } .footer-legal-strip span { color: #86868b; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 22px; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; color: #86868b; font-size: 13px; } .footer-credit a { color: #86868b; text-decoration: none; font-weight: 600; } .footer-credit a:hover { color: #ffffff; } @media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } .footer-top { flex-direction: column; gap: 30px; text-align: center; } .footer-brand { align-items: center; } .footer-payment-marks { flex-direction: column; gap: 6px; } .footer-payment-logos { justify-content: center; } .footer-legal-strip { justify-content: center; gap: 7px 12px; margin-top: 30px; text-align: center; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } } .reveal, .reveal-stagger > * { opacity: 1; transform: translateY(0); } .reveal.reveal-armed { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity, transform; } .reveal.reveal-armed.visible { opacity: 1; transform: translateY(0); } .reveal-stagger.reveal-armed > * { opacity: 0; transform: translateY(30px); transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } .reveal-stagger.reveal-armed.visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.reveal-armed.visible > *:nth-child(1) { transition-delay: 0.05s; } .reveal-stagger.reveal-armed.visible > *:nth-child(2) { transition-delay: 0.10s; } .reveal-stagger.reveal-armed.visible > *:nth-child(3) { transition-delay: 0.15s; } .reveal-stagger.reveal-armed.visible > *:nth-child(4) { transition-delay: 0.20s; } .reveal-stagger.reveal-armed.visible > *:nth-child(5) { transition-delay: 0.25s; } .reveal-stagger.reveal-armed.visible > *:nth-child(6) { transition-delay: 0.30s; } .reveal-stagger.reveal-armed.visible > *:nth-child(7) { transition-delay: 0.35s; } .reveal-stagger.reveal-armed.visible > *:nth-child(8) { transition-delay: 0.40s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > *, .reveal.reveal-armed, .reveal-stagger.reveal-armed > * { opacity: 1 !important; transform: none !important; transition: none !important; } } .carousel-dots { display: none; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: #d2d2d7; transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); flex-shrink: 0; padding: 0; border: none; cursor: pointer; } .carousel-dot.active { background: var(--primary); width: 22px; border-radius: 4px; } .flash-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .flash { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--light-grey); font-size: 14px; line-height: 1.5; color: var(--dark); } .flash > i { flex-shrink: 0; font-size: 16px; margin-top: 2px; } .flash > span { flex: 1; min-width: 0; } .flash-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: 0.55; transition: 0.2s; font-family: inherit; } .flash-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); } .flash-success { background: #eefaf983; border-color: #b7e4c7; color: #1b5e3f; } .flash-success > i { color: #2d9a63; } .flash-error { background: #fff5f7; border-color: #ffd0dc; color: #8c1638; } .flash-error > i { color: var(--primary); } .flash-warning { background: #fff8ec; border-color: #ffe0b8; color: #7a4a00; } .flash-warning > i { color: #d98200; } .flash-info { background: #f2f7fd; border-color: #cfe0f5; color: #1c4670; } .flash-info > i { color: #2f6fb5; } @media (max-width: 768px) { .flash { padding: 12px 14px; font-size: 13px; } } .drawer-lang { display: none; } @media (max-width: 768px) { .lang-dropdown { display: none !important; } .mobile-drawer { display: flex; flex-direction: column; box-sizing: border-box; } .drawer-links { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .drawer-lang { display: block; flex: 0 0 auto; padding-top: 18px; margin-top: 10px; border-top: 1px solid var(--border); } .drawer-lang-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #86868b; margin-bottom: 10px; } .drawer-lang-opts { display: flex; flex-direction: column; gap: 6px; } .drawer-lang-opt { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--dark); font-size: 14.5px; font-weight: 600; background: var(--white); transition: background 0.2s, border-color 0.2s; } .drawer-lang-opt .flag-icon { width: 22px; height: auto; border-radius: 3px; flex-shrink: 0; } .drawer-lang-opt:hover { background: var(--light-grey); } .drawer-lang-opt.is-active { border-color: var(--primary); color: var(--primary); background: rgba(216, 27, 89, 0.05); } .drawer-lang-opt.is-active::after { content: '✓'; margin-left: auto; font-weight: 700; color: var(--primary); } } @media (max-width: 360px) { .navbar-brand { min-width: 0; flex-shrink: 1; overflow: hidden; } .navbar-logo { height: 22px; max-width: 100%; } .navbar-actions { gap: 4px; flex-shrink: 0; } .navbar-actions .nav-btn, .navbar-actions .hamburger-btn { width: 34px; height: 34px; min-width: 34px; padding: 0; } .navbar-actions .nav-btn svg, .navbar-actions .hamburger-btn svg { width: 18px; height: 18px; } .btn-post-job::before { font-size: 18px; } .nav-icon-btn { font-size: 14px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 1.5px solid transparent; border-radius: 10px; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .btn i { font-size: 13px; line-height: 1; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--primary, #D81B59); outline-offset: 2px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .btn-primary { background: var(--primary, #D81B59); border-color: var(--primary, #D81B59); color: #fff; } .btn-primary:hover { background: #b5154a; border-color: #b5154a; color: #fff; } .btn-outline { background: transparent; border-color: var(--border, #d2d2d7); color: var(--dark, #4D4D4F); } .btn-outline:hover { border-color: var(--primary, #D81B59); color: var(--primary, #D81B59); background: transparent; } .btn-sm { padding: 8px 16px; font-size: 13.5px; border-radius: 8px; } .btn-sm i { font-size: 12px; } @media (max-width: 640px) { .btn { white-space: normal; min-height: 44px; line-height: 1.3; } } [style*="--sp-top-d"] { padding-top: var(--sp-top-d, initial); } [style*="--sp-bot-d"] { padding-bottom: var(--sp-bot-d, initial); } [style*="--fs-mul"] { font-size: calc(1em * var(--fs-mul, 1)); } [style*="--fg-txt"] { color: var(--fg-txt, inherit); } [style*="--fg-ttl"] h1, [style*="--fg-ttl"] h2, [style*="--fg-ttl"] h3, [style*="--fg-ttl"] .section-title, [style*="--fg-ttl"] .sec-title { color: var(--fg-ttl, inherit); } .home-text[style*="--ht-fs"] { font-size: calc(1em * var(--ht-fs)); } .home-text[style*="--ht-col"] { color: var(--ht-col); } .home-text[style*="--ht-fw"] { font-weight: var(--ht-fw); } .home-text[style*="--ht-fst"] { font-style: var(--ht-fst); } .home-text[style*="--ht-ts"] { text-shadow: var(--ht-ts); } .home-text[style*="--ht-lh"] { line-height: var(--ht-lh); } h1 > .home-text[style*="--ht-ta"], h2 > .home-text[style*="--ht-ta"], h3 > .home-text[style*="--ht-ta"], p > .home-text[style*="--ht-ta"], .announcement-bar > .home-text[style*="--ht-ta"], .announcement-bar__track > .home-text[style*="--ht-ta"], .section-title > .home-text[style*="--ht-ta"], .section-subtitle > .home-text[style*="--ht-ta"], .hiw-step-text > .home-text[style*="--ht-ta"], .hiw-step-title > .home-text[style*="--ht-ta"], .newsletter-sub > .home-text[style*="--ht-ta"], .contact-form .form-label > .page-text[style*="--ht-ta"], .cinfo-label > .page-text[style*="--ht-ta"], .pricing-guarantee strong > .page-text[style*="--ht-ta"] { display: block; text-align: var(--ht-ta); } summary > .page-text[style*="--ht-ta"], .form-hint > .page-text[style*="--ht-ta"], .je-suggest-label > .page-text[style*="--ht-ta"], .pricing-sales-hero-cta > .page-text[style*="--ht-ta"] { display: block; text-align: var(--ht-ta); } @media (max-width: 900px) { [style*="--sp-top-m"] { padding-top: var(--sp-top-m, initial); } [style*="--sp-bot-m"] { padding-bottom: var(--sp-bot-m, initial); } } [style*="--fs-mul"] .search-title { font-size: calc(1.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .search-subtitle { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .section-title { font-size: calc(2.5rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .section-subtitle { font-size: calc(1.1875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .company-name { font-size: calc(0.9375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .company-jobs { font-size: calc(0.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-company-top { font-size: calc(0.9375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-title { font-size: calc(1.375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-category-label { font-size: calc(1rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-short-desc { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-meta-item { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-date-bottom { font-size: calc(0.8125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .cat-name { font-size: calc(0.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .cat-count { font-size: calc(0.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .blog-title { font-size: calc(1.25rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .employer-cta h2 { font-size: calc(2.375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .employer-cta p { font-size: calc(1.1875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hero-banner-content h2 { font-size: calc(2.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hero-banner-content p { font-size: calc(1.1875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .emp-cta-eyebrow { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .candidate-content h2 { font-size: calc(2.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .candidate-content p { font-size: calc(1.1875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hiw-step-title { font-size: calc(1.1875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hiw-step-text { font-size: calc(0.9375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hiw-step-link { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .newsletter-title { font-size: calc(1.625rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .newsletter-sub { font-size: calc(0.9375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .app-text h2 { font-size: calc(2.25rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .app-text p { font-size: calc(1.125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .seo-title { font-size: calc(1.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .seo-content p { font-size: calc(0.9375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-num { font-size: calc(2.5rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-num-word { font-size: calc(2.125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-label { font-size: calc(0.8125rem * var(--fs-mul, 1)); } [style*="--fg-txt"] p, [style*="--fg-txt"] li, [style*="--fg-txt"] .search-subtitle, [style*="--fg-txt"] .section-subtitle, [style*="--fg-txt"] .company-name, [style*="--fg-txt"] .company-jobs, [style*="--fg-txt"] .job-company-top, [style*="--fg-txt"] .job-category-label, [style*="--fg-txt"] .job-short-desc, [style*="--fg-txt"] .job-meta-item, [style*="--fg-txt"] .job-meta-item i, [style*="--fg-txt"] .job-date-bottom, [style*="--fg-txt"] .cat-name, [style*="--fg-txt"] .hiw-step-text, [style*="--fg-txt"] .newsletter-sub, [style*="--fg-txt"] .emp-cta-eyebrow, [style*="--fg-txt"] .hstat-label { color: var(--fg-txt) !important; } [style*="--fg-ttl"] h1, [style*="--fg-ttl"] h2, [style*="--fg-ttl"] h3, [style*="--fg-ttl"] .section-title, [style*="--fg-ttl"] .sec-title, [style*="--fg-ttl"] .search-title, [style*="--fg-ttl"] .job-title, [style*="--fg-ttl"] .blog-title, [style*="--fg-ttl"] .hiw-step-title, [style*="--fg-ttl"] .newsletter-title, [style*="--fg-ttl"] .hstat-num:not(.hstat-num-word) { color: var(--fg-ttl) !important; } @media (max-width: 768px) { [style*="--fs-mul"] .search-title { font-size: calc(2rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .section-title { font-size: calc(1.625rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .company-name { font-size: calc(0.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .company-jobs { font-size: calc(0.6875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-title { font-size: calc(1.125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-company-top { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-category-label { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-short-desc { font-size: calc(0.8125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-meta-item { font-size: calc(0.8125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .job-date-bottom { font-size: calc(0.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .employer-cta h2 { font-size: calc(1.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .candidate-content h2 { font-size: calc(2.375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .candidate-content p { font-size: calc(1.125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hiw-step-title { font-size: calc(1.0625rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hiw-step-text { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .newsletter-title { font-size: calc(1.3125rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .app-text h2 { font-size: calc(1.75rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .seo-title { font-size: calc(1.375rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .seo-content p { font-size: calc(0.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-num { font-size: calc(1.875rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-num-word { font-size: calc(1.5625rem * var(--fs-mul, 1)); } [style*="--fs-mul"] .hstat-label { font-size: calc(0.75rem * var(--fs-mul, 1)); } } .testimonials-section { border-top: 1px solid rgba(0,0,0,.04); } .testimonials-eyebrow { display:block; margin-bottom:12px; color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .testimonials-track { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:22px; } .testimonial-card { position:relative; margin:0; min-height:270px; padding:34px; display:flex; flex-direction:column; border:1px solid rgba(0,0,0,.06); border-radius:28px; background:rgba(255,255,255,.9); box-shadow:0 7px 24px rgba(0,0,0,.045); transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1); } .testimonial-card:hover { transform:translateY(-4px); box-shadow:0 18px 42px rgba(0,0,0,.10); } .testimonial-quote-mark { height:36px; color:var(--primary); font-family:Georgia,serif; font-size:62px; font-weight:700; line-height:.9; } .testimonial-card blockquote { margin:14px 0 26px; color:#1d1d1f; font-size:17px; font-weight:500; line-height:1.50; } .testimonial-card figcaption { margin-top:auto; display:flex; flex-direction:column; gap:4px; padding-top:18px; border-top:1px solid #ececf0; } .testimonial-card figcaption strong { color:#1d1d1f; font-size:15px; } .testimonial-card figcaption span { color:#6e6e73; font-size:14px; line-height:1.4; } .testimonials-swipe-hint { display:none; } .testimonials-desktop-scroll-hint { display:none; } @media (min-width: 901px) { .testimonials-section--desktop-scroll .testimonials-track { display:flex; overflow-x:auto; overflow-y:hidden; gap:22px; margin:0 -20px; padding:4px 20px 14px; scroll-snap-type:x mandatory; scroll-padding-left:20px; overscroll-behavior-x:contain; scrollbar-color:rgba(198,20,85,.68) rgba(0,0,0,.07); scrollbar-width:thin; } .testimonials-section--desktop-scroll .testimonials-track:focus-visible { outline:3px solid rgba(198,20,85,.55); outline-offset:4px; border-radius:28px; } .testimonials-section--desktop-scroll .testimonial-card { flex:0 0 calc((100% - 66px) / 3.5); min-width:calc((100% - 66px) / 3.5); scroll-snap-align:start; scroll-snap-stop:always; } .testimonials-section--desktop-scroll .testimonials-desktop-scroll-hint { display:block; margin:15px 0 0; color:#86868b; font-size:13px; font-weight:600; text-align:center; } } @media (max-width: 900px) { .testimonials-track { display:flex; overflow-x:auto; overflow-y:hidden; gap:14px; margin:0 -20px; padding:4px 20px 12px; scroll-snap-type:x mandatory; scroll-padding-left:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .testimonials-track::-webkit-scrollbar { display:none; } .testimonial-card { flex:0 0 78%; min-width:78%; min-height:254px; padding:28px 24px; scroll-snap-align:start; border-radius:24px; } .testimonial-card:hover { transform:none; box-shadow:0 7px 24px rgba(0,0,0,.045); } .testimonial-card blockquote { font-size:16px; } .testimonials-swipe-hint { display:block; margin:15px 0 0; color:#86868b; font-size:13px; font-weight:600; text-align:center; } } [style*="--fw"] h1, [style*="--fw"] h2, [style*="--fw"] h3, [style*="--fw"] p, [style*="--fw"] .emp-cta-eyebrow, [style*="--fw"] .btn-cta-white, [style*="--fw"] .btn-candidate-primary, [style*="--fw"] .link-candidate-secondary { font-weight: var(--fw) !important; } [style*="--fst"] h1, [style*="--fst"] h2, [style*="--fst"] h3, [style*="--fst"] p, [style*="--fst"] .emp-cta-eyebrow { font-style: var(--fst) !important; } [style*="--ts"] h1, [style*="--ts"] h2, [style*="--ts"] h3, [style*="--ts"] p, [style*="--ts"] .emp-cta-eyebrow, [style*="--ts"] .btn-cta-white, [style*="--ts"] .btn-candidate-primary, [style*="--ts"] .link-candidate-secondary { text-shadow: var(--ts) !important; } .nwl-reward-card { display:grid; grid-template-columns:minmax(220px,34%) 1fr; overflow:hidden; margin:28px auto; border:1px solid rgba(193,24,80,.18); border-radius:18px; background:linear-gradient(135deg,#fff 0%,#fff7fa 100%); box-shadow:0 12px 30px rgba(29,35,48,.08); } .nwl-reward-card__media { position:relative; min-height:100%; overflow:hidden; background:var(--info-surface); } .nwl-reward-card__media img { display:block; width:100%; height:100%; min-height:235px; object-fit:cover; } .nwl-reward-card__media.has-overlay::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:var(--nwl-media-overlay,transparent); opacity:var(--nwl-media-overlay-opacity,0); } .nwl-reward-card__content { padding:26px 30px; } .nwl-reward-card__eyebrow { display:inline-flex; align-items:center; gap:8px; color:#16777c; font-size:.77rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; } .nwl-reward-card__eyebrow i { color:var(--primary); } .nwl-reward-card h2 { margin:10px 0 8px; color:#202733; font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.2; } .nwl-reward-card p { margin:0; color:var(--text-secondary); line-height:1.6; } .nwl-reward-card__formatted { color:var(--nwl-txt-col,currentColor); font-size:var(--nwl-txt-fs,1em); font-weight:var(--nwl-txt-fw,inherit); font-style:var(--nwl-txt-fst,normal); line-height:var(--nwl-txt-lh,inherit); text-align:var(--nwl-txt-ta,inherit); text-shadow:var(--nwl-txt-shadow,none); } .nwl-reward-card h2 .nwl-reward-card__formatted, .nwl-reward-card p .nwl-reward-card__formatted { display:block; } .nwl-reward-card__benefits { display:grid; gap:6px; margin:16px 0 18px; padding:0; list-style:none; color:#38404b; } .nwl-reward-card__benefits li { display:flex; align-items:flex-start; gap:9px; } .nwl-reward-card__benefits i { margin-top:4px; color:#198c83; } .nwl-reward-card__form { display:grid; gap:11px; max-width:620px; } .nwl-reward-card__consent { display:flex; align-items:flex-start; gap:9px; color:#4c5560; font-size:.9rem; line-height:1.45; cursor:pointer; } .nwl-reward-card__consent input { width:17px; height:17px; flex:0 0 auto; margin-top:2px; accent-color:var(--primary); } .nwl-reward-card__cta { display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:44px; padding:11px 18px; border:0; border-radius:10px; background:var(--primary); color:#fff; font:inherit; font-weight:800; line-height:1.18; text-decoration:none; cursor:pointer; } .nwl-reward-card__cta .nwl-reward-card__formatted { color:var(--nwl-txt-col,#fff); font-size:var(--nwl-txt-fs,1em); font-weight:var(--nwl-txt-fw,800); font-style:var(--nwl-txt-fst,normal); line-height:var(--nwl-txt-lh,1.18); text-align:var(--nwl-txt-ta,center); text-shadow:var(--nwl-txt-shadow,none); } .nwl-reward-card__cta:hover, .nwl-reward-card__cta:focus-visible { background:var(--primary-strong); color:#fff; } .nwl-reward-card__status { display:inline-flex; align-items:center; gap:8px; margin-top:16px !important; color:#17786f !important; font-weight:700; } .nwl-reward-card__status i { color:#198c83; } .nwl-reward-home-section { padding:var(--sp-top-d, 24px) 0 var(--sp-bot-d, 24px); background:#fff; } .nwl-reward-card--home-compact { grid-template-columns:minmax(220px,29%) 1fr; grid-auto-rows:minmax(240px,auto); min-height:240px; margin:0; } .nwl-reward-card--home-compact .nwl-reward-card__media { min-height:0; align-self:stretch; position:relative; } .nwl-reward-card--home-compact .nwl-reward-card__media img { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; object-fit:cover; } .nwl-reward-card--home-compact .nwl-reward-card__content { align-self:center; padding:18px 24px; } .nwl-reward-card--home-compact h2 { margin:7px 0 6px; font-size:clamp(1.2rem,1.8vw,1.5rem); } .nwl-reward-card--home-compact p { font-size:.94rem; line-height:1.45; } .nwl-reward-card--home-compact .nwl-reward-card__benefits { gap:4px; margin:10px 0 12px; font-size:.9rem; } .nwl-reward-card--home-compact .nwl-reward-card__benefits i { margin-top:3px; } .nwl-reward-card--home-compact .nwl-reward-card__form { gap:8px; } .nwl-reward-card--home-compact .nwl-reward-card__consent { font-size:.82rem; line-height:1.35; } .nwl-reward-card--home-compact .nwl-reward-card__cta { min-height:40px; padding:9px 15px; } @media (max-width:720px) { .nwl-reward-card { grid-template-columns:1fr; margin:22px auto; border-radius:14px; } .nwl-reward-card__media img { min-height:165px; max-height:230px; } .nwl-reward-card__content { padding:21px 19px; } .nwl-reward-card__cta { width:100%; } .nwl-reward-home-section { padding:var(--sp-top-m, 20px) 0 var(--sp-bot-m, 20px); } .nwl-reward-card--home-compact { grid-auto-rows:auto; min-height:0; margin:0; } .nwl-reward-card--home-compact .nwl-reward-card__media { display:block; height:auto; min-height:0; background:var(--info-surface); } .nwl-reward-card--home-compact .nwl-reward-card__media img { position:static; width:100%; height:auto; min-height:165px; max-height:230px; object-fit:cover; } .nwl-reward-card--home-compact .nwl-reward-card__content { padding:16px 18px; } .nwl-reward-card--home-compact h2 { margin:7px 0 6px; font-size:1.22rem; } .nwl-reward-card--home-compact p { font-size:.93rem; } .nwl-reward-card--home-compact .nwl-reward-card__benefits { margin:11px 0 12px; font-size:.88rem; } } .nwl-reward-balance-card { margin:22px 0 6px; padding:20px; border:1px solid rgba(25,140,131,.25); border-radius:16px; background:linear-gradient(135deg,#f4fcfa 0%,#fff 100%); box-shadow:0 8px 22px rgba(29,35,48,.05); } .nwl-reward-balance-card__heading { display:flex; gap:12px; align-items:flex-start; } .nwl-reward-balance-card__heading > i { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:#dff5f0; color:#16777c; } .nwl-reward-balance-card h2 { margin:0; color:#202733; font-size:1rem; line-height:1.25; } .nwl-reward-balance-card p { margin:4px 0 0; color:var(--text-secondary); font-size:.9rem; line-height:1.45; } .nwl-reward-balance-card__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; } .nwl-reward-balance-card__grid span { display:grid; gap:3px; min-width:0; padding:11px 10px; border-radius:11px; background:#fff; color:#56606b; font-size:.78rem; line-height:1.25; } .nwl-reward-balance-card__grid strong { color:#16777c; font-size:1.28rem; line-height:1; } .nwl-reward-balance-card .btn-auth-secondary { display:inline-flex; width:auto; min-height:40px; align-items:center; justify-content:center; } .nwl-reward-balance-card--myjobs { max-width:940px; margin:18px 0 24px; } .nwl-reward-redemption-note { display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; padding:14px 16px; border:1px solid rgba(25,140,131,.28); border-radius:12px; background:#f2fbf8; color:#186a64; font-weight:700; line-height:1.45; } .nwl-reward-redemption-note i { margin-top:2px; color:#198c83; } @media (max-width:560px) { .nwl-reward-balance-card { padding:16px; border-radius:14px; } .nwl-reward-balance-card__grid { grid-template-columns:1fr; gap:8px; } .nwl-reward-balance-card__grid span { grid-template-columns:34px 1fr; align-items:center; gap:9px; } .nwl-reward-balance-card .btn-auth-secondary { width:100%; } } .flash.flash-success[style*="--nwl-txt"] { color:var(--nwl-txt-col,#17786f); font-size:var(--nwl-txt-fs,1em); font-weight:var(--nwl-txt-fw,inherit); font-style:var(--nwl-txt-fst,normal); line-height:var(--nwl-txt-lh,inherit); text-align:var(--nwl-txt-ta,inherit); text-shadow:var(--nwl-txt-shadow,none); } .flash.flash-success[style*="--nwl-txt"] > span { color:inherit; font:inherit; line-height:inherit; text-align:inherit; text-shadow:inherit; } @media (max-width: 768px) { .mobile-drawer { right: 0; width: 88vw; max-width: 360px; height: 100%; height: 100dvh; padding: 18px 18px 20px; border-radius: 24px 0 0 24px; background: linear-gradient(180deg, #ffffff 0%, #fcfbfc 100%); box-shadow: -18px 0 48px rgba(36, 31, 34, 0.20); transform: translate3d(105%, 0, 0); will-change: transform; transition: transform 0.28s cubic-bezier(.22, .61, .36, 1); } .mobile-drawer.open { right: 0; transform: translate3d(0, 0, 0); } .drawer-close { top: 17px; left: 16px; width: 42px; height: 42px; border: 1px solid #e4e6e8; border-radius: 13px; color: #485259; background: #ffffff; box-shadow: 0 3px 10px rgba(36, 45, 50, 0.06); } .drawer-close:hover, .drawer-close:focus-visible { color: var(--primary); background: #fff8fa; border-color: rgba(193, 24, 80, 0.34); } .drawer-heading { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 1px 14px 54px; margin-bottom: 4px; border-bottom: 1px solid #eceef0; } .drawer-brand { display: inline-flex; min-width: 0; align-items: center; text-decoration: none; } .drawer-brand img { display: block; width: 128px; max-width: 100%; height: auto; } .drawer-heading-label { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; color: #8d1c48; background: #fff0f5; font-size: 10px; font-weight: 800; letter-spacing: .055em; line-height: 1; text-transform: uppercase; } .drawer-identity { padding: 12px 14px; margin: 10px 0 0; border: 1px solid #e7eaeb; border-radius: 14px; background: #f8fafb; } .drawer-identity-name { font-size: 14.5px; } .drawer-identity-role { border-radius: 999px; } .drawer-cta { min-height: 52px; margin: 14px 0 10px; border-radius: 14px; background: linear-gradient(135deg, #c11850 0%, #ad0d43 100%); box-shadow: 0 8px 17px rgba(174, 13, 67, 0.19); font-size: 15.5px; } .drawer-search-quick { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 10px; min-height: 62px; box-sizing: border-box; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #d9e3e5; border-radius: 14px; color: #34484e; background: #eff8f8; text-decoration: none; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .drawer-search-quick > i:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #0f707a; background: #d9f0f1; font-size: 15px; } .drawer-search-quick > span { display: grid; min-width: 0; gap: 2px; } .drawer-search-quick strong { color: #2e4248; font-size: 14px; line-height: 1.15; } .drawer-search-quick small { overflow: hidden; color: #6a7a80; font-size: 11.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .drawer-search-quick > i:last-child { color: #53777d; font-size: 12px; } .drawer-search-quick:hover, .drawer-search-quick:focus-visible { transform: translateY(-1px); border-color: #a9cfd4; box-shadow: 0 7px 15px rgba(24, 96, 104, 0.09); } .drawer-links { display: grid; flex: 0 0 auto; gap: 7px; min-height: auto; overflow: visible; } .drawer-links a { display: grid; grid-template-columns: 28px minmax(0, 1fr) 14px; align-items: center; gap: 9px; min-height: 49px; box-sizing: border-box; padding: 10px 11px; border: 1px solid #e4e8e9; border-radius: 13px; color: #3b484d; background: #ffffff; font-size: 14.5px; font-weight: 700; } .drawer-links a > i:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: #4c7580; background: #eff6f7; font-size: 12px; } .drawer-links a > span { min-width: 0; } .drawer-links a > i:last-child { color: #8d989d; font-size: 10px; } .drawer-links a:hover, .drawer-links a:focus-visible { color: #a70e45; border-color: rgba(193, 24, 80, 0.30); background: #fff8fa; } .drawer-links a:hover > i:first-child, .drawer-links a:focus-visible > i:first-child { color: #a70e45; background: #fde8f0; } .drawer-lang { display: grid; flex: 0 0 auto; gap: 9px; padding-top: 10px; margin-top: 10px; border-top-color: #e6e9ea; } .drawer-lang-label { margin: 0; color: #7e898e; font-size: 10.5px; } .drawer-lang-opts { flex-direction: row; gap: 8px; } .drawer-lang-opt { flex: 1 1 0; min-width: 0; justify-content: center; gap: 7px; min-height: 43px; padding: 7px 8px; border-radius: 12px; font-size: 12.5px; } .drawer-lang-opt .flag-icon { width: 20px; } .drawer-lang-opt.is-active::after { display: none; } .drawer-lang-opt.is-active { box-shadow: inset 0 0 0 1px rgba(193, 24, 80, 0.08); } .drawer-contact { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; box-sizing: border-box; padding: 0; margin-top: 8px; border: 0; color: #69777d; font-size: 12.5px; } .drawer-contact i { color: #ae174a; font-size: 13px; } } @media (max-width: 360px) { .mobile-drawer { right: 0; width: 92vw; max-width: none; padding-left: 14px; padding-right: 14px; } .drawer-heading { padding-left: 50px; } .drawer-brand img { width: 116px; } .drawer-heading-label { display: none; } .drawer-lang-opt { font-size: 12px; } } @media (max-width: 768px) { .search-container .home-search-bar { padding-right: 9px; padding-left: 9px; } } @media (max-width: 768px) { .mobile-drawer .drawer-account-action { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 48px; margin: 0 0 10px; padding: 0 14px; border: 1.5px solid var(--primary); border-radius: 14px; background: var(--white); color: var(--primary); cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; } .mobile-drawer .drawer-account-action--standalone { margin-top: 14px; } .mobile-drawer .drawer-account-action:hover, .mobile-drawer .drawer-account-action:focus-visible { border-color: var(--primary); background: var(--primary); color: var(--white); } .mobile-drawer .drawer-account-action:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } } @media (max-width: 768px) { .mobile-drawer .drawer-close { top: 12px; } } .company-verified-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap; } .company-verified-badge > i { flex: 0 0 auto; } .company-verified-label { color: #6e6e73; font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: 0; text-transform: none; }