/* ============================================================================ Vanta AI — Auth & onboarding skin Shared components for every screen in the sign-in / signup / join flow. Derives entirely from tokens.css (import order: tokens first, then this). Screen anatomy (each auth template):
back link + optional wordmark
ONE mascot, correct pose

cream card: forms, notices ...or...
dark option cards ============================================================================ */ body.auth { margin: 0; min-height: 100vh; background: var(--space-night); color: var(--space-cloud); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.auth *, body.auth *::before, body.auth *::after { box-sizing: border-box; } body.auth a { color: inherit; text-decoration: none; } body.auth img { display: block; max-width: 100%; } /* Sparse static starfield — in-app, stars never move. */ body.auth::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.4) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 32% 55%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(1px 1px at 58% 25%, rgba(255,255,255,0.35) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 65%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.4) 50%, transparent 51%), radial-gradient(1px 1px at 18% 85%, rgba(255,255,255,0.3) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 68% 90%, rgba(255,255,255,0.3) 50%, transparent 51%); } /* ---------- Top strip ---------- */ .auth-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 720px; margin: 0 auto; padding: var(--space-4); } .auth-back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0.4rem 1rem; border-radius: var(--radius-pill); border: 2px solid rgba(251,244,228,0.28); color: rgba(251,244,228,0.9); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); transition: transform 260ms var(--ease-spring), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .auth-back:hover { border-color: var(--vanta-teal-bright); color: var(--vanta-teal-bright); transform: translateY(-2px); } .auth-back:active { transform: scale(0.97); transition: transform var(--duration-press) var(--ease-out); } .auth-back:focus-visible { outline: none; box-shadow: var(--focus-ring); } .auth-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 1.2rem; color: var(--space-cloud); } .auth-wordmark img { height: 36px; width: auto; } /* ---------- Main column ---------- */ .auth-main { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; padding: var(--space-2) var(--space-4) var(--space-10); display: flex; flex-direction: column; align-items: center; text-align: center; } .auth-main--wide { max-width: 560px; } .auth-mascot { width: clamp(110px, 30vw, 150px); height: auto; margin-bottom: var(--space-4); filter: drop-shadow(var(--glow-purple)); } .auth-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 6.5vw, var(--text-2xl)); line-height: var(--leading-tight); color: #fff; margin: 0 0 var(--space-2); text-wrap: balance; } .auth-sub { max-width: 40ch; margin: 0 0 var(--space-5); color: rgba(251,244,228,0.82); font-size: var(--text-sm); } /* ---------- Cream card (forms, notices) ---------- */ .auth-card { width: 100%; background: var(--space-cloud); color: var(--vanta-plum); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-5); text-align: center; } .auth-card__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--vanta-plum); margin: 0 0 var(--space-2); } .auth-card p { color: var(--vanta-plum); font-size: var(--text-sm); margin: 0 0 var(--space-3); } .auth-card p:last-child { margin-bottom: 0; } /* ---------- Buttons ---------- */ .vbtn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-comfortable); padding: 0.8rem 1.5rem; border-radius: var(--radius-pill); border: 2px solid transparent; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-base); cursor: pointer; transition: transform 260ms var(--ease-spring), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .vbtn:active { transform: scale(0.97); transition: transform var(--duration-press) var(--ease-out); } .vbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .vbtn--block { width: 100%; } .vbtn--primary { background: var(--vanta-purple); color: #fff; } .vbtn--primary:hover { background: var(--vanta-purple-deep); transform: translateY(-2px) scale(1.03); box-shadow: var(--glow-purple); } .vbtn--primary:active { transform: scale(0.97); box-shadow: none; } /* Ghost on dark backgrounds */ .vbtn--ghost { background: transparent; color: #fff; border-color: rgba(251,244,228,0.28); } .vbtn--ghost:hover { border-color: var(--vanta-teal-bright); color: var(--vanta-teal-bright); transform: translateY(-2px) scale(1.03); box-shadow: 0 0 20px rgba(78,197,212,0.22); } .vbtn--ghost:active { transform: scale(0.97); box-shadow: none; } /* Outline on cream cards */ .vbtn--onlight { background: #fff; color: var(--vanta-plum); border-color: rgba(61,35,82,0.3); } .vbtn--onlight:hover { border-color: var(--vanta-purple); color: var(--vanta-purple-deep); transform: translateY(-2px) scale(1.03); box-shadow: var(--glow-purple); } .vbtn--onlight:active { transform: scale(0.97); box-shadow: none; } /* Teal secondary (links/success-flavored actions) */ .vbtn--teal { background: var(--vanta-teal); color: #fff; } .vbtn--teal:hover { background: var(--vanta-teal-bright); color: var(--vanta-plum); transform: translateY(-2px) scale(1.03); box-shadow: var(--glow-teal); } /* Google sign-in: white pill, official G mark supplied as inline SVG. */ .vbtn--google { background: #fff; color: var(--vanta-plum); border-color: rgba(61,35,82,0.25); } .vbtn--google:hover { border-color: var(--vanta-purple); transform: translateY(-2px) scale(1.03); box-shadow: var(--glow-purple); } .vbtn--google svg { width: 20px; height: 20px; flex: none; } .auth-actions { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; } /* ---------- Choice cards (options screens) ---------- */ .choice-list { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; } .choice { display: flex; align-items: center; gap: var(--space-4); text-align: left; background: linear-gradient(160deg, rgba(61,35,82,0.55), rgba(30,18,48,0.75)); border: 1px solid rgba(155,95,201,0.25); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); transition: transform 260ms var(--ease-spring), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .choice:hover { transform: translateY(-4px); border-color: rgba(155,95,201,0.5); box-shadow: var(--glow-purple); } .choice:active { transform: scale(0.98); transition: transform var(--duration-press) var(--ease-out); } .choice:focus-visible { outline: none; box-shadow: var(--focus-ring); } .choice__body { flex: 1; min-width: 0; } .choice__title { display: block; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: #fff; margin: 0 0 0.2rem; line-height: var(--leading-tight); } .choice__desc { display: block; margin: 0; color: rgba(251,244,228,0.78); font-size: var(--text-sm); } .choice__arrow { flex: none; width: 12px; height: 12px; border-top: 3px solid rgba(251,244,228,0.6); border-right: 3px solid rgba(251,244,228,0.6); border-radius: 2px; transform: rotate(45deg); transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .choice:hover .choice__arrow { transform: rotate(45deg) translate(2px, -2px); border-color: #fff; } /* Flat planet marker per choice — same world as the mascot, no emoji. */ .choice__dot { position: relative; width: 48px; height: 48px; flex: none; } .choice__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; box-shadow: inset 4px 4px 0 rgba(251,244,228,0.28); } .choice--purple .choice__dot::before { background: var(--vanta-purple); box-shadow: inset 4px 4px 0 rgba(251,244,228,0.28), var(--glow-purple); } .choice--teal .choice__dot::before { background: var(--vanta-teal-bright); box-shadow: inset 4px 4px 0 rgba(251,244,228,0.28), var(--glow-teal); } .choice--orange .choice__dot::before { background: var(--vanta-orange); box-shadow: inset -6px -5px 0 rgba(61,35,82,0.45), 0 0 20px rgba(240,147,43,0.35); } .choice--teal .choice__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 16px; margin: -8px 0 0 -22px; border: 2px solid rgba(251,244,228,0.6); border-radius: 50%; transform: rotate(-18deg); } .choice--orange .choice__dot::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--space-cloud); } @media (hover: hover) and (pointer: fine) { .choice:hover .choice__dot { animation: hover-bounce 0.5s var(--ease-out); } } /* ---------- Inputs ---------- */ .auth-field { text-align: left; margin-bottom: var(--space-4); } .auth-field label { display: block; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm); color: var(--vanta-plum); margin-bottom: var(--space-1); } .auth-input { width: 100%; min-height: var(--touch-comfortable); padding: 0.7rem 1rem; border-radius: var(--radius-md); border: 2px solid rgba(61,35,82,0.25); background: #fff; color: var(--vanta-plum); font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-base); transition: border-color var(--duration-fast) var(--ease-out); } .auth-input::placeholder { color: rgba(61,35,82,0.4); } .auth-input:focus { outline: none; border-color: var(--vanta-purple); box-shadow: var(--focus-ring); } /* Class codes: big, centered, spaced — easy to read aloud across a classroom. */ .auth-input--code { text-align: center; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: 0.35em; text-transform: uppercase; } /* ---------- Messages ---------- */ .auth-error { display: none; background: rgba(232,93,106,0.14); border: 1px solid rgba(232,93,106,0.5); color: #F4A9B1; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: var(--space-3) 0 0; } .auth-error.on { display: block; } .auth-card .auth-error { color: #C0394B; background: rgba(232,93,106,0.12); } .auth-note { margin-top: var(--space-4); font-size: var(--text-xs); color: rgba(251,244,228,0.6); } /* §7.5 join-flow disclosure. A student agrees to this by joining, so it is readable body size at full contrast -- not fine print in a muted note. */ .auth-disclosure { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--vanta-teal-bright); border-radius: var(--radius-md); background: rgba(78,197,212,0.1); font-size: var(--text-sm); line-height: var(--leading-body); color: rgba(251,244,228,0.92); } .auth-note a, .auth-link { color: var(--vanta-teal-bright); font-weight: var(--weight-bold); } .auth-note a:hover, .auth-link:hover { text-decoration: underline; } .auth-card .auth-note { color: rgba(61,35,82,0.65); } .auth-card .auth-note a { color: var(--vanta-teal); } .auth-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: rgba(61,35,82,0.5); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.08em; text-transform: uppercase; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(61,35,82,0.2); } /* ---------- Entrance choreography (mascot → title → sub → card/choices) ---------- */ .pop { animation: auth-pop 0.56s var(--ease-out) both; } .rise-1 { animation: auth-rise var(--duration-slow) var(--ease-spring) 0.22s both; } .rise-2 { animation: auth-rise var(--duration-slow) var(--ease-spring) 0.34s both; } .rise-3 { animation: auth-rise var(--duration-slow) var(--ease-spring) 0.46s both; } .rise-4 { animation: auth-rise var(--duration-slow) var(--ease-spring) 0.58s both; } .rise-5 { animation: auth-rise var(--duration-slow) var(--ease-spring) 0.70s both; } @keyframes auth-pop { 0% { transform: scale(0.8); opacity: 0; } 50% { transform: scale(1.08); opacity: 1; } 75% { transform: scale(0.97); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes auth-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes hover-bounce { 0% { transform: translateY(0); } 30% { transform: translateY(-8px); } 55% { transform: translateY(0); } 75% { transform: translateY(-3px); } 100% { transform: translateY(0); } } @media (max-width: 430px) { .auth-card { padding: var(--space-4); } .choice { padding: var(--space-4); gap: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .pop, .rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: none; opacity: 1; transform: none; } .vbtn, .choice, .auth-back, .auth-input { transition: none; } .vbtn--primary:hover, .vbtn--ghost:hover, .vbtn--onlight:hover, .vbtn--teal:hover, .vbtn--google:hover, .choice:hover, .auth-back:hover { transform: none; } .choice:hover .choice__dot { animation: none; } } /* §7.5 — a student's written work in the class view. Quiet by default: it is evidence to read, not a score to scan. */ .table-row--answer { display: block; padding: var(--space-3) var(--space-4); } .col--answer { display: block; } .t-answer__label { margin: 0 0 var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-bold); color: rgba(251,244,228,0.6); } .t-answer { margin: 0 0 var(--space-2); padding-left: var(--space-3); border-left: 2px solid var(--vanta-teal); font-size: var(--text-sm); line-height: var(--leading-body); color: rgba(251,244,228,0.92); } .t-answer--revised { border-left-color: var(--vanta-orange); } /* Interim state on the under-13 class join (UNDER13_CLASS_DESIGN phases 0-4). */ .auth-callout { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--vanta-orange); border-radius: var(--radius-md); background: rgba(240,147,43,0.12); font-size: var(--text-sm); line-height: var(--leading-body); color: rgba(251,244,228,0.92); }