:root { --tiix-bg: #ffffff; --tiix-primary: #8f1010; --tiix-border: #e3b5b5; --tiix-text: #222222; --tiix-muted: #b1b5bc; --tiix-line: #e9e9e9; --tiix-facebook: #1877f2; --tiix-btn-w: 226.43px; --tiix-btn-w-vw: 58.06vw; } html, body { min-height: 100%; overflow-x: hidden; } body { margin: 0; background: var(--tiix-bg); color: var(--tiix-text); font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; } html, body, #main-wrapper, .page-wrapper, .body-wrapper, .body-wrapper > .container-fluid { background-color: var(--tiix-bg) !important; } #main-wrapper, .page-wrapper, .body-wrapper, .body-wrapper > .container-fluid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .body-wrapper > .container-fluid { padding-left: 0 !important; padding-right: 0 !important; } .tiix-only-mobile { display: revert; } .tiix-only-desktop { display: none !important; } .tiix-login-shell { width: 100%; max-width: none; min-height: 100vh; min-height: 100svh; min-height: 100dvh; margin: 0 auto; box-sizing: border-box; } .tiix-login-panel { width: 100%; min-height: 100dvh; padding: calc(clamp(12px, 3vw, 20px) + env(safe-area-inset-top, 0px)) clamp(16px, 5.6vw, 24px) calc(clamp(16px, 4vw, 24px) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; display: flex; flex-direction: column; } .tiix-login-aside { display: none; } .tiix-top { display: flex; align-items: center; justify-content: center; position: relative; min-height: clamp(72px, 18vw, 90px); margin-bottom: clamp(18px, 5vw, 26px); flex-shrink: 0; } .tiix-back { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: clamp(34px, 9vw, 40px); height: clamp(34px, 9vw, 40px); border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tiix-back svg { width: clamp(22px, 6vw, 24px); height: clamp(22px, 6vw, 24px); stroke: #2a2a2a; } .tiix-logo-center { display: flex; align-items: center; justify-content: center; } .tiix-logo-center img { height: clamp(36px, 10vw, 42px); width: auto; display: block; } .tiix-top-help { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: clamp(14px, 3.8vw, 15px); font-weight: 700; color: #2a2a2a; text-decoration: none; } .tiix-hero-title { color: var(--tiix-primary); font-size: clamp(26px, 7.2vw, 33px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; text-align: center; margin: 4px 0 clamp(18px, 5vw, 24px); } .tiix-form { display: flex; flex-direction: column; gap: clamp(6px, 1.6vw, 8px); width: 100%; max-width: 100%; } .tiix-field { display: flex; flex-direction: column; gap: clamp(6px, 1.8vw, 8px); } .tiix-label { font-size: clamp(14px, 3.8vw, 15px); font-weight: 500; color: #3e3e3e; } .tiix-input-wrap { position: relative; } .tiix-input { width: 100%; box-sizing: border-box; height: clamp(44px, 12vw, 48px); border: 1.6px solid var(--tiix-border); border-radius: 12px; background: #fff; padding: 0 clamp(14px, 4vw, 18px); font-size: 16px; color: #2d2d2d; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tiix-input::placeholder { color: var(--tiix-muted); } .tiix-input:focus { border-color: var(--tiix-primary); box-shadow: 0 0 0 1px rgba(143, 16, 16, 0.1); } .tiix-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .tiix-toggle svg { width: 22px; height: 22px; color: var(--tiix-primary); stroke: currentColor; } .tiix-alert { border-radius: 8px; padding: 10px 12px; font-size: clamp(12px, 3.4vw, 13px); font-weight: 600; background: #fee2e2; color: #991b1b; } .tiix-btn { margin-top: 4px; width: 100%; max-width: 100%; box-sizing: border-box; min-height: clamp(44px, 12vw, 48px); height: clamp(44px, 12vw, 48px); border: 0; border-radius: 10px; background: var(--tiix-primary); color: #fff; font-size: clamp(14px, 3.8vw, 15px); font-weight: 800; letter-spacing: 0.03em; cursor: pointer; text-transform: uppercase; display: flex; align-items: center; justify-content: center; text-decoration: none; -webkit-tap-highlight-color: transparent; } .tiix-btn:focus-visible { outline: 2px solid var(--tiix-primary); outline-offset: 2px; } .tiix-btn--ghost { background: #fff; color: var(--tiix-primary); border: 1.6px solid var(--tiix-primary); } .tiix-forgot { text-align: center; margin: clamp(10px, 3vw, 12px) 0 2px; } .tiix-forgot a { color: #2d2d2d; text-decoration: none; font-size: clamp(14px, 3.8vw, 15px); font-weight: 700; } .tiix-divider { margin: 2px 0; display: flex; align-items: center; justify-content: center; color: #6a4040; font-size: clamp(14px, 4vw, 16px); font-weight: 500; } .tiix-divider::before, .tiix-divider::after { content: none; } .tiix-social { display: flex; flex-direction: column; gap: clamp(8px, 2.5vw, 10px); margin-top: clamp(20px, 6vw, 28px); width: 100%; } .tiix-social-btn { width: 100%; min-height: clamp(44px, 12vw, 48px); height: clamp(44px, 12vw, 48px); border-radius: 14px; border: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; font-size: clamp(13px, 3.6vw, 15px); font-weight: 700; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .tiix-social-btn--google { background: #fff; color: #202020; border: 1px solid #ededed; } .tiix-social-btn--facebook { background: var(--tiix-facebook); color: #fff; } .tiix-social-btn--apple { background: #000; color: #fff; } .tiix-social-btn__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; } .tiix-social-btn__icon svg { width: 100%; height: 100%; display: block; } .tiix-login-head { margin-bottom: 28px; } .tiix-login-head__logo { height: 42px; width: auto; display: block; margin-bottom: 28px; } .tiix-login-head__title { margin: 0 0 8px; font-size: 32px; line-height: 1.15; font-weight: 800; color: #1f1f1f; letter-spacing: -0.02em; } .tiix-login-head__sub { margin: 0; font-size: 15px; line-height: 1.4; color: #6b7280; font-weight: 500; } .tiix-field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: #6b7280; pointer-events: none; display: none; align-items: center; justify-content: center; } .tiix-field-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; } .tiix-login-options { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 8px; flex-wrap: wrap; } .tiix-remember { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; user-select: none; } .tiix-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--tiix-primary); } .tiix-login-options__forgot { color: var(--tiix-primary); text-decoration: none; font-size: 14px; font-weight: 700; } .tiix-login-footer { margin: 20px 0 0; text-align: center; font-size: 15px; color: #4b5563; font-weight: 500; } .tiix-login-footer a { color: var(--tiix-primary); font-weight: 800; text-decoration: none; } .tiix-login-aside__title { margin: 0; color: #fff; font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; text-align: center; position: relative; z-index: 2; } .tiix-login-aside__mark { position: absolute; right: -8%; bottom: -6%; width: min(72%, 420px); opacity: 0.22; pointer-events: none; user-select: none; } .tiix-login-aside__mark img { width: 100%; height: auto; display: block; filter: brightness(0) invert(1); } @media (max-width: 767.98px) { .tiix-form > .tiix-btn, .tiix-form > .tiix-btn--ghost { width: min(var(--tiix-btn-w), var(--tiix-btn-w-vw)); max-width: 100%; align-self: center; } .tiix-social-btn { width: 100%; max-width: 100%; } } @media (max-width: 767.98px) and (orientation: landscape) { .tiix-login-panel { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .tiix-top { min-height: 56px; margin-bottom: 12px; } .tiix-hero-title { margin-bottom: 12px; font-size: clamp(22px, 5vw, 28px); } .tiix-social { margin-top: 16px; } } @media (max-width: 360px) { .tiix-login-panel { padding-left: 14px; padding-right: 14px; } .tiix-hero-title { font-size: 24px; } } @media (min-width: 768px) { html, body { height: 100%; overflow: hidden; } .tiix-only-mobile { display: none !important; } .tiix-only-desktop { display: block !important; } .tiix-btn .tiix-only-desktop, .tiix-label .tiix-only-desktop { display: inline !important; } .tiix-label .tiix-only-mobile { display: none !important; } .tiix-login-options.tiix-only-desktop { display: flex !important; } .tiix-field-icon.tiix-only-desktop { display: flex !important; } .tiix-login-shell { display: grid; grid-template-columns: 50% 50%; width: 100%; height: 100dvh; min-height: 100dvh; max-height: 100dvh; overflow: hidden; max-width: none; } .tiix-login-panel { height: 100%; min-height: 0; max-height: 100dvh; padding: 24px 40px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: border-box; } .tiix-login-panel__inner { width: 100%; max-width: 380px; flex-shrink: 0; } .tiix-login-head { margin-bottom: 14px; } .tiix-login-head__logo { height: 32px; margin-bottom: 14px; } .tiix-login-head__title { font-size: 28px; margin-bottom: 4px; } .tiix-login-head__sub { font-size: 13px; line-height: 1.35; } .tiix-form { width: 100%; max-width: 380px; gap: 0; } .tiix-form .tiix-alert { margin-bottom: 8px; padding: 8px 10px; font-size: 12px; } .tiix-form .tiix-field { margin-bottom: 8px; gap: 4px; } .tiix-form .tiix-login-options { margin: 0 0 8px; } .tiix-remember { font-size: 13px; gap: 6px; } .tiix-remember input { width: 16px; height: 16px; } .tiix-login-options__forgot { font-size: 13px; } .tiix-form > .tiix-btn { margin-top: 8px; } .tiix-login-footer { margin-top: 8px; font-size: 13px; } .tiix-form .tiix-divider { margin: 8px 0 6px; font-size: 13px; } .tiix-label { font-size: 13px; font-weight: 600; color: #374151; } .tiix-input { height: 44px; padding: 0 42px; font-size: 15px; background: #edf1f8; border: 1px solid #dbe4f0; border-radius: 10px; } .tiix-input:focus { border-color: var(--tiix-primary); box-shadow: 0 0 0 2px rgba(143, 16, 16, 0.12); } .tiix-toggle { right: 10px; width: 30px; height: 30px; } .tiix-btn { width: 100%; max-width: none; height: 44px; min-height: 44px; border-radius: 10px; font-size: 15px; text-transform: none; letter-spacing: 0; } .tiix-divider { font-size: 13px; } .tiix-social { width: 100%; margin-top: 0; gap: 6px; } .tiix-social-btn { width: 100%; min-height: 40px; height: 40px; font-size: 13px; border-radius: 10px; } .tiix-social-btn__icon { width: 18px; height: 18px; flex: 0 0 18px; } .tiix-login-aside { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; height: 100%; min-height: 0; background: linear-gradient(160deg, #a61a1a 0%, #7a1212 42%, #5c0e0e 100%); } .tiix-login-aside__title { font-size: 36px; font-weight: 700; } .tiix-login-aside__mark { right: 0; bottom: 0; width: min(58%, 380px); opacity: 0.2; } } @media (min-width: 1024px) { .tiix-login-panel { padding: 28px 48px; } .tiix-login-panel__inner, .tiix-form { max-width: 392px; } .tiix-login-aside__title { font-size: 38px; } } @media (min-width: 768px) and (max-height: 820px) { .tiix-login-panel { padding: 16px 32px; } .tiix-login-head { margin-bottom: 10px; } .tiix-login-head__logo { height: 28px; margin-bottom: 10px; } .tiix-login-head__title { font-size: 26px; } .tiix-form .tiix-field { margin-bottom: 6px; } .tiix-input, .tiix-btn { height: 40px; min-height: 40px; } .tiix-form > .tiix-btn { margin-top: 6px; } .tiix-login-footer { margin-top: 6px; } .tiix-form .tiix-divider { margin: 6px 0 4px; } .tiix-social-btn { height: 36px; min-height: 36px; } .tiix-social { gap: 5px; } } @media (min-width: 768px) and (min-height: 860px) { .tiix-login-panel { padding: 32px 48px; } .tiix-login-head__logo { height: 36px; margin-bottom: 16px; } .tiix-login-head__title { font-size: 30px; } .tiix-form .tiix-field { margin-bottom: 10px; } .tiix-input, .tiix-btn { height: 46px; min-height: 46px; } .tiix-social-btn { height: 42px; min-height: 42px; } } .lg--tech-login { min-height: 100vh; min-height: 100svh; grid-template-columns: minmax(0, 2fr) minmax(400px, 1fr); background: #fff; } .lg__intro--media { min-height: 100vh; min-height: 100svh; padding: 0; background: #f5f5f3; isolation: isolate; } .lg__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .lg__media-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, 0) 72%), linear-gradient(rgba(146, 21, 21, .24), rgba(146, 21, 21, .24)); pointer-events: none; } .lg__media-copy { position: absolute; z-index: 2; top: clamp(3rem, 7vh, 6rem); left: clamp(3rem, 6vw, 7rem); width: min(38vw, 500px); } .lg__media-logo { display: block; width: clamp(130px, 10vw, 190px); height: auto; margin-bottom: clamp(1.25rem, 3vh, 2.25rem); } .lg__media-copy h2 { margin: 0; color: #921515; font-size: clamp(2rem, 3.2vw, 4rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } .lg__form-side--light { min-height: 100vh; min-height: 100svh; padding: clamp(2rem, 4vw, 4rem); background: #fff; } .lg__form-side--light .lg__card { width: min(100%, 400px); color: #272727; } .lg__form-side--light .lg__brand { width: min(155px, 52%); margin-bottom: clamp(2rem, 5vh, 3.25rem); } .lg__form-side--light .lg__title { color: #921515; font-size: clamp(2rem, 2.8vw, 2.65rem); letter-spacing: -.025em; } .lg__form-side--light .lg__subtitle { color: #686868; margin-bottom: 1.65rem; } .lg__form-side--light .lg__label { color: #343434; font-weight: 600; } .lg__form-side--light .lg__input-icon { display: none; } .lg__form-side--light .lg__input { min-height: 50px; padding: .75rem 1rem; border: 1px solid #d9d9d9; border-radius: 9px; background: #fff; color: #232323; } .lg__form-side--light .lg__input--pw { padding-right: 3.25rem; } .lg__form-side--light .lg__input:focus { border-color: #921515; box-shadow: 0 0 0 3px rgba(146, 21, 21, .1); } .lg__pw-toggle svg { width: 20px; height: 20px; display: block; } .lg__form-side--light .lg__pw-toggle { color: #921515; } .lg__form-side--light .lg__meta { margin: .15rem 0 1rem; } .lg__form-side--light .lg__remember { color: #555; } .lg__form-side--light .lg__remember input { accent-color: #921515; } .lg__form-side--light .lg__submit { min-height: 50px; margin: .25rem 0 1.3rem; background: #9b1414; color: #fff; text-transform: uppercase; letter-spacing: .025em; } .lg__form-side--light .lg__submit:hover { background: #7f1010; color: #fff; } .lg__forgot--center { display: block; color: #333; text-align: center; } .lg__forgot--center:hover { color: #921515; } .lg__divider { margin: 1.7rem 0; color: #6b6b6b; font-size: .85rem; text-align: center; } .lg__create-account { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; box-sizing: border-box; border: 1.5px solid #9b1414; border-radius: 9px; color: #921515; font-size: .92rem; font-weight: 800; letter-spacing: .025em; text-decoration: none; text-transform: uppercase; transition: background .15s ease, color .15s ease; } .lg__create-account:hover { background: #9b1414; color: #fff; } .lg__form-side--light .lg__alert { border-color: #efcaca; background: #fff1f1; color: #8b1111; } @media (max-width: 991.98px) { .lg--tech-login { display: block; } .lg--tech-login .lg__intro--media { display: none; } .lg__form-side--light { min-height: 100vh; min-height: 100svh; padding: max(2rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(2rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px)); } .lg__form-side--light .lg__card { width: min(100%, 420px); } .lg__form-side--light .lg__brand { width: 135px; margin: 0 auto 2.25rem; } } @media (max-width: 575.98px) { .lg__form-side--light { align-items: flex-start; padding-top: max(1.5rem, env(safe-area-inset-top, 0px)); } .lg__form-side--light .lg__brand { margin-bottom: 1.75rem; } .lg__form-side--light .lg__title { font-size: 2rem; } .lg__form-side--light .lg__subtitle { margin-bottom: 1.35rem; } .lg__divider { margin: 1.35rem 0; } } .lg__appbar, .lg__title-app, .lg__social { display: none; } @media (max-width: 991.98px) { .lg__form-side--light { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0 0 max(2rem, env(safe-area-inset-bottom, 0px)); background: #fff; } .lg__appbar { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 6px; } .lg__appbar-back { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; color: #232323; text-decoration: none; } .lg__appbar-back svg { width: 24px; height: 24px; display: block; } .lg__appbar-logo { height: 24px; width: auto; margin: 0 auto; display: block; } .lg__appbar-help { flex: 0 0 auto; color: #232323; font-size: 12px; font-weight: 600; text-decoration: none; } .lg__form-side--light .lg__brand, .lg__form-side--light .lg__title, .lg__form-side--light .lg__subtitle { display: none; } .lg__form-side--light .lg__card { width: min(100%, 430px); margin: 0 auto; padding: 0 32px; box-sizing: border-box; background: transparent; box-shadow: none; } .lg__title-app { display: block; margin: 40px 0 34px; color: #871312; font-size: 28px; line-height: 36px; font-weight: 700; text-align: center; } .lg__form-side--light .lg__card form { display: flex; flex-direction: column; } .lg__form-side--light .lg__field { order: 1; margin-bottom: 18px; } .lg__form-side--light .lg__meta { order: 2; } .lg__form-side--light .lg__forgot--center { order: 3; } .lg__form-side--light .lg__submit { order: 4; } .lg__form-side--light .lg__divider { order: 5; } .lg__form-side--light .lg__create-account { order: 6; } .lg__form-side--light .lg__social { order: 7; } .lg__form-side--light .lg__label { margin-bottom: 6px; color: #000; font-size: 10px; line-height: 18px; font-weight: 300; } .lg__form-side--light .lg__input { height: 50px; min-height: 50px; padding: 0 44px 0 16px; border: .5px solid #871312; border-radius: 5px; background: #fff; font-size: 14px; font-weight: 300; color: #1f1f1f; } .lg__form-side--light .lg__input::placeholder { color: #b0b4bc; font-weight: 300; } .lg__form-side--light .lg__input-icon { display: none; } .lg__form-side--light .lg__meta { margin: 4px 0 0; font-size: 12px; } .lg__form-side--light .lg__forgot--center { margin: 22px 0 21px; color: #232323; font-size: 12px; font-weight: 600; text-align: center; } .lg__form-side--light .lg__submit { height: 50px; min-height: 50px; margin: 0; border-radius: 5px; background: #871312; font-size: 14px; font-weight: 700; text-transform: uppercase; } .lg__form-side--light .lg__divider { margin: 8px 0; color: #871312; font-size: 14px; font-weight: 300; } .lg__form-side--light .lg__divider::before, .lg__form-side--light .lg__divider::after { display: none; } .lg__form-side--light .lg__create-account { display: flex; align-items: center; justify-content: center; height: 50px; min-height: 50px; margin: 0; border: 1px solid #871312; border-radius: 5px; background: #fff; color: #871312; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; } .lg__social { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; } .lg__social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 44px; box-sizing: border-box; padding: 0 16px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 500; text-decoration: none; } .lg__social-btn > span:last-child { white-space: nowrap; } .lg__social-btn__icon { width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; } .lg__social-btn__icon svg { width: 100%; height: 100%; display: block; } .lg__social-btn--google { background: #fff; color: #1f1f1f; box-shadow: 0 2px 1.5px rgba(0, 0, 0, .17), 0 0 1.5px rgba(0, 0, 0, .08); } .lg__social-btn--facebook { background: #1877f2; color: #fff; font-weight: 700; } .lg__social-btn--apple { background: #000; color: #fff; } }