/* ============================================================ * Refined typography + animations — used by all 5 portal pages. * Scoped under `.refined` (added to ) so legacy CSS in * style.css doesn't fight us when we override .field-label, etc. * * Design intent: chatgpt / claude / lungchat feel — Inter only, * sentence-case labels, restrained gradients, present-but-quiet * motion. The "AI-generated" look comes from heavy display fonts * + uppercase mono + loud violet→teal gradients everywhere. * ============================================================ */ .refined, .refined * { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; } /* CRITICAL: Material Symbols Outlined needs to keep its own font, otherwise * the icon glyphs render as the literal text ("visibility", "arrow_back"). * This higher-specificity selector wins over the .refined * rule above. */ .refined .material-symbols-outlined, .refined span.material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .refined body, .refined main { background:#FFFFFF; color:#0B0F1A; } /* --- Labels: clean sentence-case (no UPPERCASE MONO) --- */ .refined .field-label { font-family: 'Inter', sans-serif !important; font-size: 13px; font-weight: 500; text-transform: none !important; letter-spacing: 0 !important; color: #475569; margin-bottom: 6px; } /* --- Inputs: thinner border, softer focus ring --- */ .refined .field-input, .refined .field-select, .refined .field-textarea { font-size: 15px; padding: 11px 14px; border-radius: 8px; border-color: #E2E8F0; background:#FFFFFF; transition: border-color .15s, box-shadow .2s cubic-bezier(.2,.7,.2,1), background-color .15s; } .refined .field-input:focus, .refined .field-select:focus, .refined .field-textarea:focus { border-color: #6E36F0; box-shadow: 0 0 0 3px rgba(110, 54, 240, 0.12); } .refined .field-input::placeholder, .refined .field-textarea::placeholder { color:#94a3b8; font-weight: 400; } /* --- Tabs: clean, no monospace --- */ .refined .tab-btn { font-family: 'Inter', sans-serif !important; font-size: 14px; font-weight: 500; text-transform: none !important; letter-spacing: 0 !important; padding-bottom: 12px; color: #94a3b8; transition: color .2s, border-color .2s; } .refined .tab-btn.active-tab { color: #0B0F1A; font-weight: 600; border-bottom-color: #0B0F1A; } .refined .tab-btn:hover { color: #0B0F1A; } /* --- Primary CTA: dark navy solid, subtle hover --- */ .refined .btn-primary { background: #0B0F1A; color:#fff; font-weight: 550; font-size: 15px; padding: 12px 20px; border-radius: 10px; box-shadow: 0 1px 2px rgba(11,15,26,.08); letter-spacing: -.01em; transition: background-color .15s, box-shadow .2s, transform .15s; } .refined .btn-primary:hover:not(:disabled) { background:#1A1F2E; transform: none; box-shadow: 0 4px 12px rgba(11,15,26,.12); filter: none; } .refined .btn-primary:active:not(:disabled) { transform: scale(.98); } .refined .btn-secondary { font-weight: 500; font-size: 14px; padding: 11px 20px; border-radius: 10px; } /* --- Card: tight radius, soft shadow, lifts on hover --- */ .refined .login-card { background:#FFFFFF; border: 1px solid #EEF0F4; border-radius: 14px; box-shadow: 0 1px 3px rgba(11,15,26,.04), 0 6px 24px -8px rgba(11,15,26,.06); padding: 36px; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1); } .refined .login-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,15,26,.04), 0 12px 32px -10px rgba(11,15,26,.10); } /* --- Headings: tight, no display font --- */ .refined h1.brand-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; } .refined h2.hero { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .refined h3.card-title { font-size: 22px; font-weight: 600; letter-spacing: -.015em; } .refined p.body-md { font-size: 15px; line-height: 1.55; } .refined p.body-sm { font-size: 13.5px; line-height: 1.5; color:#64748b; } /* --- Stats badges (dark panel) --- */ .refined .stat-pill { display:inline-flex; align-items:center; gap: 7px; padding: 6px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 9999px; font-size: 12.5px; font-weight: 500; color:#fff; transition: background-color .2s, border-color .2s, transform .2s; } .refined .stat-pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); transform: translateY(-1px); } /* --- Utility links (Need access?, Back to sign in, Already have account?) --- */ .refined .util-link { font-size: 12.5px; font-weight: 500; color: #64748b; text-decoration: none; transition: color .15s; display: inline-flex; align-items: center; gap: 6px; } .refined .util-link:hover { color: #0B0F1A; } .refined .util-link .material-symbols-outlined { transition: transform .2s cubic-bezier(.2,.7,.2,1); } .refined .util-link:hover .material-symbols-outlined { transform: translateX(2px); } /* --- Home button: explicit visible pill, more affordance than a plain link. Used in the top-left of every portal page's form panel. --- */ .refined .home-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 11px; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 9999px; font-size: 13px; font-weight: 500; color: #0B0F1A; text-decoration: none; transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s; box-shadow: 0 1px 2px rgba(11,15,26,.03); } .refined .home-pill:hover { border-color: #6E36F0; color: #6E36F0; background: #FAFBFC; box-shadow: 0 2px 6px rgba(110,54,240,.10); } .refined .home-pill .material-symbols-outlined { font-size: 18px; transition: transform .2s cubic-bezier(.2,.7,.2,1); } .refined .home-pill:hover .material-symbols-outlined { transform: translateX(-2px); /* arrow points BACK */ } /* --- Footer meta --- */ .refined .footer-meta { font-size: 12px; font-weight: 500; color:#64748b; } .refined .footer-meta-faint { color:#94a3b8; } /* --- Brand mark icon: solid violet, scales on hover --- */ .refined .brand-mark { background:#6E36F0; box-shadow: 0 4px 14px -2px rgba(110,54,240,.30); transition: transform .2s cubic-bezier(.2,.7,.2,1); } .refined a:hover .brand-mark { transform: scale(1.05); } /* --- Info card (institutional-domain hint) --- */ .refined .info-card { background:#FAFBFC; border:1px solid #EEF0F4; color:#475569; font-size: 13.5px; border-radius: 10px; padding: 12px 14px; } /* --- Right form panel: plain white (no mesh swirl) --- */ .refined section.form-panel { background:#FFFFFF; } /* --- Dark brand panel: subtle dot grid + slowly drifting violet glow --- */ .refined aside.brand-panel-refined { background: #0B0F1A; position: relative; overflow: hidden; } .refined aside.brand-panel-refined::before { content:''; position:absolute; inset:0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6; pointer-events:none; } .refined aside.brand-panel-refined::after { content:''; position:absolute; top: 30%; left: 25%; width: 60%; height: 60%; background: radial-gradient(circle at center, rgba(110, 54, 240, 0.30) 0%, transparent 65%); filter: blur(60px); pointer-events:none; animation: drift 22s ease-in-out infinite; will-change: transform; } /* ============================================================ * ANIMATIONS * ============================================================ */ /* Slow background drift on the dark panel — gives the page a heartbeat */ @keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(8%, -6%, 0) scale(1.05); } } /* Staggered fade-in for hero content */ @keyframes refined-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .refined .anim-in { animation: refined-in .5s cubic-bezier(.2,.7,.2,1) both; } .refined .anim-in-1 { animation: refined-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.06s; } .refined .anim-in-2 { animation: refined-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.14s; } .refined .anim-in-3 { animation: refined-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.22s; } .refined .anim-in-4 { animation: refined-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.30s; } .refined .anim-in-5 { animation: refined-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:.38s; } /* Info-card / alert slides in from above when toggled visible */ @keyframes note-in { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } } .refined .info-card:not(.hidden), .refined .alert-error:not(.hidden), .refined .alert-success:not(.hidden) { animation: note-in .25s cubic-bezier(.2,.7,.2,1) both; } /* Pending-page checkmark: gentle pulse on first render */ @keyframes check-in { 0% { opacity:0; transform: scale(.6); } 60% { opacity:1; transform: scale(1.05); } 100% { opacity:1; transform: scale(1); } } .refined .check-icon { animation: check-in .6s cubic-bezier(.2,.8,.2,1.1) both; animation-delay:.2s; } /* Honor users who explicitly request less motion */ @media (prefers-reduced-motion: reduce) { .refined *, .refined *::before, .refined *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }