/* ============================================================ Login stage — scoped entirely to .login-stage. install.php and view.php's "link not available" card share .auth-page and .auth-card, so none of this touches those classes; the login screen gets its own markup and this sheet is only linked from login.php. ============================================================ */ .login-stage { --ls-ink: #0b0b0a; --ls-ink-soft: #131312; --ls-line: rgba(255, 255, 255, 0.11); --ls-line-lit: rgba(255, 255, 255, 0.22); --ls-text: #f7f6f1; --ls-muted: #9d9b93; --ls-pink: #ED0677; --ls-pink-lit: #ff4fa2; /* The brand pink is only 4.29:1 against white, just under AA for 14px label text, so the button uses a hair-darker pink and deepens on hover rather than brightening. Graphics keep the exact brand colour. */ --ls-pink-btn: #E30670; --ls-pink-btn-h:#C70462; /* svh keeps mobile browser chrome from clipping the panda off the bottom. */ min-height: 100vh; min-height: 100svh; margin: 0; display: flex; flex-direction: column; align-items: center; background: var(--ls-ink); color: var(--ls-text); position: relative; /* Only the horizontal axis is clipped. overflow:hidden here would propagate from to the viewport and make the page unscrollable, stranding the panda off-screen on short viewports (landscape phones). The drifting bars are clipped by .login-bars instead. */ overflow-x: hidden; } /* ---- Backdrop ------------------------------------------------ */ /* Two pools of colour: brand pink up top, a cooler counterweight low-left so the panda doesn't sit in dead black. */ .login-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(58vw 46vh at 78% -6%, rgba(237, 6, 119, 0.30), transparent 68%), radial-gradient(50vw 40vh at 10% 108%, rgba(90, 70, 200, 0.20), transparent 70%); } /* Drifting Gantt bars — the product's own motif used as wallpaper. Deliberately faint: this should register as texture, not as data. */ .login-bars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .login-bar { position: absolute; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)); animation: lsDrift 26s ease-in-out infinite; opacity: 0; } .login-bar.is-pink { background: linear-gradient(90deg, rgba(237,6,119,0.42), rgba(237,6,119,0.08)); } .login-bar:nth-child(1) { top: 9%; left: 4%; width: 20%; animation-delay: 0s; } .login-bar:nth-child(2) { top: 17%; left: 22%; width: 32%; animation-delay: -4.5s; } .login-bar:nth-child(3) { top: 26%; left: 12%; width: 15%; animation-delay: -9s; } .login-bar:nth-child(4) { top: 63%; left: 66%; width: 26%; animation-delay: -2s; } .login-bar:nth-child(5) { top: 72%; left: 74%; width: 17%; animation-delay: -13s; } .login-bar:nth-child(6) { top: 81%; left: 58%; width: 30%; animation-delay: -7s; } .login-bar:nth-child(7) { top: 45%; left: 80%; width: 14%; animation-delay: -17s; } .login-bar:nth-child(8) { top: 36%; left: -2%; width: 11%; animation-delay: -21s; } @keyframes lsDrift { 0% { transform: translate3d(-14px, 0, 0); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { transform: translate3d(14px, 0, 0); opacity: 0; } } /* ---- Content column ------------------------------------------ */ .login-inner { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding: 48px 20px 12px; } /* ---- Wordmark ------------------------------------------------ */ .login-brand { text-align: center; animation: lsRise .7s cubic-bezier(.2,.85,.25,1) backwards; } .login-wordmark { margin: 0; font-family: 'Fraunces', Georgia, 'Times New Roman', serif; /* Fraunces' display axes: soft terminals and the "wonk" alternates give it the playful edge a plain serif would miss. Ignored by the fallback. */ font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 140; font-weight: 600; font-size: clamp(46px, 10vw, 88px); line-height: .92; letter-spacing: -0.025em; color: var(--ls-text); } .login-wordmark .ls-tail { font-style: italic; color: var(--ls-pink-lit); } /* The wordmark sits on its own task bar, drawn left-to-right on load. */ .login-rule { height: 9px; border-radius: 999px; margin: 14px auto 0; width: clamp(150px, 30vw, 260px); background: linear-gradient(90deg, var(--ls-pink), var(--ls-pink-lit)); transform-origin: left center; animation: lsDraw 1s cubic-bezier(.2,.9,.25,1) .3s backwards; position: relative; } /* The little handle a real bar has when you can drag it. */ .login-rule::after { content: ''; position: absolute; right: -3px; top: 50%; width: 15px; height: 15px; border-radius: 50%; transform: translateY(-50%); background: var(--ls-pink-lit); box-shadow: 0 0 0 4px rgba(237, 6, 119, 0.22); } @keyframes lsDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } } .login-tagline { margin: 16px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ls-muted); animation: lsRise .7s cubic-bezier(.2,.85,.25,1) .12s backwards; } /* ---- Card ---------------------------------------------------- */ .login-card { width: min(370px, 100%); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ls-line); border-radius: 20px; padding: 26px 26px 28px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); animation: lsRise .7s cubic-bezier(.2,.85,.25,1) .2s backwards; } .login-card h2 { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-muted); } .login-note { margin: -10px 0 16px; font-size: 12.5px; color: var(--ls-muted); } /* Message pages carry prose rather than a form, so they read centred and the note needs its own spacing instead of hugging a heading above a field. */ .message-card { text-align: center; } .message-card h2 { text-transform: none; letter-spacing: -0.01em; font-size: 17px; color: var(--ls-text); margin-bottom: 10px; } .message-card .login-note { margin: 0 0 4px; font-size: 13px; line-height: 1.55; } .message-card .login-submit { margin-top: 18px; display: block; text-align: center; text-decoration: none; } .message-card .login-submit:hover { text-decoration: none; } .login-card form { display: flex; flex-direction: column; gap: 15px; } .login-stage label { font-size: 12.5px; font-weight: 600; color: var(--ls-muted); display: flex; flex-direction: column; gap: 7px; } .login-stage input[type="text"], .login-stage input[type="password"] { font: inherit; font-size: 14px; padding: 11px 13px; color: var(--ls-text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ls-line-lit); border-radius: 10px; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; } .login-stage input[type="text"]:focus, .login-stage input[type="password"]:focus { outline: none; border-color: var(--ls-pink); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(237, 6, 119, 0.26); } .login-stage input:disabled { opacity: .5; cursor: not-allowed; } .login-stage :focus-visible { outline-color: var(--ls-pink-lit); } .login-submit { margin-top: 3px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; padding: 12px 16px; color: #fff; background: var(--ls-pink-btn); border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .14s ease, transform .14s ease, box-shadow .14s ease; } .login-submit:hover:not(:disabled) { background: var(--ls-pink-btn-h); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(237, 6, 119, 0.38); } .login-submit:active:not(:disabled) { transform: translateY(0); } .login-submit:disabled { opacity: .45; cursor: not-allowed; } /* ---- Continue with Google ------------------------------------ */ /* The neutral treatment rather than Google's white button: on this stage a solid white block would read as the primary action and out-shout the pink one below it. The G itself keeps its four colours untouched, which is the part that has to stay recognisable. */ .login-stage .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; padding: 11px 16px; color: var(--ls-text); text-decoration: none; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ls-line-lit); border-radius: 10px; transition: background .14s ease, border-color .14s ease, transform .14s ease; } .login-stage .google-btn:hover, .login-stage .google-btn:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.34); transform: translateY(-1px); } .login-stage .google-btn:active { transform: translateY(0); } /* The mark is a fixed-size logo, not type — it must not stretch when the button's flex line is tight. */ .google-g { flex: none; display: block; } /* "or", with the rule drawn through it by the pseudo-elements either side. */ .login-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-muted); } .login-or::before, .login-or::after { content: ''; flex: 1; height: 1px; background: var(--ls-line); } .login-alert { padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 16px; background: rgba(230, 103, 103, 0.15); border: 1px solid rgba(230, 103, 103, 0.32); color: #ffb1b1; } /* ---- Panda --------------------------------------------------- */ .login-panda { position: relative; z-index: 1; display: block; padding: 8px 20px 30px; opacity: .92; transition: opacity .18s ease, transform .18s ease; animation: lsRise .8s cubic-bezier(.2,.85,.25,1) .34s backwards; } .login-panda:hover, .login-panda:focus-visible { opacity: 1; transform: translateY(-2px); } .login-panda .hpp-mark { display: block; height: 78px; width: auto; } /* No .pv wrapper here, so the shared dark rules don't apply — flip the type for this dark stage explicitly. */ .login-stage .pb-type { fill: #efeee7; } @keyframes lsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ---- Responsive ---------------------------------------------- */ @media (max-width: 640px) { .login-inner { gap: 24px; padding: 34px 18px 8px; } .login-panda .hpp-mark { height: 60px; } .login-panda { padding-bottom: 22px; } .login-bar { height: 7px; } } /* Short viewports (landscape phones): shrink rather than crush, and let the page scroll for whatever still doesn't fit. */ @media (max-height: 620px) { .login-stage { min-height: 0; } .login-inner { padding-top: 28px; gap: 20px; } .login-wordmark { font-size: clamp(38px, 7vw, 56px); } .login-panda { padding-bottom: 20px; } .login-panda .hpp-mark { height: 54px; } } @media (prefers-reduced-motion: reduce) { .login-bar, .login-rule, .login-brand, .login-card, .login-tagline, .login-panda { animation: none !important; } .login-bar { opacity: .8; } .login-submit:hover:not(:disabled), .login-panda:hover, .login-stage .google-btn:hover { transform: none; } }