/* ---------- RESET / BASE ---------- */ *, *::before, *::after { box-sizing: border-box } html, body { height: 100%; margin: 0; font-family: "Roboto flex", "Segoe UI", sans-serif; color: rgba(18, 40, 68, 1); background: #fff } button, input, select, textarea { font-family: inherit; /* odziedziczą 'Roboto' ustawione na */ } body.finish { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.4; background: #ffffff; } @media (min-width: 900px) { body:not(.wizard):not(.finish) { /* 0-50 % białe, 50-100 % szare */ background: linear-gradient(90deg, #ffffff 0 50%, #F2F7FC 50% 100%) no-repeat; background-attachment: fixed; /* tło nie przesuwa się przy scrollu */ } body.finish { justify-content: center; min-height: 100vh; } body:not(.wizard):not(.finish)::after { content: ''; position: fixed; inset: 0 0 0 50%; background: #F2F7FC; z-index: -1; pointer-events: none; } } .progress-head, .wizard-step { max-width: 500px; width: 100%; } .wizard-step5 { max-width: 785px; width: 100%; } .progress-head { font-weight: 700; } /* ---------- HEADER ---------- */ header { border-bottom: 1px solid #e2e8f0; background: #fff; flex-shrink: 0 } .header-inner { max-width: 1280px; margin: auto; padding: 14px 24px 10px; } #wizard-view img, .header-inner img { height: 50px } #loader-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loader-spinner { width: 40px; height: 40px; border: 4px solid #ccc; border-top-color: #007bff; /* np. niebieski jak w Twoim brandzie */ border-radius: 50%; animation: loader-spin 0.8s linear infinite; } @keyframes loader-spin { to { transform: rotate(360deg); } } /* ---------- MAIN LAYOUT ---------- */ .main { flex: 1; display: flex; align-items: center; justify-content: center } .container { max-width: 1280px; width: 100%; display: grid; grid-template-columns:1fr 1fr } @media (max-width: 899px) { .container { grid-template-columns:1fr } .main .promo{ display: none; } } .form-panel, .promo { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 20px } .form-inner { max-width: 420px; width: 100% } /* 420 px */ .promo-inner { max-width: 480px; width: 100% } .promo { background: #F2F7FC } h1 { font-size: 28px; font-weight: 600; margin: 0 0 36px; text-align: center; letter-spacing: -0.2px; } h2 { font-size: 24px; font-weight: 600; margin: 0 0 16px; text-align: left } /* ---------- INPUT + FLOATING LABEL ---------- */ /* ----- Floating-label (podmień ten fragment) ----- */ .field { position: relative; margin-bottom: 16px; } .email-list input[type="email"], .field input { width: 100%; height: 48px; line-height: 48px; /* tekst perfekcyjnie w pionie */ padding: 0 12px; font-size: 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; outline: none; } /* LABEL – stan startowy / puste pole */ .field label { position: absolute; left: 12px; top: 15px; background: #fff; padding: 0 4px; font-size: 16px; color: #64748b; pointer-events: none; transition: .15s; } /* LABEL – gdy focus LUB gdy w polu jest tekst */ .field input:focus + label, .field input:not(:placeholder-shown) + label { top: -7px; /* podskok na border */ font-size: 12px; color: #626262; border: 1px solid transparent; border-radius: 20px; } .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #f5faff inset; box-shadow: 0 0 0 1000px #f5faff inset; -webkit-text-fill-color: #111827; } .field input::selection{ background: rgba(80, 130, 180, 0.1); } .field input::-moz-selection { background: rgba(80, 130, 180, 0.1); } /* WALIDACJA */ .error-notcomplexenough-msg, .error-msg-invalid-domain, .error-msg-login, .error-msg-no-data, .error-msg { margin-top: 6px; font-size: 13px; color: #ef4444; display: none } #employeesDiv.error{ color: #ef4444; } #finish-failure{ color: #ef4444; display: none } .email-list input.error, .email-list input.duplicate, .field.error input { border-color: #ef4444 } .field.error-notcomplexenough .error-notcomplexenough-msg, .field.error .error-msg { display: block } .email-list input[type="email"]:focus, .field input:focus { border-color: rgba(41, 97, 171, 0.5); box-shadow: 0 0 0 2px rgba(41, 97, 171, .15); } .field.disabled{ opacity: 0.5; pointer-events: none; } .lead { font-size: 16px; color: #475569; margin-bottom: 40px; } .wizard-step5 .lead { margin-bottom: 30px; } .margin-top-0 { margin-top: 0px; } .margin-top-10 { margin-top: 10px; } .margin-top-20 { margin-top: 20px; } .margin-top-30 { margin-top: 30px; } .margin-top-40 { margin-top: 40px; } .margin-bottom-0 { margin-bottom: 0px; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-30 { margin-bottom: 30px; } .checkbox { font-size: 12px; color: #626262; } /* ---------- BUTTONS ---------- */ .btn { width: 100%; max-width: 420px; height: 52px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; border: 2px solid transparent } .btn:disabled{ opacity: 0.4; } .btn.next { width: 140px; } .btn.back { text-align: left; } .btn-primary { background: #2961AB; color: #fff } .btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #0f172a; border-color: #2961AB } .btn-primary:hover { background: #2058A4; } .btn-google:hover { background: #f5f6f7; } /* ---------- DIVIDER ---------- */ .divider { width: 60%; margin: 22px auto; display: flex; align-items: center; gap: 16px; font-weight: 400; letter-spacing: 1px; color: #0f172a; font-size: 15px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #9FA6AD; } /* ---------- FOOTNOTES ---------- */ .terms { font-size: 12px; color: #64748b; margin-top: 30px; text-align: center } .terms a { color: #2961AB; text-decoration: underline; } .login { text-align: center; font-size: 14px; margin-top: 20px; font-weight: 600 } .login a, a { color: #2961AB; font-weight: 500; text-decoration: underline; } a { text-decoration: none; } /* ---------- BENEFITS ---------- */ .promo h2 { font-size: 24px; margin-bottom: 10px; font-weight: 600 } .promo p.lead { color: #475569; margin-bottom: 28px; font-size: 16px } .feature { display: flex; gap: 16px; margin-bottom: 30px; align-items: flex-start } .icon-wrapper { width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e2e8f0; display: flex; justify-content: center; align-items: center; flex-shrink: 0 } .icon-wrapper svg { width: 24px; height: 24px; stroke: #2961AB; stroke-width: 2; } .feature h3 { margin: 0; font-size: 17px; font-weight: 600; margin-bottom: 9px; } .feature p { margin: 4px 0 0; font-size: 15px; color: #475569 } .nipLink svg, .refererLink svg { width: 19px; height: 19px; stroke: #999999; stroke-width: 1; margin-right: 8px; margin-top: 0px; } .nipLink span, .refererLink span { font-weight: 400; font-size: 14px; } .nipLink, .refererLink{ display: inline-flex; align-items: center; color: #0056b3; text-decoration: none; } /* wrapper for alignment and larger click target */ label.checkbox { display: inline-flex; /* keep input + text in one line */ align-items: center; gap: 5px; cursor: pointer; } /* visually hide native box but keep it accessible */ label.checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid #bbc5d1; border-radius: 4px; background: #fff; display: inline-block; position: relative; cursor: pointer; margin-left: 0px; } /* checkmark */ label.checkbox input[type="checkbox"]::after { content: ""; position: absolute; inset: 0; display: block; transform: scale(0); transition: transform .12s ease-out; width: 6px; height: 10px; border: solid #2b6cb0; border-width: 0 3px 3px 0; rotate: 45deg; margin: 2px 0 0 5px; } /* checked state */ label.checkbox input[type="checkbox"]:checked { border-color: #2b6cb0; background: #e8f1ff; } label.checkbox input[type="checkbox"]:checked::after { transform: scale(1); /* show the tick */ } /* focus styles for accessibility */ label.checkbox input[type="checkbox"]:focus-visible { outline: 3px solid #b8d2ff; /* keyboard focus ring */ outline-offset: 2px; } body.wizard::before { content: ''; position: fixed; inset: 0 67% 0 0; background: #F2F7FC; z-index: -1; } #wizard-view { display: grid; grid-template-columns:30% 70%; height: 100vh; scrollbar-gutter: stable; } @media (max-width: 899px) { #wizard-view{ height: auto; } .wizard .nav{ border-color: white; } } .wizard-aside { padding: 40px; padding-top: 80px; background: #F2F7FC; font-size: 20px; line-height: 150%; } .wizard-main { display: flex; flex-direction: column; justify-content: space-around; align-items: normal; padding: 80px; padding-bottom: 20px; background: #FFFFFF; } #step-container { /*padding: 30px;*/ } /* ---------- STEP CONTAINER rośnie, wypychając nav ---------- */ #step-container { flex: 1; } /* ---------- NAV BAR ---------- */ .nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 8px; /* górny odstęp + trochę miejsca na dole */ border-top: 1px solid #e5e9ef; } /* Back ma być po lewej, Next po prawej, mimo że w DOM-ie jest odwrotnie */ .nav .back { order: 1; } .nav .next { order: 2; } input[type="radio"], label.checkbox input[type="checkbox"]:focus-visible, .wizard-step3 .option-pill:focus-visible, button:focus-visible, .nav .btn:focus-visible { outline: 2px solid #000000; outline-offset: 3px; } /* „WSTECZ” — tekst + grot */ .btn.ghost[data-prev] { background: none; border: none; color: #2961AB; font-weight: 600; padding: 0 10px 0 0; width: auto; } .btn.ghost[data-prev]::before { content: '‹'; margin-right: 6px; } /* „DALEJ” */ .btn-primary[data-next] { min-width: 140px; background: #2961AB; color: #fff; border: none; display: flex; justify-content: center; align-items: center; gap: 8px; } .btn-primary[data-next]::after { content: '›'; font-size: 18px; line-height: 1; } .btn-primary[data-next]:hover { background: #2058A4; } /* disabled (opcjonalnie – np. gdy walidacja) */ .btn-primary[data-next][disabled] { opacity: .45; cursor: not-allowed; } body:not(.wizard)::after { content: ''; position: fixed; inset: 0 0 0 50%; background: #F2F7FC; z-index: -1; } body:not(.wizard) #wizard-view { display: none; } body.wizard::before { content: ''; position: fixed; inset: 0 67% 0 0; background: #F2F7FC; z-index: -1; } @media (max-width: 900px) { .wizard-main { padding: 20px; } .wizard-aside{ display: none; } #wizard-view{ display: block; } body.wizard::before { background: #FFFFFF; } } .progress-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 16px; font-size: 14px; font-weight: 500; } .progress-bar-wrap { width: 100%; height: 4px; background: #e5e9ef; border-radius: 2px; overflow: hidden; } .progress-bar { height: 100%; width: 0; background: #2961AB; border-radius: inherit; transition: width .3s ease; } /* Button inside input field */ #nipField { position: relative; } #nipField input { padding-right: 120px; } #nipField .fetch-btn { position: absolute; top: 24px; right: 8px; transform: translateY(-50%); white-space: nowrap; height: 32px; line-height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; background-color: #2961AB; color: #ffffff; width: 120px; } h4 { font-weight: 600; font-size: 16px; } .wizard-step3 .option-grid { display: grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .wizard-step3 .option-pill { display: flex; align-items: center; justify-content: center; border: 1px solid #d0d5da; border-radius: 8px; padding: 12px 16px; cursor: pointer; } /* ---------- Select (industry) ---------- */ .wizard-step3 #industryField select { width: 100%; padding: 16px 20px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 16px; line-height: 1.2; appearance: none; /* usuwa domyślną strzałkę */ background: url("data:image/svg+xml;utf8,") right 16px center/16px 16px no-repeat; background-color: #fff; transition: border-color .2s; } .wizard-step3 #industryField{ height: 48px; } .wizard-step3 #industryField select:focus { outline: none; border-color: #2563eb; } /* ---------- Radio pills grid ---------- */ .wizard-step3 .option-grid { display: grid; gap: 20px 12px; grid-template-columns:repeat(3, 1fr); } /* each clickable pill */ .wizard-step3 .option-pill { position: relative; display: flex; align-items: center; justify-content: left; height: 56px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; font-size: 16px; padding-left: 40px; cursor: pointer; transition: all .15s; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); user-select: none; } .wizard-step3 .option-pill:hover { border-color: #94a3b8; } /* hide native radio */ .wizard-step3 .option-pill input { position: absolute; opacity: 0; } /* custom radio-circle */ .wizard-step3 .option-pill::before { content: ''; position: absolute; left: 16px; width: 16px; height: 16px; outline: 1px solid #8899aa; border: 2px solid #ffffff; border-radius: 50%; background: #fff; } .wizard-step3 .option-pill:hover::before { background-color: rgba(41, 97, 171, 0.2); } /* fill circle & highlight pill when checked */ .wizard-step3 .option-pill input:checked + span, .wizard-step3 .option-pill input:checked ~ span { /* fallback */ color: #1d4ed8; } .wizard-step3 .option-pill input:checked ~ *::before, .wizard-step3 .option-pill input:checked + span::before { border-color: #1d4ed8; box-shadow: inset 0 0 0 6px #1d4ed8; } @media (max-width: 480px) { .wizard-step3 .option-grid { grid-template-columns:1fr 1fr; } } .wizard-step3 .option-pill:has(input:checked) { border-color: rgba(41, 97, 171, 0.5); /* blue border */ background: rgba(243, 248, 255, 1); /* light blue fill */ box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); } .wizard-step3 .option-pill:has(input:checked)::before { background-color: rgba(41, 97, 171, 1); } .wizard-step3 .option-pill:has(input:checked) span { color: rgba(41, 97, 171, 1); } /* === TomSelect makeover – wygląd jak w mock-upie =============== */ body .ts-wrapper { width: 100%; } /* pełna szerokość */ body .ts-control { height: 48px; padding: 14px 52px 16px 20px; font-size: 16px; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: none; transition: border-color .2s, box-shadow .2s; } body .ts-control.focus { border-color: #1d4ed8; /* niebieski border */ box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); /* delikatny ring */ } /* strzałka w prawym rogu */ body .ts-wrapper.single .ts-control::after { content: ''; position: absolute; top: 50%; right: 20px; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \ viewBox='0 0 24 24' fill='none' stroke='%2399A2AD' \ stroke-width='2' stroke-linecap='round' stroke-linejoin='round' \ %3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center/16px; transition: transform .2s; } body .ts-wrapper.single.input-active .ts-control::after { transform: translateY(-50%) rotate(180deg); /* obrót po otwarciu */ } /* dropdown-lista */ body .ts-dropdown { border-radius: 0px 0px 8px 8px; border: 1px solid #cbd5e1; padding: 6px 0; margin-top: -7px; border-top: 1px solid transparent; box-shadow: none; box-sizing: border-box; } body .ts-dropdown .active { /* hover / wybór */ background: rgba(41, 97, 171, 0.1); color: rgba(41, 97, 171); } body .ts-dropdown .option[data-value=""] { display: none; } .field .ts-control input { font-size: 16px; height: auto; border-radius: unset; } body .ts-dropdown .no-results, body .ts-dropdown .option { /* hover / wybór */ font-size: 14px; line-height: 200%; padding-left: 20px; } .ts-dropdown::-webkit-scrollbar { width: 10px; /* szeroki ≥10 dla wygody */ } .ts-dropdown::-webkit-scrollbar-track { background: #ffffff; /* bardzo jasny tor */ border-radius: 6px; } .ts-dropdown::-webkit-scrollbar-thumb { background: #cfd3d8; /* jasny szary kciuk */ border-radius: 6px; } .ts-dropdown::-webkit-scrollbar-thumb:hover { background: #b7bcc2; /* subtelne przyciemnienie przy hoverze */ } /* Firefox */ .ts-dropdown { scrollbar-width: thin; /* cieńszy pasek */ scrollbar-color: #cfd3d8 #ffffff; /* kciuk / tor */ } .ts-wrapper.single.input-active .item { display: none; } .email-list .field { width: 100%; margin-bottom: 0px; } /* —— number list resets & spacing —— */ .email-list { list-style: none; counter-reset: row; margin: 0 0 2px 0; padding: 0; } .email-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .email-list li::before { counter-increment: row; content: counter(row) "."; width: 24px; flex-shrink: 0; font-size: 16px; } /* container z inputem i labelką */ .email-list .field{ display:flex; /* input wypełnia, przycisk po prawej */ align-items:center; gap:12px; } /* żeby input rozpychał wiersz */ .email-list .field input{ flex:1 1 auto; } /* wygląd przycisku "X" zgodny ze screenem */ .email-list .remove-btn{ width: 60px; height:48px; border:1px solid #cdd5df; border-radius: 8px; background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size: 24px; /* znak × będzie wyraźny */ padding:0; } .email-list .remove-btn:hover{ background:#f7f9fc; } .email-list .remove-btn:focus-visible{ outline:2px solid #3b82f6; outline-offset:2px; } /* jeśli używasz absolutnie pozycjonowanej labelki, to flex nie przeszkodzi */ .link-btn { background: none; border: none; color: #2563eb; font-weight: 600; cursor: pointer; padding: 0; } .link-btn:hover { text-decoration: underline; } /* === responsive grid: 2×2 na desktopie, 1×N mobilnie === */ .module-grid { display: grid; gap: 24px; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 32px; } /* === card look === */ .module-card { display: flex; padding: 16px 16px 6px 16px; min-height: 100px; border-radius: 15px; cursor: pointer; border: 1px solid transparent; transition: border-color .15s, box-shadow .15s, background .15s; /*align-items:flex-start;*/ gap: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .module-card .info { display: flex; flex-direction: column; } /* icon circle */ .module-card .icon { width: 64px; /* było 48 px */ height: 64px; border-radius: 50%; background: rgba(242, 247, 252, 1); flex: 0 0 64px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; } .module-card .icon i, .module-card .icon svg { width: 35px; height: 35px; stroke-width: 1.2; } /* text */ .module-card .title { font-weight: 600; font-size: 16px; margin-bottom: 6px; } .module-card .desc { font-size: 14px; color: #475569; line-height: 1.5; pointer-events: none; user-select: none; } /* hide native checkbox */ .module-card input { position: absolute; opacity: 0; } /* hover */ .module-card:hover { border-color: #94a3b8; box-shadow: 0 2px 4px rgba(0, 0, 0, .06); } /* checked state */ .module-card.checked .icon, .module-card input:checked + .icon, .module-card input:checked ~ .icon { /* fallback */ background: #ffffff; } .module-card.checked, .module-card:has(input:checked) { border-color: rgba(41, 97, 171, 0.5); background: rgba(238, 244, 255, 1); } .module-card:has(input:focus-visible) { outline: 2px solid #000000; outline-offset: 4px; border-color: #2961AB; } /* sample data checkbox */ .sample-check { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-top: 8px; } .sample-check input { width: 18px; height: 18px; cursor: pointer; } /* zastąp poprzedni .module-grid */ .module-grid { display: grid; gap: 24px; grid-template-columns:1fr; /* mobile: 1 kolumna */ } @media (min-width: 1280px) { /* desktop/tablet: dokładnie 2 */ .module-grid { grid-template-columns:repeat(2, 1fr); } } .small-paragraph { font-size: 12px; } #wizard-step5 .checkbox { color: rgba(18, 40, 68, 1); } #wizard-finish{ background-color: #FFFFFF; max-width: 500px; } .loader-wrapper { width: 428px; height: 200px; overflow: hidden; margin-bottom: 32px; position: relative; } @media (max-width: 900px) { .loader-wrapper { width: 214px; height: 100px; margin-left: auto; margin-right: auto; } #wizard-finish{ padding: 30px; padding-top: 00px; margin-top: auto; margin-bottom: auto; } } .loader-wrapper video { position: absolute; top: 50%; left: 50%; width: calc(100% + 2px); height: calc(100% + 2px); transform: translate(-50%, -50%); display: block; object-fit: cover; border: none; outline: none; filter: brightness(1.01); } .wizard-finish h1{ margin-bottom: 11px; } .wizard-finish h2{ margin-bottom: 25px; text-align: center; } .wizard-finish h1 img{ height: 30px; } #companyData{ margin-top: 12px; } #signupForm.loading, #companyData.loading { position: relative; pointer-events: none; opacity: .6; } #signupForm.loading::before, #companyData.loading::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.4); animation: fade .15s ease-out; } #signupForm.loading::after, #companyData.loading::after { content: ''; position: absolute; top: 50%; left: 50%; --size: 42px; width: var(--size); height: var(--size); border-radius: 50%; border: 4px solid transparent; border-top-color: #1976d2; box-shadow: 0 0 0 2px rgba(0,0,0,.1) inset; animation: spin .8s linear infinite; } @keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .grecaptcha-badge { width: 70px !important; overflow: hidden !important; transition: all 0.3s ease !important; left: 4px !important; } .grecaptcha-badge:hover { width: 256px !important; }