/* ========================================================================== symtriMTA — Ekran uwierzytelniania v7.0 "Daylight" -------------------------------------------------------------------------- Jasny, nowoczesny split-screen: po lewej panel marki z zywa telemetria, po prawej czysta karta formularza. Obsluguje /login, /login/reset, /signup. ========================================================================== */ :root { --a-canvas: #ffffff; --a-surface: #ffffff; --a-surface-2: #f7f9f8; --a-line: #e3e8e6; --a-line-soft: #eef2f0; --a-line-str: #d2dad7; --a-ink: #0d1512; --a-ink-2: #3c4a45; --a-ink-3: #64756e; --a-ink-4: #93a19b; --a-ink-5: #c2ccc8; --a-brand: #4f46e5; --a-brand-600: #4338ca; --a-brand-soft: #eef2ff; --a-brand-line: #dcd9fb; --a-leaf: #10896a; --a-leaf-600: #0b6b53; --a-leaf-soft: #e9f6f1; --a-leaf-line: #bfe6d8; --a-err: #be123c; --a-err-soft: #fff1f2; --a-err-line: #fecdd3; --a-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --a-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --a-r-sm: 8px; --a-r-md: 11px; --a-r-lg: 15px; --a-r-xl: 20px; --a-r-pill: 999px; --a-sh-1: 0 1px 2px rgba(13, 21, 18, .05); --a-sh-2: 0 2px 6px rgba(13, 21, 18, .06), 0 1px 2px rgba(13, 21, 18, .04); --a-sh-3: 0 18px 44px rgba(13, 21, 18, .09), 0 3px 10px rgba(13, 21, 18, .04); --a-ring: 0 0 0 3px rgba(79, 70, 229, .14); } /* ========================================================================== 1. BAZA ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html.subPage { height: 100%; font-family: var(--a-font); font-size: 14px; background: var(--a-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html.subPage body.sub-body { margin: 0; padding: 0; min-height: 100vh; background: var(--a-canvas); color: var(--a-ink); font-family: var(--a-font); line-height: 1.5; } html.subPage h1, html.subPage h2, html.subPage p { margin: 0; } html.subPage ul { margin: 0; padding: 0; list-style: none; } html.subPage a { text-decoration: none; } /* ========================================================================== 2. UKLAD SPLIT-SCREEN ========================================================================== */ .login-split-container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: 100vh; } /* ========================================================================== 3. PANEL MARKI (lewa kolumna) ========================================================================== */ .login-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 40px 48px; background: radial-gradient(1000px 620px at 12% -8%, #ffffff 0%, rgba(255,255,255,0) 62%), radial-gradient(760px 620px at 92% 8%, #e7f4ee 0%, rgba(231,244,238,0) 66%), radial-gradient(900px 780px at 74% 104%, #e6ecfb 0%, rgba(230,236,251,0) 62%), linear-gradient(168deg, #f4faf7 0%, #eef5f2 46%, #eaf0f8 100%); border-right: 1px solid var(--a-line); } /* Delikatna siatka techniczna */ .login-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(13, 21, 18, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 21, 18, .045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(1100px 760px at 28% 26%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(1100px 760px at 28% 26%, #000 0%, transparent 78%); } /* Warstwy zdjec — nieaktywne do czasu podmiany fotografii. Wlacz dodajac klase `has-hero-photos` na . */ .login-slide { display: none; } body.has-hero-photos .login-slide { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; animation: heroFade 18s infinite; } body.has-hero-photos .login-slide-1 { background-image: url("/images/login/slide1.jpg"); animation-delay: 0s; } body.has-hero-photos .login-slide-2 { background-image: url("/images/login/slide2.jpg"); animation-delay: 6s; } body.has-hero-photos .login-slide-3 { background-image: url("/images/login/slide3.jpg"); animation-delay: 12s; } body.has-hero-photos .login-hero-overlay { position: absolute; inset: 0; background: linear-gradient(175deg, rgba(255,255,255,.88) 0%, rgba(246,251,249,.80) 48%, rgba(238,245,242,.92) 100%); } @keyframes heroFade { 0%, 2% { opacity: 0; transform: scale(1.04); } 6%, 31% { opacity: 1; transform: scale(1); } 36%,100% { opacity: 0; transform: scale(1.04); } } .login-hero-overlay { position: absolute; inset: 0; pointer-events: none; } .login-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 40px; } /* --------------------------- 3.1 Lockup marki ---------------------------- */ .login-brand-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .login-brand-logo { display: flex; align-items: center; gap: 12px; } .brand-icon-box { width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #6366f1 0%, #4338ca 100%); box-shadow: 0 6px 18px rgba(67, 56, 202, .26), inset 0 1px 0 rgba(255, 255, 255, .28); } .brand-icon-svg { width: 22px; height: 22px; } .brand-title { font-size: 19px; font-weight: 700; letter-spacing: -.028em; color: var(--a-ink); line-height: 1.15; } .brand-title .mta-accent { color: var(--a-brand); } .brand-subtitle { font-size: 11px; font-weight: 570; letter-spacing: .055em; text-transform: uppercase; color: var(--a-ink-4); margin-top: 2px; } .edition-badge { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 13px; border-radius: var(--a-r-pill); background: rgba(255, 255, 255, .78); border: 1px solid var(--a-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 630; letter-spacing: .02em; color: var(--a-ink-2); box-shadow: var(--a-sh-1); } .edition-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-leaf); } /* ------------------------- 3.2 Panel telemetrii -------------------------- */ .hero-telemetry { background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9); box-shadow: var(--a-sh-3); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-radius: var(--a-r-xl); padding: 20px 22px; max-width: 460px; } .hero-telemetry__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .hero-telemetry__label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--a-ink-4); } .hero-telemetry__live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--a-leaf); } .hero-telemetry__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; } .hero-metric__value { font-size: 22px; font-weight: 700; letter-spacing: -.035em; color: var(--a-ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .hero-metric__label { font-size: 11px; color: var(--a-ink-4); margin-top: 3px; } /* Miniaturowy wykres przepustowosci — czysty CSS */ .hero-spark { display: flex; align-items: flex-end; gap: 4px; height: 52px; } .hero-spark span { flex: 1; min-width: 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%); opacity: .9; animation: sparkFade .55s ease-out backwards; } .hero-spark span:nth-child(3n) { background: linear-gradient(180deg, #34d399 0%, #10896a 100%); } @keyframes sparkFade { from { opacity: 0; } to { opacity: .9; } } /* --------------------------- 3.3 Stopka hero ----------------------------- */ .login-hero-footer { display: flex; flex-direction: column; gap: 22px; } .hero-quote-box { max-width: 520px; } .status-pill { display: inline-flex; align-items: center; gap: 7px; height: 27px; padding: 0 12px; margin-bottom: 16px; border-radius: var(--a-r-pill); background: var(--a-leaf-soft); border: 1px solid var(--a-leaf-line); font-size: 11.5px; font-weight: 640; color: var(--a-leaf-600); } .status-pill .pulse-dot { background: var(--a-leaf); } .hero-main-title { font-size: 34px; font-weight: 700; letter-spacing: -.038em; line-height: 1.16; color: var(--a-ink); margin-bottom: 12px; } .hero-desc { font-size: 14.5px; line-height: 1.6; color: var(--a-ink-3); max-width: 50ch; } .hero-trust { display: flex; flex-wrap: wrap; gap: 8px; } .hero-trust__item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--a-r-pill); background: rgba(255, 255, 255, .7); border: 1px solid var(--a-line); font-size: 11.5px; font-weight: 570; color: var(--a-ink-3); } .hero-trust__item svg { width: 13px; height: 13px; color: var(--a-leaf); } /* Wskazniki karuzeli — widoczne tylko przy wlaczonych zdjeciach */ .carousel-progress-track { display: none; gap: 7px; } body.has-hero-photos .carousel-progress-track { display: flex; } .progress-bar-segment { flex: 1; height: 3px; border-radius: var(--a-r-pill); background: rgba(13, 21, 18, .1); overflow: hidden; } .progress-bar-segment .progress-bar-fill { display: block; height: 100%; width: 0; border-radius: var(--a-r-pill); background: var(--a-brand); animation: segFill 18s infinite; } .progress-bar-segment .fill-1 { animation-delay: 0s; } .progress-bar-segment .fill-2 { animation-delay: 6s; } .progress-bar-segment .fill-3 { animation-delay: 12s; } @keyframes segFill { 0% { width: 0; } 33% { width: 100%; } 34%, 100% { width: 0; } } @keyframes authPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } .pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; animation: authPulse 2.2s ease-in-out infinite; } /* ========================================================================== 4. PANEL FORMULARZA (prawa kolumna) ========================================================================== */ .login-panel { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--a-surface); } .login-card { width: 100%; max-width: 408px; } /* ------------------------------ 4.1 Naglowek ----------------------------- */ .auth-header { margin-bottom: 28px; } .auth-kicker { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; margin-bottom: 18px; border-radius: var(--a-r-pill); background: var(--a-brand-soft); border: 1px solid var(--a-brand-line); font-size: 11px; font-weight: 660; letter-spacing: .035em; color: var(--a-brand-600); text-transform: uppercase; } .auth-kicker svg { width: 13px; height: 13px; } .auth-title { font-size: 27px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; color: var(--a-ink); margin-bottom: 8px; } .auth-subtitle { font-size: 14px; line-height: 1.6; color: var(--a-ink-3); } /* ----------------------------- 4.2 Formularz ----------------------------- */ .auth-form { display: block; } .auth-form .form-group { margin-bottom: 16px; } .auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; } .form-label { font-size: 12.5px; font-weight: 620; color: var(--a-ink-2); } .forgot-password-link { font-size: 12.5px; font-weight: 570; color: var(--a-brand); } .forgot-password-link:hover { color: var(--a-brand-600); text-decoration: underline; text-underline-offset: 2px; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--a-ink-4); pointer-events: none; transition: color 140ms ease; } .auth-input { width: 100%; height: 44px; padding: 0 14px 0 40px; font-family: var(--a-font); font-size: 14px; font-weight: 500; color: var(--a-ink); background: var(--a-surface-2); border: 1px solid var(--a-line-str); border-radius: var(--a-r-md); appearance: none; outline: none; transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; } .auth-input::placeholder { color: var(--a-ink-5); font-weight: 400; } .auth-input:hover { border-color: #bcc7c2; } .auth-input:focus { background: #fff; border-color: var(--a-brand); box-shadow: var(--a-ring); } .input-wrapper:focus-within .input-icon { color: var(--a-brand); } .auth-submit-btn { position: relative; overflow: hidden; width: 100%; height: 46px; margin-top: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--a-font); font-size: 14.5px; font-weight: 620; color: #fff; background: linear-gradient(180deg, #5b52e8 0%, #4438c9 100%); border: 1px solid #3d33b8; border-radius: var(--a-r-md); box-shadow: 0 2px 8px rgba(67, 56, 202, .26), inset 0 1px 0 rgba(255, 255, 255, .18); cursor: pointer; transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease; } .auth-submit-btn:hover { filter: brightness(1.06); box-shadow: 0 6px 18px rgba(67, 56, 202, .3), inset 0 1px 0 rgba(255, 255, 255, .2); } .auth-submit-btn:active { transform: translateY(1px); } .auth-submit-btn:focus-visible { outline: none; box-shadow: var(--a-ring), 0 4px 14px rgba(67, 56, 202, .28); } .btn-arrow-icon { width: 17px; height: 17px; transition: transform 160ms cubic-bezier(.4, 0, .2, 1); } .auth-submit-btn:hover .btn-arrow-icon { transform: translateX(3px); } /* ---------------------------- 4.3 Karta planu ---------------------------- */ .saas-tier-badge-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; margin-bottom: 22px; background: var(--a-leaf-soft); border: 1px solid var(--a-leaf-line); border-radius: var(--a-r-lg); } .saas-tier-badge { display: inline-block; margin-bottom: 5px; padding: 2px 8px; border-radius: var(--a-r-sm); background: var(--a-leaf); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; } .saas-tier-limit { font-size: 12.8px; font-weight: 520; color: var(--a-ink-3); } .saas-tier-limit strong { color: var(--a-leaf-600); font-weight: 700; } .saas-tier-price { font-size: 19px; font-weight: 720; letter-spacing: -.03em; color: var(--a-leaf-600); } /* ------------------------------- 4.4 OIDC -------------------------------- */ .loginForm__oidcButton { margin-bottom: 20px; } .loginForm__oidcButton .button { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; background: var(--a-surface); color: var(--a-ink) !important; border: 1px solid var(--a-line-str); border-radius: var(--a-r-md); font-size: 14px; font-weight: 600; box-shadow: var(--a-sh-1); } .loginForm__oidcButton .button:hover { background: var(--a-surface-2); border-color: #bcc7c2; } .loginForm__divider { position: relative; height: 1px; background: var(--a-line); margin: 22px 0 18px; } .loginForm__localTitle { position: relative; top: -27px; width: fit-content; margin: 0 auto -14px; padding: 0 12px; background: var(--a-surface); font-size: 12px; color: var(--a-ink-4); text-align: center; } /* -------------------------- 4.5 Stopki i linki --------------------------- */ .auth-nav-switch { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--a-line-soft); text-align: center; font-size: 13.5px; color: var(--a-ink-3); } .auth-nav-switch a { margin-left: 5px; font-weight: 620; color: var(--a-brand); } .auth-nav-switch a:hover { color: var(--a-brand-600); text-decoration: underline; text-underline-offset: 2px; } .auth-security-footer { display: flex; align-items: center; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--a-line-soft); font-size: 12px; color: var(--a-ink-4); } .security-icon { width: 14px; height: 14px; color: var(--a-leaf); flex-shrink: 0; } /* ------------------------------ 4.6 Flash -------------------------------- */ .flashMessage { padding: 12px 15px; margin-bottom: 20px; border-radius: var(--a-r-md); border: 1px solid var(--a-line); background: var(--a-surface-2); font-size: 13.2px; font-weight: 520; color: var(--a-ink-2); } .flashMessage p { margin: 0; } .flashMessage--alert { background: var(--a-err-soft); border-color: var(--a-err-line); color: var(--a-err); } .flashMessage--notice { background: var(--a-leaf-soft); border-color: var(--a-leaf-line); color: var(--a-leaf-600); } .flashMessage--warning { background: #fffbeb; border-color: #fde68a; color: #b45309; } .error_messages, .errorExplanation { padding: 12px 15px; margin-bottom: 18px; background: var(--a-err-soft); border: 1px solid var(--a-err-line); border-radius: var(--a-r-md); color: var(--a-err); font-size: 13px; } .error_messages ul li, .errorExplanation ul li { list-style: disc; margin-left: 18px; } /* ========================================================================== 5. RESPONSYWNOSC ========================================================================== */ @media (max-width: 1080px) { .login-split-container { grid-template-columns: 1fr; } .login-hero { min-height: 340px; padding: 28px 28px 32px; border-right: 0; border-bottom: 1px solid var(--a-line); } .login-hero-content { gap: 26px; } .hero-telemetry { display: none; } .hero-main-title { font-size: 26px; } .login-panel { padding: 36px 24px 56px; } } @media (max-width: 560px) { .login-hero { padding: 22px 20px 26px; min-height: 0; } .hero-main-title { font-size: 22px; } .hero-desc { font-size: 13.5px; } .login-panel { padding: 30px 20px 44px; } .auth-title { font-size: 23px; } .auth-form .form-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .login-slide, .progress-bar-fill, .hero-spark span, .pulse-dot { animation: none !important; } .hero-spark span { opacity: .9; } }