/* styles-auth.css — the LANDING -> SIGN IN / SIGN UP -> DASHBOARD flow. ========================================================================== Loaded after styles-home.css. Three concerns, all keyed off classes that ui/authflow.js keeps on BOTH and (an inline script in the page head sets the one from last visit's hint before first paint, so a signed-out visitor never sees the app chrome flash by): .signed-out Clerk is enabled and nobody is signed in. Only the landing page is reachable, so the application chrome (sidebar, top bar, mobile bottom nav, tutor launcher) is hidden and the page is the marketing page alone. .auth-unknown First visit, /api/auth/config not answered yet: bare landing, no chrome (it would flash, then vanish, if Clerk is on). .auth-pending A returning, previously signed-in visitor whose Clerk session has not been confirmed yet. The landing page is hidden (they are about to be sent to the dashboard) so they never see it flash past. (neither) Clerk disabled, or signed in: the shell is exactly the app it always was. .public-page The current view is a STANDALONE page — landing, signin or signup (ui/router.js PUBLIC_VIEWS). ui/appController.js go() keeps it on and ; the head snippet sets it on before first paint from the URL. It hides the chrome regardless of Clerk mode: a guest with Clerk off still sees the landing page, /signin and /signup without a sidebar. Also: the Clerk-mode account control inside the profile menu, the "sign-in service unavailable" banner, and the /signin + /signup pages (.ap-*). ========================================================================== */ /* --------------------------------------------------- signed-out: no chrome */ .signed-out #shell-sidebar, .signed-out #shell-topbar, .signed-out .shell-bottomnav, .signed-out #shell-bottomnav, .signed-out .shell-drawer-bg, .signed-out .header-contextual-strip, .signed-out header.bar, .signed-out #copilot-host, .signed-out .lab-bg, .public-page #shell-sidebar, .public-page #shell-topbar, .public-page .shell-bottomnav, .public-page #shell-bottomnav, .public-page .shell-drawer-bg, .public-page .header-contextual-strip, .public-page header.bar, .public-page #copilot-host, .public-page .lab-bg, .auth-unknown #shell-sidebar, .auth-unknown #shell-topbar, .auth-unknown .shell-bottomnav, .auth-unknown #shell-bottomnav, .auth-unknown .shell-drawer-bg, .auth-unknown .header-contextual-strip, .auth-unknown header.bar, .auth-unknown #copilot-host, .auth-unknown .lab-bg { display: none !important; } /* The bar and the mobile top padding it reserved are gone with it. */ .signed-out #shell-content, .auth-unknown #shell-content, .public-page #shell-content { padding-top: 0 !important; } .signed-out #shell-content .app, .auth-unknown #shell-content .app, .public-page #shell-content .app { padding-top: 0 !important; } /* Standalone pages own the whole viewport: no centred 1400px column, no inset. */ .public-page #shell-content .app { max-width: none !important; margin: 0 !important; padding: 0 !important; } .public-page #shell-content { padding: 0 !important; background: transparent; } .public-page #shell { padding: 0 !important; gap: 0 !important; } /* Only the three public views exist while signed out (or before Clerk has answered). A stale .on on another view (a deep link let through early) must never show through. */ .signed-out .view:not(#view-landing):not(#view-signin):not(#view-signup), .auth-unknown .view:not(#view-landing):not(#view-signin):not(#view-signup) { display: none !important; } /* ------------------------------------------- pending: hold the public pages */ .auth-pending #view-landing, .auth-pending #view-signin, .auth-pending #view-signup { visibility: hidden; } /* The sign-in page says why sign-in is unavailable itself (with a Retry). */ .auth-page .auth-banner { display: none !important; } /* -------------------------------------------- Clerk account control (menu) */ .auth-control.auth-clerk { display: block; width: 100%; } .auth-clerk-actions { display: flex; gap: 8px; align-items: center; } .auth-clerk-actions .btn { flex: 1; justify-content: center; min-height: 36px; } .auth-chip-clerk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; } .auth-chip-clerk .auth-clerk-actions { grid-column: 1 / -1; margin-top: 6px; } .auth-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: block; background: var(--accent-soft); color: var(--accent); } .auth-avatar-initial { display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--sh-font, sans-serif); } .auth-who { display: flex; flex-direction: column; min-width: 0; } .auth-who .auth-name { overflow: hidden; text-overflow: ellipsis; } .auth-email { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Inside the profile menu the header above already names the learner. */ .pm-auth .auth-chip-clerk { grid-template-columns: 1fr; } .pm-auth .auth-chip-clerk .auth-avatar, .pm-auth .auth-chip-clerk .auth-who, .pm-auth .auth-chip-clerk .pill { display: none; } .pm-auth .auth-chip-clerk .auth-clerk-actions { margin-top: 0; } .pm-auth .auth-clerk-actions .btn { font-family: var(--sh-font); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 9px; } .pm-auth .auth-clerk-actions .btn.primary { border: 1px solid transparent; background: var(--accent); color: var(--on-accent); } .auth-clerk-error { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--signal, #c0392b); } /* Profile avatars (sidebar card, top bar, menu head) can carry a real photo. */ .avatar-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; } /* --------------------------------------------- sign-in unavailable banner */ .auth-banner { /* Above the toast, clear of the landing page's own header. */ position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #111); border: 1px solid var(--signal, #c0392b); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .35); font: 500 13.5px/1.4 var(--sh-font, sans-serif); } .auth-banner[hidden] { display: none; } .auth-banner .btn { flex: none; } /* ===================================================================== /signin and /signup — standalone split pages (ui/authpages.js) Bright and clean: an indigo -> violet accent on white / lavender, the same family as the landing page. Everything is scoped under .ap, tokens first, so the palette can be re-pointed in one place. ===================================================================== */ #view-signin.ap-host, #view-signup.ap-host { /* The page owns the window: independent of #shell-content's padding, scroll container and the mobile top-bar offset. */ position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; background: #fff; } .ap { --ap-indigo: #4F46E5; --ap-violet: #7C3AED; --ap-grad: linear-gradient(120deg, #4F46E5 0%, #7C3AED 100%); --ap-grad-hover: linear-gradient(120deg, #4338CA 0%, #6D28D9 100%); --ap-panel: #FFFFFF; --ap-card: #FFFFFF; --ap-brand-bg: linear-gradient(155deg, #EEF0FF 0%, #E7E3FF 52%, #F4E9FF 100%); --ap-ink: #0F1330; --ap-ink-2: #3A4266; --ap-ink-3: #596287; --ap-line: rgba(49, 46, 129, .16); --ap-soft: rgba(99, 102, 241, .10); --ap-input: #FFFFFF; --ap-shadow: 0 1px 2px rgba(30, 27, 90, .06), 0 24px 48px -28px rgba(49, 46, 129, .35); --ap-danger: #B42318; --ap-danger-bg: #FEECEB; --ap-orbit: rgba(79, 70, 229, .42); --ap-grid: rgba(79, 70, 229, .07); display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; color: var(--ap-ink); background: var(--ap-panel); font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ap { --ap-indigo: #8B93FF; --ap-violet: #B79BFF; --ap-grad: linear-gradient(120deg, #6366F1 0%, #8B5CF6 100%); --ap-grad-hover: linear-gradient(120deg, #7376F5 0%, #9A6DFA 100%); --ap-panel: #0B0D1E; --ap-card: #131631; --ap-brand-bg: linear-gradient(155deg, #12153A 0%, #1B1548 55%, #241455 100%); --ap-ink: #EEF0FF; --ap-ink-2: #B8BEE0; --ap-ink-3: #8D95BC; --ap-line: rgba(160, 168, 255, .20); --ap-soft: rgba(139, 147, 255, .14); --ap-input: #0E1029; --ap-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 24px 56px -28px rgba(0, 0, 0, .8); --ap-danger: #FF9A92; --ap-danger-bg: rgba(255, 110, 100, .12); --ap-orbit: rgba(160, 168, 255, .45); --ap-grid: rgba(160, 168, 255, .07); } :root:not([data-theme="light"]) #view-signin.ap-host, :root:not([data-theme="light"]) #view-signup.ap-host { background: #0B0D1E; } } :root[data-theme="dark"] .ap { --ap-indigo: #8B93FF; --ap-violet: #B79BFF; --ap-grad: linear-gradient(120deg, #6366F1 0%, #8B5CF6 100%); --ap-grad-hover: linear-gradient(120deg, #7376F5 0%, #9A6DFA 100%); --ap-panel: #0B0D1E; --ap-card: #131631; --ap-brand-bg: linear-gradient(155deg, #12153A 0%, #1B1548 55%, #241455 100%); --ap-ink: #EEF0FF; --ap-ink-2: #B8BEE0; --ap-ink-3: #8D95BC; --ap-line: rgba(160, 168, 255, .20); --ap-soft: rgba(139, 147, 255, .14); --ap-input: #0E1029; --ap-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 24px 56px -28px rgba(0, 0, 0, .8); --ap-danger: #FF9A92; --ap-danger-bg: rgba(255, 110, 100, .12); --ap-orbit: rgba(160, 168, 255, .45); --ap-grid: rgba(160, 168, 255, .07); } :root[data-theme="dark"] #view-signin.ap-host, :root[data-theme="dark"] #view-signup.ap-host { background: #0B0D1E; } .ap *, .ap *::before, .ap *::after { box-sizing: border-box; } /* ------------------------------------------------------------ brand panel */ .ap-brand { position: relative; display: flex; flex-direction: column; padding: 36px clamp(28px, 5vw, 64px) 32px; background: linear-gradient(var(--ap-grid) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--ap-grid) 1px, transparent 1px) 0 0 / 44px 44px, var(--ap-brand-bg); overflow: hidden; } .ap-logo { display: inline-flex; align-items: center; gap: 11px; align-self: flex-start; color: var(--ap-ink); text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.01em; } .ap-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--ap-grad); color: #fff; font: 600 14px/1 "IBM Plex Mono", ui-monospace, monospace; box-shadow: 0 8px 20px -8px rgba(79, 70, 229, .7); } .ap-logo:focus-visible, .ap-back:focus-visible, .ap-switch a:focus-visible { outline: 2px solid var(--ap-indigo); outline-offset: 3px; border-radius: 8px; } .ap-brand-body { position: relative; z-index: 1; margin: auto 0; padding: 44px 0 20px; max-width: 520px; } .ap-tagline { margin: 0 0 28px; font-size: clamp(30px, 3.3vw, 46px); line-height: 1.08; font-weight: 700; letter-spacing: -.025em; color: var(--ap-ink); } .ap-grad { background: var(--ap-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .ap-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .ap-points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; } .ap-tick { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--ap-grad); color: #fff; } .ap-points li > span:last-child { display: grid; gap: 2px; } .ap-points b { font-weight: 700; font-size: 16.5px; color: var(--ap-ink); } .ap-points span span { color: var(--ap-ink-2); font-size: 15px; line-height: 1.45; } .ap-motif-wrap { position: absolute; right: -36px; bottom: -44px; width: min(300px, 38%); aspect-ratio: 1; pointer-events: none; opacity: .95; } .ap-motif { width: 100%; height: 100%; display: block; overflow: visible; } .ap-orbit { fill: none; stroke: var(--ap-orbit); stroke-width: 1.3; } .ap-electron { fill: var(--ap-violet); filter: drop-shadow(0 0 6px var(--ap-violet)); } .ap-core { fill: var(--ap-indigo); filter: drop-shadow(0 0 10px var(--ap-violet)); } /* --------------------------------------------------------------- main side */ .ap-main { display: flex; flex-direction: column; min-width: 0; padding: 22px clamp(20px, 4vw, 56px) 40px; background: var(--ap-panel); } .ap-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ap-back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px; color: var(--ap-ink-2); text-decoration: none; font-weight: 600; font-size: 14.5px; } .ap-back:hover { color: var(--ap-indigo); } .ap-theme .theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ap-soft); border: 1px solid var(--ap-line); } .ap-theme .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border-radius: 999px; color: var(--ap-ink-3); background: none; border: 0; cursor: pointer; } .ap-theme .theme-btn:hover { color: var(--ap-ink); } .ap-theme .theme-btn[aria-pressed="true"] { background: var(--ap-grad); color: #fff; } .ap-theme .theme-btn:focus-visible { outline: 2px solid var(--ap-indigo); outline-offset: 2px; } .ap-card-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 0 8px; } .ap-card { width: 100%; max-width: 440px; padding: 34px 32px 26px; background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 20px; box-shadow: var(--ap-shadow); } /* Clerk draws its own card: don't nest one inside another. */ .ap-card[data-phase="clerk"] { max-width: 460px; padding: 0; background: transparent; border: 0; box-shadow: none; } .ap-card[data-phase="clerk"] .ap-switch { display: none; } .ap-clerk { display: flex; justify-content: center; min-height: 280px; } .ap-clerk > * { max-width: 100%; } .ap-title { margin: 0 0 6px; font-size: 27px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--ap-ink); } .ap-sub { margin: 0 0 22px; color: var(--ap-ink-3); font-size: 15px; line-height: 1.45; } .ap-switch { margin: 22px 0 0; text-align: center; color: var(--ap-ink-3); font-size: 14.5px; } .ap-switch a { color: var(--ap-indigo); font-weight: 700; text-decoration: none; } .ap-switch a:hover { text-decoration: underline; } /* legacy email/password form, restyled inside the card */ .ap .auth-form { gap: 14px; } .ap .auth-field { gap: 6px; font-size: 13px; font-weight: 600; color: var(--ap-ink-2); } .ap .auth-field input { width: 100%; height: 46px; padding: 0 14px; color: var(--ap-ink); background: var(--ap-input); border: 1px solid var(--ap-line); border-radius: 11px; font: 500 15px/1 "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; transition: border-color .15s, box-shadow .15s; } .ap .auth-field input:hover { border-color: var(--ap-orbit); } .ap .auth-field input:focus { outline: none; border-color: var(--ap-indigo); box-shadow: 0 0 0 4px var(--ap-soft); } .ap .auth-hint { font-size: 12.5px; color: var(--ap-ink-3); line-height: 1.45; } .ap .auth-error { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ap-danger); background: var(--ap-danger-bg); } .ap .auth-actions { display: block; margin-top: 2px; } .ap .auth-actions .btn { width: 100%; height: 48px; justify-content: center; border: 0; border-radius: 12px; background: var(--ap-grad); color: #fff; font: 700 15.5px/1 "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 10px 22px -12px rgba(79, 70, 229, .8); cursor: pointer; transition: background .15s, transform .1s; } .ap .auth-actions .btn:hover:not(:disabled) { background: var(--ap-grad-hover); } .ap .auth-actions .btn:active:not(:disabled) { transform: scale(.985); } .ap .auth-actions .btn:disabled { opacity: .65; cursor: default; } .ap .auth-actions .btn:focus-visible { outline: 2px solid var(--ap-indigo); outline-offset: 3px; } .ap .ap-demo { width: 100%; height: 46px; justify-content: center; color: var(--ap-indigo); background: var(--ap-soft); border: 1px solid var(--ap-line); border-radius: 12px; font: 700 14.5px/1 "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; } .ap .ap-demo:hover:not(:disabled) { background: var(--ap-indigo); color: #fff; border-color: transparent; } .ap .ap-demo:disabled { opacity: .65; cursor: default; } .ap-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ap-ink-3); font-size: 12.5px; } .ap-or::before, .ap-or::after { content: ""; flex: 1; height: 1px; background: var(--ap-line); } /* loading skeleton + failure notice */ .ap-skel { display: grid; gap: 12px; padding-top: 6px; } .ap-skel i { display: block; height: 46px; border-radius: 11px; background: linear-gradient(90deg, var(--ap-soft) 25%, var(--ap-line) 50%, var(--ap-soft) 75%) 0 0 / 220% 100%; animation: ap-shimmer 1.4s linear infinite; } .ap-skel i:last-child { height: 48px; opacity: .8; } @keyframes ap-shimmer { to { background-position: -220% 0; } } .ap-alert { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; color: var(--ap-danger); background: var(--ap-danger-bg); border: 1px solid color-mix(in srgb, var(--ap-danger) 35%, transparent); } .ap-alert .btn { border: 0; border-radius: 10px; background: var(--ap-grad); color: #fff; font: 700 14px/1 "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif; padding: 10px 18px; cursor: pointer; letter-spacing: 0; text-transform: none; } @media (prefers-reduced-motion: reduce) { .ap-skel i { animation: none; } } :root[data-reduced-motion="true"] .ap-skel i { animation: none; } /* -------------------------------------------------------- tablet and phone */ @media (max-width: 900px) { .ap { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .ap-brand { padding: 20px 20px 22px; } .ap-brand-body { margin: 0; padding: 18px 0 0; } .ap-tagline { margin: 0; font-size: clamp(22px, 6vw, 30px); } .ap-points, .ap-motif-wrap { display: none; } .ap-main { padding: 12px 16px 32px; } .ap-card-wrap { align-items: flex-start; padding-top: 12px; } .ap-card { padding: 26px 20px 20px; border-radius: 18px; } }