/** * Login route — premium shell styling + TaskCore wordmark (see login-elite.js). * Applies when . */ html.tc-login-elite { --tc-login-glow: color-mix(in srgb, var(--accent, #22c55e) 22%, transparent); } /* Full-viewport shell: deeper base, refined ambient light */ html.tc-login-elite #root > div.min-h-screen { background: radial-gradient(ellipse 120% 80% at 50% -30%, rgba(34, 197, 94, 0.07), transparent 52%), radial-gradient(ellipse 90% 60% at 100% 0%, rgba(56, 189, 248, 0.05), transparent 45%), linear-gradient(168deg, #05080c 0%, #0b1218 38%, #070a0e 100%) !important; } html.tc-login-elite #root .pointer-events-none.absolute.inset-0 { opacity: 0.5 !important; filter: saturate(1.05); } /* Main column: tighter vertical rhythm */ html.tc-login-elite #root main[class*='min-h-0'] { padding-top: clamp(1.5rem, 6vh, 2.75rem) !important; padding-bottom: clamp(1.5rem, 5vh, 2.5rem) !important; } /* Card: glass, crisp border, soft accent bloom */ html.tc-login-elite #root main .rounded-2xl.border { max-width: 26rem !important; padding: clamp(1.75rem, 4vw, 2.35rem) clamp(1.5rem, 4vw, 2.25rem) !important; border-radius: 1.125rem !important; border-color: color-mix(in srgb, var(--border, rgba(148, 163, 184, 0.14)) 100%, transparent) !important; background: linear-gradient( 165deg, color-mix(in srgb, var(--bg-card, #151c24) 96%, #fff 4%) 0%, color-mix(in srgb, var(--bg-elevated, #1a222d) 88%, #000 12%) 100% ) padding-box !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.045), 0 28px 56px -18px rgba(0, 0, 0, 0.55), 0 0 100px -40px var(--tc-login-glow) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Brand block (injected) */ .tc-login-brand { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; width: 100%; } .tc-login-brand::after { content: ''; width: min(5rem, 42%); height: 2px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent, #22c55e), transparent); opacity: 0.55; } .tc-login-wordmark-img { display: block; height: auto; width: auto; max-height: 3.15rem; max-width: min(15.5rem, 88vw); object-fit: contain; object-position: center; filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45)); } /* “Operations workspace” line (between logo and Sign in) */ html.tc-login-elite #root main .tc-login-brand + p.text-xs { margin-top: 0.5rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-size: 0.62rem !important; font-weight: 600 !important; color: color-mix(in srgb, var(--text-muted, #94a3b8) 88%, transparent) !important; } html.tc-login-elite #root main .tc-login-brand + p.text-xs img { opacity: 0.88; } /* Heading + subtitle */ html.tc-login-elite #root main h1.font-display { margin-top: 1.15rem !important; font-size: clamp(1.125rem, 2.8vw, 1.35rem) !important; font-weight: 650 !important; letter-spacing: -0.035em !important; } html.tc-login-elite #root main h1.font-display + p { margin-top: 0.35rem !important; font-size: 0.9rem !important; line-height: 1.45 !important; color: color-mix(in srgb, var(--text-muted, #94a3b8) 95%, var(--text, #f1f5f9)) !important; } /* Form fields */ html.tc-login-elite #root main label.block { font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: color-mix(in srgb, var(--text-muted, #94a3b8) 92%, transparent) !important; } html.tc-login-elite #root main input[type='text'], html.tc-login-elite #root main input[type='password'] { border-radius: 0.65rem !important; background: color-mix(in srgb, var(--bg-base, #0f1419) 92%, transparent) !important; border-color: color-mix(in srgb, var(--border, rgba(148, 163, 184, 0.14)) 100%, transparent) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } html.tc-login-elite #root main input[type='text']:focus, html.tc-login-elite #root main input[type='password']:focus { border-color: color-mix(in srgb, var(--accent, #22c55e) 55%, var(--border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #22c55e) 18%, transparent) !important; } /* Primary action */ html.tc-login-elite #root main button[type='submit'] { border-radius: 0.65rem !important; font-weight: 650 !important; letter-spacing: 0.03em !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 8px 28px color-mix(in srgb, var(--accent, #22c55e) 22%, transparent) !important; } /* Footer strip inside card */ html.tc-login-elite #root main .border-t { margin-top: 1.5rem !important; padding-top: 1.25rem !important; border-color: color-mix(in srgb, var(--border) 70%, transparent) !important; } html.tc-login-elite #root main .border-t p { line-height: 1.35 !important; } /* Injected: W | www.lightwatersolutions.co.uk (under company name) */ html.tc-login-elite #root main .tc-login-company-web { margin: 0.35rem 0 0 !important; text-align: center; font-size: 0.72rem !important; line-height: 1.35 !important; letter-spacing: 0.02em !important; color: color-mix(in srgb, var(--text-muted, #94a3b8) 92%, var(--text, #f1f5f9)) !important; } html.tc-login-elite #root main .tc-login-company-web a { color: color-mix(in srgb, var(--accent, #22c55e) 88%, var(--text-muted, #94a3b8)) !important; text-decoration: none; font-weight: 500; } html.tc-login-elite #root main .tc-login-company-web a:hover { text-decoration: underline; } /* Legal line below card */ html.tc-login-elite #root main p.break-words.px-1.text-center[class*='leading-snug'] { margin-top: 1.15rem !important; font-size: 0.65rem !important; letter-spacing: 0.03em !important; opacity: 0.88; } /* About (info) button — subtler */ html.tc-login-elite #root button[aria-label*='About'] { border-color: color-mix(in srgb, var(--border) 90%, transparent) !important; background: color-mix(in srgb, var(--bg-card) 75%, transparent) !important; } @media (prefers-reduced-motion: reduce) { html.tc-login-elite #root main input[type='text'], html.tc-login-elite #root main input[type='password'] { transition: none !important; } }